fix: 마이페이지 북마크 개수 렌더링 및 북마크 레이아웃 높이 지정

Moaguide-develop · Oct 15, 2024 · a73963f · a73963f
1 parent 906237f
commit a73963f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git 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
@@ -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>
   );