From 5ed2b7f126b80539356d0bc3dbd253bd61db80bc Mon Sep 17 00:00:00 2001
From: effozen <ashgrayblue0@gmail.com>
Date: Wed, 4 Dec 2024 23:43:24 +0900
Subject: [PATCH 1/2] =?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 +++++++++----------
 frontend/src/lib/constants/commonConstants.ts |  4 +-
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/frontend/src/component/confirm/Confirm.tsx b/frontend/src/component/confirm/Confirm.tsx
index 47efcdcf..8cddee57 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>
diff --git a/frontend/src/lib/constants/commonConstants.ts b/frontend/src/lib/constants/commonConstants.ts
index 2670e0ba..d83fd661 100644
--- a/frontend/src/lib/constants/commonConstants.ts
+++ b/frontend/src/lib/constants/commonConstants.ts
@@ -9,8 +9,8 @@ export const AppConfig = {
   /**
    * API SERVER
    */
-  API_SERVER: 'https://ddara.kro.kr/api',
-  // API_SERVER: 'http://localhost:3001/api',
+  // API_SERVER: 'https://ddara.kro.kr/api',
+  API_SERVER: 'http://localhost:3001/api',
   SOCKET_SERVER: 'wss://ddara.kro.kr/ws',
   // SOCKET_SERVER: 'ws://localhost:3001',
 

From fdb1874a17c9d49f3f85e1c79499fa241ea6df68 Mon Sep 17 00:00:00 2001
From: effozen <ashgrayblue0@gmail.com>
Date: Wed, 4 Dec 2024 23:52:12 +0900
Subject: [PATCH 2/2] =?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 47efcdcf..8cddee57 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>