diff --git a/src/pages/stock/components/PortfolioTab.jsx b/src/pages/stock/components/PortfolioTab.jsx index 2412597..9acc7de 100644 --- a/src/pages/stock/components/PortfolioTab.jsx +++ b/src/pages/stock/components/PortfolioTab.jsx @@ -5,6 +5,7 @@ import PriceSessionBadge from './portfolio/PriceSessionBadge'; import AddHoldingForm from './portfolio/AddHoldingForm'; import PortfolioSummary from './portfolio/PortfolioSummary'; import AssetHistoryChart from './portfolio/AssetHistoryChart'; +import CashPanel from './portfolio/CashPanel'; const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => ( <> @@ -53,131 +54,7 @@ const PortfolioTab = ({ pf, asset, handleSell, handleSaveSnapshot }) => ( {/* 예수금 패널 */} -
-
-
-

예수금 관리

-

증권사별 예수금

-

- 증권사별 예수금을 입력하면 총 자산에 자동 반영됩니다. -

-
-
- - {pf.cashList.length > 0 && ( -
- {pf.cashList.map((item) => { - const isEditing = pf.cashEditingBroker === item.broker; - return ( -
- {item.broker} - {isEditing ? ( - pf.setCashEditingValue(e.target.value)} - onKeyDown={(e) => { - if (e.key === 'Enter') pf.handleCashInlineSave(item.broker); - if (e.key === 'Escape') pf.handleCashInlineCancel(); - }} - autoFocus - /> - ) : ( - - {formatNumber(item.cash)}원 - - )} - - {item.updated_at - ? new Date(item.updated_at).toLocaleDateString('ko-KR') - : ''} - - {isEditing ? ( - <> - - - - ) : ( - <> - - - - )} -
- ); - })} -
- )} - {pf.cashList.length === 0 && ( -

- 등록된 예수금이 없습니다. -

- )} - -
- - - - {pf.cashError &&

{pf.cashError}

} -
-
+ {/* Broker cards stacked */} {pf.brokerGroups.map(([broker, items]) => { diff --git a/src/pages/stock/components/portfolio/CashPanel.jsx b/src/pages/stock/components/portfolio/CashPanel.jsx new file mode 100644 index 0000000..ee99375 --- /dev/null +++ b/src/pages/stock/components/portfolio/CashPanel.jsx @@ -0,0 +1,132 @@ +import React from 'react'; +import { formatNumber } from '../../stockUtils'; + +const CashPanel = ({ pf }) => ( +
+
+
+

예수금 관리

+

증권사별 예수금

+

+ 증권사별 예수금을 입력하면 총 자산에 자동 반영됩니다. +

+
+
+ + {pf.cashList.length > 0 && ( +
+ {pf.cashList.map((item) => { + const isEditing = pf.cashEditingBroker === item.broker; + return ( +
+ {item.broker} + {isEditing ? ( + pf.setCashEditingValue(e.target.value)} + onKeyDown={(e) => { + if (e.key === 'Enter') pf.handleCashInlineSave(item.broker); + if (e.key === 'Escape') pf.handleCashInlineCancel(); + }} + autoFocus + /> + ) : ( + + {formatNumber(item.cash)}원 + + )} + + {item.updated_at + ? new Date(item.updated_at).toLocaleDateString('ko-KR') + : ''} + + {isEditing ? ( + <> + + + + ) : ( + <> + + + + )} +
+ ); + })} +
+ )} + {pf.cashList.length === 0 && ( +

+ 등록된 예수금이 없습니다. +

+ )} + +
+ + + + {pf.cashError &&

{pf.cashError}

} +
+
+); + +export default CashPanel;