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

[염정훈] Sprint7 #219

Merged
merged 1 commit into from
Jul 7, 2024
Merged

[염정훈] Sprint7 #219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file added public/images/i-back.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/i-detail-like.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/i-menu.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 16 additions & 2 deletions src/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,21 @@
export async function getProducts({ page, pageSize, order }) {
const apiUrl = process.env.REACT_APP_API_URL;
// 상품 API
export async function getProducts({
page = 1,
pageSize = 20,
order = "recent",
}) {
const apiUrl = process.env.REACT_APP_BASE_URL;
const query = `page=${page}&pageSize=${pageSize}&orderBy=${order}`;
const response = await fetch(`${apiUrl}.vercel.app/products?${query}`);
const body = await response.json();
Copy link
Collaborator

Choose a reason for hiding this comment

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

baseURL은 뒤에 .vercel.app까지 넣어주시면 좋을 것 같아요!

return body;
}

// 댓글 API
export async function getComments({ productId, limit = 3 }) {
const apiUrl = process.env.REACT_APP_BASE_URL;
const query = `${productId}/comments?limit=${limit}`;
const response = await fetch(`${apiUrl}.vercel.app/products/${query}`);
const body = await response.json();
return body;
}
24 changes: 14 additions & 10 deletions src/components/AddItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,25 +36,29 @@ function AddItem() {
setInputFileUrl(null);
};

const validAddItem = () => {
const validAddItemVal = () => {
// 유효성 검사
if (
formData.name !== "" &&
formData.info !== "" &&
formData.price !== "" &&
formData.tag !== ""
formData.name.trim() !== "" &&
formData.info.trim() !== "" &&
formData.price.trim() !== "" &&
formData.tag.trim() !== ""
) {
return true;
}

return false;
};
Comment on lines +39 to +51
Copy link
Collaborator

Choose a reason for hiding this comment

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

이런 로직은

return (formData.name.trim() !== "" &&
      formData.info.trim() !== "" &&
      formData.price.trim() !== "" &&
      formData.tag.trim() !== "")

이런식으로도 작성 가능합니다!


useEffect(() => {
// input 데이터 변경 될때마다 유효성 검사 실행
if (validAddItemVal()) {
setAddItemBtn("on");
setBtnDisabled(false);
} else {
setAddItemBtn("");
setBtnDisabled(true);
}
};

useEffect(() => {
// input 데이터 변경 될때마다 유효성 검사 실행
validAddItem();
}, [formData]);

return (
Expand Down
44 changes: 24 additions & 20 deletions src/components/AllProduct.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ const responsivePageSize = () => {
}
};

const recent = "recent";
const favorite = "favorite";
const RECENT = "recent";
const FAVORITE = "favorite";
Comment on lines +19 to +20
Copy link
Collaborator

Choose a reason for hiding this comment

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

변수명을 수정해서 상수로 확실하게 표현해주신점 좋네요!


function AllProduct() {
const [products, setProducts] = useState([]);
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [order, setOrder] = useState(recent);
const [order, setOrder] = useState(RECENT);
const [dropArrow, setDropArrow] = useState("");
const [dropDisplay, setDropDisplay] = useState("none");
const [orderTxt, setOrderTxt] = useState("최신순");
Expand All @@ -44,15 +44,15 @@ function AllProduct() {
setOrderTxt(menuTxt);
setDropArrow("");
setDropDisplay("none");
setOrder(recent);
setOrder(RECENT);
};

const handleBestOrder = (e) => {
const menuTxt = e.target.textContent;
setOrderTxt(menuTxt);
setDropArrow("");
setDropDisplay("none");
setOrder(favorite);
setOrder(FAVORITE);
};

const pageNumClick = (page) => {
Expand Down Expand Up @@ -116,22 +116,26 @@ function AllProduct() {

return (
<li key={product.id}>
<div className="product-img">
<img
src={imgChk ? product.images : "/images/card01-small.png"} // 이미지 경로에 jpeg가 없으면 기본 이미지 있으면 정상적인 이미지
alt={product.name}
/>
</div>
<div>
<p className="product-name">{product.name}</p>
<p className="product-price">{productPrice}원</p>
<div className="product-favoriteCount">
<button type="button">
<img src="/images/i-like.png" alt="하트 아이콘" />
</button>
<span>{product.favoriteCount}</span>
<Link to={`/Items/${product.id}`}>
<div className="product-img">
<img
src={
imgChk ? product.images : "/images/card01-small.png"
} // 이미지 경로에 jpeg가 없으면 기본 이미지 있으면 정상적인 이미지
alt={product.name}
/>
</div>
</div>
<div>
<p className="product-name">{product.name}</p>
<p className="product-price">{productPrice}원</p>
<div className="product-favoriteCount">
<button type="button">
<img src="/images/i-like.png" alt="하트 아이콘" />
</button>
<span>{product.favoriteCount}</span>
</div>
</div>
</Link>
</li>
);
})}
Expand Down
6 changes: 5 additions & 1 deletion src/components/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import "../css/reset.css";
import "../css/style.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import NotFoundPage from "./NotFoundPage";
import ProductDetail from "./ProductDetail";

function App() {
return (
Expand All @@ -20,7 +21,10 @@ function App() {
<Route path="/" element={<Home />} />
<Route path="/Login" element={<Login />} />
Copy link
Collaborator

Choose a reason for hiding this comment

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

path명은 대문자는 잘 사용하지 않습니다. 소문자로만 작성하시는 것을 추천드려요!

<Route path="/Signup" element={<Signup />} />
<Route path="/Items" element={<Items />} />
<Route path="/Items">
<Route index element={<Items />} />
<Route path=":productId" element={<ProductDetail />} />
</Route>
<Route path="/AddItem" element={<AddItem />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
Expand Down
31 changes: 17 additions & 14 deletions src/components/BestProduct.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Link } from "react-router-dom";
import { getProducts } from "../api.js";
import { useEffect, useState } from "react";

Expand Down Expand Up @@ -51,21 +52,23 @@ function BestProduct() {
.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); // 숫자 3자리 마다 콤마 추가(정규식 사용)

return (
<li key={product.id}>
<div className="product-img">
<img src={product.images} alt={product.name} />
</div>
<div>
<p className="product-name">{product.name}</p>
<p className="product-price">{productPrice}원</p>
<div className="product-favoriteCount">
<button type="button">
<img src="/images/i-like.png" alt="하트 아이콘" />
</button>
<span>{product.favoriteCount}</span>
<Link key={product.id} to={`/Items/${product.id}`}>
<li>
<div className="product-img">
<img src={product.images} alt={product.name} />
</div>
</div>
</li>
<div>
<p className="product-name">{product.name}</p>
<p className="product-price">{productPrice}원</p>
<div className="product-favoriteCount">
<button type="button">
<img src="/images/i-like.png" alt="하트 아이콘" />
</button>
<span>{product.favoriteCount}</span>
</div>
</div>
</li>
</Link>
);
})}
</ul>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ function Header() {
<Link
to="/Items"
className={
location.pathname === "/Items" ||
location.pathname === "/AddItem"
location.pathname.startsWith("/Items") ||
location.pathname.startsWith("/AddItem")
Comment on lines +27 to +28
Copy link
Collaborator

Choose a reason for hiding this comment

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

startsWith로 조건 수정해주신점 좋네요!

? "on"
: ""
}
Expand Down
21 changes: 4 additions & 17 deletions src/components/Items.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,14 @@
import { useEffect, useState } from "react";
import AllProduct from "./AllProduct";
import BestProduct from "./BestProduct";
import { getProducts } from "../api.js";
import { Outlet } from "react-router-dom";

function Items() {
const [products, setProducts] = useState([]);
const [pageSize, setPageSize] = useState(4);
const [order, setOrder] = useState("favorite");

const handleLoad = async (options) => {
let { list } = await getProducts(options);
setProducts(list);
};

useEffect(() => {
handleLoad({ pageSize, order });
}, []);

return (
<>
<div className="main-wrap">
<BestProduct products={products}></BestProduct>
<AllProduct products={products}></AllProduct>
<BestProduct />
<AllProduct />
<Outlet />
</div>
Copy link
Collaborator

Choose a reason for hiding this comment

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

저도 처음 알게됐는데, 잘 활용해주셨네요!

</>
);
Expand Down
Loading
Loading