[Dev Log] 20211001 / 박지영

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

https://user-images.githubusercontent.com/83934037/135631481-498bc8dd-ae74-443d-9089-617c48fcbb52.mov

https://user-images.githubusercontent.com/83934037/135631492-d781e39f-b136-4f7f-abcf-b6dd1ddc0ad4.mov

- [x] 댓글 무한스크롤 기능 구현하기(구현 완료. 구현한 방식 에러 핸들링 노트에 작성해둠)
- [ ] (모바일 대응을 위한)이미지 카드 슬라이더 드래그로 좌/우 넘기기(리액트 draggable 라이브러리 사용해야 할 지?)(참고: [https://penguingoon.tistory.com/257](https://penguingoon.tistory.com/257))
- [x] 스크롤 감지하여 상단 노출/비노출 처리 이벤트 구현 시도해보기(참고: [https://code-study.tistory.com/23](https://code-study.tistory.com/23)) —> 구현 완료!
- [x] 3D 페이지에 연결된 GLTF가 픽스된 폴더가 아니라 props로 받아오는 폴더명으로 불러오게끔 코드 리팩토링.
- [x] register 페이지에서 유저가 이미지 파일 올리기 전 no image 파일 디폴트로 랜더링하기
- [x] register 페이지 하드코딩된 부분 리팩토링(해시태그 부분)
- [x] artDetail 모달창 내 작품 content 넣고 반응형 작동 시 레이아웃 깨지는지 더블체크. 깨지는 부분 수정 완료.
- [x] 코드 무게가 큰 페이지는 컴포넌트 분리시키기(ex. reviewDetail 페이지에서 전시회 info 부분)
- [x] 작품 확대 모달창에서 검은 background 클릭하여 창닫는 것 구현

--
<기억하고 싶은 코드>
- 스크롤 방향에 반응하는 헤더(참고: [https://velog.io/@seungdeng17/스크롤-방향에-반응하는-헤더](https://velog.io/@seungdeng17/%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%B0%A9%ED%96%A5%EC%97%90-%EB%B0%98%EC%9D%91%ED%95%98%EB%8A%94-%ED%97%A4%EB%8D%94)):
- 전시 상세 페이지 등에서 페이지 내 컨텐츠에 유저가 집중할 때(—> 작품 감상할 때) 헤더가 상단에 고정된 채로 있으면 시야가 좁아서 답답할 것.
- 상단, 하단에 고정 메뉴가 있는 경우, 특히 모바일 환경에서는 콘텐츠를 볼 수 있는 영역이 좁아 부담스러울 수 있다. 따라서 사용자가 스크롤을 올리는지, 내리는지 체크하여 하단고정메뉴를 노출 또는 비노출 처리하여 콘텐츠를 볼 수 있는 영역을 유동적으로 넓힐 수 있다.
- 사용자가 스크롤을 내렸는지 올렸는지를 useEffect 훅으로 감지함. (스크롤을 내리면 `hide` 라는 상태값이 true, 올리면 false)
- 다만 참고한 레퍼런스코드에서 `throttle` 함수의 정확한 코드분석을 해야 한다... 일단 스크롤 상태가 감지되고나서 50ms 후에 `handleScroll` 함수가 호출되는 것으로 추측하는 중.

```jsx
const [hide, setHide] = useState(false); //스크롤 아래로 하면 false, 위로하면 true
const [pageY, setPageY] = useState(0); //스크롤 위치(0일 때 페이지 상단)

const documentRef = useRef(document);

const handleScroll = () => {
const { pageYOffset } = window;
const deltaY = pageYOffset - pageY;
const hide = pageYOffset !== 0 && deltaY >= 0;
setHide(hide);
setPageY(pageYOffset);
};

const throttle = function (callback, waitTime) {
let timerId = null;
return (e) => {
if (timerId) return;
timerId = setTimeout(() => {
callback.call(this, e);
timerId = null;
}, waitTime);
};
};

const throttleScroll = throttle(handleScroll, 50);

useEffect(() => {
documentRef.current.addEventListener('scroll', throttleScroll);
return () => documentRef.current.removeEventListener('scroll', throttleScroll);
}, [pageY]);
```

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

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

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

- [ ] (모바일 대응을 위한)이미지 카드 슬라이더 드래그로 좌/우 넘기기(리액트 draggable 라이브러리 사용해야 할 지?)(참고: [https://penguingoon.tistory.com/257](https://penguingoon.tistory.com/257))
- [ ] author + audience 글자 탁 뜨고 나서 스르륵 합쳐지고 authience라는 글자가 중앙에 배치되게 그런 애니메이션 효과—> 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))
- [ ] 랜딩페이지 버튼 애니메이션 서치 후 적용해보기
- [ ] 더미데이터 채우고 이미지들 3D gltf 로더와 연결해두기.