[유용민] sprint7

src/apis/commentApi.js

@@ -0,0 +1,20 @@
+import { instance } from "./instance";
+
+export const getComments = async ({
+  productId,
+  limit = "3",
+  cursor = null,
+} = {}) => {
+  if (!productId) {
+    throw new Error("productId가 필요합니다.");
+  }
+  try {
+    const params = { limit, cursor };
+    const { data } = await instance.get(`products/${productId}/comments`, {
+      params,
+    });
+    return data;
+  } catch (error) {
+    throw new Error(`데이터 불러오기 실패: ${error.message}`);
+  }
+};

src/apis/detailApi.js

@@ -0,0 +1,11 @@
+import { instance } from "./instance";
+
+export const getItemDetail = async (productId) => {
+  try {
+    const id = Number(productId);
+    const { data } = await instance.get(`products/${id}`);
+    return data;
+  } catch (error) {
+    throw new Error(`데이터 불러오기 실패: ${error.message}`);
+  }
+};

src/assets/icons/icon_return.jsx

@@ -0,0 +1,17 @@
+export default function ReturnIcon() {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.53333 3.60012C6.03627 3.60012 5.63333 4.00307 5.63333 4.50012C5.63333 4.99718 6.03627 5.40012 6.53333 5.40012V3.60012ZM6.53333 5.40012H16.6667V3.60012H6.53333V5.40012ZM21.1 9.83345V10.9001H22.9V9.83345H21.1ZM16.6667 15.3335H6.53333V17.1335H16.6667V15.3335ZM21.1 10.9001C21.1 13.3486 19.1151 15.3335 16.6667 15.3335V17.1335C20.1092 17.1335 22.9 14.3427 22.9 10.9001H21.1ZM16.6667 5.40012C19.1151 5.40012 21.1 7.38499 21.1 9.83345H22.9C22.9 6.39088 20.1092 3.60012 16.6667 3.60012V5.40012Z"
+        fill="white"
+      />
+      <path d="M3 16.2335L10.2 12.5384L10.2 19.9285L3 16.2335Z" fill="white" />
+    </svg>
+  );
+}

src/assets/icons/icon_vertical-ellipsis.jsx

@@ -0,0 +1,15 @@
+export default function VerticalEllipsis() {
+  return (
+    <svg
+      width="3"
+      height="13"
+      viewBox="0 0 3 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="1.5" cy="1.5" r="1.5" fill="#9CA3AF" />
+      <circle cx="1.5" cy="6.5" r="1.5" fill="#9CA3AF" />
+      <circle cx="1.5" cy="11.5" r="1.5" fill="#9CA3AF" />
+    </svg>
+  );
+}

src/assets/utils.js

@@ -0,0 +1,18 @@
+export function formatToTimeAgo(date) {
+  const dayInMs = 1000 * 60 * 60 * 24;
+  const time = new Date(date).getTime();
+  const now = new Date().getTime();
+  const diff = Math.round((time - now) / dayInMs);
+
+  const formatter = new Intl.RelativeTimeFormat("ko");
+
+  return formatter.format(diff, "days");
+}
+
+export function formatDateToYMD(dateString) {
+  const date = new Date(dateString);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0"); // 0-indexed
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}.${month}.${day}`;
+}

src/components/AllProductList.jsx

@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom";
 import HeartIcon from "../assets/icons/icon_heart";
 import noImage from "../assets/images/no-image.png";
 
@@ -20,7 +21,8 @@ export default function AllProductList({ data = [] }) {
         if (index >= display.desktop) hiddenClass += " xl:hidden";
 
         return (
-          <div
+          <Link
+            to={`/items/${item.id}`}
             key={item.id}
             className={`flex flex-col gap-2 w-full h-full ${hiddenClass}`}
           >
@@ -39,7 +41,7 @@ export default function AllProductList({ data = [] }) {
               <HeartIcon />
               {item.favoriteCount}
             </p>
-          </div>
+          </Link>
         );
       })}
     </div>

src/components/BestProducts.jsx

@@ -1,5 +1,5 @@
+import { Link } from "react-router-dom";
 import HeartIcon from "../assets/icons/icon_heart";
-import ProductList from "./AllProductList";
 
 export default function BestProductList({ data = [] }) {
   const display = {
@@ -27,7 +27,8 @@ export default function BestProductList({ data = [] }) {
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5 w-full mt-10 text-[1.6rem] text-[#1F2937]">
       {filteredData.map((item) => (
-        <div
+        <Link
+          to={`/items/${item.id}`}
           key={item.id}
           className={`flex flex-col gap-2 w-full ${item.hiddenClass}`}
         >
@@ -38,7 +39,7 @@ export default function BestProductList({ data = [] }) {
             <HeartIcon />
             {item.favoriteCount}
           </p>
-        </div>
+        </Link>
       ))}
     </div>
   );

src/components/Nav.jsx

@@ -13,7 +13,7 @@ export default function Nav() {
         className="
           max-w-[1920px]
           mx-auto
-          px-[2rem] sm:px-[5rem] md:px-[10rem] lg:px-[20rem]
+          px-[2rem] sm:px-[2rem] md:px-[2rem] lg:px-[20rem]
           py-4
           flex justify-between
         "

src/pages/ProductDetail.jsx

@@ -0,0 +1,244 @@
+import { Link, useParams } from "react-router-dom";
+import { getItemDetail } from "../apis/detailApi";
+import { useEffect, useState } from "react";
+import noImage from "../assets/images/no-image.png";
+import avatar from "../assets/images/avatar.png";
+import HeartIcon from "../assets/icons/icon_heart";
+import VerticalEllipsis from "../assets/icons/icon_vertical-ellipsis";
+import { getComments } from "../apis/commentApi";
+import { formatDateToYMD, formatToTimeAgo } from "../assets/utils";
+import ReturnIcon from "../assets/icons/icon_return";
+import noComment from "../assets/images/no-comments.png";
+
+export default function ProductDetail() {
+  const [item, setItem] = useState(null);
+  const [comments, setComments] = useState([]);
+  const [openMenuId, setOpenMenuId] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [editingCommentId, setEditingCommentId] = useState(null);
+  const [editedContent, setEditedContent] = useState("");
+  const [commentText, setCommentText] = useState("");
+  const { productId } = useParams();
+
+  const getDetailData = async () => {
+    try {
+      setIsLoading(true);
+      const data = await getItemDetail(productId);
+      setItem(data);
+    } catch (error) {
+      console.error("상품 상세 데이터 오류", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const getCommentsData = async () => {
+    try {
+      setIsLoading(true);
+      const data = await getComments({ productId });
+      setComments(data.list);
+    } catch (error) {
+      console.error("코멘트 데이터 오류", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (productId) {
+      getDetailData();
+      getCommentsData();
+    }
+  }, [productId]);
+
+  const handleEdit = (id, content) => {
+    setEditingCommentId(id);
+    setEditedContent(content);
+    setOpenMenuId(null); // 드롭다운 닫기
+  };
+
+  if (isLoading) {
+    return <p className="text-center animate-bounce ">로딩 중..</p>;
+  }
+
+  if (!item) {
+    return <p className="text-center animate-bounce">상품 정보가 없습니다.</p>;
+  }
+
+  return (
+    <div className="max-w-[120rem] mx-auto p-7">
+      <div className="flex flex-col md:flex-row w-full h-[25%] gap-10 mx-auto text-[#4B5563] border-b-gray-200 border-b pb-10">
+        <div className="w-full md:w-[35%] h-full">
+          <img
+            className="h-full aspect-1/1 rounded-3xl"
+            src={item.images[0] || noImage}
+          />
+        </div>
+        <div className="flex flex-col w-full md:w-[65%] justify-between">
+          <div className="flex flex-col gap-5 mb-5 text-[#1F2937]">
+            <div className="flex justify-between pr-5 ">
+              <h3 className="text-[2rem] font-[600]">{item.name}</h3>
+              <VerticalEllipsis />
+            </div>
+            <h1 className="text-[3.2rem] font-[600]">
+              {item.price.toLocaleString()}원
+            </h1>
+          </div>
+          <div className="flex flex-col gap-5 mb-5">
+            <h5 className="text-[1.4rem] font-[600]">상품 소개</h5>
+            <p className="text-[1.2rem] font-[400] h-[10vh]">
+              {item.description}
+            </p>
+          </div>
+          <div className="flex flex-col gap-5 mb-5">
+            <h5 className="text-[1.4rem] font-[600]">상품 태그</h5>
+            <div className="flex gap-2 flex-wrap mt-2">
+              {item.tags &&
+                item.tags.map((tag) => (
+                  <div
+                    key={tag}
+                    className="bg-gray-100 text-black px-3 py-2 rounded-full flex items-center text-[1.2rem]"
+                  >
+                    #{tag}
+                  </div>
+                ))}
+            </div>
+          </div>
+          <div className="flex w-full justify-between items-center bg-transparent">
+            <div className="flex h-full items-center gap-3">
+              <img
+                src={avatar}
+                className="bg-gray-300 rounded-full size-[4rem]"
+                alt="Owner Avatar"
+              />
+              <div className="flex flex-col py-1 justify-between h-full">
+                <p className="text-[#4B5563]">{item.ownerNickname}</p>
+                <p className="text-[#9CA3AF]">
+                  {formatDateToYMD(item.updatedAt)}
+                </p>
+              </div>
+            </div>
+            <div className="flex border border-[#E5E7EB] rounded-full px-2 py-0.5">
+              <HeartIcon />
+              <p>{item.favoriteCount}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-5 mt-10">
+        <h3 className="text-[1.4rem] font-[600]">문의하기</h3>
+        <textarea
+          id="productDescription"
+          placeholder="개인정보를 공유 및 요청하시거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+          rows="5"
+          className="w-full p-4 bg-[#F3F4F6] placeholder:text-[#9CA3AF] placeholder:text-[1.4rem]"
+          value={commentText}
+          onChange={(e) => setCommentText(e.target.value)}
+        />
+        <div className="flex justify-end ">
+          <button
+            type="submit"
+            className={`py-2.5 px-4 rounded-md transition-all text-white cursor-pointer
+    ${
+      commentText.trim() === ""
+        ? "bg-gray-300 cursor-not-allowed"
+        : "bg-[#3692FF] hover:scale-120"
+    }
+  `}
+            disabled={commentText.trim() === ""} // 입력 없으면 비활성화
+          >
+            등록
+          </button>
+        </div>
+      </div>
+      <div className="flex flex-col gap-10 my-10">
+        {comments.length !== 0 ? (
+          comments.map((comment) => (
+            <div className="flex flex-col gap-10 border-b border-b-gray-200 pb-5">
+              {/* ✅ 수정 input 영역 */}
+              {editingCommentId === comment.id && (
+                <div className="flex flex-col gap-2 mb-2">
+                  <textarea
+                    type="text"
+                    value={editedContent}
+                    rows="2"
+                    onChange={(e) => setEditedContent(e.target.value)}
+                    className="border p-2 rounded text-[1.4rem] bg-[#F3F4F6] text-[#1F2937]"
+                    placeholder="수정할 내용을 입력하세요"
+                  />
+                  <div className="flex justify-end gap-2">
+                    <button
+                      className="text-[1rem] text-[#737373] font-[600] px-5 py-2 border border-gray-300 rounded-xl"
+                      onClick={() => setEditingCommentId(null)}
+                    >
+                      취소
+                    </button>
+                    <button
+                      className="text-[1rem] font-[600] px-5 py-2 bg-[#3692FF] text-white rounded-xl"
+                      onClick={() => setEditingCommentId(null)}
+                    >
+                      수정 완료
+                    </button>
+                  </div>
+                </div>
+              )}
+              <div className="flex justify-between pr-5">
+                <p className="text-[1.2rem] font-[400]">{comment.content}</p>
+                <div className="relative">
+                  <button
+                    className="cursor-pointer"
+                    onClick={() =>
+                      setOpenMenuId(
+                        openMenuId === comment.id ? null : comment.id
+                      )
+                    }
+                  >
+                    <VerticalEllipsis />
+                  </button>
+                  {openMenuId === comment.id && (
+                    <div className="absolute right-0 mt-2 w-32 bg-white border border-gray-200 rounded shadow-md z-10">
+                      <button
+                        className="w-full text-left px-4 py-2 text-sm hover:bg-[#3692FF] hover:text-white"
+                        onClick={() => handleEdit(comment.id, comment.content)}
+                      >
+                        수정하기
+                      </button>
+                      <button className="w-full text-left px-4 py-2 text-sm hover:bg-[#3692FF] hover:text-white">
+                        삭제하기
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="flex h-full items-center gap-3">
+                <img
+                  src={avatar}
+                  className="bg-gray-300 rounded-full size-[4rem]"
+                  alt="Owner Avatar"
+                />
+                <div className="flex flex-col py-1 justify-between h-full">
+                  <p>{comment.writer.nickname}</p>
+                  <p className="text-gray-400">
+                    {formatToTimeAgo(comment.updatedAt)}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))
+        ) : (
+          <div className="flex justify-center items-center w-full h-full">
+            <img className="aspect-square w-1/6" src={noComment} />
+          </div>
+        )}
+      </div>
+      <div className="flex justify-center">
+        <Link
+          to="/items"
+          className="bg-[#3692FF] flex text-white items-center text-[1.6rem] py-3 px-5 rounded-full transition-all hover:scale-120"
+        >
+          목록으로 돌아가기 <ReturnIcon />
+        </Link>
+      </div>
+    </div>
+  );
+}

src/pages/Products.jsx

@@ -38,7 +38,7 @@ export default function Products() {
         page: 1,
         pageSize: 4,
       });
-      console.log("best", data);
+
       setBestItems(data.list);
     } catch (error) {
       setError(error.message);