64fd9ad3d2
Some checks failed
SonarQube Analysis / SonarQube Scan (push) Has been cancelled
- 🎨 UI/UX 개선: 데본씽크 스타일 모던 디자인 적용 - 📁 컴포넌트 구조 개선: 폴더별 체계적 관리 (common/, bom/, materials/) - 🔧 BOM 관리 페이지 리팩토링: NewMaterialsPage → BOMManagementPage + 카테고리별 컴포넌트 분리 - 💾 구매신청 기능 개선: 선택된 자재 비활성화, 제목 편집, 엑셀 다운로드 - 📊 자재 표시 개선: 타입/서브타입 컬럼 정리, 상세 정보 복원 - 🐛 CSS 빌드 오류 수정: NewMaterialsPage.css 문법 오류 해결 - 📚 문서화: PAGES_GUIDE.md 추가, README에 Docker 캐시 문제 해결 가이드 추가 - 🔄 API 개선: 구매신청 자재 조회, 제목 수정 엔드포인트 추가
162 lines
5.0 KiB
Markdown
162 lines
5.0 KiB
Markdown
# TK-MP BOM 관리 시스템 - 프론트엔드
|
|
|
|
React + Material-UI 기반의 BOM(Bill of Materials) 관리 시스템 프론트엔드입니다.
|
|
|
|
## 🚀 기능
|
|
|
|
- **대시보드**: 프로젝트 현황 및 통계 확인
|
|
- **프로젝트 관리**: 프로젝트 생성, 수정, 삭제
|
|
- **파일 업로드**: 드래그&드롭으로 Excel 파일 업로드
|
|
- **자재 목록**: 검색, 필터링, 정렬이 가능한 자재 테이블
|
|
|
|
## 🛠️ 기술 스택
|
|
|
|
- **React 18** - 컴포넌트 기반 UI 라이브러리
|
|
- **Material-UI (MUI)** - 현대적인 UI 컴포넌트
|
|
- **Vite** - 빠른 개발 서버 및 빌드 도구
|
|
- **React Dropzone** - 드래그&드롭 파일 업로드
|
|
- **MUI DataGrid** - 고성능 데이터 테이블
|
|
|
|
## 📦 설치 및 실행
|
|
|
|
```bash
|
|
# 의존성 설치
|
|
npm install
|
|
|
|
# 개발 서버 실행 (http://localhost:3000)
|
|
npm run dev
|
|
|
|
# 프로덕션 빌드
|
|
npm run build
|
|
|
|
# 빌드 미리보기
|
|
npm run preview
|
|
```
|
|
|
|
## 🔗 백엔드 연동
|
|
|
|
백엔드 서버가 `http://localhost:8000`에서 실행되고 있어야 합니다.
|
|
|
|
```bash
|
|
# 백엔드 서버 실행 (별도 터미널)
|
|
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)에 상세히 문서화되어 있습니다.**
|
|
|
|
### 🔄 페이지 개발 규칙
|
|
|
|
1. **새 페이지 생성 시 `PAGES_GUIDE.md` 업데이트 필수**
|
|
2. **페이지 역할, 기능, 라우팅, 접근 권한을 명확히 문서화**
|
|
3. **관련 컴포넌트와의 연관성 설명**
|
|
4. **디자인 시스템 준수 (데본씽크 스타일, 글래스모피즘)**
|
|
|
|
### ⚠️ **Docker 배포 시 주의사항**
|
|
|
|
**프론트엔드 변경사항이 반영되지 않을 때:**
|
|
|
|
```bash
|
|
# 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` 옵션으로 재빌드하세요.
|
|
|
|
### 🚀 **빠른 배포 명령어**
|
|
|
|
```bash
|
|
# 프론트엔드 빠른 재배포 (한 줄 명령어)
|
|
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 요청 최적화
|
|
|