[Feat/#103] 캐러셀 이미지 변경 및 링크 추가 기능 구현

src/app/mobile/main/_components/Carousel/index.tsx

@@ -7,14 +7,17 @@ import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 
 interface CarouselProps {
-  images: string[]; // 이미지 URL 배열
-  onClick?: () => void;
+  images: Array<{ imgUrl: string; link: string }>; // 이미지 URL, link 배열
 }
 
-export default function Carousel({ images, onClick }: CarouselProps) {
+export default function Carousel({ images }: CarouselProps) {
+  const handleClickCarousel = (link: string) => {
+    window.open(link, '_blank');
+  };
+
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    <div onClick={onClick} className="w-full rounded-[20px]">
+    <div className="w-full rounded-[20px]">
       <Swiper
         modules={[Pagination, Autoplay]}
         slidesPerView={1}
@@ -23,13 +26,14 @@ export default function Carousel({ images, onClick }: CarouselProps) {
         loop
         className="rounded-lg shadow-lg"
       >
-        {images.map((src, index) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <SwiperSlide key={index}>
+        {images.map((item, index) => (
+          <SwiperSlide key={item.imgUrl}>
             {/* 이미지의 크기가 맞지 않을 때 화면을 꽉채우게 할건지, 비율을 유지할 건지 정하기 */}
+            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */}
             <img
-              src={src}
+              src={item.imgUrl}
               alt={`Slide ${index + 1}`}
+              onClick={() => handleClickCarousel(item.link)}
               className="h-[168px] w-full object-cover"
             />
           </SwiperSlide>

src/app/mobile/main/page.tsx

@@ -53,10 +53,15 @@ export default function MobileMain() {
     setSearchQuery(e.target.value);
   };
 
-  const imageUrls = [
-    '/assets/images/test.png',
-    '/assets/images/test.png',
-    '/assets/images/test.png',
+  const images = [
+    {
+      imgUrl: '/assets/images/carousel/pwa-notion.png',
+      link: 'https://humdrum-puppet-86a.notion.site/1ab22817262580d9971cc464dc8e2c57?pvs=4',
+    },
+    {
+      imgUrl: '/assets/images/carousel/google-form.png',
+      link: 'https://docs.google.com/forms/d/e/1FAIpQLSeEi5wC3K1e-ekgudEu75OFmQEgXk474WenokYGEbJzyan3IA/viewform?usp=dialog',
+    },
   ];
 
   const handleOpenBottomSheet = (item: Item) => {
@@ -68,14 +73,7 @@ export default function MobileMain() {
     <MobileLayout>
       <MainHeader />
       <div className="mt-10 flex flex-col gap-[50px] px-4 pt-4">
-        <Carousel
-          images={imageUrls}
-          onClick={() =>
-            window.open(
-              'https://humdrum-puppet-86a.notion.site/1ab22817262580d9971cc464dc8e2c57?pvs=4',
-            )
-          }
-        />
+        <Carousel images={images} />
 
         <section className="flex flex-col gap-4">
           <div className="flex items-center justify-between">