712f81f6cb
ksh-function-stabilization의 9개 커밋을 ksh-v2-work에 병합한다. [병합 내용] - BLOCK O: pop-search 연결 탭 일관성 통합 - BLOCK P: 날짜 입력 타입 구현 + 셀 반응형 레이아웃 - pop-button 설정 패널 UX/UI 전면 개선 - 일괄 채번 + 모달 distinct + 선택 해제 - pop-scanner 바코드/QR 스캐너 컴포넌트 - pop-button 제어 실행 + 연결 데이터 UX - BLOCK R: PC <-> POP 네비게이션 + Landing - pop-profile 컴포넌트 (10번째 POP 컴포넌트) - BLOCK S: 로그인 POP 모드 토글 [충돌 해결 3건 - 모두 양쪽 통합] - UserDropdown.tsx: HEAD 결재함 + source POP 모드 메뉴 통합 - AppLayout.tsx: HEAD 결재함 + source POP 모드 메뉴 (모바일+사이드바 2곳) - MenuFormModal.tsx: HEAD menuIcon 필드 + source 주석 제거 통합
104 lines
3.9 KiB
TypeScript
104 lines
3.9 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { LogOut, FileCheck, Monitor, User } from "lucide-react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
interface UserDropdownProps {
|
|
user: any;
|
|
onProfileClick: () => void;
|
|
onPopModeClick?: () => void;
|
|
onLogout: () => void;
|
|
}
|
|
|
|
/**
|
|
* 사용자 드롭다운 메뉴 컴포넌트
|
|
*/
|
|
export function UserDropdown({ user, onProfileClick, onPopModeClick, onLogout }: UserDropdownProps) {
|
|
const router = useRouter();
|
|
|
|
if (!user) return null;
|
|
|
|
return (
|
|
<DropdownMenu modal={false}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
|
|
<div className="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-full">
|
|
{user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
|
|
<img
|
|
src={user.photo}
|
|
alt={user.userName || "User"}
|
|
className="aspect-square h-full w-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="flex h-full w-full items-center justify-center rounded-full bg-slate-200 font-semibold text-slate-700">
|
|
{user.userName?.substring(0, 1)?.toUpperCase() || "U"}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56" align="end">
|
|
<DropdownMenuLabel className="font-normal">
|
|
<div className="flex items-center space-x-3">
|
|
{/* 프로필 사진 표시 */}
|
|
<div className="relative flex h-12 w-12 shrink-0 overflow-hidden rounded-full">
|
|
{user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
|
|
<img
|
|
src={user.photo}
|
|
alt={user.userName || "User"}
|
|
className="aspect-square h-full w-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="flex h-full w-full items-center justify-center rounded-full bg-slate-200 text-base font-semibold text-slate-700">
|
|
{user.userName?.substring(0, 1)?.toUpperCase() || "U"}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 사용자 정보 */}
|
|
<div className="flex flex-col space-y-1">
|
|
<p className="text-sm leading-none font-medium">
|
|
{user.userName || "사용자"} ({user.userId || ""})
|
|
</p>
|
|
<p className="text-muted-foreground text-xs leading-none font-semibold">{user.email || ""}</p>
|
|
<p className="text-muted-foreground text-xs leading-none font-semibold">
|
|
{user.deptName && user.positionName
|
|
? `${user.deptName}, ${user.positionName}`
|
|
: user.deptName || user.positionName || "부서 정보 없음"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={onProfileClick}>
|
|
<User className="mr-2 h-4 w-4" />
|
|
<span>프로필</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => router.push("/admin/approvalBox")}>
|
|
<FileCheck className="mr-2 h-4 w-4" />
|
|
<span>결재함</span>
|
|
</DropdownMenuItem>
|
|
{onPopModeClick && (
|
|
<DropdownMenuItem onClick={onPopModeClick}>
|
|
<Monitor className="mr-2 h-4 w-4" />
|
|
<span>POP 모드</span>
|
|
</DropdownMenuItem>
|
|
)}
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={onLogout}>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
<span>로그아웃</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|