Surface 카탈로그
현재 brandapp-ui Surface를 인증, AI, 데이터/운영으로 나누고 어떤 상황에서 무엇을 복사할지 정리합니다.
reopt designUpdated
1. 선택 기준
| 필요한 것 | Surface | 설계 메모 |
|---|---|---|
| 헤더에 로그인/사용자 메뉴 | ReoptUserMenu | 비로그인 상태에서는 로그인 버튼, 로그인 상태에서는 Avatar dropdown을 보여줍니다. |
| 특정 페이지 보호 | SignInGate | children, fallback, loadingFallback으로 protected content 흐름을 통제합니다. |
| 전역 세션 만료 처리 | SessionExpiredDialog | 401 fetch helper가 reopt:session-expired event를 dispatch하도록 맞춥니다. |
| BrandApp 크레딧 기반 채팅 | ReoptAiChat | AI SDK streamText route, model/agent/credit proxy와 함께 씁니다. |
| 이미지 생성 도구 | ReoptAiImageStudio | generateImage POST route와 image models GET route를 서버에 둡니다. |
| EAV 레코드 조회 | ReoptRecordTable | recordsEndpoint가 EAV list 응답을 array, data, records shape 중 하나로 반환해야 합니다. |
2. Surface 목록
Auth & session
Reopt OAuth 로그인, 세션 메뉴, 보호 화면, 세션 만료 재인증 UI
SignInWithReoptButton
authClient.signIn.oauth2()를 감싼 단일 CTA. ReoptSignInError code를 토스트 copy로 매핑하고 retry/help action을 제공합니다.
opt surface add sign-in-with-reopt-buttonReoptUserMenu
authClient.useSession() 상태에 따라 SkeletonAvatar, 로그인 버튼, Avatar + Dropdown 로그아웃 메뉴를 분기합니다.
opt surface add reopt-user-menuSignInGate
보호된 화면을 children으로 감싸고 pending, signed-out, signed-in 상태를 분기합니다. fallback/loadingFallback으로 제품별 UI를 덮어쓸 수 있습니다.
opt surface add sign-in-gateSessionExpiredDialog
세션 truthy to falsy 전이 또는 reopt:session-expired window event를 받아 전역 재로그인 dialog를 엽니다.
opt surface add session-expired-dialogAI surfaces
brandapp-sdk AI credit, model/agent list, typed error를 opt-chat과 opt-ui로 렌더
ReoptAiChat
opt-chat useChatSession과 DefaultChatTransport를 쓰는 풀스택 채팅 UI. modelsEndpoint, agentsEndpoint, creditsEndpoint를 선택적으로 연결합니다.
opt surface add reopt-ai-chatReoptAiImageStudio
sdk.ai.generateImage 결과 URL을 렌더하는 text-to-image studio. image model selector, aspect ratio, style, recent history를 제공합니다.
opt surface add reopt-ai-image-studioData & operations
EAV 레코드 탐색과 BrandApp 운영 콘솔을 위한 copy-paste 출발점
ReoptRecordTable
서버 EAV proxy endpoint를 fetch해 opt-ui DataTable로 렌더합니다. columns 미지정 시 values key를 기준으로 자동 추론합니다.
opt surface add reopt-record-tableBrandApp Control Center
SDK verifier, auth health, secret rotation, EAV drift, AI credit guard, webhook replay, terms publication을 묶은 운영 콘솔형 예제입니다.
opt surface add sign-in-gate reopt-ai-chat reopt-record-table3. 한 번에 복사
초기 프로토타입에서는 아래처럼 전체 세트를 복사한 뒤 필요 없는 Surface를 제거해도 됩니다. 운영 코드에서는 필요한 Surface만 선택하는 편이 review하기 쉽습니다.
opt surface add sign-in-with-reopt-button reopt-user-menu
opt surface add sign-in-gate session-expired-dialog
opt surface add reopt-ai-chat reopt-ai-image-studio reopt-record-table