e27020ae9b
- 모든 카테고리 구매신청 기능 완성 (PIPE, FITTING, VALVE, FLANGE, GASKET, BOLT, SUPPORT, SPECIAL, UNKNOWN) - 구매신청 완료 항목: 회색 배경, 체크박스 비활성화, '구매신청완료' 배지 표시 - 전체 선택/구매신청 시 이미 구매신청된 항목 자동 제외 - 구매신청 quantity 타입 에러 수정 (문자열 -> 정수 변환) SUPPORT 카테고리 (구 U-BOLT): - U-BOLT -> SUPPORT로 카테고리명 변경 - 클램프, 유볼트, 우레탄블럭슈 분류 개선 - 테이블 헤더: 선택-종류-타입-크기-디스크립션-추가요구-사용자요구-수량 - 크기 정보 main_nom 필드에서 가져오기 (배관 인치) - 엑셀 내보내기 형식 조정 SPECIAL 카테고리: - SPECIAL 키워드 자재 자동 분류 (SPECIFICATION 제외) - 파일 업로드 시 SPECIAL 카테고리 처리 로직 추가 - 도면번호 필드 추가 (drawing_name, line_no) - 타입 필드: 크기/스케줄/재질 제외한 핵심 정보 표시 - 엑셀 DWG_NAME, LINE_NUM 컬럼 파싱 및 저장 FITTING 카테고리: - 테이블 컬럼 너비 조정 (선택 2%, 종류 8.5%, 수량 12%) 구매신청 관리: - 엑셀 재다운로드 형식 개선 (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/
│ │ ├── 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 요청 최적화