-
- 판매 중인 상품
- - - - 상품 등록하기 - -
- {items.map((item) => (
-
-
+
+ 판매 중인 상품
+ + + + 상품 등록하기 + +
+ {list.map((item) => (
+
+
- 
+ handleItemClick(item.id)}
+ />
+
+ );
+}
+export default InquiryComments;
diff --git a/src/components/items/ItemInfo/InquiryInput.jsx b/src/components/items/ItemInfo/InquiryInput.jsx
new file mode 100644
index 000000000..890a96955
--- /dev/null
+++ b/src/components/items/ItemInfo/InquiryInput.jsx
@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import InquiryComments from "./InquiryComments";
+
+function InquiryInput({ productId }) {
+ const [isFormValid, setIsFormValid] = useState(false);
+ const [inquiryInput, setInquiryInput] = useState("");
+
+ const handleInputChange = (e) => {
+ const value = e.target.value;
+ setInquiryInput(value);
+ setIsFormValid(value.trim().length > 0);
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ };
+
+ return (
+ <>
+
+
+
+
-
);
diff --git a/src/lib/hooks/useFetch.jsx b/src/lib/hooks/useFetch.jsx
new file mode 100644
index 000000000..e1a1a4939
--- /dev/null
+++ b/src/lib/hooks/useFetch.jsx
@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+
+function useFetch(apiCall, requestParams, initialValue) {
+ const [data, setData] = useState(initialValue);
+ //prevent object's reference
+ const paramsString = JSON.stringify(requestParams);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const parsedParams = JSON.parse(paramsString);
+ const result = await apiCall(parsedParams);
+ setData(result);
+ } catch (error) {
+ console.error("데이터 패칭 실패:", error);
+ }
+ };
+
+ fetchData();
+ }, [apiCall, paramsString]);
+
+ return { data };
+}
+
+export default useFetch;
diff --git a/src/lib/utils/countPageItems.jsx b/src/lib/utils/countPageItems.jsx
new file mode 100644
index 000000000..497502cf8
--- /dev/null
+++ b/src/lib/utils/countPageItems.jsx
@@ -0,0 +1,12 @@
+// count items according to pageSize
+const countPageItems = (mobile, tablet, pc) => {
+ if (window.innerWidth < 768) {
+ return mobile;
+ } else if (window.innerWidth < 1200) {
+ return tablet;
+ } else {
+ return pc;
+ }
+};
+
+export default countPageItems;
diff --git a/src/lib/utils/countTime.jsx b/src/lib/utils/countTime.jsx
new file mode 100644
index 000000000..064e0c755
--- /dev/null
+++ b/src/lib/utils/countTime.jsx
@@ -0,0 +1,14 @@
+export function countTime(params) {
+ const now = new Date();
+ const createdAt = new Date(params.createdAt);
+ const diff = (now - createdAt) / 60000;
+
+ if (diff < 60) {
+ return `${Math.floor(diff)}분 전`;
+ } else if (diff < 1440) {
+ // 1440분 = 24시간
+ return `${Math.floor(diff / 60)}시간 전`;
+ } else {
+ return `${Math.floor(diff / 1440)}일 전`;
+ }
+}
diff --git a/src/pages/AddItem.css b/src/pages/AddItem.css
index dc2c4f696..46224229d 100644
--- a/src/pages/AddItem.css
+++ b/src/pages/AddItem.css
@@ -140,3 +140,30 @@
width: 22px;
height: 24px;
}
+/* mobile */
+@media (max-width: 768px) {
+ /* Additem page */
+ div.upload-container,
+ img.img-preview {
+ max-width: 168px;
+ max-height: 168px;
+ }
+
+ div.upload-content {
+ height: 168px;
+ }
+}
+
+/* tablet */
+@media (min-width: 769px) and (max-width: 1199px) {
+ /* AddItem page */
+ div.upload-container,
+ img.img-preview {
+ max-width: 162px;
+ max-height: 162px;
+ }
+
+ div.upload-content {
+ height: 162px;
+ }
+}
diff --git a/src/pages/AddItem.jsx b/src/pages/AddItem.jsx
index 449020ef7..e66c4ee49 100644
--- a/src/pages/AddItem.jsx
+++ b/src/pages/AddItem.jsx
@@ -1,7 +1,8 @@
import React, { useState, useEffect } from "react";
import "./AddItem.css";
-import ItemImageUpload from "../components/AddItem/ItemImageUpload";
-import ItemDetails from "../components/AddItem/ItemDetails";
+import AddItemImage from "../components/AddItem/AddItemImage";
+import AddItemDetails from "../components/AddItem/AddItemDetails";
+import AddItemTags from "../components/AddItem/AddItemTags";
function AddItem() {
const [uploadedImage, setUploadedImage] = useState(null);
@@ -17,21 +18,6 @@ function AddItem() {
setUploadedImage(file);
};
- const handleDetailsChange = (e) => {
- const { name, value } = e.target;
- setItemDetails((prevDetails) => ({
- ...prevDetails,
- [name]: value,
- }));
- };
-
- const handleTagsChange = (newTags) => {
- setItemDetails((prevDetails) => ({
- ...prevDetails,
- itemTags: newTags,
- }));
- };
-
const handleSubmit = (e) => {
e.preventDefault();
console.log("제출된 상품 정보:", itemDetails);
@@ -54,15 +40,9 @@ function AddItem() {
>
등록
-
+ 
+
+
-
diff --git a/src/components/items/ItemInfo/InquiryComments.jsx b/src/components/items/ItemInfo/InquiryComments.jsx
new file mode 100644
index 000000000..aed526131
--- /dev/null
+++ b/src/components/items/ItemInfo/InquiryComments.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { getProductComments } from "../../../core/api";
+import { INITIAL_COMMENTS } from "../../../constants";
+import useFetch from "../../../lib/hooks/useFetch";
+import { countTime } from "../../../lib/utils/countTime";
+
+function InquiryComments({ productId, limit }) {
+ const { data: commentsData } = useFetch(
+ getProductComments,
+ { productId, limit },
+ { list: [INITIAL_COMMENTS] }
+ );
+ const navigate = useNavigate();
+
+ const comments = commentsData.list;
+
+ return (
+ {item.name}
+handleItemClick(item.id)} + > + {item.name} +
{item.price}원
-
+
{item.favoriteCount}
-
+ {comments.map((comment) => (
+
-
+
{comment.content}
+++ ++ + {comment.writer.nickname} + +
{countTime(comment)}
+
+ ))}
+
-
-
-
-
-
-
-
-
- );
-}
-
-export default PageNavBar;
diff --git a/src/components/items/Pagination.jsx b/src/components/items/Pagination.jsx
new file mode 100644
index 000000000..a881b1e26
--- /dev/null
+++ b/src/components/items/Pagination.jsx
@@ -0,0 +1,51 @@
+import React from "react";
+
+function Pagination({ currentPage, onPageChange, totalPages }) {
+ const handlePageChange = (page) => {
+ if (page >= 1 && page <= totalPages) {
+ onPageChange(page);
+ }
+ };
+
+ //reflect totalPage, make pageButtons
+ const renderPageButtons = (e) => {
+ const buttons = [];
+ for (let i = 0; i < totalPages; i++) {
+ const pageNumber = i + 1;
+ buttons.push(
+
+ );
+ }
+ return buttons;
+ };
+
+ return (
+
+
+ {renderPageButtons()}
+
+
+ );
+}
+
+export default Pagination;
diff --git a/src/constants.jsx b/src/constants.jsx
new file mode 100644
index 000000000..d1e329956
--- /dev/null
+++ b/src/constants.jsx
@@ -0,0 +1,22 @@
+export const INITIAL_PRODUCTID = {
+ createdAt: "",
+ favoriteCount: 0,
+ ownerId: 0,
+ images: [],
+ tags: [],
+ price: 0,
+ description: "",
+ name: "",
+ id: 0,
+ isFavorite: false,
+};
+
+export const INITIAL_COMMENTS = {
+ id: 0,
+ content: "",
+ createdAt: "",
+ updatedAt: "",
+ writer: { id: 0, image: "", nickname: "" },
+};
+
+export const defaultImageUrl = "https://example.com/...";
diff --git a/src/core/api.jsx b/src/core/api.jsx
index be1974cf3..b79473a0c 100644
--- a/src/core/api.jsx
+++ b/src/core/api.jsx
@@ -1,13 +1,40 @@
-export async function getItems({ page, pageSize, orderBy }) {
+const BASE_URL = "https://panda-market-api.vercel.app";
+
+export async function getProducts({ page, pageSize, orderBy }) {
const query = new URLSearchParams({ page, pageSize, orderBy }).toString();
- const BASE_URL = "https://panda-market-api.vercel.app";
try {
const response = await fetch(`${BASE_URL}/products?${query}`);
const itemData = await response.json();
return itemData;
} catch (error) {
- console.error("리퀘스트 실패:", error);
+ console.error("getProducts 리퀘스트 실패:", error);
+ throw error;
+ }
+}
+
+export async function getProductId({ productId }) {
+ try {
+ const response = await fetch(`${BASE_URL}/products/${productId}`);
+ const itemData = await response.json();
+ return itemData;
+ } catch (error) {
+ console.error("getProductId 리퀘스트 실패:", error);
+ throw error;
+ }
+}
+
+export async function getProductComments({ productId, limit = 3 }) {
+ const query = new URLSearchParams({ limit }).toString();
+
+ try {
+ const response = await fetch(
+ `${BASE_URL}/products/${productId}/comments?${query}`
+ );
+ const itemData = await response.json();
+ return itemData;
+ } catch (error) {
+ console.error("getProductComments 리퀘스트 실패:", error);
throw error;
}
}
diff --git a/src/index.jsx b/src/index.jsx
index 3a300dd1b..dd78cb95a 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,12 +1,11 @@
import React from "react";
import ReactDOM from "react-dom/client";
-import App from "./App";
+import Router from "./Router";
import "./assets/styles/global.css";
-import "./assets/styles/mediaquery.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
+
+
+
+
+ {productData.name}
+{productData.price}원
+
+
+ 상품 소개
+{productData.description}
+
+
+ 상품 태그
+-
+ {productData.tags.map((tag, index) => (
+
- + #{tag} + + ))} +
+
+
+ {productData.favoriteCount}
+
+
+