[Feat] 주식 구매가/구매수량 키보드 입력 기능 추가

- 기존에는 클릭 이벤트로만 주가/거래량을 변경할 수 있었음
- 키보드 입력 이벤트를 추가하여 input 창에 직접 입력하여 설정할 수 있도록 기능 구현

Issues #17

client/src/components/StockOrderSection/Index.tsx

@@ -117,7 +117,7 @@ const Container = styled.aside<{ orderSet: boolean }>`
 
   .ErrorContainer {
     width: 100%;
-    height: 75%;
+    height: 80%;
     display: flex;
     flex-direction: column;
     justify-content: center;

client/src/components/StockOrderSection/PriceSetting.tsx

@@ -30,43 +30,27 @@ const PriceSetting = (props: OwnProps) => {
     dispatch(minusStockOrderPrice(priceInterval));
   };
 
-  // 거래가 직접 기입 시  1) 음수 => 0으로 재설정  2) priceInteval로 나누어 떨어지지 않으면 => 나누어 떨어지는 수로 변경
+  // 거래가 직접 기입 시
   const handleWriteOrderPrice = (event: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = event.target.value;
-    // const numberInputValue = parseInt(inputValue, 10);
+    const numberInputValue = parseInt(inputValue, 10);
 
-    if (inputValue === "") {
-      dispatch(setStockOrderPrice(0));
-    }
-
-    if (event.target.value !== "") {
-      const inputValue = parseInt(event.target.value, 10);
-      dispatch(setStockOrderPrice(inputValue));
+    // 1) 음수를 임력하거나, 숫자 아닌 값 기입 시 -> 입력 무시  2) 값을 다 지워서 빈 문자열인 경우 -> 0으로 설정
+    if (numberInputValue < 0 || isNaN(numberInputValue)) {
+      if (inputValue === "") {
+        dispatch(setStockOrderPrice(0));
+      }
+      return;
     }
 
-    // if(inputValue < 0) {
-    //   dispatch(setStockOrderPrice(0));
-    // }
-
-    // if(inputValue % priceInterval !== 0){
-    //   const remainder = inputValue % priceInterval;
-    //   const modifiedInputValue = inputValue - remainder;
-    //   dispatch(setStockOrderPrice(modifiedInputValue));
-    // }
+    dispatch(setStockOrderPrice(numberInputValue));
   };
 
   // 종목이 달리지면 -> 가격도 변경
   useEffect(() => {
     dispatch(setStockOrderPrice(defaultPrice));
   }, [companyId]);
 
-  // 입력 값 -> event 속성에 담겨 있음
-  // onChange 이벤트 발생할 때 -> 해당 입력값을 Price 관련 전역 상태로 (전역 상태 관리함수 활용)
-  // set => 으로 actionPayload를 설정해야하는데,,,
-  // payload에 넘기기 전에 1) 0보다 큰 값인지, 2) PriceInterval로 나누어 떨어지는지 => 안된다면
-  // 전역 상태관리 함수를 2번 사용? 1) 일단 입력값으로 바꾸고 2) 2차로 필터링 해서 바꾸고?
-  // 2차 변경 때 -> 음수면 0으로 바꾸고,,, Iterval이랑 안맞으면 -> Interval로 나눈 나머지 값 차감
-
   return (
     <Container>
       <div className="PriceCategoryBox">

client/src/components/StockOrderSection/StockOrder.tsx

@@ -64,7 +64,7 @@ const OrderFailed = styled.div`
   left: 0;
   width: 100vw;
   height: 100vh;
-  background-color: rgba(209, 209, 209, 0.75);
+  background-color: rgba(0, 0, 0, 0.5);
   z-index: 2;
   display: flex;
   justify-content: center;
@@ -109,7 +109,7 @@ const OrderConfirm = styled.div`
   left: 0;
   width: 100vw;
   height: 100vh;
-  background-color: rgba(209, 209, 209, 0.75);
+  background-color: rgba(0, 0, 0, 0.5);
   z-index: 2;
   display: flex;
   justify-content: center;

client/src/components/StockOrderSection/VolumeSetteing.tsx

@@ -26,7 +26,7 @@ const VolumeSetting = () => {
 
   // 🎾 임시로직 추가
   // const maximumBuyingVolume = Math.trunc(dummyMoney / orderPrice);
-  const maximumBuyingVolume = orderPrice !==0 ? Math.trunc(dummyMoney / orderPrice) : Math.trunc(dummyMoney/1);
+  const maximumBuyingVolume = orderPrice !== 0 ? Math.trunc(dummyMoney / orderPrice) : Math.trunc(dummyMoney / 1);
 
   const handlePlusOrderVolume = () => {
     // 매수 -> 증가 버튼 클릭 시, 최대 구매수량 보다 낮으면 개수 1증가
@@ -45,6 +45,26 @@ const VolumeSetting = () => {
     }
   };
 
+  // 거래량 직접 기입 시
+  const handleWriteOrderVolume = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = event.target.value;
+    const numberInputValue = parseInt(inputValue, 10);
+
+    // 1) 음수를 임력하거나, 숫자 아닌 값 기입 시 -> 입력 무시  2) 값을 다 지워서 빈 문자열인 경우 -> 0으로 설정  3) 최대 구매가능 수량 보다 높게 기입 -> 입력 무시
+    if (numberInputValue < 0 || isNaN(numberInputValue)) {
+      if (inputValue === "") {
+        dispatch(setStockOrderVolume(0));
+      }
+      return;
+    }
+
+    if (maximumBuyingVolume < numberInputValue) {
+      return;
+    } else {
+      dispatch(setStockOrderVolume(numberInputValue));
+    }
+  };
+
   const handleSetVolumePercentage = (volumePerentage: number) => {
     // 매수 -> percentage 버튼 클릭 시, 최대 구매수량 내에서 계산
     if (!orderType) {
@@ -61,8 +81,6 @@ const VolumeSetting = () => {
 
   // 지정가 증가 -> (현재 주문수량 > 최대 주문가능 수량)일 경우 -> 현재 주문수량을 최대 주문수량으로 변경
   useEffect(() => {
-
-
     if (maximumBuyingVolume < orderVolume) {
       dispatch(setStockOrderVolume(maximumBuyingVolume));
     }
@@ -79,7 +97,7 @@ const VolumeSetting = () => {
         </div>
       </TitleContainer>
       <VolumeSettingBox>
-        <VolumeController defaultValue={orderVolume} value={orderVolume} />
+        <VolumeController defaultValue={orderVolume} value={orderVolume} onChange={handleWriteOrderVolume} />
         <UnitContent>{volumeUnit}</UnitContent>
         <div className="DirectionContainer">
           <button className="VolumeUp" onClick={handlePlusOrderVolume}>