hyungi/tk-factory-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
tk-factory-services/tkeg/web/PAGES_GUIDE.md
Hyungi Ahn 1e1d2f631a feat(tkeg): tkeg BOM 자재관리 서비스 초기 세팅 (api + web + docker-compose) 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-16 15:41:58 +09:00

12 KiB
Raw Permalink Blame History

프론트엔드 페이지 가이드

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

📋 목차

인증 관련 페이지

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