프로젝트 폴더 구조

[un0211]

.
├── .gitignore
├── .husky
├── public/
│   ├── favicon.ico
│   ├── fonts/
│   ├── icons/
│   └── images/
├── src/
│   ├── components/
│   │   └── Button/
│   │       ├── AButton.tsx
│   │       ├── BButton.tsx
│   │       └── index.tsx
│   ├── constants/
│   ├── containers/
│   ├── contexts/
│   ├── hooks/
│   ├── layouts/
│   ├── pages/
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   └── index.tsx
│   ├── services/
│   ├── styles/
│   │   ├── globals.css
│   │   └── tailwind.css
│   ├── types/
│   └── utils/
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── next.config.mjs
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── README.md
├── tailwind.config.ts
└── tsconfig.json

public/

이미지, 아이콘, 폰트와 같은 정적 파일들 & favicon 등

src/

소스 코드들.

• components/
  전역적으로 쓰이는 공용 컴포넌트들
  • 예) Button/ : 버튼 관련 컴포넌트 모음. index파일로 한 번에 export해서 간편히 쓸 수 있음.
• constants/
  전역적으로 공통으로 쓰이는 상수 값
• containers/
  특정 페이지와 관련된 tsx, css, state, hooks 등을 담은 컨테이너 모음들.
  예) containers/auth/ 에는 auth 페이지와 관련된 것들만 있음
• contexts/
  컨텍스트 모음
• hooks/
  커스텀 훅 모음
• layouts/
  레이아웃 컴포넌트들
• pages/
  페이지 라우트 컴포넌트들
  • _app.tsx : 최상위 컴포넌트 (레이아웃, 스타일, 상태관리 등)
  • _document.tsx : HTML 구조
  • index.tsx : 서비스의 메인 페이지
• services/
  API 호출 로직 모음
• styles/
  글로벌 스타일 및 Tailwind CSS 설정
• types/
  인터페이스, 타입 등 타입스크립트 정의 파일 모음
• utils/
  자주 사용되는 유틸리티 함수 모음
  예) 날짜 포맷팅, 데이터 변환, 문자열 처리 등

[참고]

• https://miriya.net/blog/cliz752zc000lwb86y5gtxstu
• https://velog.io/@juh518/Next.js-폴더-및-파일-구조

[un0211]

지윤님이 작성해주신 폴더구조 정리를 옮겨왔습니다!

• Tailwind CSS를 쓰면서 AButton 폴더를 만들 필요 없이 바로 AButton.tsx 쓰도록 변경했습니다.
• 서버 로직을 만들 일이 지금 계획 상 없을 것 같아 api 부분을 제외했습니다.