매매 시그널 알림 화면 수정

frontend/src/components/SettingsPage.tsx

@@ -43,6 +43,7 @@ import {
   LINE_WIDTH_OPTIONS,
 } from '../utils/plotColorUtils';
 import TimezonePicker from './TimezonePicker';
+import ChartTimeFormatPicker from './ChartTimeFormatPicker';
 import AdminPasswordGate from './AdminPasswordGate';
 import AdminSettingsPanel from './AdminSettingsPanel';
 import {
@@ -152,6 +153,8 @@ interface SettingsPageProps {
   onFcmTest?: () => void;
   displayTimezone?: string;
   onDisplayTimezoneChange?: (tz: string) => void;
+  chartTimeFormat?: string;
+  onChartTimeFormatChange?: (format: string) => void;
   menuPermissions?: Record<string, boolean>;
   verificationIssueNotify?: boolean;
   onVerificationIssueNotify?: (v: boolean) => void;
@@ -651,6 +654,8 @@ interface ChartPanelProps {
   onChartLegendOptionsChange?: (patch: Partial<ChartLegendVisibility>) => void;
   chartPaneSeparator?: ChartPaneSeparatorOptions;
   onChartPaneSeparatorChange?: (opts: ChartPaneSeparatorOptions) => void;
+  chartTimeFormat?: string;
+  onChartTimeFormatChange?: (format: string) => void;
 }
 
 const ChartPanel: React.FC<ChartPanelProps> = ({
@@ -667,6 +672,8 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
   onChartLegendOptionsChange,
   chartPaneSeparator,
   onChartPaneSeparatorChange,
+  chartTimeFormat = 'MM-dd HH:mm',
+  onChartTimeFormatChange,
 }) => {
   const [upColor,   setUp]   = useState('#26a69a');
   const [downColor, setDown] = useState('#ef5350');
@@ -678,6 +685,18 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
 
   return (
     <>
+      <SettingSection title="시간축 표시">
+        <SettingRow
+          label="시간 포맷"
+          desc="차트 하단 시간축·크로스헤어에 표시되는 날짜·시간 형식입니다. 프리셋을 선택하거나 직접 입력할 수 있습니다."
+        >
+          <ChartTimeFormatPicker
+            value={chartTimeFormat}
+            onChange={fmt => onChartTimeFormatChange?.(fmt)}
+          />
+        </SettingRow>
+      </SettingSection>
+
       <SettingSection title="실시간 차트 데이터">
         <SettingRow label="데이터 소스" desc="Blueprint 권장: 백엔드 STOMP. 직연결은 업비트 WebSocket을 프론트가 직접 수신합니다.">
           <select className="stg-select" value={chartRealtimeSource}
@@ -1577,6 +1596,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
   onFcmTest,
   displayTimezone = 'Asia/Seoul',
   onDisplayTimezoneChange,
+  chartTimeFormat = 'MM-dd HH:mm',
+  onChartTimeFormatChange,
   menuPermissions,
   verificationIssueNotify = true,
   onVerificationIssueNotify,
@@ -1626,6 +1647,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
           onChartLegendOptionsChange={onChartLegendOptionsChange}
           chartPaneSeparator={chartPaneSeparator}
           onChartPaneSeparatorChange={onChartPaneSeparatorChange}
+          chartTimeFormat={chartTimeFormat}
+          onChartTimeFormatChange={onChartTimeFormatChange}
         />
       );
       case 'indicators':