From 701065f80ec6425cc05adc71e562b214c1c9ec8a Mon Sep 17 00:00:00 2001
From: marie1016 <kjo5281@gmail.com>
Date: Thu, 4 Jul 2024 23:09:41 +0900
Subject: [PATCH] =?UTF-8?q?=EC=8A=A4=ED=94=84=EB=A6=B0=ED=8A=B8=20?=
 =?UTF-8?q?=EB=AF=B8=EC=85=986?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                  |   2 +
 src/assets/ic_X.svg         |   5 +
 src/assets/ic_plus.svg      |   4 +
 src/components/AddItems.css | 253 ++++++++++++++++++++++++++++++++++++
 src/components/AddItems.js  | 104 +++++++++++++++
 src/components/AllItems.css |   2 +-
 src/components/AllItems.js  |   2 +-
 src/components/FileInput.js |  71 ++++++++++
 src/components/tag.js       |  54 ++++++++
 9 files changed, 495 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/ic_X.svg
 create mode 100644 src/assets/ic_plus.svg
 create mode 100644 src/components/AddItems.css
 create mode 100644 src/components/AddItems.js
 create mode 100644 src/components/FileInput.js
 create mode 100644 src/components/tag.js

diff --git a/src/App.js b/src/App.js
index ddd202414..0b9c48dba 100644
--- a/src/App.js
+++ b/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>
diff --git a/src/assets/ic_X.svg b/src/assets/ic_X.svg
new file mode 100644
index 000000000..10c4a16ed
--- /dev/null
+++ b/src/assets/ic_X.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10" fill="#3692FF"/>
+<path d="M8.08044 8L16.0804 16" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
+<path d="M15.9999 8L7.99994 16" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/ic_plus.svg b/src/assets/ic_plus.svg
new file mode 100644
index 000000000..5bb9abf55
--- /dev/null
+++ b/src/assets/ic_plus.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 24H38" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
+<path d="M24 38V10" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
+</svg>
diff --git a/src/components/AddItems.css b/src/components/AddItems.css
new file mode 100644
index 000000000..c17200c29
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/components/AddItems.js b/src/components/AddItems.js
new file mode 100644
index 000000000..6dc84c19b
--- /dev/null
+++ b/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;
diff --git a/src/components/AllItems.css b/src/components/AllItems.css
index d5fb77530..7a4980302 100644
--- a/src/components/AllItems.css
+++ b/src/components/AllItems.css
@@ -107,7 +107,7 @@
   color: #1f2937;
 }
 
-.itemRegisteration {
+.itemRegistration {
   padding: 12px 23px;
   border: none;
   border-radius: 8px;
diff --git a/src/components/AllItems.js b/src/components/AllItems.js
index a14102a1f..de3a88961 100644
--- a/src/components/AllItems.js
+++ b/src/components/AllItems.js
@@ -91,7 +91,7 @@ function AllItems() {
             placeholder="검색할 상품을 입력해주세요"
           />
         </div>
-        <button className="itemRegisteration">
+        <button className="itemRegistration">
           <Link style={style} to="/additem">
             상품 등록하기
           </Link>
diff --git a/src/components/FileInput.js b/src/components/FileInput.js
new file mode 100644
index 000000000..f072bb8c1
--- /dev/null
+++ b/src/components/FileInput.js
@@ -0,0 +1,71 @@
+import { useState, useRef, useEffect } from "react";
+import PlusIcon from "../assets/ic_plus.svg";
+import XIcon from "../assets/ic_X.svg";
+
+function FileInput({ name, value, onChange }) {
+  const [previewImg, setPreviewImg] = useState(null);
+  const [showPreview, setShowPreview] = useState(false);
+
+  const inputRef = useRef(null);
+
+  const handleButtonClick = () => {
+    inputRef.current.click();
+  };
+
+  const handleFileChange = (e) => {
+    const nextValue = e.target.files[0];
+    onChange(name, nextValue);
+  };
+
+  const handleClearClick = () => {
+    const inputNode = inputRef.current;
+    if (!inputNode) return;
+
+    inputNode.value = "";
+    onChange(name, null);
+  };
+
+  useEffect(() => {
+    if (!value) return;
+
+    const nextPreviewImg = URL.createObjectURL(value);
+    setPreviewImg(nextPreviewImg);
+    setShowPreview(true);
+
+    return () => {
+      setPreviewImg();
+      URL.revokeObjectURL(nextPreviewImg);
+      setShowPreview(false);
+    };
+  }, [value]);
+
+  return (
+    <div className="input-file-wrapper">
+      <div className="input-file">
+        <img
+          className="input-icon"
+          src={PlusIcon}
+          alt="파일 업로드"
+          onClick={handleButtonClick}
+          style={{ cursor: "pointer" }}
+        />
+        <p className="input-icon-title">이미지 등록</p>
+        <input
+          type="file"
+          onChange={handleFileChange}
+          style={{ display: "none" }}
+          ref={inputRef}
+          accept="image/png, image/jpeg"
+        />
+        {value && (
+          <button className="input-button" onClick={handleClearClick}>
+            <img src={XIcon} alt="버튼 이미지" />
+          </button>
+        )}
+      </div>
+      {showPreview ? <img className="input-preview" src={previewImg} /> : null}
+    </div>
+  );
+}
+
+export default FileInput;
diff --git a/src/components/tag.js b/src/components/tag.js
new file mode 100644
index 000000000..9b3e91baf
--- /dev/null
+++ b/src/components/tag.js
@@ -0,0 +1,54 @@
+// import { useState } from "react";
+
+// const Tag = () => {
+//   const [tags, setTags] = useState("");
+//   const removeTags = (indexToRemove) => {
+//     const updatedTags = tags.filter((el, index) => index !== indexToRemove);
+//     setTags(updatedTags);
+//   };
+
+//   const addTags = (event) => {
+//     const inputValue = event.target.value;
+
+//     if (
+//       event.key === "Enter" &&
+//       inputValue !== "" &&
+//       !tags.includes(inputValue)
+//     ) {
+//       setTags([...tags, inputValue]);
+//       event.target.value = "";
+//     }
+//   };
+
+//   return (
+//     <>
+//       <label Htmlfor="input-tag" className="input-label">
+//         태그
+//       </label>
+//       <input
+//         className="input-tag"
+//         name="tag"
+//         value={values.tag}
+//         onChange={handleInputChange}
+//         placeholder="태그를 입력해주세요"
+//         onKeyUp={(e) => {
+//           {
+//             addTags(e);
+//           }
+//         }}
+//       />
+//       <ul id="tags">
+//         {tags.map((tag, index) => (
+//           <li key={index} className="tag">
+//             <span className="tag-title">{tag}</span>
+//             <span className="tag-close-icon" onClick={() => removeTags(index)}>
+//               x
+//             </span>
+//           </li>
+//         ))}
+//       </ul>
+//     </>
+//   );
+// };
+
+// export default Tag;