From 14a7487c2e91186a8866b423b922da9ae0714c9b Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sat, 13 Jul 2024 10:30:11 +0900
Subject: [PATCH] feat(docs): apply playground to Dialog

---
 src/docs/components/Dialog.mdx                | 16 ++---------
 .../components/DialogBlocks/Playground.tsx    | 27 +++++++++++++++++++
 src/docs/components/DialogBlocks/Preview.tsx  | 16 ++++++++---
 3 files changed, 42 insertions(+), 17 deletions(-)
 create mode 100644 src/docs/components/DialogBlocks/Playground.tsx

diff --git a/src/docs/components/Dialog.mdx b/src/docs/components/Dialog.mdx
index 4354c82..c88bf70 100644
--- a/src/docs/components/Dialog.mdx
+++ b/src/docs/components/Dialog.mdx
@@ -8,25 +8,13 @@ import {
 } from "@/components/LoadedCode";
 import { DialogDemo } from "./DialogBlocks/Preview";
 import Examples from "./DialogBlocks/Examples";
+import Playground from "./DialogBlocks/Playground";
 
 # Dialog
 
 A modal window that prompts the user to take an action or provides critical information.
 
-<TabProvider defaultName="preview">
-  <TabList>
-    <TabTrigger name="preview">Preview</TabTrigger>
-    <TabTrigger name="code">Code</TabTrigger>
-  </TabList>
-  <TabContent name="preview">
-    <Story layout="centered">
-      <DialogDemo />
-    </Story>
-  </TabContent>
-  <TabContent name="code">
-    <LoadedCode from={GITHUB_COMP_PREVIEW("Dialog")} />
-  </TabContent>
-</TabProvider>
+<Playground />
 
 ## Installation
 
diff --git a/src/docs/components/DialogBlocks/Playground.tsx b/src/docs/components/DialogBlocks/Playground.tsx
new file mode 100644
index 0000000..4a454e3
--- /dev/null
+++ b/src/docs/components/DialogBlocks/Playground.tsx
@@ -0,0 +1,27 @@
+import type { TEMPLATE } from "@/components/LoadedCode";
+import { usePgProps } from "@/components/PgHooks";
+import { PlaygroundLayout } from "@/components/Playground";
+import { DialogDemo, type DialogDemoPlaygroundProps } from "./Preview";
+
+interface TemplateProps extends TEMPLATE, DialogDemoPlaygroundProps {}
+
+export default function DialogPlayground() {
+  const [props, control] = usePgProps<TemplateProps>({
+    DialogOverlayProps: {
+      closeOnClick: {
+        type: "boolean",
+        value: false,
+      },
+    },
+  });
+
+  return (
+    <PlaygroundLayout
+      compName="Dialog"
+      control={control}
+      props={props}
+    >
+      <DialogDemo {...props} />
+    </PlaygroundLayout>
+  );
+}
diff --git a/src/docs/components/DialogBlocks/Preview.tsx b/src/docs/components/DialogBlocks/Preview.tsx
index dd606bb..121246d 100644
--- a/src/docs/components/DialogBlocks/Preview.tsx
+++ b/src/docs/components/DialogBlocks/Preview.tsx
@@ -10,15 +10,25 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@pswui/Dialog";
-
+/* remove */
+export interface DialogDemoPlaygroundProps {
+  DialogOverlayProps: {
+    closeOnClick: boolean;
+  };
+}
+/* end */
+/* replace */
+export function DialogDemo({ DialogOverlayProps }: DialogDemoPlaygroundProps) {
+  /* with
 export function DialogDemo() {
+  */
   return (
     <DialogRoot>
       <DialogTrigger>
         <Button preset="default">Open Dialog</Button>
       </DialogTrigger>
-      <DialogOverlay>
-        <DialogContent size={"fullMd"}>
+      <DialogOverlay closeOnClick={DialogOverlayProps.closeOnClick}>
+        <DialogContent>
           <DialogHeader>
             <DialogTitle>Dialog Title</DialogTitle>
             <DialogSubtitle>Dialog Subtitle</DialogSubtitle>