@@ -13,7 +16,23 @@ function BestProductListItem({ item }) {
}
-function BestProductList({ items }) {
+function BestProductList() {
+
+
+ const [items, setItems] = useState([]);
+
+
+
+
+ const handleLoad = async () => {
+ const { list } = await getProducts({ order: 'favorite', page: 1, pageSize: 10 });
+ setItems(list);
+ }
+
+
+ useEffect(() => {
+ handleLoad();
+ }, []);
const displayedItems = items.slice(0, 4);
return (
diff --git a/src/pages/Items.js b/src/pages/Items.js
index 1ad46922a..7a6c23127 100644
--- a/src/pages/Items.js
+++ b/src/pages/Items.js
@@ -7,28 +7,43 @@ import './Items.css';
import { Link, useNavigate } from 'react-router-dom';
function Items() {
+ const navigate = useNavigate();
const [order, setOrder] = useState('recent');
const [item, setItem] = useState([]);
+ const [totalPages, setTotalPages] = useState(1);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [pageSize, setPageSize] = useState(2);
- const SortedItems = item.sort((a, b) => b[order] - a[order]);
+ useEffect(() => {
+ handleLoadMore({ order, page: currentPage, pageSize });
+ }, [order])
+
+ useEffect(() => {
+
+ setTotalPages(Math.ceil(item.length / pageSize));
+ //Math.ceil(전체 컨텐츠 개수 / 한 페이지에 보여주고자 하는 컨텐츠의 개수)
+ console.log(totalPages);
+
+ }, [item])
- const bestItems = item.sort((a, b) => b['favorite'] - a['favorite']);
+
+
+ const SortedItems = item.sort((a, b) => b[order] - a[order]);
const handleFavorite = () => setOrder('favorite');
const handleRecent = () => setOrder('recent');
- const navigate = useNavigate();
-
const handleLoad = async (orderQuery) => {
const { list } = await getProducts(orderQuery);
setItem(list);
+
}
- useEffect(() => {
- handleLoad(order);
- }, [order])
+ const handleLoadMore = async () => {
+ await handleLoad({ order, page: currentPage, pageSize });
+ }
const handleAddItemClick = () => {
navigate('/additem');
@@ -37,7 +52,7 @@ function Items() {
return (
베스트 상품
-
+
판매 중인 상품
@@ -53,7 +68,18 @@ function Items() {
-
+
+
+ {Array.from({ length: totalPages }, (_, i) => (
+
+ ))}
+
+
)
From 218b102972668cbaa2b9648089e4a8cc3ecde7e0 Mon Sep 17 00:00:00 2001
From: Injaeeee <97098671+Injaeeee@users.noreply.github.com>
Date: Fri, 5 Jul 2024 19:05:06 +0900
Subject: [PATCH 11/12] =?UTF-8?q?=EB=8C=93=EA=B8=80=20api=20=EB=B0=9B?=
=?UTF-8?q?=EC=95=84=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Main.js | 7 +-
src/api.js | 17 ++-
src/components/App.js | 2 +-
.../{ => BestProductList}/BestProductList.css | 2 +
.../{ => BestProductList}/BestProductList.js | 17 +--
src/components/{ => Button}/Button.css | 10 ++
src/components/{ => Button}/Button.js | 4 +-
src/components/CommentList/CommentList.css | 43 ++++++
src/components/CommentList/CommentList.js | 57 ++++++++
src/components/{ => FileInput}/FileInput.css | 0
src/components/{ => FileInput}/FileInput.js | 0
.../{ => ProductList}/ProductList.css | 2 +
.../{ => ProductList}/ProductList.js | 14 +-
src/components/{ => Topbar}/Topbar.css | 0
src/components/{ => Topbar}/Topbar.js | 4 +-
src/components/pageNation/PageNation.css | 12 ++
src/components/pageNation/PageNation.js | 22 ++++
src/img/Img_inquiry_empty.png | Bin 0 -> 6785 bytes
src/img/ic_back.png | Bin 0 -> 338 bytes
src/img/ic_heart.png | Bin 0 -> 867 bytes
src/pages/AddItem.js | 2 +-
src/pages/Items.css | 6 +
src/pages/Items.js | 51 +++----
src/pages/Products.css | 124 ++++++++++++++++++
src/pages/Products.js | 74 +++++++++++
25 files changed, 419 insertions(+), 51 deletions(-)
rename src/components/{ => BestProductList}/BestProductList.css (88%)
rename src/components/{ => BestProductList}/BestProductList.js (72%)
rename src/components/{ => Button}/Button.css (76%)
rename src/components/{ => Button}/Button.js (57%)
create mode 100644 src/components/CommentList/CommentList.css
create mode 100644 src/components/CommentList/CommentList.js
rename src/components/{ => FileInput}/FileInput.css (100%)
rename src/components/{ => FileInput}/FileInput.js (100%)
rename src/components/{ => ProductList}/ProductList.css (91%)
rename src/components/{ => ProductList}/ProductList.js (64%)
rename src/components/{ => Topbar}/Topbar.css (100%)
rename src/components/{ => Topbar}/Topbar.js (86%)
create mode 100644 src/components/pageNation/PageNation.css
create mode 100644 src/components/pageNation/PageNation.js
create mode 100644 src/img/Img_inquiry_empty.png
create mode 100644 src/img/ic_back.png
create mode 100644 src/img/ic_heart.png
create mode 100644 src/pages/Products.css
create mode 100644 src/pages/Products.js
diff --git a/src/Main.js b/src/Main.js
index f0f815d2e..93cad085c 100644
--- a/src/Main.js
+++ b/src/Main.js
@@ -3,6 +3,7 @@ import App from "./components/App";
import Items from './pages/Items';
import AddItems from './pages/AddItem';
import NotFound from './pages/NotFound';
+import Products from './pages/Products';
function Main() {
@@ -11,8 +12,12 @@ function Main() {
} >
- }>
+
+ }>
+ }>
+
}>
+
}>
diff --git a/src/api.js b/src/api.js
index 2b49877ee..f5fa63ef9 100644
--- a/src/api.js
+++ b/src/api.js
@@ -6,11 +6,23 @@ export async function getProducts({ order = 'recent', page = 1, pageSize }) {
const response = await fetch(`${BASE_URL}/products?${query}&page=${page}&pageSize=${pageSize}`);
const body = await response.json();
return body;
+}
+export async function getProduct(productSlug) {
+ const response = await fetch(`${BASE_URL}/products/${productSlug}`);
+ const body = await response.json();
+ return body;
}
-export async function createProducts(formData) {
+export async function getComment(productSlug) {
+ const response = await fetch(`${BASE_URL}/products/${productSlug}/comments?limit=10`)
+ const body = await response.json();
+ return body;
+
+}
+
+export async function createProducts(formData) {
const response = await fetch(`${BASE_URL}/products?`,
{
@@ -21,5 +33,4 @@ export async function createProducts(formData) {
const body = await response.json();
return body;
-}
-
+}
\ No newline at end of file
diff --git a/src/components/App.js b/src/components/App.js
index 9036050e7..119747d51 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,5 +1,5 @@
-import Topbar from './Topbar';
+import Topbar from './Topbar/Topbar'
import './App.css';
import { Outlet } from 'react-router-dom';
diff --git a/src/components/BestProductList.css b/src/components/BestProductList/BestProductList.css
similarity index 88%
rename from src/components/BestProductList.css
rename to src/components/BestProductList/BestProductList.css
index 6a7768ac8..ed71340ac 100644
--- a/src/components/BestProductList.css
+++ b/src/components/BestProductList/BestProductList.css
@@ -15,6 +15,8 @@
display: flex;
flex-direction: column;
padding: 24px 0;
+ border: 0;
+ background-color: transparent;
}
.BestProductListItem p,
diff --git a/src/components/BestProductList.js b/src/components/BestProductList/BestProductList.js
similarity index 72%
rename from src/components/BestProductList.js
rename to src/components/BestProductList/BestProductList.js
index 56382fd2c..2c642174b 100644
--- a/src/components/BestProductList.js
+++ b/src/components/BestProductList/BestProductList.js
@@ -1,17 +1,21 @@
import { useEffect, useState } from 'react';
-import { getProducts } from '../api';
+import { getProducts } from '../../api';
+import { Link, useNavigate } from 'react-router-dom';
import './BestProductList.css';
function BestProductListItem({ item }) {
-
+ const navigate = useNavigate();
+ const handleAddItemClick = () => {
+ navigate(`/items/${item.id}`);
+ }
return (
-
+
+
);
}
@@ -21,9 +25,6 @@ function BestProductList() {
const [items, setItems] = useState([]);
-
-
-
const handleLoad = async () => {
const { list } = await getProducts({ order: 'favorite', page: 1, pageSize: 10 });
setItems(list);
diff --git a/src/components/Button.css b/src/components/Button/Button.css
similarity index 76%
rename from src/components/Button.css
rename to src/components/Button/Button.css
index 795ab07ea..9bf3517a7 100644
--- a/src/components/Button.css
+++ b/src/components/Button/Button.css
@@ -22,3 +22,13 @@
font-size: 18px;
font-weight: 700;
}
+
+.disable {
+ background-color: #9ca3af;
+ color: #ffffff;
+}
+
+.inquiry {
+ width: 74px;
+ align-self: flex-end;
+}
diff --git a/src/components/Button.js b/src/components/Button/Button.js
similarity index 57%
rename from src/components/Button.js
rename to src/components/Button/Button.js
index f30d36f5e..b47740fe0 100644
--- a/src/components/Button.js
+++ b/src/components/Button/Button.js
@@ -3,8 +3,8 @@ import './Button.css';
-function Button({ children, onClick, select = '' }) {
- const classNames = `Button ${select}`;
+function Button({ children, onClick, select = '', width = '' }) {
+ const classNames = `Button ${select} ${width}`;
return (
);
}
function ProductList({ items }) {
+
return (
diff --git a/src/components/Topbar.css b/src/components/Topbar/Topbar.css
similarity index 100%
rename from src/components/Topbar.css
rename to src/components/Topbar/Topbar.css
diff --git a/src/components/Topbar.js b/src/components/Topbar/Topbar.js
similarity index 86%
rename from src/components/Topbar.js
rename to src/components/Topbar/Topbar.js
index c66e1da04..c6bdeca5d 100644
--- a/src/components/Topbar.js
+++ b/src/components/Topbar/Topbar.js
@@ -1,6 +1,6 @@
-import pandaLogo from '../img/logo.png';
+import pandaLogo from '../../img/logo.png';
import './Topbar.css';
-import Button from './Button'
+import Button from '../Button/Button';
import { Link } from 'react-router-dom';
function Topbar() {
diff --git a/src/components/pageNation/PageNation.css b/src/components/pageNation/PageNation.css
new file mode 100644
index 000000000..524ec334b
--- /dev/null
+++ b/src/components/pageNation/PageNation.css
@@ -0,0 +1,12 @@
+.pageButton {
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ background-color: #ffffff;
+ border: #e5e7eb 1px solid;
+}
+
+.active {
+ background-color: #3692ff;
+ color: #ffffff;
+}
diff --git a/src/components/pageNation/PageNation.js b/src/components/pageNation/PageNation.js
new file mode 100644
index 000000000..63555e2ff
--- /dev/null
+++ b/src/components/pageNation/PageNation.js
@@ -0,0 +1,22 @@
+import './PageNation.css';
+
+function PageNation({ totalPages, currentPage, handlePageChange }) {
+
+ return (
+
+
+ {Array.from({ length: totalPages }, (_, i) => (
+
+ ))}
+
+
+ )
+}
+
+export default PageNation;
\ No newline at end of file
diff --git a/src/img/Img_inquiry_empty.png b/src/img/Img_inquiry_empty.png
new file mode 100644
index 0000000000000000000000000000000000000000..20f0821bbf96505c51821b33d6b211a59e82f486
GIT binary patch
literal 6785
zcmb_>Wm6jr(=}e)ouEaEyR;P7P+WpriWDsrcY+jm0$f-q?pjEJ2B(xz+}$k{cWHTg
z|AzOS*|TSMXLe>k?1!Cm;&ipui16w0(a_L{fa=Qn|M=(sfQ$1l*O}B8{v$jObyF`i
zGy;nM0Ua$jpY~r9-Ai9h5v_g
T
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
literal 0
HcmV?d00001
diff --git a/src/img/ic_heart.png b/src/img/ic_heart.png
new file mode 100644
index 0000000000000000000000000000000000000000..587b90cd9484d9d524ffedc1f35165b2fbf1d7df
GIT binary patch
literal 867
zcmV-p1DyPcP)uyf^J?|Cq#TARiN_VxC6_uY
z4pmH3*pRwfa|Op09lTV@3D-6I
zc7i%ENCox?VkaHi86_P_fLDDlHS-tj3+5s8I%iHHWB>5M;Y9HMOmv
zgW8e0418tt%7AM7i1KC@yKIJmEHbpP;LGkwAlMLTdxVTXf5_@VCgrsJ|64hsZS0%}0<9&eA8{
z;Wo^WQ4{M&Y6k?)S&5$1O03b0;63m0dBH13bBhYjh`kSl4-v6agOvMl4kX24;}LGW!m_0-Ll$obNC2`uAeY`4&oIAe-~#TOQ26;%eaMB
zyKuO-nKtNK%ZhB*d@+ID1%^-Y6za$7{X_mAB%n#Ot?zvNN|2xlB#`O6RUEJ@9D0T0
z{9+p4f@T0GRuW0cdmFy61lKptbkzCOxiT|>fJDM8trRCGj&M6vW;2)U%me~t3(Cap
tCa3?P%vP}Ss4`n9IODnGXo)2rfxnYrOeo66z3Bh|002ovPDHLkV1mS~l5hY3
literal 0
HcmV?d00001
diff --git a/src/pages/AddItem.js b/src/pages/AddItem.js
index 8f18c5c3a..3e47a81a0 100644
--- a/src/pages/AddItem.js
+++ b/src/pages/AddItem.js
@@ -1,6 +1,6 @@
import './Additem.css';
import { useEffect, useState } from "react";
-import FileInput from "../components/FileInput";
+import FileInput from '../components/FileInput/FileInput';
function AddItem() {
diff --git a/src/pages/Items.css b/src/pages/Items.css
index 506124967..40561b91b 100644
--- a/src/pages/Items.css
+++ b/src/pages/Items.css
@@ -23,3 +23,9 @@
padding: 9px 20px 9px 16px;
outline: none;
}
+
+.pagination {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+}
diff --git a/src/pages/Items.js b/src/pages/Items.js
index 7a6c23127..2e79b458f 100644
--- a/src/pages/Items.js
+++ b/src/pages/Items.js
@@ -1,54 +1,55 @@
-import ProductList from '../components/ProductList';
-import BestProductList from '../components/BestProductList';
-import Button from '../components/Button';
+import ProductList from '../components/ProductList/ProductList';
+import BestProductList from '../components/BestProductList/BestProductList';
+import Button from '../components/Button/Button';
import { useEffect, useState } from 'react';
import { getProducts } from '../api';
import './Items.css';
import { Link, useNavigate } from 'react-router-dom';
+import PageNation from '../components/pageNation/PageNation';
function Items() {
const navigate = useNavigate();
const [order, setOrder] = useState('recent');
const [item, setItem] = useState([]);
- const [totalPages, setTotalPages] = useState(1);
+ const [totalCount, setTotalCount] = useState(1);
const [currentPage, setCurrentPage] = useState(1);
- const [pageSize, setPageSize] = useState(2);
+ const [pageSize, setPageSize] = useState(10);
+ const [totalPages, setTotalPages] = useState(0);
useEffect(() => {
handleLoadMore({ order, page: currentPage, pageSize });
- }, [order])
+ }, [order, currentPage])
useEffect(() => {
-
- setTotalPages(Math.ceil(item.length / pageSize));
+ setTotalPages(Math.ceil(totalCount / pageSize));
//Math.ceil(전체 컨텐츠 개수 / 한 페이지에 보여주고자 하는 컨텐츠의 개수)
- console.log(totalPages);
-
}, [item])
-
-
const SortedItems = item.sort((a, b) => b[order] - a[order]);
const handleFavorite = () => setOrder('favorite');
-
const handleRecent = () => setOrder('recent');
+ const handleLoadMore = async () => {
+ await handleLoad({ order, page: currentPage, pageSize });
+ }
+
const handleLoad = async (orderQuery) => {
- const { list } = await getProducts(orderQuery);
+ const { list, totalCount } = await getProducts(orderQuery);
setItem(list);
-
+ setTotalCount(totalCount);
}
- const handleLoadMore = async () => {
- await handleLoad({ order, page: currentPage, pageSize });
- }
const handleAddItemClick = () => {
navigate('/additem');
}
+ const handlePageChange = (page) => {
+ setCurrentPage(page);
+ }
+
return (
베스트 상품
@@ -68,18 +69,8 @@ function Items() {
-
-
- {Array.from({ length: totalPages }, (_, i) => (
-
- ))}
-
-
+
+
)
diff --git a/src/pages/Products.css b/src/pages/Products.css
new file mode 100644
index 000000000..9851bf4e0
--- /dev/null
+++ b/src/pages/Products.css
@@ -0,0 +1,124 @@
+.itemWrapper {
+ display: flex;
+ gap: 24px;
+ padding-bottom: 30px;
+ border-bottom: 1px solid #e5e7eb;
+}
+
+.itemImg {
+ width: 486px;
+ height: 486px;
+ border-radius: 16px;
+}
+
+.itemLetter {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ width: 100%;
+}
+
+.itemLetterTop {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #e5e7eb;
+}
+
+.itemLetterBottom {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+.itemName {
+ font-size: 24px;
+ font-weight: 600;
+ line-height: 28.64px;
+}
+
+.itemTitle {
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 16.71px;
+ color: #4b5563;
+}
+
+.itemPrice {
+ font-size: 40px;
+ font-weight: 600;
+ line-height: 47.73px;
+}
+
+.itemitemDescription {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 16.71px;
+ color: #1f2937;
+}
+
+.itemTags {
+ display: flex;
+ gap: 10px;
+ padding: 10px 0;
+}
+
+.itemTag {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 6px 16px;
+ height: 36px;
+ border-radius: 26px;
+ background-color: #f3f4f6;
+}
+
+.itemFavorite {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ padding: 6px 16px;
+ height: 36px;
+ width: 87px;
+ border-radius: 26px;
+ border: 1px solid #e5e7eb;
+ margin: auto 0 0;
+}
+
+.inquiryWrapper {
+ display: flex;
+ width: auto;
+ flex-direction: column;
+ gap: 16px;
+ margin: 24px 0;
+}
+
+.inquiryInput {
+ width: 100%;
+ height: 104px;
+ border-radius: 12px;
+ background-color: #f3f4f6;
+ border: none;
+ color: #9ca3af;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 24px;
+ padding: 0 16px;
+ outline: none;
+}
+
+.backButton {
+ display: flex;
+ margin: 40px auto;
+ gap: 10px;
+ background-color: #3692ff;
+ color: #ffffff;
+ border-radius: 40px;
+ padding: 12px 71px;
+ font-size: 18px;
+ font-weight: 600;
+ text-decoration: none;
+ border: none;
+}
diff --git a/src/pages/Products.js b/src/pages/Products.js
new file mode 100644
index 000000000..83365032f
--- /dev/null
+++ b/src/pages/Products.js
@@ -0,0 +1,74 @@
+import { useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { getProduct } from '../api';
+import './Products.css';
+import Button from "../components/Button/Button";
+import { useNavigate } from 'react-router-dom';
+import favoriteImg from '../img/ic_heart.png'
+import backImg from '../img/ic_back.png'
+import CommentList from "../components/CommentList/CommentList";
+
+
+function Products() {
+ const navigate = useNavigate();
+ const { productSlug } = useParams();
+ const [item, setItem] = useState([]);
+
+ useEffect(() => {
+ handleLoad(productSlug);
+ }, [productSlug]);
+
+ const handleLoad = async (productSlug) => {
+ const list = await getProduct(productSlug);
+ setItem(list);
+
+ }
+
+ const handleBackClick = () => {
+ navigate('/items');
+ }
+
+ return (
+
+
+
+
+
+ {item.name}
+ {item.price}원
+
+
+
상품소개
+
{item.description}
+
+
상품태그
+
+ {item.tags && item.tags.map((tag, index) => (
+
#{tag}
+ ))}
+
+
+
+
{item.favoriteCount}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
)
+}
+
+export default Products;
\ No newline at end of file
From b5695c330deeedd6950bac371b0394d7d055d9ae Mon Sep 17 00:00:00 2001
From: Injaeeee <97098671+Injaeeee@users.noreply.github.com>
Date: Fri, 5 Jul 2024 20:36:10 +0900
Subject: [PATCH 12/12] =?UTF-8?q?=EB=93=B1=EB=A1=9D=EB=B2=84=ED=8A=BC=20?=
=?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/AddItem.js | 2 --
src/pages/Products.js | 13 ++++++++-----
2 files changed, 8 insertions(+), 7 deletions(-)
diff --git a/src/pages/AddItem.js b/src/pages/AddItem.js
index 3e47a81a0..2b28708ed 100644
--- a/src/pages/AddItem.js
+++ b/src/pages/AddItem.js
@@ -30,7 +30,6 @@ function AddItem() {
...prevValues,
[name]: value,
}));
- console.log(name, value);
}
const handleInputChange = (e) => {
@@ -40,7 +39,6 @@ function AddItem() {
const handleSubmit = (e) => {
e.preventDefault();
- console.log(values);
}
diff --git a/src/pages/Products.js b/src/pages/Products.js
index 83365032f..f906ef42f 100644
--- a/src/pages/Products.js
+++ b/src/pages/Products.js
@@ -13,23 +13,27 @@ function Products() {
const navigate = useNavigate();
const { productSlug } = useParams();
const [item, setItem] = useState([]);
+ const [inquiry, setInquiry] = useState('');
useEffect(() => {
handleLoad(productSlug);
}, [productSlug]);
+
const handleLoad = async (productSlug) => {
const list = await getProduct(productSlug);
setItem(list);
-
}
const handleBackClick = () => {
navigate('/items');
}
- return (
+ const handleInquriyChange = (e) => {
+ setInquiry(e.target.value);
+ }
+ return (
-
-
-