@ggi-kit/modal NPM

@ggi-kit/modal

React 기반의 모던하고 유연한 모달 컴포넌트 라이브러리입니다.

특징

1. 유연한 스타일링

모든 요소에 대한 스타일 커스터마이징 지원
- modalStyle: 모달 창 전체 스타일
- titleStyle: 제목 스타일
- childrenStyle: 컨텐츠 영역 스타일
인라인 스타일과 Tailwind CSS 호환

2. 접근성 (A11y)

ESC 키를 통한 모달 닫기 지원
모달 오픈 시 자동 포커스
모달 외부 스크롤 자동 방지
ARIA 레이블 지원

3. Portal 기반 구현

DOM 구조와 독립적인 렌더링
Z-index 관리 용이
스타일 충돌 방지

4. 다양한 모달 타입

BaseModal: 기본 모달 컴포넌트
AlertModal: 알림용 모달 컴포넌트
모든 모달에 일관된 API 제공

5. 상태 관리

Context API를 통한 전역 상태 관리
여러 모달의 효율적인 상태 관리
독립적인 모달 상태 관리를 위한 useModal 훅 제공

설치

npm install @ggi-kit/modal

기본 사용법

import { ModalProvider, useModalContext, BaseModal } from '@ggi-kit/modal';

// 앱 최상위에서 Provider 설정
function App() {
  return (
    <ModalProvider defaultModals={["alert"]}>
      
    
  );
}

// 컴포넌트에서 사용
function YourComponent() {
  const { modals, openModal, closeModal } = useModalContext();

  return (
    <>
      <button onClick={() => openModal("alert")}>모달 열기
      <BaseModal
        isOpen={modals["alert"]}
        onClose={() => closeModal("alert")}
        title="제목"
      >
        내용
      
    </>
  );
}

스타일 커스터마이징

  내용

주요 Props

BaseModal & AlertModal

interface ModalProps {
  isOpen: boolean;              // 모달 표시 여부
  onClose: () => void;          // 닫기 핸들러
  title?: string;               // 모달 제목
  children: React.ReactNode;     // 모달 내용
  modalStyle?: React.CSSProperties;   // 모달 스타일
  titleStyle?: React.CSSProperties;   // 제목 스타일
  childrenStyle?: React.CSSProperties; // 내용 스타일
}