👮🏻 코드 컨벤션

📌 네이밍 컨벤션

폴더: lower-kebap-case

• 케밥 케이스 (kebab-case)를 사용하여 폴더 이름을 작성해요.
• 일반적으로 컴포넌트, 페이지, 훅 등의 폴더를 구조화하며, 폴더명은 모두 소문자로 작성하는 것을 원칙으로 해요.

파일: camelCase, PascalCase

• 컴포넌트 파일: 파스칼 케이스 (PascalCase) 사용해요.

  Button.jsx, HomePage.jsx처럼, 각 컴포넌트 파일은 첫 글자를 대문자로 하고 파스칼 케이스로 작성하여 컴포넌트를 명확하게 구분해요.

• 일반 파일 (유틸리티 함수, API 파일 등): 카멜 케이스 (camelCase) 사용해요.

  formatDate.js, useFetch.js와 같이, 일반 파일은 함수명처럼 카멜 케이스를 사용해 구분해요.

• 줄임말은 금지! 하기로 약속했어요. (예 : idx → index)

함수: camelCase

• 동사 + 명사: 함수명은 동사 + 명사 형태로, 함수의 동작과 대상이 명확히 해야해요.
  • 예시: getUserInfo, updateProductList, calculateTotalPrice
• 카멜 케이스: 함수명도 첫 글자를 소문자로 시작하며, 단어의 첫 글자는 대문자로 작성해요.
  • 예시: fetchData, saveUserData, resetForm

변수: camelCase

• 명사 + 명사: 두 개 이상의 단어로 구성된 변수명은 명사 + 명사 형태로 작성해요.
  • 예시: userList, productDetails, orderHistory
• 카멜 케이스: 변수명은 첫 글자를 소문자로 시작하고, 단어의 첫 글자는 대문자로 표기해요.
  • 예시: totalPrice, userProfile, orderId

기타:

• Boolean 변수: 참/거짓을 나타내는 변수는 is, has, can 등의 접두사를 사용, Boolean임을 명확히 해야해요.
  • 예시: isLoggedIn, hasPermission, canEdit
• Boolean 함수: 참/거짓을 리턴하는 함수는 check 접두사를 사용.
  • 예시: checkLoggedIn, checkPermission, checkEditable
• 상수: 상수명은 모든 글자를 대문자로 작성하며, 단어 사이에 _ 사용.
  • 예시: MAX_RETRY_COUNT, API_BASE_URL, DEFAULT_TIMEOUT

FE

항목	예시	네이밍 규칙
컴포넌트 폴더	button/, header/	케밥 케이스
컴포넌트 파일	Button.jsx	파스칼 케이스
페이지 컴포넌트	Home.jsx, About.jsx	파스칼 케이스
일반 함수 및 유틸리티	formatDate.js	카멜 케이스
커스텀 훅 파일	useFetch.js	카멜 케이스
스타일 파일	Button.css	컴포넌트 이름과 동일

BE

항목	예시	네이밍 규칙
라우트 파일	userRoutes.js	카멜 케이스
컨트롤러 파일	userController.js	카멜 케이스
모델 파일	userModel.js	카멜 케이스
미들웨어 파일	authMiddleware.js	카멜 케이스
서비스 파일	userService.js	카멜 케이스
유틸리티 파일	formatDate.js	카멜 케이스
폴더	controllers, models	케밥 케이스

📌 코드 문서화 컨벤션

(주석, API 문서화, readme 규칙 등)

컴포넌트: Storybook

• 스토리북으로 컴포넌트를 문서화하고, 스토리북 코드는 같은 디렉토리에 작성해요.

util 함수, 커스텀 훅: TypeDoc

• TSDoc 주석을 통해 util 함수, 커스텀훅을 TypeDoc으로 문서화할 수 있도록 작성해요.

• 예시 코드:

/**
 * 주어진 날짜를 원하는 형식의 문자열로 변환합니다.
 * @description
 * 지원하는 포맷:
 * - 'YYYY-MM-DD'
 * - 'MM/DD/YYYY'
 * - 'DD-MM-YYYY'
 * 
 * @param date - 변환할 Date 객체
 * @param format - 원하는 날짜 형식 (기본값: 'YYYY-MM-DD')
 * @returns 포맷된 날짜 문자열
 * 
 * @example
 * const date = new Date('2024-01-01');
 * const formatted = formatDate(date, 'MM/DD/YYYY');
 * console.log(formatted); // "01/01/2024"
 */
export const formatDate = (date: Date, format: string = 'YYYY-MM-DD'): string => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return format
    .replace('YYYY', year.toString())
    .replace('MM', month)
    .replace('DD', day);
};