📁 디렉토리 구조 (./src)

• app/: app router 기반 폴더 생성
  • api/: router-handler 작성
• public/: 이미지, 파비콘, 폰트 등의 정적 파일을 저장
• components/: 페이지 내에서 사용되는 컴포넌트 작성
  • commons/: 프로젝트 전반적으로 사용되는 공통 컴포넌트
  • (영역)/: 개인마다 사용할 디렉터리 (예: my-page/)
• lib/: 유틸리티 함수 등을 저장
  • utils/: 유틸리티 함수
  • services/: 서버 통신 함수 (서버액션)
• hooks/: 커스텀 훅
  • mutations/: useQuery훅 정의
  • queries/: useMutation훅 정의
• store/ : zustand, 클라이언트 전역 상태관리 디렉터리
• constants/: 프로젝트 전반에 사용되는 상수를 저장합니다.

📦 
├── public/
├── src/
│   ├── app/
│   │   ├── api/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── components/
│   │   ├── commons/
│   │   └── ui(temp)/
│   ├── constants/
│   ├── libs/		
│   │   ├── utils/유틸리티함수 
│   │   └── services/서버통신함수
│   ├── hooks/
│   ├── store/
│   ├── types/
│   └── constants/
└── tsconfig.json

네이밍의 종류

• PascalCase (파스칼 케이스) : 컴포넌트 (단, NextJS에 의한 컴포넌트들은 프레임워크에 의해 이름이 정해져있으므로 예외입니다.)
• camelCase (카멜 케이스) : 함수, 변수명, 파일명
• kebab-case (케밥 케이스) : 폴더
• snake_case (스네이크 케이스) : 환경변수, 상수 등

패키지 매니저

• pnpm 사용

API 함수 명