refactor: change structure

src/app/components/FetchApi.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { axiosInstance } from "@/app/lib/axios";
+import { useRef } from "react";
+
+export const FetchApi = () => {
+	const listRef = useRef<HTMLUListElement>(null);
+
+	const handleFetch = async () => {
+		const response = await axiosInstance.get<{
+			message: string;
+		}>("/ping");
+
+		const li = document.createElement("li");
+		li.textContent = response.data.message;
+		listRef.current?.appendChild(li);
+	};
+
+	return (
+		<div>
+			<button
+				className="text-white px-2 py-2 bg-green-500 rounded-md"
+				onClick={handleFetch}
+			>
+				Fetch API
+			</button>
+			<ul ref={listRef}></ul>
+		</div>
+	);
+};

src/app/page.tsx

@@ -1,9 +1,11 @@
 import Header from "./components/Header";
+import { FetchApi } from "./components/FetchApi";
 
 const HomePage = () => {
 	return (
 		<>
 			<Header />
+			<FetchApi />
 		</>
 	);
 };