> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/01.-setup/1..md).
# 1. 폴더 구조
이 문서는 Nextjs를 사용하여 개발된 프로젝트의 폴더 구조에 대한 설명입니다.
각 폴더의 구성의 다양한 역할을 설명하며, 이를 통해 프로젝트의 구조에 대해 이해할 수 있습니다.
***
최상위 폴더는 `src`와 `public`로 구성되어 있습니다. 아래는 각 폴더와 파일의 상세 설명입니다.
| /x2bee-storefront | | | | | |
| -------------------- | --------------------------------------------------------- | -------------------------------------- | -------------------------------------------- | ---------------- | -------------------- |
| src | | | | | |
| | api | 비즈니스 API 요청을 작성 | | | |
| | | claim | 반품, 환불처리 api | | |
| | | common | 공통 api | | |
| | | customer | 고객 api | | |
| | | delivery | 배송 api | | |
| | | display | 전시 api | | |
| | | event | 이벤트 api | | |
| | | goods | 상품 api | | |
| | | member | 회원 api | | |
| | | mypage | 로그인사용자정보 api | | |
| | | order | 주문 api | | |
| | | search | 검색 api | | |
| | app | 앱 라우터의 폴더 기반 라우팅 | | | |
| | | (common) | App router의 공통 기능 폴더 | | |
| | | | actions | server action 폴더 | |
| | | | | serverCookie.ts | server cookie action |
| | | (locale) | App router의 folder-based routing(다국어 적용) | | |
| | | | (root) | root 폴더 | |
| | | | | layout.tsx | common layout |
| | | | | (home) | Main Page |
| | | | | claim | 반품, 환불 Page |
| | | | | common | 공통 Page |
| | | | | customer | 고객 Page |
| | | | | display | 전시 Page |
| | | | | event | 이벤트 Page |
| | | | | login | 로그인 Page |
| | | | | member | 회원 Page |
| | | | | order | 주문 Page |
| | | | layout.tsx | root layout | |
| | | | error.tsx | root error Page | |
| | | \[…not\_found] | 페이지 없음 폴더 | | |
| | | | layout.tsx | 페이지 없음 Page | |
| | | goods | 상품 Page | | |
| | | | layout.tsx | 상품 Page layout | |
| | | | | detail | 상품 상세 Page |
| | | payment | 결제 Page | | |
| | | | layout.tsx | 상품 상세 layout | |
| | | search | 검색 Page | | |
| | assets | css | | | |
| | constants | 상수값 정의 | | | |
| | components | app 폴더와 관련된 각각의 재사용 가능한 component를 정의함 | | | |
| | | claim | 반품, 환불 component | | |
| | | common | 공통 component | | |
| | | customer | 고객 component | | |
| | | delivery | 배송 component | | |
| | | display | 전시 component | | |
| | | event | 이벤트 component | | |
| | | fo | fo component | | |
| | | goods | 상품 component | | |
| | | member | 회원 component | | |
| | | order | 주문 component | | |
| | | ui | ui component (button, calender, accordion 등) | | |
| | data | app에서 사용할 공통 데이터 | | | |
| | | i18n | 다국어 데이터 | | |
| | hooks | custom hooks | | | |
| | lib | plugins, 각종 library | | | |
| | models | 업무별 ts model을 관리 | | | |
| | store | Zustand state를 관리 | | | |
| | types | Typescript를 위해 type 선언용 폴더 | | | |
| | utils | util | | | |
| | i18n.ts | 다국어 설정 파일 | | | |
| | middleware.ts | 미들웨어 파일 | | | |
| | navigation.ts | 다국어 navigation 설정 파일 | | | |
| public | 이미지등 public 폴더 | | | | |
| | images | image 파일 (svg파일과 icon 파일 포함) | | | |
| .env.development.set | npm build:dev, start:dev
(development 환경 설정 파일)
| | | | |
| .env.local.set | npm start:local (local 환경 설정 파일) | | | | |
| .env.production.set | npm build:prd, start:prd
(production 환경 설정 파일)
| | | | |
| .env.stage.local | npm build:stg, start:stg
(stage 환경 설정 파일)
| | | | |
| .eslintrc.json | ESLint 설정 및 ESLint에 제외되는 규칙 설정 | | | | |
| .gitignore | git commit에서 제외되는 파일 목록 | | | | |
| .pretterrc | ESLint와 Prettier 충돌 방지용 Prettier 설정 | | | | |
| next-env.d.ts | Next.js의 Typescript 선언용 파일 | | | | |
| next.config.js | Next.js config 설정 | | | | |
| package.json | 각종 패키지 / dependency 정보 | | | | |
| README.md | gitlab용 readme 파일 | | | | |
| tailwind.config.ts | tailwind css를 위한 config | | | | |
* /x2bee-storefront
* src
* api — 비즈니스 API 요청을 작성
* claim — 반품, 환불처리 api
* common — 공통 api
* customer — 고객 api
* delivery — 배송 api
* display — 전시 api
* event — 이벤트 api
* goods — 상품 api
* member — 회원 api
* mypage — 로그인 사용자 정보 api
* order — 주문 api
* search — 검색 api
* app — 앱 라우터의 폴더 기반 라우팅
* (common) — App router의 공통 기능 폴더
* actions — server action 폴더
* `serverCookie.ts` — server cookie action
* (locale) — App router의 folder-based routing(다국어 적용)
* (root) — root 폴더
* `layout.tsx` — common layout
* (home) — Main Page
* claim — 반품, 환불 Page
* common — 공통 Page
* customer — 고객 Page
* display — 전시 Page
* event — 이벤트 Page
* login — 로그인 Page
* member — 회원 Page
* order — 주문 Page
* `layout.tsx` — root layout
* `error.tsx` — root error Page
* \[…not\_found] — 페이지 없음 폴더
* `layout.tsx` — 페이지 없음 Page
* goods — 상품 Page
* `layout.tsx` — 상품 Page layout
* detail — 상품 상세 Page
* payment — 결제 Page
* `layout.tsx` — 상품 상세 layout
* search — 검색 Page
* assets
* css
* constants — 상수값 정의
* components — app 폴더와 관련된 각각의 재사용 가능한 component를 정의함
* claim — 반품, 환불 component
* common — 공통 component
* customer — 고객 component
* delivery — 배송 component
* display — 전시 component
* event — 이벤트 component
* fo — fo component
* goods — 상품 component
* member — 회원 component
* order — 주문 component
* ui — ui component (button, calender, accordion 등)
* data — app에서 사용할 공통 데이터
* i18n — 다국어 데이터
* hooks — custom hooks
* lib — plugins, 각종 library
* models — 업무별 ts model을 관리
* store — Zustand state를 관리
* types — Typescript를 위해 type 선언용 폴더
* utils — util
* `i18n.ts` — 다국어 설정 파일
* `middleware.ts` — 미들웨어 파일
* `navigation.ts` — 다국어 navigation 설정 파일
* public — 이미지 등 public 폴더
* images — image 파일 (svg파일과 icon 파일 포함)
* 환경 설정 파일
* `.env.development.set` — npm build:dev, start:dev (development 환경 설정 파일)
* `.env.local.set` — npm start:local (local 환경 설정 파일)
* `.env.production.set` — npm build:prd, start:prd (production 환경 설정 파일)
* `.env.stage.local` — npm build:stg, start:stg (stage 환경 설정 파일)
* 기타 설정 파일
* `.eslintrc.json` — ESLint 설정 및 ESLint에 제외되는 규칙 설정
* `.gitignore` — git commit에서 제외되는 파일 목록
* `.pretterrc` — ESLint와 Prettier 충돌 방지용 Prettier 설정
* `next-env.d.ts` — Next.js의 Typescript 선언용 파일
* `next.config.js` — Next.js config 설정
* `package.json` — 각종 패키지 / dependency 정보
* `README.md` — gitlab용 readme 파일
* `tailwind.config.ts` — tailwind css를 위한 config
Document generated by Confluence on 2025-12-18 2:13 오전
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/01.-setup/1..md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.