49 lines
2.0 KiB
JavaScript
49 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import { formatNumber, formatPercent, profitColorClass } from '../../stockUtils';
|
|
import HoldingRow from './HoldingRow';
|
|
|
|
const BrokerSection = ({ broker, items, pf, handleSell }) => {
|
|
const bSummary = pf.getBrokerSummary(items);
|
|
const color = pf.brokerColors[broker];
|
|
return (
|
|
<section
|
|
key={broker}
|
|
className="stock-panel stock-panel--wide pf-broker-section"
|
|
style={{ borderColor: color?.border, background: color?.bg }}
|
|
>
|
|
<div className="stock-panel__head">
|
|
<div>
|
|
<p className="stock-panel__eyebrow" style={{ color: color?.border }}>
|
|
{broker}
|
|
</p>
|
|
<h3>{broker} 보유 현황</h3>
|
|
<p className="stock-panel__sub">
|
|
{items.length}종목 · 총 매입{' '}
|
|
{formatNumber(bSummary.totalBuy)} · 평가{' '}
|
|
{formatNumber(bSummary.totalEval)} · 손익{' '}
|
|
<span className={`stock-profit ${profitColorClass(bSummary.totalProfit)}`}>
|
|
{formatNumber(bSummary.totalProfit)} (
|
|
{formatPercent(bSummary.totalProfitRate)})
|
|
</span>
|
|
{(() => {
|
|
const bc = pf.cashList.find((c) => c.broker === broker);
|
|
return bc ? (
|
|
<span className="pf-cash-badge">
|
|
예수금 {formatNumber(bc.cash)}원
|
|
</span>
|
|
) : null;
|
|
})()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="stock-holdings">
|
|
{items.map((item) => (
|
|
<HoldingRow key={item.id} item={item} pf={pf} handleSell={handleSell} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default BrokerSection;
|