diff --git a/src/components/feed/FeedCommentLikeSection/FeedCommentLikeSection.tsx b/src/components/feed/FeedCommentLikeSection/FeedCommentLikeSection.tsx index d25b303c..c290587a 100644 --- a/src/components/feed/FeedCommentLikeSection/FeedCommentLikeSection.tsx +++ b/src/components/feed/FeedCommentLikeSection/FeedCommentLikeSection.tsx @@ -4,7 +4,6 @@ import CommentHoverIcon from 'public/assets/svg/comment_hover.svg'; import LikeIcon from 'public/assets/svg/like.svg'; import LikeHoverIcon from 'public/assets/svg/like_hover.svg'; import LikeFillIcon from 'public/assets/svg/like_fill.svg'; -import { useState } from 'react'; interface FeedCommentLikeSectionProps { isLiked: boolean; @@ -21,26 +20,23 @@ export default function FeedCommentLikeSection({ onClickComment, onClickLike, }: FeedCommentLikeSectionProps) { - const [isLikeHovered, setIsLikeHovered] = useState(false); - const [isCommentHovered, setIsCommentHovered] = useState(false); - return ( <> - setIsCommentHovered(true)} - onMouseLeave={() => setIsCommentHovered(false)} - > - {isCommentHovered ? : } + + + 댓글 {commentCount} - setIsLikeHovered(true)} - onMouseLeave={() => setIsLikeHovered(false)} - > - {isLiked ? : isLikeHovered ? : } + + {isLiked ? ( + + ) : ( + <> + + + + )} 좋아요 {likeCount} @@ -62,10 +58,43 @@ const CommentWrapper = styled('button', { width: '50%', fontStyle: 'T6', }, + '&:hover svg:first-of-type': { + display: 'none', + }, + '&:hover svg:last-of-type': { + display: 'block', + }, +}); +const StyledCommentIcon = styled(CommentIcon, { + display: 'block', +}); +const StyledCommentHoverIcon = styled(CommentHoverIcon, { + display: 'none', }); const LikeWrapper = styled(CommentWrapper, { cursor: 'pointer', userSelect: 'none', + variants: { + isLiked: { + true: { + '&:hover svg:first-of-type': { + display: 'block', + }, + }, + }, + }, + '&:hover svg:first-of-type': { + display: 'none', + }, + '&:hover svg:nth-of-type(2)': { + display: 'block', + }, +}); +const StyledLikeIcon = styled(LikeIcon, { + display: 'block', +}); +const StyledLikeHoverIcon = styled(LikeHoverIcon, { + display: 'none', }); const Like = styled('span', { marginLeft: '4px',