project-title/
│
├── public/
│   ├── images/             # 이미지 파일 폴더
│   └── svg/                # svgr로 관리하는 svg 파일 폴더
│
├── components/             # 재사용 가능한 컴포넌트
│   ├── @common/            # 공통 컴포넌트
│   │   ├── GlobalNavBar.tsx
│   │   └── Footer.tsx
│   ├── auth/               # 회원가입 페이지에 들어갈 컴포넌트 모음
│   │   ├── SimpleLogin.tsx
│   │   └── SubmitForm.tsx
│   └── boards/             # boards 페이지에 들어갈 컴포넌트 모음
│       └── index/          # index에 들어갈 컴포넌트 모음
│           ├── SimpleLogin.tsx
│           └── SubmitForm.tsx
│       └── id/             # boards/[id]에 들어갈 컴포넌트 모음
│
├── app/                    # Next.js app routing (내부 구조 어떻게)
│   └── (groups)/           # route groups으로 layout, loading 등등 공통 관리
│       ├── layout.tsx
│       └── accout/
│           └── page.tsx
│       └── cart/
│           └── page.tsx
│   └── mypage/
│       ├── layout.tsx
│       └── page.tsx
│
├── apis/
│   └── auth/           # auth와 관련된 fetch 요청 함수
│       ├── signUpUser.api.ts
│       └── logInUser.api.ts
│   └── articles/       # articles와 관련된 fetch 요청 함수
│       ├── getArticles.api.ts
│       └── postArticle.api.ts
│
├── queries/                # Tanstack-Query 훅
│   └── users.queries.ts
│
├── store/                  # 전역 상태 관리 (zustand)
│   └── useAuthStore.ts
│
├── dtos/                  # 타입 폴더 (타입은 api 관련만 공통으로)
│   ├── common.types.ts
│   └── auth.types.ts
│
├── styles/                 # 스타일 관련 파일 모음
│   └── global.css
│
├── constants/              # 상수 폴더
│   ├── queryKeys.ts        # query key값은 unique 해야 하기 때문에 하나의 폴더에서 관리 하면 좋을 듯
│   └── mediaQueryBreakPoint.ts
│
├── hooks/                  # 커스텀 React 훅
│
├── utils/                  # 유틸리티 함수 폴더
│
├── .gitignore
├── .env.local
├── .eslintrc.json
├── .prettierrc.json
├── next.confing.mjs
├── tailwind.config.ts
├── tsconfig.json
│
...생략