Kits

실전에서 바로 사용 가능한 기능 키트. API 주소만 바꾸면 바로 동작합니다.

개요

Hanui Kits는 실무에서 자주 사용되는 기능을 패턴화한 복사-붙여넣기 코드 모음입니다. shadcn/ui의 철학을 따라, 코드를 직접 소유하고 필요에 맞게 수정할 수 있습니다.

Zero-config: 의존성 설치 후 바로 사용
Type-safe: TypeScript로 작성된 안전한 코드
Accessible: WCAG 2.1 AA 기준 준수
Customizable: 프로젝트에 맞게 자유롭게 수정 가능

기술 스택

모든 Kit은 아래 기술 스택을 기반으로 구현되어 있습니다.

ZustandReact QueryAxiosReact Hook FormZodTypeScript

라이브러리	역할	사용처
`Zustand`	경량 상태관리	모든 Kit에서 전역 상태 관리
`React Query`	서버 상태 관리	API 호출 및 캐싱
`Axios`	HTTP 클라이언트	REST API 통신
`React Hook Form`	폼 상태 관리	폼 입력 및 유효성 검증
`Zod`	스키마 검증	타입 안전한 데이터 검증

Kits 목록

현재 제공되는 Kit 목록입니다. 각 Kit을 클릭하면 상세 페이지로 이동합니다.

Board Kit

Available

게시판 기능 키트 (목록, 상세, 작성, 수정, 삭제)

CRUD페이지네이션검색댓글

9개 파일자세히 보기 →

Auth Kit

Available

인증 기능 키트 (로그인, 회원가입, 비밀번호 찾기)

로그인/로그아웃회원가입비밀번호 재설정토큰 갱신

10개 파일자세히 보기 →

Table Kit

Available

데이터 테이블 키트 (정렬, 필터, 페이지네이션, CSV 내보내기)

정렬필터페이지네이션CSV 내보내기

8개 파일자세히 보기 →

Form Kit

Available

폼 키트 (기본 폼, 다단계 폼, 파일 업로드, 동적 필드)

다단계 폼파일 업로드동적 필드유효성 검증

9개 파일자세히 보기 →

Dashboard Kit

Available

대시보드 키트 (통계 카드, 차트, 최근 활동)

통계 카드차트활동 피드실시간 업데이트

10개 파일자세히 보기 →

사용 방법

Kits는 두 가지 방법으로 설치할 수 있습니다.

방법 1: CLI로 설치 (권장)

CLI가 자동으로 필요한 파일과 의존성을 설치합니다.

방법 2: 수동 설치

Kit 선택

필요한 Kit 페이지로 이동합니다.

의존성 설치

Kit에 필요한 패키지를 설치합니다.

코드 복사

필요한 파일들의 코드를 복사합니다.

API 주소 변경

api/*.ts 파일의 API_URL을 실제 서버 주소로 변경합니다.

CLI 명령어

Hanui CLI를 사용하면 Kit을 더 편리하게 설치할 수 있습니다.

자동으로 필요한 의존성 설치
파일 구조 자동 생성
기존 파일 충돌 시 확인 프롬프트

접근성

모든 Kit은 다음 접근성 기준을 준수합니다.

기준	설명	적용
`WCAG 2.1 AA`	웹 접근성 지침	전체 Kit 적용
`키보드 네비게이션`	키보드만으로 모든 기능 사용 가능	전체 Kit 적용
`스크린 리더`	적절한 ARIA 레이블 제공	전체 Kit 적용
`색상 대비`	최소 4.5:1 대비율 보장	KRDS 색상 시스템
`폼 레이블`	모든 입력 필드에 레이블 연결	Form, Auth Kit