[Dev Log] 20210921 / 박지영

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

https://user-images.githubusercontent.com/83934037/134192398-edc6eb98-3df9-46e9-9e45-6a2c7f9c11ab.mov

1. Register axios POST 요청 코드스키마 작성
- 계정 권한에 따른 경우의 수

—> 1. 로그인 안 한 상태면? 로그인 해달라는 컴포넌트 띄우기 V(여기서 로그인하러가기 클릭 시 로그인페이지로 이동, 닫기 클릭 시 gallery 페이지로 이동)
—> 2. 관람객으로 로그인 한 상태면? 작가 회원만 전시신청이 가능하다는 컴포넌트 띄우기 V(여기서 닫기 클릭 시 Gallery 페이지로 이동)
—> 3. 작가로 로그인 한 상태면? 본 컴포넌트 띄우기 V

- 신청 완료하면?
—> '전시 신청이 완료되었습니다! 영업일 기준 7일 이내 관리자의 승인이 이루어질 예정입니다' 메세지와 확인버튼 포함된 모달창 띄우고, 확인버튼 누르면 Gallery 목록 페이지로 이동



- 4개의 속성으로 이루어진 객체가 9개 모인 배열이 하나의 상태값. 하드코딩 되어있던 것 코드 리팩토링 완료: 상태 초기값을 빈 객체 9개가 이미 들어간 배열로 설정. 핸들러 함수 호출 시, 배열에서 수정하고자 하는 값의 양옆으로 slice 함수를 사용하여, 나머지 배열 데이터 값 보존함. 객체 속성값까지 초기값으로 미리 정의해주지 않아도 새로 생성되거나 수정할 수 있음!(아래 개별작품의 제목 핸들링 함수 참고)

```jsx
const [arts, setArts] = useState([{}, {}, {}, {}, {}, {}, {}, {}, {}]) //9개 작품 배열

const handleArtTitle = (el, e) => { //이 부분이 중요...!
let newArts = [...arts.slice(0, Number(el-1)), {...arts[Number(el-1)]}, ...arts.slice(Number(el), 9)]
newArts[Number(el-1)].title = e.target.value;
setArts(newArts);
}

return (
//..
{artCount.map(el =>
<>
//..
handleArtTitle(el, e)} //전달인자 2개(이벤트 객체 & 작품순서 나타내는 el)
/>

)}
)
```

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

<우선순위 상>

1. Gallery 목록 & Gallery 상세 페이지 내에서 요청보낼 API 리스트업 & 코드스키마 짜기.
2. Register axios POST 요청 구현(+서버측 응답 확인)
3. Gallery 목록 axios GET 요청 구현(+서버측 응답 확인 필요)
4. 모달창에서 닫기 누르면 억지로 의도하는 페이지로 가는게 아니라, 크롬의 뒤로가기 버튼과 같은 역할을 수행하는 게 필요함(참고: [https://ljh86029926.gitbook.io/coding-apple-react/3/history-go-and-goback](https://ljh86029926.gitbook.io/coding-apple-react/3/history-go-and-goback)) 구현해보기
5. register 페이지내에서 신청버튼 클릭 시 항목 누락하면 '모든 항목을 입력해주세요' 메세지 아래에 띄우기
6. Review 리스트 내 검색기능 구현
7. 단일작품 확대 페이지에서 작품 설명 어떻게 overlay 시킬지 고민해봐야 함.

<우선순위 하>

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. 단일작품 클릭 시 확대 페이지를 모달창으로 바꿔보기...?
8. Gallery 이미지 슬라이더에서 작품 클릭 시 단일작품 확대 페이지로 이동시키기
9. 스크롤 감지하여 상단 노출/비노출 처리 이벤트 리팩토링 하기(참고: https://code-study.tistory.com/23)

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

1. Gallery 목록 & Gallery 상세 페이지 내에서 요청보낼 API 리스트업 & 코드스키마 짜기.
2. api 요청 —> 함수 모듈화 시켜서 새로운 폴더에서 따로 관리하기.
3. Register axios POST 요청 구현(+서버측 응답 확인)
4. Gallery 목록 axios GET 요청 구현(+서버측 응답 확인 필요)
5. 모달창에서 닫기 누르면 억지로 의도하는 페이지로 가는게 아니라, 크롬의 뒤로가기 버튼과 같은 역할을 수행하는 게 필요함(참고: [https://ljh86029926.gitbook.io/coding-apple-react/3/history-go-and-goback](https://ljh86029926.gitbook.io/coding-apple-react/3/history-go-and-goback)) 구현해보기
6. register 페이지내에서 신청버튼 클릭 시 항목 누락하면 '모든 항목을 입력해주세요' 메세지 아래에 띄우기