Refactor: [cartPage.ts]Team-fast4ward#145

1. 수량 increment, decrement, delete 개별적인 함수를 이벤트와 분리하였고 2. switch문으로 가독성 있게 리팩토링 하였습니다.
jaehafe · Mar 5, 2023 · e93a330 · e93a330
1 parent e1d3ea3
commit e93a330
Showing 1 changed file with 63 additions and 53 deletions.
diff --git a/src/ts/page/cartPage/cartPage.ts b/src/ts/page/cartPage/cartPage.ts
@@ -31,18 +31,6 @@ export const renderCartTotalPrice = (): number => {
   return cartTotalPriceReduce;
 };
 
-/** 장바구니 비었을 때 '결제하기 버튼' 예외처리 */
-// const handleCartPaymentBtn = () => {
-//   // const shoppingCartArr = shoppingCartStore.getLocalStorage();
-//   const enableBtn = `<button class="cart__price--paymentBtn cartPaymentBtn">결제하기</button>`;
-//   const disabledBtn = `<button class="cart__price--paymentBtn-disabled cartPaymentBtn" disabled='true' >결제하기</button>`;
-//   if (shoppingCartStore.getLocalStorage().length > 0) {
-//     return enableBtn;
-//   } else if (shoppingCartStore.getLocalStorage().length === 0) {
-//     return disabledBtn;
-//   }
-// };
-
 // 장바구니 페이지 초기 렌더링
 export const renderInitCartPage = `
 <section class="cart">
@@ -79,8 +67,13 @@ export const renderInitCartPage = `
         </div>
       </div>
       <a href="/payment" data-navigo
-        ><div class="handleCartPaymentBtn"><button class="cart__price--paymentBtn-disabled cartPaymentBtn" disabled="true">결제하기</button></div></a
-      >
+        ><div class="handleCartPaymentBtn">
+          <button class="cart__price--paymentBtn-disabled cartPaymentBtn" disabled="true">
+            결제하기
+          </button>
+        </div>
+      </a
+    >
     </aside>
   </div>
 </section>
@@ -212,56 +205,73 @@ $('.app')?.addEventListener('click', (e: MouseEvent) => {
 //   pushInCart(e);
 // });
 
-/** 장바구니 페이지에서 수량 핸들링 */
-$('.app').addEventListener('click', (e: MouseEvent) => {
-  const id = (e.target as HTMLLIElement).closest('li')?.dataset.productId;
-  // 구매 수량 +
+/** 장바구니 아이템 수량 조절 함수 */
+const handleCartItemQty = (
+  id: string,
+  operation: 'increment' | 'decrement' | 'delete',
+) => {
   let shoppingCartArr = shoppingCartStore.getLocalStorage();
-  if ((e.target as HTMLButtonElement).classList.contains('cart-addQtyBtn')) {
-    storeLocalStorage(id);
-    // shoppingCartStore.setLocalStorage(shoppingCartArr);
-    // 카트 페이지 렌더
-    renderCartPage();
-    return;
-  }
+  const existingItem = shoppingCartArr.find(
+    (item: ShoppingCartStore): boolean => item.id === id,
+  );
 
-  // 구매 수량 -
-  if ((e.target as HTMLButtonElement).classList.contains('cart-minusQtyBtn')) {
-    // let shoppingCartArr = shoppingCartStore.getLocalStorage();
-    const existingItem = shoppingCartArr.find(
-      (item: ShoppingCartStore): boolean => item.id === id,
-    );
+  switch (operation) {
+    case 'increment':
+      if (existingItem) {
+        existingItem.price += existingItem.pricePerOne;
+        existingItem.qty += 1;
+        existingItem.count += 1;
 
-    if (existingItem) {
-      if (existingItem.price > existingItem.pricePerOne) {
-        existingItem.price -= existingItem.pricePerOne;
-      }
-      if (existingItem.qty > 1) {
-        existingItem.qty -= 1;
+        // + localStorage에 저장
+        shoppingCartStore.setLocalStorage(shoppingCartArr);
       }
-      if (existingItem.count > 1) {
-        existingItem.count -= 1;
+      break;
+
+    case 'decrement':
+      if (existingItem) {
+        if (existingItem) {
+          if (existingItem.price > existingItem.pricePerOne) {
+            existingItem.price -= existingItem.pricePerOne;
+          }
+          if (existingItem.qty > 1) {
+            existingItem.qty -= 1;
+          }
+          if (existingItem.count > 1) {
+            existingItem.count -= 1;
+          }
+
+          // - localStorage에 저장
+          shoppingCartStore.setLocalStorage(shoppingCartArr);
+        }
       }
+      break;
 
-      // 카트 페이지 렌더
+    case 'delete':
+      shoppingCartArr = shoppingCartStore
+        .getLocalStorage()
+        .filter((item: ShoppingCartStore): boolean => item.id !== id);
       shoppingCartStore.setLocalStorage(shoppingCartArr);
-      renderCartPage();
-    }
+      break;
   }
 
-  // 장바구니에서 삭제
-  if (
+  countQtyInCart();
+  renderCartPage();
+};
+
+/** 장바구니 페이지에서 수량 핸들링 이벤트 */
+$('.app').addEventListener('click', (e: MouseEvent) => {
+  const id = (e.target as HTMLLIElement).closest('li')?.dataset.productId;
+
+  if ((e.target as HTMLButtonElement).classList.contains('cart-addQtyBtn')) {
+    handleCartItemQty(id, 'increment');
+  } else if (
+    (e.target as HTMLButtonElement).classList.contains('cart-minusQtyBtn')
+  ) {
+    handleCartItemQty(id, 'decrement');
+  } else if (
     (e.target as HTMLButtonElement).classList.contains('cartProductDeleteBtn')
   ) {
-    shoppingCartArr = shoppingCartStore
-      .getLocalStorage()
-      .filter((item: ShoppingCartStore): boolean => item.id !== id);
-    // storeLocalStorage(id);
-    shoppingCartStore.setLocalStorage(shoppingCartArr);
-
-    countQtyInCart();
-    renderCartPage();
-    return;
+    handleCartItemQty(id, 'delete');
   }
 });