Feat/#301 best piickle API

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

@@ -0,0 +1,16 @@
+import React from "react";
+
+import * as St from "./styled";
+
+export default function LastBestPiickleCard() {
+  return (
+    <St.LastCard>
+      <St.LastCardContent>
+        나머지 주제들도
+        <br />
+        보고 싶다면?
+      </St.LastCardContent>
+      <St.LastCardWrapper>나머지 보기</St.LastCardWrapper>
+    </St.LastCard>
+  );
+}

src/@components/@common/BestPiickleCard/LastBestPiickleCard/styled.ts

@@ -0,0 +1,50 @@
+import styled from "styled-components";
+
+export const LastCard = styled.div`
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  width: 18rem;
+  height: 10.6rem;
+
+  border-radius: 0.4rem;
+
+  padding: 0.8rem 1.2rem;
+  padding-top: 2.1rem;
+  background: ${({ theme }) => theme.newColors.white};
+`;
+
+export const LastCardWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  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}
+`;
+
+export const LastCardContent = 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};
+`;

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

@@ -1,6 +1,7 @@
 import { LocationType } from "../../../types/cardCollection";
 import { GTM_CLASS_NAME } from "../../../util/const/gtm";
-import useNavigateCardCollection, { NavigateCardCollectionBestType } from "../hooks/useNavigateCardCollection";
+import useNavigateCardCollection, { NavigateRecentCollectionType } from "../hooks/useNavigateCardCollection";
+import LastBestPiickleCard from "./LastBestPiickleCard";
 import * as St from "./style";
 
 interface BestPiickleCardProps {
@@ -12,23 +13,24 @@ interface BestPiickleCardProps {
   idx: number;
   canNavigate: boolean;
   isLast?: boolean;
+  locationType: LocationType;
 }
 
 export default function BestPiickleCard(props: BestPiickleCardProps) {
-  const { bestPiickle, idx, canNavigate, isLast } = props;
+  const { bestPiickle, idx, canNavigate, isLast, locationType } = props;
   const { content, tags } = bestPiickle;
   const GTM_IDX_KEY = `mainBestPiickle${idx + 1}`;
 
-  const navigateCardCollection = useNavigateCardCollection(LocationType.BEST) as NavigateCardCollectionBestType;
+  const navigateCardCollection = useNavigateCardCollection(locationType) as NavigateRecentCollectionType;
 
-  const onClickCard = () => {
+  const handleClickCard = () => {
     if (!canNavigate) return;
     navigateCardCollection(idx);
   };
 
   return (
-    <St.Container type="button" className={GTM_CLASS_NAME[GTM_IDX_KEY]} onClick={onClickCard}>
-      {isLast ? (
+    <St.Container type="button" className={GTM_CLASS_NAME[GTM_IDX_KEY]} onClick={handleClickCard}>
+      {!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) => {
@@ -39,14 +41,7 @@ export default function BestPiickleCard(props: BestPiickleCardProps) {
           <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>
+        <LastBestPiickleCard />
       )}
     </St.Container>
   );

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

@@ -47,25 +47,3 @@ export const PickButtonWrapper = styled.div`
 
   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/@common/hooks/useNavigateCardCollection.ts

@@ -12,6 +12,9 @@ export type NavigateCardCollectionBookMarkType = (sliderIdx?: number) => void;
 export type NavigateCardCollectionCategoryType = (categoryId: string, sliderIdx?: number) => void;
 export type NavigateCardCollectionFilterType = (filterTypes: string[], sliderIdx?: number) => void;
 export type NavigateCardCollectionMedleyType = (medleyId: string, sliderIdx?: number) => void;
+export type NavigateRecentCollectionType = (sliderIdx?: number) => void;
+export type NavigateFemaleCollectionType = (sliderIdx?: number) => void;
+export type NavigateMaleCollectionType = (sliderIdx?: number) => void;
 
 export default function useNavigateCardCollection(locationType: LocationType) {
   const navigate = useNavigate();
@@ -57,6 +60,22 @@ export default function useNavigateCardCollection(locationType: LocationType) {
         navigate(`${routePaths.CardCollection}?type=${LocationType.MEDLEY}&medleyId=${medleyId}`);
         setSliderIdx(sliderIdx);
       };
+
+    case LocationType.RECENT:
+      return (sliderIdx = 0) => {
+        navigate(`${routePaths.CardCollection}?type=${LocationType.RECENT}`);
+        setSliderIdx(sliderIdx);
+      };
+    case LocationType.FEMALE:
+      return (sliderIdx = 0) => {
+        navigate(`${routePaths.CardCollection}?type=${LocationType.FEMALE}`);
+        setSliderIdx(sliderIdx);
+      };
+    case LocationType.MALE:
+      return (sliderIdx = 0) => {
+        navigate(`${routePaths.CardCollection}?type=${LocationType.MALE}`);
+        setSliderIdx(sliderIdx);
+      };
   }
 }
 

src/@components/BestPiicklePage/BestPiickleRank/RankItem/index.tsx

@@ -1,37 +1,33 @@
-import { useState } from "react";
-
 import IcBookmarkCheck_16_20 from "../../../../asset/icon/IcBookmarkCheck_16_20";
-import { cardCollectionApi } from "../../../../core/api/cardCollection";
 import { LocationType } from "../../../../types/cardCollection";
 import useNavigateCardCollection, {
   NavigateCardCollectionBookMarkType,
 } from "../../../@common/hooks/useNavigateCardCollection";
+import useCardBookmark from "../../../CardCollectionPage/hooks/useCardBookmark";
 import * as St from "./style";
 
 interface RankItemProps {
+  openLoginModalHandler: () => void;
   cardId: string;
   content: string;
   rank: number;
+  isBookmark: boolean;
 }
 
 export default function RankItem(props: RankItemProps) {
-  const { cardId, content, rank } = props;
+  const { cardId, content, rank, isBookmark, openLoginModalHandler } = props;
 
   const navigateRankCollection = useNavigateCardCollection(LocationType.BEST) as NavigateCardCollectionBookMarkType;
 
-  const [isBookmarked, setIsBookmarked] = useState<boolean>(true);
-  const toggleBookmark = () => {
-    setIsBookmarked((prev) => !prev);
-    //cardCollectionApi.addNDeleteBookmark(cardId);
-  };
+  const { isBookmarked, handleClickBookmark } = useCardBookmark(isBookmark, openLoginModalHandler);
 
   return (
     <St.RankItemContainer>
       <St.RankItemContent>
-        <St.RankItemNumber idx={rank}>{rank}</St.RankItemNumber>
+        <St.RankItemNumber idx={rank}>{rank + 1}</St.RankItemNumber>
         <St.RankItemText>{content}</St.RankItemText>
       </St.RankItemContent>
-      <St.BookmarkWrapper onClick={toggleBookmark}>
+      <St.BookmarkWrapper onClick={() => handleClickBookmark(cardId)}>
         <IcBookmarkCheck_16_20 isChecked={isBookmarked} />
       </St.BookmarkWrapper>
       <St.RankItemLink type="button" onClick={() => navigateRankCollection(rank)} />

src/@components/BestPiicklePage/BestPiickleRank/index.tsx

@@ -1,5 +1,12 @@
+import { LocationType } from "../../../types/cardCollection";
 import { HeadingTitle } from "../../../util/main/headingTitles";
 import HeadingTitleContainer from "../../@common/HeadingTitleContainer";
+import useModal from "../../@common/hooks/useModal";
+import useNavigateCardCollection, {
+  NavigateCardCollectionBookMarkType,
+} from "../../@common/hooks/useNavigateCardCollection";
+import LoginModal from "../../@common/LoginModal";
+import { useBestPiickle } from "../../MainPage/hooks/useBestPiickle";
 import RankItem from "./RankItem";
 import * as St from "./style";
 
@@ -9,21 +16,30 @@ const rankTitles: HeadingTitle = {
 };
 
 export default function BestPiickleRank() {
+  const { bestPiickle } = useBestPiickle();
+  const { isModalOpen: isLoginModalOpen, toggleModal: toggleLoginModal } = useModal();
+  const navigateRankCollection = useNavigateCardCollection(LocationType.BEST) as NavigateCardCollectionBookMarkType;
   return (
     <St.RankContainer>
-      {/* todo : rankitem id 수정*/}
       <HeadingTitleContainer headingTitles={rankTitles} paddingVerticalValue={1.6} />
-      <RankItem cardId="1" content="상대방의첫인상을기억하나요저는몰라요그냥해그냥해그냥해" rank={1} />
-      <RankItem cardId="1" content="상대방의 첫인상을 기억하나요?" rank={2} />
-      <RankItem cardId="1" content="상대방의 첫인상을 기억하나요?" rank={3} />
-      <RankItem cardId="1" content="상대방의 첫인상을 기억하나요?" rank={4} />
-      <RankItem cardId="1" content="상대방의 첫인상을 기억하나요?" rank={5} />
-      <RankItem cardId="1" content="상대방의 첫인상을 기억하나요?" rank={6} />
-      <RankItem cardId="1" content="상대방의 첫인상을 기억하나요?" rank={7} />
-      <RankItem cardId="1" content="상대방의 첫인상을 기억하나요?" rank={8} />
+      {bestPiickle &&
+        [...bestPiickle.data]
+          .slice(0, 8)
+          .map(({ _id, content, isBookmark }, idx) => (
+            <RankItem
+              key={_id}
+              cardId={_id}
+              content={content}
+              rank={idx}
+              isBookmark={isBookmark}
+              openLoginModalHandler={toggleLoginModal}
+            />
+          ))}
       <St.ButtonWrapper>
-        <St.ContinueButton>이어서 베스트 피클 카드 보기</St.ContinueButton>
+        <St.ContinueButton onClick={() => navigateRankCollection(8)}>이어서 베스트 피클 카드 보기</St.ContinueButton>
       </St.ButtonWrapper>
+
+      {isLoginModalOpen && <LoginModal closeHandler={toggleLoginModal} contents={"북마크 기능인 마이피클을"} />}
     </St.RankContainer>
   );
 }

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

@@ -1,34 +1,34 @@
 import BestPiickleCard from "../../../@common/BestPiickleCard";
 import useDraggingContainer from "../../../@common/hooks/useDraggingContainer";
-import { useBestPiickle } from "../../../MainPage/hooks/useBestPiickle";
+import { recommendListType } from "..";
 import * as St from "./style";
 
 interface RecommendProps {
-  recommendType: string;
+  recommendList: recommendListType;
 }
 
 export default function RecommendItem(props: RecommendProps) {
-  const { recommendType } = props;
-  const { bestPiickle } = useBestPiickle();
+  const { recommendList } = props;
   const { scrollableContainerProps, isDragging } = useDraggingContainer();
+
   return (
     <St.RecommemdItemContainer>
-      <St.RecommendType>{recommendType}</St.RecommendType>
+      <St.RecommendType>{recommendList.subtitle}</St.RecommendType>
 
-      {bestPiickle && (
+      {recommendList.cards && (
         <St.SliderWrapper {...scrollableContainerProps}>
-          {bestPiickle &&
-            bestPiickle.data.slice(0, 4).map((bestPiickle, idx) => {
-              return (
-                <BestPiickleCard
-                  key={bestPiickle._id}
-                  bestPiickle={bestPiickle}
-                  idx={idx}
-                  canNavigate={!isDragging}
-                  isLast={idx !== 3}
-                />
-              );
-            })}
+          {recommendList.cards.slice(0, 4).map((cards, idx) => {
+            return (
+              <BestPiickleCard
+                key={cards._id}
+                bestPiickle={cards}
+                idx={idx}
+                canNavigate={!isDragging}
+                isLast={idx === 3}
+                locationType={recommendList.locationType}
+              />
+            );
+          })}
         </St.SliderWrapper>
       )}
     </St.RecommemdItemContainer>

src/@components/BestPiicklePage/BestPiickleRecommend/hooks/useCardsByGender.ts

@@ -0,0 +1,20 @@
+import useSWR from "swr";
+
+import { realReq } from "../../../../core/api/common/axios";
+import { PATH } from "../../../../core/api/common/constants";
+import { CardList } from "../../../../types/cardCollection";
+import { PiickleSWRResponse } from "../../../../types/remote/swr";
+
+export function useCardsByGender(gender: "남" | "여") {
+  const { data } = useSWR<PiickleSWRResponse<CardList[]>>(
+    `${PATH.CARDS_}${PATH.CARDS_GENDER}/${gender}`,
+    realReq.GET_SWR,
+    {
+      suspense: true,
+    },
+  );
+
+  return {
+    genderBookmarkedCards: data?.data.data,
+  };
+}

src/@components/BestPiicklePage/BestPiickleRecommend/hooks/useRecentlyBookmarked.ts

@@ -0,0 +1,16 @@
+import useSWR from "swr";
+
+import { realReq } from "../../../../core/api/common/axios";
+import { PATH } from "../../../../core/api/common/constants";
+import { RecentCardList } from "../../../../types/cardCollection";
+import { PiickleSWRResponse } from "../../../../types/remote/swr";
+
+export function useRecentlyBookmarked() {
+  const { data } = useSWR<PiickleSWRResponse<RecentCardList>>(`${PATH.CARDS_}${PATH.CARDS_RECENT}`, realReq.GET_SWR, {
+    suspense: true,
+  });
+
+  return {
+    recentlyBookmarkedCards: data?.data.data.cardResponseDtos,
+  };
+}