refactor: onInput을 이용해 input에 숫자만 허용하는 기능 구현

feb-dain · May 21, 2023 · 72eaec7 · 72eaec7
1 parent b00f438
commit 72eaec7
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/src/components/main/QuantityInput.tsx b/src/components/main/QuantityInput.tsx
@@ -1,6 +1,7 @@
-import { WheelEventHandler, ChangeEventHandler, KeyboardEventHandler } from 'react';
+import { WheelEventHandler, ChangeEventHandler, FormEventHandler, FormEvent } from 'react';
 import { FaCaretUp, FaCaretDown } from 'react-icons/fa';
 import { css, styled } from 'styled-components';
+import { NOT_NUMBER } from '../../constants';
 import Input from '../common/Input';
 
 interface Props {
@@ -14,8 +15,14 @@ const QuantityInput = ({ id, value, onChange }: Props) => {
     currentTarget.blur();
   };
 
-  const handleDotPrevent: KeyboardEventHandler<HTMLInputElement> = (event) => {
-    if (event.key === '.') event.preventDefault();
+  const handleDigitsOnlyAllow: FormEventHandler<HTMLInputElement> = ({
+    currentTarget,
+  }: FormEvent<HTMLInputElement>) => {
+    const input = currentTarget;
+    const newValue = input.value.replace(NOT_NUMBER, '');
+
+    input.value = '';
+    input.value = newValue;
   };
 
   return (
@@ -34,7 +41,7 @@ const QuantityInput = ({ id, value, onChange }: Props) => {
         css={QuantityInputStyle}
         onWheel={handleScrollPrevent}
         onChange={onChange}
-        onKeyDown={handleDotPrevent}
+        onInput={handleDigitsOnlyAllow}
       />
 
       <FaCaretUp aria-label="button-to-raise-quantity" />

diff --git a/src/hooks/useCart.ts b/src/hooks/useCart.ts
@@ -36,7 +36,7 @@ export const useSetCart = (id: number) => {
     setCart((prev: CartItem[]) => {
       const { cart, cartItemIndex, alreadyHasCartItem } = findCartItemIndex(prev);
 
-      if (Number.isNaN(Number(value))) return removeProduct(cart, cartItemIndex);
+      if (value === '') return removeProduct(cart, cartItemIndex);
 
       if (alreadyHasCartItem) {
         const updatedItem = { ...prev[cartItemIndex], quantity: Number(value) };

diff --git a/src/hooks/useHandleQuantityInput.ts b/src/hooks/useHandleQuantityInput.ts
@@ -1,5 +1,5 @@
 import { ChangeEventHandler, Dispatch, SetStateAction } from 'react';
-import { MAX_NUMBER_LENGTH, NOT_NUMBER, QUANTITY } from '../constants';
+import { MAX_NUMBER_LENGTH, QUANTITY } from '../constants';
 
 interface Props {
   setIsSelected: (value: SetStateAction<boolean>) => void;
@@ -21,9 +21,9 @@ export const useHandleQuantityInput = ({ ...props }: Props) => {
       return setQuantity(QUANTITY.INITIAL);
     }
 
-    const onlyTwoDigits = parseInt(value.replace(NOT_NUMBER, '').slice(0, MAX_NUMBER_LENGTH));
+    const onlyTwoDigits = value.slice(0, MAX_NUMBER_LENGTH);
     setQuantity(onlyTwoDigits);
-    addToCart(String(onlyTwoDigits));
+    addToCart(onlyTwoDigits);
   };
 
   return handleNumberInputChange;