Merge pull request #23 from KTwizviz/WV-18-main-page

➕ [WV-18] feat : 메인페이지 비디오 컴포넌트 추가 구현

app/page.tsx

@@ -1,6 +1,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";
 
 export default function Main() {
   return (
@@ -18,6 +19,7 @@ export default function Main() {
       {/* schedule */}
       <Schedule />
       {/* video */}
+      <Video />
       {/* gallery */}
     </>
   );

components/main/schedule.tsx

@@ -9,7 +9,7 @@ import TeamRanking from "@/assets/images/team_ranking.png";
 import ParkingReservaion from "@/assets/images/parking_reservation.png";
 import IconButton from "@/components/ui/icon-button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { SCHEDULE_LIST } from "@/constants/schedules";
+import { SCHEDULE_LIST } from "@/constants/main";
 
 type DayKey = keyof typeof SCHEDULE_LIST;
 

components/main/video-card.tsx

@@ -0,0 +1,31 @@
+const VideoCard = ({
+  videoId,
+  date,
+  title,
+  onClick,
+}: {
+  videoId: string;
+  date: string;
+  title: string;
+  onClick: () => void;
+}) => {
+  return (
+    <div onClick={onClick} className="cursor-pointer">
+      <iframe
+        src={`https://tv.naver.com/embed/${videoId}?autoplay=0&loop=0&mute=1`}
+        width="250"
+        height="140"
+        allowFullScreen
+        className="rounded-xl pointer-events-none"
+      />
+      <div className="my-4 flex justify-between items-center">
+        <p className="px-2 py-1 rounded-full bg-gradient-to-r from-ELSE-F5 via-ELSE-CC6 to-ELSE-AB2 text-SYSTEM-white text-sm font-semibold">
+          하이라이트
+        </p>
+        <p className="text-ELSE-90 text-m">{date}</p>
+      </div>
+      <p className="text-lg">{title}</p>
+    </div>
+  );
+};
+export default VideoCard;

components/main/video.tsx

@@ -0,0 +1,65 @@
+"use client";
+import Image from "next/image";
+import MainVideo from "@/assets/images/main_title_video.png";
+import VideoCard from "./video-card";
+import { HIGHLIGHT_VIDEO } from "@/constants/main";
+import { Button } from "../ui";
+import { useState } from "react";
+
+const Video = () => {
+  const [mainVideoId, setMainVideoId] = useState<string>(
+    HIGHLIGHT_VIDEO[0].videoId
+  );
+
+  const handleVideoClick = (videoId: string) => {
+    setMainVideoId(videoId);
+  };
+
+  return (
+    <div className="w-[1200px] justify-self-center relative mb-[100px] 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"
+          priority
+        />
+        <div className="w-[1100px] mx-auto pt-[160px]">
+          <iframe
+            src={`https://tv.naver.com/embed/${mainVideoId}`}
+            width="1100"
+            height="620"
+            allowFullScreen
+            className="rounded-2xl"
+          />
+        </div>
+      </div>
+      <div className="w-[1100px] mt-[510px] mb-14 flex gap-[33px] justify-self-center">
+        {HIGHLIGHT_VIDEO.map((video) => (
+          <VideoCard
+            key={video.videoId}
+            videoId={video.videoId}
+            date={video.date}
+            title={video.title}
+            onClick={() => handleVideoClick(video.videoId)}
+          />
+        ))}
+      </div>
+      <Button
+        variant="outline"
+        size="lg"
+        className="text-xl px-24 py-7 border-ELSE-34"
+        onClick={() => {
+          console.log("더 많은 영상보기 이동");
+        }}
+      >
+        더 많은 영상보기
+      </Button>
+    </div>
+  );
+};
+
+export default Video;

constants/main.ts

@@ -0,0 +1,41 @@
+export const SCHEDULE_LIST = {
+  DAY1: {
+    date: "2024.10.11",
+    placeTime: "잠실 18:00",
+    score: "1",
+    target: "LG",
+    targetScore: "4",
+  },
+  DAY2: {
+    date: "2024.10.08",
+    placeTime: "잠실 18:00",
+    score: "3",
+    target: "KIA",
+    targetScore: "2",
+  },
+} as const;
+
+export const HIGHLIGHT_VIDEO = [
+  {
+    videoId: "62245858",
+    date: "2024년 10월 09일",
+    title: "0% 기적을 향한 치타심 끝내기 안타! [위즈덕후]",
+  },
+  {
+    videoId: "62033053",
+    date: "2024년 10월 06일",
+    title:
+      "오늘부터 kt wiz와 지지관계에서 벗어나 kt wiz와 나는 한몸으로 일체가 된다 [위즈덕후]",
+  },
+  {
+    videoId: "62031592",
+    date: "2024년 10월 06일",
+    title: "마냥 안 된다는 법은 없으니까 [비하인드 더 덕아웃]",
+  },
+  {
+    videoId: "61924595",
+    date: "2024년 10월 04일",
+    title:
+      "최초 업셋이 왜 안 나왔는지 알아요? 우리가 5등을 안 해봤기 때문이에요 [위즈덕후]",
+  },
+];