일목균형표 수정

frontend/src/components/IndicatorSettingsSections.tsx

@@ -18,6 +18,7 @@ import NumericParamInput from './NumericParamInput';
 import PlotLineStylePicker from './PlotLineStylePicker';
 import ColorInput from './ColorInput';
 import { colorToRgbaString, cloudColorOpacityPercent } from '../utils/ichimokuConfig';
+import { resolveHistogramUpColor, resolveHistogramDownColor } from '../utils/plotColorUtils';
 import type { IchimokuCloudColors } from '../utils/ichimokuConfig';
 
 const SRC_OPTIONS = ['close', 'open', 'high', 'low', 'hl2', 'hlc3', 'ohlc4'];
@@ -187,9 +188,29 @@ export const PlotSettingsRow: React.FC<{
           </div>
         )}
         {!inputsOnly && (
-          isHistogram ? (
+          isHistogram && indicatorType === 'MACD' ? (
+            <div className="ism-hist-colors">
+              <div className="ism-hist-color-field">
+                <span className="ism-style-label">상승</span>
+                <ColorInput
+                  value={resolveHistogramUpColor(plot)}
+                  disabled={!enabled}
+                  onChange={v => onPlotStyle(plotIndex, { histogramUpColor: v, color: v })}
+                />
+              </div>
+              <div className="ism-hist-color-field">
+                <span className="ism-style-label">하락</span>
+                <ColorInput
+                  value={resolveHistogramDownColor(plot)}
+                  disabled={!enabled}
+                  onChange={v => onPlotStyle(plotIndex, { histogramDownColor: v })}
+                />
+              </div>
+            </div>
+          ) : isHistogram ? (
             <ColorInput
               value={plot.color}
+              disabled={!enabled}
               onChange={v => onPlotStyle(plotIndex, { color: v })}
             />
           ) : (
@@ -339,45 +360,72 @@ export const SettingsOutputFooter: React.FC<{
 export const IchimokuCloudSection: React.FC<{
   cloudColors: IchimokuCloudColors;
   onChange: (patch: Partial<IchimokuCloudColors>) => void;
-}> = ({ cloudColors, onChange }) => (
-  <>
-    <div className="ism-ichimoku-cloud-divider" />
-    <div className="ism-ichimoku-cloud-section">
-      <h4 className="ism-ichimoku-cloud-title">구름 영역 색상</h4>
-      <p className="ism-ichimoku-cloud-hint">
-        선행스팬1·선행스팬2가 모두 켜져 있을 때만 구름이 표시됩니다.
-      </p>
-      <div className="ism-ichimoku-cloud-grid">
-        <div className="ism-ichimoku-cloud-card">
-          <span className="ism-ichimoku-cloud-card-label">상승 구름 (선행1 &gt; 선행2)</span>
-          <div className="ism-ichimoku-cloud-card-row">
-            <ColorInput
-              value={cloudColors.bullishColor}
-              onChange={v => onChange({ bullishColor: v })}
-            />
+}> = ({ cloudColors, onChange }) => {
+  const bullishOn = cloudColors.bullishVisible !== false;
+  const bearishOn = cloudColors.bearishVisible !== false;
+
+  return (
+    <>
+      <div className="ism-ichimoku-cloud-divider" />
+      <div className="ism-ichimoku-cloud-section">
+        <h4 className="ism-ichimoku-cloud-title">구름 영역</h4>
+        <p className="ism-ichimoku-cloud-hint">
+          선행스팬1·선행스팬2가 모두 켜져 있을 때만 구름을 그릴 수 있습니다. 상승·하락 구름은 각각 on/off 할 수 있습니다.
+        </p>
+        <div className="ism-ichimoku-cloud-grid">
+          <div className={`ism-ichimoku-cloud-card${bullishOn ? '' : ' ism-ichimoku-cloud-card--off'}`}>
+            <div className="ism-ichimoku-cloud-card-head">
+              <label className="ism-toggle ism-ichimoku-cloud-toggle">
+                <input
+                  type="checkbox"
+                  checked={bullishOn}
+                  onChange={e => onChange({ bullishVisible: e.target.checked })}
+                />
+                <span className="ism-toggle-slider" />
+              </label>
+              <span className="ism-ichimoku-cloud-card-label">상승 구름 (선행1 &gt; 선행2)</span>
+            </div>
+            <div className="ism-ichimoku-cloud-card-row">
+              <ColorInput
+                value={cloudColors.bullishColor}
+                disabled={!bullishOn}
+                onChange={v => onChange({ bullishColor: v })}
+              />
+            </div>
+            <div className="ism-ichimoku-cloud-meta">
+              {colorToRgbaString(cloudColors.bullishColor)}
+              {' · '}투명도 {cloudColorOpacityPercent(cloudColors.bullishColor)}%
+            </div>
           </div>
-          <div className="ism-ichimoku-cloud-meta">
-            {colorToRgbaString(cloudColors.bullishColor)}
-            {' · '}투명도 {cloudColorOpacityPercent(cloudColors.bullishColor)}%
-          </div>
-        </div>
-        <div className="ism-ichimoku-cloud-card">
-          <span className="ism-ichimoku-cloud-card-label">하락 구름 (선행1 &lt; 선행2)</span>
-          <div className="ism-ichimoku-cloud-card-row">
-            <ColorInput
-              value={cloudColors.bearishColor}
-              onChange={v => onChange({ bearishColor: v })}
-            />
-          </div>
-          <div className="ism-ichimoku-cloud-meta">
-            {colorToRgbaString(cloudColors.bearishColor)}
-            {' · '}투명도 {cloudColorOpacityPercent(cloudColors.bearishColor)}%
+          <div className={`ism-ichimoku-cloud-card${bearishOn ? '' : ' ism-ichimoku-cloud-card--off'}`}>
+            <div className="ism-ichimoku-cloud-card-head">
+              <label className="ism-toggle ism-ichimoku-cloud-toggle">
+                <input
+                  type="checkbox"
+                  checked={bearishOn}
+                  onChange={e => onChange({ bearishVisible: e.target.checked })}
+                />
+                <span className="ism-toggle-slider" />
+              </label>
+              <span className="ism-ichimoku-cloud-card-label">하락 구름 (선행1 &lt; 선행2)</span>
+            </div>
+            <div className="ism-ichimoku-cloud-card-row">
+              <ColorInput
+                value={cloudColors.bearishColor}
+                disabled={!bearishOn}
+                onChange={v => onChange({ bearishColor: v })}
+              />
+            </div>
+            <div className="ism-ichimoku-cloud-meta">
+              {colorToRgbaString(cloudColors.bearishColor)}
+              {' · '}투명도 {cloudColorOpacityPercent(cloudColors.bearishColor)}%
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </>
-);
+    </>
+  );
+};
 
 /* ── 볼린저밴드 백그라운드 (업비트 모습 탭) ───────────────────── */
 export const BollingerBackgroundRow: React.FC<{