1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// cartSlice.test.js
import cartReducer, { itemAdded, itemRemoved } from "./cartSlice";

test("itemAdded는 새 상품을 장바구니에 추가한다", () => {
  const initialState = { items: [] };
  const action = itemAdded({ id: "p1", price: 10000, quantity: 1 });

  const newState = cartReducer(initialState, action);

  expect(newState.items).toHaveLength(1);
  expect(newState.items[0]).toEqual({ id: "p1", price: 10000, quantity: 1 });
  expect(initialState.items).toHaveLength(0); // 08편: 원본 state는 절대 변경되지 않아야 한다
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// checkoutThunk.test.js
import { submitOrder } from "./checkoutThunk";
import { checkoutRejected } from "./checkoutSlice";

test("장바구니가 비어있으면 checkoutRejected를 dispatch한다", async () => {
  const dispatch = jest.fn(); // 실제 Store 없이 함수 호출만 기록하는 가짜 dispatch
  const getState = () => ({ cart: { items: [] } });

  await submitOrder()(dispatch, getState); // thunk 함수를 직접 호출

  expect(dispatch).toHaveBeenCalledWith(checkoutRejected("장바구니가 비어 있습니다"));
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// productsApi.test.js
import { setupServer } from "msw/node";
import { http, HttpResponse } from "msw";
import { productsApi } from "./productsApi";
import { setupApiStore } from "../../test-utils/setupApiStore"; // configureStore로 테스트 전용 store를 만드는 헬퍼

const server = setupServer(
  http.get("/api/products", () => HttpResponse.json([{ id: "p1", name: "키보드", price: 50000 }]))
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test("getProducts는 상품 목록을 가져와 캐시한다", async () => {
  const storeRef = setupApiStore(productsApi);
  const result = await storeRef.store.dispatch(productsApi.endpoints.getProducts.initiate());

  expect(result.data).toEqual([{ id: "p1", name: "키보드", price: 50000 }]);
});

1
2
3
4
5
6
7
8
9

test("서버 에러 시 isError가 true가 된다", async () => {
  server.use(http.get("/api/products", () => HttpResponse.json({ message: "서버 오류" }, { status: 500 })));

  const storeRef = setupApiStore(productsApi);
  const result = await storeRef.store.dispatch(productsApi.endpoints.getProducts.initiate());

  expect(result.isError).toBe(true);
  expect(result.error.status).toBe(500);
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Cart.test.jsx
import { render, screen, fireEvent } from "@testing-library/react";
import { Provider } from "react-redux"; // 11편의 Provider
import { configureStore } from "@reduxjs/toolkit";
import cartReducer from "./cartSlice";
import { Cart } from "./Cart";

function renderWithStore(preloadedState) {
  const store = configureStore({ reducer: { cart: cartReducer }, preloadedState });
  return render(
    <Provider store={store}>
      <Cart />
    </Provider>
  );
}

test("삭제 버튼을 클릭하면 해당 상품이 목록에서 사라진다", () => {
  renderWithStore({ cart: { items: [{ id: "p1", name: "키보드", quantity: 1 }] } });

  expect(screen.getByText("키보드")).toBeInTheDocument();
  fireEvent.click(screen.getByRole("button", { name: "삭제" }));
  expect(screen.queryByText("키보드")).not.toBeInTheDocument();
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

src/
  app/
    store.ts            # 18·28편: configureStore + RootState/AppDispatch
    hooks.ts             # 28편: 타입 지정된 useAppSelector/useAppDispatch
  features/
    products/
      productsApi.ts     # 24·27·28편: RTK Query + entityAdapter + TypeScript
      ProductList.tsx
    cart/
      cartSlice.ts        # 17편: createSlice, 08편: 불변 업데이트
      cartSelectors.ts     # 14편: createSelector로 합계 메모이제이션
      Cart.tsx
    checkout/
      checkoutSlice.ts      # 17편: 체크아웃 상태 전이 관리
      checkoutThunk.ts      # 22편: 복잡한 검증+dispatch 조합
      OrderConfirmation.tsx
  shared/
    api/baseApi.ts         # 26편: injectEndpoints 공유 기반

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// features/cart/cartSlice.ts — 17·28편 통합
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}
interface CartState {
  items: CartItem[];
}

const cartSlice = createSlice({
  name: "cart",
  initialState: { items: [] } as CartState,
  reducers: {
    itemAdded: (state, action: PayloadAction<CartItem>) => {
      const existing = state.items.find((i) => i.id === action.payload.id);
      if (existing) {
        existing.quantity += action.payload.quantity; // Immer draft — 08편의 원칙이 내부적으로 지켜짐
      } else {
        state.items.push(action.payload);
      }
    },
    itemRemoved: (state, action: PayloadAction<string>) => {
      state.items = state.items.filter((i) => i.id !== action.payload);
    },
  },
});

export const { itemAdded, itemRemoved } = cartSlice.actions;
export default cartSlice.reducer;

1
2
3
4
5
6
7
8
9

// features/cart/cartSelectors.ts — 14편
import { createSelector } from "@reduxjs/toolkit";
import type { RootState } from "../../app/store";

const selectCartItems = (state: RootState) => state.cart.items;

export const selectCartTotal = createSelector([selectCartItems], (items) =>
  items.reduce((sum, item) => sum + item.price * item.quantity, 0)
);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// features/products/productsApi.ts — 24·27·28편 통합: RTK Query + createEntityAdapter
import { createEntityAdapter, createSelector, EntityState } from "@reduxjs/toolkit";
import { baseApi } from "../../shared/api/baseApi"; // 26편: injectEndpoints 공유 기반
import type { RootState } from "../../app/store";

interface Product {
  id: string;
  name: string;
  price: number;
}

const productsAdapter = createEntityAdapter<Product>();

export const productsApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    getProducts: builder.query<EntityState<Product>, void>({
      query: () => "/products",
      transformResponse: (response: Product[]) =>
        productsAdapter.setAll(productsAdapter.getInitialState(), response), // 배열 → 정규화된 캐시 형태
      providesTags: ["Product"],
    }),
  }),
});

export const { useGetProductsQuery } = productsApi;

// 쿼리 캐시 결과에서 정규화된 데이터만 추출한 뒤 표준 selector로 감싼다
const selectProductsResult = productsApi.endpoints.getProducts.select();
const selectProductsData = createSelector(selectProductsResult, (result) => result.data);

export const { selectAll: selectAllProducts, selectById: selectProductById } =
  productsAdapter.getSelectors(
    (state: RootState) => selectProductsData(state) ?? productsAdapter.getInitialState()
  );

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// features/checkout/checkoutSlice.ts — 17편: createSlice로 체크아웃 상태 전이 관리
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface CheckoutState {
  status: "idle" | "loading" | "succeeded" | "failed"; // 19편과 동일한 상태 모델
  error: string | null;
}

const checkoutSlice = createSlice({
  name: "checkout",
  initialState: { status: "idle", error: null } as CheckoutState,
  reducers: {
    checkoutStarted: (state) => {
      state.status = "loading";
      state.error = null;
    },
    checkoutSucceeded: (state) => {
      state.status = "succeeded";
    },
    checkoutFailed: (state, action: PayloadAction<string>) => {
      state.status = "failed";
      state.error = action.payload;
    },
    checkoutRejected: (state, action: PayloadAction<string>) => {
      state.status = "failed";
      state.error = action.payload;
    },
  },
});

export const { checkoutStarted, checkoutSucceeded, checkoutFailed, checkoutRejected } = checkoutSlice.actions;
export default checkoutSlice.reducer;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// features/checkout/checkoutThunk.ts — 22·28편
import type { AppDispatch, RootState } from "../../app/store";
import { itemRemoved } from "../cart/cartSlice";
import { checkoutStarted, checkoutSucceeded, checkoutFailed, checkoutRejected } from "./checkoutSlice";

export const submitOrder = () => async (dispatch: AppDispatch, getState: () => RootState) => {
  const { items } = getState().cart;
  if (items.length === 0) {
    dispatch(checkoutRejected("장바구니가 비어 있습니다"));
    return;
  }
  dispatch(checkoutStarted());
  try {
    const response = await fetch("/api/orders", { method: "POST", body: JSON.stringify({ items }) });
    if (!response.ok) throw new Error("주문 처리에 실패했습니다");
    dispatch(checkoutSucceeded());
    items.forEach((item) => dispatch(itemRemoved(item.id))); // 09편: 성공 후 후속 액션 조합
  } catch (error) {
    dispatch(checkoutFailed((error as Error).message));
  }
};