Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ithub-actions [Fix] delete merged branch github action
arthurkimdev
approved these changes
Jun 23, 2024
| @@ -1,43 +1,10 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <html lang="ko"> | |||
Comment on lines
+6
to
+22
| async function getData() { | ||
| const url = "https://panda-market-api.vercel.app/products"; | ||
| const response = await fetch(url); | ||
| const result = await response.json(); | ||
|
|
||
| const data = result.list.map((items) => ({ | ||
| id: items.id, | ||
| title: items.name, | ||
| description: items.description, | ||
| price: items.price, | ||
| image: items.images, | ||
| favoriteCount: items.favoriteCount, | ||
| createAt: items.createAt, | ||
| })); | ||
|
|
||
| return data; | ||
| } |
There was a problem hiding this comment.
이 부분은 별도의 파일로 분리가 되면 좋겠어요! 예를들어 getData.js 을 아래 처럼 별도의 모듈로 만들어서 사용하는 방법은 확장성이나 유지보수에도 더 좋은 장점이 있어요.
const BASE_URL = 'https://panda-market-api.vercel.app';
export async function getData(orderBy, page, pageSize) {
const query = `orderBy=${orderBy}&page=${page}&pageSize=${pageSize}`;
const url = `${BASE_URL}/products?${query}`;
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Failed to fetch products');
}
const body = await response.json();
return body.list.map((item) => ({
id: item.id,
title: item.name,
description: item.description,
price: item.price,
image: item.images,
favoriteCount: item.favoriteCount,
createAt: item.createAt,
}));
} catch (error) {
console.error('Error message');
throw error;
}
}
Comment on lines
+27
to
+29
| <li key={items.id}> | ||
| <ProductListItem item={item} /> | ||
| </li> |
There was a problem hiding this comment.
여기 key 값이 items.id가 아니라 item.id가 되어야해요. 각 고유한 id값을 주어야 하거든요.
Comment on lines
+4
to
+28
| function AllProductList({ items }) { | ||
| return ( | ||
| <div className="all-product-list"> | ||
| <div className="label"> | ||
| <div className="label-title">전체 상품</div> | ||
| <div className="label-inputs"> | ||
| <input | ||
| className="search-input" | ||
| type="text" | ||
| placeholder="검색할 상품을 입력해주세요" | ||
| ></input> | ||
| <button className="product-add-button">상품 등록하기</button> | ||
| <select className="order-dropdown" name="order" id="order"> | ||
| <option value="createAt" selected> | ||
| 최신순 | ||
| </option> | ||
| <option value="rating">좋아요순</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
| <ul className="items"> | ||
| {items.map((item) => { | ||
| return ( | ||
| <li key={items.id}> | ||
| <ProductListItem item={item} /> |
There was a problem hiding this comment.
단순 UI를 표현하는 컴포넌트를 잘 만들어주셨습니다! 👍
Comment on lines
+3
to
+13
| function Menu({ className, name, href }) { | ||
| const classNames = `Menu ${className}`; | ||
| return ( | ||
| <div className="Menu-wrapper"> | ||
| <a className={classNames} href={href}> | ||
| {name} | ||
| </a> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
There was a problem hiding this comment.
여기 Menu 컴포넌트도 headless UI 처럼 잘만들어주셨어요! 👍
|
첫 리액트 도입인데, 훌륭하게 잘해주셨어요. 다음번 과제도 지금처럼 headless UI를 잘 활용해주시는 방향으로 화이팅입니다! 💪 |
|
이제는 git 충돌 안나게 잘해주셨네요! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
기본
중고마켓
중고마켓 반응형
심화
주요 변경사항
멘토에게