Navigation

UserSpace

사이드바 하단의 유저 프로필 + 스페이스 전환 영역입니다. spaces prop을 전달하면 클릭 시 SelectModal 팝업이 열립니다.

import { UserSpace } from "@/shared/ui/widget/navigation"

인터랙티브 데모 — Full

UserSpace를 클릭하면 SelectModal이 열립니다. 스페이스를 선택하면 표시 내용이 바뀝니다.

사이드바 하단 영역

현재 선택된 스페이스

name: 관리자 공용

description: 투자자 공간

id: 1

UserSpace를 클릭하면 SelectModal이 열립니다.

tsx

<UserSpace
  userName="관리자 공용"
  spaceName="투자자 공간"
  spaces={spaces}
  selectedSpaceId={selectedId}
  onSpaceSelect={setSelectedId}
/>

인터랙티브 데모 — IconOnly

접힌 사이드바 상태. 아바타 클릭 시 우측 상단으로 팝업이 나타납니다.

IconOnly 모드

접힌 사이드바에서 아바타 클릭 시 팝업이 열립니다.

팝업은 우측 상단 방향으로 나타납니다.

tsx

// 접힌 사이드바 (iconOnly 모드)
<UserSpace
  userName="관리자 공용"
  spaceName="투자자 공간"
  iconOnly
  spaces={spaces}
  selectedSpaceId={selectedId}
  onSpaceSelect={setSelectedId}
/>

Variants

Figma Frame 145 · User-space 기반 4가지 variant

Default / Full

Selected / Full

Default / IconOnly

Selected / IconOnly

SelectModal (단독)

Figma SpaceSelect · SelectMenu 기반. UserSpace, SidebarItem 없이 단독으로도 사용 가능합니다.

SelectModal (standalone)

항목을 클릭해 선택 상태가 바뀌는지 확인하세요.

선택된 id: 1

Props

UserSpace

Prop	Type	Required	Default	설명
`userName`	`string`	✓	—	유저/조직 이름 (14px)
`spaceName`	`string`	✓	—	스페이스 유형 (12px, text-black-80)
`avatarUrl`	`string`	—	—	아바타 이미지. 없으면 회색 원
`isSelected`	`boolean`	—	false	선택 상태 (bg-primary-10, text-primary)
`iconOnly`	`boolean`	—	false	접힌 상태 (80×80, 아바타만 표시)
`spaces`	`SelectItem[]` interface SelectItem { id: string; name: string; description?: string; avatarUrl?: string; }	—	—	전달 시 클릭하면 SelectModal 팝업
`selectedSpaceId`	`string`	—	—	현재 선택된 space id
`onSpaceSelect`	`(id: string) => void`	—	—	스페이스 선택 시 콜백

SelectItem

Prop	Type	Required	Default	설명
`id`	`string`	✓	—	고유 식별자
`name`	`string`	✓	—	표시 이름
`description`	`string`	—	—	부가 설명 (두 번째 줄에 표시)
`avatarUrl`	`string`	—	—	아바타 이미지 URL

이전← SidebarItem 상위Sidebar →