개발자센터 api 문서 예시 요청/응답 값 보여주기 (#411)

Co-authored-by: Cosmo Shin (신의하) <[email protected]>

package.json

@@ -62,6 +62,7 @@
 		"eslint-plugin-react": "^7.34.1",
 		"eslint-plugin-simple-import-sort": "^12.0.0",
 		"fuse.js": "^7.0.0",
+		"httpsnippet-lite": "^3.0.5",
 		"js-yaml": "^4.1.0",
 		"json5": "^2.2.3",
 		"lodash-es": "^4.17.21",

src/layouts/rest-api/editor/RequestJsonEditor.tsx

@@ -120,10 +120,11 @@ export function getInitialJsonText(
 }
 
 function getDefaultValue(_schema: unknown, param: Parameter): unknown {
-  const type = param.type || "object";
+  if (param.example) return param.example;
+  const type = param.type ? param.type : param.schema?.type || "object";
   if (type === "boolean") return false;
   if (type === "number" || type === "integer") return 0;
-  if (type === "string") return "";
+  if (type === "string") return param.name;
   if (type === "object") return {};
   if (type === "array") return [];
   return null;

src/layouts/rest-api/endpoint/playground/try/Req.tsx

@@ -1,4 +1,10 @@
-import { type Signal, signal, useSignal } from "@preact/signals";
+import {
+  type Signal,
+  signal,
+  useSignal,
+  useSignalEffect,
+} from "@preact/signals";
+import { type HarRequest } from "httpsnippet-lite";
 import json5 from "json5";
 import { useMemo } from "preact/hooks";
 import { encode as encodeQs } from "querystring";
@@ -23,13 +29,15 @@ export interface ReqProps {
   schema: unknown;
   endpoint: Endpoint;
   operation: Operation;
+  harRequestSignal: Signal<HarRequest | undefined>;
   execute: (fn: () => Promise<Res>) => void;
 }
 export default function Req({
   apiHost,
   schema,
   endpoint,
   operation,
+  harRequestSignal,
   execute,
 }: ReqProps) {
   const { path, method } = endpoint;
@@ -39,6 +47,17 @@ export default function Req({
   const reqPathParams = useReqParams(schema, operation, "path");
   const reqQueryParams = useReqParams(schema, operation, "query");
   const reqBodyParams = useReqParams(schema, operation, "body");
+  useSignalEffect(() => {
+    harRequestSignal.value = createHarRequest(
+      apiHost,
+      path,
+      method,
+      reqHeaderSignal,
+      reqPathParams,
+      reqQueryParams,
+      reqBodyParams,
+    );
+  });
   return (
     <Card
       title={
@@ -206,3 +225,34 @@ async function responseToRes(res: Response): Promise<Res> {
   const body = (await res.json()) as unknown;
   return { status, headers, body };
 }
+
+function createHarRequest(
+  apiHost: string,
+  path: string,
+  method: string,
+  reqHeaderSignal: Signal<KvList>,
+  reqPathParams: ReqParams,
+  reqQueryParams: ReqParams,
+  reqBodyParams: ReqParams,
+): HarRequest {
+  const headers = kvListToObject(reqHeaderSignal.value);
+  const reqPath = reqPathParams.parseJson();
+  const reqQuery = reqQueryParams.parseJson();
+  const reqBody = reqBodyParams.parseJson();
+  return {
+    url: createUrl(apiHost, path, reqPath, reqQuery).toString(),
+    method,
+    headers: Object.entries(headers).map(([name, value]) => ({ name, value })),
+    cookies: [],
+    httpVersion: "HTTP/1.1",
+    queryString: Object.entries(reqQuery as Record<string, string>).map(
+      ([name, value]) => ({ name, value }),
+    ),
+    postData: {
+      mimeType: "application/json",
+      text: JSON.stringify(reqBody),
+    },
+    bodySize: -1,
+    headersSize: -1,
+  } satisfies HarRequest;
+}