sales-frontend-gemini-cli 0.4.2 → 0.4.4

package/src/common/rules/naming-rule.md

@@ -0,0 +1,347 @@
+# 03-1. 명명규칙
+
+## 기본 명명 규칙
+
+| 구분                       | 표기법           | 예                            |
+| :------------------------- | :--------------- | :---------------------------- |
+| 1. 프로젝트명              | kebab case       | hli-nxl-dsp-{업무구분코드}-fe |
+| 2. 경로명(pathname 포함)   | kebab case       | /user-info/user-name          |
+| 3. 컴포넌트 함수명         | Pascal case      | UserName                      |
+| 4. 클래스명 / 네임스페이스 | Pascal case      | DataUtil, StringUtil          |
+| 5. 함수명(일반)            | camel case       | getUserName                   |
+| 6. 변수명(일반)            | camel case       | userName                      |
+| 7. 상수명                  | upper snake case | BASE_URL                      |
+| 8. type명                  | Pascal case      | NetworkStatus                 |
+| 9. interface명             | Pascal case      | UserName, ProductName         |
+| 10. enum                   | Pascal case      |                               |
+
+## 파일 명명 규칙
+
+| 구분         | 표기법             | 확장자        | 예                                                                                      |
+| :----------- | :----------------- | :------------ | :-------------------------------------------------------------------------------------- |
+| 1. 컴포넌트  | kebab case         | .tsx          | user-name.tsx                                                                           |
+| 2. 커스텀 훅 | kebab case         | .tsx          | use-user-name.tsx                                                                       |
+| 3. 스타일    | kebab case         | .scss or .css | user-name.module.scss<br>global.css                                                     |
+| 4. 스토리북  | kebab case or 한글 | .stories.tsx  | user-name.stories.tsx or 1\_개인정보처리동의.stories.tsx<br>(관리하기 쉬운 네이밍)      |
+| 5. 유틸리티  | kebab case         | .ts           | user-name-utils.ts<br>{유틸리티명}-utils.ts                                             |
+| 6. 타입      | kebab case         | .ts           | user-name.types.ts<br>{이름}.types.ts<br>(외부 사용이 필요한 부분은 별도의 파일로 분리) |
+| 7. dto 타입  | kebab case         | .ts           | user-name.dto.ts<br>{백엔드 주제영역명}.dto.ts                                          |
+| 8. declare   | kebab case         | .d.ts         | user-name.d.ts                                                                          |
+
+- \*\* 리액트와 관련된 것들은 .tsx로 통일 (커스텀 훅, 컨텍스트 등)
+
+## 컴포넌트 명명 규칙
+
+- 표기법: Pascal case
+- 단일 책임 원칙을 기반으로 한 컴포넌트 이름(특히 공통)
+- 숫자, 특수문자 사용 X, 의미와 목적이 들어나는 네이밍, 두문자어도 파스칼 케이스 사용
+
+```javascript
+1 // ✅ 목적/의미 분명, Full Name
+2 export const LoginForm = ({}: LoginFormProps) => {
+3 ...
+4 }
+5
+6 // ❌ 숫자
+7 export const UserView1 = () => {
+8 ...
+9 }
+10
+11 // ✅ 두문자어
+12 export const HtmlEdidor = () => {
+13 ...
+14 }
+15 // ❌ 두문자어
+16 export const HTMLEdidor = () => {
+17 ...
+18 }
+19
+20
+21 // ❌ 약어, 축약형
+22 export const UsrPrfl = () => {
+23 ...
+24 }
+25
+26 // ❌ 특수문자
+27 export const User_Profile = () => {
+28 ...
+29 }
+```
+
+## 함수 명명 규칙
+
+- 표기법: camel case
+
+```javascript
+1 // ✅ camel case
+2 const getCamelCase = () => { ... }
+3
+4 // ❌
+5 const Get_Camel_Case = () => { ... }
+6
+7 // ❌
+8 const GetCamelCase = () => { ... }
+```
+
+- 동사로 시작
+
+```javascript
+1 // ✅ 동사로 시작
+2 const getCamelCase = () => { ... }
+3
+4 // ❌ non 동사
+5 const camelCase = () => { ... }
+```
+
+- 최대한 구체적 + 목표분명 + 한 가지 책임을 담당하는 함수명
+- 함수의 역할을 명확히 알 수 있도록 하고 로직이 과도하게 몰리는 걸 방지하기 위함
+
+```javascript
+1 // ✅ 구체적이고 단일목적
+2 const formatDateToKorean = () => { ... }
+3
+4 // ❌ 추상, 줄임
+5 const format = () => { ... }
+```
+
+- 조건부
+- is/has/should + 조건
+
+```javascript
+1 // ✅ 조건부 (is/has/should + 대상)
+2 const isTablet = () => { ... }
+3 const hasChildren = () => { ... }
+4 const shouldPreventEvent = () => { ... }
+```
+
+- API 호출함수
+- C(create): create + 대상 + (상세정보) (예: createUserProfile)
+- R(read): 단건: get + 대상 + (상세정보) (예: getUserProfile), 다건: getList + 대상 + (상세정보) (예: getListUserProfile)
+- U(update): update + 대상 + (상세정보) (예: updateUserProfile)
+- D(delete): delete + 대상 + (상세정보) (예: deleteUserProfile)
+
+```javascript
+1 // ✅ 단건 조회 API 호출 (get + 대상)
+2 const getUserName = () => { ... }
+3
+4 // ✅ 다건 조회 API 호출 (getList + 대상)
+5 const getListrUserName = () => { ... }
+6
+7 // ✅ update 성격의 API 호출 (update + 대상)
+8 const updateUserName = () => { ... }
+9
+10 // ✅ 삭제 성격의 API 호출 (delete + 대상)
+11 const deleteUserName = () => { ... }
+12
+13 // ✅ insert 성격의 API 호출 (create + 대상)
+14 const createUserName = () => { ... }
+```
+
+- 데이터 변환
+- convert / format / parse + 대상
+
+```javascript
+1 // ✅ 변환 함수 (convert/format/parse + 대상)
+2 const convertUserName = () => { ... }
+3 const formatUserName = () => { ... }
+4 const parseUserName = () => { ... }
+```
+
+- 검증
+- validate + 대상
+
+```javascript
+1 // ✅ 데이터 검증 (validate + 대상)
+2 const validateUserName = () => { ... }
+```
+
+- 이벤트 핸들러
+- handle + 대상
+
+```javascript
+1 // ✅ 이벤트 핸들러 (handle + 이벤트타입 + 대상)
+2 const handleUserNameClick = () => { ... }
+3 const handleModalClose = () => { ... }
+4
+5 // ✅ 이벤트 핸들러를 Props로 넘길 땐(on + 핸들러 함수)
+6 <UserName onUserNameClick={handleUserNameClick} onModalClose={handleModalClose}/>
+```
+
+- 초기화 / 생성
+- create / initialize + 대상
+
+```javascript
+1 // ✅ 초기화 및 객체 생성(create/initialize + 대상)
+2 const createApiInstance = () => { ... }
+3 const initializeLoginInfomation = () => { ... }
+```
+
+## 변수 명명 규칙
+
+- \*\* 단, 백엔드에서 정의된 필드는 그대로 따른다.
+- 기본 표기법: camel case (object 포함)
+- 상수: Upper Snake case
+
+```javascript
+1 // ✅ camel case
+2 const userName = '김한화';
+3
+4 // ✅ 상수 case
+5 const USER_NAME = '김한화';
+6
+7 // ✅ object case
+8 const testUtils = {
+9 convertCurrency() {...}
+10 }
+11
+12
+13 // ❌
+14 const user_name = '';
+15 const UserName = '';
+16 const User_Name = '';
+17 const TestUtils = {...};
+```
+
+- 의미 있고 구체적인 이름
+
+```javascript
+1 // ✅ 구체적
+2 const userName = '김한화';
+3 const isEmailValidated = false;
+4
+5 // ❌
+6 const un = ''
+7 const total = 0;
+8 const item = [];
+9
+10 // ❌ ❌ ❌ 진짜 금지
+11 const flag = false;
+```
+
+- 숫자
+
+```javascript
+1 // ✅ 개수 관련 count, total, num 접두사/접미사 활용
+2 const userCount = 100;
+3 const totalUsers = 1000;
+4 const numPages = 100;
+5
+6
+7 // ✅ 크기/양 관련 size, amount, length 접미사 활용
+8 const fileSize = 100;
+9 const fileAmount = 100;
+10 const fileLength = 100;
+```
+
+- 배열
+
+```javascript
+1 // ✅ 복수형으로 내용을 정확하게 표현
+2 const selectedUsers = [];
+3 const errorMessages = [];
+4
+5
+6 // ❌ 단수, 추상적 영문명
+7 const user = [];
+8 const data = [];
+```
+
+- boolean
+
+```javascript
+1 // ✅ is/has/should 접두사 활용
+2
+3 // ~이다 ,아니다
+4 const isLoading = false;
+5 const isValid = false;
+6
+7 // 갖다, 아니다
+8 const hasError = false;
+9
+10 // 해야할지, 말아야할지
+11 const shouldUpdate = false;
+```
+
+- Class
+
+```javascript
+1 // ✅ pascal case
+2 class BridgeCore {}
+3
+4 // ❌
+5 class bridgeCore {}
+```
+
+## Type, Interface 명명 규칙
+
+- 기본 표기법: Pascal Case
+
+```typescript
+1 // ✅ Pascal case
+2 interface UserInfo {
+3 id: string;
+4 name: string;
+5 }
+6
+7 // ✅ Swagger DTO 명 그대로 승계
+8 interface ApiResponse<T> {
+9 data: T;
+10 messaege: string;
+11 }
+12
+13 // ❌
+14 interface User_Info {}
+15
+16 // ❌
+17 interface I_User_ {}
+```
+
+- Type: Pascal Case
+
+```typescript
+1 // ✅ Pascal case
+2 type UserName = 'user' | 'admin';
+3
+4 // ✅
+5 type ApiStatus = 'sucess' | 'loading' | 'error';
+6
+7 // ❌
+8 type TUserName = 'user' | 'admin';
+9
+10 // ❌
+11 type API_STATUS = 'sucess' | 'loading' | 'error';
+```
+
+- interface 사용 case
+- DTO: Swagger에 정의된 Request/Response 명을 그대로 따른다.
+
+```typescript
+1 // ✅ 객체 구조 정의
+2 interface UserInfo {
+3 }
+4
+5 // ✅ class 구현을 위한 정의
+6 interface BridgeController {
+7 call() => void;
+8 open() => void;
+9 }
+10
+11 // ✅ 확장 가능한 구조
+12 interface BaseConfig {}
+13 interface ApiClient extends BaseConfig {}
+14
+15
+16 // ✅ Swagger에 UserInfoRequest/UserInfoResponse 라고 정의된 경우
+17 interface UserInfoRequest {}
+18 interface UserInfoResponse {}
+```
+
+- Type 사용 case
+
+```typescript
+1 // 유니온 타입
+2 type Status = 'sucess' | 'loading' | 'reject';
+3
+4 // 조건 케이스
+5 type NonNullable<T> = T extends null | undefined ? never : T;
+```