[이상달] sprint6

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/App.jsx

@@ -1,7 +1,10 @@
 import { Outlet } from "react-router-dom";
-import Header from "./components/Header";
+import Header from "./components/layout/Header";
+import useScrollToTop from "./hooks/useScrollToTop";
 
 function App() {
+  useScrollToTop();
+
   return (
     <>
       <Header />

src/Main.jsx

@@ -1,18 +1,23 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import App from "./App";
-import ItemsPage from "./pages/ItemsPage";
-import BoardPage from "./pages/BoardPage";
-import AddItemPage from "./pages/AddItemPage";
+import ProductsPage from "./pages/products/ProductsPage";
+import BoardPage from "./pages/board/BoardPage";
+import AddProductPage from "./pages/products/AddProductPage";
+import ProductsLayout from "./pages/products/ProductsLayout";
 
 const Main = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<App />}>
-          <Route index element={<ItemsPage />} />
-          <Route path="/items" element={<ItemsPage />} />
+          <Route index element={<ProductsPage />} />
+
+          <Route path="/products" element={<ProductsLayout />}>
+            <Route index element={<ProductsPage />} />
+            <Route path="addProduct" element={<AddProductPage />} />
+          </Route>
+
           <Route path="/board" element={<BoardPage />} />
-          <Route path="/addItem" element={<AddItemPage />} />
         </Route>
       </Routes>
     </BrowserRouter>

src/components/Avatar/Avatar.jsx

@@ -1,11 +1,21 @@
-import styles from "./Avatar.module.css";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
 
 const Avatar = ({ imgSrc, onClick, className }) => {
   return (
-    <button onClick={onClick} className={`avatar ${className}`}>
-      <img src={imgSrc} alt="프로필 이미지" className={styles["avatar-img"]} />
+    <button
+      css={AvatarStyle}
+      className={`avatar ${className}`}
+      onClick={onClick}
+    >
+      <img src={imgSrc} alt="프로필 이미지" />
     </button>
   );
 };
 
 export default Avatar;
+
+const AvatarStyle = css`
+  width: 40px;
+  height: 40px;
+`;

src/components/Form/AddProductForm.jsx

@@ -0,0 +1,88 @@
+/** @jsxImportSource @emotion/react */
+import * as styles from "./AddProductFormStyle";
+import SectionTitle from "../ui/SectionTitle";
+import Button from "../ui/Button";
+import FormControl from "../ui/Form/FormControl";
+import FormLabel from "../ui/Form/FormLabel";
+import ImageFileUploader from "../ImageFileUploader/ImageFileUploader";
+import Input from "../ui/Input";
+import Textarea from "../ui/Textarea";
+import TagsInput from "../ui/Tag/TagsInput";
+import useForm from "../../hooks/useForm";
+
+const AddProductForm = ({ title }) => {
+  const {
+    tags,
+    handleTagsChange,
+    handlePriceInput,
+    handleBlur,
+    validateForm,
+    isFormValid,
+  } = useForm();
+
+  return (
+    <form css={styles.ProductFormContainer} onSubmit={validateForm}>
+      <header css={styles.FormHeader}>
+        <SectionTitle title={title} />
+        <Button
+          size="sm"
+          variant="primary"
+          disabled={!isFormValid}
+          type="submit"
+        >
+          등록
+        </Button>
+      </header>
+
+      <FormControl>
+        <FormLabel>상품 이미지</FormLabel>
+        <ImageFileUploader />
+      </FormControl>
+
+      <FormControl>
+        <FormLabel inputId="productName">상품명</FormLabel>
+        <Input
+          id="productName"
+          name="name"
+          placeholder="상품명을 입력해주세요"
+          onBlur={handleBlur}
+        />
+      </FormControl>
+
+      <FormControl>
+        <FormLabel inputId="productDesc">상품 소개</FormLabel>
+        <Textarea
+          id="productDesc"
+          name="description"
+          placeholder="상품 소개를 입력해주세요"
+          onBlur={handleBlur}
+        />
+      </FormControl>
+
+      <FormControl>
+        <FormLabel inputId="productPrice">판매 가격</FormLabel>
+        <Input
+          id="productPrice"
+          name="price"
+          type="text"
+          placeholder="판매 가격을 입력해주세요"
+          onChange={handlePriceInput}
+          onBlur={handleBlur}
+        />
+      </FormControl>
+
+      <FormControl>
+        <FormLabel inputId="tags">태그</FormLabel>
+        <TagsInput
+          id="tags"
+          placeholder="태그를 입력해주세요"
+          tags={tags}
+          onTagsChange={handleTagsChange}
+          onBlur={handleBlur}
+        />
+      </FormControl>
+    </form>
+  );
+};
+
+export default AddProductForm;