🏡 Travel ON

Travel ON은 빠른 예약과 최대 70% 할인 혜택을 제공하는 게스트하우스 예약 서비스입니다.
3인 팀으로 진행된 프로젝트로, 간편하고 감성적인 여행 경험을 제공합니다.

---

1. 프로젝트 기간

• 작업 기간: 2025년 6월 19일 ~ 2025년 6월 26일

---

2. 배포 & 코드

• Client 배포 링크: Travel ON
• Admin 배포 링크: Travel ON
• 시연 영상: YouTube 영상
• GitHub 저장소: azure0929/TravelON

---

3. 기술 스택

• 언어: HTML5, CSS3, JavaScript
• 라이브러리/프레임워크: JQuery, Swiper.js, Slick.js, Bootstrap

---

4. 주요 기능

사용자 중심 디자인

• 주요 사용자 페르소나
  • 정해인 (20대 학생)
    가족 친화적인 패키지(숙소 + 레저 활동) 필요 → 어린이 객실 필터, 가족 리뷰 제공
  • 이나경 (30대 직장인)
    인기 게스트하우스 중심 주말 여행 선호 → 실사용 리뷰, 사진, 취소 정책 확인 기능 제공

핵심 기능

기능	설명
필터링 & 정렬	위치 및 타입 필터, 가격/인기순 정렬 가능
찜하기 (Wishlist)	게스트하우스/객실 저장 가능, 비어있을 경우 메시지 표시
예약 기능	체크박스로 총 금액 확인 → 카드 결제 지원
UI/UX	AI + 실제 이미지 혼합 카드 레이아웃, 깔끔하고 직관적
성능 최적화	alt 속성, loading="lazy" 적용, 코드 단순화, 크로스 브라우저 호환

---

5. 프로젝트 특징

• 사용자 중심: 20~30대 다양한 사용자 니즈 반영
• 빠른 예약 경험: 직관적인 UI와 간편한 결제 과정
• 웹 성능 최적화: 이미지 지연 로딩, 코드 단순화, 크로스 브라우저 호환

---

7. 기술적 강점

효율적인 상태 관리

• localStorage 활용: 사용자의 찜한 항목, 예약 정보 등을 localStorage에 저장하여 페이지 새로 고침 시에도 데이터 유지
• 장바구니 기능 구현: 사용자가 선택한 상품을 장바구니에 추가하고, 총 금액을 계산하는 로직을 JavaScript로 구현하여 사용자 편의성 증대

반응형 레이아웃 구현

• @media 쿼리 사용: 다양한 화면 크기에 대응하는 반응형 레이아웃을 구현하여 최적화된 UX 제공

코드 품질 관리

• ESLint 설정: 코드 일관성 유지 및 잠재적 오류 방지
• Prettier 적용: 코드 가독성 및 유지보수성 향상

접근성 고려

• 키보드 네비게이션 지원: 사용자가 키보드만으로도 웹사이트를 탐색 가능
• 스크린 리더 호환성: 이미지에 alt 속성 추가, ARIA 레이블 활용

---

8. 개발 팀원 및 역할

양준용 (팀장)	이우진	함동윤
1. 디자인, 프론트엔드 레이아웃 2. 메인페이지 - 로그인 & 회원가입 - 이벤트, 혜택, 숙소, 주변 놀거리 정보 3. 예약 모달 - 예약 정보, 카드 결제, 예약 정보 확인 4. 관리자 페이지 - 매출 현황, 고객 정보, 예약자 비율	1. 검색 결과 페이지 2. 찜 페이지 3. 숙소 상세 페이지	1. 예약 모달 2. 카드 결제 모달

|