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 ( +
+
+ + setUrl(e.target.value)} + className="w-full p-2 border rounded" + placeholder="/api 이하의 엔드포인트를 전부 입력해주세요(예: /admin-support/releases?page=0&perPage=10)" + required + /> +
+
+ + +
+
+ +