맥락#
최소 관리자 기능은 구현됐지만 자체 CSS와 일반 HTML 요소 중심이라 공통 상태·접근성·반응형 확장이 어렵다. 프로젝트 오너는 shadcn을 적극 활용하고 구체적인 스타일 계약을 지정했다. [1]
결정#
- Component Base는 Base UI, shadcn 스타일은 Nova를 사용한다.
- Base Color·Theme·Chart Color는 Neutral로 통일한다.
- 제목과 본문 글꼴은 Inter, 아이콘은 Lucide를 사용한다.
- 반경은 shadcn 기본값을 유지한다.
- 메뉴의 주 행동은 Default/Solid, 보조 강조는 Subtle로 표현한다.
- 버튼·카드·입력·레이블·표·배지·알림·시트·구분선은 shadcn 생성 컴포넌트를 우선 사용한다.
- 데스크톱은 비교 가능한 사용자 표, 모바일은 사용자별 카드와 Sheet 메뉴를 사용한다.
화면별 적용#
| 화면 | 데스크톱 | 모바일 |
|---|---|---|
| 로그인·OTP | 중앙 Card와 전체 폭 주 버튼 | 화면 폭에 맞는 Card와 입력 |
| 사용자 목록 | 검색 Card와 Table | 검색 Card와 사용자 카드 목록 |
| 사용자 상세 | 정보·계정 상태 Card 분리 | 단일 열 Card와 전체 폭 상태 버튼 |
| 메뉴 | Solid 사용자 메뉴·Subtle 로그아웃 | 우측 Sheet 안 동일한 우선순위 |
Chart 컴포넌트는 현재 기능 범위에 없지만 향후 추가 시 Neutral chart token만 사용한다.
재검토 조건#
- 관리자 기능이 사용자 관리 외 영역으로 확대돼 정보 구조와 사이드바가 필요해진다.
- 브랜드 디자인 시스템이 확정돼 Neutral 관리자 테마를 교체해야 한다.
- 모바일 관리자 사용량이 낮아 별도 카드 뷰 유지 비용이 커진다.
관련 문서: 관리자 사용자 관리, 디자인 요구 원본