hotfix : 동영상 초기 렌더링 시 크기 변화 조절

Lee-Dongwook · Oct 21, 2024 · 0da667c · 0da667c
1 parent a2846eb
commit 0da667c
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 13 deletions.
diff --git 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;
+  }
 }
diff --git a/client/src/template/StartPage.tsx b/client/src/template/StartPage.tsx
@@ -1,27 +1,59 @@
 "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";
 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>