# Superport v2 프론트엔드 구현 Task List (UI First → API Integration)

본 체크리스트는 PRD(`doc/PRD_입출고_결재_v2.md`)를 기준으로 shadcn_ui 스타일과 반응형 패턴을 준수하여 화면을 구현하기 위한 단계별 작업 목록입니다. 작업 순서는 ① 코드 시작 전 최종 확인 → ② UI 스캐폴딩/상호작용 구현 → ③ 실제 API 연동(Dio/ApiClient/DI)입니다. Mock 데이터는 사용하지 않습니다.

## 0) 코드 시작 전 최종 확인(Repository/환경)
- [ ] Flutter 버전/채널 확인, `flutter pub get`
- [ ] `pubspec.yaml` 확인: `go_router`, `shadcn_ui`, `intl`, `two_dimensional_scrollables`, `lucide_icons_flutter` 포함
- [ ] `Environment.initialize()` 호출 및 `.env.development`/`.env.production`에서 `API_BASE_URL`/`TIMEOUT_MS`/`LOG_LEVEL` 로드
- [ ] 라우팅 스켈레톤(go_router) 구성: 로그인/대시보드/입·출·대여/마스터/결재/보고서
- [ ] 글로벌 테마/ShadTheme 확인(폰트/간격/배지/버튼 일관)

## 1) 공통 컴포넌트/레이아웃(UI)
- [ ] AppLayout(좌 사이드바/상단 헤더/본문) 적용, 브레드크럼·타이틀·툴바 영역 정리
- [ ] 테이블: `ShadTable.list` 표준화(고정 헤더/가로 스크롤/소팅/페이지네이션 UI만)
- [ ] 모달: `SuperportShadDialog`(헤더/본문/푸터 분리, 모바일 풀스크린) 공통 wrapper
- [ ] 입력 위젯: `ShadInput/Select/Switch`, `SuperportShadDatePicker/RangePicker` 적용 가이드
- [ ] 필터바(검색/기간/상태/창고/Reset) 공통 위젯
- [ ] 반응형 프리셋: 데스크톱/태블릿/모바일 열 가시성 설정(섹션 12 규칙 반영)
- [ ] 토스트/스낵바/스켈레톤/Empty 상태 공통 처리

## 2) 인증/대시보드(UI)
- [ ] 로그인 화면(`/login`): 아이디/비밀번호 UI(제출/로딩/에러 표시 흐름)
- [ ] 대시보드(`/`): KPI 카드, 최근 트랜잭션, 내 결재 대기 리스트 — 스켈레톤/Empty 상태 구현

## 3) 입고(`/inbounds`) UI
- [ ] 라우트/네비게이션 연결
- [ ] 목록 테이블: 번호/처리일자/창고/트랜잭션번호/상태/작성자/품목수/총수량/비고
- [ ] 필터: 기간/창고/상태/검색, 소팅/페이지네이션
- [ ] 신규 모달: 헤더(처리일자/창고/상태/작성자/비고) + 시스템 필드(`transaction_type_id=입고` RO/숨김)
- [ ] 라인 테이블: 제품(자동완성)→제조사/단위 자동, 수량/단가/비고, (+)/(−) 행 편집
- [ ] 검증: 필수/수량>=1/단가>=0, 상단 요약 + 인라인 에러
- [ ] 수정 모달: 작성자/트랜잭션번호 RO, 종결 상태 수정 제한

## 4) 출고(`/outbounds`) UI
- [ ] 목록 테이블: 번호/처리일자/창고/트랜잭션번호/상태/작성자/고객수/품목수/총수량/비고
- [ ] 필터: 기간/창고/상태/고객/검색
- [ ] 신규/수정 모달: 헤더(…)+ 시스템 필드(`transaction_type_id=출고` RO/숨김)
- [ ] 고객 연결(멀티): 고객사 자동완성 → 토큰/칩 UI, 최소 1건 검증
- [ ] 라인 테이블: 제품/제조사RO/단위RO/수량/단가/비고

## 5) 대여(`/rentals`) UI
- [ ] 목록 테이블: 번호/처리일자/창고/대여구분/트랜잭션번호/상태/반납예정일/고객수/품목수/비고
- [ ] 필터: 기간/창고/상태/대여구분/반납예정일 범위/검색
- [ ] 신규/수정 모달: 헤더(…/대여구분/반납예정일) + 시스템 필드(`transaction_type_id` 대여/반납 자동 매핑)
- [ ] 고객 연결(멀티) + 라인 테이블(입고·출고와 동일)
- [ ] 규칙: 대여구분은 종결 후 변경 불가, 반납예정일은 진행 중 수정 가능

## 6) 마스터(UI)
- [x] 벤더: 목록/필터(q/사용여부), 신규/수정(코드RO), 삭제/복구 UI
- [x] 제품: 목록/필터(q/제조사/단위/사용), 신규/수정(코드RO)
- [ ] 창고: 목록/필터(q/사용), 신규/수정(우편번호 검색 모달 UI 연동)
- [x] 고객사: 목록/필터(q/유형/사용), 신규/수정(유형→is_partner/is_general 매핑 UI)
- [ ] 사용자: 목록/필터(q/그룹/사용), 신규/수정(사번RO)
- [ ] 그룹: 목록/필터(q/기본/사용), 신규/수정(그룹명RO)
- [ ] 메뉴: 목록/필터(q/상위/사용), 신규/수정(메뉴코드RO)
- [ ] 그룹 권한: 목록/필터(그룹/메뉴/사용), 체크박스 매트릭스 편집 UI

## 7) 결재(UI)
- [ ] 결재(`/approvals`): 목록/필터, 상세(개요/단계/이력 탭)
- [ ] 템플릿 불러오기: 단계 탭에서 템플릿 선택 UI(단계 리스트 반영)
- [ ] 단계 행위: 승인/반려/코멘트 버튼(가능 여부 상태에 따라 비활성/툴팁)
- [ ] 단계 관리(`/approval-steps`): 목록/편집(신규/수정)
- [ ] 이력(`/approval-histories`): 조회 전용 테이블
- [ ] 템플릿(`/approval-templates`): 목록/헤더+단계 반복 폼

## 8) 우편번호 검색 모달(UI)
- [ ] 입력: 검색어 텍스트
- [ ] 결과 테이블: 우편번호/시도/시군구/도로명/건물번호
- [ ] 선택 시: 부모 폼 `zipcode`/주소 구성요소 채움

## 9) 보고서(`/reports`) UI
- [ ] 조건 폼: 기간/유형/창고/상태
- [ ] 액션: XLSX/PDF 버튼 — 미제공 시 버튼 비활성 UI(연동은 API 단계에서)

## 10) 데이터 계층/상태 관리
- [ ] 리포지토리 인터페이스(domain) 정의 및 구현(data): 트랜잭션/결재/마스터/룩업/우편번호
- [ ] DTO ↔ 도메인 엔티티 매핑(응답 `{ items }`/`{ data }` 구조 표준화)
- [ ] 페이지네이션 상태(현재 페이지/사이즈/전체) 및 필터 상태 싱크(go_router querystring 연동)
- [ ] 정렬/검색/Include 옵션 직렬화 및 유지

## 11) API 연동 단계(Dio/ApiClient/DI)
- [ ] 네트워킹 패키지 추가: `dio:^5.x`, `pretty_dio_logger`(dev 선택), 토큰 저장용 `flutter_secure_storage`(모바일)/웹 스토리지
- [ ] `ApiClient`/`AuthInterceptor` 스켈레톤 작성(설계: `doc/API_CLIENT_SPEC.md`)
- [ ] `Environment.initialize()` → `get_it` DI에서 ApiClient 생성/주입
- [ ] 공통 에러 매핑(400/404/409/422) 및 토스트/필드 바인딩 연결
- [ ] 메뉴/권한 로딩 → 버튼/액션 노출 제어
- [ ] 각 화면 API 연결:
  - 입고/출고/대여: 목록/상세/생성/수정/삭제/복구 + include/필터/정렬/페이지네이션
  - 마스터: vendors/products/warehouses/customers/employees/menus/groups/group-permissions(+ 일괄 저장)
  - 결재: approvals(+steps/histories), actions, can-proceed, 템플릿 CRUD/단계 배치
  - 우편번호: `GET /zipcodes?...`
  - 보고서: 다운로드 엔드포인트 연동(제공 시)

## 12) 검증/접근성/상호작용
- [ ] 필수/형식/업무 규칙 검증(출고/대여 고객 최소 1건 등)
- [ ] 키보드: Esc 닫기, Enter 제출/셀 이동, Tab 포커스 이동, 포커스 트랩
- [ ] 합계/요약 배지 실시간 반영(수량/단가 변경 시)

## 13) 반응형/열 가시성
- [ ] 데스크톱/태블릿/모바일 프리셋 구현(PRD 섹션 12 규칙 적용)
- [ ] 모바일 카드형 요약(핵심 3~4필드) 구성

## 14) 테스트/품질
- [x] `flutter analyze` 경고 0
- [x] 위젯 테스트: 테이블 렌더/필터/페이지네이션/모달 열기/검증 메시지
- [ ] 내비 통합 테스트(선택): 로그인 → 대시보드 → 입/출/대여 → 결재 → 마스터
- [ ] `dart format .` 적용

## 15) Definition of Done(DoD)
- [ ] 모든 목록/폼/모달/필터/페이지네이션 동작
- [ ] 모바일/태블릿/데스크톱 레이아웃 검증(핵심 열 가시성)
- [ ] 실제 API로 주요 플로우(신규/수정/삭제/복구) 검증 완료
- [ ] 문서 최신화(PRD/체크리스트)

## 참고
- PRD: `doc/PRD_입출고_결재_v2.md`
- 사양: `doc/stock_approval_system_spec_v4.md`, `doc/stock_approval_system_api_v4.md`
- 네트워킹 설계: `doc/API_CLIENT_SPEC.md`
- 스타일 참조: `/Users/maximilian.j.sul/Documents/flutter/superport`