feat: 서버에 따라 렌더링이 달라지게 구현

src/components/Cart/CartItemList/index.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import * as S from './CartItemList.styles';
 import CartItem from 'components/Cart/CartItem';
-import Spinner from 'components/@common/Spinner';
 import Modal from 'components/@common/Modal';
 import { useCheckedItemIds } from '../hooks/useCheckedItems';
 import { useModal } from 'hooks/useModal';
@@ -17,13 +16,6 @@ const CartItemList = () => {
     checkAllItems();
   }, []);
 
-  const loading = (
-    <S.Loading>
-      <Spinner />
-      <S.LoadingText>장바구니를 불러오는 중입니다...</S.LoadingText>
-    </S.Loading>
-  );
-
   const fetchedCartList =
     cartList.length === 0 ? (
       <S.EmptyList>장바구니가 비어있습니다.</S.EmptyList>

src/components/Product/ProductItemList/index.tsx

@@ -1,28 +1,16 @@
 import * as S from './ProductItemList.styles';
 import ProductItem from 'components/Product/ProductItem';
-import LoadingSkeleton from 'components/Product/ProductItem/LoadingSkeleton';
-import { useGet } from 'hooks/useGet';
-import { Product } from 'types';
-import { getProductList } from 'api/requests';
+import { productListSelector } from 'recoil/productList';
+import { useRecoilValue } from 'recoil';
 
 const ProductItemList = () => {
-  const { data, isLoading } = useGet<Product[]>(getProductList);
-
-  const loading = Array.from({ length: 16 }).map((_, idx) => (
-    <LoadingSkeleton key={idx} />
-  ));
+  const data = useRecoilValue(productListSelector);
 
   const fetchedProductList =
     data &&
     data.map((product) => <ProductItem key={product.id} product={product} />);
 
-  return (
-    <>
-      <S.ProductListWrapper>
-        {isLoading ? loading : fetchedProductList}
-      </S.ProductListWrapper>
-    </>
-  );
+  return <S.ProductListWrapper>{fetchedProductList}</S.ProductListWrapper>;
 };
 
 export default ProductItemList;

src/pages/CartList.tsx

@@ -2,13 +2,16 @@ import { styled } from 'styled-components';
 import ContentLayout from 'components/@common/ContentLayout';
 import PaymentDetail from 'components/Cart/PaymentDetail';
 import CartItemList from 'components/Cart/CartItemList';
+import { Suspense } from 'react';
 
 const CartList = () => {
   return (
     <ContentLayout>
       <Title>🛒 장바구니 🛒</Title>
       <Container>
-        <CartItemList />
+        <Suspense fallback={<div>loading...</div>}>
+          <CartItemList />
+        </Suspense>
         <PaymentDetailWrapper>
           <PaymentDetail />
         </PaymentDetailWrapper>

src/recoil/cartList.ts

@@ -1,14 +1,15 @@
 import { getCartList } from 'api/requests';
 import { atom, selector } from 'recoil';
 import { Cart } from 'types';
-import { SERVERS } from 'utils/constants';
+import { serverAtom } from './server';
 
 export const cartListAtom = atom<Cart[]>({
   key: 'cartList',
   default: selector({
     key: 'initialCartList',
-    get: async () => {
-      const data = await getCartList(SERVERS['여우']);
+    get: async ({ get }) => {
+      const server = get(serverAtom);
+      const data = await getCartList(server);
       return data;
     },
   }),

src/recoil/productList.ts

@@ -0,0 +1,16 @@
+import { getProductList } from 'api/requests';
+import { atom, selector } from 'recoil';
+import { Product } from 'types';
+import { serverAtom } from './server';
+
+export const productListSelector = atom<Product[]>({
+  key: 'productList',
+  default: selector({
+    key: 'initalProductList',
+    get: async ({ get }) => {
+      const server = get(serverAtom);
+      const data = await getProductList(server);
+      return data;
+    },
+  }),
+});

src/router/index.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 import ProductList from 'pages/ProductList';
 import CartList from 'pages/CartList';
@@ -7,7 +8,11 @@ const router = createBrowserRouter(
   [
     {
       path: '/',
-      element: <ProductList />,
+      element: (
+        <Suspense>
+          <ProductList />
+        </Suspense>
+      ),
       errorElement: <NotFound />,
     },
     {