[이유진] sprint6

package.json

@@ -9,6 +9,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.55.0",
     "react-router-dom": "^7.5.0",
     "sass": "^1.86.3",
     "web-vitals": "^2.1.4"

src/App.jsx

@@ -4,6 +4,7 @@ import Login from "./pages/Sign/Login";
 import Signup from "./pages/Sign/Signup";
 import Main from "./pages/main/Main";
 import Items from "./pages/Items/Items";
+import AddItem from "./pages/AddItem/AddItem";
 
 function App() {
   return (
@@ -13,6 +14,7 @@ function App() {
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<Signup />} />
         <Route path="/items" element={<Items />} />
+        <Route path="/additem" element={<AddItem />} />
       </Routes>
     </BrowserRouter>
   );

src/components/Input/ImageUploader/ImageUploader.jsx

@@ -0,0 +1,66 @@
+import React, { useRef, useState } from "react";
+import "./ImageUploader.scss";
+import plusIcon from "../../../images/ic_plus.png";
+
+function ImageUploader({ value, onChange }) {
+  const fileInputRef = useRef(null);
+  const [error, setError] = useState("");
+
+  const handleFileChange = (e) => {
+    const file = e.target.files?.[0];
+
+    if (value) {
+      setError("*이미지 등록은 최대 1개까지 가능합니다.");
+      if (fileInputRef.current) fileInputRef.current.value = "";
+      return;
+    }
+
+    if (file) {
+      const imageUrl = URL.createObjectURL(file);
+      onChange({ file, preview: imageUrl });
+      setError("");
+    }
+  };
+
+  const handleRemove = () => {
+    onChange(null);
+    setError("");
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  return (
+    <div className={`image-uploader ${error ? "error" : ""}`}>
+      <label className="input-label">상품 이미지</label>
+      <div className="image-preview-container">
+        <div className="upload-box">
+          <span>
+            <img src={plusIcon} alt="" />
+          </span>
+          <span>이미지 등록</span>
+          <input
+            type="file"
+            accept="image/"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+          />
+        </div>
+        {value && (
+          <div className="upload-image">
+            <img src={value.preview} alt="미리보기" />
+            <button
+              type="button"
+              className="el-btn btn-remove"
+              aria-label="이미지 삭제"
+              onClick={handleRemove}
+            ></button>
+          </div>
+        )}
+      </div>
+      {error && <p className="error-msg">{error}</p>}
+    </div>
+  );
+}
+
+export default ImageUploader;

src/components/Input/ImageUploader/ImageUploader.scss

@@ -0,0 +1,75 @@
+@charset 'uft-8';
+
+.image-uploader {
+  .image-preview-container {
+    display: flex;
+    gap: 24px;
+
+    .upload-box {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 282px;
+      height: 282px;
+      background: var(--color-gray100);
+      border-radius: 12px;
+      color: var(--color-gray400);
+      font-size: var(--text-lg);
+
+      input {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        opacity: 0;
+      }
+    }
+
+    .upload-image {
+      position: relative;
+      width: 282px;
+      height: 282px;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 12px;
+      }
+
+      .el-btn.btn-remove {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+      }
+    }
+  }
+
+  .error-msg {
+    margin-top: 16px;
+    font-size: var(--text-lg);
+    color: var(--color-error);
+  }
+}
+
+@media (width < 1200px) {
+  .image-uploader {
+    .image-preview-container {
+      gap: 10px;
+
+      .upload-box {
+        width: 168px;
+        height: 168px;
+      }
+
+      .upload-image {
+        width: 168px;
+        height: 168px;
+      }
+    }
+  }
+}

src/components/Input/TageInput/TagInput.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import "./TagInput.scss";
+
+function TagInput({ tags, onChange }) {
+  const [inputValue, setInputValue] = useState("");
+
+  const handleKeyDown = (e) => {
+    if ((e.key === "Enter" || e.key === ",") && inputValue.trim()) {
+      e.preventDefault();
+      const newTag = inputValue.trim();
+      if (!tags.includes(newTag)) {
+        onChange([...tags, newTag]);
+      }
+      setInputValue("");
+    }
+  };
+
+  const removeTag = (indexToRemove) => {
+    const updatedTag = tags.filter((_, index) => index !== indexToRemove);
+    onChange(updatedTag);
+  };
+
+  return (
+    <div className="tag-input-container el-txt-input">
+      <label className="input-label">태그</label>
+      <div className="tag-input-box">
+        <input
+          type="text"
+          placeholder="태그를 입력해주세요"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+      </div>
+      <div className="tag-list">
+        {tags.map((tag, index) => (
+          <div className="tag-item" key={index}>
+            {tag}
+            <button
+              className="el-btn btn-remove"
+              onClick={() => removeTag(index)}
+            ></button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default TagInput;

src/components/Input/TageInput/TagInput.scss

@@ -0,0 +1,30 @@
+@charset 'uft-8';
+
+.tag-input-container {
+  .tag-list {
+    margin-top: 14px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .tag-item {
+      position: relative;
+      background: var(--color-gray100);
+      border-radius: 26px;
+      padding: 0 42px 0 16px;
+      font-size: var(--text-lg);
+      color: var(--color-gray800);
+      line-height: 36px;
+
+      &::before {
+        content: "#";
+      }
+
+      .el-btn.btn-remove {
+        top: 50%;
+        right: 12px;
+        transform: translateY(-50%);
+      }
+    }
+  }
+}