➕ [WV-18] feat : main page에 gallery 추가 구현

app/page.tsx

@@ -2,6 +2,7 @@ import Image from "next/image";
 import MainPoster from "@/assets/images/2024_post_bg_web.png";
 import Schedule from "@/components/main/schedule";
 import Video from "@/components/main/video";
+import Gallery from "@/components/main/gallery";
 
 export default function Main() {
   return (
@@ -21,6 +22,7 @@ export default function Main() {
       {/* video */}
       <Video />
       {/* gallery */}
+      <Gallery />
     </>
   );
 }

assets/images/@index.ts

@@ -13,21 +13,30 @@ export { default as logo_SK } from "./logo_SK.png";
 export { default as logo_SS } from "./logo_SS.png";
 export { default as logo_WO } from "./logo_WO.png";
 export { default as logo_ktwports } from "./logo_ktsports.png";
-export { default as ktwiz } from "./logo_ktwiz.png";
 export { default as ktwiz_en } from "./logo_ktwiz_en.svg";
 export { default as ktwiz_kr } from "./logo_ktwiz_kr.svg";
-export { default as lgtwins } from "./logo_lgtwins.png";
 export { default as gallery } from "./main_title_gallery.png";
 export { default as schedule } from "./main_title_schedule.png";
 export { default as main_title_video } from "./main_title_video.png";
 export { default as map_img } from "./map_img.png";
 export { default as reservation } from "./parking_reservation.png";
 export { default as player } from "./player_EomSangBaek.jpg";
-export { default as schedule_video } from "./schedule_video.png";
 export { default as submenu_bg } from "./submenu_bg.png";
 export { default as about_img1 } from "./team_about_img1.png";
 export { default as about_img2 } from "./team_about_img2.png";
 export { default as about_img3 } from "./team_about_img3.png";
 export { default as about_img4 } from "./team_about_img4.png";
 export { default as ranking } from "./team_ranking.png";
 export { default as wiz_park } from "./wiz_park.jpg";
+export { default as store_banner } from "./store_banner.png";
+export { default as player_banner } from "./player_banner.png";
+export { default as CarouselImage1 } from "./gallery1.jpeg";
+export { default as CarouselImage2 } from "./gallery2.jpeg";
+export { default as CarouselImage3 } from "./gallery3.jpeg";
+export { default as CarouselImage4 } from "./gallery4.jpeg";
+export { default as CarouselImage5 } from "./gallery5.jpeg";
+export { default as CarouselImage6 } from "./gallery6.jpeg";
+export { default as CarouselImage7 } from "./gallery7.jpeg";
+export { default as CarouselImage8 } from "./gallery8.jpeg";
+export { default as CarouselImage9 } from "./gallery9.jpeg";
+export { default as CarouselImage10 } from "./gallery10.jpeg";

components/main/gallery.tsx

@@ -0,0 +1,37 @@
+"use client";
+import Image from "next/image";
+import { gallery, store_banner, player_banner } from "@/assets/images/@index";
+import Carousel from "../ui/custom-carousel";
+import { CAROUSE_ITEMS } from "@/constants/main";
+
+const Gallery = () => {
+  return (
+    <div className="w-[1200px] justify-self-center relative mb-[100px] justify-items-center">
+      <div className="relative h-[620px]">
+        <Image
+          src={gallery}
+          alt="main gallery"
+          width={0}
+          height={0}
+          sizes="100vw"
+          className="w-[700px] mx-auto absolute left-1/2 -translate-x-1/2 -z-10"
+          priority
+        />
+        <div className="w-[1250px] mx-auto pt-[60px] overflow-hidden">
+          <Carousel images={CAROUSE_ITEMS} />
+        </div>
+      </div>
+      <div className="w-[1100px] mt-[40px] flex gap-5 justify-self-center">
+        <Image src={store_banner} alt="Store Banner" width={540} height={190} />
+        <Image
+          src={player_banner}
+          alt="Player of the Month Banner"
+          width={540}
+          height={190}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Gallery;

components/main/schedule.tsx

@@ -1,12 +1,13 @@
 "use client";
 import { useState } from "react";
 import Image from "next/image";
-import MainSchedule from "@/assets/images/main_title_schedule.png";
-import ScheduleVideo from "@/assets/images/schedule_video.png";
-import KtwizLogo from "@/assets/images/logo_ktwiz.png";
-import LgtwinsLogo from "@/assets/images/logo_lgtwins.png";
-import TeamRanking from "@/assets/images/team_ranking.png";
-import ParkingReservaion from "@/assets/images/parking_reservation.png";
+import {
+  schedule,
+  logo_KT,
+  logo_LG,
+  ranking,
+  reservation,
+} from "@/assets/images/@index";
 import IconButton from "@/components/ui/icon-button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { SCHEDULE_LIST } from "@/constants/main";
@@ -22,7 +23,7 @@ const Schedule = () => {
     <div className="w-[1200px] justify-self-center relative mb-[100px]">
       <div className="relative h-[300px]">
         <Image
-          src={MainSchedule}
+          src={schedule}
           alt="main schdule"
           width={0}
           height={0}
@@ -35,7 +36,7 @@ const Schedule = () => {
             <div className="flex justify-between gap-5 px-10 py-[50px]">
               <div className="w-[605px] h-[222px] bg-SYSTEM-white text-SYSTEM-black items-center content-center">
                 {/* 상단 경기 일시 */}
-                <div className="mb-6 mx-5 pb-2 flex gap-11 border-b border-b-ELSE-DE items-center justify-center">
+                <div className="mb-8 mx-5 pb-2 flex gap-11 border-b border-b-ELSE-DE items-center justify-center">
                   <IconButton
                     icon={ChevronLeft}
                     circle
@@ -59,14 +60,14 @@ const Schedule = () => {
                 <div className="flex justify-center">
                   <div className="justify-items-center font-bold">
                     <Image
-                      src={KtwizLogo}
+                      src={logo_KT}
                       alt="ktwiz team logo"
                       width={102}
                       height={95}
                     />
                     <p>KT</p>
                   </div>
-                  <div className="w-64 place-self-center justify-items-center space-y-3">
+                  <div className="w-64 place-self-center justify-items-center space-y-6">
                     <div className="flex mt-3 gap-7 font-extrabold text-6xl">
                       {scheduleData.score}
                       <p className="text-ELSE-B7">:</p>
@@ -84,7 +85,7 @@ const Schedule = () => {
                   </div>
                   <div className="justify-items-center font-bold">
                     <Image
-                      src={LgtwinsLogo}
+                      src={logo_LG}
                       alt="opponent team logo"
                       width={110}
                       height={95}
@@ -94,11 +95,11 @@ const Schedule = () => {
                 </div>
               </div>
               <div className="w-[394px] h-[222px] mr-5 bg-SYSTEM-white text-SYSTEM-black flex items-center justify-center">
-                <Image
-                  src={ScheduleVideo}
-                  alt="schdule video"
-                  width={394}
-                  height={222}
+                <iframe
+                  src="https://tv.naver.com/embed/42663688"
+                  width="394"
+                  height="222"
+                  allowFullScreen
                 />
               </div>
             </div>
@@ -107,13 +108,13 @@ const Schedule = () => {
       </div>
       <div className="w-[1100px] mt-[250px] flex gap-5 justify-self-center">
         <Image
-          src={TeamRanking}
+          src={ranking}
           alt="ktwiz team ranking"
           width={540}
           height={190}
         />
         <Image
-          src={ParkingReservaion}
+          src={reservation}
           alt="parking reservaion"
           width={540}
           height={190}

components/main/video.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import MainVideo from "@/assets/images/main_title_video.png";
+import { main_title_video } from "@/assets/images/@index";
 import VideoCard from "./video-card";
 import { HIGHLIGHT_VIDEO } from "@/constants/main";
 import { Button } from "../ui";
@@ -16,18 +16,18 @@ const Video = () => {
   };
 
   return (
-    <div className="w-[1200px] justify-self-center relative mb-[100px] justify-items-center">
+    <div className="w-[1200px] justify-self-center relative mb-[120px] justify-items-center">
       <div className="relative h-[300px]">
         <Image
-          src={MainVideo}
+          src={main_title_video}
           alt="main schdule"
           width={0}
           height={0}
           sizes="100vw"
-          className="w-[826px] mx-auto absolute left-1/2 -translate-x-1/2 -z-10"
+          className="w-[600px] mx-auto absolute left-1/2 -translate-x-1/2 -z-10"
           priority
         />
-        <div className="w-[1100px] mx-auto pt-[160px]">
+        <div className="w-[1100px] mx-auto pt-[120px]">
           <iframe
             src={`https://tv.naver.com/embed/${mainVideoId}`}
             width="1100"