Modal 데모

ContentModal.Root + ContentModal.Trigger + ContentModal.Content조합입니다. DSG v2 — 타이틀 typo-h5-bold (30px), 부제 typo-t2-regular (20px), wSize 480 | 800 | 1024 | 1200. title+titleDescription은 가운데 정렬, title만 있으면 좌측 정렬 헤더입니다. 점선 버튼은 ui/dialog 미러입니다.

import

경로·타입(wSize)은 프로젝트 루트 alias 기준입니다.

import {
  ContentModal,
  MODAL_W_SIZES,
  type ModalWSize,
} from "@/shared/components/bonbon/Modal";
// wSize: 480 | 800 | 1024 | 1200

W size (variant)

Figma W Size — 각 버튼으로 해당 너비 모달을 엽니다.

<ContentModal.Content wSize={480} title="…" titleDescription="…">
  …
</ContentModal.Content>

800px — title만

`titleDescription` 없이 제목만 문자열로 둡니다.

<ContentModal.Content wSize={800} title="알림">
  …
</ContentModal.Content>

800px — title + titleDescription

제목·부제 모두 string. DSG 기준 가운데 정렬 헤더입니다.

<ContentModal.Content
  wSize={800}
  title="이용 약관 동의"
  titleDescription="서비스 이용을 위해 약관을 확인해 주세요."
>
  …
</ContentModal.Content>

800px — title·titleDescription 없음, header만

`header`만 넘기면 왼쪽 타이틀 영역을 직접 구성합니다. 접근성을 위해 보이는 제목과 같은 문자열을 `dialogLabel`로 넘기세요.

<ContentModal.Content
  wSize={800}
  dialogLabel="커스텀 제목"
  header={(
    <div className="flex items-center gap-2">
      <IconAdd size={24} />
      <span className="text-2xl font-semibold">커스텀 제목</span>
    </div>
  )}
>
  …
</ContentModal.Content>

800px — 제목 영역 없음 (title / titleDescription / header 없음)

헤더 줄이 없고, 본문 위에만 닫기(X)가 뜹니다. 의미 있는 이름은 `dialogLabel`(또는 본문 첫 `h2` 등)으로 주는 것이 좋습니다.

<ContentModal.Content wSize={800} dialogLabel="추가 안내">
  …
</ContentModal.Content>

800px — 닫기 버튼 없음

`showCloseButton={false}` 일 때는 본문에서 `ContentModal.Close`로 닫거나, 바깥 클릭·Esc로 닫습니다.

<ContentModal.Content wSize={800} title="설정" showCloseButton={false}>
  <ContentModal.Close asChild>
    <Button type="button">확인하고 닫기</Button>
  </ContentModal.Close>
</ContentModal.Content>

800px — footer 있음

`footer`에 CTA를 넣으면 하단 고정 영역으로 붙습니다.

<ContentModal.Content
  wSize={800}
  title="저장할까요?"
  titleDescription="변경 내용이 반영됩니다."
  footer={(
    <>
      <Button variant="light-filled" className="min-w-0 flex-1" type="button">
        취소
      </Button>
      <Button color="black" className="min-w-0 flex-1" type="button">
        저장
      </Button>
    </>
  )}
>
  …
</ContentModal.Content>

800px — title + footer만 (본문 스크롤)

`titleDescription` 없이 `title`과 `footer`만 두면 헤더·푸터는 고정되고 가운데 본문만 `overflow-y-auto`로 스크롤됩니다.

<ContentModal.Content
  wSize={800}
  title="내용 확인"
  footer={
    <>
      <Button variant="light-filled" className="min-w-0 flex-1" type="button">
        닫기
      </Button>
      <Button color="black" className="min-w-0 flex-1" type="button">
        확인
      </Button>
    </>
  }
>
  {/* 긴 본문 → 중간 영역만 스크롤 */}
</ContentModal.Content>