[Dev Log] 20210922 / 박지영

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

https://user-images.githubusercontent.com/83934037/134352632-1fb818fa-4990-48a6-96d7-84113cf11ad0.mov

1. api 요청 —> 함수 모듈화 시켜서 새로운 폴더에서 따로 관리하기.

2. Gallery 목록 & Gallery 상세 페이지 내에서 요청보낼 API 리스트업 & 코드스키마 짜기. —> state/props, event handler 함수 작성하고, 수도코드 넣기 완료

3. 비로그인자가 찜하기 클릭 시 로그인 요구하는 모달창 랜더링 구현 완료.

4. Gallery & SubNavBar & GalleryContent 컴포넌트 사이에서 상태값 관리.(카테고리(standard/premium), 해시태그필터, 정렬)

5. Gallery 목록에서 컴포넌트 클릭 시 GalleryDetail 페이지로 이동을 위한 state/props & 이벤트함수 구현.(더미데이터 삭제)

6. Review 목록에서 컴포넌트 클릭 시 ReviewDetail 페이지로 이동을 위한 state/props & 이벤트함수 구현.(더미데이터 삭제)

7. Review 리스트 내 검색기능 구현완료(+ 컴포넌트 외부가 아니라 내부에서 필터링하는 방법 사용함. 참고: [https://urclass.codestates.com/cce9bf4f-fdac-47a4-8177-03a04036b097?playlist=550](https://www.notion.so/cce9bf4ffdac47a4817703a04036b097))

8. Gallery 목록에서 썸네일 우측 상단에 몇명이 찜했는지 overlay 시키기 완료.(레이아웃&디자인만)

9. Register axios POST 요청 구현(+서버측 응답 확인)

10. Gallery 목록 axios GET 요청 구현(+서버측 응답 확인)

11. 모달창에서 닫기 누르면 억지로 의도하는 페이지로 가는게 아니라, 크롬의 뒤로가기 버튼과 같은 역할을 수행하는 게 필요함(참고: [https://ljh86029926.gitbook.io/coding-apple-react/3/history-go-and-goback](https://ljh86029926.gitbook.io/coding-apple-react/3/history-go-and-goback)) —> 구현 완료! history.goBack(); 만 사용하면 되는 거였음.

—

- axios POST 요청 보낼 때... payloads에 실어보내는 모든 데이터의 객체 속성명은 server와 일치하는지 꼭 더블체크하기... payloads 필드값이 불충분하다는 에러가 떠서 확인해보니 오타였음.(배열안의 배열안의 속성명까지 확인해야 함. 그렇지 않으면 DB에 null로 저장됨.)
```jsx
{
title: title,
startDate: startDate,
endDate: endDate,
exhibitType: type,
genreHashtags: JSON.stringify(isClicked), //배열이니까 JSON 처리
exhibitInfo: content,
images: JSON.stringify(arts) //배열이니까 JSON 처리
});

// arts = [{title: , content: , subContent: ,img: }, {}, ... , {}]
```

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

<우선순위 상>

1. register 페이지 내에서 신청버튼 클릭 시 항목 누락하면 '모든 항목을 입력해주세요' 메세지 아래에 띄우기
2. 단일작품 확대 페이지에서 작품 설명 어떻게 overlay 시킬지 고민해봐야 함.
3. gallery 목록 GET 요청의 응답 데이터 랜더링하기
4. gallery 목록 STANDARD/PREMIUM 카테고리 필터링 기능 구현
5. gallery 목록 해시태그 필터링 기능 구현
6. gallery 목록 최신순/전시마감일순/인기순 정렬 기능 구현
7. gallery 상세페이지 응답 데이터 랜더링하기
8. Gallery 이미지 슬라이더에서 작품 클릭 시 단일작품 확대 페이지로 이동시키기
9. 단일작품 컴포넌트 내 작가에게 구매의사 알림 보내기 모달창 구현(기능까지 구현 가능성 있음...)
10. 단일작품 클릭 시 확대 페이지를 모달창으로 바꿔보기...?
11. Gallery 이미지 슬라이더에서 작품 클릭 시 단일작품 확대 페이지로 이동시키기

<우선순위 하>

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))
8. register 페이지에서 textarea에서 줄바꿈 처리하기.
9. register 페이지에서 해시태그 overflow 줄바꿈 처리하기.

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

1. 우선순위 상 todo list 차례대로 진행
2. context api 사용법 다시 복습하기