[Dev Log] 20210923 / 박지영

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

https://user-images.githubusercontent.com/83934037/134535650-3f0a72e3-88fc-4a2b-9117-ce3465546128.mov

1. 단일작품 컴포넌트 내 작가에게 구매의사 알림 보내기 모달창(기능까지 구현 가능성 있음...) —> 단일작품 목록에 일단 아이콘만 랜더링 해둠.
2. 단일작품 확대 페이지에서 작품 설명 어떻게 overlay 시킬지 고민해봐야 함. —> overlay 완료!(position fixed가 두 개의 컴포넌트가 겹칠 땐 사용하기 별로인 속성이다. 따라서 img와 metadata를 flex안으로 감싸고 와이드웹일 땐 row, 모바일일땐 column방향으로 위치해두었다)
3. 단일작품 클릭 시 확대 페이지(독립된 분기 페이지)를 galleryDetail 페이지 내 모달창으로 변경 완료.
4. Gallery 이미지 슬라이더에서 작품 클릭 시 단일작품 확대 페이지(—> 모달창)으로 이동 완료
5. review 등록버튼 클릭 시 비 로그인자에게 모달창 띄우기
6. gallery, review 페이지 내에서 요청보낼 모든 api 세팅. 함수 모듈 연결해둠.
7. gallery 목록 GET 요청의 응답 데이터 랜더링하기 (—> like표시를 어떻게 랜더링해야 하는지 로직 작성 완료. 다만 count는 어떻게 바로바로 보여줘야 하지...? like를 표시할 때마다 isliked의 상태값이 바뀌므로 컴포넌트도 재랜더링이 되는지 확인해봐야 함)
8. gallery 목록 최신순/전시마감일순/인기순 정렬 코드 로직 작성
9. gallery 목록 해시태그 필터링 코드 로직 작성
10. gallery 목록 STANDARD/PREMIUM 카테고리 필터링 코드 로직 작성
11. 이미지 슬라이더 내 배경사진 포토샵으로 액자 제거 필요.

—

<전시회 찜하기/찜하기 해제 랜더링 시 깨달은 useEffect의 특성>

- page에서는 useEffect(()⇒ {}, []) 이렇게 의존성 배열이 비어있어도 페이지가 랜더링 될 때마다 useEffect 내 함수가 호출된다.

- 그렇지만 component 에서 useEffect의 의존성 배열이 비어있다면 해당 페이지가 랜더링 될 때 useEffect 내 함수가 호출되지 않는다. (그렇지만 호출이 되어져야 하는 상황일 때) 해결방법: 컴포넌트 내에서는 의존성 배열 파라미터를 아예 지웠다. 만약 해당 페이지 내 이 컴포넌트가 4개가 반복된다면 의존성 배열 파라미터 자체가 없는 상태에서는 useEffect가 4번 호출이 된다.

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

<우선순위 상>

1. register 페이지 내에서 신청버튼 클릭 시 항목 누락하면 '모든 항목을 입력해주세요' 메세지 아래에 띄우기 —> 서버에서 특정 에러 코드 내려줄 때 에러메세지 setState로 넣어 랜더링하기.
2. gallery 상세페이지 응답 데이터 랜더링하기
3. 3dGallery 페이지—> 바로 전시환경이 랜더링 되는 거 보다 그 전에 작동설명과 입장하기 버튼 먼저 띄우기. 버튼 후 전시환경으로 입장.
4. 단일작품 옵션 버튼 클릭하면 '작가에게 구매의사 알림 메세지 보내기' 모달창(작동은 안 함) 띄우기

<우선순위 하>

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

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

1. 우선순위 상 마무리. 우선순위 하 todo list 차례대로 진행
2. context api 사용법 다시 복습하기...
3. 랜더링 페이지 애니메이션 적합한 것 서칭