[Dev Log] 20211002 / 박지영

### **오늘 완료한 작업 목록.**

https://user-images.githubusercontent.com/83934037/135721171-1163e147-f9f3-4ddc-9cc8-0c57fb843e7b.mov

- [x] (모바일 대응을 위한)이미지 카드 슬라이더 드래그로 좌/우 넘기기(리액트 draggable 라이브러리 사용해야 할 지?)(참고: [https://penguingoon.tistory.com/257](https://penguingoon.tistory.com/257)) --> 라이브러리 사용하지 않고 순수 자바스크립트로 구현해봄.
- [x] subNavbar에서 터치 드래그 구현했던 코드 다시 뜯어보고 복습하기..
- [ ] artist + audience 글자 탁 뜨고 나서 스르륵 합쳐지고 artience라는 글자가 중앙에 배치되게 애니메이션 효과—> gsap으로 시도해보기
- [ ] Exhibition_desc. 100자 내외로 컷(참고: [https://hellcoding.tistory.com/entry/textarea-글자수-제한-바이트Byte-제한](https://hellcoding.tistory.com/entry/textarea-%EA%B8%80%EC%9E%90%EC%88%98-%EC%A0%9C%ED%95%9C-%EB%B0%94%EC%9D%B4%ED%8A%B8Byte-%EC%A0%9C%ED%95%9C))
- [ ] 랜딩페이지 버튼 애니메이션 서치 후 적용해보기
- [x] 에러 핸들링 로그 & 기억하고 싶은 코드 정리
- [x] `Warning: Each child in a list should have a unique "key" prop` 에러메세지 해결하기. map 메소드를 사용한 모든 부분에서 key 속성값 부여함.
- [x] register 페이지 내 나열된 해시태그 overflow 시 줄바꿈으로 처리 완료.

—

<기억하고 싶은 코드>

- 이미지 슬라이더 드래그 이벤트 구현
- 마우스 down했을때와 up했을때 clientX값(x좌표값)을 useState에 넣어주고
- useEffect 내 함수에서 두 값을 비교하여 down보다 up이 작을 경우 왼쪽으로 클 경우 오른쪽으로 슬라이더를 적용하였다.
- 마우스 up,down간격이 굉장히 좁을때도 적용이 되는 듯하여 두 상태값의 간격이 100이 넘으면 적용될수있게 Math.abs()를 사용함.
- 다만 모바일 버전으로 보았을 때도 이벤트가 적용되는지 더블체크 해봐야 함!

```jsx
const GallerySlider = ({
btnSlider,
gallerySelected,
sliderUp,
sliderDown,
handleModalOpen
}) => {

const [mouseDownClientX, setMouseDownClientX] = useState(0);
const [mouseUpClientX, setMouseUpClientX] = useState(0);

const onMouseDown = (e) => {
e.preventDefault();
setMouseDownClientX(e.pageX);
};
const onMouseUp = (e) => {
setMouseUpClientX(e.pageX);
};

useEffect(() => {
const dragSpace = Math.abs(mouseDownClientX - mouseUpClientX); //두 좌표의 차이의 절대값
if (mouseDownClientX !== 0) {
if (mouseUpClientX < mouseDownClientX && dragSpace > 100) {
sliderUp();
} else if (mouseUpClientX > mouseDownClientX && dragSpace > 100) {
sliderDown();
}
}
}, [mouseUpClientX]);

return(

)

}
```

### 추후 완료해야 할 **작업 목록(+에러).**

- [ ] ~~작품 9개 나열할 때(3*3 grid) height 들쭉날쭉함. 여백 없이 나열해보는 방법 찾아보는 중... —> 이거 너무 찾기 어려움. grid 배열 방식이 아니라 flex column을 3줄 나열하는 방식일 수도 있음. 어차피 사진개수가 정해져 있으니 이 방법으로 레이아웃 바꿔도 될 것 같다. (중요한 것 아니라 일단 드랍)~~
- [ ] ~~three.js pointerlock 참고하여 키보드 작동 구현해보기.(or 작품 확대 가능하면 굳이 키보드 작동 안 해도 되긴 하지만...)(중요한 것 아니라 일단 드랍)~~
- [ ] ~~댓글 포스팅 시간 한국시간으로 바꾸기(중요한 것 아니라 일단 드랍)~~
- [ ] ~~context api 사용법 학습하고 코드리팩토링(중요한 것 아니라 일단 드랍)~~
- [ ] ~~갤러리 상세페이지 & 리뷰 상세페이지에서 뒤로가기 버튼 만들기. 뒤로가게 되면 상태값 보존되어져야 함. —> 정말 필요한 해결사항이 아니므로 일단 보류.(중요한 것 아니라 일단 드랍)~~
- [ ] ~~단일작품 확대 컴포넌트에서 좌/우 이동 버튼 만들고 작품 이동시키기—> 정말로 필요한 기능인지 모르겠어서 일단 보류.~~

### **내일 TO DO LIST**

- [ ] artist + audience 글자 탁 뜨고 나서 스르륵 합쳐지고 artience라는 글자가 중앙에 배치되게 애니메이션 효과—> gsap으로 시도해보기
- [ ] Exhibition_desc. 100자 내외로 컷(참고: [https://hellcoding.tistory.com/entry/textarea-글자수-제한-바이트Byte-제한](https://hellcoding.tistory.com/entry/textarea-%EA%B8%80%EC%9E%90%EC%88%98-%EC%A0%9C%ED%95%9C-%EB%B0%94%EC%9D%B4%ED%8A%B8Byte-%EC%A0%9C%ED%95%9C))
- [ ] 랜딩페이지 버튼 애니메이션 서치 후 적용해보기
- [ ] 에러 핸들링 로그 & 기억하고 싶은 코드 정리
- [ ] 모바일 버전으로 버그 더블체크하기