Try Request/Response 탭으로 분리

portone-io · Apr 18, 2024 · d32890d · d32890d
1 parent 2ea458b
commit d32890d
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 31 deletions.
diff --git a/src/layouts/rest-api/endpoint/playground/try/ResExample.tsx b/src/layouts/rest-api/endpoint/playground/try/ResExample.tsx
@@ -2,7 +2,7 @@ import JsonViewer from "../../../editor/JsonViewer";
 import Card from "../Card";
 
 export interface ResExampleProps {
-  example: { [key: string]: unknown };
+  example: { [key: string]: unknown } | undefined;
 }
 
 export default function ResExample({ example }: ResExampleProps) {

diff --git a/src/layouts/rest-api/endpoint/playground/try/Tabs.tsx b/src/layouts/rest-api/endpoint/playground/try/Tabs.tsx
@@ -1,4 +1,4 @@
-import { useSignal } from "@preact/signals";
+import { Signal, useSignal } from "@preact/signals";
 import type React from "preact/compat";
 
 export interface Tab<Id extends string> {
@@ -8,10 +8,13 @@ export interface Tab<Id extends string> {
 }
 export interface TabsProps<Id extends string> {
   tabs: (Tab<Id> | false | 0)[];
+  tabIdSignal?: Signal<string | Id>;
 }
-export function Tabs<Id extends string>({ tabs }: TabsProps<Id>) {
+export function Tabs<Id extends string>({ tabs, tabIdSignal }: TabsProps<Id>) {
   const _tabs = tabs.filter(Boolean);
-  const currTabIdSignal = useSignal(_tabs[0]?.id || "");
+  const currTabIdSignal = tabIdSignal
+    ? tabIdSignal
+    : useSignal(_tabs[0]?.id || "");
   const currTabId = currTabIdSignal.value;
   const currTab = _tabs.find((tab) => tab.id === currTabId);
   return (

diff --git a/src/layouts/rest-api/endpoint/playground/try/Try.tsx b/src/layouts/rest-api/endpoint/playground/try/Try.tsx
@@ -8,6 +8,7 @@ import Req from "./Req";
 import ReqSample from "./ReqSample";
 import ResComponent, { type Res } from "./Res";
 import ResExample from "./ResExample";
+import { Tabs } from "./Tabs";
 
 export interface TryProps {
   apiHost: string;
@@ -24,36 +25,57 @@ export default function Try(props: TryProps) {
   const harRequestSignal = useSignal<HarRequest | undefined>(undefined);
   const example =
     props.operation.responses?.["200"]?.content?.["application/json"]?.example;
+  const tabIdSignal = useSignal<"request" | "response">("request");
   return (
     <div
-      class={`grid flex-1 grid-rows-4 gap-3 ${
-        waiting ? "pointer-events-none opacity-50" : ""
-      }`}
+      class={`flex flex-col flex-1 gap-3 ${waiting ? "pointer-events-none opacity-50" : ""}`}
     >
-      <Req
-        {...props}
-        harRequestSignal={harRequestSignal}
-        execute={(fn) =>
-          void (async () => {
-            try {
-              waitingSignal.value = true;
-              resSignal.value = await fn();
-              errSignal.value = "";
-            } catch (err) {
-              errSignal.value = (err as Error).message;
-            } finally {
-              waitingSignal.value = false;
-            }
-          })()
-        }
-      />
-      {err ? (
-        <Err>{err}</Err>
-      ) : (
-        resSignal.value && <ResComponent resSignal={resSignal} />
-      )}
-      <ReqSample harRequestSignal={harRequestSignal} />
-      {example && <ResExample example={example} />}
+      <Tabs
+        tabIdSignal={tabIdSignal}
+        tabs={[
+          {
+            id: "request",
+            label: "request",
+            render: (key) => (
+              <div key={key} class="grid grid-rows-2 h-full gap-3">
+                <Req
+                  {...props}
+                  harRequestSignal={harRequestSignal}
+                  execute={(fn) =>
+                    void (async () => {
+                      try {
+                        waitingSignal.value = true;
+                        resSignal.value = await fn();
+                        errSignal.value = "";
+                      } catch (err) {
+                        errSignal.value = (err as Error).message;
+                      } finally {
+                        waitingSignal.value = false;
+                        tabIdSignal.value = "response";
+                      }
+                    })()
+                  }
+                />
+                <ReqSample harRequestSignal={harRequestSignal} />
+              </div>
+            ),
+          },
+          {
+            id: "response",
+            label: "response",
+            render: (key) => (
+              <div key={key} class="grid grid-rows-2 h-full gap-3">
+                {err ? (
+                  <Err>{err}</Err>
+                ) : (
+                  <ResComponent resSignal={resSignal} />
+                )}
+                <ResExample example={example} />
+              </div>
+            ),
+          },
+        ]}
+      ></Tabs>
     </div>
   );
 }