-
- FreshTrash
-
-
-
폐기물 등록
-
-
-
-
입력한 내용
-
- {posts.map((wastes) => (
-
-
이미지
-
-
{wastes.title}
-
{wastes.address.zipcode}
- {/*
{wastes.address}
*/}
-
{wastes.waste_price}
-
{wastes.sell_status}
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {showModal && (
+
+
+ - handleCategoryChange("전체")}>전체
+ - handleCategoryChange("전자기기")}>전자기기
+ - handleCategoryChange("의류")}>의류
+ - handleCategoryChange("생활/주방")}>
+ 생활/주방
+
+ - handleCategoryChange("뷰티")}>뷰티
+ - handleCategoryChange("건강")}>건강
+ - handleCategoryChange("스포츠")}>스포츠
+ - handleCategoryChange("도서")}>도서
+ - handleCategoryChange("장난감/게임")}>
+ 장난감/게임
+
+ - handleCategoryChange("가구/인테리어")}>
+ 가구/인테리어
+
+ - handleCategoryChange("반려동물용품")}>
+ 반려동물용품
+
+ - handleCategoryChange("식물")}>식물
+
+
+
+
+
+
+
+
+
+
+ {currentProducts
+ .filter(
+ (wastes) =>
+ selectedCategory === "전체" ||
+ wastes.wasteCategory === selectedCategory
+ )
+ .map((wastes) => (
+
))}
-
-
);
};
diff --git a/src/styles/ProductCardStyle.js b/src/styles/ProductCardStyle.js
new file mode 100644
index 0000000..eaca09c
--- /dev/null
+++ b/src/styles/ProductCardStyle.js
@@ -0,0 +1,181 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+ /* display: grid;
+ grid-template-columns: 20rem 20rem 20rem;
+ gap: 70px;
+ justify-content: center; */
+ .card {
+ border: 1px solid var(--grey-box);
+ padding: 1.5rem;
+ box-sizing: border-box;
+ box-shadow: 5px 5px 8px var(--grey-box);
+ border-radius: 10px;
+ .product-box {
+ display: flex;
+ flex-direction: column;
+ img {
+ margin-bottom: 2rem;
+ }
+ .title {
+ margin-bottom: 1.5rem;
+ font-size: 1.3rem;
+ }
+ .content {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 1.5rem;
+ .adrress {
+ display: flex;
+ .state {
+ margin-right: 0.5rem;
+ }
+ .city {
+ margin-right: 3rem;
+ }
+ }
+ .day {
+ display: flex;
+ .created-at {
+ margin-left: 0.5rem;
+ line-height: 1rem;
+ }
+ }
+ }
+ .price {
+ font-size: 1.5rem;
+ font-weight: bold;
+ }
+ }
+ .card-bottom {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ gap: 1rem;
+ font-size: 1.5rem;
+ .like {
+ display: flex;
+
+ gap: 0.3rem;
+ button {
+ border: none;
+ background-color: white;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+
+ @media (max-width: 1280px) {
+ .card {
+ .product-box {
+ display: flex;
+ flex-direction: cloumn;
+ .content {
+ .adrress {
+ .state {
+ margin-right: 0.1rem;
+ }
+ .city {
+ margin-right: 3rem;
+ }
+ }
+ .day {
+ .created-at {
+ margin-left: 0.5rem;
+ line-height: 1rem;
+ }
+ }
+ }
+ .price {
+ font-size: 1.2rem;
+ font-weight: bold;
+ }
+ }
+ .sell-status {
+ font-size: 1.4rem;
+ }
+ }
+ }
+ @media (max-width: 1080px) {
+ .card {
+ border-bottom: 1px solid var(--grey-box);
+ .product-box {
+ display: flex;
+ flex-direction: row;
+ img {
+ margin-right: 3rem;
+ }
+ .title {
+ margin-bottom: 1.3rem;
+ font-size: 1.3rem;
+ }
+ .content {
+ .adrress {
+ .state {
+ font-size: 1rem;
+ }
+ .city {
+ font-size: 1rem;
+ }
+ }
+ .day {
+ .created-at {
+ font-size: 1rem;
+ line-height: 1rem;
+ }
+ }
+ }
+ .price {
+ font-size: 1.5rem;
+ font-weight: bold;
+ }
+ }
+ .sell-status {
+ float: right;
+ font-size: 1.5rem;
+ }
+ }
+ }
+ @media (max-width: 768px) {
+ .card {
+ border-bottom: 1px solid var(--grey-box);
+ .product-box {
+ display: flex;
+ flex-direction: row;
+ img {
+ margin-right: 3rem;
+ width: 200px;
+ }
+ .title {
+ margin-bottom: 1.3rem;
+ font-size: 1.3rem;
+ }
+ .content {
+ .adrress {
+ .state {
+ font-size: 1rem;
+ }
+ .city {
+ font-size: 1rem;
+ }
+ }
+ .day {
+ .created-at {
+ font-size: 1rem;
+ line-height: 1rem;
+ }
+ }
+ }
+ .price {
+ font-size: 1.5rem;
+ font-weight: bold;
+ }
+ }
+ .sell-status {
+ float: right;
+ font-size: 1.5rem;
+ }
+ }
+ }
+`;
diff --git a/src/styles/ProductsListStyle.js b/src/styles/ProductsListStyle.js
new file mode 100644
index 0000000..3b23641
--- /dev/null
+++ b/src/styles/ProductsListStyle.js
@@ -0,0 +1,195 @@
+import styled from "styled-components";
+export const Nav = styled.div`
+ .nav-middle {
+ display: flex;
+ padding: 1rem 1rem;
+ justify-content: space-between;
+ border-bottom: 1px solid var(--grey-box);
+ box-shadow: 0px 3px 8px var(--grey-box);
+ .nav-left {
+ position: relative;
+ button {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border: none;
+ border-radius: 5px;
+ width: 6rem;
+ height: 2.8rem;
+ background-color: var(--green-brunswick);
+ cursor: pointer;
+ p {
+ color: white;
+ }
+ }
+ }
+ .nav-middle-right {
+ display: flex;
+ gap: 2rem;
+ align-items: center;
+ .search-wrapper {
+ position: relative;
+ border: 2px solid black;
+ border-radius: 5px;
+ .search-category {
+ width: 5rem;
+ height: 2.2rem;
+ background-color: white;
+ border-radius: 5px;
+ border: none;
+ outline: none;
+ }
+ input {
+ width: 15rem;
+ height: 1rem;
+ border: none;
+ outline: none;
+ }
+ .search-icon {
+ position: absolute; /* 아이콘을 절대적으로 위치시킵니다. */
+ top: 0;
+ right: 0;
+ margin-top: 0.4rem; /* 원하는 위치로 조정하세요 */
+ margin-right: 0.5rem;
+ }
+ }
+ }
+ }
+ @media (max-width: 1080px) {
+ .nav-middle {
+ display: flex;
+ padding: 1rem 1rem;
+ justify-content: space-between;
+ border-bottom: 1px solid var(--grey-box);
+ box-shadow: 0px 3px 8px var(--grey-box);
+ .nav-left {
+ position: relative;
+ button {
+ display: flex;
+ justify-content: center;
+ border: none;
+ border-radius: 5px;
+ width: 2.5rem;
+ height: 2.8rem;
+
+ cursor: pointer;
+ p {
+ display: none;
+ }
+ }
+ }
+ .nav-middle-right {
+ display: flex;
+ gap: 2rem;
+ align-items: center;
+ .search-wrapper {
+ position: relative;
+ border: 2px solid black;
+ border-radius: 5px;
+ .search-category {
+ width: 5rem;
+ height: 2.2rem;
+ background-color: white;
+ border-radius: 5px;
+ border: none;
+ outline: none;
+ }
+ input {
+ width: 15rem;
+ height: 1rem;
+ border: none;
+ outline: none;
+ }
+ .search-icon {
+ position: absolute; /* 아이콘을 절대적으로 위치시킵니다. */
+ top: 0;
+ right: 0;
+ margin-top: 0.4rem; /* 원하는 위치로 조정하세요 */
+ margin-right: 0.5rem;
+ }
+ }
+ }
+ }
+ }
+`;
+export const Category1 = styled.div`
+ position: relative;
+ .modal {
+ position: absolute;
+ background-color: white;
+ box-shadow: 2px 2px 2px var(--grey-box);
+ border: 1px solid var(--grey-box);
+ /* padding: 2rem; */
+ width: 15rem;
+ ul {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ li {
+ width: 100%;
+ height: 2.5rem;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ li:hover {
+ background-color: var(--grey-light);
+ }
+ }
+ }
+`;
+
+export const Header = styled.div`
+ display: flex;
+ justify-content: flex-end;
+
+ button {
+ background-color: white;
+ border: none;
+ margin-top: 1rem;
+ margin-right: 1rem;
+ cursor: pointer;
+
+ font-size: 1rem;
+ }
+`;
+
+export const Pagination = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0.3rem;
+ button {
+ background-color: white;
+ border: 1px solid var(--grey-box);
+ width: 2.5rem;
+ height: 2rem;
+ cursor: pointer;
+ }
+`;
+export const Card = styled.div`
+ display: grid;
+ grid-template-columns: 20rem 20rem 20rem;
+ gap: 70px;
+ justify-content: center;
+ margin: 3rem 0;
+
+ @media (max-width: 1280px) {
+ display: grid;
+ grid-template-columns: 19rem 19rem 19rem;
+ gap: 40px;
+ justify-content: center;
+ }
+ @media (max-width: 1080px) {
+ display: grid;
+ grid-template-columns: 40rem;
+ gap: 70px;
+ }
+ @media (max-width: 768px) {
+ display: grid;
+ grid-template-columns: 30rem;
+ gap: 70px;
+ }
+`;
+