쇼핑 카트

Shopping Cart 구성 요소

전자 상거래에 적합한 생생한 색상으로 실제 디자인을 모방한 단순하고 반응형 쇼핑 카트 구성 요소입니다.

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Shopping Cart</h2>
    <ul class="mt-4 space-y-4">
        <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
        </li>
        <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
        </li>
    </ul>
    <div class="mt-6">
        <button class="w-full py-3 text-lg font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
            Checkout
        </button>
    </div>
</div>

레트로/빈티지 쇼핑 카트

레트로/빈티지 스타일, 파스텔 색 구성표 및 단순한 복잡성을 가진 장바구니 구성 요소. Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 디자인.

미리보기 열기

                <div class="container mx-auto p-6 bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-700 dark:to-pink-700 font-mono">
  <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Your Cart</h2>
      
      <!-- Cart Item -->
      <div class="flex items-center mb-4">
        <img class="h-12 w-12 rounded-full object-cover mr-4" src="https://picsum.photos/seed/retro1/50/50" alt="Product Image">
        <div class="flex-grow">
          <p class="text-gray-700 dark:text-gray-300 font-semibold">Radical Sneakers</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$89.99</p>
        </div>
        <span class="text-gray-700 dark:text-gray-300">x1</span>
      </div>
      
      <!-- Cart Item -->
      <div class="flex items-center mb-4">
        <img class="h-12 w-12 rounded-full object-cover mr-4" src="https://picsum.photos/seed/retro2/50/50" alt="Product Image">
        <div class="flex-grow">
          <p class="text-gray-700 dark:text-gray-300 font-semibold">Awesome Mixtape</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$12.50</p>
        </div>
        <span class="text-gray-700 dark:text-gray-300">x2</span>
      </div>
      
      <!-- Total -->
      <div class="flex justify-between items-center border-t border-gray-300 dark:border-gray-600 pt-4 mt-4">
        <p class="text-xl font-bold text-gray-800 dark:text-white">Total:</p>
        <p class="text-xl font-bold text-gray-800 dark:text-white">$114.99</p>
      </div>
      
    </div>
    
    <div class="bg-gray-200 dark:bg-gray-700 px-6 py-4">
      <button class="block w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
        Checkout
      </button>
    </div>
    
  </div>
</div>

Shopping Cart 구성 요소

전자 상거래를 위한 Neumorphic 스타일의 장바구니 구성 요소로, 단색 색 구성표, 풍부한 대화형 요소 및 Tailwind CSS를 사용하는 어두운 테마 지원을 특징으로 합니다.

미리보기 열기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-6">
  <div class="bg-white dark:bg-gray-800 shadow-inner rounded-xl p-8 max-w-md w-full">
    <h2 class="text-gray-800 dark:text-white text-2xl font-semibold mb-6 text-center">Shopping Cart</h2>
    <div class="space-y-4">
      <div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
        <img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
        <div class="flex-1 ml-4">
          <h3 class="text-gray-800 dark:text-white font-medium">Product Title</h3>
          <p class="text-gray-600 dark:text-gray-400">$29.99</p>
        </div>
        <div class="flex items-center">
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
          <span class="mx-2">1</span>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
        </div>
      </div>
      <div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
        <img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
        <div class="flex-1 ml-4">
          <h3 class="text-gray-800 dark:text-white font-medium">Another Product</h3>
          <p class="text-gray-600 dark:text-gray-400">$19.99</p>
        </div>
        <div class="flex items-center">
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
          <span class="mx-2">2</span>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
        </div>
      </div>
    </div>
    <div class="mt-6 bg-gray-300 dark:bg-gray-600 rounded-lg p-4 flex justify-between items-center">
      <span class="text-gray-800 dark:text-white font-bold">Total:</span>
      <span class="text-lg text-gray-800 dark:text-white font-semibold">$69.97</span>
    </div>
    <div class="mt-4 flex justify-center">
      <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow">
        Checkout
      </button>
    </div>
  </div>
</div>

Shopping Cart 구성 요소

Glassmorphism 효과로 설계된 Shopping Cart Component는 보색 구성표를 활용하고 다크 모드에 최적화되어 있습니다. 포트폴리오 사용, 작업 또는 제품 전시에 적합합니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-600 p-6 w-full max-w-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white text-center">Shopping Cart</h2>
        <div class="mt-4">
            <div class="flex items-center justify-between border-b pb-2 mb-2">
                <img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md" />
                <div class="flex-1 mx-2">
                    <h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Product Name</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">$29.99</p>
                </div>
                <span class="text-gray-600 dark:text-gray-200">Quantity: 1</span>
            </div>
            <div class="flex items-center justify-between border-b pb-2 mb-2">
                <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md" />
                <div class="flex-1 mx-2">
                    <h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Another Product</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">$19.99</p>
                </div>
                <span class="text-gray-600 dark:text-gray-200">Quantity: 2</span>
            </div>
        </div>
        <div class="flex items-center justify-between border-t pt-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Total:</h3>
            <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$69.97</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Checkout</button>
    </div>
</div>

Shopping Cart 구성 요소

Neumorphism 디자인과 어두운 테마 지원을 위한 보색 구성표가 있는 간단한 반응형 장바구니 구성 요소입니다.

미리보기 열기

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Shopping Cart</h2>  <ul class="space-y-4">    <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600">      <img src="https://picsum.photos/50/50" alt="Product Image" class="mr-4 rounded">      <div class="flex-1">        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3>        <p class="text-gray-600 dark:text-gray-400">$19.99</p>      </div>      <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button>    </li>    <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600">      <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="mr-4 rounded">      <div class="flex-1">        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3>        <p class="text-gray-600 dark:text-gray-400">$29.99</p>      </div>      <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button>    </li>  </ul>  <div class="mt-6">    <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Total: <span class="text-blue-500">$49.98</span></h4>  </div>  <button class="mt-4 bg-green-500 text-white rounded-full px-4 py-2 shadow transition duration-300 hover:bg-green-600">Checkout</button>  <footer class="mt-6 text-center text-gray-600 dark:text-gray-400">    <p>Created for Portfolio</p>  </footer> </div>

Shopping Cart 구성 요소

레트로/빈티지 디자인, 보색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 장바구니 구성 요소로, Tailwind CSS를 사용하여 제작되었습니다.

미리보기 열기

                <div class="container mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
    <div class="space-y-4">
      <!-- Cart Item -->
      <div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro1/100/100" alt="Product Image">
          <div>
            <h3 class="text-gray-800 dark:text-white font-medium">Retro T-Shirt</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Size: L</p>
          </div>
        </div>
        <div class="text-gray-700 dark:text-gray-200 font-semibold">$29.99</div>
      </div>
      <!-- Cart Item -->
      <div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro2/100/100" alt="Product Image">
          <div>
            <h3 class="text-gray-800 dark:text-white font-medium">Vintage Jeans</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Size: 32</p>
          </div>
        </div>
        <div class="text-gray-700 dark:text-gray-200 font-semibold">$59.99</div>
      </div>
    </div>
    <div class="flex justify-between items-center mt-6">
      <div class="text-xl font-bold text-gray-800 dark:text-white">Total:</div>
      <div class="text-xl font-bold text-gray-800 dark:text-white">$89.98</div>
    </div>
    <button class="mt-6 w-full bg-rose-500 hover:bg-rose-600 text-white font-bold py-2 px-4 rounded dark:bg-teal-500 dark:hover:bg-teal-600 filter sepia">Checkout</button>
  </div>
</div>

Shopping Cart 구성 요소

Tailwind CSS를 사용하는 단순하고 미니멀한 장바구니 구성 요소로, 흙색 색 구성표, 소셜 미디어 목적 및 어두운 테마 지원을 제공합니다. 반응형이며 샘플 항목을 포함합니다. 이 구성 요소는 최소한의 요소와 JavaScript 없이 기본 표시를 위해 설계되었습니다.

미리보기 열기

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg">
  <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h1>
  <div class="space-y-4">
    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
      <img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
        <p class="text-gray-800 dark:text-white font-bold">$19.99</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
      <img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Quantity: 2</p>
        <p class="text-gray-800 dark:text-white font-bold">$39.98</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 3 -->
    <div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
      <img src="https://picsum.photos/seed/item3/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 3</h2>
        <p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
        <p class="text-gray-800 dark:text-white font-bold">$9.50</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>
  </div>

  <!-- Cart Summary -->
  <div class="mt-6 flex justify-between items-center">
    <span class="text-xl font-bold text-gray-800 dark:text-white">Total:</span>
    <span class="text-xl font-bold text-gray-800 dark:text-white">$69.47</span>
  </div>

  <button class="mt-6 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded dark:bg-green-700 dark:hover:bg-green-800">
    Checkout
  </button>
</div>

트라이어딕 색 구성표를 사용하는 Neumorphic 장바구니 구성 요소입니다. 비즈니스/기업 웹사이트용으로 설계된 중간 정도의 복잡성을 가지고 있습니다. 이 구성 요소는 반응형이며 Tailwind의 dark: 접두사를 사용하는 다크 모드 지원을 포함합니다. 수량과 가격이 있는 항목에 대한 자리 표시자, 소계 및 체크 아웃 버튼을 포함합니다. 제품 이미지에 picsum.photos를 사용합니다.

미리보기 열기

                <div class="container mx-auto p-4 dark:bg-gray-800 dark:text-white">
    <div class="neumorphic-card p-6 rounded-xl shadow-xl dark:shadow-2xl">
        <h2 class="text-2xl font-semibold mb-6 text-center dark:text-white">Shopping Cart</h2>

        <div class="space-y-4">
            <!-- Cart Item 1 -->
            <div class="neumorphic-item p-4 rounded-lg shadow-md flex items-center dark:shadow-lg">
                <img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md mr-4 shadow-inner dark:shadow-sm">
                <div class="flex-grow">
                    <h3 class="text-lg font-medium dark:text-white">Product Name 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">Quantity: 2</p>
                    <p class="text-lg font-semibold text-blue-600 dark:text-blue-400">$49.98</p>
                </div>
                <button class="ml-4 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
            </div>

            <!-- Cart Item 2 -->
            <div class="neumorphic-item p-4 rounded-lg shadow-md flex items-center dark:shadow-lg">
                <img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md mr-4 shadow-inner dark:shadow-sm">
                <div class="flex-grow">
                    <h3 class="text-lg font-medium dark:text-white">Product Name 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
                    <p class="text-lg font-semibold text-green-600 dark:text-green-400">$24.50</p>
                </div>
                <button class="ml-4 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
            </div>
        </div>

        <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
            <div class="flex justify-between items-center">
                <span class="text-xl font-semibold dark:text-white">Subtotal:</span>
                <span class="text-xl font-bold text-purple-600 dark:text-purple-400">$74.48</span>
            </div>
        </div>

        <div class="mt-6">
            <button class="w-full py-3 rounded-lg bg-blue-600 text-white text-lg font-semibold shadow-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-200 ease-in-out dark:shadow-xl">Proceed to Checkout</button>
        </div>
    </div>
</div>

<style>
.neumorphic-card {
    background: #e0e0e0;
    box-shadow: 9px 9px 16px #a3a3a3, -9px -9px 16px #ffffff;
}

.dark .neumorphic-card {
    background: #374151;
    box-shadow: 9px 9px 16px #252c38, -9px -9px 16px #49566a;
}

.neumorphic-item {
     background: #e0e0e0;
     box-shadow: inset 5px 5px 10px #a3a3a3, inset -5px -5px 10px #ffffff;
}

.dark .neumorphic-item {
    background: #374151;
    box-shadow: inset 5px 5px 10px #252c38, inset -5px -5px 10px #49566a;
}
</style>

Shopping Cart 구성 요소

레트로/빈티지 테마의 쇼핑 카트 구성 요소로, 단색 색 구성표, 적당한 복잡성, 반응형 디자인 및 다크 모드 지원을 제공합니다. 비즈니스/기업 웹사이트에 적합합니다.

미리보기 열기

                <div class="container mx-auto p-4">
  <div class="max-w-md mx-auto rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
      <div class="flex items-center mb-4">
        <img src="https://picsum.photos/seed/retro1/80/80" alt="Product Image" class="w-16 h-16 object-cover rounded-lg dark:brightness-75">
        <div class="ml-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h3>
          <p class="text-gray-600 dark:text-gray-400">$19.99</p>
        </div>
        <div class="ml-auto">
          <span class="text-gray-700 dark:text-gray-200">Qty: 1</span>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <img src="https://picsum.photos/seed/retro2/80/80" alt="Product Image" class="w-16 h-16 object-cover rounded-lg dark:brightness-75">
        <div class="ml-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h3>
          <p class="text-gray-600 dark:text-gray-400">$29.99</p>
        </div>
        <div class="ml-auto">
          <span class="text-gray-700 dark:text-gray-200">Qty: 2</span>
        </div>
      </div>
      <div class="border-t border-gray-200 dark:border-gray-600 pt-4">
        <div class="flex justify-between">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">Total:</span>
          <span class="text-lg font-semibold text-gray-800 dark:text-white">$79.97</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4">
      <button class="w-full bg-blue-500 dark:bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Checkout</button>
    </div>
  </div>
</div>

Shopping Cart 구성 요소

스큐어모피즘으로 설계된 장바구니 구성 요소입니다. 실제 세계를 모방한 디지털 요소, 완전한 반응형 지원 및 어두운 테마 호환성을 갖추고 있습니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto mt-10 p-5">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-5">Shopping Cart</h2>
    <div class="mb-4">
        <div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
            <img src="https://picsum.photos/50?random=1" alt="Product Image" class="w-16 h-16 rounded shadow-md">
            <div class="flex-1 ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
            </div>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
        </div>
    </div>
    <div class="mb-4">
        <div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
            <img src="https://picsum.photos/50?random=2" alt="Product Image" class="w-16 h-16 rounded shadow-md">
            <div class="flex-1 ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-400">$19.99</p>
            </div>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
        </div>
    </div>
    <div class="flex justify-between font-bold text-lg mt-5">
        <span class="text-gray-800 dark:text-white">Total:</span>
        <span class="text-gray-800 dark:text-white">$49.98</span>
    </div>
    <button class="mt-5 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full">Checkout</button>
</div>

카테고리

Shopping Cart 구성 요소

레트로/빈티지 쇼핑 카트

Shopping Cart 구성 요소

Shopping Cart 구성 요소

Shopping Cart 구성 요소

Shopping Cart 구성 요소

Shopping Cart 구성 요소

뉴모픽 쇼핑 카트

Shopping Cart 구성 요소

Shopping Cart 구성 요소