[✍️ Dev Log] 이승연 / 2022-01-07

### 오늘은 어떻게 프로젝트에 기여했나요?

- redux-persist 설정을 완료했습니다.
- 본격적으로 핀 생성과 삭제, 수정과 읽기 등 기능을 위한 로직을 짜기 시작했습니다.
- action/reducer/state에 어떻게 반영할 지 계획했습니다.

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

```
머리에서 로직을 짜는 속도보다 손이 현저히 늦습니다. 혼자 답답해하는 중입니다.
어제 오늘 고민한 로직의 흐름을 첨부합니다.
```

```js
/* 핀 저장버튼 누르는 동시에 pinID 생성 */
// (pinPosition의 길이가 0일땐 pin1 부여하고, 0이 아닐 땐 pinPosition의 길이에 1을 더하여 pin을 생성해주자.)
// (ranking은 pinID의 맨 마지막 수를 따라가면 돼.)
// (locationName은 상태에 저장된 값을 그냥 가져오기. -> 파란마커와 회색마커 둘 다 반영되어있습니다.
// 어짜피 브라우저에 뜨는 input창은 하나입니다.)
// (latitude, longitude, lotAddress, roadAddress, ward -> 파란마커와 회색마커 모두 상태 반영되어있습니다.)

/* 핀 삭제버튼 누르는 동시에 pinID 검사 -> 사이드바에 있는 핀 카드에 있는 삭제버튼을 클릭했을 때 벌어지는 일 */
// 해당 핀을 삭제할거냐는 모달창이 뜨는 게 국룰이긴한데 일단은 보류
// (action의 인자: pinID -> reducer에서 pin배열에서 pinID가 일치하는 객체를 찾아 지워준다.
// files배열에서 pinID가 일치하는 객체를 찾아 사진도 삭제해준다.)

/* 핀 수정버튼 누르는 동시에 pinID 검사 -> 사이드바에 있는 핀 카드에 있는 수정버튼을 클릭했을 때 벌어지는 일*/
// 닫힌 핀을 열어줘야한다. -> 일단 createPinModal을 modifyPinModal.tsx 를 하나 더 생성해라
// (modifyPinModal은 createPinModal과 반대로 역으로 데이터를 넣어주는 작업이 필요하다.)
// (useSelector로 불러온 route state에서 현재 클릭한 핀 카드의 pinID 와 일치하는 객체를 찾아 HTML에 예쁘게 넣어주는 작업이 필요하다:))
// (pins에서 가져올 수 있는 작업들이 있고 files에서 가져올 수 있는 작업들이 또 있다.
// -> 핀 카드가 가지고 있는 pinID와 일치하는 pin 정보와 files 정보를 받아와 렌더링 예쁘게 해서 띄워주자)
// (여기서 이제 핀 저장버튼 대신 수정완료 버튼이 들어간다. 창 닫기 버튼은 삭제삭제 ok)

// - 핀 locationName, 핀 files 수정 reducer (핀 장소제목, 사진변경) -> 수정모달창에서 수정 완료 버튼을 눌렀을 때 !
// (action의 인자: pinID와 locationName, 변경된 이미지파일 배열(핀 생성모달창에서 썼던 observer 재활용하세여)
// -> reducer에서 pins배열에서 pinID가 일치하는 객체를 찾아 locationName를 업데이트 시켜주고
// files배열에서 pinID가 일치하는 객체를 찾아 변경된 이미지 파일로 아예 switch 해준다.)

// - 핀 startTime, endTime 수정 reducer (핀 시간변경)
// (action의 인자: pinID와 startTime, endTime
// -> reducer에서 pins배열에서 pinID가 일치하는 객체를 찾아 startTime과 endTime을 업데이트 시켜준다)
// - 핀 ranking 수정 reducer (핀 순서변경)
// (HTML내의 div태그의 변경을 감지하여:observer => pinID가 들어있는 pinPosition 배열을 업데이트시켜줘야합니다)
// 예시 : ['zero', 'pin1', 'pin2', 'pin3', 'pin4'] => ['zero', 'pin4', 'pin2', 'pin1', 'pin3']
// -> 사용자 입장에서는 박스의 이동을 진짜 마음대로 할 수 있으니까 변경사항을 잘 감시하고 배열 전체를 인자로 받아야겠다.
// : 랭킹1 랭킹2 랭킹3 랭킹4 랭킹1 랭킹2 랭킹3 랭킹4
// (action의 인자: 업데이트된 배열
// -> reducer에서 pins배열에서 pinID가 일치하는 객체의 ranking을 인자로 들어온 배열의 인덱스값으로 업데이트시켜주면되겠다 !!)
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [ ] 생성한 action과 reducer, state 가 브라우저에 정상 동작하는 지 테스트 해야합니다.
- [ ] 지도 위에 저장된 핀과 선을 올리는 작업이 필요합니다. -> drawing
- [ ] 오른쪽 사이드바를 디자인하고 생성해야합니다.
- [ ] 핀 박스 드래그 이벤트와 늘이기/줄이기 이벤트를 공부하고 반영해야합니다. -> observer 이용해서 상태변경 추적 ? (짐작)
- [ ] (데이터를 불러와 보여주는 기능이 추가된) 수정용 모달창을 만들어야합니다.