Merge pull request #113 from DMU-DebugVisual/inseong2

UI 및 기능 일괄개선 2차

Author: Danto7632

src/App.css

@@ -7,12 +7,14 @@ html, body, #root {
   width: 100% !important; /* 너비를 100%로 설정 */
   height: 100% !important; /* 높이를 100%로 설정 */
   overflow: hidden !important; /* 불필요한 스크롤 방지 */
-  background-color: #f8f9fa !important; /* 기본 배경색 (라이트 모드) */
+  background-color: var(--surface-body) !important; /* 기본 배경색 (라이트 모드) */
+  color: var(--text-primary);
 }
 
 /* 다크 모드일 때 body 배경색 변경 */
 body.dark-mode {
-  background-color: #1e1e1e !important; /* 다크 모드 배경색 */
+  background-color: var(--surface-body) !important; /* 다크 모드 배경색 */
+  color: var(--text-primary);
 }
 
 /* Flexbox 레이아웃을 위한 래퍼 스타일 (이전 App.js 수정에서 사용) */

src/api/globalFetch.js

@@ -7,19 +7,44 @@ 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");
         localStorage.removeItem("role");
 
         window.dispatchEvent(new Event("dv:auth-updated"));
 
-        const redirectTo = window.location.hash ? window.location.hash.replace(/^#/, "") || "/" : window.location.pathname || "/";
+        let redirectTo = window.location.hash ? window.location.hash.replace(/^#/, "") || "/" : window.location.pathname || "/";
+        if (redirectTo.startsWith("/broadcast/live")) {
+            redirectTo = "/broadcast";
+        }
         promptLogin("세션이 만료되었습니다. 다시 로그인해 주세요.", { redirectTo });
     }
 

src/components/codecast/Codecast.css

@@ -1,12 +1,13 @@
 .broadcast-container {
-    background-color: #ffffff;
+    background-color: var(--surface-page);
     min-height: 100vh;
     display: flex;              /* 가운데 정렬용 */
     justify-content: center;    /* 가로 가운데 */
     align-items: center;        /* 세로 가운데 */
     flex-direction: column;     /* 위아래 배치 */
     padding: 20px;              /* 좌우만 여백 */
     text-align: center;
+    color: var(--text-primary);
 }
 
 .broadcast-header {
@@ -15,7 +16,7 @@
 
 .broadcast-icon {
     font-size: 48px;
-    color: #7a52c6;
+    color: var(--accent-primary);
 }
 
 .broadcast-header h2 {
@@ -25,18 +26,19 @@
 }
 
 .broadcast-header p {
-    color: #555;
+    color: var(--text-muted);
     font-size: 16px;
     line-height: 1.5;
 }
 
 .broadcast-card {
     margin: 0 auto;
-    background-color: white;
+    background-color: var(--surface-card);
     padding: 40px 30px;
     border-radius: 12px;
     max-width: 550px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* 테두리와 그림자 병행 */
+    box-shadow: 0 20px 46px rgba(24, 20, 56, 0.12); /* 테두리와 그림자 병행 */
+    border: 1px solid var(--border-subtle);
 
 }
 
@@ -49,7 +51,7 @@
 
 .broadcast-card p {
     font-size: 14px;
-    color: #666;
+    color: var(--text-muted);
     margin-bottom: 10px;
     text-align: left;
 }
@@ -62,13 +64,15 @@
 .input-group input {
     flex: 1;
     padding: 10px 14px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-subtle);
     border-radius: 8px;
     font-size: 14px;
+    background-color: var(--surface-input);
+    color: var(--text-primary);
 }
 
 .input-group button {
-    background-color: #a78bfa;
+    background-color: var(--accent-primary);
     color: white;
     border: none;
     padding: 10px 16px;
@@ -78,6 +82,11 @@
     align-items: center;
     gap: 6px;
     font-weight: bold;
+    transition: background-color 0.2s ease;
+}
+
+.input-group button:hover {
+    background-color: var(--accent-hover);
 }
 
 .error-text {
@@ -92,33 +101,34 @@
     border: none;
     padding: 10px 16px;
     border-radius: 8px;
-    background-color: #7a52c6;
+    background-color: var(--accent-secondary);
     display: flex;
     justify-content: center;
     gap: 6px;
     font-weight: bold;
     text-decoration: none;
     font-size: 15px;
+    transition: background-color 0.2s ease;
 }
 
 .start-btn:hover {
-    background-color: #6b42bb;
+    background-color: var(--accent-hover);
 }
 
 .hr-with-text {
     display: flex;
     align-items: center;
     text-align: center;
     margin: 24px 0;
-    color: #999;
+    color: var(--text-muted);
     font-size: 14px;
 }
 
 .hr-with-text::before,
 .hr-with-text::after {
     content: "";
     flex: 1;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--border-subtle);
     margin: 0 12px;
 }
 
@@ -134,15 +144,17 @@
     margin-bottom: 6px;
     text-align: left;
     font-size: 14px;
-    color: #333;
+    color: var(--text-primary);
 }
 
 .start-input-group input {
     flex: 1;
     padding: 10px 14px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-subtle);
     border-radius: 8px;
     font-size: 14px;
+    background-color: var(--surface-input);
+    color: var(--text-primary);
 }
 
 .required {
@@ -152,84 +164,85 @@
 
 .help-text {
     font-size: 12px;
-    color: #888;
+    color: var(--text-muted);
     margin-top: 6px;
     text-align: left;
 }
 
 /* 🌙 전체 배경 */
 .dark-mode .broadcast-container {
-    background-color: #1e1e1e;
-    color: #f0f0f0;
+    background-color: var(--surface-page);
+    color: var(--text-primary);
 }
 
 /* 🌙 아이콘 */
 .dark-mode .broadcast-icon {
-    color: #6a0dad;
+    color: var(--accent-primary);
 }
 
 /* 🌙 설명 텍스트 */
 .dark-mode .broadcast-header p {
-    color: #cccccc;
+    color: var(--text-muted);
 }
 
 /* 🌙 카드 배경 */
 .dark-mode .broadcast-card {
-    background-color: #2a2a2a;
-    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
+    background-color: var(--surface-card);
+    border-color: var(--border-subtle);
+    box-shadow: 0 24px 48px rgba(24, 20, 56, 0.18);
 }
 
 /* 🌙 카드 내부 텍스트 */
 .dark-mode .broadcast-card p {
-    color: #bbbbbb;
+    color: var(--text-muted);
 }
 
 /* 🌙 인풋 */
 .dark-mode .input-group input,
 .dark-mode .start-input-group input {
-    background-color: #1e1e1e;
-    color: #f0f0f0;
-    border: 1px solid #555;
+    background-color: var(--surface-input);
+    color: var(--text-primary);
+    border: 1px solid var(--border-subtle);
 }
 
 /* 🌙 참여 버튼 */
 .dark-mode .input-group button {
-    background-color: #6a0dad;
+    background-color: var(--accent-secondary);
     color: white;
 }
 
 .dark-mode .input-group button:hover {
-    background-color: #5a0099;
+    background-color: var(--accent-hover);
 }
 
 /* 🌙 새 방송 시작 버튼 */
 .dark-mode .start-btn {
-    background-color: #6a0dad;
+    background-color: var(--accent-secondary);
     color: white;
 }
 
 .dark-mode .start-btn:hover {
-    background-color: #5a0099;
+    background-color: var(--accent-hover);
 }
 
 /* 🌙 구분선 */
 .dark-mode .hr-with-text {
-    color: #aaa;
+    color: var(--text-muted);
 }
 
 .dark-mode .hr-with-text::before,
 .dark-mode .hr-with-text::after {
-    border-top: 1px solid #444;
+    border-top: 1px solid var(--border-subtle);
 }
 
 /* 🌙 폼 라벨 */
 .dark-mode .start-input-group label {
-    color: #ddd;
+    color: var(--text-primary);
 }
 
 /* 🌙 헬프 텍스트 */
 .dark-mode .help-text {
-    color: #aaa;
+    color: var(--text-muted);
 }
 
 /* 🌙 필수 표시 */