SlideShare a Scribd company logo
1 of 57
Download to read offline
FITTour
여행후기가 있는
Seung Been Oh https://github.com/OhSeungBeen/bitcamp-fit-tour
seungbeenoh@gmail.com
현지투어 예약 시스템
목차
1. 주제 선정 배경 (3-5p)
2. 현황 및 문제점 (6-10p)
3. 프로젝트 개발 및 기능상세
• 개발목표 (11p)
• 개발환경 (12p)
• 작업기간 (13p)
• UI 프로토타입 (14p)
• Usecase(15p)
• Usecase명세서 (16p)
• DB모델링 (17p)
• 시스템 구조도(18p)
• 주요기능 (19p – 52p)
• 시연영상 (53p)
4. 시스템 아키텍처 (54-55p)
현지투어 예약 시스템주제 선정배경
개별 자유여행의 이유?
• 소득증가에 따른 여가활동으로 여행이나 관광 활동 잦아짐
• IT기술의 발달로 인한 여행 정보 습득이 용이
• 패키지여행상품 이용자가 불만족하여 자유여행상품을 이용
• 자신의 의견을 반영한 여행에서 만족감 느낌
가족여행 시 구매한 여행상품 개인여행 시 구매한 여 행 상
품
전체패키지 부분패키지 전체패키지 부분패키지
17.5 16.6 14.2 31.9
52.9 53.1
82.5 83.4 85.8 68.1
47.1 46.9
2015 2016 2017 2015 2016 2017
출처: 2017 국민여행 실태조사(2018.5발간)_문화체육관광부
현지투어 예약 시스템주제 선정배경
자유여행객 증가로 인한 변화
• 온라인 여행사의 급성장
• 다양한 여행상품의 등장
• 기존 대기업여행사(ex.하나투어, 모두투어) 중심에서 FIT상품을 전문으로 하는 소규모 여행사들의 출현
현지투어 예약 시스템주제 선정배경
자유여행객의 여행계획 트랜드
• 항공권과 호텔은 OTA(Online TravleAgency)나 메타서치를 기반으로 한 대형 기업에서 구매하고,
• 여행지에서의 현지 투어, 입장권, 패스등은 맞춤여행, 에어텔 등을 판매하던 자유여행 전문여행사에 문의
• 포털사이트 등을 통해 여행정보 검색
현지투어 예약 시스템현황 분석
네이버 현지투어
• 호텔과 항공에 진출한 데 이어서 작년 7월 단품 메타서치로 영역 확장을 선언하고 네이버 현지투어 플랫폼을 선보임
• 마이리얼트립과 공동 개발한 중개서비스 플랫폼
• 실제 예약을 위해서는 별도 사이트로 이동해야 함 =>상품 탐색 과정에서 여러 사이트를 이동해야 하는 불편함
현지투어 예약 시스템
네이버 현지투어
• 사용자에게 편리하지 않은 검색 옵션과 UI
현황 분석
마이리얼트립
• 한번 하위 카테고리로 들어가게 되면 다른 카테고리로 가기 위해서 상위 또는 메인 화면으로 돌아가야 한다는 불편함
• 가격대 별 검색, 차량투어, 워킹투어 등으로는 검색 불가
현지투어 예약 시스템현황 분석
현지투어 예약 시스템현황 분석
유로자전거나라
• 대표적인 현지여행 투어 사이트
• 여행후기를 보고 해당 여행상품이 궁금해지더라도 링크가 연결되지 않음
=>실제 상품 구매로 이어질 수 있는 가능성을 놓치게 됨
현지투어 예약 시스템현황 분석
• 여행자들의 활발한 정보 공유
• 자유로운 여행 수기 작성과 정보수집 가능하지만
• 정해진 양식이 없기 때문에 작성자가 제목에 잘 명시하지 않거나, 이용자가 꼼꼼히 제목을 읽지 않으면 원하는 지역의 여행
정보인지 파악 하기 어려움
• 투어상품의 직접적인 명시는 홍보글에 해당되어 간접적으로만 언급 되기 때문에 직관적인 정보를 얻기 어려움
개발 목표 현지투어 예약 시스템
여행후
기 여행상
품 조회
상품예
약
여행자들이 자신의 경험을 공유하고
다른 여행자들의 경험을 토대로 여행상품을 탐색하고
여행후기와 여행상품이 연동되어 실제상품 구매에 이르도록
유도
현지투어 예약 시스템개발 환경
현지투어 예약 시스템작업 기간
작업 내용 1주 2주 3주 4주 5주 6주 7주 8주 9주 10주
프로젝트 기획 `
UI프로토타입
유스케이스 작성
데이터베이스 모델링
백엔드 프로그래밍
및 기능구현
테스트 및 디버깅
현지투어 예약 시스템프로토타입
•카카오 오븐 사용
Use- Case 현지투어 예약 시스템
회원가입 여행상품 조회
여행후기 조회
공지사항 조회
로그인
로그아웃
회원탈퇴
프로필관리
여행후기관리
위시리스트 관리
여행상품 예약관리
댓글관리
공지사항 관리
여행후기 관리 (조회, 삭제)
댓글 관리 (조회, 삭제)
여행상품 관리
예약관리
비회
원
회
원
관리
자
회원관리
Use-Case 명세서 현지투어 예약 시스템
•https://github.com/OhSeungBeen/bitcamp-fit-
tour/tree/master/FIT-Tour-doc/use-case
현지투어 예약 시스템
DB모델
DB 모델링
현지투어 예약 시스템시스템 구조 – MVC 디자인패턴
애플리케이션의 구성할 때 구성요소를 세가지 역할
model, view, controller 나누어 개발
Model – 데이터이자 비즈니스 로직 (dao, domain, service)
View – 화면상의 윈도우(html,css,javascript)
Controller – 사용자의 요청을 받아 이를 수행하기 위한 비
즈니스 로직을 선택하고 호출하며 수행한 비즈니스 로직
의 결과를 뷰를 통해 보여준다.
현지투어 예약 시스템주요 기능 사용자 -상품검색
•모든 페이지 상단에 검색창 위치
•여행 국가, 도시, 여행상품명으로 검색 가
능
•입력 필드에 Autocomplete 기능
현지투어 예약 시스템주요 기능 사용자 -상품검색
•상단 navigationbar 에서 대륙, 국가, 도시별로 검색
•가격낮은순, 인기순, 후기순으로 상품 정렬
현지투어 예약 시스템주요 기능 사용자 -상품검색
•원하는 가격대, 소요시간, 테마(중복선택 가능)로
정렬 가능하며,
•mouseup되면 새로고침 대신 상품리스트 섹션만
갱신 됨
현지투어 예약 시스템주요 기능 사용자 –상품예약
•상품상세페이지에서 날짜와 인원을
선택하면 상품 가격이 자동 계산
•예약하기를 클릭하면 로그인 하지 않은
경우 로그인/회원가입 창으로연결
•로그인 한 회원은 예약진행
현지투어 예약 시스템주요 기능 사용자 –상품예약
• Import 결제 API를 사용
현지투어 예약 시스템주요 기능 사용자 –상품예약
현지투어 예약 시스템주요 기능 사용자 –예약취소
• 상단 navigationbar에서 프로필 사진 또는 이름을 클릭하면 side navigationbar 가 열리고
• 여기에서 내 예약 탭을 클릭하면 예약 취소 가능
현지투어 예약 시스템주요 기능 사용자 –예약취소
• 예약 취소 버튼을 클릭하여 예약 취소 사유 작성
현지투어 예약 시스템주요 기능 사용자 –예약취소
•예약을 취소하면 예약상태가 취소요청 상태로 변경되고
• 관리자의 승인 및 환불 완료 후 예약 취소상태로
변경 됨
현지투어 예약 시스템주요 기능 사용자 –여행후기
• 입력 필드에 Autocomplete기능
• 도시명으로 검색하면 해당 도시의 여행 후기 검색 가능
현지투어 예약 시스템주요 기능 사용자 –여행후기
• 여행후기 페이지에서 상단 투어제목을 클릭하면
해당
여행상품의 상세 페이지로 이동 가능
현지투어 예약 시스템주요 기능 사용자 –여행후기
• 다녀 온 여행상품이 있는 경우 dropdown
메뉴에 나타남
• rich text editor로 quill editor 사용
현지투어 예약 시스템주요 기능 사용자 –여행후기
• 여행후기 게시판에 여행상품에 대해 후기를 작성하게
되면
해당 상품의 상세페이지에도 후기가 남겨지게 됨
현지투어 예약 시스템주요 기능 사용자 – 회원가입
•회원가입은 naver , facebook, 일반가입 방식으
로 가능하며
•일반가입 방식의 경우 회원 가입 시 기입한 이메
일로 인증메일 발송 됨
현지투어 예약 시스템주요 기능 사용자 – 회원가입
• 사용자 이메일에서 인증링크를 클릭하면 회원가입
완료
현지투어 예약 시스템주요 기능 사용자 -로그인
• Naver, FaceBookAPI를 사용하여 SNS로그인 가능
현지투어 예약 시스템주요 기능 사용자 -위시리스트
•상품 목록 상단의 하
트모양 아이콘을 클릭
하면 위시리스트에 담
기 및 삭제 가능
현지투어 예약 시스템주요 기능 사용자 -위시리스트
• 마이페이지에서 위시리스트 관리 가능
현지투어 예약 시스템주요 기능 사용자 -위시리스트
• 위시리스트 목록을 도시별로 모아서 볼 수 있으며
• 상품목록 상단의 아이콘을 클릭하면 목록에서 제
거 됨
현지투어 예약 시스템주요 기능 사용자 -공지사항
• dropdown 메뉴에서 원하는 카테고리 선택
현지투어 예약 시스템주요 기능 사용자 -공지사항
• 세부 내용은 펼쳐보기로 처리
현지투어 예약 시스템주요 기능 사용자 -댓글
현지투어 예약 시스템주요 기능 관리자 -상품등록
현지투어 예약 시스템주요 기능 관리자 -상품등록
•상품 예약자 수가 상품 등록 시 기입 된 최대 인원
수에 도달하면 예약 불가로 전환 됨
현지투어 예약 시스템주요 기능 관리자 -상품등록
• 첨부 된 사진은 thumnail 사진으로 사용 됨
• 첫 번째 첨부 된 사진은 대표사진으로 지정
됨
현지투어 예약 시스템주요 기능 관리자 -상품등록
•rich text editor로 quill editor 를 사용하여 자
유롭게 사진 및 동영상 첨부가 가능하고, 글
씨 크기, 글씨체 등 조절 가능
현지투어 예약 시스템주요 기능 관리자 -상품등록
• 구글 API를 사용하여 지도 첨부
현지투어 예약 시스템주요 기능 관리자 -상품등록
•판매 불가 날짜를 설정하면 해당 날짜에
는 상품 예약이 되지 않도록 지정 됨
현지투어 예약 시스템주요 기능 관리자 -상품등록
• 상품 등록이 완료 되면 메인페이지의 신규상품 목록에도 일주일 간 보여짐
현지투어 예약 시스템주요 기능 관리자 -예약관리
현지투어 예약 시스템주요 기능 관리자 -예약관리
• 상품명, 날짜, 예약자명으로 검색 가
능
• 예약 취소요청은 하이라이트 표시
되어
쉽게 구별 가능하게 함
현지투어 예약 시스템주요 기능 관리자 -예약관리
•승인을 클릭하면 alert창을 띄워 다시
한 번 확인 할 수 있도록 함
• 승인 완료되면 예약상태가
취소요청에서 예약취소로 변경 됨
현지투어 예약 시스템주요 기능 관리자 -예약관리
•예약자의 요청 사항이 있는 경우만 체
크 표시가 나타나고 클릭 시 modal 창
을 통해 세부내용 확인
현지투어 예약 시스템주요 기능 관리자 -회원관리
현지투어 예약 시스
템
주요 기능 관리자 -회원관리
•회원의 가입일, 로그인 유형, 탈퇴여
부, 탈퇴 사유 등 확인 가능
현지투어 예약 시스템시연 영상
https://youtu.be/xeFrYaEQwm8
현지투어 예약 시스템시스템 아키텍쳐
시스템 구조도
결제정보와 ses
sion정보가 일
치하면 DB저장
불일치하
면 결제취
소
현지투어 예약 시스템
예약, 결제 흐름
도
시스템 아키텍쳐
결제요
청
결제요
청
결제번
호
3
3 4
결제번
호
4
결제번
호
5
6 결제번호요
청
결제정
보
7
1 예약정
보
2 주문번
호
8
결과전
송
9
FITTOUR
--
---
---
---

More Related Content

Similar to Portfolio

K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128jinwook shin
 
java 프로젝트 - 안전한 홈 셰어링 플렛폼
java 프로젝트 - 안전한 홈 셰어링 플렛폼java 프로젝트 - 안전한 홈 셰어링 플렛폼
java 프로젝트 - 안전한 홈 셰어링 플렛폼EunYeongJang
 
애자일 스크럼과 JIRA
애자일 스크럼과 JIRA 애자일 스크럼과 JIRA
애자일 스크럼과 JIRA Terry Cho
 
디컨특강31
디컨특강31디컨특강31
디컨특강31Kangmin Oh
 
또바기_ 목표 실천율 피드백을 제공하는 IoT 플래너 앱
또바기_ 목표 실천율 피드백을 제공하는 IoT 플래너 앱또바기_ 목표 실천율 피드백을 제공하는 IoT 플래너 앱
또바기_ 목표 실천율 피드백을 제공하는 IoT 플래너 앱EunsolJo2
 
언론사에 구글 애널리틱스 도입하기 - 강의 1주차
언론사에 구글 애널리틱스 도입하기 - 강의 1주차언론사에 구글 애널리틱스 도입하기 - 강의 1주차
언론사에 구글 애널리틱스 도입하기 - 강의 1주차chan693050
 
Airbnb project
Airbnb projectAirbnb project
Airbnb projectHayun Kim
 
2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI 2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI Billy Choi
 
사용자분석 @코더스하이세미나
사용자분석 @코더스하이세미나사용자분석 @코더스하이세미나
사용자분석 @코더스하이세미나Mikyung Kang
 
놀자Go서비스사업계획서(by렉스킹스)
놀자Go서비스사업계획서(by렉스킹스)놀자Go서비스사업계획서(by렉스킹스)
놀자Go서비스사업계획서(by렉스킹스)ByungHo Kang
 
UX/UI의 이해와 도전
UX/UI의 이해와 도전UX/UI의 이해와 도전
UX/UI의 이해와 도전Billy Choi
 
역삼역, 이마트 AI_v최종.pdf
역삼역, 이마트 AI_v최종.pdf역삼역, 이마트 AI_v최종.pdf
역삼역, 이마트 AI_v최종.pdfDeukJin Jeon
 
공유여행을 통한 농어촌관광 솔루션 제안
공유여행을 통한 농어촌관광 솔루션 제안공유여행을 통한 농어촌관광 솔루션 제안
공유여행을 통한 농어촌관광 솔루션 제안Sun Mi Seo
 
시스템종합설계2조 큐피트
시스템종합설계2조 큐피트시스템종합설계2조 큐피트
시스템종합설계2조 큐피트다정 임
 
게임제작개론 9
게임제작개론 9게임제작개론 9
게임제작개론 9Seokmin No
 

Similar to Portfolio (20)

K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
K모바일 모바일웹과 앱 ux 디자인 전략 및 가이드-110128
 
UX Case Study
UX Case StudyUX Case Study
UX Case Study
 
java 프로젝트 - 안전한 홈 셰어링 플렛폼
java 프로젝트 - 안전한 홈 셰어링 플렛폼java 프로젝트 - 안전한 홈 셰어링 플렛폼
java 프로젝트 - 안전한 홈 셰어링 플렛폼
 
애자일 스크럼과 JIRA
애자일 스크럼과 JIRA 애자일 스크럼과 JIRA
애자일 스크럼과 JIRA
 
디컨특강31
디컨특강31디컨특강31
디컨특강31
 
또바기_ 목표 실천율 피드백을 제공하는 IoT 플래너 앱
또바기_ 목표 실천율 피드백을 제공하는 IoT 플래너 앱또바기_ 목표 실천율 피드백을 제공하는 IoT 플래너 앱
또바기_ 목표 실천율 피드백을 제공하는 IoT 플래너 앱
 
Airbnb
AirbnbAirbnb
Airbnb
 
언론사에 구글 애널리틱스 도입하기 - 강의 1주차
언론사에 구글 애널리틱스 도입하기 - 강의 1주차언론사에 구글 애널리틱스 도입하기 - 강의 1주차
언론사에 구글 애널리틱스 도입하기 - 강의 1주차
 
Airbnb project
Airbnb projectAirbnb project
Airbnb project
 
2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI 2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI
 
수정수정
수정수정수정수정
수정수정
 
사용자분석 @코더스하이세미나
사용자분석 @코더스하이세미나사용자분석 @코더스하이세미나
사용자분석 @코더스하이세미나
 
놀자Go서비스사업계획서(by렉스킹스)
놀자Go서비스사업계획서(by렉스킹스)놀자Go서비스사업계획서(by렉스킹스)
놀자Go서비스사업계획서(by렉스킹스)
 
UX/UI의 이해와 도전
UX/UI의 이해와 도전UX/UI의 이해와 도전
UX/UI의 이해와 도전
 
역삼역, 이마트 AI_v최종.pdf
역삼역, 이마트 AI_v최종.pdf역삼역, 이마트 AI_v최종.pdf
역삼역, 이마트 AI_v최종.pdf
 
H사 IPA Usecase
H사 IPA UsecaseH사 IPA Usecase
H사 IPA Usecase
 
Ipa usecase
Ipa usecaseIpa usecase
Ipa usecase
 
공유여행을 통한 농어촌관광 솔루션 제안
공유여행을 통한 농어촌관광 솔루션 제안공유여행을 통한 농어촌관광 솔루션 제안
공유여행을 통한 농어촌관광 솔루션 제안
 
시스템종합설계2조 큐피트
시스템종합설계2조 큐피트시스템종합설계2조 큐피트
시스템종합설계2조 큐피트
 
게임제작개론 9
게임제작개론 9게임제작개론 9
게임제작개론 9
 

Portfolio

  • 1. FITTour 여행후기가 있는 Seung Been Oh https://github.com/OhSeungBeen/bitcamp-fit-tour seungbeenoh@gmail.com 현지투어 예약 시스템
  • 2. 목차 1. 주제 선정 배경 (3-5p) 2. 현황 및 문제점 (6-10p) 3. 프로젝트 개발 및 기능상세 • 개발목표 (11p) • 개발환경 (12p) • 작업기간 (13p) • UI 프로토타입 (14p) • Usecase(15p) • Usecase명세서 (16p) • DB모델링 (17p) • 시스템 구조도(18p) • 주요기능 (19p – 52p) • 시연영상 (53p) 4. 시스템 아키텍처 (54-55p)
  • 3. 현지투어 예약 시스템주제 선정배경 개별 자유여행의 이유? • 소득증가에 따른 여가활동으로 여행이나 관광 활동 잦아짐 • IT기술의 발달로 인한 여행 정보 습득이 용이 • 패키지여행상품 이용자가 불만족하여 자유여행상품을 이용 • 자신의 의견을 반영한 여행에서 만족감 느낌 가족여행 시 구매한 여행상품 개인여행 시 구매한 여 행 상 품 전체패키지 부분패키지 전체패키지 부분패키지 17.5 16.6 14.2 31.9 52.9 53.1 82.5 83.4 85.8 68.1 47.1 46.9 2015 2016 2017 2015 2016 2017 출처: 2017 국민여행 실태조사(2018.5발간)_문화체육관광부
  • 4. 현지투어 예약 시스템주제 선정배경 자유여행객 증가로 인한 변화 • 온라인 여행사의 급성장 • 다양한 여행상품의 등장 • 기존 대기업여행사(ex.하나투어, 모두투어) 중심에서 FIT상품을 전문으로 하는 소규모 여행사들의 출현
  • 5. 현지투어 예약 시스템주제 선정배경 자유여행객의 여행계획 트랜드 • 항공권과 호텔은 OTA(Online TravleAgency)나 메타서치를 기반으로 한 대형 기업에서 구매하고, • 여행지에서의 현지 투어, 입장권, 패스등은 맞춤여행, 에어텔 등을 판매하던 자유여행 전문여행사에 문의 • 포털사이트 등을 통해 여행정보 검색
  • 6. 현지투어 예약 시스템현황 분석 네이버 현지투어 • 호텔과 항공에 진출한 데 이어서 작년 7월 단품 메타서치로 영역 확장을 선언하고 네이버 현지투어 플랫폼을 선보임 • 마이리얼트립과 공동 개발한 중개서비스 플랫폼 • 실제 예약을 위해서는 별도 사이트로 이동해야 함 =>상품 탐색 과정에서 여러 사이트를 이동해야 하는 불편함
  • 7. 현지투어 예약 시스템 네이버 현지투어 • 사용자에게 편리하지 않은 검색 옵션과 UI 현황 분석
  • 8. 마이리얼트립 • 한번 하위 카테고리로 들어가게 되면 다른 카테고리로 가기 위해서 상위 또는 메인 화면으로 돌아가야 한다는 불편함 • 가격대 별 검색, 차량투어, 워킹투어 등으로는 검색 불가 현지투어 예약 시스템현황 분석
  • 9. 현지투어 예약 시스템현황 분석 유로자전거나라 • 대표적인 현지여행 투어 사이트 • 여행후기를 보고 해당 여행상품이 궁금해지더라도 링크가 연결되지 않음 =>실제 상품 구매로 이어질 수 있는 가능성을 놓치게 됨
  • 10. 현지투어 예약 시스템현황 분석 • 여행자들의 활발한 정보 공유 • 자유로운 여행 수기 작성과 정보수집 가능하지만 • 정해진 양식이 없기 때문에 작성자가 제목에 잘 명시하지 않거나, 이용자가 꼼꼼히 제목을 읽지 않으면 원하는 지역의 여행 정보인지 파악 하기 어려움 • 투어상품의 직접적인 명시는 홍보글에 해당되어 간접적으로만 언급 되기 때문에 직관적인 정보를 얻기 어려움
  • 11. 개발 목표 현지투어 예약 시스템 여행후 기 여행상 품 조회 상품예 약 여행자들이 자신의 경험을 공유하고 다른 여행자들의 경험을 토대로 여행상품을 탐색하고 여행후기와 여행상품이 연동되어 실제상품 구매에 이르도록 유도
  • 13. 현지투어 예약 시스템작업 기간 작업 내용 1주 2주 3주 4주 5주 6주 7주 8주 9주 10주 프로젝트 기획 ` UI프로토타입 유스케이스 작성 데이터베이스 모델링 백엔드 프로그래밍 및 기능구현 테스트 및 디버깅
  • 15. Use- Case 현지투어 예약 시스템 회원가입 여행상품 조회 여행후기 조회 공지사항 조회 로그인 로그아웃 회원탈퇴 프로필관리 여행후기관리 위시리스트 관리 여행상품 예약관리 댓글관리 공지사항 관리 여행후기 관리 (조회, 삭제) 댓글 관리 (조회, 삭제) 여행상품 관리 예약관리 비회 원 회 원 관리 자 회원관리
  • 16. Use-Case 명세서 현지투어 예약 시스템 •https://github.com/OhSeungBeen/bitcamp-fit- tour/tree/master/FIT-Tour-doc/use-case
  • 18. 현지투어 예약 시스템시스템 구조 – MVC 디자인패턴 애플리케이션의 구성할 때 구성요소를 세가지 역할 model, view, controller 나누어 개발 Model – 데이터이자 비즈니스 로직 (dao, domain, service) View – 화면상의 윈도우(html,css,javascript) Controller – 사용자의 요청을 받아 이를 수행하기 위한 비 즈니스 로직을 선택하고 호출하며 수행한 비즈니스 로직 의 결과를 뷰를 통해 보여준다.
  • 19. 현지투어 예약 시스템주요 기능 사용자 -상품검색 •모든 페이지 상단에 검색창 위치 •여행 국가, 도시, 여행상품명으로 검색 가 능 •입력 필드에 Autocomplete 기능
  • 20. 현지투어 예약 시스템주요 기능 사용자 -상품검색 •상단 navigationbar 에서 대륙, 국가, 도시별로 검색 •가격낮은순, 인기순, 후기순으로 상품 정렬
  • 21. 현지투어 예약 시스템주요 기능 사용자 -상품검색 •원하는 가격대, 소요시간, 테마(중복선택 가능)로 정렬 가능하며, •mouseup되면 새로고침 대신 상품리스트 섹션만 갱신 됨
  • 22. 현지투어 예약 시스템주요 기능 사용자 –상품예약 •상품상세페이지에서 날짜와 인원을 선택하면 상품 가격이 자동 계산 •예약하기를 클릭하면 로그인 하지 않은 경우 로그인/회원가입 창으로연결 •로그인 한 회원은 예약진행
  • 23. 현지투어 예약 시스템주요 기능 사용자 –상품예약 • Import 결제 API를 사용
  • 24. 현지투어 예약 시스템주요 기능 사용자 –상품예약
  • 25. 현지투어 예약 시스템주요 기능 사용자 –예약취소 • 상단 navigationbar에서 프로필 사진 또는 이름을 클릭하면 side navigationbar 가 열리고 • 여기에서 내 예약 탭을 클릭하면 예약 취소 가능
  • 26. 현지투어 예약 시스템주요 기능 사용자 –예약취소 • 예약 취소 버튼을 클릭하여 예약 취소 사유 작성
  • 27. 현지투어 예약 시스템주요 기능 사용자 –예약취소 •예약을 취소하면 예약상태가 취소요청 상태로 변경되고 • 관리자의 승인 및 환불 완료 후 예약 취소상태로 변경 됨
  • 28. 현지투어 예약 시스템주요 기능 사용자 –여행후기 • 입력 필드에 Autocomplete기능 • 도시명으로 검색하면 해당 도시의 여행 후기 검색 가능
  • 29. 현지투어 예약 시스템주요 기능 사용자 –여행후기 • 여행후기 페이지에서 상단 투어제목을 클릭하면 해당 여행상품의 상세 페이지로 이동 가능
  • 30. 현지투어 예약 시스템주요 기능 사용자 –여행후기 • 다녀 온 여행상품이 있는 경우 dropdown 메뉴에 나타남 • rich text editor로 quill editor 사용
  • 31. 현지투어 예약 시스템주요 기능 사용자 –여행후기 • 여행후기 게시판에 여행상품에 대해 후기를 작성하게 되면 해당 상품의 상세페이지에도 후기가 남겨지게 됨
  • 32. 현지투어 예약 시스템주요 기능 사용자 – 회원가입 •회원가입은 naver , facebook, 일반가입 방식으 로 가능하며 •일반가입 방식의 경우 회원 가입 시 기입한 이메 일로 인증메일 발송 됨
  • 33. 현지투어 예약 시스템주요 기능 사용자 – 회원가입 • 사용자 이메일에서 인증링크를 클릭하면 회원가입 완료
  • 34. 현지투어 예약 시스템주요 기능 사용자 -로그인 • Naver, FaceBookAPI를 사용하여 SNS로그인 가능
  • 35. 현지투어 예약 시스템주요 기능 사용자 -위시리스트 •상품 목록 상단의 하 트모양 아이콘을 클릭 하면 위시리스트에 담 기 및 삭제 가능
  • 36. 현지투어 예약 시스템주요 기능 사용자 -위시리스트 • 마이페이지에서 위시리스트 관리 가능
  • 37. 현지투어 예약 시스템주요 기능 사용자 -위시리스트 • 위시리스트 목록을 도시별로 모아서 볼 수 있으며 • 상품목록 상단의 아이콘을 클릭하면 목록에서 제 거 됨
  • 38. 현지투어 예약 시스템주요 기능 사용자 -공지사항 • dropdown 메뉴에서 원하는 카테고리 선택
  • 39. 현지투어 예약 시스템주요 기능 사용자 -공지사항 • 세부 내용은 펼쳐보기로 처리
  • 40. 현지투어 예약 시스템주요 기능 사용자 -댓글
  • 41. 현지투어 예약 시스템주요 기능 관리자 -상품등록
  • 42. 현지투어 예약 시스템주요 기능 관리자 -상품등록 •상품 예약자 수가 상품 등록 시 기입 된 최대 인원 수에 도달하면 예약 불가로 전환 됨
  • 43. 현지투어 예약 시스템주요 기능 관리자 -상품등록 • 첨부 된 사진은 thumnail 사진으로 사용 됨 • 첫 번째 첨부 된 사진은 대표사진으로 지정 됨
  • 44. 현지투어 예약 시스템주요 기능 관리자 -상품등록 •rich text editor로 quill editor 를 사용하여 자 유롭게 사진 및 동영상 첨부가 가능하고, 글 씨 크기, 글씨체 등 조절 가능
  • 45. 현지투어 예약 시스템주요 기능 관리자 -상품등록 • 구글 API를 사용하여 지도 첨부
  • 46. 현지투어 예약 시스템주요 기능 관리자 -상품등록 •판매 불가 날짜를 설정하면 해당 날짜에 는 상품 예약이 되지 않도록 지정 됨
  • 47. 현지투어 예약 시스템주요 기능 관리자 -상품등록 • 상품 등록이 완료 되면 메인페이지의 신규상품 목록에도 일주일 간 보여짐
  • 48. 현지투어 예약 시스템주요 기능 관리자 -예약관리
  • 49. 현지투어 예약 시스템주요 기능 관리자 -예약관리 • 상품명, 날짜, 예약자명으로 검색 가 능 • 예약 취소요청은 하이라이트 표시 되어 쉽게 구별 가능하게 함
  • 50. 현지투어 예약 시스템주요 기능 관리자 -예약관리 •승인을 클릭하면 alert창을 띄워 다시 한 번 확인 할 수 있도록 함 • 승인 완료되면 예약상태가 취소요청에서 예약취소로 변경 됨
  • 51. 현지투어 예약 시스템주요 기능 관리자 -예약관리 •예약자의 요청 사항이 있는 경우만 체 크 표시가 나타나고 클릭 시 modal 창 을 통해 세부내용 확인
  • 52. 현지투어 예약 시스템주요 기능 관리자 -회원관리
  • 53. 현지투어 예약 시스 템 주요 기능 관리자 -회원관리 •회원의 가입일, 로그인 유형, 탈퇴여 부, 탈퇴 사유 등 확인 가능
  • 54. 현지투어 예약 시스템시연 영상 https://youtu.be/xeFrYaEQwm8
  • 55. 현지투어 예약 시스템시스템 아키텍쳐 시스템 구조도
  • 56. 결제정보와 ses sion정보가 일 치하면 DB저장 불일치하 면 결제취 소 현지투어 예약 시스템 예약, 결제 흐름 도 시스템 아키텍쳐 결제요 청 결제요 청 결제번 호 3 3 4 결제번 호 4 결제번 호 5 6 결제번호요 청 결제정 보 7 1 예약정 보 2 주문번 호 8 결과전 송 9