518990171e
- Integrated monitoring settings and theme management into the Equipment, Production, and Quality monitoring pages. - Updated auto-refresh functionality to utilize user-defined settings for refresh intervals. - Improved UI elements with dynamic theming for better visual consistency across COMPANY_10, COMPANY_16, and COMPANY_29. - Added settings button to access monitoring configuration, enhancing user experience in managing monitoring preferences. These changes aim to provide a more customizable and user-friendly interface for monitoring operations across multiple companies.
98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
import type { MonitoringTheme } from "@/types/monitoringSettings";
|
|
|
|
interface ThemeClasses {
|
|
root: string;
|
|
card: string;
|
|
cardBorder: string;
|
|
header: string;
|
|
headerText: string;
|
|
text: string;
|
|
mutedText: string;
|
|
divider: string;
|
|
tableHeader: string;
|
|
tableRow: string;
|
|
tableRowHover: string;
|
|
/** CSS 변수 인라인 오버라이드 (--color-* Tailwind 테마 변수 직접 지정) */
|
|
cssVars?: React.CSSProperties;
|
|
}
|
|
|
|
// --color-* 변수를 직접 오버라이드하여 bg-background, bg-card 등이 즉시 반영되도록 함
|
|
const DARK_CSS_VARS: React.CSSProperties = {
|
|
"--color-background": "hsl(222 47% 6%)",
|
|
"--color-foreground": "hsl(210 20% 95%)",
|
|
"--color-card": "hsl(220 40% 9%)",
|
|
"--color-card-foreground": "hsl(210 20% 95%)",
|
|
"--color-popover": "hsl(220 40% 9%)",
|
|
"--color-popover-foreground": "hsl(210 20% 95%)",
|
|
"--color-primary": "hsl(217 91% 65%)",
|
|
"--color-primary-foreground": "hsl(0 0% 100%)",
|
|
"--color-secondary": "hsl(220 25% 14%)",
|
|
"--color-secondary-foreground": "hsl(210 20% 90%)",
|
|
"--color-muted": "hsl(220 20% 13%)",
|
|
"--color-muted-foreground": "hsl(215 15% 58%)",
|
|
"--color-accent": "hsl(220 25% 16%)",
|
|
"--color-accent-foreground": "hsl(210 20% 90%)",
|
|
"--color-border": "hsl(220 20% 18%)",
|
|
"--color-input": "hsl(220 20% 18%)",
|
|
"--color-ring": "hsl(217 91% 65%)",
|
|
"--color-destructive": "hsl(0 72% 51%)",
|
|
"--color-destructive-foreground": "hsl(0 0% 100%)",
|
|
} as React.CSSProperties;
|
|
|
|
const BLUE_CSS_VARS: React.CSSProperties = {
|
|
"--color-background": "hsl(215 50% 8%)",
|
|
"--color-foreground": "hsl(210 20% 95%)",
|
|
"--color-card": "hsl(215 45% 12%)",
|
|
"--color-card-foreground": "hsl(210 20% 95%)",
|
|
"--color-popover": "hsl(215 45% 12%)",
|
|
"--color-popover-foreground": "hsl(210 20% 95%)",
|
|
"--color-primary": "hsl(217 91% 65%)",
|
|
"--color-primary-foreground": "hsl(0 0% 100%)",
|
|
"--color-secondary": "hsl(215 30% 14%)",
|
|
"--color-secondary-foreground": "hsl(210 20% 90%)",
|
|
"--color-muted": "hsl(215 35% 16%)",
|
|
"--color-muted-foreground": "hsl(215 15% 58%)",
|
|
"--color-accent": "hsl(215 35% 18%)",
|
|
"--color-accent-foreground": "hsl(210 20% 90%)",
|
|
"--color-border": "hsl(215 30% 20%)",
|
|
"--color-input": "hsl(215 30% 20%)",
|
|
"--color-ring": "hsl(217 91% 65%)",
|
|
"--color-destructive": "hsl(0 72% 51%)",
|
|
"--color-destructive-foreground": "hsl(0 0% 100%)",
|
|
} as React.CSSProperties;
|
|
|
|
const SHARED_CLASSES = {
|
|
card: "bg-card",
|
|
cardBorder: "border-border",
|
|
header: "bg-card",
|
|
headerText: "text-foreground",
|
|
text: "text-foreground",
|
|
mutedText: "text-muted-foreground",
|
|
divider: "border-border",
|
|
tableHeader: "bg-muted text-muted-foreground",
|
|
tableRow: "bg-card text-card-foreground",
|
|
tableRowHover: "hover:bg-muted/50",
|
|
};
|
|
|
|
const THEME_MAP: Record<MonitoringTheme, ThemeClasses> = {
|
|
dark: {
|
|
root: "bg-background text-foreground",
|
|
...SHARED_CLASSES,
|
|
cssVars: DARK_CSS_VARS,
|
|
},
|
|
blue: {
|
|
root: "bg-background text-foreground",
|
|
...SHARED_CLASSES,
|
|
cssVars: BLUE_CSS_VARS,
|
|
},
|
|
light: {
|
|
root: "bg-background text-foreground",
|
|
...SHARED_CLASSES,
|
|
// cssVars 없음 → 시스템 기본 라이트 변수 사용
|
|
},
|
|
};
|
|
|
|
export function getMonitoringTheme(theme: MonitoringTheme): ThemeClasses {
|
|
return THEME_MAP[theme] ?? THEME_MAP.dark;
|
|
}
|