[Refactor] 코드 리뷰 내용 반영

- PR 관련 코드 리뷰 내용 반영하여 수정 - 이외 수정사항 : MainPage의 로그인/아웃 헤더관련 수정 미완이라 이전 코드 복구하여 임시 활용 (담당자에게 전달 완료함) Issues #165
codestates-seb · Sep 28, 2023 · 627fc6a · 627fc6a
1 parent fac9a00
commit 627fc6a
Show file tree

Hide file tree

Showing 25 changed files with 186 additions and 369 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,2 @@
+export const priceUnit: string = "원";
+export const volumeUnit: string = "주";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const priceUnit: string = "원";
		export const volumeUnit: string = "주";