📦 @kimyouk/modal-components

React 프로젝트에서 간편하게 모달 UI를 구성할 수 있는 모달 컴포넌트 모듈입니다. 다양한 위치 설정과 컴포넌트 분리 설계를 통해 유연하게 사용할 수 있습니다.

설치

npm install @kimyouk/modal-components
# 또는
yarn add @kimyouk/modal-components

기본 모달

빠른 시작

import { Modal } from '@kimyouk/modal-components';

function App() {
  return (
    <>
      <Modal>
        <Modal.Trigger>트리거</Modal.Trigger>
        <Modal.Container>
          <Modal.Overlay />
          <Modal.Content position="center" size="small">
            <Modal.CloseButton />
            <Modal.Title>제목</Modal.Title>
            <Modal.Body>내용2</Modal.Body>
          </Modal.Content>
        </Modal.Container>
      </Modal>
    </>
  );
}

구성 요소

• Modal 모달에서 공유되는 open값을 공유해주는 Provider 입니다.

• Modal.Trigger 모달 상태를 open으로 해주는 버튼입니다.

• Modal.ModalContainer 모달의 내부 구조를 감싸는 컨테이너입니다. 내부에 Overlay, Content를 배치할 수 있습니다.

• Modal.Overlay 모달의 뒷배경을 담당합니다.

• Modal.Content 모달에 그려지는 요소를 감싸는 컴포넌트입니다. 내부에 타이틀, 본문, 버튼 등을 배치할 수 있습니다.

• Modal.ModalTitle 모달의 제목을 표시하는 컴포넌트입니다. 일반적으로 가장 상단에 배치합니다.

• Modal.ModalBody 모달 본문에 들어갈 내용을 표시하는 영역입니다.

• Modal.ModalCloseButton 모달을 닫기 위한 버튼입니다. 닫기 기능을 구현합니다.

• Modal.ConfirmButton 모달의 확인 버튼입니다.

• Modal.CancelButton 모달의 취소 버튼입니다.

• Modal.AlertActions Alert모달의 확인/취소 버튼을 묶은 컴포넌트 입니다.

스타일 커스터마이징

position에 따라 모달의 위치 및 border-radius가 자동 조정됩니다.

center일 경우 width 값을 통해 너비를 설정할 수 있습니다.

styled-components 기반이므로 ModalContainer 등 하위 컴포넌트를 확장하여 스타일 커스터마이징도 가능합니다.

AlertModal

빠른 시작

import { Modal } from '@kimyouk/modal-components';

function App() {
  return (
      <Modal>
        <Modal.Trigger>Alert 트리거</Modal.Trigger>
        <AlertModal size="small" title="Alert 제목" content="내용1234내용" />
      </Modal>
  );
}

구성 요소

| 이름 | 타입 | 필수 | 설명 | | ------------------- | -------------------------------- | ---- | --------------------------------- | | title | string | ✅ | 모달 내부의 본문 | | content | string | ✅ | 모달 내부의 내용 | | size | 'small' \| 'medium' \| 'large' | ❌ | 모달의 크기 | | alertActionsWidth | number | ❌ | 취소/확인 버튼을 감싼 영역의 너비 | | onCloseClick | () => void | ❌ | 취소 버튼 클릭시 동작하는 함수 | | onConfirmClick | () => void | ❌ | 확인 버튼 클릭시 동작하는 함수 |

ConfirmModal

빠른 시작

import { Modal } from '@kimyouk/modal-components';

function App() {
  return (
      <Modal>
        <Modal.Trigger>Alert 트리거</Modal.Trigger>
        <ConfirmModal size="small" title="Confirm 제목" content="내용1234내용" />
      </Modal>
  );
}

구성 요소

| 이름 | 타입 | 필수 | 설명 | | ---------------- | -------------------------------- | ---- | ------------------------------ | | title | string | ✅ | 모달 내부의 본문 | | content | string | ✅ | 모달 내부의 내용 | | size | 'small' \| 'medium' \| 'large' | ❌ | 모달의 크기 | | onConfirmClick | () => void | ❌ | 확인 버튼 클릭시 동작하는 함수 |

PromptModal

빠른 시작

import { Modal } from '@kimyouk/modal-components';

function App() {
  return (
      <Modal>
        <Modal.Trigger>Alert 트리거</Modal.Trigger>
        <PromptModal size="small" title="Confirm 제목" content="내용1234내용" />
      </Modal>
  );
}

구성 요소

| 이름 | 타입 | 필수 | 설명 | | ------------------- | -------------------------------- | ---- | --------------------------------- | | title | string | ✅ | 모달 내부의 본문 | | content | string | ✅ | 모달 내부의 내용 | | size | 'small' \| 'medium' \| 'large' | ❌ | 모달의 크기 | | alertActionsWidth | number | ❌ | 취소/확인 버튼을 감싼 영역의 너비 | | onCloseClick | () => void | ❌ | 취소 버튼 클릭시 동작하는 함수 | | onConfirmClick | () => void | ❌ | 확인 버튼 클릭시 동작하는 함수 |

내부 구조

const Modal = Object.assign(ModalProvider, {
  Container: ModalContainer,
  Overlay: ModalOverlay,
  Content: ModalContent,
  Body: ModalBody,
  CloseButton: ModalCloseButton,
  Title: ModalTitle,
  CancelButton: CancelButton,
  ConfirmButton: ConfirmButton,
  AlertActions: AlertActions,
  Input: Input,
  Trigger: Trigger,
});

📝 라이선스

@kimyou1102 @ha-kuku