Merge pull request #110 from geulDa/api/#107/main-api

Api: main 페이지 스탬프 조회 api 연결

Author: jjangminii

src/pages/main/index.tsx

@@ -3,15 +3,19 @@ import { BottomNav, ControlBar } from '@/shared/components';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import StampBoard from '@/shared/components/main/components/stampBoard/StampBoard';
+import { useGetStampStatus } from '@/shared/main/queries/useGetStampStatus';
 
 export default function MainPage() {
   const router = useRouter();
+
+  const { data, isLoading, isError } = useGetStampStatus();
+
   return (
     <div
       className={cn(
         'px-[2.4rem] bg-white flex flex-col gap-[1rem] h-full pt-[1.3rem] pb-[12rem]',
       )}
-    > 
+    >
       <ControlBar
         isLoggedIn={false}
         onLogin={() => {}}
@@ -23,18 +27,18 @@ export default function MainPage() {
         <section>
           <Image
             src='/assets/bannerMain.svg'
-            alt=""
-            aria-hidden="true"
+            alt=''
+            aria-hidden='true'
             width={354}
             height={79}
             className='w-full h-auto object-cover block'
           />
         </section>
 
         <section
-          role="button"
+          role='button'
           tabIndex={0}
-          aria-label="보드판으로 이동"
+          aria-label='보드판으로 이동'
           onClick={() => {
             router.push('/main/Board');
           }}
@@ -44,12 +48,24 @@ export default function MainPage() {
             alt='보드판'
             width={354}
             height={426.36}
-            className='w-full h-auto object-cover block'
+            className='w-full h-auto object-cover block cursor-pointer transition-transform hover:scale-[1.01]'
           />
         </section>
 
-        <StampBoard count={3} total={10} />
+        {isLoading ? (
+          <p className='text-gray-400 text-center py-4'>불러오는 중...</p>
+        ) : isError ? (
+          <p className='text-red-400 text-center py-4'>
+            데이터를 불러오지 못했습니다 😢
+          </p>
+        ) : (
+          <StampBoard
+            count={data?.collectedStampCount ?? 0}
+            total={data?.totalStampCount ?? 10}
+          />
+        )}
       </main>
+
       <BottomNav />
     </div>
   );

src/shared/main/getStampStatus.ts

@@ -0,0 +1,15 @@
+import { apiAuth } from '@/shared/api/instance';
+import type { ApiResponse } from '@/shared/types/authtypes';
+
+export interface StampStatus {
+  totalStampCount: number;
+  collectedStampCount: number;
+  stampIds: number[];
+}
+
+export const getStampStatus = async (): Promise<StampStatus> => {
+  const { data } = await apiAuth.get<ApiResponse<StampStatus>>(
+    '/api/stamps/collection',
+  );
+  return data.data;
+};

src/shared/main/queries/useGetStampStatus.ts

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+import { getStampStatus } from '@/shared/main/getStampStatus';
+
+/**
+ * 스탬프 수집 현황 조회
+ * - 비로그인도 가능
+ */
+
+export const useGetStampStatus = () => {
+  return useQuery({
+    queryKey: ['stampStatus'],
+    queryFn: getStampStatus,
+  });
+};