julian/superport_v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5c9de2594a04fd87067d2a5dd4c822bbbc34b370
superport_v2/doc/IMPLEMENTATION_TASKS.md

7.7 KiB
Raw Blame History

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)

  • 벤더: 목록/필터(q/사용여부), 신규/수정(코드RO), 삭제/복구 UI
  • 제품: 목록/필터(q/제조사/단위/사용), 신규/수정(코드RO)
  • 창고: 목록/필터(q/사용), 신규/수정(우편번호 검색 모달 UI 연동)
  • 고객사: 목록/필터(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) 테스트/품질

  • flutter analyze 경고 0
  • 위젯 테스트: 테이블 렌더/필터/페이지네이션/모달 열기/검증 메시지
  • 내비 통합 테스트(선택): 로그인 → 대시보드 → 입/출/대여 → 결재 → 마스터
  • 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
Reference in New Issue View Git Blame Copy Permalink