개요 화면 공통 컴포넌트와 로케일 추가

common/core/components/overview/OverviewAxisNotes.tsx

@@ -0,0 +1,14 @@
+export function OverviewAxisNotes({
+  xAxisLabel,
+  yAxisLabel,
+}: {
+  xAxisLabel: string;
+  yAxisLabel: string;
+}) {
+  return (
+    <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+      <span>{xAxisLabel}</span>
+      <span>{yAxisLabel}</span>
+    </div>
+  );
+}

common/core/components/overview/OverviewMetric.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+
+export function OverviewMetric({
+  icon,
+  label,
+  value,
+}: {
+  icon: ReactNode;
+  label: string;
+  value: string;
+}) {
+  return (
+    <span className="inline-flex items-center gap-2 whitespace-nowrap text-sm">
+      <span className="text-muted-foreground">{icon}</span>
+      <span className="text-muted-foreground">{label}</span>
+      <span className="font-semibold tabular-nums">{value}</span>
+    </span>
+  );
+}

common/core/components/overview/OverviewSelectionChips.tsx

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+
+type OverviewSelectionChipOption = {
+  id: string;
+  label: ReactNode;
+};
+
+export function OverviewSelectionChips({
+  allLabel,
+  options,
+  selectedIds,
+  onSelectAll,
+  onToggle,
+}: {
+  allLabel: string;
+  options: OverviewSelectionChipOption[];
+  selectedIds: string[];
+  onSelectAll: () => void;
+  onToggle: (id: string) => void;
+}) {
+  const isAllSelected = selectedIds.length === 0;
+
+  return (
+    <div className="flex flex-wrap gap-2 rounded-xl border border-border/60 bg-card/60 p-3">
+      <label className="inline-flex items-center gap-2 rounded-full border border-border/60 px-3 py-1.5 text-xs">
+        <input
+          type="checkbox"
+          checked={isAllSelected}
+          onChange={onSelectAll}
+          className="h-3.5 w-3.5"
+        />
+        <span>{allLabel}</span>
+      </label>
+      {options.map((option) => (
+        <label
+          key={option.id}
+          className="inline-flex items-center gap-2 rounded-full border border-border/60 px-3 py-1.5 text-xs"
+        >
+          <input
+            type="checkbox"
+            checked={selectedIds.includes(option.id)}
+            onChange={() => onToggle(option.id)}
+            className="h-3.5 w-3.5"
+          />
+          <span>{option.label}</span>
+        </label>
+      ))}
+    </div>
+  );
+}

common/core/components/overview/index.ts

@@ -0,0 +1,3 @@
+export { OverviewMetric } from "./OverviewMetric";
+export { OverviewAxisNotes } from "./OverviewAxisNotes";
+export { OverviewSelectionChips } from "./OverviewSelectionChips";

common/locales/en.toml

@@ -86,6 +86,21 @@ theme_toggle = "Theme Toggle"
 unassigned = "Unassigned"
 unknown = "Unknown"
 
+[ui.common.overview]
+title = "Operational Status"
+
+[ui.common.chart.period]
+day = "Day"
+month = "Month"
+week = "Week"
+
+[ui.common.chart.series_summary]
+login_users = "Login {{login}} / Users {{subjects}}"
+
+[ui.common.chart.axis]
+x = "X-axis: Period"
+y = "Y-axis: Login Requests"
+
 [ui.common.badge]
 admin_only = "Admin only"
 command_only = "Command only"

common/locales/ko.toml

@@ -86,6 +86,21 @@ theme_toggle = "테마 전환"
 unassigned = "미배정"
 unknown = "Unknown"
 
+[ui.common.overview]
+title = "운영 현황"
+
+[ui.common.chart.period]
+day = "일"
+month = "월"
+week = "주"
+
+[ui.common.chart.series_summary]
+login_users = "로그인 {{login}} / 사용자 {{subjects}}"
+
+[ui.common.chart.axis]
+x = "X축: 기간"
+y = "Y축: 로그인 요청 수"
+
 [ui.common.badge]
 admin_only = "Admin only"
 command_only = "Command only"

common/locales/template.toml

@@ -86,6 +86,21 @@ theme_toggle = ""
 unassigned = ""
 unknown = ""
 
+[ui.common.overview]
+title = ""
+
+[ui.common.chart.period]
+day = ""
+month = ""
+week = ""
+
+[ui.common.chart.series_summary]
+login_users = ""
+
+[ui.common.chart.axis]
+x = ""
+y = ""
+
 [ui.common.badge]
 admin_only = ""
 command_only = ""