[장바구니 협업 Step 2] 윤생(이윤성) 미션 제출합니다.

src/Router.tsx

@@ -6,6 +6,8 @@ import { PAGE_ROUTES } from './constants/routes';
 import CartPage from './pages/CartPage/CartPage';
 import EndpointRefresher from './components/EndpointRefresher/EndpointRefresher';
 import Loading from './components/common/Loading/Loading';
+import OrderPage from './pages/OrderPage/OrderPage';
+import OrderDetailPage from './pages/OrderDetailPage/OrderDetailPage';
 
 const Router = () => {
   return (
@@ -17,6 +19,11 @@ const Router = () => {
               <Route element={<Content />}>
                 <Route index element={<ProductPage />} />
                 <Route path={PAGE_ROUTES.CART} element={<CartPage />} />
+                <Route
+                  path={`${PAGE_ROUTES.ORDER}/:orderId`}
+                  element={<OrderDetailPage />}
+                />
+                <Route path={PAGE_ROUTES.ORDER} element={<OrderPage />} />
               </Route>
             </Routes>
           </Layout>

src/apis/api.ts

@@ -14,10 +14,7 @@ import {
 
 const base64 = 'YUBhLmNvbToxMjM0';
 
-const BASE =
-  process.env.NODE_ENV === 'development'
-    ? 'http://localhost:3000/react-shopping-cart/'
-    : 'https://n0eyes.github.io/react-shopping-cart/';
+export const BASE = ENDPOINT['말랑'];
 
 class FetchQuery implements FetchQueryInstance {
   private defaultConfig: ExternalConfig = {};
@@ -106,9 +103,10 @@ class FetchQuery implements FetchQueryInstance {
   }
 }
 
-export const fetchQuery = new FetchQuery({ baseURL: ENDPOINT['말랑'] });
+export const fetchQuery = new FetchQuery({ baseURL: BASE });
+
 export const authFetchQuery = new FetchQuery({
-  baseURL: ENDPOINT['말랑'],
+  baseURL: BASE,
   headers: {
     Authorization: `Basic ${base64}`,
     'Content-Type': 'application/json',

src/apis/api.type.ts

@@ -1,4 +1,8 @@
-import { DuplicateKeys } from '../types/common';
+import type { CartItem } from '../types/cart';
+import type { DuplicateKeys } from '../types/common';
+import type { Coupon, SpecificCoupon } from '../types/coupon';
+import type { Order } from '../types/orders';
+import type { Product } from '../types/products';
 
 export type FetchQueryInstance = {
   [m in Lowercase<Method>]: <T>(
@@ -28,3 +32,33 @@ export type ExternalConfig = Omit<
   baseURL?: string;
   body?: unknown;
 };
+
+export interface AddCartDataReq {
+  productId: number;
+}
+
+export type FetchCartRes = CartItem[];
+
+export interface AddCartDataRes {}
+
+export interface UpdateCartItemRes {}
+
+export interface DeleteCartItemRes {}
+
+export interface FetchCouponsRes {
+  allCoupons: Coupon[];
+  specificCoupons: SpecificCoupon[];
+}
+
+export interface PostOrderRes {
+  cartItemIds: number[];
+  couponIds: number[];
+}
+
+export interface FetchOrdersRes {
+  orders: Order[];
+}
+
+export type FetchDetailOrderRes = Order;
+
+export type FetchProductDataRes = Product[];

src/apis/cart.ts

@@ -1,22 +1,21 @@
-import { CartItem } from '../types/cart';
+import type { CartItem } from '../types/cart';
 import { waitFor, WaitForOptions } from '../utils/waitFor';
 import { authFetchQuery } from './api';
-import { FetchQueryRes } from './api.type';
-
-export type FetchCartRes = CartItem[];
+import type {
+  AddCartDataReq,
+  AddCartDataRes,
+  DeleteCartItemRes,
+  FetchCartRes,
+  FetchQueryRes,
+  UpdateCartItemRes,
+} from './api.type';
 
 export const fetchCart = (options?: WaitForOptions<FetchCartRes>) => {
   const promise = authFetchQuery.get<FetchCartRes>(`/cart-items`);
 
   return waitFor(promise, options);
 };
 
-export interface AddCartDataReq {
-  productId: number;
-}
-
-interface AddCartDataRes {}
-
 export const addToCart: (
   payload: AddCartDataReq
 ) => FetchQueryRes<AddCartDataRes> = ({ productId }) => {
@@ -25,13 +24,6 @@ export const addToCart: (
   });
 };
 
-export interface UpdateCartItemReq {
-  cartId: number;
-  quantity: number;
-}
-
-interface UpdateCartItemRes {}
-
 export const updateCartItem: (
   payload: UpdateCartItemReq
 ) => FetchQueryRes<UpdateCartItemRes> = ({ cartId, quantity }) => {
@@ -40,10 +32,13 @@ export const updateCartItem: (
   });
 };
 
-interface DeleteCartItemRes {}
-
 export const deleteCartItem: (
   id: CartItem['id']
 ) => FetchQueryRes<DeleteCartItemRes> = (id) => {
   return authFetchQuery.delete<DeleteCartItemRes>(`/cart-items/${id}`);
 };
+
+export interface UpdateCartItemReq {
+  cartId: number;
+  quantity: number;
+}

src/apis/coupons.ts

@@ -0,0 +1,6 @@
+import { authFetchQuery } from './api';
+import type { FetchCouponsRes } from './api.type';
+
+export const fetchCoupons = async () => {
+  return authFetchQuery.get<FetchCouponsRes>('/coupons');
+};

src/apis/order.ts

@@ -0,0 +1,33 @@
+import { Order } from '../types/orders';
+import { authFetchQuery } from './api';
+import type {
+  FetchDetailOrderRes,
+  FetchOrdersRes,
+  FetchQueryRes,
+  PostOrderRes,
+} from './api.type';
+
+export const postOrder: (
+  payload: PostOrderRes
+) => FetchQueryRes<PostOrderRes> = ({
+  cartItemIds,
+  couponIds,
+}: PostOrderRes) => {
+  return authFetchQuery.post(`/orders`, {
+    body: { cartItemIds, couponIds },
+  });
+};
+
+export const fetchOrders = async (): FetchQueryRes<FetchOrdersRes> => {
+  const data = await authFetchQuery.get<FetchOrdersRes>('/orders');
+  return data;
+};
+
+export const fetchDetailOrder = async (
+  orderId: number
+): FetchQueryRes<Order> => {
+  const data = await authFetchQuery.get<FetchDetailOrderRes>(
+    `/orders/${orderId}`
+  );
+  return data;
+};

src/apis/products.ts

@@ -1,12 +1,7 @@
-import { Product } from '../types/products';
+import type { FetchProductDataRes, FetchQueryRes } from './api.type';
 import { fetchQuery } from './api';
-import { FetchQueryRes } from './api.type';
-
-type FetchProductDataRes = Product[];
 
 export const fetchProductData =
   async (): FetchQueryRes<FetchProductDataRes> => {
-    const data = await fetchQuery.get<FetchProductDataRes>('/products');
-
-    return data;
+    return fetchQuery.get<FetchProductDataRes>('/products');
   };

src/atoms/cart.ts

@@ -1,32 +1,24 @@
 import { selector, atom, selectorFamily } from 'recoil';
 import { CartItem } from '../types/cart';
 import { fetchCart } from '../apis/cart';
+import { couponsSelector, selectedCouponsState } from './coupons';
+import { getDiscountPrice } from '../domain/discount';
 
-export const cartState = atom({
+export const cartSelector = selector({
   key: 'cart',
-  default: selector({
-    key: 'getMockCart',
-    get: async () => {
-      const { data } = await fetchCart();
-
-      return data;
-    },
-  }),
-});
+  get: async () => {
+    const { data } = await fetchCart();
 
-export const cartItemsAmountSelector = selector({
-  key: 'cartItemsAmountSelector',
-  get: ({ get }) => {
-    return get(cartState).length;
+    return data;
   },
 });
 
-export const selectedItemsState = atom({
-  key: 'selectedItemsState',
+export const selectedCartItemIdsState = atom({
+  key: 'selectedCartItemIdsState',
   default: selector({
-    key: 'selectedItemsStateSelector',
+    key: 'selectedCartItemIdsStateSelector',
     get: ({ get }) => {
-      const cart = get(cartState);
+      const cart = get(cartSelector);
 
       return cart.reduce<Set<CartItem['id']>>(
         (selectedItems, item) => selectedItems.add(item.id),
@@ -36,44 +28,21 @@ export const selectedItemsState = atom({
   }),
 });
 
-export const selectedItemsSelector = selector({
-  key: 'selectedItemsSelector',
-  get: ({ get }) => {
-    const cart = get(cartState);
-    const selectedItems = get(selectedItemsState);
-
-    return cart.reduce<Set<CartItem['id']>>(
-      (newSelectedItems, item) =>
-        selectedItems.has(item.id)
-          ? newSelectedItems.add(item.id)
-          : newSelectedItems,
-      new Set()
-    );
-  },
-  set: ({ set }, newValue) => {
-    set(selectedItemsState, newValue);
-  },
-});
-
-export const selectedItemsAmountSelector = selector({
-  key: 'selectedItemsAmountSelector',
-  get: ({ get }) => get(selectedItemsSelector).size,
-});
-
-export const getCartItemById = selectorFamily({
-  key: 'hasItemInCart',
+export const isSelectedCartId = selectorFamily({
+  key: 'isSelectedCartIdSelector',
   get:
-    (id: CartItem['id']) =>
+    (cartId: number) =>
     ({ get }) => {
-      return get(cartState).find((item) => item.id === id);
+      const selectedCartItems = get(selectedCartItemIdsState);
+      return selectedCartItems.has(cartId);
     },
 });
 
 export const totalPriceSelector = selector({
   key: 'totalPriceSelector',
   get: ({ get }) => {
-    const cart = get(cartState);
-    const selectedItems = get(selectedItemsSelector);
+    const cart = get(cartSelector);
+    const selectedItems = get(selectedCartItemIdsState);
 
     return cart.reduce(
       (totalPrice, { id, quantity, product: { price } }) =>
@@ -82,3 +51,44 @@ export const totalPriceSelector = selector({
     );
   },
 });
+
+export const discountPrice = selector({
+  key: 'discountPriceSelector',
+  get: ({ get }) => {
+    const cart = get(cartSelector);
+    const { allCoupons, specificCoupons } = get(couponsSelector);
+    const selectedCoupons = get(selectedCouponsState);
+    const totalPrice = get(totalPriceSelector);
+
+    if (allCoupons.some((coupon) => selectedCoupons.includes(coupon.id))) {
+      const applyCoupon = allCoupons.find(
+        (coupon) => coupon.id === selectedCoupons[0]
+      );
+      if (!applyCoupon) return 0;
+
+      return getDiscountPrice(applyCoupon, totalPrice);
+    }
+
+    return selectedCoupons.reduce((acc, couponId) => {
+      const applyCoupon = specificCoupons.find(
+        (coupon) => coupon.id === couponId
+      );
+
+      if (!applyCoupon) return acc;
+
+      const applyCartItem = cart.find(
+        (item) => item.product.id === applyCoupon.targetProductId
+      );
+
+      if (!applyCartItem) return acc;
+
+      return (
+        acc +
+        getDiscountPrice(
+          applyCoupon,
+          applyCartItem.product.price * applyCartItem.quantity
+        )
+      );
+    }, 0);
+  },
+});

src/atoms/coupons.ts

@@ -0,0 +1,27 @@
+import { atom, selector, selectorFamily } from 'recoil';
+import { fetchCoupons } from '../apis/coupons';
+
+export const selectedCouponsState = atom<number[]>({
+  key: 'selectedCouponsState',
+  default: [],
+});
+
+export const couponsSelector = selector({
+  key: 'couponsSelector',
+  get: async () => {
+    const { data } = await fetchCoupons();
+    return data;
+  },
+});
+
+export const specificCouponSelector = selectorFamily({
+  key: 'specificCouponSelector',
+  get:
+    (targetCartItemId: number) =>
+    ({ get }) => {
+      const { specificCoupons } = get(couponsSelector);
+      return specificCoupons.filter(
+        (coupon) => coupon.targetProductId === targetCartItemId
+      );
+    },
+});

src/atoms/orders.ts

@@ -0,0 +1,19 @@
+import { selector, selectorFamily } from 'recoil';
+import { fetchDetailOrder, fetchOrders } from '../apis/order';
+
+export const ordersSelector = selector({
+  key: 'ordersSelector',
+  get: async () => {
+    const { data } = await fetchOrders();
+
+    return data;
+  },
+});
+
+export const detailOrderSelector = selectorFamily({
+  key: 'detailOrderSelector',
+  get: (detailId: number) => async () => {
+    const { data } = await fetchDetailOrder(detailId);
+    return data;
+  },
+});