# 6/3 금

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

안녕하세요 Hamill !
파크 & 머핀 입니다.

저번 PR 에서 주신 리뷰를 반영하려고 했는데 되도록 문서화를 통한 분업을 시도해보려고 하니 코드가 충돌이 날 가능성이 많아 보여서 미루고 미루다 현 PR 에서는 포함하지 못했습니다.

이처럼 실제 현업에서는 Git 충돌이 날 가능성이 높은 코드를 작성하기도 하나요? 실제 브랜치 전략을 어떻게 세우고 코드를 합치시는지 궁금했습니다.

무결한 dev 브랜치 코드를 가져와서 자신의 브랜치에서 conflict 를 해결하는데, dev 브랜치 코드의 로직을 임의로 변경할 수도 있다?는 생각이 들었어요, 그래서 무조건 `both acccept` 로 받아서 dev 브랜치의 로직은 살리는지? 등이 궁금했습니다.
(dev 브랜치의 상황은 아니지만 비슷했던 상황이 있었어서 [공유](https://github.com/healtheloper/airbnb/pull/47)드립니다.)

리뷰 잘부탁드립니다!

### 추가된 내용

### 차트 모듈

- 요금 더미 데이터를 기반으로 10만원 단위로 숙소의 데이터 개수를 파싱하여 캔버스 메서드 중 하나인 3차 곡선 bezierCurveTo 함수를 사용하여 적용하였습니다.
- 개인적으로 bezierCurveTo 메서드가 정확히 어떻게 동작하는지 이해하는데 힘들었습니다. 개념을 어느정도 정리하고 점들을 하드코딩하여 하나하나 바꿔가면서 학습해나감

- min ~ max 내의 영역들만 색상이 칠해지도록 canvas 내의 색상을 변조해주는 메서드인 addColorStop사용
- addColorStop 함수는 시작좌표와 종료좌표 값으로는 색상 정지 점의 위치를 나타내는 0 ~ 1 사이의 값만 허용하고, 이외의 값을 넣게되면 INDEX_SIZE_ERR 발생..
- min ~ max는 100000원 기준으로 숙소의 개수들이 분포되어 있기 때문에 0.01을 넣어주었습니다.

- 레인지 슬라이더 Material UI Slider Component 사용
- 슬라이드 값 ( 0 ~ 100 )의 상태를 관리하기 위해 useState로 sliderValue 지정
- 슬라이드를 움직일때마다 최소, 최대값은 계속 변경되어 => 최초 최소,최대값 (initPrice) 값을 불변을 유지하기 위해 useRef로 관리중인데 useRef로 초기값을 관리해도 되는지 궁금합니다.

### 캘린더 모듈

- https://github.com/healtheloper/airbnb/pull/47

- Calendar Modal
- Date 클릭 이벤트를 추가하였고, 해당 이벤트로 `체크인/체크아웃` 의 데이터를 변경합니다.
- Mouse Hover(Enter) 시에 UX 적으로 편할 수 있도록 여행기간을 보여주게 하였습니다.
- 이 과정에서 Enter 될 때마다 Re-rendering 이 일어나는데, Checkout 이 될 가능성? 이 있는 정보(현재는 checkoutHover 라는 변수로 사용)를 알아야 사이의 Date 들이 자신이 사이에 있는 요소라고 인지하기 때문에 Mouse Enter 시에 checkoutHover 라는 State 를 바꿔주는식으로 작성하고 있습니다. 개선될만한 방향이 있는지 힌트를 얻을 수 있을까요?

### 기타

- Person Modal 레이아웃 작성
- 현재 list item 들 하드코딩 되어있는데, state 기반으로 고쳐나갈 예정입니다. 버튼 등의 기능은 하지않습니다.

- 전체적인 UI 를 개선했습니다.
- https://github.com/healtheloper/airbnb/pull/50

### 주간회고

- 주 목표
- 3개의 모달을 다 만들고 그 데이터를 결과페이지로 넘기는 것 까지

- 차트모달 90% (왜 90% 인가)
- 캔버스라는 기술을 처음 접했는데, 욕심이 좀 과해서 시간이 많이 지체됨
- 막대 대신 곡선 그래프 사용하려 했음
- bezierCurveTo 메서드 동작 방식 , 더미데이터 기반으로 차트 만드는 부분
- 캔버스 관련 ts 오류 처리가 어려웠음 (ts 도 초보)

- 캘린더 99% (사용할 때 마다 발견되는 버그..)
- 수~목 쯤에는 완성될 줄 알았는데 추가로 사용되는 로직이 있었던것 같다.
- useThrottle, carousel ... 등등
- 요구사항 분석(?) 설계 에서 놓친 부분이지 않나

- 인원모달 50%

- 기능 예상소요시간 2배로 잡아라(?)
- 새로운 기술에 대해서는 넉넉히 잡자
- 예상소요시간을 대충 예상하고 그 시간내에 하는 연습을 의도적으로 해보자
- 한 주의 시작 회의할 때 기능별 스토리, 테스크에 소요시간 예상해보기, 실제 소요시간도 적고 비교해서 다음주 회고에 또 회고해보기