Feat: 대시보드 추가
app/(auth)/forgot-password/page.tsx - 비밀번호 초기화 페이지 레이아웃 정리 및 카드 스타일 개선 app/(auth)/login/page.tsx - 로그인 페이지 레이아웃 경량화 및 메시지 표시 유지 app/(auth)/reset-password/page.tsx - 리셋 비밀번호 페이지 레이아웃 정리 app/(auth)/signup/page.tsx - 회원가입 페이지 레이아웃 정리 및 링크 배치 개선 app/(auth)/layout.tsx - 인증 관련 공통 배경 레이아웃 추가 (그라디언트/블러 효과 분리) app/(main)/layout.tsx - 메인 레이아웃 추가 (헤더, 사이드바 포함) app/(main)/page.tsx - 대시보드 기본 페이지 추가 (위젯/플레이스홀더) app/page.tsx - 기존 메인 페이지 제거 (대시보드로 대체) components/ui/avatar.tsx - 아바타 UI 컴포넌트 추가 components/ui/dropdown-menu.tsx - 드롭다운 메뉴 UI 컴포넌트 추가 (Radix 기반) features/layout/components/header.tsx - 헤더 컴포넌트 추가 (사용자 상태 표시 및 메뉴 연결) features/layout/components/sidebar.tsx - 사이드바 네비게이션 컴포넌트 추가 features/layout/components/user-menu.tsx - 사용자 드롭다운 메뉴 추가 (로그아웃 등) features/layout/types/index.ts - 레이아웃 관련 타입 정의 추가 package.json - Radix 드롭다운, Framer Motion 등 UI 관련 의존성 추가 package-lock.json - 패키지 잠금파일 갱신 및 교체 - 인증 및 메인 영역 구조를 분리하고 공통 레이아웃과 재사용 가능한 UI 컴포넌트를 도입하여 향후 페이지 확장 및 유지보수성을 개선합니다
This commit is contained in:
70
features/layout/components/user-menu.tsx
Normal file
70
features/layout/components/user-menu.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
"use client";
|
||||
|
||||
import { signout } from "@/features/auth/actions";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { User } from "@supabase/supabase-js";
|
||||
import { LogOut, Settings, User as UserIcon } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
interface UserMenuProps {
|
||||
user: User | null;
|
||||
}
|
||||
|
||||
export function UserMenu({ user }: UserMenuProps) {
|
||||
const router = useRouter();
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="flex items-center gap-2 outline-none">
|
||||
<Avatar className="h-8 w-8 transition-opacity hover:opacity-80">
|
||||
<AvatarImage src={user.user_metadata?.avatar_url} />
|
||||
<AvatarFallback className="bg-linear-to-br from-indigo-500 to-purple-600 text-white text-xs font-bold">
|
||||
{user.email?.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
<DropdownMenuLabel className="font-normal">
|
||||
<div className="flex flex-col space-y-1">
|
||||
<p className="text-sm font-medium leading-none">
|
||||
{user.user_metadata?.name || "사용자"}
|
||||
</p>
|
||||
<p className="text-xs leading-none text-muted-foreground">
|
||||
{user.email}
|
||||
</p>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={() => router.push("/profile")}>
|
||||
<UserIcon className="mr-2 h-4 w-4" />
|
||||
<span>프로필</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => router.push("/settings")}>
|
||||
<Settings className="mr-2 h-4 w-4" />
|
||||
<span>설정</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<form action={signout}>
|
||||
<DropdownMenuItem asChild>
|
||||
<button className="w-full text-red-600 dark:text-red-400">
|
||||
<LogOut className="mr-2 h-4 w-4" />
|
||||
<span>로그아웃</span>
|
||||
</button>
|
||||
</DropdownMenuItem>
|
||||
</form>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user