diff --git a/src/components/GNB/Header.tsx b/src/components/GNB/Header.tsx
index 0dd5106..3f748a6 100644
--- a/src/components/GNB/Header.tsx
+++ b/src/components/GNB/Header.tsx
@@ -20,12 +20,11 @@ const Header = () => {
- Linked Out Admin Page
+ 링크드아웃 관리자 페이지
{isLogin ? (
<>
-
My Page
>
) : (
<>
>
diff --git a/src/pages/monitoring/ApiTestForm.tsx b/src/pages/monitoring/ApiTestForm.tsx
new file mode 100644
index 0000000..783d7c9
--- /dev/null
+++ b/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
("GET");
+ const [body, setBody] = useState("{}");
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ 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 (
+
+ );
+}
diff --git a/src/pages/monitoring/index.tsx b/src/pages/monitoring/index.tsx
index 01b733a..a0f05a3 100644
--- a/src/pages/monitoring/index.tsx
+++ b/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() {
))}
+ API 테스트: 결과 콘솔 확인(F12)
+
);
}