LIKE 버튼 구현

UI는 아래와 같이 스타일을 적용했다.

Like 버튼의 데이터는 글, 날짜, 작성자와 동일하게 가져왔다.

Like 버튼은 데이터만 가져오면 끝나는게 아니다. 누를 때 마다 데이터가 업데이트 되어야 하고, 이미 눌렀다면 다시 뺀 값이 업데이트 되어야한다.

api는 게시물 번호와, 유저명을 받아 해당 게시물을 찾아서 like배열에 유저명을 넣는 식으로 작성했다.

like배열에 이미 유저명이 있으면 배열에서 유저명을 제거해서 다시 돌려준다.

/**
 * @path {PATCH} http://localhost:8000/api/posts/like
 * @description 좋아요 수 변경
 * @returns {post}
 */
router.patch('/posts/like', async (req, res) => {
  const { postId, userName } = req.body;
  await Post.findOne({ postId })
    .then((post) => {
      if (!post) {
        return res.status(404).send({ message: 'Post not found' });
      }

      const likeIndex = post.postLike.indexOf(userName);
      if (likeIndex === -1) {
        post.postLike.push(userName);
        post
          .save()
          .then(() => res.send({ message: 'Like added successfully', post }))
          .catch((error) => res.status(500).send({ message: error.message }));
      } else {
        post.postLike.splice(likeIndex, 1);
        post
          .save()
          .then(() => res.send({ message: 'Like removed successfully', post }))
          .catch((error) => res.status(500).send({ message: error.message }));
      }
    })
    .catch((error) => res.status(500).send({ message: error.message }));
});

Post 컴포넌트는 처음 불러올 때 해당 포스트에 현재 사용자가 좋아요를 눌렀는지 확인해서 isLiked의 flag값을 반영해줬다.

그리고 Like버튼을 누르면 DB에서 Like배열에 저장된 유저명의 length를 가져와서 좋아요 수로 나타내줬다.

isLiked state는 누를때마다 이전값의 반대 값이 적용되도록 setIsLiked((prev) => !prev); 이렇게 작성했다.

아직 댓글을 작성할 수 있는 페이지는 만들지 않았지만 댓글버튼을 누르면 해당 포스트의 디테일 페이지로 이동하게 navigate를 사용했다.

const Post = ({ postId, postTitle, postUser, postDate, postLike }) => {
  const navigate = useNavigate();
  const { data: userName } = useUserName();
  const [isLiked, setIsLiked] = useState(false);
  const [like, setLike] = useState(postLike.length);

  useEffect(() => {
    if (postLike.indexOf(userName) !== -1) {
      setIsLiked(true);
    } else {
      setIsLiked(false);
    }
  }, [postLike, userName]);

  const onCommentHandler = useCallback(() => {
    axios
      .get(`api/posts/${postId}`, { withCredentials: true })
      .then((res) => {
        navigate(`/posts/${res.data}`);
      })
      .catch((err) => console.log(err));
  }, [navigate, postId]);

  const onLikeHandler = useCallback(() => {
    axios
      .patch('api/posts/like', { postId: postId, userName: userName }, { withCredentials: true })
      .then((res) => {
        setIsLiked((prev) => !prev);
        setLike(res.data.post.postLike.length);
      })
      .catch((err) => console.log(err));
  }, [postId, userName]);

  return (
    <PostWrap>
      <Actions>
        <Like onClick={onLikeHandler}>
          {isLiked ? <FaHeart /> : <FaRegHeart />}
          {like}
        </Like>
        <Comment>
          <FaRegCommentDots onClick={onCommentHandler} />
        </Comment>
      </Actions>
      <Title>{postTitle}</Title>
      <Date>{postDate}</Date>
      <Name>{postUser}</Name>
    </PostWrap>
  );
};

누를 때마다 반영되는 모습 !

---

유저별 개별 페이지 구현

<Route path='/:user' element={<MyPage />} />
<Route path='/:user/collection' element={<MyPage />} />

기존의 라우트 경로와 다르게 user명을 파라미터로 받아서 해당 유저의 페이지로 이동할 수 있도록 구현했다.

첫번째 문제, 나는 유저명을 한글로도 작성 가능하도록 해서 파라미터로 한글이 들어갈 수 있다.

그렇게 되면 서버로 보낼때 한글이 깨져서 데이터가 보내진다.

그래서 애초에 유저의 파라미터를 보낼때 인코딩해서 보냈다. 그럼 서버에서도 인코딩 된 유저명을 잘 받아올 수 있다.

axios
    .get(`/api/users/${encodeURI(params.user)}`)
    .then((res) => {
      setParamsUserName(res.data.userName);
      setParamsUserImage(res.data.userImage);
    })
    .catch((error) => {
      console.log(error.response);
    });

서버에서 DB로 파라미터로 받은 유저명(인코딩된)으로 특정 유저의 정보를 찾는다.

/**
 * @path {GET} http://localhost:8000/api/users/:id
 * @description 특정 유저 정보 가져오기
 * @returns {user || false}
 */
router.get('/users/:id', async (req, res) => {
  await User.findOne({ userName: req.params.id })
    .then((user) => {
      if (!user) return res.status(403).json({ loadUser: false });
      return res.status(200).json({ userName: user.userName, userImage: user.userImage });
    })
    .catch((error) => {
      console.log('에러: ', error);
      return res.status(403).json(error.errors);
    });
});

그리고 해당 유저의 이미지와 유저명을 돌려줘 페이지에 나타날 수 있게 했다. 유저들이 쓴 글, 좋아요 누른 글 등 다양한 정보를 더 추가할 생각이다.

존재하지 않는 아이디의 주소로 접속하면 존재하지 않는 유저라고 나타내준다.