프로젝트 구조 및 라우터 구조
- Toks 서비스의 프로젝트 구조를 설명합니다.
- NextJS App Router 구조를 따르고 있습니다.
- router에 영향없이 사용할 수 있도록 Private Folder를 활용합니다.
- 크게 (AppbarHeader), (BackHeader) NextJS 기능인 Route Group으로 레이아웃을 분리해서 관리합니다.
- app router 구조 기반의 컴포넌트 구성이 이루어져있습니다.
📦app
┣ 📦(AppBarHeader)
┣ 📂toks-main
┃ ┣ 📂@bottomSheet
┃ ┣ 📂@toast
┃ ┣ 📂_components
┃ ┣ 📂_lib
┃ ┣ 📜layout.tsx
┃ ┗ 📜page.tsx
┣ 📂_components
┃ ┗ 📂Appbar
┗ 📜layout.tsx
- Appbar Layout에 포함되어 Appbar 컴포넌트를 사용합니다.
- 메인 페이지로 사용되며 온보딩 바텀시트, 카테고리 바텀시트, 로그인 기능을 제공합니다.
- 패러렐 라우팅을 활용하여 bottomSheet/toast 컴포넌트를 분기해 관리합니다.