이제 PostViewer에서 onRemove 함수를 만들어 removePost를 호출하도록 구현해 보겠습니다. removePost의 경우에는 API를 요청한 후 따로 보여 주어야 할 결과가 없으니 리덕스 액션과 사가를 만드는 작업을 생략하고 바로 API를 사용하겠습니다.

containers/post/PostViewerContainer.js

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { readPost, unloadPost } from '../../modules/post';
import PostViewer from '../../components/post/PostViewer';
import PostActionButtons from '../../components/post/PostActionButtons';
import { setOriginalPost } from '../../modules/write';
import { removePost } from '../../lib/api/posts';

const PostViewerContainer = ({ match, history }) => {
(...)

  const onRemove = async () => {
    try {
      await removePost(postId);
      history.push('/'); // 홈으로 이동
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <PostViewer
      post={post}
      loading={loading}
      error={error}
      actionButtons={<PostActionButtons onEdit={onEdit} onRemove={onRemove} />}
      ownPost={user && user.id = = = post && post.id}
    />
  );
};

export default withRouter(PostViewerContainer);

---

 

컴포넌트 수정이 끝나고 나면, 다시 삭제 버튼을 눌러서 모달을 열고 삭제 버튼을 눌러 보세요. 홈 화면으로 이동했나요? 삭제한 포스트가 홈 화면에서 사라졌는지도 확인해 보세요.

이제 이 프로젝트의 주요 기능을 모두 구현했습니다!