codestates / codestates/art-ground

[Dev Log] 20210918 / 박지영

Open
#73 0 comments 0 reactions 1 assignee Claimed by @devLuenna View on GitHub
Dev Log
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.