import React, { useState, useEffect } from 'react'; import SimpleLogin from './SimpleLogin'; import BOMWorkspacePage from './pages/BOMWorkspacePage'; import NewMaterialsPage from './pages/NewMaterialsPage'; import SystemSettingsPage from './pages/SystemSettingsPage'; import AccountSettingsPage from './pages/AccountSettingsPage'; import UserManagementPage from './pages/UserManagementPage'; import SystemLogsPage from './pages/SystemLogsPage'; import LogMonitoringPage from './pages/LogMonitoringPage'; import ErrorBoundary from './components/ErrorBoundary'; import errorLogger from './utils/errorLogger'; import './App.css'; function App() { const [isAuthenticated, setIsAuthenticated] = useState(false); const [isLoading, setIsLoading] = useState(true); const [user, setUser] = useState(null); const [currentPage, setCurrentPage] = useState('dashboard'); const [pageParams, setPageParams] = useState({}); const [selectedProject, setSelectedProject] = useState(null); const [showUserMenu, setShowUserMenu] = useState(false); useEffect(() => { // 저장된 토큰 확인 const token = localStorage.getItem('access_token'); const userData = localStorage.getItem('user_data'); if (token && userData) { setIsAuthenticated(true); setUser(JSON.parse(userData)); } setIsLoading(false); // 자재 목록 페이지로 이동 이벤트 리스너 const handleNavigateToMaterials = (event) => { const { jobNo, revision, bomName, message, file_id } = event.detail; navigateToPage('materials', { jobNo: jobNo, revision: revision, bomName: bomName, message: message, file_id: file_id // file_id 추가 }); }; window.addEventListener('navigateToMaterials', handleNavigateToMaterials); return () => { window.removeEventListener('navigateToMaterials', handleNavigateToMaterials); }; }, []); // 사용자 메뉴 외부 클릭 시 닫기 useEffect(() => { const handleClickOutside = (event) => { if (showUserMenu && !event.target.closest('.user-menu-container')) { setShowUserMenu(false); } }; document.addEventListener('mousedown', handleClickOutside); return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [showUserMenu]); // 로그인 성공 시 호출될 함수 const handleLoginSuccess = () => { const userData = localStorage.getItem('user_data'); if (userData) { setUser(JSON.parse(userData)); } setIsAuthenticated(true); }; // 로그아웃 함수 const handleLogout = () => { localStorage.removeItem('access_token'); localStorage.removeItem('user_data'); setIsAuthenticated(false); setUser(null); setCurrentPage('dashboard'); }; // 페이지 네비게이션 함수 const navigateToPage = (page, params = {}) => { setCurrentPage(page); setPageParams(params); }; // 핵심 기능만 제공 const getCoreFeatures = () => { return [ { id: 'bom', title: '📋 BOM 업로드 & 분류', description: '엑셀 파일 업로드 → 자동 분류 → 검토 → 자재 확인 → 엑셀 내보내기', color: '#4299e1' } ]; }; // 관리자 전용 기능 const getAdminFeatures = () => { const features = []; // 시스템 관리자 전용 기능 if (user?.role === 'system') { features.push( { id: 'user-management', title: '👥 사용자 관리', description: '계정 생성, 역할 변경, 사용자 삭제', color: '#dc2626', badge: '시스템 관리자' }, { id: 'system-logs', title: '📊 시스템 로그', description: '로그인 기록, 시스템 오류 로그 조회', color: '#7c3aed', badge: '시스템 관리자' } ); } // 관리자 이상 공통 기능 if (user?.role === 'admin' || user?.role === 'system') { features.push( { id: 'log-monitoring', title: '📈 로그 모니터링', description: '사용자 활동 로그 및 오류 모니터링', color: '#059669', badge: user?.role === 'system' ? '시스템 관리자' : '관리자' } ); } return features; }; // 페이지 렌더링 함수 const renderCurrentPage = () => { console.log('현재 페이지:', currentPage, '페이지 파라미터:', pageParams); switch (currentPage) { case 'dashboard': const coreFeatures = getCoreFeatures(); const adminFeatures = getAdminFeatures(); return (
{/* 상단 헤더 */}

🏭 TK-MP BOM 관리 시스템

{user?.name || user?.username}님 환영합니다

{/* 사용자 메뉴 */}
{/* 드롭다운 메뉴 */} {showUserMenu && (
{user?.name || user?.username}
{user?.email || '이메일 없음'}
)}
{/* 메인 콘텐츠 */}
{/* 프로젝트 선택 */}

📁 프로젝트 선택

{/* 핵심 기능 */} {selectedProject && ( <>

📋 BOM 관리 워크플로우

{coreFeatures.map((feature) => (
{ e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 12px rgba(0, 0, 0, 0.1)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.07)'; }} >

{feature.title}

{feature.description}

))}
{/* 관리자 기능 (있는 경우만) */} {adminFeatures.length > 0 && (

⚙️ 시스템 관리

{adminFeatures.map((feature) => (
{ e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 12px rgba(0, 0, 0, 0.1)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.07)'; }} >

{feature.title}

{feature.description}

{feature.badge} 전용
))}
)} {/* 간단한 사용법 안내 */}

📖 간단한 사용법

1 BOM 업로드
→
2 자동 분류
→
3 엑셀 내보내기
)} {/* selectedProject 조건문 닫기 */}
); case 'bom': return ( navigateToPage('dashboard')} /> ); case 'materials': return ( ); case 'system-settings': return ( ); case 'account-settings': return ( { setUser(updatedUser); localStorage.setItem('user_data', JSON.stringify(updatedUser)); }} /> ); case 'user-management': return ( ); case 'system-logs': return ( ); case 'log-monitoring': return ( ); default: return (

페이지를 찾을 수 없습니다

); } }; // 로딩 중 if (isLoading) { return (
🔄
로딩 중...
); } // 로그인하지 않은 경우 if (!isAuthenticated) { return ; } // 메인 애플리케이션 return (
{renderCurrentPage()}
); } export default App;