Modal 데모

Modal + ModalTrigger + ModalContent 조합입니다. 아래에서 패턴별로 열어 보세요.

import

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

import {
  Modal,
  ModalClose,
  ModalContent,
  ModalTrigger,
  MODAL_W_SIZES,
  type ModalWSize,
} from "@/shared/components/ds/Modal";
// wSize: 500 | 700 | 1024 | 1200

W size (variant)

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

<ModalContent wSize={500} title="…" titleDescription="…">
  …
</ModalContent>

700px — title만

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

<ModalContent wSize={700} title="알림">
  …
</ModalContent>

700px — title + titleDescription

제목·부제 모두 string.

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

700px — title·titleDescription 없음, header만

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

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

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

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

<ModalContent wSize={700} dialogLabel="추가 안내">
  …
</ModalContent>

700px — 닫기 버튼 없음

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

<ModalContent wSize={700} title="설정" showCloseButton={false}>
  <ModalClose asChild>
    <Button type="button">확인하고 닫기</Button>
  </ModalClose>
</ModalContent>

700px — footer 있음

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

<ModalContent
  wSize={700}
  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>
    </>
  )}
>
  …
</ModalContent>

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

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

<ModalContent
  wSize={700}
  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>
    </>
  }
>
  {/* 긴 본문 → 중간 영역만 스크롤 */}
</ModalContent>