fix: 라우팅 연결 (#224)

SOPT-all · Jan 24, 2025 · 1a6463c · 1a6463c
1 parent 3009d83
commit 1a6463c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/pages/home/components/HomeCarousel/index.tsx b/src/pages/home/components/HomeCarousel/index.tsx
@@ -9,12 +9,14 @@ const ADVERTISEMENTS = [
     imageUrl: KkukgirlImg,
     description: `5주 집중 커리큘럼, 스걸파 출연 댄서의 `,
     description2: '피메일 힙합 기본기 튼튼하게 다지기',
+    id: 25,
   },
-  { imageUrl: ChoreohongImg, description: '코레홍과 함께하는', description2: 'NMIXX-DASH 코레오그래피' },
+  { imageUrl: ChoreohongImg, description: '코레홍과 함께하는', description2: 'NMIXX-DASH 코레오그래피', id: 24 },
   {
     imageUrl: BannerImg,
     description: '알고 싶던 댄서나 관심있는 클래스를 ',
     description2: '한 눈에 모아볼 수 있어요!',
+    id: 0,
   },
 ];
 const HomeCarousel = () => {
@@ -32,7 +34,12 @@ const HomeCarousel = () => {
       {ADVERTISEMENTS.map((data, index) => {
         return (
           <SwiperSlide key={`${index}-${data.description}`}>
-            <SliderItem imageUrl={data.imageUrl} description={data.description} description2={data.description2} />
+            <SliderItem
+              imageUrl={data.imageUrl}
+              description={data.description}
+              description2={data.description2}
+              id={data.id}
+            />
           </SwiperSlide>
         );
       })}

diff --git a/src/pages/home/components/SliderItem/index.tsx b/src/pages/home/components/SliderItem/index.tsx
@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import {
   descriptionStyle,
   moreButtonStyle,
@@ -8,15 +9,24 @@ import {
 } from '@/pages/home/components/SliderItem/index.css';
 import Flex from '@/components/Flex';
 import Head from '@/components/Head';
+import { ROUTES_CONFIG } from '@/routes/routesConfig';
 import { IcArrowRightWhite14 } from '@/assets/svg';
 
 interface SliderItemProps {
   imageUrl: string;
   description: string;
   description2: string;
+  id: number;
 }
 
-const SliderItem = ({ imageUrl, description, description2 }: SliderItemProps) => {
+const SliderItem = ({ imageUrl, description, description2, id }: SliderItemProps) => {
+  const navigate = useNavigate();
+  const handleDetailClick = () => {
+    if (id === 0) {
+      return;
+    }
+    navigate(ROUTES_CONFIG.class.path(`${id}`));
+  };
   return (
     <Flex position="relative" className={containerStyle}>
       <img src={imageUrl} className={imageStyle} />
@@ -29,7 +39,9 @@ const SliderItem = ({ imageUrl, description, description2 }: SliderItemProps) =>
       </Head>
 
       <Flex align="center" gap="0.2rem" position="absolute" className={moreWrapperStyle}>
-        <button className={moreButtonStyle}>자세히 보기</button>
+        <button className={moreButtonStyle} onClick={handleDetailClick}>
+          자세히 보기
+        </button>
         <IcArrowRightWhite14 width={14} height={14} />
       </Flex>
     </Flex>