fix: 에러처리를 통한 태그 중복 버그 수정

Author: SanginJeong

vite-project/src/common/ErrorMessage/ErrorMessage.style.css

@@ -1,7 +1,4 @@
 .error-message {
-  padding: 12px 18px;
-  margin: 50px;
-  background-color: pink;
-  border-radius: 12px;
-  font-weight: bold;
+  color: #f74747;
+  padding: 6px 8px;
 }

vite-project/src/common/ErrorMessage/index.jsx

@@ -1,7 +1,7 @@
 import "./ErrorMessage.style.css";
 
-const ErrorMessage = ({ error }) => {
-  return <div className="error-message">{error.message}</div>;
+const ErrorMessage = ({ errorMessage }) => {
+  return <div className="error-message">{errorMessage}</div>;
 };
 
 export default ErrorMessage;

vite-project/src/pages/AddItemPage/components/AddItemTag/index.jsx

@@ -1,4 +1,6 @@
-const AddItemTag = ({ value, onChange }) => {
+import ErrorMessage from "../../../../common/ErrorMessage";
+
+const AddItemTag = ({ value, onChange, error }) => {
   return (
     <div>
       <h4>태그</h4>
@@ -9,6 +11,7 @@ const AddItemTag = ({ value, onChange }) => {
         value={value}
         onChange={onChange}
       />
+      {error && <ErrorMessage errorMessage={error} />}
     </div>
   );
 };

vite-project/src/pages/AddItemPage/index.jsx

@@ -10,14 +10,15 @@ import TagList from "../../common/TagList";
 
 const AddItemPage = () => {
   const [formData, setFormData] = useState({
-    images: [],
-    name: "",
-    description: "",
-    price: "",
-    tags: [],
+    images: [], // required 지만 빈 배열이어도 되는듯
+    name: "", // required
+    description: "", // required
+    price: "", // required
+    tags: [], // required
   });
 
   const [inputValueTag, setInputValueTag] = useState("");
+  const [errors, setErrors] = useState({ image: "", tag: "" }); // POST요청 에러까지 추후에 들어갈지도
 
   const handleChange = (e, category) => {
     setFormData((prev) => ({ ...prev, [category]: e.target.value }));
@@ -30,12 +31,21 @@ const AddItemPage = () => {
 
   const handleSubmitTag = (e) => {
     e.preventDefault();
+
     if (!inputValueTag) {
+      setErrors((prev) => ({ ...prev, tag: "태그를 입력하세요" }));
       return;
     }
+
+    if (formData.tags.includes(inputValueTag)) {
+      setErrors((prev) => ({ ...prev, tag: "태그가 이미 존재합니다" }));
+      return;
+    }
+
     const newTags = [...formData.tags, inputValueTag];
     setFormData((prev) => ({ ...prev, tags: newTags }));
     setInputValueTag("");
+    setErrors((prev) => ({ ...prev, tag: "" }));
   };
 
   const handleDeleteTag = (index) => {
@@ -47,7 +57,7 @@ const AddItemPage = () => {
     <div className="addItem-page-layout">
       <form className="addItem-form" onSubmit={handleSubmitAddItem}>
         <AddItemFormHeader />
-        <AddItemImage images={formData.images} />
+        <AddItemImage images={formData.images} error={errors.image} />
         <AddItemName
           value={formData.name}
           onChange={(e) => handleChange(e, "name")}
@@ -66,6 +76,7 @@ const AddItemPage = () => {
         <AddItemTag
           value={inputValueTag}
           onChange={(e) => setInputValueTag(e.target.value)}
+          error={errors.tag}
         />
       </form>
 

vite-project/src/pages/ItemsPage/components/ProductAll/index.jsx

@@ -34,7 +34,7 @@ const ProductAll = () => {
 
   if (isLoading) return <LoadingSpinner />;
 
-  if (isError) return <ErrorMessage error={error} />;
+  if (isError) return <ErrorMessage errorMessage={error.message} />;
   return (
     <>
       <ProductAllMenuBar

vite-project/src/pages/ItemsPage/components/ProductBest/index.jsx

@@ -18,7 +18,7 @@ const ProductBest = () => {
 
   if (isLoading) return <LoadingSpinner />;
 
-  if (isError) return <ErrorMessage error={error} />;
+  if (isError) return <ErrorMessage errorMessage={error.message} />;
   return (
     <div className="productBest-layout">
       <h1 className="product-category-description">베스트 상품</h1>