Home Page

furipoter · Nov 25, 2023 · f9d9a4b · f9d9a4b
1 parent 6e2dcf4
commit f9d9a4b
Show file tree

Hide file tree

Showing 11 changed files with 167 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.12.0"
+    "react-icons": "^4.12.0",
+    "react-router-dom": "^6.20.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,6 +2,9 @@ import './index.css'
 import LivePage from "./pages/LivePage.tsx";
 import Splash from "./components/Splash.tsx";
 import {useEffect, useState} from "react";
+import {BrowserRouter, Route, Routes} from "react-router-dom";
+import ViewPage from "./pages/ViewPage.tsx";
+import HomePage from "./pages/HomePage.tsx";
 
 function App() {
     // const [count, setCount] = useState(0)
@@ -19,8 +22,14 @@ function App() {
 
     return (
         <>
-            {showModal && <Splash />}
-            <LivePage/>
+            <BrowserRouter basename='/noc-client'>
+                {showModal && <Splash />}
+                <Routes>
+                    <Route path="/" element={<HomePage/>}/>
+                    <Route path="/live" element={<LivePage/>}/>
+                    <Route path="/view" element={<ViewPage/>}/>
+                </Routes>
+            </BrowserRouter>
         </>
     )
 }

diff --git a/src/assets/thumbnail.png b/src/assets/thumbnail.png
diff --git a/src/components/Band.tsx b/src/components/Band.tsx
@@ -0,0 +1,20 @@
+import BandItem, {BandItemType} from "./BandItem.tsx";
+
+interface Props {
+    title: string
+    band: BandItemType[]
+}
+
+const Band = ({title, band}: Props) => {
+    return(
+        <>
+            <span className="text-3xl font-bold mb-2">{title}</span>
+            <div className="flex flex-row gap-4 w-full overflow-x-scroll">
+                {band.map((item, index) => {
+                    return <BandItem key={index} title={item.title} />
+                })}
+            </div>
+        </>
+    )
+}
+export default Band
diff --git a/src/components/BandItem.tsx b/src/components/BandItem.tsx
@@ -0,0 +1,23 @@
+import {Link} from "react-router-dom";
+import thumbnail from "../assets/thumbnail.png";
+
+interface Props {
+    title: string
+}
+
+export interface BandItemType{
+    title: string
+}
+
+const BandItem = ({ title }:Props) => {
+    return (
+        <Link to="/view" >
+            <div className="rounded-xl w-[12rem] overflow-hidden">
+                <img src={thumbnail} alt="thumbnail"/>
+                <div>{title}</div>
+                <span>FURIPOTER</span>
+            </div>
+        </Link>
+    )
+}
+export default BandItem
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,11 +1,16 @@
 import { MdOutlineExitToApp } from "react-icons/md";
+import {useNavigate} from "react-router-dom";
 
 const Header = () => {
+    const navigate = useNavigate()
+    const onClick = () => {
+        navigate(-1)
+    }
     return (
-        <div>
-            <div className="text-red font-bold text-3xl">방송 주제 텍스트</div>
-            <button className="small-buttonn bg-red">
-                <MdOutlineExitToApp />
+        <div className="flex w-full justify-between p-6 gradient">
+            <div className="text-red font-bold text-3xl break-keep">[LIVE] FURIOSA AI 해커톤 현장</div>
+            <button onClick={onClick}>
+                <MdOutlineExitToApp size="36" />
             </button>
         </div>
     )

diff --git a/src/index.css b/src/index.css
@@ -34,3 +34,7 @@ html, body, #root {
   padding: 0.5rem 1rem;
   background-color: #000000;
 }
+
+.gradient{
+  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
+}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -0,0 +1,21 @@
+import {Link} from "react-router-dom";
+import Band from "../components/Band.tsx";
+
+const hot10 = [
+    {title: '[LIVE] FURIOSA AI 해커톤 현장'},
+    {title: '[단독] 퓨리포터 등장'},
+    {title: '[긴급] 세상에 지금이 몇시지'},
+    {title: '여긴 어디 나는 누구'}
+]
+
+const HomePage = () => {
+    return(
+        <div className="flex flex-col w-full h-full bg-black p-6">
+            <Band title='HOT 10' band={hot10}/>
+            <br/>
+            <br/>
+            <Link to="/live" >영상 촬영 페이지</Link>
+        </div>
+    )
+}
+export default HomePage
diff --git a/src/pages/LivePage.tsx b/src/pages/LivePage.tsx
@@ -1,29 +1,34 @@
-import { useRef, useEffect } from "react";
+import {useRef, useEffect, useState} from "react";
 import Header from "../components/Header.tsx";
+import { FaRecordVinyl, FaCircleStop } from "react-icons/fa6";
 
 const CONSTRAINTS = {
     video: true,
     // audio: true
 };
 
 const LivePage = () => {
+    const [isStarted, setIsStarted] = useState(false);
     const liveRef = useRef<HTMLVideoElement>(null);
     const mediaRecorderRef = useRef<MediaRecorder | null>(null);
     // const chunks: Blob[] = [];
 
     let sequence = 0
 
     const uploadVideo = async (blob: Blob) => {
+        const mp4 = new Blob([blob], { type: 'video/mp4' });
         try {
             const formData = new FormData();
             formData.append('file_name', String(sequence));  // 원하는 파일 이름으로 설정
-            formData.append('video', blob);
+            formData.append('video', mp4);
 
             const response = await fetch('http://13.209.86.34:5001/api/video/upload', {
                 method: 'POST',
                 body: formData,
             });
 
+            sequence += 1
+
             if (response.ok) {
                 const responseData = await response.json();
                 console.log('서버 응답:', responseData);
@@ -45,7 +50,7 @@ const LivePage = () => {
                 // MediaRecorder 생성
                 mediaRecorderRef.current = new MediaRecorder(stream);
 
-                console.log('MediaRecorder 생성', stream)
+                // console.log('MediaRecorder 생성', stream)
 
                 // 녹화가 준비되었을 때 이벤트 처리
                 mediaRecorderRef.current.ondataavailable = (e) => {
@@ -78,13 +83,22 @@ const LivePage = () => {
         };
     }, []);
 
+    const onClick = () => {
+        if(isStarted) {
+            setIsStarted(false)
+            return
+        }
+        setIsStarted(true)
+        startLive()
+    }
+
     return (
         <>
             <video className="video" width="100%" autoPlay ref={liveRef} />
-            <div className="fixed top-0 left-0 p-6">
+            <div className="fixed top-0 left-0 w-full">
                 <Header />
-                <div>
-                    <button className="small-button" onClick={startLive}>Start</button>
+                <div className="fixed p-6 right-0">
+                    <button className="p-[2px] bg-white rounded-3xl" onClick={onClick}> {isStarted ?  <FaCircleStop color="#E21401" size="48"/> : <FaRecordVinyl color="#E21401" size="48"/>} </button>
                 </div>
             </div>
         </>

diff --git a/src/pages/ViewPage.tsx b/src/pages/ViewPage.tsx
@@ -0,0 +1,37 @@
+import React, { useRef, useEffect } from 'react';
+import Header from "../components/Header.tsx";
+
+const ViewPage: React.FC = () => {
+
+    const videoRef = useRef<HTMLVideoElement | null>(null);
+
+    useEffect(() => {
+        // 비디오 주소
+        const videoUrl = "https://furiosa-video.s3.ap-northeast-2.amazonaws.com/upload/2";
+
+        // 비디오 요소 참조
+        const videoElement = videoRef.current;
+
+        if (videoElement) {
+            // 비디오 주소를 설정하고 비디오 로드
+            videoElement.src = videoUrl;
+
+            videoElement.addEventListener('loadedmetadata', () => {
+                videoElement.play().catch(error => console.error('비디오 재생 중 오류:', error));
+            });
+        }
+    }, []);
+
+    return (
+        <>
+            <video ref={videoRef} className="video" width="100%">
+                Your browser does not support the video tag.
+            </video>
+            <div className="fixed top-0 left-0 w-full">
+                <Header />
+            </div>
+        </>
+    );
+};
+
+export default ViewPage
diff --git a/yarn.lock b/yarn.lock
@@ -432,6 +432,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@remix-run/[email protected]":
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.13.0.tgz#7e29c4ee85176d9c08cb0f4456bff74d092c5065"
+  integrity sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA==
+
 "@rollup/[email protected]":
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.5.2.tgz#fa3e9ba323449f098b8d144ecaa4f044d2ff2ee3"
@@ -1822,6 +1827,21 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
+react-router-dom@^6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.20.0.tgz#7b9527a1e29c7fb90736a5f89d54ca01f40e264b"
+  integrity sha512-CbcKjEyiSVpA6UtCHOIYLUYn/UJfwzp55va4yEfpk7JBN3GPqWfHrdLkAvNCcpXr8QoihcDMuk0dzWZxtlB/mQ==
+  dependencies:
+    "@remix-run/router" "1.13.0"
+    react-router "6.20.0"
+
+[email protected]:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.20.0.tgz#4275a3567ecc55f7703073158048db10096bb539"
+  integrity sha512-pVvzsSsgUxxtuNfTHC4IxjATs10UaAtvLGVSA1tbUE4GDaOSU1Esu2xF5nWLz7KPiMuW8BJWuPFdlGYJ7/rW0w==
+  dependencies:
+    "@remix-run/router" "1.13.0"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"