feat: 이미지 업로드 및 에러처리 구현

Author: SanginJeong

vite-project/public/images/ic_plus.svg

@@ -106,6 +106,17 @@ p {
   background-color: #9ca3af;
 }
 
+.ic-x-btn {
+  background-color: var(--gray400);
+  color: #f9fafb;
+  width: 20px;
+  height: 20px;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .container {
   max-width: 1200px;
   margin: 0 auto;

vite-project/src/App.css

@@ -14,14 +14,3 @@
   font-weight: 400;
   font-size: 16px;
 }
-
-.tag-delete-badge-btn {
-  background-color: var(--gray400);
-  color: #f9fafb;
-  width: 20px;
-  height: 20px;
-  border-radius: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}

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

@@ -4,7 +4,7 @@ const TagBadge = ({ name, onDelete }) => {
   return (
     <div className="tag-badge">
       <span>#{name}</span>
-      <button className="button tag-delete-badge-btn" onClick={onDelete}>
+      <button className="button ic-x-btn" onClick={onDelete}>
         <img src="images/ic_x.svg" alt="태그 삭제 이미지" />
       </button>
     </div>

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

@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
-  height: 1206px;
+  padding-bottom: 50px;
 }
 
 .addItem-form {
@@ -33,8 +33,8 @@
 }
 
 .addItem-input,
-.addItem-textArea {
-  width: 100%;
+.addItem-textArea,
+.addItem-image-input {
   background-color: var(--gray100);
   padding: 16px 24px;
   border-radius: 12px;
@@ -44,7 +44,53 @@
   color: #1f2937;
 }
 
+.addItem-input,
+.addItem-textArea {
+  width: 100%;
+}
+
+.addItem-image-input {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  color: var(--gray400);
+}
+
+.addItem-image-input,
+.addItem-image-card {
+  aspect-ratio: 1;
+  width: 282px;
+}
+
 .addItem-textArea {
   height: 282px;
   resize: none;
 }
+
+.addItem-image-area {
+  display: flex;
+  gap: 16px;
+}
+
+.addItem-image-card {
+  position: relative;
+}
+
+.addItem-image-card > button {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+
+@media screen and (max-width: 767px) {
+  .addItem-image-input,
+  .addItem-image-card {
+    width: 160px;
+  }
+  .addItem-image-area {
+    gap: 10px;
+  }
+}

vite-project/src/pages/AddItemPage/AddItemPage.style.css

@@ -1,7 +1,38 @@
-import React from "react";
+import ErrorMessage from "../../../../common/ErrorMessage";
 
-const AddItemImage = () => {
-  return <div>index</div>;
+const AddItemImage = ({ ref, error, image, onChange, onDelete }) => {
+  return (
+    <div>
+      <h4>상품 이미지</h4>
+      <div className="addItem-image-area">
+        <label htmlFor="file-upload" className="addItem-image-input">
+          <img src="images/ic_plus.svg" />
+          <span>이미지 등록</span>
+        </label>
+        <input
+          id="file-upload"
+          type="file"
+          ref={ref}
+          className="addItem-image-input"
+          style={{ display: "none" }}
+          onChange={onChange}
+        />
+        {image && (
+          <div className="addItem-image-card">
+            <button
+              type="button"
+              className="button ic-x-btn"
+              onClick={onDelete}
+            >
+              <img src="images/ic_x.svg" />
+            </button>
+            <img src={image} style={{ width: "100%", height: "100%" }} />
+          </div>
+        )}
+      </div>
+      {error && <ErrorMessage errorMessage={error} />}
+    </div>
+  );
 };
 
 export default AddItemImage;

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import "./AddItemPage.style.css";
 import AddItemDescription from "./components/AddItemDescription";
 import AddItemFormHeader from "./components/AddItemFormHeader";
@@ -18,8 +18,35 @@ const AddItemPage = () => {
   });
 
   const [inputValueTag, setInputValueTag] = useState("");
+  const [previewImage, setPreviewImage] = useState("");
   const [errors, setErrors] = useState({ image: "", tag: "" }); // POST요청 에러까지 추후에 들어갈지도
 
+  const fileInputRef = useRef(null);
+
+  const handleChangeImage = (e) => {
+    if (previewImage) {
+      setErrors((prev) => ({
+        ...prev,
+        image: "이미지 파일은 1개만 등록할 수 있습니다",
+      }));
+      return;
+    }
+    const file = e.target.files[0];
+    const url = URL.createObjectURL(file);
+    setPreviewImage(url);
+    const newImages = [url];
+    setFormData((prev) => ({ ...prev, images: newImages }));
+  };
+
+  const handleDeleteImage = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    setPreviewImage("");
+    setFormData((prev) => ({ ...prev, images: [] }));
+    setErrors((prev) => ({ ...prev, image: "" }));
+  };
+
   const handleChange = (e, category) => {
     setFormData((prev) => ({ ...prev, [category]: e.target.value }));
   };
@@ -57,7 +84,13 @@ const AddItemPage = () => {
     <div className="addItem-page-layout">
       <form className="addItem-form" onSubmit={handleSubmitAddItem}>
         <AddItemFormHeader />
-        <AddItemImage images={formData.images} error={errors.image} />
+        <AddItemImage
+          image={previewImage}
+          ref={fileInputRef}
+          error={errors.image}
+          onChange={handleChangeImage}
+          onDelete={handleDeleteImage}
+        />
         <AddItemName
           value={formData.name}
           onChange={(e) => handleChange(e, "name")}