feat(auth) : Header를 사용자 정보에 따라 다른 ui로 표시하도록 변경 및 LogoutButton.tsx 에서 로그아웃 처리되도록 구현

Author: stupilman

src/components/common/Header.tsx

@@ -3,8 +3,20 @@ import Link from "next/link";
 
 import { Input } from "@/components/ui/input";
 import Image from "next/image";
+import { getMe } from "@/lib/auth/auth.server";
+import { GetMeResponse } from "@/types/auth";
+import LogoutButton from "@/components/home/LogoutButton";
+
+export default async function Header() {
+  let isLoggedIn: GetMeResponse["data"] | null = null;
+
+  try {
+    const res = await getMe();
+    isLoggedIn = res.data;
+  } catch {
+    isLoggedIn = null;
+  }
 
-export default function Header() {
   const navLinkHover =
     "relative inline-block transition-all duration-300 ease-in-out text-text-main hover:-translate-y-0.5 before:absolute before:-bottom-0.5 before:left-0 before:right-0 before:-z-10 before:h-0.5 before:bg-border-point before:origin-bottom before:scale-y-0 before:transform before:transition-transform before:duration-300 before:ease-in-out hover:before:scale-y-100";
 
@@ -32,18 +44,23 @@ export default function Header() {
           {/* TODO: 유저 로그인 여부 확인 후 토글 */}
           {/* 비회원일 때 */}
           <div className="space-x-8 text-zinc-500">
-            <Link className="hover:font-medium" href="/sign-in">
-              로그인
-            </Link>
-            <Link className="hover:font-medium" href="/sign-up">
-              회원가입
-            </Link>
-            <Link className="hover:font-medium" href="/my-page/overview">
-              마이페이지
-            </Link>
-            <Link className="hover:font-medium" href="#">
-              로그아웃
-            </Link>
+            {isLoggedIn ? (
+              <>
+                <LogoutButton />
+                <Link className="hover:font-medium" href="/my-page/overview">
+                  마이페이지
+                </Link>
+              </>
+            ) : (
+              <>
+                <Link className="hover:font-medium" href="/sign-in">
+                  로그인
+                </Link>
+                <Link className="hover:font-medium" href="/sign-up">
+                  회원가입
+                </Link>
+              </>
+            )}
           </div>
         </div>
         <nav className="space-x-15 text-xl font-semibold text-zinc-900">

src/components/home/LogoutButton.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { logout } from "@/lib/auth/auth.client";
+import { toast } from "sonner";
+
+export default function LogoutButton() {
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+      router.push("/home");
+      router.refresh();
+      toast.success("로그아웃 되었습니다.");
+    } catch {
+      toast.error("로그아웃에 실패했습니다.");
+    }
+  };
+
+  return (
+    <button onClick={handleLogout} className="cursor-pointer hover:font-medium">
+      로그아웃
+    </button>
+  );
+}