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

frontend/src/components/paper/PaperMiniChart.tsx

@@ -2,8 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createChart, CandlestickSeries, type IChartApi, type ISeriesApi, type Time, ColorType } from 'lightweight-charts';
 import type { Theme, Timeframe } from '../../types';
 import { fetchUpbitCandles } from '../../utils/upbitApi';
-
-const TF_OPTIONS: Timeframe[] = ['1m', '5m', '10m', '15m', '1h', '4h', '1D'];
+import { WIDGET_CHART_TF_OPTIONS } from '../../utils/chartWidgetTimeframes';
 
 interface Props {
   market: string;
@@ -11,6 +10,10 @@ interface Props {
   wsLabel?: string;
   timeframe?: Timeframe;
   onTimeframeChange?: (tf: Timeframe) => void;
+  /** 위젯 헤더에 시간봉이 있을 때 내부 행 숨김 */
+  hideTimeframeRow?: boolean;
+  /** 위젯 임베드 시 상단 타이틀·배지 숨김 */
+  hideChartHead?: boolean;
 }
 
 function readChartTheme(container: HTMLElement | null) {
@@ -33,6 +36,8 @@ const PaperMiniChart: React.FC<Props> = ({
   wsLabel = 'WebSocket <100ms',
   timeframe: timeframeProp,
   onTimeframeChange,
+  hideTimeframeRow = false,
+  hideChartHead = false,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const chartRef = useRef<IChartApi | null>(null);
@@ -159,24 +164,28 @@ const PaperMiniChart: React.FC<Props> = ({
 
   return (
     <div className="ptd-chart-wrap">
-      <div className="ptd-chart-head">
-        <span className="ptd-chart-title">실시간 분석 차트</span>
-        <span className="ptd-ws-badge">{wsLabel} 실시간 데이터 반영</span>
-      </div>
+      {!hideChartHead && (
+        <div className="ptd-chart-head">
+          <span className="ptd-chart-title">실시간 분석 차트</span>
+          <span className="ptd-ws-badge">{wsLabel} 실시간 데이터 반영</span>
+        </div>
+      )}
       <div ref={containerRef} className="ptd-chart-canvas" />
       {loading && <div className="ptd-chart-loading">차트 로딩…</div>}
-      <div className="ptd-tf-row">
-        {TF_OPTIONS.map(tf => (
-          <button
-            key={tf}
-            type="button"
-            className={`ptd-tf-btn${timeframe === tf ? ' ptd-tf-btn--active' : ''}`}
-            onClick={() => setTimeframe(tf)}
-          >
-            {tf}
-          </button>
-        ))}
-      </div>
+      {!hideTimeframeRow && (
+        <div className="ptd-tf-row">
+          {WIDGET_CHART_TF_OPTIONS.map(tf => (
+            <button
+              key={tf}
+              type="button"
+              className={`ptd-tf-btn${timeframe === tf ? ' ptd-tf-btn--active' : ''}`}
+              onClick={() => setTimeframe(tf)}
+            >
+              {tf}
+            </button>
+          ))}
+        </div>
+      )}
     </div>
   );
 };