diff --git a/src/components/common/controlbox/ControlBox.stories.tsx b/src/components/common/controlbox/ControlBox.stories.tsx new file mode 100644 index 00000000..0275d23f --- /dev/null +++ b/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 = { + title: "Common/ControlBox", + component: ControlBox, + parameters: { layout: "padded" }, +}; + +export default meta; +type TControlBoxStory = StoryObj; + +export const Default: TControlBoxStory = { + args: { + title: "제목", + description: "설명", + buttonText: "버튼", + onButtonClick: () => console.log("click"), + className: "w-full", + }, +}; diff --git a/src/components/common/controlbox/ControlBox.tsx b/src/components/common/controlbox/ControlBox.tsx new file mode 100644 index 00000000..c0b92b3f --- /dev/null +++ b/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 { + title: string; + description: string; + buttonText: string; + onButtonClick: () => void; +} + +export default function ControlBox({ + title, + description, + buttonText, + onButtonClick, + className, + ...rest +}: IControlBoxProps) { + return ( +
+
+

{title}

+

+ {description} +

+
+ +
+ ); +} diff --git a/src/pages/ads/list/AdsListPage.tsx b/src/pages/ads/list/AdsListPage.tsx index 222589a6..89ce2278 100644 --- a/src/pages/ads/list/AdsListPage.tsx +++ b/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 ( -
-
-

광고 운영 관리

-

- 연결된 캠페인 및 광고 소재의 상세 운영 설정을 확인하고 제어할 수 - 있습니다. -

-
- {/* 테이블 */} -
- +
+
+
+
+

광고 운영 관리

+

+ 연결된 캠페인 및 광고 소재의 상세 운영 설정을 확인하고 제어할 수 + 있습니다. +

+
+ {/* 테이블 */} +
+ +
+ {/* 하단 배너 */} +
+ console.log("페이지 이동")} + className="w-full" + /> +
+
- {/* 하단 배너 */} +
);