From 81cf9620ffc5cd274d2554b043d773fa9f4a0209 Mon Sep 17 00:00:00 2001
From: a-honey <jungahyeon0512@khu.ac.kr>
Date: Sat, 4 Jan 2025 21:16:21 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=88=ED=84=B0?=
 =?UTF-8?q?=EB=A7=81=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=82=B4=20API=20?=
 =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/monitoring/ApiTestForm.tsx | 80 ++++++++++++++++++++++++++++
 src/pages/monitoring/index.tsx       |  3 ++
 2 files changed, 83 insertions(+)
 create mode 100644 src/pages/monitoring/ApiTestForm.tsx

diff --git a/src/pages/monitoring/ApiTestForm.tsx b/src/pages/monitoring/ApiTestForm.tsx
new file mode 100644
index 0000000..67d8e32
--- /dev/null
+++ b/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>
+  );
+}
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() {
           <WebVitalItem key={key} label={key} value={value} />
         ))}
       </ul>
+      <h4 className="text-2xl">API 테스트: 결과 콘솔 확인(F12)</h4>
+      <ApiTestForm />
     </div>
   );
 }

From 47762104b22f04c8b81e840f60b0a54b1e9f9d82 Mon Sep 17 00:00:00 2001
From: a-honey <jungahyeon0512@khu.ac.kr>
Date: Sat, 4 Jan 2025 21:17:08 +0900
Subject: [PATCH 2/3] =?UTF-8?q?chore:=20GET=20=EC=9A=94=EC=B2=AD=20?=
 =?UTF-8?q?=EC=A0=9C=EC=99=B8=20DB=20=EB=B0=98=EC=98=81=20=EA=B2=BD?=
 =?UTF-8?q?=EA=B3=A0=20=ED=91=9C=EC=8B=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/monitoring/ApiTestForm.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/pages/monitoring/ApiTestForm.tsx b/src/pages/monitoring/ApiTestForm.tsx
index 67d8e32..783d7c9 100644
--- a/src/pages/monitoring/ApiTestForm.tsx
+++ b/src/pages/monitoring/ApiTestForm.tsx
@@ -13,6 +13,16 @@ export default function ApiTestForm() {
   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;
 

From a9c3c561c89894f2acb95d0ca68c9f787cce42b4 Mon Sep 17 00:00:00 2001
From: a-honey <jungahyeon0512@khu.ac.kr>
Date: Sat, 4 Jan 2025 21:24:51 +0900
Subject: [PATCH 3/3] =?UTF-8?q?chore:=20GNB=20=ED=95=9C=EA=B8=80=EB=A1=9C?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GNB/Header.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

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 = () => {
         <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>
           </>