[Dev Log] 20211003 / 박지영

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

https://user-images.githubusercontent.com/83934037/135757863-9c13d6c0-e624-4efc-93e4-d69ebf7c2358.mov

- [x] artist + audience 글자 탁 뜨고 나서 스르륵 합쳐지고 artience라는 글자가 중앙에 배치되게 애니메이션 효과—> gsap으로 시도해보았으나... 여러 애니메이션과 섞여서 구현이 쉽지 않았다. 계속 다른 방법을 시도해보는 중.
- [x] 갤러리 상세 이미지 슬라이드에서 좌/우 화살표가 클릭되는 범위를 넓혀둠(padding 조절)
- [x] 모바일 버전 버그 더블체크중
- [x] 이미지 슬라이더 터치 드래그 이벤트 작동 안 함.(해결 완료)
- [x] 랜딩페이지 상단에 검정색 박스 보임.(사파리 브라우저에서) —> 사파리 브라우저에서 모바일 모드로 켜놓고 [localhost:3000](http://localhost:3000) 들어가면 문제점이 안 보임...; 일단 불필요한 layer(비어있는 div태그)를 삭제함. 이전과 동일한 애니메이션 효과를 유지하기 위해 가장 먼저 보이는 검정색 바탕 wrapper gsap효과 에서 duration을 더 길게 수정해줌. -->모바일에서 더블체크 다시 해볼 것.
- [ ] 페이지 전환 시 스크롤이 상단에 있음에도 네비게이션 바가 안 보이는 경우도 있음.(매번 발생하는 에러는 아니라, 일단 뭐가 문제인지 지켜볼 예정)
- [x] 갤러리 & 리뷰 목록에서 썸네일 두번 터치해야 상세페이지로 이동함. —> 마우스 오버시 생기는 불필요한 명암 레이어를 삭제하고, 이미지에다가 명암속성을 직접 부여함.
- [x] 모든 브라우저에서 같은 글꼴이 보이도록 전체 속성에 맑은고딕 폰트 적용함
- [x] 위로 스크롤 할 때, 상단 도달 시 네비게이션 바가 사라졌다가 다시 내려옴(깜빡거리는 것 처럼 보임): —> 코드 뜯어서 분석해보니 뚜렷한 원인이 있긴 있었다. 아래 기억하고 싶은 코드 내용 참고하기.

—

**<기억하고 싶은 코드>**

- 상단 네비게이션바 스크롤 방향에 따른 노출/비노출 처리 이벤트. **모바일에서 상단으로 스크롤 시 "순간적으로 밀릴 때" 비노출→ 노출로 깜빡거리는 버그...**
- `window.pageYOffset` : 현재 스크롤 위치
- `pageY` : 스크롤 하기 바로 직전의 스크롤 위치
- `pageYOffset - pageY` 가 양수일 때: 스크롤이 아래방향: `hide` 값 true
- `pageYOffset - pageY` 가 음수일 때: 스크롤이 위방향: `hide` 값 false
- 기존 코드에서 `const hide = pageYOffset !== 0 && deltaY >= 0;` 으로 되어있어서, 모바일에서는 가장 상단으로 스크롤 했을 때(특히 스크롤 정도가 심할 때) 순간적으로 아래로 살짝 밀린다. 이 때 아래로 밀리면서 **deltaY가 양수로 감지되는 것 같다**.
- 시도한 해결방법: 순간적으로 밀릴 때 `pageYOffset` 의 값이 궁금했는데, 0이나 음수일 것 같다는 생각이 들었다. 따라서 `handleScroll` 함수 내 코드를 아래와 같이 변경하였다.
- 이 방법으로도 해결되지 않을 수도 있어서, `pageYOffset` 의 기준을 0이 아니라 50이하일 때로 수정하였다.
- 쓰로틀 함수도 50ms마다 호출되는게 퍼포먼스에 좋진 않으므로, 100ms으로 시간텀을 늘려 놓았다.

```jsx

//변경 전
const handleScroll = () => {
const { pageYOffset } = window;//상단으로부터 스크롤 위치
const deltaY = pageYOffset - pageY; //스크롤 속도
const hide = pageYOffset !== 0 && deltaY >= 0; //deltaY가 양수일 때(= 스크롤이 아래)
setHide(hide);
setPageY(pageYOffset);
};

const throttle = function (callback, waitTime) {
//...
};

const throttleScroll = throttle(handleScroll, 50);

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

//변경 후
const handleScroll = () => {
const { pageYOffset } = window;//상단으로부터 스크롤 위치
const deltaY = pageYOffset - pageY; //스크롤 속도
if(pageYOffset < 50 && deltaY > 0){
setHide(false);
} else if(pageYOffset !== 0 && deltaY > 0){
setHide(true);
} else{
setHide(false);
}
setPageY(pageYOffset);
};

const throttle = function (callback, waitTime) {
//...
};

const throttleScroll = throttle(handleScroll, 100);

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**

- [ ] 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))
- [ ] 랜딩페이지 버튼 애니메이션 서치 후 적용해보기
- [ ] 에러 핸들링 로그 & 기억하고 싶은 코드 정리
- [ ] 상세페이지에서 새로고침하면 props가 날라가면서 랜더링이 불가한 상황.
- [ ] 갤러리 상세 & 리뷰 상세페이지 & 3dgallery : exhibition id를 기준으로 서브라우팅 적용하기.([https://velopert.com/2937](https://velopert.com/2937), [https://www.daleseo.com/react-router-nested/](https://www.daleseo.com/react-router-nested/))
- [ ] 갤러리 상세 페이지 내에서 useEffect 호출하면 axios GET요청. 응답형태는 전체 갤러리목록에서 받았던 [{}, {}, {} ... ]—> 배열의 1개 요소와 동일.
- [ ] 리뷰 상세 페이지 내에서 useEffect 호출하면 axios GET요청. 응답형태는 `res.status(200).json({ exhibitionData , commentsData})` . 기존 댓글목록 받아오는 것 그대로 유지하고 exhibition 데이터(`exhibition.images[0].image_urls, exhibition.title, exhibition.author.nickname, exhibition.start_date & end_date, exhibition.genre_hashtags`)만 추가.
- [x] register 페이지: userinfo를 useEffect로 업뎃 시키기 —> 전역 useEffect로 어떠한 페이지에서든 userinfo는 채워지는 값이라 괜찮음.