여행 숏폼 자동 생성 여행정보 앱

최신·추천·지역별 탭으로 여행 숏폼을 세로 스와이프로 넘겨 보고, 장소명·가격·평점·방문일·한줄 리뷰가 영상 위에 오버레이로 표시됩니다.

• CSS scroll-snap과 Intersection Observer로 화면에 들어온 영상만 자동 재생하고 나머지는 일시정지
• 커서 기반 페이지네이션으로 지역·카테고리 필터와 최신·추천 정렬을 하나의 쿼리로 통합
• 다음 영상 프리로드 큐를 두어 스와이프 전환 시 재생 지연을 줄이는 구조 설계

화면 진입 영상만 재생하는 플레이어와 커서 페이지네이션을 결합해, 피드 길이와 무관하게 동일한 스와이프 흐름을 유지하는 피드 구조를 구현합니다.

영상 1개와 사진 여러 장을 순서대로 선택하고, 장소·방문일·인원·카테고리와 메뉴별 가격, 실제 결제금액, 별점과 한줄 리뷰를 단계별로 입력합니다.

• 스텝별 zod 스키마 검증과 React Hook Form 기반 단계 상태 유지
• dnd-kit 드래그로 사진 순서를 지정하고 순서 값을 업로드 요청에 함께 전송
• 메뉴가와 실결제가를 별도 테이블로 분리하는 Prisma 스키마와 입력 폼 매핑

메뉴가와 실결제가를 분리 저장하는 데이터 모델과 스텝퍼 폼을 연결해, 입력 단계에서부터 가격 정보의 출처가 구분되는 업로드 흐름을 설계합니다.

업로드가 끝나면 영상과 사진을 고정 템플릿에 합성해 오버레이와 전환 효과가 들어간 15~20초 9:16 숏폼을 자동으로 만들고, 진행 단계를 화면에서 확인합니다.

• FFmpeg filter_complex로 영상·사진 클립 합성과 장소명·가격·평점 텍스트 오버레이, 전환 효과 구성
• 클립 길이 합계에 맞춰 15~20초 범위로 트림과 재생 시간을 자동 조정하는 길이 계산 로직
• 작업 진행 상태를 SSE로 전달해 대기·합성·인코딩·완료 단계를 실시간 표시

템플릿 필터 그래프와 길이 자동 조정 로직을 결합해, 입력 소재 구성이 달라도 동일한 9:16 규격의 숏폼 파일이 생성되는 합성 파이프라인을 설계합니다.

장소 기본정보와 지도 위치, 메뉴·가격정보와 실제 이용정보, 관련 숏폼 목록, 장소별 평점·리뷰를 한 화면에서 확인하고 My Trip에 저장합니다.

• 지도 SDK 마커 표시와 장소 좌표 기반 주변 장소 조회 API 구현
• 메뉴가와 사용자 실결제가를 나란히 보여주는 가격 비교 블록과 평균 집계 쿼리
• 관심 장소 저장을 Optimistic UI로 반영하고 실패 시 롤백하는 My Trip 토글

메뉴가와 실결제가를 함께 집계해 보여주는 가격 블록과 지도 연동을 결합해, 여행자가 방문 전 실제 지출 수준을 확인하는 장소 상세를 구현합니다.