02 · SYSTEM / COMPONENTS
컴포넌트 라이브러리
shadcn/ui 기반의 55개 컴포넌트에 POSX 테마가 전면 적용되어 있습니다. 이 페이지는 금융 시나리오의 핵심 컴포넌트와 사용 제약을 보여줍니다 — 컴포넌트는 반드시 @/components/ui/* 에서 가져오며, 재구현은 금지합니다.
Button · 버튼
한 화면에 Purple 솔리드 주요 버튼은 하나만 허용 · 위험한 작업은 destructive · 낮은 우선순위는 outline / ghost 사용.
Badge · 배지
한 페이지에는 한 가지 배지 스타일만 사용. 비즈니스 상태 매핑: 성공 → Teal · 처리 중 → Gold · 실패 → Rose (시스템 시맨틱 컬러는 점유하지 않음).
Stat Card · 금융 데이터 카드
11px mono 대문자 라벨 + tabular-nums 수치 + 등락 전용 컬러 (↑ #059669 / ↓ #DC2626, 시맨틱 토큰과 독립).
Source: World Bank WDI · 2024 / Visa Onchain Analytics · 2025-12 / Nilson / CMSPI · 2025 (단일 데이터 소스 posx-data.json 기준)
Form · 폼
라벨은 반드시 input과 연결 · 보조 텍스트는 aria-describedby 사용 · 금액 입력은 우측 정렬 + 통화 접두사 · 되돌릴 수 없는 작업은 OTP / 재확인 필수.
Table · 거래 테이블
금액 열은 우측 정렬 + 고정폭 숫자 · 양수/음수는 시맨틱 컬러 · 상태는 비즈니스 배지 사용.
Alert Dialog · 자금 작업 확인
되돌릴 수 없는 자금 작업은 반드시 alert-dialog 사용 (오버레이 클릭으로 닫기 불가) · OTP와 함께 사용.
Skeleton · 로딩 상태
금융 데이터 로딩은 반드시 Skeleton 플레이스홀더 사용 · 전체 화면 Spinner 금지.
Chart · 차트
색상은 --chart-1..5 에서 가져옵니다 (Purple → Teal → Gold → Azure → Rose 엄격한 순서) · 헤어라인 그리드 · 숫자는 tabular-nums.