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 = () => {
{orderPendingEmptyMessage}
) : (
<>
- {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 }} // 빠져나가는 상태
>
-
+
);
})}
@@ -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(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 (
<>
-
+
@@ -306,6 +313,7 @@ interface OrderdStockProps {
companyId: number;
orderId: number;
recordType: boolean;
+ index: number;
}
interface CancelConfirmProps {