UI 컴포넌트
개요
웹 콘솔이 쓰는 React 컴포넌트와 세션 블록
Werft 웹 콘솔의 화면은 두 패키지로 만든다. 같은 패키지로 다른 React 앱에 세션 목록과 세션 화면을 넣을 수 있다.
| 패키지 | 들어 있는 것 |
|---|---|
@werft-ai/ui | 디자인 토큰(tokens.css), Tailwind 연결(theme.css), primitive(Button, Card, Dialog, Tabs, Skeleton 등), 상태 표시(ErrorState, EmptyState) |
@werft-ai/react | 서버 상태를 읽고 쓰는 hook(useSessions, useSession, useSessionEvents, useSendMessage, useAnswer 등)과 WerftProvider. @werft-ai/react/components에는 API 타입을 받아 그리는 조각(StatusLabel, Timeline, Composer, ApprovalCard, QuestionCard 등)이, @werft-ai/react/blocks에는 데이터까지 읽어 그리는 세션 블록 SessionList, RecentSessions, WaitingSessions, SessionDetail, ApprovalInbox가 있다 |
@werft-ai/ui는 받은 상태를 그리기만 한다. API를 부르거나 권한을 판단하지 않는다. API 호출은 @werft-ai/react의 hook과 블록이 맡는다.
두 패키지는 레지스트리에 올라가 있지 않다(private, 버전 0.0.0). 이 저장소 안의 앱은 workspace 패키지로 가져오고, 이때 패키지는 TypeScript 소스를 내보내므로 Vite처럼 TypeScript를 컴파일하는 번들러가 필요하다. 저장소 밖의 앱에는 @werft-ai/ui만 빌드된 JavaScript tarball로 설치할 수 있다(저장소 밖 앱에 설치). @werft-ai/react는 저장소 밖에 설치할 수 없다.
이 절의 순서
- 설치: 저장소 안에 Vite 앱을 만들고 패키지를 가져온다
- 테마 적용: CSS 세 개를 import하고 어두운 테마를 켠다
- 세션 블록 넣기: 로컬 스택의 세션 목록과 세션 화면을 그린다
- 저장소 밖 앱에 설치:
@werft-ai/ui를 tarball로 묶어 다른 React 앱에 설치한다