[김희성] Sprint 6

src/App.css

@@ -2,6 +2,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-family: "Pretendard", sans-serif;
 }
 
 #root {

src/api/commentService.js

@@ -0,0 +1,15 @@
+const getComments = async (productId, limit = 5) => {
+  const response = await fetch(
+    `https://panda-market-api.vercel.app/products/${productId}/comments?limit=${limit}`
+  );
+
+  if (!response.ok) {
+    throw new Error("상품 목록 조회에 실패하였습니다.");
+  }
+
+  return await response.json();
+};
+
+export const commentServices = {
+  getComments,
+};

src/api/productServices.js

@@ -17,6 +17,19 @@ const getProducts = async (
   return await response.json();
 };
 
+const getProductDetail = async (productId) => {
+  const response = await fetch(
+    `https://panda-market-api.vercel.app/products/${productId}`
+  );
+
+  if (!response.ok) {
+    throw new Error("상품 목록 조회에 실패하였습니다.");
+  }
+
+  return await response.json();
+};
+
 export const productServices = {
   getProducts,
+  getProductDetail,
 };

src/components/common/imageuploader/ImageUploader.jsx

@@ -0,0 +1,68 @@
+import { useRef, useState } from "react";
+import "./imageUploader.css";
+import plus from "../../../asset/icon/plus.svg";
+import x from "../../../asset/icon/x.svg";
+
+export default function ImageUploader({ image, setImage }) {
+  const inputRef = useRef(null);
+  const [showWarning, setShowWarning] = useState(false);
+
+  const handleImageClick = (e) => {
+    if (image) {
+      e.preventDefault(); // 이미지 등록 막기
+      setShowWarning(true);
+    }
+  };
+
+  const handleImageChange = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setImage(reader.result);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleDelete = () => {
+    setImage(null);
+    setShowWarning(false);
+    inputRef.current.value = "";
+  };
+
+  return (
+    <div className="image-wrapper">
+      <span className="image-title">상품 이미지</span>
+
+      <div className="image-boxes">
+        <label className="upload-label" onClick={handleImageClick}>
+          <img src={plus} alt="추가 아이콘" />
+          <p>이미지 등록</p>
+          <input
+            type="file"
+            accept="image/*"
+            onChange={handleImageChange}
+            ref={inputRef}
+            hidden
+          />
+        </label>
+
+        {image && (
+          <div className="preview-box">
+            <img src={image} alt="미리보기" />
+            <button className="delete-button" onClick={handleDelete}>
+              <img src={x} alt="삭제 아이콘" />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {showWarning && (
+        <p className="warning-message">
+          *이미지 등록은 최대 1개까지 가능합니다.
+        </p>
+      )}
+    </div>
+  );
+}

src/components/common/imageuploader/imageUploader.css

@@ -0,0 +1,102 @@
+/* 전체 wrapper */
+.image-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 32px;
+}
+
+.image-title {
+  font-weight: 700;
+  font-size: 18px;
+  color: #1f2937;
+}
+
+.button {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 8px;
+  font-size: 18px;
+  font-weight: 700;
+  border: none;
+}
+
+.image-boxes {
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+  margin-top: 16px;
+}
+
+.upload-label {
+  width: 282px;
+  height: 282px;
+  border-radius: 12px;
+  background-color: #f3f4f6;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+}
+
+.upload-label img {
+  width: 24px;
+  height: 24px;
+  margin-bottom: 12px;
+}
+
+.upload-label p {
+  font-weight: 400;
+  font-size: 16px;
+  color: #9ca3af;
+}
+
+.preview-box {
+  position: relative;
+  width: 282px;
+  height: 282px;
+  border-radius: 12px;
+}
+
+.preview-box img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 12px;
+}
+
+.delete-button {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.warning-message {
+  font-size: 16px;
+  font-weight: 400;
+  color: #ef4444;
+  margin-top: 16px;
+}
+
+@media (max-width: 768px) {
+}
+
+@media (max-width: 1023px) {
+  .upload-label {
+    width: 168px;
+    height: 168px;
+  }
+
+  .preview-box {
+    width: 168px;
+    height: 168px;
+  }
+
+  .image-boxes {
+    gap: 10px;
+  }
+}

src/components/common/inputbox/InputBox.jsx

@@ -0,0 +1,36 @@
+import "./inputBox.css";
+
+export default function InputBox({
+  title,
+  placeholder,
+  value,
+  name,
+  onChange,
+  onKeyDown,
+  isInput = true,
+  height,
+}) {
+  return (
+    <div className="input-wrapper">
+      <label>{title}</label>
+      {isInput ? (
+        <input
+          type="text"
+          name={name ? name : null}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onKeyDown={onKeyDown ? onKeyDown : null}
+          style={height ? { height } : undefined}
+        />
+      ) : (
+        <textarea
+          name={name ? name : null}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+        />
+      )}
+    </div>
+  );
+}

src/components/common/inputbox/inputBox.css

@@ -0,0 +1,42 @@
+.input-wrapper {
+  margin-bottom: 32px;
+  max-width: 1200px;
+}
+
+.input-wrapper label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.input-wrapper input,
+.input-wrapper textarea {
+  width: 100%;
+
+  background-color: #f5f6f8;
+  border: none;
+  border-radius: 12px;
+  padding: 16px 24px;
+  font-size: 16px;
+  font-weight: 400;
+  color: #1f2937;
+  box-sizing: border-box;
+  resize: none;
+}
+
+.input-wrapper textarea {
+  height: 282px;
+}
+
+.input-wrapper input:focus,
+.input-wrapper textarea:focus {
+  outline: none;
+  border: 2px solid #3692ff;
+}
+
+.input-wrapper input::placeholder,
+.input-wrapper textarea::placeholder {
+  color: #9ca3af;
+}

src/components/common/taginput/TagInput.jsx

@@ -0,0 +1,46 @@
+import InputBox from "../../common/inputbox/InputBox";
+import { useState } from "react";
+import x from "../../../asset/icon/x.svg";
+
+import "./tagInput.css";
+
+export default function TagInput({ tags, setTags }) {
+  const [input, setInput] = useState("");
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && input.trim() !== "") {
+      e.preventDefault();
+
+      const newTag = input.trim();
+
+      if (!tags.includes(newTag)) {
+        setTags([...tags, newTag]);
+      }
+      setInput("");
+    }
+  };
+
+  const handleDelete = (tagToDelete) => {
+    setTags(tags.filter((tag) => tag !== tagToDelete));
+  };
+
+  return (
+    <div className="tag-wrapper">
+      <InputBox
+        title="태그"
+        placeholder="태그를 입력해주세요"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <div className="tag-list">
+        {tags.map((tag) => (
+          <div key={tag} className="tag-item">
+            <span>#{tag}</span>
+            <img src={x} alt="태그 삭제" onClick={() => handleDelete(tag)} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/common/taginput/tagInput.css

@@ -0,0 +1,36 @@
+.tag-wrapper {
+  margin-bottom: 32px;
+}
+
+.tag-wrapper > .input-wrapper {
+  margin-bottom: 14px;
+}
+
+.tag-list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 14px;
+}
+
+.tag-item {
+  display: flex;
+  align-items: center;
+  background-color: #f3f4f6;
+  color: #1f2937;
+  padding: 5px 12px 5px 16px;
+  border-radius: 30px;
+  font-size: 14px;
+  font-family: "Pretendard";
+}
+
+.tag-item span {
+  margin-right: 8px;
+}
+
+.tag-item img {
+  width: 22px;
+  height: 24px;
+  cursor: pointer;
+}

src/components/items/ItemCard.jsx

@@ -7,7 +7,7 @@ export default function ItemCard({ cardInfo, cardType }) {
   const { favoriteCount, images, price, name, id } = cardInfo;
 
   return (
-    <Link to={`items/${id}`} className={cardType === "best" ? "best" : "all"}>
+    <Link to={`/items/${id}`} className={cardType === "best" ? "best" : "all"}>
       <img
         className={cardType === "best" ? "best-card-img" : "all-card-img"}
         src={images && images.length > 0 ? images[0] : noImage}