Merge pull request #427 from boostcampwm-2024/feature/fe/#416-Channel…

…-Delete-UI-fix

[FE][Fix][Refactor] #416 : Confirm 모달 창 UI 중심 맞춤 및 코드 리팩토링 #426

frontend/src/component/confirm/Confirm.tsx

@@ -1,3 +1,25 @@
+import classNames from 'classnames';
+
+interface IConfirmButtonProps {
+  onClick: () => void;
+  text: string;
+  type: 'confirm' | 'cancel';
+}
+
+const ConfirmButton = (props: IConfirmButtonProps) => (
+  <button
+    className={classNames(
+      'w-full cursor-pointer rounded-md border-none px-2.5 py-2.5 text-sm font-medium',
+      props.type === 'confirm' && 'bg-blueGray-800 text-white',
+      props.type === 'cancel' && 'bg-gray-400 text-white',
+    )}
+    onClick={props.onClick}
+    type="button"
+  >
+    {props.text}
+  </button>
+);
+
 interface IConfirmProps {
   message: string;
   onConfirm: () => void;
@@ -9,34 +31,29 @@ 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 || '확인'}
+            type="confirm"
+          />
         ) : (
           <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"
+            <ConfirmButton
               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"
+              text={props.confirmText || '확인'}
+              type="confirm"
+            />
+            <ConfirmButton
               onClick={props.onCancel}
-            >
-              {props.cancelText || '취소'}
-            </button>
+              text={props.cancelText || '취소'}
+              type="cancel"
+            />
           </div>
         )}
       </div>