[FE] 원자재 관리 목록 조회 분기 및 상·하위 차수 간 정보 요청/검증(승인·반려) 시스템 구현

[frydaynar]

📖 기능 설명

• 기능 목적
  • 공급망 내 협력사들의 차수별(Tier) 계약 관계를 명확히 구조화하고, 상·하위 차수 간 원자재 정보의 입력, 전송(승인 요청/임시저장), 검증(승인·반려) 프로세스를 통합 관리하는 '원자재 관리' 도메인 완공
• 필요성
  • 1차 협력사와 2·3차 협력사의 계약 관계(PO ID 노출 여부)에 따른 데이터 가시성 제어
  • 최하위 레벨인 3차 협력사를 제외한 상위 차수(원청사, 1차, 2차)에서 하위 차수가 제출한 원자재 데이터를 검증(반려 사유 기술)하고, 우리회사의 상위 차수에게 유기적으로 데이터를 전달할 수 있는 무결성 파이프라인 필요

🔥 우선순위

High (핵심 기능)

✅ 작업할 내용 (Checklist)

[1Depth] 원자재 관리 메인 리스트 (RawMaterialList.jsx)

• Tailwind CSS 기반의 원자재 관리 마스터 데이터 테이블 레이아웃 구현 (Strict No-Emoji)
• 로그인 데이터(loginData)의 협력사 티어에 따른 컬럼 조건부 렌더링 구현
  • 1차 협력사 진입 시: PO ID 컬럼 및 고유 데이터 노출
  • 2차/3차 협력사 진입 시: PO ID 컬럼 및 데이터 미노출(숨김) 처리
• 요구사항 명세 리스트 컬럼 매핑 및 더미 데이터(MOCK) 바인딩
  • 컬럼 사양: PO ID(조건부), 협력사 티어, 요청 회사, 제출 회사, 제품(원자재)명, 요청일, 승인일, 상태
• 상태(Status)별 공통 칩(Chip/SChip) 디자인 결합 및 정의
  • 요청중: 하위 차수에게 요청/긴급 요청을 보낸 상태 (우선 보류 프리셋)
  • 승인 대기: 하위 차수가 작성 완료 후 상위 차수에게 승인 요청을 보낸 상태
  • 반려: 승인 요청이 거절되어 사유와 함께 복구된 상태
  • 승인 완료: 최종 승인이 완료된 상태
• 리스트 행(Row) 클릭 시 상태 값과 진입 협력사 티어(Role)에 따른 상세 2Depth 컴포넌트 전환 인프라 구축

[2Depth-A] 하위 차수 제출 정보 검증 패널 (상위 차수 시점) - 3차 협력사 제외

• 현재 로그인한 티어가 3차 협력사일 경우 본 검증 패널(2Depth-A)로의 진입 및 렌더링 전면 원천 차단
• 원청사, 1차, 2차 협력사 시점에서 하위 차수가 입력하여 보낸 원자재 정보 읽기 전용(Read-Only) 뷰 구현
• 의사결정 제어 컴포넌트 배치: 승인 버튼, 반려 버튼 및 사유 입력용 textarea 구현
• 반려 처리 시 textarea에 입력된 사유 데이터를 상태(State)에 매핑하고, 어떤 항목이 반려되었는지 하위 차수가 직관적으로 인지할 수 있도록 컴포넌트 내 반려 타겟 마킹 로직 설계

[2Depth-B] 상위 차수 제출용 입력 폼 & 수정 패널 (우리 회사 시점)

• 상위 차수에게 전송할 원자재 정보 입력용 인라인 폼 구조화 (Form.jsx 유틸 활용)
• 하단 액션 버튼 그룹 배치: 승인요청 버튼, 임시저장 버튼 스펙 구현
• 반려 데이터 복구(수정화면) 모드 구현
  • 상태가 반려인 레코드 진입 시, 이전에 작성했던 내용이 인풋 폼에 자동 복원(Binding)되도록 처리
  • 상단 또는 사이드 영역에 상위 차수가 입력한 반려 사유 및 반려된 항목 정보가 실시간 가시화되도록 UI 배치

📍 관련 영역

FE (Frontend)

⚙️ 기술적 고려 사항

• 컴포넌트 내 비즈니스 분기 시 loginData?.tier 혹은 loginData?.role_name 값을 활용하여 3차 협력사의 하위 검증 패널 예외 처리를 명확히 분기할 것.
• 모든 스타일 파일 및 테마는 기존 완공 자산(PartnerList.jsx, PartnerDetail.jsx)의 패딩, 마진, 에메랄드(#03a94d) 컬러 코드를 상속함.

🔗 참고 자료

• 마일스톤: [M3-3] 프론트엔드 UI/UX 컴포넌트 모듈화 및 데이터 시각화
• 적용 예정 라벨(Label): 🏗 building (Status) / Type A: Feature (Type) / High (Priority)