goldenChat base source add

2026-05-23 15:11:48 +09:00
commit a4ea7762b5
2081 changed files with 1155760 additions and 0 deletions
@@ -0,0 +1,281 @@
+# 이격도 선 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에 저장되어 다음 접속 시에도 유지됩니다.
+