add folders column

frontend/app/projects/[id]/folders/page.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { useEffect, useState } from "react";
+import Config from "@/config/config";
+const apiServer = Config.apiServer;
+import { Listbox, ListboxItem } from "@nextui-org/react";
+import { FolderIcon } from "@/components/icons";
+
+/**
+ * fetch folder records
+ *
+ * @param {string} url - API endpoint url
+ * @returns {Promise<Array>} - project record array
+ * @throws {Error}
+ */
+async function fetchFolders(url) {
+  try {
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error fetching data:", error.message);
+  }
+}
+
+export default function Page({ params }: { params: { id: string } }) {
+  const [folders, setFolders] = useState([]);
+  const url = `${apiServer}/folders?projectId=${params.id}`;
+
+  useEffect(() => {
+    async function fetchDataEffect() {
+      try {
+        const data = await fetchFolders(url);
+        setFolders(data);
+      } catch (error) {
+        console.error("Error in effect:", error.message);
+      }
+    }
+
+    fetchDataEffect();
+  }, []);
+
+  return (
+    <div className="w-64 min-h-screen border-r-1">
+      <Listbox aria-label="Listbox Variants">
+        {folders.map((folder, index) => (
+          <ListboxItem
+            key={index}
+            startContent={<FolderIcon size={16} className="text-gray-600" />}
+          >
+            {folder.name}
+            {/* {folder.detail}
+            {folder.projectId} */}
+          </ListboxItem>
+        ))}
+      </Listbox>
+    </div>
+  );
+}