129 lines
3.6 KiB
TypeScript
129 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { DashboardHeader } from "./DashboardHeader";
|
|
import { NoticeBanner } from "./NoticeBanner";
|
|
import { KpiBar } from "./KpiBar";
|
|
import { MenuGrid } from "./MenuGrid";
|
|
import { ActivityList } from "./ActivityList";
|
|
import { NoticeList } from "./NoticeList";
|
|
import { DashboardFooter } from "./DashboardFooter";
|
|
import { MenuItem as DashboardMenuItem } from "./types";
|
|
import { menuApi, PopMenuItem } from "@/lib/api/menu";
|
|
import {
|
|
KPI_ITEMS,
|
|
MENU_ITEMS,
|
|
ACTIVITY_ITEMS,
|
|
NOTICE_ITEMS,
|
|
NOTICE_MARQUEE_TEXT,
|
|
} from "./data";
|
|
import "./dashboard.css";
|
|
|
|
const CATEGORY_COLORS: DashboardMenuItem["category"][] = [
|
|
"production",
|
|
"material",
|
|
"quality",
|
|
"equipment",
|
|
"safety",
|
|
];
|
|
|
|
function convertPopMenuToMenuItem(item: PopMenuItem, index: number): DashboardMenuItem {
|
|
return {
|
|
id: item.objid,
|
|
title: item.menu_name_kor,
|
|
count: 0,
|
|
description: item.menu_desc?.replace("[POP]", "").trim() || "",
|
|
status: "",
|
|
category: CATEGORY_COLORS[index % CATEGORY_COLORS.length],
|
|
href: item.menu_url || "#",
|
|
};
|
|
}
|
|
|
|
export function PopDashboard() {
|
|
const router = useRouter();
|
|
const [theme, setTheme] = useState<"dark" | "light">("dark");
|
|
const [menuItems, setMenuItems] = useState<DashboardMenuItem[]>(MENU_ITEMS);
|
|
|
|
useEffect(() => {
|
|
const savedTheme = localStorage.getItem("popTheme") as "dark" | "light" | null;
|
|
if (savedTheme) {
|
|
setTheme(savedTheme);
|
|
}
|
|
}, []);
|
|
|
|
// API에서 POP 메뉴 로드
|
|
useEffect(() => {
|
|
const loadPopMenus = async () => {
|
|
try {
|
|
const response = await menuApi.getPopMenus();
|
|
if (response.success && response.data && response.data.childMenus.length > 0) {
|
|
const converted = response.data.childMenus.map(convertPopMenuToMenuItem);
|
|
setMenuItems(converted);
|
|
}
|
|
} catch {
|
|
// API 실패 시 기존 하드코딩 데이터 유지
|
|
}
|
|
};
|
|
loadPopMenus();
|
|
}, []);
|
|
|
|
const handleThemeToggle = () => {
|
|
const newTheme = theme === "dark" ? "light" : "dark";
|
|
setTheme(newTheme);
|
|
localStorage.setItem("popTheme", newTheme);
|
|
};
|
|
|
|
const handleUserClick = () => {
|
|
if (confirm("로그아웃 하시겠습니까?")) {
|
|
alert("로그아웃되었습니다.");
|
|
}
|
|
};
|
|
|
|
const handlePcModeClick = () => {
|
|
router.push("/");
|
|
};
|
|
|
|
const handleActivityMore = () => {
|
|
alert("전체 활동 내역 화면으로 이동합니다.");
|
|
};
|
|
|
|
const handleNoticeMore = () => {
|
|
alert("전체 공지사항 화면으로 이동합니다.");
|
|
};
|
|
|
|
return (
|
|
<div className={`pop-dashboard-container ${theme === "light" ? "light" : ""}`}>
|
|
<div className="pop-dashboard">
|
|
<DashboardHeader
|
|
theme={theme}
|
|
weather={{ temp: "18°C", description: "맑음" }}
|
|
user={{ name: "김철수", role: "생산1팀", avatar: "김" }}
|
|
company={{ name: "탑씰", subTitle: "현장 관리 시스템" }}
|
|
onThemeToggle={handleThemeToggle}
|
|
onUserClick={handleUserClick}
|
|
onPcModeClick={handlePcModeClick}
|
|
/>
|
|
|
|
<NoticeBanner text={NOTICE_MARQUEE_TEXT} />
|
|
|
|
<KpiBar items={KPI_ITEMS} />
|
|
|
|
<MenuGrid items={menuItems} />
|
|
|
|
<div className="pop-dashboard-bottom-section">
|
|
<ActivityList items={ACTIVITY_ITEMS} onMoreClick={handleActivityMore} />
|
|
<NoticeList items={NOTICE_ITEMS} onMoreClick={handleNoticeMore} />
|
|
</div>
|
|
|
|
<DashboardFooter
|
|
companyName="탑씰"
|
|
version="1.0.0"
|
|
emergencyContact="042-XXX-XXXX"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|