From 627fc6affb4aee0d1bba85b12b52d00aec4a811c Mon Sep 17 00:00:00 2001
From: novice1993 <novice1993@gmail.com>
Date: Thu, 28 Sep 2023 23:14:12 +0900
Subject: [PATCH] =?UTF-8?q?[Refactor]=20=EC=BD=94=EB=93=9C=20=EB=A6=AC?=
 =?UTF-8?q?=EB=B7=B0=20=EB=82=B4=EC=9A=A9=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PR 관련 코드 리뷰 내용 반영하여 수정
- 이외 수정사항 : MainPage의 로그인/아웃 헤더관련 수정 미완이라 이전 코드 복구하여 임시 활용 (담당자에게 전달 완료함)

Issues #165
---
 .../CentralChart/CompareChartBtn.tsx          |   7 +-
 .../components/CentralChart/CompareList.tsx   |   5 +-
 .../MarketComponents/MarketKospiChart.tsx     |  11 +-
 .../StockOrderSection/CancelConfirm.tsx       |  25 ++--
 .../StockOrderSection/OrderDecisionBtn.tsx    |  11 +-
 .../StockOrderSection/OrderedStock.tsx        |   3 +-
 .../StockOrderSection/PriceSetting.tsx        |  85 ++++++------
 .../StockOrderSection/StockOrder.tsx          |   3 +-
 .../StockOrderSection/StockPrice.tsx          |   2 +-
 .../StockOrderSection/VolumeSetteing.tsx      |   2 +-
 .../StockOrderSection/WaitOrderIndicator.tsx  |   2 +-
 client/src/constant/constant.ts               |   2 +
 client/src/hooks/useCash.ts                   | 125 ++++++++++--------
 client/src/hooks/useGetCash.ts                |   1 -
 client/src/hooks/useGetCompanyList.ts         |   1 -
 client/src/hooks/useGetKospiChart.ts          | 101 --------------
 client/src/hooks/useGetMemberId.ts            |   4 +-
 client/src/hooks/useGetMemberInfo.ts          |   5 +-
 client/src/hooks/useGetStockData.ts           |  20 +--
 client/src/hooks/useGetStockInfo.ts           |  54 +-------
 client/src/hooks/useGetStockOrderRecord.ts    |   6 -
 client/src/hooks/useGetStockholds.ts          |   7 +-
 .../src/hooks/useGetWaitOrderSuccessInfo.ts   |  47 -------
 client/src/page/MainPage.tsx                  |  12 +-
 client/src/utils/setAutoLogoutAlarm.ts        |  14 +-
 25 files changed, 186 insertions(+), 369 deletions(-)
 create mode 100644 client/src/constant/constant.ts
 delete mode 100644 client/src/hooks/useGetKospiChart.ts
 delete mode 100644 client/src/hooks/useGetWaitOrderSuccessInfo.ts

diff --git a/client/src/components/CentralChart/CompareChartBtn.tsx b/client/src/components/CentralChart/CompareChartBtn.tsx
index 335bdc72..328ba751 100644
--- a/client/src/components/CentralChart/CompareChartBtn.tsx
+++ b/client/src/components/CentralChart/CompareChartBtn.tsx
@@ -29,11 +29,8 @@ const CompareChartBtn = () => {
       {compare && (
         <CompareContainer onMouseOver={handleOnCompareList} onMouseLeave={handleOffCompareList}>
           <StockList>
-            {companyList?.map((company) => {
-              const corpName = company.korName;
-              const companyId = company.companyId;
-
-              return <CompareList corpName={corpName} compareCompanyId={companyId} />;
+            {companyList?.map(({ korName, companyId }) => {
+              return <CompareList corpName={korName} compareCompanyId={companyId} />;
             })}
           </StockList>
         </CompareContainer>
diff --git a/client/src/components/CentralChart/CompareList.tsx b/client/src/components/CentralChart/CompareList.tsx
index 4345ab3e..c842fc79 100644
--- a/client/src/components/CentralChart/CompareList.tsx
+++ b/client/src/components/CentralChart/CompareList.tsx
@@ -10,10 +10,9 @@ const CompareList = (props: OwnProps) => {
   const currentCompanyid = useSelector((state: StateProps) => state.companyId);
 
   const handleSelectCompareStock = () => {
-    if (currentCompanyid === compareCompanyId) {
-      return;
+    if (currentCompanyid !== compareCompanyId) {
+      dispatch(setCompareStock(compareCompanyId));
     }
-    dispatch(setCompareStock(compareCompanyId));
   };
 
   return <Contianer onClick={handleSelectCompareStock}>{corpName}</Contianer>;
diff --git a/client/src/components/MarketComponents/MarketKospiChart.tsx b/client/src/components/MarketComponents/MarketKospiChart.tsx
index b13142e2..aa337988 100644
--- a/client/src/components/MarketComponents/MarketKospiChart.tsx
+++ b/client/src/components/MarketComponents/MarketKospiChart.tsx
@@ -2,7 +2,8 @@ import * as echarts from "echarts";
 import { styled } from "styled-components";
 import { useState, useEffect } from "react";
 import { useQuery } from "react-query";
-import { getKospiData } from "../../hooks/useGetKospiChart.ts";
+import axios from "axios";
+
 const MarketkospiChart = () => {
   const [kospiData, setKospiData] = useState([]);
 
@@ -117,6 +118,14 @@ const MarketkospiChart = () => {
 
 export default MarketkospiChart;
 
+const getKospiData = async () => {
+  const res = await axios.get("http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/kospi");
+  const chartData = res.data.output2;
+  const kospiData = chartData.reverse();
+
+  return kospiData;
+};
+
 interface KospiProps {
   acml_tr_pbmn: string;
   acml_vol: string;
diff --git a/client/src/components/StockOrderSection/CancelConfirm.tsx b/client/src/components/StockOrderSection/CancelConfirm.tsx
index c607e544..82aefdf4 100644
--- a/client/src/components/StockOrderSection/CancelConfirm.tsx
+++ b/client/src/components/StockOrderSection/CancelConfirm.tsx
@@ -5,9 +5,12 @@ import { toast } from "react-toastify";
 import { StateProps } from "../../models/stateProps";
 import useDeleteStockOrder from "../../hooks/useDeleteStockOrder";
 import { dummyLogo } from "../../dummy/dummyLogo";
+import { priceUnit, volumeUnit } from "../../constant/constant";
 
-const priceUnit: string = "원";
-const volumeUnit: string = "주";
+const directionType = {
+  Up: "Up",
+  Down: "Down",
+};
 
 const CancelConfirm = (props: CancelConfirmProps) => {
   const { corpName, orderType, orderPrice, orderVolume, orderId, setCancle } = props;
@@ -16,24 +19,22 @@ const CancelConfirm = (props: CancelConfirmProps) => {
   const companyId = useSelector((state: StateProps) => state.companyId);
   const deleteOrder = useDeleteStockOrder();
 
-  const orderCancleText: string = "취소";
+  const cancelText: string = "취소";
   const orderPriceText: string = "주문단가";
   const cancleVolumeText: string = "취소수량";
   const maximumCancleVolumeText01: string = "최대";
-  const maximumCancleVolumeText02: string = "주";
   const totalCancleAmountText: string = "총 취소금액";
   const closeButtonText: string = "닫기";
   const confirmButtonText: string = "확인";
-  const toastText01: string = "취소";
-  const toastText02: string = " 처리가 완료되었습니다";
+  const toastText: string = " 처리가 완료되었습니다";
   const price = orderPrice.toLocaleString();
   const totalPrice = (orderPrice * cancleVolume).toLocaleString();
 
   const handleChangeCancleVolume = (direction: string) => {
-    if (direction === "Up") {
+    if (direction === directionType.Up) {
       cancleVolume < orderVolume && setCancleVolume((previousState) => previousState + 1);
     }
-    if (direction === "Down") {
+    if (direction === directionType.Down) {
       0 < cancleVolume && setCancleVolume((previousState) => previousState - 1);
     }
   };
@@ -83,9 +84,9 @@ const CancelConfirm = (props: CancelConfirmProps) => {
         <div>
           <span className="orderType">
             ✓ {orderType}
-            {toastText01}
+            {cancelText}
           </span>
-          <span>{toastText02}</span>
+          <span>{toastText}</span>
         </div>
       </ToastMessage>,
       {
@@ -104,7 +105,7 @@ const CancelConfirm = (props: CancelConfirmProps) => {
         <div className="orderOverview">
           <span className="corpName">{corpName}</span>
           <span className="orderType">{orderType}</span>
-          <span className="orderCancel">{orderCancleText}</span>
+          <span className="orderCancel">{cancelText}</span>
         </div>
         <div className="orderContent">
           <div className="priceContent">
@@ -119,7 +120,7 @@ const CancelConfirm = (props: CancelConfirmProps) => {
               <span className="maximumCancleVolume">
                 {maximumCancleVolumeText01}
                 <span className="maximumVolumeNum"> {orderVolume} </span>
-                {maximumCancleVolumeText02}
+                {volumeUnit}
               </span>
             </div>
             <VolumeSettingBox>
diff --git a/client/src/components/StockOrderSection/OrderDecisionBtn.tsx b/client/src/components/StockOrderSection/OrderDecisionBtn.tsx
index fd99a706..c0c34487 100644
--- a/client/src/components/StockOrderSection/OrderDecisionBtn.tsx
+++ b/client/src/components/StockOrderSection/OrderDecisionBtn.tsx
@@ -6,11 +6,10 @@ import { StateProps } from "../../models/stateProps";
 import { OrderTypeProps } from "../../models/orderTypeProps";
 import { setStockOrderVolume } from "../../reducer/stockOrderVolume-Reducer";
 import { openDecisionWindow } from "../../reducer/setDecisionWindow-Reducer";
+import { priceUnit } from "../../constant/constant";
 
-const availableMoneyText01: string = "최대";
-const availableMoneyText02: string = "원";
+const availableMoneyText: string = "최대";
 const totalAmountText: string = "주문총액";
-const totalAmountUnit: string = "원";
 
 const OrderDecisionBtn = () => {
   const { cashData } = useGetCash();
@@ -40,14 +39,14 @@ const OrderDecisionBtn = () => {
   return (
     <div className="container">
       <AvailableMoney orderType={orderType}>
-        <span>{availableMoneyText01}</span>
+        <span>{availableMoneyText}</span>
         <span className="availableMoney">{cash}</span>
-        <span>{availableMoneyText02}</span>
+        <span>{priceUnit}</span>
       </AvailableMoney>
       <TotalAmount>
         <div className="totalAmountText">{totalAmountText}</div>
         <div className="totalAmount">{totalOrderAmout.toLocaleString()}</div>
-        <div>{totalAmountUnit}</div>
+        <div>{priceUnit}</div>
       </TotalAmount>
       <OrderBtn ordertype={orderType} onClick={handleOpenDecisionWindow}>
         {orderBtnText}
diff --git a/client/src/components/StockOrderSection/OrderedStock.tsx b/client/src/components/StockOrderSection/OrderedStock.tsx
index 32b3fb93..5a691c04 100644
--- a/client/src/components/StockOrderSection/OrderedStock.tsx
+++ b/client/src/components/StockOrderSection/OrderedStock.tsx
@@ -3,9 +3,8 @@ import { styled } from "styled-components";
 import useGetCompanyList from "../../hooks/useGetCompanyList";
 import CancelConfirm from "./CancelConfirm";
 import { dummyLogo } from "../../dummy/dummyLogo";
+import { priceUnit, volumeUnit } from "../../constant/constant";
 
-const priceUnit: string = "원";
-const volumeUnit: string = "주";
 const cancelButtonText: string = "주문취소";
 
 const OrderedStock = (props: OrderdStockProps) => {
diff --git a/client/src/components/StockOrderSection/PriceSetting.tsx b/client/src/components/StockOrderSection/PriceSetting.tsx
index d99423e3..0c43d294 100644
--- a/client/src/components/StockOrderSection/PriceSetting.tsx
+++ b/client/src/components/StockOrderSection/PriceSetting.tsx
@@ -4,10 +4,9 @@ import { styled } from "styled-components";
 import { setStockOrderPrice, plusStockOrderPrice, minusStockOrderPrice } from "../../reducer/stockOrderPrice-Reducer";
 import { StateProps } from "../../models/stateProps";
 import { StockInfoProps } from "../../models/stockInfoProps";
+import { priceUnit } from "../../constant/constant";
 
 const priceSettingTitle: string = "가격";
-const unitText: string = "원";
-
 const noVolumeNotification: string = " [거래량 없음] 주문 시 대기 처리 됩니다";
 const existVolumeNotification: string = " [거래량 있음] 주문 시 체결 처리 됩니다";
 
@@ -16,50 +15,22 @@ const PriceSetting = (props: OwnProps) => {
 
   const dispatch = useDispatch();
   const orderPrice = useSelector((state: StateProps) => state.stockOrderPrice);
-
-  // 가격 조정 관련 타이머 상태
-  const [priceChangeTimer, setPriceChangeTimer] = useState<NodeJS.Timeout | null>(null);
-
-  // 초기 설정값 및 가격 변동폭 설정
-  const { askp1, askp2, askp3, askp4, askp5, askp6, askp7, askp8, askp9, askp10 } = stockInfo;
-  const sellingInfo = [askp1, askp2, askp3, askp4, askp5, askp6, askp7, askp8, askp9, askp10];
-  const sellingPrice = sellingInfo.map((price) => parseInt(price));
-  const existSellingPrice = sellingPrice.filter((price) => price !== 0); // price 0인 경우 제거
-  const defaultPrice = existSellingPrice[0];
-  const priceInterval = existSellingPrice[1] - existSellingPrice[0];
-
   const orderType = useSelector((state: StateProps) => state.stockOrderType);
   const [orderPossibility, setOrderPossibility] = useState(true);
+  const [priceChangeTimer, setPriceChangeTimer] = useState<NodeJS.Timeout | null>(null);
 
+  // 매도/매수호가 정리
+  const { askp1, askp2, askp3, askp4, askp5, askp6, askp7, askp8, askp9, askp10 } = stockInfo;
   const { bidp1, bidp2, bidp3, bidp4, bidp5, bidp6, bidp7, bidp8, bidp9, bidp10 } = stockInfo;
-  const buyingInfo = [bidp1, bidp2, bidp3, bidp4, bidp5, bidp6, bidp7, bidp8, bidp9, bidp10];
-  const buyingPrice = buyingInfo.map((price) => parseInt(price));
-  const existBuyingPrice = buyingPrice.filter((price) => price !== 0); // price 0인 경우 제거
+  const sellingPrice = [askp1, askp2, askp3, askp4, askp5, askp6, askp7, askp8, askp9, askp10].map((price) => parseInt(price));
+  const buyingPrice = [bidp1, bidp2, bidp3, bidp4, bidp5, bidp6, bidp7, bidp8, bidp9, bidp10].map((price) => parseInt(price));
+  const existSellingPrice = sellingPrice.filter((price) => price !== 0);
+  const existBuyingPrice = buyingPrice.filter((price) => price !== 0);
 
-  // 거래 가능여부 판별 함수
-  const handleCheckTradePossibility = () => {
-    if (orderType) {
-      // 매수 주문
-      if (orderPrice !== 0 && !existBuyingPrice.includes(orderPrice)) {
-        setOrderPossibility(false);
-      } else {
-        setOrderPossibility(true);
-      }
-    } else {
-      // 매도 주문
-      if (orderPrice !== 0 && !existSellingPrice.includes(orderPrice)) {
-        setOrderPossibility(false);
-      } else {
-        setOrderPossibility(true);
-      }
-    }
-  };
-
-  useEffect(() => {
-    handleCheckTradePossibility();
-  }, [orderPrice, orderType]);
+  // 호가 간 가격 차
+  const priceInterval = existSellingPrice[1] - existSellingPrice[0];
 
-  // 거래가 증가/감소
+  // 거래가 변경 시
   const handlePlusOrderPrice = () => {
     dispatch(plusStockOrderPrice(priceInterval));
   };
@@ -68,7 +39,6 @@ const PriceSetting = (props: OwnProps) => {
     dispatch(minusStockOrderPrice(priceInterval));
   };
 
-  // 위-아래 방향키 입력 시
   const handleInputArrowBtn = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.code === "ArrowUp") {
       handlePlusOrderPrice();
@@ -77,7 +47,6 @@ const PriceSetting = (props: OwnProps) => {
     }
   };
 
-  // 거래가 직접 기입 시
   const handleWriteOrderPrice = (event: React.ChangeEvent<HTMLInputElement>) => {
     const inputPrice = event.target.value;
     const numberInputPrice = parseInt(inputPrice, 10);
@@ -92,7 +61,7 @@ const PriceSetting = (props: OwnProps) => {
 
     // priceInterval로 나누어 떨어지지 않는 값을 기입 시 -> 0.8초 후에 나누어 떨어지는 값으로 변경
     if (priceChangeTimer !== null) {
-      clearTimeout(priceChangeTimer);
+      clearTimeout(priceChangeTimer); // 이전 입력으로 인한 비동기 작업 존재할 시 -> 제거
     }
 
     dispatch(setStockOrderPrice(numberInputPrice));
@@ -108,9 +77,33 @@ const PriceSetting = (props: OwnProps) => {
     }
   };
 
-  // 종목이 달리지면 -> 가격도 변경
+  // 거래 가능여부 판별 함수 (거래량 유무에 따라)
+  const handleCheckTradePossibility = () => {
+    if (orderType) {
+      // 매수
+      if (orderPrice !== 0 && !existBuyingPrice.includes(orderPrice)) {
+        setOrderPossibility(false);
+      } else {
+        setOrderPossibility(true);
+      }
+    }
+
+    if (!orderType) {
+      // 메도
+      if (orderPrice !== 0 && !existSellingPrice.includes(orderPrice)) {
+        setOrderPossibility(false);
+      } else {
+        setOrderPossibility(true);
+      }
+    }
+  };
+
+  useEffect(() => {
+    handleCheckTradePossibility();
+  }, [orderPrice, orderType]);
+
   useEffect(() => {
-    dispatch(setStockOrderPrice(defaultPrice));
+    dispatch(setStockOrderPrice(existSellingPrice[0]));
   }, [companyId]);
 
   return (
@@ -120,7 +113,7 @@ const PriceSetting = (props: OwnProps) => {
       </div>
       <div className="PriceSettingBox">
         <PriceController defaultValue={orderPrice} value={orderPrice} onChange={handleWriteOrderPrice} onKeyDown={handleInputArrowBtn} onFocus={handleCheckTradePossibility} />
-        <UnitContent>{unitText}</UnitContent>
+        <UnitContent>{priceUnit}</UnitContent>
         <div className="DirectionBox">
           <button className="PriceUp" onClick={handlePlusOrderPrice}>
             &#8896;
diff --git a/client/src/components/StockOrderSection/StockOrder.tsx b/client/src/components/StockOrderSection/StockOrder.tsx
index b729b58e..1f7411b5 100644
--- a/client/src/components/StockOrderSection/StockOrder.tsx
+++ b/client/src/components/StockOrderSection/StockOrder.tsx
@@ -7,6 +7,7 @@ import { toast } from "react-toastify";
 import { StateProps } from "../../models/stateProps";
 import useTradeStock from "../../hooks/useTradeStock";
 import { dummyLogo } from "../../dummy/dummyLogo";
+import { priceUnit, volumeUnit } from "../../constant/constant";
 
 import StockPriceList from "./StockPriceList";
 import StockOrderSetting from "./StockOrderSetting";
@@ -21,8 +22,6 @@ const orderFailureButtonText: string = "확인";
 const orderPriceText: string = "주문단가";
 const orderVolumeText: string = "주문수량";
 const totalOrderAmountText: string = "총 주문금액";
-const priceUnit: string = "원";
-const volumeUnit: string = "주";
 const cancelButtonText: string = "취소";
 const confirmButtonText: string = "확인";
 
diff --git a/client/src/components/StockOrderSection/StockPrice.tsx b/client/src/components/StockOrderSection/StockPrice.tsx
index b8015a3e..e6083038 100644
--- a/client/src/components/StockOrderSection/StockPrice.tsx
+++ b/client/src/components/StockOrderSection/StockPrice.tsx
@@ -43,7 +43,7 @@ const StockPrice = (props: StockPriceProps) => {
 
 export default StockPrice;
 
-// 전체 매도/도수 거래량 대비 개별가격 매도/매수 거래량 비율
+// 전체 거래량 대비 개별가격 거래량 비율
 const VolumePercentge = (props: { index: number; volume: number; upperPriceVolumeSum: number; lowerPriceVolumeSum: number }) => {
   const { index, volume, upperPriceVolumeSum, lowerPriceVolumeSum } = props;
   const [width, setWidth] = useState(0);
diff --git a/client/src/components/StockOrderSection/VolumeSetteing.tsx b/client/src/components/StockOrderSection/VolumeSetteing.tsx
index 71853fd8..87caf80a 100644
--- a/client/src/components/StockOrderSection/VolumeSetteing.tsx
+++ b/client/src/components/StockOrderSection/VolumeSetteing.tsx
@@ -6,10 +6,10 @@ import useGetHoldingStock from "../../hooks/useGetHoldingStock";
 import { StateProps } from "../../models/stateProps";
 import { HoldingStockProps } from "../../models/stockProps";
 import { setStockOrderVolume, plusStockOrderVolume, minusStockOrderVolume } from "../../reducer/stockOrderVolume-Reducer";
+import { volumeUnit } from "../../constant/constant";
 
 const volumeSettingTitle: string = "수량";
 const maximumVolumeText01: string = "최대";
-const volumeUnit: string = "주";
 
 const volumPercentage01: number = 10;
 const volumPercentage02: number = 25;
diff --git a/client/src/components/StockOrderSection/WaitOrderIndicator.tsx b/client/src/components/StockOrderSection/WaitOrderIndicator.tsx
index 74e7daf2..aa00defd 100644
--- a/client/src/components/StockOrderSection/WaitOrderIndicator.tsx
+++ b/client/src/components/StockOrderSection/WaitOrderIndicator.tsx
@@ -4,11 +4,11 @@ import { useState, useEffect } from "react";
 import useGetMemberId from "../../hooks/useGetMemberId";
 import * as Webstomp from "webstomp-client";
 import { dummyLogo } from "../../dummy/dummyLogo";
+import { volumeUnit } from "../../constant/constant";
 
 const url = "ws://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/ws";
 const corpName = ["삼성전자", "POSCO홀딩스", "셀트리온", "에코프로", "에코프로비엠", "디와이", "쿠쿠홀딩스", "카카오뱅크", "한세엠케이", "KG케마칼", "LG화학", "현대차", "LG전자", "기아"];
 
-const volumeUnit = "주";
 const toastText01: string = "미체결";
 const toastText02: string = " 체결 처리 되었습니다";
 
diff --git a/client/src/constant/constant.ts b/client/src/constant/constant.ts
new file mode 100644
index 00000000..6cb36687
--- /dev/null
+++ b/client/src/constant/constant.ts
@@ -0,0 +1,2 @@
+export const priceUnit: string = "원";
+export const volumeUnit: string = "주";
diff --git a/client/src/hooks/useCash.ts b/client/src/hooks/useCash.ts
index a2ad2ea4..46f03ba3 100644
--- a/client/src/hooks/useCash.ts
+++ b/client/src/hooks/useCash.ts
@@ -1,70 +1,85 @@
-import { useQuery, useMutation } from 'react-query';
-import axios from 'axios';
-import { useDispatch } from 'react-redux';
-import { setCashId, setMoney } from '../reducer/cash/cashSlice';
-import { useSelector } from 'react-redux';
-import { RootState } from '../store/config';
+import { useQuery, useMutation } from "react-query";
+import axios from "axios";
+import { useDispatch } from "react-redux";
+import { setCashId, setMoney } from "../reducer/cash/cashSlice";
+import { useSelector } from "react-redux";
+import { RootState } from "../store/config";
 
-const BASE_URL = 'http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080';
+const BASE_URL = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080";
 
 const getAuthHeader = () => {
-    const accessToken = sessionStorage.getItem('accessToken');
-    return {
-        'Authorization': `${accessToken}`
-    };
+  const accessToken = sessionStorage.getItem("accessToken");
+  return {
+    Authorization: `${accessToken}`,
+  };
 };
 
 export const useCreateCash = () => {
-    const dispatch = useDispatch();
-    return useMutation((initialAmount: string) => axios.post(`${BASE_URL}/cash`, { "money": initialAmount }, {
-        headers: getAuthHeader()
-    }), {
-        onSuccess: (res) => {
-            dispatch(setCashId(res.data.cashId));
-            dispatch(setMoney(res.data.money));
-        },
-        onError: (error) => {
-            console.error(error);
+  const dispatch = useDispatch();
+  return useMutation(
+    (initialAmount: string) =>
+      axios.post(
+        `${BASE_URL}/cash`,
+        { money: initialAmount },
+        {
+          headers: getAuthHeader(),
         }
-    });
+      ),
+    {
+      onSuccess: (res) => {
+        dispatch(setCashId(res.data.cashId));
+        dispatch(setMoney(res.data.money));
+      },
+      onError: (error) => {
+        console.error(error);
+      },
+    }
+  );
 };
 
 export const useGetCash = () => {
-    const dispatch = useDispatch();
-    const queryFn = () => {
-        return axios.get(`${BASE_URL}/cash`, {
-            headers: getAuthHeader()
-        });
-    };
-
-    return useQuery('money', queryFn, {
-        onSuccess: (res) => {
-            dispatch(setCashId(res.data.cashId));
-            dispatch(setMoney(res.data.money));
-        },
-        onError: (error) => {
-            console.error(error);
-        },
-        refetchInterval: false,
-        retry: false,
-        staleTime: 1000 * 60 * 5
+  const dispatch = useDispatch();
+  const queryFn = () => {
+    return axios.get(`${BASE_URL}/cash`, {
+      headers: getAuthHeader(),
     });
-}
+  };
+
+  return useQuery("money", queryFn, {
+    onSuccess: (res) => {
+      dispatch(setCashId(res.data.cashId));
+      dispatch(setMoney(res.data.money));
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+    refetchInterval: false,
+    retry: false,
+    staleTime: 1000 * 60 * 5,
+  });
+};
 
 export const useResetCash = () => {
-    const cashId = useSelector((state: RootState) => state.cash.cashId);
-    const dispatch = useDispatch();
+  const cashId = useSelector((state: RootState) => state.cash.cashId);
+  const dispatch = useDispatch();
 
-    return useMutation((data: { money: string }) => axios.patch(`${BASE_URL}/cash/${cashId}`, { "money": data.money }, {
-        headers: getAuthHeader()
-    }), {
-        onSuccess: (data) => {
-            dispatch(setCashId(data.data.cashId));
-            dispatch(setMoney(data.data.money));
-        },
-        onError: (error) => {
-            console.error(error);
+  return useMutation(
+    (data: { money: string }) =>
+      axios.patch(
+        `${BASE_URL}/cash/${cashId}`,
+        { money: data.money },
+        {
+          headers: getAuthHeader(),
         }
-    });
-}
-
+      ),
+    {
+      onSuccess: (data) => {
+        dispatch(setCashId(data.data.cashId));
+        dispatch(setMoney(data.data.money));
+      },
+      onError: (error) => {
+        console.error(error);
+      },
+    }
+  );
+};
diff --git a/client/src/hooks/useGetCash.ts b/client/src/hooks/useGetCash.ts
index ab33285b..833381c0 100644
--- a/client/src/hooks/useGetCash.ts
+++ b/client/src/hooks/useGetCash.ts
@@ -3,7 +3,6 @@ import { useSelector } from "react-redux";
 import axios from "axios";
 import { StateProps } from "../models/stateProps";
 
-// 🔴 API 수정 전으로 임시 파라미터 설정해놓음
 const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/cash";
 
 const useGetCash = () => {
diff --git a/client/src/hooks/useGetCompanyList.ts b/client/src/hooks/useGetCompanyList.ts
index d8e16599..acc66b99 100644
--- a/client/src/hooks/useGetCompanyList.ts
+++ b/client/src/hooks/useGetCompanyList.ts
@@ -9,7 +9,6 @@ const useGetCompanyList = () => {
 
 export default useGetCompanyList;
 
-// 서버에서 Company 목록 fetch 하는 함수
 const getCompanyList = async () => {
   const res = await axios.get("http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/companies");
   const companyList = await res.data;
diff --git a/client/src/hooks/useGetKospiChart.ts b/client/src/hooks/useGetKospiChart.ts
deleted file mode 100644
index 39a5f025..00000000
--- a/client/src/hooks/useGetKospiChart.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { useState, useEffect } from "react";
-import { useQuery } from "react-query";
-import axios from "axios";
-
-const useGetKospiChart = () => {
-  const [kospiData, setKospiData] = useState([]);
-
-  const { data, isLoading, error } = useQuery("kospi", getKospiData, {});
-
-  useEffect(() => {
-    if (data) {
-      setKospiData(data);
-    }
-  }, [data]);
-
-  const options = {
-    xAxis: {
-      type: "category",
-      data: kospiData.map((kospi: KospiProps) => {
-        const year = kospi.stck_bsop_date.slice(0, 4);
-        const month = kospi.stck_bsop_date.slice(4, 6);
-        const period = `${year}년 ${month}월`;
-        return period;
-      }),
-    },
-    yAxis: [
-      {
-        type: "value",
-        position: "right",
-        interval: 50,
-        min: 2000,
-        splitLine: {
-          show: false,
-        },
-      },
-    ],
-    dataZoom: [
-      {
-        type: "inside",
-      },
-    ],
-    tooltip: {
-      trigger: "axis",
-      axisPointer: {
-        type: "cross",
-      },
-    },
-    series: [
-      {
-        name: "코스피 지수",
-        type: "candlestick",
-        data: kospiData.map((kospi: KospiProps) => {
-          return [
-            kospi.bstp_nmix_oprc,
-            kospi.bstp_nmix_prpr,
-            kospi.bstp_nmix_lwpr,
-            kospi.bstp_nmix_hgpr,
-          ];
-        }),
-        yAxisIndex: 0,
-      },
-    ],
-    grid: {
-      left: "3%",
-      right: "7%",
-      top: "3%",
-      bottom: "5%",
-    },
-  };
-
-  const chartStyle = {
-    width: "100%",
-    height: "100%",
-  };
-
-  return { kospiLoading: isLoading, kospiError: error, options, chartStyle };
-};
-
-export default useGetKospiChart;
-
-// kospi 차트 데이터 fetch 로직
-export const getKospiData = async () => {
-  const res = await axios.get(
-    "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/kospi"
-  );
-  const chartData = res.data.output2;
-  const kospiData = chartData.reverse();
-
-  return kospiData;
-};
-
-interface KospiProps {
-  acml_tr_pbmn: string;
-  acml_vol: string;
-  bstp_nmix_hgpr: string;
-  bstp_nmix_lwpr: string;
-  bstp_nmix_oprc: string;
-  bstp_nmix_prpr: string;
-  mod_yn: string;
-  stck_bsop_date: string;
-}
diff --git a/client/src/hooks/useGetMemberId.ts b/client/src/hooks/useGetMemberId.ts
index 8751729c..e18b7902 100644
--- a/client/src/hooks/useGetMemberId.ts
+++ b/client/src/hooks/useGetMemberId.ts
@@ -7,8 +7,10 @@ const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080
 
 const useGetMemberId = () => {
   const login = useSelector((state: StateProps) => state.login);
+  const isLogin = login === 1;
+
   const { data, isLoading, isError } = useQuery("memberId", getMemberId, {
-    enabled: login === 1,
+    enabled: isLogin,
   });
 
   return { memberId: data, memberIdLoading: isLoading, memberIdError: isError };
diff --git a/client/src/hooks/useGetMemberInfo.ts b/client/src/hooks/useGetMemberInfo.ts
index 34047119..511bd51c 100644
--- a/client/src/hooks/useGetMemberInfo.ts
+++ b/client/src/hooks/useGetMemberInfo.ts
@@ -2,13 +2,12 @@ import { useQuery } from "react-query";
 import axios from "axios";
 
 export function useGetMemberInfo() {
-
   return useQuery(["member"], async () => {
-    const accessToken = sessionStorage.getItem("accessToken"); // 로컬 스토리지에서 AuthToken 가져오기
+    const accessToken = sessionStorage.getItem("accessToken");
 
     const response = await axios.get(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/members`, {
       headers: {
-        Authorization: `${accessToken}`, // 헤더에 토큰 추가
+        Authorization: `${accessToken}`,
       },
     });
 
diff --git a/client/src/hooks/useGetStockData.ts b/client/src/hooks/useGetStockData.ts
index 5b158090..75aa609d 100644
--- a/client/src/hooks/useGetStockData.ts
+++ b/client/src/hooks/useGetStockData.ts
@@ -3,8 +3,9 @@ import { useState, useEffect } from "react";
 import { useQuery, useQueryClient } from "react-query";
 import axios from "axios";
 
+const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/companies/charts/";
+
 const useGetStockData = (companyId: number) => {
-  // 🟢 기존 로직
   const [autoRefetch, setAutoRefetch] = useState(false);
   const queryClient = useQueryClient();
 
@@ -16,21 +17,20 @@ const useGetStockData = (companyId: number) => {
 
   // 1) 주말, 공휴일 여부 체크
   const today = new Date();
-  const nonBusinessDay = isHoliday(today, { include: { saturday: true, sunday: true } }); // 토요일, 일요일, 공휴일 (임시 공휴일 포함)
+  const isBusinessDay = !isHoliday(today, { include: { saturday: true, sunday: true } }); // 토요일, 일요일, 공휴일 (임시 공휴일 포함)
 
-  // 🟢 2) 개장시간 여부 체크
+  // 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;
+  const marketOpenTime = !isBefore9AM || !isAfter330PM;
 
-  // 🟢 기존로직
-  const notRenwalTime = nonBusinessDay || closingTime;
+  const dataRenewalTime = isBusinessDay || marketOpenTime;
 
   // 개장 시간 이내일 경우, 현재 시각이 30분, 정각이 아닌 경우 남은 시간 계산하여 checkTime 함수 다시 실행
   useEffect(() => {
-    if (!notRenwalTime) {
+    if (dataRenewalTime) {
       if (minute === 0 || minute === 30) {
         setAutoRefetch(true);
       } else if (0 < minute && minute < 30) {
@@ -51,8 +51,9 @@ const useGetStockData = (companyId: number) => {
 
   const { data, isLoading, error, refetch } = useQuery(`chartData${companyId} ${queryKey}`, () => getChartData(companyId), {
     enabled: true,
-    refetchInterval: autoRefetch && !notRenwalTime ? 60000 * 30 : false, // 정각 혹은 30분에 맞춰서 30분 마다 데이터 리패칭
+    refetchInterval: autoRefetch && dataRenewalTime ? 60000 * 30 : false, // 정각 혹은 30분에 맞춰서 30분 마다 데이터 리패칭
     onSuccess: () => {
+      queryClient.invalidateQueries("stockInfo");
       queryClient.invalidateQueries("cash");
       queryClient.invalidateQueries("holdingStock");
       queryClient.invalidateQueries("orderRecord");
@@ -64,8 +65,7 @@ const useGetStockData = (companyId: number) => {
 
 export default useGetStockData;
 
-// 차트 데이터 받아오는 fetch 로직
 const getChartData = async (companyId: number) => {
-  const res = await axios.get(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/companies/charts/${companyId}`);
+  const res = await axios.get(`${url}${companyId}`);
   return res.data;
 };
diff --git a/client/src/hooks/useGetStockInfo.ts b/client/src/hooks/useGetStockInfo.ts
index 8d4364c9..0dc63686 100644
--- a/client/src/hooks/useGetStockInfo.ts
+++ b/client/src/hooks/useGetStockInfo.ts
@@ -1,56 +1,10 @@
-import { isHoliday } from "@hyunbinseo/holidays-kr";
-import { useState, useEffect } from "react";
 import { useQuery } from "react-query";
 import axios from "axios";
 
-const useGetStockInfo = (companyId: number) => {
-  const [autoRefetch, setAutoRefetch] = useState(false);
-
-  // 시간대 (timeZone) 별로 queryKey를 다르게 설정해서, 서버 데이터가 동일할 때는 캐싱된 데이터 활용하고 서버 데이터가 갱신됐을 때는 새롭게 받아옴 (서버 데이터 30분마다 갱신)
-  const currentTime = new Date();
-  const [month, day, hour, minute] = [currentTime.getMonth(), currentTime.getDate(), currentTime.getHours(), currentTime.getMinutes()];
-  const timeZone = minute === 0 || minute === 30 ? "30 or 60" : 0 < minute && minute < 30 ? "1~29" : "31~59";
-  const queryKey = `${month}월 ${day}일 ${hour}시 ${timeZone}`;
-
-  // 1) 주말, 공휴일 여부 체크
-  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;
+const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/companies/";
 
-  // 🟢 기존로직
-  const notRenwalTime = nonBusinessDay || closingTime;
-
-  // 개장 시간 이내일 경우, 현재 시각이 30분, 정각이 아닌 경우 남은 시간 계산하여 checkTime 함수 다시 실행
-  useEffect(() => {
-    if (!notRenwalTime) {
-      if (minute === 0 || minute === 30) {
-        setAutoRefetch(true);
-      } else if (0 < minute && minute < 30) {
-        const delayTime = (30 - minute) * 60000;
-        setTimeout(() => {
-          refetch();
-          setAutoRefetch(true);
-        }, delayTime);
-      } else if (30 < minute && minute < 60) {
-        const delayTime = (60 - minute) * 60000;
-        setTimeout(() => {
-          refetch();
-          setAutoRefetch(true);
-        }, delayTime);
-      }
-    }
-  }, []);
-
-  const { data, isLoading, error, refetch } = useQuery(`stockInfo${companyId} ${queryKey}}`, () => getStockInfo(companyId), {
-    enabled: true,
-    refetchInterval: autoRefetch && !notRenwalTime ? 60000 * 30 : false, // 정각 혹은 30분에 맞춰서 30분 마다 데이터 리패칭
-  });
+const useGetStockInfo = (companyId: number) => {
+  const { data, isLoading, error } = useQuery(`stockInfo`, () => getStockInfo(companyId), {});
 
   return { stockInfo: data, stockInfoLoading: isLoading, stockInfoError: error };
 };
@@ -58,7 +12,7 @@ const useGetStockInfo = (companyId: number) => {
 const getStockInfo = async (companyId: number) => {
   // 최초 마운트 시 비교차트 호출되지 않도록 설정
   if (companyId !== null) {
-    const res = await axios.get(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/companies/${companyId}`);
+    const res = await axios.get(`${url}${companyId}`);
     const stockInfo = res.data;
     return stockInfo;
   }
diff --git a/client/src/hooks/useGetStockOrderRecord.ts b/client/src/hooks/useGetStockOrderRecord.ts
index 8cebe813..a8a263ac 100644
--- a/client/src/hooks/useGetStockOrderRecord.ts
+++ b/client/src/hooks/useGetStockOrderRecord.ts
@@ -10,12 +10,6 @@ const useGetStockOrderRecord = () => {
 
   const { data, isLoading, isError } = useQuery("orderRecord", getOrderRecord, {
     enabled: isLogin === 1,
-    // 🔴 fetching 점검
-    // onSuccess: () => {
-    //   console.log(new Date());
-    //   console.log("통신 점검");
-    //   // console.log(data);
-    // },
   });
 
   return { orderRecordData: data, orderRecordLoading: isLoading, orderRecordError: isError };
diff --git a/client/src/hooks/useGetStockholds.ts b/client/src/hooks/useGetStockholds.ts
index 0b5f6a40..58a47469 100644
--- a/client/src/hooks/useGetStockholds.ts
+++ b/client/src/hooks/useGetStockholds.ts
@@ -9,13 +9,12 @@ const useGetStockHolds = () => {
 
 export default useGetStockHolds;
 
-// 서버에서 StockHolds 목록 fetch 하는 함수
 const getStockHolds = async () => {
-  const accessToken = sessionStorage.getItem('accessToken');  // 로컬 스토리지에서 토큰 가져오기
+  const accessToken = sessionStorage.getItem("accessToken");
   const res = await axios.get("http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/stock/stockholds", {
     headers: {
-      'Authorization': accessToken
-    }
+      Authorization: accessToken,
+    },
   });
   const stockHoldsList = await res.data;
 
diff --git a/client/src/hooks/useGetWaitOrderSuccessInfo.ts b/client/src/hooks/useGetWaitOrderSuccessInfo.ts
deleted file mode 100644
index fb51da17..00000000
--- a/client/src/hooks/useGetWaitOrderSuccessInfo.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useQuery, useQueryClient } from "react-query";
-import axios from "axios";
-
-const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/long-polling/listen";
-
-const useGetWaitOrderSuccessInfo = () => {
-  const queryClient = useQueryClient();
-
-  const { data, isLoading, isError, refetch } = useQuery("waitOrderSuccess", getWaitOrderSuccessInfo, {
-    enabled: true,
-    onSuccess: (data) => {
-      console.log(new Date());
-      console.log("미체결 거래 알림 성공");
-
-      queryClient.invalidateQueries("cash");
-      queryClient.invalidateQueries("holdingStock");
-      queryClient.invalidateQueries("orderRecord");
-
-      console.log(data);
-      refetch();
-      console.log("미체결 거래알림 재시작");
-    },
-    onError: () => {
-      console.log("미체결 거래 알림 재요청");
-      refetch();
-    },
-  });
-
-  return { waitOrderSuccessData: data, waitOrderSuccessLoading: isLoading, waitOrderSuccessError: isError };
-};
-
-export default useGetWaitOrderSuccessInfo;
-
-const getWaitOrderSuccessInfo = async () => {
-  console.log("미체결 주문 처리대기 실행");
-  const accessToken = sessionStorage.getItem("accessToken");
-  const options = {
-    headers: {
-      Authorization: `${accessToken}`,
-      "Content-Type": "application/json",
-    },
-  };
-
-  const response = await axios.get(url, options);
-  const orderInfo = await response.data;
-  return orderInfo;
-};
diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx
index ed08e6a9..8bdaf6f7 100644
--- a/client/src/page/MainPage.tsx
+++ b/client/src/page/MainPage.tsx
@@ -2,7 +2,9 @@ import { useState, useEffect, useCallback } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import styled from "styled-components";
 
-import Header from "../components/Headers/Index";
+// import Header from "../components/Headers/Index";
+import LogoutHeader from "../components/Headers/LogoutHeader";
+import LoginHeader from "../components/Headers/LoginHeader";
 
 import OAuthLoginModal from "../components/Logins/OAuthLogin";
 import EmailLoginModal from "../components/Logins/EmailLogin";
@@ -38,6 +40,7 @@ const MainPage = () => {
   const [userEmail, setUserEmail] = useState("");
   const [isWelcomeModalOpen, setWelcomeModalOpen] = useState(false);
   const [isProfileModalOpen, setProfileModalOpen] = useState(false); //프로필 모달 보이기/숨기기
+  const isLogin = useSelector((state: StateProps) => state.login);
 
   const dispatch = useDispatch();
 
@@ -129,7 +132,6 @@ const MainPage = () => {
     setSelectedMenu(menu);
   };
 
-  // 🔴 자동 로그아웃 관련 코드 -> 정리 필요
   useEffect(() => {
     const acessToken = sessionStorage.getItem("accessToken");
     if (acessToken !== null) {
@@ -137,18 +139,15 @@ const MainPage = () => {
 
       const currentTime = Date.now();
 
-      // 로그인 알람 설정한 시간 (세선 스토리지에 저장 되어있음)
       const autoLogoutSecondAlarm = sessionStorage.getItem("autoLogoutSecondAlarm");
       const autoLogoutLastAlarm = sessionStorage.getItem("autoLogoutLastAlarm");
 
       if (autoLogoutSecondAlarm !== null) {
-        // 3) 비동기 설정 시간 - 새로고침 전까지 지나간 시간
         const timeGone = currentTime - parseInt(autoLogoutSecondAlarm);
         const remainTime = secondAlarmTime - timeGone;
         setAutoLogoutAlarm(dispatch, "second", remainTime, lastAlarmTime);
       }
 
-      // 3) 첫번째 타이머 실행 후 -> 두번째 타이머 설정했는데 새로고침 시
       if (autoLogoutLastAlarm !== null) {
         const timeGone = currentTime - parseInt(autoLogoutLastAlarm);
         const remainTime = lastAlarmTime - timeGone;
@@ -199,7 +198,8 @@ const MainPage = () => {
 
   return (
     <Container>
-      <Header/>
+      {/* <Header/> */}
+      {isLogin == 1 ? <LoginHeader onProfileClick={openProfileModal} /> : <LogoutHeader onLoginClick={openOAuthModal} />}
       <Main>
         <LeftSection leftExpand={expandScreen.left}>
           {selectedMenu === "전체종목" ? (
diff --git a/client/src/utils/setAutoLogoutAlarm.ts b/client/src/utils/setAutoLogoutAlarm.ts
index 72693c75..513af88b 100644
--- a/client/src/utils/setAutoLogoutAlarm.ts
+++ b/client/src/utils/setAutoLogoutAlarm.ts
@@ -19,9 +19,9 @@ import { setLogoutState } from "../reducer/member/loginSlice";
 export const secondAlarmTime = 1000 * 60 * 29; // 29분
 export const lastAlarmTime = 1000 * 60; // 1분
 
-const setAutoLogoutAlarm = (dispatch: any, alarmNum: "first" | "second" | "last", secondAlarmTime: number, lastAlarmTime?: number) => {
+const setAutoLogoutAlarm = (dispatch: any, alarmNum: string, secondAlarmTime: number, lastAlarmTime?: number) => {
   // 1~3차 알림 모두 설정
-  if (alarmNum === "first") {
+  if (alarmNum === alarmNumType.First) {
     toast.warning("로그인 상태는 30분 동안 유지됩니다", {
       style: toastStyle,
       position: "top-center",
@@ -61,7 +61,7 @@ const setAutoLogoutAlarm = (dispatch: any, alarmNum: "first" | "second" | "last"
   }
 
   // 2~3차 알림 설정
-  if (alarmNum === "second") {
+  if (alarmNum === alarmNumType.Second) {
     setTimeout(() => {
       // 2차 알림 셋팅 시간 제거
       sessionStorage.removeItem("autoLogoutSecondAlarm");
@@ -94,7 +94,7 @@ const setAutoLogoutAlarm = (dispatch: any, alarmNum: "first" | "second" | "last"
   }
 
   // 3차 알림만 설정
-  if (alarmNum === "last") {
+  if (alarmNum === alarmNumType.Last) {
     setTimeout(() => {
       // 3차 알림 셋팅 시간 제거
       sessionStorage.removeItem("autoLogoutLastAlarm");
@@ -113,6 +113,12 @@ const setAutoLogoutAlarm = (dispatch: any, alarmNum: "first" | "second" | "last"
 
 export default setAutoLogoutAlarm;
 
+const alarmNumType = {
+  First: "first",
+  Second: "second",
+  Last: "last",
+};
+
 const toastStyle = {
   fontSize: "15px",
   fontWeight: 350,