# 5/31 화

[team-31][FE] Muffin & Park 1주차 금요일 PR

안녕하세요 Hamill !
파크 & 머핀 입니다.
이번 PR 에서는 `캘린더`,`요금`,`인원` 관련 컴포넌트를 작성하여 넣어 사용할 수 있는 레이아웃을 짜보았고, 캘린더, 요금 차트관련 코드를 작성중입니다! 현재 캘린더는 `파크` 가, 요금관련 차트는 `머핀` 이 분업하여 구현중에 있습니다.

리뷰 잘부탁드립니다!

## 데모페이지

[링크](https://6295c63d222490108bdc37db--puffinbnb.netlify.app/)

## 추가된 내용

- 일정, 요금, 인원 클릭시 사용할 Layout 제작

### 차트 모듈
- 레인지 슬라이더 Material UI Component 사용
- 피그마 시안대로 슬라이더 적용
- min, max 초기값만 셋팅 (min, max는 getPriceMinMax함수에서 리턴받아 setPrice함수로 state 설정)
- min, max가 교차 되지 않도록 설정 (disableSwap 속성)
- 차트의 x축은 최저 ~ 최고, y축은 각 금액 범위의 숙소의 개수를 나타내므로 전달받은 숙소 데이터에서 10만원을 기준으로 범위마다 숙소를 몇개 사용할 수 있을지 객체형태로 데이터를 뽑음

|key(가격 범위)|value(숙소 개수)|
|---|---|
|100000|4|
|200000|10|
|300000|1|
|400000|1|
|500000|1|
|600000|1|

- 부드러운 차트를 그리기 위해 quadraticCurveTo(startX, startY, endX, endY)함수 사용 예정

### 캘린더 모듈
- NPM 패키지로 올릴 가능성을 생각하여 `jsx` 로 먼저 구현하였고, 별도로 폴더구조를 크게 신경쓰지 않았습니다. (Calendar 폴더 자체를 빼버릴 가능성을 생각)
- 위와 같은 이유로 mui 를 사용하지 않고 emotion 만을 활용해서 만들었고, 컴포넌트의경로 또한 상대경로로 사용중입니다.

- carousel(?) 형태로 구현 (arrow button 으로 무한이동)
- 사용자의 빠르고 연속적인 클릭을 방지하기 위한 `useThrottle` hooks 작성하여 사용

- throttle 사용 시


- throttle 사용 안할시


- 해당 월 에 맞는 날짜데이터 넣기 (Date 객체 계산 활용)
- 현재 특정 요일을 클릭하면 year, month, date 값을 받아올 수 있도록 설정
- 향후 useCalendar 같은 형태로 해당 값을 받아 `체크인/체크아웃` 에서 활용할 수 있도록 할 예정입니다.