[장용한]Sprint7

src/API/CommentsAPI.js

@@ -0,0 +1,12 @@
+export async function getComments(productId = 9, limit = 5) {
+  const path = `/products/${productId}/comments?`;
+  const query = `limit=${limit}`;
+  const response = await fetch(
+    `https://panda-market-api.vercel.app${path}${query}`
+  );
+  if (!response.ok) {
+    throw new Error("댓글을 불러오는데 실패했습니다");
+  }
+  const result = await response.json();
+  return result;
+}

src/App.js

@@ -1,22 +1,27 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Header from "./Layout/Header.jsx";
-import HomePage from "./pages/HomePage/HomePage";
+import HomePage from "./pages/HomePage/HomePage.jsx";
 import AddItemPage from "./pages/AddItemPage/AddItemPage.jsx";
 import MarketPage from "./pages/MarketPage/MarketPage.jsx";
+import ProductDetail from "./pages/MarketPage/components/ProductDetail.jsx";
 import { React } from "react";
+import { ItemProvider } from "../src/context/ItemContext.jsx";
 
 function App() {
   return (
-    <BrowserRouter>
-      <div>
-        <Header />
-        <Routes>
-          <Route index element={<HomePage />} />
-          <Route path="items" element={<MarketPage />} />
-          <Route path="/additem" element={<AddItemPage />} />
-        </Routes>
-      </div>
-    </BrowserRouter>
+    <ItemProvider>
+      <BrowserRouter>
+        <div>
+          <Header />
+          <Routes>
+            <Route index element={<HomePage />} />
+            <Route path="items" element={<MarketPage />} />
+            <Route path="/additem" element={<AddItemPage />} />
+            <Route path="/product/:id" element={<ProductDetail />} />
+          </Routes>
+        </div>
+      </BrowserRouter>
+    </ItemProvider>
   );
 }
 

src/context/ItemContext.jsx

@@ -0,0 +1,24 @@
+import React, { createContext, useState, useEffect } from "react";
+import { getProducts } from "../API/ItemAPI";
+
+export const ItemContext = createContext();
+
+export const ItemProvider = ({ children }) => {
+  const [itemList, setItemList] = useState([]);
+
+  useEffect(() => {
+    const fetchAndProcessData = async () => {
+      try {
+        const data = await getProducts();
+        setItemList(data.list);
+      } catch (error) {
+        console.error("데이터를 가져오지 못했습니다", error);
+      }
+    };
+    fetchAndProcessData();
+  }, []);
+
+  return (
+    <ItemContext.Provider value={itemList}>{children}</ItemContext.Provider>
+  );
+};

src/pages/MarketPage/MarketPage.css

@@ -1,5 +1,82 @@
 .MarketPage {
   display: flex;
   flex-direction: column;
-  gap: 100px;
+  gap: 40px;
+  margin: 0px auto;
+  width: 1200px;
+}
+
+.allItemsSectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bestItemsContainer {
+  padding-top: 17px;
+  padding-bottom: 24px;
+  list-style-type: none;
+}
+
+.bestItemsCardSection {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+}
+
+.sectionTitle {
+  color: #111827;
+  font-weight: bold;
+  font-size: 20px;
+  line-height: normal;
+}
+
+.itemCard {
+  color: #1f2937;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.itemCardThumbnail {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  border-radius: 16px;
+  overflow: hidden;
+  aspect-ratio: 1;
+  margin-bottom: 16px;
+}
+
+.itemSummary {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex-grow: 1;
+}
+
+.itemName {
+  font-size: 16px;
+  font-weight: 400;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.itemPrice {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.favoriteCount {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #4b5563;
+  font-size: 12px;
+}
+
+.allItemsCardSection {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 32px 8px;
 }

src/pages/MarketPage/components/AllCard.jsx

@@ -1,19 +1,28 @@
-import { NavLink } from "react-router-dom";
+import { useContext } from "react";
+import { Link } from "react-router-dom";
 import "./style/AllCard.css";
-
-function getLinkStyle({ isActive }) {
-  return {
-    color: isActive ? "#3692ff" : "",
-    textDecoration: isActive ? "none" : "",
-  };
-}
+import ItemCard from "./ItemCard";
+import { ItemContext } from "../../../context/ItemContext";
 
 function AllCard() {
+  const itemList = useContext(ItemContext);
+
   return (
-    <div className="register">
-      <NavLink style={getLinkStyle} to="/additem">
-        상품 등록하기
-      </NavLink>
+    <div>
+      <div className="allItemsSectionHeader">
+        <h1 className="sectionTitle">판매 중인 상품</h1>
+        <Link to="/additem" className="loginLinkButton">
+          상품 등록하기
+        </Link>
+      </div>
+
+      <div className="allItemsCardSection">
+        {itemList.map((item) => (
+          <Link to={`/product/${item.id}`} key={item.id} className="itemLink">
+            <ItemCard item={item} />
+          </Link>
+        ))}
+      </div>
     </div>
   );
 }

src/pages/MarketPage/components/BestCard.jsx

@@ -1,6 +1,7 @@
-import { Fragment, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import "./style/BestCard.css";
 import { getProducts } from "../../../API/ItemAPI";
+import ItemCard from "./ItemCard";
 
 export const getTopFavoriteItems = (data, n) => {
   const sortedItems = data.list.sort(
@@ -9,17 +10,6 @@ export const getTopFavoriteItems = (data, n) => {
   return sortedItems.slice(0, n);
 };
 
-export function CardItem({ item }) {
-  return (
-    <Fragment>
-      <img className="CardImg" src={item.images} alt={item.name} />
-      <h1>{item.name}</h1>
-      <p>{item.price}원</p>
-      <p>{item.ownerId}</p>
-    </Fragment>
-  );
-}
-
 function BestCard() {
   const [itemList, setItemList] = useState([]);
 
@@ -37,15 +27,19 @@ function BestCard() {
   }, []);
 
   return (
-    <ul className="card-container">
-      {itemList.map((item) => {
-        return (
-          <li key={item.id}>
-            <CardItem item={item} />
-          </li>
-        );
-      })}
-    </ul>
+    <div className="bestItemsContainer">
+      <h1 className="sectionTitle">베스트 상품</h1>
+
+      <div className="bestItemsCardSection">
+        {itemList.map((item) => {
+          return (
+            <li key={item.id}>
+              <ItemCard item={item} />
+            </li>
+          );
+        })}
+      </div>
+    </div>
   );
 }
 

src/pages/MarketPage/components/Comments.jsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { getComments } from "../../../API/CommentsAPI";
+
+const timeSince = (date) => {
+  const now = new Date();
+  const updatedAt = new Date(date);
+  const seconds = Math.floor((now - updatedAt) / 1000);
+
+  let interval = Math.floor(seconds / 31536000);
+  if (interval > 1) return `${interval}년 전`;
+
+  interval = Math.floor(seconds / 2592000);
+  if (interval > 1) return `${interval}개월 전`;
+
+  interval = Math.floor(seconds / 86400);
+  if (interval > 1) return `${interval}일 전`;
+
+  interval = Math.floor(seconds / 3600);
+  if (interval > 1) return `${interval}시간 전`;
+
+  interval = Math.floor(seconds / 60);
+  if (interval > 1) return `${interval}분 전`;
+
+  return `${Math.floor(seconds)}초 전`;
+};
+
+function CommentItem({ item }) {
+  return (
+    <div>
+      <h1>{item.content}</h1>
+      <img src={item.images} alt={item.name} />
+      <p>{item.nickname}</p>
+      <p>{timeSince(item.updatedAt)}</p>
+    </div>
+  );
+}
+
+function Comment() {
+  const { id } = useParams(); // URL에서 id 값을 가져옴
+  const [itemList, setItemList] = useState([]);
+
+  useEffect(() => {
+    const fetchAndProcessData = async () => {
+      try {
+        const data = await getComments(id);
+        setItemList(data.list);
+      } catch (error) {
+        console.error("데이터를 가져오지 못했습니다", error);
+      }
+    };
+    fetchAndProcessData();
+  }, [id]);
+
+  return (
+    <ul>
+      {itemList.map((item) => (
+        <li key={item.id}>
+          <CommentItem item={item} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default Comment;

src/pages/MarketPage/components/DetailCard.jsx

@@ -0,0 +1,29 @@
+import React, { useContext } from "react";
+import { useParams } from "react-router-dom";
+import { ItemContext } from "../../../context/ItemContext";
+import { ReactComponent as HeartIcon } from "../../../images/icons/ic_heart.svg";
+import { ReactComponent as SeeMoreIcon } from "../../../images/icons/ic_seemore.svg";
+function DetailCard() {
+  const { id } = useParams();
+  const itemList = useContext(ItemContext);
+  const item = itemList.find((item) => item.id === parseInt(id));
+
+  if (!item) {
+    return <h2>Product not found</h2>;
+  }
+
+  return (
+    <div>
+      <img src={item.images} alt={item.name} />
+      <h1>{item.name}</h1>
+      <SeeMoreIcon />
+      <h2>{item.price}</h2>
+      <p>{item.description}</p>
+      <p>{item.tags}</p>
+      <HeartIcon />
+      <p>{item.favoriteCount}</p>
+    </div>
+  );
+}
+
+export default DetailCard;

src/pages/MarketPage/components/Inquiry.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+
+function Inquiry() {
+  const [inputValue, setInputValue] = useState("");
+
+  const handleInputChange = (event) => {
+    setInputValue(event.target.value);
+  };
+
+  return (
+    <div>
+      문의하기
+      <input
+        type="text"
+        value={inputValue}
+        onChange={handleInputChange}
+        placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+      />
+      <button disabled={!inputValue.trim()}>등록</button>
+    </div>
+  );
+}
+
+export default Inquiry;