[인스타그램 클론코딩] 09. 게시물 좋아요 기능 구현(Front-End)

기존 HomeContainer 작성 부분의 좋아요 버튼 구현 부분을 상세화한다.

 

1. HomeContainer 수정

const setLike = (postId) => {
    withJwtAxios.get("/like", {params: {postId: postId}})
        .then((res) => {
            setPostList(res.data.postList);
        });
}

const deleteLike = (postId) => {
    withJwtAxios.delete("/like", {params: {postId: postId}})
        .then((res) => {
            setPostList(res.data.postList);
        });
}

return (
    <>
    	...
        
		<div className={style.post_icon}>
            {
                !post.like ?
                    <i className='bi bi-suit-heart fs-3' onClick={() => setLike(post.postId)}/>:
                    <i className='bi bi-suit-heart-fill fs-3' onClick={() => deleteLike(post.postId)} style={{color: 'red'}}/>
            }
            <i className='bi bi-chat fs-3' style={{marginLeft: '10px'}}/>
        </div>
        
        ...
    </>
)

 

2. 동작 화면