IROUL
회원가입로그인
Modal

Interactive UI Explorer

아래에서 각 컴포넌트의 다양한 Variants와 States를 문서화된 형태로 테스트해볼 수 있습니다.

Modal

실무에서 자주 사용하는 범용 모달 컴포넌트입니다.
- isOpen(on/off), title/description, size, 액션 버튼 등을 props로 제어하고
- ESC/배경 클릭으로 닫기, 포털 렌더링, 스크롤 잠금까지 한 번에 처리합니다.

기본 모달

제목/설명/본문과 확인/취소 버튼이 있는 가장 기본적인 모달 예시

Source Code
const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>모달 열기</Button>
<Modal
  open={open}
  onClose={() => setOpen(false)}
  title="기본 모달"
  description="실무에서 가장 많이 쓰는 형태의 모달입니다."
  primaryAction={{
    label: '확인',
    onClick: () => setOpen(false),
  }}
  secondaryAction={{
    label: '취소',
    onClick: () => setOpen(false),
    variant: 'outline',
  }}
>
  모달 본문에 원하는 컴포넌트를 자유롭게 배치할 수 있습니다.
</Modal>
Live Preview

폼 모달

간단한 입력 폼을 포함하는 모달 예시

Source Code
const [open, setOpen] = useState(false);

<Modal
  open={open}
  onClose={() => setOpen(false)}
  title="프로필 수정"
  description="사용자 정보를 변경한 뒤 저장 버튼을 눌러주세요."
  primaryAction={{
    label: '저장',
    onClick: handleSave,
  }}
  secondaryAction={{
    label: '취소',
    onClick: () => setOpen(false),
    variant: 'outline',
  }}
>
  <form className="space-y-3">
    ...
  </form>
</Modal>
Live Preview

사이즈 변경 및 ESC/배경 클릭 제어

size, closeOnBackdrop, closeOnEsc 같은 동작 관련 props 제어 예시

Small
<Modal size="sm" ... />
Live Preview
Medium
<Modal size="md" ... />
Live Preview
Large
<Modal size="lg" ... />
Live Preview
Full
<Modal size="full" ... />
Live Preview