+ {filteredCategories.map((category) => (
+
+ {/* 카테고리 */}
+
+ {category.name}
+
+
+ {/* 버튼 */}
+
+
+
+
+
+ ))}
+
+ {alertOpen && (
+
{
+ onConfirmAction();
+ setAlertOpen(false);
+ }}
+ onCancel={() => setAlertOpen(false)}
+ />
+ )}
+
+ );
+}
diff --git a/src/components/TopNavbar.tsx b/src/components/TopNavbar.tsx
new file mode 100644
index 0000000..a90203f
--- /dev/null
+++ b/src/components/TopNavbar.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useAuthStore } from 'src/store/useAuthStore';
+
+const TopNavbar = () => {
+ const { isLoggedIn, user, logout } = useAuthStore();
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => setMounted(true), []);
+ if (!mounted) return
+ {candidates.map((name) => {
+ const isSelected = selected === name;
+
+ return (
+
onSelect(name)}
+ className={`border-foreground flex cursor-pointer items-center justify-center rounded-lg border-2 p-4 text-center text-lg font-medium ${isSelected ? 'bg-yellow-400' : ''}`}
+ >
+ {name}
+
+ );
+ })}
+
+ );
+};
+
+export default VoteSelector;
diff --git a/src/constants/partCategories.ts b/src/constants/partCategories.ts
new file mode 100644
index 0000000..95595d1
--- /dev/null
+++ b/src/constants/partCategories.ts
@@ -0,0 +1,11 @@
+export const partNames: Record