refactor: 장바구니 옵션 변경 기능 추가, 수량 직접 입력 기능 추가, 디바운스 처리

Seoje1405 · Seoje1405 · commit e550dbb33cef · 2026-02-12T17:02:42.000+09:00
diff --git a/src/components/cart/cart-item-list.tsx b/src/components/cart/cart-item-list.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import { useState } from 'react';
+import { useCartContext } from './cart-context';
+import { CartItem } from './cart-item';
+import { CartOptionChangeSheet } from './cart-option-change-sheet';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogClose,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import type { CartResponse } from '@/types/domain/cart';
+
+function EmptyCartView() {
+  return (
+    <div className="flex h-[60vh] flex-col items-center justify-center text-gray-400">
+      <p>장바구니가 비어있습니다.</p>
+    </div>
+  );
+}
+
+export function CartItemList() {
+  const {
+    optimisticCart,
+    selectedIds,
+    toggleItem,
+    handleQuantity,
+    handleDelete,
+    handleOptionChange,
+  } = useCartContext();
+
+  const [editingItem, setEditingItem] = useState<CartResponse | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const handleConfirm = async (cartId: number, color: string, size: string) => {
+    const result = await handleOptionChange(cartId, color, size);
+    if (!result.success) {
+      setErrorMessage(result.message);
+    }
+  };
+
+  if (optimisticCart.length === 0) {
+    return <EmptyCartView />;
+  }
+
+  return (
+    <div className="mt-4 flex flex-col gap-[30px] bg-white px-[21px] pb-32">
+      {optimisticCart.map((item) => (
+        <CartItem
+          key={item.cartId}
+          item={item}
+          isChecked={selectedIds.has(item.cartId)}
+          onToggleCheck={(checked) => toggleItem(item.cartId, checked)}
+          onQuantityChange={async (qty) => {
+            const result = await handleQuantity(item.cartId, qty);
+            if (!result.success) {
+              setErrorMessage(result.message);
+            }
+          }}
+          onDelete={() => handleDelete(item.cartId)}
+          onOptionChange={() => setEditingItem(item)}
+        />
+      ))}
+
+      <CartOptionChangeSheet
+        item={editingItem}
+        onConfirm={handleConfirm}
+        onClose={() => setEditingItem(null)}
+      />
+
+      <Dialog
+        open={errorMessage !== null}
+        onOpenChange={(open) => {
+          if (!open) setErrorMessage(null);
+        }}
+      >
+        <DialogContent className="rounded-xl sm:max-w-sm">
+          <DialogHeader className="flex flex-col items-center justify-center space-y-3 pt-4">
+            <DialogTitle className="text-center text-xl font-bold">
+              장바구니 수정 실패
+            </DialogTitle>
+            <DialogDescription className="text-center">
+              {errorMessage}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="mt-4">
+            <DialogClose asChild>
+              <Button className="bg-ongil-teal h-12 w-full rounded-xl text-lg font-bold hover:bg-teal-600">
+                확인
+              </Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/src/components/cart/cart-item.tsx b/src/components/cart/cart-item.tsx
@@ -1,9 +1,11 @@
 'use client';
 
+import { useState, useEffect, useRef } from 'react';
 import Image from 'next/image';
 import type { CartResponse } from '@/types/domain/cart';
 import { Card } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { Checkbox } from '@/components/ui/checkbox';
 import { cn } from '@/lib/utils';
 import { formatPrice } from '@/lib/format';
@@ -14,6 +16,7 @@ interface CartItemProps {
   onToggleCheck: (checked: boolean) => void;
   onQuantityChange: (newQuantity: number) => void;
   onDelete: () => void;
+  onOptionChange: () => void;
 }
 
 export function CartItem({
@@ -22,6 +25,7 @@ export function CartItem({
   onToggleCheck,
   onQuantityChange,
   onDelete,
+  onOptionChange,
 }: CartItemProps) {
   const {
     brandName,
@@ -33,11 +37,37 @@ export function CartItem({
     totalPrice,
   } = item;
 
+  const [inputValue, setInputValue] = useState(String(quantity));
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    setInputValue(String(quantity));
+  }, [quantity]);
+
+  const debouncedChange = (val: number) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => onQuantityChange(val), 500);
+  };
+
+  const commitValue = () => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    const val = parseInt(inputValue, 10);
+    if (isNaN(val) || val < 1) {
+      setInputValue(String(quantity));
+    } else {
+      onQuantityChange(val);
+    }
+  };
+
   const handleDecrease = () => {
-    if (quantity > 1) onQuantityChange(quantity - 1);
+    if (quantity > 1) {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      onQuantityChange(quantity - 1);
+    }
   };
 
   const handleIncrease = () => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
     onQuantityChange(quantity + 1);
   };
 
@@ -95,7 +125,25 @@ export function CartItem({
             >
               -
             </button>
-            <span>{quantity}</span>
+            <Input
+              type="number"
+              value={inputValue}
+              min={1}
+              onChange={(e) => {
+                const raw = e.target.value;
+                setInputValue(raw);
+                const val = parseInt(raw, 10);
+                if (!isNaN(val) && val >= 1) {
+                  debouncedChange(val);
+                }
+              }}
+              onBlur={commitValue}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') commitValue();
+              }}
+              className="h-6 w-6 [appearance:textfield] rounded-none border-none px-0 text-center text-xl shadow-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+              aria-label="수량 입력"
+            />
             <button
               className="flex h-8 w-8 items-center justify-center text-gray-600"
               onClick={handleIncrease}
@@ -119,7 +167,7 @@ export function CartItem({
           <Button
             variant="ghost"
             className="bg-ongil-teal h-[57px] rounded-full font-bold text-white"
-            onClick={() => alert('구현 예정')}
+            onClick={onOptionChange}
           >
             <span className="text-xl leading-[18px] font-bold">옵션 변경</span>
           </Button>
diff --git a/src/components/cart/cart-option-change-sheet.tsx b/src/components/cart/cart-option-change-sheet.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import { useEffect, useState, useTransition } from 'react';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Button } from '@/components/ui/button';
+import OptionSelectors from '@/components/product-option-sheet/option-selectors';
+import { getProductOptions } from '@/app/actions/product';
+import type { CartResponse } from '@/types/domain/cart';
+import type { ProductOption } from '@/types/domain/product';
+
+interface CartOptionChangeSheetProps {
+  item: CartResponse | null;
+  onConfirm: (
+    cartId: number,
+    color: string,
+    size: string,
+  ) => void | Promise<void>;
+  onClose: () => void;
+}
+
+export function CartOptionChangeSheet({
+  item,
+  onConfirm,
+  onClose,
+}: CartOptionChangeSheetProps) {
+  const [options, setOptions] = useState<ProductOption[]>([]);
+  const [isPending, startTransition] = useTransition();
+  const [currentColor, setCurrentColor] = useState('');
+  const [currentSize, setCurrentSize] = useState('');
+
+  const isOpen = item !== null;
+
+  // 시트가 열릴 때 옵션을 가져오고 현재 값으로 초기화
+  useEffect(() => {
+    if (!item) return;
+
+    setCurrentColor(item.selectedColor);
+    setCurrentSize(item.selectedSize);
+
+    startTransition(async () => {
+      const fetched = await getProductOptions(item.productId);
+      setOptions(fetched);
+    });
+  }, [item]);
+
+  const colors = [...new Set(options.map((o) => o.color))];
+  const sizes = options
+    .filter((o) => o.color === currentColor)
+    .map((o) => o.size);
+
+  const isChanged =
+    item !== null &&
+    (currentColor !== item.selectedColor || currentSize !== item.selectedSize);
+
+  const canConfirm = isChanged && currentColor !== '' && currentSize !== '';
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) onClose();
+  };
+
+  return (
+    <Sheet open={isOpen} onOpenChange={handleOpenChange}>
+      <SheetContent
+        side="bottom"
+        className="flex max-h-[85vh] flex-col rounded-t-[20px] px-0 pt-6 pb-0"
+      >
+        <div className="flex-1 overflow-y-auto px-5 pb-6">
+          <SheetHeader className="mb-6 space-y-1 text-left">
+            <SheetTitle className="line-clamp-1 text-lg font-bold">
+              {item?.productName}
+            </SheetTitle>
+          </SheetHeader>
+
+          {isPending ? (
+            <div className="flex h-32 items-center justify-center text-gray-400">
+              옵션을 불러오는 중...
+            </div>
+          ) : (
+            <OptionSelectors
+              colors={colors}
+              sizes={sizes}
+              currentColor={currentColor}
+              currentSize={currentSize}
+              onColorChange={(val) => {
+                setCurrentColor(val);
+                setCurrentSize('');
+              }}
+              onSizeChange={setCurrentSize}
+            />
+          )}
+        </div>
+
+        <div className="p-4">
+          <Button
+            disabled={!canConfirm}
+            onClick={() => {
+              if (item) {
+                onConfirm(item.cartId, currentColor, currentSize);
+                onClose();
+              }
+            }}
+            className="bg-ongil-teal hover:bg-ongil-teal h-14 w-full rounded-xl text-lg font-bold text-white disabled:opacity-50"
+          >
+            변경하기
+          </Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/src/components/cart/use-cart-service.ts b/src/components/cart/use-cart-service.ts
@@ -12,6 +12,10 @@ import { useCartStore } from '@/store/cart';
 
 type CartAction =
   | { type: 'UPDATE'; payload: { cartId: number; quantity: number } }
+  | {
+      type: 'UPDATE_OPTION';
+      payload: { cartId: number; selectedColor: string; selectedSize: string };
+    }
   | { type: 'DELETE'; payload: { cartId: number } }
   | { type: 'DELETE_MANY'; payload: { ids: number[] } };
 
@@ -30,6 +34,16 @@ function cartOptimisticReducer(
             }
           : item,
       );
+    case 'UPDATE_OPTION':
+      return state.map((item) =>
+        item.cartId === action.payload.cartId
+          ? {
+              ...item,
+              selectedColor: action.payload.selectedColor,
+              selectedSize: action.payload.selectedSize,
+            }
+          : item,
+      );
     case 'DELETE':
       return state.filter((item) => item.cartId !== action.payload.cartId);
     case 'DELETE_MANY':
@@ -89,6 +103,7 @@ export function useCartService(initialCartItems: CartResponse[]) {
     if (!result.success) {
       router.refresh();
     }
+    return result;
   };
 
   const handleDelete = async (cartId: number) => {
@@ -111,6 +126,27 @@ export function useCartService(initialCartItems: CartResponse[]) {
     }
   };
 
+  const handleOptionChange = async (
+    cartId: number,
+    selectedColor: string,
+    selectedSize: string,
+  ) => {
+    startTransition(() => {
+      addOptimisticAction({
+        type: 'UPDATE_OPTION',
+        payload: { cartId, selectedColor, selectedSize },
+      });
+    });
+    const result = await updateCartItem(cartId, {
+      selectedColor,
+      selectedSize,
+    });
+    if (!result.success) {
+      router.refresh();
+    }
+    return result;
+  };
+
   const handleDeleteSelected = async () => {
     if (selectedIds.size === 0) return;
     if (!confirm(`선택한 ${selectedIds.size}개 상품을 삭제하시겠습니까?`))
@@ -170,6 +206,7 @@ export function useCartService(initialCartItems: CartResponse[]) {
     toggleItem,
     handleQuantity,
     handleDelete,
+    handleOptionChange,
     handleDeleteSelected,
     handleCartCheckout,
   };
