<2026 한국관광데이터 활 공모전 웹앱 개발 부분>
JJIN은 외국인 관광객의 미션 인증, 기록 공유를 위한 K-일상 체험 웹앱입니다.
최근 외국인 관광객은 유명 관광지를 둘러보는 것을 넘어, SNS에서 접한 한국인의 일상과 로컬 문화를 직접 경험하고 싶어 합니다. 하지만 기존 관광 콘텐츠는 주요 명소와 관광객을 위해 구성된 체험에 집중되어 있어, 실제 한국인의 생활 속 문화를 자연스럽게 경험하기에는 한계가 있습니다.
이에 관광데이터를 활용해 여행자의 취향과 한국 문화 경험 수준에 맞는 여행 코스와 '찐 K-일상 체험 미션'을 제공하고자 합니다. 여행자가 동네 식당, 시장, 공원 등 일상적인 공간에서 한국 문화를 직접 경험하도록 돕고, 관광 수요 역시 주요 명소에서 동네 상권과 방문이 적은 지역으로 확산시키고자 이 주제를 선정했습니다.
- 🗓 일정 생성 시 취향·체험 레벨 설정 — 여행 조건과 취향, 원하는 한국 문화 체험 레벨을 입력해 AI 코스 추천과 미션 구성에 반영
- 🤖 AI 일정 생성 — 사용자의 취향과 체험 레벨을 바탕으로 AI가 하루 단위 여행 코스를 자동 생성
- 📍 일정 직접 관리 — 원하는 장소를 직접 검색·추가해 나만의 여행 일정을 구성하고 순서 변경·삭제로 자유롭게 편집
- 🔍 미션 검색 후 추가 — 미션 추천 탭에서 다양한 미션을 탐색하고 원하는 일정에 바로 추가
- 📸 미션 인증 플로우 — K-일상 미션을 수행하고 사진·후기로 인증해 피드에서 다른 여행자들과 반응을 공유
| 항목 | 내용 |
|---|---|
| 프로젝트명 | JJIN |
| 주제 | 외국인 관광객의 미션 인증, 기록 공유를 위한 K-일상 체험 웹앱 |
| 배포 주소 | https://jjin-wheat.vercel.app/ |
| 강명묵 | 김예린 | 정윤아 | 백세희 | 박소이 | |
|---|---|---|---|---|---|
| 역할 | FE |
FE |
BE |
BE |
Design |
| Language | Framework | 상태 관리 |
|---|---|---|
 |
  |
  |
| Styling | 애니메이션 | i18n |
|---|---|---|
 |
 |
 |
| 폼 관리 | 배포 |
|---|---|
  |
 |
 |
 |
 |
| 스플래시 언어를 선택하고 서비스에 진입합니다. 토큰이 유효하면 홈으로 바로 이동합니다. |
로그인 이메일 또는 구글 소셜 로그인으로 서비스에 접속합니다. |
회원가입 이메일 인증 후 닉네임·비밀번호를 입력해 가입합니다. |
 |
 |
 |
 |
| S1 — 여행 조건 지역, 날짜, 활동 시간대, 이동 수단을 설정합니다. |
S2 — 취향 선택 음식·체험·자연·문화 등 2~4개 카테고리를 선택합니다. |
S3 — 세부 취향 선택한 카테고리별 세부 취향을 고릅니다. |
S4 — 체험 레벨 Light·Normal·Deep 중 원하는 여행 밀도를 선택합니다. |
 |
 |
 |
| 홈 생성된 여행 일정 목록을 확인하고 새 일정을 추가합니다. |
AI 코스 생성 취향·레벨 기반으로 AI가 하루 단위 코스를 자동 생성합니다. |
일정 직접 편집 장소를 검색해 추가하고 순서 변경·삭제로 일정을 자유롭게 구성합니다. |
 |
 |
 |
| 미션 추천 카테고리·필터로 다양한 K-일상 미션을 탐색합니다. |
미션 추가 마음에 드는 미션을 원하는 일정에 바로 추가합니다. |
미션 피드 다른 여행자의 미션 인증 사진과 후기를 피드에서 확인합니다. |
JJIN은 Next.js App Router 기반으로 API · 상태 · UI 레이어를 분리한 구조로 설계되었습니다.
- TanStack Query — 서버 상태 관리 및 캐싱,
invalidateQueries로 변경 즉시 반영 - Zustand — 시트·모달 등 클라이언트 UI 상태 관리
- app/_api — 도메인별 API 함수 분리, 공통 HTTP 클라이언트(
client.ts)로 토큰 관리·재발급·에러 정규화 일원화 - next-intl — ko·en·ja 3개 언어 지원,
[locale]동적 라우트 기반
- 사용자 액션 발생
app/_api/<domain>.ts함수 호출 →client.ts의apiGet/apiPost경유- 401 응답 시 자동 토큰 재발급 후 재시도
- TanStack Query 캐시 갱신 또는
invalidateQueries로 UI 즉시 반영
app
├─ _api # API 함수 + HTTP 클라이언트 (auth, plans, missions, feed 등)
├─ _components # 공통 UI 컴포넌트 (Button, Sheet, Dialog 등) + 공통 훅
│ ├─ hooks
│ ├─ icons
│ ├─ motion
│ ├─ providers # QueryProvider, AuthGuard 등
│ └─ ui
├─ _lib # 유틸 함수
├─ auth # locale 외부 인증 라우트 (Google OAuth 콜백)
└─ [locale] # 다국어 라우트 (ko / en / ja)
├─ auth # 스플래시, 로그인, 회원가입, 이메일 인증
├─ home # 홈 (일정 목록)
├─ onboarding # 일정 생성 온보딩 (S1~S4)
├─ mission # 미션 추천, 검색, 피드, 생성
└─ plan # 일정 상세, 코스 편집, AI 코스 생성
└─ [planId]
├─ _components
├─ _hooks
└─ course # AI 코스 생성 결과 라우트모든 API 요청을 client.ts의 apiGet/apiPost/apiPatch/apiDelete로 통일. 토큰 주입·재발급·에러 정규화를 한 곳에서 처리해 각 도메인 모듈에서는 비즈니스 로직에만 집중.
401 발생 시 refresh token으로 자동 재발급을 시도하고, 재발급마저 실패하면 auth:expired 커스텀 이벤트를 dispatch. AuthGuard(useAuthExpired)가 이를 수신해 현재 locale의 /auth로 replace. 동시 다발적 401에 의한 중복 dispatch는 플래그로 방지.
코스 생성 API는 외부 파이프라인(TourAPI·카카오맵·동선 최적화) 특성상 처리 시간이 길어 504가 간헐적으로 발생. 프론트 타임아웃을 5분으로 설정하고 네트워크 단절·504 오류에 한해 지수 백오프(500ms → 1s → 2s) 기반 최대 3회 재시도를 적용. 응답 실패 후에도 서버가 코스를 저장했을 수 있어 1일차 조회로 보정.
next-intl 기반 [locale] 동적 라우트로 ko·en·ja 3개 언어를 지원. 지역명은 서버가 내려주는 한국어 displayName을 regions.<한국어> 키로 번역하고, 키가 없으면 원문 그대로 표시해 신규 지역 추가 시 번역 누락 방지.
- 서버 상태 → TanStack Query
- 시트/모달 등 UI 상태 → Zustand 스토어
Node.js 18 이상을 권장합니다.
git clone https://github.com/Team-JJIN/JJIN-FE.git
cd JJIN-FEnpm install.env.local 파일을 생성하고 아래와 같이 설정합니다.
NEXT_PUBLIC_API_URL=https://your-api-server.com
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id
NEXT_PUBLIC_GOOGLE_REDIRECT_URI=https://your-domain/auth/callback/google
# ⚠️ 실제 값에 맞게 수정해주세요.npm run dev브라우저에서 아래 주소로 접속합니다:
http://localhost:3000/ko/auth
npm run buildnpm run start