업비트 스타일 매수/매도 탭 주문 패널 적용
- TradeTabOrderPanel 신규 생성: 매수|매도|간편주문|거래내역 탭 - 매수 탭: 빨간 하단 인디케이터, 매도 탭: 파란 하단 인디케이터 - 간편주문: 시장가 즉시체결 (KRW 금액 입력 + % 버튼) - 거래내역: historySlot prop으로 외부 콘텐츠 주입 - VirtualTradingPage: 외부 '거래' 탭 제거 → 거래내역 내부 탭으로 이동 - PaperTradingPage: 미체결/체결/원장 거래내역 내부 탭으로 이동 - TradeNotificationListPage·RightSidePanel: TradeTabOrderPanel 적용 - tradeRightPanel.css: ttop-* · qop-* 스타일 추가 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Macbook
@@ -411,3 +411,263 @@
|
||||
.trade-right-panel .ptd-order-card--trade-inline .top-paper-hint {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
업비트 스타일 탭 주문 패널 (TradeTabOrderPanel)
|
||||
ttop-wrap > ttop-tabs / ttop-body
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* 래퍼: 전체 높이 flex 컬럼 */
|
||||
.trade-right-panel .ttop-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── 탭 바 ── */
|
||||
.trade-right-panel .ttop-tabs {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg2);
|
||||
}
|
||||
|
||||
.trade-right-panel .ttop-tab {
|
||||
flex: 1;
|
||||
padding: 13px 4px 11px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
color: var(--text3);
|
||||
cursor: pointer;
|
||||
transition: color 0.12s, border-color 0.12s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.trade-right-panel .ttop-tab:hover {
|
||||
color: var(--text2);
|
||||
}
|
||||
|
||||
/* 매수 탭 활성 */
|
||||
.trade-right-panel .ttop-tab--buy.ttop-tab--on {
|
||||
color: var(--gc-trade-buy);
|
||||
border-bottom-color: var(--gc-trade-buy);
|
||||
}
|
||||
/* 매도 탭 활성 */
|
||||
.trade-right-panel .ttop-tab--sell.ttop-tab--on {
|
||||
color: var(--gc-trade-sell);
|
||||
border-bottom-color: var(--gc-trade-sell);
|
||||
}
|
||||
/* 간편주문·거래내역 탭 활성 */
|
||||
.trade-right-panel .ttop-tab--quick.ttop-tab--on,
|
||||
.trade-right-panel .ttop-tab--history.ttop-tab--on {
|
||||
color: var(--accent, #7aa2f7);
|
||||
border-bottom-color: var(--accent, #7aa2f7);
|
||||
}
|
||||
|
||||
/* ── 탭 본문 ── */
|
||||
.trade-right-panel .ttop-body {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 주문 폼 카드 영역 (매수/매도 탭) */
|
||||
.trade-right-panel .ttop-card-body {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ttop-card-body 안의 order-card — ptd-split-card-body 안과 동일 규칙 */
|
||||
.trade-right-panel .ptd-split-panel--right .ttop-card-body > .ptd-order-card--trade-inline {
|
||||
flex: 1 1 0;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* 거래내역 영역 */
|
||||
.trade-right-panel .ttop-history {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.trade-right-panel .ttop-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: var(--text3);
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── 간편주문 폼 (QuickOrderPanel) ── */
|
||||
.trade-right-panel .qop-wrap {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--gc-trade-card-pad);
|
||||
gap: var(--gc-trade-row-gap);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 매수/매도 전환 */
|
||||
.trade-right-panel .qop-side-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.trade-right-panel .qop-side-btn {
|
||||
flex: 1;
|
||||
padding: 10px 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
background: var(--bg3);
|
||||
color: var(--text2);
|
||||
cursor: pointer;
|
||||
transition: background 0.12s, border-color 0.12s, color 0.12s;
|
||||
}
|
||||
.trade-right-panel .qop-side-btn--buy.qop-side-btn--on {
|
||||
background: color-mix(in srgb, var(--gc-trade-buy) 15%, var(--bg3));
|
||||
border-color: var(--gc-trade-buy);
|
||||
color: var(--gc-trade-buy);
|
||||
}
|
||||
.trade-right-panel .qop-side-btn--sell.qop-side-btn--on {
|
||||
background: color-mix(in srgb, var(--gc-trade-sell) 15%, var(--bg3));
|
||||
border-color: var(--gc-trade-sell);
|
||||
color: var(--gc-trade-sell);
|
||||
}
|
||||
|
||||
/* 주문가능 */
|
||||
.trade-right-panel .qop-available {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.trade-right-panel .qop-available-label {
|
||||
color: var(--text2);
|
||||
}
|
||||
.trade-right-panel .qop-available-value {
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* 주문금액 필드 */
|
||||
.trade-right-panel .qop-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.trade-right-panel .qop-label {
|
||||
flex: 0 0 var(--gc-trade-row-label-w);
|
||||
font-size: 12px;
|
||||
color: var(--text2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.trade-right-panel .qop-input {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
padding: 8px 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.25;
|
||||
border: 1px solid var(--gc-trade-upbit-input-border);
|
||||
border-radius: 4px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* % 버튼 */
|
||||
.trade-right-panel .qop-pct-row {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
margin-left: calc(var(--gc-trade-row-label-w) + 8px);
|
||||
}
|
||||
.trade-right-panel .qop-pct-btn {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
padding: 6px 2px;
|
||||
font-size: 11px;
|
||||
border: 1px solid var(--gc-trade-upbit-input-border);
|
||||
border-radius: 4px;
|
||||
background: var(--bg);
|
||||
color: var(--text2);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.1s, color 0.1s;
|
||||
}
|
||||
.trade-right-panel .qop-pct-btn--active {
|
||||
border-color: var(--gc-trade-upbit-accent);
|
||||
color: var(--gc-trade-upbit-accent);
|
||||
background: color-mix(in srgb, var(--gc-trade-upbit-accent) 8%, var(--bg));
|
||||
}
|
||||
|
||||
/* 예상 수량 */
|
||||
.trade-right-panel .qop-estimate {
|
||||
font-size: 11px;
|
||||
color: var(--text3);
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 메타 안내 */
|
||||
.trade-right-panel .qop-meta {
|
||||
font-size: 11px;
|
||||
color: var(--text3);
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
margin-top: auto;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
/* 제출 버튼 */
|
||||
.trade-right-panel .qop-actions {
|
||||
flex-shrink: 0;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.trade-right-panel .qop-submit {
|
||||
width: 100%;
|
||||
padding: 13px 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.12s;
|
||||
}
|
||||
.trade-right-panel .qop-submit:hover { opacity: 0.9; }
|
||||
.trade-right-panel .qop-submit--buy {
|
||||
background: var(--gc-trade-buy);
|
||||
color: #fff;
|
||||
}
|
||||
.trade-right-panel .qop-submit--sell {
|
||||
background: var(--gc-trade-sell);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user