✨ feat: notice slider 적용

depromeet · Feb 25, 2024 · 1fb559c · 1fb559c
1 parent 1d48cbf
commit 1fb559c
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 10 deletions.
diff --git a/src/app/toks-main/constants.ts b/src/app/toks-main/constants.ts
@@ -2,3 +2,21 @@ 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/page.tsx b/src/app/toks-main/page.tsx
@@ -2,12 +2,13 @@
 import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 
-import { FloatingButton, Toast, ToastProps } from '@/common';
+import { FloatingButton, NoticeSlider, 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';
 
 function ToksMainPage() {
   const { getSavedToastInfo, clearSavedToast } = useToast();
@@ -32,6 +33,8 @@ function ToksMainPage() {
           title={toastData.title}
         />
       )}
+      <NoticeSlider images={NOTICESLIDER_IMAGES} />
+      <div className="h-24px" />
       <CardList />
 
       <FloatingButton

diff --git a/src/common/components/BackHeader/index.tsx b/src/common/components/BackHeader/index.tsx
@@ -6,6 +6,7 @@ import { ICON_URL, SSRSuspense } from '@/common';
 
 export const BackHeader = () => {
   const router = useRouter();
+
   return (
     <SSRSuspense
       fallback={<div className="h-54px bg-gray-120">로딩중입니다..</div>}

diff --git a/src/common/components/NoticeSlider/index.tsx b/src/common/components/NoticeSlider/index.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { useRef, useState } from 'react';
 import Slider from 'react-slick';
 
@@ -9,18 +10,23 @@ const setting = {
   arrows: false,
   dots: false,
   autoplay: true,
+  autoplaySpeed: 5000,
   infinite: true,
   speed: 700,
   slidesToShow: 1,
   slidesToScroll: 1,
 };
 
+type NoticeSliderImageType = {
+  imageSrc: string;
+  url: 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 +35,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) => (
-          <a
+        {images?.map(({ imageSrc, url }) => (
+          <Link
             key={imageSrc}
             target="_blank"
             rel="noreferrer noopener"
             href={url}
-            className="h-auto rounded-12px"
+            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}
             />
-          </a>
+          </Link>
         ))}
       </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>