From 33d9e6614245d7220717f9974e722d20ef660940 Mon Sep 17 00:00:00 2001
From: effozen <ashgrayblue0@gmail.com>
Date: Wed, 4 Dec 2024 23:56:36 +0900
Subject: [PATCH] =?UTF-8?q?[FE][Fix][Refactor]=20#416=20:=20Confirm=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=B0=BD=20UI=20=EC=A4=91=EC=8B=AC=20?=
 =?UTF-8?q?=EB=A7=9E=EC=B6=A4=20=EB=B0=8F=20=EC=BD=94=EB=93=9C=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/component/confirm/Confirm.tsx | 42 +++++++++++-----------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/frontend/src/component/confirm/Confirm.tsx b/frontend/src/component/confirm/Confirm.tsx
index 47efcdc..8cddee5 100644
--- a/frontend/src/component/confirm/Confirm.tsx
+++ b/frontend/src/component/confirm/Confirm.tsx
@@ -1,3 +1,18 @@
+interface IConfirmButtonProps {
+  onClick: () => void;
+  text: string;
+}
+
+const ConfirmButton = (props: IConfirmButtonProps) => (
+  <button
+    className="bg-blueGray-800 w-full cursor-pointer rounded-md border-none px-2.5 py-2.5 text-sm font-medium text-white"
+    onClick={props.onClick}
+    type="button"
+  >
+    {props.text}
+  </button>
+);
+
 interface IConfirmProps {
   message: string;
   onConfirm: () => void;
@@ -9,34 +24,17 @@ interface IConfirmProps {
 
 export const Confirm = (props: IConfirmProps) => {
   return (
-    <div className="fixed inset-0 z-[5000] flex items-center justify-center bg-black bg-opacity-70">
-      <div className="absolute left-1/2 top-1/2 z-[6000] mx-auto flex w-[22rem] max-w-md -translate-x-1/2 flex-col items-center justify-center gap-6 rounded-md bg-gray-50 p-6 text-white shadow-lg">
+    <div className="fixed inset-0 z-[8000] flex items-center justify-center bg-black bg-opacity-70">
+      <div className="absolute left-1/2 z-[8100] mx-auto my-0 flex w-[22rem] max-w-md -translate-x-1/2 flex-col items-center justify-center gap-6 rounded-md bg-gray-50 p-6 text-white shadow-lg">
         <div className="text-blueGray-800 whitespace-pre py-2 text-center text-lg font-medium">
           {props.message}
         </div>
         {props.type === 'alert' ? (
-          <div className="flex w-full items-center justify-between gap-4">
-            <button
-              className="bg-blueGray-800 w-full cursor-pointer rounded-md border-none px-2.5 py-2.5 text-sm font-medium text-white"
-              onClick={props.onConfirm}
-            >
-              {props.confirmText || '확인'}
-            </button>
-          </div>
+          <ConfirmButton onClick={props.onConfirm} text={props.confirmText || '확인'} />
         ) : (
           <div className="flex w-full items-center justify-between gap-4">
-            <button
-              className="bg-blueGray-800 w-full cursor-pointer rounded-md border-none px-2.5 py-2.5 text-sm font-medium text-white"
-              onClick={props.onConfirm}
-            >
-              {props.confirmText || '확인'}
-            </button>
-            <button
-              className="w-full cursor-pointer rounded-md border-none bg-gray-400 px-2.5 py-2.5 text-sm font-medium text-white"
-              onClick={props.onCancel}
-            >
-              {props.cancelText || '취소'}
-            </button>
+            <ConfirmButton onClick={props.onConfirm} text={props.confirmText || '확인'} />
+            <ConfirmButton onClick={props.onCancel} text={props.cancelText || '취소'} />
           </div>
         )}
       </div>