[DevLog] 서외구 / 2022-04-01

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

- 필름로그 작성시 장소 지정 가능 구현
- 주말날씨 확인 페이지 작성

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

- 카카오 맵 API 사용시 클릭한 장소 이름 상태 관리
- 상태 끌어올리기시 상태를 관리는 상단에 선언하고 관리함수를 props.로 보내줘야 한다.
- 제일 좋은 방법은 상태는 단방향으로 해야하지만, 필요한곳이 있음
- Redux를 공부해서 상태관리를 좀더 효율적으로 하고 싶음

```js
export default function FilmLogWriting({ userInfo, setIsOpen }) {
// 유저 정보 상태 관리
const [photoInfo, setPhotoInfo] = useState({
photo: {},
type: "",
contents: "",
});
// 위치 정보 상태 관리
const [inputText, setInputText] = useState("");
const [place, setPlace] = useState("");

// 선택된 장소
const [clickLocation, setClickLocation] = useState({});

console.log(clickLocation);

const onChange = (e) => {
setInputText(e.target.value);
};

const handleSubmit = (e) => {
e.preventDefault();
setPlace(inputText);
setInputText("");
};

// 이미지 미리보는 상태
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("서버 연결이 불안정 합니다.");
});
};

return (
<>
setIsOpen()}>
e.stopPropagation()}>

{files && (

)}


업로드
{
encodeFileTobase64(e.target.files[0]);
}}
>








필름선택


<textarea
className="filmcontent"
placeholder="내용입력"
onChange={handleContents}
>








{clickLocation.Location}

```

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

- [ ] 좋아요 기능 구현
- [ ] 현재 좌표로 한글지명으로 랜더링 기능 구현

This is a DevLog entry describing completed location and weather work, with future checklist items for likes and Korean place names. No specific file, test, or unresolved implementation request is identified, so first clarify which checklist item remains in scope before looking for the related frontend entry point.

Written by the indexing model from the issue text.