Side Navigation

구조는 당근 SEED Side Navigation(Apache-2.0)을 따른다 — "서비스의 최상위 메뉴 간 이동을 돕고 앱의 전체 구조를 탐색할 수 있게 하는 컴포넌트" 로, 머리(Header) · 접기 버튼(Trigger) · 내용(Content) · 묶음(Group) · 항목(Menu Item) · 하위 항목(Menu Sub Item) · 바닥(Footer). 폭 240 · 56 · 머리 64 · 항목 44 · 아이콘 20 · 이름 14 / 19 · 500 · 모서리 10 은 SEED 값 그대로다(SEED 는 rootage 없이 레시피에 px 로 둔다). 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-04 사용자 결정). 옛 Sidebar 스펙(shadcn — 256 · 48 · 항목 32)을 대신한다.

수치 원본은 side-navigation.yaml이다. 수치 표 자리([표: …])와 그림 자리([그림: …])는 사이트가 그 파일로 그린다 — GitHub 에서는 그 파일 · 그림 코드로 가는 링크로 보인다.

직접 골라 보기제목 링크 복사

창 폭(768 ~ 1279 · 1280 이상) · 손으로 접기 · 지금 화면 · 하위가 있는 항목 · 긴 이름 · 서비스(Desk · HR)를 고르면 스펙대로 그린 사이드바와 그 코드가 바뀐다. 접힌 사이드바에서 항목에 마우스를 올리면 이름 말풍선이, 하위가 있는 항목은 펼침 메뉴가 열린다.

import { CalendarDays, ClipboardList, LayoutGrid, TrendingUp, Wallet } from "lucide-react"
import {
  SideNavigation, SideNavigationContent, SideNavigationGroup, SideNavigationHeader, SideNavigationItem, SideNavigationSubItem,
} from "@/components/ui/side-navigation"

{/* 창 폭 1440 — 1280 이상은 펼침 240. 손으로 접은 상태는 localStorage(groo:side-navigation-collapsed)에 기억 */}
<SideNavigation>
  <SideNavigationHeader logo={<ServiceLogo name="그루 담다" />} />
  <SideNavigationContent>
    <SideNavigationGroup label="워크스페이스">
      <SideNavigationItem href="/desk/home" icon={<LayoutGrid />} label="홈" current={path === "/desk/home"} />
      <SideNavigationItem href="/desk/assets" icon={<Wallet />} label="자산" current={path === "/desk/assets"} />
      <SideNavigationItem icon={<TrendingUp />} label="증권">
        <SideNavigationSubItem href="/desk/stocks/namu" label="나무증권" current={path === "/desk/stocks/namu"} />
        <SideNavigationSubItem href="/desk/stocks/toss" label="토스증권" current={path === "/desk/stocks/toss"} />
      </SideNavigationItem>
      <SideNavigationItem href="/desk/ledger" icon={<ClipboardList />} label="가계부" current={path === "/desk/ledger"} />
    </SideNavigationGroup>
    <SideNavigationGroup label="기록">
      <SideNavigationItem href="/desk/calendar" icon={<CalendarDays />} label="캘린더" current={path === "/desk/calendar"} />
    </SideNavigationGroup>
  </SideNavigationContent>
</SideNavigation>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

펼침 · 접힘제목 링크 복사

1280 이상은 펼침(240)이 기본이고, 768 ~ 1279 는 아이콘만(56)으로 저절로 접힌다 — 좁은 화면에서 본문을 넓게 둔다(SEED "md: 공간 효율을 위해 Collapsed 로 자동 전환"). 머리의 접기 버튼으로 어느 폭에서나 손으로 접고 펼 수 있고, 손으로 접은 상태는 기억한다(아래 "폭으로 · 손으로"). 접히면 이름 · 묶음 이름 · 꺾쇠 · 하위 항목이 보이지 않고, 묶음 사이에 1px 선이 남는다.

펼침 · 접힘

사이드바

머리 · 접기 버튼제목 링크 복사

머리는 높이 64 · 안쪽 8 이고(머리 · 접기 버튼 · 항목 최소 44 · 아이콘은 px — 글자 크기를 따르지 않는다, 03-G 1A), 왼쪽에 서비스 마크 24 + 이름(16 / 22 · 700 — "그루 담다" · "그루 이음"), 오른쪽에 접기 버튼이다. 접기 버튼은 상자 40 · 아이콘 18(fg-neutral-subtle) · 모서리 8 이고 누르는 영역은 44 다. 접히면 로고는 숨고 접기 버튼이 56 의 가운데에 선다. 로고는 누르지 않는다 — 홈은 첫 항목이다.

머리

로고

접기 버튼

묶음 · 항목제목 링크 복사

묶음 이름은 14 / 19 · 700 · fg-neutral-muted, 묶음 사이는 8 이다. 항목은 최소 44 · 좌우 8 · 모서리 10, 아이콘 20(fg-neutral-subtle) · 아이콘 ↔ 이름 12 · 이름 14 / 19 · 500(fg-neutral-muted)이다. 이름이 길면 말줄임하지 않고 줄을 바꾼다(SEED 문서 — "말줄임(...) 처리 대신 자동 줄바꿈(Word-wrap)") — 항목이 그만큼 늘어난다. 그래도 이름은 짧게 쓴다("상품 정보 관리" 대신 "상품 관리" — SEED).

항목

항목 아이콘

항목 이름

묶음 이름

지금 항목제목 링크 복사

지금 화면의 항목은 옅은 회색 바탕(bg-neutral-weak-pressed) + 짙은 아이콘 · 이름(fg-neutral)이다. 바탕은 SEED 의 옅은 선택 바탕보다 한 단계 짙어, 다크에서도 마우스를 올린 바탕(bg-layer-default-pressed)과 갈린다(사용자 결정 2026-10-08). 굵기(500) · 크기는 바꾸지 않는다(SEED). 지금 항목에 마우스를 올리거나 눌러도 바탕은 그대로이고, 누르면 아이콘 · 이름만 줄어든다. 펼침 메뉴의 지금 화면 줄도 같은 바탕이다. 하위가 지금 화면이면 하위 항목이 지금 항목이고 부모는 저절로 펼쳐진다 — 접힌 사이드바에서는 하위가 지금인 부모가 지금 항목이다.

지금 항목

하위 항목제목 링크 복사

하위가 있는 항목(부모)은 누르면 하위 목록을 펼치고 접기만 한다 — 그 자체로 어떤 화면으로도 가지 않는다(SEED). 오른쪽 꺾쇠 16 이 접혀 있으면 아래, 펼치면 위를 가리킨다. 하위 항목은 아이콘 없이 이름만이고 부모 이름과 같은 자리(40)에서 시작한다. 하위가 없는 항목은 누르면 바로 그 화면으로 간다.

하위 항목

꺾쇠

스크롤 — 머리 아래 선 · 끝 흐림제목 링크 복사

머리 · 바닥은 고정이고 내용만 스크롤된다. 내용이 위 끝에서 떨어지면 머리 아래에 1px 선(stroke-neutral-subtle)이 생기고, 내용 아래 끝 24 는 늘 흐리다(gradient-fade-mask — 끝까지 내리면 흐림이 빈 여백 위에 놓인다). 이 흐림은 사이드바의 제 안개다(Scroll Fog 의 "부품이 제 안개를 가진 자리").

내용

머리 아래 선

끝 흐림

접혔을 때 — 말풍선 · 펼침 메뉴제목 링크 복사

접힌 사이드바에서 하위가 없는 항목에 마우스를 올리거나 키보드 초점이 오면 오른쪽에 이름 말풍선이 뜬다(Help Bubble 의 툴팁). 하위가 있는 항목은 오른쪽에 펼침 메뉴가 열려 하위 목록을 보인다 — 표면은 Menu 와 같고(bg-layer-floating · 모서리 20 · shadow-s3 · 폭 200), 맨 위에 부모 이름, 줄은 높이 44 다. 마우스를 올리면 200ms 뒤에 열리고 떠나면 100ms 뒤에 닫히며, 누르거나 Enter · Space 로도 연다. 지금 화면의 줄은 지금 항목과 같은 바탕이다. 1280 미만이어도 Menu Sheet 로 바꾸지 않는다 — 아래 "접힌 사이드바의 하위".

펼침 메뉴

펼침 메뉴의 줄

펼침 메뉴의 묶음 이름

이름 말풍선

State제목 링크 복사

상태 — 항목

상태 — 지금 항목

모션

Guidelines제목 링크 복사

폭으로 · 손으로제목 링크 복사

기본은 창 폭으로 정하고, 창 폭이 1280 을 넘나들면 다시 정한다 — 처음 열 때도 폭을 본다(SEED 코드는 넘나들 때만 본다). 손으로 접은 것은 브라우저에 기억한다(localStorage) — 서버 쿠키가 아니다.

768 미만 — 같은 항목을 다른 그릇에제목 링크 복사

768 미만에서 사이드바는 없다. Desk 웹은 앱과 같은 Bottom Navigation 이고, HR 은 Top Navigation 의 ☰ 로 여는 왼쪽 Side Panel 에 같은 묶음 · 항목을 펼친 모양으로 담는다 — 지금 화면의 묶음이 펼쳐진 채 열리고, 항목을 누르면 이동하고 닫힌다.

접힌 사이드바의 하위 — 옆 펼침 메뉴(Menu 경계의 예외)제목 링크 복사

768 ~ 1279 의 접힌 사이드바에서 하위가 있는 항목은 누른 아이콘 옆 8 에 펼침 메뉴를 띄운다 — Menu 표면 · 폭 200 · 줄 44 · 지금 화면 줄 표시. 이 폭은 Menu 가 Menu Sheet 로 바뀌는 1280 미만이지만, 사이드바의 하위 목록은 시트로 바꾸지 않는다 — Menu 의 "1280 미만은 Menu Sheet" 규칙의 예외다(사용자 결정 2026-10-08 — Menu Sheet 는 고르지 않았다). 줄을 Menu 의 39 가 아니라 44 로 두는 것은 이 폭에 터치 태블릿이 섞여서다. 마우스는 200ms 뒤 열고 100ms 뒤 닫으며, 누르거나 키보드로도 연다(Behavior).

부모는 펼치기만, 지금 화면이면 저절로제목 링크 복사

하위가 있는 항목은 이동하지 않고 펼치기만 한다 — "증권" 을 누르면 나무증권 · 토스증권이 펼쳐질 뿐이다. 하위 하나가 지금 화면이면 부모는 사용자가 손대지 않아도 펼쳐진 채다(SEED). 부모에 따로 갈 화면이 필요하면 하위 첫 줄에 둔다("전체 보기").

하위가 사람마다 다르면 — 둘 이상일 때만 부모제목 링크 복사

하위가 사용자마다 달라지는 항목(Desk 증권 — 연결한 증권사)은 하위가 둘 이상일 때만 부모다(펼치기만, 하위 = 연결한 증권사). 하나 · 없으면 하위 없는 단독 항목이 되어 누르면 바로 그 화면으로 간다 — 꺾쇠가 없다(SEED Standalone Menu — "하위 항목이 없는 경우 … 아이템 클릭 시 즉시 해당 페이지로 이동"). 증권 화면은 연결이 하나면 그 증권사를, 없으면 연결 안내를 연다. 구독이 없으면 항목을 두지 않는다(지금 그대로 — Pro 는 증권뿐). 하위 하나짜리 나무는 만들지 않는다 — 고를 것이 없다(2026-10-16 구현 세션 질문 Q-017-4 정리). 접힌 사이드바에서는 둘 이상이면 펼침 메뉴, 하나 · 없으면 이름 말풍선이다.

위치는 사이드바가 알린다제목 링크 복사

데스크톱에서 지금 어디에 있는지는 사이드바의 지금 항목(부모는 저절로 펼침)과 본문 맨 위 제목이 알린다 — 빵부스러기(Breadcrumb)는 두지 않는다(SEED 에도 없다 — 2026-10-04 결정 9). 지금 HR 의 경로 19개는 모두 사이드바 항목이라 빵부스러기가 같은 정보를 두 번 보였다. 사이드바에 없는 하위 페이지(그루 담다 밤하늘 · 증권 종목 상세 · 자산 상세, 그루 이음 공지 상세 같은)는 데스크톱(768 이상)에서 제목 줄 위에 "‹ {부모}" 글 단추를 둔다 — Button ghost small · 앞 꺾쇠 14, 누르면 적힌 부모로 간다(라벨 = 목적지). 폰(768 미만)은 상단 바의 ← 가 들어온 화면으로 돌아간다(2026-10-23 사용자 결정 Q1-A).

묶음 · 이름제목 링크 복사

• 묶음은 성격이 다른 항목을 나눌 때만 — 묶음 이름은 짧은 명사("기록" · "관리"). 회사 이름처럼 바뀌는 말을 묶음 이름으로 두지 않는다.
• 같은 이름의 묶음과 항목을 두지 않는다(묶음 "관리자" 안의 항목 "관리자").
• 항목 이름은 화면 이름과 같게 — 사이드바 "통계 · 분석" 과 화면 제목 "통계" 처럼 갈리지 않게.
• 아이콘은 모든 항목에 두고(하위 항목은 없음), lucide 선 아이콘 20 이다.

바닥 — 보조 링크만, 비면 그리지 않는다제목 링크 복사

바닥에는 보조 링크(설명서 · 문의 — SEED Footer "'가이드북', '지원센터'와 같이 서비스의 보조적인 링크")만 둔다 — 비면 그리지 않는다. 계정(아바타 · 이름)은 바닥에 두지 않는다 — Desk 는 계정이 하나라 바꿀 일이 없고 설정 · 로그아웃은 머리의 ⚙ 가 맡는다(2026-10-16 사용자 결정 — 구현 세션 질문 Q-018-1 C). 지금 Desk 웹에는 보조 링크가 없어 바닥을 그리지 않는다. 그루 이음은 예외다 — 데스크톱 머리(⚙)가 없어 바닥에 계정 줄을 두고, 누르면 메뉴(내 정보 · 비밀번호 바꾸기 · 화면 테마 · 로그아웃)가 열린다(2026-10-23 사용자 결정 H-A3 A). 누르는 것으로 보이는 줄은 반드시 무언가를 한다.