좋아요 누른 상태 받아오기

게시글 번호에 해당하는 게시글의 좋아요 목록에서 유저와 일치하는 아이디를 찾아, 일치하는 아이디가 있을 시 좋아요 상태 변경
/** 개별 게시글 페이지 */
export default function PostDetail({ id }: { id: number }) {
  const [likes, setLikes] = useState<boolean>(false);

  // 로그인 상태 확인 (댓글 기능)
  const user = useSelector((state: RootState) => state.user.user);

  // 게시글 받아오기
  const queryResult = usePostDetail(id);

  const checkLikes = queryResult.data && queryResult.data.likes.indexOf(`${user.id}`);

  useEffect(() => {
    if (checkLikes) setLikes(true);
    else setLikes(false);
  }, [checkLikes]);

  const router = useRouter();

  if (queryResult.isLoading) {
    return <div>Loading...</div>;
  }

  if (queryResult.isError) {
    const error = queryResult.error as Error;
    return <div>Error: {error.message}</div>;
  }

  if (!queryResult.data) {
    return <div>No data available</div>;
  }

  // 게시글 데이터
  const data: PostType = queryResult.data;

  // 좋아요
  const likesHadnler = () => {
    api
      .post('/post/likes', { id: user.id, postNumber: id })
      .then(res => {
        if (checkLikes) setLikes(false);
        else setLikes(true);
      })
      .catch(res => console.log('서버 오류'));
  };

  // 글 삭제
  const deleteHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    api.delete(`/post/${data.postNumber}`).then(res => {
      alert('게시글이 삭제되었습니다.');
      router.push('/');
    });
  };

  // 글 수정
  const editHandler = () => {
    router.push(`/community/edit/${data.postNumber}`);
  };

  return (
    <Container>
      <PostInfo>
        {/* 카테고리 들어갈 자리 */}
        {/* 작성자, 타이틀, 날짜, 조회수 등 */}
        <div className="info-top">
          <p className="title">{data.title}</p>
          <div className="right-side">
            {data.author === user.id && (
              <button className="edit-btn" onClick={editHandler}>
                수정
              </button>
            )}
            {(data.author === user.id || user.super) && (
              <button className="delete-btn" onClick={e => deleteHandler(e)}>
                삭제
              </button>
            )}
            <p className="likse" onClick={likesHadnler}>
              {likes ? <AiFillLike size="18px" /> : <AiOutlineLike size="18px" />}
            </p>
          </div>
        </div>
        {/* 작성글 */}
        <div className="info-bottom">
          <div className="author-date">
            <span className="author">{data.author}</span>|<span className="date">{data.date}</span>
          </div>
          <div className="views-likes">
            <span className="views">조회수 : {data.views}</span>|<span className="likes">스크랩 : {data.likes}</span>
          </div>
        </div>
      </PostInfo>
      {/* 작성한 데이터 */}
      <ShowWritingData data={data.body} />
      {/* 댓글 작성하기 */}
      {<AddComment number={data.postNumber} author={user.id} src={'post'} />}
      {/* 댓글 */}
      {data.comments.map((comment, idx) => (
        <EachComment key={idx} comment={comment} number={data.postNumber} src={'post'} />
      ))}
    </Container>
  );
}
choigirang / why-chat

좋아요 누른 상태 받아오기 #24
