feat(apitest.jsx): add new backend endpoint for testing with code ref…

…actor
LikeLionHGU · Jul 29, 2024 · f92facd · f92facd
1 parent 1f99227
commit f92facd
Showing 1 changed file with 30 additions and 17 deletions.
diff --git a/src/pages/ApiTest.jsx b/src/pages/ApiTest.jsx
@@ -35,6 +35,15 @@ const presets = [
     description: "{userID} 정보 조회",
     body: {},
   },
+  {
+    method: "PATCH",
+    endpoint: "/userDetail/update",
+    description: "키 몸무게 수정",
+    body: {
+      height: "190.3",
+      weight: "20.2",
+    },
+  },
   {
     method: "POST",
     endpoint: "/userRecord/add",
@@ -69,6 +78,12 @@ const presets = [
   },
 ];
 
+const requestColor = {
+  GET: "#a6ffac",
+  POST: "#ffd5a6",
+  PATCH: "#ffa6ed",
+};
+
 function ApiTest() {
   const [targetEndPoint, setTargetEndPoint] = useState("/userDetail/get");
   const [requestType, setRequestType] = useState("GET");
@@ -93,7 +108,9 @@ function ApiTest() {
         requestType !== "GET"
           ? JSON.stringify(JSON.parse(requestData))
           : undefined,
-    }).then((data) => data.json().then((json) => setResponseData(json)));
+    })
+      .then((data) => data.json().then((json) => setResponseData(json)))
+      .catch((e) => setResponseData(e.message));
   };
   return (
     <Container>
@@ -124,20 +141,17 @@ function ApiTest() {
         />
         <h3>Method</h3>
         <div>
-          <input
-            type="radio"
-            id="type-get"
-            checked={requestType === "GET"}
-            onClick={() => setRequestType("GET")}
-          />
-          <label for="type-get">GET</label>
-          <input
-            type="radio"
-            id="type-post"
-            checked={requestType === "POST"}
-            onClick={() => setRequestType("POST")}
-          />
-          <label for="type-post">POST</label>
+          {Object.keys(requestColor).map((rtype) => (
+            <>
+              <input
+                type="radio"
+                id={`type-${rtype}`}
+                checked={requestType === rtype}
+                onClick={() => setRequestType(rtype)}
+              />
+              <label for={`type-${rtype}`}>{rtype}</label>
+            </>
+          ))}
         </div>
         <textarea
           value={requestData}
@@ -154,8 +168,7 @@ function ApiTest() {
           >
             <span
               style={{
-                backgroundColor:
-                  preset.method === "GET" ? "#a6ffac" : "#ffd5a6",
+                backgroundColor: requestColor[preset.method],
               }}
             >
               [{preset.method}]