From b4db40daa583d752f44bf14e7ead7c08959e16ec Mon Sep 17 00:00:00 2001
From: Caniro <caniro@naver.com>
Date: Sat, 26 Jul 2025 22:36:30 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A7=A4=EB=8F=84=20=ED=98=B8=EA=B0=80?=
 =?UTF-8?q?=20=EA=B0=80=EA=B2=A9=20=EB=82=B4=EB=A6=BC=EC=B0=A8=EC=88=9C=20?=
 =?UTF-8?q?=EC=A0=95=EB=A0=AC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/tradeview/ui/Orderbook/chart.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/features/tradeview/ui/Orderbook/chart.tsx b/src/features/tradeview/ui/Orderbook/chart.tsx
index 99427f4..ae43521 100644
--- a/src/features/tradeview/ui/Orderbook/chart.tsx
+++ b/src/features/tradeview/ui/Orderbook/chart.tsx
@@ -22,6 +22,9 @@ export default function OrderbookChart({
 	layout = 'vertical',
 }: Readonly<OrderbookChartProps>) {
 	const color = type === 'bull' ? '#FDD2D7' : '#CDE0FE';
+	// 매도는 price 기준 내림차순 정렬
+	const displayData =
+		type === 'bear' ? [...data].sort((a, b) => b.price - a.price) : data;
 
 	return (
 		<div
@@ -31,7 +34,7 @@ export default function OrderbookChart({
 			)}
 		>
 			<div className="flex h-full min-h-full flex-col justify-around">
-				{data.map((item) => (
+				{displayData.map((item) => (
 					<div
 						key={item.price + item.size}
 						className="text-[#4287F9]"
@@ -43,7 +46,12 @@ export default function OrderbookChart({
 			</div>
 			<div className="h-full min-h-full w-full">
 				<ResponsiveContainer width="100%">
-					<BarChart layout={layout} data={data} barGap={0} barCategoryGap={0}>
+					<BarChart
+						layout={layout}
+						data={displayData}
+						barGap={0}
+						barCategoryGap={0}
+					>
 						<XAxis type="number" dataKey="size" hide={true} />
 						<YAxis type="category" dataKey="price" hide={true} />
 						<Bar dataKey="size" fill={color} barSize="100%">