-
+ )
+}
+
+function ItemsSectionHeaderMobile ({ orderSetter, keywordSetter }) {
+
+ const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+ const dropdownHandler = () => setIsDropdownOpen(prev => !prev);
+ const searchSubmitHandler = (e) => {
+ e.preventDefault();
+ keywordSetter(e.target['search'].value);
+ }
+
+ const dropdownClassName = `orderBy-dropdown ${isDropdownOpen ? '' : "hidden"}`;
+
+ return (
+
+
);
diff --git a/src/components/main/ItemsSection.css b/src/components/main/ItemsSection.css
index 653737f68..4650ea3a9 100644
--- a/src/components/main/ItemsSection.css
+++ b/src/components/main/ItemsSection.css
@@ -1,5 +1,5 @@
main .items-section .section-header {
- margin-bottom: 2rem;
+ margin-bottom: 1.5rem;
position: relative;
display: flex;
gap: 0.625rem;
@@ -7,6 +7,7 @@ main .items-section .section-header {
.items-section .section-header h3 {
flex-grow: 1;
+ flex-shrink: 0;
}
.items-section .section-header .add-item-button {
@@ -22,7 +23,10 @@ main .items-section .section-header {
.items-section .section-header .search-container {
height: 100%;
+ max-width: 20.3125rem;
+ min-width: 17rem;
position: relative;
+ flex-grow: 0.5;
}
.items-section .section-header .search-container .search-icon {
@@ -34,7 +38,7 @@ main .items-section .section-header {
.items-section .section-header .search-input {
background-color: var(--gray100);
height: 100%;
- width: 20.25rem;
+ width: 100%;
border: none;
border-radius: 12px;
font-size: 1rem;
@@ -72,7 +76,7 @@ main .items-section .section-header {
border-radius: 12px;
position: absolute;
right: 0;
- top: 3rem;
+ bottom: -5.5rem;
display: flex;
flex-direction: column;
list-style: none;
@@ -116,22 +120,18 @@ main .items-section .section-header {
}
main .items-list {
- display: flex;
- flex-wrap: wrap;
- gap: 1.5rem;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ column-gap: 1.5rem;
+ row-gap: 2.5rem;
}
main .items-card {
- width: 13.8rem;
- height: 18.75rem;
+ min-height: 1rem;
display: flex;
flex-direction: column;
}
-main .items-card .item-image {
- height: 13.8rem;
-}
-
main .pages {
display: flex;
justify-content: center;
@@ -157,4 +157,58 @@ main .pages .page-button:not(:disabled):hover {
main .pages .page-button.active {
background-color: var(--blue);
color: #fff;
+}
+
+@media (width <= 1199px) {
+ main .items-list {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ column-gap: 1rem;
+ row-gap: 2.5rem;
+ }
+}
+
+@media (width <= 767px) {
+ main .items-list {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ column-gap: 0.5rem;
+ row-gap: 2rem;
+ }
+
+ main .items-section .section-header {
+ width: 100%;
+ height: 5.75rem;
+ margin-bottom: 1rem;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ .items-section .section-header .section-header-mobile-upper {
+ width: 100%;
+ height: 2.625rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .items-section .section-header .section-header-mobile-down {
+ width: 100%;
+ height: 2.625rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ .section-header .section-header-mobile-down .search-container {
+ max-width: none;
+ flex-grow: 1;
+ }
+
+ .section-header .section-header-mobile-down .sort-dropdown {
+ height: 100%;
+ width: 2.625rem;
+ }
}
\ No newline at end of file
diff --git a/src/components/main/ItemsSection.js b/src/components/main/ItemsSection.js
index 1d759efd4..50bbdc23a 100644
--- a/src/components/main/ItemsSection.js
+++ b/src/components/main/ItemsSection.js
@@ -1,22 +1,22 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
import { getProducts } from "../../api/api";
import Card from "./Card";
import './ItemsSection.css';
import { ReactComponent as DropdownArrow} from '../../assets/dropdown_arrow.svg';
import { ReactComponent as SearchMark } from '../../assets/ic_search.svg';
+import { ReactComponent as SortIcon } from '../../assets/ic_sort.svg';
import { Link } from "react-router-dom";
import useAsync from "../../hooks/useAsync";
-import LoadingImage from "../LoadingImage";
+import LoadingErrorHandler from "../LoadingErrorHandler";
const ORDER_KOR = {
"recent": "최신순",
"favorite": "좋아요순",
}
-function ItemsSectionHeader({ orderBy, orderSetter, keywordSetter }) {
+function ItemsSectionHeader ({ orderBy, orderSetter, keywordSetter }) {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
- const dropdown = useRef();
const dropdownHandler = () => setIsDropdownOpen(prev => !prev);
const searchSubmitHandler = (e) => {
@@ -35,10 +35,49 @@ function ItemsSectionHeader({ orderBy, orderSetter, keywordSetter }) {
- -
+
- {orderSetter("recent")}}> + 최신순 + +
- {orderSetter("favorite")}}> + 좋아요순 + +
-
+
+
+
+ 판매 중인 상품
+ +
+
+
+
+ - {orderSetter("recent")}}> 최신순 @@ -89,11 +128,11 @@ function Pages({ page, pageSize, total, pageSetter }) { ); } -function ItemsSection() { +function ItemsSection({ getPageSize }) { const [items, setItems] = useState([]); const [page, setPage] = useState(1); - const [pageSize, setPageSize] = useState(10); + const [pageSize, setPageSize] = useState(getPageSize(10, 6, 4)); const [orderBy, setOrderBy] = useState("recent"); const [total, setTotal] = useState(0); const [keyword, setKeyword] = useState(''); @@ -110,7 +149,7 @@ function ItemsSection() { }, [getProductsAsync]) const pageClickHandler = (i) => { - handleLoad({ page: i, pageSize: 10, orderBy, keyword }); + handleLoad({ page: i, pageSize, orderBy, keyword }); } const orderClickHandler = (order) => { setOrderBy(order); @@ -120,15 +159,20 @@ function ItemsSection() { } useEffect(() => { - handleLoad({ page: 1, pageSize: 10, orderBy, keyword }) - }, [orderBy, keyword, handleLoad]); + setPageSize(getPageSize(10, 6, 4)); + handleLoad({ page: 1, pageSize, orderBy, keyword }) + }, [orderBy, keyword, handleLoad, pageSize, getPageSize]); return (