메인 콘텐츠로 건너뛰기

O1 · O5 · O6 · O7 · O8

Shell Layout

제품 페이지 외곽 레이아웃 — Sidebar Nav(O1) + AppShellLayout(O5) + AppHeader(O6) + AppSidebar(O7) + ActiveWorldViewList(O8). AppShellLayout이 헤더 영역의 햄버거로 sidebar 토글을 소유하며, 헤더는 상단 full-width로 노출되고 sidebar는 헤더 아래에 위치한다. Sidebar Nav는 워크벤치/제품 양쪽에서 동일한 `Sidebar` 컴포넌트를 `groups` prop으로 사용한다. RE:Verse rail mode는 sidebar를 숨기지 않고 84px rail로 유지하며, 햄버거 버튼도 접힘 전후 84px 폭을 유지한다.

O5

AppShellLayout

header 상단 full-width + (sidebar | content) 하단 2열. 헤더 햄버거 클릭 시 sidebar 열고 닫기 토글 (aria-expanded 동기화). RE:Verse service shell은 collapsedSidebarMode="rail"로 접힘 상태에서도 84px sidebar rail과 84px 햄버거 버튼을 유지한다.

content slot

제품 페이지 본문이 여기에 들어갑니다. 좌상단 햄버거()로 sidebar를 열고 닫아보세요.

hamburger

expanded sidebar

rail contract

접힘 전후 nav icon x-position 유지

label은 제거하지 않고 sr-only 처리

최근 월드뷰만 profile rail 디자인으로 전환

O6

AppHeader

brand + search + actions slot · BrandLogoSlot default / loading / error / focus-visible

default
RE:Verse
search-focused
RE:Verse
prefix-mode-search
RE:Verse
one-active-overlay

O6 search slot에 mode-aware dropdown을 주입한 예시. placeholder와 별도 description/status 연결은 `HeaderSearchDropdown` 내부에서 유지한다.

A4 input contract: sr-only label + aria-describedby description/status + role=status.

CMP-001/DS-CMP-001: prefix mode search + overlay result + live region 계약 후보

desktop-search-overlay-states

closed

world-mode

focus-visible

mobile-collapsed-search-panel
RE:Verse

closed

RE:Verse
RE:Verse
brand-default
RE:Verse
brand-loading
RE:Verse
brand-error
ReRE:Verse

O7

AppSidebar

nav(O1 Sidebar Nav 주입) + activeWorldViews. 로고는 AppHeader가 담당. 폭 260px 고정 · 전체 영역이 단일 스크롤 컨테이너로 동작

RE:Verse rail mode에서는 폭 84px으로 접히며 nav label은 숨기고 activeWorldViews는 프로필 아바타 rail로 전환한다.

O8

ActiveWorldViewList

default(1+ world view) / empty(0 world view) / collapsed rail 변형. rail에서는 제목과 empty copy를 시각적으로 접고 프로필 아바타만 유지한다.

default

empty

RE:Verse 앱 보기