Merge pull request #270 from YAPP-Github/feat/banner

[FEAT] 만족도 설문 배너 추가

Author: rbgksqkr

src/app/home/components/Banner/Banner.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Image from 'next/image';
+import Link from 'next/link';
 
 import {
   bannerCarousel,
@@ -14,32 +15,38 @@ import { useSlide } from './hooks/useSlide';
 import { useTouchSlide } from './hooks/useTouchSlide';
 import { SLIDE_SPEED } from '../../home.constants';
 
-import MobileBanner from '@/assets/images/mobileBanner.webp';
-import MobileBannerSecond from '@/assets/images/mobileBanner2.webp';
-import WebBanner from '@/assets/images/webBanner.png';
-import WebBannerSecond from '@/assets/images/webBanner2.png';
+import MobileBanner from '@/assets/images/mobileSurveyBanner.webp';
+import MobileBannerSecond from '@/assets/images/mobileSurveyBanner.webp';
+import WebBanner from '@/assets/images/webSurveyBanner.webp';
+import WebBannerSecond from '@/assets/images/webSurveyBanner.webp';
 import Icon from '@/components/Icon';
 
+const SURVEY_URL = 'https://gradmeet.co.kr/post/0NF84Z489GFJE?utm_source=banner';
+
 const BannerMap = [
   {
     webSrc: WebBanner,
     mobileSrc: MobileBanner,
     alt: '참여자 언제 다 모을지 고민이라면 공고를 올리고 가까운 참여자에게 실험을 알려보세요',
+    url: SURVEY_URL,
   },
   {
     webSrc: WebBannerSecond,
     mobileSrc: MobileBannerSecond,
     alt: '공강 시간에 부담 없이 용돈 버는 방법 학교 근처 실험에 참여하고 보상을 받아보세요',
+    url: SURVEY_URL,
   },
   {
     webSrc: WebBanner,
     mobileSrc: MobileBanner,
     alt: '참여자 언제 다 모을지 고민이라면 공고를 올리고 가까운 참여자에게 실험을 알려보세요',
+    url: SURVEY_URL,
   },
   {
     webSrc: WebBannerSecond,
     mobileSrc: MobileBannerSecond,
     alt: '공강 시간에 부담 없이 용돈 버는 방법 학교 근처 실험에 참여하고 보상을 받아보세요',
+    url: SURVEY_URL,
   },
 ];
 
@@ -68,9 +75,8 @@ const Banner = () => {
             transition: `transform ${SLIDE_SPEED}s ease-in-out`,
           }}
         >
-          {BannerMap.map((banner, idx) => (
-            <picture key={idx} style={{ display: 'block', flex: '0 0 100%' }}>
-              <source media="(max-width: 767px)" srcSet={banner.mobileSrc.src} />
+          {BannerMap.map((banner, idx) => {
+            const imageContent = (
               <Image
                 key={idx}
                 src={banner.webSrc}
@@ -80,8 +86,15 @@ const Banner = () => {
                 width={1000}
                 height={80}
               />
-            </picture>
-          ))}
+            );
+
+            return (
+              <picture key={idx} style={{ display: 'block', flex: '0 0 100%' }}>
+                <source media="(max-width: 767px)" srcSet={banner.mobileSrc.src} />
+                {banner.url ? <Link href={banner.url}>{imageContent}</Link> : imageContent}
+              </picture>
+            );
+          })}
         </div>
       </div>