[Feat] 거래내역 창 전환 시 최근 거래가 바로 보이도록 설정

- 체결/미체결 거래내역 창 전환 시 가장 최근 거래가 바로 보이도록 설정 Issues #17
codestates-seb · Sep 15, 2023 · 0c480e2 · 0c480e2
1 parent 0b5fcc0
commit 0c480e2
Showing 1 changed file with 14 additions and 6 deletions.
diff --git a/client/src/components/StockOrderSection/OrderResult.tsx b/client/src/components/StockOrderSection/OrderResult.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { motion } from "framer-motion";
 import { styled } from "styled-components";
 import { toast } from "react-toastify";
@@ -65,7 +65,7 @@ const OrderResult = () => {
           <div className="emptyIndicator">{orderPendingEmptyMessage}</div>
         ) : (
           <>
-            {orderList.map((stock: OrderRecordProps) => {
+            {orderList.map((stock: OrderRecordProps, index: number) => {
               const orderType = stock.orderTypes === "BUY" ? "매수" : "매도";
               const price = stock.price;
               const volume = stock.stockCount;
@@ -79,7 +79,7 @@ const OrderResult = () => {
                   animate={{ opacity: 1, y: 0 }} // 애니메이션 중인 상태
                   exit={{ opacity: 0, y: -20 }} // 빠져나가는 상태
                 >
-                  <OrderedStock recordType={recordType} orderType={orderType} orderPrice={price} orderVolume={volume} companyId={companyId} orderId={orderId} />
+                  <OrderedStock recordType={recordType} index={index} orderType={orderType} orderPrice={price} orderVolume={volume} companyId={companyId} orderId={orderId} />
                 </motion.div>
               );
             })}
@@ -94,10 +94,11 @@ export default OrderResult;
 
 // 개별 거래내역
 const OrderedStock = (props: OrderdStockProps) => {
-  const { orderType, orderPrice, orderVolume, companyId, orderId, recordType } = props;
+  const { index, orderType, orderPrice, orderVolume, companyId, orderId, recordType } = props;
 
-  const [orderCancle, setOrderCancle] = useState(false);
   const { companyList } = useGetCompanyList();
+  const [orderCancle, setOrderCancle] = useState(false);
+  const ref = useRef<HTMLDivElement | null>(null);
 
   const dummyDate = "2023-09-15"; // dummyData
   const price = orderPrice.toLocaleString();
@@ -111,9 +112,15 @@ const OrderedStock = (props: OrderdStockProps) => {
     setOrderCancle(!orderCancle);
   };
 
+  // 거래내역 창 전환 시 가장 상단이 렌더링 되도록 설정
+  useEffect(() => {
+    ref.current?.focus();
+    ref.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+  }, [orderCancle]);
+
   return (
     <>
-      <StockContainer orderType={orderType}>
+      <StockContainer orderType={orderType} ref={index === 0 ? ref : null}>
         <div className="logoContainer">
           <img className="corpLogo" src={dummyImg} />
         </div>
@@ -306,6 +313,7 @@ interface OrderdStockProps {
   companyId: number;
   orderId: number;
   recordType: boolean;
+  index: number;
 }
 
 interface CancelConfirmProps {