Modal

const [open, setOpen] = useState(false)
 
<Button onClick={() => setOpen(true)}>Center Modal 열기</Button>
<Modal
  open={open}
  onOpenChange={setOpen}
  type="center"
  title="Center Modal"
  description="기본 중앙 모달입니다."
  showCloseButton
>
  <div className="p-4">
    <p>모달 본문 콘텐츠가 여기에 표시됩니다.</p>
  </div>
</Modal>

const [open, setOpen] = useState(false)
 
<Button onClick={() => setOpen(true)}>Fullscreen Modal 열기</Button>
<Modal
  open={open}
  onOpenChange={setOpen}
  type="fullscreen"
  title="Fullscreen Modal"
  description="전체 화면 모달입니다."
  showCloseButton
>
  <div className="p-4">
    <p>전체 화면으로 표시되는 콘텐츠입니다.</p>
  </div>
</Modal>

const [open, setOpen] = useState(false)
 
<Button onClick={() => setOpen(true)}>Bottomsheet 열기</Button>
<Modal
  open={open}
  onOpenChange={setOpen}
  type="bottomsheet"
  title="Bottom Sheet"
  description="하단에서 올라오는 시트입니다."
>
  <div className="p-4">
    <p>모바일 환경에서 자주 사용되는 하단 시트 패턴입니다.</p>
  </div>
</Modal>

const [open, setOpen] = useState(false)
 
<Button onClick={() => setOpen(true)}>Side Panel 열기</Button>
<Modal
  open={open}
  onOpenChange={setOpen}
  type="sidepanel"
  title="Side Panel"
  description="오른쪽에서 슬라이드되는 패널입니다."
>
  <div className="p-4">
    <p>상세 정보나 설정 패널로 활용할 수 있습니다.</p>
  </div>
</Modal>

const [open, setOpen] = useState(false)
 
<Modal
  open={open}
  onOpenChange={setOpen}
  type="center"
  dim={false}
  title="No Dim Modal"
  showCloseButton
>
  <div className="p-4">
    <p>배경 딤 처리 없이 모달이 표시됩니다.</p>
  </div>
</Modal>

const [open, setOpen] = useState(false)
 
<Modal
  open={open}
  onOpenChange={setOpen}
  type="center"
  dim={true}
  allowInteraction
  title="Allow Interaction"
  showCloseButton
>
  <div className="p-4">
    <p>모달이 열린 상태에서도 배경과 상호작용할 수 있습니다.</p>
  </div>
</Modal>

const [open, setOpen] = useState(false)
 
<Modal
  open={open}
  onOpenChange={setOpen}
  type="center"
  title="Resizable Modal"
  description="모달 테두리를 드래그하여 크기를 조절할 수 있습니다."
  showCloseButton
  resizable
>
  <div className="p-4">
    <p>모달의 가장자리나 모서리를 드래그하면 크기를 자유롭게 조절할 수 있습니다.</p>
  </div>
</Modal>

const [open, setOpen] = useState(false)
 
<Modal
  open={open}
  onOpenChange={setOpen}
  type="center"
  title="확인"
  description="변경 사항을 저장하시겠습니까?"
  footer={
    <div className="flex gap-2">
      <Button variant="outline" onClick={() => setOpen(false)}>
        취소
      </Button>
      <Button onClick={() => setOpen(false)}>저장</Button>
    </div>
  }
>
  <div className="p-4">
    <p>footer prop으로 커스텀 버튼 영역을 구성할 수 있습니다.</p>
  </div>
</Modal>