refactor: 불필요한 redux, dispatch 구문 제거, 핸들러 네이밍 변경

woowacourse · Jun 10, 2021 · 1d0bcab · 1d0bcab
1 parent 36772b6
commit 1d0bcab
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 330 deletions.
diff --git a/src/components/molecules/QuantityStepper/index.js b/src/components/molecules/QuantityStepper/index.js
@@ -3,11 +3,11 @@ import { IconUpward, IconDownward } from '../../';
 import * as S from './style.js';
 
 export const QuantityStepper = (props) => {
-  const { quantity, onIncrement, onDecrement, onInput, ...rest } = props;
+  const { quantity, onIncrement, onDecrement, ...rest } = props;
 
   return (
     <S.Container {...rest}>
-      <S.Input value={quantity} onChange={onInput} />
+      <S.Input value={quantity} />
       <S.Controller>
         <S.StepperButton onClick={onIncrement} children={<IconUpward />} isUpward />
         <S.StepperButton onClick={onDecrement} children={<IconDownward />} />
@@ -20,7 +20,7 @@ QuantityStepper.propTypes = {
   quantity: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   onIncrement: PropTypes.func.isRequired,
   onDecrement: PropTypes.func.isRequired,
-  onInput: PropTypes.func.isRequired,
+  onBlur: PropTypes.func.isRequired,
 };
 
 QuantityStepper.defaultProps = {

diff --git a/src/hooks/useCart.js b/src/hooks/useCart.js
@@ -98,6 +98,22 @@ export const useCart = (customerName = DEFAULT_CUSTOMER_NAME) => {
     removeCartItem(targetCartId);
   };
 
+  const changeQuantity = (productId, nextQuantity) => {
+    const targetProduct = products.find((product) => product.productId === productId);
+    const prevQuantity = targetProduct.cartIds.length;
+    const diff = Math.abs(nextQuantity - prevQuantity);
+
+    if (diff === 0) {
+      return;
+    }
+
+    const func = nextQuantity > prevQuantity ? increment : decrement;
+
+    for (let i = 0; i < diff; i++) {
+      func(productId);
+    }
+  };
+
   const toggleProduct = (productId) => {
     setProducts((prevState) => {
       const nextState = [...prevState];
@@ -126,6 +142,7 @@ export const useCart = (customerName = DEFAULT_CUSTOMER_NAME) => {
     totalPrice: getFormattedAsKRW(totalPrice),
     increment,
     decrement,
+    changeQuantity,
     addProduct,
     removeProduct,
     removeProducts,

diff --git a/src/pages/CartPage/Item.js b/src/pages/CartPage/Item.js
@@ -3,19 +3,17 @@ import PropTypes from 'prop-types';
 import { Button, Checkbox, IconTrashCan, QuantityStepper } from '../../components';
 import * as S from './style.js';
 import { getFormattedAsKRW } from '../../utils';
-import { PATTERN_ONLY_NUMBER } from '../../constants';
 
 const MIN_PRODUCT_QUANTITY = 1;
 const MAX_PRODUCT_QUANTITY = 99;
 
 export const Item = (props) => {
   const {
     product,
-    removeProduct,
+    onClickTrashCanButton,
     toggleCheckbox,
     incrementQuantity,
     decrementQuantity,
-    inputQuantity,
     ...rest
   } = props;
   const { productId, name, price, imageUrl, cartIds, isSelected } = product;
@@ -25,26 +23,14 @@ export const Item = (props) => {
     if (quantity >= MAX_PRODUCT_QUANTITY) {
       return;
     }
-    incrementQuantity(productId);
+    incrementQuantity();
   };
+
   const onDecrementQuantity = () => {
     if (quantity <= MIN_PRODUCT_QUANTITY) {
       return;
     }
-    decrementQuantity(productId);
-  };
-  const onInputQuantity = ({ target }) => {
-    const inputValue = target.value.replace(PATTERN_ONLY_NUMBER, '');
-
-    /* 빈 문자열(falsy)을 숫자연산 하기 전에 처리 */
-    if (inputValue === '') {
-      inputQuantity(productId, inputValue);
-      return;
-    }
-    if (inputValue < MIN_PRODUCT_QUANTITY || inputValue > MAX_PRODUCT_QUANTITY) {
-      return;
-    }
-    inputQuantity(productId, inputValue);
+    decrementQuantity();
   };
 
   return (
@@ -53,12 +39,11 @@ export const Item = (props) => {
       <S.Image src={imageUrl} />
       <S.Name>{name}</S.Name>
       <S.Controller>
-        <Button children={<IconTrashCan />} onClick={() => removeProduct(productId)} />
+        <Button children={<IconTrashCan />} onClick={onClickTrashCanButton} />
         <QuantityStepper
           quantity={quantity}
           onIncrement={onIncrementQuantity}
           onDecrement={onDecrementQuantity}
-          onInput={onInputQuantity}
         />
         <S.Price>{getFormattedAsKRW(price)}</S.Price>
       </S.Controller>
@@ -79,5 +64,4 @@ Item.propTypes = {
   toggleCheckbox: PropTypes.func.isRequired,
   incrementQuantity: PropTypes.func.isRequired,
   decrementQuantity: PropTypes.func.isRequired,
-  inputQuantity: PropTypes.func.isRequired,
 };
diff --git a/src/pages/CartPage/index.js b/src/pages/CartPage/index.js
@@ -1,15 +1,12 @@
-import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
-import { cartAction } from '../../redux';
 import { useCart, useConfirm } from '../../hooks';
 import { Checkbox, Header, RedirectNotice } from '../../components';
 import { Item } from './Item';
 import * as S from './style.js';
 import { ROUTE } from '../../constants';
 
 export const CartPage = () => {
-  const dispatch = useDispatch();
   const history = useHistory();
   const { openConfirm } = useConfirm();
   const {
@@ -26,13 +23,13 @@ export const CartPage = () => {
   const isAllSelected = products?.length === selectedProducts?.length;
   const isAllUnselected = selectedProducts?.length === 0;
 
-  const onClickRemoveButton = () => {
+  const handleRemoveProducts = () => {
     openConfirm({
       message: `선택한 ${selectedProducts?.length}개의 상품을 삭제하시겠습니까?`,
       approve: () => removeProducts(),
     });
   };
-  const onClickTrashIconButton = (productId) => {
+  const handleRemoveProduct = (productId) => {
     openConfirm({
       message: `해당 상품을 삭제하시겠습니까?`,
       approve: () => removeProduct(productId),
@@ -62,27 +59,28 @@ export const CartPage = () => {
                   isChecked={isAllSelected}
                   onChange={() => toggleAll(!isAllSelected)}
                 />
-                <S.RemoveButton onClick={onClickRemoveButton} disabled={isAllUnselected}>
+                <S.RemoveButton onClick={handleRemoveProducts} disabled={isAllUnselected}>
                   상품삭제
                 </S.RemoveButton>
               </S.OrderOptionsController>
               <S.ListLabel>
                 선택상품 ({selectedProducts?.length} / {products?.length}개)
               </S.ListLabel>
               <S.CartProductList>
-                {products?.map((product) => (
-                  <Item
-                    key={product.cartId}
-                    product={product}
-                    removeProduct={(id) => onClickTrashIconButton(id)}
-                    toggleCheckbox={(id) => toggleProduct(id)}
-                    incrementQuantity={(id) => increment(id)}
-                    decrementQuantity={(id) => decrement(id)}
-                    inputQuantity={(id, quantity) =>
-                      dispatch(cartAction.inputProductQuantity(id, quantity))
-                    }
-                  />
-                ))}
+                {products?.map((product) => {
+                  const { cartId, productId } = product;
+
+                  return (
+                    <Item
+                      key={cartId}
+                      product={product}
+                      onClickTrashCanButton={() => handleRemoveProduct(productId)}
+                      toggleCheckbox={() => toggleProduct(productId)}
+                      incrementQuantity={() => increment(productId)}
+                      decrementQuantity={() => decrement(productId)}
+                    />
+                  );
+                })}
               </S.CartProductList>
             </S.OrderOptionsSection>
             <S.CheckoutSection>

diff --git a/src/redux/cartReducer.js b/src/redux/cartReducer.js