⭐ Platforms & Languages ⭐




🛠 Tools 🛠

프로젝트명 : 트립 스테이션

"TripStation은 여행 동행을 찾는 사람들을 위한 웹 사이트입니다. 사용자는 원하는 여행지와 여행 일정을 계획하고, 동행을 모집하여 여행을 떠날 수 있습니다. TripStation은 여행 계획을 공유하고 새로운 친구를 만나 여행 경험을 더욱 풍부하게 만들어줍니다."

주요기능

TripStation은 사용자가 여행을 계획하고 동행을 찾을 수 있는 다양한 기능을 제공합니다.

1. 여행장소 및 숙소등록: 사용자는 숙소와 여행 명소를 직접 등록할 수 있습니다. TripStation은 여행 관련 정보를 공유하고 커뮤니티 멤버들이 자신의 숙소나 발견한 멋진 여행 명소를 공유할 수 있는 플랫폼을 제공합니다.
2. 플랜 작성: 사용자는 자신만의 여행 플랜을 작성할 수 있습니다. 또한, 다른 사용자가 작성한 플랜을 참조하여 새로운 플랜을 작성할 수도 있습니다.
3. 맞춤 여행: 사용자는 자신이 작성한 플랜을 기반으로 동행을 모집하고, 같이 여행을 갈 수 있습니다.
4. 패키지 여행: 가이드가 작성한 플랜에 신청을 하면, 패키지 여행에 참여할 수 있습니다.
5. 크루 기능: 사용자는 크루를 만들거나 기존 크루에 가입할 수 있습니다. 크루의 회원들은 동행 모집 기능을 통해 같이 여행을 갈 수 있습니다.

ERD

URL: https://www.erdcloud.com/d/KNbGrYcK7uniAjFyH

프로젝트에서의 나의 역할

1. 플레이스 메인 페이지: 사용자가 여행 장소를 등록하고 공유할 수 있는 페이지입니다. 페이지 상단에 Swiper API를 이용하여 카테고리 메뉴를 제공해 사용자가 원하는 지역을 쉽게 선택할 수 있도록 구현해보았습니다.로그인하면 "플레이스 등록" 버튼이 나타나, 사용자들이 간편하게 자신의 여행 장소를 등록할 수 있습니다.

2. 플레이스 상세 페이지: 사용자가 장소를 공유할 수 있게 좋아요와 댓글기능을 구현해보았습니다. 페이지 하단의 인기글은 SQL count 함수를 사용해서 임의로 좋아요는 4, 댓글은 1로 설정하여 출력해 보았습니다.

2. 플레이스 등록 페이지: 로그인시 사용자가 여행 장소에 관련된 데이터들을 등록할 수 있게 구현해봤습니다.

2. 숙소 메인 페이지: 사용자가 숙소를 등록하고 예약할 수 있는 페이지입니다. 에어비엔비 사이트를 많이 참고했습니다. 플레이스와 동일하게 Swiper API를 이용하였고 로그인시 "숙소 등록" 버튼이 나타나 숙소를 등록할 수 있습니다.

2. 숙소 상세 페이지: 사용자가 입력한 숙소 관련 데이터를 출력하며, 사용자 경험을 향상시키기 위해 숙소 이용 날짜를 클릭하면 일수에 맞는 총 금액이 계산되고, 이를 비동기적으로 Ajax를 사용하여 동적으로 응답하도록 구현하였습니다. 또한, 숙소의 주소를 지도에 표시하기 위해 카카오 지도 API를 활용하여 해당 숙소의 위치에 핀을 나타나게 하였습니다.

2. 숙소 예약 페이지: 이 페이지는 결제로 이동하기 전에 사용자에게 최종 확인과 결정을 내릴 기회를 제공하기 위해 만들어보았습니다. 사용자가 예약한 숙소 정보를 요약하고, 예약 날짜, 가격 등의 세부 정보를 표시합니다

2. 숙소 등록 페이지들
이렇게 사용자의 입장에서 UI에 대해 생각해보고 백엔드까지 여행서비스와 관련된 프로젝트를 개발해봤습니다. 감사합니다.