Skip to content

HANDOFF.md

Latest commit

 

History

History
502 lines (389 loc) · 44.2 KB

HANDOFF.md

File metadata and controls

502 lines (389 loc) · 44.2 KB
Raw

핸드오프 — 현대오토에버 통합 부품물류 ERP (웹앱)

이 문서 하나로 전체 화면을 구현할 수 있도록 작성된 자체완결형 핸드오프입니다. 대화에 참여하지 않은 개발자도 이 문서만 읽고 구현할 수 있도록 토큰·셸·컴포넌트·화면별 명세를 모두 담았습니다.

1. Overview

전국 지점(Branch)과 창고(Warehouse)의 자동차 부품 재고를 본사에서 통합 관리하는 사내 ERP 웹앱입니다. 계정/사용자 관리, 부품 마스터, 창고·지점 관리, 재고 조회·조정·이력, 구매 주문(PO, 본사→공급사), 발주 요청(SO, 지점→본사), 본사 대시보드, 인증(로그인/비밀번호 변경)으로 구성됩니다.

조직 계층: 지점(Branch) > 창고(Warehouse). 예) 서울 강남지점 안에 서울 1창고, 서울 2창고. 본사(HQ)는 본사 중앙창고를 가집니다.

2. 이 디자인 파일에 대하여 (필독)

이 번들의 *.html / *.jsx 파일들은 HTML로 만든 디자인 레퍼런스(프로토타입) 입니다. 의도한 룩앤필과 레이아웃·동작을 보여주기 위한 것이며, 그대로 복사해 배포하는 프로덕션 코드가 아닙니다.

작업의 목표는 이 HTML 디자인을 대상 코드베이스의 기존 환경(React/Vue 등)과 패턴·라이브러리에 맞게 재구현하는 것입니다. 아직 환경이 없다면 프로젝트에 가장 적합한 프레임워크를 선택해 구현하세요. 프로토타입은 React + 인라인 스타일 객체로 작성되어 있으나, 이는 단지 시안 제작 편의를 위한 것이므로 스타일 토큰(아래 §5)을 CSS 변수/디자인 시스템으로 옮겨 사용하는 것을 권장합니다.

3. Fidelity

High-fidelity (hifi). 색상·타이포·간격·상태가 모두 확정된 픽셀 단위 시안입니다. 코드베이스의 기존 라이브러리/패턴을 사용하되 시각적으로는 픽셀에 가깝게 재현하세요. 모든 수치(색 hex, px, weight)는 아래 명세 값을 사용합니다.

4. 채택 결정 (이번 핸드오프 범위)

각 화면은 시안에서 안 A / 안 B 두 가지 레이아웃을 제시했습니다. 이번 핸드오프의 채택안은 다음과 같습니다.

구분 채택
AU-01 로그인 안 A (센터 카드) — 앱 셸 없음
AU-02 비밀번호 변경 안 A (센터 카드, 규칙 2×2 체크리스트) — 앱 셸 없음
그 외 모든 화면 안 A + 사이드바 셸 (좌측 사이드바 + 상단바 포함한 전체 앱 화면)

즉, 인증 2개 화면을 제외한 모든 화면은 §6의 App Shell(사이드바+상단바) 안에 본문이 들어가는 형태로 구현합니다. 시안 HTML에서 "안 A · 사이드바" 라벨이 붙은 아트보드가 그 기준입니다.

화면 인덱스

ID 화면 셸 비고
AU-01 로그인 없음 §13
AU-02 비밀번호 변경 없음 §13
MY-01 마이페이지 사이드바 §9
US-01 사용자 목록 사이드바 §9
US-02 사용자 추가 (모달) 사이드바 §9
DA-01 본사 대시보드 사이드바 §9
IM-01 부품 마스터 사이드바 §10
IM-02 부품 추가 (모달) 사이드바 §10
WH-01 창고 관리 사이드바 §10
WH-02 창고/지점 추가 (모달) 사이드바 §10
IV-01 재고 조회 + 상세 패널 사이드바 §10
IV-02 재고 조정 (모달) 사이드바 §10
IV-03 재고 이력 사이드바 §10
PO-01 구매 주문 목록 사이드바 §11
PO-02 구매 주문 등록 사이드바 §11
PO-03 구매 주문 상세 + 입고 처리(모달) 사이드바 §11
SO-01 발주 요청 (본사) 사이드바 §12
SO-02 발주 요청 상세 + 승인/거절(모달) 사이드바 §12
SO-03 출고 처리 사이드바 §12
SO-04 내 지점 발주 요청 (지점) 사이드바 §12
SO-05 발주 요청 등록 (지점) 사이드바 §12
SO-06 도착 입고 확인 사이드바 §12

5. Design Tokens

권장: 아래 값을 CSS 변수 또는 디자인 시스템 토큰으로 등록 후 참조.

5.1 Colors

토큰 Hex 용도
brand #0E6E83 메인 강조색(틸-블루). 기본 버튼, 활성 아이콘, 강조 텍스트
brandStrong #0A5365 강조색 진한 버전. 텍스트/링크, soft 버튼 텍스트
brandSoft #ECF4F6 강조색 옅은 배경. 활성 nav, soft 버튼, 칩 배경
brandLine #CFE3E8 강조색 보더
navy #06303C 로고 박스, 로그인 안B 브랜드 패널, RECEIVED 배지
ink #13202A 기본 텍스트(제목·값)
ink2 #33454F 보조 텍스트(라벨·셀)
muted #647781 약한 텍스트
faint #93A3AC 가장 약한 텍스트, placeholder, 아이콘 비활성
line #E6EBEE 기본 보더
lineSoft #F0F3F5 옅은 구분선(행 구분 등)
bg #F5F7F8 페이지 배경, 테이블 헤더 배경
surface #FFFFFF 카드/패널 배경
okText #15875B / okBg #E8F4EE / okDot #23A06B 활성/정상/승인 가능 상태
warnText #B26C1E / warnBg #FAF0E2 / warnDot #D08A33 대기/경고/주의 상태
offText #697982 / offBg #EEF1F3 / offDot #9AA8B0 정지/비활성 상태
danger #C5453F / dangerBg #FBECEB 거절/지연/오류/감소/음수

상태 컬러 매핑(예시): ACTIVE→ok, PENDING→warn, SUSPENDED→off. 부족 재고·지연·음수 수량→danger.

5.2 Typography

  • 본문/한글 폰트: Pretendard Variable (fallback: Pretendard, -apple-system, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif). CDN: https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css
  • 모노(숫자/코드): 코드·사번·금액·수량·날짜 등은 같은 Pretendard를 쓰되 font-variant-numeric: tabular-nums 또는 모노 글꼴로 정렬감을 줌. 시안에서는 mono 토큰으로 표기된 곳 = 숫자/식별자 컬럼.
  • 타이틀은 고딕 볼드(800).
역할 size / weight / letter-spacing
페이지 H1 27px / 800 / -0.8
카드/섹션 제목 15.5px / 700 / -0.2
본문 값 14.5–15px / 600
라벨 12.5–13px / 500–600, color faint/ink2
테이블 헤더 12.5px / 600 / color faint
KPI 숫자 30–32px / 800 / -1, mono
배지/칩 11–12.5px / 700, letter-spacing 0.2–0.3

페이지 H1 아래에는 항상 34×3px, radius 2, brand 색 언더라인 바를 둠.

5.3 Spacing · Radius · Shadow

  • 간격 스케일(px): 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28. 카드 간 세로 간격 = 20px, 카드 내부 패딩 = 24px(작은 카드 20–22px).
  • Radius: radius = 12px(카드/패널), radiusSm = 8px(입력·버튼·작은 칩), 배지/탭 = 7–9px, 알약(pill) = 999px, 아바타 = 50%.
  • Shadow: 카드 기본 0 1px 2px rgba(19,32,42,.03). 모달 0 24px 70px rgba(9,20,26,.35). 드로어 -20px 0 60px rgba(9,20,26,.25). 드롭다운/팝오버 0 12px 36px rgba(9,20,26,.16). 로그인 카드 0 4px 24px rgba(19,32,42,.05).
  • 모달 백드롭: rgba(9,20,26,.5) + backdrop-filter: blur(2px).

5.4 아이콘

stroke 기반 라인 아이콘, stroke-width 1.6(활성/강조 1.8–2.0), viewBox 0 0 24 24, stroke-linecap/linejoin: round. 사용 키: user, lock, clock, box/package, alert, ban, trend, cart, truck, send, search, chevron, more(케밥), down(내보내기), plus, refresh, edit, check, x, eye, reset, building, grid, clipboard, users, gear, key, bell, mail, idcard, pin, calendar, filter, list. 코드베이스의 기존 아이콘 세트(lucide/feather 류)로 1:1 대체 가능.

6. App Shell (사이드바 + 상단바)

인증 화면을 제외한 모든 화면의 공통 골격. 전체 레이아웃은 가로 flex: [Sidebar 248px][우측 컬럼 flex:1]. 우측 컬럼은 세로 flex: [Topbar 64px][본문 영역 flex:1].

6.1 Sidebar (좌측)

  • 너비 248px 고정, 배경 surface, 우측 보더 1px line, 패딩 22px 16px, 세로 flex.
  • 로고 영역(상단): 38×38 radius 10 navy 박스 안에 package 아이콘(흰색) + 텍스트 2줄 — 윗줄 "현대오토에버"(11px/600/faint), 아랫줄 "부품물류 ERP"(15px/800/ink). 하단 패딩 22px.
  • 네비게이션 그룹:
    • (그룹 없음) 본사 대시보드(grid)
    • 물류 운영: 재고 현황(package), 구매 관리(cart), 발주 관리(clipboard)
    • 관리: 사용자(users), 창고 · 지점(building)
    • 그룹 라벨: 11px/700/faint, letter-spacing 0.5, 패딩 0 10px 8px.
  • nav 아이템: 패딩 10px 11px, radius 9, gap 11, 14px. 비활성 = ink2/500, 아이콘 muted. 활성 = 배경 brandSoft, 텍스트 brandStrong/700, 아이콘 brand, 그리고 왼쪽 안쪽 그림자 바 inset 3px 0 0 brand.
  • 하단(상단 구분선 후): 마이페이지(user), 설정(gear) — 동일 아이템 스타일.
  • 각 화면의 활성 nav: MY-01=마이페이지, US-=사용자, DA-01=본사 대시보드, IM-/IV-=재고 현황, WH-=창고·지점, PO-=구매 관리, SO-=발주 관리.

6.2 Topbar (상단)

  • 높이 64px, 배경 surface, 하단 보더 1px line, 패딩 0 28px, 가로 flex, gap 16.
  • 좌측: 검색 박스 320×38, 배경 bg, 보더 1px line, radius 9 — search 아이콘 + placeholder "부품 코드, 사용자, 발주 번호 검색".
  • 우측: 알림 벨 38×38 보더 박스(우상단 warn 점 배지) → 구분선 1×24 → 사용자 칩: 34px 아바타 + 이름 "김정수"(13.5/700) + 직급 "지점 관리자"(11.5/faint/mono) + chevron.

6.3 본문 영역 + Page Header

  • 본문 영역: 배경 bg, 패딩 34px 40px 44px.
  • Page Header(모든 본문 상단): 가로 flex(아래 정렬), 하단 margin 28px.
    • 좌측: 브레드크럼(13px, 마지막 항목 ink2/600, chevron 13px 회전 -90°로 구분) → H1(27/800/-0.8) → 언더라인 바(34×3 brand) → (선택) sub 설명.
    • 우측: 액션 영역(버튼들 gap 10).
  • 본문 콘텐츠는 보통 세로 flex gap 20px로 카드들을 쌓음. 일부 화면은 우측 사이드 패널을 두는 2단 구조(본문 flex:1 + 패널 고정폭).

시안 기준 본문 콘텐츠 설계폭(사이드바 포함 전체) ≈ 1600px. 실제 구현은 반응형으로 하되, 데스크톱 우선(min ~1280px). 테이블/패널은 좁아지면 가로 스크롤 또는 컬럼 우선순위 숨김 처리 권장.

7. 공용 컴포넌트 (Common Components)

모든 화면에서 재사용. 코드베이스 컴포넌트로 1회 구현 후 전 화면에서 사용.

7.1 Button

패딩 10px 16px(sm 7px 12px, lg 12px 20px), radius 8, font 14(sm 13)/600, gap 7, 아이콘 동반 가능. 종류:

  • primary: 배경 brand, 흰 텍스트, shadow 0 1px 2px rgba(10,83,101,.25).
  • default: 배경 surface, ink2 텍스트, 보더 1px line.
  • soft: 배경 brandSoft, brandStrong 텍스트, 보더 1px brandLine.
  • ghost: 투명, muted 텍스트.
  • danger: 배경 surface, danger 텍스트, 보더 1px line. (거절 확정 등 강한 동작은 배경 danger+흰 텍스트로 사용)

7.2 입력류

  • Field(텍스트 입력 표시): 높이 44, 패딩 0 14px, 보더 1px line, radius 8, 좌측 아이콘(faint) + 값/placeholder. 포커스 시 보더 1.5px brand.
  • Select: Field와 동일 외형 + 우측 chevron. 라벨 형식 라벨 : 값.
  • TextArea: 동일 보더/радius, 높이 지정(64–96), placeholder faint.
  • NumField / NumInp: 우측 정렬 숫자 입력, mono. 단위 접미사(EA/SET/L) 표기 가능.
  • 필수 표시: 라벨 뒤 * (color danger).

7.3 Badge / 상태

  • StatusBadge(사용자 상태): 알약형(radius 999), 패딩 4px 10px 4px 8px, 좌측 6px 점 + 라벨, 12px/600. ACTIVE=ok 계열, PENDING=warn 계열, SUSPENDED=off 계열.
  • 도메인 상태 배지(PO/SO): radius 7, 패딩 5px 11px, 아이콘 + 라벨, 12px/700, mono, letter-spacing 0.3. 상태별 색은 §11.1 / §12.1.
  • RoleChip: role 코드(ADMIN 등)는 mono 12.5/600/ink2로 표기. 한글 라벨 병기 가능(§8).

7.4 Avatar

원형. 기본은 플레이스홀더(배경 lineSoft, user 아이콘 faint, 보더 dashed 또는 solid). 사이즈 32/34/36/40/96/108 사용. 실제 프로필 이미지 연동 시 이 자리에 표시.

7.5 Meta (라벨+값 정의 리스트)

라벨(12.5/faint/500, 하단 6px) 위에 값(15/600/ink). 식별자/날짜는 mono.

7.6 Card / CardHead

카드: surface + 1px line + radius 12 + 패딩 24 + 기본 shadow. CardHead: 아이콘(muted) + 제목(15.5/700) + 우측 액션 영역, 하단 margin 20.

7.7 Table (행 기반)

시안의 테이블은 <table>이 아니라 flex 행으로 구성(컬럼은 고정폭 flex:0 0 auto 또는 가변 flex:1 1 0). 구현 시 <table> 또는 grid 사용 무방하나 컬럼 정렬/폭은 아래 화면별 명세를 따름.

  • 헤더 행: 배경 bg, 상하 보더 line, 패딩 12px 22px, 헤더 셀 12.5/600/faint, 정렬 가능 컬럼은 chevron(11px, opacity .55) 동반.
  • 데이터 행: 패딩 13–14px 22px, 하단 구분선 1px lineSoft(마지막 행 제외).
  • 선택/첫 행 하이라이트: 배경 brandSoft 약 44% + 좌측 inset 3px 0 0 brand.
  • 행 우측 액션: 케밥(30×30 보더 박스 + more 아이콘) 또는 eye/검토 버튼.

7.8 Pagination (PagerFull)

좌측 "총 N건", 가운데 페이지 버튼군(‹ 이전 / 숫자 / … / 마지막 / 다음 ›), 우측 "페이지당 N행" 셀렉트. 페이지 버튼: 34px 높이, radius 8, 활성 = 배경 navy+흰 텍스트, 비활성 = surface+보더 line. 페이지당 행 선택값: 10/20/50.

7.9 StatusTabs (세그먼트 탭)

배경 bg + 보더 line + radius 10, 패딩 4의 컨테이너 안에 알약 탭들. 활성 탭 = 배경 surface + shadow. 각 탭은 라벨 + 카운트 배지(활성 시 brandSoft/brandStrong). (안 A 채택이므로 주로 안 A 테이블을 쓰지만, SO-04 안 A 등에서 탭 사용.)

7.10 KPI Card

surface+보더+radius12+패딩20, 세로 flex gap 12–14. 상단: 28–30px 아이콘 칩(brandSoft 배경) 또는 인라인 아이콘 + 라벨(13/600/muted). 중간: 큰 숫자(30–32/800/-1, mono). 하단: 보조 텍스트(faint) 또는 경고 태그(warn 알약). accent 카드는 보더/배경을 warn 또는 brand 틴트로.

7.11 Stepper (− 값 +)

수량 조정용. 보더 1.5px(기본 line / 포커스 brand / 경고 warnDot), radius 9, 좌 −(32×38) + 가운데 값(56px, 15/700, mono) + 우 +. 경고 톤은 배경 #FCF6EA + 값 warnText.

7.12 Backdrop / Modal / Drawer / ModalHead / ModalFoot

  • Backdrop: position absolute inset 0, 배경 rgba(9,20,26,.5) + blur(2px), 중앙/우측 정렬.
  • 센터 모달: surface, radius 16, 모달 shadow. 헤더(패딩 22px 26px, 하단 보더 lineSoft): 제목 18.5/800 (+brand 언더라인 또는 식별자 칩) + 우측 닫기(34×34 보더 박스, x). 푸터(패딩 18px 26px, 상단 보더, 배경 bg): 좌측 안내 노트, 우측 취소/확정 버튼.
  • 우측 드로어(시안 안 B에서 사용; 채택은 안 A이지만 참고): 폭 440–480, 전체 높이, 드로어 shadow.
  • 폼 라벨 컴포넌트 FL2: 라벨(13/600/ink2, 하단 8) + 필드, 선택 hint(12/faint).

8. 도메인 데이터 / Enum

8.1 Role (5종)

코드 한글
ADMIN 시스템 관리자
HQ_MANAGER 본사 매니저
HQ_STAFF 본사 담당자
BRANCH_MANAGER 지점 관리자
BRANCH_STAFF 지점 담당자

직급(rank): 사원 / 주임 / 대리 / 과장 / 차장 / 부장.

8.2 사용자 상태

ACTIVE(활성) / PENDING(대기) / SUSPENDED(정지).

8.3 조직(지점 > 창고) — 예시 데이터

  • 본사 → 본사 중앙창고
  • 서울 강남지점 → 서울 1창고, 서울 2창고
  • 부산 해운대지점 → 부산 1창고, 부산 2창고
  • 인천/대구/광주/대전 지점 → 각 1창고 창고 유형: HQ(본사) / DEALER(지점). 창고명 형식 "서울 1창고", "본사 중앙창고"; 지점명 형식 "서울 강남지점".

8.4 단위(unit)

EA / SET / L (확장 가능).

8.5 권한 메모

  • 사용자/창고/지점 추가, 지점 추가 모달 = ADMIN 전용.
  • 발주 승인/거절(SO-02) 권한 = ADMIN, HQ_MANAGER.

9. 화면 명세 — 계정 · 사용자 · 대시보드 (시안 1: 현대오토에버 ERP 화면 시안.html)

MY-01 마이페이지 (채택: 안 A · 사이드바)

  • 활성 nav: 마이페이지. 브레드크럼 설정 > 마이페이지, H1 "마이페이지". 본문 최대폭 1180, 카드 세로 스택 gap 20.
  • 카드 1 — 본인 정보: CardHead(user, "본인 정보"). 가로 2영역.
    • 좌(200px): 108px 아바타 + 이름(20/800) + 사번(13.5/faint/mono) + role 배지(brandSoft 알약, 한글 role).
    • 우(flex): 2열 grid(gap 26×40)로 Meta 6개 — 이메일(mono), 소속 지점, 소속 창고, 직급, 가입일(mono), 마지막 로그인(mono). 하단 구분선 + "본인 정보 수정은 관리자에게 문의하세요"(clock 아이콘, faint).
  • 카드 2 — 비밀번호: 46px lock 아이콘 칩 + "비밀번호" + "마지막 변경 · YYYY-MM-DD"(mono) + 우측 soft 버튼 "비밀번호 변경"(edit). → 클릭 시 AU-02로 이동.
  • 카드 3 — 최근 활동: CardHead(clock, "최근 활동", 우측 "최근 5건"). 활동 행 5개: 시간(138px, mono/muted) + 활동 타입 태그(재고 조정=brand dashed 칩 / 그 외=line dashed) + 설명(+코드 mono+증감 delta: 음수 danger·양수 ok). 활동 타입 예: 로그인/재고 조정/조회.

US-01 사용자 목록 (채택: 안 A · 사이드바)

  • 활성 nav: 사용자. 브레드크럼 관리 > 사용자 > 사용자 목록, H1 "사용자 목록". 우측 액션: 내보내기(default, down 아이콘) + 사용자 추가(primary, plus, ADMIN 전용).
  • 필터 바(카드): search Field "이름 또는 사번"(flex) + Select "Role : 전체"(168) + Select "소속 : 전체"(168) + Select "상태 : 전체"(156) + 초기화 버튼(default, reset). 높이 44.
  • 테이블 카드: 상단 바("전체 86명 중 1–10" + 우측 컬럼 설정/새로고침 링크).
    • 컬럼: 사번(104, mono/600, 정렬) · 이름(184, 32px 아바타+이름, 정렬) · 이메일(flex, mono/muted) · 소속(158, 창고명) · Role(168, mono 코드) · 상태(120, StatusBadge) · 가입일(112, mono, 정렬) · 액션(44, 케밥).
    • 첫 행 하이라이트(brandSoft+좌 바).
  • Pagination: 총 86건, 페이지당 10행.

US-02 사용자 추가 (채택: 안 A · 센터 모달, 사이드바 위)

  • US-01 위에 뜨는 센터 모달. 폭 720, radius 16.
  • 헤더: "사용자 추가"(18.5/800) + brand 언더라인, 우측 닫기.
  • 본문: 2열 grid(gap 22×24) — 사번*(idcard, 자동 채번값 예 HMC0086, mono) · 이름*(user) · 이메일*(mail, mono) · 소속*(Select, building) · Role*(Select, 기본 BRANCH_STAFF) · 초기 비밀번호 발급 방식(라디오 세그먼트 2택: 자동 발급 / 직접 입력) · 직급(Select) · 초기 비밀번호*(lock, mono — 직접 입력 시 활성).
  • 발급 방식 토글: 선택 옵션은 brandSoft 배경 + brand 보더 + 채워진 라디오 점.
  • 푸터: 좌측 안내 "등록 후 첫 로그인 시 비밀번호 변경이 강제됩니다."(clock) + 우측 취소(default) / 등록(primary, check).

DA-01 본사 대시보드 (채택: 안 A · 사이드바)

  • 활성 nav: 본사 대시보드. 브레드크럼 본사 > 대시보드, H1 "본사 대시보드". 우측 액션: "마지막 업데이트 · 방금 전" + 새로고침 아이콘 버튼(40×40, refresh).
  • KPI 4×2(8개, grid repeat(4)): 총 SKU / 부족 재고(accent warn) / 무재고 / 최근 7일 조정 / 진행 중 구매 PO / 도착 예정 PO(accent warn) / 승인 대기 발주 / 출고 대기 발주. 각 KPI Card(§7.10), 경고 항목은 warn 태그.
  • 하단 2단(grid 1.15fr / 1fr):
    • 좌 할 일 패널: CardHead(clipboard,"할 일", 우측 "총 23건") + 탭(승인 대기 9 / 출고 대기 8 / 도착 지연 6, 활성 밑줄 brand+카운트 배지) + 항목 행들(요청코드 mono 106px + 창고명(building) 110px + 품목명(flex, 말줄임)+"· 수량 N" + 우측 시점(긴급 시 danger 점+라벨) + chevron). 승인 대기 7건 표시.
    • 우 최근 7일 활동(막대그래프): CardHead(trend) + 큰 합계 숫자(예 1,084건) + 범례(입·출고=brand, 조정=brandLine) + 누적 막대차트(7개 막대, 각 막대 아래 입·출고(brand) + 위 조정(brandLine) 스택, x축 일자 mono) + 하단 3분할 요약(입고/출고/조정 숫자).
  • 전체 보기 링크 줄(우측 정렬): 재고/구매/발주 전체 보기 — 각 아이콘 + 라벨 + chevron, brandStrong.

10. 화면 명세 — 부품 · 창고 · 재고 (시안 2: 현대오토에버 ERP 화면 시안2.html)

IM-01 부품 마스터 (채택: 안 A · 사이드바)

  • 활성 nav: 재고 현황. 브레드크럼 재고 > 부품 마스터, H1 "부품 마스터". 우측 액션: 내보내기(CSV) + 부품 추가(primary, plus).
  • 필터 바(카드, US-01과 동형): search "부품명 또는 코드" + Select 대분류 + Select 소분류(중분류) + Select 상태(활성/비활성/전체) + 초기화 + 정렬 토글(최근 수정일 / 부품 코드).
  • 테이블: 부품코드(mono, 정렬) · 부품명 · 대분류 · 중분류 · 단위 · 안전재고 기본(우측 정렬, mono+단위) · 상태(활성/비활성 배지) · 액션(케밥). 페이지네이션.
  • 부품 도감 성격 — 행 클릭 시 스펙 상세(선택 구현).

IM-02 부품 추가 (채택: 안 A · 센터 모달)

  • 폭 740 센터 모달, ModalHead "부품 추가"(brand 언더라인).
  • 본문 2열 grid: 부품코드*(idcard, mono, 옆에 "자동 생성" 체크) · 부품명*(예 "엔진오일 필터 (2.0L gasoline)") · 대분류*(Select) · 중분류*(Select) · 단위*(Select, 기본 EA) · 안전재고 기본*(NumField, 단위 표기) · 설명·메모(TextArea, "부품 사양·호환 차종·비고 등").
  • 푸터: 취소 / 등록(primary, check).

WH-01 창고 관리 (채택: 안 A · 사이드바, 페이지네이션 없음)

  • 활성 nav: 창고·지점. 브레드크럼 관리 > 창고 · 지점, H1 "창고 관리". 우측 액션: 지점 추가(default 또는 soft, ADMIN 전용, building) + 창고 추가(primary, plus, ADMIN 전용).
  • 필터 바: search "창고명 또는 코드" + Select 유형(HQ/DEALER/전체) + Select 상태(활성/비활성) + 초기화. 페이지네이션 없음(최대 ~50개이므로 전체 표시, 필요 시 내부 스크롤).
  • 테이블: 코드(mono) · 창고명 · 유형(HQ/DEALER 배지) · 소속 지점 · 주소 · 상태(배지) · 액션(케밥). (안 A는 단일 테이블; 안 B는 유형 그룹 카드였으나 미채택.)

WH-02 창고 / 지점 추가 (채택: 안 A · 창고 추가 모달)

  • 창고 추가 모달(폭 520, ModalHead "창고 추가"): 창고코드*(idcard, mono, 예 WH-XX-000) · 창고명* · 유형 선택*(HQ/DEALER) · 소속 지점*(Select 드롭다운) · 주소*(입력) · 메모(선택). 푸터 취소/등록.
  • 지점 추가 모달(폭 440, ADMIN 전용 — 부가 참고): 안내 배너 + 지점명 입력만 + 취소/등록. (간단 모달)

IV-01 재고 조회 + 상세 패널 (채택: 안 A · 사이드바)

  • 활성 nav: 재고 현황. 브레드크럼 재고 > 재고 조회, H1 "재고 조회". 우측 액션: 내보내기 + 재고 조정(primary).
  • KPI 4개(상단 grid repeat(4)): 예) 총 SKU / 부족 재고(warn) / 무재고 / 최근 조정.
  • 필터 바: search "부품명 또는 코드" + 창고 다중 선택(카운트 배지 달린 멀티 Select) + Select 재고 상태(충분/근접/부족 등) + 초기화 + 정렬 드롭다운(기본 "안전재고 대비").
  • 테이블: 부품코드(mono) · 부품명 · 창고 · 현재고(우측 mono, 부족 시 danger) · 안전재고(우측 mono) · 상태(충분/근접/부족 컬러 텍스트) · 최근 조정일(mono). 행 클릭 → 상세.
  • 상세 패널(안 A는 본문 내 상시 패널 / 행 선택 시 갱신): 부품명+코드, 대분류·중분류, 창고별 현재고/안전재고 시각화(창고별 막대 또는 게이지로 현재고 대 안전재고 비교), 최근 이동 5건(날짜 + 입고/출고/조정 태그 + 수량(단위) + 담당자 이름), 하단 전체 이력 보기 링크 + 재고 조정 버튼.
  • 페이지네이션 + 페이지당 행 선택(이전/다음/페이지 버튼).

IV-02 재고 조정 (채택: 안 A · 센터 모달)

  • IV-01에서 호출. 폭 560 센터 모달, ModalHead "재고 조정".
  • 본문: 부품 고정 표시(이미 선택됨, 코드+명) · 창고 드롭다운(Select로 변경 가능) · 조정 유형(세그먼트 3택: 증가 / 감소 / 실사 보정) · 수량 입력 + 빠른 추가 버튼(+1 / +10 / +50 / +100; 감소 유형이면 −1/−10/−50/−100) · 사유(Select 드롭다운) · 메모(TextArea).
  • 푸터: 취소 / 조정 저장(primary).

IV-03 재고 이력 (채택: 안 A · 사이드바)

  • 활성 nav: 재고 현황. 브레드크럼 재고 > 재고 이력, H1 "재고 이력". 우측 액션: 새로고침 + CSV 내보내기.
  • 필터 바: search "부품명 또는 코드" + 창고 다중 드롭다운 + Select 이동 유형(입고/출고/조정) + 시작일~끝일(calendar 2개).
  • 테이블(최신순, 안 A=날짜 그룹 헤더): 시간(mono) · 부품이름 · 부품코드(mono) · 창고 · 유형(입고/출고/조정 배지) · 사유/원천 · 담당자. 수량은 단위(EA/SET) 표기. 컬럼 설정 기능은 제외(요청사항).
  • 하단: 총 N건 표시 + 페이지네이션 + 페이지당 행 선택.

11. 화면 명세 — 구매 주문 PO (시안 3: 현대오토에버 ERP 화면 시안3.html)

부분입고 없음: 입고는 라인별 분할 없이 발주 전체 수량 일괄(전량) 입고로 처리. 상세/입고 화면에 부분입고·진행률·입고수량 분할 UI를 두지 않음.

11.1 PO 상태 배지 (5종)

코드 스타일
DRAFT muted 텍스트, dashed line 보더, list 아이콘
APPROVED brandStrong 텍스트, brandLine 보더, check
SHIPPED 흰 텍스트, 배경 brand, truck
RECEIVED 흰 텍스트, 배경 navy, check
CANCELED faint 텍스트, dashed line, ban, 취소선
(추가: EDITED = 이력용, ink2/bg/line, edit)

금액은 ₩ 접두 + mono. 도착예정일 지연 시 danger + (D+N) 태그.

PO-01 구매 주문 (채택: 안 A · 사이드바)

  • 활성 nav: 구매 관리. 브레드크럼 구매 > 구매 주문, H1 "구매 주문". 우측 액션: 구매 주문 등록(primary, plus).
  • KPI 4개: 전체 PO(186) / 승인 대기(9) / 도착 예정(14) / 지연(3, accent warn).
  • 필터 바: search "PO 번호 또는 공급사명" + Select 상태 + Select 공급사 + 기간(calendar~calendar) + 정렬(우측 별도 박스, 기본 "도착예정일").
  • 테이블: PO 번호(150, mono, 정렬) · 공급사(flex; 이름+코드 mono) · 등록일(104, mono) · 도착 예정일(150; 지연 danger+태그) · 품목 수(64, 우측) · 총 수량(104, 우측 mono+단위) · 총 금액(134, 우측 ₩ mono, 정렬) · 상태(128, PO 배지) · 액션(44, 케밥). 첫 행 하이라이트. 상단바에 새로고침.
  • 페이지네이션(총 186, 10/페이지).

PO-02 구매 주문 등록 (채택: 안 A · 스택형, 사이드바)

  • 브레드크럼 구매 > 구매 주문 > 신규 등록, H1 "구매 주문 등록". 우측 액션: 임시저장(default, box) + 확정(primary, check).
  • 카드 1 주문 정보: 헤더에 PO 번호 칩(예 PO-2026-0422) + 우측 담당자. 2열 grid: 공급사*(Select, building) · 도착 예정일*(calendar) · 납품 창고*(Select) · 메모(TextArea).
  • 카드 2 주문 품목: 헤더 "주문 품목" + "N / 50 라인" 칩 + 우측 soft "라인 추가".
    • 라인 헤더: 부품 / 단위(80, 중앙) / 수량(150, 우측) / 단가(160, 우측) / 금액(150, 우측) / 삭제(32).
    • 라인 행: 부품 선택기(56px 높이, search 아이콘 + 부품명/코드 2줄 + chevron) + 단위(mono) + 수량 입력(우측 mono) + 단가 입력 + 금액(₩ mono) + x 삭제.
    • 부품 검색 드롭다운(입력 중 표시): 보더 1.5px brand + 하단 팝오버(검색 결과 N건, 각 항목 부품명/코드 + 우측 "재고 N"). 첫 항목 하이라이트.
    • 하단 + 라인 추가 dashed 버튼(brandStrong).
  • 합계 바(카드): 우측 정렬 "총 금액 (VAT 별도)" + 큰 ₩ 숫자(28/800/brand).
  • 하단 액션: 취소(ghost) / 임시저장 / 확정.

PO-03 구매 주문 상세 + 입고 처리 (채택: 안 A · 우측 변경 이력, 사이드바)

  • 브레드크럼 구매 > 구매 주문 > PO-2026-0123, H1 = PO 번호 + 상태 배지(예 SHIPPED). 우측 액션: 인쇄(default) + 취소(danger, ban) + 입고 처리(primary, package).
  • 2단 구성: 좌(flex) = 주문 정보 카드 + 주문 품목 카드 / 우(360px) = 변경 이력 레일.
    • 주문 정보 카드: 헤더 + "최종 수정 · 일시". 4열 grid의 InfoCell(아이콘+라벨+값): 공급사(+코드) · 납품 창고(+코드) · 등록일 · 도착 예정일(+D-N) · 확정자(+팀) · 결제 조건 · 진행 단계(mono "발주 → 출고 → 입고") · 총 금액(brand 강조 ₩).
    • 주문 품목 카드: "N 라인" 칩. 헤더(부품/단위/발주 수량/단가/금액). 각 라인: 부품명+코드 / 단위 / 발주 수량(mono 700) / 단가(mono muted) / 금액(₩). 푸터: 총 품목 N종 · 발주 수량 합계 · 총 금액(₩ brand).
    • 변경 이력 카드: CardHead(clock,"변경 이력", 우측 "전체"). 세로 타임라인 — 각 항목: 상태 배지(sm) + 시간(mono) + 담당자(user, 이름·역할) + 설명. 예: SHIPPED(송장 등록·전량 출고) / APPROVED(발주 확정) / EDITED(수량 수정) / DRAFT(생성).
  • 입고 처리 모달(채택: 안 A 센터, 폭 560): 헤더 "입고 처리" + PO 칩.
    • 입고 일자(calendar).
    • 안내 배너(brandSoft): "부분 입고는 지원하지 않습니다. 발주 전체 수량이 한 번에 입고 처리됩니다."
    • 입고 품목(읽기 전용 테이블): 부품 / 단위 / 입고 수량(= 발주 수량, mono 700). 푸터: "총 N종 · 입고 수량 합계" + 큰 수(brand).
    • 총 금액(₩ brand). 푸터: 취소 / 입고 완료(primary, check). → 확정 시 상태 RECEIVED + 납품 창고 재고 가산.

12. 화면 명세 — 발주 요청 SO (시안 4: 현대오토에버 ERP 화면 시안4.html)

발주 요청 = 지점이 본사에 부품을 요청 → 본사 승인 → 출고 → 지점 도착 확인의 사이클. SO-0103은 본사 관점, SO-0406은 지점 관점.

12.1 SO 상태 배지 (6종)

코드 스타일
REQUESTED brandStrong, brandLine 보더, clock
APPROVED okText, #BCE0CC 보더, check
REJECTED danger, #E6C4C2 보더, x
SHIPPED 흰 텍스트, 배경 navy, truck
DELIVERED 흰 텍스트, 배경 ink, check
CANCELED faint, dashed line, x, 취소선
(이력용 EDITED/DRAFT 포함.)

공용: 수량 조정엔 Stepper(§7.11), 가용/현재고 부족은 danger, 차이(±0/-N)는 0이면 faint·아니면 danger.

SO-01 발주 요청 (본사) (채택: 안 A · 사이드바)

  • 활성 nav: 발주 관리. 브레드크럼 발주 > 발주 요청, H1 "발주 요청" + 본사 Pill.
  • KPI 4개: 전체 요청(248) / 승인 대기(12, accent brand) / 출고 대기(23) / 지연(5, accent warn).
  • 필터 바: search "요청번호, 부품명·코드, 지점명" + 상태 멀티(카운트 배지) + Select 지점 + 기간 + 정렬(요청일↓).
  • 테이블: 요청번호(150, mono) · 지점(148; 이름+코드) · 요청자(140; 이름+역할 2줄) · 요청일(150, mono) · 도착 희망일(150; 지연 danger) · 품목(56) · 총 수량(96, mono+단위) · 상태(128, SO 배지) · 액션(84). 액션: REQUESTED 행은 검토(soft) 버튼, 그 외 eye+케밥. 상단바 컬럼 설정/CSV/새로고침.
  • 페이지네이션(248, 10/페이지).

SO-02 발주 요청 상세 + 승인/거절 (채택: 안 A · 우측 변경 이력, 사이드바)

  • 브레드크럼 발주 > 발주 요청 > SO-2026-0123, H1 = SO 번호 + 상태(REQUESTED). 우측 액션: 인쇄 + 거절(danger, ban) + 승인(primary, check). 승인/거절 권한 = ADMIN·HQ_MANAGER.
  • 2단: 좌 = 요청 정보 카드 + 요청 품목 카드 / 우(340) = 변경 이력.
    • 요청 정보: 4열 grid InfoCell — 요청 지점(코드·지역) · 요청자(역할) · 요청일 · 도착 희망일(+D+N) · 승인자(미승인, muted) · 출고 창고(승인 후, muted).
    • 요청 품목: "N 라인 · M건 재고 부족" 칩. 컬럼: 부품 / 단위 / 요청 수량 / 승인 수량(Stepper) / 가용 재고 / 상태. 가용재고 셀은 숫자(부족 시 danger)+"충분/부족 N". 상태 = "승인 가능"(ok) / "재고 부족"(warn). 메모 박스(brand 좌측 바). 푸터: 총 품목·요청 합계·승인 합계·부족 + 우측 "승인 권한 · ADMIN · HQ_MANAGER".
    • 변경 이력: 세로 타임라인(REQUESTED/EDITED/DRAFT 등).
  • 승인 모달(채택 안 A, 폭 520): 헤더 check(ok) + "발주 승인" + SO 칩. 본문: ok 배너("승인 시 출고 대기 상태로 전환되며 요청 지점에 알림 전송") + 출고 창고*(Select) + 요약 박스(총 품목·승인 합계·재고 부족 라인 — 부족 행 warn 배경). 푸터: 취소 / 승인 확정(primary, check).
  • 거절 모달(부가 참고, 안 B였으나 거절 동작용으로 함께 구현 권장, 폭 480): 헤더 ban(danger) + "거절 사유". danger 배너("거절 시 요청자에게 즉시 알림") + 사유*(Select; 재고 부족/요청 수량 과다/중복 요청/단종 부품/예산 초과/기타) + 메모(TextArea). 푸터: 취소 / 거절 확정(배경 danger).

SO-03 출고 처리 (채택: 안 A · 스택형, 사이드바)

  • 브레드크럼 … > SO-2026-0123 출고 처리, H1 = SO 번호 + "출고 처리" 라벨 + 상태(APPROVED).
  • 발주 요약 카드: "승인 · 일시 · 승인자". 4열: 요청 지점 · 도착 희망일(+요일·D+N) · 출고 창고(코드·위치) · 운송 수단(Select; 자사 차량 대형/소형, 택배, 용차).
  • 출고 품목 카드: 컬럼 부품 / 단위 / 승인 수량 / 출고 수량(Stepper) / 현재고 / 잔여 차감 후(= 현재고 − 출고; 음수면 danger, "현재고 − 출고 → 결과" 식 표기). 푸터: 합계들 + 우측 경고 "잔여 음수 N건 — 확정 전 확인 필요"(warn).
  • 출고 정보 카드: 출고 일자* · 송장번호(선택) · 출고 메모.
  • 하단 바: 좌측 "본사 → 지점 · N 라인 M EA" + 우측 취소 / 출고 확정(primary, truck). → 확정 시 상태 SHIPPED + 출고 창고 재고 차감.

SO-04 내 지점 발주 요청 (지점) (채택: 안 A · KPI+탭+테이블, 사이드바)

  • 브레드크럼 발주 > 내 지점 발주 요청, H1 "내 지점 발주 요청" + 강남 1지점 · BR-04 Pill. 우측 액션: 발주 요청 등록(primary, plus).
  • KPI 4개: 전체 요청(42) / 승인 대기(2) / 출고 대기(1) / 도착 대기(2, accent brand, "도착 확인 →").
  • 필터 바 + 테이블 상단에 상태 탭(전체 42/진행 중 5/완료 35/취소·거절 2).
  • 테이블: 요청번호(186, mono; 진행 중 행은 앞에 brand 점) · 요청일(170, mono) · 도착 희망일(170; 지연 danger) · 품목(60) · 총 수량(110) · 상태(130, SO 배지) · 액션(48, 케밥).
  • 케밥 메뉴(예시): 도착 확인(brand hot, package) / 상세 보기(eye) / 요청서 인쇄(list). SHIPPED 상태 행에서 "도착 확인"이 주 동작 → SO-06로 이동.
  • 페이지네이션(42, 10/페이지).

SO-05 발주 요청 등록 (지점) (채택: 안 A · 스택형, 사이드바)

  • 브레드크럼 발주 > 내 지점 발주 요청 > 신규 등록, H1 "발주 요청 등록". 우측 액션: 임시저장 + 요청 제출(primary, send).
  • 요청 정보 카드: REQ 번호 칩(임시) + 요청자. 2열: 요청 지점(자동·잠금, bg 배경+lock "자동") · 도착 희망일*(calendar) · 수신 창고*(Select) · 메모(TextArea).
  • 요청 품목 카드: "N / 30 라인" 칩 + soft 라인 추가. 컬럼: 부품(52px 선택기) / 단위 / 요청 수량(NumInp) / 현재고(숫자+부족/근접/충분 컬러) / 안전재고(숫자+출처: "마스터 기준"/"창고 오버라이드"는 brandStrong) / 우선순위(긴급/일반 Select; 긴급=danger 틴트) / 삭제. 부품 검색 드롭다운(브랜드 보더+팝오버). + 라인 추가 dashed.
  • 하단 긴급 바(카드): 좌측 "제출 후 본사 승인까지 평균 9시간"(clock) + 우측 danger 박스 "긴급 품목 수 N건".
  • 하단 액션: 취소(ghost)/임시저장/요청 제출.

SO-06 도착 입고 확인 (채택: 안 A · 스택형, 사이드바)

  • 브레드크럼 … > SO-2026-0123 도착 입고 확인, H1 = SO 번호 + "도착 입고 확인" 라벨 + 상태(SHIPPED).
  • 발주 요약 카드: "출고지 · 본사 중앙창고". 4열: 본사 출고 일자(+시각) · 송장번호(mono) · 운송 수단(+차량 종류·차량번호) · 수신 창고(코드).
  • 도착 품목 확인 카드: "N 라인" + "차이 M건"(warn) 칩 + "기본 도착 수량 = 출고 수량 · 직접 카운트 후 수정" 안내. 컬럼: 부품 / 단위 / 출고 수량 / 도착 수량(Stepper) / 차이(±0 faint / -N danger) / 상태("정상" ok / "차이 발생" warn). 차이 행은 #FCF7EC 배경 강조. 푸터: 합계들 + "확정 시 지점 창고 재고 +N 자동 반영".
  • 도착 정보 카드: 도착 일자* · 수령자(자동·잠금, 로그인 사용자) · 차이 사유*(차이 발생 시 필수; warnDot 보더+틴트, Select; 배송 누락/파손/오배송/수량 오류/기타) · 메모(TextArea).
  • 하단 바: 좌측 경고 "차이 N건 — 사유 입력 후 확정"(warn) + 우측 취소 / 도착 확정(primary, check). → 확정 시 상태 DELIVERED + 수신 창고 재고 가산(도착 수량 기준).

13. 화면 명세 — 인증 (시안 5: 현대오토에버 ERP 화면 시안5.html) — 앱 셸 없음

배경: 페이지 bg 위에 옅은 그리드 패턴(40×40px, rgba(19,32,42,.035) 라인). 콘텐츠는 화면 중앙 정렬.

AU-01 로그인 (채택: 안 A · 센터 카드)

  • 세로 중앙 정렬: 로고 마크(64px, radius 16, dashed 보더, package 아이콘) → 브랜드 타이틀("통합 부품 ERP" 30/800 + brand 언더라인 + "현대 파츠 (주)" muted) → 카드(폭 460, radius 16, 패딩 36, 로그인 shadow).
  • 카드 폼(세로 gap 22): 사번 또는 이메일(user 아이콘, placeholder "HMC0001 또는 name@hyundaiparts.com") · 비밀번호(lock, 값 dots, eye 토글) · 로그인 버튼(primary, 폭 100%, 높이 52, 15.5px) · 사내 SSO 로그인 dashed 박스(보조).
  • 하단: "비밀번호 분실 시 관리자에게 문의"(faint).
  • 입력 필드 외형: 높이 52, 패딩 0 16px, 보더 1.5px(포커스 brand), radius 10, 좌 아이콘 + 값/placeholder, 비밀번호는 dots+letter-spacing 3, 우측 eye.

AU-02 비밀번호 변경 (채택: 안 A · 센터 카드)

  • 중앙: 타이틀("비밀번호 변경" 26/800 + brand 언더라인) → 카드(폭 500).
  • 폼(세로 gap 20): 현재 비밀번호 · 새 비밀번호 · 새 비밀번호 확인(모두 lock+eye) → 규칙 체크리스트(dashed 박스, 2×2 grid): 8자 이상(✓ 충족) · 영문 포함(✓) · 숫자 포함(미충족) · 현재 비밀번호와 다름(미충족). 충족 = 18px 원형 brand 채움+흰 check, 텍스트 ink2/600; 미충족 = line 보더 빈 원, faint.
  • 변경 버튼(primary 폭 100% 높이 52) + 취소 텍스트 링크(muted).
  • 검증 규칙: 8자 이상 / 영문 포함 / 숫자 포함 / 현재와 다름. 모두 충족 시에만 변경 활성.

14. Interactions & Behavior

  • 네비게이션: 사이드바 항목 클릭 → 해당 목록 화면. 목록 행/케밥 → 상세 또는 액션. 브레드크럼 마지막 단계 = 현재.
  • 모달/드로어: 추가·조정·승인/거절·입고/도착/출고 등은 백드롭(blur) 위 센터 모달. ESC/백드롭 클릭/닫기(x)로 닫힘. 채택은 전부 센터 모달.
  • 필터: 텍스트 검색(디바운스 권장) + 드롭다운/멀티셀렉트(카운트 배지) + 기간 + 정렬 토글 + 초기화(전체 리셋). 멀티 선택은 칩 카운트로 표시.
  • 테이블 정렬: chevron 표시된 헤더 클릭으로 asc/desc. 페이지네이션 + 페이지당 행(10/20/50).
  • Stepper / 빠른 수량: − / + 및 (IV-02) +1/+10/+50/+100. 결과가 음수(재고 차감 후)면 danger 강조 + 경고.
  • 상태 전이:
    • PO: DRAFT → APPROVED → SHIPPED → RECEIVED(입고 처리, 전량). CANCELED 분기.
    • SO: REQUESTED → APPROVED(승인, 출고창고 지정) / REJECTED(사유). APPROVED → SHIPPED(출고 처리, 재고 차감) → DELIVERED(도착 확정, 재고 가산). CANCELED 분기.
  • 알림: 승인/거절/출고/도착 시 상대 측에 알림(상단바 벨 배지).
  • 권한 가드: ADMIN 전용(사용자/창고/지점 추가), 승인/거절(ADMIN·HQ_MANAGER), 지점 사용자는 자기 지점 SO만.
  • 빈/로딩/에러 상태: 목록 빈 결과 placeholder, 로딩 스켈레톤, 폼 검증 인라인 에러(필수·형식·재고 부족·음수 경고) 권장. (시안은 정적이라 미표기 — 구현 시 코드베이스 패턴 적용.)
  • 반응형: 데스크톱 우선. 사이드바는 좁은 폭에서 접기(아이콘 only) 또는 드로어 전환 권장.

15. State (구현 참고)

  • 세션/인증: 로그인 사용자(역할·소속 지점·창고), 토큰. 첫 로그인 시 비밀번호 변경 강제 플래그.
  • 목록 화면 공통: filters(검색어, 상태[], 소속/지점[], 기간, 정렬키·방향), page, perPage, selectedRow.
  • 폼/모달: 입력 모델 + 검증 상태 + 제출 로딩. PO/SO 등록은 라인 배열(부품·수량·단가/우선순위 등) + 합계 파생값.
  • 마스터/조직 데이터: 부품 마스터, 창고/지점 트리, 공급사, 사유 목록, 운송수단 — 드롭다운 소스.

16. Assets

  • 폰트: Pretendard Variable (CDN 위 명시). 아이콘: 라인 아이콘 세트(코드베이스 기존 세트로 대체 가능, §5.4 키 목록).
  • 프로필 이미지: 현재 기본 플레이스홀더(아바타) — 실제 업로드 연동 시 교체.
  • 로고: 텍스트 + package 아이콘 박스로 구성(별도 이미지 없음). 실제 BI 적용 시 교체.
  • 별도 비트맵/일러스트 없음.

17. 번들 파일 목록 (디자인 레퍼런스)

아래는 레퍼런스 프로토타입입니다. 그대로 배포하지 말고 §2에 따라 재구현하세요. 각 HTML은 React+Babel(인라인 JSX)로 동작하며, 화면별 JSX는 erp*/ 폴더에 분리되어 있습니다.

파일 내용
현대오토에버 ERP 화면 시안.html + erp/ MY-01, US-01, US-02, DA-01 + 공용 토큰(data.jsx)·UI(ui.jsx)·앱셸(shell.jsx)
현대오토에버 ERP 화면 시안2.html + erp2/ IM-01, IM-02, WH-01, WH-02, IV-01, IV-02, IV-03
현대오토에버 ERP 화면 시안3.html + erp3/ PO-01, PO-02, PO-03(+입고)
현대오토에버 ERP 화면 시안4.html + erp4/ SO-01 ~ SO-06
현대오토에버 ERP 화면 시안5.html + erp5/ AU-01, AU-02
design-canvas.jsx 시안 비교용 캔버스 래퍼(구현 불필요)

핵심 공용 정의 위치: 디자인 토큰 T = erp/data.jsx; 아이콘/배지/버튼/입력/차트 = erp/ui.jsx; 사이드바·상단바·페이지헤더·Frame = erp/shell.jsx. 각 화면에서 "안 A · 사이드바"(인증은 "안 A") 아트보드가 채택 기준입니다.

각 HTML을 브라우저로 열면 채택안 화면을 직접 확인할 수 있습니다(캔버스에서 라벨 클릭 시 전체화면 포커스).