[Dev Log] 20210924 / 박지영

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

https://user-images.githubusercontent.com/83934037/134680619-cd77db05-dacf-44a1-9480-84918793cb71.mov

https://user-images.githubusercontent.com/83934037/134680627-204ddffc-67ad-40c4-8b9d-9b11aa5796a5.mov

1. 단일작품 옵션 버튼 클릭하면 '구매정보'—> 모달창 띄우기 완료.(작품의 구매정보는 운영자에게 문의 부탁드립니다. contact 페이지로 이동하시겠어요?)
2. register 페이지에서 해시태그 overflow 줄바꿈 처리하기. —> 완료.
3. register 페이지에서 input 태그 —> textarea 태그로 변경. 모든 input, textarea 태그의 value 속성값 채우기 완료.
4. 사이드 navbar 레이아웃 마이너한 수정사항 반영.(관리자페이지가 추가됨으로서 깨지는 것 처리)
5. 3dGallery 페이지—> 바로 전시환경이 랜더링 되는 거 보다 그 전에 작동설명과 입장하기 버튼 먼저 띄우기(모달창으로). 버튼 후 전시환경으로 입장. 입장 후 esc 키 fadein/fadeout으로 설명
6. 랜더링 페이지 애니메이션 적합한 것 서칭중. 일단 배경으로 비디오를 깔아놓는게 어플의 전반적인 분위기와 어울릴 지 테스팅해보고 있는중.
7. 리뷰 상세 페이지 내 API 로직 작성. (리뷰 불러오기, 리뷰 작성하기, 리뷰 삭제할 컴포넌트 구분하기, 리뷰 삭제 등)

--
- three.js 키보드 작동 구현해보기

—> @react-three/drei 에서 모듈을 import 해왔더니, 최초 페이지에선 화면이 lock 걸려 있고 클릭 시 마우스 움직임으로 상하좌우 카메라가 보는 방향만 바뀌고 이동은 하질 못한다. 이 때 키보드 작동(wsda키)으로 movement를 주는 것이 목표. esc 키를 눌러야 모든 작동이 중단된다.

—> 3시간 동안 뚝딱거리다가... GLTF파일을 로딩하여 모델을 만든것과 컨트롤파트 코드가 서로 싱크가 안 맞는 이슈가 있었음. 결국은 일단 중단. 하지만 파일(배경, 건물 fbx 파일)을 업로드 시켜 해당 파일내용으로 정적 3d 환경을 구현한 좋은 블로그 컨텐츠가 있어 시간이 남으면 코드 분석하고 따라해봐야겠다^.ㅠ. [https://rubenchoi.tistory.com/entry/metaverse-2?category=467531](https://rubenchoi.tistory.com/entry/metaverse-2?category=467531)

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

<우선순위 상>

1. register 페이지 내에서 신청버튼 클릭 시 항목 누락하면 '모든 항목을 입력해주세요' 메세지 아래에 띄우기 —> 서버에서 특정 에러 코드 내려줄 때 에러메세지 setState로 넣어 랜더링하기. —> 에러메세지 디버깅 필요.

<우선순위 하>

1. 이미지 카드 슬라이더 제작 완료. 다만 코드가 맘에 들지 않는다. 코드 리팩토링 필요.
2. (모바일 대응을 위한)이미지 카드 슬라이더 드래그로 좌/우 넘기기(리액트 draggable 라이브러리 사용해야 할 지?)
3. 작품 9개 나열할 때(3*3 grid) height 들쭉날쭉함. 여백 없이 나열해보는 방법 찾아보는 중... —> 이거 너무 찾기 어려움. grid 배열 방식이 아니라 flex column을 3줄 나열하는 방식일 수도 있음. 어차피 사진개수가 정해져 있으니 이 방법으로 레이아웃 바꿔도 될 것 같다.
4. three.js pointerlock 참고하여 키보드 작동 구현해보기.(or 작품 확대 가능하면 굳이 키보드 작동 안 해도 되긴 하지만...)
5. 전시 상세페이지에서 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/))
6. 단일작품 확대 컴포넌트에서 좌/우 이동 버튼 만들고 작품 이동시키기
7. 스크롤 감지하여 상단 노출/비노출 처리 이벤트 리팩토링 하기(참고: [https://code-study.tistory.com/23](https://code-study.tistory.com/23))

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

1. gallery & review 페이지 내 API 요청 및 응답 확인하여 데이터 랜더링. *****(중요도 최상)
2. context api 사용법 다시 복습하기...
3. 랜더링 페이지 애니메이션 적합한 것 서칭