[김서연] Sprint6

src/App.jsx

@@ -22,7 +22,7 @@ function App() {
         <Route path="/privacy" element={<Privacy />} />
         <Route path="/FAQ" element={<FAQ />} />
         <Route path="/community" element={<Community />} />
-        <Route path="/additem" element={<AddItem />} />
+        <Route path="/item/additem" element={<AddItem />} />
       </Routes>
     </BrowserRouter>
   );

src/components/AddItem/AddItem.jsx

@@ -0,0 +1,107 @@
+import { useState } from "react";
+
+import ProductImg from "./components/ProductImg";
+import styles from "./styles/AddItem.module.css";
+
+export default function AddItemContent() {
+  const [productName, setProductName] = useState("");
+  const [description, setDescription] = useState("");
+  const [price, setPrice] = useState("");
+  const [tagInput, setTagInput] = useState("");
+  const [tags, setTags] = useState([]);
+  const [imagePreview, setImagePreview] = useState(null);
+
+  const isFormValid =
+    productName && description && price && tags.length > 0 && imagePreview;
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const trimmed = tagInput.trim();
+      if (trimmed && !tags.includes(trimmed)) {
+        setTags((prev) => [...prev, trimmed]);
+        setTagInput("");
+      }
+    }
+  };
+
+  const handleDelete = (targetTag) => {
+    setTags((prevTags) => prevTags.filter((tag) => tag !== targetTag));
+  };
+
+  return (
+    <main className={styles.container}>
+      <section className={styles.addContainer}>
+        <h1 className={styles.addTitle}>상품 등록하기</h1>
+        <button disabled={!isFormValid} className={styles.addBtn} type="submit">
+          등록
+        </button>
+      </section>
+
+      <section className={styles.contentContainer}>
+        <h2 className={styles.title}>상품 이미지</h2>
+        <ProductImg preview={imagePreview} setPreview={setImagePreview} />
+      </section>
+
+      <section className={styles.contentContainer}>
+        <h2 className={styles.title}>상품명</h2>
+        <input
+          className={styles.input}
+          placeholder="상품명을 입력해주세요"
+          value={productName}
+          onChange={(e) => setProductName(e.target.value)}
+        ></input>
+      </section>
+
+      <section className={styles.contentContainer}>
+        <h2 className={styles.title}>상품 소개</h2>
+        <textarea
+          className={styles.inputDescription}
+          placeholder="상품 소개를 입력해주세요"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+        ></textarea>
+      </section>
+
+      <section className={styles.contentContainer}>
+        <h2 className={styles.title}>판매가격</h2>
+        <input
+          className={styles.input}
+          placeholder="판매 가격을 입력해주세요"
+          value={price}
+          onChange={(e) => setPrice(e.target.value)}
+        ></input>
+      </section>
+
+      <section className={styles.contentContainer}>
+        <h2 className={styles.title}>태그</h2>
+        <input
+          className={styles.input}
+          placeholder="태그를 입력해주세요"
+          value={tagInput}
+          onChange={(e) => setTagInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+        ></input>
+
+        <div className={styles.tagList}>
+          {tags.map((tag, idx) => (
+            <span key={idx} className={styles.tag}>
+              #{tag}
+              <button
+                className={styles.deleteBtn}
+                type="button"
+                onClick={() => handleDelete(tag)}
+              >
+                <img
+                  className={styles.deleteImg}
+                  src="/ic_X.svg"
+                  alt="등록 이미지 삭제 아이콘"
+                />
+              </button>
+            </span>
+          ))}
+        </div>
+      </section>
+    </main>
+  );
+}

src/components/AddItem/components/ProductImg.jsx

@@ -0,0 +1,54 @@
+import { useRef, useState } from "react";
+import styles from "./styles/ProductImg.module.css";
+
+export default function ProductImg({ preview, setPreview }) {
+  const inputRef = useRef(null);
+
+  const handleImageChange = (e) => {
+    const file = e.target.files?.[0];
+
+    if (preview) {
+      alert("이미지는 한 개만 업로드할 수 있습니다.");
+      return;
+    }
+
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setPreview(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleDelete = () => {
+    setPreview(null);
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <label className={styles.uploadBox}>
+        <div className={styles.textContainer}>
+          <span className={styles.plus}>＋</span>
+          <p className={styles.text}>이미지 등록</p>
+        </div>
+        <input
+          type="file"
+          accept="image/*"
+          ref={inputRef}
+          onChange={handleImageChange}
+          style={{ display: "none" }}
+        />
+      </label>
+
+      {preview && (
+        <div className={styles.imagePreviewBox}>
+          <button className={styles.deleteButton} onClick={handleDelete}>
+            <img src="/ic_X.svg" alt="등록 이미지 삭제 아이콘" />
+          </button>
+          <img src={preview} alt="미리보기" className={styles.previewImg} />
+        </div>
+      )}
+    </div>
+  );
+}

src/components/AddItem/components/styles/ProductImg.module.css

@@ -0,0 +1,77 @@
+.wrapper {
+  display: flex;
+  gap: 2.4rem;
+}
+
+.uploadBox {
+  width: 28.2rem;
+  height: 28.2rem;
+  background-color: var(--gray100);
+  border-radius: 1.2rem;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  cursor: pointer;
+  overflow: hidden;
+
+  flex-shrink: 0;
+}
+
+.textContainer {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.plus {
+  font-size: 5rem;
+  font-weight: 100;
+  color: var(--gray400);
+}
+
+.text {
+  font-size: 1rem;
+  color: var(--gray400);
+  font-weight: 400;
+}
+
+.imagePreviewBox {
+  width: 28.2rem;
+  height: 28.2rem;
+  border-radius: 1.2rem;
+  overflow: hidden;
+  position: relative;
+
+  flex-shrink: 0;
+}
+
+.previewImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.deleteButton {
+  position: absolute;
+  top: 8px;
+  right: 15px;
+
+  width: 20px;
+  height: 20px;
+}
+
+@media (max-width: 768px) {
+  .uploadBox {
+    width: 16.8rem;
+    height: 16.8rem;
+  }
+
+  .imagePreviewBox {
+    width: 16.8rem;
+    height: 16.8rem;
+  }
+}