[Fix] 최대 매도수량 계산 로직 외 기타 주식주문 관련 세부사항 수정

- 최대 매도수량 계산 시 [보유 주식]에서 [매도 주문을 넣었으나 거래량이 없어 미체결 목록으로 넘어간 주식 수] 차감 - 기존에 BE 에서 해당 계산을 처리하지 않고 데이터를 송신하여 FE 에서 직접 계산하였으나, BE 에서 로직 구현하여 FE 에서 활용 중이던 로직 삭제 - 이외 주식주문 컴포넌트 기능 및 레이아웃 세부사항 변경 (API 주소 변경, 통신 테스트 코드 임시적으로 추가, 레이아웃 조정 위한 CSS 변경 등) - 주식주문 외 변경사항 (TapContainerPage 파일에서 import 경로 관련 오류가 존재하여 수정 후 함께 Commit) Issues #17
codestates-seb · Sep 14, 2023 · 9ff31e8 · 9ff31e8
1 parent 1f75ecc
commit 9ff31e8
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 55 deletions.
diff --git a/client/src/components/StockOrderSection/Index.tsx b/client/src/components/StockOrderSection/Index.tsx
@@ -52,6 +52,12 @@ const StockOrderSection = () => {
   if (isError || stockPrice.length === 0) {
     return (
       <Container orderSet={stockOrderSet}>
+        <UpperBar>
+          <h2 className="Title">{upperbarTitle}</h2>
+          <button className="CloseButton" onClick={handleStockOrderClose}>
+            &#10005;
+          </button>
+        </UpperBar>
         <div className="ErrorContainer">
           <div className="ErrorMessage">{errorMessage}</div>
           <button className="ErrorCloseButton" onClick={handleStockOrderClose}>
@@ -123,11 +129,6 @@ const Container = styled.aside<{ orderSet: boolean }>`
 
   .mainContent {
     height: 100%;
-    overflow-y: scroll;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
   }
 
   .ErrorContainer {

diff --git a/client/src/components/StockOrderSection/OrderResult.tsx b/client/src/components/StockOrderSection/OrderResult.tsx
@@ -13,7 +13,6 @@ const cancelButtonText: string = "주문취소";
 
 const titleText: string = "미체결 내역";
 const orderPendingEmptyMessage: string = "미체결 내역이 없습니다";
-const layoutComposition: string = "StockHolm";
 
 const OrderResult = () => {
   const { orderRecordData } = useGetStockOrderRecord();
@@ -22,16 +21,14 @@ const OrderResult = () => {
   orderWaitList.reverse(); // 최근 주문이 상단에 노출되도록 배열 순서 변경
   const waitListNum = orderWaitList.length;
 
-  console.log(waitListNum);
-
   return (
     <Container>
       <div className="Title">{titleText}</div>
       <TradeWaiting>
         {waitListNum === 0 ? (
           <div className="emptyIndicator">{orderPendingEmptyMessage}</div>
         ) : (
-          <div className="orderWaitStockList">
+          <>
             {orderWaitList.map((stock: orderWaitProps) => {
               const orderType = stock.orderTypes === "BUY" ? "매수" : "매도";
               const price = stock.price.toLocaleString();
@@ -41,8 +38,7 @@ const OrderResult = () => {
 
               return <OrderWaitStock key={orderId} orderType={orderType} price={price} volume={volume} companyId={companyId} orderId={orderId} />;
             })}
-            <div className="layoutComposition">{layoutComposition}</div>
-          </div>
+          </>
         )}
       </TradeWaiting>
     </Container>
@@ -51,6 +47,7 @@ const OrderResult = () => {
 
 export default OrderResult;
 
+// 개별 미체결 거래내역
 const OrderWaitStock = (props: WaitStockProps) => {
   const { orderType, price, volume, companyId, orderId } = props;
   const { companyList } = useGetCompanyList();
@@ -119,8 +116,8 @@ interface companyProps {
 
 // component 생성
 const Container = styled.div`
-  height: auto;
-  max-height: 100%;
+  width: 100%;
+  height: calc(100vh - 570px);
   padding-top: 16px;
   display: flex;
   flex-direction: column;
@@ -134,6 +131,13 @@ const Container = styled.div`
 `;
 
 const TradeWaiting = styled.div`
+  height: 100%;
+  overflow-y: scroll;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
   .title {
     padding-left: 16px;
     margin-bottom: 8px;

diff --git a/client/src/components/StockOrderSection/StockOrder.tsx b/client/src/components/StockOrderSection/StockOrder.tsx
@@ -1,5 +1,6 @@
 import { useSelector, useDispatch } from "react-redux";
 import { isHoliday } from "@hyunbinseo/holidays-kr";
+import { setStockOrderVolume } from "../../reducer/StockOrderVolume-Reducer";
 import { closeDecisionWindow } from "../../reducer/SetDecisionWindow-Reducer";
 import { styled } from "styled-components";
 import { StateProps } from "../../models/stateProps";
@@ -57,6 +58,7 @@ const StockOrder = ({ corpName }: { corpName: string }) => {
       console.log("주문 오류 발생");
     }
 
+    dispatch(setStockOrderVolume(0));
     handleCloseDecisionWindow();
   };
 

diff --git a/client/src/components/StockOrderSection/VolumeSetteing.tsx b/client/src/components/StockOrderSection/VolumeSetteing.tsx
@@ -3,10 +3,8 @@ import { useSelector, useDispatch } from "react-redux";
 import { styled } from "styled-components";
 import useGetCash from "../../hooks/useGetCash";
 import useGetHoldingStock from "../../hooks/useGetHoldingStock";
-import useGetStockOrderRecord from "../../hooks/useGetStockOrderRecord";
 import { StateProps } from "../../models/stateProps";
 import { HoldingStockProps } from "../../models/stockProps";
-import { OrderRecordProps } from "../../models/stockProps";
 import { setStockOrderVolume, plusStockOrderVolume, minusStockOrderVolume } from "../../reducer/StockOrderVolume-Reducer";
 
 const volumeSettingTitle: string = "수량";
@@ -26,24 +24,17 @@ const VolumeSetting = () => {
   const orderPrice = useSelector((state: StateProps) => state.stockOrderPrice);
   const orderVolume = useSelector((state: StateProps) => state.stockOrderVolume);
 
-  // 거래가능 주식 수 = 보유 주식 수 - 매도 대기 중인 주식 수
+  // 거래가능 주식 수
   let avaiableSellingStock: number = 0;
 
   const { cashData } = useGetCash();
   const { holdingStockData } = useGetHoldingStock();
-  const { orderRecordData } = useGetStockOrderRecord();
-  const holdingCompanyStock = holdingStockData.filter((stock: HoldingStockProps) => stock.companyId === companyId);
-
   const maximumBuyingVolume = orderPrice !== 0 ? Math.trunc(cashData / orderPrice) : Math.trunc(cashData / 1);
+  const holdingCompanyStock = holdingStockData.filter((stock: HoldingStockProps) => stock.companyId === companyId);
 
   // 해당 company 보유 주식이 0이 아닐 때
   if (holdingCompanyStock.length !== 0) {
-    const waitingForSaleStock = orderRecordData.filter((stock: OrderRecordProps) => stock.companyId === companyId && stock.orderTypes === "SELL" && stock.orderStates === "ORDER_WAIT");
-    const waitingStockNum = waitingForSaleStock.reduce((acc: number, cur: OrderRecordProps) => {
-      acc = acc + cur.stockCount;
-      return acc;
-    }, 0);
-    avaiableSellingStock = holdingCompanyStock[0].stockCount - waitingStockNum;
+    avaiableSellingStock = holdingCompanyStock[0].stockCount;
   }
 
   const handlePlusOrderVolume = () => {
@@ -85,10 +76,20 @@ const VolumeSetting = () => {
       return;
     }
 
-    if (maximumBuyingVolume < numberInputValue) {
-      return;
-    } else {
-      dispatch(setStockOrderVolume(numberInputValue));
+    if (!orderType) {
+      if (maximumBuyingVolume < numberInputValue) {
+        return;
+      } else {
+        dispatch(setStockOrderVolume(numberInputValue));
+      }
+    }
+
+    if (orderType) {
+      if (avaiableSellingStock < numberInputValue) {
+        return;
+      } else {
+        dispatch(setStockOrderVolume(numberInputValue));
+      }
     }
   };
 

diff --git a/client/src/hooks/useGetCash.ts b/client/src/hooks/useGetCash.ts
@@ -4,7 +4,7 @@ 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/3";
+const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/cash";
 
 const useGetCash = () => {
   const isLogin = useSelector((state: StateProps) => state.login);

diff --git a/client/src/hooks/useGetStockData.ts b/client/src/hooks/useGetStockData.ts
@@ -1,8 +1,10 @@
+// 🟢 기존 로직
 import { useState, useEffect } from "react";
 import { useQuery, useQueryClient } from "react-query";
 import axios from "axios";
 
 const useGetStockData = (companyId: number) => {
+  // 🟢 기존 로직
   const [autoRefetch, setAutoRefetch] = useState(false);
   const queryClient = useQueryClient();
 
@@ -40,6 +42,21 @@ const useGetStockData = (companyId: number) => {
       queryClient.invalidateQueries("orderRecord");
     },
   });
+  // 🟢 기존 로직
+
+  // 🔴 테스트 로직
+  // const queryClient = useQueryClient();
+
+  // const { data, isLoading, error } = useQuery(`chartData`, () => getChartData(companyId), {
+  //   enabled: true,
+  //   refetchInterval: 1000 * 10, // 정각 혹은 30분에 맞춰서 10분 마다 데이터 리패칭
+  //   onSuccess: () => {
+  //     queryClient.invalidateQueries("cash");
+  //     queryClient.invalidateQueries("holdingStock");
+  //     queryClient.invalidateQueries("orderRecord");
+  //   },
+  // });
+  // 🔴 테스트 로직
 
   return { stockPrice: data, stockPriceLoading: isLoading, stockPriceError: error };
 };

diff --git a/client/src/hooks/useGetStockOrderRecord.ts b/client/src/hooks/useGetStockOrderRecord.ts
@@ -10,6 +10,12 @@ const useGetStockOrderRecord = () => {
 
   const { data, isLoading, isError } = useQuery("orderRecord", getOrderRecord, {
     enabled: isLogin === 1,
+    // 🔴 fetching 점검
+    onSuccess: (data) => {
+      console.log(new Date());
+      console.log("통신 점검");
+      console.log(data);
+    },
   });
 
   return { orderRecordData: data, orderRecordLoading: isLoading, orderRecordError: isError };

diff --git a/client/src/page/TabPages/TabContainerPage.tsx b/client/src/page/TabPages/TabContainerPage.tsx
@@ -1,14 +1,10 @@
 import MarketInfo from "./MarketInfoPage";
 import { Routes, Route, Link } from "react-router-dom";
 import styled from "styled-components";
-import { DetailStockInformation } from "../../components/stockinfoComponents/DetailStockInformation";
+import { DetailStockInformation } from "../../components/stockListComponents/DetailStockInformation";
 import { Community } from "./communityPage";
 import { useState } from "react";
-import {
-  MarketImages,
-  InfoImages,
-  CommunityImages,
-} from "../../components/communityComponents/IconComponent/Icon";
+import { MarketImages, InfoImages, CommunityImages } from "../../components/communityComponents/IconComponent/Icon";
 export const TabContainerPage = () => {
   const [activeTab, setActiveTab] = useState(1);
   const handleClickActiveTab = (number: number) => {
@@ -17,34 +13,19 @@ export const TabContainerPage = () => {
 
   return (
     <TabContainerStyle className="scroll">
-      <style>
-        @import
-        url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@500&display=swap');
-      </style>
+      <style>@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@500&display=swap');</style>
 
       <div>
         <TabNavArea>
-          <Nav
-            to="/"
-            onClick={() => handleClickActiveTab(1)}
-            className={`tab ${activeTab === 1 ? "active-tab" : "inactive-tab"}`}
-          >
+          <Nav to="/" onClick={() => handleClickActiveTab(1)} className={`tab ${activeTab === 1 ? "active-tab" : "inactive-tab"}`}>
             <MarketImages />
             {TabContainerText.marketInfo}
           </Nav>
-          <Nav
-            to="/stockitems"
-            onClick={() => handleClickActiveTab(2)}
-            className={`tab ${activeTab === 2 ? "active-tab" : "inactive-tab"}`}
-          >
+          <Nav to="/stockitems" onClick={() => handleClickActiveTab(2)} className={`tab ${activeTab === 2 ? "active-tab" : "inactive-tab"}`}>
             <InfoImages />
             {TabContainerText.StockInfo}
           </Nav>
-          <Nav
-            to="/community"
-            onClick={() => handleClickActiveTab(3)}
-            className={`tab ${activeTab === 3 ? "active-tab" : "inactive-tab"}`}
-          >
+          <Nav to="/community" onClick={() => handleClickActiveTab(3)} className={`tab ${activeTab === 3 ? "active-tab" : "inactive-tab"}`}>
             <CommunityImages />
             {TabContainerText.community}
           </Nav>