refactor: IconButton 컴포넌트 사용

Author: gitul0515

src/pages/MainPage/PostBody.jsx

@@ -3,7 +3,7 @@ import { jsx, css } from '@emotion/react';
 import { useCallback, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
-import { Image, Text, Icon } from 'components';
+import { Image, Text } from 'components';
 import theme from 'styles/theme';
 import { setLike, setDisLike } from 'utils/apis/postApi';
 import { setNotification } from 'utils/apis/userApi';
@@ -12,6 +12,7 @@ import useScrollPosition from 'hooks/useScrollPosition';
 import { useUserContext } from 'contexts/UserContext';
 import { IMAGE_URLS } from 'utils/constants/images';
 import displayedAt from 'utils/functions/displayedAt';
+import IconButton from 'components/basic/Icon/IconButton';
 
 const PostBody = ({ index, post, isDetailPage = false }) => {
   const { _id: postId, image, likes, comments, createdAt, author } = post || {};
@@ -103,12 +104,18 @@ const PostBody = ({ index, post, isDetailPage = false }) => {
         <IconButtons>
           <IconButton
             name={onHeart ? 'HEART_RED' : 'HEART'} // Todo: 상수화
+            size={22}
+            style={IconButtonStyle}
             onClick={handleClickHeart}
           >
-            <IconButtonText>{heartCount}</IconButtonText>
+            <Text fontSize={16} style={IconButtonTextStyle}>
+              {heartCount}
+            </Text>
           </IconButton>
-          <IconButton name="COMMENT" onClick={navigateToDetailPage}>
-            <IconButtonText>{comments.length}</IconButtonText>
+          <IconButton name="COMMENT" size={22} onClick={navigateToDetailPage}>
+            <Text fontSize={16} style={IconButtonTextStyle}>
+              {comments.length}
+            </Text>
           </IconButton>
         </IconButtons>
         <TextContainer>
@@ -158,38 +165,18 @@ const IconButtons = styled.div`
   display: flex;
 `;
 
-const IconButton = ({ name, children, onClick }) => {
-  const style = {
-    padding: 0,
-    borderRadius: '0',
-    marginRight: '16px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'transparent',
-    color: theme.color.fontBlack,
-  };
-  return (
-    <button style={style} onClick={onClick}>
-      <Icon name={name} size={22} />
-      {children}
-    </button>
-  );
+const IconButtonStyle = {
+  marginRight: '16px',
+  color: theme.color.fontBlack,
 };
 
-const IconButtonText = ({ children, ...props }) => {
-  const style = {
-    color: theme.color.fontBlack,
-    marginLeft: '8px',
-    PointerEvent: 'none',
-    lineHeight: '19px',
-    transform: 'translateY(-1px)',
-  };
-  return (
-    <Text fontSize={16} style={style} {...props}>
-      {children}
-    </Text>
-  );
+const IconButtonTextStyle = {
+  fontSize: '16px',
+  color: theme.color.fontBlack,
+  marginLeft: '8px',
+  PointerEvent: 'none',
+  lineHeight: '19px',
+  transform: 'translateY(-1px)',
 };
 
 const TextContainer = styled.div`

src/pages/MainPage/PostHeader.jsx

@@ -1,13 +1,11 @@
 import styled from '@emotion/styled';
 import { useState, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import IconBtn from './IconButton';
 import { Profile, Modal } from 'components';
 import { useUserContext } from 'contexts/UserContext';
 import theme from 'styles/theme';
-import { deletePost } from 'utils/apis/postApi';
 import useLocalToken from 'hooks/useLocalToken';
-import { useEffect } from 'react';
+import IconButton from 'components/basic/Icon/IconButton';
 
 const PostHeader = ({ post, isDetailPage }) => {
   const {
@@ -62,7 +60,7 @@ const PostHeader = ({ post, isDetailPage }) => {
         <Profile src={image} userName={fullName} onClick={handleClickProfile} />
         {isMyPost && (
           <>
-            <IconBtn name="MORE" size={20} onClick={handleClickMore} />
+            <IconButton name="MORE" size={20} onClick={handleClickMore} />
             <Modal visible={isModal} onClose={onClose}>
               <Modal.Custom>
                 <Buttons>

src/pages/PostDetailPage/index.jsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import PostItem from 'pages/MainPage/PostItem';
 import { Avatar, Icon, Modal, PageWrapper } from 'components';
+import IconButton from 'components/basic/Icon/IconButton';
 import theme from 'styles/theme';
 import { useRef, useCallback, useState, useEffect } from 'react';
 import useLocalToken from 'hooks/useLocalToken';
@@ -116,7 +117,12 @@ const PostDetailPage = () => {
                       <CommentText>{comment}</CommentText>
                     </Content>
                     {_id === currentUser.id && (
-                      <MoreButton onClick={() => handleMoreClick(commentId)} />
+                      <IconButton
+                        name="MORE"
+                        size={20}
+                        style={MoreButtonStyle}
+                        onClick={() => handleMoreClick(commentId)}
+                      />
                     )}
                   </CommentItem>
                 ))
@@ -232,24 +238,10 @@ const CommentText = styled.p`
   white-space: pre-wrap;
 `;
 
-const MoreButton = ({ onClick, ...props }) => {
-  const style = {
-    borderRadius: '0',
-    backgroundColor: 'transparent',
-    padding: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'absolute',
-    top: '23px',
-    right: '0',
-  };
-
-  return (
-    <button {...props} style={style} onClick={onClick}>
-      <Icon className="more-button" name="MORE" size={20} />
-    </button>
-  );
+const MoreButtonStyle = {
+  position: 'absolute',
+  top: '23px',
+  right: '0',
 };
 
 const DeleteCommentButton = styled.button`