User Menu
사용자용 컴포넌트서비스를 쓰는 일반 사용자가 보는 화면에 쓰입니다.
로그인한 사용자가 자기 계정을 다루는 아바타 드롭다운 메뉴입니다.
로그인한 사용자가 자기 계정을 다루는 메뉴입니다. 헤더 오른쪽 위에 아바타 버튼으로 놓고, 누르면 내 정보 확인, 페이지 이동, 로그아웃을 할 수 있는 드롭다운이 열립니다. 로그인 전에는 보이지 않고, 대신 로그인·회원가입 버튼을 보여 주는 것이 일반적입니다.
Preview
아래 버튼을 눌러 보세요. 관리자(MASTER)와 일반 사용자는 메뉴 항목이 다릅니다.
관리자 (MASTER)
일반 사용자 (WRITER)
tsx
<UserMenu user={user} onLogout={() => logout.mutate()} />What users can do
| 메뉴 영역 | 누가 보나 | 할 수 있는 것 |
|---|---|---|
| 아바타 버튼 | 로그인한 모든 사용자 | 누르면 메뉴가 열리고, 한 번 더 누르거나 바깥을 누르면 닫힙니다. |
| 프로필 머리말 | 로그인한 모든 사용자 | 내 이름, 이메일, 역할 배지를 한눈에 확인합니다. |
| 내 정보 | 로그인한 모든 사용자 | /me 화면으로 이동해 내 계정 정보를 봅니다. |
| 멤버 관리 | MASTER만 | /admin/members로 이동해 유저 목록, 역할 변경, 탈퇴 처리를 합니다. |
| 바로가기 | 내가 추가한 항목 | 내 서비스의 화면으로 이동합니다. (items로 추가) |
| 로그아웃 | 로그인한 모든 사용자 | 세션을 끝내고 로그인 전 상태로 돌아갑니다. |
"멤버 관리" 항목은 편의를 위해 숨기는 것입니다. 실제 접근 제어는
RequireRole과 서버가 합니다.When it appears
로그인 여부에 따라 헤더의 오른쪽을 바꿔 줍니다. 로그인 전에는 모달을 여는 버튼, 후에는 이 메뉴입니다.
tsx
const { user, isAuthenticated } = useAuth();
const logout = useLogout();
const openDialog = useAuthDialog((s) => s.openDialog);
{isAuthenticated && user ? (
<UserMenu user={user} onLogout={() => logout.mutate()} />
) : (
<>
<Button variant="ghost" onClick={() => openDialog("login")}>로그인</Button>
<Button onClick={() => openDialog("signup")}>회원가입</Button>
</>
)}Customization
메뉴에 바로가기 추가
items에 링크를 넘기면 "바로가기" 영역에 나타납니다.
tsx
<UserMenu
user={user}
onLogout={logout}
items={[
{ label: "내 리포트", href: "/reports" },
{ label: "설정", href: "/settings" },
]}
/>아바타만 보여 주기
좁은 헤더에서는 이름을 숨길 수 있습니다.
tsx
<UserMenu user={user} onLogout={logout} showName={false} />기본 항목 바꾸기
- "내 정보", "멤버 관리", "로그아웃" 같은 기본 항목은
UserMenu.tsx에서 직접 고칩니다. - 이동 경로는
meerkitConfig.routes에 모여 있어 한 곳에서 바꿀 수 있습니다. - 프로필 이미지는
User.avatar_url을 채우면 아바타에 나타납니다 (User Avatar 참고). - 색과 모서리는 Theming의 토큰을 따릅니다.
Accessibility
- 아바타 버튼에
aria-label="계정 메뉴"가 있습니다. - 키보드:
Enter/Space로 열고, 방향키로 이동하고,Esc로 닫습니다. (Radix Dropdown Menu 기본 동작) - 닫으면 포커스가 아바타 버튼으로 돌아옵니다.
Props
| Prop | Type | 설명 |
|---|---|---|
user필수 | User | 표시할 로그인 사용자. role.name으로 관리자 여부를 판단합니다. |
onLogout필수 | () => void | 로그아웃을 눌렀을 때 호출합니다. 보통 useLogout().mutate |
items | { label, href, icon? }[] | 기본 메뉴 아래에 추가할 바로가기. |
showName | boolean | false면 아바타만 보여 줍니다. 기본 true. |
align | "start" | "center" | "end" | 메뉴가 열리는 정렬. 기본 end(오른쪽 맞춤). |
Related
UserAvatar: 메뉴 안팎에서 쓰는 아바타useLogout: 로그아웃 처리 (Hooks & State)RequireRole: 관리자 화면 접근 제어 (Route Guards)
Related API
이 컴포넌트가 호출하는 API입니다. 누르면 요청·응답 명세로 이동합니다.