[김혜선] sprint7

src/api/Api.js

@@ -0,0 +1,26 @@
+//product item list api
+const BASEURL = "https://panda-market-api.vercel.app";
+export async function getItems({
+  pageSize = 12,
+  orderBy = "recent",
+  page = "1",
+}) {
+  const query = `pageSize=${pageSize}&orderBy=${orderBy}&page=${page}`;
+  const response = await fetch(`${BASEURL}/products?${query}`);
+  const body = await response.json();
+  return body;
+}
+
+//product item detail api
+export async function getItemDetail({ id }) {
+  const response = await fetch(`${BASEURL}/products/${id}`);
+  const body = await response.json();
+  return body;
+}
+
+//product item comment api
+export async function getItemDetailComment({ id }) {
+  const response = await fetch(`${BASEURL}/products/${id}/comments?limit=30`);
+  const body = await response.json();
+  return body;
+}

src/component/Header.js

@@ -2,7 +2,7 @@ import { Link, NavLink } from "react-router-dom";
 import LogoImg from "../images/logo.png";
 import "../css/common.css";
 
-function getLink({ isActive }) {
+function getLinkStyle({ isActive }) {
   return {
     color: isActive ? "#3182f6" : undefined,
   };
@@ -17,10 +17,10 @@ function Header() {
             <img src={LogoImg} alt="로고 이미지" />
           </Link>
           <nav>
-            <NavLink to="/Board" style={getLink}>
+            <NavLink to="/Board" style={getLinkStyle}>
               자유게시판
             </NavLink>
-            <NavLink to="/Product" style={getLink}>
+            <NavLink to="/Product" style={getLinkStyle}>
               중고마켓
             </NavLink>
           </nav>

src/component/Product/BasicProducts.js

@@ -1,4 +1,4 @@
-import { getItems } from "../../Api.js";
+import { getItems } from "../../api/Api.js";
 import Select from "react-select";
 import { useState, useEffect, React } from "react";
 import ProductList from "./ProductList.js";
@@ -16,25 +16,21 @@ function BasicProducts() {
     { value: "favorite", label: "좋아요순", className: "order-value-favorite" },
   ];
   const customStyles = {
-    control: (styles) => ({
-      ...styles,
+    control: (provided) => ({
       borderRadius: "10px",
       border: "1px solid #ddd",
       boxShadow: "none",
       padding: "5px 6px",
-    }),
-    option: (styles, { isFocused, isSelected }) => ({
-      ...styles,
       "&:hover": {
         color: "#7db4f4",
       },
-      color: isSelected ? "#3182f6" : undefined,
-      zIndex: 1,
-      background: isFocused ? "#fff" : isSelected ? "#fff" : undefined,
     }),
-    input: (styles) => ({
+    option: (styles, { isFocused, isSelected }) => ({
       ...styles,
-      color: "transparent",
+      color: isSelected ? "#3182f6" : "inherit",
+      boderBottom: "1px solid #ddd",
+      zIndex: 1,
+      background: isFocused ? "#fff" : isSelected ? "#fff" : undefined,
     }),
   };
   const handlePage = (pageNumber) => {
@@ -47,8 +43,7 @@ function BasicProducts() {
   };
 
   const productsLoad = async (orderBy, page) => {
-    const { list } = await getItems({ orderBy, page });
-    const { totalCount } = await getItems({ pageSize: 12 });
+    const { list, totalCount } = await getItems({ orderBy, page });
     setTotalCount(totalCount);
     setItems(list);
   };
@@ -61,7 +56,7 @@ function BasicProducts() {
       <div className="basic-product-header">
         <h2>전체 상품</h2>
         <input placeholder="검색할 상품을 입력해주세요" />
-        <Link to="addItem">
+        <Link to="/Product/addItem">
           <button>상품 등록하기</button>
         </Link>
         <div className="selectBox">

src/component/Product/BestProduct.js

@@ -1,6 +1,6 @@
 import ProductList from "./ProductList.js";
 import { useState, useEffect, React } from "react";
-import { getItems } from "../../Api.js";
+import { getItems } from "../../api/Api.js";
 
 function BestProducts() {
   const [items, setItems] = useState([]);

src/component/Product/FileInput.js

@@ -52,12 +52,13 @@ function FormInput({ name, value, onChange }) {
 
   return (
     <div className="FileInput">
-      <img
-        src={imgPlaceHolder}
-        alt="이미지 등록 이미지"
-        onClick={() => inputRef.current?.click()} //useRef 사용해서 이미지 클릭시 input 태그가 클릭
-        className="img_placeholder"
-      />
+      <label htmlFor="imgInput">
+        <img
+          src={imgPlaceHolder}
+          alt="이미지 등록 이미지"
+          className="img_placeholder"
+        />
+      </label>
       {preview && (
         <div className="preview_area">
           <img
@@ -76,6 +77,7 @@ function FormInput({ name, value, onChange }) {
         type="file"
         name={name}
         onChange={handleChange}
+        id="imgInput"
         ref={inputRef}
         style={{ display: "none" }}
       />

src/component/Product/ProductDetailComment.js

@@ -0,0 +1,54 @@
+import { useState } from "react";
+
+function CommentItem({ item }) {
+  return (
+    <div className="comment-item">
+      <p>{item.content}</p>
+      <div className="user-info">
+        <img src={item.writer.image} alt="유저 썸네일" />
+        <div className="user-name">
+          <p>{item.writer.nickname}</p>
+          <span>{item.updatedAt}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ProductDetailComment({ comments }) {
+  const [inquiry, setinquiry] = useState("");
+  const handleInputChange = (e) => {
+    setinquiry(e.target.value);
+  };
+  const abledButton = () => {
+    //등록 버튼 활성화
+    if (inquiry) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+  return (
+    <div className="detail-comment">
+      <div className="detail-inquiry">
+        <p>문의하기</p>
+        <textarea
+          onChange={handleInputChange}
+          placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+        ></textarea>
+        <button disabled={!abledButton()}>등록</button>
+      </div>
+      <div className="comment-area">
+        {comments.length === 0 ? (
+          <div className="empty-comment">
+            <p>등록된 댓글이 없습니다.</p>
+          </div>
+        ) : (
+          comments?.map((item) => <CommentItem key={item.id} item={item} />)
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ProductDetailComment;

src/component/Product/ProductList.js

@@ -1,20 +1,22 @@
+import { Link } from "react-router-dom";
 import heartIcon from "../../images/Icon.png";
 
 function ProdictListItem({ item }) {
   const price = item.price.toLocaleString("ko-KR");
 
   return (
-    <div className="product-item">
-      <div className="product-img-area">
-        <img className="product-img" src={item.images} alt={item.name} />
+    <Link to={`/product/${item.id}`}>
+      <div className="product-item">
+        <div className="product-img-area">
+          <img className="product-img" src={item.images} alt={item.name} />
+        </div>
+        <p className="product-title">{item.name}</p>
+        <p className="product-price">{price}원</p>
+        <p className="product-like">
+          <img src={heartIcon} alt="좋아요 이미지" /> {item.favoriteCount}
+        </p>
       </div>
-      <p className="product-title">{item.name}</p>
-      <p className="product-price">{price}원</p>
-      <p className="product-like">
-        {" "}
-        <img src={heartIcon} alt="좋아요 이미지" /> {item.favoriteCount}
-      </p>
-    </div>
+    </Link>
   );
 }
 

src/component/Product/Tags.js

@@ -37,7 +37,7 @@ function Tags({ name, value, onChange }) {
       />
       <ul>
         {addTags &&
-          addTags.map((tag, index) => (
+          addTags?.map((tag, index) => (
             <li key={index} className="tag">
               <span className="tagText">{tag}</span>
               <img

src/component/Product/useProductList.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import { getItems } from "../../api/Api.js";
+
+const useProductList = (loadOptions) => {
+  const [productList, setProductList] = useState([]);
+  const [totalCount, setTotalCount] = useState(0);
+
+  useEffect(() => {
+    const fetchProductList = async () => {
+      try {
+        const { list, totalCount } = await getItems(loadOptions);
+        setProductList(list);
+        setTotalCount(totalCount);
+      } catch (error) {
+        console.error("상품 목록을 불러오는 도중 오류가 발생했습니다:", error);
+      }
+    };
+
+    fetchProductList();
+  }, [loadOptions]);
+
+  return { productList, totalCount };
+};
+
+export default useProductList;