Skip to content

Commit 75ff2a4

Browse files
committed
docs: Radix+shadcn 기반 UI 컴포넌트 방향 명시
1 parent b78fef7 commit 75ff2a4

2 files changed

Lines changed: 26 additions & 11 deletions

File tree

docs/v2_FINANCIAL-LEDGER/technical/00-tech-stack.md

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -87,12 +87,19 @@
8787
- 커스터마이징 용이
8888
- 작은 번들 크기
8989

90-
### UI 컴포넌트
91-
**자체 개발 (packages/core/ui):**
92-
- Button, Input, Select
93-
- Modal, Table, Card
94-
- Form, DatePicker
95-
- JsonViewer, RawDataViewer
90+
### UI 컴포넌트
91+
**채택 방향 (2026-02): Radix + shadcn 패턴 + 내부 래퍼**
92+
- **Radix UI Primitives** - 접근성/키보드 동작/상태 머신 기반 Primitive
93+
- **shadcn/ui 패턴** - Tailwind 기반 스타일/조합 패턴 참고
94+
- **@fieldstack/ui (내부 패키지)** - 앱/모듈에서 사용하는 단일 진입점
95+
96+
**적용 원칙:**
97+
- 외부 라이브러리를 앱/모듈에서 직접 import하지 않고 `@fieldstack/ui`를 통해 사용
98+
- Phase 1.5에서는 P0/P0.5 중심으로 Control MVP를 우선 구현
99+
- P1/P2는 모듈 요구사항/커뮤니티 요청 기반으로 점진 확장
100+
101+
**참고 문서:**
102+
- `docs/v2_FINANCIAL-LEDGER/ui/03-control-backlog.md`
96103

97104
### 폼 관리
98105
- **React Hook Form**

docs/v2_FINANCIAL-LEDGER/ui/01-core-components.md

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,21 @@
44

55
모듈 개발자가 UI/UX를 처음부터 만들 필요 없이, Core에서 제공하는 컴포넌트를 사용하여 빠르고 일관된 인터페이스를 구축할 수 있도록 지원합니다.
66

7-
## 장점
7+
## 장점
88

99
- ✅ 통일된 디자인 시스템
1010
- ✅ 즉시 사용 가능한 컴포넌트
11-
- ✅ 반응형 자동 처리
12-
- ✅ 다크모드 자동 지원
13-
- ✅ 접근성 자동 처리
11+
- ✅ 반응형 자동 처리
12+
- ✅ 다크모드 자동 지원
13+
- ✅ 접근성 자동 처리
14+
15+
## 구현 방향 (Phase 1.5 기준)
16+
17+
- Control 구현은 `Radix UI Primitives` 기반으로 진행
18+
- 스타일/조합 패턴은 `shadcn/ui` 방식을 참고
19+
- 실제 앱/모듈에서는 외부 라이브러리를 직접 사용하지 않고 `@fieldstack/ui`를 통해서만 사용
20+
- 우선순위는 `P0 -> P0.5 -> P1 -> P2` 순서로 적용
21+
- 상세 목록/상태는 `ui/03-control-backlog.md`에서 관리
1422

1523
## Core UI 구성
1624

@@ -166,4 +174,4 @@ FormBuilder 컴포넌트를 가져와서 사용합니다. 폼의 구조를 정
166174

167175
테마 파일에서 전체 앱의 시각 기준값을 관리합니다. 색상으로는 주색상(파란색 #3B82F6), 부차색상(회색 #6B7280), 위험색(빨간색 #EF4444), 성공색(초록색 #10B981)이 정의되어 있습니다. 폰트로는 일반 텍스트용 Inter와 코드용 JetBrains Mono를 사용합니다. 간격은 작음(0.5rem), 보통(1rem), 큼(1.5rem) 세 단계로 정의되어 있습니다.
168176

169-
사용자는 자유롭게 테마를 커스터마이징할 수 있습니다.
177+
사용자는 자유롭게 테마를 커스터마이징할 수 있습니다.

0 commit comments

Comments
 (0)