흐름

1. 각각의 product card에는 장바구니 버튼이 있는데, 이 버튼을 누르게 되면 해당 상품이 전역 + 로컬스토리지에 있는 zustand persist에 담기게 된다. 그게 바로 use-cart 커스텀 훅

   

   import { create } from 'zustand';
   import { toast } from 'react-hot-toast';
   import { persist, createJSONStorage } from 'zustand/middleware';
   
   import { Product } from '@/types';
   import { AlertTriangle } from 'lucide-react';
   
   interface CartStore {
     items: Product[];
     addItem: (data: Product) => void;
     removeItem: (id: string) => void;
     removeAll: () => void;
   }
   
   const useCart = create(
     persist<CartStore>(
       (set, get) => ({
         items: [],
         addItem: (data: Product) => {
           const currentItems = get().items;
           const existingItem = currentItems.find((item) => item.id === data.id);
   
           if (existingItem) {
             return toast('Item already in cart.');
           }
   
           set({ items: [...get().items, data] });
           toast.success('Item added to cart.');
         },
         removeItem: (id: string) => {
           set({ items: [...get().items.filter((item) => item.id !== id)] });
           toast.success('Item removed from cart.');
         },
         removeAll: () => set({ items: [] }),
       }),
       {
         name: 'cart-storage',
         storage: createJSONStorage(() => localStorage),
       }
     )
   );
   
   export default useCart;
   

   • 관리하고 있는 상태를 보면
     • items : 각각의 프로덕트를 배열로 저장
     • addItem : 해당 프로덕트를 items배열에 저장, 그전에 이미 해당 제품이 장바구니에 있다면, 취소
     • removeItem : 특정 프로덕트 item을 제거
     • removeAll : items배열을 비운다.

2. product-card 컴포넌트에서 장바구니 버튼을 누를시, card.addItem(누른해당프로덕트)를 넘긴다.

   const onAddCart: MouseEventHandler<HTMLButtonElement> = (event) => {
       event.stopPropagation();
   		// data가 해당 누른 프로덕트
       cart.addItem(data);
     };
   

3. 우측 상단의 장바구니 버튼을 누르면 장바 구니 패이지로 이동한다. (장바구니 페이지 새로 생성)

   

   • 좌측은 CartItem이라는 컴포넌트
     • 장바구니에 넣었던 아이템들을 List로 보여준다.
     • 여기서는 해당 상품을 삭제할수 있다.
   • 우측은 Summary라는 컴포넌트

4. ⭐️⭐️⭐️⭐️⭐️ Summary 컴포넌트에서 checkout 했을때의 함수가 중요하다. ⭐️⭐️⭐️⭐️⭐️

   1. 일단 axios post요청으로 해당 프로덕트의 item들을 배열에 넣어 데이터에 보낸다.
   2. axios post 요청에 성공한 후에, 응답데이터로 넘어온 success혹은 canceled를 가지고 url에 노출시켜 리다이렉트 시킨다.
   3. 리다이렉트 후 useEffect에서 searchParams로 success혹은 canceld를 가져와서
      1. 성공하면 성공! Toast를 띄우고 장바구니에 있는 아이템들을 지운다.
      2. 실패하면 something wrong이라는 toast를 띄우고, 에러 메시지를 남긴다.