설명
src/
│
├── app/ // 라우터 폴더
│ └── admin/ // /admin 라우터
│ └── page.tsx // /admin으로 접근 시 렌더링 되는 컴포넌트
│ └── page.tsx // 루트 라우터
│
├── components/ // 컴포넌트 폴더
│ ├── admin/ // admin 페이지에서만 사용하는 컴포넌트
│ │ ├── container/ // core와 view를 합친 컨테이너 컴포넌트(페이지 컴포넌트에서 호출)
│ │ └── core/ // 비즈니스 로직 포함 컴포넌트(ex - 로그인 버튼)
│ │ └── view/ // 단순 뷰 컴포넌트(ex - 둥근 모서리 이미지 컴포넌트)
│ └── ui/ // 공통 컴포넌트
│ └── ...
│
├── hooks/ // 컴포넌트 폴더
│ ├── auth/ // 인증 관련 훅
│ └── common/ // 공통 훅
│
├── pages/ // 페이지 단위 뷰 컴포넌트 관리
│ ├── admin.tsx // /admin 라우터에서 호출할 페이지 컴포넌트
│ └── home.tsx // / 루트 라우터에서 호출할 페이지 컴포넌트
│
├── services/ // API 호출(서비스 계층) 모듈
│ ├── auth/ // 인증 관련 모듈
│ └── cart/ // 장바구니 관련 모듈
│
├── store/ // 전역 상태 관리 스토어
│ ├── index.ts // 스토어 매핑 파일
│ ├── authStore.ts // 인증 상태 스토어
│
├── styles/ // 스타일 파일 관리
│ ├── global.css // 전역 스타일
│ └── theme.scss // 테마 관련 스타일
│
├── types/ // TypeScript 타입 정의
│ ├── components/ // 컴포넌트 관련 타입 정의
│ ├── hooks/ // 훅 관련 타입 정의
│ ├── service/ // 서비스 관련 타입 정의
│ └── store/ // 스토어 관련 타입 정의
│
└── utils/ // 유틸리티 모듈 모음
└── formatDate.ts // 날짜 포맷팅 모듈
'프론트엔드 > Next.js' 카테고리의 다른 글
[Next.js] 이미지 최적화, <Image/> 사용 방법 (0) | 2025.01.04 |
---|---|
[Next.js] Next.js + styled-components + MUI 프로젝트 세팅(그리고 styled-components 글로벌 스타일링과 MUI 커스텀 테마 적용하기) (0) | 2024.12.19 |
[Next.js] 루트 라우터 경로에서만 글로벌 스타일이 적용되는 버그? 해결(트러블 슈팅) (0) | 2024.12.19 |
[Next.js] error.tsx와 useErrorHandler를 활용한 전역 에러 처리 (0) | 2024.12.17 |
[Next.js] Next.js에서 styled-components 글로벌 스타일 적용 방법 (1) | 2024.12.17 |