Feat: 폴더tag hover 기능, 선택된 tag 배경색 추가, tag 눌렀을 때 router.push 하는 기능 추가

components/FolderTag.tsx

@@ -1,22 +1,38 @@
-interface FolderData {
-  id: number;
-  createdAt: string;
-  name: string;
-  linkCount: number;
+import { useRouter } from "next/router";
+import { FolderData } from "@/types/folderTypes";
+
+interface FolderTagProps {
+  folderList: FolderData[];
 }
 
-const FolderTag = (list: FolderData[]) => {
-  const folderStyle = "py-[8px] px-[12px] border border-purple-100 rounded-md";
+const FolderTag = ({ folderList }: FolderTagProps) => {
+  const router = useRouter();
+  const { folder: currentFolderId } = router.query;
+
+  const folderStyle =
+    "py-[8px] px-[12px] border border-purple100 rounded-md hover:bg-purple100 hover:text-white";
+
+  const handleSubmit = (id: number) => {
+    router.push({
+      pathname: router.pathname,
+      query: { ...router.query, folder: id },
+    });
+  };
 
   return (
-    <div className="flex flex-wrap gap-[8px]">
-      <div className={folderStyle}>전체</div>
-      {list.map((folder) => (
-        <div key={folder.id} className={folderStyle}>
+    <ul className="flex flex-wrap gap-[8px]">
+      <button className={folderStyle}>전체</button>
+      {folderList.map((folder) => (
+        <button
+          key={folder.id}
+          className={`${folderStyle} ${folder.id === Number(currentFolderId) && "bg-purple100 text-white"}`}
+          type="submit"
+          onClick={() => handleSubmit(folder.id)}
+        >
           {folder.name}
-        </div>
+        </button>
       ))}
-    </div>
+    </ul>
   );
 };
 

types/folderTypes.ts

@@ -0,0 +1,6 @@
+export interface FolderData {
+  id: number;
+  createdAt: string;
+  name: string;
+  linkCount: number;
+}