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

검색 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

로그인 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

검색 Page

assets

css

constants

상수값 정의

components

app 폴더와 관련된 각각의 재사용 가능한 component를 정의함

claim

반품, 환불 component

common

공통 component

customer

고객 component

delivery

배송 component

display

전시 component

event

이벤트 component

fo component

goods

상품 component

member

회원 component

order

주문 component

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 오전

이전01. Setup 다음2. Create app

마지막 업데이트 4일 전