1. 목적

• 이 문서는 services/frontend의 현재 구조를 기준으로 협업 규칙을 통일하기 위한 기준이다.
• 신규 기능 추가, 리팩터링, 코드 리뷰 시 본 문서를 기본 규칙으로 사용한다.

2. 기술 스택 기준

• Framework: Next.js (App Router)
• Language: TypeScript (strict: true)
• Styling: Tailwind CSS v4 + CSS variables (src/styles/theme.css)
• Data Fetching: fetch + @tanstack/react-query (점진 전환 중)
• Package Manager: pnpm

3. 프로젝트 구조 규칙

frontend/
  public/
  src/
    app/
      <route>/
        page.tsx
        api/
        components/
        hooks/
        types/
        utils/
      <route>/[param]/
        page.tsx
        api/
        components/
        hooks/
        types/
        utils/
    shared/
      components/
      hooks/
      lib/
      types/
      ui/
      utils/
    styles/
      theme.css

• 라우트 폴더는 src/app 아래에 두고, 기능별로 api/components/hooks/types/utils를 유지한다.
• 빈 디렉터리는 .gitkeep으로 유지한다.
• 공용 로직/컴포넌트는 src/shared/*에 둔다.
• 전역 테마 토큰은 src/styles/theme.css, 전역 프리미티브/리셋은 src/app/globals.css에서 관리한다.

4. 파일/이름 규칙

• 컴포넌트 파일: PascalCase.tsx (예: StockList.tsx)
• 훅 파일: camelCase.ts + use 접두사 (예: useStocks.ts)
• API 파일: camelCase.ts + 동사 시작 (예: getStocks.ts)
• 유틸 파일: camelCase.ts (예: cn.ts)