Side Panel

구조는 당근 SEED Side Panel(Apache-2.0)을 따른다 — "화면의 측면에서 슬라이드되어 나타나며, 현재 맥락을 유지한 채 상세 정보를 확인하거나 부수적인 작업을 수행하는 레이아웃 컴포넌트" 로, 딤 · 패널 · 머리(제목 · 설명 · 닫기) · 본문 · 바닥, 크기 480 · 720 · 960 · 768 미만 80%, 높이 전체, 모서리 · 그림자 · 선 없음. 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-04 사용자 결정). 옛 Sheet 스펙(shadcn — 네 방향 · 75% · 384 · 그림자 · 선)을 대신한다 — 아래는 Bottom Sheet 가 맡고, 위에서 내려오는 패널은 걷었다.

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

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

방향(왼쪽 주 메뉴 · 오른쪽 패널) · 크기 · 설명 · 본문 길이 · 바닥 버튼을 고르면 스펙대로 그린 패널과 그 코드가 바뀐다. 실제로 열고, 끌어 닫고, 본문을 스크롤할 수 있다.

import { SidePanel, SidePanelBody, SidePanelContent } from "@/components/ui/side-panel"
import { SideNavigationContent, SideNavigationGroup, SideNavigationItem, SideNavigationSubItem } from "@/components/ui/side-navigation"

<SidePanel open={menuOpen} onOpenChange={setMenuOpen}>
  <SidePanelContent side="left" title="그루 이음" id="main-menu">
    <SidePanelBody scrollFog className="px-x4">
      {/* 사이드바와 같은 항목 — 지금 묶음은 저절로 펼쳐지고, 항목을 누르면 이동하고 닫힌다 */}
      <SideNavigationContent onNavigate={() => setMenuOpen(false)}>…</SideNavigationContent>
    </SidePanelBody>
  </SidePanelContent>
</SidePanel>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

방향제목 링크 복사

왼쪽은 내비게이션(SEED — "모바일 사이드바, 글로벌 내비게이션 메뉴"), 오른쪽은 상세 조회 · 설정 같은 보조 작업이다. 아래에서 올라오는 패널은 Bottom Sheet 이고, 위에서 내려오는 패널은 두지 않는다.

방향

크기제목 링크 복사

오른쪽 패널의 폭이다 — small 480(단순한 상세) · medium 720 (기본)(두 줄 폼 · 목록과 상세 나란히) · large 960(복잡한 설정). 어느 크기든 화면의 80% 를 넘지 않아 딤이 늘 20% 남는다. 높이는 화면 전체다.

크기

머리 · 본문 · 바닥제목 링크 복사

머리는 위 24 · 좌우 24 · 아래 16 · 최소 70, 제목 22 / 30 · 700 · 설명 16 / 22(fg-neutral-muted) · 사이 6 이다. 닫기 버튼은 투명 상자 52 · 아이콘 22(fg-neutral-subtle)이고 아이콘이 위 28 · 오른쪽 24 에 놓인다 — Dialog 의 닫기와 같다. 본문은 좌우 24 이고 넘치면 본문만 스크롤된다 — 위로 스크롤하면 머리 아래 1px 선이 생긴다. 바닥은 위 16 · 좌우 24 · 아래 24 에 Button small 36 을 오른쪽으로 모은다. 머리 위에는 위 안전 영역을, 패널 맨 아래에는 아래 안전 영역을 더한다(바닥이 없어도).

공통

본문 끝 흐림제목 링크 복사

넘칠 수 있는 본문(주 메뉴 · 목록 · 긴 폼)은 Scroll Fog 를 건다(scrollFog) — 위 20 · 아래 80 이 늘 흐리고 본문 안에 그만큼 여백을 둔다. 시트 · 대화상자와 같은 규칙이다(SEED Side Panel 의 늘 켜진 아래 48 대신). 칸 두셋처럼 늘 들어맞는 본문에는 걸지 않는다.

본문 끝 흐림

State제목 링크 복사

상태

모션

Guidelines제목 링크 복사

쓰는 자리제목 링크 복사

오른쪽 패널은 1280 이상에서만이다 — 1280 미만에서는 같은 내용을 Bottom Sheet 로 띄운다. 1280 은 Dialog 의 Responsive Dialog · Input Button 과 같은 경계다 — 768 ~ 1279 에서 오른쪽 패널을 두면 그 안의 고르기 칸은 시트로, 같은 내용의 폼은 시트로 열려 표면이 엇갈려 겹친다. 새 경계를 두지 않는다(2026-10-02 사용자 결정 1280 을 옮겼다 — 2026-10-22 사용자 결정 11B, https://claude.ai/artifact/YRPbWzhgD4EDdKsVioU8Zj). 옆에 둘 까닭은 본문을 보면서 함께 다룰 때(목록을 보며 한 줄의 상세)다 — 그렇지 않으면 Dialog 다. 지금은 오른쪽 패널을 쓰는 곳이 없다. 다른 표면과 견준 "상황 → 고를 것" 표는 DESIGN.md Components 의 "시트 · 대화상자 · 확인창 · 팝오버" 한 벌이다(3C).

주 메뉴 서랍(HR 폰)제목 링크 복사

HR 웹 768 미만의 Top Navigation ☰ 가 연다.

• 왼쪽 · 화면 폭의 80% · 제목은 서비스 이름("그루 이음").
• 본문은 Side Navigation 의 묶음 · 항목을 펼친 모양 그대로 담는다 — 본문 좌우 16 에 항목(좌우 8)이 들어와 아이콘이 제목과 같은 24 에 선다. 넘칠 수 있어 scrollFog 를 건다.
• 지금 화면의 묶음은 펼쳐진 채 열리고 지금 항목이 보인다.
• 항목을 누르면 이동하고 서랍이 닫힌다 — 다음 화면의 초점 · 스크롤은 Top Navigation 의 "화면을 옮길 때".
• 바닥에는 계정(Side Navigation 의 바닥과 같은 것)을 둔다.
• 창이 768 이상으로 넓어지면 닫힌다 — 사이드바가 그 자리를 맡는다.

입력 폼은 실수로 닫히지 않게제목 링크 복사

오른쪽 패널에 입력 폼을 띄우면 Dialog 와 같다 — 바깥(딤)을 눌러도, 끌어도 닫히지 않고, 바닥 [취소] · Esc 로 닫으며, 바뀐 값이 있으면 닫기 전에 "작성한 내용이 사라져요" 를 묻는다. 입력 폼에는 머리 닫기 버튼을 두지 않는다(닫기와 취소는 하나만). 조회 · 주 메뉴는 머리 닫기 · 딤 누르기 · Esc · 끌기로 닫힌다.

평평하게제목 링크 복사

패널은 화면 높이 전체에 붙고 모서리 · 그림자 · 테두리가 없다 — 딤과 면 색(bg-layer-floating)으로 뜬다. 패널 위에 또 패널을 겹치지 않는다 — 그 안에서는 Popover · Select 목록 · 확인창(Alert Dialog)만 뜬다(SEED 고도 — Side Panel 은 Level 2, Dialog 는 Level 3).

글제목 링크 복사

제목은 무엇을 하는 패널인지 — 주 메뉴 서랍은 서비스 이름. 설명은 덧붙일 말이 있을 때만 한 문장(해요체 · 마침표). 바닥 버튼은 동작 이름("저장") — "확인" 으로 뭉뚱그리지 않는다.

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/side-panel.tsx 를 쓴다(Radix Dialog 위 — 끌어 닫기 · 뒤로 가기 닫기는 레시피가 더한다). 아래 미리보기는 스펙 값으로 그린 모습이다.

• SidePanel — open · onOpenChange · form(바깥 누르기 · 끌기로 닫지 않는다) · dirty(닫기 전에 묻는다).
• SidePanelTrigger — asChild.
• SidePanelContent — 패널. side("left" · "right" 기본) · size("small" · "medium" 기본 · "large" — 오른쪽만) · title(필수) · description · showCloseButton(기본 true, form 이면 그리지 않는다).
• SidePanelBody — 본문. scrollFog(위 20 · 아래 80).
• SidePanelFooter — 바닥 버튼, 오른쪽 정렬.

1280 미만에서 오른쪽 패널을 Bottom Sheet 로 바꾸는 부품은 오른쪽 패널을 쓸 자리가 생길 때 Responsive Dialog 처럼 더한다.

주 메뉴 서랍 — HR 폰제목 링크 복사

import { SidePanel, SidePanelBody, SidePanelContent } from "@/components/ui/side-panel"
import { SideNavigationContent, SideNavigationGroup, SideNavigationItem, SideNavigationSubItem } from "@/components/ui/side-navigation"

<SidePanel open={menuOpen} onOpenChange={setMenuOpen}>
  <SidePanelContent side="left" title="그루 이음" id="main-menu">
    <SidePanelBody scrollFog className="px-x4">
      {/* 사이드바와 같은 항목 — 지금 묶음은 저절로 펼쳐지고, 항목을 누르면 이동하고 닫힌다 */}
      <SideNavigationContent onNavigate={() => setMenuOpen(false)}>
        <SideNavigationGroup label="근무">
          <SideNavigationItem href="/calendar" icon={<CalendarDays />} label="캘린더" current={path === "/calendar"} />
          <SideNavigationItem icon={<Plane />} label="휴가">
            <SideNavigationSubItem href="/vacation/history" label="휴가 현황" current={path === "/vacation/history"} />
            <SideNavigationSubItem href="/vacation/application" label="휴가 신청" current={path === "/vacation/application"} />
          </SideNavigationItem>
        </SideNavigationGroup>
      </SideNavigationContent>
    </SidePanelBody>
  </SidePanelContent>
</SidePanel>

오른쪽 패널 — 1280 이상(쓰는 곳 없음)제목 링크 복사

<SidePanel open={open} onOpenChange={setOpen} form dirty={isDirty}>
  <SidePanelContent side="right" size="medium" title="알림 설정">
    <SidePanelBody>…</SidePanelBody>
    <SidePanelFooter>
      <Button variant="neutralWeak" size="small" onClick={() => setOpen(false)}>취소</Button>
      <Button size="small" onClick={save}>저장</Button>
    </SidePanelFooter>
  </SidePanelContent>
</SidePanel>

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 왼쪽은 768 미만의 주 메뉴, 오른쪽은 1280 이상의 보조 작업 — 1280 미만은 Bottom Sheet.
• 평평하게 — 높이 전체 · 모서리 · 그림자 · 선 없음.
• 주 메뉴는 지금 묶음을 펼친 채 열고, 이동하면 닫는다.
• 입력 폼은 바깥 · 끌기로 닫지 않고, 바뀐 값이 있으면 묻는다.

❌ Don't제목 링크 복사

• 아래 · 위에서 나오는 패널(아래는 Bottom Sheet).
• 1280 미만에서 오른쪽 패널.
• 이동한 뒤에도 열려 있는 서랍 · 지금 묶음이 접힌 채 여는 서랍.
• 패널 위에 패널 · 그림자 · 둥근 모서리.
• 영어 이름("Sidebar" · "Close").

Specification제목 링크 복사

side-panel.yaml 의 규칙을 하나도 빼지 않고 조건마다 그린다 — 웹이 Side Panel 을 만들 때 이 값을 그대로 쓴다. 조건이 없는 Base 가 모든 조합에 걸리고, 뒤의 규칙이 앞의 같은 값을 덮는다. 상태는 enabled 에서 바뀌는 값만 적었다.

SEED 와 다른 점제목 링크 복사

• 딤은 groo 0.50 · 다크 0.65(v102) — SEED 0.455.
• 본문 끝 흐림은 Scroll Fog(2026-10-03) — 넘칠 수 있는 본문에 늘 켜진 위 20 · 아래 80. SEED Side Panel 은 본문 아래 48 을 늘 흐린다.
• 반투명 색을 불투명 짝으로(v102) — 머리 아래 선 stroke-neutral-subtle, 닫기 버튼 누름 bg-layer-floating-pressed.
• 1280 미만의 오른쪽 패널은 Bottom Sheet — SEED Responsive Side Panel 은 md(768)에서 바꾼다. groo 는 Responsive Dialog · Input Button 과 같은 1280 이다.
• 기본 크기는 medium 720 — SEED React · CSS 와 같다(rootage JSON 기본은 small).
• 가로 화면의 노치 — SEED 문서는 "패널 너비에 safe-area-inset을 더합니다", 코드는 폭 안에서 뺀다. groo 는 문서를 따른다(내용 폭이 줄지 않게).
• 입력 폼은 바깥 · 끌기로 닫지 않는다 — Dialog · Bottom Sheet 와 같은 groo 규칙(2026-10-02). SEED 는 모든 패널이 바깥 누르기 · 가로 끌기(25%)로 닫힌다.
• 모션 줄이기면 150ms 서서히 나타남(v104) — SEED 는 300ms 미끄러짐 그대로.
• Persistent(비모달) 패널은 보류 — SEED 는 Backdrop 없이 배경과 함께 다루는 Persistent Type 을 둔다(md 미만은 Modal). groo 는 지금 쓸 자리가 없어 두지 않았고, 생기면 그때 정한다 — 데스크톱 필터 · 목록 옆 상세(dialog.md "앱 적용 때 정할 자리")가 후보다(2026-10-22 사용자 결정 11B — https://claude.ai/artifact/YRPbWzhgD4EDdKsVioU8Zj).
• z-index 는 specs/z-index.md 의 L2(딤 z-modal 100 · 패널 z-modal-content 101).

Migration notes제목 링크 복사

2026-10-22 — 이동 부품 표 링크제목 링크 복사

머리말에 DESIGN.md Layout 의 "이동 부품 고르기" 링크를 더했다(6B — https://claude.ai/artifact/Mag1tEv51MdQHdy1o8hY3L). 값 변경 없음.

2026-10-22 — 1280 의 까닭 · Persistent 는 보류제목 링크 복사

"쓰는 자리" 표 아래에 1280 의 까닭(Responsive Dialog · Input Button 과 같은 경계 — 768 ~ 1279 에서 표면이 엇갈리지 않게)을 적었다. "Persistent 는 두지 않는다" 는 묻지 않고 들어간 문장이라 "지금은 쓸 자리가 없다 — 생기면 그때 정한다" 로 바꿨다(사용자 결정 11B — https://claude.ai/artifact/YRPbWzhgD4EDdKsVioU8Zj). 값 변경 없음.

2026-10-04 — SEED Side Panel 로 새로 둔다(옛 Sheet 를 대신)제목 링크 복사

사용자가 화면 틀 · 이동 비교 페이지의 "따라오는 것" 으로 정했다 — Sheet 를 Side Panel 로: 왼쪽 · 오른쪽만(아래는 Bottom Sheet, 위는 걷음), 480 · 720 · 960 · 768 미만 80%, 평평(모서리 · 그림자 없음), 머리 24 · 제목 22 / 30 · 닫기 상자 52 · 아이콘 22. 지금 쓰는 곳은 HR 폰 메뉴 서랍(왼쪽) 하나 — 이동하면 닫고, 지금 묶음을 펼친 채 연다. 2026-10-02 Bottom Sheet 의 "오른쪽에서 나오는 패널은 Side Panel 차례에 정한다" 가 이것이다. 옛 Sheet(shadcn — 네 방향 · 폭 75% · 최대 384 · shadow-xl · 가장자리 1px 선 · 제목 18 / 600 · 닫기 28)는 걷었다 — 옛 스펙은 sheet.history/v-pre-seed-nav.*.

제품은 앱 적용 단계에서 옮긴다(2026-10-04 조사).

• HR 폰 메뉴 서랍 — shadcn Sheet 왼쪽 288(80%) · #FAFAFA. 이름이 "Sidebar" · 설명 "Displays the mobile sidebar."(영어), 열면 지금 화면의 묶음도 접혀 있고(treeView.tsx:263-265 — 펼침 초기값은 첫 마운트에만), 잎을 눌러 이동해도 서랍이 열린 채 남는다(SidebarContent.tsx:101-108 · shared/ui/shadcn/sidebar.tsx:198-201, F12). Side Panel(왼쪽) + Side Navigation 항목으로.
• Desk 웹 — 모바일 사이드바 시트는 닿지 않는 코드다(768 미만은 하단 탭 바 — F27). 옆 패널을 쓰는 화면이 없다.
• HR 나눔 패널 4(회사 · 부서 · 역할 · 사용자 — Resizable 25 / 75, CompanyContent.tsx:116-140 외)은 화면 안의 나눔이지 Side Panel 이 아니다 — Resizable(2026-10-10 — 목록 20 ~ 40%).
• 앱 적용 때 정할 자리 — HR 전체 화면 Dialog 3(페이지 · 시트 · 오른쪽 Side Panel — dialog.md), 데스크톱 필터(Dialog · Popover · 오른쪽 Side Panel).