Dialog

구조는 당근 SEED Dialog · Responsive Dialog(Apache-2.0)를 따른다 — 딤 · 대화상자 · 머리(제목 · 설명 · 닫기) · 본문 · 바닥, 본문만 스크롤. 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다(2026-10-02 사용자 결정).

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

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

크기 · 쓰임(입력 폼 · 조회) · 설명 · 본문 길이 · 창 폭(1280 위 · 아래)을 고르면 스펙대로 그린 대화상자(1280 미만이면 시트)와 그 코드가 바뀐다. 실제로 열고 닫고 본문을 스크롤할 수 있다.

import { Button } from "@/components/ui/button"
import { ResponsiveDialog, ResponsiveDialogBody, ResponsiveDialogCancel, ResponsiveDialogContent, ResponsiveDialogFooter } from "@/components/ui/dialog"

{/* form — 바깥 누르기 · 끌어내리기로 닫지 않는다. dirty — 닫기 전에 "작성한 내용이 사라져요" 를 묻는다 */}
<ResponsiveDialog open={open} onOpenChange={setOpen} form dirty={isDirty}>
  <ResponsiveDialogContent title="휴가 신청" description="승인되면 알려드려요.">
    <ResponsiveDialogBody>
      <Field label="사유">…</Field>
      <Field label="연락처">…</Field>
    </ResponsiveDialogBody>
    <ResponsiveDialogFooter>
      {/* 1280 이상에서만 그린다 — 시트에서는 위 닫기 버튼이 맡는다 */}
      <ResponsiveDialogCancel>취소</ResponsiveDialogCancel>
      <Button onClick={submit}>신청</Button>
    </ResponsiveDialogFooter>
  </ResponsiveDialogContent>
</ResponsiveDialog>

Anatomy제목 링크 복사

부위

Properties제목 링크 복사

Size제목 링크 복사

medium 480 (기본) — 일반 입력 폼 · 상세, large 800 — 복잡한 설정 · 많은 조회. 높이는 내용만큼이고 화면 높이의 80% 를 넘지 않는다. 넘치는 만큼 본문이 스크롤된다.

크기

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

머리는 위 24 · 좌우 24 · 아래 16, 제목 22 / 30 · 700 · 설명 16 / 22 · 사이 6. 본문은 좌우 24. 바닥은 위 16 · 좌우 24 · 아래 24 에 버튼을 오른쪽으로 모은다 — Button small 36, [취소] [저장] 순서. 위로 스크롤하면 머리 아래 1px 선이 생긴다.

공통

본문 끝 흐림제목 링크 복사

목록 · 긴 폼처럼 넘칠 수 있는 본문은 Scroll Fog 를 건다(scrollFog) — 위 20 · 아래 80 이 늘 흐리고, 본문 안에 그만큼 여백을 둬 끝까지 내리면 흐림이 빈 여백 위에 놓인다. 넘쳤는지 재서 켜고 끄지 않는다 — 걸 본문인지는 내용의 종류로 정하고, 칸 두셋처럼 늘 들어맞는 본문에는 걸지 않는다. 1280 미만의 시트에서도 같다(Bottom Sheet).

본문 끝 흐림

State제목 링크 복사

상태

모션

Guidelines제목 링크 복사

한 부품이 폭으로 바뀐다제목 링크 복사

폼 · 상세는 한 부품(ResponsiveDialog)으로 짠다 — 1280 이상에서 Dialog, 미만에서 Bottom Sheet 다. 머리 · 본문 · 바닥은 같고, 닫는 자리만 표면에 맞춰 바뀐다(아래 "닫기 버튼과 취소"). 경계는 Input Button 과 같은 1280 이라, 대화상자 안의 날짜 칸은 늘 팝오버로, 시트 안의 날짜 칸은 늘 시트로 열린다 — 표면이 엇갈려 겹치지 않는다.

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

입력 폼 대화상자는 바깥(딤)을 눌러도 닫히지 않는다. 바닥 [취소] · Esc 로 닫고(1280 미만의 시트는 뒤로 가기로도), 바뀐 값이 있으면 닫기 전에 "작성한 내용이 사라져요" 를 묻는다(Field 의 규칙). 조회 · 안내 대화상자는 바깥 누르기 · Esc 로 닫힌다.

닫기 버튼과 취소 — 하나만제목 링크 복사

닫기 버튼과 바닥 취소를 함께 두지 않는다. 1280 미만의 시트에서는 입력 폼도 위 닫기 버튼 + 바닥 [저장] 이다(Bottom Sheet).

두 단계 흐름의 머리 ←제목 링크 복사

한 부품 안에서 1단계(종류 고르기) → 2단계(폼)로 가는 흐름은 1280 이상의 대화상자에서도 2단계 머리 왼쪽에 ← 를 단다 — 시트와 같은 부품(onBack) · 같은 값(보이는 원 40 · 아이콘 24 · 누르는 영역 44 · 아이콘이 왼쪽 24 · 제목은 원 오른쪽 4 에서 · 제목 첫 줄 가운데)이다. 수치 원본은 bottom-sheet.yaml 의 축 back 하나다. ← 는 1단계로 한 단계 되돌리고, 쓴 값이 있으면 "작성한 내용이 사라져요" 를 묻고 돌아가며 그 값을 버린다. 입력 폼 대화상자라 머리 닫기 버튼은 없고 바닥 [취소] 가 닫는다 — ← 는 닫지 않는다. 규칙 전문은 Bottom Sheet 의 "두 단계 시트의 머리 ←"(2026-10-29 사용자 결정 17-1 Q3).

머리 오른쪽 동작 — ⋮ 하나제목 링크 복사

들어간 상세에서 그 항목의 동작이 여럿이면 머리 오른쪽에 ⋮ 하나를 둔다(headerAction) — 시트와 같은 부품 · 같은 규칙이다(Bottom Sheet 의 "머리 오른쪽 동작"). 누르면 Menu 가 열린다. 자리는 닫기 버튼 왼쪽 사이 4 — 닫기가 없는 입력 폼은 오른쪽 끝이다. 단추는 Button ghost 아이콘만(보이는 36 · 누르는 44), 이름 "{항목 이름} 더보기", 세로는 제목 첫 줄 가운데(닫기 아이콘과 같다). 제목 · 설명은 단추 자리를 비운 남은 폭에서 줄을 바꾼다. 초점 차례는 제목 → 동작 → 닫기, 머리 동작은 하나만 둔다(2026-10-25 I-20 — 웹 DialogContent.headerAction).

머리 오른쪽 동작

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

SEED Dialog 문서의 비교 표 네 줄(쓰는 일 · 사용자 응답 · 닫기 버튼 · 크기)에 groo 에서 갈리는 세 줄을 더했다(2026-10-22 사용자 결정 1C — https://claude.ai/artifact/YRPbWzhgD4EDdKsVioU8Zj). 어느 떠 있는 표면을 쓸지 일곱을 한눈에 견준 표는 DESIGN.md Components 의 "시트 · 대화상자 · 확인창 · 팝오버" 한 벌이다(3C).

대화상자에 두지 않는 것제목 링크 복사

• 되돌릴 수 없는 확인 → Alert Dialog.
• 트리거에 붙는 짧은 내용(안내 · 고르기 패널) → Popover.
• 화면 높이를 넘는 긴 내용 · 단계가 많은 일 → 페이지.
• 대화상자 위에 대화상자 — 겹쳐도 되는 건 그 안에서 연 Alert Dialog · Popover 뿐이다.

글제목 링크 복사

제목은 하는 일 — "휴가 신청" · "거래 상세". 설명은 덧붙일 말이 있을 때만 한 문장(해요체 · 마침표). 바닥 버튼은 동작 이름("신청" · "저장") — "확인" 으로 뭉뚱그리지 않는다.

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/dialog.tsx 를 쓴다(Radix Dialog 위). 폼 · 상세는 ResponsiveDialog — 1280 에서 Dialog 와 Bottom Sheet 를 바꾸고, form 이면 닫는 자리도 표면에 맞춰 바꾼다(대화상자는 바닥 취소, 시트는 위 닫기). form 이 아니면(조회 · 안내) 두 표면 모두 위 닫기 버튼이다. 본문에 List 를 바로 두면 줄이 제 좌우 여백(24)을 가지므로 본문 좌우 여백을 뺀다(className="px-0"). 넘칠 수 있는 본문은 scrollFog 를 준다(위 20 · 아래 80 끝 흐림 — Scroll Fog). 아래 미리보기는 스펙 값으로 그린 모습이다.

입력 폼제목 링크 복사

import { Button } from "@/components/ui/button"
import { ResponsiveDialog, ResponsiveDialogBody, ResponsiveDialogCancel, ResponsiveDialogContent, ResponsiveDialogFooter } from "@/components/ui/dialog"

{/* form — 바깥 누르기 · 끌어내리기로 닫지 않는다. dirty — 닫기 전에 "작성한 내용이 사라져요" 를 묻는다 */}
<ResponsiveDialog open={open} onOpenChange={setOpen} form dirty={isDirty}>
  <ResponsiveDialogContent title="휴가 신청" description="승인되면 알려드려요.">
    <ResponsiveDialogBody>
      <Field label="휴가 종류">…</Field>
      <Field label="기간">…</Field>
    </ResponsiveDialogBody>
    <ResponsiveDialogFooter>
      {/* 1280 이상에서만 그린다 — 시트에서는 위 닫기 버튼이 맡는다 */}
      <ResponsiveDialogCancel>취소</ResponsiveDialogCancel>
      <Button onClick={submit}>신청</Button>
    </ResponsiveDialogFooter>
  </ResponsiveDialogContent>
</ResponsiveDialog>

조회제목 링크 복사

{/* 조회 — 머리 닫기 버튼(시트에서는 오른쪽 위 원), 바깥 누르기로도 닫힌다. 길이가 데이터에 따라 느는 본문이라 scrollFog */}
<ResponsiveDialog open={open} onOpenChange={setOpen}>
  <ResponsiveDialogContent title="거래 상세">
    <ResponsiveDialogBody scrollFog className="px-0">
      <List>…</List>
    </ResponsiveDialogBody>
  </ResponsiveDialogContent>
</ResponsiveDialog>

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 폼 · 상세는 한 부품으로 — 1280 이상 대화상자, 미만 시트.
• 입력 폼은 바닥 [취소] [저장], 조회는 머리 닫기 버튼.
• 입력 폼은 바깥 누르기로 닫지 않고, 바뀐 값이 있으면 닫기 전에 묻는다.
• 긴 내용은 본문만 스크롤 — 머리 · 바닥은 늘 보인다.
• 두 단계 흐름의 2단계는 머리 왼쪽 ← 로 1단계에 돌아간다(시트와 같은 값).

❌ Don't제목 링크 복사

• 머리 닫기 버튼과 바닥 취소를 함께.
• 되돌릴 수 없는 확인을 Dialog 로(Alert Dialog).
• 높이 상한 없이 내용을 늘려 제목 · 버튼이 화면 밖으로.
• 대화상자 위에 대화상자 — 단계가 많으면 페이지 · 단계로.

Specification제목 링크 복사

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

SEED 와 다른 점제목 링크 복사

• 바뀌는 폭은 1280(사용자 결정 2026-10-02) — SEED Responsive Dialog 는 md(768). groo 는 Input Button 의 시트 · 팝오버 경계(1280)와 하나로 맞췄다.
• 바닥 버튼은 Button small 36 — SEED 예제는 medium 40. Button 을 정할 때 "40 은 대화상자에 비해 굵다" 로 고른 값을 지켰다(2026-10-02 다시 확인).
• 딤은 groo 0.50 · 다크 0.65(v102) — SEED 0.455.
• 입력 폼은 바깥을 눌러도 닫히지 않고, 머리 닫기 버튼을 두지 않는다 — SEED 도 같은 쪽을 권한다(snippet 의 바깥 닫기 기본값 · "입력 폼에서는 헤더 X 지양"). groo 는 규칙으로 못박았다.
• 반투명 색을 불투명 짝으로(v102) — 머리 아래 선 stroke-neutral-subtle, 닫기 버튼 누름 bg-layer-floating-pressed.
• 본문 끝 흐림은 Scroll Fog(2026-10-03) — 넘칠 수 있는 본문에 늘 켜진 위 20 · 아래 80. SEED Dialog 는 본문이 넘칠 때만 아래 48 을 흐린다.
• z-index 는 specs/z-index.md 의 L2(딤 z-modal 100 · 대화상자 z-modal-content 101) — 그 안에서 연 Popover(L3) · Alert Dialog(L5)가 위에 뜬다(SEED 는 모두 2 + layerIndex).

Migration notes제목 링크 복사

2026-10-30 — 머리 오른쪽 동작제목 링크 복사

구현 검수(I-20)에서 정해 웹 ds 가 먼저 만든 머리 ⋮ 자리를 적었다 — 시트와 같은 규칙이고, 자리 값만 대화상자의 닫기(52 상자 · 아이콘 22)에 맞췄다. dialog.yaml 에 축 headerAction · 부위 headerAction(Button ghost 아이콘만 36 · 닫기 아이콘 왼쪽 4 · 닫기가 없으면 오른쪽 16 · 제목 첫 줄 가운데 · 머리 오른쪽 100 / 60)을 더했다 — 웹 DialogContent.headerAction(67de7f1c)의 값이다. 레시피 DialogContent · ResponsiveDialogContent 에 headerAction 을 더했다. 새 토큰 없음. 옛 스펙은 dialog.history/v-pre-cleanup-1030.*.

2026-10-29 — 두 단계 흐름의 머리 ←제목 링크 복사

사용자 결정 17-1 Q3 = A — 한 부품 안 두 단계 흐름(자산 추가 — 종류 고르기 → 폼)의 2단계 머리 왼쪽 ← 를 1280 이상의 대화상자에도 같은 값으로 둔다. 고르지 않은 안 B(2단계 폼 맨 위 "종류" 칸)와 결정 전문은 Bottom Sheet 의 같은 날 Migration notes. 수치는 bottom-sheet.yaml 의 축 back 한 벌이고 dialog.yaml 은 고치지 않았다. 레시피 DialogContent · ResponsiveDialogContent 에 onBack 을 더했다.

2026-10-22 — 대화상자 위 대화상자의 갈 곳제목 링크 복사

Don't "대화상자 위에 대화상자" 는 그대로 두고 옛 문장의 대안 "단계가 많으면 페이지 · 단계로" 를 함께 적었다(남은 규칙 R18 — 그대로, https://claude.ai/artifact/Mag1tEv51MdQHdy1o8hY3L). 값 변경 없음.

2026-10-22 — Alert Dialog 와 견주는 표제목 링크 복사

SEED Dialog 문서의 "Dialog vs Alert Dialog" 네 줄에 groo 의 세 줄(바깥 · Esc · 1280 미만 모양 · 버튼)을 더한 표를 두었다 — 폰에서 Dialog 는 시트가 되고 확인창만 가운데에 남는 것이 SEED 에 없는 차이다(사용자 결정 1C — https://claude.ai/artifact/YRPbWzhgD4EDdKsVioU8Zj). 떠 있는 표면 일곱을 고르는 큰 표는 DESIGN.md 한 벌로(3C). 값 변경 없음.

2026-10-03 — 본문 끝 흐림을 Scroll Fog 로제목 링크 복사

사용자가 비교 페이지에서 끝 흐림을 SEED 의 늘 켜진 마스크(Scroll Fog)로 정해, 2026-10-02 의 "본문이 넘칠 때만 아래 48 흐림" 을 바꿨다 — 넘칠 수 있는 본문(목록 · 긴 폼)에 scrollFog 를 걸고, 걸면 위 20 · 아래 80 이 늘 흐리다(본문 안 여백도 그만큼). 넘친 쪽만 흐리는 안은 고르지 않았다. 상태 overflow 와 부위 fade 를 걷고 축 scrollFog · 부위 fog 를 두었다.

2026-10-02 — SEED Dialog 로 다시 정한다제목 링크 복사

사용자가 비교 페이지에서 정했다 — 일로 나누기(폼 · 상세는 한 부품이 폭으로 시트 ↔ 대화상자) · 경계 1280 · 입력 폼은 바깥으로 닫지 않음 · 닫기 버튼과 취소는 하나만 · SEED 모양(medium 480 · large 800 · 최대 80% · 모서리 20 · 제목 22 / 30 · 본문만 스크롤 + 흐림 · 머리 아래 선). 바닥 버튼은 Button 결정대로 small 36. 옛 Dialog(sm 420 · md 520 · lg 720 · 86vh · 모서리 12 · 제목 18 / 600 · 머리 X + 바닥 취소)는 걷었다 — 옛 스펙은 dialog.history/v-pre-seed-overlay.*.

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

• Desk 웹 — ModalShell 53곳(768 에서 시트 ↔ 대화상자 → 1280). 열어도 초점이 안으로 들어가지 않고 Tab 이 가려진 뒤 화면을 돌며, 닫으면 초점이 body 로 떨어진다. ModalShell 의 aria-describedby 가 없는 id 를 가리킨다. 폼 33곳이 바깥 누르기로 경고 없이 닫힌다. 상세 바닥의 삭제(dangerSoft)는 4.01:1.
• Desk 앱 — 시트가 대부분이고 프리셋 저장만 가운데 대화상자(PFormAlertDialog)다(→ 시트). 폼 29곳이 경고 없이 닫힌다.
• HR 웹 — Dialog 30곳 중 18곳이 높이 상한이 없어 긴 내용이면 제목과 버튼이 화면 밖으로 나간다(데스크톱 y −161 · 모바일 y −671). 트리거 없이 연 21곳은 닫으면 초점이 body 로 떨어진다. 닫기 버튼 16×16 "Close", 딤 0.80, 설명 4.42:1.
• 앱 적용 때 화면마다 정할 자리 — HR 전체 화면 Dialog 3(페이지 · 시트 · Side Panel), 데스크톱 필터(Dialog · Popover · Side Panel), 반복 거래 상세의 바닥 액션 3개.