대표 프로젝트
TripApp v2
여행 일정을 생성하고, 지도에서 확인하며 순서와 장소를 바꿀 수 있는 플래너입니다.
- 역할
- 개인 프로젝트 · 일정 편집 UI와 생성 API 구현
- 기술
- Next.js 16 (App Router) · React 19 · TypeScript · Tailwind CSS · Gemini API · Mapbox GL JS · Zod · dnd-kit
문제
모델 응답을 그대로 화면에 사용하는 대신 구조를 검증하고, 좌표가 없는 장소를 보강하며, 생성 후에도 사용자가 일정을 수정할 수 있어야 했습니다.
주요 기여
- Gemini를 호출하는 일정 생성 Route Handler에서 Zod로 입력과 출력 구조를 검증하고, 응답에서 JSON 구간을 추출해 다시 파싱하는 처리를 구현했습니다.
- 장소의 누락 좌표를 지오코딩 API로 보강하고 Mapbox의 장소 표시·선택 강조·장소 간 연결선으로 시각화했습니다.
- dnd-kit으로 일정 순서 변경을 구현하고, 개별 재추천의 로딩·오류·미리보기·교체 흐름을 구성했습니다.
- 대안 요청 API에 세 개의 후보를 검증하는 스키마와 후보 선택 UI를 구현했습니다.
결과
- 입력 → 일정 생성 → 지도 확인 → 항목 편집으로 이어지는 화면과 API 코드를 공개했습니다.
- 일정 전체를 다시 만드는 대신 항목 단위로 재추천 결과를 확인하고 교체하는 흐름을 구성했습니다.
검증 범위와 한계
- 지도에는 장소 좌표를 순서대로 잇는 선을 표시합니다. 실제 길찾기나 교통수단별 경로 계산은 포함하지 않았습니다.
- JSON 구간 추출은 잘못된 JSON 문법을 일반적으로 복구하는 기능이 아닙니다. 생성 내용과 장소 좌표의 사실성도 별도 확인이 필요합니다.
- Gemini·Mapbox API 키·쿼터와 모델 응답에 따라 결과가 달라질 수 있습니다.