[Dev Log] 20211004 / 박지영

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

https://user-images.githubusercontent.com/83934037/135879880-34f7dcc4-0705-4059-a6cc-369a1d179bd9.mov

- [x] 상세페이지에서 새로고침하면 props가 날라가면서 랜더링이 불가한 상황 —> 해결 완료.
- [x] 갤러리 상세 & 리뷰 상세페이지 & 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/))
- [x] 갤러리 상세 페이지 내에서 useEffect 호출하면 axios GET요청. 응답형태는 전체 갤러리목록에서 받았던 [{}, {}, {} ... ]—> 배열의 1개 요소와 동일. 응답데이터 랜더링하기.
- [x] 리뷰 상세 페이지 내에서 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] 모바일 버전 버그 더블체크중
- [x] 이미지 슬라이더 터치 드래그 이벤트 작동 안 함.(해결 완료된 것 확인, [에러 핸들링 노트](https://www.notion.so/2-c264e0582930497ab96030d2b35bfeef))
- [x] 랜딩페이지 상단에 검정색 박스 보임. 이것 계속 해결 안 되어서 GSAP 코드를 다시 수정해줌. [에러 핸들링 노트](https://www.notion.so/GSAP-TweenMax-TimelineMax-1388294d8c7a42b899a457fa4edb6304) —> 해결 완료.
- [x] 위로 스크롤 할 때, 상단 도달 시 네비게이션 바가 사라졌다가 다시 내려옴(깜빡거리는 것 처럼 보임): —> 코드 뜯어보고 분석해봄... —> 해결완료된 것 확인
- [x] 갤러리 & 리뷰 목록에서 썸네일 두번 터치해야 상세페이지로 이동함. —> 마우스 오버시 생기는 불필요한 명암 레이어를 삭제하고, 이미지에다가 명암속성을 직접 부여함. —> 해결완료된 것 확인

- [x] 래디스로 변경. API 요청 코드 수정하기
- [x] 갤러리 상세페이지 —> 데이터 요청 및 응답 새로 작성 완료. 응답 데이터 랜더링 완료
- [x] 리뷰 상세페이지 —> 데이터 요청 및 응답 새로 작성 완료. 응답 데이터 랜더링 완료
- [x] 좋아요/좋아요 해제 —> 앤드포인트 및 바디값 수정 완료
- [x] 댓글 삭제 —> 앤드포인트 및 바디값 수정 완료

—

<기억하고 싶은 코드>

- GSAP 애니메이션 사용 시 버그.


- 이렇게 상단으로 끝까지 올라가야 하는데 중간에 멈춘 듯한 버그가 있었다.
- 해결을 위해 시도해본 것:
- 1차: 사파리 브라우저에서 모바일 모드로 켜놓고 [localhost:3000](http://localhost:3000) 들어가면 문제점이 안 보임... 일단 불필요한 layer(비어있는 div태그)를 삭제함. 이전과 동일한 애니메이션 효과를 유지하기 위해 가장 먼저 보이는 검정색 바탕 wrapper gsap효과 에서 duration을 더 길게 수정해줌.
- 2차: 그래도 해결되지 않아서 gsap 속성값을 아래와 같이 수정했다. 확실하게 height를 0으로 줄여버리는 효과다. —> 이 방법으로 해결 완료

```jsx
//변경 전
gsap.to(wrapperRef.current, {
duration: 2.5,
top: "-100%",
ease: "power3.inOut",
delay: 7.5
});

//변경 후
gsap.to(wrapperRef.current, {
duration: 2.5,
height: 0,
ease: "power3.inOut",
delay: 7.5
});

//.wrapper의 CSS속성
.wrapper {
position: fixed;
width: 100vw;
height: 100vh;
background: rgb(33, 33, 33);
z-index: 2;
}
```

<날 너무 힘들게 했던 에러 ㅠ>

- 리뷰 목록에서 JSON파싱한 상태의 데이터를 응답으로 받았고(장르 해시태그 속성), 그 상태에서 리뷰 상세페이지로 이동하여 genre해시그를 또 파싱하면 에러가 발생한다. 한 곳에서만 파싱을 해주고 다른 한 곳에서는 그냥 바로 사용만 해야 함. 데이터 타입 하나하나 디버깅 해보고 발견!..(아래 크로스 오리진 에러 메세지로 나와서... 설마 JSON 파싱 에러일 줄 예상하지 못했다)


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

- [ ] 더미데이터 넣고 about 페이지에 랜더링 할 gif 파일 만들기
- [ ] 래디스로 변경 이후 api 요청 및 응답 버그 없는지 더블체크 하기
- [ ] 3dgallery 페이지 서브라우팅 시 에러있었던 것 해결해보기