ab607dfa9a
Some checks failed
SonarQube Analysis / SonarQube Scan (push) Has been cancelled
🎯 주요 변경사항: - 통합 BOM 페이지 (UnifiedBOMPage) 신규 개발 - 탭 구조로 업로드 → 파일 관리 → 자재 관리 워크플로우 개선 - 컴포넌트 분리로 스파게티 코드 방지 📤 업로드 탭 (BOMUploadTab): - 드래그 앤 드롭 파일 업로드 - 파일 검증 및 진행률 표시 - 업로드 완료 후 자동 Files 탭 이동 📊 파일 관리 탭 (BOMFilesTab): - 프로젝트별 BOM 파일 목록 조회 - 리비전 히스토리 표시 - BOM 선택 후 자동 Materials 탭 이동 📋 자재 관리 탭 (BOMMaterialsTab): - 기존 BOMManagementPage 래핑 - 선택된 BOM의 자재 분류 및 관리 🔧 백엔드 API 개선: - /files/project/{project_code} 엔드포인트 추가 - 한글 프로젝트 코드 URL 인코딩 지원 - 프로젝트별 파일 조회 기능 구현 🎨 대시보드 개선: - 3개 BOM 카드를 1개 통합 카드로 변경 - 기능 미리보기 태그 추가 - 더 직관적인 네비게이션 📁 코드 구조 개선: - 기존 페이지들을 _deprecated 폴더로 이동 - 탭별 컴포넌트 분리 (components/bom/tabs/) - PAGES_GUIDE.md 업데이트 ✨ 사용자 경험 개선: - 자연스러운 워크플로우 (업로드 → 선택 → 관리) - 탭 간 상태 공유 및 자동 네비게이션 - 통합된 인터페이스에서 모든 BOM 작업 처리
TK-MP BOM 관리 시스템 - 프론트엔드
React + Material-UI 기반의 BOM(Bill of Materials) 관리 시스템 프론트엔드입니다.
🚀 기능
- 대시보드: 프로젝트 현황 및 통계 확인
- 프로젝트 관리: 프로젝트 생성, 수정, 삭제
- 파일 업로드: 드래그&드롭으로 Excel 파일 업로드
- 자재 목록: 검색, 필터링, 정렬이 가능한 자재 테이블
🛠️ 기술 스택
- React 18 - 컴포넌트 기반 UI 라이브러리
- Material-UI (MUI) - 현대적인 UI 컴포넌트
- Vite - 빠른 개발 서버 및 빌드 도구
- React Dropzone - 드래그&드롭 파일 업로드
- MUI DataGrid - 고성능 데이터 테이블
📦 설치 및 실행
# 의존성 설치
npm install
# 개발 서버 실행 (http://localhost:3000)
npm run dev
# 프로덕션 빌드
npm run build
# 빌드 미리보기
npm run preview
🔗 백엔드 연동
백엔드 서버가 http://localhost:8000에서 실행되고 있어야 합니다.
# 백엔드 서버 실행 (별도 터미널)
cd ../backend
source venv/bin/activate
uvicorn app.main:app --reload
📁 프로젝트 구조
frontend/
├── src/
│ ├── components/
│ │ ├── common/ # 공통 컴포넌트
│ │ ├── bom/ # BOM 관련 컴포넌트
│ │ │ ├── materials/ # 카테고리별 자재 뷰
│ │ │ └── shared/ # BOM 공통 컴포넌트
│ │ └── ... # 기타 컴포넌트
│ ├── pages/ # 페이지 컴포넌트
│ │ ├── DashboardPage.jsx # 메인 대시보드
│ │ ├── BOMManagementPage.jsx # BOM 관리
│ │ ├── PurchaseRequestPage.jsx # 구매신청 관리
│ │ └── ... # 기타 페이지들
│ ├── App.jsx # 메인 앱
│ ├── main.jsx # 엔트리 포인트
│ └── index.css # 전역 스타일
├── PAGES_GUIDE.md # 📋 페이지 역할 가이드
├── package.json
└── vite.config.js
📋 페이지 가이드
모든 페이지의 역할과 기능은 PAGES_GUIDE.md에 상세히 문서화되어 있습니다.
🔄 페이지 개발 규칙
- 새 페이지 생성 시
PAGES_GUIDE.md업데이트 필수 - 페이지 역할, 기능, 라우팅, 접근 권한을 명확히 문서화
- 관련 컴포넌트와의 연관성 설명
- 디자인 시스템 준수 (데본씽크 스타일, 글래스모피즘)
⚠️ Docker 배포 시 주의사항
프론트엔드 변경사항이 반영되지 않을 때:
# 1. 프론트엔드 컨테이너 완전 재빌드 (캐시 문제 해결)
docker-compose stop frontend
docker-compose rm -f frontend
docker-compose build --no-cache frontend
docker-compose up -d frontend
# 2. 배포 후 index 파일 버전 확인
docker exec tk-mp-frontend find /usr/share/nginx/html -name "index-*.js"
# 3. 로컬 빌드 버전과 비교
ls -la frontend/dist/assets/index-*.js
주의: Docker 컨테이너는 이전 빌드를 캐시할 수 있어 최신 변경사항이 반영되지 않을 수 있습니다.
변경사항이 보이지 않으면 반드시 --no-cache 옵션으로 재빌드하세요.
🚀 빠른 배포 명령어
# 프론트엔드 빠른 재배포 (한 줄 명령어)
docker-compose stop frontend && docker-compose rm -f frontend && docker-compose build --no-cache frontend && docker-compose up -d frontend
# 전체 시스템 재시작
docker-compose restart
# 특정 서비스만 재시작
docker-compose restart backend
docker-compose restart frontend
🎯 주요 페이지
DashboardPage
- 프로젝트 선택 드롭다운
- 프로젝트별 기능 카드 (BOM 관리, 구매신청 관리)
- 관리자 전용 기능 (사용자 관리, 로그 관리)
- 데본씽크 스타일 디자인
BOMManagementPage
- 카테고리별 자재 관리 (PIPE, FITTING, FLANGE, VALVE, GASKET, BOLT, SUPPORT)
- 구매신청된 자재 비활성화 표시
- 엑셀 내보내기 및 서버 저장
- 사용자 요구사항 입력
PurchaseRequestPage
- 구매신청 목록 조회 및 관리
- 구매신청 제목 인라인 편집
- 원본 파일 정보 표시
- 엑셀 파일 다운로드
카테고리별 자재 뷰 컴포넌트
- 각 자재 카테고리별 전용 뷰 컴포넌트
- 통일된 테이블 형태 UI
- 정렬, 필터링, 전체 선택 기능
- 구매신청된 자재 비활성화 처리
📱 반응형 디자인
- 모바일, 태블릿, 데스크톱 지원
- Material-UI의 Grid 시스템 활용
- 적응형 네비게이션
🔧 개발 도구
- ESLint - 코드 품질 검사
- Vite HMR - 빠른 핫 리로드
- React DevTools - 디버깅 지원
🚀 성능 최적화
- 컴포넌트 지연 로딩
- 메모이제이션 적용
- 번들 크기 최적화
- API 요청 최적화