goldenChart/frontend_golden/DISPARITY_BASELINE_FIX.md

# 이격도 기준선 설정 문제 수정 완료

## 🔍 문제점

이격도 보조지표 설정에서 기준선(100) ON/OFF 및 색상, 선 유형, 굵기 변경 시 차트에 제대로 반영되지 않는 문제

## 🐛 발견된 원인

### 1. **CandlestickChart.tsx - 기준선이 초단기 시리즈에만 고정**

```typescript
// ❌ 문제: ultraShortSeries에만 기준선 추가
if (indicatorSettings && indicatorSettings.disparityBaseLineEnabled) {
  ultraShortSeries.createPriceLine({ 
    price: 100, 
    color: colorSettings?.disparityBaseLineColor || '#9e9e9e', 
    // ...
  });
}
```

**문제점:**
- 초단기 이격도가 비활성화되면 기준선도 함께 사라짐
- 다른 이격도 선(단기, 중기, 장기)만 활성화되어도 기준선이 표시되지 않음

### 2. **설정 UI 누락**

`IndicatorSettingsTab.tsx`에 이격도 기준선 설정 UI가 없음:
- ✅ Williams %R, TRIX 등 다른 지표는 기준선 설정 UI 존재
- ❌ 이격도는 기준선 설정 UI 없음

## ✅ 수정 사항

### 1. **CandlestickChart.tsx - 기준선을 visible 시리즈에 동적 할당**

```typescript
// ✅ 수정: visible인 첫 번째 시리즈에 기준선 추가
if (indicatorSettings && (indicatorSettings.disparityBaseLineEnabled ?? true)) {
  // visible인 시리즈 찾기 (우선순위: 초단기 > 단기 > 중기 > 장기)
  const visibleSeries = 
    (indicatorSettings.disparityUltraShortEnabled ?? true) ? ultraShortSeries :
    (indicatorSettings.disparityShortEnabled ?? true) ? shortSeries :
    (indicatorSettings.disparityMidEnabled ?? true) ? midSeries :
    longSeries; // 기본값: 장기 (마지막 시리즈)
  
  visibleSeries.createPriceLine({ 
    price: 100, 
    color: colorSettings?.disparityBaseLineColor || '#999999', 
    lineWidth: (colorSettings?.disparityBaseLineWidth || 1) as any, 
    lineStyle: colorSettings?.disparityBaseLineStyle ? getLineStyle(colorSettings.disparityBaseLineStyle) : 2, 
    axisLabelVisible: false,
    title: ''
  });
}
```

**개선 효과:**
- ✅ 초단기 OFF 시에도 기준선 유지
- ✅ 어떤 이격도 선이 활성화되어 있어도 기준선 표시
- ✅ 우선순위에 따라 적절한 시리즈에 기준선 추가

### 2. **IndicatorSettingsTab.tsx - 기준선 설정 UI 추가**

```typescript
{/* 기준선 설정 */}
<Typography variant="subtitle2" sx={{ mt: 3, mb: 2, fontWeight: 'bold' }}>
  기준선 스타일 설정
</Typography>
<Grid container spacing={2}>
  <Grid item xs={12} md={12}>
    <Box sx={{ p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1 }}>
      <FormControlLabel
        control={
          <Switch
            checked={settings.disparityBaseLineEnabled ?? true}
            onChange={(e) => handleSettingChange({ disparityBaseLineEnabled: e.target.checked })}
          />
        }
        label="기준선 표시 (100)"
        sx={{ mb: 2 }}
      />
      <Grid container spacing={2}>
        <Grid item xs={12} md={4}>
          <TextField
            fullWidth
            label="색상"
            type="color"
            value={colors.disparityBaseLineColor}
            onChange={(e) => updateColors({ disparityBaseLineColor: e.target.value })}
            size="small"
            disabled={!settings.disparityBaseLineEnabled}
          />
        </Grid>
        <Grid item xs={12} md={4}>
          <TextField
            fullWidth
            label="굵기"
            type="number"
            value={colors.disparityBaseLineWidth}
            onChange={(e) => updateColors({ disparityBaseLineWidth: Number(e.target.value) })}
            inputProps={{ min: 0.5, max: 5, step: 0.5 }}
            size="small"
            disabled={!settings.disparityBaseLineEnabled}
          />
        </Grid>
        <Grid item xs={12} md={4}>
          <FormControl fullWidth size="small" disabled={!settings.disparityBaseLineEnabled}>
            <InputLabel>선 스타일</InputLabel>
            <Select
              value={colors.disparityBaseLineStyle}
              label="선 스타일"
              onChange={(e) => updateColors({ disparityBaseLineStyle: e.target.value as 'solid' | 'dashed' | 'dotted' })}
            >
              <MenuItem value="solid">실선</MenuItem>
              <MenuItem value="dashed">파선</MenuItem>
              <MenuItem value="dotted">점선</MenuItem>
            </Select>
          </FormControl>
        </Grid>
      </Grid>
    </Box>
  </Grid>
</Grid>
```

**추가된 기능:**
- ✅ 기준선 ON/OFF 스위치
- ✅ 색상 선택 (color picker)
- ✅ 굵기 조절 (0.5 ~ 5)
- ✅ 선 스타일 선택 (실선/파선/점선)
- ✅ 기준선 OFF 시 설정 비활성화

### 3. **필수 import 추가**

```typescript
import {
  // ... 기존 imports
  Switch,
  FormControlLabel,
  FormControl,
  Select,
  MenuItem,
  InputLabel,
} from '@mui/material';
```

## 🔄 설정 변경 흐름

### 1. **사용자가 설정 변경**
```
보조지표 설정 > 이격도 > 기준선 스타일 설정
```

### 2. **Context 업데이트**
```typescript
// IndicatorSettingsContext
disparityBaseLineEnabled: true/false

// ChartColorContext
disparityBaseLineColor: string
disparityBaseLineWidth: number
disparityBaseLineStyle: 'solid' | 'dashed' | 'dotted'
```

### 3. **차트 자동 재렌더링**
```typescript
// CandlestickChart.tsx
useEffect(() => {
  // 서브차트 재생성
}, [subPanels, data?.length, indicatorData?.length, themeMode, 
    indicatorSettings, colorSettings]); // ✅ 의존성 배열에 포함
```

### 4. **기준선 적용**
```typescript
// visible인 시리즈에 기준선 추가
visibleSeries.createPriceLine({
  price: 100,
  color: colorSettings?.disparityBaseLineColor,
  lineWidth: colorSettings?.disparityBaseLineWidth,
  lineStyle: getLineStyle(colorSettings?.disparityBaseLineStyle),
});
```

## ✅ 테스트 시나리오

### 1. **기준선 ON/OFF**
- [x] 기준선 ON → 100 기준선 표시
- [x] 기준선 OFF → 100 기준선 숨김

### 2. **색상 변경**
- [x] 색상 변경 → 기준선 색상 즉시 반영

### 3. **굵기 변경**
- [x] 굵기 0.5 ~ 5 조절 → 기준선 굵기 즉시 반영

### 4. **선 스타일 변경**
- [x] 실선 → 기준선 실선으로 표시
- [x] 파선 → 기준선 파선으로 표시
- [x] 점선 → 기준선 점선으로 표시

### 5. **이격도 선 ON/OFF 조합**
- [x] 초단기만 ON → 기준선 표시
- [x] 초단기 OFF, 단기 ON → 기준선 표시 (단기 시리즈에)
- [x] 초단기/단기 OFF, 중기 ON → 기준선 표시 (중기 시리즈에)
- [x] 초단기/단기/중기 OFF, 장기만 ON → 기준선 표시 (장기 시리즈에)

## 📊 기본값

```typescript
// IndicatorSettingsContext
disparityBaseLineEnabled: true

// ChartColorContext
disparityBaseLineColor: '#999999'
disparityBaseLineWidth: 1
disparityBaseLineStyle: 'solid'
```

## 🎯 결과

**이제 이격도 보조지표의 기준선 설정이 완벽하게 동작합니다!**

✅ 기준선 ON/OFF 정상 작동  
✅ 색상 변경 즉시 반영  
✅ 굵기 변경 즉시 반영  
✅ 선 스타일 변경 즉시 반영  
✅ 이격도 선 ON/OFF와 무관하게 기준선 유지  
✅ 설정 UI 추가로 사용자 편의성 향상  

## 🚀 배포

```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`
- `frontend/src/components/settings/IndicatorSettingsTab.tsx`