diff --git a/src/assets/images/add-Image.png b/src/assets/images/add-Image.png new file mode 100644 index 00000000..720914e9 Binary files /dev/null and b/src/assets/images/add-Image.png differ diff --git a/src/assets/avatar.png b/src/assets/images/avatar.png similarity index 100% rename from src/assets/avatar.png rename to src/assets/images/avatar.png diff --git a/src/assets/no-image.png b/src/assets/images/no-image.png similarity index 100% rename from src/assets/no-image.png rename to src/assets/images/no-image.png diff --git a/src/assets/panda-logo.png b/src/assets/images/panda-logo.png similarity index 100% rename from src/assets/panda-logo.png rename to src/assets/images/panda-logo.png diff --git "a/src/assets/\355\214\220\353\213\244\353\247\210\354\274\223.png" "b/src/assets/images/\355\214\220\353\213\244\353\247\210\354\274\223.png" similarity index 100% rename from "src/assets/\355\214\220\353\213\244\353\247\210\354\274\223.png" rename to "src/assets/images/\355\214\220\353\213\244\353\247\210\354\274\223.png" diff --git a/src/components/AllProductList.jsx b/src/components/AllProductList.jsx index 40dfd499..cbc4175e 100644 --- a/src/components/AllProductList.jsx +++ b/src/components/AllProductList.jsx @@ -1,5 +1,5 @@ import HeartIcon from "../assets/icons/icon_heart"; -import noImage from "../assets/no-image.png"; +import noImage from "../assets/images/no-image.png"; export default function AllProductList({ data = [] }) { if (!data.length) return null; diff --git a/src/components/Input.jsx b/src/components/Input.jsx new file mode 100644 index 00000000..ffbb3103 --- /dev/null +++ b/src/components/Input.jsx @@ -0,0 +1,11 @@ +export default function Input({ id, type = "text", placeholder, ...props }) { + return ( + + ); +} diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx index 8d15346a..1fff8130 100644 --- a/src/components/Nav.jsx +++ b/src/components/Nav.jsx @@ -1,6 +1,6 @@ -import logo from "../assets/panda-logo.png"; -import brandName from "../assets/판다마켓.png"; -import avatar from "../assets/avatar.png"; +import logo from "../assets/images/panda-logo.png"; +import brandName from "../assets/images/판다마켓.png"; +import avatar from "../assets/images/avatar.png"; import { Link, useLocation } from "react-router-dom"; export default function Nav() { diff --git a/src/pages/AddItem.jsx b/src/pages/AddItem.jsx index d965a228..1b74a6d9 100644 --- a/src/pages/AddItem.jsx +++ b/src/pages/AddItem.jsx @@ -1,3 +1,245 @@ +import { useState } from "react"; +import addImg from "../assets/images/add-Image.png"; +import Input from "../components/Input"; + export default function AddItem() { - return

add item

; + const [selectedImage, setSelectedImage] = useState(null); + const [showWarning, setShowWarning] = useState(false); + const [productName, setProductName] = useState(""); + const [productDescription, setProductDescription] = useState(""); + const [productPrice, setProductPrice] = useState(""); + const [tagInput, setTagInput] = useState(""); + const [tags, setTags] = useState([]); + + const isFormValid = + selectedImage && + productName.trim() && + productDescription.trim() && + productPrice.trim(); + + const handleImageClick = (event) => { + if (selectedImage) { + event.preventDefault(); + setShowWarning(true); + } else { + setShowWarning(false); + } + }; + + const onImageChange = (event) => { + if (selectedImage) { + setShowWarning(true); + return; + } + + const { + target: { files }, + } = event; + + if (files && files[0]) { + const file = files[0]; + const url = URL.createObjectURL(file); + setSelectedImage(url); + setShowWarning(false); + } + }; + + const removeSelectedImage = () => { + setSelectedImage(null); + setShowWarning(false); + }; + + const handleTagKeyDown = (e) => { + if (e.key === "Enter" && tagInput.trim()) { + e.preventDefault(); + if (!tags.includes(tagInput.trim())) { + setTags([...tags, tagInput.trim()]); + } + setTagInput(""); + } + }; + + const removeTag = (tagToRemove) => { + setTags(tags.filter((tag) => tag !== tagToRemove)); + }; + + return ( +
+ {/*

상태 확인: {isFormValid ? "✅ 유효함" : "❌ 유효하지 않음"}

*/} +
e.preventDefault()} + className="flex flex-col gap-8" + > +
+

+ 상품 등록하기 +

+ +
+ +

+ 상품 이미지 +

+
+ + + + {selectedImage && ( +
+ 선택된 상품 이미지 + +
+ )} +
+ {(showWarning || (selectedImage && !showWarning)) && ( +

+ * 이미지 등록은 최대 1개까지 가능합니다. +

+ )} + +
+ + setProductName(e.target.value)} + /> +
+
+ +