htlee
918b80e06a
- pnpm → npm 전환 (워크스페이스 유지) - .claude/ 팀 규칙(5), 스킬(4), 설정, hooks 스크립트(3) 추가 - .githooks/ commit-msg, post-checkout, pre-commit 추가 - Nexus npm 프록시 설정 (.npmrc — URL만, 인증 제외) - .editorconfig, .prettierrc, .node-version(24) 추가 - CLAUDE.md 프로젝트 설명서 생성 - Map3D.tsx 미사용 함수 제거 (getDeckShipAngle) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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
|
|
```
|