reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
Overview161Core55Blocks75Pages31
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

© 2026 reopt-ai. All rights reserved.

Explore/페이지/ChatAssistant

ChatAssistant

페이지

AI 챗봇 어시스턴트 화면. ChatSidebar + ChatMessageList + ChatInput 조합.

chat
관련 문서
npx @reopt-ai/opt-cli surface add chat-assistant
100%

프로젝트 구조 설계

AI

새 프로젝트의 구조를 어떻게 잡으면 좋을까요?

오후 06:41
A

모노레포 구조를 추천합니다. Turborepo를 사용하면 빌드 캐싱과 태스크 오케스트레이션이 쉬워집니다. 기본 구조: - apps/ (애플리케이션) - packages/ (공유 패키지) - turbo.json (파이프라인)

오후 06:42
ShiftEnter로 줄바꿈

의존 컴포넌트

shellschat-sidebarshellschat-inputshellschat-message-listcoreloading-overlay

관련 컴포넌트

ChatInput

채팅 입력 컴포넌트. 자동 리사이즈 textarea, 파일 첨부, 모델/스타일 Select.

채팅

ChatMessageList

채팅 메시지 목록. 역할별 말풍선, 타이핑 인디케이터, 자동 스크롤.

채팅

ChatSidebar

AI 채팅 사이드바. 대화 목록, 검색, 새 대화 버튼.

네비게이션채팅

LoadingOverlay

로딩 오버레이. Spinner + 반투명 배경으로 콘텐츠 위에 로딩 상태를 표시합니다.

피드백인디케이터

DataExplorer

필터링 가능한 데이터 탐색 영역. compact SurfaceLayout 안에서 SearchCombobox + StatusSelect + DataTable을 조합.

데이터

ProjectDashboard

Vercel 스타일 프로젝트 개요 영역. DashboardGrid + DeploymentTimeline + EnvPanel 조합.

이전WorkflowRunHistory다음SqlWorkspace
ShiftEnter로 줄바꿈

opt-charts에서 차트를 어떻게 사용하나요?

오후 06:51
A

차트는 @reopt-ai/opt-charts에서 제공합니다. LineChart, BarChart, AreaChart 등을 사용할 수 있습니다. ChartContainer로 감싸면 반응형 크기 조절이 자동으로 됩니다.

오후 06:52

데이터 포맷은 어떻게 되나요?

오후 06:53
A

ChartDataPoint 인터페이스를 따릅니다. name 필드가 필수이고, 나머지는 시리즈의 dataKey에 맞춰 자유롭게 추가하면 됩니다. 예: { name: "1월", revenue: 4000, users: 2400 }

오후 06:54

기본 사용

콘텐츠 영역

이 영역 위에 로딩 오버레이가 표시됩니다.

기본 사용

상품 목록

총 7개 결과
상품명카테고리가격상태
MacBook Pro 14전자기기₩2,890,000활성
Magic Keyboard전자기기₩159,000활성
스탠딩 데스크가구₩450,000임시
에르고 체어가구₩890,000활성
모니터 암전자기기₩89,000보관
USB-C 허브전자기기₩79,000활성
책장가구₩250,000임시

기본 사용

my-awesome-app

Next.js 애플리케이션

프로젝트 통계

총 배포1,234↑ +12.5%
에러율0.23%↓ -5.2%
평균 지연시간45ms→ +2ms
가동 시간99.9%↑ +0.1%

최근 배포

환경 변수