Feat/#300 best piickle

src/@components/@common/BestPiickleCard/index.tsx

@@ -0,0 +1,53 @@
+import { LocationType } from "../../../types/cardCollection";
+import { GTM_CLASS_NAME } from "../../../util/const/gtm";
+import useNavigateCardCollection, { NavigateCardCollectionBestType } from "../hooks/useNavigateCardCollection";
+import * as St from "./style";
+
+interface BestPiickleCardProps {
+  bestPiickle: {
+    _id: string;
+    tags: string[];
+    content: string;
+  };
+  idx: number;
+  canNavigate: boolean;
+  isLast?: boolean;
+}
+
+export default function BestPiickleCard(props: BestPiickleCardProps) {
+  const { bestPiickle, idx, canNavigate, isLast } = props;
+  const { content, tags } = bestPiickle;
+  const GTM_IDX_KEY = `mainBestPiickle${idx + 1}`;
+
+  const navigateCardCollection = useNavigateCardCollection(LocationType.BEST) as NavigateCardCollectionBestType;
+
+  const onClickCard = () => {
+    if (!canNavigate) return;
+    navigateCardCollection(idx);
+  };
+
+  return (
+    <St.Container type="button" className={GTM_CLASS_NAME[GTM_IDX_KEY]} onClick={onClickCard}>
+      {isLast ? (
+        <St.BestPiickleCard className={GTM_CLASS_NAME[GTM_IDX_KEY]}>
+          <St.TagsWrapper className={GTM_CLASS_NAME[GTM_IDX_KEY]}>
+            {tags.map((tag: string, i: number) => {
+              return <St.Tag key={i}>{tag.slice(1)}</St.Tag>;
+            })}
+          </St.TagsWrapper>
+          <St.Content className={GTM_CLASS_NAME[GTM_IDX_KEY]}>{content}</St.Content>
+          <St.PickButtonWrapper className={GTM_CLASS_NAME[GTM_IDX_KEY]}>카드 보기</St.PickButtonWrapper>
+        </St.BestPiickleCard>
+      ) : (
+        <St.LastCard>
+          <St.Content>
+            나머지 주제들도
+            <br />
+            보고 싶다면?
+          </St.Content>
+          <St.LastCardButton>나머지 보기</St.LastCardButton>
+        </St.LastCard>
+      )}
+    </St.Container>
+  );
+}

src/@components/@common/BestPiickleCard/style.ts

@@ -0,0 +1,71 @@
+import styled from "styled-components";
+
+export const Container = styled.button``;
+
+export const BestPiickleCard = styled.div`
+  position: relative;
+
+  width: 18rem;
+  height: 10.6rem;
+
+  padding: 0.8rem 1.2rem;
+
+  border-radius: 0.4rem;
+  background: ${({ theme }) => theme.newColors.lightgreen2};
+`;
+
+export const TagsWrapper = styled.ul`
+  display: flex;
+  gap: 0.8rem;
+`;
+
+export const Tag = styled.li`
+  ${({ theme }) => theme.newFonts.caption1};
+  color: ${({ theme }) => theme.newColors.green};
+`;
+
+export const Content = styled.p`
+  margin-top: 0.4rem;
+
+  text-align: left;
+
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+
+  ${({ theme }) => theme.newFonts.btn1}
+  color: ${({ theme }) => theme.newColors.gray900};
+`;
+
+export const PickButtonWrapper = styled.div`
+  margin-top: 1.2rem;
+
+  ${({ theme }) => theme.newFonts.btn2};
+  color: ${({ theme }) => theme.newColors.gray700};
+
+  text-align: right;
+`;
+
+export const LastCard = styled(BestPiickleCard)`
+  display: flex;
+  flex-direction: column;
+
+  padding-top: 2.1rem;
+  background: ${({ theme }) => theme.newColors.white};
+`;
+
+export const LastCardButton = styled.button`
+  margin-top: 1.2rem;
+  align-self: flex-end;
+
+  width: 6.9rem;
+  height: 2.5rem;
+
+  border-radius: 2.9rem;
+  background: ${({ theme }) => theme.newColors.green};
+
+  color: ${({ theme }) => theme.newColors.white};
+  ${({ theme }) => theme.newFonts.btn2}
+`;

src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx

@@ -1,5 +1,5 @@
+import BestPiickleCard from "../../../@common/BestPiickleCard";
 import useDraggingContainer from "../../../@common/hooks/useDraggingContainer";
-import BestPiickleCard from "../../../MainPage/BestPiickle/BestPiickleCard";
 import { useBestPiickle } from "../../../MainPage/hooks/useBestPiickle";
 import * as St from "./style";
 
@@ -18,9 +18,15 @@ export default function RecommendItem(props: RecommendProps) {
       {bestPiickle && (
         <St.SliderWrapper {...scrollableContainerProps}>
           {bestPiickle &&
-            bestPiickle.data.slice(0, 5).map((bestPiickle, idx) => {
+            bestPiickle.data.slice(0, 4).map((bestPiickle, idx) => {
               return (
-                <BestPiickleCard key={bestPiickle._id} bestPiickle={bestPiickle} idx={idx} canNavigate={!isDragging} />
+                <BestPiickleCard
+                  key={bestPiickle._id}
+                  bestPiickle={bestPiickle}
+                  idx={idx}
+                  canNavigate={!isDragging}
+                  isLast={idx !== 3}
+                />
               );
             })}
         </St.SliderWrapper>

src/@components/MainPage/BestPiickle/index.tsx

@@ -1,9 +1,9 @@
 import { routePaths } from "../../../core/routes/path";
 import { headingTitles } from "../../../util/main/headingTitles";
+import BestPiickleCard from "../../@common/BestPiickleCard";
 import HeadingTitleContainer from "../../@common/HeadingTitleContainer";
 import useDraggingContainer from "../../@common/hooks/useDraggingContainer";
 import { useBestPiickle } from "../hooks/useBestPiickle";
-import BestPiickleCard from "./BestPiickleCard";
 import St from "./style";
 
 export default function BestPiickle() {
@@ -23,7 +23,13 @@ export default function BestPiickle() {
           {bestPiickle &&
             bestPiickle.data.slice(0, 5).map((bestPiickle, idx) => {
               return (
-                <BestPiickleCard key={bestPiickle._id} bestPiickle={bestPiickle} idx={idx} canNavigate={!isDragging} />
+                <BestPiickleCard
+                  key={bestPiickle._id}
+                  bestPiickle={bestPiickle}
+                  idx={idx}
+                  canNavigate={!isDragging}
+                  isLast={idx !== 5}
+                />
               );
             })}
         </St.SliderWrapper>