From cebc1164bb31a5904f5467a884114d71b847dd2b Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Wed, 4 Mar 2026 23:24:04 +0900
Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20ControlBox=20=EC=BB=A4=EC=8A=A4?=
 =?UTF-8?q?=ED=84=B0=EB=A7=88=EC=9D=B4=EC=A7=95,=20WorkspaceSetting=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=EC=98=81=EC=97=AD=EC=97=90=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/controlbox/ControlBox.tsx          | 72 +++++++++++++++----
 src/pages/workspace/WorkspaceSetting.tsx      | 38 +++++-----
 2 files changed, 73 insertions(+), 37 deletions(-)

diff --git a/src/components/common/controlbox/ControlBox.tsx b/src/components/common/controlbox/ControlBox.tsx
index c0b92b3f..2cbd29a0 100644
--- a/src/components/common/controlbox/ControlBox.tsx
+++ b/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,15 @@ 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;
+  buttonSlot?: ReactNode;
+  leadingSlot?: ReactNode;
+  contentClassName?: string;
 }
 
 export default function ControlBox({
@@ -16,30 +26,62 @@ export default function ControlBox({
   buttonText,
   onButtonClick,
   className,
+  containerClassName,
+  titleClassName,
+  descriptionClassName,
+  buttonVariant = "primary",
+  buttonSize = "small",
+  buttonClassName,
+  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}
+          className={twMerge(
+            "shrink-0 !h-button-big px-8 !rounded-component-md",
+            buttonClassName,
+          )}
+        >
+          {buttonText}
+        </Button>
+      )}
     </div>
   );
 }
diff --git a/src/pages/workspace/WorkspaceSetting.tsx b/src/pages/workspace/WorkspaceSetting.tsx
index 22e89818..3eb83ae1 100644
--- a/src/pages/workspace/WorkspaceSetting.tsx
+++ b/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,21 @@ 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"
+              leadingSlot={<WarningIcon />}
+            />
           </div>
           <Modal
             isOpen={deleteOpen}

From d9980c50dd3656d68ac866fb7e7746ea8735afcf Mon Sep 17 00:00:00 2001
From: JAESEON PARK <ddorri83@naver.com>
Date: Wed, 4 Mar 2026 23:41:45 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EC=BD=94=EB=93=9C=EB=9E=98=EB=B9=97?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/controlbox/ControlBox.tsx | 5 ++++-
 src/pages/workspace/WorkspaceSetting.tsx        | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/common/controlbox/ControlBox.tsx b/src/components/common/controlbox/ControlBox.tsx
index 2cbd29a0..ced102b7 100644
--- a/src/components/common/controlbox/ControlBox.tsx
+++ b/src/components/common/controlbox/ControlBox.tsx
@@ -15,6 +15,7 @@ interface IControlBoxProps extends HTMLAttributes<HTMLDivElement> {
   buttonVariant?: React.ComponentProps<typeof Button>["variant"];
   buttonSize?: React.ComponentProps<typeof Button>["size"];
   buttonClassName?: string;
+  buttonDisabled?: boolean;
   buttonSlot?: ReactNode;
   leadingSlot?: ReactNode;
   contentClassName?: string;
@@ -32,6 +33,7 @@ export default function ControlBox({
   buttonVariant = "primary",
   buttonSize = "small",
   buttonClassName,
+  buttonDisabled,
   buttonSlot,
   leadingSlot,
   contentClassName,
@@ -74,8 +76,9 @@ export default function ControlBox({
           variant={buttonVariant}
           size={buttonSize}
           onClick={onButtonClick}
+          disabled={buttonDisabled}
           className={twMerge(
-            "shrink-0 !h-button-big px-8 !rounded-component-md",
+            "shrink-0 px-8 !rounded-component-md",
             buttonClassName,
           )}
         >
diff --git a/src/pages/workspace/WorkspaceSetting.tsx b/src/pages/workspace/WorkspaceSetting.tsx
index 3eb83ae1..c978b0c9 100644
--- a/src/pages/workspace/WorkspaceSetting.tsx
+++ b/src/pages/workspace/WorkspaceSetting.tsx
@@ -225,6 +225,7 @@ export default function WorkspaceSetting() {
               buttonVariant="dangerSoft"
               buttonSize="big"
               buttonClassName="px-8 !rounded-component-md"
+              buttonDisabled={saving || deleting}
               leadingSlot={<WarningIcon />}
             />
           </div>