-
-
+ <>
+
+
+
+
판다마켓
+
+
+ {isLoggedIn ? (
+
+
+
+ ) : (
+
로그인
+ )}
-
-
로그인
-
+
+
{/* nav 뒤 채우기 */}
+
);
}
diff --git a/src/components/Nav/Nav.module.css b/src/components/Nav/Nav.module.css
index b2c8b06e..98f712e6 100644
--- a/src/components/Nav/Nav.module.css
+++ b/src/components/Nav/Nav.module.css
@@ -1,11 +1,43 @@
+/* PC 스타일: 1200px 이상 */
+@media (min-width: 1200px) {
+}
+
+/* Tablet 스타일: 744px 이상 ~ 1199px 이하 */
+@media (min-width: 744px) and (max-width: 1199.98px) {
+}
+
+/* Mobile 스타일: 375px 이상 ~ 743px 이하 */
+@media (min-width: 375px) and (max-width: 743.98px) {
+}
+
.nav {
- height: 70px;
background: #fff;
+ width: 100%;
+ position: fixed;
+ z-index: 1;
+}
+
+.gnb {
+ height: 70px;
padding: 0 200px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #dfdfdf;
+ /* Tablet 스타일: 744px 이상 ~ 1199px 이하 */
+ @media (min-width: 744px) and (max-width: 1199.98px) {
+ margin: 0 auto;
+ /* max-width: 696px; */
+ width: 100%;
+ padding: 0 15px;
+ }
+ /* Mobile 스타일: 375px 이상 ~ 743px 이하 */
+ @media (min-width: 375px) and (max-width: 743.98px) {
+ margin: 0 auto;
+ /* max-width: 344px; */
+ width: 100%;
+ padding: 0 15px;
+ }
}
.logo {
@@ -19,6 +51,10 @@
width: 40px;
position: relative;
margin-right: 8px;
+ /* Mobile 스타일: 375px 이상 ~ 743px 이하 */
+ @media (min-width: 375px) and (max-width: 743.98px) {
+ display: none;
+ }
}
.logoTitle {
@@ -28,6 +64,10 @@
font-size: 2.56rem;
color: #3692ff;
display: inline-block;
+ /* Mobile 스타일: 375px 이상 ~ 743px 이하 */
+ @media (min-width: 375px) and (max-width: 743.98px) {
+ font-size: 2rem;
+ }
}
.ul {
@@ -48,6 +88,16 @@
color: #4b5563;
padding: 0 15px;
cursor: pointer;
+ /* Mobile 스타일: 375px 이상 ~ 743px 이하 */
+ @media (min-width: 375px) and (max-width: 743.98px) {
+ padding: 0;
+ width: 74px;
+ font-size: 1.6rem;
+ }
+}
+
+.active {
+ color: #3692ff;
}
.li:hover {
@@ -66,4 +116,18 @@
border-radius: 8px;
font-size: 1.6rem;
cursor: pointer;
+ /* Mobile 스타일: 375px 이상 ~ 743px 이하 */
+ @media (min-width: 375px) and (max-width: 743.98px) {
+ width: 88px;
+ }
+}
+
+.avatar {
+ width: 40px;
+ height: 40px;
+}
+
+.avatar img {
+ width: 40px;
+ object-fit: cover;
}
diff --git a/src/components/Pagination/Pagination_copy.js b/src/components/Pagination/Pagination(page-based).js
similarity index 83%
rename from src/components/Pagination/Pagination_copy.js
rename to src/components/Pagination/Pagination(page-based).js
index 9fdda26c..5e5b8c8a 100644
--- a/src/components/Pagination/Pagination_copy.js
+++ b/src/components/Pagination/Pagination(page-based).js
@@ -8,13 +8,17 @@ const Pagination = ({ currentPage, totalPages, onPageChange }) => {
const handlePreviousGroup = () => {
if (currentGroup > 0) {
+ const newGroup = currentGroup - 1;
setCurrentGroup(currentGroup - 1);
+ onPageChange((newGroup + 1) * pagesPerGroup); // 이전 그룹의 마지막 페이지로 이동
}
};
const handleNextGroup = () => {
if ((currentGroup + 1) * pagesPerGroup < totalPages) {
- setCurrentGroup(currentGroup + 1);
+ const newGroup = currentGroup + 1;
+ setCurrentGroup(newGroup);
+ onPageChange(newGroup * pagesPerGroup + 1); // 다음 그룹의 첫 번째 페이지로 이동
}
};
diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js
index 5e5b8c8a..cf05930a 100644
--- a/src/components/Pagination/Pagination.js
+++ b/src/components/Pagination/Pagination.js
@@ -1,16 +1,16 @@
import React, { useState } from 'react';
import styles from './Pagination.module.css';
-const Pagination = ({ currentPage, totalPages, onPageChange }) => {
+const Pagination = ({ currentPage, totalPages, onPageChange, itemsPerPage }) => {
const [currentGroup, setCurrentGroup] = useState(0); // 현재 페이지 그룹
-
const pagesPerGroup = 5; // 한 그룹당 표시할 페이지 수
const handlePreviousGroup = () => {
if (currentGroup > 0) {
const newGroup = currentGroup - 1;
- setCurrentGroup(currentGroup - 1);
- onPageChange((newGroup + 1) * pagesPerGroup); // 이전 그룹의 마지막 페이지로 이동
+ setCurrentGroup(newGroup);
+ const newOffset = (newGroup * pagesPerGroup + pagesPerGroup - 1) * itemsPerPage;
+ onPageChange(newOffset); // 이전 그룹의 마지막 페이지의 offset으로 이동
}
};
@@ -18,17 +18,24 @@ const Pagination = ({ currentPage, totalPages, onPageChange }) => {
if ((currentGroup + 1) * pagesPerGroup < totalPages) {
const newGroup = currentGroup + 1;
setCurrentGroup(newGroup);
- onPageChange(newGroup * pagesPerGroup + 1); // 다음 그룹의 첫 번째 페이지로 이동
+ const newOffset = newGroup * pagesPerGroup * itemsPerPage;
+ onPageChange(newOffset); // 다음 그룹의 첫 번째 페이지의 offset으로 이동
}
};
const handlePageClick = (pageNumber) => {
- onPageChange(pageNumber);
+ console.log(`Current Page: ${currentPage}, Clicked Page: ${pageNumber}, itemsPerPage: ${itemsPerPage}`);
+ if (pageNumber !== currentPage) { // 현재 페이지와 다른 경우에만 실행
+ const newOffset = (pageNumber - 1) * itemsPerPage;
+ console.log(`Page clicked: ${pageNumber}, New offset: ${newOffset}`);
+ onPageChange(newOffset);
+ }
};
+
const renderPageNumbers = () => {
const startPage = currentGroup * pagesPerGroup + 1;
- const endPage = Math.min(startPage + pagesPerGroup - 1, totalPages); // 총 페이지 수에 맞게 마지막 페이지 설정
+ const endPage = Math.min(startPage + pagesPerGroup - 1, totalPages);
const pages = [];
for (let i = startPage; i <= endPage; i++) {
@@ -49,9 +56,13 @@ const Pagination = ({ currentPage, totalPages, onPageChange }) => {
{renderPageNumbers()}
-
+
);
};
-export default Pagination;
\ No newline at end of file
+export default Pagination;
diff --git a/src/components/Pagination/Pagination.module.css b/src/components/Pagination/Pagination.module.css
index a7e505d5..7c32f88d 100644
--- a/src/components/Pagination/Pagination.module.css
+++ b/src/components/Pagination/Pagination.module.css
@@ -1,5 +1,5 @@
.pagination {
- margin-top: ;
+ margin-top: 0;
display: flex;
justify-content: center;
align-items: center;
@@ -18,12 +18,12 @@
color: #6b7280;
background-color: #fff;
cursor: pointer;
- background: url("../../assets/images/page_left_arrow.png") no-repeat center /
+ background: url("/public/static/images/page_left_arrow.png") no-repeat center /
7px 10px;
}
.arrowButton.right {
- background: url("../../assets/images/page_right_arrow.png") no-repeat center /
+ background: url("/public/static/images/page_right_arrow.png") no-repeat center /
7px 10px;
}
diff --git a/src/components/ProductCard/ProductCard.js b/src/components/ProductCard/ProductCard.js
index 8502208f..e5785638 100644
--- a/src/components/ProductCard/ProductCard.js
+++ b/src/components/ProductCard/ProductCard.js
@@ -1,11 +1,17 @@
import React from 'react';
import styles from './ProductCard.module.css';
-import likeIcon from '../../assets/images/like-icon.png';
-import placeholderImage from '../../assets/images/placeholder.png';
+// import placeholderImage from '../../assets/images/placeholder.png';
+
+// const placeholderImage = 'https://picsum.photos/id/8/343';
+const placeholderIds = [0, 2, 6, 8, 9, 20, 26, 30, 36, 39, 48, 60, 145, 157, 160, 180, 201, 225, 250, 312, 366, 370];
+
const ProductCard = ({ product, size }) => {
const formattedPrice = new Intl.NumberFormat('ko-KR').format(product.price);
+ const randomId = placeholderIds[Math.floor(Math.random() * placeholderIds.length)];
+ const placeholderImage = `https://picsum.photos/id/${randomId}/343`;
+
const handleImageError = (e) => {
e.target.src = placeholderImage; // 이미지 로드 실패 시 대체 이미지 설정
};
@@ -17,7 +23,7 @@ const ProductCard = ({ product, size }) => {
{product.name}
{formattedPrice}원
-
+
{product.favoriteCount}
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+