aidev
2165 lines
120 KiB
TypeScript
2165 lines
120 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
||
import {
|
||
Dialog,
|
||
DialogTitle,
|
||
DialogContent,
|
||
DialogActions,
|
||
Button,
|
||
TextField,
|
||
Typography,
|
||
Box,
|
||
Slider,
|
||
Divider,
|
||
useTheme,
|
||
useMediaQuery,
|
||
IconButton,
|
||
Grid,
|
||
Select,
|
||
MenuItem,
|
||
FormControl,
|
||
InputLabel,
|
||
Switch,
|
||
Paper,
|
||
PaperProps,
|
||
Autocomplete,
|
||
} from '@mui/material';
|
||
import Draggable from 'react-draggable';
|
||
import {
|
||
Close as CloseIcon,
|
||
Settings as SettingsIcon,
|
||
Add as AddIcon,
|
||
Delete as DeleteIcon,
|
||
HelpOutline as HelpOutlineIcon,
|
||
} from '@mui/icons-material';
|
||
import { useChartColors, ChartColorSettings } from '../contexts/ChartColorContext';
|
||
import { useIndicatorSettings, IndicatorSettings } from '../contexts/IndicatorSettingsContext';
|
||
|
||
// 보조지표 타입 정의
|
||
export type IndicatorType =
|
||
| 'volume'
|
||
| 'macd'
|
||
| 'stochastic'
|
||
| 'rsi'
|
||
| 'momentum'
|
||
| 'adx'
|
||
| 'dmi'
|
||
| 'cci'
|
||
| 'trix'
|
||
| 'disparity'
|
||
| 'newPsychological'
|
||
| 'investPsychological'
|
||
| 'williamsR'
|
||
| 'bwi'
|
||
| 'obv'
|
||
| 'volumeOsc'
|
||
| 'vr'
|
||
| 'vr2'
|
||
| 'dmi'
|
||
| 'ma'
|
||
| 'ichimoku';
|
||
|
||
interface IndicatorSettingsPopupProps {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
indicatorType: IndicatorType | null;
|
||
}
|
||
|
||
// 보조지표별 정보
|
||
const indicatorInfo: Record<IndicatorType, { name: string; description: string }> = {
|
||
volume: { name: '거래량', description: '매수/매도 거래량을 막대 그래프로 표시' },
|
||
macd: { name: 'MACD', description: 'Moving Average Convergence Divergence - 이동평균 수렴·발산 지표' },
|
||
stochastic: { name: 'Stochastic Slow', description: '현재 가격이 일정 기간의 가격 범위에서 어디에 위치하는지 표시' },
|
||
rsi: { name: 'RSI', description: 'Relative Strength Index - 상대강도지수' },
|
||
momentum: { name: 'Momentum', description: 'Momentum - 현재 가격과 n기간 전 가격의 차이를 나타내는 모멘텀 지표' },
|
||
adx: { name: 'ADX', description: 'Average Directional Index - 추세 강도 지표' },
|
||
dmi: { name: 'DMI', description: 'Directional Movement Index - 방향성 지표 (ADX + +DI + -DI)' },
|
||
cci: { name: 'CCI', description: 'Commodity Channel Index - 상품 채널 지수' },
|
||
williamsR: { name: 'Williams %R', description: '과매수/과매도 상태를 나타내는 모멘텀 지표' },
|
||
obv: { name: 'OBV', description: 'On Balance Volume - 거래량 누적 지표' },
|
||
trix: { name: 'TRIX', description: 'Triple Exponential Average - 삼중지수이동평균' },
|
||
newPsychological: { name: '신심리도', description: '일정 기간 동안 상승일 비율' },
|
||
investPsychological: { name: '투자심리도', description: '투자자들의 심리 상태를 나타내는 지표' },
|
||
disparity: { name: '이격도', description: '현재 가격과 이동평균선 간의 괴리 정도' },
|
||
bwi: { name: 'BWI', description: 'Bollinger Band Width Index - 볼린저밴드 %B' },
|
||
volumeOsc: { name: 'VolumeOSC', description: 'Volume Oscillator - 거래량 오실레이터' },
|
||
vr: { name: 'VR', description: 'Volume Ratio - 거래량 비율' },
|
||
vr2: { name: 'VR2', description: 'Volume Ratio (추가) - 거래량 비율 (별도 설정)' },
|
||
ma: { name: '이동평균선', description: 'Moving Average - 일정 기간 가격의 평균을 선으로 표시' },
|
||
ichimoku: { name: '일목균형표', description: 'Ichimoku Cloud - 추세, 지지/저항, 모멘텀을 한눈에 표시' },
|
||
};
|
||
|
||
// 보조지표별 상세 설명
|
||
const getIndicatorDetailedHelp = (type: IndicatorType): React.ReactNode => {
|
||
switch (type) {
|
||
case 'macd':
|
||
return (
|
||
<Box>
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>1️⃣ MACD란?</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
MACD는 두 개의 이동평균선의 차이를 이용해
|
||
</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2">✔ 추세 방향</Typography>
|
||
<Typography variant="body2">✔ 매수·매도 시점</Typography>
|
||
<Typography variant="body2">✔ 힘의 강도(모멘텀)</Typography>
|
||
</Box>
|
||
<Typography variant="body2" paragraph>
|
||
를 판단하는 지표입니다.
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontStyle: 'italic', color: 'primary.main', mb: 3 }}>
|
||
"주가의 흐름이 강해지고 있는지, 약해지고 있는지"를 보여줍니다.
|
||
</Typography>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>2️⃣ MACD의 구성 요소 (3가지)</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>① MACD 선</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2 }}>
|
||
• 12일 지수이동평균(EMA) – 26일 EMA<br />
|
||
• 단기 추세와 중기 추세의 차이
|
||
</Typography>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>② 시그널 선</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2 }}>
|
||
• MACD 선의 9일 EMA<br />
|
||
• 매매 신호를 보조하는 기준선
|
||
</Typography>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>③ 히스토그램</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2 }}>
|
||
• MACD 선 – 시그널 선<br />
|
||
• 두 선의 간격을 막대그래프로 표시<br />
|
||
• 힘이 커지는지 / 약해지는지 시각적으로 보여줌
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>3️⃣ MACD 해석 방법 (핵심)</Typography>
|
||
<Box sx={{ mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 1. 골든크로스 / 데드크로스</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1 }}>가장 많이 쓰이는 신호입니다.</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ color: 'success.main', fontWeight: 600 }}>✔ 매수 신호</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1 }}>
|
||
• MACD 선이 시그널 선을 아래에서 위로 돌파<br />
|
||
• 상승 모멘텀 시작 가능성
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'error.main', fontWeight: 600 }}>✔ 매도 신호</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2 }}>
|
||
• MACD 선이 시그널 선을 위에서 아래로 이탈<br />
|
||
• 하락 모멘텀 시작 가능성
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 2. 0선 기준 해석</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1 }}>MACD가 0선 위/아래에 있는지도 중요합니다.</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2">• 0선 위 → 상승 추세 우위</Typography>
|
||
<Typography variant="body2">• 0선 아래 → 하락 추세 우위</Typography>
|
||
<Typography variant="body2" sx={{ mt: 1, color: 'warning.main' }}>
|
||
📌 0선 위에서 골든크로스 = 신뢰도 ↑<br />
|
||
📌 0선 아래 데드크로스 = 하락 지속 가능성 ↑
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 3. 히스토그램 변화</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1 }}>히스토그램은 추세의 힘을 보여줍니다.</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2">• 막대가 점점 커짐 → 추세 강화</Typography>
|
||
<Typography variant="body2">• 막대가 줄어듦 → 추세 약화</Typography>
|
||
<Typography variant="body2">• 방향 전환 → 추세 전환 가능성</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 4. 다이버전스 (중요)</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1 }}>주가와 MACD의 방향이 다를 때 나타납니다.</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ color: 'success.main', fontWeight: 600 }}>✔ 강세 다이버전스</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1 }}>
|
||
• 주가는 하락하는데 MACD는 저점 상승<br />
|
||
• → 반등 가능성
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'error.main', fontWeight: 600 }}>✔ 약세 다이버전스</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2 }}>
|
||
• 주가는 상승하는데 MACD는 고점 하락<br />
|
||
• → 조정 가능성
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>4️⃣ 실전 활용 팁</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>✅ MACD는 추세장에서 강력</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1, fontSize: '0.85rem' }}>횡보장에서는 잦은 헛신호 발생</Typography>
|
||
|
||
<Typography variant="body2" sx={{ mb: 1 }}>✅ 다른 지표와 함께 사용</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1, fontSize: '0.85rem' }}>RSI, 이동평균선, 거래량과 병행 추천</Typography>
|
||
|
||
<Typography variant="body2" sx={{ mb: 1 }}>✅ 시간봉에 따라 성격이 다름</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem' }}>
|
||
• 일봉 → 중기 추세<br />
|
||
• 분봉 → 단기 매매 (노이즈 많음)
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>5️⃣ MACD의 한계 (중요)</Typography>
|
||
<Box sx={{ pl: 2 }}>
|
||
<Typography variant="body2" sx={{ color: 'error.main', mb: 1 }}>❌ 후행성 지표</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2, fontSize: '0.85rem' }}>이동평균 기반 → 신호가 늦을 수 있음</Typography>
|
||
|
||
<Typography variant="body2" sx={{ color: 'error.main', mb: 1 }}>❌ 단독 사용은 위험</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem' }}>반드시 차트 패턴·지지저항·거래량과 함께 확인</Typography>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
|
||
case 'rsi':
|
||
return (
|
||
<Box>
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>1️⃣ RSI란?</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
RSI는 주가의 상승·하락 강도를 수치화한 모멘텀 지표입니다.
|
||
</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2">• 값의 범위: 0 ~ 100</Typography>
|
||
<Typography variant="body2">• "최근 일정 기간 동안 매수세와 매도세 중 누가 더 강한가"를 보여줌</Typography>
|
||
</Box>
|
||
<Typography variant="body2" sx={{ color: 'warning.main', mb: 3 }}>
|
||
📌 과매수·과매도 판단에 가장 많이 쓰이는 지표 중 하나
|
||
</Typography>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>2️⃣ RSI 기본 설정</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 기간: 14 (표준)</Typography>
|
||
<Typography variant="body2">• 거의 모든 HTS/MTS에서 기본값</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>3️⃣ 핵심 해석 방법</Typography>
|
||
<Box sx={{ mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 ① 과매수 / 과매도 구간</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1 }}>가장 기본적인 사용법입니다.</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• RSI ≥ 70 → 과매수 (조정 가능성)</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• RSI ≤ 30 → 과매도 (반등 가능성)</Typography>
|
||
<Typography variant="body2" sx={{ color: 'error.main', mb: 1 }}>⚠️ 수치 도달 즉시 매매 ❌</Typography>
|
||
<Typography variant="body2" sx={{ color: 'success.main' }}>✔ 꺾임(되돌림)을 확인 후 대응</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 ② 50선 기준 추세 판단</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 50 이상 → 상승 추세 우위</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 50 이하 → 하락 추세 우위</Typography>
|
||
<Typography variant="body2" sx={{ color: 'warning.main' }}>📌 추세 확인용으로 매우 유용</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 ③ 다이버전스 (중요)</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ color: 'success.main', fontWeight: 600, mb: 1 }}>✔ 강세 다이버전스</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem', mb: 1 }}>
|
||
• 주가: 저점 낮아짐<br />
|
||
• RSI: 저점 높아짐<br />
|
||
→ 반등 가능성 ↑
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'error.main', fontWeight: 600, mb: 1 }}>✔ 약세 다이버전스</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem' }}>
|
||
• 주가: 고점 높아짐<br />
|
||
• RSI: 고점 낮아짐<br />
|
||
→ 하락 가능성 ↑
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 ④ RSI 추세선 활용</Typography>
|
||
<Box sx={{ pl: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• RSI에도 지지·저항선을 그릴 수 있음</Typography>
|
||
<Typography variant="body2">• RSI 추세선 이탈 = 주가 방향 전환 신호</Typography>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>4️⃣ 실전 활용 예시</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>📌 매수 타점 예</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2, fontSize: '0.85rem' }}>
|
||
• RSI 30 이하 진입<br />
|
||
• 바닥 다지고 30 상향 돌파<br />
|
||
• 거래량 증가 확인 → 분할 매수
|
||
</Typography>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>📌 매도 타점 예</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem' }}>
|
||
• RSI 70 이상 진입<br />
|
||
• 고점 형성 후 70 하향 이탈<br />
|
||
• 분할 매도
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>5️⃣ 매매 스타일별 RSI 설정</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>스타일</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>RSI 설정</Typography>
|
||
<Typography variant="body2">단타</Typography>
|
||
<Typography variant="body2">7 ~ 9</Typography>
|
||
<Typography variant="body2">스윙</Typography>
|
||
<Typography variant="body2">14</Typography>
|
||
<Typography variant="body2">중·장기</Typography>
|
||
<Typography variant="body2">21</Typography>
|
||
</Box>
|
||
<Typography variant="body2" sx={{ color: 'warning.main', fontSize: '0.85rem', mb: 1 }}>📌 기간 ↓ → 신호 빠름 (노이즈 ↑)</Typography>
|
||
<Typography variant="body2" sx={{ color: 'warning.main', fontSize: '0.85rem' }}>📌 기간 ↑ → 안정적 (신호 느림)</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>6️⃣ RSI의 장점과 한계</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>✔ 장점</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2, fontSize: '0.85rem' }}>
|
||
• 직관적<br />
|
||
• 과열 구간 파악 쉬움<br />
|
||
• 대부분의 시장에 적용 가능
|
||
</Typography>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>❌ 한계</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2, fontSize: '0.85rem' }}>
|
||
• 강한 추세장에서는 신호 왜곡<br />
|
||
• 단독 사용 시 헛신호
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'info.main' }}>👉 MACD·이동평균·거래량과 병행 필수</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>한 줄 요약</Typography>
|
||
<Typography variant="body2" sx={{ fontStyle: 'italic', color: 'primary.main' }}>
|
||
RSI는 매수·매도 세력의 힘을 보여주는 지표로, 30·70 기준과 다이버전스가 핵심 포인트입니다.
|
||
</Typography>
|
||
</Box>
|
||
);
|
||
|
||
case 'stochastic':
|
||
return (
|
||
<Box>
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>1️⃣ Stochastic Slow란?</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
스토캐스틱은
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontStyle: 'italic', color: 'primary.main', mb: 2 }}>
|
||
"현재 가격이 최근 일정 기간의 고가–저가 범위 중 어디에 위치하는가"
|
||
</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
를 보여주는 지표입니다.
|
||
</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2">• 가격이 고가 근처 → 매수 과열 가능</Typography>
|
||
<Typography variant="body2">• 가격이 저가 근처 → 매도 과열 가능</Typography>
|
||
</Box>
|
||
<Typography variant="body2" sx={{ color: 'warning.main', mb: 3 }}>
|
||
📌 MACD가 추세 지표라면, Stochastic은 속도·과열 지표입니다.
|
||
</Typography>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>2️⃣ Stochastic Slow의 구성요소</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 %K (느린 K)</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2 }}>
|
||
• 가격의 위치를 나타내는 주선<br />
|
||
• Fast Stochastic의 %K를 이동평균 처리한 값
|
||
</Typography>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 %D</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2 }}>
|
||
• %K의 이동평균 (신호선 역할)
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'info.main' }}>
|
||
👉 Slow Stochastic은 %K와 %D 두 개 선으로 해석합니다.
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>3️⃣ 계산 방식 (개념적으로)</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>기본 설정 기준:</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1 }}>(14, 3, 3) 이 가장 보편적</Typography>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>의미:</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2, fontSize: '0.85rem' }}>
|
||
• 14 → 기준 기간<br />
|
||
• 3 → %K를 느리게 만드는 이동평균<br />
|
||
• 3 → %D 이동평균
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontSize: '0.85rem' }}>
|
||
※ 실제 계산은 자동이므로 원리만 이해하면 충분합니다.
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>4️⃣ 핵심 해석 방법</Typography>
|
||
<Box sx={{ mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔸 1. 과매수 / 과매도 구간</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1 }}>가장 기본적인 사용법입니다.</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 80 이상 → 과매수 구간</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 20 이하 → 과매도 구간</Typography>
|
||
<Typography variant="body2" sx={{ color: 'warning.main' }}>
|
||
⚠️ 바로 매도·매수하는 게 아니라 전환 신호를 기다리는 것이 중요
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔸 2. 골든크로스 / 데드크로스</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ color: 'success.main', fontWeight: 600, mb: 1 }}>✔ 매수 신호</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem', mb: 1 }}>
|
||
• 20 이하 과매도 구간에서<br />
|
||
• %K가 %D를 아래에서 위로 돌파
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'error.main', fontWeight: 600, mb: 1 }}>✔ 매도 신호</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem', mb: 1 }}>
|
||
• 80 이상 과매수 구간에서<br />
|
||
• %K가 %D를 위에서 아래로 이탈
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'warning.main' }}>📌 구간 밖 크로스는 신뢰도 낮음</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔸 3. 다이버전스 (중요)</Typography>
|
||
<Box sx={{ pl: 2 }}>
|
||
<Typography variant="body2" sx={{ color: 'success.main', fontWeight: 600, mb: 1 }}>✔ 강세 다이버전스</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem', mb: 1 }}>
|
||
• 주가는 저점 갱신<br />
|
||
• Stochastic은 저점 상승<br />
|
||
→ 반등 가능성
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'error.main', fontWeight: 600, mb: 1 }}>✔ 약세 다이버전스</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem' }}>
|
||
• 주가는 고점 갱신<br />
|
||
• Stochastic은 고점 하락<br />
|
||
→ 조정 가능성
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>5️⃣ Fast vs Slow 차이</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 1, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>구분</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>Fast</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>Slow</Typography>
|
||
<Typography variant="body2">반응 속도</Typography>
|
||
<Typography variant="body2">매우 빠름</Typography>
|
||
<Typography variant="body2">느림</Typography>
|
||
<Typography variant="body2">노이즈</Typography>
|
||
<Typography variant="body2">많음</Typography>
|
||
<Typography variant="body2">적음</Typography>
|
||
<Typography variant="body2">실전 활용</Typography>
|
||
<Typography variant="body2">제한적</Typography>
|
||
<Typography variant="body2">가장 많이 사용</Typography>
|
||
</Box>
|
||
<Typography variant="body2" sx={{ color: 'info.main' }}>
|
||
👉 실전에서는 Slow Stochastic을 기본으로 사용
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>6️⃣ 실전 활용 팁</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>✅ 횡보장·조정장에 강함</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1, fontSize: '0.85rem', color: 'error.main' }}>
|
||
❌ 강한 상승장에서는 과매수 상태가 오래 지속될 수 있음
|
||
</Typography>
|
||
|
||
<Typography variant="body2" sx={{ mb: 1 }}>✅ MACD, 이동평균과 병행 추천</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1, fontSize: '0.85rem' }}>
|
||
• MACD로 추세 확인<br />
|
||
• Stochastic으로 진입 타이밍
|
||
</Typography>
|
||
|
||
<Typography variant="body2" sx={{ mb: 1 }}>✅ 분봉에서는 설정값 늘리면 안정적</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>7️⃣ 대표적인 설정값</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 기본: (14, 3, 3)</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 단타: (9, 3, 3)</Typography>
|
||
<Typography variant="body2">• 보수적: (21, 5, 5)</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>한 줄 요약</Typography>
|
||
<Typography variant="body2" sx={{ fontStyle: 'italic', color: 'primary.main' }}>
|
||
Stochastic Slow는 가격의 과열 정도를 보여주는 지표로, 20·80 구간에서의 골든/데드크로스가 핵심 신호입니다.
|
||
</Typography>
|
||
</Box>
|
||
);
|
||
|
||
case 'volume':
|
||
return (
|
||
<Box>
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>1️⃣ 거래량이란?</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
거래량은 일정 기간 동안 거래된 주식의 수량을 나타내며, 주가 변동의 신뢰도를 확인하는 핵심 지표입니다.
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontStyle: 'italic', color: 'primary.main', mb: 3 }}>
|
||
"거래량이 많다 = 많은 사람들이 참여했다 = 신뢰도 높은 움직임"
|
||
</Typography>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>2️⃣ 거래량 해석 방법</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 가격과 거래량의 관계</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ color: 'success.main' }}>✔ 상승 + 거래량 증가 → 강한 상승 (신뢰도 높음)</Typography>
|
||
<Typography variant="body2" sx={{ color: 'warning.main' }}>✔ 상승 + 거래량 감소 → 약한 상승 (조정 가능성)</Typography>
|
||
<Typography variant="body2" sx={{ color: 'error.main' }}>✔ 하락 + 거래량 증가 → 강한 하락 (추가 하락 가능성)</Typography>
|
||
<Typography variant="body2" sx={{ color: 'info.main' }}>✔ 하락 + 거래량 감소 → 약한 하락 (바닥 근접)</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 거래량 패턴</Typography>
|
||
<Box sx={{ pl: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 거래량 급증 → 추세 전환 신호</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 거래량 감소 → 추세 약화 또는 횡보 가능성</Typography>
|
||
<Typography variant="body2">• 거래량 평균 이상 → 신뢰할 수 있는 움직임</Typography>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>3️⃣ 실전 활용 팁</Typography>
|
||
<Box sx={{ pl: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>✅ 모든 매매 판단의 기본</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>✅ 돌파 구간에서 거래량 확인 필수</Typography>
|
||
<Typography variant="body2">✅ 이동평균선과 함께 보면 효과적</Typography>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
|
||
case 'cci':
|
||
return (
|
||
<Box>
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>1️⃣ CCI란?</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
CCI는
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontStyle: 'italic', color: 'primary.main', mb: 2 }}>
|
||
"현재 가격이 최근 평균 가격보다 비싸게 거래되는지, 싸게 거래되는지"
|
||
</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
를 수치로 나타낸 지표입니다.
|
||
</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2">• + 방향 → 평균보다 강함</Typography>
|
||
<Typography variant="body2">• – 방향 → 평균보다 약함</Typography>
|
||
</Box>
|
||
<Typography variant="body2" sx={{ color: 'warning.main', mb: 3 }}>
|
||
📌 RSI·Stochastic과 달리 기준이 고정(0선)이고, 과매수·과매도 범위가 유연한 것이 특징
|
||
</Typography>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>2️⃣ CCI 기본 설정</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 기간: 14 또는 20 (가장 많이 사용)</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 기준선: 0선</Typography>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mt: 2, mb: 1 }}>일반적인 과열 기준:</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1 }}>• +100 이상 → 과매수</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2 }}>• –100 이하 → 과매도</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>3️⃣ CCI 계산 개념 (이해만 하면 충분)</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
CCI는 아래 개념으로 계산됩니다.
|
||
</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• TP(대표가격) = (고가 + 저가 + 종가) ÷ 3</Typography>
|
||
<Typography variant="body2">• TP가 평균(TP의 이동평균)에서 얼마나 떨어져 있는지를 수치화</Typography>
|
||
</Box>
|
||
<Typography variant="body2" sx={{ color: 'info.main', mb: 3 }}>
|
||
👉 복잡해 보이지만 자동 계산되므로 해석이 핵심입니다.
|
||
</Typography>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>4️⃣ 핵심 해석 방법</Typography>
|
||
<Box sx={{ mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 ① 0선 돌파 (추세 판단)</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• CCI > 0 → 상승 모멘텀 우위</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• CCI < 0 → 하락 모멘텀 우위</Typography>
|
||
<Typography variant="body2" sx={{ color: 'warning.main' }}>📌 0선 돌파는 추세 시작 신호로 자주 활용</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 ② 과매수 / 과매도</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• +100 이상 → 과매수 구간</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• –100 이하 → 과매도 구간</Typography>
|
||
<Typography variant="body2" sx={{ color: 'error.main', mb: 1 }}>⚠️ 도달 즉시 매매 ❌</Typography>
|
||
<Typography variant="body2" sx={{ color: 'success.main' }}>✔ 되돌림(재진입)을 기다리는 게 중요</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 ③ 되돌림 매매 (가장 많이 사용)</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ color: 'success.main', fontWeight: 600, mb: 1 }}>✔ 매수 신호</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1, fontSize: '0.85rem' }}>
|
||
• CCI가 –100 이하 진입<br />
|
||
• 다시 –100 위로 회복
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'error.main', fontWeight: 600, mb: 1 }}>✔ 매도 신호</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1, fontSize: '0.85rem' }}>
|
||
• CCI가 +100 이상 진입<br />
|
||
• 다시 +100 아래로 이탈
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'warning.main' }}>📌 단기 매매에서 특히 효과적</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 ④ 다이버전스</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ color: 'success.main', fontWeight: 600, mb: 1 }}>✔ 강세 다이버전스</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1, fontSize: '0.85rem' }}>
|
||
• 주가 저점 하락<br />
|
||
• CCI 저점 상승<br />
|
||
→ 반등 가능성
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'error.main', fontWeight: 600, mb: 1 }}>✔ 약세 다이버전스</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem' }}>
|
||
• 주가 고점 상승<br />
|
||
• CCI 고점 하락<br />
|
||
→ 하락 가능성
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>5️⃣ RSI·Stochastic과 차이점</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 1, mb: 1 }}>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>기준</Typography>
|
||
<Typography variant="body2">CCI: 0선 / RSI: 30·70 / Stochastic: 20·80</Typography>
|
||
</Box>
|
||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 1, mb: 1 }}>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>범위</Typography>
|
||
<Typography variant="body2">CCI: 제한 없음 / RSI: 0~100 / Stochastic: 0~100</Typography>
|
||
</Box>
|
||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 1, mb: 1 }}>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>성격</Typography>
|
||
<Typography variant="body2">CCI: 변동성 민감 / RSI: 힘의 균형 / Stochastic: 가격 위치</Typography>
|
||
</Box>
|
||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 1, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>단타 활용</Typography>
|
||
<Typography variant="body2">CCI: ★★★★☆ / RSI: ★★★ / Stochastic: ★★★★</Typography>
|
||
</Box>
|
||
<Typography variant="body2" sx={{ color: 'info.main' }}>👉 CCI는 짧은 파동 포착에 강함</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>6️⃣ 실전 활용 팁</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>✅ 횡보·조정장에서 강력</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1, fontSize: '0.85rem', color: 'error.main' }}>❌ 강한 추세장에서는 과열 지속 가능</Typography>
|
||
|
||
<Typography variant="body2" sx={{ mb: 1 }}>✅ 분봉에서는 기간 늘리면 안정적</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1, fontSize: '0.85rem' }}>예: 20 → 30</Typography>
|
||
|
||
<Typography variant="body2" sx={{ mb: 1 }}>✅ MACD·이동평균과 병행 추천</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem' }}>
|
||
• 추세는 MACD<br />
|
||
• 타점은 CCI
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>7️⃣ 대표적인 설정값</Typography>
|
||
<Box sx={{ pl: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 기본: CCI(20)</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 단타: CCI(9~14)</Typography>
|
||
<Typography variant="body2">• 보수적: CCI(30)</Typography>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
|
||
case 'adx':
|
||
return (
|
||
<Box>
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>1️⃣ ADX란?</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
ADX(Average Directional Index)는 추세의 강도를 측정하는 지표입니다. 상승인지 하락인지가 아니라 "추세가 얼마나 강한지"만 보여줍니다.
|
||
</Typography>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>2️⃣ ADX 해석 방법</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• ADX 25 미만 → 약한 추세 (횡보)</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• ADX 25~50 → 강한 추세</Typography>
|
||
<Typography variant="body2">• ADX 50 이상 → 매우 강한 추세</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>3️⃣ 실전 활용 팁</Typography>
|
||
<Box sx={{ pl: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>✅ 추세 추종 전략 사용 여부 결정</Typography>
|
||
<Typography variant="body2">✅ +DI, -DI와 함께 보면 방향까지 확인 가능</Typography>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
|
||
case 'trix':
|
||
return (
|
||
<Box>
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>TRIX (Triple Exponential Average Oscillator)</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
📈 추세의 방향과 전환을 비교적 깔끔하게 보여주는 모멘텀 보조지표입니다.
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'primary.main', mb: 3 }}>
|
||
이동평균의 노이즈를 크게 줄인 것이 가장 큰 특징입니다.
|
||
</Typography>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>1️⃣ TRIX란?</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
TRIX는
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 600, mb: 2 }}>
|
||
종가에 3중 지수이동평균(Triple EMA)을 적용한 뒤, 그 변화율(기울기)을 지표로 만든 것입니다.
|
||
</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
즉,
|
||
</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2">• 단순 이동평균보다 훨씬 부드럽고</Typography>
|
||
<Typography variant="body2">• 잔파동(노이즈)을 많이 제거한</Typography>
|
||
<Typography variant="body2">• 추세 중심 지표입니다.</Typography>
|
||
</Box>
|
||
<Typography variant="body2" sx={{ color: 'warning.main', mb: 3 }}>
|
||
📌 단타보다는 스윙·중기 매매에 적합
|
||
</Typography>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>2️⃣ TRIX의 구성 요소</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 TRIX 선</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2 }}>
|
||
• 3중 EMA의 변화율<br />
|
||
• 추세의 방향과 속도를 나타냄
|
||
</Typography>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 시그널 선 (선택)</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2 }}>
|
||
• TRIX의 이동평균<br />
|
||
• 매매 신호 보조
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>3️⃣ 기본 설정값</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• TRIX 기간: 14 (또는 15)</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 시그널: 9</Typography>
|
||
<Typography variant="body2" sx={{ color: 'warning.main' }}>
|
||
📌 RSI·MACD보다 신호가 느린 대신 신뢰도가 높음
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>4️⃣ 핵심 해석 방법</Typography>
|
||
<Box sx={{ mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔸 ① 0선 기준 해석 (가장 중요)</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• TRIX > 0 → 상승 추세</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• TRIX < 0 → 하락 추세</Typography>
|
||
<Typography variant="body2" sx={{ color: 'success.main' }}>✔ 0선 돌파 = 추세 전환 신호</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔸 ② 골든크로스 / 데드크로스</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1, fontSize: '0.85rem' }}>(시그널 선 사용 시)</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ color: 'success.main', fontWeight: 600, mb: 1 }}>✔ 매수 신호</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem', mb: 1 }}>
|
||
• TRIX가 시그널을 아래에서 위로 돌파<br />
|
||
• 0선 근처에서 발생 시 신뢰도 ↑
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'error.main', fontWeight: 600, mb: 1 }}>✔ 매도 신호</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem' }}>
|
||
• TRIX가 시그널을 위에서 아래로 이탈
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔸 ③ 기울기(각도) 해석</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 기울기 가팔라짐 → 추세 가속</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 기울기 둔화 → 추세 약화</Typography>
|
||
<Typography variant="body2" sx={{ color: 'warning.main' }}>
|
||
📌 히스토그램처럼 힘의 변화를 직관적으로 파악 가능
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔸 ④ 다이버전스</Typography>
|
||
<Box sx={{ pl: 2 }}>
|
||
<Typography variant="body2" sx={{ color: 'success.main', fontWeight: 600, mb: 1 }}>✔ 강세 다이버전스</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem', mb: 1 }}>
|
||
• 주가 저점 하락<br />
|
||
• TRIX 저점 상승<br />
|
||
→ 반등 가능성
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'error.main', fontWeight: 600, mb: 1 }}>✔ 약세 다이버전스</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem' }}>
|
||
• 주가 고점 상승<br />
|
||
• TRIX 고점 하락<br />
|
||
→ 하락 가능성
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>5️⃣ MACD와의 차이</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 1, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>구분</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>TRIX</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>MACD</Typography>
|
||
<Typography variant="body2">이동평균</Typography>
|
||
<Typography variant="body2">3중 EMA</Typography>
|
||
<Typography variant="body2">2중 EMA</Typography>
|
||
<Typography variant="body2">반응 속도</Typography>
|
||
<Typography variant="body2">느림</Typography>
|
||
<Typography variant="body2">빠름</Typography>
|
||
<Typography variant="body2">노이즈</Typography>
|
||
<Typography variant="body2">매우 적음</Typography>
|
||
<Typography variant="body2">중간</Typography>
|
||
<Typography variant="body2">적합 매매</Typography>
|
||
<Typography variant="body2">스윙·중기</Typography>
|
||
<Typography variant="body2">단타~중기</Typography>
|
||
</Box>
|
||
<Typography variant="body2" sx={{ color: 'info.main' }}>
|
||
👉 TRIX = 깔끔한 추세 판단용
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>6️⃣ 실전 활용 팁</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>✅ 횡보장보다는 추세장에서 강력</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1, fontSize: '0.85rem', color: 'error.main' }}>
|
||
❌ 짧은 분봉에서는 신호 지연
|
||
</Typography>
|
||
|
||
<Typography variant="body2" sx={{ mb: 1 }}>✅ 이동평균선과 궁합 좋음</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1, fontSize: '0.85rem' }}>
|
||
• MA 정배열 + TRIX 0선 상방 = 상승 신뢰도 ↑
|
||
</Typography>
|
||
|
||
<Typography variant="body2" sx={{ mb: 1 }}>✅ 단타에서는 기간 줄여 사용 가능</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem' }}>
|
||
• 예: TRIX(7, 5)
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>7️⃣ TRIX의 한계</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 후행성 강함</Typography>
|
||
<Typography variant="body2" sx={{ mb: 2 }}>• 급등락 초기 신호 포착 어려움</Typography>
|
||
<Typography variant="body2" sx={{ color: 'warning.main', fontSize: '0.85rem', mb: 1 }}>
|
||
📌 진입 타점은 RSI·CCI,
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'warning.main', fontSize: '0.85rem' }}>
|
||
📌 방향 확인은 TRIX로 분리해서 쓰면 효과적
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>한 줄 요약</Typography>
|
||
<Typography variant="body2" sx={{ fontStyle: 'italic', color: 'primary.main' }}>
|
||
TRIX는 3중 EMA 기반의 추세 지표로, 0선 돌파와 기울기 변화가 핵심 포인트입니다.
|
||
</Typography>
|
||
</Box>
|
||
);
|
||
|
||
case 'disparity':
|
||
return (
|
||
<Box>
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>이격도(乖離度, Disparity Index)</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
📊 현재 주가가 이동평균선에서 얼마나 떨어져 있는지를 %로 나타낸 아주 직관적인 과열·과매도 보조지표입니다.
|
||
</Typography>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>1️⃣ 이격도란?</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
이격도는 아래 질문에 답하는 지표입니다.
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontStyle: 'italic', color: 'primary.main', mb: 2 }}>
|
||
"지금 주가는 평균 가격(이동평균)보다 얼마나 위(과열) 또는 아래(과매도)에 있는가?"
|
||
</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2">• 100% → 이동평균과 동일</Typography>
|
||
<Typography variant="body2">• 100% 초과 → 평균보다 비쌈</Typography>
|
||
<Typography variant="body2">• 100% 미만 → 평균보다 쌈</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>2️⃣ 이격도 계산식</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>개념만 이해하시면 충분합니다.</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 600, mb: 2 }}>
|
||
이격도(%) = (현재가 ÷ 이동평균가) × 100
|
||
</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>예)</Typography>
|
||
<Typography variant="body2" sx={{ fontSize: '0.85rem' }}>• 현재가 105, 20일선 100 → 이격도 105%</Typography>
|
||
<Typography variant="body2" sx={{ fontSize: '0.85rem' }}>• 현재가 95, 20일선 100 → 이격도 95%</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>3️⃣ 기준 이동평균선 선택</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>이격도는 어떤 이동평균을 쓰느냐가 매우 중요합니다.</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>이동평균</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>활용</Typography>
|
||
<Typography variant="body2">5일</Typography>
|
||
<Typography variant="body2">초단기 과열</Typography>
|
||
<Typography variant="body2">20일</Typography>
|
||
<Typography variant="body2">단기 매매(가장 많이 사용)</Typography>
|
||
<Typography variant="body2">60일</Typography>
|
||
<Typography variant="body2">중기 추세</Typography>
|
||
<Typography variant="body2">120일</Typography>
|
||
<Typography variant="body2">장기 과열</Typography>
|
||
</Box>
|
||
<Typography variant="body2" sx={{ color: 'warning.main' }}>📌 20일 이격도가 가장 보편적</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>4️⃣ 핵심 해석 방법</Typography>
|
||
<Box sx={{ mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 ① 기준값 (과열/과매도)</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1 }}>종목·시장마다 다르지만 일반적인 기준은 다음과 같습니다.</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ color: 'error.main', fontWeight: 600, mb: 1 }}>📈 상승 과열</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem', mb: 1 }}>
|
||
• 이격도 105~110% 이상<br />
|
||
→ 단기 과열, 조정 가능성
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'success.main', fontWeight: 600, mb: 1 }}>📉 하락 과매도</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem', mb: 1 }}>
|
||
• 이격도 90~95% 이하<br />
|
||
→ 과매도, 반등 가능성
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'warning.main', fontWeight: 600, mb: 1 }}>⚠️ 기준값은 고정이 아님</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem' }}>
|
||
• 변동성 큰 종목 → 기준 확대<br />
|
||
• 우량주 → 기준 축소
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 ② 평균 회귀 (Mean Reversion)</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1 }}>이격도의 핵심 개념입니다.</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ fontSize: '0.85rem', mb: 1 }}>
|
||
• 주가는 결국 이동평균으로 되돌아가려는 성질이 있음
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontSize: '0.85rem', mb: 1 }}>
|
||
• 이격 ↑↑ → 조정 후 평균 회귀
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontSize: '0.85rem' }}>
|
||
• 이격 ↓↓ → 반등 후 평균 회귀
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 ③ 추세와 함께 사용</Typography>
|
||
<Box sx={{ pl: 2 }}>
|
||
<Typography variant="body2" sx={{ fontSize: '0.85rem', mb: 1 }}>
|
||
• 상승 추세 + 이격 과열 → 눌림목 대기
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontSize: '0.85rem', mb: 1 }}>
|
||
• 하락 추세 + 과매도 → 기술적 반등 주의
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'warning.main' }}>📌 추세 무시하고 역매매 ❌</Typography>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>5️⃣ 실전 활용 예시</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>📌 매수 타점</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2, fontSize: '0.85rem' }}>
|
||
• 상승 추세 유지<br />
|
||
• 조정으로 이격도 95% 내외<br />
|
||
• 지지 확인 후 분할 매수
|
||
</Typography>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>📌 매도 타점</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem' }}>
|
||
• 급등 후 이격도 110% 이상<br />
|
||
• 거래량 감소<br />
|
||
• 분할 매도
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>6️⃣ RSI·CCI와 차이점</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 1, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>구분</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>이격도</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>RSI</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 600 }}>CCI</Typography>
|
||
<Typography variant="body2">기준</Typography>
|
||
<Typography variant="body2">이동평균</Typography>
|
||
<Typography variant="body2">30·70</Typography>
|
||
<Typography variant="body2">±100</Typography>
|
||
<Typography variant="body2">직관성</Typography>
|
||
<Typography variant="body2">매우 높음</Typography>
|
||
<Typography variant="body2">중간</Typography>
|
||
<Typography variant="body2">중간</Typography>
|
||
<Typography variant="body2">추세 판단</Typography>
|
||
<Typography variant="body2">약함</Typography>
|
||
<Typography variant="body2">보통</Typography>
|
||
<Typography variant="body2">보통</Typography>
|
||
<Typography variant="body2">평균회귀</Typography>
|
||
<Typography variant="body2">★★★★★</Typography>
|
||
<Typography variant="body2">★★★</Typography>
|
||
<Typography variant="body2">★★★</Typography>
|
||
</Box>
|
||
<Typography variant="body2" sx={{ color: 'info.main' }}>
|
||
👉 이격도 = 평균에서 얼마나 벗어났는지 한눈에 파악
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>7️⃣ 이격도의 장점과 한계</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>✔ 장점</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2, fontSize: '0.85rem' }}>
|
||
• 계산·해석 쉬움<br />
|
||
• 과열/과매도 직관적<br />
|
||
• 초보자도 사용 가능
|
||
</Typography>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>❌ 한계</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2, fontSize: '0.85rem' }}>
|
||
• 강한 추세장에서는 과열 지속<br />
|
||
• 단독 사용 시 역추세 매매 위험
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ color: 'warning.main' }}>
|
||
📌 이동평균·거래량·추세 지표와 병행 필수
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>한 줄 요약</Typography>
|
||
<Typography variant="body2" sx={{ fontStyle: 'italic', color: 'primary.main' }}>
|
||
이격도는 주가가 이동평균에서 얼마나 떨어졌는지를 %로 보여주는 지표로, 평균 회귀 관점에서 과열·과매도를 판단합니다.
|
||
</Typography>
|
||
</Box>
|
||
);
|
||
|
||
case 'newPsychological':
|
||
return (
|
||
<Box>
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>신심리도(心理度, Psychological Line)</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
📊 투자자들의 '심리 상태'를 수치로 표현한 주식 보조지표입니다.
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontStyle: 'italic', color: 'primary.main', mb: 3 }}>
|
||
"요즘 시장이 너무 낙관적인가, 너무 비관적인가?"를 판단할 때 사용합니다.
|
||
</Typography>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>1️⃣ 신심리도란?</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
신심리도는 일정 기간 동안
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontStyle: 'italic', color: 'primary.main', mb: 2 }}>
|
||
주가가 오른 날의 비율
|
||
</Typography>
|
||
<Typography variant="body2" paragraph>
|
||
을 계산한 지표입니다.
|
||
</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 오르는 날이 많을수록 → 낙관(과열)</Typography>
|
||
<Typography variant="body2">• 내리는 날이 많을수록 → 비관(침체)</Typography>
|
||
</Box>
|
||
<Typography variant="body2" sx={{ color: 'warning.main', mb: 3 }}>
|
||
📌 가격 크기보다 '올랐는지/내렸는지'만 본다는 게 특징입니다.
|
||
</Typography>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>2️⃣ 신심리도 계산 방식 (개념)</Typography>
|
||
<Typography variant="body2" sx={{ fontStyle: 'italic', color: 'primary.main', mb: 2 }}>
|
||
신심리도 = (상승한 날 수 ÷ 전체 기간) × 100
|
||
</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2" sx={{ fontSize: '0.9rem', mb: 1 }}>예)</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem', mb: 1 }}>
|
||
• 12일 중 9일 상승 → 신심리도 = 75
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, fontSize: '0.85rem' }}>
|
||
• 12일 중 3일 상승 → 신심리도 = 25
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>3️⃣ 기본 설정</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 기간: 12일 (가장 많이 사용)</Typography>
|
||
<Typography variant="body2">• 범위: 0 ~ 100</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>4️⃣ 핵심 해석 방법</Typography>
|
||
<Box sx={{ mb: 3 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 ① 과매수 / 과매도 구간</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1 }}>가장 중요합니다.</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 75 이상 → 과매수 (낙관 과도)</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 25 이하 → 과매도 (비관 과도)</Typography>
|
||
<Typography variant="body2" sx={{ color: 'error.main', mb: 1 }}>⚠️ 도달 즉시 매매 ❌</Typography>
|
||
<Typography variant="body2" sx={{ color: 'success.main' }}>✔ 되돌림(구간 이탈)을 확인</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 ② 평균 회귀 관점</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 1 }}>신심리도는 역추세 지표 성격이 강합니다.</Typography>
|
||
<Box sx={{ pl: 2, mb: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 과도한 낙관 → 조정 가능성</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 과도한 비관 → 반등 가능성</Typography>
|
||
<Typography variant="body2" sx={{ color: 'warning.main' }}>📌 횡보장·조정장에서 효과적</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1 }}>🔹 ③ 추세 확인 보조</Typography>
|
||
<Box sx={{ pl: 2 }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 50 이상 → 상승 심리 우위</Typography>
|
||
<Typography variant="body2">• 50 이하 → 하락 심리 우위</Typography>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>5️⃣ RSI·이격도와의 차이</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2" sx={{ fontWeight: 600, mb: 1 }}>구분 | 신심리도 | RSI | 이격도</Typography>
|
||
<Typography variant="body2" sx={{ fontSize: '0.85rem', mb: 1 }}>• 기준: 상승일 비율 | 상승·하락 강도 | 평균 대비 거리</Typography>
|
||
<Typography variant="body2" sx={{ fontSize: '0.85rem', mb: 1 }}>• 가격 크기 반영: ❌ | ⭕ | ⭕</Typography>
|
||
<Typography variant="body2" sx={{ fontSize: '0.85rem', mb: 1 }}>• 성격: 심리 | 모멘텀 | 평균회귀</Typography>
|
||
<Typography variant="body2" sx={{ fontSize: '0.85rem', mb: 2 }}>• 역추세: ★★★★☆ | ★★★ | ★★★★★</Typography>
|
||
<Typography variant="body2" sx={{ color: 'info.main' }}>
|
||
👉 신심리도는 "분위기 과열"을 보는 지표
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>6️⃣ 실전 활용 팁</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2" sx={{ color: 'success.main', mb: 1 }}>✅ 단독 사용보다는 보조용</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2, fontSize: '0.85rem' }}>RSI, CCI와 함께 쓰면 신뢰도 ↑</Typography>
|
||
|
||
<Typography variant="body2" sx={{ color: 'success.main', mb: 1 }}>✅ 강한 추세장에서는 신호 무력</Typography>
|
||
<Typography variant="body2" sx={{ pl: 2, mb: 2, fontSize: '0.85rem' }}>상승장에서는 75 이상 유지 가능</Typography>
|
||
|
||
<Typography variant="body2" sx={{ color: 'success.main', mb: 1 }}>✅ 기간 조절</Typography>
|
||
<Box sx={{ pl: 2, fontSize: '0.85rem' }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 단타: 9</Typography>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 기본: 12</Typography>
|
||
<Typography variant="body2">• 보수적: 20</Typography>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>7️⃣ 신심리도의 장점과 한계</Typography>
|
||
<Box sx={{ pl: 2, mb: 3 }}>
|
||
<Typography variant="body2" sx={{ color: 'success.main', mb: 1 }}>✔ 장점</Typography>
|
||
<Box sx={{ pl: 2, mb: 2, fontSize: '0.85rem' }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 계산·해석 매우 쉬움</Typography>
|
||
<Typography variant="body2">• 투자심리 파악에 직관적</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="body2" sx={{ color: 'error.main', mb: 1 }}>❌ 한계</Typography>
|
||
<Box sx={{ pl: 2, mb: 2, fontSize: '0.85rem' }}>
|
||
<Typography variant="body2" sx={{ mb: 1 }}>• 가격 변동폭 반영 안 함</Typography>
|
||
<Typography variant="body2">• 추세 추종 능력 약함</Typography>
|
||
</Box>
|
||
<Typography variant="body2" sx={{ color: 'warning.main' }}>
|
||
📌 반드시 추세 지표와 병행
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>한 줄 요약</Typography>
|
||
<Typography variant="body2" sx={{ fontStyle: 'italic', color: 'primary.main' }}>
|
||
신심리도는 상승한 날의 비율로 투자자 심리를 수치화한 지표로, 25·75 구간 이탈이 핵심 매매 신호입니다.
|
||
</Typography>
|
||
</Box>
|
||
);
|
||
|
||
default:
|
||
return (
|
||
<Box>
|
||
<Typography variant="body2" color="text.secondary">
|
||
{indicatorInfo[type]?.name} 지표에 대한 상세 설명은 준비 중입니다.
|
||
</Typography>
|
||
</Box>
|
||
);
|
||
}
|
||
};
|
||
|
||
const IndicatorSettingsPopup: React.FC<IndicatorSettingsPopupProps> = ({
|
||
open,
|
||
onClose,
|
||
indicatorType,
|
||
}) => {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
||
const { colors, updateColors } = useChartColors();
|
||
const {
|
||
indicatorSettings,
|
||
updateIndicatorSettings,
|
||
saveIndicatorSettings,
|
||
} = useIndicatorSettings();
|
||
|
||
// 로컬 상태
|
||
const [localColors, setLocalColors] = useState<Partial<ChartColorSettings>>({});
|
||
const [localSettings, setLocalSettings] = useState<Partial<IndicatorSettings>>({});
|
||
const [showHelpDialog, setShowHelpDialog] = useState(false);
|
||
|
||
// ✅ 색상 input ref 추적 (리렌더링 방지를 위해)
|
||
const colorInputRefsRef = useRef<Map<string, HTMLInputElement>>(new Map());
|
||
|
||
// 팝업 위치 상태 (드래그 시 유지)
|
||
const [dialogPosition, setDialogPosition] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
|
||
|
||
// 다이얼로그가 열릴 때 현재 값으로 초기화 (open/indicatorType 변경 시에만)
|
||
useEffect(() => {
|
||
if (open && indicatorType) {
|
||
setLocalColors({ ...colors });
|
||
setLocalSettings({ ...indicatorSettings });
|
||
}
|
||
|
||
// 다이얼로그가 닫힐 때 위치 초기화
|
||
if (!open) {
|
||
setDialogPosition({ x: 0, y: 0 });
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [open, indicatorType]);
|
||
|
||
if (!indicatorType) return null;
|
||
|
||
const info = indicatorInfo[indicatorType];
|
||
|
||
const handleColorChange = (key: keyof ChartColorSettings, value: string | number) => {
|
||
console.log(`🎨 [IndicatorSettingsPopup] handleColorChange - key: ${key}, value: ${value}`);
|
||
|
||
// ✅ 로컬 상태만 업데이트 (적용 버튼 클릭 시 Context에 반영)
|
||
setLocalColors(prev => {
|
||
const newColors = { ...prev, [key]: value };
|
||
console.log(`✅ [IndicatorSettingsPopup] localColors 업데이트:`, newColors);
|
||
return newColors;
|
||
});
|
||
};
|
||
|
||
const handleSettingChange = (key: keyof IndicatorSettings, value: number | boolean) => {
|
||
// 로컬 상태만 업데이트 (적용 버튼 클릭 시 Context에 반영)
|
||
setLocalSettings(prev => ({ ...prev, [key]: value }));
|
||
};
|
||
|
||
const handleSave = () => {
|
||
// 모든 색상 input의 현재 값을 읽어서 localColors에 반영
|
||
const finalColors: Partial<ChartColorSettings> = { ...localColors };
|
||
colorInputRefsRef.current.forEach((input, key) => {
|
||
if (input && input.value) {
|
||
(finalColors as any)[key] = input.value;
|
||
}
|
||
});
|
||
|
||
// 색상 업데이트
|
||
updateColors({ ...colors, ...finalColors });
|
||
|
||
// 설정값이 실제로 변경되었는지 확인
|
||
const settingsChanged = Object.keys(localSettings).some((key) => {
|
||
const localValue = (localSettings as any)[key];
|
||
const currentValue = (indicatorSettings as any)[key];
|
||
return localValue !== currentValue;
|
||
});
|
||
|
||
// 설정값이 변경된 경우 Context 업데이트 (settingsVersion 증가) 및 DB 저장
|
||
if (settingsChanged) {
|
||
console.log('🔄 [IndicatorSettingsPopup] 설정 변경 감지 - updateIndicatorSettings 호출:', localSettings);
|
||
// ✅ updateIndicatorSettings 호출 (settingsVersion 증가 → 차트 재계산 트리거)
|
||
updateIndicatorSettings(localSettings);
|
||
// ✅ DB 저장
|
||
saveIndicatorSettings({ ...indicatorSettings, ...localSettings });
|
||
}
|
||
|
||
onClose();
|
||
};
|
||
|
||
// 파라미터 테이블 컴포넌트
|
||
const ParamTable = ({
|
||
params,
|
||
}: {
|
||
params: { label: string; paramKey: keyof IndicatorSettings; min?: number; max?: number }[];
|
||
}) => {
|
||
// min/max 값을 기준으로 선택 옵션 생성 함수
|
||
const generateOptions = (min: number, max: number, step: number = 1) => {
|
||
const options: number[] = [];
|
||
for (let i = min; i <= max; i += step) {
|
||
options.push(i);
|
||
}
|
||
return options;
|
||
};
|
||
|
||
return (
|
||
<Box sx={{ mb: 2 }}>
|
||
<Typography variant="caption" fontWeight="bold" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
|
||
📊 파라미터
|
||
</Typography>
|
||
{/* 헤더 행 */}
|
||
<Box sx={{ p: 1, mb: 0.5, bgcolor: 'primary.main', borderRadius: 1, opacity: 0.85 }}>
|
||
<Grid container spacing={1} alignItems="center">
|
||
{params.map((param) => (
|
||
<Grid item xs={12 / params.length} key={`header-${param.paramKey}`}>
|
||
<Typography variant="caption" fontWeight="bold" color="white" textAlign="center" display="block">
|
||
{param.label}
|
||
</Typography>
|
||
</Grid>
|
||
))}
|
||
</Grid>
|
||
</Box>
|
||
{/* 값 행 - 드롭다운으로 변경 */}
|
||
<Box sx={{ p: 1, bgcolor: 'background.paper', borderRadius: 1, border: '1px solid', borderColor: 'divider' }}>
|
||
<Grid container spacing={1} alignItems="center">
|
||
{params.map((param) => {
|
||
const min = param.min ?? 1;
|
||
const max = param.max ?? 100;
|
||
const currentValue = Number(localSettings[param.paramKey] ?? indicatorSettings[param.paramKey] ?? min);
|
||
const options = generateOptions(min, max);
|
||
|
||
return (
|
||
<Grid item xs={12 / params.length} key={param.paramKey}>
|
||
<Select
|
||
size="small"
|
||
fullWidth
|
||
value={currentValue}
|
||
onChange={(e) => {
|
||
const newValue = Number(e.target.value);
|
||
handleSettingChange(param.paramKey, newValue);
|
||
console.log(`🔄 [ParamTable] ${param.label} - 선택: ${newValue}`);
|
||
}}
|
||
sx={{
|
||
fontSize: '12px',
|
||
height: 32,
|
||
'& .MuiSelect-select': {
|
||
py: 0.5,
|
||
textAlign: 'center'
|
||
},
|
||
'& .MuiOutlinedInput-root': { bgcolor: 'background.paper' }
|
||
}}
|
||
>
|
||
{options.map((value) => (
|
||
<MenuItem key={value} value={value} sx={{ fontSize: '12px' }}>
|
||
{value}
|
||
</MenuItem>
|
||
))}
|
||
</Select>
|
||
</Grid>
|
||
);
|
||
})}
|
||
</Grid>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
// 색상 및 굵기 테이블 컴포넌트
|
||
const ColorTable = ({
|
||
configs,
|
||
}: {
|
||
configs: {
|
||
label: string;
|
||
colorKey?: keyof ChartColorSettings;
|
||
widthKey?: keyof ChartColorSettings;
|
||
lineStyleKey?: keyof ChartColorSettings;
|
||
valueKey?: keyof IndicatorSettings;
|
||
valueMin?: number;
|
||
valueMax?: number;
|
||
valueStep?: number;
|
||
enableKey?: keyof IndicatorSettings;
|
||
disableToggle?: boolean;
|
||
}[];
|
||
}) => {
|
||
const hasValueColumn = configs.some(cfg => cfg.valueKey !== undefined);
|
||
const hasEnableColumn = configs.some(cfg => cfg.enableKey !== undefined);
|
||
const hasWidthColumn = configs.some(cfg => cfg.widthKey !== undefined);
|
||
const hasLineStyleColumn = configs.some(cfg => cfg.lineStyleKey !== undefined);
|
||
|
||
// 기준값 입력 필드의 임시 값 관리 (입력 중 포커스 유지를 위한 로컬 상태)
|
||
const [inputValues, setInputValues] = React.useState<Record<string, string>>({});
|
||
|
||
// 타이틀 텍스트 생성
|
||
const getTitleText = () => {
|
||
const parts = ['🎨 색상'];
|
||
if (hasWidthColumn) parts.push('선 굵기');
|
||
if (hasLineStyleColumn) parts.push('선 유형');
|
||
return parts.join(', ');
|
||
};
|
||
|
||
return (
|
||
<Box sx={{ mb: 0.5 }}>
|
||
<Typography variant="caption" fontWeight="bold" color="text.secondary" sx={{ display: 'block', mb: 1, fontSize: '12px' }}>
|
||
{getTitleText()}
|
||
</Typography>
|
||
{/* 헤더 행 */}
|
||
<Box sx={{
|
||
p: 1,
|
||
mb: 0.5,
|
||
bgcolor: (theme) => theme.palette.mode === 'dark' ? '#616161' : '#9e9e9e',
|
||
borderRadius: 1,
|
||
}}>
|
||
<Grid container spacing={1.5} alignItems="center">
|
||
{hasEnableColumn && (
|
||
<Grid item xs={hasValueColumn ? 0.8 : 1}>
|
||
<Typography variant="caption" fontWeight="bold" color="white">ON/OFF</Typography>
|
||
</Grid>
|
||
)}
|
||
<Grid item xs={hasEnableColumn ? (hasValueColumn ? 1.5 : 2) : (hasValueColumn ? 1.8 : (!hasWidthColumn && !hasLineStyleColumn ? 4 : 2.5))}>
|
||
<Typography variant="caption" fontWeight="bold" color="white">항목</Typography>
|
||
</Grid>
|
||
{hasValueColumn && (
|
||
<Grid item xs={1.5}>
|
||
<Typography variant="caption" fontWeight="bold" color="white">기준값</Typography>
|
||
</Grid>
|
||
)}
|
||
<Grid item xs={hasEnableColumn ? (hasValueColumn ? 1 : 1.5) : (hasValueColumn ? 1.2 : (!hasWidthColumn && !hasLineStyleColumn ? 4 : 1.5))}>
|
||
<Typography variant="caption" fontWeight="bold" color="white">색상</Typography>
|
||
</Grid>
|
||
{hasWidthColumn && (
|
||
<Grid item xs={hasEnableColumn ? (hasValueColumn ? 2.5 : 2.5) : (hasValueColumn ? 3 : 3)}>
|
||
<Typography variant="caption" fontWeight="bold" color="white">굵기</Typography>
|
||
</Grid>
|
||
)}
|
||
{hasLineStyleColumn && (
|
||
<Grid item xs={hasEnableColumn ? (hasValueColumn ? 2 : 2.5) : (hasValueColumn ? 2.5 : 2.5)}>
|
||
<Typography variant="caption" fontWeight="bold" color="white">선 유형</Typography>
|
||
</Grid>
|
||
)}
|
||
<Grid item xs={hasEnableColumn ? (hasValueColumn ? (hasWidthColumn && hasLineStyleColumn ? 2.7 : 4) : (hasWidthColumn && hasLineStyleColumn ? 2.5 : 4)) : (hasValueColumn ? (hasWidthColumn && hasLineStyleColumn ? 3.5 : 4) : (hasWidthColumn && hasLineStyleColumn ? 2.5 : 4))}>
|
||
<Typography variant="caption" fontWeight="bold" color="white">미리보기</Typography>
|
||
</Grid>
|
||
</Grid>
|
||
</Box>
|
||
{/* 각 색상 설정 행 */}
|
||
{configs.map((cfg, index) => {
|
||
const colorValue = cfg.colorKey ? String(localColors[cfg.colorKey] || colors[cfg.colorKey] || '#666666') : '#666666';
|
||
const widthValue = cfg.widthKey ? Number(localColors[cfg.widthKey] ?? colors[cfg.widthKey] ?? 1.5) : 1.5;
|
||
const lineStyleValue = cfg.lineStyleKey ? String(localColors[cfg.lineStyleKey] ?? colors[cfg.lineStyleKey] ?? 'solid') : 'solid';
|
||
const paramValue = cfg.valueKey ? Number(localSettings[cfg.valueKey] ?? indicatorSettings[cfg.valueKey] ?? 0) : 0;
|
||
const enabledValue = cfg.enableKey ? Boolean(localSettings[cfg.enableKey] ?? indicatorSettings[cfg.enableKey] ?? false) : true;
|
||
|
||
return (
|
||
<Box key={cfg.colorKey || `param-${index}`} sx={{ p: 1, mb: 0.5, bgcolor: 'background.paper', borderRadius: 1, border: '1px solid', borderColor: 'divider' }}>
|
||
<Grid container spacing={1} alignItems="center">
|
||
{/* ON/OFF 토글 */}
|
||
{hasEnableColumn && (
|
||
<Grid item xs={hasValueColumn ? 0.8 : 1} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
{cfg.enableKey ? (
|
||
<Switch
|
||
checked={enabledValue}
|
||
onChange={(e) => handleSettingChange(cfg.enableKey!, e.target.checked)}
|
||
disabled={cfg.disableToggle === true}
|
||
size="small"
|
||
/>
|
||
) : (
|
||
<Typography variant="caption" color="text.disabled">-</Typography>
|
||
)}
|
||
</Grid>
|
||
)}
|
||
{/* 항목 이름 */}
|
||
<Grid item xs={hasEnableColumn ? (hasValueColumn ? 1.5 : 2) : (hasValueColumn ? 1.8 : 2.5)} sx={{ display: 'flex', alignItems: 'center' }}>
|
||
<Typography variant="body2" sx={{ fontSize: '12px', fontWeight: 'medium' }}>
|
||
{cfg.label}
|
||
</Typography>
|
||
</Grid>
|
||
{/* 기준값 선택 (valueKey가 있을 때만 표시) */}
|
||
{hasValueColumn && (
|
||
<Grid item xs={1.5} sx={{ display: 'flex', alignItems: 'center' }}>
|
||
{cfg.valueKey ? (
|
||
<Autocomplete
|
||
id={`input-${cfg.valueKey}`}
|
||
value={paramValue}
|
||
onChange={(event, newValue) => {
|
||
// 드롭다운에서 선택했을 때
|
||
if (newValue !== null) {
|
||
const numValue = typeof newValue === 'number' ? newValue : Number(newValue);
|
||
if (!isNaN(numValue)) {
|
||
const min = cfg.valueMin ?? 0;
|
||
const max = cfg.valueMax ?? 100;
|
||
|
||
// 기준값(Period, Length 등)은 양수만 허용
|
||
const isPeriodValue = cfg.valueKey && (
|
||
cfg.valueKey.toLowerCase().includes('period') ||
|
||
cfg.valueKey.toLowerCase().includes('length') ||
|
||
cfg.valueKey.toLowerCase().includes('slowing')
|
||
);
|
||
|
||
if (numValue >= min && numValue <= max) {
|
||
// 기준값인 경우 양수 확인
|
||
if (isPeriodValue && numValue < 0) {
|
||
return;
|
||
}
|
||
handleSettingChange(cfg.valueKey!, numValue);
|
||
setInputValues(prev => ({ ...prev, [cfg.valueKey!]: String(numValue) }));
|
||
console.log(`🔄 [IndicatorSettingsPopup] ${cfg.label} - 선택: ${numValue}`);
|
||
}
|
||
}
|
||
}
|
||
}}
|
||
inputValue={inputValues[cfg.valueKey] ?? String(paramValue)}
|
||
onInputChange={(event, newInputValue, reason) => {
|
||
// 입력값이 변경될 때는 로컬 상태만 업데이트 (필터링을 위해)
|
||
if (reason === 'input') {
|
||
// 기준값(Period, Length 등)은 양수만, 기준선(Overbought, Oversold 등)은 음수도 허용
|
||
const isPeriodValue = cfg.valueKey && (
|
||
cfg.valueKey.toLowerCase().includes('period') ||
|
||
cfg.valueKey.toLowerCase().includes('length') ||
|
||
cfg.valueKey.toLowerCase().includes('slowing')
|
||
);
|
||
const numberPattern = isPeriodValue ? /^\d*\.?\d*$/ : /^-?\d*\.?\d*$/;
|
||
|
||
// 빈 문자열이거나 숫자만 허용
|
||
if (newInputValue === '' || numberPattern.test(newInputValue)) {
|
||
setInputValues(prev => ({ ...prev, [cfg.valueKey!]: newInputValue }));
|
||
}
|
||
} else if (reason === 'reset') {
|
||
// 리셋 시에는 현재 paramValue로 복원
|
||
setInputValues(prev => ({ ...prev, [cfg.valueKey!]: String(paramValue) }));
|
||
} else if (reason === 'clear') {
|
||
// 클리어 시 빈 문자열
|
||
setInputValues(prev => ({ ...prev, [cfg.valueKey!]: '' }));
|
||
}
|
||
}}
|
||
options={(() => {
|
||
const min = cfg.valueMin ?? 0;
|
||
const max = cfg.valueMax ?? 100;
|
||
const step = cfg.valueStep ?? 1;
|
||
const values: number[] = [];
|
||
for (let i = min; i <= max; i += step) {
|
||
values.push(i);
|
||
}
|
||
return values;
|
||
})()}
|
||
getOptionLabel={(option) => String(option)}
|
||
filterOptions={(options, state) => {
|
||
// 입력값으로 필터링
|
||
const inputValue = state.inputValue.toLowerCase();
|
||
if (!inputValue) return options;
|
||
return options.filter(option =>
|
||
String(option).toLowerCase().includes(inputValue)
|
||
);
|
||
}}
|
||
freeSolo
|
||
size="small"
|
||
fullWidth
|
||
disableClearable
|
||
renderInput={(params) => (
|
||
<TextField
|
||
{...params}
|
||
inputProps={{
|
||
...params.inputProps,
|
||
style: { textAlign: 'center', fontSize: '12px' }
|
||
}}
|
||
onBlur={(e) => {
|
||
// 포커스 아웃 시 실제 값 업데이트
|
||
const inputStr = e.target.value.trim();
|
||
if (inputStr === '') {
|
||
// 빈 값이면 원래 값으로 복원
|
||
setInputValues(prev => ({ ...prev, [cfg.valueKey!]: String(paramValue) }));
|
||
return;
|
||
}
|
||
|
||
const numValue = Number(inputStr);
|
||
const min = cfg.valueMin ?? 0;
|
||
const max = cfg.valueMax ?? 100;
|
||
|
||
// 기준값(Period, Length 등)은 양수만 허용
|
||
const isPeriodValue = cfg.valueKey && (
|
||
cfg.valueKey.toLowerCase().includes('period') ||
|
||
cfg.valueKey.toLowerCase().includes('length') ||
|
||
cfg.valueKey.toLowerCase().includes('slowing')
|
||
);
|
||
|
||
if (!isNaN(numValue) && numValue >= min && numValue <= max) {
|
||
// 기준값인 경우 양수 확인
|
||
if (isPeriodValue && numValue < 0) {
|
||
setInputValues(prev => ({ ...prev, [cfg.valueKey!]: String(paramValue) }));
|
||
return;
|
||
}
|
||
handleSettingChange(cfg.valueKey!, numValue);
|
||
setInputValues(prev => ({ ...prev, [cfg.valueKey!]: String(numValue) }));
|
||
console.log(`🔄 [IndicatorSettingsPopup] ${cfg.label} - 입력 완료: ${numValue}`);
|
||
} else {
|
||
// 유효하지 않은 값이면 원래 값으로 복원
|
||
setInputValues(prev => ({ ...prev, [cfg.valueKey!]: String(paramValue) }));
|
||
}
|
||
}}
|
||
onKeyDown={(e) => {
|
||
// 엔터 키 입력 시 실제 값 업데이트
|
||
if (e.key === 'Enter') {
|
||
const inputStr = (e.target as HTMLInputElement).value.trim();
|
||
if (inputStr === '') {
|
||
setInputValues(prev => ({ ...prev, [cfg.valueKey!]: String(paramValue) }));
|
||
(e.target as HTMLInputElement).blur();
|
||
return;
|
||
}
|
||
|
||
const numValue = Number(inputStr);
|
||
const min = cfg.valueMin ?? 0;
|
||
const max = cfg.valueMax ?? 100;
|
||
|
||
// 기준값(Period, Length 등)은 양수만 허용
|
||
const isPeriodValue = cfg.valueKey && (
|
||
cfg.valueKey.toLowerCase().includes('period') ||
|
||
cfg.valueKey.toLowerCase().includes('length') ||
|
||
cfg.valueKey.toLowerCase().includes('slowing')
|
||
);
|
||
|
||
if (!isNaN(numValue) && numValue >= min && numValue <= max) {
|
||
// 기준값인 경우 양수 확인
|
||
if (isPeriodValue && numValue < 0) {
|
||
setInputValues(prev => ({ ...prev, [cfg.valueKey!]: String(paramValue) }));
|
||
(e.target as HTMLInputElement).blur();
|
||
return;
|
||
}
|
||
handleSettingChange(cfg.valueKey!, numValue);
|
||
setInputValues(prev => ({ ...prev, [cfg.valueKey!]: String(numValue) }));
|
||
console.log(`🔄 [IndicatorSettingsPopup] ${cfg.label} - 엔터 입력: ${numValue}`);
|
||
(e.target as HTMLInputElement).blur(); // 포커스 해제
|
||
} else {
|
||
// 유효하지 않은 값이면 원래 값으로 복원
|
||
setInputValues(prev => ({ ...prev, [cfg.valueKey!]: String(paramValue) }));
|
||
}
|
||
}
|
||
}}
|
||
sx={{
|
||
'& .MuiInputBase-root': {
|
||
height: 32,
|
||
fontSize: '12px'
|
||
},
|
||
'& .MuiInputBase-input': {
|
||
py: 0.5
|
||
}
|
||
}}
|
||
/>
|
||
)}
|
||
ListboxProps={{
|
||
style: { maxHeight: '200px', fontSize: '12px' }
|
||
}}
|
||
sx={{
|
||
'& .MuiAutocomplete-option': {
|
||
fontSize: '12px',
|
||
minHeight: '32px'
|
||
}
|
||
}}
|
||
/>
|
||
) : (
|
||
<Typography variant="caption" color="text.disabled">-</Typography>
|
||
)}
|
||
</Grid>
|
||
)}
|
||
{/* 색상 선택 */}
|
||
<Grid item xs={hasEnableColumn ? (hasValueColumn ? 1 : 1.5) : (hasValueColumn ? 1.2 : (!hasWidthColumn && !hasLineStyleColumn ? 4 : 1.5))} sx={{ display: 'flex', alignItems: 'center' }}>
|
||
{cfg.colorKey ? (
|
||
<Box sx={{ position: 'relative', display: 'inline-block' }}>
|
||
<Box
|
||
sx={{
|
||
width: 28,
|
||
height: 28,
|
||
borderRadius: 1,
|
||
bgcolor: colorValue,
|
||
border: '1px solid',
|
||
borderColor: 'divider',
|
||
cursor: 'pointer',
|
||
'&:hover': { boxShadow: '0 0 0 2px rgba(25, 118, 210, 0.5)' },
|
||
}}
|
||
/>
|
||
<input
|
||
type="color"
|
||
defaultValue={colorValue.startsWith('#') ? colorValue : '#666666'}
|
||
ref={(el) => {
|
||
if (el) {
|
||
colorInputRefsRef.current.set(cfg.colorKey!, el);
|
||
}
|
||
}}
|
||
onInput={(e) => {
|
||
// ✅ 색상 선택 중: 미리보기만 업데이트 (리렌더링 방지)
|
||
const target = e.target as HTMLInputElement;
|
||
const box = target.previousElementSibling as HTMLElement;
|
||
if (box) {
|
||
box.style.backgroundColor = target.value;
|
||
}
|
||
}}
|
||
style={{ position: 'absolute', top: 0, left: 0, width: 28, height: 28, opacity: 0, cursor: 'pointer' }}
|
||
/>
|
||
</Box>
|
||
) : (
|
||
<Typography variant="caption" color="text.disabled">-</Typography>
|
||
)}
|
||
</Grid>
|
||
{/* 선 굵기 슬라이더 */}
|
||
{hasWidthColumn && (
|
||
<Grid item xs={hasEnableColumn ? (hasValueColumn ? 2.5 : 2.5) : (hasValueColumn ? 3 : 3)} sx={{ display: 'flex', alignItems: 'center' }}>
|
||
{cfg.widthKey ? (
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, width: '100%' }}>
|
||
<Slider
|
||
value={widthValue}
|
||
onChange={(_, value) => handleColorChange(cfg.widthKey!, value as number)}
|
||
min={0.5}
|
||
max={5}
|
||
step={0.5}
|
||
size="small"
|
||
sx={{ flex: 1 }}
|
||
/>
|
||
<Typography variant="caption" sx={{ minWidth: 30, textAlign: 'right', fontSize: '11px' }}>
|
||
{widthValue}px
|
||
</Typography>
|
||
</Box>
|
||
) : (
|
||
<Typography variant="caption" color="text.disabled">-</Typography>
|
||
)}
|
||
</Grid>
|
||
)}
|
||
{/* 선 유형 선택 */}
|
||
{hasLineStyleColumn && (
|
||
<Grid item xs={hasEnableColumn ? (hasValueColumn ? 2 : 2.5) : (hasValueColumn ? 2.5 : 2.5)} sx={{ display: 'flex', alignItems: 'center' }}>
|
||
{cfg.lineStyleKey ? (
|
||
<Select
|
||
value={lineStyleValue}
|
||
onChange={(e) => handleColorChange(cfg.lineStyleKey!, e.target.value)}
|
||
size="small"
|
||
fullWidth
|
||
sx={{
|
||
fontSize: '11px',
|
||
height: 28,
|
||
'& .MuiSelect-select': { py: 0.5 }
|
||
}}
|
||
>
|
||
<MenuItem value="solid" sx={{ fontSize: '11px' }}>━━ 실선</MenuItem>
|
||
<MenuItem value="dashed" sx={{ fontSize: '11px' }}>╍╍ 대시</MenuItem>
|
||
<MenuItem value="dotted" sx={{ fontSize: '11px' }}>··· 점선</MenuItem>
|
||
</Select>
|
||
) : (
|
||
<Typography variant="caption" color="text.disabled">-</Typography>
|
||
)}
|
||
</Grid>
|
||
)}
|
||
{/* 미리보기 */}
|
||
<Grid item xs={hasEnableColumn ? (hasValueColumn ? (hasWidthColumn && hasLineStyleColumn ? 2.7 : 4) : (hasWidthColumn && hasLineStyleColumn ? 2.5 : 4)) : (hasValueColumn ? (hasWidthColumn && hasLineStyleColumn ? 3.5 : 4) : (hasWidthColumn && hasLineStyleColumn ? 2.5 : 4))} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
{cfg.colorKey ? (
|
||
<svg width="100" height="20" style={{ display: 'block' }}>
|
||
<line
|
||
x1="0"
|
||
y1="10"
|
||
x2="100"
|
||
y2="10"
|
||
stroke={colorValue}
|
||
strokeWidth={widthValue}
|
||
strokeDasharray={
|
||
lineStyleValue === 'dashed' ? '5,5' :
|
||
lineStyleValue === 'dotted' ? '2,2' : '0'
|
||
}
|
||
/>
|
||
</svg>
|
||
) : (
|
||
<Typography variant="caption" color="text.disabled">-</Typography>
|
||
)}
|
||
</Grid>
|
||
</Grid>
|
||
</Box>
|
||
);
|
||
})}
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
// 보조지표별 설정 렌더링
|
||
const renderIndicatorSettings = () => {
|
||
switch (indicatorType) {
|
||
case 'volume':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: '상승', colorKey: 'volumeRising', enableKey: 'volumeRisingEnabled' },
|
||
{ label: '하락', colorKey: 'volumeFalling', enableKey: 'volumeFallingEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'macd':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: 'MACD', colorKey: 'macdLine', widthKey: 'macdLineWidth', lineStyleKey: 'macdLineStyle', valueKey: 'macdFastPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'macdEnabled' },
|
||
{ label: '장기 EMA', colorKey: 'slowEmaColor', widthKey: 'slowEmaWidth', lineStyleKey: 'slowEmaLineStyle', valueKey: 'macdSlowPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'macdEnabled' },
|
||
{ label: '시그널', colorKey: 'signalLine', widthKey: 'signalLineWidth', lineStyleKey: 'signalLineStyle', valueKey: 'macdSignalPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'macdEnabled' },
|
||
{ label: '0선', colorKey: 'macdZeroLineColor', widthKey: 'macdZeroLineWidth', lineStyleKey: 'macdZeroLineStyle', enableKey: 'macdZeroLineEnabled' },
|
||
{ label: '히스토그램(상승)', colorKey: 'histogramPositive', enableKey: 'histogramPositiveEnabled' },
|
||
{ label: '히스토그램(하락)', colorKey: 'histogramNegative', enableKey: 'histogramNegativeEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'stochastic':
|
||
return (
|
||
<>
|
||
<Box sx={{ mb: 2, p: 2, bgcolor: 'info.main', color: 'white', borderRadius: 1 }}>
|
||
<Typography variant="caption" sx={{ fontWeight: 'bold', display: 'block', mb: 0.5 }}>
|
||
ℹ️ Stochastic Slow 설명
|
||
</Typography>
|
||
<Typography variant="caption" sx={{ fontSize: '11px', display: 'block' }}>
|
||
• 기간: Raw Stochastic %K 계산 기간 (업비트 기본값: 12일)
|
||
</Typography>
|
||
<Typography variant="caption" sx={{ fontSize: '11px', display: 'block' }}>
|
||
• %K: Slow %K의 Smoothing 기간 (업비트 기본값: 5일)
|
||
</Typography>
|
||
<Typography variant="caption" sx={{ fontSize: '11px', display: 'block' }}>
|
||
• %D: Slow %D (시그널선) 계산 기간 (업비트 기본값: 5일)
|
||
</Typography>
|
||
</Box>
|
||
<ColorTable configs={[
|
||
{ label: '기간', colorKey: 'stochasticK', widthKey: 'stochasticKWidth', lineStyleKey: 'stochasticKLineStyle', valueKey: 'stochasticKPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'stochasticEnabled' },
|
||
{ label: '%K', colorKey: 'stochasticK', widthKey: 'stochasticKWidth', lineStyleKey: 'stochasticKLineStyle', valueKey: 'stochasticSlowing', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'stochasticEnabled' },
|
||
{ label: '%D', colorKey: 'stochasticD', widthKey: 'stochasticDWidth', lineStyleKey: 'stochasticDLineStyle', valueKey: 'stochasticDPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'stochasticEnabled' },
|
||
{ label: '과매도 기준선', colorKey: 'stochasticOversoldColor', widthKey: 'stochasticOversoldWidth', lineStyleKey: 'stochasticOversoldLineStyle', valueKey: 'stochasticOversold', valueMin: 0, valueMax: 50, valueStep: 1, enableKey: 'stochasticOversoldEnabled' },
|
||
{ label: '중앙값 기준선', colorKey: 'stochasticNeutralColor', widthKey: 'stochasticNeutralWidth', lineStyleKey: 'stochasticNeutralLineStyle', valueKey: 'stochasticNeutral', valueMin: 40, valueMax: 60, valueStep: 1, enableKey: 'stochasticNeutralEnabled' },
|
||
{ label: '과매수 기준선', colorKey: 'stochasticOverboughtColor', widthKey: 'stochasticOverboughtWidth', lineStyleKey: 'stochasticOverboughtLineStyle', valueKey: 'stochasticOverbought', valueMin: 50, valueMax: 100, valueStep: 1, enableKey: 'stochasticOverboughtEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'rsi':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: 'RSI', colorKey: 'rsiColor', widthKey: 'rsiWidth', lineStyleKey: 'rsiLineStyle', valueKey: 'rsiPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'rsiEnabled' },
|
||
{ label: '신호', colorKey: 'rsiSignalColor', widthKey: 'rsiSignalWidth', lineStyleKey: 'rsiSignalLineStyle', valueKey: 'rsiSignalPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'rsiSignalEnabled' },
|
||
{ label: '과매수', colorKey: 'rsiOverboughtColor', widthKey: 'rsiOverboughtWidth', lineStyleKey: 'rsiOverboughtLineStyle', valueKey: 'rsiOverbought', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'rsiOverboughtEnabled' },
|
||
{ label: '중앙값', colorKey: 'rsiMiddleColor', widthKey: 'rsiMiddleWidth', lineStyleKey: 'rsiMiddleLineStyle', valueKey: 'rsiMiddle', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'rsiMiddleEnabled' },
|
||
{ label: '과매도', colorKey: 'rsiOversoldColor', widthKey: 'rsiOversoldWidth', lineStyleKey: 'rsiOversoldLineStyle', valueKey: 'rsiOversold', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'rsiOversoldEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'adx':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: 'ADX', colorKey: 'adxColor', widthKey: 'adxWidth', lineStyleKey: 'adxLineStyle', valueKey: 'adxPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'adxEnabled' },
|
||
{ label: '+DI', colorKey: 'plusDiColor', widthKey: 'plusDiWidth', lineStyleKey: 'plusDiLineStyle', enableKey: 'plusDiEnabled' },
|
||
{ label: '-DI', colorKey: 'minusDiColor', widthKey: 'minusDiWidth', lineStyleKey: 'minusDiLineStyle', enableKey: 'minusDiEnabled' },
|
||
{ label: '강한 추세', colorKey: 'adxStrongColor', widthKey: 'adxStrongWidth', lineStyleKey: 'adxStrongLineStyle', valueKey: 'adxStrongThreshold', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'adxStrongEnabled' },
|
||
{ label: '약한 추세', colorKey: 'adxWeakColor', widthKey: 'adxWeakWidth', lineStyleKey: 'adxWeakLineStyle', valueKey: 'adxWeakThreshold', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'adxWeakEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'cci':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: 'CCI', colorKey: 'cciColor', widthKey: 'cciWidth', lineStyleKey: 'cciLineStyle', valueKey: 'cciPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'cciEnabled' },
|
||
{ label: '신호', colorKey: 'cciSignalColor', widthKey: 'cciSignalWidth', lineStyleKey: 'cciSignalLineStyle', valueKey: 'cciSignalPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'cciSignalEnabled' },
|
||
{ label: '과열', colorKey: 'cciOverboughtColor', widthKey: 'cciOverboughtWidth', lineStyleKey: 'cciOverboughtLineStyle', valueKey: 'cciOverbought', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'cciOverboughtEnabled' },
|
||
{ label: '중앙값', colorKey: 'cciMiddleColor', widthKey: 'cciMiddleWidth', lineStyleKey: 'cciMiddleLineStyle', valueKey: 'cciMiddle', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'cciMiddleEnabled' },
|
||
{ label: '침체', colorKey: 'cciOversoldColor', widthKey: 'cciOversoldWidth', lineStyleKey: 'cciOversoldLineStyle', valueKey: 'cciOversold', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'cciOversoldEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'trix':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: 'TRIX', colorKey: 'trixColor', widthKey: 'trixWidth', lineStyleKey: 'trixLineStyle', valueKey: 'trixPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'trixEnabled' },
|
||
{ label: '신호', colorKey: 'trixSignalColor', widthKey: 'trixSignalWidth', lineStyleKey: 'trixSignalLineStyle', valueKey: 'trixSignalPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'trixEnabled' },
|
||
{ label: '과매수', colorKey: 'trixOverboughtColor', widthKey: 'trixOverboughtWidth', lineStyleKey: 'trixOverboughtLineStyle', valueKey: 'trixOverbought', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'trixOverboughtEnabled' },
|
||
{ label: '중앙값', colorKey: 'trixMiddleColor', widthKey: 'trixMiddleWidth', lineStyleKey: 'trixMiddleLineStyle', valueKey: 'trixMiddle', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'trixMiddleEnabled' },
|
||
{ label: '과매도', colorKey: 'trixOversoldColor', widthKey: 'trixOversoldWidth', lineStyleKey: 'trixOversoldLineStyle', valueKey: 'trixOversold', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'trixOversoldEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'disparity':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: '초단기', colorKey: 'disparityUltraShortColor', widthKey: 'disparityUltraShortWidth', lineStyleKey: 'disparityUltraShortLineStyle', valueKey: 'disparityUltraShortPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'disparityUltraShortEnabled' },
|
||
{ label: '단기', colorKey: 'disparityShortColor', widthKey: 'disparityShortWidth', lineStyleKey: 'disparityShortLineStyle', valueKey: 'disparityShortPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'disparityShortEnabled' },
|
||
{ label: '중기', colorKey: 'disparityMidColor', widthKey: 'disparityMidWidth', lineStyleKey: 'disparityMidLineStyle', valueKey: 'disparityMidPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'disparityMidEnabled' },
|
||
{ label: '장기', colorKey: 'disparityLongColor', widthKey: 'disparityLongWidth', lineStyleKey: 'disparityLongLineStyle', valueKey: 'disparityLongPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'disparityLongEnabled' },
|
||
{ label: '100 기준선', colorKey: 'disparityBaseLineColor', widthKey: 'disparityBaseLineWidth', lineStyleKey: 'disparityBaseLineStyle', enableKey: 'disparityBaseLineEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'newPsychological':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: '신심리도', colorKey: 'newPsychologicalColor', widthKey: 'newPsychologicalWidth', lineStyleKey: 'newPsychologicalLineStyle', valueKey: 'newPsychologicalPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'newPsychologicalEnabled' },
|
||
{ label: '과열', colorKey: 'newPsychologicalOverboughtColor', widthKey: 'newPsychologicalOverboughtWidth', lineStyleKey: 'newPsychologicalOverboughtLineStyle', valueKey: 'newPsychologicalOverbought', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'newPsychologicalOverboughtEnabled' },
|
||
{ label: '중앙값', colorKey: 'newPsychologicalNeutralColor', widthKey: 'newPsychologicalNeutralWidth', lineStyleKey: 'newPsychologicalNeutralLineStyle', valueKey: 'newPsychologicalMiddle', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'newPsychologicalMiddleEnabled' },
|
||
{ label: '침체', colorKey: 'newPsychologicalOversoldColor', widthKey: 'newPsychologicalOversoldWidth', lineStyleKey: 'newPsychologicalOversoldLineStyle', valueKey: 'newPsychologicalOversold', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'newPsychologicalOversoldEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'investPsychological':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: '투자심리도', colorKey: 'investPsychologicalColor', widthKey: 'investPsychologicalWidth', lineStyleKey: 'investPsychologicalLineStyle', valueKey: 'investPsychologicalPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'investPsychologicalEnabled' },
|
||
{ label: '과열', colorKey: 'investPsychologicalOverboughtColor', widthKey: 'investPsychologicalOverboughtWidth', lineStyleKey: 'investPsychologicalOverboughtLineStyle', valueKey: 'investPsychologicalOverbought', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'investPsychologicalOverboughtEnabled' },
|
||
{ label: '중앙값', colorKey: 'investPsychologicalMiddleColor', widthKey: 'investPsychologicalMiddleWidth', lineStyleKey: 'investPsychologicalMiddleLineStyle', valueKey: 'investPsychologicalMiddle', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'investPsychologicalMiddleEnabled' },
|
||
{ label: '침체', colorKey: 'investPsychologicalOversoldColor', widthKey: 'investPsychologicalOversoldWidth', lineStyleKey: 'investPsychologicalOversoldLineStyle', valueKey: 'investPsychologicalOversold', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'investPsychologicalOversoldEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'williamsR':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: 'Williams%R', colorKey: 'williamsRColor', widthKey: 'williamsRWidth', lineStyleKey: 'williamsRLineStyle', valueKey: 'williamsRPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'williamsREnabled' },
|
||
{ label: '과열', colorKey: 'williamsROverboughtColor', widthKey: 'williamsROverboughtWidth', lineStyleKey: 'williamsROverboughtLineStyle', valueKey: 'williamsROverbought', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'williamsROverboughtEnabled' },
|
||
{ label: '중앙값', colorKey: 'williamsRMiddleColor', widthKey: 'williamsRMiddleWidth', lineStyleKey: 'williamsRMiddleLineStyle', valueKey: 'williamsRMiddle', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'williamsRMiddleEnabled' },
|
||
{ label: '침체', colorKey: 'williamsROversoldColor', widthKey: 'williamsROversoldWidth', lineStyleKey: 'williamsROversoldLineStyle', valueKey: 'williamsROversold', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'williamsROversoldEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'bwi':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: 'BWI', colorKey: 'bwiColor', widthKey: 'bwiWidth', lineStyleKey: 'bwiLineStyle', valueKey: 'bwiPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'bwiEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'obv':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: 'OBV', colorKey: 'obvColor', widthKey: 'obvWidth', lineStyleKey: 'obvLineStyle', enableKey: 'obvEnabled' },
|
||
{ label: '신호', colorKey: 'obvSignalColor', widthKey: 'obvSignalWidth', lineStyleKey: 'obvSignalLineStyle', valueKey: 'obvSignalPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'obvSignalEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'volumeOsc':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: 'VolumeOSC', colorKey: 'volumeOscColor', widthKey: 'volumeOscWidth', lineStyleKey: 'volumeOscLineStyle', enableKey: 'volumeOscEnabled' },
|
||
{ label: '단기', colorKey: 'volumeOscColor', widthKey: 'volumeOscWidth', lineStyleKey: 'volumeOscLineStyle', valueKey: 'volumeOscShortPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'volumeOscEnabled' },
|
||
{ label: '장기', colorKey: 'volumeOscColor', widthKey: 'volumeOscWidth', lineStyleKey: 'volumeOscLineStyle', valueKey: 'volumeOscLongPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'volumeOscEnabled' },
|
||
{ label: '0선', colorKey: 'volumeOscZeroLineColor', widthKey: 'volumeOscZeroLineWidth', lineStyleKey: 'volumeOscZeroLineStyle', enableKey: 'volumeOscZeroLineEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'vr':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: 'VR', colorKey: 'vrColor', widthKey: 'vrWidth', lineStyleKey: 'vrLineStyle', valueKey: 'vrPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'vrEnabled' },
|
||
{ label: 'VR2', colorKey: 'vr2Color', widthKey: 'vr2Width', lineStyleKey: 'vr2LineStyle', valueKey: 'vr2Period', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'vr2Enabled' },
|
||
{ label: '과열', colorKey: 'vrOverboughtColor', widthKey: 'vrOverboughtWidth', lineStyleKey: 'vrOverboughtLineStyle', valueKey: 'vrOverbought', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'vrOverboughtEnabled' },
|
||
{ label: '기준', colorKey: 'vrBaseLineColor', widthKey: 'vrBaseLineWidth', lineStyleKey: 'vrBaseLineStyle', valueKey: 'vrBaseLine', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'vrBaseLineEnabled' },
|
||
{ label: '침체', colorKey: 'vrOversoldColor', widthKey: 'vrOversoldWidth', lineStyleKey: 'vrOversoldLineStyle', valueKey: 'vrOversold', valueMin: -1000, valueMax: 1000, valueStep: 1, enableKey: 'vrOversoldEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'dmi':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: '기간', valueKey: 'dmiPeriod', valueMin: 1, valueMax: 500, valueStep: 1 },
|
||
{ label: 'DI+', colorKey: 'plusDiColor', widthKey: 'plusDiWidth', lineStyleKey: 'plusDiLineStyle', enableKey: 'plusDiEnabled' },
|
||
{ label: 'DI-', colorKey: 'minusDiColor', widthKey: 'minusDiWidth', lineStyleKey: 'minusDiLineStyle', enableKey: 'minusDiEnabled' },
|
||
{ label: '과열', colorKey: 'dmiOverboughtColor', widthKey: 'dmiOverboughtWidth', lineStyleKey: 'dmiOverboughtLineStyle', valueKey: 'dmiOverbought', valueMin: 0, valueMax: 100, valueStep: 1, enableKey: 'dmiOverboughtEnabled' },
|
||
{ label: '중간값', colorKey: 'dmiMiddleColor', widthKey: 'dmiMiddleWidth', lineStyleKey: 'dmiMiddleLineStyle', valueKey: 'dmiMiddle', valueMin: 0, valueMax: 100, valueStep: 1, enableKey: 'dmiMiddleEnabled' },
|
||
{ label: '침체', colorKey: 'dmiOversoldColor', widthKey: 'dmiOversoldWidth', lineStyleKey: 'dmiOversoldLineStyle', valueKey: 'dmiOversold', valueMin: 0, valueMax: 100, valueStep: 1, enableKey: 'dmiOversoldEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
case 'momentum':
|
||
return (
|
||
<>
|
||
<ColorTable configs={[
|
||
{ label: 'Momentum', colorKey: 'momentumColor', widthKey: 'momentumWidth', lineStyleKey: 'momentumLineStyle', valueKey: 'momentumPeriod', valueMin: 1, valueMax: 500, valueStep: 1, enableKey: 'momentumEnabled' },
|
||
{ label: '0선 기준선', colorKey: 'momentumZeroLineColor', widthKey: 'momentumZeroLineWidth', lineStyleKey: 'momentumZeroLineStyle', enableKey: 'momentumZeroLineEnabled' },
|
||
]} />
|
||
</>
|
||
);
|
||
|
||
default:
|
||
return <Typography>설정 항목이 없습니다.</Typography>;
|
||
}
|
||
};
|
||
|
||
// 드래그 가능한 Paper 컴포넌트
|
||
function DraggablePaper(props: PaperProps) {
|
||
return (
|
||
<Draggable
|
||
handle="#draggable-dialog-title"
|
||
cancel={'[class*="MuiDialogContent-root"], [class*="MuiIconButton-root"], [class*="MuiButton-root"]'}
|
||
position={dialogPosition}
|
||
onStop={(e, data) => {
|
||
setDialogPosition({ x: data.x, y: data.y });
|
||
}}
|
||
>
|
||
<Paper {...props} />
|
||
</Draggable>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<Dialog
|
||
open={open}
|
||
onClose={onClose}
|
||
maxWidth={false}
|
||
fullScreen={isMobile}
|
||
PaperComponent={isMobile ? Paper : DraggablePaper}
|
||
PaperProps={{
|
||
sx: {
|
||
bgcolor: 'background.paper',
|
||
backgroundImage: 'none',
|
||
width: isMobile ? '100%' : '900px',
|
||
minWidth: isMobile ? '100%' : '900px',
|
||
maxWidth: isMobile ? '100%' : '90vw',
|
||
minHeight: indicatorType === 'macd' ? '550px' : (indicatorType === 'cci' ? '450px' : '350px'),
|
||
maxHeight: '80vh',
|
||
resize: isMobile ? 'none' : 'both',
|
||
overflow: 'auto',
|
||
'&::after': isMobile ? {} : {
|
||
content: '""',
|
||
position: 'absolute',
|
||
right: 0,
|
||
bottom: 0,
|
||
width: '16px',
|
||
height: '16px',
|
||
background: 'linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.2) 50%)',
|
||
cursor: 'nwse-resize',
|
||
pointerEvents: 'none',
|
||
},
|
||
},
|
||
}}
|
||
>
|
||
<DialogTitle
|
||
id="draggable-dialog-title"
|
||
sx={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
bgcolor: '#1976d2',
|
||
color: '#fff',
|
||
py: 1.2,
|
||
cursor: isMobile ? 'default' : 'move',
|
||
}}
|
||
>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<SettingsIcon sx={{ color: '#fff' }} />
|
||
<Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px', color: '#fff' }}>
|
||
{info.name} 설정
|
||
</Typography>
|
||
<IconButton
|
||
onClick={() => setShowHelpDialog(true)}
|
||
size="small"
|
||
sx={{
|
||
ml: 0.5,
|
||
color: '#fff',
|
||
'&:hover': { bgcolor: 'rgba(255,255,255,0.1)' }
|
||
}}
|
||
>
|
||
<HelpOutlineIcon fontSize="small" />
|
||
</IconButton>
|
||
</Box>
|
||
<Box
|
||
sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
|
||
onMouseDown={(e) => e.stopPropagation()}
|
||
>
|
||
<Button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onClose();
|
||
}}
|
||
sx={{
|
||
color: '#fff',
|
||
borderColor: '#fff',
|
||
'&:hover': {
|
||
bgcolor: 'rgba(255,255,255,0.1)',
|
||
borderColor: '#fff'
|
||
},
|
||
minWidth: '70px',
|
||
fontSize: '13px',
|
||
fontWeight: 600,
|
||
}}
|
||
variant="outlined"
|
||
size="small"
|
||
>
|
||
취소
|
||
</Button>
|
||
<Button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
handleSave();
|
||
}}
|
||
sx={{
|
||
bgcolor: '#fff',
|
||
color: '#1976d2',
|
||
'&:hover': {
|
||
bgcolor: 'rgba(255,255,255,0.9)'
|
||
},
|
||
minWidth: '70px',
|
||
fontSize: '13px',
|
||
fontWeight: 600,
|
||
}}
|
||
variant="contained"
|
||
size="small"
|
||
>
|
||
적용
|
||
</Button>
|
||
</Box>
|
||
</DialogTitle>
|
||
|
||
<DialogContent sx={{
|
||
pt: 1.5,
|
||
pb: 2,
|
||
px: 2
|
||
}}>
|
||
{renderIndicatorSettings()}
|
||
</DialogContent>
|
||
|
||
{/* ✅ 하단 적용 버튼 (테스트용) */}
|
||
<DialogActions sx={{
|
||
px: 2,
|
||
pb: 2,
|
||
pt: 1,
|
||
justifyContent: 'flex-end',
|
||
borderTop: '1px solid',
|
||
borderColor: 'divider'
|
||
}}>
|
||
<Button
|
||
onClick={handleSave}
|
||
variant="contained"
|
||
color="primary"
|
||
size="medium"
|
||
sx={{
|
||
minWidth: '100px',
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
적용
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
|
||
{/* 상세 설명 다이얼로그 */}
|
||
<Dialog
|
||
open={showHelpDialog}
|
||
onClose={() => setShowHelpDialog(false)}
|
||
maxWidth="md"
|
||
fullWidth
|
||
fullScreen={isMobile}
|
||
PaperProps={{
|
||
sx: {
|
||
bgcolor: 'background.paper',
|
||
backgroundImage: 'none',
|
||
},
|
||
}}
|
||
>
|
||
<DialogTitle sx={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
pb: 1,
|
||
borderBottom: '1px solid',
|
||
borderColor: 'divider',
|
||
bgcolor: 'primary.main',
|
||
color: 'white',
|
||
}}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||
<HelpOutlineIcon />
|
||
<Typography variant="h6" sx={{ fontWeight: 600 }}>
|
||
{info.name} 상세 설명
|
||
</Typography>
|
||
</Box>
|
||
<IconButton onClick={() => setShowHelpDialog(false)} size="small" sx={{ color: 'white' }}>
|
||
<CloseIcon />
|
||
</IconButton>
|
||
</DialogTitle>
|
||
|
||
<DialogContent sx={{ pt: 3, pb: 3, maxHeight: isMobile ? '65vh' : '55vh', overflowY: 'auto' }}>
|
||
{getIndicatorDetailedHelp(indicatorType)}
|
||
</DialogContent>
|
||
|
||
<DialogActions sx={{ p: 2, borderTop: '1px solid', borderColor: 'divider' }}>
|
||
<Button onClick={() => setShowHelpDialog(false)} variant="contained" color="primary" fullWidth={isMobile}>
|
||
확인
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default IndicatorSettingsPopup;
|
||
|