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
coldplay126
approved these changes
Mar 12, 2025
There was a problem hiding this comment.
리액트 프로젝트 root(최상위)에 위치하는게 좋습니다! panda market 폴더 하위가 아닌 6-sprint-mission-fe하위로 이동시켜 보시는건 어떨까요?
Comment on lines
+7
to
+8
| <div className="navAll"> | ||
| <div className="nav-left"> |
There was a problem hiding this comment.
클래스 네이밍 컨벤션 통일시켜 주시면 좋을 것 같습니다!
There was a problem hiding this comment.
요구사항은 잘 작성되어 있으니 미디어 쿼리 적용만 적용하면 사이즈별 레이아웃 처리를 할 수 있을 것 같습니다!
/* 예시 */
/* 태블릿 뷰 (1024px 이하) */
@media (max-width: 1024px) {
.best-products {
grid-template-columns: repeat(2, 1fr);
}
.product-grid {
grid-template-columns: repeat(3, 1fr);
}
.best-card, .best-card img {
width: 100%;
height: auto;
}
.product-card, .product-card img {
width: 100%;
height: auto;
}
.product-card img {
aspect-ratio: 1/1;
}
}
| ); | ||
| }; | ||
|
|
||
| export default ProductsPage; |
There was a problem hiding this comment.
전반적으로 잘 구현해 주셨지만 다음에는 컴포넌트를 기능별로 조금 더 잘게 나누어 보시면 어떨까요?
// 예시
// ProductCard.jsx 분리
const ProductCard = ({ product, isBest }) => (
<div className={`product-card ${isBest ? 'best-card' : ''}`}>
{product.images?.length > 0 && (
<img src={product.images[0]} alt={product.name} />
)}
<div className="product-info">
<h3>{product.name}</h3>
<p className="product-price">{product.price}원</p>
<div className="product-likes">♡ {product.likes}</div>
</div>
</div>
);
| const [page, setPage] = useState(1); | ||
| const [sort, setSort] = useState("createdAt"); | ||
| const [search, setSearch] = useState(""); | ||
| const [loading, setLoading] = useState(false); |
There was a problem hiding this comment.
load이 설정되어 있으나 유저에게 직접 노출되는 부분은 없는 것 같습니다. 아래 예시처럼 로딩 화면을 노출해 보시는건 어떨까요?
{loading ? (
<div className="loading-spinner">로딩 중...</div>
) : (
<div className="product-grid">
{products.map((product) => (
<ProductCard key={product.id} product={product} />
))}
</div>
)}
coldplay126
merged commit 13d2ebb
into
codeit-sprint-fullstack:react-임찬빈
1 check passed
|
그리고 PR 내용에 작업 후 작업 내용을 확인할 수 있는 URL 을 첨부해 주시면 더욱 좋을 것 같습니다! |
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.
요구사항
기본 요구사항
공통
Github에 스프린트 미션 PR을 만들어 주세요.
React를 사용해 진행합니다.
중고마켓 페이지
PC, Tablet, Mobile 디자인에 해당하는 중고마켓 페이지를 만들어 주세요.
중고마켓 페이지 url path는 별도로 설정하지 않고, '/'에 보이도록 합니다.
상단 네비게이션 바, 푸터는 랜딩 페이지와 동일한 스타일과 규칙으로 만들어주세요.
상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 "/products" 를 활용해주세요.
베스트 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 "/products"의 정렬 기준 favorite을 사용해주세요.
심화 요구사항
공통
중고마켓 페이지
주요 변경사항
베스트상품과 판매 중인 상품이 보이는 페이지.
스크린샷
멘토에게