# 프론트엔드 개발팀 코딩 규칙 (Frontend Development Style Guide)

본 문서는 코드의 일관성을 유지하고, 가독성을 높이며, 협업 효율을 극대화하기 위한 프론트엔드 개발팀의 공식 코딩 규칙을 정의합니다. 모든 프로젝트 구성원은 이 규칙을 숙지하고 준수해야 합니다.
## 0. 항상 한국어로 대답해주세요.
## 1. 📂 파일 및 폴더 구조 (File & Directory Structure) 일관된 구조는 프로젝트의 파악을 용이하게 하고 파일 탐색 시간을 줄여줍니다.
-   **컴포넌트**: 모든 재사용 가능한 컴포넌트는 `src/components` 내에 위치시킵니다.
    -   컴포넌트 관련 파일(Style, Test, Storybook 등)은 하나의 폴더로 그룹화합니다.
    -   **구조 예시**:
        ```
        /components
        └── Button
            ├── index.ts           # 컴포넌트 export 담당
            ├── Button.tsx         # 컴포넌트 로직
            ├── Button.module.css  # CSS 모듈 스타일
            └── Button.test.tsx    # 테스트 코드
        ```
-   **페이지**: 라우팅의 단위가 되는 페이지 컴포넌트는 `src/pages` 또는 `src/app` (Next.js App Router) 내에 위치시킵니다.
-   **API 로직**: API 요청 및 관련 로직은 `src/apis` 또는 `src/services` 디렉토리에서 관리합니다.
-   **Hooks**: 여러 컴포넌트에서 재사용되는 커스텀 훅은 `src/hooks` 디렉토리에서 관리합니다.
-   **타입**: 전역적으로 사용되는 TypeScript 타입은 `src/types` 또는 `src/interfaces` 디렉토리에서 관리합니다.

## 2. 📛 네이밍 컨벤션 (Naming Convention)

예측 가능한 네이밍은 코드의 가독성을 향상시킵니다.

-   **컴포넌트**: 파스칼 케이스(PascalCase)를 사용합니다.
    -   `Button.tsx`, `Modal.tsx`
-   **파일 및 폴더**: 케밥 케이스(kebab-case) 또는 파스칼 케이스(PascalCase)를 사용하되, 프로젝트 내에서 일관성을 유지합니다. 컴포넌트 폴더는 파스칼 케이스를 권장합니다.
    -   `/user-profile`, `/common-hooks` (폴더)
    -   `Button`, `UserProfile` (컴포넌트 폴더)
-   **변수/함수**: 카멜 케이스(camelCase)를 사용합니다.
    -   `const userName = '...';`
    -   `function getUserInfo() { ... }`
-   **TypeScript 타입/인터페이스**: 파스칼 케이스(PascalCase)를 사용하며, 컴포넌트 Props는 `컴포넌트명Props` 형식을 따릅니다.
    -   `interface UserInfo { ... }`
    -   `type ButtonProps = { ... }`
-   **이벤트 핸들러**: `handle` 접두사 + `이벤트명`으로 작성합니다.
    -   `const handleClick = () => { ... };`
    -   `const handleChange = (e) => { ... };`

## 3. 🎨 코드 스타일 및 포맷팅 (Code Style & Formatting)

-   **컴포넌트 선언**: 클래스형 컴포넌트 대신 **함수형 컴포넌트**와 **화살표 함수**를 사용합니다.
    ```typescript
    const MyComponent: React.FC<MyComponentProps> = ({ prop1, prop2 }) => {
      // ...
    };
    ```
-   **상태 관리**: 간단한 상태는 `useState`를, 복잡한 상태 로직은 `useReducer`를 사용합니다.
-   **스타일링**: CSS-in-JS (e.g., Styled-components, Emotion) 또는 CSS Modules 사용을 원칙으로 하여 스타일의 스코프를 컴포넌트로 한정합니다.
-   **들여쓰기(Indent)**: 스페이스 2칸을 사용합니다.
-   **세미콜론(Semicolon)**: 문장의 끝에는 세미콜론을 붙입니다.
-   **따옴표(Quotes)**: JSX/TSX의 속성 외의 모든 문자열에는 작은따옴표(`'`)를 사용합니다.
-   **불변성**: 배열과 객체를 직접 수정하지 않고, 전개 연산자(`...`)나 `map`, `filter` 등의 메서드를 사용하여 새로운 배열/객체를 반환합니다.

## 4. ⚙️ API 핸들링 (API Handling)

-   **요청 함수**: API 요청은 `try...catch` 문으로 감싸 에러 핸들링을 필수로 합니다.
-   **상태**: API 요청과 관련된 상태는 `loading`, `data`, `error` 3가지로 명확하게 관리합니다.
    ```typescript
    const [state, setState] = useState({
      loading: false,
      data: null,
      error: null,
    });
    ```
-   **클라이언트**: `axios` 또는 내장 `fetch` API를 사용하되, 프로젝트 전반에 걸쳐 일관된 클라이언트를 사용합니다. `axios`의 경우 인스턴스를 생성하여 `baseURL`, `timeout` 등을 설정합니다.

## 5. ✅ 테스팅 (Testing)

-   **단위 테스트**: 유틸리티 함수, 커스텀 훅 등 비즈니스 로직은 반드시 단위 테스트를 작성합니다.
-   **컴포넌트 테스트**: 주요 컴포넌트는 `React Testing Library`를 사용하여 렌더링 결과와 사용자 상호작용을 테스트합니다.
-   **테스트 파일 위치**: 테스트할 파일과 동일한 경로에 위치시키고 `.test.ts` 또는 `.test.tsx` 확장자를 사용합니다.

## 6. 💬 커밋 메시지 (Commit Messages)

프로젝트 히스토리의 가독성과 추적을 위해 **Conventional Commits** 규칙을 따릅니다.

-   **형식**: `<type>(<scope>): <subject>`
-   **주요 타입**:
    -   `feat`: 새로운 기능 추가
    -   `fix`: 버그 수정
    -   `docs`: 문서 수정
    -   `style`: 코드 포맷팅, 세미콜론 누락 등 (코드 변경이 없는 경우)
    -   `refactor`: 코드 리팩토링
    -   `test`: 테스트 코드 추가/수정
    -   `chore`: 빌드 업무 수정, 패키지 매니저 설정 등
-   **예시**:
    ```
    feat(auth): 로그인 기능 및 UI 구현
    fix(header): 모바일 환경에서 로고가 깨지는 문제 수정
    ```

{{{input}}}

## 1. 파일 및 폴더 구조 (File & Directory Structure)
- 페이지 컴포넌트는 `src/pages` 내에 위치시킵니다. - 페이지 컴포넌트 관련 파일(Style, Test 등)은 하나의 폴더로 그룹화합니다. - **구조 예시**:
  ```
  /pages
  └── Home
      ├── index.ts           # 컴포넌트 export 담당
      ├── Home.tsx         # 컴포넌트 로직
      ├── Home.module.css  # CSS 모듈 스타일
      └── Home.test.tsx    # 테스트 코드
  ```
- **페이지 컴포넌트 예시**:
  ```tsx
  import React from "react";
  import styles from "./Home.module.css";

  const Home: React.FC = () => {
    return <div className={styles.container}>HomePage</div>;
  };

  export default Home;
  ```

## 2. 라우팅 추가
- `src/main.tsx`에 신규 생성한 `<Route/>` 컴포넌트를 추가합니다.  - **example**:
  ```
  <Route path="/home" element={<Home />} />
  ```