스프린트 미션6

src/App.js

@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import MarketPage from "./pages/Market.js";
 import Home from "./pages/Home";
 import Navbar from "./components/Navbar";
+import ItemForm from "./components/AddItems.js";
 
 function App() {
   return (
@@ -11,6 +12,7 @@ function App() {
         <Routes>
           <Route index element={<Home />} />
           <Route path="items" element={<MarketPage />} />
+          <Route path="additem" element={<ItemForm />} />
         </Routes>
       </div>
     </BrowserRouter>

src/components/AddItems.css

@@ -0,0 +1,253 @@
+.registration-wrapper {
+  width: 1200px;
+  margin: 94px auto 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.registration-title {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 33.41px;
+  text-align: left;
+  color: #1f2937;
+}
+
+.registration-button {
+  width: 88px;
+  height: 42px;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 8px;
+  background-color: #9ca3af;
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.img-form {
+  display: flex;
+  flex-direction: column;
+  width: 1200px;
+  margin: 16px auto 0;
+}
+
+.item-form {
+  display: flex;
+  flex-direction: column;
+  width: 1200px;
+  margin: 0 auto 87px;
+}
+
+.input-label,
+.input-img {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 21.48px;
+  text-align: left;
+  color: #1f2937;
+}
+
+.input-file {
+  width: 282px;
+  height: 282px;
+  border-radius: 12px;
+  border: none;
+  background-color: #f3f4f6;
+  position: relative;
+}
+
+.input-icon {
+  position: relative;
+  top: 99px;
+  left: 117px;
+}
+
+.input-icon-title {
+  position: absolute;
+  top: 159px;
+  left: 104px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: #9ca3af;
+  margin: 0;
+}
+
+.input-file-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.input-preview {
+  width: 282px;
+  height: 282px;
+  border: none;
+  border-radius: 12px;
+}
+
+.input-button {
+  background: none;
+  border: none;
+}
+
+.input-button img {
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  left: 556px;
+  top: 8px;
+}
+
+.input-label {
+  margin-bottom: 12px;
+  margin-top: 24px;
+}
+
+.input-img {
+  margin-bottom: 12px;
+}
+
+input,
+textarea {
+  height: 56px;
+  border: none;
+  border-radius: 12px;
+  background-color: #f3f4f6;
+  color: #9ca3af;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: left;
+  padding: 16px 24px;
+}
+
+textarea {
+  height: 200px;
+}
+
+.registration-button.active {
+  background-color: #3692ff;
+}
+
+@media (max-width: 1279px) {
+  .registration-wrapper {
+    width: 696px;
+    margin: 86px auto 0;
+  }
+
+  .img-form {
+    width: 696px;
+  }
+
+  .item-form {
+    width: 696px;
+    margin: 0 auto 139px;
+  }
+
+  .input-file {
+    width: 162px;
+    height: 162px;
+    position: relative;
+  }
+
+  .input-icon {
+    position: relative;
+    top: 39px;
+    left: 56.5px;
+  }
+
+  .input-icon-title {
+    position: absolute;
+    top: 99px;
+    left: 43.5px;
+  }
+
+  .input-file-wrapper {
+    gap: 16px;
+  }
+
+  .input-preview {
+    width: 162px;
+    height: 162px;
+  }
+
+  .input-button img {
+    position: absolute;
+    left: 308px;
+    top: 10px;
+  }
+
+  .input-label {
+    margin-bottom: 12px;
+    margin-top: 24px;
+  }
+
+  .input-img {
+    margin-bottom: 12px;
+  }
+}
+
+@media (max-width: 767px) {
+  .registration-wrapper {
+    width: 344px;
+    margin: 86px auto 0;
+  }
+
+  .img-form {
+    width: 344px;
+  }
+
+  .item-form {
+    width: 344px;
+    margin: 0 auto 183px;
+  }
+
+  .input-file {
+    width: 168px;
+    height: 168px;
+    position: relative;
+  }
+
+  .input-icon {
+    position: relative;
+    top: 42px;
+    left: 60px;
+  }
+
+  .input-icon-title {
+    position: absolute;
+    top: 99px;
+    left: 43.5px;
+  }
+
+  .input-file-wrapper {
+    gap: 8px;
+  }
+
+  .input-preview {
+    width: 168px;
+    height: 168px;
+  }
+
+  .input-button img {
+    position: absolute;
+    left: 310px;
+    top: 12px;
+  }
+
+  .input-label {
+    margin-bottom: 12px;
+    margin-top: 16px;
+  }
+
+  .input-img {
+    margin-bottom: 9px;
+  }
+}

src/components/AddItems.js

@@ -0,0 +1,104 @@
+import { useState } from "react";
+import FileInput from "./FileInput";
+import "./AddItems.css";
+import "./global.css";
+
+function ItemForm() {
+  const [values, setValues] = useState({
+    imgFile: null,
+    title: "",
+    description: "",
+    price: "",
+    tag: "",
+  });
+
+  const [submit, setSubmit] = useState(false);
+
+  const handleChange = (name, value) => {
+    setValues((preValues) => ({
+      ...preValues,
+      [name]: value,
+    }));
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    handleChange(name, value);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log(values);
+    setSubmit(true);
+  };
+
+  return (
+    <>
+      <div className="registration-wrapper">
+        <div className="registration-title">상품 등록하기</div>
+        <button
+          type="submit"
+          className={`registration-button ${submit ? "active" : ""}`}
+          onClick={handleSubmit}
+        >
+          등록
+        </button>
+      </div>
+      <div className="img-form">
+        <label Htmlfor="input-img" className="input-img">
+          상품 이미지
+        </label>
+        <FileInput
+          name="imgFile"
+          value={values.imgFile}
+          onChange={handleChange}
+        />
+      </div>
+      <form className="item-form" onSubmit={handleSubmit}>
+        <label Htmlfor="input-title" className="input-label">
+          상품명
+        </label>
+        <input
+          className="input-title"
+          name="title"
+          value={values.title}
+          onChange={handleInputChange}
+          placeholder="상품명을 입력해주세요"
+        />
+        <label Htmlfor="input-description" className="input-label">
+          상품 소개
+        </label>
+        <textarea
+          className="input-description"
+          name="description"
+          value={values.description}
+          onChange={handleInputChange}
+          placeholder="상품 소개를 입력해주세요"
+        />
+        <label Htmlfor="input-price" className="input-label">
+          판매가격
+        </label>
+        <input
+          className="input-price"
+          name="price"
+          type="number"
+          value={values.price}
+          onChange={handleInputChange}
+          placeholder="판매 가격을 입력해주세요"
+        />
+        <label Htmlfor="input-tag" className="input-label">
+          태그
+        </label>
+        <input
+          className="input-tag"
+          name="tag"
+          value={values.tag}
+          onChange={handleInputChange}
+          placeholder="태그를 입력해주세요"
+        />
+      </form>
+    </>
+  );
+}
+
+export default ItemForm;

src/components/AllItems.css

@@ -107,7 +107,7 @@
   color: #1f2937;
 }
 
-.itemRegisteration {
+.itemRegistration {
   padding: 12px 23px;
   border: none;
   border-radius: 8px;