Merge pull request #11 from blaybus-hackathon/feat/admin-caregiver-pages

feat: axios

Author: bigmooon

package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-navigation-menu": "^1.2.5",
     "@radix-ui/react-slot": "^1.1.2",
     "@tailwindcss/vite": "^4.0.6",
+    "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",

src/Test.jsx

@@ -1,13 +1,10 @@
-
+import ApiRequestComponent from "./api/apiRequest";
 
 export default function Test() {
   return (
-    <div className="max-w-md mx-auto flex flex-col items-center">
-
-
-
+    <div>
+      <ApiRequestComponent />
     </div>
   );
 }
 
-

src/api/apiRequest.jsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import api from "../api"; // axios 인스턴스 가져오기
+
+const ApiRequestComponent = () => {
+  const [endpoint, setEndpoint] = useState("");
+  const [data, setData] = useState("");
+  const [response, setResponse] = useState(null);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const res = await api.post(`/api/${endpoint}`, { data });
+      setResponse(res.data);
+      console.log("서버 응답:", res.data);
+    } catch (error) {
+      console.error("API 요청 오류:", error);
+      setResponse(null);
+    }
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label>엔드포인트:</label>
+          <input
+            type="text"
+            value={endpoint}
+            onChange={(e) => setEndpoint(e.target.value)}
+            placeholder="엔드포인트 입력"
+          />
+        </div>
+        <div>
+          <label>데이터:</label>
+          <input
+            type="text"
+            value={data}
+            onChange={(e) => setData(e.target.value)}
+            placeholder="보낼 데이터 입력"
+          />
+        </div>
+        <button type="submit">전송</button>
+      </form>
+      {response && <div>응답: {response}</div>}
+    </div>
+  );
+};
+
+export default ApiRequestComponent;

src/api/index.js

@@ -0,0 +1,23 @@
+import axios from "axios";
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL; // VITE 환경변수 사용
+
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// 예제 API 호출 함수
+export const fetchData = async ({ endpoint }) => {
+  try {
+    const response = await api.get(`/api/${endpoint}`);
+    return response.data;
+  } catch (error) {
+    console.error("API 요청 오류:", error);
+    throw error;
+  }
+};
+
+export default api;