채팅 입력 컴포넌트. 자동 리사이즈 textarea, 파일 첨부, 모델/스타일 Select.
npx @reopt-ai/opt-cli surface add chat-input
채팅 메시지 목록. 역할별 말풍선, 타이핑 인디케이터, 자동 스크롤.
AI 챗봇 어시스턴트 화면. ChatSidebar + ChatMessageList + ChatInput 조합.
AI 채팅 사이드바. 대화 목록, 검색, 새 대화 버튼.
키보드 단축키를 시각적으로 표시하는 인라인 뱃지 컴포넌트.
드롭다운 선택 컴포넌트. 5-part anatomy: Root, Label, Trigger, Popover, Item.
접근성 버튼 컴포넌트. 4가지 변형(primary, secondary, ghost, danger), 3가지 크기, 로딩/아이콘과 aria-busy 상태를 지원합니다.
opt-charts에서 차트를 어떻게 사용하나요?
차트는 @reopt-ai/opt-charts에서 제공합니다. LineChart, BarChart, AreaChart 등을 사용할 수 있습니다. ChartContainer로 감싸면 반응형 크기 조절이 자동으로 됩니다.
데이터 포맷은 어떻게 되나요?
ChartDataPoint 인터페이스를 따릅니다. name 필드가 필수이고, 나머지는 시리즈의 dataKey에 맞춰 자유롭게 추가하면 됩니다. 예: { name: "1월", revenue: 4000, users: 2400 }
새 프로젝트의 구조를 어떻게 잡으면 좋을까요?
모노레포 구조를 추천합니다. Turborepo를 사용하면 빌드 캐싱과 태스크 오케스트레이션이 쉬워집니다. 기본 구조: - apps/ (애플리케이션) - packages/ (공유 패키지) - turbo.json (파이프라인)
Vercel CLI를 사용하면 간단합니다
제네릭 헬퍼를 활용해보세요
CSS 변수 기반 시스템이 좋습니다
Prisma migrate를 추천합니다
선택됨: react, svelte