[최성락] Sprint7

src/App.js

@@ -2,12 +2,14 @@ import "./App.css";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import ItemsPage from "./pages/ItemPage/ItemsPage";
 import AddItemPage from "./pages/AddItemPage/AddItemPage";
+import ItemDetailPage from "./pages/ItemDetailPage/ItemDetailPage";
 
 function App() {
   return (
     <Router>
       <Routes>
         <Route path="/items" element={<ItemsPage />} />
+        <Route path="/items/:productId" element={<ItemDetailPage />} />
         <Route path="/additem" element={<AddItemPage />} />
       </Routes>
     </Router>

src/api/product.js

@@ -1,5 +1,6 @@
 import { BASE_URL } from "../constants/apiUrls";
 import { handleResponseError } from "../utils/errorHandler";
+import { HttpException } from "../utils/exceptions";
 
 export const fetchProducts = async (orderBy, pageSize) => {
   const params = new URLSearchParams({ orderBy, pageSize });
@@ -19,7 +20,63 @@ export const fetchProducts = async (orderBy, pageSize) => {
     const data = await response.json();
     return data;
   } catch (error) {
-    console.error("네트워크 오류", error);
-    throw new Error("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
+    if (error instanceof HttpException) {
+      throw error;
+    } else {
+      console.error("네트워크 오류", error);
+      throw new Error("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
+    }
+  }
+};
+
+export const fetchProductById = async (productId) => {
+  try {
+    const response = await fetch(`${BASE_URL}/${productId}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      handleResponseError(response);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    if (error instanceof HttpException) {
+      throw error;
+    } else {
+      console.error("네트워크 오류", error);
+      throw new Error("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
+    }
+  }
+};
+
+export const fetchProductCommentById = async (productId, limit = 10) => {
+  const params = new URLSearchParams({ limit: limit });
+
+  try {
+    const response = await fetch(`${BASE_URL}/${productId}/comments?${params.toString()}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      handleResponseError(response);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    if (error instanceof HttpException) {
+      throw error;
+    } else {
+      console.error("네트워크 오류", error);
+      throw new Error("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
+    }
   }
 };

src/components/section/AllProductsSection.js

@@ -1,11 +1,11 @@
 import { fetchProducts } from "../../api/product";
 import { useCallback, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
+import { HttpException } from "../../utils/exceptions";
 import ItemCard from "../ui/Item/ItemCard";
 import "./AllProductsSection.css";
 
-const getPageSize = () => {
-  const width = window.innerWidth;
+const getPageLimit = (width) => {
   if (width > 1199) {
     return 10;
   } else if (width > 768) {
@@ -17,15 +17,24 @@ const getPageSize = () => {
 
 function AllProductsSection({ sortOption }) {
   const [items, setItems] = useState([]);
-  const [pageSize, setPageSize] = useState(getPageSize());
+  const [pageSize, setPageSize] = useState(getPageLimit(window.innerWidth));
+  const [error, setError] = useState(null);
 
-  const getProducts = async () => {
-    const { list } = await fetchProducts(sortOption, pageSize);
-    setItems(list);
+  const getProducts = async (limit, sort) => {
+    try {
+      const { list } = await fetchProducts(sort, limit);
+      setItems(list);
+    } catch (error) {
+      if (error instanceof HttpException) {
+        setError(error.message);
+      } else {
+        setError("알 수 없는 오류가 발생했습니다.");
+      }
+    }
   };
 
   const handleResize = useCallback(() => {
-    const newPageSize = getPageSize();
+    const newPageSize = getPageLimit(window.innerWidth);
     if (newPageSize !== pageSize) {
       setPageSize(newPageSize);
     }
@@ -37,9 +46,15 @@ function AllProductsSection({ sortOption }) {
   }, [handleResize]);
 
   useEffect(() => {
-    getProducts();
+    if (pageSize !== null) {
+      getProducts(pageSize, sortOption);
+    }
   }, [sortOption, pageSize]);
 
+  if (error) {
+    return <div>오류: {error}</div>;
+  }
+
   return (
     <section className="all-products">
       <div className="all-products-list">

src/components/section/BestProductsSection.js

@@ -1,11 +1,11 @@
 import { useEffect, useState, useCallback } from "react";
 import { Link } from "react-router-dom";
 import { fetchProducts } from "../../api/product.js";
+import { HttpException } from "../../utils/exceptions.js";
 import ItemCard from "../ui/Item/ItemCard.js";
 import "./BestProductsSection.css";
 
-const getPageSize = () => {
-  const width = window.innerWidth;
+const getPageLimit = (width) => {
   if (width > 1199) {
     return 4;
   } else if (width > 768) {
@@ -18,33 +18,46 @@ const getPageSize = () => {
 function BestProductsSection() {
   const [items, setItems] = useState([]);
   const [pageSize, setPageSize] = useState(null);
+  const [error, setError] = useState(null);
 
-  const getProducts = async () => {
-    if (pageSize !== null) {
-      const { list } = await fetchProducts("favorite", pageSize);
-      setItems(list);
+  const getProducts = async (limit) => {
+    if (limit !== null) {
+      try {
+        const { list } = await fetchProducts("favorite", limit);
+        setItems(list);
+      } catch (error) {
+        if (error instanceof HttpException) {
+          setError(error.message);
+        } else {
+          setError("알 수 없는 오류가 발생했습니다.");
+        }
+      }
     }
   };
 
   const handleResize = useCallback(() => {
-    const newPageSize = getPageSize();
+    const newPageSize = getPageLimit(window.innerWidth);
     if (newPageSize !== pageSize) {
       setPageSize(newPageSize);
     }
   }, [pageSize]);
 
   useEffect(() => {
-    const initialPageSize = getPageSize();
+    const initialPageSize = getPageLimit(window.innerWidth);
     setPageSize(initialPageSize);
 
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [handleResize]);
 
   useEffect(() => {
-    getProducts();
+    getProducts(pageSize);
   }, [pageSize]);
 
+  if (error) {
+    return <div>오류: {error}</div>;
+  }
+
   return (
     <section className="best-products">
       <h2 className="best-products-title">베스트 상품</h2>

src/components/section/CommentList/CommentList.css

@@ -0,0 +1,59 @@
+.comments-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.comment-wrapper {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.comment-author {
+  display: flex;
+}
+
+.comment-options {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  margin-left: auto;
+}
+
+.comment-content {
+  font-size: 14px;
+  color: #1f2937;
+  padding-top: 14px;
+}
+
+.comment-profile-image {
+  padding-right: 15px;
+}
+
+.comment-author-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.comment-nickname {
+  font-size: 12px;
+  color: #4b5563;
+  line-height: 18px;
+}
+
+.comment-date {
+  font-size: 12px;
+  line-height: 18px;
+  color: #9ca3af;
+}
+
+.comment-empty {
+  margin: 0 auto;
+  text-align: center;
+}
+
+.comment-empty-text {
+  color: #9ca3af;
+}

src/components/section/CommentList/CommentList.js

@@ -0,0 +1,41 @@
+import { formatRelativeTime } from "../../../utils/formatRelativeTime";
+import "./CommentList.css";
+import profile from "../../../assets/images/profile.svg";
+import ic_kebab from "../../../assets/icons/ic_kebab.svg";
+import inquiry_empty from "../../../assets/images/Img_inquiry_empty.svg";
+
+function CommentList({ comments }) {
+  const getRelativeTime = (createdAt, updatedAt) => {
+    if (updatedAt && updatedAt !== createdAt) {
+      return formatRelativeTime(updatedAt);
+    }
+    return formatRelativeTime(createdAt);
+  };
+
+  return (
+    <div className="comments-list">
+      {comments?.length > 0 ? (
+        comments.map((comment) => (
+          <div key={comment.id} className="comment-wrapper">
+            <p className="comment-content">{comment.content}</p>
+            <img src={ic_kebab} alt="수정 삭제 버튼" className="comment-options" />
+            <div className="comment-author">
+              <img src={profile} alt={`${comment.writer.nickname} 프로필 이미지`} className="comment-profile-image" />
+              <div className="comment-author-detail">
+                <p className="comment-nickname">{comment.writer.nickname}</p>
+                <p className="comment-date">{getRelativeTime(comment.createdAt, comment.updatedAt)}</p>
+              </div>
+            </div>
+          </div>
+        ))
+      ) : (
+        <div className="comment-empty">
+          <img src={inquiry_empty} alt="댓글 없음" className="comment-empty-image" />
+          <p className="comment-empty-text">아직 문의가 없어요</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CommentList;

src/components/section/InquiryForm/InquiryForm.css

@@ -0,0 +1,29 @@
+.inquiry-form {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  position: relative;
+  padding: 30px 0;
+}
+
+.custom-inquiry-input {
+  height: 104px;
+}
+
+.inquiry-button {
+  padding: 12px 23px;
+  border-radius: 8px;
+  border: none;
+  background-color: #9ca3af;
+  color: #f3f4f6;
+  transition: background-color 0.3s ease;
+}
+
+.inquiry-button.active {
+  background-color: #3692ff;
+}
+
+.inquiry-button-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}