카드 타이틀
전체 보기 →카드 본문 영역. 임의의 컨텐츠 삽입.
About this Catalog
design system / catalog
SCM Hub 디자인 시스템의 모든 컴포넌트를 카테고리별로 정리한 가이드입니다.
모든 컴포넌트는 components/<name>/ 폴더의 단일 source 를 사용합니다 — 이 카탈로그·시뮬레이터·실제 데모 페이지 (scm hub) 가 같은 CSS / JS 를 공유합니다.
📂 컴포넌트 코드
components/<name>/ — CSS/JS/JSX/HTML
components/<name>/ — CSS/JS/JSX/HTML
📖 카탈로그 (현재 페이지)
catalog/index.html — 문서/프리뷰 전용
catalog/index.html — 문서/프리뷰 전용
🚀 실제 데모
scm hub/*.html — 페이지에 컴포넌트 사용
scm hub/*.html — 페이지에 컴포넌트 사용
Colors
layer-desktop.css디자인 토큰 — 표면, 텍스트, 상태, 액센트.
Brand · Functional
Accent
#245EFF
Foreground
#000000
FG Low
#666666
FG Lower
#8A8A8A
Success
#1EA514
Critical
#F31110
Surface · Border
BG
#FFFFFF
BG Low
#FAFBFC
BG Inset
#F5F7FA
Border
#E0E0E0
Border Low
#EBEBEB
Selected BG
#F0F7FF
Typography
Pretendard Variable기본 폰트 Pretendard. 본문 14/15px, 헤더 18~26px.
DisplaySCM Hub 대시보드
H1페이지 타이틀
H2섹션 타이틀
Body L기본 본문 텍스트
Body테이블 / 폼 일반 본문
Caption보조 / 라벨
MicroUPPERCASE LABEL
Spacing
8px base8px 그리드 기반. 4 / 8 / 12 / 16 / 24 / 32 / 40 자주 사용.
4
8
12
16
24
32
40
Icon Box
components/icon-box/아이콘을 색깔 박스 안에 담아 강조 — 대시보드 KPI / 액티비티 등.
<span class="scm-icon-box scm-icon-box--blue"> <svg viewBox="0 0 20 20"><use href="#ic-package"/></svg> </span>
Checkbox
components/checkbox/role="checkbox" + aria-checked. true / false / mixed (indeterminate).
<span class="scm-checkbox" role="checkbox" aria-checked="true"></span>
Radio
components/radio/Toggle
components/toggle/Tag
components/tag/라이트 그레이 배경 + 12/500 텍스트. 옵션 / 컬러 / 사이즈 표기.
블랙
크림화이트
280
FREE
Color Chip
components/color-chip/
블랙
크림
인디고
Status Chip
components/status-chip/
매핑완료
미매핑
대기
중지
Platform Tag
components/platform-tag/
MUSINSA
29CM
Kind Chip
components/kind-chip/보충대상(target=초록) / 비대상(nontarget=회색) — 편집샵 보충 요청.
보충대상
비대상
Forecast Chip
components/forecast-chip/
7일 32
14일 64
State Text
components/state-text/
완료
처리중
실패
미적용
Button
components/button/primary (검정 채움) / secondary (흰 + 보더) / sm (height 32). disabled 자동 처리.
<button class="scm-button scm-button--primary">상품 매핑</button> <button class="scm-button">취소</button>
Mini Action
components/mini-action/stats-bar 우측 보조 액션 — 텍스트 버튼.
Search / Reset / Download
components/search-btn · filter-reset-btn · download-btnBack / Sizeset
components/back-btn · sizeset-btnDeploy Pill
components/deploy-pill/전개중(파랑) / 미전개(회색) / 부분(N/M) — 무탠 전개상품 관리.
전체 전개
전개 5/9
Input
components/input/기본 h44 / sm h36. focus 시 border #000. counter 옵션 (input-wrap + .--with-counter).
Default (h44)
<input class="scm-input" placeholder="입력" />
Small (h36)
<input class="scm-input scm-input--sm" />
With Counter
0 / 20
<div class="scm-input-wrap scm-input-wrap--with-counter"> <input class="scm-input" maxlength="20" /> <span class="scm-input-counter">0 / 20</span> </div>
Select
components/select/
옵션 선택
운영중
소형
Form Row
components/form-row/라벨 + 컨트롤 가로 배치. 필수 표시 (req-dot).
Filter Bar
components/filter-bar/데이터 리스트 페이지 sticky 필터바. 좌측 [전체 필터 chip] + 가로 스크롤 [chip 목록] + 우측 검색/초기화.
Filter Chip
components/filter-chip/전체 필터 chip — drawer trigger.
Filter Select
components/filter-select/필터 칩. data-state: placeholder / filled / active.
Filter Popover (4 modes)
components/filter-popover/ + modes.js필터 chip 클릭 시 열리는 popover. REGISTRY 정의된 mode 에 따라 4가지 형태로 자동 렌더.
single — 단일 라디오
전체
운영중
중지
codeinput — textarea (코드 입력)
0 / 1,000
multi — 목록 선택 + 직접 입력 토글
검색결과 + 선택됨 2단 (실제 동작은 SCM.filterPopoverModes.init 시)
codeinput-tabs — 입력 종류 라디오
0 / 1,000
// REGISTRY 등록 (filter-popover-modes.js)
season: { mode: 'multi', options: [...] },
opStatus: { mode: 'single', options: [...] },
sku: { mode: 'codeinput' },
skuLookup: { mode: 'codeinput-tabs', tabs: [{id:'number',label:'SKU번호'},{id:'name',label:'SKU명'}] },
Filter Drawer
components/filter-drawer/"전체 필터" 좌측 슬라이드 드로어 (480w). REGISTRY 기반 자동 빌드. footer 검색 적용 / 전체 초기화.
SCM Table
components/scm-table/데이터 리스트 테이블. sticky thead, frozen columns, cell selection, sort, column filter / more menu, resize.
예시 (체크박스 / 정렬 아이콘 / 컬럼 필터 호버 / 셀 선택)
| SKU번호 | 상품명 | 시즌 | ||
|---|---|---|---|---|
| 10669591 | 삼바 OG - 블랙:크림화이트 | 26-FW | ||
| 10669592 | NIKE PEGASUS 41 | 26-SS | ||
| 10669593 | 와이드 데님 팬츠 | 26-FW |
기능 모듈
- sticky thead (
scm-table.js · setupStickyThead) — 듀얼 테이블 분리 + colgroup 동기 - frozen columns (
.col-frozen-1 ~ N) — sticky left + 누적 offset CSS 변수 (--frozen-l1...) - cell selection — drag 범위 / Cmd+C TSV 클립보드 / 헤더 더블클릭 컬럼 전체 선택
- sort (
table-sort.js) —.sort-ic클릭 → asc / desc / default 토글, 데이터 재정렬 - column filter (
column-filter-popover.js) —.filter-ichover 노출, 코드 입력 popover, 적용 시 blue 활성 - column more (
column-more-menu.js) — 정렬 / 좌우 고정 / 숨김 메뉴 (현재 미노출)
Column Icons
scm-table.css · table-sort.js · column-filter-popover.js · column-more-menu.js컬럼 헤더 우측 아이콘 그룹.
텍스트
Page Head
components/page-head/variant: list / detail / form / dashboard.
무탠 전개상품 관리
Page Section
components/page-section/섹션 타이틀
전체 보기 →섹션 본문 컨텐츠
Tabs
components/tabs/Stats Bar
components/stats-bar/ + stat/Card
components/card/Info Banner
components/info-banner/Info Table
components/info-table/소유사
무신사
스타일넘버
12345263
시즌
26-FW
출시연도
2026
KPI Card
components/kpi-card/
진행중인 보충 요청
1,284
Quick Link Card
components/quick-link-card/Activity Item
components/activity-item/SKU 5000001 보충 요청 승인
무신사 스탠다드 강남 외 3개 매장
Bar Chart
components/bar-chart/Collapsible Card
components/collapsible-card/접고 펼 수 있는 카드 — sku-detail 의 UID 카드.
Empty State
components/empty-state/표시할 항목이 없습니다.
Code Link
components/code-link/SKU번호 / UID / 바코드 / 스타일넘버 등 코드 셀의 underlined 링크. 클릭 시 code-popover.
Barcode Card
components/barcode-card/Toast
components/toast/SCM.toast.show({ variant, title, desc }) — success / info / critical. 우상단 슬라이드 인.
SKU번호 복사 완료
5건이 클립보드에 복사되었습니다.
필터 적용 완료
12건의 결과가 표시됩니다.
n건 행거 사용 여부 실패
요청한 일괄 변경이 실패했습니다. 잠시 후 다시 시도해 주세요.
SCM.toast.show({ variant: 'success', title: 'SKU번호 복사 완료', desc: '5건이 클립보드에 복사되었습니다.' });
SCM.toast.show({ variant: 'info', title: '필터 적용 완료', desc: '12건의 결과가 표시됩니다.' });
SCM.toast.show({ variant: 'critical', title: 'n건 행거 사용 여부 실패', desc: '요청한 일괄 변경이 실패했습니다.' });
Confirm Modal
components/confirm-modal/중앙 모달 + 확인/취소 버튼. SCM.confirmModal.open() 사용.
Side Drawer
components/side-drawer/우측에서 슬라이드 인 드로어. 사이즈 개별 설정, 코드 검토 등.