Utrip | 유튜버가 간 곳을 나도 한번

⏰ 개발기간

• 2024. 05. 18 ~ 2024. 6. 24

프로젝트 소개

• 평소 좋아했던 유튜버의 여행을 그대로 따라 갈 수 있도록 정보를 제공하는 서비스 입니다.
• 유튜버의 영상과 함께 장소에 대한 정보를 제공합니다.
• 마이 플레이스 등록 후 간편하게 나만의 코스를 커스터마이징하는 기능을 제공합니다.

배포된 사이트

https://utrip.netlify.app/

팀원 소개

Back-End

[BE] 김예진

[BE] 우재민

Front-End

[FE] 박우혁

[FE] 정기환

[FE] 김규헌

[FE] 권나은

✨ Design

[UI/UX] 김이수

기술 스택

개발 환경

협업

Front-End

페이지별 기능

1. 메인페이지

메인페이지

• 서버에 저장된 영상 데이터를 제공합니다.
• 검색 기능을 제공하여 원하는 영상을 쉽게 찾을 수 있습니다.
• 로그인이 되어있다면 마이플레이스에 영상을 등록/삭제할 수 있습니다.

2. 상세페이지

유튜브영상(마이플레이스 등록)

위치(길찾기)

리뷰

• 영상에 나오는 장소 데이터를 제공합니다.
• 현재 사용자의 위치에서 해당 장소까지 걸리는 시간과 경로를 제공합니다.
• 장소에 대한 리뷰와 별점을 등록할 수 있습니다.

3. 마이페이지

마이페이지

• 사용자가 저장한 영상을 보여줍니다.

4. 마이루트

코스 만들기

카드 및 근처 장소 추가

• Drag and Drop을 통해 코스에 있는 장소의 순서를 변경할 수 있습니다.
• 마이플레이스에 등록되어있는 영상을 Drag and Drop으로 코스에 추가할 수 있습니다.
• 코스에 있는 장소 근처의 장소를 맵에 보여주고 코스에 추가할 수 있습니다.
• 전체 장소를 조회하여 사용자가 저장하지 않은 장소도 추가할 수 있습니다.
• 맵에 전체적인 코스 경로를 보여줍니다.

5. 저장된 코스 페이지

저장된 코스 페이지

코스 보기 모달

• 사용자가 저장한 코스를 보여줍니다.
• 더보기를 클릭시 코스를 한 눈에 볼 수 있게 모달을 띄워줍니다.

6. 회원가입, 로그인, 비밀번호 찾기

회원가입

로그인

비밀번호 찾기

• 로컬로그인, 로컬회원가입을 지원합니다.
• 비밀번호 찾기를 지원합니다.
• 카카오, 네이버 로그인을 지원합니다.

트러블슈팅

https://stump-salto-0cf.notion.site/c148875a39fa4fa18e43e6e3a63a5238?pvs=4