# irosafe shred 화면 구성 비교 및 스토리보드

작성일: 2026-06-10 KST  
기준 파일: `/Users/sammy/Downloads/화면 구성 UI.xlsx`  
비교 대상: `apps/frontend/src/App.tsx`, `apps/frontend/src/pages/*`, `docs/02_API명세/01_화면명세.md`
Figma 보드: https://www.figma.com/design/mLNlsBtjmYy8DNuPTG959T

## 1. 목적

전달받은 엑셀 UI 명세를 기준안으로 두고, 현재 React 프론트에 구현된 화면과의 차이를 회의용으로 정리한다.

이 문서는 다음 용도로 사용한다.

- 화면 단위로 현재 구현 범위와 미구현 범위를 빠르게 확인
- Figma 와이어프레임/스토리보드 보드의 원본 메모
- 회의 중 “지금 만들 것 / 보류할 것 / 기존 구현을 유지할 것”을 결정하는 기준표

## 2. 엑셀 기준 화면 목록

엑셀에는 총 20개 시트가 있고, 화면 단위는 다음과 같다.

| No | 엑셀 화면 | 화면 성격 | 현재 구현 상태 |
|---:|---|---|---|
| 1 | 관리자 웹 메뉴 | 메뉴/사이트맵 | 부분 구현 |
| 2 | 계약관리(원콜) | 목록 | 부분 구현 |
| 3 | 계약관리(원콜)-상세 | 상세/등록 | 부분 구현 |
| 4 | 계약관리(정기) | 목록 | 부분 구현 |
| 5 | 계약관리(정기)-상세 | 상세/등록 | 부분 구현 |
| 6 | 본사 관리 | 목록/팝업 | 미구현 |
| 7 | 콘솔 관리 | 목록 | 부분 구현 |
| 8 | 콘솔 관리-상세 | 상세/매칭 | 미구현 |
| 9 | 일정 캘린더 | 캘린더/리스트 연동 | 부분 구현 |
| 10 | 협력사 관리 | 목록 | 부분 구현 |
| 11 | 협력사 관리 상세 | 상세/담당자 | 미구현 |
| 12 | 세발 관리 | 정산/증빙 목록 | 미구현 |
| 13 | 파쇄증명서 관리 | 목록/발급 | 부분 구현 |
| 14 | 파쇄증명서-상세 | 상세/업로드/다운로드 | 미구현 |
| 15 | 일일업무관리 | 관리자 목록 | 불일치 |
| 16 | 일일업무관리-상세 | SOP형 업무일지 | 미구현 |
| 17 | 지역 품목 관리 | 코드 관리 | 부분 구현 |
| 18 | 차량 관리 | 목록/팝업 | 미구현 |
| 19 | 사용자 관리 | 목록 | 미구현 |
| 20 | 사용자 관리 상세 | 상세/권한 | 미구현 |

상태 기준:

- 구현: 엑셀 기준의 핵심 레이아웃, 필터, 컬럼, 주요 액션이 대부분 있음
- 부분 구현: 화면은 있으나 필터/컬럼/상세/액션 일부가 빠짐
- 미구현: 라우트 또는 실제 화면이 없음
- 불일치: 화면명은 유사하지만 엑셀의 업무 목적과 현재 구현 목적이 다름

## 3. 현재 프론트 구현 인벤토리

현재 `App.tsx` 기준 라우트는 다음과 같다.

| 현재 라우트 | 컴포넌트 | 엑셀 기준 연결 | 메모 |
|---|---|---|---|
| `/calendar` | `CalendarPage` | 일정 캘린더 | 일/주/월 뷰와 원콜/정기 필터 구현 |
| `/schedules` | `ScheduleListPage` | 일정 캘린더 내 리스트 | 메뉴에는 없고 캘린더 연동용 성격 |
| `/dailywork` | `DailyWorkPage` | 일일업무관리 | 현재는 작업자용 일/월 카드에 가까움 |
| `/contracts/oncall` | `OnCallContractListPage` | 계약관리(원콜) | 목록/검색/상태/엑셀/복사/등록 구현 |
| `/contracts/oncall/:id` | `ContractDetailPage` | 계약관리(원콜)-상세 | 기본/작업 정보 일부만 구현 |
| `/contracts/recurring` | `RecurringContractListPage` | 계약관리(정기), 본사 관리 일부 | 계약/본사 탭은 있으나 본사 화면은 미구현 |
| `/contracts/recurring/:id` | `ContractDetailPage` | 계약관리(정기)-상세 | 기본/작업 정보 일부만 구현 |
| `/partners` | `PartnerListPage` | 협력사 관리 | 목록 중심, 상세/담당자 관리 없음 |
| `/consoles` | `ConsoleListPage` | 콘솔 관리 | QR 발행 중심, 상세 매칭 없음 |
| `/certificates` | `CertificateListPage` | 파쇄증명서 관리 | 발급/무효 중심, 엑셀 기준 컬럼과 차이 있음 |
| `/codes` | `CodeMasterPage` | 지역 품목 관리 | 지역/품목 외 코드까지 포함한 범용 코드 마스터 |
| `/admin` | `PlaceholderPage` | 사용자/차량/관리 | 준비 중 placeholder |

## 4. 핵심 갭 요약

### A. 메뉴 구조

엑셀 기준은 `세발 관리`, `차량 관리`, `사용자 관리`가 독립 메뉴다. 현재 사이드바에는 `세발 관리`, `차량 관리`, `사용자 관리`가 없고 `/admin` placeholder 하나로 묶여 있다.

회의 질문:

- `차량 관리`와 `사용자 관리`를 MVP 메뉴에 포함할지, 아니면 Phase 2로 보낼지 결정 필요
- `세발 관리`는 원콜용만 MVP인지, 정기용은 계속 홀딩인지 재확인 필요

### B. 계약 관리

원콜/정기 목록은 큰 틀은 맞지만 다음이 빠져 있다.

- 기간 검색과 퀵 버튼
- 15개 단위 페이지네이션
- 서버 쿼리 상태값이 `CONTRACT` 위주라 만료/해지 전체 조회가 제한될 수 있음
- 정기 목록의 `등록일` 컬럼
- 정기 상위 탭의 `콘솔 관리` 탭

원콜/정기 상세는 공통 상세 컴포넌트를 쓰고 있어 MVP 골격은 있으나 엑셀 기준 필드는 부족하다.

- 원콜: 현영번호, 이메일, 주소 코드, 담당협력사, 방문담당자 다중 선택, 수거 수량, 세발/정산 블록
- 정기: 담당외주업체, 방문담당자, 본사 팝업, 콘솔 수거 수량, 추가 수거 수량
- 저장/삭제 버튼은 UI만 있고 실제 mutation 연결은 확인 필요

회의 질문:

- 원콜 상세 안의 세발/정산 블록을 계약 상세에 붙일지, `세발 관리`로 분리할지 결정 필요
- 정기 상세의 본사/지점/콘솔 관계를 한 화면에서 처리할지, 본사/콘솔 별도 화면으로 나눌지 결정 필요

### C. 일정 관리

현재 캘린더는 엑셀의 핵심 요구인 일/주/月 뷰와 원콜/정기 구분을 이미 반영하고 있다.

부족한 부분:

- 캘린더 상단 검색 필터: 키워드, 협력사, 기간, 계약, 지역
- 캘린더 셀/일정 클릭 시 일정 리스트로 파라미터 전달
- 일정 리스트의 협력사/기간/지역 필터
- 일괄 일정 변경, 일괄 수거, 일괄 삭제의 실제 처리 흐름

회의 질문:

- 캘린더는 “운영자가 보는 밀집도 화면”으로 유지하고, 상세 처리는 `/schedules`로 라우팅하는 구조를 확정할지
- 일정 블록 클릭과 날짜 배경 클릭의 동작 차이를 그대로 구현할지

### D. 외주/본사/콘솔

협력사 목록과 콘솔 목록은 있으나, 엑셀 기준의 상세/매칭 흐름은 아직 빠져 있다.

부족한 부분:

- 협력사 상세, 사업자등록증 업로드, 담당자 목록/비밀번호 초기화/복구 흐름
- 본사 관리 목록 및 등록/수정 팝업
- 콘솔 상세, 계약 검색 팝업, 매칭 상태, QR 표시
- 콘솔 목록 컬럼이 엑셀 기준의 계약명/담당자/주소 중심과 다르고, 현재는 QR/자루 상태 중심

회의 질문:

- 콘솔 화면을 “자산/QR 운영 화면”으로 유지할지, 엑셀처럼 “계약 매칭 화면”을 우선할지
- 협력사 담당자 관리를 사용자 관리와 합칠지, 협력사 상세 안에 둘지

### E. 증명서/세발

파쇄증명서 목록은 있지만 엑셀 기준과 목적이 다르다.

현재 구현:

- 증명서 종류/발급 상태 필터
- 파일명/수량/금액/발급 상태
- 발급/무효 처리

엑셀 기준 부족:

- 원콜/정기 계약 상태 필터
- 수거일자 기간 검색
- 계약명/주소/수거수량/수거일시/방문담당자/계약담당자 컬럼
- 전체 zip 다운로드, 선택 zip 다운로드, 상세 화면, 업로드, 재생성, 다운로드

세발 관리는 현재 프론트 라우트가 없다.

회의 질문:

- 파쇄증명서 발급은 “파일 관리 중심”인지 “작업/계약 결과 중심”인지 화면 목적 정리 필요
- 세발과 증명서가 계약 상세, 증명서 관리, 세발 관리 중 어디에 책임을 가질지 결정 필요

### F. 일일업무/차량/사용자

현재 `DailyWorkPage`는 작업자에게 배정된 일정 카드 중심이다. 엑셀 기준의 `일일업무관리`는 관리자 관점의 작성 여부 목록과 SOP형 상세 입력 화면이다.

미구현:

- 일일업무관리 관리자 목록: 날짜, 협력사, 작업자 검색, 작성/미작성 상태
- 일일업무관리 상세: 차량번호, 주행거리, 파지 매출, 작업 인원, 지출내역, 일일 작업 현황, 현장 피드백, 사진 업로드
- 차량 관리
- 사용자 관리 및 권한 상세

회의 질문:

- `/dailywork`를 작업자용으로 유지하고 관리자용 일일업무는 별도 `/dailywork/admin` 등으로 분리할지
- 차량 관리는 일일업무 상세의 선행 마스터로 MVP에 넣을지
- 사용자 관리가 RBAC와 연결되므로 MVP 운영 오픈 전 필수인지 결정 필요

## 5. 회의용 스토리보드 구성

Figma 보드는 다음 순서로 구성한다.

1. Overview: 메뉴 구조와 구현 상태 지도
2. Flow 1: 계약 관리
   - 원콜 목록
   - 원콜 상세
   - 정기 목록
   - 정기 상세
   - 본사/콘솔 연결
3. Flow 2: 일정 관리
   - 캘린더
   - 일정 리스트
   - 일괄 액션 팝업 자리
4. Flow 3: 외주/자산
   - 협력사 목록
   - 협력사 상세
   - 콘솔 목록
   - 콘솔 상세/계약 매칭
5. Flow 4: 증명서/세발
   - 파쇄증명서 목록
   - 파쇄증명서 상세
   - 세발 관리
6. Flow 5: 운영 마스터
   - 일일업무 목록
   - 일일업무 상세
   - 지역/품목
   - 차량
   - 사용자

## 6. 다음 작업 권장 순서

1. 회의에서 “MVP 필수 화면”을 체크한다.
2. 화면 목적이 충돌하는 항목을 먼저 정리한다.
   - 콘솔: QR/자루 운영 vs 계약 매칭
   - 일일업무: 작업자용 배정표 vs 관리자용 업무일지
   - 증명서: 파일 관리 vs 계약/작업 결과 관리
3. 확정된 MVP 화면부터 Figma를 상세 와이어프레임으로 보강한다.
4. 현재 구현과 다른 필드/컬럼은 API/DB 스키마 영향도를 별도로 태깅한다.