[FE] 협력사 정보 관리 '하위 협력사 목록' 및 '상세 관제 탭 시스템' 리액트 마이그레이션

[frydaynar]

📖 기능 설명

• 1차 및 2차 협력사가 본인의 공급망 하위 티어 벤더들을 투명하게 추적·관리하고, 신규 파트너를 가입시킬 수 있는 '초대 시스템' 및 '상세 다중 탭(기본정보, ESG요소, 인증현황, 가중합산 공장정보)' 관제 보드를 리액트 환경으로 이관 (3차 협력사의 접근 권한은 완전 방어합니다.)

🔥 우선순위

High (핵심 기능)

✅ 작업할 내용 (Checklist)

• [1단계] PartnerList.jsx 기본 레이아웃 구성, 단일 KPI('전체 협력사 수') 및 단일 필터('협력사 명 검색') 연동
• [2단계] 로그인 유저의 티어별(partner_1st, partner_2nd) 하위 데이터 동적 필터링 파이프라인 및 3차 진입 차단 가드 구축
• [3단계] 우측 상단 '+ 초대하기' 버튼 배치 및 이메일/티어 분기 지정용 초대 팝업 모달 인프라 연동
• [4단계] PartnerDetail.jsx 스위칭 연동 및 (탭1) 하위 협력사 상세 정보(기본정보 / 주요 ESG 지표 / 7대 글로벌 인증) 출력 보드 완공
• [5단계] (탭2) 협력사 공장 정보 연동 및 공장별 이용 비율을 반영한 'ESG 가중합산 요약 시스템' 구현

📍 관련 영역

FE (Frontend)

⚙️ 기술적 고려 사항

• 원청사의 레이아웃 구조와 메인 컨셉 컬러(#03a94d)를 완벽하게 모사해야 합니다.
• App.jsx의 세션 및 userRole 상태 전달 체계를 유기적으로 상속받아야 합니다.

🔗 참고 자료

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