From 36b3bb2ba61d6e6beccbf1e098fdad583fc46a04 Mon Sep 17 00:00:00 2001
From: novice1993 <novice1993@gmail.com>
Date: Mon, 18 Sep 2023 01:57:45 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=EC=A3=BC=EB=AC=B8=20=EC=B2=B4?=
 =?UTF-8?q?=EA=B2=B0=EB=82=B4=EC=97=AD=20=EA=B4=80=EB=A0=A8=20=EA=B1=B0?=
 =?UTF-8?q?=EB=9E=98=EC=8B=9C=EA=B0=84=20=ED=91=9C=EC=8B=9C=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 체결 내역내역 관련 거래 발생시간 정보 표시 (BE API 미구현으로 더미 데이터로 대체하던 부분 기능 구현)

Issues #122
---
 .../StockOrderSection/OrderResult.tsx         | 21 ++++++++++++-------
 client/src/hooks/useGetStockOrderRecord.ts    |  4 ++--
 client/src/models/stockProps.ts               |  1 +
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/client/src/components/StockOrderSection/OrderResult.tsx b/client/src/components/StockOrderSection/OrderResult.tsx
index cb755f54..1b5e7db4 100644
--- a/client/src/components/StockOrderSection/OrderResult.tsx
+++ b/client/src/components/StockOrderSection/OrderResult.tsx
@@ -25,9 +25,6 @@ const OrderResult = () => {
   const orderWaitList = orderRecordData.filter((order: OrderRecordProps) => order.orderStates === "ORDER_WAIT");
   const orderCompleteList = orderRecordData.filter((order: OrderRecordProps) => order.orderStates === "ORDER_COMPLETE");
 
-  // 최근 주문이 상단에 노출되도록 배열 순서 변경
-  // orderWaitList.reverse();
-  // orderCompleteList.reverse();
   const orderList = recordType ? orderCompleteList : orderWaitList;
   const orderListNum = orderList.length;
 
@@ -72,6 +69,16 @@ const OrderResult = () => {
               const companyId = stock.companyId;
               const orderId = stock.stockOrderId;
 
+              // 거래 시간
+              const recordTime = stock.modifiedAt;
+              const orderDate = new Date(recordTime);
+              const year = orderDate.getFullYear();
+              const month = orderDate.getMonth() + 1 < 10 ? `0${orderDate.getMonth() + 1}` : orderDate.getMonth() + 1;
+              const date = orderDate.getDate() < 10 ? `0${orderDate.getDate()}` : orderDate.getDate();
+              const hour = orderDate.getHours() < 10 ? `0${orderDate.getHours()}` : orderDate.getHours();
+              const minute = orderDate.getMinutes() < 10 ? `0${orderDate.getMinutes()}` : orderDate.getMinutes();
+              const orderTime = `${year}-${month}-${date} ${hour}:${minute}`;
+
               return (
                 <motion.div
                   key={orderId}
@@ -79,7 +86,7 @@ const OrderResult = () => {
                   animate={{ opacity: 1, y: 0 }} // 애니메이션 중인 상태
                   exit={{ opacity: 0, y: -20 }} // 빠져나가는 상태
                 >
-                  <OrderedStock index={index} recordType={recordType} orderType={orderType} orderPrice={price} orderVolume={volume} companyId={companyId} orderId={orderId} />
+                  <OrderedStock index={index} recordType={recordType} orderType={orderType} orderPrice={price} orderVolume={volume} orderTime={orderTime} companyId={companyId} orderId={orderId} />
                 </motion.div>
               );
             })}
@@ -94,13 +101,12 @@ export default OrderResult;
 
 // 개별 거래내역
 const OrderedStock = (props: OrderdStockProps) => {
-  const { index, orderType, orderPrice, orderVolume, companyId, orderId, recordType } = props;
+  const { index, orderType, orderPrice, orderVolume, orderTime, companyId, orderId, recordType } = props;
 
   const { companyList } = useGetCompanyList();
   const [orderCancle, setOrderCancle] = useState(false);
   const ref = useRef<HTMLDivElement | null>(null);
 
-  const dummyDate = "2023-09-15"; // dummyData
   const price = orderPrice.toLocaleString();
   const volume = orderVolume.toLocaleString();
   const totalOrderPrice = (orderPrice * orderVolume).toLocaleString();
@@ -145,7 +151,7 @@ const OrderedStock = (props: OrderdStockProps) => {
               <span className="totalPrice">{totalOrderPrice}</span>
               <span className="priceUnit">{priceUnit}</span>
             </div>
-            <div className="orderDate">{dummyDate}</div>
+            <div className="orderDate">{orderTime}</div>
           </div>
         ) : (
           <div className="buttonContainer">
@@ -311,6 +317,7 @@ interface OrderdStockProps {
   orderType: string;
   orderPrice: number;
   orderVolume: number;
+  orderTime: string;
   companyId: number;
   orderId: number;
   recordType: boolean;
diff --git a/client/src/hooks/useGetStockOrderRecord.ts b/client/src/hooks/useGetStockOrderRecord.ts
index 09a0d704..559d7fdb 100644
--- a/client/src/hooks/useGetStockOrderRecord.ts
+++ b/client/src/hooks/useGetStockOrderRecord.ts
@@ -11,10 +11,10 @@ const useGetStockOrderRecord = () => {
   const { data, isLoading, isError } = useQuery("orderRecord", getOrderRecord, {
     enabled: isLogin === 1,
     // 🔴 fetching 점검
-    onSuccess: (data) => {
+    onSuccess: () => {
       console.log(new Date());
       console.log("통신 점검");
-      console.log(data);
+      // console.log(data);
     },
   });
 
diff --git a/client/src/models/stockProps.ts b/client/src/models/stockProps.ts
index 84dc4fb2..04fe67e9 100644
--- a/client/src/models/stockProps.ts
+++ b/client/src/models/stockProps.ts
@@ -27,4 +27,5 @@ export interface OrderRecordProps {
   price: number;
   stockCount: number;
   stockOrderId: number;
+  modifiedAt: string;
 }