♻️ refactor: notice api 및 type 분리

src/app/toks-main/components/CardList.tsx

@@ -9,7 +9,7 @@ import { useQuizListInfinityQuery } from '@/queries/useQuizListInfinityQuery';
 
 import { QuizNotice } from './QuizNotice';
 import { SkeletonCardList } from './SkeletonCard';
-import { CARD_LIST_QUERY_DEFAULT } from '../constants';
+import { CARD_LIST_QUERY_DEFAULT } from '../constants/constants';
 
 export const CardList = () => {
   const router = useRouter();

src/app/toks-main/components/MainPageSlider/SkeletonSlider.tsx

@@ -0,0 +1,3 @@
+export const SkeletonSlider = () => {
+  return <div></div>;
+};

src/app/toks-main/components/MainPageSlider/index.tsx

@@ -0,0 +1,26 @@
+'use client';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { NoticeSlider } from '@/common';
+
+import { QUERY_KEYS } from '../../constants/queryKeys';
+import { getNotices } from '../../remotes/notice';
+
+export const MainPageSlider = () => {
+  const { data: notices } = useSuspenseQuery({
+    queryKey: [QUERY_KEYS.GET_NOTICES],
+    queryFn: async () => {
+      try {
+        return await getNotices();
+      } catch (err) {
+        throw new Error('배너를 가져오는데 실패했습니다.');
+      }
+    },
+  });
+
+  const imageInfo = notices.bottomBanners.map((el) => {
+    return { imageUrl: el.imageUrl, landingUrl: el.landingUrl };
+  });
+
+  return <NoticeSlider images={imageInfo} />;
+};

src/app/toks-main/constants/constants.ts

@@ -0,0 +1,4 @@
+export const CARD_LIST_QUERY_DEFAULT = {
+  pageParams: [],
+  pages: [],
+};

src/app/toks-main/constants/queryKeys.ts

@@ -0,0 +1,3 @@
+export const QUERY_KEYS = {
+  GET_NOTICES: () => ['GET_NOTICE'],
+} as const;

src/app/toks-main/models/notice.ts

@@ -0,0 +1,12 @@
+interface NoticeInfo {
+  id: number;
+  title: string;
+  seq: number;
+  imageUrl: string;
+  landingUrl: string;
+  isActive: boolean;
+}
+
+export interface NoticeResponse {
+  bottomBanners: NoticeInfo[];
+}

src/app/toks-main/models/progress.ts

@@ -4,16 +4,3 @@ export interface ProgressResponse {
   description1: string;
   description2: string;
 }
-
-interface NoticeInfo {
-  id: number;
-  title: string;
-  seq: number;
-  imageUrl: string;
-  landingUrl: string;
-  isActive: boolean;
-}
-
-export interface NoticeResponse {
-  bottomBanners: NoticeInfo[];
-}

src/app/toks-main/page.tsx

@@ -2,13 +2,14 @@
 import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 
-import { FloatingButton, NoticeSlider, Toast, ToastProps } from '@/common';
+import { FloatingButton, SSRSuspense, Toast, ToastProps } from '@/common';
 import { useToast } from '@/common/hooks';
 import { isVisibleFloatingButtonBottomSheetAtom } from '@/store';
 
 import { CardList } from './components/CardList';
 import { MainPageBottomSheet } from './components/MainPageBottomSheet';
-import { NOTICESLIDER_IMAGES } from './constants';
+import { MainPageSlider } from './components/MainPageSlider';
+import { SkeletonSlider } from './components/MainPageSlider/SkeletonSlider';
 
 function ToksMainPage() {
   const { getSavedToastInfo, clearSavedToast } = useToast();
@@ -33,7 +34,9 @@ function ToksMainPage() {
           title={toastData.title}
         />
       )}
-      <NoticeSlider images={NOTICESLIDER_IMAGES} />
+      <SSRSuspense fallback={<SkeletonSlider />}>
+        <MainPageSlider />
+      </SSRSuspense>
       <div className="h-24px" />
       <CardList />
 

src/app/toks-main/remotes/notice.ts

@@ -0,0 +1,7 @@
+import { http } from '@/common';
+
+import { NoticeResponse } from '../models/notice';
+
+export const getNotices = async () => {
+  return await http.get<NoticeResponse>('api/v1/bottom-banners');
+};

src/app/toks-main/remotes/progress.ts

@@ -1,13 +1,9 @@
 import { http } from '@/common';
 
-import { NoticeResponse, ProgressResponse } from '../models/progress';
+import { ProgressResponse } from '../models/progress';
 
 export const getProgress = async (month: number, year: number) => {
   return await http.get<ProgressResponse>(
     `api/v1/fab/user?year=${year}&month=${month}`
   );
 };
-
-export const getNotices = async () => {
-  return await http.get<NoticeResponse>('api/v1/bottom-banners');
-};

src/common/components/NoticeSlider/index.tsx

@@ -17,8 +17,8 @@ const setting = {
 };
 
 type NoticeSliderImageType = {
-  imageSrc: string;
-  url: string;
+  imageUrl: string;
+  landingUrl: string;
 };
 
 type NoticeSliderProp = {
@@ -41,18 +41,18 @@ export const NoticeSlider = ({ images }: NoticeSliderProp) => {
         {...setting}
         afterChange={(index) => handleAfterChange(index + 1)}
       >
-        {images?.map(({ imageSrc, url }) => (
+        {images?.map(({ imageUrl, landingUrl }) => (
           <a
-            key={imageSrc}
+            key={imageUrl}
             target="_blank"
             rel="noreferrer noopener"
-            href={url}
+            href={landingUrl}
             className="h-auto rounded-12px focus:outline-none"
           >
             <img
               className="aspect-w-3 aspect-h-1 z-0 h-auto w-full rounded-12px"
               alt="notice banner"
-              src={imageSrc}
+              src={imageUrl}
             />
           </a>
         ))}

src/common/utils/http.ts

@@ -196,6 +196,10 @@ http.interceptors.response.use(
 );
 
 http.interceptors.request.use((config) => {
+  if (typeof window === 'undefined') {
+    return config;
+  }
+
   const accessToken = getCookie('accessToken');
   if (accessToken) {
     config.headers['X-TOKS-AUTH-TOKEN'] = accessToken;