[React] 장바구니 구현 (회원, 비회원)

📖 장바구니 기능

 

✅ 1. 상품 상세 페이지 → 장바구니 추가

• 옵션 선택 필수 (예: 사이즈, 색상 등)
• 수량 지정 가능
• 로그인 여부에 따라 처리 방식 분기:
  • 회원: 서버 API 호출 (addToCart)
  • 비회원: 로컬스토리지 저장 (addToGuestCart)
• 중복 옵션일 경우:
  • 동일 옵션 상품이 이미 담겨 있으면 → 수량만 증가

✅ 2. 장바구니 목록 페이지

• 로그인 여부에 따라 다른 리스트 컴포넌트 랜더링
  • 회원: MemberCartList
  • 비회원: GuestCartList

공통 UI 기능

• 상품 썸네일, 이름, 선택 옵션 표시
• 각 항목에 대해:
  • 수량 변경 (직접 입력 + "변경" 버튼)
  • 옵션 변경 (모달 또는 팝업으로 옵션 선택 후 변경)
  • 개별 삭제 버튼
• 전체/선택 항목 삭제
• 선택된 항목 기준:
  • 총 상품금액
  • 배송비 계산 (예: 7만원 이상 무료)
  • 결제예정금액 표시

---

📌 회원, 비회원 분기 기점 ( 로그인 여부 ) 

: 장바구니 담기 클릭 시

: 장바구니 페이지 

	저장 위치	상태 관리	설명
회원	서버 DB	API	addToCart API 호출, 서버에 저장
비회원	localStorage	zustand	상태 관리 + 영속성 저장 겸함

📂 파일 구성

 

*회원용 장바구니 

api - cartApis ( 추가, 조회, 수정, 삭제 api ) 

page - MemberCartList (UI 장바구니 목록-api 호출)

 

*비회원용 장바구니

hooks - useAddToCart  (회원, 비회원 모두 처리- 로그인여부 분기처리)

utils - guestCartUtils(로컬스토리지 직접 접근)

store - guestCartStore(비회원 장바구니 상태 관리)

page - GuestCartList (UI 장바구니 목록-zustand 구독)

 

🧾 회원 장바구니 로직 구성 정리

 

apis/cartApis.js

• 역할: 회원 장바구니 관련 API 함수 집합
• 기능:
  • addToCart(payload) : 상품 장바구니에 추가
  • getCartItems() : 장바구니 목록 조회
  • updateCartItem(payload) : 수량 또는 옵션 변경
  • deleteCartItems(payload) : 항목 또는 전체 삭제

🔸 서버와 직접 통신하며 DB에 반영

 

hooks/useAddToCart.js

• 역할: 로그인 여부에 따라 장바구니 추가 로직 분기 처리
• 기능:
  • 회원인 경우: cartApis.addToCart() 호출
  • API 응답 없이 실패/성공 처리 알림

pages/MemberCartList.js

• 역할: 회원 장바구니 목록 화면 UI
• 기능:
  • getCartItems() 호출하여 장바구니 데이터 로드
  • 수량 변경 → updateCartItem() 호출
  • 항목 삭제 → deleteCartItems() 호출
  • 옵션 변경 → updateCartItem() 호출
  • 선택 상품 총합, 배송비, 결제금액 계산 및 렌더링

---

🛒 비회원 장바구니 로직 구성 정리

 

hooks/useAddToCart.js

• 역할: 장바구니 추가 로직 공통 처리
• 기능:
  • 로그인 여부 확인 (authStore.isLogin)
  • 회원: addToCart API 호출
  • 비회원:
    • 상품 정보를 로컬스토리지용 포맷으로 가공
    • guestCartUtils의 addToGuestCart() 호출
    • guestCartStore에 상태 저장 → UI 반영

utils/guestCartUtils.js

• 역할: 로컬스토리지 직접 접근하는 유틸 함수 집합
• 기능:
  • getGuestCart() : 로컬스토리지에서 장바구니 불러오기
  • setGuestCart(cartItems) : 장바구니 전체 저장
  • addToGuestCart(item) : 기존 아이템이면 수량만 증가
  • removeFromGuestCart(productOptionId) : 해당 상품 제거
  • updateGuestCartItem(productOptionId, updates) : 수량 또는 옵션 변경
  • clearGuestCart() : 장바구니 전체 비우기

🔸 store에 직접 접근하지 않고, 로컬스토리지만 조작

 

store/guestCartStore.js (Zustand)

• 역할: UI에서 사용할 비회원 장바구니 상태 관리
• 기능:
  • cartItems : 현재 장바구니 상태
  • addItem(item) : zustand에 반영 + 로컬스토리지에 저장
  • updateQuantity(productOptionId, quantity) : 수량 변경
  • removeItem(productOptionId) : 항목 삭제
  • clearCart() : 전체 비우기

🔸 내부적으로 guestCartUtils 함수들을 호출해서 로컬스토리지와 상태 동기화

 

pages/GuestCartList.js

• 역할: 비회원 장바구니 UI 페이지
• 기능:
  • useGuestCartStore()로 zustand 상태 구독
  • 수량 변경, 삭제, 옵션변경 처리
  • 금액 계산 및 배송비 로직 처리
  • 상품 목록 UI 렌더링

---

 

+ 추가적으로 해야 할 장바구니 기능 

- 상품 카드 자체에서 바로 장바구니 담기 (장바구니 아이콘 클릭 - 상품옵션 선택 - 담기)

- 옵션 변경에서 추가 버튼 로직 구현

- 비회원일 때 장바구니 정보를 로그인, 회원가입 시 마이그레이션