Merge pull request #112 from DMU-DebugVisual/inseong

UI 및 기능 일괄개선 1차

Author: Danto7632

src/App.js

@@ -1,5 +1,6 @@
-import { HashRouter, Routes, Route, useLocation, Navigate } from "react-router-dom";
+import { HashRouter, Routes, Route, useLocation, Navigate, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
+import { promptLogin } from "./utils/auth";
 
 import Header from "./components/header/Header";
 import Footer from "./components/footer/Footer"; // Footer 컴포넌트 임포트 유지
@@ -23,6 +24,7 @@ import CodecastLive from "./components/codecast/codecastlive/CodecastLive";
 
 function AppContent() {
     const location = useLocation();
+    const navigate = useNavigate();
     const [isDark, setIsDark] = useState(false);
     const [isLoggedIn, setIsLoggedIn] = useState(false);
     const [nickname, setNickname] = useState('');
@@ -34,18 +36,36 @@ function AppContent() {
     const isCommunityPage = location.pathname.startsWith("/community");
     const isMyPage = location.pathname.startsWith("/mypage");
     const isCodecastPage = location.pathname.startsWith("/broadcast") || location.pathname.startsWith("/startbroadcast");
-    const shouldShowFooter = isMainPage && !(isSignupPage || isIdePage || isCommunityPage || isMyPage || isCodecastPage);
+    const shouldShowFooter = !(
+        isSignupPage ||
+        isIdePage ||
+        isCommunityPage ||
+        isMyPage ||
+        isCodecastPage ||
+        isMainPage
+    );
 
     useEffect(() => {
-        const token = localStorage.getItem('token');
-        const storedUsername = localStorage.getItem('username');
-        if (token && storedUsername) {
-            setIsLoggedIn(true);
-            setNickname(storedUsername);
-        } else {
-            setIsLoggedIn(false);
-            setNickname('');
-        }
+        const syncAuthState = () => {
+            const token = localStorage.getItem('token');
+            const storedUsername = localStorage.getItem('username');
+            if (token && storedUsername) {
+                setIsLoggedIn(true);
+                setNickname(storedUsername);
+            } else {
+                setIsLoggedIn(false);
+                setNickname('');
+            }
+        };
+
+        syncAuthState();
+        window.addEventListener('storage', syncAuthState);
+        window.addEventListener('dv:auth-updated', syncAuthState);
+
+        return () => {
+            window.removeEventListener('storage', syncAuthState);
+            window.removeEventListener('dv:auth-updated', syncAuthState);
+        };
     }, []);
 
     useEffect(() => {
@@ -64,6 +84,14 @@ function AppContent() {
         localStorage.setItem("theme", isDark ? "dark" : "light");
     }, [isDark]);
 
+    const MyPageGuard = ({ element }) => {
+        if (!isLoggedIn) {
+            promptLogin(undefined, { redirectTo: location.pathname });
+            return <Navigate to="/" replace />;
+        }
+        return element;
+    };
+
     return (
         <>
             {!isSignupPage && (
@@ -90,7 +118,12 @@ function AppContent() {
                 <Route path="/broadcast" element={<Codecast />} />
                 <Route path="/startbroadcast" element={<StartCodecast />} />
                 <Route path="/broadcast/live" element={<CodecastLive />} />
-                <Route path="/mypage" element={<MyPageLayout nickname={nickname} />}>
+                <Route
+                    path="/mypage"
+                    element={(
+                        <MyPageGuard element={<MyPageLayout nickname={nickname} />} />
+                    )}
+                >
                     <Route index element={<Mypage nickname={nickname} />} />
                     <Route path="project" element={<MyProject />} />
                     <Route path="community" element={<MyCommunity nickname={nickname} />} />
@@ -108,6 +141,13 @@ function AppContent() {
                     onLoginSuccess={() => {
                         setIsLoggedIn(true);
                         setNickname(localStorage.getItem('username') || '');
+                        setIsLoginModalOpen(false);
+
+                        const redirectTarget = sessionStorage.getItem('dv:postLoginRedirect');
+                        if (redirectTarget) {
+                            sessionStorage.removeItem('dv:postLoginRedirect');
+                            navigate(redirectTarget, { replace: true });
+                        }
                     }}
                 />
             )}

src/api/globalFetch.js

@@ -1,5 +1,7 @@
 // src/api/globalFetch.js
 
+import { promptLogin } from "../utils/auth";
+
 // 1. 기존의 window.fetch 함수를 백업해둡니다.
 const originalFetch = window.fetch;
 
@@ -9,17 +11,16 @@ window.fetch = async (...args) => {
     const response = await originalFetch(...args);
 
     // 4. 응답을 받은 후, 인증 실패(401/403)가 발생했다면
-    if (response.status === 401 || response.status === 403) {
-        // 이전에 localStorage에 저장된 토큰이 있을 때만 로그아웃 처리
-        if (localStorage.getItem('token')) {
-            localStorage.removeItem('token');
-            localStorage.removeItem('username');
+    if ((response.status === 401 || response.status === 403) && localStorage.getItem("token")) {
+        localStorage.removeItem("token");
+        localStorage.removeItem("username");
+        localStorage.removeItem("userId");
+        localStorage.removeItem("role");
+
+        window.dispatchEvent(new Event("dv:auth-updated"));
 
-            alert('세션이 만료되었습니다. 다시 로그인해 주세요.');
-            // 현재 페이지를 새로고침하여 로그인 상태를 갱신합니다.
-            // 로그인 페이지로 강제 이동시키는 것보다 사용자 경험이 더 나을 수 있습니다.
-            window.location.reload();
-        }
+        const redirectTo = window.location.hash ? window.location.hash.replace(/^#/, "") || "/" : window.location.pathname || "/";
+        promptLogin("세션이 만료되었습니다. 다시 로그인해 주세요.", { redirectTo });
     }
 
     // 5. 원래 API를 호출했던 곳에 응답을 그대로 돌려줍니다.