diff --git a/src/app/toks-main/components/CardList.tsx b/src/app/toks-main/components/CardList.tsx index 497fe038e..749c3494e 100644 --- a/src/app/toks-main/components/CardList.tsx +++ b/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(); diff --git a/src/app/toks-main/components/MainPageSlider/SkeletonSlider.tsx b/src/app/toks-main/components/MainPageSlider/SkeletonSlider.tsx new file mode 100644 index 000000000..57803fbba --- /dev/null +++ b/src/app/toks-main/components/MainPageSlider/SkeletonSlider.tsx @@ -0,0 +1,3 @@ +export const SkeletonSlider = () => { + return
; +}; diff --git a/src/app/toks-main/components/MainPageSlider/index.tsx b/src/app/toks-main/components/MainPageSlider/index.tsx new file mode 100644 index 000000000..2c1252af1 --- /dev/null +++ b/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 ; +}; diff --git a/src/app/toks-main/constants.ts b/src/app/toks-main/constants.ts deleted file mode 100644 index 293f5dfbe..000000000 --- a/src/app/toks-main/constants.ts +++ /dev/null @@ -1,22 +0,0 @@ -export const CARD_LIST_QUERY_DEFAULT = { - pageParams: [], - pages: [], -}; - -export const NOTICESLIDER_IMAGES = [ - { - imageSrc: - 'https://toks-web-asset.s3.ap-northeast-2.amazonaws.com/banner_notice.png', - url: '', - }, - { - imageSrc: - 'https://toks-web-asset.s3.ap-northeast-2.amazonaws.com/banner_qna.png', - url: 'https://docs.google.com/forms/d/e/1FAIpQLSe_LaeFI1m8d96jhNcqmgFSogv_sazh0_lgpURXH0OXc326Ag/viewform?pli=1', - }, - { - imageSrc: - 'https://toks-web-asset.s3.ap-northeast-2.amazonaws.com/banner_insta.png', - url: 'https://www.instagram.com/toks.study?igsh=cnV0aHRhd2xuem01', - }, -]; diff --git a/src/app/toks-main/constants/constants.ts b/src/app/toks-main/constants/constants.ts new file mode 100644 index 000000000..942774260 --- /dev/null +++ b/src/app/toks-main/constants/constants.ts @@ -0,0 +1,4 @@ +export const CARD_LIST_QUERY_DEFAULT = { + pageParams: [], + pages: [], +}; diff --git a/src/app/toks-main/constants/queryKeys.ts b/src/app/toks-main/constants/queryKeys.ts new file mode 100644 index 000000000..5c5a1ddb4 --- /dev/null +++ b/src/app/toks-main/constants/queryKeys.ts @@ -0,0 +1,3 @@ +export const QUERY_KEYS = { + GET_NOTICES: () => ['GET_NOTICE'], +} as const; diff --git a/src/app/toks-main/models/notice.ts b/src/app/toks-main/models/notice.ts new file mode 100644 index 000000000..814b2587c --- /dev/null +++ b/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[]; +} diff --git a/src/app/toks-main/models/progress.ts b/src/app/toks-main/models/progress.ts index b8e074b54..ed358dbcc 100644 --- a/src/app/toks-main/models/progress.ts +++ b/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[]; -} diff --git a/src/app/toks-main/page.tsx b/src/app/toks-main/page.tsx index abb02ec4e..e2d3521e3 100644 --- a/src/app/toks-main/page.tsx +++ b/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} /> )} - + }> + +
diff --git a/src/app/toks-main/remotes/notice.ts b/src/app/toks-main/remotes/notice.ts new file mode 100644 index 000000000..a2786f6e6 --- /dev/null +++ b/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('api/v1/bottom-banners'); +}; diff --git a/src/app/toks-main/remotes/progress.ts b/src/app/toks-main/remotes/progress.ts index 9af15902b..5fd7be2b8 100644 --- a/src/app/toks-main/remotes/progress.ts +++ b/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( `api/v1/fab/user?year=${year}&month=${month}` ); }; - -export const getNotices = async () => { - return await http.get('api/v1/bottom-banners'); -}; diff --git a/src/common/components/NoticeSlider/index.tsx b/src/common/components/NoticeSlider/index.tsx index 2f27c61c8..c7695fadc 100644 --- a/src/common/components/NoticeSlider/index.tsx +++ b/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 }) => ( notice banner ))} diff --git a/src/common/utils/http.ts b/src/common/utils/http.ts index f09c56cf3..1981d6993 100644 --- a/src/common/utils/http.ts +++ b/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;