Conversation
이미지 경로가 잘못된 경우 fallback 이미지가 렌더되도록 fallback image url을 제공해주거나, 아에 placeholder image를 제공해주는 등 방법이 있어요. 이에 대해 한번 찾아보셔도 좋겠습니다!
잘 하셨어요. 여기서 중복되는 스타일이 있는경우가 다양할텐데요. |
| <input | ||
| className="search" | ||
| placeholder="검색할 상품을 입력해주세요." | ||
| ></input> |
There was a problem hiding this comment.
input처럼 self closing tag라면 <input /> 과 같이 사용해주세용
| return ( | ||
| <section className="allProdcutContainer"> | ||
| <div className="allProducts-nav"> | ||
| <h3 className="title">전체 상품</h3> |
There was a problem hiding this comment.
일단 css를 사용하고 있는데, 이처럼 generic한 클래스 이름을 사용하게 되면 이후에 style 충돌이 발생할 수 있을것 같아 우려되네요 ㅎㅎ 이번주에 배우는 스타일 활용 방법들을 한번 적용하는 방식으로 개편해봐도 좋겠어요
| <select | ||
| className="sortButton" | ||
| value={orderBy} | ||
| onChange={handleOrderChange} | ||
| > | ||
| <option className="sortOption" value="recent"> | ||
| 최신순 | ||
| </option> | ||
| <option className="sortOption" value="favorite"> | ||
| 좋아요순 | ||
| </option> | ||
| </select> |
There was a problem hiding this comment.
잘 만들어주셨습니다.
조금 더 욕심내어 본다면 이 order by 값을 관리하는 기능을 따로 콤포넌트로 분리해보면 어떨까요?
| <div className="allProduct"> | ||
| <img | ||
| className="productImage" | ||
| src={product.images[0]} | ||
| alt="전체 상품 이미지" | ||
| style={{ | ||
| width: imageSize, | ||
| height: imageSize, | ||
| }} | ||
| /> | ||
| <div className="content"> | ||
| <p className="name">{product.name}</p> | ||
| <p className="price">{product.price.toString()}</p> | ||
| <div className="favorite"> | ||
| <img src={favoriteIcon} alt="좋아요 버튼" /> | ||
| <p className="favoriteCount"> | ||
| {product.favoriteCount.toString()} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
map되는 요소에게는 key값을 제공해주셔야 해요!
또한 이처럼 반복되는 common UI를 렌더링 하는 작업이 있다면 이것도 ui콤포넌트로 분리해보는것도 좋은 방법입니다.
| // function BestProductList({ imageUrl, name, price, favoriteCount, size }) { | ||
| function BestProductList() { | ||
| const [bestProducts, setBestProducts] = useState([]); | ||
| const [orderBy, setOrderBy] = useState(); |
There was a problem hiding this comment.
이 콤포넌트에서는 orderby 가 필요하지는 않죠?
| <h3 className="title">베스트 상품</h3> | ||
| <div className="bestProducts"> | ||
| {bestProducts.map((product) => ( | ||
| <div className="bestProduct"> |
There was a problem hiding this comment.
마찬가지루 key와 ui콤포넌트를 만들어 분리해주세용
| page = 1, | ||
| pageSize = 10, |
| pageSize = 10, | ||
| orderBy = "recent", | ||
| }) { | ||
| const baseURL = "https://panda-market-api.vercel.app"; |
There was a problem hiding this comment.
base url의 경우, 여러곳에서 사용될 수 있으니 따로 상수값으로 관리해주는것도 좋은 방법입니다
| const baseURL = "https://panda-market-api.vercel.app"; | ||
|
|
||
| const response = await fetch( | ||
| `${baseURL}/products?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}` |
There was a problem hiding this comment.
query pararmeter를 만들때, 이렇게 수동으로 작업하기보다는 urlsearchparams를 활용해보면 어떨까요? https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게