hyungi/TK-BOM-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
TK-BOM-Project/frontend/PAGES_GUIDE.md
hyungi ab607dfa9a
Some checks failed
SonarQube Analysis / SonarQube Scan (push) Has been cancelled
Details
feat: 통합 BOM 관리 시스템 구현 
🎯 주요 변경사항:
- 통합 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 작업 처리
2025-10-17 14:44:17 +09:00

349 lines
12 KiB
Markdown
Raw Permalink Blame History

# 프론트엔드 페이지 가이드
이 문서는 TK-MP 프로젝트의 프론트엔드 페이지들의 역할과 기능을 정리한 가이드입니다.
## 📋 목차
- [인증 관련 페이지](#인증-관련-페이지)
- [대시보드 및 메인 페이지](#대시보드-및-메인-페이지)
- [프로젝트 관리 페이지](#프로젝트-관리-페이지)
- [BOM 관리 페이지](#bom-관리-페이지)
- [구매 관리 페이지](#구매-관리-페이지)
- [시스템 관리 페이지](#시스템-관리-페이지)
- [컴포넌트 구조](#컴포넌트-구조)
---
## 인증 관련 페이지
### `LoginPage.jsx`
- **역할**: 사용자 로그인 페이지
- **기능**:
- 사용자 인증 (이메일/비밀번호)
- 로그인 상태 관리
- 인증 실패 시 에러 메시지 표시
- **라우팅**: `/login`
- **접근 권한**: 모든 사용자 (비인증)
---
## 대시보드 및 메인 페이지
### `DashboardPage.jsx`
- **역할**: 메인 대시보드 페이지
- **기능**:
- 프로젝트 선택 드롭다운
- **새로운 3개 BOM 카드**: 📤 BOM Upload, 📊 Revision Management, 📋 BOM Management
- 구매신청 관리 카드
- 관리자 전용 기능 (사용자 관리, 로그 관리)
- 프로젝트 생성/편집/삭제/비활성화
- **라우팅**: `/dashboard`
- **접근 권한**: 인증된 사용자
- **디자인**: 데본씽크 스타일, 글래스모피즘 효과
- **업데이트**: BOM 기능을 3개 전용 페이지로 분리
### `MainPage.jsx`
- **역할**: 초기 랜딩 페이지
- **기능**: 기본 페이지 구조 및 네비게이션
- **라우팅**: `/`
- **접근 권한**: 인증된 사용자
---
## 프로젝트 관리 페이지
### `ProjectsPage.jsx`
- **역할**: 프로젝트 목록 및 관리
- **기능**:
- 프로젝트 목록 조회
- 프로젝트 생성/수정/삭제
- 프로젝트 상태 관리
- **라우팅**: `/projects`
- **접근 권한**: 관리자
### `InactiveProjectsPage.jsx`
- **역할**: 비활성화된 프로젝트 관리
- **기능**:
- 비활성 프로젝트 목록 조회
- 프로젝트 활성화/삭제
- 전체 선택/해제 기능
- **라우팅**: `/inactive-projects`
- **접근 권한**: 관리자
### `JobRegistrationPage.jsx`
- **역할**: 새로운 작업(Job) 등록
- **기능**:
- 작업 정보 입력 및 등록
- 프로젝트 연결
- **라우팅**: `/job-registration`
- **접근 권한**: 관리자
### `JobSelectionPage.jsx`
- **역할**: 작업 선택 페이지
- **기능**:
- 등록된 작업 목록 조회
- 작업 선택 및 이동
- **라우팅**: `/job-selection`
- **접근 권한**: 인증된 사용자
---
## BOM 관리 페이지
### `BOMUploadPage.jsx` ⭐ 신규
- **역할**: BOM 파일 업로드 전용 페이지
- **기능**:
- 드래그 앤 드롭 파일 업로드
- 파일 검증 (형식: .xlsx, .xls, .csv / 최대 50MB)
- 실시간 업로드 진행률 표시
- 자동 BOM 이름 설정
- 업로드 완료 후 BOM 관리 페이지로 자동 이동
- **라우팅**: `/bom-upload`
- **접근 권한**: 인증된 사용자
- **디자인**: 모던 UI, 글래스모피즘 효과
### `BOMRevisionPage.jsx` ⭐ 신규
- **역할**: BOM 리비전 관리 전용 페이지
- **현재 상태**: 기본 구조 완성, 고급 기능 개발 예정
- **기능**:
- BOM 파일 목록 표시
- 리비전 히스토리 개요
- 개발 예정 기능 안내 (타임라인, 비교, 롤백)
- **라우팅**: `/bom-revision`
- **접근 권한**: 인증된 사용자
- **향후 계획**: 📊 리비전 타임라인, 🔍 변경사항 비교, ⏪ 롤백 시스템
### `BOMManagementPage.jsx`
- **역할**: BOM(Bill of Materials) 자재 관리 페이지
- **기능**:
- 카테고리별 자재 조회 (PIPE, FITTING, FLANGE, VALVE, GASKET, BOLT, SUPPORT, SPECIAL, UNCLASSIFIED)
- 자재 선택 및 구매신청 (엑셀 내보내기)
- 구매신청된 자재 비활성화 표시
- 사용자 요구사항 입력 및 저장 (Brand, Additional Request)
- 카테고리별 전용 컴포넌트 구조
- **라우팅**: `/bom-management`
- **접근 권한**: 인증된 사용자
- **특징**: 카테고리별 컴포넌트로 완전 분리된 구조
### `NewMaterialsPage.jsx` (레거시)
- **역할**: 기존 자재 관리 페이지 (현재 백업용)
- **상태**: 사용 중단, `BOMManagementPage`로 대체됨
- **기능**: 자재 분류, 편집, 내보내기 (기존 로직 보존)
### `BOMStatusPage.jsx`
- **역할**: BOM 상태 조회 페이지
- **기능**:
- BOM 파일 상태 확인
- 처리 진행률 표시
- **라우팅**: `/bom-status`
- **접근 권한**: 인증된 사용자
### `_deprecated/BOMWorkspacePage.jsx` (사용 중단)
- **역할**: 기존 BOM 작업 공간 (사용 중단)
- **상태**: `BOMUploadPage`와 `BOMRevisionPage`로 분리됨
- **이유**: 업로드와 리비전 관리 기능을 별도 페이지로 분리하여 사용성 개선
---
## 구매 관리 페이지
### `PurchaseRequestPage.jsx`
- **역할**: 구매신청 관리 페이지
- **기능**:
- 구매신청 목록 조회
- 구매신청 제목 편집 (인라인 편집)
- 원본 파일 정보 표시
- 엑셀 파일 다운로드
- 구매신청 자재 상세 조회
- **라우팅**: `/purchase-requests`
- **접근 권한**: 인증된 사용자
- **특징**: BOM 페이지와 연동된 구매 워크플로우
### `PurchaseBatchPage.jsx`
- **역할**: 구매 배치 처리 페이지
- **기능**:
- 대량 구매 처리
- 배치 작업 관리
- **라우팅**: `/purchase-batch`
- **접근 권한**: 관리자
---
## 시스템 관리 페이지
### `UserManagementPage.jsx`
- **역할**: 사용자 관리 페이지
- **기능**:
- 사용자 목록 조회
- 사용자 생성/수정/삭제
- 권한 관리
- 사용자 상태 관리
- **라우팅**: `/user-management`
- **접근 권한**: 관리자
### `SystemSettingsPage.jsx`
- **역할**: 시스템 설정 페이지
- **기능**:
- 시스템 전반 설정 관리
- 환경 변수 설정
- **라우팅**: `/system-settings`
- **접근 권한**: 관리자
### `SystemSetupPage.jsx`
- **역할**: 시스템 초기 설정 페이지
- **기능**:
- 시스템 초기 구성
- 기본 데이터 설정
- **라우팅**: `/system-setup`
- **접근 권한**: 관리자
### `SystemLogsPage.jsx`
- **역할**: 시스템 로그 조회 페이지
- **기능**:
- 시스템 로그 조회
- 로그 필터링 및 검색
- **라우팅**: `/system-logs`
- **접근 권한**: 관리자
### `LogMonitoringPage.jsx`
- **역할**: 로그 모니터링 페이지
- **기능**:
- 실시간 로그 모니터링
- 로그 분석 및 알림
- **라우팅**: `/log-monitoring`
- **접근 권한**: 관리자
### `AccountSettingsPage.jsx`
- **역할**: 개인 계정 설정 페이지
- **기능**:
- 개인 정보 수정
- 비밀번호 변경
- 계정 설정 관리
- **라우팅**: `/account-settings`
- **접근 권한**: 인증된 사용자
---
## 워크스페이스 페이지
### `ProjectWorkspacePage.jsx`
- **역할**: 프로젝트 작업 공간
- **기능**:
- 프로젝트별 작업 환경
- 파일 관리 및 협업 도구
- **라우팅**: `/project-workspace`
- **접근 권한**: 인증된 사용자
---
## 컴포넌트 구조
### `components/common/`
- **ErrorBoundary.jsx**: 에러 경계 컴포넌트
- **UserMenu.jsx**: 사용자 드롭다운 메뉴
### `components/bom/`
- **shared/**: 공통 BOM 컴포넌트
- `FilterableHeader.jsx`: 필터링 가능한 테이블 헤더
- `MaterialTable.jsx`: 자재 테이블 공통 컴포넌트
- **materials/**: 카테고리별 자재 뷰 컴포넌트
- `PipeMaterialsView.jsx`: 파이프 자재 관리
- `FittingMaterialsView.jsx`: 피팅 자재 관리
- `FlangeMaterialsView.jsx`: 플랜지 자재 관리
- `ValveMaterialsView.jsx`: 밸브 자재 관리
- `GasketMaterialsView.jsx`: 가스켓 자재 관리
- `BoltMaterialsView.jsx`: 볼트 자재 관리
- `SupportMaterialsView.jsx`: 서포트 자재 관리
- `SpecialMaterialsView.jsx`: 특수 제작 자재 관리
#### SPECIAL 카테고리 상세 기능
`SpecialMaterialsView.jsx`는 특수 제작이 필요한 자재들을 관리하는 컴포넌트입니다:
**주요 기능:**
- **자동 타입 분류**: FLANGE, OIL PUMP, COMPRESSOR, VALVE, FITTING, PIPE 등 큰 범주 자동 인식
- **정보 파싱**: 자재 설명을 도면, 항목1-4로 체계적 분리
- **테이블 구조**: `Type | Drawing | Item 1 | Item 2 | Item 3 | Item 4 | Additional Request | Purchase Quantity`
- **엑셀 내보내기**: P열 납기일 규칙 준수, 관리항목 자동 채움
- **저장 기능**: 추가요청사항 저장/편집 (다른 카테고리와 동일)
**처리 예시:**
- `SAE SPECIAL FF, OIL PUMP, ASTM A105` → Type: OIL PUMP, Item1: SAE SPECIAL FF, Item2: OIL PUMP, Item3: ASTM A105
- `FLG SPECIAL FF, COMPRESSOR(N11), ASTM A105` → Type: FLANGE, Item1: FLG SPECIAL FF, Item2: COMPRESSOR(N11), Item3: ASTM A105
**분류 조건:**
- `SPECIAL` 키워드 포함 (단, `SPECIFICATION` 제외)
- 한글 `스페셜` 또는 `SPL` 키워드 포함
### 기타 컴포넌트
- **NavigationMenu.jsx**: 사이드바 네비게이션
- **NavigationBar.jsx**: 상단 네비게이션 바
- **FileUpload.jsx**: 파일 업로드 컴포넌트
- **ProtectedRoute.jsx**: 권한 기반 라우트 보호
---
## 페이지 추가 시 규칙
1. **새 페이지 생성 시 이 문서 업데이트 필수**
2. **페이지 역할과 기능을 명확히 문서화**
3. **라우팅 경로와 접근 권한 명시**
4. **관련 컴포넌트와의 연관성 설명**
5. **디자인 시스템 준수 (데본씽크 스타일, 글래스모피즘)**
---
## 디자인 시스템
### 색상 팔레트
- **Primary**: 블루 그라데이션 (#3b82f6 → #1d4ed8)
- **Background**: 글래스 효과 (backdrop-filter: blur)
- **Cards**: 20px 둥근 모서리, 그림자 효과
### BOM 카테고리 색상
- **PIPE**: #3b82f6 (파란색)
- **FITTING**: #10b981 (초록색)
- **FLANGE**: #f59e0b (주황색)
- **VALVE**: #ef4444 (빨간색)
- **GASKET**: #8b5cf6 (보라색)
- **BOLT**: #6b7280 (회색)
- **SUPPORT**: #f97316 (주황색)
- **SPECIAL**: #ec4899 (핑크색)
### 반응형 디자인
- **Desktop**: 3-4열 그리드
- **Tablet**: 2열 그리드
- **Mobile**: 1열 그리드
### 타이포그래피
- **Font Family**: Apple 시스템 폰트
- **Weight**: 다양한 weight 활용 (400, 500, 600, 700)
---
*마지막 업데이트: 2024-10-17*
*다음 페이지 추가 시 반드시 이 문서를 업데이트하세요.*
## 최근 업데이트 내역
### 2024-10-17: BOM 페이지 구조 개편 ⭐ 주요 업데이트
- **새로운 페이지 추가**:
- `BOMUploadPage.jsx`: 전용 업로드 페이지 (드래그 앤 드롭, 파일 검증)
- `BOMRevisionPage.jsx`: 리비전 관리 페이지 (기본 구조, 향후 고급 기능 예정)
- **기존 페이지 정리**:
- `BOMWorkspacePage.jsx` → `_deprecated/` 폴더로 이동 (사용 중단)
- 업로드와 리비전 기능을 별도 페이지로 분리하여 사용성 개선
- **대시보드 개편**:
- BOM 관리를 3개 카드로 분리: 📤 Upload, 📊 Revision, 📋 Management
- 각 기능별 전용 페이지로 명확한 역할 분담
- **라우팅 업데이트**:
- `/bom-upload`: 새 파일 업로드
- `/bom-revision`: 리비전 관리
- `/bom-management`: 자재 관리
### 2024-10-17: SPECIAL 카테고리 추가
- `SpecialMaterialsView.jsx` 컴포넌트 추가
- 특수 제작 자재 관리 기능 구현
- 자동 타입 분류 및 정보 파싱 시스템
- 엑셀 내보내기 규칙 적용 (P열 납기일, 관리항목 자동 채움)
- BOM 카테고리 색상 팔레트에 SPECIAL (#ec4899) 추가
Reference in New Issue View Git Blame Copy Permalink