프론트엔드 작성중

2025-07-16 15:44:50 +09:00
parent 5ac9d562d5
commit ea111433e4
25 changed files with 7286 additions and 2043 deletions
--- a/frontend/src/pages/BOMStatusPage.jsx
+++ b/frontend/src/pages/BOMStatusPage.jsx
@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Typography, Button, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, CircularProgress, Alert } from '@mui/material';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+
+const BOMStatusPage = () => {
+  const [files, setFiles] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [uploading, setUploading] = useState(false);
+  const [file, setFile] = useState(null);
+  const [searchParams] = useSearchParams();
+  const jobNo = searchParams.get('job_no');
+  const navigate = useNavigate();
+
+  // 파일 목록 불러오기
+  const fetchFiles = async () => {
+    setLoading(true);
+    setError('');
+    try {
+      let url = '/files';
+      if (jobNo) {
+        url += `?job_no=${jobNo}`;
+      }
+      const res = await fetch(url);
+      const data = await res.json();
+      if (Array.isArray(data)) setFiles(data);
+      else if (data && Array.isArray(data.files)) setFiles(data.files);
+      else setFiles([]);
+    } catch (e) {
+      setError('파일 목록을 불러오지 못했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchFiles();
+    // eslint-disable-next-line
+  }, [jobNo]);
+
+  // 파일 업로드 핸들러
+  const handleUpload = async (e) => {
+    e.preventDefault();
+    if (!file) return;
+    setUploading(true);
+    setError('');
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('project_id', 1); // 예시: 실제 프로젝트 ID로 대체 필요
+      const res = await fetch('/files/upload', {
+        method: 'POST',
+        body: formData
+      });
+      if (!res.ok) throw new Error('업로드 실패');
+      setFile(null);
+      fetchFiles();
+    } catch (e) {
+      setError('파일 업로드에 실패했습니다.');
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <Box sx={{ maxWidth: 900, mx: 'auto', mt: 4 }}>
+      <Button variant="outlined" onClick={() => navigate('/')} sx={{ mb: 2 }}>
+        ← 뒤로가기
+      </Button>
+      <Typography variant="h4" gutterBottom>BOM 업로드 및 현황</Typography>
+      <form onSubmit={handleUpload} style={{ marginBottom: 24 }}>
+        <input
+          type="file"
+          accept=".csv,.xlsx,.xls"
+          onChange={e => setFile(e.target.files[0])}
+          disabled={uploading}
+        />
+        <Button type="submit" variant="contained" disabled={!file || uploading} sx={{ ml: 2 }}>
+          업로드
+        </Button>
+      </form>
+      {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+      {loading && <CircularProgress sx={{ mt: 4 }} />}
+      <TableContainer component={Paper} sx={{ mt: 2 }}>
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>파일명</TableCell>
+              <TableCell>리비전</TableCell>
+              <TableCell>세부내역</TableCell>
+              <TableCell>리비전</TableCell>
+              <TableCell>삭제</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {files.map(file => (
+              <TableRow key={file.id}>
+                <TableCell>{file.original_filename || file.filename}</TableCell>
+                <TableCell>{file.revision}</TableCell>
+                <TableCell>
+                  <Button size="small" variant="outlined" onClick={() => alert(`자재확인: ${file.original_filename}`)}>
+                    자재확인
+                  </Button>
+                </TableCell>
+                <TableCell>
+                  <Button size="small" variant="outlined" color="info" onClick={() => alert(`리비전 관리: ${file.original_filename}`)}>
+                    리비전
+                  </Button>
+                </TableCell>
+                <TableCell>
+                  <Button size="small" variant="outlined" color="error" onClick={() => alert(`삭제: ${file.original_filename}`)}>
+                    삭제
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+};
+
+export default BOMStatusPage;