reopt designreopt design
DocsExploreToolsPricingBuilder
로그인
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
reopt designreopt design

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

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

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/brandapp-ui/Reopt User Menu
User Menubrandapp-ui 예제

Reopt User Menu

세션 상태에 따라 Avatar + Dropdown(로그아웃) 또는 로그인 버튼을 렌더하는 사용자 메뉴. 로딩/비로그인/로그인 3-state 를 자동 분기합니다.

authsessiondropdownavatar
opt surface add reopt-user-menu
ReoptUserMenu
1024px
상태
Preview

로딩

authClient.useSession()의 isPending 단계. SkeletonAvatar로 placeholder 표시.

비로그인

session === null. 그라디언트 로그인 버튼 클릭 시 signInWithReopt 호출.

로그인

Avatar + Dropdown. 메뉴 내 user.name / user.email 표시 + destructive 로그아웃.

실제 Surface는 authClient.useSession() 반환값으로 상태를 자동 판단합니다. 이 데모는 상태를 수동 토글로 시연합니다.

관련 예제

brandapp-ui

Session Expired Dialog

brandapp-ui - Session Modal

Examples
SessionExpiredDialog
brandapp-ui

Sign In Gate

brandapp-ui - Auth Gate

Examples
SignInGate
brandapp-ui

BrandApp Control Center

brandapp-ui - Control

Examples
createReoptEavClientcreateReoptTermsClient
이전Sign In With Reopt Button다음Sign In Gate