관리 메뉴

Dev Blog

20210309 21일차 그림일기장 수정 로직 구현 본문

BootCamp_Codestates/Final Project

20210309 21일차 그림일기장 수정 로직 구현

Nomad Kim 2021. 3. 10. 04:24

구현 내용

  • 그림판/일기장 로직 구현 완료

  • 그림 일기장 수정 로직 구현 중

 

나의 일기 페이지에서 수정하고 싶은 일기의 수정 버튼을 누르면 수정이 가능한 일기 쓰기 페이지가 열린다.

다른 로직과 마찬가지로, App 으로의 상태 끌어올리기를 통해 해당 글의 모든데이터를 일기쓰기 페이지의 컴포넌트의 필요한 부분

에 전달한다.

function App(): ReactElement {
	const [contentInfo, setContentInfo] = useState(0);
...
	const conveyContent = (e: any) => {
		setContentInfo(e);
		console.log(contentInfo);
	};
...

각 컴포넌트에서는 useEffect 를 사용하여 이 데이터의 유무에 따라 상태를 변경시키는데,  예를 들어

날짜, 그림, 제목, 내용, 기분, 공개여부 등이다.  여기서 주목할 점은 그림의 데이터는 좌표데이터이기 때문에 최초 그림을 그릴때와 마찬가지로 마지막 지우기 기능이 가능하다. (마지막 좌표 또는 선 부터 사라지는 기능).

 

해야할일

아직 API 를 통해 업데이트 요청을 보냈을 때 서버 에러가 발생해서 서버쪽에 확인이 필요하다.

그리고 상태 변화에 따라 예상치 못한 동작이 몇개 있어서(예를 들어, 뒤로가기 버튼을 누르고 다시 들어오면 상태가 그대로인 점.. 뒤로가기 버튼을 눌렀을때 contentInfo 가 있는 상태면 모든 상태를 리셋해주면 될 것으로 보인다.) 디테일한 에러 핸들링이 필요하다. 내일 글 수정 기능이 완성되면 바로 소셜로그인 구현을 시작할 예정이다.

 

요즘 너무 늦게 자는 것 같다. 새벽 네시라니.. 글 수정 기능을 왠만큼은 끝내고 싶었다. 자야지...

Comments