20260114 #128 장바구니 메뉴 수량 조절 컴포넌트 개발

next.config.ts

@@ -36,7 +36,7 @@ const nextConfig: NextConfig = {
     remotePatterns: [
       {
         protocol: "https",
-        hostname: "campustable-s3.s3.ap-northeast-2.amazonaws.com",
+        hostname: "campus-table-s3.s3.ap-northeast-2.amazonaws.com",
         port: "",
         pathname: "/**",
       },

src/assets/icons/index.ts

@@ -10,6 +10,10 @@ export { default as HomeDisableIcon } from "./home-disable.svg";
 export { default as HomeEnableIcon } from "./home-enable.svg";
 export { default as JingwanDisableIcon } from "./jingwan-disable.svg";
 export { default as JingwanEnableIcon } from "./jingwan-enable.svg";
+export { default as MinusIcon } from "./minus.svg";
 export { default as MyDisableIcon } from "./my-disable.svg";
 export { default as MyEnableIcon } from "./my-enable.svg";
-export { default as ShoppingBag } from "./shopping-bag.svg";
+export { default as PlusIcon } from "./plus.svg";
+export { default as PlusDisableIcon } from "./plus-disable.svg";
+export { default as ShoppingBagIcon } from "./shopping-bag.svg";
+export { default as TrashIcon } from "./trash.svg";

src/features/cart/components/button/QuantityStepper.module.css

@@ -0,0 +1,27 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+
+  padding-block: 0.44rem;
+  padding-inline: 0.5rem;
+
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-gray-200);
+  background-color: var(--color-white);
+}
+
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.label {
+  color: var(--color-black);
+  font-size: var(--text-xs);
+  font-style: normal;
+  font-weight: var(--font-medium);
+  line-height: var(--line-height-single);
+  letter-spacing: var(--letter-spacing);
+}

src/features/cart/components/button/QuantityStepper.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import styles from "./QuantityStepper.module.css";
+import { MinusIcon, PlusDisableIcon, PlusIcon, TrashIcon } from "@/assets/icons";
+import { useCart } from "@/features/cart/hooks/useCart";
+import { useToast } from "@/shared/hooks/useToast";
+
+interface QuantityStepperProps {
+  menuId: number;
+  quantity: number;
+}
+
+export default function QuantityStepper({
+  menuId,
+  quantity
+}: QuantityStepperProps) {
+  const { addToCart, removeFromCart, isAddingToCart } = useCart();
+  const { showToast } = useToast();
+
+  const handleIncrement = () => {
+    if (quantity >= 9) {
+      showToast("메뉴는 최대 9개까지만 담을 수 있어요!");
+      return;
+    }
+    addToCart(menuId, {
+      onError: (message) => showToast(message)
+    });
+  }
+
+  const handleDecrement = () => {
+    if (quantity <= 0) {
+      return;
+    }
+
+    removeFromCart(menuId, {
+      onError: (message) => showToast(message)
+    });
+  }
+
+  const decrementIcon = quantity === 1 ? <TrashIcon /> : <MinusIcon />;
+  const incrementIcon = quantity !== 9 ? <PlusIcon /> : <PlusDisableIcon />;
+  const isPlusDisabled = quantity >= 9;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <button
+          onClick={handleDecrement}
+          disabled={isAddingToCart}
+        >
+          {decrementIcon}
+        </button>
+        <div className={styles.label}>
+          {quantity}
+        </div>
+        <button
+          onClick={handleIncrement}
+          disabled={isPlusDisabled}
+        >
+          {incrementIcon}
+        </button>
+      </div>
+    </div>
+  );
+}

src/features/cart/hooks/useCart.ts

@@ -14,6 +14,10 @@ interface UseCartReturn {
     onSuccess?: () => void;
     onError?: (message: string) => void;
   }) => void;
+  removeFromCart: (menuId: number, callbacks?: {
+    onSuccess?: () => void;
+    onError?: (message: string) => void;
+  }) => void;
   isAddingToCart: boolean;
 }
 
@@ -54,6 +58,7 @@ export function useCart(): UseCartReturn {
   /**
    * 메뉴 1개 추가 (기존 수량 + 1)
    * - 버튼 연타 방지
+   * - 각 메뉴는 최대 9개까지
    */
   const addToCart = useCallback((
     menuId: number,
@@ -97,12 +102,61 @@ export function useCart(): UseCartReturn {
     pendingRequests.current.set(menuId, requestPromise);
   }, [getMenuQuantity, upsertCartMutation]);
 
+  /**
+   * 메뉴 1개 감소 (기존 수량 - 1)
+   * - 수량이 1이면 장바구니에서 삭제 (수량 0으로 설정)
+   * - 버튼 연타 방지
+   */
+  const removeFromCart = useCallback((
+    menuId: number,
+    callbacks?: {
+      onSuccess?: () => void;
+      onError?: (message: string) => void;
+    }
+  ) => {
+    // 중복 요청 방지
+    if (pendingRequests.current.has(menuId)) {
+      return;
+    }
+
+    // 특정 메뉴 수량 조회
+    const menuQuantity = getMenuQuantity(menuId);
+
+    // 수량이 0이면 실행 중지
+    if (menuQuantity === 0) {
+      return;
+    }
+
+    const newMenuQuantity = menuQuantity - 1;
+
+    const requestPromise = new Promise<void>((resolve, reject) => {
+      upsertCartMutation.mutate(
+        { menuId, quantity: newMenuQuantity },
+        {
+          onSuccess: () => {
+            pendingRequests.current.delete(menuId);
+            callbacks?.onSuccess?.();
+            resolve();
+          },
+          onError: (error) => {
+            pendingRequests.current.delete(menuId);
+            callbacks?.onError?.("장바구니 수정에 실패했어요. 잠시 후 다시 시도해주세요.");
+            reject(error);
+          },
+        }
+      );
+    });
+
+    pendingRequests.current.set(menuId, requestPromise);
+  }, [getMenuQuantity, upsertCartMutation]);
+
   return {
     cartInfo,
     isLoading,
     error,
     getMenuQuantity,
     addToCart,
+    removeFromCart,
     isAddingToCart: upsertCartMutation.isPending,
   };
 }

src/features/menu/components/button/CartButton.module.css

@@ -19,11 +19,6 @@
   justify-content: center;
 }
 
-.icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .label {
   color: var(--color-white);
   font-size: var(--text-base);

src/features/menu/components/button/CartButton.tsx

@@ -19,12 +19,10 @@ export default function CartButton({
       className={styles.button}
     >
       <div className={styles.labelWrapper}>
-        <div className={styles.icon}>
           <RoundedNumber
             number={quantity}
             filled={false}
           />
-        </div>
         <div className={styles.label}>
           장바구니 보기
         </div>

src/shared/components/header/Header.tsx

@@ -1,4 +1,4 @@
-import { ShoppingBag } from "@/assets/icons";
+import { ShoppingBagIcon } from "@/assets/icons";
 import styles from "./Header.module.css";
 
 export default function Header() {
@@ -8,7 +8,7 @@ export default function Header() {
         <div className={styles.logo}>
           LOGO
         </div>
-        <ShoppingBag />
+        <ShoppingBagIcon />
       </div>
     </div>
   );

src/shared/components/number/RoundedNumber.module.css

@@ -3,6 +3,9 @@
   justify-content: center;
   align-content: center;
 
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+
   border-radius: 0.3125rem;
   background-color: var(--color-white);