feat(toks-main): notice slider 이미지 적용 및 window history 없는 경우 home으로 라우팅 (#407)

* ✨ feat: notice slider 적용

* ✨ feat: window history 없는 경우 back button click시 home으로 routing

* ✨ feat: deploy yml에 env 추가

* ✨ feat: change link tag to a tag

* ✨ feat: add getNotice api

* ♻️ refactor: notice api 및 type 분리

* ✨ feat: skeleton ui 적용

Author: chaaerim

.github/workflows/devDeploy.yml

@@ -3,7 +3,7 @@ name: Deploy
 on:
   workflow_dispatch:
     branches:
-    - 'dev'
+      - 'dev'
 
 jobs:
   ci:
@@ -15,6 +15,13 @@ jobs:
       NEXT_PUBLIC_GA_ID: ${{ secrets.GA_ID }}
       NEXT_PUBLIC_HJID: ${{ secrets.HOTJAR_HJID }}
       NEXT_PUBLIC_HJSV: ${{ secrets.HOTJAR_HJSV }}
+      NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
+      NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{ secrets.FIREBASE_AUTH_DOMAIN }}
+      NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}
+      NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.FIREBASE_STORAGE_BUCKET }}
+      NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.FIREBASE_MESSAGING_SENDER_ID }}
+      NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.FIREBASE_MESSAGING_APP_ID }}
+      NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.FIREBASE_MESSAGING_MEASUREMENT_ID }}
 
     strategy:
       matrix:

src/app/template.tsx

@@ -9,6 +9,7 @@ import { CategoryBottomSheet } from './toks-main/components/CategoryBottomSheet'
 export default function Template({ children }: StrictPropsWithChildren) {
   // TODO: useAuth hook 구현
   // TODO: useLogin Modal hook 구현
+  // TODO: GlobalPortal 제거
   const pathName = usePathname();
 
   return (

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,5 @@
+export const SkeletonSlider = () => {
+  return (
+    <div className="aspect-w-3 aspect-h-1 z-0 h-130px w-full animate-pulse rounded-12px bg-gray-110"></div>
+  );
+};

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

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

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

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

src/app/toks-main/constants/queryKeys.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/notice.ts

@@ -8,6 +8,7 @@ import { isVisibleFloatingButtonBottomSheetAtom } from '@/store';
 
 import { CardList } from './components/CardList';
 import { MainPageBottomSheet } from './components/MainPageBottomSheet';
+import { MainPageSlider } from './components/MainPageSlider';
 
 function ToksMainPage() {
   const { getSavedToastInfo, clearSavedToast } = useToast();
@@ -32,6 +33,8 @@ function ToksMainPage() {
           title={toastData.title}
         />
       )}
+      <MainPageSlider />
+      <div className="h-24px" />
       <CardList />
 
       <FloatingButton

src/app/toks-main/page.tsx

@@ -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');
+};