cci 수정

frontend/src/components/RightSidePanel.tsx

@@ -6,6 +6,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { OrderbookPanel } from './OrderbookPanel';
 import TradeOrderPanel from './TradeOrderPanel';
+import PaperSplitPanel from './paper/PaperSplitPanel';
 import type { OrderbookDisplayUnit, WsStatus } from '../hooks/useUpbitOrderbook';
 import { useUpbitRecentTrades } from '../hooks/useUpbitRecentTrades';
 import type { OrderbookTickerInfo } from './OrderbookPanel';
@@ -130,12 +131,12 @@ const RightSidePanel: React.FC<RightSidePanelProps> = ({
       </button>
 
       <div className="rsp-panel">
-        <div className="rsp-tabs">
+        <div className="rsp-tabs bps-right-tabs">
           {PANEL_TABS.map(tab => (
             <button
               key={tab.id}
               type="button"
-              className={`rsp-tab ${activeTab === tab.id ? 'rsp-tab--active' : ''}`}
+              className={`bps-right-tab${activeTab === tab.id ? ' bps-right-tab--on' : ''}`}
               onClick={() => setActiveTab(tab.id)}
             >
               {tab.label}
@@ -143,12 +144,14 @@ const RightSidePanel: React.FC<RightSidePanelProps> = ({
           ))}
         </div>
 
-        <div className="rsp-body">
+        <div className="rsp-body ptd-right-body" ref={tradeSectionRef}>
           {activeTab === 'trade' && (
-            <div className="rsp-trade-stack" ref={tradeSectionRef}>
-              <div className="rsp-trade-card rsp-trade-card--buy">
-                <div className="rsp-trade-card-title">매수</div>
-                <div className="rsp-trade-card-body">
+            <PaperSplitPanel
+              className="ptd-split-panel--right"
+              topTitle="매수"
+              bottomTitle="매도"
+              top={(
+                <div className="ptd-order-card">
                   <TradeOrderPanel
                     side="buy"
                     market={market}
@@ -163,11 +166,9 @@ const RightSidePanel: React.FC<RightSidePanelProps> = ({
                     onPaperOrderFilled={onPaperOrderFilled}
                   />
                 </div>
-              </div>
-
-              <div className="rsp-trade-card rsp-trade-card--sell">
-                <div className="rsp-trade-card-title">매도</div>
-                <div className="rsp-trade-card-body">
+              )}
+              bottom={(
+                <div className="ptd-order-card">
                   <TradeOrderPanel
                     side="sell"
                     market={market}
@@ -183,12 +184,12 @@ const RightSidePanel: React.FC<RightSidePanelProps> = ({
                     onPaperOrderFilled={onPaperOrderFilled}
                   />
                 </div>
-              </div>
-            </div>
+              )}
+            />
           )}
 
           {activeTab === 'orderbook' && (
-            <div className="rsp-ob-stack">
+            <div className="rsp-ob-stack ptd-ob-stack--fill">
               <div className="rsp-trade-card rsp-ob-card">
                 <div className="rsp-trade-card-title rsp-ob-card-title">실시간 호가</div>
                 <div className="rsp-trade-card-body rsp-ob-card-body">