aidev/goldenChart

Fork 0

Files

T

aidev a4ea7762b5 goldenChat base source add

2026-05-23 15:11:48 +09:00

7.4 KiB

Raw Blame History

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

🔍 문제점

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

🐛 발견된 원인

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

// ❌ 문제: 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 시리즈에 동적 할당

// ✅ 수정: 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 추가

{/* 기준선 설정 */}
<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 추가

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

🔄 설정 변경 흐름

1. 사용자가 설정 변경

보조지표 설정 > 이격도 > 기준선 스타일 설정

2. Context 업데이트

// IndicatorSettingsContext
disparityBaseLineEnabled: true/false

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

3. 차트 자동 재렌더링

// CandlestickChart.tsx
useEffect(() => {
  // 서브차트 재생성
}, [subPanels, data?.length, indicatorData?.length, themeMode, 
    indicatorSettings, colorSettings]); // ✅ 의존성 배열에 포함

4. 기준선 적용

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

✅ 테스트 시나리오

1. 기준선 ON/OFF

기준선 ON → 100 기준선 표시
기준선 OFF → 100 기준선 숨김

2. 색상 변경

색상 변경 → 기준선 색상 즉시 반영

3. 굵기 변경

굵기 0.5 ~ 5 조절 → 기준선 굵기 즉시 반영

4. 선 스타일 변경

실선 → 기준선 실선으로 표시
파선 → 기준선 파선으로 표시
점선 → 기준선 점선으로 표시

5. 이격도 선 ON/OFF 조합

초단기만 ON → 기준선 표시
초단기 OFF, 단기 ON → 기준선 표시 (단기 시리즈에)
초단기/단기 OFF, 중기 ON → 기준선 표시 (중기 시리즈에)
초단기/단기/중기 OFF, 장기만 ON → 기준선 표시 (장기 시리즈에)

📊 기본값

// IndicatorSettingsContext
disparityBaseLineEnabled: true

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

🎯 결과

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

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

🚀 배포

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

또는

cd frontend
npm run build

수정 완료일: 2026-02-01
수정 파일:

frontend/src/components/CandlestickChart.tsx
frontend/src/components/settings/IndicatorSettingsTab.tsx

7.4 KiB Raw Blame History