From 0c480e276afed15aa642cfa6af5d4084a60d0bbd Mon Sep 17 00:00:00 2001
From: novice1993 <novice1993@gmail.com>
Date: Fri, 15 Sep 2023 14:03:19 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=EA=B1=B0=EB=9E=98=EB=82=B4=EC=97=AD?=
 =?UTF-8?q?=20=EC=B0=BD=20=EC=A0=84=ED=99=98=20=EC=8B=9C=20=EC=B5=9C?=
 =?UTF-8?q?=EA=B7=BC=20=EA=B1=B0=EB=9E=98=EA=B0=80=20=EB=B0=94=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=B4=EC=9D=B4=EB=8F=84=EB=A1=9D=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 체결/미체결 거래내역 창 전환 시 가장 최근 거래가 바로 보이도록 설정

Issues #17
---
 .../StockOrderSection/OrderResult.tsx         | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/client/src/components/StockOrderSection/OrderResult.tsx b/client/src/components/StockOrderSection/OrderResult.tsx
index a74dd639..5d2e8a3a 100644
--- 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 {