• 더미 데이터로 mock api 구현

• CollectionView를 활용한다.
• 검색 결과는 SearchBarController를 활용한다.
• 검색 시, 자동완성 기능을 위해 DiffableDataSource를 활용한다.

• 인원 조정 모달(UI)
  • 검색바에서 인원 영역을 클릭하면 게스트 인원을 입력할수 잇는 모달창이 뜬다

• 메인 레이아웃(UI)
  • 로고와 메뉴 마이페이지 기능을 하는 버튼이 있는 GNB 가 상단에 위치
  • GNB 아래에 날짜 요금 인원을 기반으로 숙소를 검색할수 있는 검색바가 위치한다.

• spring boot 기본 프로젝트 생성
• datasource 설정
• jasypt으로 datasource 비밀번호 암호화

• Collection View를 활용한다.
• Server API로 받아온 data를 화면에 보여준다.

• json파일로부터 data 불러오기 ex) regionCellModelData
• 자동완성된 cell 선택 시, 앱 크래시 이슈(array index out of range)
• 매직 넘버 사용 개선(cell의 높이 등을 상수나, model의 count 값으로 개선 필요)
• 더 이상 상속이 필요없는 class에 final 키워드 선언

• 캘린더 모달(UI)
  • 검색바에서 체크인 / 체크아웃 영역을 클릭하면 여행기간을 입력할수 있는 캘린더가 모달창으로 뜬다.
  • 캘린더는 현재달과 다음달의 2개월간 일정을 볼수있고 화살표를 누르면 두달 간격으로 캘린더가 슬라이딩 된다.

OAuth 구현 목록

• access token 얻기
  • https://github.com/login/oauth/access_token로 POST 요청
  • 바디 구성 : client id, client secrete 그리고 프론트에서 받은 code 정보
• github에서 유저 정보 가져오기
  • https://api.github.com/user로 GET 요청
  • Authorization header 구성 : access token 정보 추가
• JWT 생성
  • com.auth0:java-jwt:3.16.0 의존성 추가
  • GitHub 사용자 정보를 통해 JWT 생성
• 토큰 검증 interceptor 구현

참고

• GitHub OAuth Document

• 날짜 선택 기능 - Custom Calendar
• 가격대 선택 기능 - Slider
• 인원 선택 기능

1. 검색바에서 요금 영역을 클릭하면 선택한 날짜를 기준으로 선택된 순소들의 가격범위를 표시한 모달창이 뜬다.

2. 레인지 슬라이더를 이용해 가격을 설정할수 잇으며 슬라이더를 이동하면 가격범위 텍스트가 실시간으로 변경된다.

   => 가격 정보에는 최저 최고 값으로 표시가 된다.

   => 슬라이더의 양 버튼은 서로 완전히 겹치거나 서로를 지나처 이동살수 없다. (왼쪽은 항상 최저 가격 오른쪽 최고가격)

   => 그래프의 x축은 최저 - y 은 숙소 갯수

• 주소 검색 시, 자동완성 기능을 제공한다.
• Open API를 활용한다. -> MapKit 사용하는 것으로 변경

• 요금 모달(UI)
  • 검색바에서 요금 영역을 클릭하면 선택한 날짜를 기준으로 선택된 순소들의 가격범위를 표시한 모달창이 뜬다.

저희 OAuth flow 가 백엔드와 프론트엔드가 같이 진행되는거라면 저번에 같이 했던 flow는,
=> 1. 프론트가 code 를 받아서 백엔드에게 넘겨준다.
2. 백엔드가 받은 code 로 access token을 발급 받는다.
3. (선택)백엔드가 발급받은 access token 으로 jwt 만들기
4. 백엔드가 만든 jwt를 프론트에게 건네주기

저번에 구현한거는 2번까지만 구현하고 localStorage 내에 로그인 여부만 저장해서 로그인을 구현하였는데 이번에 구현한다면 access token 을 jwt 로 받는 로직 까지 해야할 것 같습니다.

일단 백엔드에서 클라이언트 코드 같은 게 필요하시니 woody github repo 에서 OAuth 어플리케이션을 만드는게 편할것 같습니다.

어플리케이션 이름: 우디 마음대루... 저는 WOOSUMONBNB 추천드립니다 ㅎㅎ

HOMEPAGE : http://localhost:3000/ ( FE 는 3000 인데 iOS 도 같은 주소인지는 모르겠네요 )

callback 주소 : http://localhost:3000/login ( FE 에서는 라우터로 구현할 겁니다. 아마 code를 받고 리다이렉트 되는 주소입니다. iOS 에서도 /login 페이지를 만드시구 / 페이지로 다시 돌아가도록 만드시면 될거에여!

=> 추가로 logOut API 요청도 따로 프론트에서 보내야할 것 같더라구요!

이해 안가시는 부분은 따로 slack dm 이나 댓글 남겨주세여!

• DB 물리 테이블 설계
• DB 서버에 실데이터 insert

• Endpoint 객체 구현
• Alamofire를 활용한다.
• http 통신을 위한 info.plist 설정을 추가한다.

캘린더 모달

1. 검색바에서 체크인 / 체크아웃 영역을 클릭하면 여행기간을 입력할수 있는 캘린더가 모달창으로 뜬다.

2. 캘린더는 현재달과 다음달의 2개월간 일정을 볼수있고 화살표를 누르면 두달 간격으로 캘린더가 슬라이딩 된다.

   => 검색바가 활성화 되면 Foucse 상태로 변한다.

   -> 이미 지난 날짜 및 예약된 날짜는 선택할수 없도록 비활성화

3. 날짜를 처음 클릭하면 체크인 텍스트 필드에 해당일자가 입력

4. 다음 날짜를 클릭하면 체크아웃 텍스트 필드에 해당일자가 입력된다.

   => 만약에 이미 입력한 체크인 값보다 앞선 일자의 값을 누를 경우 체크인 날짜가 변경되어 입력된다.

   => 같은 날짜를 두번 클릭하면 같은 일자가 체크인 체크아웃에 함께 입력된다.