From a73963fd0358c3b1e68cee1a90e993e2ce47bfcd Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Tue, 15 Oct 2024 15:26:53 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=B6=81=EB=A7=88=ED=81=AC=20=EA=B0=9C=EC=88=98=20?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=B0=8F=20=EB=B6=81=EB=A7=88?=
 =?UTF-8?q?=ED=81=AC=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=86=92?=
 =?UTF-8?q?=EC=9D=B4=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mypage/MypageHeader.tsx | 16 ++++++++++++++--
 src/components/product/Bookmark.tsx    |  6 ++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/mypage/MypageHeader.tsx b/src/components/mypage/MypageHeader.tsx
index 471acd1..5176e4d 100644
--- a/src/components/mypage/MypageHeader.tsx
+++ b/src/components/mypage/MypageHeader.tsx
@@ -1,11 +1,23 @@
+import { axiosInstance } from '@/service/axiosInstance';
 import { useMemberStore } from '@/store/user.store';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import React from 'react';
+import { useQuery } from '@tanstack/react-query';
 
 const MypageHeader = () => {
   const { member } = useMemberStore();
   const router = useRouter();
+
+  const fetchBookmarks = async () => {
+    const { data } = await axiosInstance.get('https://api.moaguide.com/user/bookmark');
+    return data;
+  };
+
+  const {
+    data: bookmarks,
+  } = useQuery({ queryKey: ['bookmarks'], queryFn: fetchBookmarks });
+
   return (
     <div className="flex flex-col gap-[28px] pb-5 border-b border-gray100">
       <div className="w-full flex justify-between items-center">
@@ -29,10 +41,10 @@ const MypageHeader = () => {
           </div>
           <div>
             <div className="flex items-center gap-[14px]">
-              <div className="text-normal text-white">24개</div>
+              <div className="text-normal text-white">{bookmarks}개</div>
               <img
                 src="/images/mypage/right_white.svg"
-                alt=""
+                alt="Bookmarks"
                 className="cursor-pointer"
               />
             </div>
diff --git a/src/components/product/Bookmark.tsx b/src/components/product/Bookmark.tsx
index 398d860..838725a 100644
--- a/src/components/product/Bookmark.tsx
+++ b/src/components/product/Bookmark.tsx
@@ -53,8 +53,9 @@ const Bookmark = ({ content, totalPages, pageNumber }: IProductBuildingProps) =>
   if (isLoading) return <div>Loading...</div>;
   if (error) return <div>Error loading bookmarks</div>;
   return (
-    <div>
+    <div className='min-h-[calc(100dvh-132.5px)] flex flex-col sm:min-h-[calc(100vh-60px)] sm:mb-0 w-[90%] mx-auto'>
       <Container>
+        <div>
         <Image
           src="/images/product/LeftVector.svg"
           alt=""
@@ -65,7 +66,7 @@ const Bookmark = ({ content, totalPages, pageNumber }: IProductBuildingProps) =>
 
         <div className="  text-2xl font-bold mt-[20px]">
           관심종목{' '}
-          <span className="ml-[10px] font-normal text-purple-500">{bookmarks} </span>
+          <span className="ml-[10px] font-normal text-purple-500">{bookmarks}</span>
         </div>
         <div className=" desk:overflow-scroll scrollbar-hide desk2:overflow-visible mb-3 mt-5 sm:mt-8 flex justify-between sm:justify-start items-center gap-5 border-b border-gray100 text-mobileTitle sm:text-title2 px-5 sm:px-0">
           <div
@@ -117,6 +118,7 @@ const Bookmark = ({ content, totalPages, pageNumber }: IProductBuildingProps) =>
           totalPages={totalPages}
           pageNumber={pageNumber}
         />
+        </div>
       </Container>
     </div>
   );