Orm-Tour

Orm Tour 미니프로젝트

[팀 소개]

1. 팀명: Orm Tour 팀
2. 팀원: 김도연, 김우주, 김지균, 손동진, 조지연

[프로젝트 소개]

1. 서비스명: Orm Tour

2. 서비스 컨셉: 맞춤 테마 여행 패키지 제공 서비스

3. 기획 의도

   • 여행의 트렌드가 단순한 관광에서 벗어나 특정 테마와 계절의 특징을 반영한 맞춤 여행으로 변화하고 있는 추세에 따라 여행을 원하는 사람들에게 각 시즌의 매력을 최대한 즐길 수 있도록 디자인된 패키지 여행을 제공합니다.
   • ‘레저 활동이 즐거운 여름’, ‘단풍이 아름다운 가을’ 등 각 테마에 맞춘 다양한 패키지를 통해 고객들에게 새로운 감각의 여행 경험을 제안합니다.

4. 페이지 구성

   • 대표 페이지 Main Page : 테마에 맞는 패키지 여행 상품 소개
   • 상품 상세 페이지 Reservation Page : 개별 상품 상세 정보 및 예약
   • 예약 확인 페이지 Confirmation Page : 예약한 상품 조회

5. Figma 프로젝트: Figma 바로가기
   

페이지 소개

Main Page

• 페이지 진입 시 로고로 연결되는 애니메이션, 배너 에니메이션 등 다양한 효과 적용
• 배너에 마우스 호버 시 텍스트가 움직이는 애니메이션 작동
• 패키지 상품 및 이벤트에 캐러셀 적용
• 이벤트 카드의 경우 자동 슬라이딩, 무한루프, 카드 강조 효과 추가

Reservation Page

• 성명, 연락처, 이메일을 입력하는 예약 form 구현 (연락처, 이메일에 유효성 검사 적용)
• 예약 form에서 확인 버튼을 누르면, 입력 내용을 확인하는 모달창이 나타남
• 상품 정보에서는 지도가 삽입되어 있고, 픽업 장소 등 관련 있는 장소의 지도를 모달로 확인할 수 있음
• 댓글 달기 및 리뷰 조회 기능을 구현함

Confirmation Page

• 등록된 성명과 연락처로 예약 내역 조회 (백엔드 미사용으로 코드 내 하드코딩 적용)
  • 박수진/010-1234-1234
  • 김오름/010-5555-6666
• 등록되지 않은 성명 혹은 연락처인 경우 예약 내역이 없다는 안내 출력
• 예약이 조회되면 예약 취소 버튼 활성화
• 예약 취소 확인창에서 확인을 누르면 예약 상태가 '예약 취소'로 변경됨