goldenChart/frontend_golden/DISPARITY_LINE_TOGGLE_FIX.md

# 이격도 선 ON/OFF 설정 문제 수정 완료

## 🔍 문제점

이격도 설정에서 초단기, 단기, 중기, 장기 중 항목을 OFF 하고 적용해도 차트에는 여전히 모든 그래프가 표시되는 문제

## 🐛 발견된 원인

### 1. **CandlestickChart.tsx - visible 속성 누락**

```typescript
// ❌ 문제: visible 속성이 없어서 설정과 무관하게 모든 선 표시
const ultraShortSeries = subChart.addLineSeries({ 
  color: colorSettings?.disparityUltraShortColor || '#FF6B35', 
  lineWidth: (colorSettings?.disparityUltraShortWidth || 1.5) as any,
  lineStyle: colorSettings?.disparityUltraShortLineStyle ? getLineStyle(colorSettings.disparityUltraShortLineStyle) : 0,
  // visible 속성 없음!
});
```

### 2. **IndicatorSettingsTab.tsx - ON/OFF 스위치 UI 누락**

- 이격도 각 선(초단기, 단기, 중기, 장기)의 ON/OFF 스위치가 없음
- 사용자가 특정 선만 표시하고 싶어도 설정할 방법이 없음

## ✅ 수정 사항

### 1. **CandlestickChart.tsx - visible 속성 추가**

```typescript
// ✅ 수정: visible 속성 추가하여 설정에 따라 표시/숨김
// 초단기 이격도 (5일)
const ultraShortSeries = subChart.addLineSeries({ 
  color: colorSettings?.disparityUltraShortColor || '#FF6B35', 
  lineWidth: (colorSettings?.disparityUltraShortWidth || 1.5) as any,
  lineStyle: colorSettings?.disparityUltraShortLineStyle ? getLineStyle(colorSettings.disparityUltraShortLineStyle) : 0,
  visible: indicatorSettings?.disparityUltraShortEnabled ?? true, // ✅ 추가
});

// 단기 이격도 (20일)
const shortSeries = subChart.addLineSeries({ 
  color: colorSettings?.disparityShortColor || '#4CAF50', 
  lineWidth: (colorSettings?.disparityShortWidth || 2) as any,
  lineStyle: colorSettings?.disparityShortLineStyle ? getLineStyle(colorSettings.disparityShortLineStyle) : 0,
  visible: indicatorSettings?.disparityShortEnabled ?? true, // ✅ 추가
});

// 중기 이격도 (60일)
const midSeries = subChart.addLineSeries({ 
  color: colorSettings?.disparityMidColor || '#2196F3', 
  lineWidth: (colorSettings?.disparityMidWidth || 2) as any,
  lineStyle: colorSettings?.disparityMidLineStyle ? getLineStyle(colorSettings.disparityMidLineStyle) : 0,
  visible: indicatorSettings?.disparityMidEnabled ?? true, // ✅ 추가
});

// 장기 이격도 (120일)
const longSeries = subChart.addLineSeries({ 
  color: colorSettings?.disparityLongColor || '#9C27B0', 
  lineWidth: (colorSettings?.disparityLongWidth || 2) as any,
  lineStyle: colorSettings?.disparityLongLineStyle ? getLineStyle(colorSettings.disparityLongLineStyle) : 0,
  visible: indicatorSettings?.disparityLongEnabled ?? true, // ✅ 추가
});
```

### 2. **IndicatorSettingsTab.tsx - ON/OFF 스위치 UI 추가**

```typescript
{/* 각 선 활성화 스위치 */}
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 'bold' }}>
  선 표시 설정
</Typography>
<Grid container spacing={2} sx={{ mb: 3 }}>
  <Grid item xs={6} md={3}>
    <FormControlLabel
      control={
        <Switch
          checked={settings.disparityUltraShortEnabled ?? true}
          onChange={(e) => handleSettingChange({ disparityUltraShortEnabled: e.target.checked })}
        />
      }
      label="초단기 (5일)"
    />
  </Grid>
  <Grid item xs={6} md={3}>
    <FormControlLabel
      control={
        <Switch
          checked={settings.disparityShortEnabled ?? true}
          onChange={(e) => handleSettingChange({ disparityShortEnabled: e.target.checked })}
        />
      }
      label="단기 (20일)"
    />
  </Grid>
  <Grid item xs={6} md={3}>
    <FormControlLabel
      control={
        <Switch
          checked={settings.disparityMidEnabled ?? true}
          onChange={(e) => handleSettingChange({ disparityMidEnabled: e.target.checked })}
        />
      }
      label="중기 (60일)"
    />
  </Grid>
  <Grid item xs={6} md={3}>
    <FormControlLabel
      control={
        <Switch
          checked={settings.disparityLongEnabled ?? true}
          onChange={(e) => handleSettingChange({ disparityLongEnabled: e.target.checked })}
        />
      }
      label="장기 (120일)"
    />
  </Grid>
</Grid>

<Divider sx={{ my: 2 }} />

{/* 기간 설정 (비활성화된 선은 입력 비활성화) */}
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 'bold' }}>
  기간 설정
</Typography>
<Grid container spacing={3}>
  <Grid item xs={12} md={3}>
    <TextField
      fullWidth
      label="초단기 기간"
      type="number"
      value={settings.disparityUltraShortPeriod}
      onChange={(e) => handleSettingChange({ disparityUltraShortPeriod: Number(e.target.value) })}
      inputProps={{ min: 1, max: 20 }}
      helperText="기본값: 5일"
      disabled={!settings.disparityUltraShortEnabled} // ✅ 비활성화 시 입력 불가
    />
  </Grid>
  {/* 나머지 단기, 중기, 장기도 동일하게 disabled 속성 추가 */}
</Grid>
```

### 3. **IndicatorChart.tsx - 이미 올바르게 구현됨**

`IndicatorChart.tsx`는 이미 `visible` 속성이 올바르게 설정되어 있었습니다:

```typescript
visible: indicatorSettings.disparityUltraShortEnabled ?? true,
visible: indicatorSettings.disparityShortEnabled ?? true,
visible: indicatorSettings.disparityMidEnabled ?? true,
visible: indicatorSettings.disparityLongEnabled ?? true,
```

## 🔄 설정 변경 흐름

### 1. **사용자가 설정 변경**
```
보조지표 설정 > 이격도 > 선 표시 설정
```

### 2. **Context 업데이트**
```typescript
// IndicatorSettingsContext
disparityUltraShortEnabled: boolean
disparityShortEnabled: boolean
disparityMidEnabled: boolean
disparityLongEnabled: boolean
```

### 3. **차트 자동 재렌더링**
```typescript
// CandlestickChart.tsx
useEffect(() => {
  // 서브차트 재생성
}, [subPanels, data?.length, indicatorData?.length, themeMode, 
    indicatorSettings, colorSettings]); // ✅ indicatorSettings 변경 감지
```

### 4. **visible 속성 적용**
```typescript
// 각 시리즈 생성 시 visible 속성 적용
const ultraShortSeries = subChart.addLineSeries({ 
  // ...
  visible: indicatorSettings?.disparityUltraShortEnabled ?? true,
});
```

## ✅ 테스트 시나리오

### 1. **모든 선 ON (기본값)**
- [x] 초단기, 단기, 중기, 장기 모두 표시

### 2. **초단기만 ON**
- [x] 초단기만 표시
- [x] 단기, 중기, 장기 숨김
- [x] 기준선은 초단기 시리즈에 표시

### 3. **초단기 OFF, 단기만 ON**
- [x] 단기만 표시
- [x] 초단기, 중기, 장기 숨김
- [x] 기준선은 단기 시리즈에 표시

### 4. **중기와 장기만 ON**
- [x] 중기와 장기만 표시
- [x] 초단기, 단기 숨김
- [x] 기준선은 중기 시리즈에 표시

### 5. **장기만 ON**
- [x] 장기만 표시
- [x] 초단기, 단기, 중기 숨김
- [x] 기준선은 장기 시리즈에 표시

### 6. **설정 변경 시 즉시 반영**
- [x] 스위치 ON/OFF 시 차트 즉시 업데이트
- [x] 비활성화된 선의 기간 설정 입력 비활성화

## 📊 기본값

```typescript
// IndicatorSettingsContext
disparityUltraShortEnabled: true  // 초단기 (5일)
disparityShortEnabled: true       // 단기 (20일)
disparityMidEnabled: true         // 중기 (60일)
disparityLongEnabled: true        // 장기 (120일)
```

## 🎯 결과

**이제 이격도 설정에서 각 선(초단기, 단기, 중기, 장기)의 ON/OFF가 완벽하게 동작합니다!**

✅ 초단기 ON/OFF 정상 작동  
✅ 단기 ON/OFF 정상 작동  
✅ 중기 ON/OFF 정상 작동  
✅ 장기 ON/OFF 정상 작동  
✅ 설정 변경 즉시 차트 반영  
✅ 비활성화된 선의 기간 설정 입력 비활성화  
✅ 기준선은 활성화된 선 중 하나에 표시  
✅ 빌드 성공 (0 에러)  

## 🚀 배포

```bash
cd /Users/macbook/dev/goldenAnalysis
docker compose down
docker compose up --build
```

또는

```bash
cd frontend
npm run build
```

---

**수정 완료일:** 2026-02-01  
**수정 파일:**
- `frontend/src/components/CandlestickChart.tsx` - visible 속성 추가
- `frontend/src/components/settings/IndicatorSettingsTab.tsx` - ON/OFF 스위치 UI 추가
- `frontend/src/components/IndicatorChart.tsx` - 이미 올바르게 구현됨 (수정 불필요)

## 📝 참고

### Context 설정 키

```typescript
interface IndicatorSettings {
  // ...
  disparityUltraShortEnabled: boolean;  // 초단기 활성화
  disparityShortEnabled: boolean;       // 단기 활성화
  disparityMidEnabled: boolean;         // 중기 활성화
  disparityLongEnabled: boolean;        // 장기 활성화
  disparityBaseLineEnabled: boolean;    // 기준선 활성화
  // ...
}
```

### localStorage 저장

설정 변경 시 자동으로 localStorage에 저장되어 다음 접속 시에도 유지됩니다.