react-danang

설명 (Description)

antd의 모달을 쉽고 편하게 사용하기 위해 제작 되었습니다.
A simple and easy-to-use modal hook for antd Modal component.

주요 기능 (Features)

• 🎯 간단한 모달 열기/닫기 제어
• 📦 TypeScript 제네릭 타입 지원
• 🔧 antd Modal의 모든 props 지원
• 🐛 디버그 모드 지원
• ✨ onClose / onCancel 콜백 분리

Table of Contents

• Installation
• Usage
• API
• Changelog

Installation (설치)

프로젝트에 react, react-dom, antd가 설치되어 있어야 합니다.

npm install react-danang antd

Peer Dependencies

{
  "react": "^19.0.0",
  "react-dom": "^19.0.0",
  "antd": "6.1.4"
}

Usage (사용방법)

1. 모달 컨텐츠 컴포넌트 정의

// ModalContent.tsx
interface ModalContentProps<T = any> {
  modalData: T;
  onClose: (params?: any) => void;
  onCancel: () => void;
}

const ModalContent = ({ modalData, onClose, onCancel }: ModalContentProps) => {
  return (
    <div>
      <h2>{modalData.title}</h2>
      <p>{modalData.message}</p>
      <button onClick={() => onClose({ result: "success" })}>확인</button>
      <button onClick={onCancel}>취소</button>
    </div>
  );
};

export default ModalContent;

2. useComModal 훅 사용

import { ComModal, useComModal } from "react-danang";
import ModalContent from "./ModalContent";

// 제네릭 타입으로 modalData 타입 정의 가능
interface MyModalData {
  title: string;
  message: string;
}

const App = () => {
  // isDebug: true 로 설정하면 콘솔에 디버그 로그 출력
  const [m] = useComModal<MyModalData>(false);

  const openModal = () => {
    const params: MyModalData = {
      title: "알림",
      message: "모달 메시지입니다.",
    };

    m.open({
      // 모달에 표시할 컨텐츠 컴포넌트
      content: ModalContent,
      // 컨텐츠에 전달할 데이터
      modalData: params,
      // antd Modal props (선택사항)
      modalProps: {
        title: "모달 타이틀",
        width: 500,
        centered: true,
      },
      // 모달 닫기 콜백 (선택사항) - 파라미터 전달 가능
      onClose: (result) => {
        console.log("모달 닫힘:", result);
        m.close();
      },
      // 모달 취소 콜백 (선택사항) - X 버튼 클릭 시
      onCancel: () => {
        console.log("모달 취소됨");
        m.cancel();
      },
    });
  };

  return (
    <div>
      <button onClick={openModal}>모달 열기</button>
      <ComModal {...m} />
    </div>
  );
};

export default App;

API

useComModal Hook

const [modal] = useComModal<T>(isDebug?: boolean);

| Parameter | Type | Default | Description | | --------- | --------- | ------- | --------------------- | | isDebug | boolean | false | 디버그 로그 출력 여부 |

Modal State (반환값)

| Property | Type | Description | | ------------- | --------------------- | ----------------------- | | isOpen | boolean | 모달 열림 상태 | | modalData | T \| null | 모달에 전달된 데이터 | | modalProps | AntdModalProps | antd Modal props | | content | React.ComponentType | 모달 컨텐츠 컴포넌트 | | open(props) | function | 모달 열기 | | close() | function | 모달 닫기 | | cancel() | function | 모달 취소 (닫기와 동일) | | toggle() | function | 모달 토글 |

open() 메서드 파라미터

| Property | Type | Required | Description | | ------------ | ------------------------ | -------- | ------------------------------ | | content | React.ComponentType | ✅ | 모달에 표시할 컴포넌트 | | modalData | T | ❌ | 컨텐츠에 전달할 데이터 | | modalProps | AntdModalProps | ❌ | antd Modal props | | onClose | (params?: any) => void | ❌ | 닫기 콜백 (생략시 자동 close) | | onCancel | () => void | ❌ | 취소 콜백 (생략시 자동 cancel) |

컨텐츠 컴포넌트 Props

모달 컨텐츠 컴포넌트는 다음 props를 받습니다:

| Prop | Type | Description | | ----------- | ------------------------ | ------------- | | modalData | T | 전달된 데이터 | | onClose | (params?: any) => void | 닫기 함수 | | onCancel | () => void | 취소 함수 |

Changelog

v0.3.1

• 🚀 Ant Design 6 (v6.1.4) 및 React 19 지원
• 🔧 Peer Dependencies 버전 업데이트
• 🎨 스타일링 리팩토링 (tailwind-styled-components 제거 및 최적화)
• ⚡️ 내부 코드 구조 개선 및 안정성 향상

v0.3.0

• ✨ onCancel 콜백 추가
• 📝 TypeScript 제네릭 타입 지원 개선
• 🐛 isDebug 옵션 추가
• 🗑️ tailwindcss 의존성 제거

License

MIT