JECT6--4th-Frontend

JECT 4기 6팀의 프론트엔드 레파지토리입니다.

체험단 매칭 플랫폼의 Next.js 사용자 화면 — 공고 탐색·지원, 블로그 AI 분석/진단/채팅, 온보딩 기반 추천, 마이페이지를 제공합니다.

---

기술 스택

영역	사용 기술
프레임워크	Next.js 16 (App Router), React 19, TypeScript 6
서버 상태	TanStack Query
클라이언트 상태	Jotai
스키마 검증	Zod — 백엔드 응답을 entity schema로 런타임 검증
스타일	TailwindCSS 4, shadcn/radix 계열 UI 컴포넌트
HTTP	Axios (src/shared/api/http.ts 공용 인스턴스)

시스템 컨텍스트

브라우저와 SSR 모두 Nginx 게이트웨이(단일 진입점) 를 통해 백엔드에 접근한다. 게이트웨이가 경로·Accept 헤더·RSC 파라미터를 기준으로 Next.js 페이지와 Spring API 응답을 분기하므로, 프론트는 동일 origin으로 API를 호출한다.

Browser ──▶ Nginx ──┬─ page GET / RSC / static  ──▶ Next.js (이 앱)
                    ├─ /api/* /campaigns /feed/* /my/* /blog/* /onboarding/* ──▶ Spring API
                    └─ /analyzer/*               ──▶ Analyzer (직접 호출 없음, 디버깅용)

• SSR(서버 사이드) 요청: API_BASE_URL 환경변수 사용 (컨테이너 내부에서 게이트웨이 주소)
• 브라우저 요청: NEXT_PUBLIC_API_BASE_URL 사용 (빌드 타임 주입)

---

프로젝트 구조

src/
├── app/                    App Router 페이지
│   ├── page.tsx            /            홈 (히어로 + 피드 섹션)
│   ├── campaigns/          /campaigns, /campaigns/[id]   공고 목록·상세
│   ├── analyze/            /analyze                      블로그 분석 진입
│   ├── blog-ai-analysis/   /blog-ai-analysis             AI 분석 결과·진단·채팅
│   ├── onboarding/         /onboarding                   온보딩 설문·추천
│   ├── mypage/             /mypage/account · /ai-history · /saved
│   └── auth/               /auth/login, /auth/callback   OAuth 로그인·콜백
├── entities/               도메인별 모델·API·Zod 스키마
│   └── auth / blog-analysis / campaign / feed / my / onboarding / subscription / user
├── shared/
│   ├── api/http.ts         Axios 인스턴스 (아래 "API 통신 방식" 참조)
│   ├── hooks / ui / assets 공용 훅·UI·에셋
├── components/             공용 컴포넌트
├── constant/ · lib/ · service/

API 통신 방식 (src/shared/api/http.ts)

공용 Axios 인스턴스가 다음을 자동 처리한다:

1. baseURL 분기 — 서버 사이드는 API_BASE_URL ?? NEXT_PUBLIC_API_BASE_URL, 브라우저는 NEXT_PUBLIC_API_BASE_URL
2. 케이스 변환 — 백엔드의 snake_case 응답을 camelCase로 변환
3. 래퍼 해제 — { success, data } 공통 응답 래퍼를 자동 언랩
4. 토큰 갱신 — 401 응답 시 POST /api/auth/refresh로 재발급 후 원 요청 재시도 (액세스 토큰은 JWT, 리프레시 토큰은 cookie)
5. 런타임 검증 — 각 entity의 Zod 스키마로 응답 형태를 검증 (category=ETC, region=null 등 백엔드 실데이터 케이스 반영)

사용하는 백엔드 API (요약)

기능	호출 API
인증	GET/POST /api/auth/login/{provider}, POST /api/auth/refresh, POST /api/auth/demo-login
프로필	GET/PATCH /api/users/me, POST /api/users/me/blog
홈 피드	GET /feed/hero, GET /feed/body, GET /feed/blogger-stories
공고	GET /campaigns, GET /campaigns/{id}, /popular, /search, POST /{id}/like, POST /{id}/apply
블로그 AI	POST /blog/analyze, GET /blog/analysis/{id}, /history, /{id}/recommendations, /{id}/bloggers
진단·채팅	POST /blog/diagnosis, GET /blog/diagnosis/quota, POST /blog/chat, DELETE /blog/chat/{sessionId}
온보딩	POST /onboarding/response, GET /onboarding/recommendations
마이페이지	GET /my/campaigns, GET /my/ai-history 등 /my/*

동작 방식 (주요 플로우)

• 블로그 분석: /analyze에서 POST /blog/analyze 요청 → 백엔드가 크롤링·임베딩·LLM 분석을 비동기 파이프라인으로 처리 → 프론트는 GET /blog/analysis/{documentId} 폴링/조회로 결과 표시. 분석 완료 후 추천 공고(/recommendations)와 인플루언서 후보(/bloggers)를 함께 노출.
• 진단·채팅: 동기 API — 진단은 6지표 결과를, 채팅은 분석 결과 기반 멀티턴 응답을 즉시 수신 (LLM 처리 시간으로 응답이 길어질 수 있어 백엔드 타임아웃 120초 기준).
• 온보딩 추천: 설문 응답 저장 시 백엔드가 프로필 임베딩을 생성하고, 추천 조회 시 벡터 유사도 기반 공고 목록을 반환.

실행

yarn install
yarn dev      # 개발 서버 (기본 3000 포트)
yarn build    # 프로덕션 빌드

API 호출을 위해 NEXT_PUBLIC_API_BASE_URL(브라우저), API_BASE_URL(SSR)을 환경에 맞게 설정한다. 통합 기동은 ject_integration_data/docker-compose.yml 참조.