[Fix] 주가리스트 관련 스크롤 이벤트 오류 해결

- 주가주문의 주가목록창이 마운트 되면 매수/매도호가 중 정중앙 값이 가운데 위치하도록 이벤트 설정하였으나 실행되지 않는 오류 해결 Issues #17
codestates-seb · Sep 15, 2023 · 2ccaa78 · 2ccaa78
1 parent 0c480e2
commit 2ccaa78
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 58 deletions.
diff --git a/client/src/components/StockOrderSection/OrderResult.tsx b/client/src/components/StockOrderSection/OrderResult.tsx
@@ -20,25 +20,22 @@ const orderPendingEmptyMessage: string = "거래 내역이 없습니다";
 
 const OrderResult = () => {
   const { orderRecordData } = useGetStockOrderRecord();
-  const [recordType, setRecordType] = useState(false);
+  const [recordType, setRecordType] = useState(true);
 
   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;
 
   const handleChangeRecordType = (type: string) => {
-    if (type === "wait") {
-      setRecordType(false);
-    }
-
     if (type === "complete") {
       setRecordType(true);
     }
+
+    if (type === "wait") {
+      setRecordType(false);
+    }
   };
 
   // 거래 발생 유형에 따라 자동으로 거래내역 창 변경
@@ -79,7 +76,7 @@ const OrderResult = () => {
                   animate={{ opacity: 1, y: 0 }} // 애니메이션 중인 상태
                   exit={{ opacity: 0, y: -20 }} // 빠져나가는 상태
                 >
-                  <OrderedStock recordType={recordType} index={index} orderType={orderType} orderPrice={price} orderVolume={volume} companyId={companyId} orderId={orderId} />
+                  <OrderedStock index={index} recordType={recordType} orderType={orderType} orderPrice={price} orderVolume={volume} companyId={companyId} orderId={orderId} />
                 </motion.div>
               );
             })}
@@ -112,11 +109,12 @@ const OrderedStock = (props: OrderdStockProps) => {
     setOrderCancle(!orderCancle);
   };
 
-  // 거래내역 창 전환 시 가장 상단이 렌더링 되도록 설정
   useEffect(() => {
-    ref.current?.focus();
-    ref.current?.scrollIntoView({ behavior: "smooth", block: "center" });
-  }, [orderCancle]);
+    if (index === 0 && ref.current) {
+      ref.current.focus();
+      ref.current.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }, [recordType]);
 
   return (
     <>

diff --git a/client/src/components/StockOrderSection/StockOrder.tsx b/client/src/components/StockOrderSection/StockOrder.tsx
@@ -90,16 +90,18 @@ const StockOrder = ({ corpName }: { corpName: string }) => {
   const today = new Date();
   const nonBusinessDay = isHoliday(today, { include: { saturday: true, sunday: true } }); // 토요일, 일요일, 공휴일 (임시 공휴일 포함)
 
-  // 2) 개장시간 여부 체크
-  const currentHour = today.getHours();
-  const currentMinute = today.getMinutes();
-  const isBefore9AM = currentHour < 9;
-  const isAfter330PM = currentHour > 15 || (currentHour === 15 && currentMinute >= 30);
-  const closingTime = isBefore9AM || isAfter330PM;
+  // 🟢 2) 개장시간 여부 체크
+  // const currentHour = today.getHours();
+  // const currentMinute = today.getMinutes();
+  // const isBefore9AM = currentHour < 9;
+  // const isAfter330PM = currentHour > 15 || (currentHour === 15 && currentMinute >= 30);
+  // const closingTime = isBefore9AM || isAfter330PM;
 
   // 주문 실패 케이스 1) 개장시간  2) 가격/거래량 설정
-  // 🔴 3시 30분 이후 작업 위해 closingTime 조건 해제
-  const orderFailureCase01 = nonBusinessDay;
+  // 🔴 3시 30분 이후 작업 위해 closingTime 조건 해제 + 주말 요건도 해제
+  const orderFailureCase01 = false;
+
+  // 🟢 기존로직
   // const orderFailureCase01 = nonBusinessDay || closingTime;
   const orderFailureCase02 = orderPrice === 0 || orderVolume === 0;
 

diff --git a/client/src/components/StockOrderSection/StockPrice.tsx b/client/src/components/StockOrderSection/StockPrice.tsx
@@ -1,5 +1,3 @@
-import useGetStockData from "../../hooks/useGetStockData";
-import useGetStockInfo from "../../hooks/useGetStockInfo";
 import { useState, useEffect, useRef } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { styled } from "styled-components";
@@ -9,11 +7,7 @@ import { StateProps } from "../../models/stateProps";
 const changeRateUnit = `%`;
 
 const StockPrice = (props: StockPriceProps) => {
-  const { index, price, volume, totalSellingVolume, totalBuyingVolum } = props;
-
-  const companyId = useSelector((state: StateProps) => state.companyId);
-  const { stockPrice, stockPriceLoading, stockPriceError } = useGetStockData(companyId);
-  const { stockInfo } = useGetStockInfo(companyId);
+  const { index, price, volume, changeRate, totalSellingVolume, totalBuyingVolum } = props;
 
   const dispatch = useDispatch();
   const orderPrice = useSelector((state: StateProps) => state.stockOrderPrice);
@@ -23,27 +17,12 @@ const StockPrice = (props: StockPriceProps) => {
     dispatch(setStockOrderPrice(price));
   };
 
-  // 가격 리스트 중 10번째 순서인 요소가 화면 렌더링 시 정중앙에 오도록 설정
   useEffect(() => {
-    if (!stockPriceLoading && !stockPriceError) {
-      ref.current?.focus();
-      ref.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+    if (index === 9 && ref.current) {
+      ref.current.focus();
+      ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
     }
-  }, [stockPrice]);
-
-  if (stockPriceLoading) {
-    return;
-  }
-
-  if (stockPriceError || stockPrice.length === 0) {
-    return;
-  }
-
-  // 전날 종가대비 매도/매수호가 변동률 계산
-  const presentStockPrice = parseInt(stockInfo.stockInfResponseDto.stck_prpr, 10); // 현재가
-  const priceChageAmountComparedYesterday = parseInt(stockInfo.stockInfResponseDto.prdy_vrss, 10); // 전날 종가대비 현재가 가격 차이
-  const yesterDayStockClosingPrice = presentStockPrice - priceChageAmountComparedYesterday; // 잔날종가 = 현재가 - 전날 종가대비 현재가 가격 차이
-  const changeRate = (((price - yesterDayStockClosingPrice) / yesterDayStockClosingPrice) * 100).toFixed(2);
+  }, [ref.current]);
 
   return (
     <Container index={index} ref={index === 9 ? ref : null} price={price} orderPrice={orderPrice} onClick={handleSetOrderPrice}>
@@ -81,6 +60,7 @@ interface StockPriceProps {
   index: number;
   price: number;
   volume: number;
+  changeRate: string;
   totalSellingVolume: number;
   totalBuyingVolum: number;
 }

diff --git a/client/src/components/StockOrderSection/StockPriceList.tsx b/client/src/components/StockOrderSection/StockPriceList.tsx
@@ -11,15 +11,12 @@ const tradingVolumeText: string = "거래량";
 const StockPriceList = () => {
   const companyId = useSelector((state: StateProps) => state.companyId);
   const stockOrderType = useSelector((state: StateProps) => state.stockOrderType);
-  const { stockInfo, stockInfoLoading, stockInfoError } = useGetStockInfo(companyId);
+  const { stockInfo } = useGetStockInfo(companyId);
 
-  if (stockInfoLoading) {
-    return;
-  }
-
-  if (stockInfoError) {
-    return;
-  }
+  // 전날 종가 계산
+  const presentStockPrice = parseInt(stockInfo.stockInfResponseDto.stck_prpr, 10); // 현재가
+  const priceChageAmountComparedYesterday = parseInt(stockInfo.stockInfResponseDto.prdy_vrss, 10); // 전날 종가대비 현재가 가격 차이
+  const yesterDayStockClosingPrice = presentStockPrice - priceChageAmountComparedYesterday; // 잔날종가 = 현재가 - 전날 종가대비 현재가 가격 차이
 
   // 1) 당일 매도/매수호가 및 거래량
   const sellingPrice: PriceProps[] = [];
@@ -81,9 +78,11 @@ const StockPriceList = () => {
         <div className="sellingVolume">{tradingVolumeText}</div>
       </div>
       <PriceList>
-        {sellingAndBuyingPrice.map((item, idx) => (
-          <StockPrice key={item.price} index={idx} price={item.price} volume={item.volume} totalSellingVolume={totalSellingVolume} totalBuyingVolum={totalBuyingVolum} />
-        ))}
+        {sellingAndBuyingPrice.map((item, idx) => {
+          const changeRate = (((item.price - yesterDayStockClosingPrice) / yesterDayStockClosingPrice) * 100).toFixed(2); // 전날 종가대비 주가 변동률
+
+          return <StockPrice key={item.price} index={idx} price={item.price} volume={item.volume} changeRate={changeRate} totalSellingVolume={totalSellingVolume} totalBuyingVolum={totalBuyingVolum} />;
+        })}
       </PriceList>
       <div className="priceIndicator">
         <div className="buyingPrice">{buyingPriceTest}</div>