codestates / codestates/art-ground
[Dev Log] 20210918 / 박지영
- Dominant language
- JavaScript
- Stars
- 7
- Forks
- 9
- PR merge metrics
- No merged PRs in 30d
Description
### **오늘의 결과물**
https://user-images.githubusercontent.com/83934037/133888284-fb23c742-1578-488e-bf6d-ad726119fe70.mov
### **오늘 완료한 작업 목록**
1. three.js 기본 개념 공부. (참고 사이트: [https://rubenchoi.tistory.com/entry/react3d-2?category=467531](https://rubenchoi.tistory.com/entry/react3d-2?category=467531))
2. 3D Model 로딩해오는 방법 공부(참고 사이트: [https://docs.pmnd.rs/react-three-fiber/tutorials/loading-models](https://docs.pmnd.rs/react-three-fiber/tutorials/loading-models))
3. Sketchfab([https://sketchfab.com/feed](https://sketchfab.com/feed))에서 괜찮은 갤러리 모델을 하나 골라서, 이미지 교체한 후 랜더링 시도해봄. 배경이 거슬리고, 초기 카메라 위치 선정이 이상한 것만 제외하면 일단 랜더링 성공.
4. 키보드로 카메라 위치 및 방향 조절을 하기 위해 참고할만한 결과물([https://github.com/deanssmart/the-gallery](https://github.com/deanssmart/the-gallery))을 찾아, 해당 소스코드만 적용해보려다가... 모듈설치에 문제가 있는지 실패.
5. 가능하다면 이미지에 onClick 이벤트를 걸어 카메라 위치를 이미지 앞으로 이동시킬 수 있는지 시도해봐야 함.
### **오늘 작업 중 완료하지 못한 것들 목록(+에러)**
1. 이미지 카드 슬라이더 제작 완료. 다만 코드가 맘에 들지 않는다. 코드 리팩토링 필요.
2. (모바일 대응을 위한)이미지 카드 슬라이더 드래그로 좌/우 넘기기 *****(리액트 draggable 라이브러리 사용해야 할 지?)
3. 단일작품 확대 페이지에서 작품 설명 어떻게 overlay 시킬지 고민해봐야 함.
4. 작품 9개 나열할 때(3*3 grid) height 들쭉날쭉함. 여백 없이 나열해보는 방법 찾아보는 중... —> 이거 너무 찾기 어려움. grid 배열 방식이 아니라 flex column을 3줄 나열하는 방식일 수도 있음. 어차피 사진개수가 정해져 있으니 이 방법으로 레이아웃 바꿔도 될 것 같다.
### **내일 TO DO LIST**
1. react three fiber 학습
2. 랜딩페이지 레이아웃 & 컨텐츠 고민해보기
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.