# 6/8 ## 수 - 머핀: 차트에서 원하는 동작이뤄지게 하는 것 마무리 - 파크: 검색결과 페이지 만들고 지도 API 띄워보기, 레이아웃 짜기 # PR [team-31][FE] Muffin & Park 3주차 수요일 안녕하세요 Hamill ! 파크 & 머핀 입니다. 벌써 마지막 주차네요, 리뷰 잘부탁드립니다! ## 데모 페이지 [링크](https://puffinbnb.netlify.app/) ## 추가된 내용 ### 차트 모듈 - 기존에 차트 내 로직을 전반적으로 수정하는 시간을 가졌습니다. - 수정내용 - Slider 한 번만 선택시 해당 값이 화면에 렌더링되도록 수정 (이전에는 슬라이더 내 두 번 클릭해야 올바르게 동작했었음) => 슬라이더 를 움직일 때 동작하는 handleSlider 함수에서 불필요한 로직 수정으로 해결 - 날짜 체크아웃 선택시에만 차트가 나오도록 수정 (날짜 선택이 안되면 0원 표시, 차트 안보임) - 미니 서치바 금액대 입력 클릭 시 바로 요금 빅서치바에 렌더링되는 문제 => 차트 모듈은 체크인,체크아웃 날짜가 선택되면 해당 날짜 기반으로 서버에서 받아온 데이터 기준으로 차트를 만들어줘야 한다고 생각해서 체크인,체크아웃이 선택되었을때만 차트모듈이 렌더링되도록 수정함 - 초기 최소,최대값 state로 관리하도록 수정 => 기존에 useRef로 관리한 최소, 최대값을 Context 에서 같이 관리하도록 수정 => 차트는 체크인, 체크아웃이 선택되고 선택된 날짜 기반으로 최소,최대를 셋팅해줘야 하기 때문에 초기 최소, 최대값 또한 Context에서 관리하는게 맞다고 생각해서 수정했습니다. - 빅서치바 차트 인풋 내 x 버튼 클릭 시 날짜, 차트 모든 값 리셋 - 날짜 선택 후 차트에서 슬라이더 이동 -> 모달창 닫은 이후 다시 차트를 열었을때 데이터 동기화 => 슬라이더 값의 초기화 값을 [0, 100]으로 관리하는 부분을 priceState가 관리하고 있는 min, max 기준으로 백분율을 곱하여 셋팅되도록 함 ```javascript const percentage = Math.floor(priceState.initMaxPrice / 100); const [sliderValue, setSliderValue] = useState<number[]>([ Math.floor(priceState.minPrice / percentage), Math.floor(priceState.maxPrice / percentage), ]); ``` 남아있는 TODO - 현재 슬라이더의 위치가 정확한 min, max 값을 매칭시키지 않음 => 두 슬라이더가 겹치지 않기 위해 셋팅시도하다가 발생 => 차트 슬라이드가 min, max 값의 가격이 동일해지는 방지 로직 필요 🤔 질문사항 현업에서는 라이브러리와 직접 만드신 기능을 어느정도 섞어서 사용하시나요? 아니면 라이브러리를 사용하신다면 해당 라이브러리에 없는기능만 직접 만드시나요?? (슬라이더기능을 차트와 연동하면서 라이브러리가 제공해준대로 써야하기 떄문에 그냥 내가 슬라이더를 만드는게 더 편했을 것 같다라는 생각이 들어 질문드립니다!) ### 캘린더 모듈 - [npm 으로 배포](https://www.npmjs.com/package/react-carousel-calendar) 한 이후, 해당 프로젝트에서 사용되고 있던 Calendar 의 로직을 비워냈습니다. - npm 으로 배포하면서, props drilling 으로 사용되는 로직을 사용자가 사용하기 불편할 수 있겠다는 생각이 들어서 Context 로 상태를 관리하도록 로직을 변경하였습니다. - 처음으로 npm 배포를 해보아서 놓친 부분이 있을 것 같습니다. `이런 부분은 추가되었으면 좋겠다` 싶은게 있을지 피드백 해주시면 감사하겠습니다! ### 기타 - `검색` 버튼을 누르면 `SearchResultPage` 로 이동합니다. - 현재 왼쪽 레이아웃은 Skeleton 만 존재하고, 오른쪽 레이아웃은 지도 입니다. - kakao Map API 같은 sdk 를 사용할 때, public 의 index.html 에 script 로 추가하는 방식이 일반적인지가 궁금합니다. SearchResultPage 컴포넌트 에서만 쓰이기 때문에 해당 컴포넌트 내부에서 `createElement('script')` 를 하고 해당 컴포넌트에서만 쓰게 해야하는지, 아니면 비동기로 받아와지니 크게 상관없는지? 등이 궁금했습니다.