Files

SonarQube Analysis / SonarQube Scan (push) Has been cancelled

Details

feat: SPECIAL/UNCLASSIFIED 카테고리 추가 및 WELD GAP 자동 제외

주요 변경사항:
- SPECIAL 카테고리 추가: 특수 제작 품목 관리 (Type, Drawing, Detail1-4)
- UNCLASSIFIED 카테고리 추가: 미분류 자재 원본 그대로 표시
- UNKNOWN → UNCLASSIFIED 통합: 기존 UNKNOWN 카테고리 제거
- WELD GAP 자동 제외: BOM 업로드 시 WELD GAP 항목 자동 필터링

백엔드:
- integrated_classifier.py: UNKNOWN → UNCLASSIFIED 변경, SPECIAL 우선순위 분류
- files.py: parse_dataframe에서 WELD GAP 필터링, UNKNOWN 참조 제거
- exclude_classifier.py: WELD GAP 제외 로직 유지

프론트엔드:
- SpecialMaterialsView.jsx: 특수 제작 품목 관리 컴포넌트
- UnclassifiedMaterialsView.jsx: 미분류 자재 관리 컴포넌트
- BOMManagementPage.jsx: 새 카테고리 추가 및 라우팅
- excelExport.js: SPECIAL/UNCLASSIFIED 엑셀 내보내기 지원
- 모든 UNKNOWN 참조를 UNCLASSIFIED로 변경

기능 개선:
- 저장 기능: 모든 카테고리에 추가요청사항 저장/편집 기능
- P열 납기일 규칙: 모든 카테고리 엑셀 내보내기 통일
- UI 개선: Detail1-4 컬럼명으로 혼동 방지
- 데이터 정리: 모든 프로젝트 및 BOM 데이터 초기화

2025-10-17 13:48:48 +09:00

9.5 KiB

Raw Blame History

프론트엔드 페이지 가이드

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

📋 목차

인증 관련 페이지
대시보드 및 메인 페이지
프로젝트 관리 페이지
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: 권한 기반 라우트 보호

페이지 추가 시 규칙

새 페이지 생성 시 이 문서 업데이트 필수
페이지 역할과 기능을 명확히 문서화
라우팅 경로와 접근 권한 명시
관련 컴포넌트와의 연관성 설명
디자인 시스템 준수 (데본씽크 스타일, 글래스모피즘)

디자인 시스템

색상 팔레트

Primary: 블루 그라데이션 (#3b82f6 → #1d4ed8)
Background: 글래스 효과 (backdrop-filter: blur)
Cards: 20px 둥근 모서리, 그림자 효과

반응형 디자인

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) 추가

9.5 KiB Raw Blame History

프론트엔드 페이지 가이드

📋 목차

인증 관련 페이지

LoginPage.jsx

대시보드 및 메인 페이지

DashboardPage.jsx

MainPage.jsx

프로젝트 관리 페이지

ProjectsPage.jsx

InactiveProjectsPage.jsx

JobRegistrationPage.jsx

JobSelectionPage.jsx

BOM 관리 페이지

BOMManagementPage.jsx

NewMaterialsPage.jsx (레거시)

BOMStatusPage.jsx

BOMWorkspacePage.jsx