Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat:#21-목록페이 html,css추가 #22

Closed
wants to merge 6 commits into from
Closed

feat:#21-목록페이 html,css추가 #22

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e362fb2
feat:#21-목록페이 html,css추가
binjin0 Apr 11, 2024
34d67db
design:#21-목록페이지 디자인 수정
binjin0 Apr 13, 2024
743fa58
feat:#21-기능추가
binjin0 Apr 13, 2024
9c6c4dc
set:#21-eslist, prettier 설정
binjin0 Apr 13, 2024
37735ff
chore:#10-sell-status 삭제
binjin0 Apr 13, 2024
4c4c82b
chore:#21-주석수정
binjin0 Apr 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions src/components/ProductCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from "react";
import * as S from "../styles/ProductCardStyle";
import { useRecoilState } from "recoil";
import { postsState } from "../recoil/RecoilWastes";
import { LuCalendarDays } from "react-icons/lu";
import { GoHeart } from "react-icons/go";

const ProductCard = () => {
const [posts, setPosts] = useRecoilState(postsState);
return (
<S.Container>
{posts.map((wastes) => (
<div key={wastes.id} className="card">
<div className="product-box">
<img src="https://placehold.jp/300x300.png" alt="임시이미지" />
<div>
<div className=" title">{wastes.title}</div>
<div className=" content">
<div className="adrress">
<div className="state">{wastes.address.state}</div>
<div className="city">{wastes.address.city}</div>
</div>
<div className="day">
<LuCalendarDays />
<div className="created-at">{wastes.created_at}</div>
</div>
</div>
<div className=" price">{wastes.waste_price}원</div>
</div>
</div>
<div className="card-bottom">
<p>{wastes.sell_status} </p>
<GoHeart size="30" />
</div>
<div>{wastes.likes}</div>

{/* <button onClick={() => handleDelete(wastes.id)}>삭제</button> */}
</div>
))}
</S.Container>
);
};

export default ProductCard;
37 changes: 29 additions & 8 deletions src/fakeServer/db.json
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

db 데이터 만드신거는 백엔드 API 명세서 어떤걸 보고 만드신 건가요?

Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,45 @@
"wastes": [
{
"fileName": {},
"title": "예시",
"title": "옷팝니다.",
"wasteCategory": "의류",
"wasteStatus": "상",
"wasteStatus": "최상",
"sellStatus": "거래중",
"wastePrice": "3,000",
"content": "예시입니다.",
"wastePrice": "5,000",
"content": "의류 팝니다.",
"address": {
"address": "서울 서초구 안골길 4",
"zipcode": "06794",
"address": "서울 서대문구 가재울로 6",
"zipcode": "03693",
"state": "서울",
"city": "서초구",
"district": "내곡동",
"city": "서대문구",
"district": "남가좌동",
"detail": ""
},
"likeCount": "",
"viewCount": "",
"created_at": "2024. 4. 11.",
"id": 1
},
{
"fileName": {},
"title": "주방용품 나눔해요",
"wasteCategory": "생활/주방",
"wasteStatus": "상",
"sellStatus": "거래중",
"wastePrice": "0",
"content": "나눔합니다.",
"address": {
"address": "서울 종로구 북촌로1길 9",
"zipcode": "03060",
"state": "서울",
"city": "종로구",
"district": "안국동",
"detail": ""
},
"likeCount": "",
"viewCount": "",
"created_at": "2024. 4. 11.",
"id": 2
}
]
}
67 changes: 43 additions & 24 deletions src/pages/ProductsList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@ import { postsState } from "../recoil/RecoilWastes";
import { FaPlus } from "react-icons/fa6";
import { Link } from "react-router-dom";
import { deletePost } from "../api/WastesApi";
import * as S from "../styles/ProductsListStyle";
import Nav from "../components/Nav";
import { GiHamburgerMenu } from "react-icons/gi";
import { useState } from "react";
import ProductCard from "../components/ProductCard";
import { IoSearch } from "react-icons/io5";
const ProductsList = () => {
const [posts, setPosts] = useRecoilState(postsState);
console.log(posts);
Expand All @@ -19,31 +25,44 @@ const ProductsList = () => {
};
return (
<div>
<div>
<Link to="/">FreshTrash</Link>
</div>
<Link to="/ProductAdd">
<p>폐기물 등록</p>
<FaPlus />
</Link>
<div>
<h2>입력한 내용</h2>
<ul>
{posts.map((wastes) => (
<div key={wastes.id}>
<div>이미지</div>
<div>
<div>{wastes.title}</div>
<div>{wastes.address.zipcode}</div>
{/* <div>{wastes.address}</div> */}
<div>{wastes.waste_price}</div>
<div>{wastes.sell_status}</div>
</div>
<button onClick={() => handleDelete(wastes.id)}>삭제</button>
<Nav />
<S.Nav>
<div className="nav-middle">
<div>
<GiHamburgerMenu size="25" />
<div>
<span>전체</span>
<span>의류</span>
<span>가전</span>
</div>
))}
</ul>
</div>
</div>

<div className="nav-middle-right">
<div className="search-wrapper">
<select className="search-category">
<option>카테고리</option>
<option>지역</option>
<option>제목</option>
</select>
<input type="text" />
<IoSearch size="25" className="search-icon" />
</div>
<Link to="/ProductAdd">
<FaPlus size="25" />
</Link>
</div>
</div>

<div className="nav-bottom">
<span>관심순</span>
<span>조회순</span>
<span>최신순</span>
</div>
</S.Nav>

<S.CardList>
<ProductCard />
</S.CardList>
</div>
);
};
Expand Down
207 changes: 207 additions & 0 deletions src/styles/ProductCardStyle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
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;
.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: 1.5rem;
font-size: 1.5rem;
p {
}
}
}
/* @media (max-width: 1440px) {
display: grid;
grid-template-columns: 22rem 22rem 22rem;
gap: 50px;
justify-content: center;
.card {
padding: 1.5em;
.product-box {
display: flex;
flex-direction: cloumn;
}
.sell-status {
float: right;
font-size: 1.5rem;
}
}
} */
@media (max-width: 1280px) {
display: grid;
grid-template-columns: 19rem 19rem 19rem;
gap: 40px;
justify-content: center;
.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) {
display: grid;
grid-template-columns: 40rem;
gap: 70px;
.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) {
display: grid;
grid-template-columns: 35rem;
gap: 70px;
.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;
}
}
}
/* @media (max-width: 1280px) {
width: 62rem;
}
@media (max-width: 1024px) {
width: 50rem;
}
@media (max-width: 768px) {
width: 40rem;
font-size: 0.88rem;
} */
`;
Loading