7. 수정과 삭제

수정과 삭제의 경우엔 작성된 포스트가 현재 로그인된 사용자가 작성한 포스트의 경우에 PostViewer 에서 상단에 수정/삭제 버튼을 띄우는 방식으로 구현됩니다.

이 부분은 한번 직접 구현해보세요.

API 는 다음과 같습니다:

export const update = (id, { title, body }) =>
  client.patch(`/api/posts/${id}`, { title, body });
export const remove = id => client.delete(`/api/posts/${id}`);

삭제의 경우엔 실수로 삭제하는 것을 방지하기 위하여 다음과 같이 모달을 한번 띄워서 정말 삭제할건지 물어보는게 유저 경험상 좋습니다.

수정의 경우엔 수정 클릭시 /write?id=17 이런식으로 쿼리 파라미터로 포스트 아이디를 넘겨주면 포스트 정보를 읽어오고 다음과 같은 형식으로 초기 제목과 내용을 설정해준 다음에 write API 대신 update API 를 호출하면 됩니다.

에디터의 초기 값을 설정 할 때는 다음과 같이 할 수 있습니다.

  setPost = () => {
    const { post } = this.props;
    if (!post) return;
    this.setState({
      title: post.title
    });
    this.quill.root.innerHTML = post.body;
  };

모두 구현된 코드는 https://github.com/vlpt-playground/reacters-step-by-step/tree/07 에서 확인 할 수 있으니 진행중에 막히는게 있으면 참고하세요.