Merge pull request #224 from DevKor-github/feat/banner-img

디코드 배너 적용 ~

Author: halionaz

src/features/home/components/Banner/index.tsx

@@ -3,31 +3,10 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 
 import * as s from './style.css';
 import { useState } from 'react';
-
-// TODO: 실제 API로 교체
-const MOCK_DATA = [
-  {
-    title: '아 배고프다 육회 먹고 싶다',
-    description: '간장 양념 고추장 양념',
-    author: '까치',
-    src: 'https://github.com/user-attachments/assets/66bed657-d8a9-464a-9d9a-f9647028c1d7',
-  },
-  {
-    title: '토리텐 붓카케 우동',
-    description: '새우튀김 추가',
-    author: '호랑이',
-    src: 'https://www.skyweaver.net/images/media/wallpapers/wallpaper1.jpg',
-  },
-  {
-    title: '어떻게 삼시세끼 불닭',
-    description: '오늘 학식은 뭔가요',
-    author: '이따다끼마스',
-    src: 'https://t3.ftcdn.net/jpg/05/64/82/08/360_F_564820811_n9WP1mM43pLiQwLkIA07KF9Hat5vkX2v.jpg',
-  },
-];
+import { BANNER_DATA } from '@/features/home/constants';
 
 const Banner = () => {
-  const [data] = useState(MOCK_DATA);
+  const [data] = useState(BANNER_DATA);
   const totalIndex = data.length;
   const [currentIndex, setCurrentIndex] = useState(0);
 
@@ -47,7 +26,13 @@ const Banner = () => {
       >
         {data.map((item, index) => (
           <SwiperSlide key={`${item.title}-${index}`}>
-            <img className={s.Image} src={item.src} alt={item.title} />
+            {item.link ? (
+              <a href={item.link} target="_blank" rel="noopener noreferrer">
+                <img className={s.Image} src={item.src} alt={item.title} />
+              </a>
+            ) : (
+              <img className={s.Image} src={item.src} alt={item.title} />
+            )}
           </SwiperSlide>
         ))}
       </Swiper>
@@ -57,8 +42,12 @@ const Banner = () => {
           <div className={s.Title}>{currentData.title}</div>
           <div className={s.DescriptionWrapper}>
             <span>{currentData.description}</span>
-            <span className={s.Dot} />
-            <span>{currentData.author}</span>
+            {currentData.author && (
+              <>
+                <span className={s.Dot} />
+                <span>{currentData.author}</span>
+              </>
+            )}
           </div>
         </div>
         <div className={s.Fraction}>

src/features/home/constants.ts

@@ -0,0 +1,28 @@
+import banner1 from '@/libs/assets/external_banner_1.webp';
+import banner2 from '@/libs/assets/external_banner_2.webp';
+
+export interface BannerInterface {
+  title?: string;
+  description?: string;
+  author?: string;
+  src: string;
+  link?: string;
+}
+
+// TODO: 실제 API로 교체
+export const BANNER_DATA: BannerInterface[] = [
+  {
+    title: 'de:Kode your Color',
+    description: '고연전 레플리카도 디코드와 함께!',
+    author: 'de:Kode',
+    src: banner1,
+    link: 'https://linktr.ee/eugssmixx',
+  },
+  {
+    title: 'de:Kode your Color',
+    description: '고연전 레플리카도 디코드와 함께!',
+    author: 'de:Kode',
+    src: banner2,
+    link: 'https://linktr.ee/eugssmixx',
+  },
+];