Merge pull request #98 from DMU-DebugVisual/inseong

시각화 복잡도 패널 추가 및 알림 요청 개선, 403 자동 로그아웃 처리

Author: Danto7632

src/api/globalFetch.js

@@ -8,8 +8,8 @@ window.fetch = async (...args) => {
     // 3. 백업해둔 원래 fetch 함수를 호출하여 실제 API 요청을 보냅니다.
     const response = await originalFetch(...args);
 
-    // 4. 응답을 받은 후, 만약 401 에러(토큰 만료)가 발생했다면
-    if (response.status === 401) {
+    // 4. 응답을 받은 후, 인증 실패(401/403)가 발생했다면
+    if (response.status === 401 || response.status === 403) {
         // 이전에 localStorage에 저장된 토큰이 있을 때만 로그아웃 처리
         if (localStorage.getItem('token')) {
             localStorage.removeItem('token');

src/components/header/Header.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { NavLink, Link, useNavigate, useLocation } from "react-router-dom";
 import { FaMoon, FaSun, FaUserCircle, FaBell } from "react-icons/fa";
 import "./Header.css";
@@ -18,7 +18,7 @@ const Header = ({ isDark, setIsDark, isLoggedIn, nickname, onLoginModalOpen }) =
     const navigate = useNavigate();
     const location = useLocation();
 
-    const fetchNotifications = async () => {
+    const fetchNotifications = useCallback(async () => {
         if (!isLoggedIn) return;
         try {
             const token = localStorage.getItem('token');
@@ -44,19 +44,16 @@ const Header = ({ isDark, setIsDark, isLoggedIn, nickname, onLoginModalOpen }) =
         } catch (error) {
             console.error("Error fetching notifications:", error);
         }
-    };
+    }, [isLoggedIn]);
 
     useEffect(() => {
         if (isLoggedIn) {
             fetchNotifications();
-
-            const intervalId = setInterval(() => {
-                fetchNotifications();
-            }, 10000);
-
-            return () => clearInterval(intervalId);
+        } else {
+            setNotifications([]);
+            setUnreadCount(0);
         }
-    }, [isLoggedIn]);
+    }, [isLoggedIn, fetchNotifications]);
 
     const toggleNotificationMenu = () => {
         setIsNotificationMenuOpen(!isNotificationMenuOpen);

src/components/ide/VisualizationModal.jsx

@@ -324,6 +324,12 @@ const InfoPanel = ({ data, currentStep, totalSteps, theme }) => {
     );
 
     const currentEvent = data?.events?.[currentStep];
+    const analysis = data?.analysis ?? null;
+    const complexityItems = [
+        { label: '시간 복잡도', value: analysis?.timeComplexity || '-' },
+        { label: '공간 복잡도', value: analysis?.spaceComplexity || '-' }
+    ];
+    const hasComplexityData = complexityItems.some(item => item.value && item.value !== '-');
 
     return (
         <div style={{
@@ -378,6 +384,26 @@ const InfoPanel = ({ data, currentStep, totalSteps, theme }) => {
                     ))}
                 </div>
             </InfoCard>
+
+            {hasComplexityData && (
+                <InfoCard title="알고리즘 복잡도" icon="🧠">
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                        {complexityItems.map((item, index) => (
+                            <div key={index} style={{
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                padding: '6px 8px',
+                                background: theme.colors.cardSecondary,
+                                borderRadius: '6px',
+                                fontSize: '12px'
+                            }}>
+                                <span style={{ color: theme.colors.textLight }}>{item.label}:</span>
+                                <span style={{ fontWeight: '600', color: theme.colors.text }}>{item.value}</span>
+                            </div>
+                        ))}
+                    </div>
+                </InfoCard>
+            )}
         </div>
     );
 };