From 278afd2ae888dafe5ecf14b4264693e7d07ee707 Mon Sep 17 00:00:00 2001
From: Hooni07 <79882248+Hooni07@users.noreply.github.com>
Date: Fri, 8 Mar 2024 16:57:48 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F?=
 =?UTF-8?q?=20DeleteMessageButton=EC=97=90=20Outlined36=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Buttons/DeleteMessageButton.js     | 26 +++----------------
 src/components/post/SubHeader.jsx             |  1 +
 .../post/subheader/EmojiDropDown.jsx          |  1 +
 src/styles/ButtonStyle.jsx                    |  1 -
 4 files changed, 6 insertions(+), 23 deletions(-)

diff --git a/src/components/common/Buttons/DeleteMessageButton.js b/src/components/common/Buttons/DeleteMessageButton.js
index e157de9..2b3d139 100644
--- a/src/components/common/Buttons/DeleteMessageButton.js
+++ b/src/components/common/Buttons/DeleteMessageButton.js
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
+import { Outlined36 } from '../../../styles/ButtonStyle';
 
 function DeleteMessageButton({ id, onDelete }) {
   const location = useLocation();
@@ -8,7 +9,6 @@ function DeleteMessageButton({ id, onDelete }) {
   const handleButtonClick = async (e) => {
     e.stopPropagation();
     onDelete(id);
-    // navigate(`/post/${recipientID}/edit`, { replace: true });
   };
 
   return (
@@ -18,30 +18,12 @@ function DeleteMessageButton({ id, onDelete }) {
   );
 }
 
-const Button = styled.button`
+const Button = styled(Outlined36)`
   position: absolute;
   right: 24px;
   display: ${({ $isDisplay }) => ($isDisplay ? 'block' : 'none')};
-  /* display: flex; */
-  padding: 6px;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  background: var(--white);
-  border-radius: 6px;
-  border: 1px solid var(--gray300);
-
-  &:hover {
-    background: var(--gray300);
-  }
-
-  &:active {
-    background: var(--gray100);
-  }
-
-  &:focus {
-    border: 1px solid var(--gray500);
-  }
+  padding: 0.6rem;
+  line-height: 0;
 `;
 
 const DeleteImg = styled.img`
diff --git a/src/components/post/SubHeader.jsx b/src/components/post/SubHeader.jsx
index 4ae3392..e9689c4 100644
--- a/src/components/post/SubHeader.jsx
+++ b/src/components/post/SubHeader.jsx
@@ -137,6 +137,7 @@ const SplitBarVertical2 = styled(SplitBarVertical)`
 `;
 
 const ShareButton = styled(Outlined36)`
+  padding: 0.6rem 1.6rem;
   @media (max-width: 470px) {
     padding: 6px 8px;
   }
diff --git a/src/components/post/subheader/EmojiDropDown.jsx b/src/components/post/subheader/EmojiDropDown.jsx
index 6392e18..566e53b 100644
--- a/src/components/post/subheader/EmojiDropDown.jsx
+++ b/src/components/post/subheader/EmojiDropDown.jsx
@@ -87,6 +87,7 @@ const EmojiGroupInDropDown = styled(EmojiGroup)`
 
 const EmojiAddButton = styled(Outlined36)`
   position: relative;
+  padding: 0.6rem 1.6rem;
 
   @media (max-width: 470px) {
     span {
diff --git a/src/styles/ButtonStyle.jsx b/src/styles/ButtonStyle.jsx
index 8f264ff..7a8debc 100644
--- a/src/styles/ButtonStyle.jsx
+++ b/src/styles/ButtonStyle.jsx
@@ -68,7 +68,6 @@ export const Secondary = styled(ButtonCommon)`
 `;
 
 export const Outlined36 = styled(ButtonCommon)`
-  padding: 0.6rem 1.6rem;
   border-radius: 0.6rem;
   background: var(--${({ disabled }) => (disabled ? 'gray300' : 'white')});
   color: var(--${({ disabled }) => (disabled ? 'white' : 'gray900')});