hyungi/TK-BOM-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
64fd9ad3d2aab2e6b9a2a31931fba25aeec9d159
TK-BOM-Project/frontend/PAGES_GUIDE.md
hyungi 64fd9ad3d2
Some checks failed
SonarQube Analysis / SonarQube Scan (push) Has been cancelled
Details
feat: BOM 관리 시스템 대폭 개선 및 Docker 배포 가이드 추가 
- 🎨 UI/UX 개선: 데본씽크 스타일 모던 디자인 적용
- 📁 컴포넌트 구조 개선: 폴더별 체계적 관리 (common/, bom/, materials/)
- 🔧 BOM 관리 페이지 리팩토링: NewMaterialsPage → BOMManagementPage + 카테고리별 컴포넌트 분리
- 💾 구매신청 기능 개선: 선택된 자재 비활성화, 제목 편집, 엑셀 다운로드
- 📊 자재 표시 개선: 타입/서브타입 컬럼 정리, 상세 정보 복원
- 🐛 CSS 빌드 오류 수정: NewMaterialsPage.css 문법 오류 해결
- 📚 문서화: PAGES_GUIDE.md 추가, README에 Docker 캐시 문제 해결 가이드 추가
- 🔄 API 개선: 구매신청 자재 조회, 제목 수정 엔드포인트 추가
2025-10-16 12:45:23 +09:00

7.8 KiB
Raw Blame History

프론트엔드 페이지 가이드

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

📋 목차

인증 관련 페이지

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)
    • 자재 선택 및 구매신청 (엑셀 내보내기)
    • 구매신청된 자재 비활성화 표시
    • 사용자 요구사항 입력
    • 리비전 관리
  • 라우팅: /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: 서포트 자재 관리

기타 컴포넌트

  • NavigationMenu.jsx: 사이드바 네비게이션
  • NavigationBar.jsx: 상단 네비게이션 바
  • FileUpload.jsx: 파일 업로드 컴포넌트
  • ProtectedRoute.jsx: 권한 기반 라우트 보호

페이지 추가 시 규칙

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

디자인 시스템

색상 팔레트

  • 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-16 다음 페이지 추가 시 반드시 이 문서를 업데이트하세요.

Reference in New Issue View Git Blame Copy Permalink