시작하기

HANUI Kits를 외부 프로젝트에서 사용하는 방법을 안내합니다.

1. 프로젝트 생성

Next.js 프로젝트를 생성하고 필요한 패키지를 설치합니다.

2. 프로젝트 구조

권장하는 폴더 구조입니다. Kit별로 기능을 분리합니다.

3. Provider 설정

React Query Provider를 설정합니다.

QueryProvider.tsx

layout.tsx 수정

4. Kit 코드 복사

사용할 Kit 페이지에서 코드를 복사합니다.

1

types/ 폴더

타입 정의 코드를 src/features/[kit]/types/에 복사

2

api/ 폴더

API 코드를 src/features/[kit]/api/에 복사

3

hooks/ 폴더

React Query 훅을 src/features/[kit]/hooks/에 복사

4

store/ 폴더

Zustand 스토어를 src/features/[kit]/store/에 복사