ca88d5ba08
All checks were successful
SPMS_BO/pipeline/head This commit looks good
- 알림 상세 슬라이드 패널 (NotificationSlidePanel) 신규 생성 - 헤더 알림 드롭다운에서 클릭 시 알림 페이지 이동 + 패널 자동 오픈 - 프로필 수정 필수값 검증: useShake + 인라인 에러 메시지 패턴 적용 - 사이드바 프로필 아이콘 클릭 시 마이페이지 이동 - 사이드바 메뉴 그룹 경로 변경 시 자동 접힘 처리 - 대시보드, 마이페이지 UI 개선 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
110 lines
3.4 KiB
TypeScript
110 lines
3.4 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { useAuthStore } from "@/stores/authStore";
|
|
|
|
const shortcuts = [
|
|
{
|
|
to: "/dashboard",
|
|
icon: "dashboard",
|
|
label: "대시보드",
|
|
desc: "발송 현황 한눈에 보기",
|
|
color: "blue" as const,
|
|
},
|
|
{
|
|
to: "/services",
|
|
icon: "manage_accounts",
|
|
label: "서비스 관리",
|
|
desc: "서비스 목록 및 설정",
|
|
color: "blue" as const,
|
|
},
|
|
{
|
|
to: "/services/register",
|
|
icon: "add_circle",
|
|
label: "서비스 등록",
|
|
desc: "새 서비스 등록하기",
|
|
color: "green" as const,
|
|
},
|
|
{
|
|
to: "/statistics/history",
|
|
icon: "send",
|
|
label: "발송 내역",
|
|
desc: "최근 메시지 발송 기록",
|
|
color: "blue" as const,
|
|
},
|
|
] as const;
|
|
|
|
export default function HomePage() {
|
|
const userName = useAuthStore((s) => s.user?.name) ?? "관리자";
|
|
|
|
return (
|
|
<div className="flex-1 flex items-center justify-center pt-16">
|
|
<div className="text-center max-w-lg px-8">
|
|
{/* 아이콘 */}
|
|
<div className="mx-auto mb-8 size-20 rounded-2xl bg-primary/10 flex items-center justify-center border border-primary/20">
|
|
<span
|
|
className="material-symbols-outlined text-primary"
|
|
style={{ fontSize: "50px" }}
|
|
>
|
|
grid_view
|
|
</span>
|
|
</div>
|
|
|
|
{/* 인사말 */}
|
|
<h1 className="text-3xl font-bold text-foreground tracking-tight mb-3">
|
|
안녕하세요, {userName}님
|
|
</h1>
|
|
<p className="text-muted-foreground text-base leading-relaxed mb-10">
|
|
SPMS Admin Console에 오신 것을 환영합니다.
|
|
<br />
|
|
아래 바로가기를 통해 원하는 메뉴로 이동하세요.
|
|
</p>
|
|
|
|
{/* 바로가기 */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{shortcuts.map((item) => (
|
|
<Link
|
|
key={item.to}
|
|
to={item.to}
|
|
className="group flex items-center gap-3 p-4 bg-white border border-gray-200 rounded-xl hover:border-primary/30 hover:shadow-md transition-all"
|
|
>
|
|
<div
|
|
className={`size-10 rounded-lg flex items-center justify-center flex-shrink-0 transition-colors ${
|
|
item.color === "green"
|
|
? "bg-green-50 group-hover:bg-green-100"
|
|
: "bg-blue-50 group-hover:bg-primary/10"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`material-symbols-outlined text-xl ${
|
|
item.color === "green" ? "text-green-600" : "text-primary"
|
|
}`}
|
|
>
|
|
{item.icon}
|
|
</span>
|
|
</div>
|
|
<div className="text-left">
|
|
<p
|
|
className={`text-sm font-semibold text-foreground transition-colors ${
|
|
item.color === "green"
|
|
? "group-hover:text-green-600"
|
|
: "group-hover:text-primary"
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground mt-0.5">
|
|
{item.desc}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* 버전 */}
|
|
<p className="text-xs text-gray-400 mt-10">
|
|
Stein Push Messaging Service v1.0
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|