위젯 종료버튼 겹침문제 수정

frontend/src/widgets/WidgetCandleChartPanel.tsx

@@ -22,8 +22,9 @@ import type { ChartManager } from '../utils/ChartManager';
 import {
   buildVirtualTradingChartIndicators,
   resolveStrategyPrimaryTimeframe,
-  resolveStrategyTimeframes,
 } from '../utils/strategyToChartIndicators';
+import { mergeWidgetTimeframeOptions } from '../utils/chartWidgetTimeframes';
+import WidgetTimeframePicker from './panels/WidgetTimeframePicker';
 import { timeframeToCandleType } from '../utils/chartCandleType';
 import { DISPLAY_COUNT } from '../hooks/useUpbitData';
 import { getKoreanName } from '../utils/marketNameCache';
@@ -76,7 +77,7 @@ const WidgetCandleChartPanel: React.FC<Props> = ({
   chartRealtimeSource = 'BACKEND_STOMP',
 }) => {
   const { getParams, getVisualConfig } = useIndicatorSettings();
-  const tfOptions = useMemo(() => resolveStrategyTimeframes(strategy), [strategy]);
+  const tfOptions = useMemo(() => mergeWidgetTimeframeOptions(strategy), [strategy]);
   const [timeframe, setTimeframe] = useState<Timeframe>(
     () => resolveStrategyPrimaryTimeframe(strategy),
   );
@@ -402,20 +403,11 @@ const WidgetCandleChartPanel: React.FC<Props> = ({
           <span className="wd-candle-chart-market-sym">{market}</span>
         </button>
 
-        {tfOptions.length > 1 && (
-          <div className="wd-candle-chart-tf-row">
-            {tfOptions.map(tf => (
-              <button
-                key={tf}
-                type="button"
-                className={`wd-candle-chart-tf${timeframe === tf ? ' wd-candle-chart-tf--on' : ''}`}
-                onClick={() => setTimeframe(tf)}
-              >
-                {tf}
-              </button>
-            ))}
-          </div>
-        )}
+        <WidgetTimeframePicker
+          options={tfOptions}
+          value={timeframe}
+          onChange={setTimeframe}
+        />
 
         <div className="wd-candle-chart-header-actions">
           <div className="wd-candle-chart-toolbar-toggles" role="group" aria-label="차트 툴바 표시">

frontend/src/widgets/hosts/MiniChartWidgetHost.tsx

@@ -1,19 +1,39 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PaperMiniChart from '../../components/paper/PaperMiniChart';
 import { useWidgetDashboard } from '../WidgetDashboardContext';
 import WidgetPanelHeader from '../panels/WidgetPanelHeader';
+import WidgetTimeframePicker from '../panels/WidgetTimeframePicker';
+import { WIDGET_CHART_TF_OPTIONS } from '../../utils/chartWidgetTimeframes';
 import { resolveName } from '../widgetMarketUtils';
+import type { Timeframe } from '../../types';
 
 const MiniChartWidgetHost: React.FC = () => {
   const { selectedMarket, theme, tickers } = useWidgetDashboard();
   const ticker = tickers.get(selectedMarket);
+  const [timeframe, setTimeframe] = useState<Timeframe>('1h');
 
   return (
     <div className="wd-widget-host wd-widget-host--panel wd-widget-host--mini-chart">
       <WidgetPanelHeader title="미니 차트" />
-      <div className="wd-panel-subline">{resolveName(selectedMarket, ticker)} · {selectedMarket}</div>
+      <div className="wd-chart-symbol-tf-bar">
+        <span className="wd-chart-symbol-label">
+          {resolveName(selectedMarket, ticker)} · {selectedMarket}
+        </span>
+        <WidgetTimeframePicker
+          options={WIDGET_CHART_TF_OPTIONS}
+          value={timeframe}
+          onChange={setTimeframe}
+        />
+      </div>
       <div className="wd-mini-chart-wrap">
-        <PaperMiniChart market={selectedMarket} theme={theme} />
+        <PaperMiniChart
+          market={selectedMarket}
+          theme={theme}
+          timeframe={timeframe}
+          onTimeframeChange={setTimeframe}
+          hideChartHead
+          hideTimeframeRow
+        />
       </div>
     </div>
   );

frontend/src/widgets/hosts/StrategyChartWidgetHost.tsx

@@ -23,6 +23,7 @@ const StrategyChartWidgetHost: React.FC<{ config?: Record<string, unknown> }> =
         strategyId={strategyId}
         theme={theme}
         showHoverToolbar={false}
+        enableTimeframePicker
       />
     </div>
   );

frontend/src/widgets/panels/WidgetTimeframePicker.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { Timeframe } from '../../types';
+
+interface Props {
+  options: Timeframe[];
+  value: Timeframe;
+  onChange: (tf: Timeframe) => void;
+  className?: string;
+  'aria-label'?: string;
+}
+
+/** 위젯 차트 — 종목 우측 시간봉 버튼 그룹 */
+const WidgetTimeframePicker: React.FC<Props> = ({
+  options,
+  value,
+  onChange,
+  className = '',
+  'aria-label': ariaLabel = '시간봉',
+}) => (
+  <div
+    className={`wd-candle-chart-tf-row${className ? ` ${className}` : ''}`}
+    role="group"
+    aria-label={ariaLabel}
+  >
+    {options.map(tf => (
+      <button
+        key={tf}
+        type="button"
+        className={`wd-candle-chart-tf${value === tf ? ' wd-candle-chart-tf--on' : ''}`}
+        aria-pressed={value === tf}
+        onClick={() => onChange(tf)}
+      >
+        {tf}
+      </button>
+    ))}
+  </div>
+);
+
+export default WidgetTimeframePicker;