[DevLog] 서외구 / 2022-03-31

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

- 오늘의 필름 페이지 수정
- 필름로그, 상세페이지, 작성창, 수정창, 삭제 기능 구현

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

- 객체로된 상태를 관리시 불변성을 지키기 위해 기존객체에 내용도 전부 포함을 해줘야 하는점 (항상 유의해아함)

```js
export default function FilmLogWriting({ userInfo, setIsOpen }) {
// 유저 정보 상태 관리
const [photoInfo, setPhotoInfo] = useState({
photo: {},
type: "",
contents: "",
});
// 이미지 미리보는 상태
const [files, setFiles] = useState("");

// 이미지 미리보기 삽입 기능
const encodeFileTobase64 = (fileBlob) => {
const reader = new FileReader();
reader.readAsDataURL(fileBlob);
return new Promise((resolve) => {
reader.onload = () => {
setFiles(reader.result);
setPhotoInfo({ ...photoInfo, photo: fileBlob });
resolve();
};
});
};
// 이미지 수정 버튼
const handleRevison = () => {
setFiles("");
setPhotoInfo({ ...photoInfo, photo: "" });
};

// 내용 상태 관리 함수
const handleContents = (e) => {
setPhotoInfo({ ...photoInfo, contents: e.target.value });
};

const filmlogRegister = () => {
const postData = { filmtype: photoInfo.type, contents: photoInfo.contents };
axios
.post(
`${process.env.REACT_APP_API_URL}/filmlogs/register/${userInfo.id}`,
postData,
{
headers: {
"Content-type": "application/json",
},
}
)
.then((res) => {
const { id } = res.data.data;
const formData = new FormData();
formData.set("photo", photoInfo.photo);
// console.log("폼데이터 확인", formData);
axios
.patch(
`${process.env.REACT_APP_API_URL}/filmlogs/revision/photo/${userInfo.id}/${id}`,
formData,
{
headers: {
"Content-type": "multipart/form-data",
},
}
)
.then((res) => {
alert("등록이 완료되었습니다");
// isOpen 상태 변경 / setIsOpen(true)// 상위에서 props로 전달받아 적용
setIsOpen(false);
})
.catch((err) => console.log(err));
})
.catch((err) => {
console.log(err);
alert("서버 연결이 불안정 합니다.");
});
};
```

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

- [ ] 좋아요 기능 추가
- [ ] 사진 수정시 수정버튼 이미지 호버 되었을때 랜더링 조건 구현
- [ ] 오늘의 필름 페이지에 주말날씨 추가 기능 구현