[장바구니 협업 Step 2] 우디(류정우) 미션 제출합니다.

craco.config.js

@@ -0,0 +1,13 @@
+const CracoAlias = require('craco-alias');
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoAlias,
+      options: {
+        source: 'tsconfig',
+        tsConfigPath: './tsconfig.paths.json',
+      },
+    },
+  ],
+};

package.json

@@ -4,8 +4,11 @@
   "homepage": "https://evencoding.github.io/react-shopping-cart/",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^7.1.0",
+    "craco-alias": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.9",
     "react-router-dom": "^6.11.1",
     "react-scripts": "5.0.1",
     "recoil": "^0.7.7",
@@ -15,10 +18,10 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "craco eject",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "predeploy": "npm run build",

src/App.tsx

@@ -1,42 +1,20 @@
 import { useEffect } from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-
-import { useSetCartState } from './recoils/recoilCart';
-import { useQuery } from './hooks/useQuery';
-
 import GlobalStyle from './GlobalStyle';
 
-import { useApiBaseUrlValue } from './recoils/recoilApiBaseUrl';
-
-import { Home } from './components/pages/Home';
-import { ShoppingCart } from './components/pages/ShoppingCart';
-
-import { CartItemType } from './types';
-import { FETCH_URL, PATH } from './constants';
+import { useCartRepository } from '@recoils/cartAtoms';
+import { Router } from './router';
 
 export const App = () => {
-  const baseUrl = useApiBaseUrlValue();
-  const { data: cart } = useQuery<CartItemType[]>(baseUrl + FETCH_URL.CART_ITEMS, {
-    Authorization: `Basic ${btoa(process.env.REACT_APP_API_CREDENTIAL!)}`,
-  });
-
-  const setCartState = useSetCartState();
+  const { fetchCartItems } = useCartRepository();
 
   useEffect(() => {
-    if (!cart) return;
-
-    setCartState(cart);
-  }, [cart, setCartState]);
+    fetchCartItems();
+  }, [fetchCartItems]);
 
   return (
     <>
       <GlobalStyle />
-      <BrowserRouter basename={process.env.PUBLIC_URL}>
-        <Routes>
-          <Route path={PATH.HOME} Component={Home} />
-          <Route path={PATH.CART} Component={ShoppingCart} />
-        </Routes>
-      </BrowserRouter>
+      <Router />
     </>
   );
 };

src/GlobalStyle.ts

@@ -11,12 +11,15 @@ const GlobalStyle = createGlobalStyle`
   }
 
   :root {
-    --primary-color: #5f0080;
+    --primary-color: #00B9B3;
+    --blue: #006DF9;
+
     --grey-100: #ffffff;
-    --grey-200: #dddddd;
-    --grey-300: #aaaaaa;
+    --grey-200: #F1F3F6;
+    --grey-300: #E5E5E5;
     --grey-400: #333333;
-    --grey-500: #000000;
+
+    --red: #FF5C23;
   }
 
   *, *::before, *::after {
@@ -26,6 +29,8 @@ const GlobalStyle = createGlobalStyle`
 
   body {
     font-family: 'Baemin';
+
+    color:var(--grey-400)
   }
 
   input[type="checkbox"] {
@@ -67,6 +72,10 @@ const GlobalStyle = createGlobalStyle`
     margin:0;
   }
 
+  li {
+    list-style: none;
+  }
+
   a {
     text-decoration: none;
     outline: none;