[FE] Feature #138 - 사이드바 내 투자 기능 구현

packages/client/src/components/sidebar/MyInvestment.tsx

@@ -1,9 +1,64 @@
 import NotLogin from '@/components/NotLogin';
+import SidebarCoin from '@/components/sidebar/SidebarCoin';
+import { useSSETicker } from '@/hooks/SSE/useSSETicker';
+import { useMyAccount } from '@/hooks/auth/useMyAccount';
 import { useAuthStore } from '@/store/authStore';
+import { formatData } from '@/utility/format/formatSSEData';
+import { useMemo } from 'react';
+import Lottie from 'lottie-react';
+import Wallet from '@asset/lotties/Wallet.json';
+
 function MyInvestment() {
 	const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+	const { data } = useMyAccount();
+	const balanceMarketList = useMemo(
+		() =>
+			data.coins.map((coin) => {
+				return {
+					market: `KRW-${coin.market}`,
+					quantity: Number(coin.quantity),
+				};
+			}),
+		[data.coins],
+	);
+	const { sseData } = useSSETicker(balanceMarketList);
+
+	const formatters = formatData('KRW');
 
 	if (!isAuthenticated) return <NotLogin size="sm" />;
+
+	return (
+		<div className="flex flex-col h-full overflow-y-auto [&::-webkit-scrollbar]:hidden p-4">
+			<div>
+				<span className="text-lg font-semibold">내 투자</span>
+			</div>
+			<div className="border border-solid border-gray-300 my-3"></div>
+			{data.coins.length > 0 ? (
+				data.coins.map((coin, index) => (
+					<SidebarCoin
+						key={coin.market}
+						listNumber={index + 1}
+						formatters={formatters}
+						sseData={sseData}
+						image_url={coin.img_url}
+						korean_name={coin.koreanName}
+						market={`KRW-${coin.market}`}
+					/>
+				))
+			) : (
+				<>
+					<Lottie
+						animationData={Wallet}
+						loop={true}
+						autoPlay={true}
+					/>
+					<p className="text-center text-gray-600 font-semibold">
+						투자한 종목이 없어요 !
+					</p>
+				</>
+			)}
+		</div>
+	);
 }
 
 export default MyInvestment;

packages/client/src/components/sidebar/SidebarCoin.tsx

@@ -9,7 +9,7 @@ type SidebarCoinProps = {
 	korean_name: string;
 	listNumber: number;
 	formatters: Formatters;
-	sseData: SSEDataType;
+	sseData: SSEDataType | undefined | null;
 	market: string;
 };
 
@@ -24,6 +24,8 @@ function SidebarCoin({
 	const navigate = useNavigate();
 	const { addRecentlyViewedMarket } = useRecentlyMarketStore();
 
+	if (!sseData) return;
+
 	const handleClick = () => {
 		addRecentlyViewedMarket(market);
 		navigate(`/trade/${market}`);

packages/client/src/pages/account/balance/Balance.tsx

@@ -46,15 +46,21 @@ function Balance() {
 					<div className="flex-[1]">손익</div>
 				</div>
 			</div>
-			{data.coins.map((coin) => {
-				return (
-					<BalanceCoin
-						key={coin.market}
-						coin={coin}
-						sseData={sseData ? sseData[`KRW-${coin.market}`] : null}
-					/>
-				);
-			})}
+			{data.coins.length > 0 ? (
+				data.coins.map((coin) => {
+					return (
+						<BalanceCoin
+							key={coin.market}
+							coin={coin}
+							sseData={sseData ? sseData[`KRW-${coin.market}`] : null}
+						/>
+					);
+				})
+			) : (
+				<div className="mt-20 flex justify-center">
+					<p className="font-semibold text-gray-700">보유한 종목이 없습니다.</p>
+				</div>
+			)}
 		</div>
 	);
 }

packages/client/src/pages/account/history/History.tsx

@@ -50,9 +50,17 @@ function History() {
 					<div className="flex-[2]">주문시간</div>
 				</div>
 
-				{filteredHistories.reverse().map((history) => (
-					<HistoryInfo key={history.tradeHistoryId} {...history} />
-				))}
+				{filteredHistories.length > 0 ? (
+					filteredHistories
+						.reverse()
+						.map((history) => (
+							<HistoryInfo key={history.tradeHistoryId} {...history} />
+						))
+				) : (
+					<div className="mt-20 flex justify-center">
+						<p className='font-semibold text-gray-700'>거래 내역이 없습니다.</p>
+					</div>
+				)}
 			</div>
 		</>
 	);

packages/client/src/pages/account/history/HistoryOption.tsx

@@ -16,7 +16,7 @@ function HistoryOption({ option, handleOption }: HistoryOptionProps) {
 					className={`py-3 px-4 w-20  border-solid border-gray-400
 					${
 						option === 'TOTAL'
-							? 'border-2 border-blue-700  text-blue-800'
+							? 'border-2 border-blue-600  text-blue-800'
 							: option === 'BUY'
 								? 'border-y border-l'
 								: 'border'
@@ -31,7 +31,7 @@ function HistoryOption({ option, handleOption }: HistoryOptionProps) {
 					className={`py-3 px-4 w-20  border-solid border-gray-400
 					${
 						option === 'BUY'
-							? 'border-2 border-blue-700  text-blue-800'
+							? 'border-2 border-blue-600  text-blue-800'
 							: option === 'SELL'
 								? 'border-y'
 								: 'border-y border-r'
@@ -44,7 +44,7 @@ function HistoryOption({ option, handleOption }: HistoryOptionProps) {
 				</div>
 				<div
 					className={`py-3 px-4 w-20  border-solid border-gray-400
-					${option === 'SELL' ? 'border-2 border-blue-700  text-blue-800' : 'border-y border-r'}`}
+					${option === 'SELL' ? 'border-2 border-blue-600  text-blue-800' : 'border-y border-r'}`}
 					onClick={() => {
 						handleOption('SELL');
 					}}

packages/client/src/pages/account/history/HistoryPeriod.tsx

@@ -22,7 +22,7 @@ function HistoryPeriod({ period, handlePeriod }: HistoryPeriodProps) {
 					className={`py-3 px-4 w-20  border-solid border-gray-400
 					${
 						period === 'ONE_WEEK'
-							? 'border-2 border-blue-700  text-blue-800'
+							? 'border-2 border-blue-600  text-blue-800'
 							: period === 'ONE_MONTH'
 								? 'border-y border-l'
 								: 'border'
@@ -37,7 +37,7 @@ function HistoryPeriod({ period, handlePeriod }: HistoryPeriodProps) {
 					className={`py-3 px-4 w-20  border-solid border-gray-400
 					${
 						period === 'ONE_MONTH'
-							? 'border-2 border-blue-700  text-blue-800'
+							? 'border-2 border-blue-600  text-blue-800'
 							: period === 'THREE_MONTH'
 								? 'border-y'
 								: 'border-y border-r'
@@ -52,7 +52,7 @@ function HistoryPeriod({ period, handlePeriod }: HistoryPeriodProps) {
 					className={`py-3 px-4 w-20  border-solid border-gray-400
 					${
 						period === 'THREE_MONTH'
-							? 'border-2 border-blue-700  text-blue-800'
+							? 'border-2 border-blue-600  text-blue-800'
 							: period === 'SIX_MONTH'
 								? 'border-y'
 								: 'border-y border-r'
@@ -67,7 +67,7 @@ function HistoryPeriod({ period, handlePeriod }: HistoryPeriodProps) {
 					className={`py-3 px-4 w-20  border-solid border-gray-400
 					${
 						period === 'SIX_MONTH'
-							? 'border-2 border-blue-700  text-blue-800'
+							? 'border-2 border-blue-600  text-blue-800'
 							: period === 'TOTAL'
 								? 'border-y'
 								: 'border-y border-r'
@@ -80,7 +80,7 @@ function HistoryPeriod({ period, handlePeriod }: HistoryPeriodProps) {
 				</div>
 				<div
 					className={`py-3 px-4 w-24  border-solid border-gray-400
-					${period === 'TOTAL' ? 'border-2 border-blue-700  text-blue-800' : 'border-y border-r'}`}
+					${period === 'TOTAL' ? 'border-2 border-blue-600  text-blue-800' : 'border-y border-r'}`}
 					onClick={() => {
 						handlePeriod('TOTAL');
 					}}

packages/client/src/pages/account/waitOrders/WaitOrders.tsx

@@ -17,9 +17,19 @@ function WaitOrders() {
 					<div className="w-[10%]">주문취소</div>
 				</div>
 
-				{waitOrders.reverse().map((waitOrder) => (
-					<WaitOrderInfo key={waitOrder.tradeId} {...waitOrder} />
-				))}
+				{waitOrders.length > 0 ? (
+					waitOrders
+						.reverse()
+						.map((waitOrder) => (
+							<WaitOrderInfo key={waitOrder.tradeId} {...waitOrder} />
+						))
+				) : (
+					<div className="mt-20 flex justify-center">
+						<p className="font-semibold text-gray-700">
+							미체결 주문이 없습니다.
+						</p>
+					</div>
+				)}
 			</div>
 		</>
 	);