전략 시간봉 오류 수정

frontend/src/hooks/useIndicatorSettings.ts

@@ -30,7 +30,8 @@ import {
   type IchimokuCloudColors,
   resolveIchimokuCloudColors,
 } from '../utils/ichimokuConfig';
-import type { IndicatorConfig } from '../types';
+import type { HlinesBackground, IndicatorConfig } from '../types';
+import { resolveBbBandBackground } from '../utils/bollingerConfig';
 import {
   loadIndicatorSettings,
   saveIndicatorSettings,
@@ -46,6 +47,16 @@ export interface IndicatorVisual {
   plots?:  PlotDef[];
   hlines?: HLineDef[];
   cloudColors?: IchimokuCloudColors;
+  /** 볼린저밴드 어퍼~로우어 배경 (업비트 백그라운드 그리기) */
+  bandBackground?: HlinesBackground;
+}
+
+/** getVisualConfig 반환 타입 */
+export interface IndicatorVisualConfig {
+  plots: PlotDef[];
+  hlines: HLineDef[];
+  cloudColors?: IchimokuCloudColors;
+  bandBackground?: HlinesBackground;
 }
 type VisualCache = Record<string, IndicatorVisual>;
 
@@ -204,12 +215,15 @@ export function useIndicatorSettings(sessionKey = 0) {
           hlines: cfg.hlines,
         };
         if (cfg.cloudColors) visual.cloudColors = cfg.cloudColors;
+        if (cfg.type === 'BollingerBands' && cfg.bandBackground) {
+          visual.bandBackground = cfg.bandBackground;
+        }
         return { type: cfg.type, visual };
       });
 
       await Promise.all(
         visualEntries.map(({ type, visual }) =>
-          saveIndicatorVisualSettings(type, visual as { plots?: unknown[]; hlines?: unknown[]; cloudColors?: IchimokuCloudColors }),
+          saveIndicatorVisualSettings(type, visual),
         ),
       );
 
@@ -238,8 +252,8 @@ export function useIndicatorSettings(sessionKey = 0) {
     (
       type: string,
       defaultPlots?: PlotDef[],
-      defaultHlines?: HLineDef[]
-    ): { plots: PlotDef[]; hlines: HLineDef[]; cloudColors?: IchimokuCloudColors } => {
+      defaultHlines?: HLineDef[],
+    ): IndicatorVisualConfig => {
       const saved = _visualCache?.[type];
       const def = getIndicatorDef(type);
       const registryPlots = defaultPlots ?? def?.plots ?? [];
@@ -265,11 +279,16 @@ export function useIndicatorSettings(sessionKey = 0) {
         ? resolveIchimokuCloudColors(saved?.cloudColors ?? DEFAULT_ICHIMOKU_CLOUD_COLORS)
         : undefined;
 
+      const bandBackground = type === 'BollingerBands'
+        ? resolveBbBandBackground(saved?.bandBackground)
+        : undefined;
+
       // 깊은 복사: 여러 슬롯이 같은 참조를 공유하지 않도록
       return {
         plots:  plots.map(p => ({ ...p })),
         hlines: hlines.map(h => ({ ...h })),
         cloudColors: cloudColors ? { ...cloudColors } : undefined,
+        bandBackground: bandBackground ? { ...bandBackground } : undefined,
       };
     },
     []
@@ -285,15 +304,19 @@ export function useIndicatorSettings(sessionKey = 0) {
       plots?: PlotDef[],
       hlines?: HLineDef[],
       cloudColors?: IchimokuCloudColors,
+      bandBackground?: HlinesBackground,
     ) => {
       const visual: IndicatorVisual = { plots, hlines };
       if (cloudColors) visual.cloudColors = cloudColors;
+      if (type === 'BollingerBands') {
+        visual.bandBackground = bandBackground ?? resolveBbBandBackground(_visualCache?.[type]?.bandBackground);
+      }
       if (_visualCache) {
         _visualCache = { ..._visualCache, [type]: visual };
       } else {
         _visualCache = { [type]: visual };
       }
-      saveIndicatorVisualSettings(type, visual as { plots?: unknown[]; hlines?: unknown[]; cloudColors?: IchimokuCloudColors }).catch(err =>
+      saveIndicatorVisualSettings(type, visual).catch(err =>
         console.error(`[useIndicatorSettings] saveVisual failed for ${type}`, err)
       );
       notifyIndicatorSettingsChanged();