[Dev Log] 20210928 / 박지영

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

https://user-images.githubusercontent.com/83934037/135096841-56131925-b337-4ac5-848b-8749c0f32438.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/))
- [ ] 단일작품 확대 컴포넌트에서 좌/우 이동 버튼 만들고 작품 이동시키기
- [ ] 단일작품 확대 컴포넌트에서 작품 height가 높은 case까지 커버해야 함. 확인 필요(100vh를 고정으로 두면 안 됨)

--
- 랜딩페이지 제작중...
- 랜딩페이지는 최대한 간결하고 심플하게, 하지만 전달하고자 하는 이미지는 강렬하게 전달하게끔 하고 싶었다.
- gsap 에니메이션을 활용하여 페이지가 맨 처음 랜딩될 때 **'Anyone can be 'authience''** 메세지를 검정색 배경에 띄워서 강조한 다음(시선을 확 끄는 효과), 영상이 화면을 꽉 채운 다음 화면으로 넘어가게끔 만들었다.
- 오프라인에서 전시를 집중하여 관람하고 있는 사람들을 영상으로 잔잔하게 깔았다. 아트그라운드가 실제로 온라인에서 비슷한 경험을 제시하고 있다는 의미. 그 위에 '누구나 예술가가 될 수 있는 공간, 아트그라운드' 메세지를 오버레이했다.
- 이후 about페이지로 이동하게 되는 인입버튼 추가할 예정
- 간결하지만 또 심심하지 않고 전달하고자 하는 바를 잘 강조할 수 있는 애니메이션만 셀렉하는게 어려운 것 같다

- 애니메이션 참고한 사이트들
- 아이디어를 얻은 gsap 결과물 유튜브: [https://youtu.be/9pQf5tOKtmA](https://youtu.be/9pQf5tOKtmA)
- gsap 기본 개념: [https://byseop.netlify.app/gsap/](https://byseop.netlify.app/gsap/)—> 리액트에 적용해보는 중
- framer-motion: [https://youtu.be/BtsVMvds3P0](https://youtu.be/BtsVMvds3P0) —> 나중에 시도해보면 좋을 듯. 우리 앱과는 분위기가 안 맞아서 코드 짜보다가 그냥 드랍함.

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

- [ ] 이미지 카드 슬라이더 제작 완료. 다만 코드가 맘에 들지 않는다. 코드 리팩토링 필요.
- [ ] (모바일 대응을 위한)이미지 카드 슬라이더 드래그로 좌/우 넘기기(리액트 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 사용법 학습하고 코드리팩토링
- [ ] 갤러리 상세페이지 & 리뷰 상세페이지에서 뒤로가기 버튼 만들기. 뒤로가게 되면 상태값 보존되어져야 함. —> 정말 필요한 해결사항이 아니므로 일단 보류.

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

- [ ] 댓글 무한스크롤 기능 구현하기
- [ ] 전시 상세페이지에서 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/))
- [ ] 단일작품 확대 컴포넌트에서 좌/우 이동 버튼 만들고 작품 이동시키기
- [ ] 단일작품 확대 컴포넌트에서 작품 height가 높은 case까지 커버해야 함. 확인 필요(100vh를 고정으로 두면 안 됨)
- [ ] 로딩화면 만들어서 필요한 곳에 모두 집어넣어야 함.