From 795f1701bc6291eb12ea4b07dfb0c28691f24e71 Mon Sep 17 00:00:00 2001
From: Seoyoung <seoyoungiyo@gmail.com>
Date: Fri, 2 Feb 2024 18:54:02 +0900
Subject: [PATCH 01/12] =?UTF-8?q?Feat:=20=EA=B3=B5=EC=9A=A9=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/Modal.css.ts       | 32 +++++++++++++++++++
 src/components/Modal/Modal.tsx          | 35 +++++++++++++++++++++
 src/components/Modal/ModalButton.css.ts | 41 +++++++++++++++++++++++++
 src/components/Modal/ModalButton.tsx    | 21 +++++++++++++
 src/components/Modal/ModalTitle.css.ts  |  8 +++++
 src/components/Modal/ModalTitle.tsx     |  6 ++++
 src/components/ModalPortal.ts           | 14 +++++++++
 src/hooks/useBooleanOutput.ts           | 22 +++++++++++++
 src/hooks/useOnClickOutside.ts          | 23 ++++++++++++++
 9 files changed, 202 insertions(+)
 create mode 100644 src/components/Modal/Modal.css.ts
 create mode 100644 src/components/Modal/Modal.tsx
 create mode 100644 src/components/Modal/ModalButton.css.ts
 create mode 100644 src/components/Modal/ModalButton.tsx
 create mode 100644 src/components/Modal/ModalTitle.css.ts
 create mode 100644 src/components/Modal/ModalTitle.tsx
 create mode 100644 src/components/ModalPortal.ts
 create mode 100644 src/hooks/useBooleanOutput.ts
 create mode 100644 src/hooks/useOnClickOutside.ts

diff --git a/src/components/Modal/Modal.css.ts b/src/components/Modal/Modal.css.ts
new file mode 100644
index 00000000..651d130c
--- /dev/null
+++ b/src/components/Modal/Modal.css.ts
@@ -0,0 +1,32 @@
+import { style } from '@vanilla-extract/css';
+
+export const background = style({
+  width: '100vw',
+  height: '100vh',
+  zIndex: 100,
+
+  position: 'fixed',
+  top: '0px',
+  left: '0px',
+
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  backgroundColor: 'rgba(25, 25, 27, 0.3)',
+});
+
+export const container = style({
+  width: '326px',
+  padding: '24px',
+
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '2.4rem',
+
+  backgroundColor: '#fff',
+
+  borderRadius: '8px',
+});
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
new file mode 100644
index 00000000..832c2cfa
--- /dev/null
+++ b/src/components/Modal/Modal.tsx
@@ -0,0 +1,35 @@
+import { FormEvent, MouseEventHandler, ReactNode, useEffect, useRef, useState } from 'react';
+import ModalPortal from '@/components/ModalPortal';
+import * as styles from './Modal.css';
+import ModalTitle from './ModalTitle';
+import ModalButton from './ModalButton';
+import useOnClickOutside from '@/hooks/useOnClickOutside';
+import useBooleanOutput from '@/hooks/useBooleanOutput';
+
+interface ModalMainProps {
+  children?: ReactNode;
+  handleModalClose: () => void;
+}
+
+function ModalMain({ children, handleModalClose }: ModalMainProps) {
+  const { ref } = useOnClickOutside(() => {
+    handleModalClose();
+  });
+
+  return (
+    <ModalPortal>
+      <div className={styles.background}>
+        <div ref={ref} className={styles.container}>
+          {children}
+        </div>
+      </div>
+    </ModalPortal>
+  );
+}
+
+const Modal = Object.assign(ModalMain, {
+  Title: ModalTitle,
+  Button: ModalButton,
+});
+
+export default Modal;
diff --git a/src/components/Modal/ModalButton.css.ts b/src/components/Modal/ModalButton.css.ts
new file mode 100644
index 00000000..48c344cb
--- /dev/null
+++ b/src/components/Modal/ModalButton.css.ts
@@ -0,0 +1,41 @@
+import { style } from '@vanilla-extract/css';
+
+export const buttonContainer = style({
+  width: '100%',
+
+  display: 'flex',
+  justifyContent: 'flex-end',
+  gap: '16px',
+});
+
+export const baseButton = style({
+  padding: '12px 16px',
+
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  flexShrink: '0',
+
+  borderRadius: '12px',
+  fontSize: '1.4rem',
+  fontWeight: '500',
+  lineHeight: '20px',
+  letterSpacing: '-0.4px',
+});
+
+export const primaryButton = style([
+  baseButton,
+  {
+    backgroundColor: '#0047FF',
+    color: '#fff',
+  },
+]);
+
+export const secondaryButton = style([
+  baseButton,
+  {
+    backgroundColor: '#EBF4FF',
+    color: '#0047FF',
+  },
+]);
diff --git a/src/components/Modal/ModalButton.tsx b/src/components/Modal/ModalButton.tsx
new file mode 100644
index 00000000..d0cf0a0f
--- /dev/null
+++ b/src/components/Modal/ModalButton.tsx
@@ -0,0 +1,21 @@
+import { MouseEventHandler, ReactNode } from 'react';
+import * as styles from './ModalButton.css';
+
+interface ModalButtonProps {
+  children: ReactNode;
+  onCancel: MouseEventHandler<HTMLButtonElement>;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+}
+
+export default function ModalButton({ children, onCancel, onClick }: ModalButtonProps) {
+  return (
+    <div className={styles.buttonContainer}>
+      <button type="button" className={styles.secondaryButton} onClick={onCancel}>
+        취소
+      </button>
+      <button type="button" className={styles.primaryButton} onClick={onClick}>
+        {children}
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/Modal/ModalTitle.css.ts b/src/components/Modal/ModalTitle.css.ts
new file mode 100644
index 00000000..c5a57a3b
--- /dev/null
+++ b/src/components/Modal/ModalTitle.css.ts
@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const title = style({
+  width: '100%',
+  fontSize: '1.6rem',
+  fontWeight: '600',
+  lineHeight: '150%',
+});
diff --git a/src/components/Modal/ModalTitle.tsx b/src/components/Modal/ModalTitle.tsx
new file mode 100644
index 00000000..66304b47
--- /dev/null
+++ b/src/components/Modal/ModalTitle.tsx
@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import * as styles from './ModalTitle.css';
+
+export default function ModalTitle({ children }: { children: ReactNode }) {
+  return <div className={styles.title}>{children}</div>;
+}
diff --git a/src/components/ModalPortal.ts b/src/components/ModalPortal.ts
new file mode 100644
index 00000000..48937fab
--- /dev/null
+++ b/src/components/ModalPortal.ts
@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import ReactDOM from 'react-dom';
+
+interface Props {
+  children: ReactNode;
+}
+
+const ModalPortal = ({ children }: Props) => {
+  const el = document.getElementById('modal-root') as HTMLElement;
+
+  return ReactDOM.createPortal(children, el);
+};
+
+export default ModalPortal;
diff --git a/src/hooks/useBooleanOutput.ts b/src/hooks/useBooleanOutput.ts
new file mode 100644
index 00000000..b1da56c9
--- /dev/null
+++ b/src/hooks/useBooleanOutput.ts
@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useState } from 'react';
+
+interface useBooleanOutput {
+  isOn: boolean;
+  toggle: () => void;
+  handleSetOn: () => void;
+  handleSetOff: () => void;
+}
+
+export default function useBooleanOutput(defaultValue?: boolean): useBooleanOutput {
+  const [isOn, setIsOn] = useState<boolean>(!!defaultValue);
+
+  const toggle = useCallback(() => setIsOn((prev) => !prev), []);
+  const handleSetOn = useCallback(() => setIsOn(true), []);
+  const handleSetOff = useCallback(() => setIsOn(false), []);
+
+  useEffect(() => {
+    setIsOn(false);
+  }, []);
+
+  return { isOn, toggle, handleSetOn, handleSetOff };
+}
diff --git a/src/hooks/useOnClickOutside.ts b/src/hooks/useOnClickOutside.ts
new file mode 100644
index 00000000..615cd647
--- /dev/null
+++ b/src/hooks/useOnClickOutside.ts
@@ -0,0 +1,23 @@
+import { EventHandler, useEffect, useRef, useState } from 'react';
+
+const useOnClickOutside = (handler: () => void) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: Event) => {
+      if (ref.current !== null && !ref.current.contains(e.target as Node)) {
+        handler();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [ref]);
+
+  return { ref };
+};
+
+export default useOnClickOutside;

From be2908eba16287b12fdf9e23fcdd2a3620fa5293 Mon Sep 17 00:00:00 2001
From: seoyoung-min <seoyoungiyo@gmail.com>
Date: Fri, 2 Feb 2024 19:25:26 +0900
Subject: [PATCH 02/12] =?UTF-8?q?Refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useOnClickOutside.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useOnClickOutside.ts b/src/hooks/useOnClickOutside.ts
index 615cd647..410835c4 100644
--- a/src/hooks/useOnClickOutside.ts
+++ b/src/hooks/useOnClickOutside.ts
@@ -1,4 +1,4 @@
-import { EventHandler, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 const useOnClickOutside = (handler: () => void) => {
   const ref = useRef<HTMLDivElement>(null);

From 46962d666f0fc71fa9aedb3be2653ec399fe54fd Mon Sep 17 00:00:00 2001
From: seoyoung-min <seoyoungiyo@gmail.com>
Date: Fri, 2 Feb 2024 21:15:34 +0900
Subject: [PATCH 03/12] =?UTF-8?q?Refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/Modal.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 832c2cfa..058343d0 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -4,7 +4,6 @@ import * as styles from './Modal.css';
 import ModalTitle from './ModalTitle';
 import ModalButton from './ModalButton';
 import useOnClickOutside from '@/hooks/useOnClickOutside';
-import useBooleanOutput from '@/hooks/useBooleanOutput';
 
 interface ModalMainProps {
   children?: ReactNode;

From 238a2838a1b8551e309238dea353c1b902be9a1b Mon Sep 17 00:00:00 2001
From: seoyoung-min <seoyoungiyo@gmail.com>
Date: Fri, 2 Feb 2024 22:35:51 +0900
Subject: [PATCH 04/12] =?UTF-8?q?Feat:=20layout=EC=97=90=20Portal=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 19153c10..007ea386 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -8,6 +8,7 @@ export default function TempLayout({ children }: { children: ReactNode }) {
         <title>ListyWave</title>
       </head>
       <body>
+        <div id="modal-root" />
         <div>{children}</div>
       </body>
     </html>

From 12fc904cece4c84fbb1d5d941ad5b75c438f9a44 Mon Sep 17 00:00:00 2001
From: seoyoung-min <seoyoungiyo@gmail.com>
Date: Sat, 3 Feb 2024 00:38:22 +0900
Subject: [PATCH 05/12] =?UTF-8?q?Refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 058343d0..8053ec96 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, MouseEventHandler, ReactNode, useEffect, useRef, useState } from 'react';
+import { ReactNode} from 'react';
 import ModalPortal from '@/components/ModalPortal';
 import * as styles from './Modal.css';
 import ModalTitle from './ModalTitle';

From f63caeef8f28a42a9996ab1b34633bb00dc0001a Mon Sep 17 00:00:00 2001
From: seoyoung-min <seoyoungiyo@gmail.com>
Date: Sat, 3 Feb 2024 03:31:10 +0900
Subject: [PATCH 06/12] =?UTF-8?q?Refactor:=20CreatePortal=20=EC=9E=84?=
 =?UTF-8?q?=ED=8F=AC=ED=8A=B8=20=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=EB=B0=8F=20=ED=8F=AC=ED=83=88=20=EC=84=B1=EB=8A=A5=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ModalPortal.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ModalPortal.ts b/src/components/ModalPortal.ts
index 48937fab..3586b621 100644
--- a/src/components/ModalPortal.ts
+++ b/src/components/ModalPortal.ts
@@ -1,14 +1,18 @@
 import { ReactNode } from 'react';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 
 interface Props {
   children: ReactNode;
 }
 
 const ModalPortal = ({ children }: Props) => {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
   const el = document.getElementById('modal-root') as HTMLElement;
 
-  return ReactDOM.createPortal(children, el);
+  return createPortal(children, el);
 };
 
 export default ModalPortal;

From 3ec583eac65de8977089dbdc4ed0b7b040cea76e Mon Sep 17 00:00:00 2001
From: seoyoung-min <seoyoungiyo@gmail.com>
Date: Sat, 3 Feb 2024 03:42:25 +0900
Subject: [PATCH 07/12] =?UTF-8?q?Refactor:=20=EC=B6=94=EB=A1=A0=20?=
 =?UTF-8?q?=EA=B0=80=EB=8A=A5=ED=95=9C=20=ED=83=80=EC=9E=85=20=EC=A7=80?=
 =?UTF-8?q?=EC=A0=95=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useBooleanOutput.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useBooleanOutput.ts b/src/hooks/useBooleanOutput.ts
index b1da56c9..659a752b 100644
--- a/src/hooks/useBooleanOutput.ts
+++ b/src/hooks/useBooleanOutput.ts
@@ -8,7 +8,7 @@ interface useBooleanOutput {
 }
 
 export default function useBooleanOutput(defaultValue?: boolean): useBooleanOutput {
-  const [isOn, setIsOn] = useState<boolean>(!!defaultValue);
+  const [isOn, setIsOn] = useState(!!defaultValue);
 
   const toggle = useCallback(() => setIsOn((prev) => !prev), []);
   const handleSetOn = useCallback(() => setIsOn(true), []);

From 6794a9c90978813afec14a27ddd3c0949556fd01 Mon Sep 17 00:00:00 2001
From: seoyoung-min <seoyoungiyo@gmail.com>
Date: Sat, 3 Feb 2024 04:26:11 +0900
Subject: [PATCH 08/12] =?UTF-8?q?Chore:=20import=EB=AC=B8=20=EB=9D=84?=
 =?UTF-8?q?=EC=96=B4=EC=93=B0=EA=B8=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 8053ec96..29040b02 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import { ReactNode} from 'react';
+import { ReactNode } from 'react';
 import ModalPortal from '@/components/ModalPortal';
 import * as styles from './Modal.css';
 import ModalTitle from './ModalTitle';

From fa6c2ceda7b433151850d581cf2704bef047e10f Mon Sep 17 00:00:00 2001
From: seoyoung-min <seoyoungiyo@gmail.com>
Date: Sat, 3 Feb 2024 04:27:48 +0900
Subject: [PATCH 09/12] =?UTF-8?q?Fix:=20=EB=AF=B8=EC=82=AC=EC=9A=A9=20impo?=
 =?UTF-8?q?rt=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20dependency=20list=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useOnClickOutside.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useOnClickOutside.ts b/src/hooks/useOnClickOutside.ts
index 410835c4..07976fbf 100644
--- a/src/hooks/useOnClickOutside.ts
+++ b/src/hooks/useOnClickOutside.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 
 const useOnClickOutside = (handler: () => void) => {
   const ref = useRef<HTMLDivElement>(null);
@@ -15,7 +15,7 @@ const useOnClickOutside = (handler: () => void) => {
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('touchstart', handleClickOutside);
     };
-  }, [ref]);
+  }, [ref, handler]);
 
   return { ref };
 };

From 801369ad80485921095bab01699ce0dcc17a8cc3 Mon Sep 17 00:00:00 2001
From: seoyoung-min <seoyoungiyo@gmail.com>
Date: Sat, 3 Feb 2024 05:07:44 +0900
Subject: [PATCH 10/12] =?UTF-8?q?Design:=20=EB=B2=84=ED=8A=BC=20=EB=B9=84?=
 =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/ModalButton.css.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/Modal/ModalButton.css.ts b/src/components/Modal/ModalButton.css.ts
index 48c344cb..e48e6f07 100644
--- a/src/components/Modal/ModalButton.css.ts
+++ b/src/components/Modal/ModalButton.css.ts
@@ -39,3 +39,13 @@ export const secondaryButton = style([
     color: '#0047FF',
   },
 ]);
+
+export const disabledButton = style([
+  baseButton,
+  {
+    backgroundColor: '#AFB1B6',
+    color: '#fff',
+
+    cursor: 'default',
+  },
+]);

From a3eaf2af377d3bb33fe129ae3ff6b1ce347fdbf4 Mon Sep 17 00:00:00 2001
From: seoyoung-min <seoyoungiyo@gmail.com>
Date: Sat, 3 Feb 2024 05:08:58 +0900
Subject: [PATCH 11/12] =?UTF-8?q?Refactor:=20ModalButton=20=EB=B9=84?=
 =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94=20=EC=86=8D=EC=84=B1=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/ModalButton.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal/ModalButton.tsx b/src/components/Modal/ModalButton.tsx
index d0cf0a0f..41769a02 100644
--- a/src/components/Modal/ModalButton.tsx
+++ b/src/components/Modal/ModalButton.tsx
@@ -5,15 +5,16 @@ interface ModalButtonProps {
   children: ReactNode;
   onCancel: MouseEventHandler<HTMLButtonElement>;
   onClick: MouseEventHandler<HTMLButtonElement>;
+  isDisabled?: boolean;
 }
 
-export default function ModalButton({ children, onCancel, onClick }: ModalButtonProps) {
+export default function ModalButton({ children, onCancel, onClick, isDisabled = false }: ModalButtonProps) {
   return (
     <div className={styles.buttonContainer}>
       <button type="button" className={styles.secondaryButton} onClick={onCancel}>
         취소
       </button>
-      <button type="button" className={styles.primaryButton} onClick={onClick}>
+      <button type="button" className={isDisabled ? styles.disabledButton : styles.primaryButton} onClick={onClick} disabled={isDisabled}>
         {children}
       </button>
     </div>

From f325a2fde97a347757b1876cd68b37d27f94517b Mon Sep 17 00:00:00 2001
From: seoyoung-min <seoyoungiyo@gmail.com>
Date: Sat, 3 Feb 2024 05:30:43 +0900
Subject: [PATCH 12/12] =?UTF-8?q?Fix:=20=ED=94=84=EB=A6=AC=ED=8B=B0?=
 =?UTF-8?q?=EC=96=B4=20=EC=A4=84=EB=B0=94=EA=BF=88=20=EC=97=90=EB=9F=AC=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

---
 src/components/Modal/ModalButton.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Modal/ModalButton.tsx b/src/components/Modal/ModalButton.tsx
index 41769a02..92831dc8 100644
--- a/src/components/Modal/ModalButton.tsx
+++ b/src/components/Modal/ModalButton.tsx
@@ -14,7 +14,12 @@ export default function ModalButton({ children, onCancel, onClick, isDisabled =
       <button type="button" className={styles.secondaryButton} onClick={onCancel}>
         취소
       </button>
-      <button type="button" className={isDisabled ? styles.disabledButton : styles.primaryButton} onClick={onClick} disabled={isDisabled}>
+      <button
+        type="button"
+        disabled={isDisabled}
+        className={isDisabled ? styles.disabledButton : styles.primaryButton}
+        onClick={onClick}
+      >
         {children}
       </button>
     </div>