[Feat] 주문 요청 시 거래내역 창 자동전환 효과 구현

- 주식주문 요청 시 거래유형 (체결, 미체결) 에 따라 관련 목록 보여주는 거래내역창 자동으로 전환되도록 설정
- Ex. 현재 화면에서 체결창을 보여주고 있더라도 미체결 거래가 발생하면 자동으로 미체결 목록창으로 전환

Issues #17

client/src/components/StockOrderSection/OrderResult.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { styled } from "styled-components";
 import useGetStockOrderRecord from "../../hooks/useGetStockOrderRecord";
 import useGetCompanyList from "../../hooks/useGetCompanyList";
@@ -12,8 +12,8 @@ const priceUnit: string = "원";
 const volumeUnit: string = "주";
 const cancelButtonText: string = "주문취소";
 
-const titleText01: string = "미체결 내역";
-const titleText02: string = "체결 내역";
+const titleText01: string = "체결 내역";
+const titleText02: string = "미체결 내역";
 const orderPendingEmptyMessage: string = "거래 내역이 없습니다";
 
 const OrderResult = () => {
@@ -39,13 +39,22 @@ const OrderResult = () => {
     }
   };
 
+  // 거래 발생 유형에 따라 자동으로 거래내역 창 변경
+  useEffect(() => {
+    setRecordType(false);
+  }, [orderWaitList.length]);
+
+  useEffect(() => {
+    setRecordType(true);
+  }, [orderCompleteList.length]);
+
   return (
     <Container recordType={recordType}>
       <div className="titleContainer">
-        <div className="waitTitle" onClick={() => handleChangeRecordType("wait")}>
+        <div className="completeTitle" onClick={() => handleChangeRecordType("complete")}>
           {titleText01}
         </div>
-        <div className="completeTitle" onClick={() => handleChangeRecordType("complete")}>
+        <div className="waitTitle" onClick={() => handleChangeRecordType("wait")}>
           {titleText02}
         </div>
       </div>

client/src/components/StockOrderSection/StockOrder.tsx

@@ -46,7 +46,7 @@ const StockOrder = ({ corpName }: { corpName: string }) => {
   //🔴 주문 관련 테스트
   const orderRequest = useTradeStock();
 
-  const handleStockOrder = () => {
+  const handleOrderConfirm = () => {
     orderRequest.mutate();
     const { isLoading, isError } = orderRequest;
 
@@ -128,7 +128,7 @@ const StockOrder = ({ corpName }: { corpName: string }) => {
                   <button className="cancel" onClick={handleCloseDecisionWindow}>
                     {cancelButtonText}
                   </button>
-                  <button className="confirm" onClick={handleStockOrder}>
+                  <button className="confirm" onClick={handleOrderConfirm}>
                     {confirmButtonText}
                   </button>
                 </div>