Henry229 remix-practice-diary .cursorrules file for TypeScript

# 규칙

## 패키지 매니저
- **패키지 매니저**: `npm`을 사용합니다.

## UI 컴포넌트 생성
- **ShadCN 컴포넌트를 우선적으로 활용합니다.**
- **ShadCN 컴포넌트 추가 명령어**:
  - CLI 명령어 예시: `npx shadcn@latest add button`

# Remixjs 사용 지침

## 라우팅 규칙
- **폴더 기반 라우팅**: `app/routes` 폴더 내에서 라우팅 구조를 관리합니다.
- **중첩 라우팅**: 폴더 구조를 통해 중첩 라우팅을 구현합니다. 중첩은 remix에서 2단계 depth까지만 인식이 가능하여
  그 이상의 depth는 아래와 같이 '.'으로 구분합니다.
  - 예시: `posts.$postId.edit/route.tsx`

## 데이터 처리
- **loader 사용**:
  - GET 요청 처리에 사용
  - 페이지 렌더링 전 데이터 로드
  - `useLoaderData` 훅으로 데이터 접근
  
- **action 사용**:
  - POST, PUT, DELETE 등 데이터 변경 요청 처리
  - Form 제출 처리
  - 서버 사이드 로직 실행

## 상태 관리
- **URL 상태 활용**: 가능한 한 URL 파라미터와 쿼리 스트링으로 상태 관리
- **Form 컴포넌트**: Remix의 `Form` 컴포넌트 사용으로 프로그레시브 인핸스먼트 구현

## 에러 처리
- **ErrorBoundary**: 각 라우트별 에러 처리 컴포넌트 구현
- **CatchBoundary**: 예상된 에러(404 등) 처리

## 성능 최적화
- **prefetch**: `<Link prefetch="intent">` 사용으로 사용자 경험 개선
- **캐싱**: Response 헤더를 통한 적절한 캐싱 전략 수립

## 타입스크립트 활용
- **타입 안정성**: loader와 action 함수의 반환 타입 명시
- **zod 활용**: 데이터 검증에 client side에서만 zod 스키마 사용 권장