Story

1 사용자는 메인 화면을 볼 수 있다.
2 사용자는 위시리스트로 숙소를 담을 수 있어야 한다.
3 사용자는 자신의 계정으로 로그인할 수 있어야 한다.
4 사용자는 자신이 여행하고자 하는 여행지를 검색할 수 있어야 한다.
5 사용자는 원하는 숙소를 지정해 원하는 예약 날짜 및 조건을 입력할 수 있어야 한다.
6 사용자는 검색 결과로 자신이 원하는 조건에 해당하는 결과를 카드 리스트 형태로 확인할 수 있어야 한다.
7 사용자는 검색 결과로 자신이 원하는 조건에 해당하는 결과를 지도로 확인할 수 있어야 한다.
8 사용자는 검색 결과 중 한 가지를 선택하면 선택한 것에 해당하는 숙소 상세 화면을 볼 수 있어야 한다
9 사용자는 자신이 원하는 조건을 선택할 수 있는 예약 화면을 볼 수 있어야 한다.
10 사용자가 예약하기 버튼을 누르면 조건 및 가격 정보를 포함하는 최종 예약 팝업뷰를 볼 수 있어야 한다.
11 사용자는 자신이 예약한 숙소를 볼 수 있어야 한다.
12 사용자가 예약한 숙소를 선택하면 예약 정보를 담는 숙소 상세 페이지가 보이고, 예약 취소 버튼을 눌러 예약을 취소할 수 있어야 한다.

Task

1 사용자는 메인 화면을 볼 수 있다.

• 1-1 검색바를 눌러 검색 화면으로 이동.
• 1-2 hero image section에 '여행 아이디어 얻기' 버튼을 눌러 여행 아이디어 얻기 기능을 사용할 수 있음(실제 동작 구현 필요 없음).
• 1-3 검색, 위시리스트, 로그인을 담는 탭바를 통해 세 가지 기능 화면으로 이동.
• 1-4 (선택사항) '가까운 여행지 둘러보기' 섹션을 통해 가까운 여행지 요소를 볼 수 있어야 함.
• 1-5 (선택사항) '어디에서나, 여행은 살아보는거야! 섹션을 통해 테마가 담긴 여행지를 볼 수 있어야 함(실제 동작 구현 필요 없음).

2 사용자는 위시리스트로 숙소를 담을 수 있어야 한다

• 2-1 하단 탭바를 선택해 위시리스트 화면으로 이동할 수 있어야 함
• 2-2 위시리스트 화면 이동 시 자신이 담은 위시리스트 숙소를 리스트 형태로 확인할 수 있어야 함
• 2-3 숙소 찾기 결과에서 하트를 누르면 위시리스트에 해당 숙소가 추가됨
• 2-4 숙소 상세 화면에서 하트를 누르면 위시리스트에 해당 숙소가 추가됨
• 2-5 숙소 찾기 결과에서 위시리스트로 활성화된 하트를 다시 누르면 위시리스트에서 지워져야 함
• 2-6 숙소 상세 화면에서 위시리스트로 활성화된 하트를 다시 누르면 위시리스트에서 지워져야 함
• 2-7 위시리스트 화면 안에서 활성화된 하트를 다시 누르면 위시리스트에서 지워져야 함
• 2-8 위시리스트 화면에서 특정 숙소 선택 시 숙소 상세 화면으로 이동

3 사용자는 자신의 계정으로 로그인할 수 있어야 한다

• 3-1 로그인 화면에서 깃허브 연동 화면으로 로그인이 가능해야 함
• 3-2 로그인 정보를 키체인에 저장할 수 있어야 함.

4 사용자는 자신이 여행하고자 하는 여행지를 검색할 수 있어야 한다.

• 4-1 원하는 여행지(근처의 인기 여행지)를 선택할 수 있음
• 4-2 여행지를 직접 입력해 검색하면 관련 검색 결과를 리스트로 확인 가능
• 4-3 검색어 지우기 버튼을 통해 직접 입력한 검색어를 지울 수 있음

5 사용자는 원하는 숙소를 지정해 원하는 예약 날짜 및 조건을 입력할 수 있어야 한다.

• 5-1 달력에서 이미 지나간 날짜는 선택할 수 없도록 비활성화 함
• 5-2 현재 요일 이후의 달력만 스크롤링되어야 함
• 5-3 달력에서 숙박 기간의 시작 날짜와 끝 날짜를 선택하면 해당 기간의 영역을 하이라이트된 상태로 확인할 수 있어야 함
• 5-4 달력에서 숙박 기간의 시작 날짜와 끝 날짜는 같을 수 있음
• 5-5 달력에서 늦은 시점을 먼저 선택하고 이른 시점을 나중에 선택하는 경우 체크인/체크아웃 날짜를 서로 바꿔줌
• 5-6 선택한 여행지 지역이 '위치'에 보여져야 함
• 5-7 체크인/체크아웃은 앞서 선택한 기간을 날짜로 보여줘야 함
• 5-8 '요금' 선택 시 사용자는 가격 범위(1,000,000원 이상은 '1,000,000원+'로 표시)를 확인할 수 있고, 범위 선택을 통해 원하는 가격 범위를 설정할 수 있어야 함
• 5-9 '인원' 선택 시 성인, 어린이, 유아의 인원 추가 화면을 보여주고 자신이 원하는 구성으로 추가할 수 있어야 함
• 5-10 인원 추가는 성인, 어린이, 유아 모두 최대 여덟명으로 제한함
• 5-11 인원 입력 시 표시는 유아는 유아 그대로 보여주고, 성인과 어린이는 게스트로 보여줌
• 5-12 성인의 수가 0인 상태에서 어린이 및 유아의 수가 추가된 경우 성인의 수를 1이 되도록 함
• 5-13 화면 내 선택사항은 '다음'을 누를 경우 순서에 따라 이어지도록 함
• 5-14 건너뛰기 버튼을 통해서 현재 선택사항을 건너뛰고 다음으로 이동될 수 있어야 함
• 5-15 선택사항 입력 값이 전부 입력되면 오른쪽 아래에 검색 버튼이 활성화 되고, 버튼을 누르면 조건에 맞는 검색을 수행해 결과를 보여주는 화면으로 이동함

6 사용자는 검색 결과로 자신이 원하는 조건에 해당하는 결과를 카드 리스트 형태로 확인할 수 있어야 한다.

• 6-1 앞서 선택한 위치, 기간, 요금, 인원을 보여주는 레이블
• 6-2 선택 가능한 숙소의 수를 보여주는 레이블
• 6-3 해당 숙소의 대표 이미지를 보여줌
• 6-4 위시리스트와 관련해 활성화되어 있거나 활성화되어 있지 않은 하트 버튼
• 6-5 대표 이미지 아래 평점과 후기의 수를 보여주는 레이블
• 6-6 해당 숙소의 이름, 가격/박, 총액을 보여주는 레이블
• 6-7 화면 하단에 지도 버튼을 통해 숙소의 위치를 보여주는 지도 화면으로 이동 가능
• 6-8 지우기 버튼을 통해 앞서 검색한 검색어에 해당하는 결과를 지울 수 있고, 처음 검색 화면으로 이동

7 사용자는 검색 결과로 자신이 원하는 조건에 해당하는 결과를 지도로 확인할 수 있어야 한다.

• 7-1 좌측 상단에 햄버거 버튼을 두고, 사용자가 누를 경우 이전 화면인 카드 리스트 화면으로 이동
• 7-2 지도 화면에 위치한 숙소마다 가격 레이블이 있어야 함
• 7-3 하단에는 가로로 스크롤되는 숙소 카드 리스트가 있음
• 7-4 카드 선택 시 해당 숙소 상세 화면으로 이동
• 7-5 (선택사항) 하단의 가로 스크롤 카드 리스트를 스크롤하면 해당 숙소 위치를 보여줄 수 있도록 움직임

8 사용자는 검색 결과 중 한 가지를 선택하면 선택한 것에 해당하는 숙소 상세 화면을 볼 수 있어야 한다.

• 8-1 상세 화면 내 좌측 상단에 이전 화면으로 넘어갈 수 있는 버튼이 있어야 함
• 8-2 우측 상단에 해당 숙소 정보를 공유할 수 있는 공유 버튼을 두고, 입력 시 숙소 정보를 공유할 수 있는 액션 시트가 노출됨
• 8-3 공유 버튼을 누르면 웹 페이지 링크를 복사함
• 8-4 숙소 이미지는 스크롤이 가능하며, 현재 이미지가 몇 번째인지를 나타내는 분수 모양의 레이블을 둠
• 8-5 숙소 이름, 평점, 후기 개수, 지역을 나타내는 섹션
• 8-6 '레지던스 전체', 호스트의 사진, 호스트의 이름, 수용 가능 인원 및 숙소 구성을 표시하는 섹션
• 8-7 숙소를 소개하는 간단한 설명을 담는 섹션
• 8-8 간단한 설명에서 더 자세한 설명을 보기 위한 '더보기' 버튼, 입력 시 더 상세한 소개가 나옴
• 8-9 화면 하단에 가격 조건과 기간을 표시하고 예약하기 버튼
• 8-10 예약하기 버튼은 요금과 날짜 입력이 되어 있지 않은 경우에 '정보 입력 하기' 버튼으로 표시하고 누르면 정보를 입력할 수 있도록 함
• 8-11 예약하기 버튼을 누르면 앞서 입력한 조건과 예약하기 버튼이 포함된 팝업뷰를 보여줌

9 사용자는 자신이 원하는 조건을 선택할 수 있는 예약 화면을 볼 수 있어야 한다.

• 9-1 앞서 입력하지 않은 숙박 조건을 입력할 수 있도록 함
• 9-2 하단 좌측 입력 조건을 지울 수 있는 지우기 버튼
• 9-3 입력이 된 부분은 건너뛰고 다음 조건으로 이동할 수 있는 '다음' 버튼
• 9-4 모든 조건이 입력되면 '다음' 버튼은 '예약'으로 바뀜
• 9-5 예약 버튼을 누르면 최종 예약 팝업뷰를 보여줌

10 사용자가 예약하기 버튼을 누르면 조건 및 가격 정보를 포함하는 최종 예약 팝업뷰를 볼 수 있어야 한다.

• 10-1 가격(가격/박)을 보여주는 레이블
• 10-2 체크인, 체크아웃 날짜
• 10-3 예약하기 버튼, 누르면 예약 탭으로 이동
• 10-4 숙박 및 기타 가격 레이블
• 10-5 가격 합계 레이블

11 사용자는 자신이 예약한 숙소를 볼 수 있어야 한다.

• 11-1 특정 카드 선택 시 해당 숙소에 대한 상세 내용으로 이동
• 11-2 카드 형태의 리스트로 사용자가 예약한 숙소를 보여줌
• 11-3 카드는 숙소 이미지, 기간, 지역, 숙소 이름을 보여줌

12 사용자가 예약한 숙소를 선택하면 예약 정보를 담는 숙소 상세 페이지가 보이고, 예약 취소 버튼을 눌러 예약을 취소할 수 있어야 한다.

• 12-1 좌우로 스크롤 가능한 이미지를 두고 이미지 우측 하단에 몇 번째 이미지인지 표시하는 레이블
• 12-2 숙소 이미지 아래 위치와 숙소 이름을 담는 레이블
• 12-3 체크인, 체크아웃 레이블과 해당 날짜를 담는 레이블
• 12-4 호스트, 숙소 이용 인원, 가격을 보여주는 간략 정보 섹션
• 12-5 예약 취소 버튼, 누르면 예약 탭에서 예약 일정이 사라짐