From ea02731ee373fcd110d8cd0d6ecbcb6bc1692107 Mon Sep 17 00:00:00 2001
From: minzx23 <kmjn0623@gmail.com>
Date: Tue, 12 May 2026 15:42:53 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EC=98=81=EC=88=98=EC=A6=9D?=
 =?UTF-8?q?=20=EA=B2=B0=EC=A0=9C=20=EB=82=B4=EC=97=AD=20=EC=B9=B4=EB=93=9C?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20API=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ReceiptItemInfo.tsx | 52 ++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/components/ReceiptItemInfo.tsx

diff --git a/src/components/ReceiptItemInfo.tsx b/src/components/ReceiptItemInfo.tsx
new file mode 100644
index 0000000..5db7ee9
--- /dev/null
+++ b/src/components/ReceiptItemInfo.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import { useGetReceiptDetail } from '@/apis/receipt/receipt.queries';
+import { cn } from '@/utils/cn';
+
+interface ReceiptItemInfoProps {
+  receiptId: number;
+  workspaceId: number;
+}
+
+export default function ReceiptItemInfo({ receiptId, workspaceId }: ReceiptItemInfoProps) {
+  const { data } = useGetReceiptDetail(receiptId, workspaceId);
+  const items = data?.data.items;
+  const itemsTotalAmount = items?.reduce((sum, item) => sum + item.price * item.quantity, 0) ?? 0;
+  const totalAmount = data?.data.totalAmount;
+  const discountAmount = data?.data.discountAmount;
+
+  return (
+    <div
+      className={cn(
+        'flex min-w-57.75 flex-col gap-5.25 rounded-lg border border-gray-300 p-4 lg:max-w-100',
+      )}
+    >
+      <div className='scrollbar-hide flex max-h-70.75 flex-col gap-3.25 overflow-y-auto lg:max-h-98.5'>
+        {items?.map((item) => (
+          <div key={item.id} className={cn('flex justify-between')}>
+            <div className={cn('flex items-center gap-2')}>
+              <div className={cn('text-md')}>{item.name}</div>
+              <div className={cn('text-xs font-medium')}>{item.quantity}</div>
+            </div>
+            <div>
+              <div className={cn('text-md')}>{item.price.toLocaleString('ko-KR')}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className={cn('flex justify-between border-t border-gray-300 pt-2.5')}>
+        <div className='flex flex-col gap-1.5 text-sm font-semibold'>
+          <p>총 금액</p>
+          <p>할인 금액</p>
+          <p>결제 금액</p>
+        </div>
+        <div className='text-md flex flex-col gap-1.5 font-semibold'>
+          <div>{itemsTotalAmount?.toLocaleString('ko-KR')}</div>
+          {discountAmount && <div>{discountAmount?.toLocaleString('ko-KR')}</div>}
+          <div>{totalAmount?.toLocaleString('ko-KR')}</div>
+        </div>
+      </div>
+    </div>
+  );
+}