goldenChat base source add
This commit is contained in:
aidev
@@ -0,0 +1,252 @@
|
||||
# 이격도 기준선 설정 문제 수정 완료
|
||||
|
||||
## 🔍 문제점
|
||||
|
||||
이격도 보조지표 설정에서 기준선(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`
|
||||
|
||||
Reference in New Issue
Block a user