[Feat] 주문요청 관련 토스트 메시지 구현

- 매수/매도 요청 시 알림 토스트 메시지 구현 (react-toastify 라이브러리 활용)

Issues #17

client/package.json

@@ -24,6 +24,7 @@
     "react-query": "^3.39.3",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",
+    "react-toastify": "^9.1.3",
     "styled-components": "^6.0.7"
   },
   "devDependencies": {

client/src/components/StockOrderSection/StockOrder.tsx

@@ -3,6 +3,7 @@ import { isHoliday } from "@hyunbinseo/holidays-kr";
 import { setStockOrderVolume } from "../../reducer/StockOrderVolume-Reducer";
 import { closeDecisionWindow } from "../../reducer/SetDecisionWindow-Reducer";
 import { styled } from "styled-components";
+import { toast } from "react-toastify";
 import { StateProps } from "../../models/stateProps";
 import useTradeStock from "../../hooks/useTradeStock";
 
@@ -27,6 +28,8 @@ const volumeUnit: string = "주";
 const cancelButtonText: string = "취소";
 const confirmButtonText: string = "확인";
 
+const toastText: string = " 요청이 완료되었습니다";
+
 const StockOrder = ({ corpName }: { corpName: string }) => {
   const dispatch = useDispatch();
   const orderType = useSelector((state: StateProps) => state.stockOrderType);
@@ -58,6 +61,27 @@ const StockOrder = ({ corpName }: { corpName: string }) => {
       console.log("주문 오류 발생");
     }
 
+    toast(
+      <ToastMessage orderType={orderType}>
+        <div className="overview">
+          <img src={dummyImg} />
+          <div className="orderInfo">
+            {corpName} {volume}
+            {volumeUnit}
+          </div>
+        </div>
+        <div>
+          <span className="orderType">✓ {orderTypeText}</span>
+          <span>{toastText}</span>
+        </div>
+      </ToastMessage>,
+      {
+        position: toast.POSITION.BOTTOM_LEFT,
+        // autoClose: 2000,
+        hideProgressBar: true,
+      }
+    );
+
     dispatch(setStockOrderVolume(0));
     handleCloseDecisionWindow();
   };
@@ -304,3 +328,31 @@ const OrderConfirm = styled.div<{ orderType: boolean }>`
     }
   }
 `;
+
+const ToastMessage = styled.div<{ orderType: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+
+  font-size: 14px;
+
+  .overview {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-weight: 700;
+    gap: 6px;
+  }
+
+  & img {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    padding-bottom: 3px;
+  }
+
+  .orderType {
+    color: ${(props) => (!props.orderType ? "#e22926" : "#2679ed")};
+  }
+`;

client/src/main.tsx

@@ -3,6 +3,8 @@ import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import { QueryClientProvider, QueryClient } from "react-query";
 import { Provider } from "react-redux";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import store from "./store/config.ts";
 
 const queryClient = new QueryClient();
@@ -14,5 +16,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
         <App />
       </Provider>
     </QueryClientProvider>
+    <ToastContainer />
   </React.StrictMode>
 );