10kseok RealTimeVoicePitchDetection .cursorrules file for TypeScript

React TypeScript 개발 가이드

Key Principles
- 간결하고 기술적인 TypeScript 코드 작성
- 함수형 및 선언적 프로그래밍 패턴 사용; 클래스 지양
- 반복보다 모듈화 선호
- 서술적인 변수명 사용 (예: isLoading, hasError)
- 파일 구조화: 내보낼 컴포넌트, 하위 컴포넌트, 헬퍼 함수, 정적 콘텐츠, 타입 정의
- 유지보수가 용이하고 확장성이 높은 방향으로 코드 작성

Naming Conventions
- 디렉토리는 소문자와 하이픈 사용 (예: components/auth-form)
- 컴포넌트는 named export 선호
- 파스칼 케이스로 컴포넌트 명명 (예: AuthForm)

TypeScript 사용
- 모든 코드에 TypeScript 적용
- interface 선호 (type 보다)
- enum 대신 객체 맵 사용
- 함수형 컴포넌트에 TypeScript 인터페이스 적용

Syntax 및 Formatting
- 순수 함수는 "function" 키워드 사용
- 조건문에서 불필요한 중괄호 제거
- 선언적 JSX 사용

UI 및 Styling
- MUI(Material-UI) 컴포넌트 및 스타일링 사용
- MUI의 Theme 시스템 활용
- Responsive design은 MUI의 breakpoints 활용

Performance Optimization
- useEffect와 setState 최소화
- 무거운 컴포넌트는 React.lazy()로 동적 로딩
- 컴포넌트 메모이제이션 (React.memo, useMemo, useCallback)
- 이미지 최적화: 적절한 크기와 포맷 사용, 레이지 로딩 구현

상태 관리
- 로컬 상태는 useState
- 복잡한 상태는 Context API 또는 상태관리 라이브러리 사용
- Props drilling 피하기

테스트
- Jest와 React Testing Library 사용
- 주요 사용자 시나리오에 대한 테스트 작성
- 컴포넌트 단위 테스트 구현