[김정현] Sprint12

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@tanstack/react-query": "^5.56.2",
+    "@tanstack/react-query-devtools": "^5.58.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/@types/index.d.ts

@@ -9,6 +9,7 @@ interface ProductProps {
   isFavorite?: boolean;
   updateAt?: Date;
   createAt?: Date;
+  ownerId: string;
 }
 
 interface CommentProps {
@@ -30,3 +31,28 @@ type NavigationType = {
   path: string;
   name: string;
 }[];
+
+interface LoginType {
+  email: string;
+  password: string;
+}
+
+interface RegisterType {
+  email: string;
+  nickname: string;
+  password: string;
+  passwordCheck: string;
+}
+
+interface LoginResponseReturnType {
+  accessToken: string;
+  refreshToken: string;
+  user: {
+    id: string;
+    email: string;
+    image: null;
+    nickname: string;
+    updatedAt: Date;
+    createdAt: Date;
+  };
+}

src/App.tsx

@@ -1,13 +1,18 @@
+import { QueryClientProvider } from "@tanstack/react-query";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import Root from "./router/Root";
 import ProductsPage from "./router/ProductsPage";
 import AddItemPage from "./router/AddItemPage";
+import EditItemPage from "./router/EditItemPage";
 import ProductDetailPage, {
   loader as productLoader,
 } from "./router/ProductDetailPage";
 import Register from "./components/Auth/Register";
 import Login from "./components/Auth/Login";
 import Home from "./router/Home";
+import { queryClient } from "./utils/http";
+import PrivateRoute from "./router/PrivateRoute";
 
 const router = createBrowserRouter([
   {
@@ -28,6 +33,10 @@ const router = createBrowserRouter([
         element: <ProductDetailPage />,
         loader: productLoader,
       },
+      {
+        path: "items/:productId/edit",
+        element: <EditItemPage />,
+      },
       {
         path: "additem",
         element: <AddItemPage />,
@@ -36,16 +45,29 @@ const router = createBrowserRouter([
   },
   {
     path: "signin",
-    element: <Login />,
+    element: (
+      <PrivateRoute>
+        <Login />
+      </PrivateRoute>
+    ),
   },
   {
     path: "signup",
-    element: <Register />,
+    element: (
+      <PrivateRoute>
+        <Register />
+      </PrivateRoute>
+    ),
   },
 ]);
 
 function App() {
-  return <RouterProvider router={router} />;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
 }
 
 export default App;

src/components/AddProduct/@types/ProductForm.ts

@@ -1,14 +1,14 @@
 interface Tag {
   id: string;
-  name: string;
+  name?: string;
 }
 
 interface FormInitialValues {
-  imgFile: File | null;
-  title: string;
+  images: string | string[];
+  name: string;
   description: string;
   price: string;
-  tag: Tag[];
+  tags: Tag[];
 }
 
 type ChangeValueType = (

src/components/AddProduct/AddProduct.module.css

@@ -1,4 +1,5 @@
 .formContainer {
+  margin-top: 2.4rem;
   min-height: calc(1233px - 70px);
 }
 .titleContainer {

src/components/AddProduct/AddProduct.tsx

@@ -1,10 +1,37 @@
+import { useNavigate } from "react-router-dom";
+import { useMutation } from "@tanstack/react-query";
 import Section from "../../ui/Section/Section";
 import ProductForm from "./ProductForm";
+import { postProduct, queryClient } from "../../utils/http";
+
+interface Tag {
+  id: string;
+  name?: string;
+}
+
+interface ProductType {
+  images: string[];
+  tags: Tag[];
+  price: string;
+  description: string;
+  name: string;
+}
 
 export default function AddProduct() {
+  const navigate = useNavigate();
+  const { mutate, isPending } = useMutation<ProductType, Error, ProductType>({
+    mutationFn: (data) => postProduct(data, "POST"),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["products"] });
+      navigate("/items");
+    },
+  });
+  const handleAddProductSubmit = (formData: ProductType) => {
+    mutate(formData);
+  };
   return (
     <Section>
-      <ProductForm />
+      <ProductForm isPending={isPending} onSubmit={handleAddProductSubmit} />
     </Section>
   );
 }

src/components/AddProduct/ProductForm.module.css

@@ -1,4 +1,5 @@
 .formContainer {
+  padding-top: 2.4rem;
   min-height: calc(1233px - 70px);
 }
 .titleContainer {