From 1ab5e0e1d9120dcd845bf91b8810a57d18c9e160 Mon Sep 17 00:00:00 2001
From: greetings1012 <ahnqwerty@gmail.com>
Date: Tue, 29 Oct 2024 18:34:54 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Primary=20=EC=83=89=EC=97=90=20?=
 =?UTF-8?q?=EB=A7=9E=EC=B6=B0=20button=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/_common/Button/Button.styles.ts   | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/_common/Button/Button.styles.ts b/frontend/src/components/_common/Button/Button.styles.ts
index e8d34dfc5..2e3c43f98 100644
--- a/frontend/src/components/_common/Button/Button.styles.ts
+++ b/frontend/src/components/_common/Button/Button.styles.ts
@@ -43,11 +43,11 @@ export const Button = styled.button<ButtonStyleProp>`
   justify-content: center;
   align-items: center;
 
-  border: 1px solid ${({ theme, $color }) => theme.color[$color][500]};
+  border: 1px solid ${({ theme, $color }) => theme.color[$color][600]};
   border-radius: ${({ $rounded }) => ($rounded ? '50rem' : '1rem')};
 
-  background-color: ${({ $filled, theme, $color }) => ($filled ? theme.color[$color][500] : theme.color.black[100])};
-  color: ${({ $filled, theme, $color }) => ($filled ? theme.color.black[100] : theme.color[$color][500])};
+  background-color: ${({ $filled, theme, $color }) => ($filled ? theme.color[$color][600] : theme.color.black[100])};
+  color: ${({ $filled, theme, $color }) => ($filled ? theme.color.black[100] : theme.color[$color][600])};
 
   transition: all 0.2s;
 
@@ -56,17 +56,17 @@ export const Button = styled.button<ButtonStyleProp>`
   &:hover {
     border: 1px solid ${({ theme, $color }) => theme.color[$color][600]};
 
-    background-color: ${({ $filled, theme, $color }) => ($filled ? theme.color[$color][600] : theme.color.black[100])};
-    color: ${({ $filled, theme, $color }) => ($filled ? theme.color.black[100] : theme.color[$color][600])};
+    background-color: ${({ $filled, theme, $color }) => ($filled ? theme.color[$color][700] : theme.color.black[100])};
+    color: ${({ $filled, theme, $color }) => ($filled ? theme.color.black[100] : theme.color[$color][700])};
 
     transform: ${({ $animation }) => $animation && 'scale(1.01)'};
   }
 
   &:active {
-    border: 1px solid ${({ theme, $color }) => theme.color[$color][700]};
+    border: 1px solid ${({ theme, $color }) => theme.color[$color][800]};
 
-    background-color: ${({ $filled, theme, $color }) => ($filled ? theme.color[$color][700] : theme.color.black[100])};
-    color: ${({ $filled, theme, $color }) => ($filled ? theme.color.black[100] : theme.color[$color][700])};
+    background-color: ${({ $filled, theme, $color }) => ($filled ? theme.color[$color][800] : theme.color.black[100])};
+    color: ${({ $filled, theme, $color }) => ($filled ? theme.color.black[100] : theme.color[$color][800])};
 
     transform: ${($animation) => $animation && 'scale(1.02)'};
   }