FE: [feat] 랜딩 페이지 퍼블리싱 #34

src/frontend/eyesee-admin/src/apis/index.ts

@@ -56,7 +56,6 @@ function createInstance(type: string) {
  * 이 함수는 기본 URL만 설정된 Axios 인스턴스를 생성합니다.
  * 인증 토큰이 필요하지 않은 API 요청(예: 로그인, 회원가입 등)에 사용됩니다.
  */
-// Todo: .env 파일에서 환경변수로 api 주소를 가져오고 있지만, 서버 주소가 나오면 env 파일 없이도 사용 가능하게 수정해야 함.
 function createInstanceWithoutAuth() {
   const instance = axios.create({
     baseURL: process.env.NEXT_PUBLIC_API_KEY,

src/frontend/eyesee-user/package.json

@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "15.0.2",
     "react": "19.0.0-rc-02c0e824-20241028",
-    "react-dom": "19.0.0-rc-02c0e824-20241028",
-    "next": "15.0.2"
+    "react-dom": "19.0.0-rc-02c0e824-20241028"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.2",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.2"
+    "typescript": "^5"
   }
 }

src/frontend/eyesee-user/src/app/(home)/page.tsx

@@ -1,7 +1,15 @@
+import HomeHeader from "@/components/home/HomeHeader";
+import Explain from "@/assets/icons/Explain.svg";
+import HomeCta from "@/components/home/HomeCta";
+
 const HomePage = () => {
   return (
-    <div>
-      <div>유저 페이지</div>
+    <div className="bg-bgGradient w-screen h-screen flex flex-col justify-between">
+      <HomeHeader />
+      <div className="mb-[10vh]">
+        <Explain className="mx-[8vw] mb-[12vh]" />
+        <HomeCta />
+      </div>
     </div>
   );
 };

src/frontend/eyesee-user/src/app/realTimeVideo/page.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef } from "react";
+
+const RealTimeVideoPage = () => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  // 비디오 스트림 가져오기
+  const startStreaming = async () => {
+    try {
+      const constraints = { video: true };
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+      }
+    } catch (error) {
+      console.error("비디오 스트림 가져오기 오류:", error);
+    }
+  };
+
+  // Canvas를 사용해 비디오 프레임을 JPEG로 캡처하고 서버에 전송
+  const captureAndSendFrame = async () => {
+    if (canvasRef.current && videoRef.current) {
+      const canvas = canvasRef.current;
+      const video = videoRef.current;
+
+      // Canvas 크기를 비디오와 동일하게 설정
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+
+      // Canvas에 현재 비디오 프레임 그리기
+      const context = canvas.getContext("2d");
+      if (context) {
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+        // 캡처된 Canvas를 JPEG Blob으로 변환
+        canvas.toBlob(async (blob) => {
+          if (blob) {
+            // JPEG 이미지를 서버로 전송
+            await sendImageToServer(blob);
+          }
+        }, "image/jpeg");
+      }
+    }
+  };
+
+  // Blob 데이터를 서버에 전송하는 함수
+  const sendImageToServer = async (blob: Blob) => {
+    const formData = new FormData();
+    formData.append("image", blob, "frame.jpg");
+
+    try {
+      const response = await fetch("/api/upload-image", {
+        method: "POST",
+        body: formData,
+      });
+      if (!response.ok) {
+        throw new Error("이미지 전송 오류");
+      }
+      console.log("이미지 전송 성공");
+    } catch (error) {
+      console.error("이미지 전송 실패:", error);
+    }
+  };
+
+  // 비디오 스트리밍 시작 및 일정 간격으로 프레임 캡처
+  useEffect(() => {
+    startStreaming();
+
+    // 0.1초에 한 번씩 프레임 캡처 및 전송
+    const captureInterval = setInterval(captureAndSendFrame, 100);
+    return () => clearInterval(captureInterval);
+  }, []);
+
+  return (
+    <div>
+      <h1>실시간 JPEG 이미지 전송</h1>
+      <video ref={videoRef} autoPlay playsInline style={{ display: "none" }} />
+      <canvas ref={canvasRef} style={{ display: "none" }} />
+    </div>
+  );
+};
+
+export default RealTimeVideoPage;

src/frontend/eyesee-user/src/components/home/HomeCta.tsx

@@ -0,0 +1,14 @@
+const HomeCta = () => {
+  return (
+    <div className="mx-[8vw] flex flex-col items-center gap-4">
+      <button className="w-full py-4 rounded-[10px] bg-[rgba(237,237,237,0.8)] text-[#0e1d3c] text-[18px]]">
+        시험장 접속
+      </button>
+      <button className="bg-none border-b border-white text-[#d9d9d9] text-[10px]">
+        이용에 불편함이 있으신가요?
+      </button>
+    </div>
+  );
+};
+
+export default HomeCta;

src/frontend/eyesee-user/src/components/home/HomeHeader.tsx

@@ -0,0 +1,12 @@
+import LogoIcon from "@/assets/icons/Logo.svg";
+
+const HomeHeader = () => {
+  return (
+    <div className="px-[6vw] py-[4vh] flex justify-between items-center">
+      <LogoIcon />
+      <div className="text-[18px] text-white cursor-pointer">About us</div>
+    </div>
+  );
+};
+
+export default HomeHeader;

src/frontend/eyesee-user/tailwind.config.ts

@@ -12,6 +12,9 @@ const config: Config = {
         background: "var(--background)",
         foreground: "var(--foreground)",
       },
+      backgroundImage: {
+        bgGradient: "linear-gradient(180deg, #000 0%, #242142 100%)",
+      },
     },
   },
   plugins: [],