ERP-node/frontend/components/pop/dashboard/PopDashboard.tsx

84 lines
2.3 KiB
TypeScript

"use client";
import React, { useState, useEffect } from "react";
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 {
KPI_ITEMS,
MENU_ITEMS,
ACTIVITY_ITEMS,
NOTICE_ITEMS,
NOTICE_MARQUEE_TEXT,
} from "./data";
import "./dashboard.css";
export function PopDashboard() {
const [theme, setTheme] = useState<"dark" | "light">("dark");
// 로컬 스토리지에서 테마 로드
useEffect(() => {
const savedTheme = localStorage.getItem("popTheme") as "dark" | "light" | null;
if (savedTheme) {
setTheme(savedTheme);
}
}, []);
const handleThemeToggle = () => {
const newTheme = theme === "dark" ? "light" : "dark";
setTheme(newTheme);
localStorage.setItem("popTheme", newTheme);
};
const handleUserClick = () => {
if (confirm("로그아웃 하시겠습니까?")) {
alert("로그아웃되었습니다.");
}
};
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}
/>
<NoticeBanner text={NOTICE_MARQUEE_TEXT} />
<KpiBar items={KPI_ITEMS} />
<MenuGrid items={MENU_ITEMS} />
<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>
);
}