chore: 메뉴 및 프로필 사진 사용

chedakr · May 13, 2024 · b0123ae · b0123ae
1 parent 8cd09c6
commit b0123ae
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 15 deletions.
diff --git a/apps/web/components/header/index.tsx b/apps/web/components/header/index.tsx
@@ -29,7 +29,7 @@ export default function Header() {
             <Github className="h-[1.2rem] w-[1.2rem]" />
           </Link>
         </Button>
-        <div className="flex justify-center w-20">
+        <div className="flex justify-center w-16">
           <LoginButton />
         </div>
       </nav>

diff --git a/apps/web/components/header/login-button.tsx b/apps/web/components/header/login-button.tsx
@@ -3,7 +3,15 @@
 import Link from 'next/link';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Button } from "@/components/ui/button";
-// import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import useAuth from '@/hooks/useAuth';
 
 export default function LoginButton() {
@@ -15,24 +23,34 @@ export default function LoginButton() {
 
   if (!auth.data?.loggedIn) {
     return (
-      <Button variant="outline" className="w-20" asChild>
+      <Button variant="outline" className="w-16" asChild>
         <Link href="/login">로그인</Link>
       </Button>
     );
   }
 
-  // return (
-  //   <Avatar>
-  //     <AvatarImage src={auth.data.user.userImage} alt={auth.data.user.userName} />
-  //     <AvatarFallback>{auth.data.user.userName.substring(0, 1)}</AvatarFallback>
-  //   </Avatar>
-  // );
-
   return (
-    <Button variant="outline" className="w-18" asChild>
-      <Link href={`${process.env.NEXT_PUBLIC_API_ORIGIN}/services/auth/v1/logout`}>
-        로그아웃
-      </Link>
-    </Button>
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Avatar>
+          <AvatarImage src={auth.data.user.userImage} alt={auth.data.user.userName} />
+          <AvatarFallback>{auth.data.user.userName.substring(0, 1)}</AvatarFallback>
+        </Avatar>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>
+          {auth.data.user.userName}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <Link
+            href={`${process.env.NEXT_PUBLIC_API_ORIGIN}/services/auth/v1/logout`}
+            className="w-full"
+          >
+            로그아웃
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }