# 6/10

## 데모 페이지

~~[링크]()~~ API 요청쪽 수정중
- local 에서는 msw 로 사용이 가능했지만 배포된 환경에서는 msw 가 돌아가지 않아서 API 요청 URL 을 고친 이후 올리겠습니다.

## 추가된 내용

### 차트 모듈

- 양옆 슬라이더가 겹쳐질때 요금이 제대로 반영되지 않는 문제 => if절로 min, max 값이 같아질때 max 값에는 기존의 슬라이드가 겹치지 않도록 설정한 sliderInterval(5)의 값과 백분율 percentage를 곱해준다.

- 빅서치바 날짜 인풋에서 x버튼 클릭 시에도 price 값 리셋

- 날짜 선택 미선택 시 차트 모달에 안내 메시지 출력

### 검색결과 페이지

- 피그마의 디자인과 같이 보여지도록 UI 작업 진행
- MSW 서버를 구축하여 데이터를 이전에 검색한 내용을 바탕으로 API 요청 -> 응답 이후 화면에 데이터가 뿌려지도록 구현
- 위시리스트를 제외하고 각 숙소를 클릭했을때 그 숙소에 대한 정보 모달창이 중앙에 띄워지도록 하며 모달창에는 응답 데이터를 받아와 데이터 노출
- Material UI를 사용하면서 모달 컴포넌트를 가져다가 사용하였는데 기능은 돌아가지만 브라우저 단에서 `ForwardRef(ModalUnstyled)` 에러 발생 해결 필요
- 숙소를 클릭했을때 동작하는 handleOnClick 함수 내에서 숙소가 가지고 있는 roomId로 API(api/room/{id}) 요청을 보낼때 useFetch Hooks를 호출하지 못하여 따로 roomDetail 정보를 가져오는 부분을 컴포넌트로 분리할지 고민중입니다.

### 로그인 (Github OAuth)
https://github.com/healtheloper/airbnb/pull/80

- 로그인을 Github OAuth 를 활용해서 구현해보았습니다.
- 프론트에서는 Github 에게 직접 code, client id, client secret 을 통하여 access token 을 얻는 POST 요청이 CORS 문제로 불가능한 것처럼 보여서 차선책으로 직접 간이서버를 만들어서 OAuth 로그인 전용으로 사용중입니다.

### Mock Service Worker (MSW)
https://github.com/healtheloper/airbnb/pull/68

- custom hook -> useFetch
- msw 를 활용해서 실제 서버와 통신대비 fetch 로직을 작성했습니다.

---