Feat: 세션 유지 컴포넌트 추가 및 주석 디자인 다크테마 적용
This commit is contained in:
@@ -1,3 +1,12 @@
|
||||
/**
|
||||
* @file features/layout/components/user-menu.tsx
|
||||
* @description 사용자 프로필 드롭다운 메뉴 컴포넌트
|
||||
* @remarks
|
||||
* - [레이어] Components/UI
|
||||
* - [사용자 행동] Avatar 클릭 -> 드롭다운 오픈 -> 프로필/설정 이동 또는 로그아웃
|
||||
* - [연관 파일] header.tsx, features/auth/actions.ts (로그아웃)
|
||||
*/
|
||||
|
||||
"use client";
|
||||
|
||||
import { signout } from "@/features/auth/actions";
|
||||
@@ -15,16 +24,22 @@ import { LogOut, Settings, User as UserIcon } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
interface UserMenuProps {
|
||||
/** Supabase User 객체 */
|
||||
user: User | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 사용자 메뉴/프로필 컴포넌트 (로그인 시 헤더 노출)
|
||||
* @param user 로그인한 사용자 정보
|
||||
* @returns Avatar 버튼 및 드롭다운 메뉴
|
||||
*/
|
||||
export function UserMenu({ user }: UserMenuProps) {
|
||||
const router = useRouter();
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenu modal={false}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="flex items-center gap-2 outline-none">
|
||||
<Avatar className="h-8 w-8 transition-opacity hover:opacity-80">
|
||||
@@ -39,7 +54,9 @@ export function UserMenu({ user }: UserMenuProps) {
|
||||
<DropdownMenuLabel className="font-normal">
|
||||
<div className="flex flex-col space-y-1">
|
||||
<p className="text-sm font-medium leading-none">
|
||||
{user.user_metadata?.name || "사용자"}
|
||||
{user.user_metadata?.full_name ||
|
||||
user.user_metadata?.name ||
|
||||
"사용자"}
|
||||
</p>
|
||||
<p className="text-xs leading-none text-muted-foreground">
|
||||
{user.email}
|
||||
|
||||
Reference in New Issue
Block a user