Menu Sheet

구조는 당근 SEED Swipeable Menu Sheet(Apache-2.0)를 따른다 — 딤 · 시트 · 손잡이 · 머리(제목 · 설명) · 묶음 · 줄. 딤 · 끌어내리기 · 안전 영역 · 모션은 Bottom Sheet 와 같고, 다른 것은 손잡이가 늘 있고 위 닫기 버튼이 없다는 것이다. 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-02 사용자 결정).

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

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

아이콘 · 머리 · 묶음 수 · 줄 설명 · 위험한 동작 · 막힌 줄을 고르면 스펙대로 그린 시트와 그 코드가 바뀐다. 실제로 열고, 끌어내리고, 눌러 닫을 수 있다.

import {
  MenuSheet, MenuSheetContent, MenuSheetGroup, MenuSheetItem, MenuSheetTrigger,
} from "@/components/ui/menu-sheet"

<MenuSheet>
  <MenuSheetTrigger asChild>
    <Button variant="ghost" layout="iconOnly" aria-label="주간 회의 메모 더보기">
      <EllipsisVertical />
    </Button>
  </MenuSheetTrigger>
  <MenuSheetContent title="주간 회의 메모">
    <MenuSheetGroup>
      <MenuSheetItem icon={<Pin />} label="고정" onSelect={pin} />
      <MenuSheetItem icon={<Pencil />} label="수정" onSelect={edit} />
      <MenuSheetItem icon={<Copy />} label="복사해 새로 쓰기" onSelect={duplicate} />
    </MenuSheetGroup>
    <MenuSheetGroup>
      <MenuSheetItem icon={<Trash2 />} label="삭제" tone="critical" onSelect={askDelete} />
    </MenuSheetGroup>
  </MenuSheetContent>
</MenuSheet>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

머리 · 묶음 · 줄제목 링크 복사

시트는 위 24(손잡이 자리) · 좌우 화면 여백 24 · 아래 16 + 안전 영역이다. 머리는 가운데 정렬 — 제목 18 / 24 · 700, 설명 14 / 19, 그 아래 16. 묶음은 옅은 회색 상자(모서리 16)이고 묶음 사이는 10 이다. 줄은 최소 52 · 위아래 14 · 좌우 16 이고 이름 16 / 22, 아이콘 22, 아이콘 ↔ 이름 14 다.

공통

Layout제목 링크 복사

아이콘을 쓰면(textWithIcon) 글은 왼쪽 정렬이고, 아이콘 없이 글만 쓰면(textOnly) 가운데 정렬이다 — 그때는 줄 설명을 두지 않는다. 한 시트에서 둘을 섞지 않는다.

정렬

Tone제목 링크 복사

되돌릴 수 없는 동작(삭제 · 나가기)은 critical — 이름과 아이콘만 빨갛고 설명은 그대로다. 맨 아래 묶음에 따로 둔다. 마우스를 올리거나 누르는 동안은 이름 · 아이콘을 한 단계 짙은 fg-critical-contrast 로 바꾼다 — 누름 바탕 위에서 fg-critical 은 라이트 4.39 · 다크 3.91 로 4.5:1 에 못 미친다.

위험한 동작

State제목 링크 복사

줄 바탕은 묶음 폭 전체에 칠한다 — Menu 의 알약처럼 들어오며 둥글어지지 않고 색만 150ms 로 바뀐다(SEED menu-sheet-item 에는 marginX 가 없다. Menu 의 들임 모션은 2026-10-15 구현 세션 질문 Q-009-3 에서 정했다 — 1280 에서 Menu 로 바뀌면 알약이 들어온다).

상태

모션

Guidelines제목 링크 복사

1280 미만의 동작 목록제목 링크 복사

Menu 와 같은 목록을 1280 미만에서 시트로 띄운다 — 손가락으로 누르기 좋은 줄 52 에, 화면 아래라 엄지가 닿는다. 코드는 ResponsiveMenu 하나로 짜면 폭을 보고 둘 중 하나를 그린다. 입력 · 고르기 · 상세처럼 실행이 아닌 일은 Bottom Sheet 다.

들어간 화면 · 표 줄의 동작은 1280 미만 Menu Sheet · 이상 Menu 다(목록 줄에는 ⋮ 를 두지 않는다). 다른 일(입력 폼 · 상세 · 고르기 · 되돌릴 수 없는 확인)에 어느 떠 있는 표면을 쓸지는 DESIGN.md Components 의 "시트 · 대화상자 · 확인창 · 팝오버" 표 한 벌이 정한다(2026-10-22 사용자 결정 3C — https://claude.ai/artifact/YRPbWzhgD4EDdKsVioU8Zj).

예외 — 접힌 사이드바(768 ~ 1279)의 하위 목록은 이 시트가 아니라 누른 아이콘 옆 펼침 메뉴다(Side Navigation — 사용자 결정 2026-10-08).

Alert Dialog 와 견주기제목 링크 복사

SEED Alert Dialog 문서의 "Alert Dialog vs. Menu Sheet" 여섯 줄에 groo 의 "함께 쓰기" 한 줄을 더했다(2026-10-22 사용자 결정 2B — https://claude.ai/artifact/YRPbWzhgD4EDdKsVioU8Zj).

스와이프의 대신 길제목 링크 복사

폰 목록의 줄은 밀어서 동작을 꺼내는 스와이프를 지름길로 둔다. 대신 길은 줄 누르기다 — 줄을 누르면 한 단계 들어가고, 들어간 화면에 같은 동작이 다 있다. 동작이 여럿이면 머리 ⋮ 가 이 시트를 띄우고, 하나(삭제)면 바닥 왼쪽 [삭제] 다. 키보드 · 스크린리더 · 미는 법을 모르는 사람이 가는 길이다. 시트의 줄은 트레이와 같은 동작 · 같은 이름이고, 확인도 같은 Alert Dialog 를 띄운다. 줄 끝 ⋮ 는 두지 않는다(2026-10-25 — Menu 의 "줄의 동작").

묶음 · 아이콘 · 설명제목 링크 복사

• 묶음은 줄이 3개 이상일 때부터 — 최대 3묶음, 모든 묶음이 하나씩이면 안 된다 — 적어도 한 묶음은 둘 이상이다(SEED "적어도 하나의 그룹은 2개 이상의 아이템을 포함해야 합니다"). 줄이 적으면 하나씩 따로 두지 말고 한 묶음으로.
• 아이콘은 모든 줄에 두거나 모두 뺀다 — 이름만으로 모자랄 때만 쓴다.
• 줄 설명은 이름이 추상적이라 잘못 누를 수 있을 때만.
• 스크롤이 생기지 않게 묶음 · 줄 수를 줄인다.

글제목 링크 복사

제목은 무엇의 동작인지 — 줄 이름("주간 회의 메모")이나 화면 이름. 설명만 두지 않는다. 줄 이름은 Menu 와 같다(동사로 짧게, 2 ~ 6자).

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/menu-sheet.tsx 를 쓴다(vaul 위 — Bottom Sheet 와 같은 바탕). 들어간 화면 머리의 ⋮ 는 Menu 의 ResponsiveMenu 로 짜면 1280 미만에서 이 시트를 그린다. 늘 시트인 자리(폰 전용 화면의 머리 더보기)만 MenuSheet 를 바로 쓴다. 아래 미리보기는 스펙 값으로 그린 모습이다.

머리 더보기 — 늘 시트제목 링크 복사

import { MenuSheet, MenuSheetContent, MenuSheetGroup, MenuSheetItem, MenuSheetTrigger } from "@/components/ui/menu-sheet"

<MenuSheet>
  <MenuSheetTrigger asChild>
    <Button variant="ghost" layout="iconOnly" aria-label="메모 더보기">
      <EllipsisVertical />
    </Button>
  </MenuSheetTrigger>
  <MenuSheetContent title="메모">
    <MenuSheetGroup>
      <MenuSheetItem icon={<FolderInput />} label="가져오기" onSelect={importMemos} />
      <MenuSheetItem icon={<FolderOutput />} label="내보내기" onSelect={exportMemos} />
      <MenuSheetItem icon={<ArrowDownUp />} label="정렬 바꾸기" onSelect={openSort} />
    </MenuSheetGroup>
  </MenuSheetContent>
</MenuSheet>

글만 — 가운데 정렬제목 링크 복사

<MenuSheetContent title="사진" layout="textOnly">
  <MenuSheetGroup>
    <MenuSheetItem label="앨범에서 고르기" onSelect={pickFromAlbum} />
    <MenuSheetItem label="사진 찍기" onSelect={takePhoto} />
  </MenuSheetGroup>
  <MenuSheetGroup>
    <MenuSheetItem label="사진 지우기" tone="critical" onSelect={askRemovePhoto} />
  </MenuSheetGroup>
</MenuSheetContent>

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 1280 미만의 화면 동작을 시트로 — 1280 이상은 같은 목록을 Menu 로.
• 스와이프가 있는 목록은 줄을 누르면 들어간 화면에 같은 동작을 다 둔다(여럿이면 머리 ⋮ → 시트).
• 위험한 동작은 맨 아래 묶음에 critical 로.
• 묶음은 줄이 3개 이상일 때부터, 최대 3묶음.

❌ Don't제목 링크 복사

• 입력 · 고르기 · 상세를 메뉴 시트로(Bottom Sheet).
• 아이콘 줄과 글만 줄을 한 시트에 섞기.
• 위 닫기 버튼 · 바닥 취소 버튼 — 딤 · 끌기 · 뒤로 가기로 닫는다.
• 스크롤이 생길 만큼 긴 목록.
• 좁은 목록 줄 끝마다 ⋮ 를 두고 이 시트를 열기 — 줄은 누르면 들어간다(Menu 의 "줄의 동작").

Specification제목 링크 복사

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

SEED 와 다른 점제목 링크 복사

• 좌우 여백은 화면 여백 24 — SEED 16(Bottom Sheet 와 같다).
• 딤은 groo 0.50 · 다크 0.65(v102) — SEED 0.455.
• 줄 사이 선은 stroke-neutral-weak — SEED stroke.neutral-muted 는 투명도가 있고, 그 자리의 불투명한 짝 중 stroke-neutral-subtle 은 다크에서 묶음 바탕과 같은 색이라 선이 사라진다.
• 줄을 누르면 시트가 닫힌다 — SEED 코드는 닫지 않고 쓰는 쪽이 닫는다. groo 는 Menu 와 같게 닫고 실행한다(1280 에서 바뀌어도 같은 동작).
• 막힌 줄을 둔다 — SEED 는 Figma 에만 있고 코드 · 색이 없다. Menu 와 같은 규칙(전용 색 · 누르지 못함)으로 채운다 — 1280 에서 Menu 와 바뀌어도 같은 줄이 막혀 있어야 한다.
• 보조 기술용 닫기는 키보드 초점이 오면 보인다 — SEED 는 안 보이는 채로 Tab 이 선다(기초의 "초점은 늘 보인다").
• 보이는 닫기 버튼은 두지 않는다 — SEED React 기본과 같다 — SEED Swipeable Menu Sheet 의 showCloseButton 기본값(false)은 "스크린 리더 사용자를 위한 시각적으로 숨겨진 닫기 버튼" 이다. 디자인 문서 Anatomy 의 Close Button 은 이렇게 숨긴 채 보조 기술 · 키보드에만 둔다 — 끌기 · 딤 · 뒤로 가기로 닫히는 시트라 보이는 버튼을 더할 까닭이 없다(2026-10-22 사용자 결정 12B — https://claude.ai/artifact/YRPbWzhgD4EDdKsVioU8Zj).
• 트리거에 aria-haspopup="dialog" · aria-expanded — SEED 는 문서에 적고 실제로는 붙이지 않는다.
• z-index 는 specs/z-index.md 의 L2(딤 z-modal 100 · 시트 z-modal-content 101).

Migration notes제목 링크 복사

2026-10-25 — 좁은 목록 줄에서 ⋮ 를 걷는다제목 링크 복사

사용자 결정 — 목록 줄에는 줄 끝 ⋮ 를 두지 않고, 줄을 누르면 들어간 화면에서 동작을 고른다(여럿이면 머리 ⋮ → 이 시트, 하나면 바닥 왼쪽 [삭제]). 아래 2026-10-02 의 "같은 동작을 ⋮ → Menu Sheet 로도" 는 목록 줄에서 걷었고, 스와이프의 대신 길은 줄 누르기 → 들어간 화면이 맡는다(2026-10-02 조사가 적은 Desk 웹의 지금 길과 같다). 규칙 전문 · 경계(데스크톱 표 줄 · 알림 목록 줄)는 Menu 의 같은 날 Migration notes. 사이트 그림 hero · 해부 · 1280 · swipe-guide · 플레이그라운드의 뒤 화면을 메모 목록(줄 끝 ⋮)에서 메모 화면(머리 ⋮)으로 다시 그렸고, 레시피 예제 · 미리보기도 같게 바꿨다(예제 "줄의 ⋮" → "들어간 화면 머리 ⋮"). 값 변경 없음.

2026-10-22 — 적어도 한 묶음은 둘 이상제목 링크 복사

"한 묶음에는 2개 이상(위험한 동작 묶음은 하나여도 된다)" 은 SEED 원문("적어도 하나의 그룹은 2개 이상")과 다르게 옮겨진 문장이었다 — SEED 대로 "모든 묶음이 하나씩이면 안 된다 — 적어도 한 묶음은 둘 이상" 으로 고쳤다. 위험한 동작 묶음의 예외가 따로 필요 없어진다(남은 규칙 R13). 사이트 그림 group-guide 의 "묶음이 넷" 꼬리표도 같이. 사용자 결정 — https://claude.ai/artifact/Mag1tEv51MdQHdy1o8hY3L. 값 변경 없음.

2026-10-22 — Alert Dialog 와 견주는 표 · 닫기 버튼제목 링크 복사

SEED 의 "Alert Dialog vs. Menu Sheet" 표를 groo 값으로 두고 "함께 쓰기"(삭제는 시트가 닫힌 뒤 확인창)를 더했다(2B). "이런 일 → 1280 미만 · 이상" 표는 DESIGN.md 의 큰 표 한 벌로 보냈다(3C). 보이는 닫기 버튼을 두지 않는 것이 SEED React 기본과 같다는 줄을 "SEED 와 다른 점" 에 적었다(12B) — 사용자 결정 https://claude.ai/artifact/YRPbWzhgD4EDdKsVioU8Zj. 값 변경 없음.

2026-10-02 — SEED Menu Sheet 로 새로 둔다제목 링크 복사

사용자가 비교 페이지에서 정했다 — 1280 미만의 줄 동작은 Menu Sheet(SEED 모양 — 위 20 · 손잡이 · 제목 18 가운데 · 묶음 16 · 줄 52), 폰 스와이프는 지름길로 남기고 같은 동작을 ⋮ → Menu Sheet 로도. 전에는 1280 미만에 메뉴 시트가 없었다.

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

• Desk 웹 — 모바일 줄 동작은 스와이프 트레이 11곳뿐이다. 닫힌 트레이는 보조 기술에서 숨겨져 있고 여는 키가 없다 — 키보드 · 스크린리더는 줄을 눌러 상세 화면에서 같은 동작을 찾는다(→ 줄 끝 ⋮ + Menu Sheet). 열린 트레이를 Esc 로 닫으면 초점이 숨겨진 삭제 버튼에 남는다.
• Desk 앱 — 스와이프 12곳, 스크린리더용 동작(custom semantics action) 0 이라 TalkBack 으로 열 수 없다(→ ⋮ + Menu Sheet). 캘린더 공유 멤버 ⋮ 는 드롭다운 메뉴(→ Menu Sheet).
• HR 웹 — 모바일 줄 동작이 없다(데스크톱 행 ⋮ 를 폰에서도 그대로).