Initial commit
This commit is contained in:
660
frontend/src/pages/Dashboard.css
Normal file
660
frontend/src/pages/Dashboard.css
Normal file
@@ -0,0 +1,660 @@
|
||||
/* HTS 대시보드 컨테이너 */
|
||||
.hts-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #000000;
|
||||
color: #e0e6ed;
|
||||
font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 메인 레이아웃 */
|
||||
.hts-main-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr 420px;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 왼쪽 패널: 계좌 정보 & 보유종목 */
|
||||
.left-panel {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 12px 15px;
|
||||
background: #222;
|
||||
border-bottom: 1px solid #333;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.balance-info {
|
||||
padding: 12px 15px;
|
||||
background: #111;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.balance-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.balance-row span:first-child {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.balance-row span.up {
|
||||
color: #ff3b3b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.balance-row span.down {
|
||||
color: #2979ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.portfolio-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.portfolio-item {
|
||||
padding: 10px;
|
||||
margin-bottom: 6px;
|
||||
background: #222;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.portfolio-item:hover {
|
||||
background: #2a2a2a;
|
||||
border-color: #4fc3f7;
|
||||
}
|
||||
|
||||
.portfolio-item .stock-name {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.portfolio-item .stock-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.portfolio-item .stock-info span.up {
|
||||
color: #ff3b3b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.portfolio-item .stock-info span.down {
|
||||
color: #2979ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 중앙 패널 */
|
||||
.center-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 차트 섹션 */
|
||||
.chart-section {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 420px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.chart-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.chart-stocks {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.chart-stock {
|
||||
background: #111;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 120px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.chart-stock .name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.chart-stock .rate {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.chart-stock.active {
|
||||
border-color: #00ff88;
|
||||
box-shadow: 0 0 12px rgba(0, 255, 136, 0.2);
|
||||
}
|
||||
|
||||
.chart-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.ws-status {
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
background: rgba(136, 146, 176, 0.2);
|
||||
border: 1px solid rgba(136, 146, 176, 0.4);
|
||||
}
|
||||
|
||||
.ws-status.online {
|
||||
background: rgba(0, 255, 136, 0.15);
|
||||
border-color: rgba(0, 255, 136, 0.5);
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.ws-status.offline {
|
||||
color: #8892b0;
|
||||
}
|
||||
|
||||
.chart-period {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.chart-period button {
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #333;
|
||||
background: #111;
|
||||
color: #8892b0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.chart-period button.active,
|
||||
.chart-period button:hover {
|
||||
border-color: #00ff88;
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
min-height: 340px;
|
||||
background: #0a0a0a;
|
||||
border: 1px solid #222;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 거래 이력 섹션 */
|
||||
.trades-section {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 280px;
|
||||
max-height: 320px;
|
||||
}
|
||||
|
||||
.trades-table-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.trades-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.trades-table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #1a1a1a;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.trades-table th {
|
||||
padding: 8px;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.trades-table td {
|
||||
padding: 8px;
|
||||
font-size: 11px;
|
||||
color: #ccc;
|
||||
border-bottom: 1px solid #222;
|
||||
}
|
||||
|
||||
.trades-table tbody tr:hover {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.trade-status {
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.trade-status.executed {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.trade-status.pending {
|
||||
background: rgba(255, 152, 0, 0.2);
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
.trade-status.failed {
|
||||
background: rgba(244, 67, 54, 0.2);
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
/* 오른쪽 패널 */
|
||||
.right-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.recommend-section,
|
||||
.mcp-status-section,
|
||||
.news-section,
|
||||
.ai-analysis-section,
|
||||
.risk-check-section {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ai-analysis-section {
|
||||
min-height: 180px;
|
||||
max-height: 220px;
|
||||
}
|
||||
|
||||
.risk-check-section {
|
||||
min-height: 150px;
|
||||
max-height: 180px;
|
||||
}
|
||||
|
||||
.analysis-content,
|
||||
.risk-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
background: #0a0a0a;
|
||||
border: 1px solid #222;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.analysis-loading,
|
||||
.risk-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.risk-item {
|
||||
padding: 8px;
|
||||
margin-bottom: 6px;
|
||||
background: #111;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.risk-item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.risk-level {
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.risk-level.low {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.risk-level.medium {
|
||||
background: rgba(255, 152, 0, 0.2);
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
.risk-level.high {
|
||||
background: rgba(244, 67, 54, 0.2);
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.risk-description {
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.recommend-section {
|
||||
min-height: 300px;
|
||||
max-height: 360px;
|
||||
}
|
||||
|
||||
.recommend-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.recommend-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background: #111;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.recommend-item .info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.recommend-item .info .name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.recommend-item .info .code {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.recommend-item .figures {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.recommend-item .figures .price {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.recommend-item .figures .rate {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.recommend-item:hover,
|
||||
.recommend-item.active {
|
||||
border-color: #00ff88;
|
||||
box-shadow: 0 0 12px rgba(0, 255, 136, 0.2);
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
color: #4fc3f7;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-small:hover {
|
||||
background: #222;
|
||||
border-color: #4fc3f7;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #4fc3f7;
|
||||
color: #000;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #6fd4ff;
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #2a4a5a;
|
||||
color: #666;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.mcp-status-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.mcp-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
background: #222;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.status-indicator.connected {
|
||||
background: #4caf50;
|
||||
}
|
||||
|
||||
.status-indicator.disconnected {
|
||||
background: #f44336;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.status-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mcp-tools-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.mcp-tool-badge {
|
||||
padding: 6px;
|
||||
background: #111;
|
||||
border: 1px solid #333;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.news-section {
|
||||
flex: 1;
|
||||
min-height: 180px;
|
||||
max-height: 220px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-section .news-list {
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.news-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.news-item {
|
||||
padding: 10px;
|
||||
background: #222;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.news-item:hover {
|
||||
border-color: #4fc3f7;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.news-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.news-meta {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 공통 */
|
||||
.no-data {
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 색상 */
|
||||
.up {
|
||||
color: #ff3b3b !important;
|
||||
}
|
||||
|
||||
.down {
|
||||
color: #2979ff !important;
|
||||
}
|
||||
|
||||
/* 스크롤바 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #333;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #444;
|
||||
}
|
||||
922
frontend/src/pages/Dashboard.tsx
Normal file
922
frontend/src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,922 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import api from '../lib/api'
|
||||
import { useWebSocket } from '../hooks/useWebSocket'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import HtsPage from '../components/HtsPage'
|
||||
import CandlestickChart from '../components/CandlestickChart'
|
||||
import './Dashboard.css'
|
||||
|
||||
const Dashboard = () => {
|
||||
console.log('🚀 Dashboard component mounted')
|
||||
|
||||
const { connected: wsConnected } = useWebSocket('dashboard')
|
||||
const [selectedStock, setSelectedStock] = useState<string>('')
|
||||
const [chartPeriod, setChartPeriod] = useState<'D' | 'W' | 'M'>('D')
|
||||
const [showIndicators, setShowIndicators] = useState(false)
|
||||
const [indicators, setIndicators] = useState({
|
||||
use_macd: false,
|
||||
use_rsi: true,
|
||||
use_bollinger: false,
|
||||
use_moving_average: true,
|
||||
use_stochastic: false,
|
||||
use_adx: false,
|
||||
use_obv: false,
|
||||
})
|
||||
|
||||
console.log('🔧 Setting up queries...')
|
||||
|
||||
const { data: portfolioSummary, error: portfolioSummaryError } = useQuery({
|
||||
queryKey: ['portfolio-summary'],
|
||||
queryFn: async () => {
|
||||
console.log('🔵 Fetching portfolio summary...')
|
||||
const response = await api.get('/portfolio/summary')
|
||||
console.log('🟢 Portfolio summary received:', response.data)
|
||||
return response.data
|
||||
},
|
||||
refetchInterval: 5000,
|
||||
})
|
||||
|
||||
const { data: portfolio, error: portfolioError } = useQuery({
|
||||
queryKey: ['portfolio'],
|
||||
queryFn: async () => {
|
||||
console.log('🔵 Fetching portfolio...')
|
||||
try {
|
||||
const response = await api.get('/portfolio')
|
||||
console.log('🟢 Portfolio received:', response.data)
|
||||
return response.data
|
||||
} catch (error) {
|
||||
console.error('❌ Portfolio fetch error:', error)
|
||||
throw error
|
||||
}
|
||||
},
|
||||
refetchInterval: 5000,
|
||||
retry: 1,
|
||||
})
|
||||
|
||||
// 에러 로깅
|
||||
useEffect(() => {
|
||||
if (portfolioSummaryError) {
|
||||
console.error('❌ Portfolio Summary Error:', portfolioSummaryError)
|
||||
}
|
||||
if (portfolioError) {
|
||||
console.error('❌ Portfolio Error:', portfolioError)
|
||||
}
|
||||
}, [portfolioSummaryError, portfolioError])
|
||||
|
||||
const { data: recentTrades } = useQuery({
|
||||
queryKey: ['recent-trades'],
|
||||
queryFn: async () => {
|
||||
const response = await api.get('/trades', { params: { limit: 20 } })
|
||||
return response.data
|
||||
},
|
||||
refetchInterval: 5000,
|
||||
})
|
||||
|
||||
const { data: mcpStatus } = useQuery({
|
||||
queryKey: ['mcp-status'],
|
||||
queryFn: async () => {
|
||||
const response = await api.get('/mcp/status')
|
||||
return response.data
|
||||
},
|
||||
refetchInterval: 5000,
|
||||
})
|
||||
|
||||
const { data: news } = useQuery({
|
||||
queryKey: ['market-news'],
|
||||
queryFn: async () => {
|
||||
const response = await api.get('/market-data/news', { params: { limit: 5 } })
|
||||
return response.data
|
||||
},
|
||||
refetchInterval: 30000,
|
||||
})
|
||||
|
||||
// 규칙 기반 자동 추천 (자동 로드)
|
||||
const { data: ruleBasedRecommendations } = useQuery({
|
||||
queryKey: ['rule-based-recommendations'],
|
||||
queryFn: async () => {
|
||||
console.log('🔵 Fetching rule-based recommendations...')
|
||||
try {
|
||||
const response = await api.get('/recommendations/rule-based')
|
||||
console.log('🟢 Rule-based recommendations received:', response.data)
|
||||
return response.data
|
||||
} catch (error) {
|
||||
console.error('🔴 Rule-based recommendations error:', error)
|
||||
throw error
|
||||
}
|
||||
},
|
||||
refetchInterval: 300000, // 5분마다 자동 갱신
|
||||
})
|
||||
|
||||
// 수동 지표 분석 (AI 분석 버튼용)
|
||||
const { data: aiRecommendations, refetch: refetchRecommendations, isLoading: recommendationsLoading, error: recommendationsError } = useQuery({
|
||||
queryKey: ['ai-recommendations', indicators],
|
||||
queryFn: async () => {
|
||||
console.log('🔵 Fetching recommendations with indicators:', indicators)
|
||||
try {
|
||||
const response = await api.get('/recommendations', { params: indicators })
|
||||
console.log('🟢 Recommendations received:', response.data)
|
||||
return response.data
|
||||
} catch (error) {
|
||||
console.error('🔴 Recommendations fetch error:', error)
|
||||
throw error
|
||||
}
|
||||
},
|
||||
enabled: false, // 수동으로만 호출
|
||||
})
|
||||
|
||||
// 추천 종목 에러 로깅
|
||||
if (recommendationsError) {
|
||||
console.error('❌ Recommendations query error:', recommendationsError)
|
||||
}
|
||||
|
||||
// 규칙 기반 추천 로깅
|
||||
if (ruleBasedRecommendations) {
|
||||
console.log('✅ Rule-based Recommendations:', {
|
||||
total: ruleBasedRecommendations.total,
|
||||
activeRules: ruleBasedRecommendations.active_rules,
|
||||
found: ruleBasedRecommendations.recommendations?.length || 0
|
||||
})
|
||||
}
|
||||
|
||||
// 수동 추천 결과 로깅
|
||||
if (aiRecommendations) {
|
||||
console.log('✅ AI Recommendations:', {
|
||||
total: aiRecommendations.total,
|
||||
analyzed: aiRecommendations.analyzed_stocks,
|
||||
found: aiRecommendations.recommendations?.length || 0
|
||||
})
|
||||
}
|
||||
|
||||
const { data: chartData, isLoading: chartLoading, error: chartError } = useQuery({
|
||||
queryKey: ['chart-data', selectedStock, chartPeriod],
|
||||
queryFn: async () => {
|
||||
if (!selectedStock) {
|
||||
console.log('⚠️ No stock selected, skipping chart fetch')
|
||||
return null
|
||||
}
|
||||
console.log('🔵 Fetching chart data for:', selectedStock, 'period:', chartPeriod)
|
||||
try {
|
||||
const response = await api.get(`/market-data/chart/${selectedStock}`, {
|
||||
params: { period: chartPeriod },
|
||||
})
|
||||
console.log('🟢 Chart data received:', {
|
||||
stock_code: response.data.stock_code,
|
||||
selectedStock: selectedStock,
|
||||
dataLength: response.data.data?.length,
|
||||
firstPrice: response.data.data?.[0]?.close,
|
||||
match: response.data.stock_code === selectedStock
|
||||
})
|
||||
return response.data
|
||||
} catch (error) {
|
||||
console.error('🔴 Chart data fetch error:', error)
|
||||
throw error
|
||||
}
|
||||
},
|
||||
enabled: Boolean(selectedStock),
|
||||
refetchInterval: 60000,
|
||||
})
|
||||
|
||||
// 차트 에러 로깅
|
||||
if (chartError) {
|
||||
console.error('❌ Chart query error:', chartError)
|
||||
}
|
||||
|
||||
// AI 종합 분석 (선택된 종목에 대해)
|
||||
const { data: aiAnalysis, isLoading: aiAnalysisLoading } = useQuery({
|
||||
queryKey: ['ai-analysis', selectedStock, chartData],
|
||||
queryFn: async () => {
|
||||
if (!selectedStock || !chartData?.data?.[0]) return null
|
||||
console.log('🔵 Fetching AI analysis for:', selectedStock)
|
||||
try {
|
||||
const response = await fetch('http://localhost:8001/analyze', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
analysis_type: 'MARKET_ANALYSIS',
|
||||
data: {
|
||||
stock_code: selectedStock,
|
||||
market_data: {
|
||||
stock_name: chartData?.stock_name || selectedStock,
|
||||
current_price: Number(chartData.data[0].close),
|
||||
change_rate: Number(chartData.data[0].change_rate || 0),
|
||||
volume: Number(chartData.data[0].volume || 0),
|
||||
high: Number(chartData.data[0].high),
|
||||
low: Number(chartData.data[0].low)
|
||||
},
|
||||
news: []
|
||||
}
|
||||
})
|
||||
})
|
||||
const result = await response.json()
|
||||
console.log('🟢 AI analysis received:', result)
|
||||
return result.result || result.analysis
|
||||
} catch (error) {
|
||||
console.error('🔴 AI analysis error:', error)
|
||||
return '⚠️ AI 분석 서비스에 연결할 수 없습니다.'
|
||||
}
|
||||
},
|
||||
enabled: Boolean(selectedStock && chartData?.data?.[0]),
|
||||
refetchInterval: 300000, // 5분마다
|
||||
})
|
||||
|
||||
// 리스크 체크
|
||||
const { data: riskCheck, isLoading: riskCheckLoading } = useQuery({
|
||||
queryKey: ['risk-check', selectedStock, portfolio, chartData],
|
||||
queryFn: async () => {
|
||||
if (!selectedStock || !chartData?.data?.[0]) return null
|
||||
console.log('🔵 Fetching risk check for:', selectedStock)
|
||||
try {
|
||||
const response = await fetch('http://localhost:8001/analyze', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
analysis_type: 'RISK_ASSESSMENT',
|
||||
data: {
|
||||
portfolio: {
|
||||
total_value: portfolioSummary?.total_value || 0,
|
||||
total_stocks: portfolioSummary?.total_stocks || 0,
|
||||
holdings: portfolio || []
|
||||
},
|
||||
trade_plan: {
|
||||
stock_code: selectedStock,
|
||||
stock_name: chartData?.stock_name || selectedStock,
|
||||
current_price: Number(chartData.data[0].close),
|
||||
action: 'BUY',
|
||||
quantity: 1
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
const result = await response.json()
|
||||
console.log('🟢 Risk check received:', result)
|
||||
return result.result || result.analysis
|
||||
} catch (error) {
|
||||
console.error('🔴 Risk check error:', error)
|
||||
return '⚠️ 리스크 분석 서비스에 연결할 수 없습니다.'
|
||||
}
|
||||
},
|
||||
enabled: Boolean(selectedStock && chartData?.data?.[0]),
|
||||
refetchInterval: 300000, // 5분마다
|
||||
})
|
||||
|
||||
// 차트 상단에 표시할 종목 리스트 생성
|
||||
const displayStocks = useMemo(() => {
|
||||
// 1. 규칙 기반 추천이 있으면 우선 사용
|
||||
if (ruleBasedRecommendations?.recommendations_by_rule?.length > 0) {
|
||||
const stocks: any[] = []
|
||||
ruleBasedRecommendations.recommendations_by_rule.forEach((ruleGroup: any) => {
|
||||
if (ruleGroup.stocks && stocks.length < 4) {
|
||||
ruleGroup.stocks.slice(0, 4 - stocks.length).forEach((stock: any) => {
|
||||
stocks.push(stock)
|
||||
})
|
||||
}
|
||||
})
|
||||
return stocks.slice(0, 4)
|
||||
}
|
||||
|
||||
// 2. 포트폴리오가 있으면 사용
|
||||
if (portfolio && portfolio.length > 0) {
|
||||
return [...portfolio]
|
||||
.sort((a: any, b: any) => (b.profit_loss_rate ?? 0) - (a.profit_loss_rate ?? 0))
|
||||
.slice(0, 4)
|
||||
}
|
||||
|
||||
// 3. 둘 다 없으면 빈 배열 (테스트 데이터 제거)
|
||||
return []
|
||||
}, [ruleBasedRecommendations, portfolio])
|
||||
|
||||
// 표시할 종목들의 최신 가격 가져오기
|
||||
const stockCodesToFetch = displayStocks.map((item: any) => item.stock_code)
|
||||
|
||||
const { data: stockPrices = {} } = useQuery<Record<string, number>>({
|
||||
queryKey: ['all-stock-prices', stockCodesToFetch.join(',')],
|
||||
queryFn: async () => {
|
||||
if (stockCodesToFetch.length === 0) {
|
||||
return {}
|
||||
}
|
||||
const promises = stockCodesToFetch.map(async (code: string) => {
|
||||
try {
|
||||
const response = await api.get(`/market-data/chart/${code}`, {
|
||||
params: { period: 'D' },
|
||||
})
|
||||
// KIS API는 최신 데이터가 첫번째 (index 0)
|
||||
const latestPrice = response.data?.data?.[0]?.close || 0
|
||||
return { code, price: Number(latestPrice) }
|
||||
} catch (error) {
|
||||
console.error(`Failed to fetch price for ${code}:`, error)
|
||||
return { code, price: 0 }
|
||||
}
|
||||
})
|
||||
const results = await Promise.all(promises)
|
||||
return results.reduce((acc: Record<string, number>, item) => {
|
||||
acc[item.code] = item.price
|
||||
return acc
|
||||
}, {})
|
||||
},
|
||||
enabled: stockCodesToFetch.length > 0,
|
||||
refetchInterval: 60000,
|
||||
})
|
||||
|
||||
const recommendedStocks = useMemo(() => {
|
||||
console.log('💡 Building recommendedStocks:', {
|
||||
displayStocksCount: displayStocks.length,
|
||||
stockPricesCount: Object.keys(stockPrices).length,
|
||||
stockPrices
|
||||
})
|
||||
return displayStocks.map((item: any) => {
|
||||
const priceFromQuery = stockPrices[item.stock_code]
|
||||
const finalPrice = priceFromQuery || item.current_price || 0
|
||||
console.log(` - ${item.stock_code}: query=${priceFromQuery}, original=${item.current_price}, final=${finalPrice}`)
|
||||
return {
|
||||
...item,
|
||||
current_price: finalPrice,
|
||||
}
|
||||
})
|
||||
}, [displayStocks, stockPrices])
|
||||
|
||||
const currentStockPrice = useMemo(() => {
|
||||
if (!chartData?.data || chartData.data.length === 0) {
|
||||
console.log('❌ currentStockPrice: No data')
|
||||
return null
|
||||
}
|
||||
// KIS API는 최신 데이터가 첫번째 (index 0)
|
||||
const price = Number(chartData.data[0].close)
|
||||
console.log('✅ currentStockPrice:', price, 'from', chartData.data[0].date)
|
||||
return price
|
||||
}, [chartData])
|
||||
|
||||
// 초기 종목 선택 (한 번만 실행)
|
||||
useEffect(() => {
|
||||
console.log('📊 Initial stock selection check')
|
||||
|
||||
// 이미 종목이 선택되어 있으면 변경하지 않음
|
||||
if (selectedStock && selectedStock !== '') {
|
||||
console.log('✅ Stock already selected:', selectedStock)
|
||||
return
|
||||
}
|
||||
|
||||
// 규칙 기반 추천이 있으면 첫 번째 종목 선택
|
||||
if (ruleBasedRecommendations?.recommendations_by_rule?.length > 0) {
|
||||
const firstRule = ruleBasedRecommendations.recommendations_by_rule[0]
|
||||
if (firstRule.stocks?.length > 0) {
|
||||
const firstStock = firstRule.stocks[0]
|
||||
console.log('🎯 Auto-selecting first rule-based recommendation:', firstStock.stock_code)
|
||||
setSelectedStock(firstStock.stock_code)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 포트폴리오가 있으면 첫 번째 종목 선택
|
||||
if (portfolio && portfolio.length > 0) {
|
||||
console.log('🎯 Auto-selecting first portfolio stock:', portfolio[0].stock_code)
|
||||
setSelectedStock(portfolio[0].stock_code)
|
||||
return
|
||||
}
|
||||
|
||||
// 아무것도 없으면 종목 선택 없음 (테스트 데이터 제거)
|
||||
console.log('⚠️ No stocks available')
|
||||
}, [ruleBasedRecommendations, portfolio]) // selectedStock은 의존성에서 제거
|
||||
|
||||
const chartSeries = useMemo(() => {
|
||||
if (!selectedStock) {
|
||||
console.log('⚠️ chartSeries: No stock selected')
|
||||
return []
|
||||
}
|
||||
|
||||
if (!chartData?.data || chartData.data.length === 0) {
|
||||
console.log('❌ chartSeries: No data', chartData)
|
||||
return []
|
||||
}
|
||||
|
||||
// 차트 데이터가 선택된 종목과 일치하는지 확인
|
||||
if (chartData.stock_code !== selectedStock) {
|
||||
console.error('🔴 CRITICAL: Chart data mismatch!', {
|
||||
chartStock: chartData.stock_code,
|
||||
selectedStock: selectedStock,
|
||||
chartName: chartData.stock_name,
|
||||
dataLength: chartData.data.length
|
||||
})
|
||||
// 데이터가 일치하지 않으면 빈 배열 반환 (새 데이터 로딩 대기)
|
||||
return []
|
||||
}
|
||||
|
||||
console.log('✅ Chart data matches selected stock:', selectedStock)
|
||||
|
||||
console.log('✅ Raw chartData:', {
|
||||
stock: chartData.stock_code,
|
||||
dataLength: chartData.data.length,
|
||||
first: chartData.data[0],
|
||||
last: chartData.data[chartData.data.length - 1]
|
||||
})
|
||||
|
||||
// KIS API는 최신 데이터가 첫번째 (20251104, 20251103, ...)
|
||||
// 차트는 오래된 것부터 최신 순서로 표시해야 하므로 reverse 필요
|
||||
const sortedData = [...chartData.data]
|
||||
.reverse() // 오래된 날짜부터 정렬
|
||||
// KIS API가 반환하는 모든 데이터 사용 (slice 제거)
|
||||
.filter((item: any) => {
|
||||
// 유효한 데이터만 필터링 (0이 아닌 가격)
|
||||
return item.open > 0 && item.high > 0 && item.low > 0 && item.close > 0
|
||||
})
|
||||
.map((item: any) => ({
|
||||
date: item.date,
|
||||
dateLabel: item.date ? `${item.date.slice(4, 6)}/${item.date.slice(6, 8)}` : '',
|
||||
open: Number(item.open),
|
||||
high: Number(item.high),
|
||||
low: Number(item.low),
|
||||
close: Number(item.close),
|
||||
volume: Number(item.volume),
|
||||
}))
|
||||
|
||||
console.log('✅ Chart series processed:', {
|
||||
length: sortedData.length,
|
||||
first: sortedData[0],
|
||||
last: sortedData[sortedData.length - 1]
|
||||
})
|
||||
|
||||
if (sortedData.length === 0) {
|
||||
console.log('❌ All data filtered out (invalid prices)')
|
||||
}
|
||||
|
||||
return sortedData
|
||||
}, [chartData, selectedStock])
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
if (!value) {
|
||||
return '0원'
|
||||
}
|
||||
return new Intl.NumberFormat('ko-KR').format(value) + '원'
|
||||
}
|
||||
|
||||
const formatPercent = (value: number) => {
|
||||
if (!value) {
|
||||
return '+0.00%'
|
||||
}
|
||||
return `${value >= 0 ? '+' : ''}${value.toFixed(2)}%`
|
||||
}
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
if (!dateStr || dateStr.length !== 8) return ''
|
||||
// YYYYMMDD → MM/DD
|
||||
return `${dateStr.slice(4, 6)}/${dateStr.slice(6, 8)}`
|
||||
}
|
||||
|
||||
const getTradeStatusClass = (status: string) => {
|
||||
switch (status) {
|
||||
case 'EXECUTED':
|
||||
return 'executed'
|
||||
case 'PENDING':
|
||||
return 'pending'
|
||||
case 'FAILED':
|
||||
return 'failed'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const handleStockSelect = (stockCode: string) => {
|
||||
setSelectedStock(stockCode)
|
||||
}
|
||||
|
||||
return (
|
||||
<HtsPage contentClassName="dashboard-content">
|
||||
<div className="hts-container">
|
||||
<div className="hts-main-layout">
|
||||
<div className="left-panel">
|
||||
<div className="panel-header">계좌 정보</div>
|
||||
<div className="balance-info">
|
||||
<div className="balance-row">
|
||||
<span>예수금</span>
|
||||
<span style={{ color: '#22c55e' }}>10,000,000원</span>
|
||||
</div>
|
||||
<div className="balance-row">
|
||||
<span>총 자산</span>
|
||||
<span>{formatCurrency((portfolioSummary?.total_value || 0) + 10000000)}</span>
|
||||
</div>
|
||||
<div className="balance-row">
|
||||
<span>총 손익</span>
|
||||
<span className={(portfolioSummary?.total_profit_loss || 0) >= 0 ? 'up' : 'down'}>
|
||||
{formatCurrency(portfolioSummary?.total_profit_loss || 0)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="balance-row">
|
||||
<span>수익률</span>
|
||||
<span className={(portfolioSummary?.total_profit_loss_rate || 0) >= 0 ? 'up' : 'down'}>
|
||||
{formatPercent(portfolioSummary?.total_profit_loss_rate || 0)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="balance-row">
|
||||
<span>보유 종목</span>
|
||||
<span>{portfolioSummary?.total_stocks || 0}개</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="panel-header" style={{ borderTop: '1px solid #333', marginTop: '12px' }}>보유 종목</div>
|
||||
<div className="portfolio-list" style={{ maxHeight: '200px', overflowY: 'auto' }}>
|
||||
{portfolio && portfolio.length > 0 ? (
|
||||
portfolio.map((item: any) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="portfolio-item"
|
||||
onClick={() => handleStockSelect(item.stock_code)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<div className="stock-name">{item.stock_name} ({item.stock_code})</div>
|
||||
<div className="stock-info">
|
||||
<span>{item.quantity}주</span>
|
||||
<span>{formatCurrency(item.current_price)}</span>
|
||||
<span className={(item.profit_loss_rate || 0) >= 0 ? 'up' : 'down'}>
|
||||
{formatPercent(item.profit_loss_rate || 0)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="no-data" style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
|
||||
보유 종목 없음
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="center-panel">
|
||||
<div className="chart-section">
|
||||
<div className="panel-header">대표 종목 차트</div>
|
||||
<div className="chart-toolbar">
|
||||
<div className="chart-stocks">
|
||||
{recommendedStocks.length > 0 ? (
|
||||
recommendedStocks.map((item: any) => {
|
||||
const isSelected = selectedStock === item.stock_code
|
||||
// stockPrices에서 최신 가격 가져오기 (차트 상단과 추천 종목 동일한 가격)
|
||||
const displayPrice = stockPrices[item.stock_code] || item.current_price || 0
|
||||
return (
|
||||
<button
|
||||
key={item.stock_code}
|
||||
className={`chart-stock ${isSelected ? 'active' : ''}`}
|
||||
onClick={() => handleStockSelect(item.stock_code)}
|
||||
>
|
||||
<span className="name">{item.stock_name}</span>
|
||||
<span className="price">{formatCurrency(displayPrice)}</span>
|
||||
</button>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="no-data">추천 종목 로딩 중...</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="chart-actions">
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '4px' }}>
|
||||
{/* MCP 상태 UI 제거됨 */}
|
||||
{/* 실시간 연결 UI 제거됨 */}
|
||||
</div>
|
||||
<div className="chart-period">
|
||||
{(['D', 'W', 'M'] as const).map((period) => (
|
||||
<button
|
||||
key={period}
|
||||
className={chartPeriod === period ? 'active' : ''}
|
||||
onClick={() => setChartPeriod(period)}
|
||||
>
|
||||
{period === 'D' ? '일봉' : period === 'W' ? '주봉' : '월봉'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="chart-container">
|
||||
{chartLoading && <div className="no-data">차트 로딩 중...</div>}
|
||||
{!chartLoading && chartSeries.length === 0 && (
|
||||
<div className="no-data">차트 데이터가 없습니다.</div>
|
||||
)}
|
||||
{!chartLoading && chartSeries.length > 0 && (
|
||||
<div style={{ width: '100%', height: '100%' }}>
|
||||
<CandlestickChart
|
||||
data={chartSeries}
|
||||
width={1100}
|
||||
height={380}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="trades-section">
|
||||
<div className="panel-header">최근 거래 내역</div>
|
||||
<div className="trades-table-container">
|
||||
<table className="trades-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>시간</th>
|
||||
<th>종목</th>
|
||||
<th>구분</th>
|
||||
<th>수량</th>
|
||||
<th>가격</th>
|
||||
<th>상태</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{recentTrades && recentTrades.length > 0 ? (
|
||||
recentTrades.map((trade: any) => (
|
||||
<tr key={trade.id}>
|
||||
<td>{new Date(trade.created_at).toLocaleTimeString('ko-KR')}</td>
|
||||
<td>{trade.stock_name}</td>
|
||||
<td className={trade.order_type === 'BUY' ? 'up' : 'down'}>
|
||||
{trade.order_type}
|
||||
</td>
|
||||
<td>{trade.order_quantity}</td>
|
||||
<td>{formatCurrency(trade.order_price || 0)}</td>
|
||||
<td>
|
||||
<span className={`trade-status ${getTradeStatusClass(trade.status)}`}>
|
||||
{trade.status}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={6} className="no-data">거래 내역 없음</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="right-panel">
|
||||
<div className="recommend-section">
|
||||
<div className="panel-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<span>추천 종목</span>
|
||||
<button
|
||||
onClick={async () => {
|
||||
console.log('🤖 자동매매 버튼 클릭됨')
|
||||
|
||||
if (!confirm('규칙에 맞는 종목을 자동으로 매수/매도 하시겠습니까?')) {
|
||||
console.log('⚠️ 사용자가 자동매매 취소함')
|
||||
return
|
||||
}
|
||||
|
||||
console.log('✅ 자동매매 확인됨, API 호출 시작...')
|
||||
|
||||
try {
|
||||
console.log('📡 POST /api/v1/recommendations/auto-trade')
|
||||
const response = await api.post('/recommendations/auto-trade')
|
||||
console.log('🟢 자동매매 응답:', response.data)
|
||||
|
||||
const result = response.data
|
||||
|
||||
if (!result.trades || result.trades.length === 0) {
|
||||
alert(`⚠️ ${result.message || '실행된 거래가 없습니다'}`)
|
||||
return
|
||||
}
|
||||
|
||||
alert(`✅ ${result.message}\n\n${result.trades.map((t: any) =>
|
||||
`${t.action}: ${t.stock} ${t.quantity}주 @ ${t.price.toLocaleString()}원`
|
||||
).join('\n')}`)
|
||||
} catch (error: any) {
|
||||
console.error('🔴 자동매매 에러:', error)
|
||||
console.error('🔴 에러 상세:', {
|
||||
message: error.message,
|
||||
response: error.response?.data,
|
||||
status: error.response?.status
|
||||
})
|
||||
|
||||
const errorMsg = error.response?.data?.detail || error.message || '알 수 없는 오류'
|
||||
alert(`❌ 자동 매매 실패: ${errorMsg}`)
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
padding: '4px 8px',
|
||||
background: '#22c55e',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '11px',
|
||||
fontWeight: '600'
|
||||
}}
|
||||
>
|
||||
🤖 자동매매 시작
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="recommend-list" style={{ maxHeight: '280px', overflowY: 'auto' }}>
|
||||
{(() => {
|
||||
console.log('🎯 Rendering recommend-list:', {
|
||||
hasRule: !!ruleBasedRecommendations,
|
||||
ruleLength: ruleBasedRecommendations?.recommendations?.length || 0,
|
||||
hasAI: !!aiRecommendations,
|
||||
aiLength: aiRecommendations?.recommendations?.length || 0,
|
||||
portfolioLength: recommendedStocks.length
|
||||
})
|
||||
return null
|
||||
})()}
|
||||
{/* 1. 규칙 기반 추천 (규칙별 그룹핑) */}
|
||||
{ruleBasedRecommendations && ruleBasedRecommendations.recommendations_by_rule?.length > 0 ? (
|
||||
ruleBasedRecommendations.recommendations_by_rule.map((ruleGroup: any) => (
|
||||
<div key={ruleGroup.rule_id} style={{ marginBottom: '16px' }}>
|
||||
{/* 규칙 헤더 */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
marginBottom: '8px',
|
||||
padding: '8px',
|
||||
background: '#0a0a0a',
|
||||
borderRadius: '4px',
|
||||
borderLeft: '3px solid #22c55e'
|
||||
}}>
|
||||
<span style={{
|
||||
fontSize: '11px',
|
||||
fontWeight: '600',
|
||||
color: '#22c55e',
|
||||
background: 'rgba(34, 197, 94, 0.1)',
|
||||
padding: '2px 8px',
|
||||
borderRadius: '4px'
|
||||
}}>
|
||||
규칙 {ruleGroup.priority}
|
||||
</span>
|
||||
<span style={{ fontSize: '12px', fontWeight: '600', color: '#fff' }}>
|
||||
{ruleGroup.rule_name}
|
||||
</span>
|
||||
<span style={{ fontSize: '10px', color: '#666' }}>
|
||||
({ruleGroup.matched_count}개 종목 매칭)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 종목 리스트 */}
|
||||
{ruleGroup.stocks.map((item: any) => {
|
||||
// stockPrices에서 최신 가격 가져오기 (숫자 변환)
|
||||
const latestPrice = Number(stockPrices[item.stock_code] || item.current_price || 0)
|
||||
return (
|
||||
<button
|
||||
key={item.stock_code}
|
||||
className={`recommend-item ${selectedStock === item.stock_code ? 'active' : ''}`}
|
||||
onClick={() => handleStockSelect(item.stock_code)}
|
||||
style={{ width: '100%', marginBottom: '4px' }}
|
||||
>
|
||||
<div className="info">
|
||||
<span className="name">{item.stock_name}</span>
|
||||
<span className="code">{item.stock_code}</span>
|
||||
</div>
|
||||
<div className="figures">
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
|
||||
<span className="price">{formatCurrency(latestPrice)}</span>
|
||||
{item.price_date && (
|
||||
<span style={{ fontSize: '9px', color: '#64748b' }}>
|
||||
{formatDate(item.price_date)} 기준
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className={`rate ${(item.change_rate ?? 0) >= 0 ? 'up' : 'down'}`}>
|
||||
{formatPercent(item.change_rate ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ fontSize: '10px', color: '#64748b', marginTop: '4px' }}>
|
||||
점수: {item.score} | {item.signals?.slice(0, 2).join(', ')}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
))
|
||||
) : aiRecommendations && aiRecommendations.recommendations?.length > 0 ? (
|
||||
/* 2. 수동 지표 분석 추천 */
|
||||
aiRecommendations.recommendations.map((item: any) => {
|
||||
// stockPrices에서 최신 가격 가져오기 (숫자 변환)
|
||||
const latestPrice = Number(stockPrices[item.stock_code] || item.current_price || 0)
|
||||
return (
|
||||
<button
|
||||
key={item.stock_code}
|
||||
className={`recommend-item ${selectedStock === item.stock_code ? 'active' : ''}`}
|
||||
onClick={() => handleStockSelect(item.stock_code)}
|
||||
>
|
||||
<div className="info">
|
||||
<span className="name">{item.stock_name}</span>
|
||||
<span className="code">{item.stock_code}</span>
|
||||
</div>
|
||||
<div className="figures">
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
|
||||
<span className="price">{formatCurrency(latestPrice)}</span>
|
||||
{item.price_date && (
|
||||
<span style={{ fontSize: '9px', color: '#64748b' }}>
|
||||
{formatDate(item.price_date)} 기준
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className={`rate ${(item.change_rate ?? 0) >= 0 ? 'up' : 'down'}`}>
|
||||
{formatPercent(item.change_rate ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ fontSize: '10px', color: '#64748b', marginTop: '4px' }}>
|
||||
점수: {item.score} | {item.signals.slice(0, 2).join(', ')}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})
|
||||
) : recommendedStocks.length > 0 ? (
|
||||
recommendedStocks.map((item: any) => {
|
||||
const displayPrice = Number(selectedStock === item.stock_code && currentStockPrice
|
||||
? currentStockPrice
|
||||
: item.current_price)
|
||||
return (
|
||||
<button
|
||||
key={item.stock_code}
|
||||
className={`recommend-item ${selectedStock === item.stock_code ? 'active' : ''}`}
|
||||
onClick={() => handleStockSelect(item.stock_code)}
|
||||
>
|
||||
<div className="info">
|
||||
<span className="name">{item.stock_name}</span>
|
||||
<span className="code">{item.stock_code}</span>
|
||||
</div>
|
||||
<div className="figures">
|
||||
<span className="price">{formatCurrency(displayPrice || 0)}</span>
|
||||
<span className={`rate ${(item.profit_loss_rate ?? 0) >= 0 ? 'up' : 'down'}`}>
|
||||
{formatPercent(item.profit_loss_rate ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="no-data">보유 종목이 없습니다</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI 분석 섹션 */}
|
||||
<div className="ai-analysis-section">
|
||||
<div className="panel-header">🤖 AI 종합 분석</div>
|
||||
<div className="analysis-content">
|
||||
{aiAnalysisLoading ? (
|
||||
<div className="analysis-loading">분석 중...</div>
|
||||
) : aiAnalysis ? (
|
||||
typeof aiAnalysis === 'string' ? (
|
||||
<div style={{ whiteSpace: 'pre-wrap' }}>{aiAnalysis}</div>
|
||||
) : typeof aiAnalysis === 'object' && aiAnalysis !== null ? (
|
||||
<div style={{ whiteSpace: 'pre-wrap' }}>
|
||||
{aiAnalysis.analysis || aiAnalysis.recommendation || JSON.stringify(aiAnalysis, null, 2)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="no-data">분석 결과를 표시할 수 없습니다</div>
|
||||
)
|
||||
) : (
|
||||
<div className="no-data">종목을 선택하세요</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 리스크 체크 섹션 */}
|
||||
<div className="risk-check-section">
|
||||
<div className="panel-header">⚠️ 리스크 체크</div>
|
||||
<div className="risk-content">
|
||||
{riskCheckLoading ? (
|
||||
<div className="risk-loading">분석 중...</div>
|
||||
) : riskCheck ? (
|
||||
typeof riskCheck === 'string' ? (
|
||||
<div style={{ whiteSpace: 'pre-wrap' }}>{riskCheck}</div>
|
||||
) : typeof riskCheck === 'object' && riskCheck !== null ? (
|
||||
<div style={{ whiteSpace: 'pre-wrap' }}>
|
||||
{riskCheck.analysis || riskCheck.recommendation || JSON.stringify(riskCheck, null, 2)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="no-data">분석 결과를 표시할 수 없습니다</div>
|
||||
)
|
||||
) : (
|
||||
<div className="no-data">종목을 선택하세요</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="news-section">
|
||||
<div className="panel-header">시장 뉴스</div>
|
||||
<div className="news-list">
|
||||
{news && news.length > 0 ? (
|
||||
// 선택된 종목에 해당하는 뉴스만 필터링
|
||||
news.filter((item: any) => !selectedStock || item.stock_code === selectedStock)
|
||||
.slice(0, 5)
|
||||
.map((item: any) => (
|
||||
<div key={item.id} className="news-item" onClick={() => window.open(item.url, '_blank')}>
|
||||
<div className="news-title">{item.title}</div>
|
||||
<div className="news-meta">
|
||||
{new Date(item.published_at).toLocaleString('ko-KR', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="no-data">뉴스 없음</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HtsPage>
|
||||
)
|
||||
}
|
||||
|
||||
export default Dashboard
|
||||
176
frontend/src/pages/MCPStatus.tsx
Normal file
176
frontend/src/pages/MCPStatus.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import api from '../lib/api'
|
||||
import { Activity, CheckCircle, XCircle, AlertCircle } from 'lucide-react'
|
||||
import { useWebSocket } from '../hooks/useWebSocket'
|
||||
import { useEffect, useState } from 'react'
|
||||
import HtsPage from '../components/HtsPage'
|
||||
|
||||
const MCPStatus = () => {
|
||||
const { messages } = useWebSocket('mcp-monitor')
|
||||
const [mcpMessages, setMcpMessages] = useState<any[]>([])
|
||||
|
||||
// MCP 서버 상태 조회
|
||||
const { data: mcpStatus, refetch } = useQuery({
|
||||
queryKey: ['mcp-status'],
|
||||
queryFn: async () => {
|
||||
const response = await api.get('/mcp/status')
|
||||
return response.data
|
||||
},
|
||||
refetchInterval: 5000,
|
||||
})
|
||||
|
||||
// 사용 가능한 MCP 도구 목록
|
||||
const { data: mcpTools } = useQuery({
|
||||
queryKey: ['mcp-tools'],
|
||||
queryFn: async () => {
|
||||
const response = await api.get('/mcp/tools')
|
||||
return response.data
|
||||
},
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
// MCP 상태 업데이트 메시지 수신
|
||||
const statusMessages = messages.filter(msg => msg.type === 'mcp_status')
|
||||
if (statusMessages.length > 0) {
|
||||
setMcpMessages(prev => [...statusMessages, ...prev].slice(0, 50))
|
||||
}
|
||||
}, [messages])
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'connected':
|
||||
return 'text-success'
|
||||
case 'disconnected':
|
||||
return 'text-danger'
|
||||
default:
|
||||
return 'text-warning'
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'connected':
|
||||
return <CheckCircle className="text-success" size={24} />
|
||||
case 'disconnected':
|
||||
return <XCircle className="text-danger" size={24} />
|
||||
default:
|
||||
return <AlertCircle className="text-warning" size={24} />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<HtsPage>
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-3xl font-bold text-white">MCP 상태 모니터</h2>
|
||||
|
||||
{/* MCP 서버 상태 */}
|
||||
<div className="card">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-xl font-bold text-white">MCP 서버 연결 상태</h3>
|
||||
<button
|
||||
onClick={() => refetch()}
|
||||
className="btn-secondary text-sm"
|
||||
>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{mcpStatus && (
|
||||
<div className="flex items-center space-x-4">
|
||||
{getStatusIcon(mcpStatus.status)}
|
||||
<div>
|
||||
<p className={`text-xl font-bold ${getStatusColor(mcpStatus.status)}`}>
|
||||
{mcpStatus.status === 'connected' ? '연결됨' :
|
||||
mcpStatus.status === 'disconnected' ? '연결 끊김' : '알 수 없음'}
|
||||
</p>
|
||||
<p className="text-sm text-slate-400">
|
||||
{mcpStatus.mcp_server_url || '서버 URL 없음'}
|
||||
</p>
|
||||
{mcpStatus.message && (
|
||||
<p className="text-sm text-slate-500 mt-1">{mcpStatus.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 사용 가능한 도구 */}
|
||||
<div className="card">
|
||||
<h3 className="text-xl font-bold text-white mb-4">사용 가능한 MCP 도구</h3>
|
||||
|
||||
{mcpTools && mcpTools.tools && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{mcpTools.tools.map((tool: any, index: number) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-slate-900 rounded-lg p-4 border border-slate-700"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<h4 className="text-lg font-semibold text-white">{tool.name}</h4>
|
||||
<Activity className="text-primary" size={20} />
|
||||
</div>
|
||||
<p className="text-sm text-slate-400">{tool.description}</p>
|
||||
|
||||
{tool.input_schema && tool.input_schema.properties && (
|
||||
<div className="mt-3 text-xs">
|
||||
<p className="text-slate-500 font-medium mb-1">파라미터:</p>
|
||||
<ul className="space-y-1">
|
||||
{Object.entries(tool.input_schema.properties).map(([key, prop]: [string, any]) => (
|
||||
<li key={key} className="text-slate-400">
|
||||
• <span className="text-primary">{key}</span>
|
||||
{tool.input_schema.required?.includes(key) && (
|
||||
<span className="text-danger ml-1">*</span>
|
||||
)}
|
||||
: {prop.type}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(!mcpTools || !mcpTools.tools || mcpTools.tools.length === 0) && (
|
||||
<p className="text-slate-400 text-center py-8">
|
||||
사용 가능한 도구가 없습니다.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* MCP 메시지 로그 */}
|
||||
<div className="card">
|
||||
<h3 className="text-xl font-bold text-white mb-4">실시간 MCP 로그</h3>
|
||||
|
||||
<div className="space-y-2 max-h-96 overflow-y-auto">
|
||||
{mcpMessages.map((msg, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-slate-900 rounded p-3 text-sm font-mono"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-slate-500">
|
||||
{new Date().toLocaleTimeString('ko-KR')}
|
||||
</span>
|
||||
<span className="text-primary">{msg.type}</span>
|
||||
</div>
|
||||
<pre className="text-slate-300 whitespace-pre-wrap">
|
||||
{JSON.stringify(msg.data, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{mcpMessages.length === 0 && (
|
||||
<p className="text-slate-400 text-center py-8">
|
||||
MCP 로그가 없습니다.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HtsPage>
|
||||
)
|
||||
}
|
||||
|
||||
export default MCPStatus
|
||||
163
frontend/src/pages/TradeHistory.tsx
Normal file
163
frontend/src/pages/TradeHistory.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { format } from 'date-fns'
|
||||
import { ko } from 'date-fns/locale'
|
||||
import { TrendingUp, TrendingDown, Clock, CheckCircle, XCircle } from 'lucide-react'
|
||||
import HtsPage from '../components/HtsPage'
|
||||
import api from '../lib/api'
|
||||
|
||||
interface Trade {
|
||||
id: string
|
||||
created_at: string
|
||||
status: 'EXECUTED' | 'FAILED' | 'PENDING' | string
|
||||
stock_code: string
|
||||
stock_name?: string
|
||||
order_type: 'BUY' | 'SELL'
|
||||
order_price: number | null
|
||||
order_quantity: number
|
||||
executed_price: number | null
|
||||
executed_quantity: number | null
|
||||
message?: string | null
|
||||
}
|
||||
|
||||
const TradeHistory = () => {
|
||||
const {
|
||||
data: trades = [],
|
||||
isLoading,
|
||||
isError,
|
||||
} = useQuery<Trade[]>({
|
||||
queryKey: ['trade-history'],
|
||||
queryFn: async () => {
|
||||
const response = await api.get('/trades', {
|
||||
params: { limit: 100, days: 30 },
|
||||
})
|
||||
return response.data
|
||||
},
|
||||
refetchInterval: 10000,
|
||||
})
|
||||
|
||||
const getStatusIcon = (status: Trade['status']) => {
|
||||
switch (status) {
|
||||
case 'EXECUTED':
|
||||
return <CheckCircle className="text-success" size={20} />
|
||||
case 'FAILED':
|
||||
return <XCircle className="text-danger" size={20} />
|
||||
case 'PENDING':
|
||||
return <Clock className="text-warning" size={20} />
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const formatCurrency = (value: number | null) => {
|
||||
if (value == null) {
|
||||
return '시장가'
|
||||
}
|
||||
|
||||
return new Intl.NumberFormat('ko-KR', {
|
||||
style: 'currency',
|
||||
currency: 'KRW',
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value)
|
||||
}
|
||||
|
||||
return (
|
||||
<HtsPage contentClassName="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-3xl font-bold text-white">매매 로그</h2>
|
||||
{isLoading && <span className="text-sm text-slate-400">데이터 갱신 중...</span>}
|
||||
</div>
|
||||
|
||||
{isError && (
|
||||
<div className="card border border-danger/40 bg-danger/10 text-danger">
|
||||
최근 거래 내역을 불러오는 중 문제가 발생했습니다.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="card">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-slate-700">
|
||||
<th className="text-left py-3 px-4 text-slate-400">시간</th>
|
||||
<th className="text-left py-3 px-4 text-slate-400">상태</th>
|
||||
<th className="text-left py-3 px-4 text-slate-400">종목</th>
|
||||
<th className="text-center py-3 px-4 text-slate-400">구분</th>
|
||||
<th className="text-right py-3 px-4 text-slate-400">주문가</th>
|
||||
<th className="text-right py-3 px-4 text-slate-400">수량</th>
|
||||
<th className="text-right py-3 px-4 text-slate-400">체결가</th>
|
||||
<th className="text-right py-3 px-4 text-slate-400">체결수량</th>
|
||||
<th className="text-left py-3 px-4 text-slate-400">메시지</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{trades.map((trade) => (
|
||||
<tr key={trade.id} className="border-b border-slate-700/50 hover:bg-slate-700/30">
|
||||
<td className="py-3 px-4 text-slate-300 text-sm whitespace-nowrap">
|
||||
{format(new Date(trade.created_at), 'MM/dd HH:mm:ss', { locale: ko })}
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{getStatusIcon(trade.status)}
|
||||
<span className="text-sm text-slate-300">{trade.status}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<div>
|
||||
<div className="text-white font-medium">{trade.stock_code}</div>
|
||||
{trade.stock_name && (
|
||||
<div className="text-xs text-slate-400">{trade.stock_name}</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<span
|
||||
className={`inline-flex items-center px-2 py-1 rounded text-xs font-medium ${trade.order_type === 'BUY'
|
||||
? 'bg-primary/20 text-primary'
|
||||
: 'bg-danger/20 text-danger'
|
||||
}`}
|
||||
>
|
||||
{trade.order_type === 'BUY' ? (
|
||||
<>
|
||||
<TrendingUp size={12} className="mr-1" />
|
||||
매수
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<TrendingDown size={12} className="mr-1" />
|
||||
매도
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-right text-white">
|
||||
{formatCurrency(trade.order_price)}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-right text-white">
|
||||
{trade.order_quantity.toLocaleString()}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-right text-white">
|
||||
{trade.executed_price != null ? formatCurrency(trade.executed_price) : '-'}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-right text-white">
|
||||
{trade.executed_quantity != null ? trade.executed_quantity.toLocaleString() : '-'}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-slate-400 text-sm">
|
||||
{trade.message || '-'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{!trades.length && !isLoading && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-slate-400">거래 이력이 없습니다.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</HtsPage>
|
||||
)
|
||||
}
|
||||
|
||||
export default TradeHistory
|
||||
370
frontend/src/pages/TradingRules.css
Normal file
370
frontend/src/pages/TradingRules.css
Normal file
@@ -0,0 +1,370 @@
|
||||
.trading-rules-container {
|
||||
padding: 20px;
|
||||
background: #0a192f;
|
||||
min-height: 100vh;
|
||||
color: #ccd6f6;
|
||||
}
|
||||
|
||||
.rules-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid #00ff88;
|
||||
}
|
||||
|
||||
.rules-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #00ff88;
|
||||
text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
|
||||
}
|
||||
|
||||
.btn-create {
|
||||
padding: 10px 20px;
|
||||
background: #00ff88;
|
||||
color: #0a192f;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-create:hover {
|
||||
background: #00cc6a;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 255, 136, 0.4);
|
||||
}
|
||||
|
||||
/* 규칙 목록 */
|
||||
.rules-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.rule-card {
|
||||
background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(0, 255, 136, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.rule-card:hover {
|
||||
border-color: #00ff88;
|
||||
box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.rule-card.active {
|
||||
border-color: #00ff88;
|
||||
}
|
||||
|
||||
.rule-card.inactive {
|
||||
opacity: 0.6;
|
||||
border-color: #64748b;
|
||||
}
|
||||
|
||||
.rule-header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.rule-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.rule-title h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #00ff88;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rule-badge {
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.rule-badge.buy {
|
||||
background: rgba(0, 255, 136, 0.2);
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.rule-badge.sell {
|
||||
background: rgba(255, 99, 71, 0.2);
|
||||
color: #ff6347;
|
||||
}
|
||||
|
||||
.rule-badge.stop_loss {
|
||||
background: rgba(255, 215, 0, 0.2);
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.rule-badge.take_profit {
|
||||
background: rgba(64, 224, 208, 0.2);
|
||||
color: #40e0d0;
|
||||
}
|
||||
|
||||
.rule-priority {
|
||||
font-size: 12px;
|
||||
color: #8892b0;
|
||||
padding: 4px 8px;
|
||||
background: rgba(136, 146, 176, 0.1);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.rule-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-toggle {
|
||||
padding: 6px 12px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-toggle.active {
|
||||
background: rgba(0, 255, 136, 0.2);
|
||||
color: #00ff88;
|
||||
}
|
||||
|
||||
.btn-toggle.inactive {
|
||||
background: rgba(255, 99, 71, 0.2);
|
||||
color: #ff6347;
|
||||
}
|
||||
|
||||
.btn-edit,
|
||||
.btn-delete {
|
||||
padding: 6px 12px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: rgba(100, 116, 139, 0.2);
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background: rgba(100, 116, 139, 0.4);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: rgba(255, 99, 71, 0.2);
|
||||
color: #ff6347;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: rgba(255, 99, 71, 0.4);
|
||||
}
|
||||
|
||||
.rule-description {
|
||||
color: #8892b0;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.rule-conditions {
|
||||
background: rgba(10, 25, 47, 0.6);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid rgba(0, 255, 136, 0.1);
|
||||
}
|
||||
|
||||
.rule-conditions strong {
|
||||
color: #00ff88;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.rule-conditions pre {
|
||||
color: #cbd5e1;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.rule-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid rgba(100, 116, 139, 0.2);
|
||||
}
|
||||
|
||||
/* 규칙 추가/수정 모달 */
|
||||
.rule-form-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.rule-form-content {
|
||||
background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
border: 2px solid #00ff88;
|
||||
box-shadow: 0 10px 40px rgba(0, 255, 136, 0.3);
|
||||
}
|
||||
|
||||
.rule-form-content h2 {
|
||||
color: #00ff88;
|
||||
margin-bottom: 25px;
|
||||
font-size: 24px;
|
||||
text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
color: #00ff88;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: rgba(10, 25, 47, 0.8);
|
||||
border: 1px solid rgba(0, 255, 136, 0.3);
|
||||
border-radius: 6px;
|
||||
color: #ccd6f6;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #00ff88;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
font-family: 'Monaco', 'Courier New', monospace;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
width: auto;
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.btn-save,
|
||||
.btn-cancel {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background: #00ff88;
|
||||
color: #0a192f;
|
||||
}
|
||||
|
||||
.btn-save:hover {
|
||||
background: #00cc6a;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 255, 136, 0.4);
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: rgba(100, 116, 139, 0.2);
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: rgba(100, 116, 139, 0.4);
|
||||
}
|
||||
|
||||
/* 빈 상태 */
|
||||
.no-rules {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #8892b0;
|
||||
}
|
||||
|
||||
.no-rules p:first-child {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.no-rules p:last-child {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* 로딩 */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
font-size: 18px;
|
||||
color: #00ff88;
|
||||
}
|
||||
286
frontend/src/pages/TradingRules.tsx
Normal file
286
frontend/src/pages/TradingRules.tsx
Normal file
@@ -0,0 +1,286 @@
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import api from '../lib/api'
|
||||
import { Plus, Trash2, Power, PowerOff } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import HtsPage from '../components/HtsPage'
|
||||
|
||||
const TradingRules = () => {
|
||||
const queryClient = useQueryClient()
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
rule_type: 'BUY',
|
||||
priority: 1,
|
||||
conditions: '{\n "rsi_threshold": 40,\n "sma_short": 5,\n "sma_long": 20\n}',
|
||||
actions: '{\n "take_profit": 5.0,\n "stop_loss": 3.0,\n "position_sizing": {\n "target_ratio": 0.15\n }\n}'
|
||||
})
|
||||
|
||||
// 트레이딩 규칙 조회
|
||||
const { data: rules, isLoading } = useQuery({
|
||||
queryKey: ['trading-rules'],
|
||||
queryFn: async () => {
|
||||
const response = await api.get('/rules')
|
||||
return response.data
|
||||
},
|
||||
})
|
||||
|
||||
// 규칙 생성
|
||||
const createMutation = useMutation({
|
||||
mutationFn: async (data: any) => {
|
||||
// MCP로 규칙 검증
|
||||
try {
|
||||
const validateResponse = await fetch('http://localhost:8001/analyze', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
analysis_type: 'RULE_VALIDATION',
|
||||
data: {
|
||||
name: data.name,
|
||||
conditions: JSON.parse(data.conditions),
|
||||
actions: JSON.parse(data.actions)
|
||||
}
|
||||
})
|
||||
});
|
||||
const validation = await validateResponse.json();
|
||||
|
||||
if (!confirm(`🤖 AI 규칙 검증 결과:\n\n${validation.analysis || validation.result}\n\n계속 진행하시겠습니까?`)) {
|
||||
throw new Error('사용자가 취소했습니다.');
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.message === '사용자가 취소했습니다.') {
|
||||
throw error;
|
||||
}
|
||||
console.warn('MCP 검증 실패, 그대로 진행:', error);
|
||||
}
|
||||
|
||||
return api.post('/rules', {
|
||||
...data,
|
||||
conditions: JSON.parse(data.conditions),
|
||||
actions: JSON.parse(data.actions)
|
||||
})
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['trading-rules'] })
|
||||
setShowForm(false)
|
||||
setFormData({
|
||||
name: '',
|
||||
description: '',
|
||||
rule_type: 'BUY',
|
||||
priority: 1,
|
||||
conditions: '{\n "rsi_threshold": 40,\n "sma_short": 5,\n "sma_long": 20\n}',
|
||||
actions: '{\n "take_profit": 5.0,\n "stop_loss": 3.0,\n "position_sizing": {\n "target_ratio": 0.15\n }\n}'
|
||||
})
|
||||
alert('✅ 규칙이 성공적으로 추가되었습니다!')
|
||||
},
|
||||
onError: (error: any) => {
|
||||
if (error.message !== '사용자가 취소했습니다.') {
|
||||
alert(`❌ 규칙 추가 실패: ${error.response?.data?.detail || error.message}`)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 규칙 활성화/비활성화
|
||||
const toggleMutation = useMutation({
|
||||
mutationFn: async (ruleId: number) => {
|
||||
return api.post(`/rules/${ruleId}/toggle`)
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['trading-rules'] })
|
||||
},
|
||||
})
|
||||
|
||||
// 규칙 삭제
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: async (ruleId: number) => {
|
||||
return api.delete(`/rules/${ruleId}`)
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['trading-rules'] })
|
||||
},
|
||||
})
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="text-white">로딩 중...</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<HtsPage>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-3xl font-bold text-white">전략 룰 설정</h2>
|
||||
<button
|
||||
onClick={() => setShowForm(true)}
|
||||
className="btn-primary flex items-center space-x-2"
|
||||
>
|
||||
<Plus size={20} />
|
||||
<span>새 규칙 추가</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<div className="card border border-primary/40 bg-slate-900/70">
|
||||
<h3 className="text-xl font-bold text-white mb-4">새 규칙 추가</h3>
|
||||
<form onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
createMutation.mutate(formData)
|
||||
}}>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-1">규칙 이름</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-1">설명</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded text-white"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-1">규칙 타입</label>
|
||||
<select
|
||||
value={formData.rule_type}
|
||||
onChange={(e) => setFormData({ ...formData, rule_type: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded text-white"
|
||||
>
|
||||
<option value="BUY">BUY</option>
|
||||
<option value="SELL">SELL</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-1">우선순위</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.priority}
|
||||
onChange={(e) => setFormData({ ...formData, priority: parseInt(e.target.value) })}
|
||||
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded text-white"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-1">조건 (JSON)</label>
|
||||
<textarea
|
||||
value={formData.conditions}
|
||||
onChange={(e) => setFormData({ ...formData, conditions: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded text-white font-mono text-xs"
|
||||
rows={6}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-300 mb-1">실행 액션 (JSON)</label>
|
||||
<textarea
|
||||
value={formData.actions}
|
||||
onChange={(e) => setFormData({ ...formData, actions: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded text-white font-mono text-xs"
|
||||
rows={6}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-end space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowForm(false)}
|
||||
className="btn-secondary text-sm"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-primary text-sm"
|
||||
disabled={createMutation.isPending}
|
||||
>
|
||||
{createMutation.isPending ? '검증 중...' : '🤖 AI 검증 후 추가'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4">
|
||||
{rules && rules.map((rule: any) => (
|
||||
<div key={rule.id} className="card">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-3 mb-2">
|
||||
<h3 className="text-xl font-bold text-white">{rule.name}</h3>
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${rule.is_active ? 'bg-success/20 text-success' : 'bg-slate-700 text-slate-400'
|
||||
}`}>
|
||||
{rule.is_active ? '활성' : '비활성'}
|
||||
</span>
|
||||
<span className={`px-2 py-1 rounded text-xs font-medium ${rule.rule_type === 'BUY' ? 'bg-primary/20 text-primary' : 'bg-danger/20 text-danger'
|
||||
}`}>
|
||||
{rule.rule_type}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{rule.description && (
|
||||
<p className="text-slate-400 mb-3">{rule.description}</p>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-slate-500 font-medium mb-1">조건</p>
|
||||
<pre className="bg-slate-900 p-2 rounded text-slate-300 overflow-x-auto">
|
||||
{JSON.stringify(rule.conditions, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-500 font-medium mb-1">실행</p>
|
||||
<pre className="bg-slate-900 p-2 rounded text-slate-300 overflow-x-auto">
|
||||
{JSON.stringify(rule.actions, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-2 ml-4">
|
||||
<button
|
||||
onClick={() => toggleMutation.mutate(rule.id)}
|
||||
className={`btn ${rule.is_active ? 'btn-danger' : 'btn-success'}`}
|
||||
title={rule.is_active ? '비활성화' : '활성화'}
|
||||
>
|
||||
{rule.is_active ? <PowerOff size={18} /> : <Power size={18} />}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteMutation.mutate(rule.id)}
|
||||
className="btn btn-danger"
|
||||
title="삭제"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{(!rules || rules.length === 0) && (
|
||||
<div className="card text-center py-12">
|
||||
<p className="text-slate-400">설정된 트레이딩 규칙이 없습니다.</p>
|
||||
<button
|
||||
onClick={() => setShowForm(true)}
|
||||
className="btn-primary mt-4"
|
||||
>
|
||||
첫 규칙 추가하기
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</HtsPage>
|
||||
)
|
||||
}
|
||||
|
||||
export default TradingRules
|
||||
Reference in New Issue
Block a user