AI 웹 개발 : Cursor로 장바구니·결제 UI + UX 최적화 (초보자ㆍ비전공자 실무 강화) | 쇼핑몰 만들기 Part 5

쇼핑몰 장바구니 페이지용 카드 UI를 만들어줘.

조건:
- HTML과 CSS만 사용
- 상품 이미지, 상품명, 가격, 수량 조절 버튼(+,-), 삭제 버튼 포함
- 여러 상품이 반복 렌더링될 수 있도록 구조 설계
- 모바일 우선 반응형 레이아웃
- 클래스명은 직관적으로 작성

 <section class="cart-list">
      <!-- 1번 상품 카드 -->
      <article class="cart-item">
        <div class="cart-item-image-wrap">
          <img src="https://via.placeholder.com/300x300?text=Product+1"
               alt="화이트 스니커즈"
               class="cart-item-image" />
        </div>
        <div class="cart-item-info">
          <div class="cart-item-main">
            <h2 class="cart-item-name">화이트 베이직 스니커즈</h2>
            <div class="cart-item-price">59,000원</div>
            <div class="cart-item-sub-info">옵션: 260 / 화이트</div>
          </div>
          <div class="cart-item-bottom">
            <div class="quantity-control">
              <button class="quantity-button" type="button">-</button>
              <span class="quantity-value">1</span>
              <button class="quantity-button" type="button">+</button>
            </div>
            <button class="cart-item-delete-button" type="button">삭제</button>
          </div>
        </div>
      </article>
</section>

방금 만든 장바구니 카드 UI에
수량 증가(+), 감소(-) 버튼 기능을 JavaScript로 추가해줘.

조건:
- 수량은 1 이하로 내려가지 않도록 제한
- 버튼 클릭 시 수량이 즉시 화면에 반영
- ES6 문법 사용

// ES6 문법을 사용한 수량 조절 기능
    class CartManager {
      constructor() {
        this.init();
      }

      init() {
        // 모든 수량 증가 버튼에 이벤트 리스너 추가
        const increaseButtons = document.querySelectorAll('.quantity-increase');
        increaseButtons.forEach(button => {
          button.addEventListener('click', (e) => this.handleIncrease(e));
        });

        // 모든 수량 감소 버튼에 이벤트 리스너 추가
        const decreaseButtons = document.querySelectorAll('.quantity-decrease');
        decreaseButtons.forEach(button => {
          button.addEventListener('click', (e) => this.handleDecrease(e));
        });

        // 초기 합계 계산
        this.updateTotalPrice();
      }

장바구니에 담긴 상품들의
총 결제 금액을 자동으로 계산하는 기능을 추가해줘.

조건:
- 상품 가격 × 수량 기반 계산
- 수량 변경 시 즉시 반영
- 천 단위 콤마 표시

// 초기 상태: 모든 상품의 가격을 수량에 맞게 업데이트
        const cartItems = document.querySelectorAll('.cart-item');
        cartItems.forEach(item => {
          this.updateItemPrice(item);
        });

현재 장바구니 상태를
브라우저 LocalStorage에 저장하고 불러오는 기능을 추가해줘.

조건:
- 새로고침 시 장바구니 유지
- 상품 추가/삭제/수량 변경 시 자동 저장

// LocalStorage에서 장바구니 데이터 불러오기
      loadCartFromStorage() {
        try {
          const storedData = localStorage.getItem(this.storageKey);
          if (storedData) {
            this.cartItems = JSON.parse(storedData);
          }
        } catch (error) {
          console.error('장바구니 데이터 불러오기 실패:', error);
          this.cartItems = [];
        }
      }

장바구니 하단에 결제 UI를 추가해줘.

구성:
- 주문 상품 요약
- 배송 정보 입력 폼
- 결제 버튼

조건:
- 필수 입력값 없으면 결제 버튼 비활성화
- 실제 결제 연동은 하지 않음

// 결제 폼 이벤트 리스너 설정
      setupCheckoutFormListeners() {
        // 필수 입력 필드에 이벤트 리스너 추가
        const requiredFields = [
          'receiverName',
          'receiverPhone',
          'postcode',
          'address',
          'detailAddress'
        ];

        requiredFields.forEach(fieldId => {
          const field = document.getElementById(fieldId);
          if (field) {
            field.addEventListener('input', () => {
              this.validateField(field);
              this.updateCheckoutButton();
            });
            field.addEventListener('blur', () => {
              this.validateField(field);
              this.updateCheckoutButton();
            });
          }
        });

        // 결제 버튼 클릭 이벤트
        const checkoutButton = document.getElementById('checkoutButton');
        if (checkoutButton) {
          checkoutButton.addEventListener('click', () => {
            this.handleCheckout();
          });
        }
      }

전체 장바구니 + 결제 UI를 기준으로
UX와 반응형을 개선해줘.

조건:
- 모바일 터치 영역 확대
- 클릭 피드백 추가
- 입력 오류 안내 메시지

// 모든 필수 필드 검증
      validateAllFields() {
        const requiredFields = [
          'receiverName',
          'receiverPhone',
          'postcode',
          'address',
          'detailAddress'
        ];

        let allValid = true;
        requiredFields.forEach(fieldId => {
          const field = document.getElementById(fieldId);
          if (field) {
            const isValid = this.validateField(field);
            if (!isValid) {
              allValid = false;
            }
          }
        });

        return allValid;
      }