diff --git a/package.json b/package.json index b152d1c..b15a7d8 100644 --- 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 index 434b8df..ae9755a 100644 --- 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 && } - + + {showModal && } + + }/> + }/> + }/> + + ) } diff --git a/src/assets/thumbnail.png b/src/assets/thumbnail.png new file mode 100644 index 0000000..89fa7e1 Binary files /dev/null and b/src/assets/thumbnail.png differ diff --git a/src/components/Band.tsx b/src/components/Band.tsx new file mode 100644 index 0000000..395af10 --- /dev/null +++ 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( + <> + {title} +
+ {band.map((item, index) => { + return + })} +
+ + ) +} +export default Band diff --git a/src/components/BandItem.tsx b/src/components/BandItem.tsx new file mode 100644 index 0000000..ef2e3a4 --- /dev/null +++ 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 ( + +
+ thumbnail +
{title}
+ FURIPOTER +
+ + ) +} +export default BandItem diff --git a/src/components/Header.tsx b/src/components/Header.tsx index bcb75ab..57f61ef 100644 --- 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 ( -
-
방송 주제 텍스트
-
) diff --git a/src/index.css b/src/index.css index 0ba9045..68b97a9 100644 --- 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 new file mode 100644 index 0000000..67e5c1c --- /dev/null +++ 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( +
+ +
+
+ 영상 촬영 페이지 +
+ ) +} +export default HomePage diff --git a/src/pages/LivePage.tsx b/src/pages/LivePage.tsx index 4cc1332..2ed987c 100644 --- a/src/pages/LivePage.tsx +++ b/src/pages/LivePage.tsx @@ -1,5 +1,6 @@ -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, @@ -7,6 +8,7 @@ const CONSTRAINTS = { }; const LivePage = () => { + const [isStarted, setIsStarted] = useState(false); const liveRef = useRef(null); const mediaRecorderRef = useRef(null); // const chunks: Blob[] = []; @@ -14,16 +16,19 @@ const LivePage = () => { 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 ( <>