장바구니 목록
- 장바구니 내역 조회
- /cart 경로에서, 서버로부터 fetchCart()를 통해 사용자가 담은 모든 아이템을 가져와 렌더링합니다.
- 수량·가격 합계 표시
- 각 CartItem 컴포넌트에서 수량을 변경하거나 삭제했을 때, CartSummary 컴포넌트가 전체 합계를 계산해 보여줍니다.
- 아이템 삭제
- deleteCart(cartId) 호출로 특정 장바구니 항목을 제거할 수 있으며, 성공 시 로컬 상태(useCart 훅)를 갱신해 즉시 반영합니다.
- 선택 항목으로 주문서 이동
- 사용자가 “주문하기” 버튼을 누르면, 선택된 항목 정보를 Order 페이지로 전송해 주문 화면으로 넘어갑니다.
주문서 작성
- 장바구니로부터 데이터 수신
- useLocation 혹은 Context로 전달된 주문할 항목들을 화면에 리스트 형태로 보여줍니다.
- 주소, 수령인, 전화번호를 입력 및 검증
- FinderAddressButton 등을 통해 우편번호/주소 검색 기능을 제공하고, 입력값 검증 로직으로 빈 값이나 형식 오류를 막습니다.
- 데이터를 가공하여 서버에 전달
- 사용자가 입력한 수량, 배송 정보 등을 모아 order(orderSheet) API를 호출해 주문을 생성합니다.
주문 내역
- 저장된 주문 내역을 목록으로 표시
- fetchOrders()로 과거 주문 헤더(날짜, 총액 등)를 가져와 리스트로 표시합니다.
- 자세히 버튼으로 상세 정보 패널을 토글
- 각 주문 항목 옆 “자세히 보기” 버튼을 누르면 fetchOrder(id)로 해당 주문의 개별 아이템 내역을 패널 형태로 보여줍니다.
useMemo정리
React 컴포넌트는 상태나 props가 바뀔 때마다 모든 함수 컴포넌트 본문이 재실행됩니다. 이 과정에서 비싼 연산(expensive calculation)이 많은 경우 성능 저하가 발생할 수 있습니다.
useMemo는 특정 값이 변할 때만 연산을 재실행하게 도와주는 훅입니다.const totalPrice = useMemo(() => { // 매 렌더링마다 재계산되지 않고, // cartItems가 바뀔 때만 수행됨 return cartItems.reduce((sum, item) => sum + item.price * item.qty, 0); }, [cartItems]);첫 번째 인자: 계산 함수
두 번째 인자: 의존성 배열(deps)이 변할 때만 재실행
!!!주의: 남용하면 코드 복잡도만 늘어나니, 실제로 “연산 비용이 높다”고 판단되는 곳에 한정해 사용
