"use client"; import React, { useState, useEffect, ReactNode } from "react"; import { useRouter } from "next/navigation"; interface PopShellProps { children: ReactNode; showBanner?: boolean; title?: string; showBack?: boolean; } export function PopShell({ children, showBanner = true, title, showBack = false }: PopShellProps) { const router = useRouter(); const [mounted, setMounted] = useState(false); const [hours, setHours] = useState("00"); const [minutes, setMinutes] = useState("00"); const [seconds, setSeconds] = useState("00"); const [dateStr, setDateStr] = useState("2026-01-01"); const [colonVisible, setColonVisible] = useState(true); useEffect(() => { setMounted(true); function tick() { const now = new Date(); setHours(String(now.getHours()).padStart(2, "0")); setMinutes(String(now.getMinutes()).padStart(2, "0")); setSeconds(String(now.getSeconds()).padStart(2, "0")); setDateStr( `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}` ); } tick(); const clockInterval = setInterval(tick, 1000); const blinkInterval = setInterval(() => { setColonVisible((v) => !v); }, 500); return () => { clearInterval(clockInterval); clearInterval(blinkInterval); }; }, []); const marqueeText = "[공지] 금일 오후 3시 전체 안전교육 실시 예정입니다. 전 직원 필참 바랍니다. \u00a0\u00a0|\u00a0\u00a0 [알림] 내일 설비 정기점검으로 인한 3호기 가동 중지 예정 \u00a0\u00a0|\u00a0\u00a0 [안내] 4월 생산실적 우수팀 발표 - 생산1팀 축하드립니다!"; return (
{/* ===== HEADER ===== */}
{/* Left: Back + Logo + Company */}
{showBack && ( )}
router.push("/pop/home")} >
{title ? ( {title} ) : ( <> 탑씰 현장 관리 시스템 )}
{/* Center: Clock (desktop) */}
{mounted && ( <>
{hours} : {minutes} : {seconds}
{dateStr} )}
{/* Right: Mobile clock + Profile */}
{/* Mobile clock */} {mounted && (
{hours}:{minutes}
)}
{/* Profile */}
김철수 생산1팀
김
{/* ===== NOTICE BANNER (Marquee) ===== */} {showBanner &&
📢 공지
{marqueeText}
} {/* ===== MAIN CONTENT ===== */}
{children}
{/* ===== FOOTER ===== */} {/* Marquee keyframes */}
); }