모의투자 화면수정

frontend/src/components/paper/PaperLeftStrategyTab.tsx

@@ -91,33 +91,90 @@ const PaperLeftStrategyTab: React.FC<Props> = ({
     </>
   );
 
+  const positions = summary?.positions ?? [];
+
   const bottom = (
-    <table className="ptd-table ptd-table--compact">
-      <thead>
-        <tr><th>자산</th><th>수량</th><th>손익</th></tr>
-      </thead>
-      <tbody>
-        {(summary?.positions ?? []).length === 0 ? (
-          <tr><td colSpan={3} className="ptd-muted">보유 없음</td></tr>
-        ) : summary!.positions.map(p => {
-          const code = p.symbol.replace(/^KRW-/, '');
-          const up = (p.profitLoss ?? 0) >= 0;
-          return (
-            <tr
-              key={p.symbol}
-              className={market === p.symbol ? 'ptd-row--sel' : ''}
-              onClick={() => onMarketSelect?.(p.symbol)}
-            >
-              <td>{code}</td>
-              <td>{p.quantity.toFixed(4)}</td>
-              <td className={up ? 'up' : 'down'}>
-                {p.profitLoss != null ? `${up ? '+' : ''}${fmtKrw(p.profitLoss)}` : '—'}
-              </td>
-            </tr>
-          );
-        })}
-      </tbody>
-    </table>
+    <div className="ptd-item-card-section ptd-holdings-card-section">
+      <div className="vtd-target-list-head">
+        <span>보유 목록</span>
+        <span className="vtd-target-count">{positions.length}종목</span>
+      </div>
+      {positions.length === 0 ? (
+        <p className="ptd-muted ptd-item-card-empty">보유 종목이 없습니다.</p>
+      ) : (
+        <div className="ptd-item-card-scroll">
+          <div className="vtd-target-list ptd-item-card-list">
+            {positions.map(p => {
+              const code = p.symbol.replace(/^KRW-/, '');
+              const name = p.koreanName || code;
+              const up = (p.profitLoss ?? 0) >= 0;
+              const selected = market === p.symbol;
+              const retPct = p.profitLossPct;
+
+              return (
+                <div
+                  key={p.symbol}
+                  className={[
+                    'vtd-target-item',
+                    'ptd-item-card',
+                    'ptd-holding-card',
+                    selected ? 'vtd-target-item--active' : '',
+                  ].filter(Boolean).join(' ')}
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => onMarketSelect?.(p.symbol)}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      onMarketSelect?.(p.symbol);
+                    }
+                  }}
+                >
+                  <div className="vtd-target-item-main">
+                    <div className="vtd-target-names">
+                      <span className="vtd-target-ko">{name}</span>
+                      <span className="vtd-target-en">{code}/KRW</span>
+                    </div>
+                    {p.profitLoss != null && (
+                      <div className="vtd-target-item-actions">
+                        <span className={`vtd-target-price ${up ? 'vtd-target-up' : 'vtd-target-dn'}`}>
+                          {up ? '+' : ''}{fmtKrw(p.profitLoss)}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="ptd-item-card-metrics">
+                    <div className="vtd-target-strategy-field">
+                      <span className="vtd-target-strategy-label">보유수량</span>
+                      <span className="vtd-trade-meta-value">{p.quantity.toFixed(4)}</span>
+                    </div>
+                    <div className="vtd-target-strategy-field">
+                      <span className="vtd-target-strategy-label">평단가</span>
+                      <span className="vtd-trade-meta-value">{fmtKrw(p.avgPrice)}</span>
+                    </div>
+                    {p.evalAmount != null && (
+                      <div className="vtd-target-strategy-field">
+                        <span className="vtd-target-strategy-label">평가금액</span>
+                        <span className="vtd-trade-meta-value">{fmtKrw(p.evalAmount)}</span>
+                      </div>
+                    )}
+                    {retPct != null && (
+                      <div className="vtd-target-strategy-field">
+                        <span className="vtd-target-strategy-label">수익률</span>
+                        <span className={`vtd-trade-meta-value ${retPct >= 0 ? 'vtd-target-up' : 'vtd-target-dn'}`}>
+                          {retPct >= 0 ? '+' : ''}{retPct.toFixed(2)}%
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
   );
 
   return (