프론트엔드 작성중

frontend/src/App.jsx

@@ -1,179 +1,19 @@
-import React, { useState, useEffect } from 'react';
-import {
-  AppBar,
-  Toolbar,
-  Typography,
-  Container,
-  Box,
-  Tab,
-  Tabs,
-  ThemeProvider,
-  createTheme,
-  CssBaseline
-} from '@mui/material';
-import {
-  Dashboard as DashboardIcon,
-  Upload as UploadIcon,
-  List as ListIcon,
-  Assignment as ProjectIcon
-} from '@mui/icons-material';
-
-import Dashboard from './components/Dashboard';
-import FileUpload from './components/FileUpload';
-import MaterialList from './components/MaterialList';
-import ProjectManager from './components/ProjectManager';
-
-// Material-UI 테마 설정
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#1976d2',
-    },
-    secondary: {
-      main: '#dc004e',
-    },
-    background: {
-      default: '#f5f5f5',
-    },
-  },
-  typography: {
-    h4: {
-      fontWeight: 600,
-    },
-    h6: {
-      fontWeight: 500,
-    },
-  },
-});
-
-function TabPanel({ children, value, index, ...other }) {
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`tabpanel-${index}`}
-      aria-labelledby={`tab-${index}`}
-      {...other}
-    >
-      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
-    </div>
-  );
-}
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import JobSelectionPage from './pages/JobSelectionPage';
+import BOMManagerPage from './pages/BOMManagerPage';
+import MaterialsPage from './pages/MaterialsPage';
 
 function App() {
-  const [tabValue, setTabValue] = useState(0);
-  const [projects, setProjects] = useState([]);
-  const [selectedProject, setSelectedProject] = useState(null);
-
-  const handleTabChange = (event, newValue) => {
-    setTabValue(newValue);
-  };
-
-  // 프로젝트 목록 로드
-  useEffect(() => {
-    fetchProjects();
-  }, []);
-
-  const fetchProjects = async () => {
-    try {
-      const response = await fetch('http://localhost:8000/api/projects');
-      if (response.ok) {
-        const data = await response.json();
-        setProjects(data);
-        if (data.length > 0 && !selectedProject) {
-          setSelectedProject(data[0]);
-        }
-      }
-    } catch (error) {
-      console.error('프로젝트 로드 실패:', error);
-    }
-  };
-
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <Box sx={{ flexGrow: 1 }}>
-        {/* 상단 앱바 */}
-        <AppBar position="static" elevation={1}>
-          <Toolbar>
-            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-              TK-MP BOM 관리 시스템
-            </Typography>
-            <Typography variant="body2" sx={{ opacity: 0.8 }}>
-              {selectedProject ? `프로젝트: ${selectedProject.name}` : '프로젝트 없음'}
-            </Typography>
-          </Toolbar>
-        </AppBar>
-
-        {/* 탭 네비게이션 */}
-        <Box sx={{ borderBottom: 1, borderColor: 'divider', bgcolor: 'white' }}>
-          <Container maxWidth="xl">
-            <Tabs 
-              value={tabValue} 
-              onChange={handleTabChange}
-              variant="scrollable"
-              scrollButtons="auto"
-            >
-              <Tab 
-                icon={<DashboardIcon />} 
-                label="대시보드" 
-                iconPosition="start"
-              />
-              <Tab 
-                icon={<ProjectIcon />} 
-                label="프로젝트 관리" 
-                iconPosition="start"
-              />
-              <Tab 
-                icon={<UploadIcon />} 
-                label="파일 업로드" 
-                iconPosition="start"
-              />
-              <Tab 
-                icon={<ListIcon />} 
-                label="자재 목록" 
-                iconPosition="start"
-              />
-            </Tabs>
-          </Container>
-        </Box>
-
-        {/* 메인 콘텐츠 */}
-        <Container maxWidth="xl">
-          <TabPanel value={tabValue} index={0}>
-            <Dashboard 
-              selectedProject={selectedProject}
-              projects={projects}
-            />
-          </TabPanel>
-          
-          <TabPanel value={tabValue} index={1}>
-            <ProjectManager 
-              projects={projects}
-              selectedProject={selectedProject}
-              setSelectedProject={setSelectedProject}
-              onProjectsChange={fetchProjects}
-            />
-          </TabPanel>
-          
-          <TabPanel value={tabValue} index={2}>
-            <FileUpload 
-              selectedProject={selectedProject}
-              onUploadSuccess={() => {
-                // 업로드 성공 시 대시보드로 이동
-                setTabValue(0);
-              }}
-            />
-          </TabPanel>
-          
-          <TabPanel value={tabValue} index={3}>
-            <MaterialList 
-              selectedProject={selectedProject}
-            />
-          </TabPanel>
-        </Container>
-      </Box>
-    </ThemeProvider>
+    <Router>
+      <Routes>
+        <Route path="/" element={<JobSelectionPage />} />
+        <Route path="/bom-manager" element={<BOMManagerPage />} />
+        <Route path="/materials" element={<MaterialsPage />} />
+        <Route path="*" element={<Navigate to="/" />} />
+      </Routes>
+    </Router>
   );
 }