feat: header 기능 추가 (#127)

* feat: 헤더 기능 추가

* chore: clubId 로 네이밍 변경

* chore: 함수 네이밍 변경

* chore: 함수 실행문 변경

* feat: 로그아웃 시 '/'로 redirect

components/ui/Header.tsx

@@ -2,21 +2,30 @@
 import { useGetLoginState, usePostLogout } from "@/lib/api/hooks/SessionHook";
 import { useGetMyInfo } from "@/lib/api/hooks/membersHook";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import React, { useState } from "react";
 import SImage from "./Image";
 import { Input } from "./Input";
 import { LinkText } from "./Text";
 
 const PersonalSection = () => {
   const { data: isLogin } = useGetLoginState();
-  const [showLogout, setShowLogout] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
   const { mutate: logout } = usePostLogout();
   const { data } = useGetMyInfo(!!isLogin?.loggedIn);
-  const isJoined = data?.club_member_my_page_response?.club_id || null;
+  const clubId = data?.club_member_my_page_response?.club_id || null;
+  const router = useRouter();
 
-  const handleImageClick = () => {
-    setShowLogout(!showLogout);
+  const handleProfileClick = () => {
+    setShowMenu(!showMenu);
+  };
+
+  const handleLogout = () => {
+    logout(undefined, {
+      onSuccess: () => {
+        router.push("/");
+      },
+    });
   };
 
   if (!isLogin?.loggedIn) {
@@ -43,48 +52,22 @@ const PersonalSection = () => {
     );
   }
 
-  if (!isJoined) {
-    return (
-      <div className="flex w-40 justify-evenly items-center">
+  return (
+    <div className="relative flex items-center">
+      {!clubId ? (
         <LinkText
           color="gray"
           size="sm"
           align="center"
-          className="cursor-pointer leading-6"
+          className="cursor-pointer leading-6 mr-4"
           link="/club/create"
         >
           동호회 만들기
         </LinkText>
-        <div className="relative">
-          <button
-            onClick={() => handleImageClick()}
-            className="cursor-pointer"
-            type="button"
-          >
-            <SImage
-              src={data?.profile_image || "/images/dummy-image.jpg"}
-              radius="circular"
-              width={45}
-              height={45}
-              alt="profile"
-            />
-          </button>
-          {showLogout && (
-            <div className="absolute top-full mt-2 px-10 right-0 bg-white border border-gray-200 shadow-lg p-2 rounded">
-              <button onClick={() => logout()} type="button">
-                Logout
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
+      ) : null}
 
-  return (
-    <div className="relative">
       <button
-        onClick={() => handleImageClick()}
+        onClick={() => handleProfileClick()}
         className="cursor-pointer"
         type="button"
       >
@@ -96,11 +79,40 @@ const PersonalSection = () => {
           alt="profile"
         />
       </button>
-      {showLogout && (
-        <div className="absolute top-full mt-2 px-10 right-0 bg-white border border-gray-200 shadow-lg p-2 rounded">
-          <button onClick={() => logout()} type="button">
-            Logout
-          </button>
+
+      {showMenu && (
+        <div className="absolute top-full right-0 mt-2 bg-white border border-gray-200 shadow-lg p-3 rounded w-40 space-y-2">
+          {clubId && (
+            <div>
+              <LinkText
+                color="primary"
+                size="sm"
+                className="block cursor-pointer hover:underline"
+                link={`/club/${clubId}`}
+              >
+                내 동호회
+              </LinkText>
+            </div>
+          )}
+          <div>
+            <LinkText
+              color="primary"
+              size="sm"
+              className="block cursor-pointer hover:underline"
+              link="/my"
+            >
+              마이페이지
+            </LinkText>
+          </div>
+          <div>
+            <button
+              onClick={() => handleLogout()}
+              type="button"
+              className="block w-full text-left text-primary text-sm cursor-pointer hover:underline"
+            >
+              Logout
+            </button>
+          </div>
         </div>
       )}
     </div>
@@ -110,7 +122,7 @@ const PersonalSection = () => {
 function Header() {
   const path = usePathname();
   return (
-    <div className="flex items-center justify-between space-x-4 w-full max-w-5xl h-16 sticky top-0 z-50 border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <div className="flex items-center justify-between space-x-4 w-full max-w-5xl h-16 sticky top-0 z-50 border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <Link href="/">
         <div className="text-xl font-semibold cursor-pointer">LOGO</div>
       </Link>