UI 표준 레퍼런스
System Setting
UI 표준 레퍼런스
TEMPLATE DETAIL
자금일보 대시보드형
화면 유형 레퍼런스등록됨Button, Badge, Card, Drawer, Chart, Grid, Money cell, Status badge 기반 표준/요소를 사용합니다.
기본정보/설정
필수 요소
- compact KPI strip
- 현재 자금현황 card
- drawer detail
- 7일 chart
- 활동 card
- 주의 항목
금지 패턴
page-local KPI card dump임의 gradient/orbraw Tailwind colornested card과도한 설명 텍스트
기술 연결 정보
ButtonBadgeCardDrawerChartGridMoney cellStatus badge
스타일 기준
색상 체계
semantic token만 사용합니다. raw `bg-blue-500`, `text-emerald-600`, route-local color override는 금지합니다.
밀도
compact/default 기준을 화면 유형별 레퍼런스에 맞춥니다.
모서리
card, drawer, grid surface의 radius와 border 톤을 공용 primitive 기준으로 맞춥니다.
타이포
금액, 보조문구, grid header의 크기와 weight를 route-local로 재정의하지 않습니다.
차트 팔레트
inflow/outflow/balance 의미 색상은 차트 토큰 기준을 사용합니다.
에이전트 작업 기준
작업 전
- IAB로 reference route 확인
- system ui-standards lookup --route <target>
작업 중
- shared primitive 우선 사용
- page-local shadcn bundle 금지
- raw Tailwind color 금지
- route-local card/button/select 조립 금지
작업 후
- system ui-standards validate --route <target>
- IAB reference 비교
- StageReport에 표준 준수 표 작성
운영 반영/조회
이 카탈로그는 1차 진입 대상입니다. 정책 저장은 raw 항목에서만 가능합니다.