From 97efab899a5e1d468cac7ae3d561adc0dd58119d Mon Sep 17 00:00:00 2001
From: Bori <85009583+Bori-github@users.noreply.github.com>
Date: Mon, 6 May 2024 21:04:52 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20#241=20-=20IconButton=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=BD=94=EB=93=9C=20=EB=A6=AC=ED=8C=A9=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81=20(#242)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/IconButton.tsx | 32 +++++++++++++++++-----------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/common/IconButton.tsx b/src/components/common/IconButton.tsx
index 46889b3e..56faf487 100644
--- a/src/components/common/IconButton.tsx
+++ b/src/components/common/IconButton.tsx
@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -15,17 +16,16 @@ export const IconButton = ({
   return (
     <button
       type="button"
-      style={{
-        // TODO: #186 PR 머지 후 css 속성으로 수정
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: `${SIZE_STYLES[size]}px`,
-        height: `${SIZE_STYLES[size]}px`,
-        borderRadius: '50%',
-        backgroundColor,
-        userSelect: 'none',
-      }}
+      css={css`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background-color: ${backgroundColor};
+        user-select: none;
+
+        ${SIZE_STYLES[size]}
+      `}
       {...props}
     >
       {icon}
@@ -34,6 +34,12 @@ export const IconButton = ({
 };
 
 const SIZE_STYLES = {
-  md: 48,
-  lg: 60,
+  md: css`
+    width: 48px;
+    height: 48px;
+  `,
+  lg: css`
+    width: 60px;
+    height: 60px;
+  `,
 };