open-index/open-npm huggingface dataset:
npm package: @leejaehyeon/sortable-list
Description: npm install 한후 package.json에 입력된 scripts를 참고하여 실행하세요.
Author: Lee JaeHyeon
Latest version: 0.3.0

# Sortable
npm install 한후 package.json에 입력된 scripts를 참고하여 실행하세요.
npm package: @leeje/components
Description: modal components modules
Latest version: 0.0.1

# Modal Component Module

- [x] 모달을 열고 닫을 수 있다.
- [x] 모달을 열었을 때 배경이 dim 처리한다.
- [x] 모달을 열었을 때 배경을 클릭하면 모달이 닫힌다.
- [x] 모달 내부 콘텐츠를 사용자한테 받을 수 있다.
- [x] 모달 위치(중앙, 하단)를 사용자한테 받을 수 있다.
- [x] 모달 제목을 사용자한테 받을 수 있다.
- [x] 닫기 버튼 표시 여부를 사용자한테 받을 수 있다.
- [x] CTA 버튼에 대한 기능을 사용자한테 받을 수 있다.
- [x] 보조 버튼에 대한 기능을 사용자한테 받을 수 있다.
npm package: @leeje/hooks-module
Description: hooks module
Latest version: 0.0.5

# 🧩 hooks module

React 프로젝트에서 결제 폼을 만들 때 사용할 수 있는 커스텀 훅 모음입니다.  
카드 번호, 유효기간, CVC 등 다양한 입력 필드에 대해 **유효성 검사와 상태 관리 기능을 함께 제공합니다.**

## ✨ Features

- 카드 정보 입력 필드의 상태 & 유효성 검증 관리
- 컴포넌트와 분리된 로직 구조로 재사용성과 테스트 용이성 향상
- 타입 안전한 TypeScript 기반
- `validateCardNumbers`, `preventInvalidTypo` 등 유연한 API

---

## 📦 Installation

```bash
npm i @leeje/hooks-module
```

## 🧪 제공 훅 목록

- useCardNumbers: 카드 번호 4칸 입력 상태 및 유효성 관리
- useExpiryDate: 유효기간 (MM/YY) 입력 및 검증
- useCVC: 카드 CVC 입력 및 검증

## 사용 예시: useCardNumbers

```tsx
import { useCardNumbers } from '@leeje/hooks-module';

function CardInputForm() {
  const { cardNumbers, validationResults, handleCardNumbersChange } =
    useCardNumbers();

  return (
    <div>
      {(['part1', 'part2', 'part3', 'part4'] as const).map((key) => (
        <input
          key={key}
          name={key}
          value={cardNumbers[key]}
          onChange={(e) => handleCardNumbersChange(e, false)}
        />
      ))}
      <p>{validationResults.part1.errorMessage}</p>
    </div>
  );
}
```

## 📘 API Reference

### useCardNumbers

> 반환값

| 이름                      | 타입                                                                           | 설명                       |
| ------------------------- | ------------------------------------------------------------------------------ | -------------------------- |
| `cardNumbers`             | `Record<'part1' \| 'part2' \| 'part3' \| 'part4', string>`                     | 각 4자리 카드 번호 상태    |
| `validationResults`       | `Record<CardNumbersKey, { isValid: boolean; errorMessage: string }>`           | 각 필드의 유효성 결과      |
| `handleCardNumbersChange` | `(event: ChangeEvent<HTMLInputElement>, preventInvalidTypo?: boolean) => void` | 입력 및 유효성 검증 핸들러 |
| `validateCardNumbers`     | `(value: string) => string \| null`                                            | 숫자 여부, 길이 검증 수행  |

> 옵션 설명

- preventInvalidTypo: 기본값 true. false로 설정하면 유효하지 않아도 상태 변경을 허용하며, 유효성 결과가 갱신됨.
npm package: @leeje/modal-component-module
Description: modal component module
Latest version: 0.0.8

# Modal Component Module

Emotion 기반의 React 모달 UI 컴포넌트입니다.
커스터마이징이 쉽고, 외부 스타일(`style`)도 적용 가능하여 다양한 디자인 시스템과 유연하게 통합할 수 있습니다.

---

## ✨ Features

- `HTMLDialogElement` 기반 접근성 모달
- Emotion을 이용한 스타일링
- 외부 스타일 덮어쓰기 지원 (`style` prop)
- `center`, `bottom` 포지션 옵션
- 모달 닫기 버튼 기본 제공

---

## 📦 Installation

```bash
npm i @leeje/modal-component-module
```

## 사용 예시: Modal

```tsx
import Modal from '@leeje/modal-component-module';

function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Modal</button>
      <Modal.Container open={open} onClose={() => setOpen(false)}>
        <Modal.Title>결제 정보를 입력해주세요</Modal.Title>
        <Modal.CloseButton onClose={() => setOpen(false)} />
        <div>여기에 원하는 콘텐츠를 넣을 수 있습니다.</div>
        <Modal.PrimaryButton
          label="동의하고 저장하기"
          onClick={() => alert('클릭됨')}
        />
      </Modal.Container>
    </>
  );
}
```

## 📘 API Reference

> Modal.Container

| Prop       | Type                   | Required | Description                    |
| ---------- | ---------------------- | -------- | ------------------------------ |
| `open`     | `boolean`              | ✅       | 모달을 열지 여부               |
| `onClose`  | `() => void`           | ✅       | 외부 영역 클릭 시 호출할 함수  |
| `position` | `'center' \| 'bottom'` | ❌       | 모달 위치 (기본값: `'center'`) |
| `style`    | `React.CSSProperties`  | ❌       | 스타일 덮어쓰기                |

> Modal.CloseButton

| Prop      | Type                  | Required | Description                   |
| --------- | --------------------- | -------- | ----------------------------- |
| `onClose` | `() => void`          | ✅       | 닫기 버튼 클릭 시 호출할 함수 |
| `style`   | `React.CSSProperties` | ❌       | 스타일 덮어쓰기 가능          |

> Modal.Title

| Prop       | Type                  | Required | Description          |
| ---------- | --------------------- | -------- | -------------------- |
| `children` | `ReactNode`           | ✅       | 타이틀 텍스트        |
| `style`    | `React.CSSProperties` | ❌       | 스타일 덮어쓰기 가능 |

> Modal.PrimaryButton, Modal.SecondaryButton

| Prop      | Type                  | Required | Description              |
| --------- | --------------------- | -------- | ------------------------ |
| `label`   | `string`              | ✅       | 버튼 텍스트              |
| `onClick` | `() => void`          | ✅       | 버튼 클릭 시 호출할 함수 |
| `style`   | `React.CSSProperties` | ❌       | 스타일 덮어쓰기 가능     |