코드방송 방코드/자동로그아웃 이슈해결

Author: Danto7632

src/api/globalFetch.js

@@ -7,11 +7,33 @@ const originalFetch = window.fetch;
 
 // 2. window.fetch 함수를 우리의 감시 기능이 추가된 새 함수로 덮어씁니다.
 window.fetch = async (...args) => {
+    const [resource] = args;
+    const request = resource instanceof Request ? resource : null;
+    const rawUrl = request ? request.url : (typeof resource === "string" ? resource : "");
+
+    let pathname = "";
+    if (typeof rawUrl === "string" && rawUrl) {
+        try {
+            pathname = new URL(rawUrl, window.location.origin).pathname;
+        } catch (error) {
+            pathname = rawUrl;
+        }
+    }
+
     // 3. 백업해둔 원래 fetch 함수를 호출하여 실제 API 요청을 보냅니다.
     const response = await originalFetch(...args);
 
+    const isJoinParticipantsRequest =
+        response.status === 403 &&
+        typeof pathname === "string" &&
+        pathname.includes("/api/collab/rooms/") &&
+        pathname.endsWith("/participants");
+
     // 4. 응답을 받은 후, 인증 실패(401/403)가 발생했다면
     if ((response.status === 401 || response.status === 403) && localStorage.getItem("token")) {
+        if (isJoinParticipantsRequest) {
+            return response;
+        }
         localStorage.removeItem("token");
         localStorage.removeItem("username");
         localStorage.removeItem("userId");

src/components/codecast/codecastlive/CodecastLive.jsx

@@ -42,12 +42,20 @@ async function joinRoomApi(roomId, token) {
         credentials: 'include',
     });
 
-    if (!res.ok) {
-        const text = await res.text().catch(() => '');
-        if (res.status === 409) return { status: 'already_joined' };
-        throw new Error(text || `HTTP ${res.status}`);
+    if (res.ok) {
+        const data = await res.json().catch(() => null);
+        if (data && typeof data === 'object') {
+            return data.status ? data : { status: 'success', ...data };
+        }
+        return { status: 'success' };
+    }
+
+    const text = await res.text().catch(() => '');
+    if (res.status === 409) return { status: 'already_joined', message: text };
+    if (res.status === 404 || res.status === 403) {
+        return { status: 'not_found', message: text || '존재하지 않는 방송 코드입니다.' };
     }
-    return await res.json().catch(() => ({ status: 'success' }));
+    throw new Error(text || `HTTP ${res.status}`);
 }
 
 
@@ -556,8 +564,13 @@ export default function CodecastLive({ isDark }) {
             try {
                 if (token && room.id) {
                     console.log('[API] Joining room via REST API:', room.id);
-                    await joinRoomApi(room.id, token);
-                    console.log('[API] Room joined successfully or already registered.');
+                    const joinResult = await joinRoomApi(room.id, token);
+                    if (joinResult?.status === 'not_found') {
+                        alert(joinResult.message || '존재하지 않는 방송 코드입니다.');
+                        navigate('/broadcast', { replace: true });
+                        return;
+                    }
+                    console.log('[API] Room joined successfully or already registered.', joinResult);
                 }
 
                 console.log('[WS] effect start', { roomId: room.id, hasToken: !!token });
@@ -608,7 +621,7 @@ export default function CodecastLive({ isDark }) {
         return () => {
             unsubs.forEach((u) => u?.());
         };
-    }, [room.id, token, connect, subscribeSystem]);
+    }, [room.id, token, connect, subscribeSystem, navigate]);
 
     useEffect(() => {
         if (!room.id || !sessionId) return;