@yeji0214/modal
Version:
모달 컴포넌트
126 lines (94 loc) • 6.1 kB
Markdown
# @yeji0214/modal
React 환경에서 **접근성과 재사용성**을 고려한 모달 컴포넌트입니다.
확인(Alert), 확인/취소(Confirm), 입력(Prompt) 형태의 모달을 제공하며, 위치 및 크기도 자유롭게 조절 가능합니다.
[](https://www.npmjs.com/package/@yeji0214/modal)
[](LICENCSE)
---
## ✨ 특징
- React 18+ 지원
- Emotion 기반의 커스터마이징 가능한 스타일
- 불필요한 필수 prop 최소화 (기본값 제공)
- Alert / Confirm / Prompt의 다양한 모달 타입 지원
- 위치 및 사이즈 조절 가능 (`center`, `top`, `bottom` + `small`, `medium`, `large`)
- 모달 접근성 개선: Tab/Shift+Tab 키로 내부 요소 순환 가능 (Focus Trap)
---
## 📦 설치
```bash
npm install @yeji0214/modal
```
> ⚠️ 이 패키지는 `react`, `react-dom`, `@emotion/react`, `@emotion/styled`를 peerDependencies로 사용합니다.
> 사용 전에 반드시 해당 패키지들을 설치해주세요.
---
## 🧩 사용법
### 기본 Alert 모달 예시
```tsx
import Modal from "@yeji0214/modal";
function App() {
return <Modal onClose={handelClose} onConfirm={handleConfirm} />;
}
```
### Confirm 모달 예시
```tsx
import Modal from "@yeji0214/modal";
function App() {
return (
<Modal
type="confirm"
title="삭제하시겠습니까?"
content="삭제된 데이터는 복구할 수 없습니다."
onClose={handleCancel}
onConfirm={handleConfirm}
/>
);
}
```
### Prompt 모달 예시
```tsx
import Modal from "@yeji0214/modal";
import { useState } from "react";
function App() {
const [inputValue, setInputValue] = useState("");
return (
<Modal
type="prompt"
inputTitle="이름을 입력해주세요"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
confirmText="제출"
onConfirm={() => {
console.log("입력된 값:", inputValue);
}}
/>
);
}
```
---
## 📐 모달 크기 설정 (`size`)
| 사이즈 | 설명 | 실제 너비 |
| -------- | ----------------------- | --------- |
| `small` | 기본 사이즈 (디폴트) | `304px` |
| `medium` | 넓은 콘텐츠용 | `600px` |
| `large` | 전체 너비 사용 (반응형) | `100%` |
```tsx
<Modal size="medium" />
```
---
## 🛠️ Props
| Prop | Type | Required | Default | Description |
| --------------------- | ----------------------------------------------- | -------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
| `type` | `"alert"` \| `"confirm"` \| `"prompt"` | ❌ | `"alert"` | 모달의 형태를 지정합니다. |
| `position` | `"center"` \| `"bottom"` \| `"top"` | ❌ | `"center"` | 모달 위치를 지정합니다. |
| `size` | `"small"` \| `"medium"` \| `"lage"` | ❌ | `"small"` | 모달 크기를 지정합니다. |
| `title` | `string` | ❌ | `"알림"` | 모달 제목입니다. `prompt` 타입에서는 표시되지 않습니다. |
| `content` | `React.ReactNode` | ❌ | `"내용이 없습니다."` | 모달 본문 내용입니다. `prompt` 타입에서는 표시되지 않습니다. |
| `inputTitle` | `string` | ❌ | `"입력해주세요."` | `prompt` 타입에서 입력 필드 상단의 안내 문구입니다. |
| `hasCloseButton` | `boolean` | ❌ | `true` | 우측 상단 닫기 버튼 표시 여부입니다. |
| `onClose` | `() => void` | ✅ | – | 닫기 버튼, 백드롭 클릭 시 실행되는 콜백입니다. |
| `onConfirm` | `() => void` | ✅ | – | 확인 버튼 클릭 시 실행되는 콜백입니다. |
| `confirmText` | `string` | ❌ | `"확인"` | 확인 버튼 텍스트입니다. |
| `cancelText` | `string` | ❌ | `"취소"` | 취소 버튼 텍스트입니다. (confirm, prompt 타입에서 사용) |
| `handleBackdropClick` | `(e: React.MouseEvent<HTMLDivElement>) => void` | ❌ | 모달 배경 클릭 시 실행할 커스텀 핸들러입니다. 전달하지 않으면 기본적으로 모달이 닫힙니다. |
| |
---
## 📃 라이선스
MIT © 정예지