feat: 모니터링 페이지 내 API 테스트 기능 추가

src/pages/monitoring/ApiTestForm.tsx

@@ -0,0 +1,80 @@
+import { Button } from "../../components/ui/button";
+import { Textarea } from "../../components/ui/textarea";
+import fetchData from "../../api/fetchData";
+import { useState } from "react";
+
+type MethodType = "GET" | "POST" | "PUT" | "DELETE";
+
+export default function ApiTestForm() {
+  const [url, setUrl] = useState("");
+  const [method, setMethod] = useState<MethodType>("GET");
+  const [body, setBody] = useState("{}");
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    try {
+      const parsedBody = body ? JSON.parse(body) : undefined;
+
+      console.log(
+        "%cAPI 요청 정보:\n",
+        "background: #006980; color: white; padding: 4px; border-radius: 4px;",
+        { url, method, parsedBody }
+      );
+      const res = await fetchData({
+        url,
+        method,
+        body: parsedBody,
+      });
+
+      console.log(
+        "%cAPI 요청 결과:\n",
+        "background: green; color: white; padding: 4px; border-radius: 4px;",
+        res
+      );
+    } catch (err) {
+      console.log("에러 발생:", err);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-[10px]">
+      <div>
+        <label className="block font-semibold mb-2">URL</label>
+        <input
+          type="text"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          className="w-full p-2 border rounded"
+          placeholder="/api 이하의 엔드포인트를 전부 입력해주세요(예: /admin-support/releases?page=0&perPage=10)"
+          required
+        />
+      </div>
+      <div>
+        <label className="block font-semibold mb-2">HTTP Method</label>
+        <select
+          value={method}
+          onChange={(e) => setMethod(e.target.value as MethodType)}
+          className="w-full p-2 border rounded"
+        >
+          <option value="GET">GET</option>
+          <option value="POST">POST</option>
+          <option value="PUT">PUT</option>
+          <option value="DELETE">DELETE</option>
+        </select>
+      </div>
+      <div>
+        <label className="block font-semibold mb-2">Body (JSON)</label>
+        <Textarea
+          value={body}
+          onChange={(e) => setBody(e.target.value)}
+          className="w-full p-2 border rounded"
+          rows={5}
+          placeholder='json 형식으로 입력해주세요 {"key": "value"}'
+          disabled={method === "GET" || method === "DELETE"}
+        />
+      </div>
+      <Button type="submit">API 보내기</Button>
+    </form>
+  );
+}

src/pages/monitoring/index.tsx

@@ -1,6 +1,7 @@
 import { Metric, onCLS, onFCP, onINP, onLCP, onTTFB } from "web-vitals";
 import { useEffect, useState } from "react";
 
+import ApiTestForm from "./ApiTestForm";
 import ServerStatus from "./ServerStatus";
 import { cn } from "../../lib/utils";
 
@@ -47,6 +48,8 @@ export default function Monitoring() {
           <WebVitalItem key={key} label={key} value={value} />
         ))}
       </ul>
+      <h4 className="text-2xl">API 테스트: 결과 콘솔 확인(F12)</h4>
+      <ApiTestForm />
     </div>
   );
 }