Landing Page
Design System Home

Wine Design System

Modal

- 구성: Modal, ModalTrigger, ModalContent, ModalHeader, ModalTitle, ModalBody, ModalFooter, ModalClose, externalIsOpen(prop), onExternalChange(prop)

- ModalContent [variant]: default (default) | confirm

- ModalTrigger [asChild]: false (default) | true

- ModalClose [asChild]: false (default) | true

🧩 기본 사용 예시

<Modal>
  <ModalTrigger>모달 열기</ModalTrigger>
  <ModalContent>
    <ModalHeader>
      <ModalTitle>제목</ModalTitle>
    </ModalHeader>
    <ModalBody>본문</ModalBody>
    <ModalFooter>
      <ModalClose>닫기</ModalClose>
    </ModalFooter>
  </ModalContent>
</Modal>

🧩 asChild 패턴 사용 예시

<Modal>
  <ModalTrigger asChild>
    <Button size='sm' variant='secondary'>열기</Button>
  </ModalTrigger>
  <ModalContent variant='confirm'>
    <ModalBody>정말 삭제하시겠습니까?</ModalBody>
    <ModalFooter>
      <ModalClose asChild>
        <Button variant='outline'>취소</Button>
      </ModalClose>
      <ModalClose asChild>
        <Button variant='primary'>확인</Button>
      </ModalClose>
    </ModalFooter>
  </ModalContent>
</Modal>

🧩 제어 모달 사용 예시

<Modal externalIsOpen={isOpen} onExternalChange={setIsOpen}>
  <Modal.Trigger>열기</Modal.Trigger>
  <Modal.Content>
    <Modal.Header>
      <Modal.Title>제목</Modal.Title>
    </Modal.Header>
    <Modal.Body>본문</Modal.Body>
    <Modal.Footer>
      <Modal.Close>닫기</Modal.Close>
    </Modal.Footer>
  </Modal.Content>
</Modal>

⚠️ 참고: asChild를 사용하는 경우, 반드시 자식 요소를 단일 React 엘리먼트로 감싸야 합니다.

Standard