[김태완] Sprint12

package.json

@@ -1,54 +1,120 @@
 {
 
   "name": "reacttotype",
+
   "version": "0.1.0",
+
   "private": true,
+
   "dependencies": {
+
     "@reduxjs/toolkit": "^2.4.0",
+
+    "@tanstack/react-query": "^5.62.16",
+
+    "@tanstack/react-query-devtools": "^5.62.16",
+
     "@testing-library/jest-dom": "^5.17.0",
+
     "@testing-library/react": "^13.4.0",
+
     "@testing-library/user-event": "^13.5.0",
+
     "@types/jest": "^27.5.2",
+
     "@types/node": "^16.18.119",
+
     "@types/react": "^18.3.12",
+
     "@types/react-dom": "^18.3.1",
+
     "axios": "^1.7.9",
+
+    "clsx": "^2.1.1",
+
     "jwt-decode": "^4.0.0",
+
+    "lodash": "^4.17.21",
+
     "react": "^18.3.1",
+
     "react-dom": "^18.3.1",
+
     "react-hook-form": "^7.53.2",
+
     "react-redux": "^9.1.2",
+
     "react-router-dom": "^6.28.0",
+
     "react-scripts": "5.0.1",
+
+    "react-toastify": "^11.0.2",
+
     "redux": "^5.0.1",
+
     "typescript": "^4.9.5",
+
     "web-vitals": "^2.1.4"
+
   },
+
   "scripts": {
+
     "start": "react-scripts start",
+
     "build": "react-scripts build",
+
     "test": "react-scripts test",
+
     "eject": "react-scripts eject"
+
   },
+
   "eslintConfig": {
+
     "extends": [
+
       "react-app",
+
       "react-app/jest"
+
     ]
+
   },
+
   "browserslist": {
+
     "production": [
+
       ">0.2%",
+
       "not dead",
+
       "not op_mini all"
+
     ],
+
     "development": [
+
       "last 1 chrome version",
+
       "last 1 firefox version",
+
       "last 1 safari version"
+
     ]
+
   },
+
   "devDependencies": {
+
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+
+    "@types/lodash": "^4.17.14",
+
     "@types/react-router-dom": "^5.3.3"
+
   }
+
 }
+

src/.env

@@ -0,0 +1 @@
+API_BASE_URL = https://panda-market-api.vercel.app

src/App.css

@@ -3,3 +3,18 @@
   margin: 0;
   padding: 0;
 }
+
+:root {
+  --color-blue-100: #111827;
+  --color-blue-200: #3692ff;
+  --color-blue-300: #1f2937;
+  --color-blue-400: #4b5563;
+  --color-blue-500: #6b7280;
+  --color-blue-600: #9ca3af;
+
+  --color-white-100: #f9fafb;
+  --color-white-200: #ffffff;
+  --color-white-300: #e5e7eb;
+  --color-white-400: #f3f4f6;
+  --color-white-500: #fcfcfc;
+}

src/App.tsx

@@ -10,32 +10,66 @@ import FAQ from "./components/FAQ";
 import LoginPage from "./page/LoginPage";
 import RegisterPage from "./page/RegisterPage";
 import { useSelector } from "react-redux";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import "react-toastify/dist/ReactToastify.css";
+import { ToastContainer } from "react-toastify";
+import AddBoardPage from "./page/AddBoardPage";
+import BoardsPage from "./page/BoardsPage";
+import BoardPage from "./page/BoardPage";
+
+const queryClient = new QueryClient();
 
 function App() {
   const count = useSelector((state: any) => state.counter.value);
   return (
-    <Routes>
-      <Route path={ROUTES.LANDING} element={<LandingPage />} />
-      <Route
-        path={ROUTES.LOGIN}
-        element={
-          count === true ? <Navigate to={ROUTES.LANDING} /> : <LoginPage />
-        }
-      />
-      <Route
-        path={ROUTES.REGISTER}
-        element={
-          count === true ? <Navigate to={ROUTES.LANDING} /> : <RegisterPage />
-        }
+    <QueryClientProvider client={queryClient}>
+      <ToastContainer
+        position="top-right"
+        autoClose={2000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="light"
       />
-      <Route path={ROUTES.PRIVACY} element={<Privacy />} />
-      <Route path={ROUTES.FAQ} element={<FAQ />} />
-      <Route path={ROUTES.MAIN}>
-        <Route index element={<MainPage />} />
-        <Route path=":productId" element={<DetailItemPage />} />
-      </Route>
-      <Route path={ROUTES.ADD_ITEM} element={<AddItemPage />} />
-    </Routes>
+      <Routes>
+        <Route path={ROUTES.LANDING} element={<LandingPage />} />
+        <Route
+          path={ROUTES.LOGIN}
+          element={
+            count === true ? <Navigate to={ROUTES.LANDING} /> : <LoginPage />
+          }
+        />
+        <Route
+          path={ROUTES.REGISTER}
+          element={
+            count === true ? <Navigate to={ROUTES.LANDING} /> : <RegisterPage />
+          }
+        />
+        <Route path={ROUTES.PRIVACY} element={<Privacy />} />
+        <Route path={ROUTES.FAQ} element={<FAQ />} />
+        <Route path={ROUTES.BOARDS} element={<BoardsPage />} />
+        <Route path={ROUTES.MAIN}>
+          <Route index element={<MainPage />} />
+          <Route path=":productId" element={<DetailItemPage />} />
+        </Route>
+        <Route path={ROUTES.BOARD}>
+          <Route index element={<BoardPage />} />
+          <Route path=":id" element={<BoardPage />} />
+        </Route>
+        <Route path={ROUTES.ADD_ITEM}>
+          <Route index element={<AddItemPage />} />
+          <Route path=":productId" element={<AddItemPage />} />
+        </Route>
+        <Route path={ROUTES.ADD_BOARD}>
+          <Route index element={<AddBoardPage />} />
+          <Route path=":articleId" element={<AddBoardPage />} />
+        </Route>
+      </Routes>
+    </QueryClientProvider>
   );
 }