fix: main/page.tsx도 동일한 리디자인 적용 (로그인 후 리다이렉트 대상)
Made-with: Cursor
This commit is contained in:
DDD1542
parent
dde073720a
commit
707d0c6f43
|
|
@ -5,12 +5,12 @@ import { useAuth } from "@/hooks/useAuth";
|
|||
import { FileCheck, Menu, Users, Bell, FileText, Layout, Server, Shield, Calendar } from "lucide-react";
|
||||
|
||||
const quickAccessItems = [
|
||||
{ label: "결재함", icon: FileCheck, href: "/admin/approvalBox" },
|
||||
{ label: "메뉴 관리", icon: Menu, href: "/admin/menu" },
|
||||
{ label: "사용자 관리", icon: Users, href: "/admin/userMng" },
|
||||
{ label: "공지사항", icon: Bell, href: "/admin/system-notices" },
|
||||
{ label: "감사 로그", icon: FileText, href: "/admin/audit-log" },
|
||||
{ label: "화면 관리", icon: Layout, href: "/admin/screenMng" },
|
||||
{ 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 MainPage() {
|
||||
|
|
@ -18,35 +18,35 @@ export default function MainPage() {
|
|||
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">
|
||||
{/* 환영 영역 */}
|
||||
<div className="rounded-xl bg-gradient-to-r from-primary/10 via-primary/5 to-transparent p-6 sm:p-8">
|
||||
<h1 className="text-xl font-bold sm:text-2xl">
|
||||
안녕하세요, {userName}님
|
||||
<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="mt-2 text-sm text-muted-foreground">
|
||||
오늘도 효율적인 업무를 시작하세요.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">{dateStr}</p>
|
||||
</div>
|
||||
|
||||
{/* 퀵 액세스 카드 */}
|
||||
{/* 바로가기 */}
|
||||
<div>
|
||||
<h2 className="mb-4 text-lg font-semibold">바로가기</h2>
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
|
||||
<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-3 rounded-xl border bg-card p-4 shadow-sm transition-all hover:border-primary/30 hover:shadow-md sm:p-6"
|
||||
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 bg-primary/10 text-primary transition-colors group-hover:bg-primary/20 sm:h-12 sm:w-12">
|
||||
<Icon className="h-5 w-5 sm:h-6 sm:w-6" />
|
||||
<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 sm:text-sm">{item.label}</span>
|
||||
<span className="text-xs font-medium text-foreground">{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
|
@ -54,11 +54,11 @@ export default function MainPage() {
|
|||
</div>
|
||||
|
||||
{/* 시스템 정보 */}
|
||||
<div className="rounded-xl border bg-card p-4 shadow-sm sm:p-6">
|
||||
<h2 className="mb-3 text-lg font-semibold">시스템 정보</h2>
|
||||
<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-8 w-8 items-center justify-center rounded-lg bg-muted">
|
||||
<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>
|
||||
|
|
@ -67,7 +67,7 @@ export default function MainPage() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-muted">
|
||||
<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>
|
||||
|
|
@ -76,13 +76,13 @@ export default function MainPage() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-muted">
|
||||
<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">
|
||||
{new Date().toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric" })}
|
||||
{today.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric" })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,86 @@
|
|||
/**
|
||||
* UI 리디자인 검증 스크립트
|
||||
* 1. 로그인 페이지 스크린샷
|
||||
* 2. 로그인
|
||||
* 3. 대시보드 스크린샷
|
||||
* 4. 사이드바 스크린샷
|
||||
*/
|
||||
|
||||
import { chromium } from "playwright";
|
||||
import * as path from "path";
|
||||
import * as fs from "fs";
|
||||
|
||||
const BASE_URL = "http://localhost:9771";
|
||||
const SCREENSHOT_DIR = path.join(__dirname, "../verification-screenshots");
|
||||
|
||||
async function main() {
|
||||
if (!fs.existsSync(SCREENSHOT_DIR)) {
|
||||
fs.mkdirSync(SCREENSHOT_DIR, { recursive: true });
|
||||
}
|
||||
|
||||
const browser = await chromium.launch({ headless: true });
|
||||
const context = await browser.newContext({ viewport: { width: 1280, height: 800 } });
|
||||
const page = await context.newPage();
|
||||
|
||||
try {
|
||||
// Step 1: 로그인 페이지 접속 및 스크린샷
|
||||
console.log("Step 1: 로그인 페이지 접속...");
|
||||
await page.goto(`${BASE_URL}/login`, { waitUntil: "commit", timeout: 30000 });
|
||||
await page.waitForTimeout(1500);
|
||||
await page.screenshot({
|
||||
path: path.join(SCREENSHOT_DIR, "01-login-page.png"),
|
||||
fullPage: true,
|
||||
});
|
||||
console.log(" -> 01-login-page.png 저장됨");
|
||||
|
||||
// Step 2: 로그인
|
||||
console.log("Step 2: 로그인...");
|
||||
await page.fill("#userId", "wace");
|
||||
await page.fill("#password", "qlalfqjsgh11");
|
||||
await page.click('button[type="submit"]');
|
||||
await page.waitForURL((url) => !url.pathname.includes("/login"), { timeout: 10000 }).catch(() => {});
|
||||
await page.waitForTimeout(3000);
|
||||
|
||||
const currentUrl = page.url();
|
||||
if (currentUrl.includes("/login")) {
|
||||
console.log(" -> 로그인 실패, 현재 URL:", currentUrl);
|
||||
} else {
|
||||
console.log(" -> 로그인 성공, 리다이렉트:", currentUrl);
|
||||
|
||||
// Step 3: 메인 페이지로 이동 (대시보드)
|
||||
if (!currentUrl.includes("/main") && !currentUrl.includes("/admin")) {
|
||||
await page.goto(`${BASE_URL}/main`, { waitUntil: "load", timeout: 20000 });
|
||||
await page.waitForTimeout(2000);
|
||||
}
|
||||
|
||||
// 대시보드 전체 스크린샷
|
||||
await page.screenshot({
|
||||
path: path.join(SCREENSHOT_DIR, "02-dashboard.png"),
|
||||
fullPage: true,
|
||||
});
|
||||
console.log(" -> 02-dashboard.png 저장됨");
|
||||
|
||||
// Step 4: 사이드바 포커스 스크린샷 (좌측 영역)
|
||||
const sidebar = page.locator("aside");
|
||||
if ((await sidebar.count()) > 0) {
|
||||
await sidebar.first().screenshot({
|
||||
path: path.join(SCREENSHOT_DIR, "03-sidebar.png"),
|
||||
});
|
||||
console.log(" -> 03-sidebar.png 저장됨");
|
||||
}
|
||||
}
|
||||
|
||||
await browser.close();
|
||||
console.log("\n검증 완료. 스크린샷:", SCREENSHOT_DIR);
|
||||
} catch (error) {
|
||||
console.error("오류:", error);
|
||||
await page.screenshot({
|
||||
path: path.join(SCREENSHOT_DIR, "error.png"),
|
||||
fullPage: true,
|
||||
}).catch(() => {});
|
||||
await browser.close();
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
main();
|
||||
Loading…
Reference in New Issue