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
Aventurine91
added
매운맛🔥
pers0n4
approved these changes
Oct 30, 2024
There was a problem hiding this comment.
세트로 사용되는 CSS 파일이랑 파일 네이밍 컨벤션이 다르네요. JS 파일도 BestProducts.js 쪽으로 바뀌는 게 맞을 것 같네요.
Comment on lines
+31
to
+35
| <img src={product.images[0]} alt={product.name} /> {/* 이미지 URL 수정 */} | ||
| <div className="product-info"> | ||
| <h3>{product.name}</h3> {/* 상품 이름 */} | ||
| <p>{product.price.toLocaleString()}원</p> {/* 가격 */} | ||
| <p>♡ {product.favoriteCount}</p> {/* 좋아요 수 */} |
There was a problem hiding this comment.
전체적으로 주석을 꼼꼼히 남겨두는 건 좋은 습관이라고 생각하는데, 너무 당연한 주석은 생략해도 괜찮을 것 같습니다.
| .then(response => response.json()) | ||
| .then(data => { | ||
| console.log('API 응답 데이터:', data); // API 응답 구조 확인 | ||
| setProducts(data.list.slice(2, 6)); // 4개만 설정 |
| fetch('https://panda-market-api.vercel.app/products?offset=2&limit=4') | ||
| .then(response => response.json()) | ||
| .then(data => { | ||
| console.log('API 응답 데이터:', data); // API 응답 구조 확인 |
There was a problem hiding this comment.
실제 배포 시에는 이렇게 사용자에게 노출되는 로깅 메시지는 제거하셔야 합니다.
| const itemsPerPage = 5; | ||
|
|
||
| useEffect(() => { | ||
| fetch('https://panda-market-api.vercel.app/products?offset=0&limit=50') |
There was a problem hiding this comment.
api 주소 값은 재사용되면서 환경에 따라 바뀔 수 있는 값이기에 우선은 상수로 정의해서 동일한 API 주소에 대해선 같이 사용할 수 있게 하면 좋을 것 같습니다.
| const [currentPage, setCurrentPage] = useState(1); | ||
| const [searchTerm, setSearchTerm] = useState(''); // 검색어 상태 | ||
| const [sortOption, setSortOption] = useState('latest'); // 정렬 옵션 상태 | ||
| const itemsPerPage = 5; |
Comment on lines
+15
to
+22
| .then(data => { | ||
| setProducts(data.list); | ||
| setLoading(false); | ||
| }) | ||
| .catch(error => { | ||
| console.error('Error fetching best products:', error); | ||
| setLoading(false); | ||
| }); |
There was a problem hiding this comment.
then catch에서 사용하고 있는 setLoading은 finally로 옮기면 딱 적절하지 않을까 싶어요
Comment on lines
+31
to
+35
| if (sortOption === 'latest') { | ||
| return new Date(b.createdAt) - new Date(a.createdAt); | ||
| } else if (sortOption === 'favorite') { | ||
| return b.favoriteCount - a.favoriteCount; | ||
| } |
There was a problem hiding this comment.
sortOption 같이 enum처럼 사용되는 값은 리터럴 스트링 값을 그대로 사용하기보다는 상수 객체를 만들어서 사용하면 좋을 것 같네요.
Comment on lines
+76
to
+85
| currentProducts.map(product => ( | ||
| <div key={product.id} className="product-list-card"> | ||
| <img src={product.images[0]} alt={product.name} /> | ||
| <div className="product-list-info"> | ||
| <h3>{product.name}</h3> | ||
| <p>{product.price.toLocaleString()}원</p> | ||
| <p>♡ {product.favoriteCount}</p> | ||
| </div> | ||
| </div> | ||
| )) |
There was a problem hiding this comment.
이렇게 map을 통해 매핑되는 부분은 컴포넌트로 정의해봐도 좋을 것 같습니다.
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.
요구사항
기본 요구사항
공통
중고마켓 페이지
심화 요구사항
공통
커스텀 hook을 만들어 필요한 곳에 활용해 보세요.
중고마켓 페이지
중고 마켓의 카드 컴포넌트 반응형 기준은 다음과 같습니다.
베스트 상품
Desktop : 4열
Tablet : 2열
Mobile : 1열
전체 상품
Desktop : 5열
Tablet : 3열
Mobile : 2열
반응형에 따른 페이지 네이션 기능을 구현합니다.
반응형으로 보여지는 물품들의 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.
멘토에게
-아직 미완성이긴한데 최선을 다했숩니다 흑흑.. 수정할 내용 말씀해주시면 수정해보겠습니다!
-멘토님 제가 푸쉬할때 모듈오류가 떳었는데 갑자기 왜이럴까용?.. React라서 그럴까여?..😫
다시 시도해보니 제대로 푸쉬되긴했습니다 ㅠㅠ