97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { Moon, Sun } from "lucide-react";
|
|
import { WeatherInfo, UserInfo, CompanyInfo } from "./types";
|
|
|
|
interface DashboardHeaderProps {
|
|
theme: "dark" | "light";
|
|
weather: WeatherInfo;
|
|
user: UserInfo;
|
|
company: CompanyInfo;
|
|
onThemeToggle: () => void;
|
|
onUserClick: () => void;
|
|
}
|
|
|
|
export function DashboardHeader({
|
|
theme,
|
|
weather,
|
|
user,
|
|
company,
|
|
onThemeToggle,
|
|
onUserClick,
|
|
}: DashboardHeaderProps) {
|
|
const [mounted, setMounted] = useState(false);
|
|
const [currentTime, setCurrentTime] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
const timer = setInterval(() => {
|
|
setCurrentTime(new Date());
|
|
}, 1000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
const formatTime = (date: Date) => {
|
|
const hours = String(date.getHours()).padStart(2, "0");
|
|
const minutes = String(date.getMinutes()).padStart(2, "0");
|
|
const seconds = String(date.getSeconds()).padStart(2, "0");
|
|
return `${hours}:${minutes}:${seconds}`;
|
|
};
|
|
|
|
const formatDate = (date: Date) => {
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, "0");
|
|
const day = String(date.getDate()).padStart(2, "0");
|
|
return `${year}-${month}-${day}`;
|
|
};
|
|
|
|
return (
|
|
<header className="pop-dashboard-header">
|
|
<div className="pop-dashboard-header-left">
|
|
<div className="pop-dashboard-time-display">
|
|
<div className="pop-dashboard-time-main">
|
|
{mounted ? formatTime(currentTime) : "--:--:--"}
|
|
</div>
|
|
<div className="pop-dashboard-time-date">
|
|
{mounted ? formatDate(currentTime) : "----.--.--"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pop-dashboard-header-right">
|
|
{/* 테마 토글 */}
|
|
<button
|
|
className="pop-dashboard-theme-toggle"
|
|
onClick={onThemeToggle}
|
|
title="테마 변경"
|
|
>
|
|
{theme === "dark" ? <Moon size={16} /> : <Sun size={16} />}
|
|
</button>
|
|
|
|
{/* 날씨 정보 */}
|
|
<div className="pop-dashboard-weather">
|
|
<span className="pop-dashboard-weather-temp">{weather.temp}</span>
|
|
<span className="pop-dashboard-weather-desc">{weather.description}</span>
|
|
</div>
|
|
|
|
{/* 회사 정보 */}
|
|
<div className="pop-dashboard-company">
|
|
<div className="pop-dashboard-company-name">{company.name}</div>
|
|
<div className="pop-dashboard-company-sub">{company.subTitle}</div>
|
|
</div>
|
|
|
|
{/* 사용자 배지 */}
|
|
<button className="pop-dashboard-user-badge" onClick={onUserClick}>
|
|
<div className="pop-dashboard-user-avatar">{user.avatar}</div>
|
|
<div className="pop-dashboard-user-text">
|
|
<div className="pop-dashboard-user-name">{user.name}</div>
|
|
<div className="pop-dashboard-user-role">{user.role}</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|