aidev
715 lines
21 KiB
HTML
715 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PC-01 트레이딩 터미널 스타일</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Noto Sans KR', -apple-system, sans-serif;
|
|
background: #0a0a0f;
|
|
color: #e4e4e7;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 최상단 바 */
|
|
.top-bar {
|
|
height: 40px;
|
|
background: #131318;
|
|
border-bottom: 1px solid #27272a;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
gap: 24px;
|
|
}
|
|
.logo {
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
color: #22c55e;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.top-nav {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
.top-nav-item {
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
color: #71717a;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
}
|
|
.top-nav-item:hover { background: #27272a; color: #fff; }
|
|
.top-nav-item.active { background: #22c55e; color: #000; font-weight: 500; }
|
|
.top-right {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
font-size: 12px;
|
|
color: #71717a;
|
|
}
|
|
|
|
/* 메인 레이아웃 */
|
|
.main-layout {
|
|
display: grid;
|
|
grid-template-columns: 280px 1fr 320px;
|
|
grid-template-rows: auto 1fr;
|
|
height: calc(100vh - 40px);
|
|
}
|
|
|
|
/* 왼쪽 패널 */
|
|
.left-panel {
|
|
background: #131318;
|
|
border-right: 1px solid #27272a;
|
|
overflow-y: auto;
|
|
}
|
|
.panel-header {
|
|
padding: 16px;
|
|
border-bottom: 1px solid #27272a;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #a1a1aa;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.symbol-search {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #27272a;
|
|
}
|
|
.symbol-search input {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
background: #0a0a0f;
|
|
border: 1px solid #27272a;
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
}
|
|
.symbol-list {
|
|
padding: 8px;
|
|
}
|
|
.symbol-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
margin-bottom: 2px;
|
|
}
|
|
.symbol-item:hover { background: #1f1f26; }
|
|
.symbol-item.active { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); }
|
|
.symbol-name { font-size: 13px; font-weight: 500; }
|
|
.symbol-market { font-size: 11px; color: #71717a; }
|
|
.symbol-price { text-align: right; }
|
|
.symbol-price-value { font-size: 13px; font-weight: 500; }
|
|
.symbol-change { font-size: 11px; }
|
|
.symbol-change.up { color: #22c55e; }
|
|
.symbol-change.down { color: #ef4444; }
|
|
|
|
/* 설정 섹션 */
|
|
.settings-section {
|
|
padding: 16px;
|
|
border-top: 1px solid #27272a;
|
|
}
|
|
.setting-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
.setting-label {
|
|
font-size: 11px;
|
|
color: #71717a;
|
|
margin-bottom: 6px;
|
|
}
|
|
.setting-select {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
background: #0a0a0f;
|
|
border: 1px solid #27272a;
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
}
|
|
.btn-run {
|
|
width: 100%;
|
|
padding: 14px;
|
|
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
|
|
border: none;
|
|
border-radius: 8px;
|
|
color: #000;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
margin-top: 8px;
|
|
}
|
|
.btn-run:hover { filter: brightness(1.1); }
|
|
|
|
/* 중앙 차트 영역 */
|
|
.center-area {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #0a0a0f;
|
|
}
|
|
|
|
/* 차트 헤더 */
|
|
.chart-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #27272a;
|
|
background: #131318;
|
|
}
|
|
.chart-symbol-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
.chart-symbol-name {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
}
|
|
.chart-price {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #22c55e;
|
|
}
|
|
.chart-change {
|
|
font-size: 14px;
|
|
color: #22c55e;
|
|
}
|
|
.timeframe-selector {
|
|
display: flex;
|
|
gap: 4px;
|
|
background: #1f1f26;
|
|
padding: 4px;
|
|
border-radius: 6px;
|
|
}
|
|
.tf-btn {
|
|
padding: 6px 12px;
|
|
background: transparent;
|
|
border: none;
|
|
color: #71717a;
|
|
font-size: 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.tf-btn:hover { color: #fff; }
|
|
.tf-btn.active { background: #22c55e; color: #000; font-weight: 500; }
|
|
|
|
/* 차트 영역 */
|
|
.chart-container {
|
|
flex: 1;
|
|
position: relative;
|
|
background:
|
|
linear-gradient(90deg, rgba(39, 39, 42, 0.3) 1px, transparent 1px),
|
|
linear-gradient(rgba(39, 39, 42, 0.3) 1px, transparent 1px);
|
|
background-size: 60px 40px;
|
|
}
|
|
.chart-candles {
|
|
position: absolute;
|
|
inset: 40px 80px 60px 20px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-around;
|
|
gap: 4px;
|
|
}
|
|
.candle {
|
|
width: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.candle-body { width: 100%; border-radius: 1px; }
|
|
.candle-body.bull { background: #22c55e; }
|
|
.candle-body.bear { background: #ef4444; }
|
|
.signal-badge {
|
|
position: absolute;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
}
|
|
.signal-badge.buy {
|
|
bottom: -28px;
|
|
background: #22c55e;
|
|
color: #000;
|
|
}
|
|
.signal-badge.sell {
|
|
top: -28px;
|
|
background: #ef4444;
|
|
color: #fff;
|
|
}
|
|
.price-axis {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 40px;
|
|
bottom: 60px;
|
|
width: 80px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 8px;
|
|
font-size: 11px;
|
|
color: #52525b;
|
|
text-align: right;
|
|
background: rgba(19, 19, 24, 0.8);
|
|
}
|
|
.time-axis {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 20px;
|
|
right: 80px;
|
|
height: 60px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
font-size: 11px;
|
|
color: #52525b;
|
|
}
|
|
|
|
/* 보조지표 영역 */
|
|
.indicators-panel {
|
|
height: 150px;
|
|
border-top: 1px solid #27272a;
|
|
display: flex;
|
|
}
|
|
.indicator-chart {
|
|
flex: 1;
|
|
border-right: 1px solid #27272a;
|
|
padding: 12px;
|
|
position: relative;
|
|
}
|
|
.indicator-chart:last-child { border-right: none; }
|
|
.indicator-title {
|
|
font-size: 11px;
|
|
color: #71717a;
|
|
margin-bottom: 8px;
|
|
}
|
|
.indicator-mock {
|
|
height: calc(100% - 24px);
|
|
background: linear-gradient(180deg,
|
|
rgba(34, 197, 94, 0.1) 0%,
|
|
transparent 30%,
|
|
transparent 70%,
|
|
rgba(239, 68, 68, 0.1) 100%
|
|
);
|
|
border-radius: 4px;
|
|
position: relative;
|
|
}
|
|
.indicator-line {
|
|
position: absolute;
|
|
left: 5%;
|
|
right: 5%;
|
|
top: 50%;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #ef4444, #eab308, #22c55e, #3b82f6, #22c55e);
|
|
border-radius: 1px;
|
|
}
|
|
|
|
/* 오른쪽 패널 */
|
|
.right-panel {
|
|
background: #131318;
|
|
border-left: 1px solid #27272a;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 성과 요약 */
|
|
.performance-summary {
|
|
padding: 16px;
|
|
border-bottom: 1px solid #27272a;
|
|
}
|
|
.perf-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #a1a1aa;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.perf-highlight {
|
|
text-align: center;
|
|
padding: 20px;
|
|
background: rgba(34, 197, 94, 0.1);
|
|
border: 1px solid rgba(34, 197, 94, 0.2);
|
|
border-radius: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.perf-highlight-label {
|
|
font-size: 12px;
|
|
color: #71717a;
|
|
margin-bottom: 4px;
|
|
}
|
|
.perf-highlight-value {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: #22c55e;
|
|
}
|
|
.perf-highlight-sub {
|
|
font-size: 12px;
|
|
color: #22c55e;
|
|
margin-top: 4px;
|
|
}
|
|
.perf-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
.perf-item {
|
|
background: #1f1f26;
|
|
padding: 14px;
|
|
border-radius: 8px;
|
|
}
|
|
.perf-item-label {
|
|
font-size: 11px;
|
|
color: #71717a;
|
|
margin-bottom: 4px;
|
|
}
|
|
.perf-item-value {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
.perf-item-value.up { color: #22c55e; }
|
|
.perf-item-value.down { color: #ef4444; }
|
|
|
|
/* 정확도 */
|
|
.accuracy-section {
|
|
padding: 16px;
|
|
border-bottom: 1px solid #27272a;
|
|
}
|
|
.accuracy-bar-container {
|
|
margin-bottom: 12px;
|
|
}
|
|
.accuracy-bar-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.accuracy-bar-bg {
|
|
height: 8px;
|
|
background: #27272a;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.accuracy-bar-fill {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
}
|
|
.accuracy-bar-fill.green { background: linear-gradient(90deg, #22c55e, #4ade80); }
|
|
.accuracy-bar-fill.yellow { background: linear-gradient(90deg, #eab308, #facc15); }
|
|
|
|
/* 거래 내역 */
|
|
.trades-section {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.trades-header {
|
|
padding: 16px;
|
|
border-bottom: 1px solid #27272a;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.trades-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 8px;
|
|
}
|
|
.trade-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px;
|
|
background: #1f1f26;
|
|
border-radius: 8px;
|
|
margin-bottom: 6px;
|
|
gap: 12px;
|
|
}
|
|
.trade-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
.trade-icon.buy { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
|
|
.trade-icon.sell { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
|
|
.trade-info { flex: 1; }
|
|
.trade-type { font-size: 12px; font-weight: 500; }
|
|
.trade-time { font-size: 10px; color: #52525b; }
|
|
.trade-result { text-align: right; }
|
|
.trade-price { font-size: 12px; }
|
|
.trade-pnl { font-size: 11px; font-weight: 600; }
|
|
.trade-pnl.profit { color: #22c55e; }
|
|
.trade-pnl.loss { color: #ef4444; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="top-bar">
|
|
<div class="logo">📊 BACKTEST PRO</div>
|
|
<nav class="top-nav">
|
|
<div class="top-nav-item">대시보드</div>
|
|
<div class="top-nav-item active">백테스트</div>
|
|
<div class="top-nav-item">포트폴리오</div>
|
|
<div class="top-nav-item">전략관리</div>
|
|
<div class="top-nav-item">리포트</div>
|
|
</nav>
|
|
<div class="top-right">
|
|
<span>PC-01 트레이딩 터미널</span>
|
|
<span>🔔</span>
|
|
<span>⚙️</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-layout">
|
|
<!-- 왼쪽 패널 -->
|
|
<aside class="left-panel">
|
|
<div class="panel-header">종목 선택</div>
|
|
<div class="symbol-search">
|
|
<input type="text" placeholder="🔍 종목 검색...">
|
|
</div>
|
|
<div class="symbol-list">
|
|
<div class="symbol-item active">
|
|
<div>
|
|
<div class="symbol-name">BTC/KRW</div>
|
|
<div class="symbol-market">비트코인</div>
|
|
</div>
|
|
<div class="symbol-price">
|
|
<div class="symbol-price-value">58,450,000</div>
|
|
<div class="symbol-change up">+2.34%</div>
|
|
</div>
|
|
</div>
|
|
<div class="symbol-item">
|
|
<div>
|
|
<div class="symbol-name">ETH/KRW</div>
|
|
<div class="symbol-market">이더리움</div>
|
|
</div>
|
|
<div class="symbol-price">
|
|
<div class="symbol-price-value">3,245,000</div>
|
|
<div class="symbol-change up">+1.82%</div>
|
|
</div>
|
|
</div>
|
|
<div class="symbol-item">
|
|
<div>
|
|
<div class="symbol-name">XRP/KRW</div>
|
|
<div class="symbol-market">리플</div>
|
|
</div>
|
|
<div class="symbol-price">
|
|
<div class="symbol-price-value">892</div>
|
|
<div class="symbol-change down">-0.45%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-section">
|
|
<div class="panel-header" style="padding: 0 0 12px 0; border: none;">전략 설정</div>
|
|
<div class="setting-group">
|
|
<div class="setting-label">투자 전략</div>
|
|
<select class="setting-select">
|
|
<option>MACD + RSI 복합전략</option>
|
|
<option>볼린저밴드 돌파</option>
|
|
<option>이동평균 크로스</option>
|
|
</select>
|
|
</div>
|
|
<div class="setting-group">
|
|
<div class="setting-label">분석 기간</div>
|
|
<select class="setting-select">
|
|
<option>최근 3개월</option>
|
|
<option>최근 6개월</option>
|
|
<option>최근 1년</option>
|
|
</select>
|
|
</div>
|
|
<div class="setting-group">
|
|
<div class="setting-label">초기 투자금</div>
|
|
<input type="text" class="setting-select" value="₩10,000,000">
|
|
</div>
|
|
<button class="btn-run">▶ 백테스트 실행</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 중앙 차트 영역 -->
|
|
<main class="center-area">
|
|
<div class="chart-header">
|
|
<div class="chart-symbol-info">
|
|
<span class="chart-symbol-name">BTC/KRW</span>
|
|
<span class="chart-price">₩58,450,000</span>
|
|
<span class="chart-change">+2.34% (+1,340,000)</span>
|
|
</div>
|
|
<div class="timeframe-selector">
|
|
<button class="tf-btn">15분</button>
|
|
<button class="tf-btn active">1시간</button>
|
|
<button class="tf-btn">4시간</button>
|
|
<button class="tf-btn">1일</button>
|
|
<button class="tf-btn">1주</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<div class="price-axis">
|
|
<span>62,000,000</span>
|
|
<span>60,000,000</span>
|
|
<span>58,000,000</span>
|
|
<span>56,000,000</span>
|
|
<span>54,000,000</span>
|
|
</div>
|
|
<div class="time-axis">
|
|
<span>03/10</span>
|
|
<span>03/11</span>
|
|
<span>03/12</span>
|
|
<span>03/13</span>
|
|
<span>03/14</span>
|
|
<span>03/15</span>
|
|
</div>
|
|
<div class="chart-candles">
|
|
<div class="candle"><div class="candle-body bull" style="height: 50px;"></div></div>
|
|
<div class="candle"><div class="candle-body bull" style="height: 65px;"></div></div>
|
|
<div class="candle"><div class="candle-body bear" style="height: 40px;"></div></div>
|
|
<div class="candle"><div class="candle-body bear" style="height: 55px;"></div><div class="signal-badge buy">BUY</div></div>
|
|
<div class="candle"><div class="candle-body bull" style="height: 70px;"></div></div>
|
|
<div class="candle"><div class="candle-body bull" style="height: 90px;"></div></div>
|
|
<div class="candle"><div class="candle-body bull" style="height: 80px;"></div></div>
|
|
<div class="candle"><div class="candle-body bear" style="height: 45px;"></div><div class="signal-badge sell">SELL</div></div>
|
|
<div class="candle"><div class="candle-body bear" style="height: 60px;"></div></div>
|
|
<div class="candle"><div class="candle-body bull" style="height: 50px;"></div></div>
|
|
<div class="candle"><div class="candle-body bear" style="height: 35px;"></div><div class="signal-badge buy">BUY</div></div>
|
|
<div class="candle"><div class="candle-body bull" style="height: 55px;"></div></div>
|
|
<div class="candle"><div class="candle-body bull" style="height: 75px;"></div></div>
|
|
<div class="candle"><div class="candle-body bull" style="height: 85px;"></div></div>
|
|
<div class="candle"><div class="candle-body bear" style="height: 40px;"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="indicators-panel">
|
|
<div class="indicator-chart">
|
|
<div class="indicator-title">MACD (12, 26, 9)</div>
|
|
<div class="indicator-mock"><div class="indicator-line"></div></div>
|
|
</div>
|
|
<div class="indicator-chart">
|
|
<div class="indicator-title">RSI (14)</div>
|
|
<div class="indicator-mock"><div class="indicator-line"></div></div>
|
|
</div>
|
|
<div class="indicator-chart">
|
|
<div class="indicator-title">Volume</div>
|
|
<div class="indicator-mock"><div class="indicator-line"></div></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 오른쪽 패널 -->
|
|
<aside class="right-panel">
|
|
<div class="performance-summary">
|
|
<div class="perf-title">📊 성과 요약</div>
|
|
<div class="perf-highlight">
|
|
<div class="perf-highlight-label">총 수익률</div>
|
|
<div class="perf-highlight-value">+23.5%</div>
|
|
<div class="perf-highlight-sub">₩2,350,000 수익</div>
|
|
</div>
|
|
<div class="perf-grid">
|
|
<div class="perf-item">
|
|
<div class="perf-item-label">최종 자산</div>
|
|
<div class="perf-item-value">₩12.35M</div>
|
|
</div>
|
|
<div class="perf-item">
|
|
<div class="perf-item-label">승률</div>
|
|
<div class="perf-item-value up">68%</div>
|
|
</div>
|
|
<div class="perf-item">
|
|
<div class="perf-item-label">총 거래</div>
|
|
<div class="perf-item-value">25회</div>
|
|
</div>
|
|
<div class="perf-item">
|
|
<div class="perf-item-label">최대 낙폭</div>
|
|
<div class="perf-item-value down">-8.2%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accuracy-section">
|
|
<div class="perf-title">🎯 전략 정확도</div>
|
|
<div class="accuracy-bar-container">
|
|
<div class="accuracy-bar-header">
|
|
<span style="color: #71717a;">전체 정확도</span>
|
|
<span style="color: #22c55e; font-weight: 600;">70%</span>
|
|
</div>
|
|
<div class="accuracy-bar-bg">
|
|
<div class="accuracy-bar-fill green" style="width: 70%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="accuracy-bar-container">
|
|
<div class="accuracy-bar-header">
|
|
<span style="color: #71717a;">매수 정확도</span>
|
|
<span style="color: #22c55e; font-weight: 600;">76%</span>
|
|
</div>
|
|
<div class="accuracy-bar-bg">
|
|
<div class="accuracy-bar-fill green" style="width: 76%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="accuracy-bar-container">
|
|
<div class="accuracy-bar-header">
|
|
<span style="color: #71717a;">매도 정확도</span>
|
|
<span style="color: #eab308; font-weight: 600;">64%</span>
|
|
</div>
|
|
<div class="accuracy-bar-bg">
|
|
<div class="accuracy-bar-fill yellow" style="width: 64%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="trades-section">
|
|
<div class="trades-header">
|
|
<span class="perf-title" style="margin: 0;">📋 거래 내역</span>
|
|
<span style="font-size: 11px; color: #22c55e; cursor: pointer;">전체보기 →</span>
|
|
</div>
|
|
<div class="trades-list">
|
|
<div class="trade-item">
|
|
<div class="trade-icon sell">S</div>
|
|
<div class="trade-info">
|
|
<div class="trade-type">매도</div>
|
|
<div class="trade-time">2024.03.15 14:00</div>
|
|
</div>
|
|
<div class="trade-result">
|
|
<div class="trade-price">₩58,450,000</div>
|
|
<div class="trade-pnl profit">+5.2%</div>
|
|
</div>
|
|
</div>
|
|
<div class="trade-item">
|
|
<div class="trade-icon buy">B</div>
|
|
<div class="trade-info">
|
|
<div class="trade-type">매수</div>
|
|
<div class="trade-time">2024.03.12 09:00</div>
|
|
</div>
|
|
<div class="trade-result">
|
|
<div class="trade-price">₩55,520,000</div>
|
|
<div class="trade-pnl">-</div>
|
|
</div>
|
|
</div>
|
|
<div class="trade-item">
|
|
<div class="trade-icon sell">S</div>
|
|
<div class="trade-info">
|
|
<div class="trade-type">매도</div>
|
|
<div class="trade-time">2024.03.08 16:00</div>
|
|
</div>
|
|
<div class="trade-result">
|
|
<div class="trade-price">₩54,200,000</div>
|
|
<div class="trade-pnl loss">-2.1%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</body>
|
|
</html>
|