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 적용

.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/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/page.tsx

@@ -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/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/common/components/BackHeader/index.tsx

@@ -6,13 +6,20 @@ import { ICON_URL, SSRSuspense } from '@/common';
 
 export const BackHeader = () => {
   const router = useRouter();
+  const onClick = () => {
+    if (typeof window !== 'undefined' && window.history.length > 1) {
+      router.back();
+    } else {
+      router.push('/');
+    }
+  };
   return (
     <SSRSuspense
       fallback={<div className="h-54px bg-gray-120">로딩중입니다..</div>}
     >
       <nav className="sticky left-0 right-0 top-0 z-50 h-54px bg-gray-120">
         <div className="flex h-full w-full items-center justify-between">
-          <button type="button" onClick={() => router.back()}>
+          <button type="button" onClick={onClick}>
             <Image
               className="h-auto w-24px"
               src={ICON_URL.CHEVRON_LEFT_BIG}

src/common/components/NoticeSlider/index.tsx

@@ -9,18 +9,23 @@ const setting = {
   arrows: false,
   dots: false,
   autoplay: true,
+  autoplaySpeed: 5000,
   infinite: true,
   speed: 700,
   slidesToShow: 1,
   slidesToScroll: 1,
 };
 
+type NoticeSliderImageType = {
+  imageUrl: string;
+  landingUrl: string;
+};
+
 type NoticeSliderProp = {
-  images: string[];
-  url?: string;
+  images: NoticeSliderImageType[];
 };
 
-export const NoticeSlider = ({ images, url }: NoticeSliderProp) => {
+export const NoticeSlider = ({ images }: NoticeSliderProp) => {
   const slider = useRef<Slider>(null);
   const [currentSlide, setCurrentSlide] = useState(1);
 
@@ -29,31 +34,31 @@ export const NoticeSlider = ({ images, url }: NoticeSliderProp) => {
   };
 
   return (
-    <div className="relative">
+    <div className="relative w-full">
       <Slider
         ref={slider}
         className="w-full"
         {...setting}
         afterChange={(index) => handleAfterChange(index + 1)}
       >
-        {images?.map((imageSrc) => (
+        {images?.map(({ imageUrl, landingUrl }) => (
           <a
-            key={imageSrc}
+            key={imageUrl}
             target="_blank"
             rel="noreferrer noopener"
-            href={url}
-            className="h-auto rounded-12px"
+            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>
         ))}
       </Slider>
       {images.length > 1 && (
-        <span className="absolute bottom-12px right-12px z-10 w-fit rounded-100px bg-gray-120 px-12px py-8px opacity-50">
+        <span className="absolute bottom-12px right-12px z-10 w-fit rounded-100px bg-gray-120 px-12px py-6px opacity-50">
           <Text typo="caption">
             {currentSlide}/{images.length}
           </Text>

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;