Feat/#301 best piickle API

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

@@ -12,23 +12,24 @@ interface RankItemProps {
   cardId: string;
   content: string;
   rank: number;
+  isBookmark: boolean;
 }
 
 export default function RankItem(props: RankItemProps) {
-  const { cardId, content, rank } = props;
+  const { cardId, content, rank, isBookmark } = props;
 
   const navigateRankCollection = useNavigateCardCollection(LocationType.BEST) as NavigateCardCollectionBookMarkType;
 
-  const [isBookmarked, setIsBookmarked] = useState<boolean>(true);
+  const [isBookmarked, setIsBookmarked] = useState<boolean>(isBookmark);
   const toggleBookmark = () => {
     setIsBookmarked((prev) => !prev);
-    //cardCollectionApi.addNDeleteBookmark(cardId);
+    cardCollectionApi.addNDeleteBookmark(cardId);
   };
 
   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}>

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

@@ -1,5 +1,10 @@
+import { LocationType } from "../../../types/cardCollection";
 import { HeadingTitle } from "../../../util/main/headingTitles";
 import HeadingTitleContainer from "../../@common/HeadingTitleContainer";
+import useNavigateCardCollection, {
+  NavigateCardCollectionBookMarkType,
+} from "../../@common/hooks/useNavigateCardCollection";
+import { useBestPiickle } from "../../MainPage/hooks/useBestPiickle";
 import RankItem from "./RankItem";
 import * as St from "./style";
 
@@ -9,20 +14,21 @@ const rankTitles: HeadingTitle = {
 };
 
 export default function BestPiickleRank() {
+  const { bestPiickle } = useBestPiickle();
+
+  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} />
+          ))}
       <St.ButtonWrapper>
-        <St.ContinueButton>이어서 베스트 피클 카드 보기</St.ContinueButton>
+        <St.ContinueButton onClick={() => navigateRankCollection(8)}>이어서 베스트 피클 카드 보기</St.ContinueButton>
       </St.ButtonWrapper>
     </St.RankContainer>
   );