Feature/video2 UI

client/src/App.js

@@ -8,6 +8,8 @@ import RegisterPage from './pages/signuppage';
 import AnalysisPage from './pages/analysispage';
 import AnalysisDetailPage from './pages/AnalysisDetailPage';
 import VideoAnalysisPage from './pages/VideoAnalysisPage';
+import VideoTimelinePage from './pages/VideoTimelinePage'; 
+import HeatmapPage from './pages/HeatmapPage';
 
 axios.defaults.withCredentials = true;
 
@@ -42,17 +44,23 @@ function App() {
     <Router>
       <Routes>
         <Route path="/" element={<Navigate to="/main" />} />
+
         <Route path="/main" element={<MainPage sessionUser={sessionUser} onLogout={handleLogout} />} />
 
         <Route path="/analysis" element={<AnalysisPage sessionUser={sessionUser} onLogout={handleLogout} setSessionUser={setSessionUser} />} />
 
         <Route path="/video-analysis" element={<VideoAnalysisPage sessionUser={sessionUser} onLogout={handleLogout} setSessionUser={setSessionUser} />} />
 
         <Route path="/analysis-detail" element={<AnalysisDetailPage sessionUser={sessionUser} />} />
+
+        <Route path="/video-detail" element={<AnalysisDetailPage sessionUser={sessionUser} />} />
+
+        <Route path="/video-timeline" element={<VideoTimelinePage sessionUser={sessionUser} />} />
 
         <Route path="/login" element={<LoginPage setSessionUser={setSessionUser} />} />
         <Route path="/register" element={<RegisterPage />} />
         <Route path="*" element={<Navigate to="/main" />} />
+        <Route path="/heatmap" element={<HeatmapPage sessionUser={sessionUser} />} />
       </Routes>
     </Router>
   );

client/src/pages/loginpage.js

@@ -3,7 +3,6 @@ import { useNavigate } from 'react-router-dom';
 import axios from 'axios'; 
 import logo from '../assets/logo.svg';
 
-// 백엔드 세션 쿠키 전역 설정
 axios.defaults.withCredentials = true;
 
 const LoginPage = ({ setSessionUser }) => {
@@ -16,15 +15,13 @@ const LoginPage = ({ setSessionUser }) => {
     e.preventDefault();
     setIsLoading(true);
     try {
-      // 로그인 요청
       await axios.post('/auth/login', { email, password });
 
-      // 세션 정보 가져오기 (home.py)
       const homeRes = await axios.get('/home');
       if (homeRes.data.session_user) {
         setSessionUser(homeRes.data.session_user);
         alert(`${homeRes.data.session_user.name}님 환영합니다!`);
-        navigate('/analysis'); // 성공 시 분석 페이지로
+        navigate('/analysis');
       }
     } catch (error) {
       const detail = error.response?.data?.detail || "로그인 정보를 확인해주세요.";

client/src/pages/mainpage.js

@@ -9,10 +9,8 @@ import bgCurve from '../assets/line.svg';
 const MainPage = ({ sessionUser, onLogout }) => {
   const navigate = useNavigate();
 
-  // 이미지 분석 페이지로 이동
   const handleBasicAnalysis = () => navigate('/analysis');
 
-  // 동영상 분석 페이지로 이동
   const handleVideoAnalysis = () => navigate('/video-analysis');
 
   const handleProAnalysis = () => {
@@ -80,7 +78,6 @@ const MainPage = ({ sessionUser, onLogout }) => {
       </section>
 
       <section style={{ ...sectionStyle, flexDirection: 'row', gap: '40px', paddingBottom: '150px' }}>
-        {/* 이미지 분석 박스 */}
         <div style={analysisBoxStyle} onMouseOver={(e) => e.currentTarget.style.borderColor = '#39FF14'} onMouseOut={(e) => e.currentTarget.style.borderColor = '#222'}>
           <h3 style={{ fontSize: '28px', marginBottom: '25px' }}>이미지 분석</h3>
           <img src={circle} alt="" style={{ width: '140px', marginBottom: '40px', opacity: 0.8 }} />
@@ -91,7 +88,6 @@ const MainPage = ({ sessionUser, onLogout }) => {
           </button>
         </div>
 
-        {/* 비디오 분석 박스 */}
         <div style={analysisBoxStyle} onMouseOver={(e) => e.currentTarget.style.borderColor = '#39FF14'} onMouseOut={(e) => e.currentTarget.style.borderColor = '#222'}>
           <h3 style={{ fontSize: '28px', marginBottom: '25px' }}>비디오 분석</h3>
           <img src={circle} alt="" style={{ width: '140px', marginBottom: '40px', opacity: 0.8 }} />