Navigation

UserSpace

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

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

인터랙티브 데모 — Full

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

사이드바 하단 영역

현재 선택된 스페이스

name: 관리자 공용

spaceName: 투자자 공간

id: 1

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

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

IconOnly 모드

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

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

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

Default / Full

Selected / Full

Default / IconOnly

Selected / IconOnly

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

SpaceSelectModal (standalone)

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

선택된 id: 1

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`	`SpaceOption[]` interface SpaceOption { id: string; name: string; spaceName: string; avatarUrl?: string; }	—	—	전달 시 클릭하면 SpaceSelectModal 팝업
`selectedSpaceId`	`string`	—	—	현재 선택된 space id
`onSpaceSelect`	`(id: string) => void`	—	—	스페이스 선택 시 콜백

Prop	Type	Required	Default	설명
`id`	`string`	✓	—	고유 식별자
`name`	`string`	✓	—	조직/유저 이름
`spaceName`	`string`	✓	—	스페이스 유형 라벨
`avatarUrl`	`string`	—	—	아바타 이미지 URL