diff --git a/frontend/app/(main)/main/page.tsx b/frontend/app/(main)/main/page.tsx index d042e51f..adad4d1b 100644 --- a/frontend/app/(main)/main/page.tsx +++ b/frontend/app/(main)/main/page.tsx @@ -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 ( -
- {/* 환영 영역 */} -
-

- 안녕하세요, {userName}님 +
+ {/* 헤더 영역 */} +
+

+ {userName}님, 좋은 하루 되세요

-

- 오늘도 효율적인 업무를 시작하세요. -

+

{dateStr}

- {/* 퀵 액세스 카드 */} + {/* 바로가기 */}
-

바로가기

-
+

바로가기

+
{quickAccessItems.map((item) => { const Icon = item.icon; return ( ); })} @@ -54,11 +54,11 @@ export default function MainPage() {
{/* 시스템 정보 */} -
-

시스템 정보

+
+

시스템 정보

-
+
@@ -67,7 +67,7 @@ export default function MainPage() {
-
+
@@ -76,13 +76,13 @@ export default function MainPage() {
-
+

오늘 날짜

- {new Date().toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric" })} + {today.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric" })}

diff --git a/frontend/scripts/ui-redesign-verification.ts b/frontend/scripts/ui-redesign-verification.ts new file mode 100644 index 00000000..9a001280 --- /dev/null +++ b/frontend/scripts/ui-redesign-verification.ts @@ -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();