[Dev Log] 노태경 / 2021/08/12

## 오늘은 어떻게 프로젝트에 기여했나요?
- 썸네일 색상 비율 조정 기능 추가(text input 이용)
- 헤더 휠 이벤트, Top 이동 버튼 구현
- 게시물 리스트 grid 수정, 썸네일 배치 수정

## 오늘의 프로젝트에서 힘든 점은 무엇인가요?
- 마우스를 이용한 드래그로 비율 조정을 시도했으나 라이브러리 없이 하기 힘듬
- 그라디언트 다중 슬라이더가 있으면 쉽게 했겠지만, 못찾아서 직접 해보려 했음..
- 엘리먼트 내에서의 좌표값 얻어내기
```
screenX, Y - 사용자 모니터 기준 좌표
pageX, Y - 전체 문서 기준 좌표
clientX, Y - 보여지는 웹페이지 영역 기준 좌표
offsetX, Y - 이벤트가 등록된 엘리먼트 기준 좌표 >> 이걸 사용하여 색상 비율 조절바를 만들어보자..
```
- 리액트에선 event.nativeEvent.offsetX로 접근이 가능했다 마우스 이벤트로 접근 해볼까나..
- draggable 옵션과 onDrag, onDrop 속성을 이용해볼까 했지만 원하는 기능이 아니라서 전환!
- 위와 같은 옵션들로 마우스 좌표에 따라 조절 바가 움직이게 구현하려 했다. 리액트에서 dom을 사용해서 하기에는 효율적이지 않아보였음, addEventListener를 이용했는데, 이벤트가 계속 발생하거나 offset 값이 계속 바뀌어 원하는대로 작동하지 않음
- 그러던 중 react-dnd 라는 것을 발견함. react-beautiful-dnd라는 것도 있지만, 박스의 순서를 바꾸는 드래그 앤 드랍을 구현하기에 최적화되어 보였고, 조금 더 범용적으로 사용할 수 있는 것은 react-dnd라는 블로그를 읽었음. 박스의 순서를 바꾸는 것이 아니기에 react-dnd를 사용해보려 함
- 우선 text Input 상자에 값을 적도록 하여 색깔 구현해내기는 성공, 색깔 구현은 state로 styled components의 props를 넘겨 구현

## 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- 마우스를 이용한 비율 조정은 잠시 뒤로 미뤄두고, bare 단계 완성도 높이기
- 시간날 때 react-dnd 라이브러리 살펴보기