1201 장바구니 목록, 주문 요약, 주문서 작성, 주문 내역

장바구니 목록

pages>Cart.tsx 작성
App.tsx 라우트 작성
components>cart>CartItem.tsx 작성
api>carts.api.ts에서 fetchCart 함수 작성

• get메소드의 리턴 형식 지정 : Cart[]
  useCart 훅 만들기
  • 카트 데이터 전달
  • useState로 cart 데이터, isEmpty여부 셋팅
  • useEffect로 초기 렌더링 시 fetch함수로 데이터 가져오기

Cart.tsx에 useCart 훅으로 cart 정보 셋팅
CartItem.tsx에서 Cart.tsx에서 넘겨준 cart 정보로 컴포넌트 생성

• carts map 반복문 돌리기

CartItem 렌더 화면 만들기

체크버튼 만들기

• CheckIconButton.tsx 에서 아이콘 토글버튼 만들기
• 체크된 상태 데이터 배열을 받아 뿌려주기
  • Cart.tsx에서 useState 사용
  • CartItem.tsx에서 Cart에서 받아온 checkedItems props를 가져와서 판단
    : useMemo 사용

※ useMemo란?
useMemo 는 재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook
큰 배열을 필터링 혹은 변환하거나 비용이 많이 드는 계산을 수행하는 경우, 데이터가 변경되지 않았다면 계산을 생략
참조 링크 : https://ko.react.dev/reference/react/useMemo

 

2025.12.01 - [프레임워크\라이브러리/React] - [Hook] useMemo, useCallback

[Hook] useMemo, useCallback

 

• 체크 기능 함수 작성

장바구니 삭제 기능 구현

• 삭제 api 작성
• useCart에 구현
• Cart.tsx에서 불러와서 구현

삭제 컨펌

• useAlert에서 showConfirm 컴포넌트 새로 만들기

장바구니 비었을 때 컴포넌트 공통 컴포넌트화

• components>common>Empty.tsx를 BooksEmpty.tsx 가져와서 셋팅

---

주문 요약

components>cart>CartSummary.tsx

총수량, 총금액 계산

• useMemo 사용

주문하기 기능 구현

• useNavigate로 라우트 사이 정보 전달

// 이동과 동시에 order 라우트에서 state 데이터 수신 가능
navigate("/order", {state: orderData});

 

Order.tsx 페이지 생성, 라우트 설정

• location에서 state 받아올 수 있음

---

주문서 작성

Order.tsx
useHookForm 사용

주소찾기 버튼 기능 구현

 

※ 다음 카카오 우편번호 검색
참고 링크 : https://postcode.map.daum.net/guide

 

components>order>FindAddressButton.tsx

• 핸들러 함수 정의

const handleOpen = () => {
        new window.daum.Postcode({
            oncomplete: (data: any) => {
                onCompleted(data.address);
            }
        }).open();
    }

➡️ 이때, daum에서 오류 남. 타입 정의 필요

 

src>window.d.ts

interface Window {
    daum: {
        Postcode: any;
    }
}

• 리액트 훅 폼의 setValue 이용해 popup 주소 받아오기
• 서버 전달

order.api.ts

import { OrderSheet } from "../models/order.model";
import { httpClient } from "./http";

export const order = async (orderData:OrderSheet) => {
    const response = await httpClient.post("/orders", orderData); // 모델 타입
    return response.data;
}

---

 

주문내역

order.api.ts

• fetchOrders 함수

hook 만들기 - useOrders

자세히보기 버튼 만들기

• 요청방어 : 이미 가지고 있는 데이터 패치x