From 0da667c37a21baacd39e03fde16f6f581a45d808 Mon Sep 17 00:00:00 2001
From: Lee-Dongwook <dlehddnr0713@gmail.com>
Date: Mon, 21 Oct 2024 17:59:16 +0900
Subject: [PATCH] =?UTF-8?q?hotfix=20:=20=EB=8F=99=EC=98=81=EC=83=81=20?=
 =?UTF-8?q?=EC=B4=88=EA=B8=B0=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=8B=9C=20?=
 =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=EB=B3=80=ED=99=94=20=EC=A1=B0=EC=A0=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/app/globals.css        |  9 +++++
 client/src/template/StartPage.tsx | 58 ++++++++++++++++++++++++-------
 2 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/client/src/app/globals.css b/client/src/app/globals.css
index 7fb2fe9..3c4333a 100644
--- a/client/src/app/globals.css
+++ b/client/src/app/globals.css
@@ -79,4 +79,13 @@ body,
   body {
     @apply bg-background text-foreground;
   }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
\ No newline at end of file
diff --git a/client/src/template/StartPage.tsx b/client/src/template/StartPage.tsx
index 503144b..0a70c54 100644
--- a/client/src/template/StartPage.tsx
+++ b/client/src/template/StartPage.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import MuxPlayer from "@mux/mux-player-react";
 import getMainVideoJSON from "@/videos/MainVideo.mp4.json";
@@ -8,20 +8,52 @@ import MainFeatureCard from "@/components/MainFeatureCard";
 import { Button } from "@/components/ui/button";
 
 export default function StartPage() {
-  const playbackId = getMainVideoJSON.providerMetadata.mux.playbackId;
-
+  const [isVideoReady, setIsVideoReady] = useState(false);
+  const [playbackId, setPlaybackId] = useState<string | null>(null);
   const router = useRouter();
 
+  useEffect(() => {
+    const fetchPlaybackId = async () => {
+      try {
+        const videoData = await getMainVideoJSON;
+        setPlaybackId(videoData.providerMetadata.mux.playbackId);
+        setIsVideoReady(true);
+      } catch (error) {
+        console.error("Failed to load video data:", error);
+      }
+    };
+
+    fetchPlaybackId();
+  }, []);
+
   return (
-    <div className="flex flex-row lg:space-x-10 justify-center items-center mx-auto min-h-screen p-6">
-      <MuxPlayer
-        streamType="on-demand"
-        playbackId={playbackId}
-        metadataVideoTitle="MainVideo"
-        metadataViewerUserId="MainVideo"
-        primaryColor="#FFFFFF"
-        secondaryColor="#000000"
-      />
+    <div className="relative flex flex-col lg:flex-row lg:space-x-10 justify-center items-center mx-auto min-h-screen p-6">
+      <div
+        className="relative w-full lg:w-2/3 h-auto mb-8 lg:mb-0"
+        style={{
+          minHeight: "480px",
+          aspectRatio: "16/9",
+          transition: "min-height 0.3s ease, min-width 0.3s ease",
+        }}
+      >
+        {playbackId && (
+          <MuxPlayer
+            streamType="on-demand"
+            playbackId={playbackId}
+            metadataVideoTitle="MainVideo"
+            metadataViewerUserId="MainVideo"
+            primaryColor="#FFFFFF"
+            secondaryColor="#000000"
+            className="w-full h-full object-cover rounded-lg shadow-lg"
+            onLoadedData={() => setIsVideoReady(true)}
+          />
+        )}
+        {!isVideoReady && (
+          <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70 z-10">
+            <p className="text-white text-lg">Loading video...</p>
+          </div>
+        )}
+      </div>
       <div className="mt-10 lg:mt-0 text-center lg:text-left px-4">
         <h1 className="text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6">
           CollaboDocs
@@ -49,7 +81,7 @@ export default function StartPage() {
         </div>
         <Button
           onClick={() => router.push("/signin")}
-          className="w-full mt-12  bg-gray-500 hover:bg-blue-600 text-white py-3 px-6 rounded-lg shadow-md transition duration-300"
+          className="w-full mt-12 bg-gray-500 hover:bg-blue-600 text-white py-3 px-6 rounded-lg shadow-md transition duration-300"
         >
           시작하기
         </Button>