diff --git a/sprint-mission5/src/Main.js b/sprint-mission5/src/Main.js
deleted file mode 100644
index 579cfb498..000000000
--- a/sprint-mission5/src/Main.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import App from "./components/App";
-import ItemsPage from "./pages/ItemsPage";
-import AddProductPage from "./pages/AddProductPage";
-
-function Main() {
- return (
-
-
-
- } />
- } />
-
-
-
- );
-}
-
-export default Main;
diff --git a/sprint-mission5/src/api/api.js b/sprint-mission5/src/api/api.js
deleted file mode 100644
index 3d2672954..000000000
--- a/sprint-mission5/src/api/api.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const BASE_URL = `https://panda-market-api.vercel.app`;
-
-export async function getProducts({
- page = "1",
- pageSize = "10",
- orderBy = "recent",
- keyword = "",
-}) {
- const query = `page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}`;
-
- try {
- const response = await fetch(`/products?${query}`);
- if (!response.ok) {
- throw new Error(`HTTP error: ${response.status}`);
- }
- const body = await response.json();
- return body;
- } catch (error) {
- console.error("Failed to fetch products:", error);
- throw error;
- }
-}
-
-export async function createProduct(formData) {
- const response = await fetch(`${BASE_URL}/products`, {
- method: "POST",
- body: formData,
- });
- if (!response.ok) {
- throw new Error("Failed to post products");
- }
- const body = await response.json();
- return body;
-}
diff --git a/sprint-mission5/src/components/ItemCard.jsx b/sprint-mission5/src/components/ItemCard.jsx
deleted file mode 100644
index 7437f0ce3..000000000
--- a/sprint-mission5/src/components/ItemCard.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import favoriteIcon from "../assets/Icon.png";
-
-function ItemCard({ item }) {
- return (
-
-
-
-
{item.name}
-
{item.price.toLocaleString()}원
-
-
- {item.favoriteCount}
-
-
-
@@ -55,7 +70,7 @@ function AllProducts() {
-
상품 등록하기
+
상품 등록하기
{children}
+
+
+
);
}
diff --git a/sprint-mission5/src/components/App.module.css b/sprint-mission7/src/components/App.module.css
similarity index 66%
rename from sprint-mission5/src/components/App.module.css
rename to sprint-mission7/src/components/App.module.css
index 30245cb5d..6a5246307 100644
--- a/sprint-mission5/src/components/App.module.css
+++ b/sprint-mission7/src/components/App.module.css
@@ -4,6 +4,5 @@
}
body {
- margin: 0;
- padding-top: 70px;
+ margin-top: 70px;
}
diff --git a/sprint-mission5/src/components/BestItemsSection.jsx b/sprint-mission7/src/components/BestItemsSection.jsx
similarity index 65%
rename from sprint-mission5/src/components/BestItemsSection.jsx
rename to sprint-mission7/src/components/BestItemsSection.jsx
index ecd963771..9e90b39b9 100644
--- a/sprint-mission5/src/components/BestItemsSection.jsx
+++ b/sprint-mission7/src/components/BestItemsSection.jsx
@@ -3,20 +3,20 @@ import ItemCard from "./ItemCard";
import { getProducts } from "../api/api";
import "./bestItems.css";
+const getPageSize = () => {
+ const width = window.innerWidth;
+ if (width < 768) {
+ return 1;
+ } else if (width < 1280) {
+ return 2;
+ } else {
+ return 4;
+ }
+};
+
function BestProductsSection() {
const [itemList, setItemList] = useState([]);
- const [pageSize, setPageSize] = useState("4");
-
- const getPageSize = () => {
- const width = window.innerWidth;
- if (width < 768) {
- return 1;
- } else if (width < 1280) {
- return 2;
- } else {
- return 4;
- }
- };
+ const [pageSize, setPageSize] = useState(4);
const fetchSortedData = async ({ orderBy, pageSize }) => {
const products = await getProducts({ orderBy, pageSize });
@@ -24,8 +24,16 @@ function BestProductsSection() {
};
useEffect(() => {
+ const handleResize = () => {
+ setPageSize(getPageSize());
+ };
+
+ window.addEventListener("resize", handleResize);
fetchSortedData({ orderBy: "favorite", pageSize });
- setPageSize(getPageSize());
+
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ };
}, [pageSize]);
return (
diff --git a/sprint-mission7/src/components/CommentCard.jsx b/sprint-mission7/src/components/CommentCard.jsx
new file mode 100644
index 000000000..de98850d2
--- /dev/null
+++ b/sprint-mission7/src/components/CommentCard.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+function CommentCard({ comment }) {
+ return (
+
+ );
+}
+
+export default CommentCard;
diff --git a/sprint-mission7/src/components/DetailPage.jsx b/sprint-mission7/src/components/DetailPage.jsx
new file mode 100644
index 000000000..0f86f2848
--- /dev/null
+++ b/sprint-mission7/src/components/DetailPage.jsx
@@ -0,0 +1,82 @@
+import { useParams, Link } from "react-router-dom";
+import { getProductsById, getProductComment } from "../api/api";
+import React, { useEffect, useState } from "react";
+import favoriteIcon from "../assets/Icon.png";
+import styles from "./detailPage.module.css";
+import TagDisplay from "./TagDisplay";
+import CommentCard from "./CommentCard";
+
+function DetailPage() {
+ const { itemSlug } = useParams();
+ const [item, setItem] = useState(null);
+ const [commentList, setCommentList] = useState([]);
+
+ const fetchItemData = async () => {
+ const data = await getProductsById(itemSlug);
+ setItem(data);
+ };
+
+ const fetchCommentData = async () => {
+ const data = await getProductComment(itemSlug);
+ setCommentList(data.list);
+ };
+
+ useEffect(() => {
+ fetchItemData();
+ fetchCommentData();
+ }, [itemSlug]);
+
+ if (!item) {
+ return Loading...
;
+ }
+
+ if (!commentList) {
+ return Loading...
;
+ }
+
+ return (
+ <>
+
+
+
+
+
+
{item.name}
+
{item.price.toLocaleString()}원
+
상품 소개
+
{item.description}
+
상품 태그
+
+
+
+
![]()
+
+
{item.ownerNickname}
+
{item.createdAt}
+
+
+
+
+
{item.favoriteCount}
+
+
+
+
+
+
+
+ {commentList?.map((comment) => (
+
+ ))}
+
+
목록으로 돌아가기
+
+
+
+
+
{item.name}
+
{item.price.toLocaleString()}원
+
+
+ {item.favoriteCount}
+
+
+
+
+
+ {pages.map((page) => (
+
+ ))}
+
+
+ );
+};
+
+export default PaginationBar;
diff --git a/sprint-mission7/src/components/TagDisplay.jsx b/sprint-mission7/src/components/TagDisplay.jsx
new file mode 100644
index 000000000..876120fe4
--- /dev/null
+++ b/sprint-mission7/src/components/TagDisplay.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import styles from "./tagDisplay.module.css";
+
+function TagDisplay({ tags }) {
+ if (!tags || tags.length === 0) return null;
+
+ return (
+
+ {tags.map((tag, index) => (
+
+ #{tag}
+
+ ))}
+