9cc8f6b66a
- CLAUDE.md: React/TypeScript/Vite 프로젝트 가이드 - .claude/settings.json: npm/Node.js 빌드 도구 권한 설정 - .claude/rules/: TypeScript/React 코드 스타일, 네이밍, 테스트 규칙 - .githooks/pre-commit: TypeScript 타입체크 + ESLint 검증 - .npmrc: Nexus npm 프록시 레지스트리 - .prettierrc: 코드 포맷팅 설정 - .node-version: Node.js 버전 고정
54 lines
1.9 KiB
Markdown
54 lines
1.9 KiB
Markdown
# TypeScript/React 네이밍 규칙
|
|
|
|
## 파일명
|
|
|
|
| 항목 | 규칙 | 예시 |
|
|
|------|------|------|
|
|
| 컴포넌트 | PascalCase | `UserCard.tsx`, `LoginForm.tsx` |
|
|
| 페이지 | PascalCase | `Dashboard.tsx`, `UserList.tsx` |
|
|
| 훅 | camelCase + use 접두사 | `useAuth.ts`, `useFetch.ts` |
|
|
| 서비스 | camelCase | `userService.ts`, `authApi.ts` |
|
|
| 유틸리티 | camelCase | `formatDate.ts`, `validation.ts` |
|
|
| 타입 정의 | camelCase | `user.types.ts`, `api.types.ts` |
|
|
| 상수 | camelCase | `routes.ts`, `constants.ts` |
|
|
| 스타일 | 컴포넌트명 + .module | `UserCard.module.css` |
|
|
| 테스트 | 대상 + .test | `UserCard.test.tsx` |
|
|
|
|
## 변수/함수
|
|
|
|
| 항목 | 규칙 | 예시 |
|
|
|------|------|------|
|
|
| 변수 | camelCase | `userName`, `isLoading` |
|
|
| 함수 | camelCase | `getUserList`, `formatDate` |
|
|
| 상수 | UPPER_SNAKE_CASE | `MAX_RETRY`, `API_BASE_URL` |
|
|
| boolean 변수 | is/has/can/should 접두사 | `isActive`, `hasPermission` |
|
|
| 이벤트 핸들러 | handle 접두사 | `handleClick`, `handleSubmit` |
|
|
| 이벤트 Props | on 접두사 | `onClick`, `onSubmit` |
|
|
|
|
## 타입/인터페이스
|
|
|
|
| 항목 | 규칙 | 예시 |
|
|
|------|------|------|
|
|
| interface | PascalCase | `UserProfile`, `ApiResponse` |
|
|
| Props | 컴포넌트명 + Props | `UserCardProps`, `ButtonProps` |
|
|
| 응답 타입 | 도메인 + Response | `UserResponse`, `LoginResponse` |
|
|
| 요청 타입 | 동작 + Request | `CreateUserRequest` |
|
|
| Enum | PascalCase | `UserStatus`, `HttpMethod` |
|
|
| Enum 값 | UPPER_SNAKE_CASE | `ACTIVE`, `PENDING` |
|
|
| Generic | 단일 대문자 | `T`, `K`, `V` |
|
|
|
|
## 디렉토리
|
|
|
|
- 모두 kebab-case 또는 camelCase (프로젝트 통일)
|
|
- 예: `src/components/common/`, `src/hooks/`, `src/services/`
|
|
|
|
## 컴포넌트 구조 예시
|
|
|
|
```
|
|
src/components/user-card/
|
|
├── UserCard.tsx # 컴포넌트
|
|
├── UserCard.module.css # 스타일
|
|
├── UserCard.test.tsx # 테스트
|
|
└── index.ts # re-export
|
|
```
|