124 lines
3.6 KiB
TypeScript
124 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { Moon, Sun } from "lucide-react";
|
|
import { Equipment, Process, ProductionType } from "./types";
|
|
|
|
interface PopHeaderProps {
|
|
currentDateTime: Date;
|
|
productionType: ProductionType;
|
|
selectedEquipment: Equipment | null;
|
|
selectedProcess: Process | null;
|
|
showMyWorkOnly: boolean;
|
|
theme: "dark" | "light";
|
|
onProductionTypeChange: (type: ProductionType) => void;
|
|
onEquipmentClick: () => void;
|
|
onProcessClick: () => void;
|
|
onMyWorkToggle: () => void;
|
|
onSearchClick: () => void;
|
|
onSettingsClick: () => void;
|
|
onThemeToggle: () => void;
|
|
}
|
|
|
|
export function PopHeader({
|
|
currentDateTime,
|
|
productionType,
|
|
selectedEquipment,
|
|
selectedProcess,
|
|
showMyWorkOnly,
|
|
theme,
|
|
onProductionTypeChange,
|
|
onEquipmentClick,
|
|
onProcessClick,
|
|
onMyWorkToggle,
|
|
onSearchClick,
|
|
onSettingsClick,
|
|
onThemeToggle,
|
|
}: PopHeaderProps) {
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
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}`;
|
|
};
|
|
|
|
const formatTime = (date: Date) => {
|
|
const hours = String(date.getHours()).padStart(2, "0");
|
|
const minutes = String(date.getMinutes()).padStart(2, "0");
|
|
return `${hours}:${minutes}`;
|
|
};
|
|
|
|
return (
|
|
<div className="pop-header-container">
|
|
{/* 1행: 날짜/시간 + 테마 토글 + 작업지시/원자재 */}
|
|
<div className="pop-top-bar row-1">
|
|
<div className="pop-datetime">
|
|
<span className="pop-date">{mounted ? formatDate(currentDateTime) : "----.--.--"}</span>
|
|
<span className="pop-time">{mounted ? formatTime(currentDateTime) : "--:--"}</span>
|
|
</div>
|
|
|
|
{/* 테마 토글 버튼 */}
|
|
<button className="pop-theme-toggle-inline" onClick={onThemeToggle} title="테마 변경">
|
|
{theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
|
|
</button>
|
|
|
|
<div className="pop-spacer" />
|
|
|
|
<div className="pop-type-buttons">
|
|
<button
|
|
className={`pop-type-btn ${productionType === "work-order" ? "active" : ""}`}
|
|
onClick={() => onProductionTypeChange("work-order")}
|
|
>
|
|
작업지시
|
|
</button>
|
|
<button
|
|
className={`pop-type-btn ${productionType === "material" ? "active" : ""}`}
|
|
onClick={() => onProductionTypeChange("material")}
|
|
>
|
|
원자재
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 2행: 필터 버튼들 */}
|
|
<div className="pop-top-bar row-2">
|
|
<button
|
|
className={`pop-filter-btn ${selectedEquipment ? "active" : ""}`}
|
|
onClick={onEquipmentClick}
|
|
>
|
|
<span>{selectedEquipment?.name || "설비"}</span>
|
|
</button>
|
|
<button
|
|
className={`pop-filter-btn ${selectedProcess ? "active" : ""}`}
|
|
onClick={onProcessClick}
|
|
disabled={!selectedEquipment}
|
|
>
|
|
<span>{selectedProcess?.name || "공정"}</span>
|
|
</button>
|
|
<button
|
|
className={`pop-filter-btn ${showMyWorkOnly ? "active" : ""}`}
|
|
onClick={onMyWorkToggle}
|
|
>
|
|
내 작업
|
|
</button>
|
|
|
|
<div className="pop-spacer" />
|
|
|
|
<button className="pop-filter-btn primary" onClick={onSearchClick}>
|
|
조회
|
|
</button>
|
|
<button className="pop-filter-btn" onClick={onSettingsClick}>
|
|
설정
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|