[Dev Log] 20210929 / 박지영

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

https://user-images.githubusercontent.com/83934037/135294425-dd9ce02a-294a-4c60-9cb6-fea2ffc47a28.mov

https://user-images.githubusercontent.com/83934037/135294739-1f6f2f54-dfaa-4ff4-8cd7-cb1274bf2aed.mov

- [ ] 댓글 무한스크롤 기능 구현하기
- [x] 전시 상세페이지에서 3d 데모 확인하는 인입 버튼 만들고 페이지 연결(새탭열기로...)(참고: [http://lucablaq.com/wp/2021/01/12/react-링크-새-창에서-열기시-주의사항/](http://lucablaq.com/wp/2021/01/12/react-%EB%A7%81%ED%81%AC-%EC%83%88-%EC%B0%BD%EC%97%90%EC%84%9C-%EC%97%B4%EA%B8%B0%EC%8B%9C-%EC%A3%BC%EC%9D%98%EC%82%AC%ED%95%AD/)) —> 나갈 때 esc키 누르면 되고 나가기 시 /gallerydetail 페이지로 리다이렉 시켜놔서 새탭열기 안 하기로 함. 프리미엄 갤러리 일 때만 전시관 둘러보기 버튼 만들어놓음.
- [x] 단일작품 확대 컴포넌트에서 작품 height가 높은 case까지 커버해야 함. 확인 필요(100vh를 고정으로 두면 안 됨) —> 구현 완료. 디스플레이 가로 세로 사이즈 고려하여 미디어쿼리문 코드 작성해놓음
- [x] 로딩스피너 만들어서 필요한 곳에 모두 집어넣어야 함 —> 일단 갤러리 목록 & 리뷰 목록 페이지 첫 인입시점에 넣음.
- [x] 리뷰 목록에서 검색창 기능 정교화(검색 후 검색창 x 아이콘. x아이콘 클릭 시 다시 전체결과 보여주기. 검색 후 결과 몇개 검색되었는지도 함께 렌더링)
- [x] 프리미엄 전시 목록만 클릭하면 바로 모달창이 떴었는데 목록 보여주는 건 오픈해놓고 상세페이지 클릭시 모달창 띄우는 것으로 변경(로그인 요구)
- [x] 버그 없는지 페이지 왔다 갔다 하면서 더블체크
- [x] 랜딩페이지 타이핑 효과 적용해보는 중. :[https://wazacs.tistory.com/35](https://wazacs.tistory.com/35)
- [ ] 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))

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

- 반응형 웹에서 이미지의 가로세로 비율은 유지해야 할 때
- height/width 하나만 고정값으로 두고 다른 한 속성은 auto로 설정하기!
- 가로모드에서는 맞는데, 세로모드에서 보면 깨질 때... 미디어쿼리를 이용하여 웹페이지 가로 모드/세로 모드 인식하면 된다.

```css
@media (orientation: portrait) {
/* Portrait 모드(세로)일 때 적용할 CSS */
.img {
width: 80%;
height: auto;
}
}

@media (orientation: landscape) {
/* Landscape 모드(가로)일 때 적용할 CSS */
.img {
width: auto;
height: 75%;
}
}
```

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

- [ ] ~~이미지 카드 슬라이더 제작 완료. 다만 코드가 맘에 들지 않는다. 코드 리팩토링 필요.~~
- [ ] ~~(모바일 대응을 위한)이미지 카드 슬라이더 드래그로 좌/우 넘기기(리액트 draggable 라이브러리 사용해야 할 지?)~~
- [ ] ~~작품 9개 나열할 때(3*3 grid) height 들쭉날쭉함. 여백 없이 나열해보는 방법 찾아보는 중... —> 이거 너무 찾기 어려움. grid 배열 방식이 아니라 flex column을 3줄 나열하는 방식일 수도 있음. 어차피 사진개수가 정해져 있으니 이 방법으로 레이아웃 바꿔도 될 것 같다.~~
- [ ] ~~three.js pointerlock 참고하여 키보드 작동 구현해보기.(or 작품 확대 가능하면 굳이 키보드 작동 안 해도 되긴 하지만...)~~
- [ ] ~~스크롤 감지하여 상단 노출/비노출 처리 이벤트 리팩토링 하기(참고: [https://code-study.tistory.com/23](https://code-study.tistory.com/23))~~
- [ ] ~~댓글 포스팅 시간 한국시간으로 바꾸기~~
- [ ] ~~context api 사용법 학습하고 코드리팩토링~~
- [ ] ~~갤러리 상세페이지 & 리뷰 상세페이지에서 뒤로가기 버튼 만들기. 뒤로가게 되면 상태값 보존되어져야 함. —> 정말 필요한 해결사항이 아니므로 일단 보류.~~
- [ ] Premium 페이지 더미 데이터 만들기(5개)
- [ ] Premium 상세페이지 내에서 클릭 시 3D 페이지와 연결시키기
- [ ] author + audience 글자 탁 뜨고 나서 스르륵 합쳐지고 authience라는 글자가 중앙에 배치되게 그런 애니메이션 효과—> gsap으로 시도해보기
- [ ] 랜딩페이지 버튼 애니메이션 서치중.
- [ ] ~~단일작품 확대 컴포넌트에서 좌/우 이동 버튼 만들고 작품 이동시키기—> 정말로 필요한 기능인지 모르겠어서 일단 보류.~~

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

- [ ] Premium 페이지 더미 데이터 만들기(5개)
- [ ] Premium 상세페이지 내에서 클릭 시 3D 페이지와 연결시키기
- [ ] 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))
- [ ] 댓글 무한스크롤 기능 구현하기