[Feat] 주문 체결내역 관련 거래시간 표시 기능 구현

- 체결 내역내역 관련 거래 발생시간 정보 표시 (BE API 미구현으로 더미 데이터로 대체하던 부분 기능 구현) Issues #122
codestates-seb · Sep 17, 2023 · 36b3bb2 · 36b3bb2
1 parent babb745
commit 36b3bb2
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git 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,14 +69,24 @@ 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}
                   initial={{ opacity: 0, y: -20 }} // 초기 상태
                   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
@@ -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
@@ -27,4 +27,5 @@ export interface OrderRecordProps {
   price: number;
   stockCount: number;
   stockOrderId: number;
+  modifiedAt: string;
 }