# 프론트엔드 페이지 가이드

이 문서는 TK-MP 프로젝트의 프론트엔드 페이지들의 역할과 기능을 정리한 가이드입니다.

## 📋 목차

- [인증 관련 페이지](#인증-관련-페이지)
- [대시보드 및 메인 페이지](#대시보드-및-메인-페이지)
- [프로젝트 관리 페이지](#프로젝트-관리-페이지)
- [BOM 관리 페이지](#bom-관리-페이지)
- [구매 관리 페이지](#구매-관리-페이지)
- [시스템 관리 페이지](#시스템-관리-페이지)
- [컴포넌트 구조](#컴포넌트-구조)

---

## 인증 관련 페이지

### `LoginPage.jsx`
- **역할**: 사용자 로그인 페이지
- **기능**: 
  - 사용자 인증 (이메일/비밀번호)
  - 로그인 상태 관리
  - 인증 실패 시 에러 메시지 표시
- **라우팅**: `/login`
- **접근 권한**: 모든 사용자 (비인증)

---

## 대시보드 및 메인 페이지

### `DashboardPage.jsx`
- **역할**: 메인 대시보드 페이지
- **기능**:
  - 프로젝트 선택 드롭다운
  - 프로젝트별 기능 카드 (BOM 관리, 구매신청 관리)
  - 관리자 전용 기능 (사용자 관리, 로그 관리)
  - 프로젝트 생성/편집/삭제/비활성화
- **라우팅**: `/dashboard`
- **접근 권한**: 인증된 사용자
- **디자인**: 데본씽크 스타일, 글래스모피즘 효과

### `MainPage.jsx`
- **역할**: 초기 랜딩 페이지
- **기능**: 기본 페이지 구조 및 네비게이션
- **라우팅**: `/`
- **접근 권한**: 인증된 사용자

---

## 프로젝트 관리 페이지

### `ProjectsPage.jsx`
- **역할**: 프로젝트 목록 및 관리
- **기능**:
  - 프로젝트 목록 조회
  - 프로젝트 생성/수정/삭제
  - 프로젝트 상태 관리
- **라우팅**: `/projects`
- **접근 권한**: 관리자

### `InactiveProjectsPage.jsx`
- **역할**: 비활성화된 프로젝트 관리
- **기능**:
  - 비활성 프로젝트 목록 조회
  - 프로젝트 활성화/삭제
  - 전체 선택/해제 기능
- **라우팅**: `/inactive-projects`
- **접근 권한**: 관리자

### `JobRegistrationPage.jsx`
- **역할**: 새로운 작업(Job) 등록
- **기능**:
  - 작업 정보 입력 및 등록
  - 프로젝트 연결
- **라우팅**: `/job-registration`
- **접근 권한**: 관리자

### `JobSelectionPage.jsx`
- **역할**: 작업 선택 페이지
- **기능**:
  - 등록된 작업 목록 조회
  - 작업 선택 및 이동
- **라우팅**: `/job-selection`
- **접근 권한**: 인증된 사용자

---

## BOM 관리 페이지

### `BOMManagementPage.jsx`
- **역할**: BOM(Bill of Materials) 통합 관리 페이지
- **기능**:
  - 카테고리별 자재 조회 (PIPE, FITTING, FLANGE, VALVE, GASKET, BOLT, SUPPORT, SPECIAL)
  - 자재 선택 및 구매신청 (엑셀 내보내기)
  - 구매신청된 자재 비활성화 표시
  - 사용자 요구사항 입력 및 저장
  - 리비전 관리
- **라우팅**: `/bom-management`
- **접근 권한**: 인증된 사용자
- **특징**: 카테고리별 컴포넌트로 분리된 구조

### `NewMaterialsPage.jsx` (레거시)
- **역할**: 기존 자재 관리 페이지 (현재 백업용)
- **상태**: 사용 중단, `BOMManagementPage`로 대체됨
- **기능**: 자재 분류, 편집, 내보내기 (기존 로직 보존)

### `BOMStatusPage.jsx`
- **역할**: BOM 상태 조회 페이지
- **기능**:
  - BOM 파일 상태 확인
  - 처리 진행률 표시
- **라우팅**: `/bom-status`
- **접근 권한**: 인증된 사용자

### `BOMWorkspacePage.jsx`
- **역할**: BOM 작업 공간
- **기능**:
  - BOM 파일 업로드 및 처리
  - 자재 분류 작업
- **라우팅**: `/bom-workspace`
- **접근 권한**: 인증된 사용자

---

## 구매 관리 페이지

### `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: SPECIAL 카테고리 추가
- `SpecialMaterialsView.jsx` 컴포넌트 추가
- 특수 제작 자재 관리 기능 구현
- 자동 타입 분류 및 정보 파싱 시스템
- 엑셀 내보내기 규칙 적용 (P열 납기일, 관리항목 자동 채움)
- BOM 카테고리 색상 팔레트에 SPECIAL (#ec4899) 추가