feat: 파이차트에 예수금(원화)도 표시

Author: BHyeonKim

src/features/profile/ui/AssetInfoGraphic/index.tsx

@@ -14,9 +14,12 @@ type AssetInfoGraphicProps = {
 export default function AssetInfoGraphic({ userInfo }: AssetInfoGraphicProps) {
 	const assetTableRef = useRef<HTMLDivElement>(null);
 	const { wallets, totalAssetAmount } = userInfo;
-	const coinData = generateCoinPieChartData(wallets);
+	const assetData = generateCoinPieChartData(userInfo);
+	const coinData = assetData.filter((item) => item.ticker !== 'KRW');
 	const roiAverage =
-		wallets.reduce((acc, item) => acc + item.roi, 0) / wallets.length;
+		wallets.length > 0
+			? wallets.reduce((acc, item) => acc + item.roi, 0) / wallets.length
+			: 0;
 
 	const handleClickChart = (data: CoinPieChartData) => {
 		if (!assetTableRef.current) return;
@@ -37,7 +40,7 @@ export default function AssetInfoGraphic({ userInfo }: AssetInfoGraphicProps) {
 		<>
 			<div className="flex h-100 w-180 shrink-0 items-center justify-center gap-6 ">
 				<div className="h-full flex-1/5">
-					<CoinPieChart coinData={coinData} onClick={handleClickChart} />
+					<CoinPieChart coinData={assetData} onClick={handleClickChart} />
 				</div>
 				<div className="flex flex-1/5 justify-center gap-10">
 					<div className="flex flex-1 flex-col gap-6">

src/features/profile/utils/index.ts

@@ -1,8 +1,10 @@
-import type { Wallet } from '~/entities/user';
+import type { UserInfoResponseData } from '~/entities/user';
 import type { CoinPieChartData } from '../types/chart.type';
 
-export function generateCoinPieChartData(data: Wallet[]): CoinPieChartData[] {
-	return data
+export function generateCoinPieChartData(
+	data: UserInfoResponseData,
+): CoinPieChartData[] {
+	const pieChartData = data.wallets
 		.map((item) => ({
 			name: item.name,
 			ticker: item.ticker,
@@ -14,4 +16,17 @@ export function generateCoinPieChartData(data: Wallet[]): CoinPieChartData[] {
 			currentPrice: item.currentPrice,
 		}))
 		.sort((a, b) => b.totalPrice - a.totalPrice);
+
+	pieChartData.push({
+		name: '원화',
+		ticker: 'KRW',
+		accountId: 0,
+		totalPrice: data.cash,
+		averagePrice: data.cash,
+		quantity: 0,
+		roi: 0,
+		currentPrice: data.cash,
+	});
+
+	return pieChartData;
 }