[Refactor/#80] ControlBox 커스터마이징, WorkspaceSetting 삭제영역 구조 통일

src/components/common/controlbox/ControlBox.tsx

@@ -1,4 +1,5 @@
-import type { HTMLAttributes } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import type React from "react";
 import { twMerge } from "tailwind-merge";
 
 import Button from "../button/Button";
@@ -8,6 +9,16 @@ interface IControlBoxProps extends HTMLAttributes<HTMLDivElement> {
   description: string;
   buttonText: string;
   onButtonClick: () => void;
+  containerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+  buttonSize?: React.ComponentProps<typeof Button>["size"];
+  buttonClassName?: string;
+  buttonDisabled?: boolean;
+  buttonSlot?: ReactNode;
+  leadingSlot?: ReactNode;
+  contentClassName?: string;
 }
 
 export default function ControlBox({
@@ -16,30 +27,64 @@ export default function ControlBox({
   buttonText,
   onButtonClick,
   className,
+  containerClassName,
+  titleClassName,
+  descriptionClassName,
+  buttonVariant = "primary",
+  buttonSize = "small",
+  buttonClassName,
+  buttonDisabled,
+  buttonSlot,
+  leadingSlot,
+  contentClassName,
   ...rest
 }: IControlBoxProps) {
   return (
     <div
       className={twMerge(
-        "flex items-center justify-between min-w-180 px-7 py-6 bg-chart-3/7 border-[0.5px] border-chart-3 rounded-component-lg",
+        "flex items-center justify-between min-w-180 px-7 py-6 border-[0.5px]  rounded-component-lg",
+        "border-chart-3 bg-chart-3/7",
+        containerClassName,
         className,
       )}
       {...rest}
     >
-      <div className="flex flex-col gap-2">
-        <h3 className="font-heading3 text-chart-3">{title}</h3>
-        <p className="font-body2 text-text-sub whitespace-pre-line leading-relaxed">
-          {description}
-        </p>
-      </div>
-      <Button
-        variant="primary"
-        size="small"
-        onClick={onButtonClick}
-        className="shrink-0 !h-button-big px-8 !rounded-component-md"
+      <div
+        className={twMerge(
+          "flex items-center gap-4 sm:gap-8",
+          contentClassName,
+        )}
       >
-        {buttonText}
-      </Button>
+        {leadingSlot ? <div className="shrink-0">{leadingSlot}</div> : null}
+        <div className="flex flex-col gap-2">
+          <h3 className={twMerge("font-heading3 text-chart-3", titleClassName)}>
+            {title}
+          </h3>
+          <p
+            className={twMerge(
+              "font-body2 text-text-sub whitespace-pre-line leading-relaxed",
+              descriptionClassName,
+            )}
+          >
+            {description}
+          </p>
+        </div>
+      </div>
+
+      {buttonSlot ?? (
+        <Button
+          variant={buttonVariant}
+          size={buttonSize}
+          onClick={onButtonClick}
+          disabled={buttonDisabled}
+          className={twMerge(
+            "shrink-0 px-8 !rounded-component-md",
+            buttonClassName,
+          )}
+        >
+          {buttonText}
+        </Button>
+      )}
     </div>
   );
 }

src/pages/workspace/WorkspaceSetting.tsx

@@ -3,6 +3,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import { toast } from "sonner";
 
 import Button from "@/components/common/button/Button";
+import ControlBox from "@/components/common/controlbox/ControlBox";
 import Input from "@/components/common/input/Input";
 import Modal from "@/components/common/modal/Modal";
 import TextareaField from "@/components/common/textarea/TextareaField";
@@ -211,28 +212,22 @@ export default function WorkspaceSetting() {
               {saving ? "저장 중.." : "변경사항 저장하기"}
             </Button>
           </div>
-          <div className="bg-status-red/10 border border-status-red rounded-component-lg p-6 sm:p-8 mt-12 flex flex-col gap-6 md:flex-row md:justify-between md:items-center">
-            <div className="flex gap-4 sm:gap-8 items-start sm:items-center">
-              <WarningIcon />
-              <div>
-                <div className="text-status-red font-heading4">
-                  워크스페이스 삭제
-                </div>
-                <p className="font-body1 text-text-auth-sub mt-2">
-                  워크스페이스를 삭제하면 모든 데이터가 영구적으로 삭제됩니다.
-                  <br />이 작업은 되돌릴 수 없습니다.
-                </p>
-              </div>
-            </div>
-            <Button
-              variant="dangerSoft"
-              size="big"
-              aria-label="워크스페이스 삭제 버튼"
-              onClick={openDeleteModal}
-              disabled={saving || deleting}
-            >
-              워크스페이스 삭제
-            </Button>
+          <div className="w-full flex flex-col">
+            <ControlBox
+              title="워크스페이스 삭제"
+              description={`워크스페이스를 삭제하면 모든 데이터가 영구적으로 삭제됩니다.\n 이 작업은 되돌릴 수 없습니다`}
+              buttonText="워크스페이스 삭제"
+              onButtonClick={openDeleteModal}
+              className="w-full mt-12"
+              containerClassName="bg-status-red/10 border-status-red"
+              titleClassName="text-status-red"
+              descriptionClassName="text-text-auth-sub"
+              buttonVariant="dangerSoft"
+              buttonSize="big"
+              buttonClassName="px-8 !rounded-component-md"
+              buttonDisabled={saving || deleting}
+              leadingSlot={<WarningIcon />}
+            />
           </div>
           <Modal
             isOpen={deleteOpen}