[Feature/#70] ControlBox 구현 및 페이지 적용

src/components/common/controlbox/ControlBox.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import ControlBox from "./ControlBox";
+
+const meta: Meta<typeof ControlBox> = {
+  title: "Common/ControlBox",
+  component: ControlBox,
+  parameters: { layout: "padded" },
+};
+
+export default meta;
+type TControlBoxStory = StoryObj<typeof ControlBox>;
+
+export const Default: TControlBoxStory = {
+  args: {
+    title: "제목",
+    description: "설명",
+    buttonText: "버튼",
+    onButtonClick: () => console.log("click"),
+    className: "w-full",
+  },
+};

src/components/common/controlbox/ControlBox.tsx

@@ -0,0 +1,45 @@
+import type { HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+import Button from "../button/Button";
+
+interface IControlBoxProps extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description: string;
+  buttonText: string;
+  onButtonClick: () => void;
+}
+
+export default function ControlBox({
+  title,
+  description,
+  buttonText,
+  onButtonClick,
+  className,
+  ...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",
+        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"
+      >
+        {buttonText}
+      </Button>
+    </div>
+  );
+}

src/pages/ads/list/AdsListPage.tsx

@@ -1,20 +1,35 @@
 import CampaignTable from "@/components/ads/CampaignTable";
+import ControlBox from "@/components/common/controlbox/ControlBox";
 
 export default function AdsListPage() {
   return (
-    <section className="flex flex-col gap-16 bg-white rounded-component-lg py-15 px-25 min-h-[90vh]">
-      <header className="w-full flex flex-col">
-        <h1 className="font-heading2 text-text-main">광고 운영 관리</h1>
-        <p className="font-body2 text-text-placeholder mt-3">
-          연결된 캠페인 및 광고 소재의 상세 운영 설정을 확인하고 제어할 수
-          있습니다.
-        </p>
-      </header>
-      {/* 테이블 */}
-      <div className="w-full flex flex-col">
-        <CampaignTable />
+    <section className="flex flex-col overflow-hidden bg-white rounded-component-lg min-h-[90vh]">
+      <div className="flex-1 overflow-x-auto py-15 px-10 md:px-18 lg:px-25">
+        <div className="flex flex-col gap-16 min-w-180">
+          <header className="w-full flex flex-col">
+            <h1 className="font-heading2 text-text-main">광고 운영 관리</h1>
+            <p className="font-body2 text-text-placeholder mt-3">
+              연결된 캠페인 및 광고 소재의 상세 운영 설정을 확인하고 제어할 수
+              있습니다.
+            </p>
+          </header>
+          {/* 테이블 */}
+          <div className="w-full flex flex-col">
+            <CampaignTable />
+          </div>
+          {/* 하단 배너 */}
+          <div className="w-full flex flex-col">
+            <ControlBox
+              title="캠페인 통합 운영 제어"
+              description={`여러 광고 플랫폼의 캠페인을 하나로 묶어 성과와 운영 상태를 통합 관리합니다.\n광고 플랫폼 로그인 후 캠페인을 불러와 연결합니다.`}
+              buttonText="캠페인 통합 연동하기"
+              onButtonClick={() => console.log("페이지 이동")}
+              className="w-full"
+            />
+          </div>
+        </div>
       </div>
-      {/* 하단 배너 */}
+
       <div />
     </section>
   );