Board Kit

게시판 기능 키트. API 주소만 바꾸면 바로 동작합니다.

기술 스택

ZustandReact QueryAxiosReact Hook FormZodTypeScript

기능

  • 목록 조회 (페이지네이션, 검색, 정렬)
  • 상세 조회 (조회수, 첨부파일)
  • 게시글 작성 (폼 유효성 검사)
  • 게시글 수정 (기존 데이터 불러오기)
  • 게시글 삭제 (확인 모달)

파일 구조

설치

1. 의존성 설치

2. 코드 복사

아래 코드 탭에서 필요한 파일들을 복사합니다.

3. API 주소 변경

코드

사용 예시

접근성

  • 게시글 목록은 시맨틱 마크업(article, h2) 사용 권장
  • 페이지네이션에 aria-label 및 aria-current 속성 적용
  • 삭제 모달은 AlertDialog 컴포넌트 사용으로 키보드 트랩 및 포커스 관리 자동 처리
  • 폼 유효성 검사 오류 메시지는 aria-describedby로 연결
  • 로딩 상태는 aria-busy 속성으로 스크린 리더에 전달