✨ Feat: API 테스트 폼 컴포넌트 추가 (#57)

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

* chore: GET 요청 제외 DB 반영 경고 표시 추가

* chore: GNB 한글로 변경

Author: ahyeon-jung

src/components/GNB/Header.tsx

@@ -20,12 +20,11 @@ const Header = () => {
         <div className="rounded-[8px] overflow-hidden">
           <img src={logo} alt="링크드아웃 로고" width={40} />
         </div>
-        <h1 className="text-white text-2xl">Linked Out Admin Page</h1>
+        <h1 className="text-white text-2xl">링크드아웃 관리자 페이지</h1>
       </div>
       <div className="flex gap-[15px] items-center">
         {isLogin ? (
           <>
-            <div className="text-white">My Page</div>
             <Button
               className="text-white"
               variant="ghost"
@@ -35,19 +34,19 @@ const Header = () => {
                 navigate(`/auth/${AuthPaths.LOGIN}`);
               }}
             >
-              Logout
+              로그아웃
             </Button>
           </>
         ) : (
           <>
             <Link to={`/auth/${AuthPaths.LOGIN}`}>
               <Button className="text-white" variant="ghost">
-                LOGIN
+                로그인
               </Button>
             </Link>
             <Link to={`/auth/${AuthPaths.REGISTER}`}>
               <Button className="text-white" variant="ghost">
-                REGISTER
+                회원가입
               </Button>
             </Link>
           </>

src/pages/monitoring/ApiTestForm.tsx

@@ -0,0 +1,90 @@
+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();
+
+    if (method !== "GET") {
+      const confirmChange = window.confirm(
+        "⚠️ 이 요청은 실제 DB에 영향을 줄 수 있습니다. 진행하시겠습니까?"
+      );
+      if (!confirmChange) {
+        console.log("%c요청이 취소되었습니다.", "color: orange;");
+        return;
+      }
+    }
+
+    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>
   );
 }