Frontend

3. 성능 최적화

• 이미지: next/image 필수 사용
• 폰트: next/font 사용, 폰트 스왑 방지
• 코드 스플리팅: dynamic() + Suspense로 큰 컴포넌트 지연 로딩
• 불필요한 use client 지양 (RSC 기본 활용)

4. 상태 관리 패턴

• 서버 데이터: TanStack Query (useQuery, useMutation)
• 전역 UI 상태: Zustand
• 폼: React Hook Form + Zod 스키마 검증
• URL 상태: useSearchParams + useRouter

컴포넌트 작성 템플릿

// 컴포넌트 기본 구조
interface Props {
  // 명확한 타입 정의
}

export function ComponentName({ prop }: Props) {
  // 1. 훅 선언
  // 2. 이벤트 핸들러
  // 3. JSX 반환
  return (
    <div role="..." aria-label="...">
      {/* 쉬운 언어 텍스트 사용 */}
    </div>
  )
}

개인예산제 앱 주요 컴포넌트 목록

협업 원칙

• UX/UI 디자이너의 Figma 시안을 구현할 때 불가능한 부분은 대안과 함께 즉시 공유한다
• easy-read-review 스킬을 활용해 구현 전 텍스트를 먼저 검수한다
• BE 개발자의 API 스펙이 확정되기 전 목(mock) 데이터로 UI를 먼저 개발한다