cci 수정

2026-05-30 00:46:31 +09:00
parent ad92dace28
commit 09e44008cb
7 changed files with 107 additions and 25 deletions
@@ -9929,7 +9929,54 @@ html.theme-blue {
  overflow: hidden;
 }

-/* 매매 탭: 매수·매도 카드 분리 */
+/* 실시간 차트 우측 — 알림목록·가상매매와 동일 PaperSplitPanel 레이아웃 */
+.rsp-body.ptd-right-body {
+  padding: 0;
+  gap: 0;
+}
+.rsp-body .ptd-split-panel--right {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  padding: 8px 10px 6px;
+  box-sizing: border-box;
+}
+.rsp-body .ptd-ob-stack--fill {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+}
+.rsp-body .ptd-split-panel--right .ptd-order-card .top-actions {
+  margin-top: auto;
+}
+
+.rsp-tabs.bps-right-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  background: var(--bg3);
+  min-width: 420px;
+}
+.rsp-tabs.bps-right-tabs .bps-right-tab {
+  flex: 1;
+  padding: 10px 6px;
+  border: none;
+  background: transparent;
+  color: var(--text3);
+  font-size: 13px;
+  cursor: pointer;
+  transition: color 0.12s;
+}
+.rsp-tabs.bps-right-tabs .bps-right-tab:hover {
+  color: var(--text);
+}
+.rsp-tabs.bps-right-tabs .bps-right-tab--on {
+  color: var(--accent);
+  box-shadow: inset 0 -2px 0 var(--accent);
+  font-weight: 600;
+}
+
+/* 매매 탭: 매수·매도 카드 분리 (레거시 rsp-trade-stack — 호가·백테스트 등에서 사용) */
 .rsp-trade-stack {
  flex: 1;
  min-height: 0;
@@ -6,6 +6,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { OrderbookPanel } from './OrderbookPanel';
 import TradeOrderPanel from './TradeOrderPanel';
+import PaperSplitPanel from './paper/PaperSplitPanel';
 import type { OrderbookDisplayUnit, WsStatus } from '../hooks/useUpbitOrderbook';
 import { useUpbitRecentTrades } from '../hooks/useUpbitRecentTrades';
 import type { OrderbookTickerInfo } from './OrderbookPanel';
@@ -130,12 +131,12 @@ const RightSidePanel: React.FC<RightSidePanelProps> = ({
      </button>

      <div className="rsp-panel">
-        <div className="rsp-tabs">
+        <div className="rsp-tabs bps-right-tabs">
          {PANEL_TABS.map(tab => (
            <button
              key={tab.id}
              type="button"
-              className={`rsp-tab ${activeTab === tab.id ? 'rsp-tab--active' : ''}`}
+              className={`bps-right-tab${activeTab === tab.id ? ' bps-right-tab--on' : ''}`}
              onClick={() => setActiveTab(tab.id)}
            >
              {tab.label}
@@ -143,12 +144,14 @@ const RightSidePanel: React.FC<RightSidePanelProps> = ({
          ))}
        </div>

-        <div className="rsp-body">
+        <div className="rsp-body ptd-right-body" ref={tradeSectionRef}>
          {activeTab === 'trade' && (
-            <div className="rsp-trade-stack" ref={tradeSectionRef}>
-              <div className="rsp-trade-card rsp-trade-card--buy">
-                <div className="rsp-trade-card-title">매수</div>
-                <div className="rsp-trade-card-body">
+            <PaperSplitPanel
+              className="ptd-split-panel--right"
+              topTitle="매수"
+              bottomTitle="매도"
+              top={(
+                <div className="ptd-order-card">
                  <TradeOrderPanel
                    side="buy"
                    market={market}
@@ -163,11 +166,9 @@ const RightSidePanel: React.FC<RightSidePanelProps> = ({
                    onPaperOrderFilled={onPaperOrderFilled}
                  />
                </div>
-              </div>
-
-              <div className="rsp-trade-card rsp-trade-card--sell">
-                <div className="rsp-trade-card-title">매도</div>
-                <div className="rsp-trade-card-body">
+              )}
+              bottom={(
+                <div className="ptd-order-card">
                  <TradeOrderPanel
                    side="sell"
                    market={market}
@@ -183,12 +184,12 @@ const RightSidePanel: React.FC<RightSidePanelProps> = ({
                    onPaperOrderFilled={onPaperOrderFilled}
                  />
                </div>
-              </div>
-            </div>
+              )}
+            />
          )}

          {activeTab === 'orderbook' && (
-            <div className="rsp-ob-stack">
+            <div className="rsp-ob-stack ptd-ob-stack--fill">
              <div className="rsp-trade-card rsp-ob-card">
                <div className="rsp-trade-card-title rsp-ob-card-title">실시간 호가</div>
                <div className="rsp-trade-card-body rsp-ob-card-body">
@@ -10,7 +10,11 @@ function sma(values: number[], period: number): number[] {
  return values.map((_, i) => {
    if (i < period - 1) return NaN;
    let sum = 0;
-    for (let j = i - period + 1; j <= i; j++) sum += values[j];
+    for (let j = i - period + 1; j <= i; j++) {
+      const v = values[j];
+      if (!Number.isFinite(v)) return NaN;
+      sum += v;
+    }
    return sum / period;
  });
 }
@@ -252,7 +256,7 @@ export function calcRSI(
 /**
 * CCI + 신호선 (업비트·TradingView)
 * CCI = (src - SMA(src,N)) / (0.015 × MeanDeviation)
- * 신호선 = CCI의 SMA/EMA/WMA (기본 SMA 10)
+ * src 기본 hlc3(고저종 평균), 신호선 = CCI의 SMA/EMA/WMA (기본 SMA 10)
 */
 export function calcCCI(
  bars: OHLCVBar[],
@@ -262,7 +266,7 @@ export function calcCCI(
  const maLen = Math.max(1, Number(params.maLength ?? 10) || 10);
  const rawMa = String(params.maType ?? 'SMA');
  const maType = rawMa === 'EMA' || rawMa === 'WMA' ? rawMa : (rawMa === 'None' ? 'None' : 'SMA');
-  const srcKey = String(params.src ?? 'close');
+  const srcKey = String(params.src ?? 'hlc3');
  const prices = bars.map(b => sourceAt(b, srcKey));

  const cci = prices.map((_, i) => {
@@ -295,7 +295,7 @@ export const INDICATOR_REGISTRY: IndicatorDef[] = [
  { type:'RSI',               name:'Relative Strength Index',    koreanName:'상대강도지수',          shortName:'RSI',    category:'Oscillators', overlay:false, defaultParams:{length:14, src:'close', maType:'SMA', maLength:14}, plots:[{id:'plot0',title:'RSI',color:'#7E57C2',type:'line',lineWidth:2},{id:'plot1',title:'Signal',color:'#F23645',type:'line',lineWidth:1}], hlines:[{price:70,color:'#EF5350'},{price:50,color:'#607D8B'},{price:30,color:'#4CAF50'}], description:'상대 강도 지수 (0~100)' },
  { type:'Stochastic',        name:'Stochastic Slow',            koreanName:'스토케스틱 슬로우',     shortName:'Stoch',  category:'Oscillators', overlay:false, defaultParams:{kLength:14, dSmoothing:3, smooth:3},      plots:[{id:'plot0',title:'%K',color:'#2196F3',type:'line',lineWidth:1},{id:'plot1',title:'%D',color:'#FF6D00',type:'line',lineWidth:1}], hlines:STOCHASTIC_DEFAULT_HLINES, description:'Stochastic Slow %K/%D (Slowing 적용)' },
  { type:'StochRSI',          name:'Stochastic RSI',             koreanName:'스토캐스틱RSI',         shortName:'StochRSI',category:'Oscillators',overlay:false, defaultParams:{lengthRSI:14, lengthStoch:14, smoothK:3, smoothD:3, src:'close'}, plots:[{id:'plot0',title:'%K',color:'#2196F3',type:'line',lineWidth:1},{id:'plot1',title:'%D',color:'#FF6D00',type:'line',lineWidth:1}], hlines:STOCHASTIC_DEFAULT_HLINES, description:'스토캐스틱 RSI' },
-  { type:'CCI',               name:'Commodity Channel Index',    koreanName:'상품채널지수',          shortName:'CCI',    category:'Oscillators', overlay:false, defaultParams:{length:13, src:'close', maType:'SMA', maLength:10}, plots:[{id:'plot0',title:'CCI',color:'#F23645',type:'line',lineWidth:2},{id:'plot1',title:'Signal',color:'#2962FF',type:'line',lineWidth:1}], hlines:[{price:100,color:'#EF5350'},{price:0,color:'#607D8B'},{price:-100,color:'#4CAF50'}], description:'상품 채널 지수 (업비트: 종가·신호 10)' },
+  { type:'CCI',               name:'Commodity Channel Index',    koreanName:'상품채널지수',          shortName:'CCI',    category:'Oscillators', overlay:false, defaultParams:{length:13, src:'hlc3', maType:'SMA', maLength:10}, plots:[{id:'plot0',title:'CCI',color:'#F23645',type:'line',lineWidth:2},{id:'plot1',title:'Signal',color:'#2962FF',type:'line',lineWidth:1}], hlines:[{price:100,color:'#EF5350'},{price:0,color:'#607D8B'},{price:-100,color:'#4CAF50'}], description:'상품 채널 지수 (업비트·TradingView: hlc3·신호 SMA 10)' },
  { type:'WilliamsPercentRange',name:'Williams %R',              koreanName:'윌리엄스 %R',           shortName:'W%R',    category:'Oscillators', overlay:false, defaultParams:{length:14, src:'close'},                    plots:[{id:'plot0',title:'%R', color:'#9C27B0',type:'line',lineWidth:2}],                                  hlines:[{price:-20,color:'#EF5350'},{price:-50,color:'#607D8B'},{price:-80,color:'#4CAF50'}], description:'윌리엄스 %R 오실레이터' },
  { type:'AwesomeOscillator',  name:'Awesome Oscillator',        koreanName:'어썸오실레이터',        shortName:'AO',     category:'Oscillators', overlay:false, defaultParams:{},                                        plots:[{id:'plot0',title:'AO',color:'#26A69A',type:'histogram'}],                                           hlines:[{price:0,color:'#607D8B'}],                                                         description:'AO 오실레이터' },
  { type:'ChandeMO',          name:'Chande Momentum Oscillator', koreanName:'챈드모멘텀오실레이터',  shortName:'CMO',    category:'Oscillators', overlay:false, defaultParams:{length:9, src:'close'},                   plots:[{id:'plot0',title:'CMO',color:'#4DB6AC',type:'line',lineWidth:2}],                                  hlines:[{price:50,color:'#EF5350'},{price:0,color:'#607D8B'},{price:-50,color:'#4CAF50'}], description:'챈드 모멘텀 오실레이터' },
@@ -454,15 +454,19 @@ export function normalizeObvParams(
  return { ...params, maType, maLength };
 }

-/** 업비트 CCI: 기간 13·종가·신호 SMA 10 */
+/** 업비트·TradingView CCI: 기간 13·hlc3(고저종)·신호 SMA 10 */
 export function normalizeCciParams(
  params: Record<string, number | string | boolean>,
 ): Record<string, number | string | boolean> {
  const rawMa = String(params.maType ?? 'SMA');
  const maType = rawMa === 'EMA' || rawMa === 'WMA' || rawMa === 'None' ? rawMa : 'SMA';
-  const src = String(params.src ?? 'close');
+  let src = String(params.src ?? 'hlc3');
  const length = Math.max(1, Number(params.length ?? 13) || 13);
  const maLength = Math.max(1, Number(params.maLength ?? 10) || 10);
+  // 레거시: 잘못 저장된 close 기본값 → 업비트 동일 hlc3
+  if (src === 'close' && length === 13 && maLength === 10 && maType === 'SMA') {
+    src = 'hlc3';
+  }
  return { ...params, src, maType, length, maLength };
 }

@@ -629,6 +633,9 @@ export async function calculateIndicator(

  let calcBars = bars;
  let calcParams = params;
+  if (type === 'CCI') {
+    calcParams = normalizeCciParams(params);
+  }
  if (type === 'IchimokuCloud') {
    const { senkou } = resolveIchimokuDisplacements(params);
    calcParams = { ...params, displacement: senkou };