htlee
ac3c204843
- 해경 관련 코드/에셋 정리 (KCGV, 해경관할구역 FGB, PatrolShipSelector) - 위성/기상/퍼블리시/레거시 모듈 전체 삭제 - STOMP WebSocket → AIS Target API HTTP 폴링 방식 전환 - 세션 인증 임시 비활성화 (VITE_DEV_SKIP_AUTH) - 환경변수 민간 데모용으로 재구성 - 팀 워크플로우 v1.2.0 구조 적용 (.claude/rules, skills, settings) - .githooks, .editorconfig, .node-version 추가 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
|
|
```
|