94 lines
4.1 KiB
TypeScript
94 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { FileCheck, Menu, Users, Bell, FileText, Layout, Server, Shield, Calendar, ArrowRight } from "lucide-react";
|
|
|
|
const quickAccessItems = [
|
|
{ label: "결재함", icon: FileCheck, href: "/admin/approvalBox", color: "text-blue-600 bg-blue-50" },
|
|
{ label: "메뉴 관리", icon: Menu, href: "/admin/menu", color: "text-violet-600 bg-violet-50" },
|
|
{ label: "사용자 관리", icon: Users, href: "/admin/userMng", color: "text-emerald-600 bg-emerald-50" },
|
|
{ label: "공지사항", icon: Bell, href: "/admin/system-notices", color: "text-amber-600 bg-amber-50" },
|
|
{ label: "감사 로그", icon: FileText, href: "/admin/audit-log", color: "text-rose-600 bg-rose-50" },
|
|
{ label: "화면 관리", icon: Layout, href: "/admin/screenMng", color: "text-cyan-600 bg-cyan-50" },
|
|
];
|
|
|
|
export default function MainHomePage() {
|
|
const router = useRouter();
|
|
const { user } = useAuth();
|
|
|
|
const userName = user?.userName || "사용자";
|
|
const today = new Date();
|
|
const dateStr = today.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric", weekday: "long" });
|
|
|
|
return (
|
|
<div className="space-y-6 p-4 sm:p-6 lg:p-8">
|
|
{/* 헤더 영역 */}
|
|
<div className="flex flex-col gap-1">
|
|
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
|
|
{userName}님, 좋은 하루 되세요
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">{dateStr}</p>
|
|
</div>
|
|
|
|
{/* 바로가기 */}
|
|
<div>
|
|
<h2 className="mb-3 text-base font-semibold text-foreground">바로가기</h2>
|
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
|
|
{quickAccessItems.map((item) => {
|
|
const Icon = item.icon;
|
|
return (
|
|
<button
|
|
key={item.href}
|
|
onClick={() => router.push(item.href)}
|
|
className="group flex flex-col items-center gap-2.5 rounded-lg border bg-card p-4 transition-all hover:shadow-md"
|
|
>
|
|
<div className={`flex h-10 w-10 items-center justify-center rounded-lg ${item.color} transition-transform group-hover:scale-105`}>
|
|
<Icon className="h-5 w-5" />
|
|
</div>
|
|
<span className="text-xs font-medium text-foreground">{item.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 시스템 정보 */}
|
|
<div className="rounded-lg border bg-card p-4 sm:p-5">
|
|
<h2 className="mb-3 text-base font-semibold text-foreground">시스템 정보</h2>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
|
|
<Server className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">플랫폼</p>
|
|
<p className="text-sm font-medium">WACE ERP/PLM</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
|
|
<Shield className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">버전</p>
|
|
<p className="text-sm font-medium">v2.0.0</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
|
|
<Calendar className="h-4 w-4 text-muted-foreground" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">오늘 날짜</p>
|
|
<p className="text-sm font-medium">
|
|
{today.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric" })}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|