From 02c5bad045fdfdad328315a2132be1e9ce93ba41 Mon Sep 17 00:00:00 2001
From: kss <kss53043@naver.com>
Date: Fri, 29 Nov 2024 18:33:12 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FileInput.css | 31 +++++++++++++++++
 src/components/FileInput.jsx |  3 +-
 src/components/FormItem.css  |  8 +++++
 src/components/FormItem.jsx  | 22 +++++++++++++
 src/components/FormLabel.css |  1 +
 src/components/FormLabel.jsx |  8 +++++
 src/page/AddItemPage.css     | 39 +---------------------
 src/page/AddItemPage.jsx     | 64 ++++++++++--------------------------
 8 files changed, 90 insertions(+), 86 deletions(-)
 create mode 100644 src/components/FileInput.css
 create mode 100644 src/components/FormItem.css
 create mode 100644 src/components/FormItem.jsx
 create mode 100644 src/components/FormLabel.css
 create mode 100644 src/components/FormLabel.jsx

diff --git a/src/components/FileInput.css b/src/components/FileInput.css
new file mode 100644
index 000000000..4e6e89c25
--- /dev/null
+++ b/src/components/FileInput.css
@@ -0,0 +1,31 @@
+.add_form_list > li .input_file_box {display : flex;}
+.add_form_list > li .input_file_box label {display : flex; align-items: center; justify-content: center; flex-direction: column; width: 282px; height: 282px; background-color: #F3F4F6; border-radius: 12px; cursor: pointer;}
+.add_form_list > li .input_file_box label > span {margin-top: 12px; color: #9CA3AF; font-size: 1.6rem; font-weight: 400; line-height: 1.625; }
+.add_form_list > li .input_file_box input {display: none;}
+.add_form_list > li .input_file_box .file_img_list > li {position: relative; overflow: hidden; width: 282px; height: 282px; margin-left: 24px; border-radius: 12px;}
+.add_form_list > li .input_file_box .file_img_list > li > .remove_btn {position: absolute; top: 12px; right: 12px; z-index: 2;}
+.add_form_list > li .input_file_box .file_img_list > li > img {width: 100%; height: 100%; object-fit: cover;}
+
+.limit_text {position: relative; z-index: -1; margin-top: -26px; color: #F74747; font-size: 1.6rem; line-height: 1.625; opacity: 0; transition: all 0.2s ease-in-out;}
+.limit_text.active {opacity: 1; margin-top: 16px; margin-bottom: -8px;}
+
+@media (max-width: 1200px) {
+  .add_form_list > li .input_file_box label {width: 168px; height: 168px;}
+  .add_form_list > li .input_file_box .file_img_list > li {width: 168px; height: 168px; margin-left: 10px;}
+  .limit_text {width: 168px; white-space: nowrap; font-size: 1.4rem;}
+}
+
+@media (max-width: 768px) {
+  .add_form_list > li .input_file_box {justify-content: space-between;}
+  .add_form_list > li .input_file_box .file_add_wrap {position: relative; width: calc(50% - 5px); height: 0; padding-top: calc(50% - 5px);}
+  .add_form_list > li .input_file_box label {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
+
+  .add_form_list > li .input_file_box:has( .limit_text.active) .file_add_wrap {padding-top: calc(50% + 15px);}
+  .add_form_list > li .input_file_box:has( .limit_text.active) label {height: calc(100% - 20px);}
+
+  .add_form_list > li .input_file_box .file_img_list {position: relative; width: calc(50% - 5px); height: 0; padding-top: calc(50% - 5px);}
+  .add_form_list > li .input_file_box .file_img_list > li {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-left: 0;}
+
+  .limit_text {margin-top: -50px;}
+  .limit_text.active {margin-top: -13px;}
+}
diff --git a/src/components/FileInput.jsx b/src/components/FileInput.jsx
index 872c21d0f..b874bd157 100644
--- a/src/components/FileInput.jsx
+++ b/src/components/FileInput.jsx
@@ -1,6 +1,7 @@
 import addImg from "./../assets/icon_add.svg";
 import removeIcon from "./../assets/icon_remove.svg";
 import { useEffect, useState, useRef } from "react";
+import "./FileInput.css";
 
 function FileInput({ name, value, onChange }) {
   const handleFileChange = (e) => {
@@ -47,7 +48,7 @@ function FileInput({ name, value, onChange }) {
         <ul className="file_img_list">
           <li>
             <button type="button" onClick={handlePreviewRemove} className="btn_reset remove_btn">
-              <img src={removeIcon} alt="티셔츠 삭제하기" />
+              <img src={removeIcon} alt="삭제하기" />
             </button>
             <img src={fileImg} alt="" />
           </li>
diff --git a/src/components/FormItem.css b/src/components/FormItem.css
new file mode 100644
index 000000000..8d7c426b8
--- /dev/null
+++ b/src/components/FormItem.css
@@ -0,0 +1,8 @@
+.add_form_list > li .input_box input[type="text"] {width: 100%; height: 56px; padding: 0 24px; background-color: #F3F4F6; border-radius: 12px; font-size: 1.6rem; font-weight: 400; line-height: 1.625;}
+.add_form_list > li .input_box input[type="text"]::placeholder {color: #9CA3AF;}
+.add_form_list > li .input_box textarea {width: 100%; height: 282px; padding: 16px 24px; background-color: #F3F4F6; border-radius: 12px; font-size: 1.6rem; font-weight: 400; line-height: 1.625; resize: none;}
+.add_form_list > li .input_box textarea::placeholder {color: #9CA3AF;}
+
+@media (max-width: 1200px) {
+  .add_form_list > li + li {margin-top: 24px;}
+}
diff --git a/src/components/FormItem.jsx b/src/components/FormItem.jsx
new file mode 100644
index 000000000..a28c575ce
--- /dev/null
+++ b/src/components/FormItem.jsx
@@ -0,0 +1,22 @@
+import FormLabel from "./../components/FormLabel";
+import FileInput from "./../components/FileInput";
+import "./FormLabel.css";
+import "./FormItem.css";
+
+const FormItem = ({ labelName, type, id, name, className, value, onChange, placeholder }) => {
+  return (
+    <li>
+      <FormLabel htmlFor={id} labelName={labelName} />
+      <div className={type !== "file" ? `input_box` : `input_box input_file_box`}>
+        {type === "textarea" ? (
+          <textarea type={type} id={id} name={name} className={className} value={value} onChange={onChange} placeholder={placeholder}></textarea>
+        ) : type === "file" ? (
+          <FileInput name={name} value={value} onChange={onChange} />
+        ) : (
+          <input type={type} id={id} name={name} className={className} value={value} onChange={onChange} placeholder={placeholder} />
+        )}
+      </div>
+    </li>
+  );
+};
+export default FormItem;
diff --git a/src/components/FormLabel.css b/src/components/FormLabel.css
new file mode 100644
index 000000000..e6b21e58a
--- /dev/null
+++ b/src/components/FormLabel.css
@@ -0,0 +1 @@
+.add_form_list > li .title {display: block; margin-bottom: 16px; font-size: 1.8rem; font-weight: 700; line-height: 1.4444;}
diff --git a/src/components/FormLabel.jsx b/src/components/FormLabel.jsx
new file mode 100644
index 000000000..1cf68439e
--- /dev/null
+++ b/src/components/FormLabel.jsx
@@ -0,0 +1,8 @@
+const FormLabel = ({ htmlFor, labelName }) => {
+  return (
+    <label htmlFor={htmlFor} className="title">
+      {labelName}
+    </label>
+  );
+};
+export default FormLabel;
diff --git a/src/page/AddItemPage.css b/src/page/AddItemPage.css
index 3191ecacc..765d8683c 100644
--- a/src/page/AddItemPage.css
+++ b/src/page/AddItemPage.css
@@ -1,46 +1,9 @@
 .add_submit {margin-left: auto;}
 .add_form_list > li + li {margin-top: 32px;}
-.add_form_list > li .title {display: block; margin-bottom: 16px; font-size: 1.8rem; font-weight: 700; line-height: 1.4444;}
-.add_form_list > li .input_box input[type="text"] {width: 100%; height: 56px; padding: 0 24px; background-color: #F3F4F6; border-radius: 12px; font-size: 1.6rem; font-weight: 400; line-height: 1.625;}
-.add_form_list > li .input_box input[type="text"]::placeholder {color: #9CA3AF;}
-.add_form_list > li .input_box textarea {width: 100%; height: 282px; padding: 16px 24px; background-color: #F3F4F6; border-radius: 12px; font-size: 1.6rem; font-weight: 400; line-height: 1.625; resize: none;}
-.add_form_list > li .input_box textarea::placeholder {color: #9CA3AF;}
+
 .tag_list {display : flex; flex-wrap: wrap; gap:12px; margin-top: 14px; }
 .tag_list > li {display : flex; align-items: center; padding: 6px 16px; background-color: #F3F4F6; border-radius: 50px; transition: all 0.2s; }
 .tag_list > li > span {font-size: 1.6rem; font-weight: 400; line-height: 1.625;}
 .tag_list > li > .remove {margin-left: 8px;}
 .tag_list > li:has( > .remove:hover ) {background-color: #E5E7EB;}
 
-.add_form_list > li .input_file_box {display : flex;}
-.add_form_list > li .input_file_box label {display : flex; align-items: center; justify-content: center; flex-direction: column; width: 282px; height: 282px; background-color: #F3F4F6; border-radius: 12px; cursor: pointer;}
-.add_form_list > li .input_file_box label > span {margin-top: 12px; color: #9CA3AF; font-size: 1.6rem; font-weight: 400; line-height: 1.625; }
-.add_form_list > li .input_file_box input {display: none;}
-.add_form_list > li .input_file_box .file_img_list > li {position: relative; overflow: hidden; width: 282px; height: 282px; margin-left: 24px; border-radius: 12px;}
-.add_form_list > li .input_file_box .file_img_list > li > .remove_btn {position: absolute; top: 12px; right: 12px; z-index: 2;}
-.add_form_list > li .input_file_box .file_img_list > li > img {width: 100%; height: 100%; object-fit: cover;}
-
-.limit_text {position: relative; z-index: -1; margin-top: -26px; color: #F74747; font-size: 1.6rem; line-height: 1.625; opacity: 0; transition: all 0.2s ease-in-out;}
-.limit_text.active {opacity: 1; margin-top: 16px; margin-bottom: -8px;}
-
-@media (max-width: 1200px) {
-  .add_form_list > li + li {margin-top: 24px;}
-  .add_form_list > li .input_file_box label {width: 168px; height: 168px;}
-  .add_form_list > li .input_file_box .file_img_list > li {width: 168px; height: 168px; margin-left: 10px;}
-  .limit_text {width: 168px; white-space: nowrap; font-size: 1.4rem;}
-}
-
-@media (max-width: 768px) {
-  .add_form_list > li .input_file_box {justify-content: space-between;}
-  .add_form_list > li .input_file_box .file_add_wrap {position: relative; width: calc(50% - 5px); height: 0; padding-top: calc(50% - 5px);}
-  .add_form_list > li .input_file_box label {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
-
-  .add_form_list > li .input_file_box:has( .limit_text.active) .file_add_wrap {padding-top: calc(50% + 15px);}
-  .add_form_list > li .input_file_box:has( .limit_text.active) label {height: calc(100% - 20px);}
-
-  .add_form_list > li .input_file_box .file_img_list {position: relative; width: calc(50% - 5px); height: 0; padding-top: calc(50% - 5px);}
-  .add_form_list > li .input_file_box .file_img_list > li {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-left: 0;}
-
-  .limit_text {margin-top: -50px;}
-  .limit_text.active {margin-top: -13px;}
-  
-}
diff --git a/src/page/AddItemPage.jsx b/src/page/AddItemPage.jsx
index 6c26271b9..9d4102854 100644
--- a/src/page/AddItemPage.jsx
+++ b/src/page/AddItemPage.jsx
@@ -1,18 +1,27 @@
 import SubTitle from "./../components/SubTitle";
 import "./AddItemPage.css";
 import removeIcon from "./../assets/icon_remove.svg";
-import FileInput from "./../components/FileInput";
-import { useState, useEffect, useRef } from "react";
+import FormItem from "./../components/FormItem";
+import { useState, useEffect } from "react";
+import FormLabel from "./../components/FormLabel";
+import "./../components/FormLabel.css";
 
 const AddItemPage = () => {
+  const [fakeTag, setFakeTag] = useState("");
   const [inputValue, setInputValue] = useState({
     name: "",
     introduce: "",
     price: "",
-    imgFile: null,
+    imgFile: "",
     tag: "",
   });
 
+  const tagList = inputValue.tag.split("|");
+
+  const handleSubmit = (e) => {
+    //e.preventDefault();
+  };
+
   const handleChange = (name, value) => {
     if (name === "price") {
       const priceValue = value.replaceAll(",", "");
@@ -39,12 +48,6 @@ const AddItemPage = () => {
     handleChange(name, value);
   };
 
-  const handleSubmit = (e) => {
-    //e.preventDefault();
-  };
-
-  const [fakeTag, setFakeTag] = useState("");
-
   const handleFakeTag = (e) => {
     setFakeTag(e.target.value);
   };
@@ -58,8 +61,6 @@ const AddItemPage = () => {
     }
   };
 
-  const tagList = inputValue.tag.split("|");
-
   const handleTagRemove = (tagName) => {
     setInputValue((prev) => {
       const tagUpdate = prev.tag
@@ -97,46 +98,15 @@ const AddItemPage = () => {
           </div>
           <div className="add_form">
             <ul className="add_form_list">
+              <FormItem labelName="상품이미지" type="file" id="add_img" name="imgFile" className="imgFile" value={inputValue.imgFile} onChange={handleChange} />
+              <FormItem labelName="상품명" type="text" id="add_name" name="name" className="inp_reset" value={inputValue.name} onChange={handleInputChange} placeholder="상품명을 입력해주세요" />
+              <FormItem labelName="상품 소개" type="textarea" id="add_introduce" name="introduce" className="inp_reset" value={inputValue.introduce} onChange={handleInputChange} placeholder="상품 소개를 입력해주세요" />
+              <FormItem labelName="판매 가격" type="text" id="add_price" name="price" className="inp_reset" value={inputValue.price} onChange={handleInputChange} placeholder="판매 가격을 입력해주세요" />
               <li>
-                <div htmlFor="add_img" className="title">
-                  상품이미지
-                </div>
-                <div className="input_box input_file_box">
-                  <FileInput name="imgFile" value={inputValue.imgFile} onChange={handleChange} />
-                </div>
-              </li>
-              <li>
-                <label htmlFor="add_name" className="title">
-                  상품명
-                </label>
-                <div className="input_box">
-                  <input type="text" id="add_name" name="name" className="inp_reset" value={inputValue.name} onChange={handleInputChange} placeholder="상품명을 입력해주세요" />
-                </div>
-              </li>
-              <li>
-                <label htmlFor="add_introduce" className="title">
-                  상품 소개
-                </label>
-                <div className="input_box">
-                  <textarea id="add_introduce" name="introduce" className="inp_reset" value={inputValue.introduce} onChange={handleInputChange} placeholder="상품 소개를 입력해주세요"></textarea>
-                </div>
-              </li>
-              <li>
-                <label htmlFor="add_price" className="title">
-                  판매가격
-                </label>
-                <div className="input_box">
-                  <input type="text" id="add_price" name="price" className="inp_reset" value={inputValue.price} onChange={handleInputChange} placeholder="판매 가격을 입력해주세요" />
-                </div>
-              </li>
-              <li>
-                <label htmlFor="add_tag" className="title">
-                  태그
-                </label>
+                <FormLabel htmlFor="add_tag" labelName="태그" />
                 <div className="input_box">
                   <input type="text" id="add_tag" className="inp_reset" placeholder="태그를 입력해주세요" onKeyDown={handleTagChange} onChange={handleFakeTag} value={fakeTag} />
                 </div>
-
                 {inputValue.tag && (
                   <ul className="tag_list">
                     {tagList.map((el, idx) => (