Files
TK-BOM-Project/frontend
Hyungi Ahn 5a21ef8f6c feat: 리비전 관리 시스템 완전 개편
변동이력 관리로 전환:
- 도면번호 기준 변경 추적
- 리비전 업로드 시 전체 자재 저장 (차이분만 저장 방식 폐지)
- 구매신청 정보 수량 기반 상속

리비전 변경 감지:
- 수량/재질/크기/카테고리 변경 감지
- 변경 유형: specification_changed, quantity_changed, added, removed
- 도면별 변경사항 추적

누락 도면 처리:
- 리비전 업로드 시 누락된 도면 자동 감지
- 3가지 선택 옵션: 일부 업로드 / 도면 삭제 / 취소
- 구매신청 여부에 따라 다른 처리 (재고품 vs 숨김)

자재 상태 관리:
- revision_status 컬럼 추가 (active/inventory/deleted_not_purchased/changed)
- 재고품: 연노랑색 배경, '재고품' 배지
- 변경됨: 파란색 테두리, '변경됨' 배지
- 삭제됨: 자동 숨김

구매신청 정보 상속:
- 수량 기반 상속 (그룹별 개수만큼만)
- Rev.0에서 3개 구매 → Rev.1에서 처음 3개만 상속, 추가분은 미구매
- 도면번호 정확히 일치하는 경우에만 상속

기타 개선:
- 구매신청 관리 페이지 수량 표시 개선 (3 EA, 소수점 제거)
- 도면번호/라인번호 파싱 및 저장 (DWG_NAME, LINE_NUM 컬럼)
- SPECIAL 카테고리 도면번호 표시
- 마이그레이션 스크립트 추가 (29_add_revision_status.sql)
2025-10-14 14:30:34 +09:00
..

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/
│   │   ├── Dashboard.jsx       # 대시보드
│   │   ├── FileUpload.jsx      # 파일 업로드
│   │   ├── MaterialList.jsx    # 자재 목록
│   │   └── ProjectManager.jsx  # 프로젝트 관리
│   ├── App.jsx                 # 메인 앱
│   ├── main.jsx               # 엔트리 포인트
│   └── index.css              # 전역 스타일
├── package.json
└── vite.config.js

🎯 주요 컴포넌트

Dashboard

  • 프로젝트 통계 및 현황 표시
  • 최근 활동 목록
  • 실시간 데이터 업데이트

FileUpload

  • 드래그&드롭 인터페이스
  • Excel 파일 검증
  • 업로드 진행률 표시
  • 배치 파일 처리

MaterialList

  • 페이지네이션이 있는 데이터 그리드
  • 실시간 검색 및 필터링
  • CSV 내보내기
  • 정렬 및 컬럼 관리

ProjectManager

  • 프로젝트 CRUD 작업
  • 카드 형태의 프로젝트 표시
  • 모달 기반 편집

📱 반응형 디자인

  • 모바일, 태블릿, 데스크톱 지원
  • Material-UI의 Grid 시스템 활용
  • 적응형 네비게이션

🔧 개발 도구

  • ESLint - 코드 품질 검사
  • Vite HMR - 빠른 핫 리로드
  • React DevTools - 디버깅 지원

🚀 성능 최적화

  • 컴포넌트 지연 로딩
  • 메모이제이션 적용
  • 번들 크기 최적화
  • API 요청 최적화