inneratb/frontend

frontend

Nuxt 3 기반 프론트엔드 (SSG · 정적 생성 → nginx 정적 호스팅).

기술 스택

• Nuxt 3 (Vue 3 + Vite) — 파일 기반 라우팅, 자동 임포트
• Pinia (@pinia/nuxt) — 상태 관리
• Axios — 중앙 인스턴스 + 응답 인터셉터 (에러코드 매핑)
• ESLint (@nuxt/eslint) · oxfmt — 린트/포맷

디렉터리 구조

frontend/
├── app.vue                  # 최상위 진입점 (NuxtLayout + NuxtPage)
├── error.vue                # 전역 에러 페이지 (404 등)
├── nuxt.config.ts           # Nuxt 설정 (SSG, runtimeConfig, 모듈)
├── pages/                   # 파일 기반 라우팅 (index.vue = '/')
├── composables/             # useApi(axios), useUser 등 — 자동 임포트
├── stores/                  # Pinia 스토어 (user.store.ts)
├── shared/utils/            # 순수 유틸 함수 (format.ts) — 자동 임포트
└── public/                  # 정적 자원 (favicon 등)

환경변수

• NUXT_PUBLIC_API_BASE_URL — API 베이스 URL (runtimeConfig.public.apiBaseUrl).
  • 도커 빌드 시 docker-compose.yml 의 VITE_API_BASE_URL(=FRONT_API_URL) 인자가 Dockerfile 에서 NUXT_PUBLIC_API_BASE_URL 로 매핑됩니다.

프로젝트 실행

npm install

개발 서버 (HMR)

npm run dev

정적 생성 (운영 빌드)

npm run generate   # 산출물: .output/public

npm run preview 로 생성 결과를 로컬에서 확인할 수 있습니다.

타입 검사 / 린트 / 포맷

npm run typecheck
npm run lint
npm run format

참고

• 렌더링 방식은 SSG 입니다. 동적 SSR(Node 서버)이 필요해지면 nuxt.config.ts 에서 ssr: true 유지 + npm run build 산출물(.output/server)을 Node 로 구동하고 Dockerfile/nginx 구성을 서버 모드로 전환하면 됩니다.