# Handoff: SCPAD BYD — 세일즈 콘솔 리디자인

## Overview
BYD 딜러 전용 세일즈 콘솔 "SCPAD"의 전면 UI 리디자인입니다. 기존 앱이 기능을 하나씩 붙이며 시각적으로 난잡해진 문제를 해결하기 위해, **무채색 90% + 단일 강조색(BYD 레드) + 넉넉한 여백**을 원칙으로 하는 통일된 "매트(matte)" 디자인 시스템을 새로 정의하고 전 화면에 적용했습니다.

제품은 **하나의 제품, 두 개의 표면** 구조입니다:
- **PC (데스크톱 웹)** — 견적기 + 고객관리를 함께 운영하는 넓은 작업대. 좌측 사이드바 내비게이션.
- **모바일 (PWA)** — 현장에서 고객을 빠르게 저장/관리. 하단 탭바 내비게이션.
- 두 표면의 연결고리는 "앱 전환 버튼"이 아니라 **데이터(고객·견적)** 입니다. PC 상단바의 "모바일로 열기(QR)" 유틸로만 모바일을 안내하고, 메인 내비에는 모바일 항목을 넣지 않습니다.

## About the Design Files
이 번들의 `screens/*.dc.html` 파일들은 **HTML로 만든 디자인 레퍼런스**입니다 — 의도한 룩앤필과 동작을 보여주는 프로토타입이며, 그대로 복사해 배포하는 프로덕션 코드가 아닙니다.

작업 목표는 이 HTML 디자인을 **대상 코드베이스의 기존 환경(React/Vue/기존 SCPAD 스택 등)에서 그 환경의 관례와 라이브러리로 재구현**하는 것입니다. 기존 환경이 없다면 프로젝트에 가장 적합한 프레임워크를 선택해 구현하세요.

> 파일을 브라우저에서 직접 열어 보려면 각 `.dc.html`과 같은 폴더의 `support.js`가 필요합니다(런타임). 스펙 참고용이며 구현 시 옮길 필요는 없습니다.

## Fidelity
**High-fidelity (hifi)** — 최종 색상·타이포·간격·상호작용이 확정된 목업입니다. 아래 디자인 토큰의 정확한 hex/픽셀 값을 사용해 픽셀에 가깝게 재현하되, 코드베이스의 기존 컴포넌트/패턴에 맞춰 구현하세요.

---

## Design Tokens

### Colors
| 역할 | HEX |
|---|---|
| Accent (BYD Red) | `#E4002B` |
| Accent hover | `#C10024` |
| Accent tint (배경) | `#FDECEF` |
| Accent on dark (밝은 레드) | `#FF5A76` |
| Ink / 본문 강조 | `#1A1C20` |
| Graphite (사이드바/다크면) | `#1E2128` |
| Graphite panel | `#31353E` |
| Graphite border | `#2B2F38` |
| Graphite 비활성 텍스트 | `#6C7381` / `#565C68` |
| Canvas 배경 | `#F3F4F6` |
| Card 배경 | `#FFFFFF` |
| Card border | `#EAECEF` (진한 경계 `#E4E7EC`) |
| Divider | `#F1F2F4` / `#EEF0F2` |
| Field 배경 | `#F7F8FA` (또는 `#F8F9FA`) |
| Text secondary | `#4B5563` |
| Text muted | `#6B7280` / `#8A93A0` |
| Text tertiary | `#9AA0AB` |
| Text disabled/placeholder | `#B4BAC3` / `#AAB1BD` / `#C0C5CE` |
| Success (보조금/출고완료) | `#0E9F6E`, tint `#E7F7F0` |
| Info (신규) | `#2563EB`, tint `#EAF0FE` |
| Warn (장기관리) | `#B45309`, tint `#FEF3E2` |

### Status badge 색 체계 (고객 상태)
- 신규: 텍스트 `#2563EB` / 배경 `#EAF0FE`
- 계약: 텍스트 `#FFFFFF` / 배경 `#1E2128`
- 출고완료: 텍스트 `#0E9F6E` / 배경 `#E7F7F0`
- 장기관리: 텍스트 `#B45309` / 배경 `#FEF3E2`
- 해약: 텍스트 `#9AA0AB` / 배경 `#F0F1F3` (행 전체를 흐리게 처리)

### Typography
- Font family: **Pretendard** (`-apple-system` 폴백)
- Weights: 800 헤드라인/숫자강조, 700 라벨/버튼, 600 medium, 500/400 본문
- 위계는 3단계로 고정: Bold 800 헤드라인 → Medium 600 라벨 → Regular 본문
- 숫자는 항상 `font-variant-numeric: tabular-nums` (자릿수 정렬)
- 대표 크기: 페이지 타이틀 18px/800, 카드 제목 14.5–15.5px/700, 라벨 11–12.5px/600, 본문 13–14px, 지표 숫자 24–30px/800

### Radius
- 카드/섹션: 14–16px (모바일 카드 16px, 모달 20px, 폰 프레임 34/44px)
- 입력 필드: 9–10px
- 버튼: 10–12px
- 필/뱃지: 20px (상태 뱃지 5px)
- 아이콘 배지: 9–11px

### Spacing
- 콘텐츠 좌우 패딩: 28px(PC) / 16–20px(모바일)
- 카드 내부 패딩: 13–18px
- 카드 사이 간격: 11–14px
- 그리드 gap: 11–20px

### Shadow
- 카드: 대부분 border만 사용, 필요 시 `0 1px 3px rgba(16,24,40,.04)`
- 떠 있는 요소(모달/폰): `0 24px 60px rgba(16,24,40,.28)` / `0 30px 70px rgba(16,24,40,.35)`
- 요약 레일 등 강조: 그림자 대신 다크면(`#1E2128`)으로 위계

### Iconography
- 라인 아이콘(stroke, 1.7–2.0), 채움 없음. 이모지 **전면 금지**.
- 활성 내비 아이콘만 레드(`#FF5A76`/`#E4002B`), 나머지 `#9AA0AB`/`#AAB1BD`.

---

## Global Layout

### PC 셸 (로그인 제외 전 화면 공통)
- 좌측 **사이드바** 248px, 배경 `#1E2128`, 세로 flex. 구성:
  - 상단: `BYD SCPAD` 워드마크(SCPAD만 레드) + "Sales Console"
  - 내비 그룹 순서: **대시보드** → 그룹"고객"(고객관리, 팔로업) → 그룹"견적"(견적기, 저장 견적)
  - 활성 항목: 배경 `rgba(228,0,43,.14)` + 좌측 3px 레드 인셋(`box-shadow: inset 2.5px 0 0 #E4002B`) + 흰 텍스트
  - 하단 구분선 위: 관리자 쪽지, 문의하기
  - 최하단: 프로필(이니셜 배지 + 이름 + MAX 태그 + 전시장 + 로그아웃 아이콘)
  - 카운트 뱃지: 일반 `#31353E`, 활성 `#E4002B`
- 우측 **메인**: 상단바(높이 64px, 흰 배경, 하단 border `#EAECEF`) + 스크롤 영역(`#F3F4F6`)
  - 상단바: 좌측 브레드크럼+타이틀, 우측 유틸(검색/**모바일로 열기(QR)** 아웃라인 버튼/알림/레드 주요 액션 버튼)

### 모바일 셸
- 폰 프레임(390px 화면), 상단 상태바 44px, 앱 헤더(흰 배경), 스크롤 콘텐츠, 하단 **탭바** 5개: 고객 / 메시지 / 라이브러리 / 견적목록 / 설정 (활성만 레드)

---

## Screens / Views

### 01. 로그인 (`screens/01-로그인.dc.html`)
- **Purpose**: 딜러 로그인 + 앱 설치 안내.
- **Layout**: 좌우 2분할. 왼쪽 브랜드 패널(폭 46%, 최대 620px, 다크 `#1E2128`), 오른쪽 폼(가운데 정렬, 최대 388px).
- **왼쪽 패널**: `BYD SCPAD` 30px/800, "SALES CONSOLE" 레드 이브로우, 헤드라인 "딜러 전용 / 견적·고객관리 시스템", 설명문, 지표 2개(저장견적 43 / 관리고객 10), 하단 사업자 정보. 우하단 레드 방사형 글로우 장식.
- **오른쪽 폼**: "WELCOME BACK"(레드 이브로우) + "계정에 로그인하세요"(27px/800) → 라벨 인셋형 입력 카드(이메일/비밀번호, 흰 카드에 상단정렬 라벨 11px + 무테 input) → (아이디 저장 체크 + 비밀번호 찾기) → **레드 로그인 버튼**(`#E4002B`) → **앱 설치 배너 버튼**(아이콘+제목"모바일 앱으로 설치"+부제+chevron, 아웃라인) → 이용약관·개인정보 링크.

### 02. 대시보드 (`screens/02-대시보드.dc.html`)
- **Purpose**: 실적 요약 한눈에.
- **Layout**: PC 셸. 콘텐츠 max-width 1180px.
- **Components**:
  - KPI 카드 4개(그리드 4열): 이번달 견적 4 / 전체 견적 43 / 이번달 계약 2 / **평균 월납입 656,932**(이 카드만 다크 `#1E2128` 강조, 숫자 흰색+레드 단위). 델타는 초록/회색 캡션.
  - 차트 행(1.5:1): 좌 "차종별 견적 수"(가로 막대 5개, 1위 DOLPHIN만 레드 막대, 나머지 `#31353E`), 우 "할부 vs 현금" 도넛(`conic-gradient(#E4002B 0 51%, #D7DAE0 51% 100%)` + 중앙 51% + 범례).
  - "팔로업 필요" 배너(레드 tint 아이콘 + 0명 초록).
  - "최근 저장 견적" 테이블(고객/차량/결제 태그/월납입/날짜). 결제 태그: 할부=레드tint, 현금=회색tint.

### 03. 고객관리 (PC) (`screens/03-고객관리.dc.html`)
- **Purpose**: 고객 파이프라인 리스트.
- **Layout**: PC 셸, 콘텐츠 max-width 1080px.
- **Components**: 상단 지표 5개(전체/팔로업 필요/이번달 계약/이번달 출고/누적 출고) → 검색 바 → 필터 칩(전체/신규/진행중/계약/출고완료/장기관리/해약, 활성=다크 pill) → **고객 리스트**(카드 1행: 이니셜 배지 + 이름 + 상태 뱃지 + 연락처·지역 + 차량·메타 + 출고의지 진행바(100%만 초록, 나머지 회색) + 마지막상담(팔로업 지남만 레드)). 해약 고객은 전체 흐리게.

### 04. 견적기 (`screens/04-견적기.dc.html`)  ⚙️ 로직 포함
- **Purpose**: 차량 견적 작성 + 실시간 금액/월납입 계산.
- **Layout**: PC 셸. 2열 그리드 `minmax(0,1fr) 360px`, 우측은 sticky 요약 레일.
- **왼쪽 폼 섹션(카드)**: 고객 정보 / 차량 선택(시리즈·모델·외장·내장 색상 + 차량가·배터리·주행거리 정보바) / 가격 정보(부대비용: 탁송료·기타등록비·취득세, 각 행에 수기·면세 토글 + 별도/대출 세그먼트 + 할인·공채 입력) / 전기차 보조금(시·도/시·군, 국고·지자체 입력, 추가 보조금 체크 카드 4종, **총 보조금 요약**) / 할부 조건(금융상품·금융사 + 대출 상세 패널: 대출개월·선수금(%/원/대출금 토글) + 대출금액·수수료·월납입 실시간) / 메모.
- **오른쪽 요약 레일(다크 `#1E2128`)**: 차량명·색상, 항목별 라인(차량기본가/부대비용/공채/할인/보조금 — 할인은 `#FF8A9C`, 보조금 `#5FD6A0`), 구분선, **예상 최종 견적가**(29px 흰색+레드 단위), 월납입 하이라이트, 견적서 생성/견적 저장 버튼.
- **계산 로직 (renderVals)**:
  - 취득세 = `max(0, round(차량가/1.1 * 0.07) - 1,400,000)` (공급가 7% − EV 감면 140만), 면세 시 0.
  - 부대비용 합 = 탁송료 + 기타등록비 + 취득세.
  - 추가 보조금: 전환지원(폐차) +200,000 / 청년 생애최초 = 국고×0.2 / 다자녀 +1,000,000 / 택시 +2,500,000.
  - 총 보조금 = 국고 + 지자체 + 추가.
  - 최종가 = `max(0, 차량가 + 부대비용 + 공채 − 할인 − 총보조금)`.
  - 월 납입금(원리금균등) = `P·r·(1+r)^n / ((1+r)^n − 1)`, `r = 연이율/12`, 금융사별 이율: 하나캐피탈 6.68% / BYD파이낸셜 4.9% / KB캐피탈 5.9% / 삼성카드 3.9%.
  - 선수금 타입: `%`(최종가×%/100), `원`(고정액), `대출금`(입력액=원금).
  - 수수료 = `월납입×개월 − 원금`.
  - 통화 포맷: `toLocaleString('ko-KR')`.

### 05. 저장견적 (`screens/05-저장견적.dc.html`)  ⚙️ 로직 포함
- **Purpose**: 저장된 견적 원장.
- **Layout**: PC 셸. 툴바(제목 + "43/999" + 기간 필터 + 검색) + **단일 라인 테이블**.
- **Table**: div-grid로 구현(네이티브 `<table>` 안에 반복 요소를 넣으면 바인딩이 깨지므로 금지). 컬럼 순서(좌→우): **날짜/시간 · 고객 · 지역 · 차량 · 금융사 · 금리 · 보조금 · 할인 · 선납금 · 대출금 · 월납입 · 총 구입비용 · (삭제)**. 컬럼은 고정폭, `column-gap:32px`(날짜↔고객만 +16px 추가로 날짜 컬럼폭 확대), 가로 스크롤 허용(`width:max-content; min-width:100%`). 금액은 우측정렬 + tabular. 금융 태그(할부=레드tint/현금=회색tint), 금리·월납입 값 있으면 각각 회색/레드, "—"는 흐리게, 보조금 값은 초록. 하단 페이지네이션.

### 06. 앱 설치 모달 (`screens/06-앱설치모달.dc.html`)
- **Purpose**: 모바일 PWA 설치 안내(로그인/설정의 "모바일 앱으로 설치"에서 열림).
- **Layout**: 딤 오버레이(`rgba(20,22,26,.55)`) 위 흰 카드(폭 412px, radius 20).
- **Components**: 헤더(다크 앱 아이콘 + "모바일 CRM" + 부제 + 닫기) / 접속 주소(URL 필드 + 레드 복사 버튼) / QR 카드(QR + 안내문) / 설치 방법 — iPhone(Safari)·Android(Chrome) **각각 헤더 있는 그룹 카드**, 스텝은 다크 원형 번호 배지 / 하단 다크 "앱 사용 가이드 보기" 버튼. (원본의 파랑/초록 박스 → 무채색+레드로 정돈)

### 07. 모바일 고객관리 (`screens/07-모바일-고객관리.dc.html`)  ⚙️ 로직 포함
- **Purpose**: 현장 고객 리스트/빠른 관리.
- **Layout**: 폰 프레임. 헤더(`BYD SCPAD` + MAX + "9/무제한" + 레드 "새 고객") + 지표 칩 4개(전체/팔로업/계약/출고) + 검색 + 필터 칩(가로 스크롤) + **고객 카드 리스트** + 하단 탭바(고객 활성).
- **고객 카드**: 이니셜 배지 + 이름 + 상태 뱃지 + 연락처·지역 + 마지막상담(팔로업 지남=레드) / 차량·메타 + 출고의지 진행바(100%만 초록).

### 08. 모바일 설정 (`screens/08-모바일-설정.dc.html`)
- **Purpose**: 계정/구독/알림/지원. (기존의 긴 인라인 스크롤 → **그룹 목록형**으로 재정리)
- **Layout**: 폰 프레임, 헤더 "설정", 스크롤. 하단 탭바(설정 활성).
- **구조 원칙**: 인라인 폼(비밀번호 변경·문의 textarea)은 **메뉴 행 → 서브페이지**로 밀어냄. 신원 5줄은 **프로필 카드 1장**으로 압축. 토글(팔로업 알림)만 인라인 유지.
- **그룹 순서**: 프로필 카드 → **구독**(Free 플랜 + 사용량 3칸(활성고객30/AI10/라이브러리5) + 업그레이드) → **연동·알림**(알리고 연동 행 + 팔로업 D-day 알림 토글) → **계정**(비밀번호 변경 행 + 로그아웃(레드)) → **지원**(문의·건의 / 앱 사용 가이드 / 관리자 쪽지 / 견적기 PC버전(외부링크 아이콘)) → 버전 캡션.
- 각 그룹: 소문자 회색 라벨 + 흰 카드에 행들(아이콘 + 텍스트 + chevron), 행 사이 `#F1F2F4` 구분선.

---

## Interactions & Behavior
- 사이드바/탭바 항목: 클릭 시 해당 화면으로 라우팅. 활성 상태 = 레드 강조.
- 견적기: 모든 입력이 우측 요약 레일과 실시간 연동(위 계산식). 셀렉트 변경 시 종속 값(모델→가격/배터리, 시리즈→모델 목록) 갱신. "초기화" 버튼은 폼 리셋.
- 부대비용 행: 수기/면세 칩 토글, 별도↔대출 세그먼트 토글.
- 추가 보조금: 카드 탭으로 체크 토글(체크 시 레드 테두리+tint).
- 저장견적: 기간 필터/검색으로 목록 필터, 행 삭제 아이콘(hover 시 레드 tint), 페이지네이션.
- 설정: 메뉴 행 탭 → 서브페이지 이동, 토글 즉시 반영.
- 앱 설치 모달: 복사 버튼 → 클립보드 복사(+토스트 권장), 닫기 → 모달 dismiss.
- hover: 버튼은 배경 진하게(레드 `#C10024`), 아웃라인/행은 `#F7F8FA`/`#F3F4F6`.
- focus(입력): 테두리 `#E4002B`, 배경 흰색(+선택적 focus ring).

## State Management
- 견적기: `series, model, extColor, intColor, fees{taksong,etc,acq{exempt,mode,manual}}, discount, bond, sido, sigun, gov, local, addSub{convert,youth,multichild,taxi}, finance, financeCompany, loanMonths, downType, downValue, memo` → 파생: 취득세/부대비용합/총보조금/최종가/대출금/수수료/월납입.
- 저장견적/고객관리/모바일: 목록 데이터 배열 + 활성 필터 + 검색어. (현재 목업은 예시 데이터 하드코딩 — 실제 구현 시 API 연동)
- 설정: 프로필/구독/토글(팔로업 알림) 상태.

## Assets
- **폰트**: Pretendard (CDN: `https://cdn.jsdelivr.net/gh/orioncactus/pretendard`). 코드베이스에 이미 웹폰트 체계가 있으면 그걸 사용.
- **아이콘**: 인라인 SVG 라인 아이콘(Lucide/Feather 스타일). 코드베이스의 아이콘 라이브러리로 대체 가능.
- **QR**: 목업은 플레이스홀더 SVG. 실제로는 접속 URL로 QR 생성.
- 별도 이미지/브랜드 에셋 없음. "BYD" 워드마크는 텍스트로 처리(공식 로고 에셋이 있으면 교체).

## Files
- `screens/01-로그인.dc.html` … `screens/08-모바일-설정.dc.html` — 화면별 디자인 레퍼런스(HTML)
- `screens/support.js` — 프로토타입 런타임(브라우저에서 열어볼 때만 필요). 구현에는 불필요.
- 참고: `04-견적기`, `05-저장견적`, `07-모바일-고객관리`는 `<script data-dc-script>` 안에 `class Component` 로직(계산식·데이터·상태)이 들어 있으니 그 값을 그대로 옮기세요.