[Design System] PWF 공통 컴포넌트 라이브러리 구축

[BcKmini]

배경

디자인 기준을 MFW(러프 와이어프레임)에서 PWF(정식 프로토타입, node-id=143-2)로 전환. PWF는 Button/Status Label/Agent Source Label/Workflow Step/Decision Gate/Empty·Loading·Error State 등 재사용 컴포넌트와 디자인 토큰(색상/spacing/radius)을 정의하고 있어, 9개 화면(AUTH/HOME/WORK/CREATE/REVIEW/CASE/PEOPLE/SET/LINK) 구현 전에 먼저 구축한다.

디자인 토큰 (Figma에서 추출)

• brand-primary: #07847f
• surface-default: #fff, surface-subtle: #eef4f4, border-default: #dce5e4
• text-primary: #172b2d, text-secondary: #5f6f72
• status: red(#fff1f1/#d84a4a), amber(#fff7e8/#d79222), green(#ecf8f1/#2c8a5b), violet(#f4f0ff/#7657c8), teal(#eef4f4)
• spacing: 4/8/12/16/24px, radius: 6/8/999px
• font: Noto Sans KR (Regular/Medium/Bold) — MFW의 NanumGothic에서 변경

완료 조건

• design tokens (CSS 변수) 구축
• Button (Primary/Secondary × Default/Disabled)
• Status Label (Neutral/Info/Success/Warning/Critical/Agent)
• Agent Source Label (Rule/Data/Draft/Review)
• Workflow Step (Pending/Active/Done/Blocked)
• Decision Gate (Locked/Ready/Approved)
• Empty/Loading/Error State