➕ [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 />
     </>
   );
 }

components/main/gallery.tsx

@@ -0,0 +1,39 @@
+"use client";
+import Image from "next/image";
+import MainGallery from "@/assets/images/main_title_gallery.png";
+import StoreBanner from "@/assets/images/store_banner.png";
+import PlayerBanner from "@/assets/images/player_banner.png";
+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={MainGallery}
+          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={StoreBanner} alt="Store Banner" width={540} height={190} />
+        <Image
+          src={PlayerBanner}
+          alt="Player of the Month Banner"
+          width={540}
+          height={190}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Gallery;

components/main/schedule.tsx

@@ -2,7 +2,6 @@
 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";
@@ -35,7 +34,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
@@ -66,7 +65,7 @@ const Schedule = () => {
                     />
                     <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>
@@ -94,11 +93,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>

components/main/video.tsx

@@ -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}
           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"