API 문서 Try Request 헤더 수정 시 오류 고침

portone-io · Nov 4, 2024 · 1149055 · 1149055
1 parent b2932b9
commit 1149055
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 22 deletions.
diff --git a/src/layouts/rest-api/editor/RequestHeaderEditor.tsx b/src/layouts/rest-api/editor/RequestHeaderEditor.tsx
@@ -1,22 +1,20 @@
-import { For } from "solid-js";
+import { createSignal, For, type Signal } from "solid-js";
 
 export interface Kv {
-  key: string;
-  value: string;
+  key: Signal<string>;
+  value: Signal<string>;
 }
 export type KvList = Kv[];
 export interface RequestHeaderEditorProps {
   reqHeader: KvList;
   onChange: (reqHeader: KvList) => void;
 }
 export default function RequestHeaderEditor(props: RequestHeaderEditorProps) {
-  function updateReqHeader(index: number, kv: Partial<Kv>) {
-    const newReqHeader = props.reqHeader.slice();
-    newReqHeader[index] = { ...newReqHeader[index]!, ...kv };
-    props.onChange(newReqHeader);
-  }
   function addReqHeader() {
-    props.onChange([...props.reqHeader, { key: "", value: "" }]);
+    props.onChange([
+      ...props.reqHeader,
+      { key: createSignal(""), value: createSignal("") },
+    ]);
   }
   function delReqHeader(index: number) {
     const newReqHeader = props.reqHeader.slice();
@@ -31,21 +29,19 @@ export default function RequestHeaderEditor(props: RequestHeaderEditorProps) {
         <div />
       </div>
       <For each={props.reqHeader}>
-        {(header, index) => (
+        {({ key: [key, setKey], value: [value, setValue] }, index) => (
           <div class="grid grid-cols-[1fr_1fr_1.5rem] gap-1 text-sm">
             <input
               class="w-full border border-slate-2 px-2 py-1"
-              value={header.key}
-              onInput={(e) =>
-                updateReqHeader(index(), { key: e.currentTarget.value })
-              }
+              value={key()}
+              onInput={(e) => {
+                setKey(e.currentTarget.value);
+              }}
             />
             <input
               class="w-full border border-slate-2 px-2 py-1"
-              value={header.value}
-              onInput={(e) =>
-                updateReqHeader(index(), { value: e.currentTarget.value })
-              }
+              value={value()}
+              onInput={(e) => setValue(e.currentTarget.value)}
             />
             <button
               class="inline-flex items-center text-lg text-slate-3 hover:text-slate-7"
@@ -68,10 +64,13 @@ export default function RequestHeaderEditor(props: RequestHeaderEditorProps) {
 
 export function kvListToObject(kvList: KvList): Record<string, string> {
   const result: Record<string, string> = {};
-  for (const { key, value } of kvList) {
-    const _key = key.trim();
+  for (const {
+    key: [key],
+    value: [value],
+  } of kvList) {
+    const _key = key().trim();
     if (!_key) continue;
-    result[_key] = value;
+    result[_key] = value();
   }
   return result;
 }
diff --git a/src/layouts/rest-api/endpoint/playground/try/Req.tsx b/src/layouts/rest-api/endpoint/playground/try/Req.tsx
@@ -37,7 +37,10 @@ export interface ReqProps {
 }
 export default function Req(props: ReqProps) {
   const [reqHeader, setReqHeader] = createSignal<KvList>([
-    { key: "Content-Type", value: "application/json" },
+    {
+      key: createSignal("Content-Type"),
+      value: createSignal("application/json"),
+    },
   ]);
   const isQueryOrBody = createMemo(() =>
     isQueryOrBodyOperation(props.operation),