[이다슬] sprint5 #57
[이다슬] sprint5 #57
Conversation
…-sprint1 [이다슬]feat:미션 1,2 주차 작업물
…슬-sprint2 [이다슬] sprint 미션 3&4
…슬-sprint4 [이다슬] 스프린트 미션 4 api 사용하여 crud
| align-items: stretch; | ||
| gap: 24px; | ||
| } | ||
| section.content-area article .img-area img{ |
There was a problem hiding this comment.
디테일한 태그 지정은 좋지만, 너무 많은 태그가 들어갈 경우에 추후 태그 중 한개라도 바뀌게 된다면 스타일 적응이 안되게 됩니다. 유지보수적인 측면에서 추후에 코드를 변경할 경우가 매우 많기 때문에, 너무 디테일한 CSS 선택자보다는 클래스를 사용하시는 것을 추천드립니다.
| return ( | ||
| <div className={styles.wrap}> | ||
| <Header className={styles.header} /> | ||
| <div className={styles.container}>{children}</div> |
There was a problem hiding this comment.
children이 메인 요소라면, main 태그를 사용하시는 것이 시맨틱 태그 개선이 될 것 같습니다.
react/src/api/products.js
Outdated
| pageSize = 10, | ||
| }) { | ||
| const query = `page=${page}&pageSize=${pageSize}&orderBy=${orderBy}`; | ||
| const response = await fetch( |
There was a problem hiding this comment.
통신 시 에러 처리문을 필수적으로 넣으셔야 합니다.
try {
const query = `page=${page}&pageSize=${pageSize}&orderBy=${orderBy}`;
const response = await fetch(
`https://panda-market-api.vercel.app/products?${query}`
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const body = await response.json();
return body;
} catch (error) {
console.error('상품 데이터를 가져오는데 실패했습니다:', error);
throw error;
}| return body; | ||
| } | ||
|
|
||
| export async function getBestProducts() { |
There was a problem hiding this comment.
마찬가지로 try catch문을 사용하셔서 위와 같이 에러를 예외처리 하시면 됩니다.
react/src/component/Footer.jsx
Outdated
| <Link to="/">FAQ</Link> | ||
| </li> | ||
| </ul> | ||
| <p class={styles.copyright}>©codeit - 2024</p> |
There was a problem hiding this comment.
class가 오타나신것 같습니다.
class -> className
| </li> | ||
| <li> | ||
| <Link to="https://x.com/" target="_blank"> | ||
| <img src={youtubeIcon} alt="유튜브" /> |
There was a problem hiding this comment.
유튜브 링크인데, 트위터 링크로 연결이 되어있습니다.
| </ul> | ||
| </nav> | ||
| <div className={styles.util}> | ||
| <Link to={"/"} className={`btn active ${styles.login}`}> |
There was a problem hiding this comment.
이 부분도 위와 마찬가지로 일관되게 styles.login로 사용하시고, login 안에 btn과 active 클래스에 해당하는 속성을 넣으시는 것도 좋을 것 같습니다.
react/src/component/ProductItem.jsx
Outdated
| @@ -0,0 +1,23 @@ | |||
| import heartIcon from "../assets/ic_heart.svg"; | |||
| function ProductList({ item }) { | |||
There was a problem hiding this comment.
네이밍이 List인데, 단일 아이템을 렌더링 하셔서 ProductItem으로 바꾸시는게 좋을 것 같습니다.
| setItems(list); | ||
| }; | ||
| const handleLoadBestProducts = async () => { | ||
| const { list } = await getBestProducts(); |
There was a problem hiding this comment.
이부분도 데이터 패칭 실패 시 예외처리나 로딩처리가 필요할 것 같습니다.
const handleLoadProducts = async (options) => {
try {
setLoading(true);
setError(null);
const { list } = await getProducts(options);
setItems(list || []);
} catch (err) {
setError('상품을 불러오는데 실패했습니다.');
console.error('상품 로딩 에러:', err);
} finally {
setLoading(false);
}
};4 participants
요구사항
기본
공통
[ ] Github에 스프린트 미션 PR을 만들어 주세요.
[ ] React를 사용해 진행합니다.
중고마켓 페이지
[ ] PC, Tablet, Mobile 디자인에 해당하는 중고마켓 페이지를 만들어 주세요.
[ ] 중고마켓 페이지 url path는 별도로 설정하지 않고, '/'에 보이도록 합니다.
[ ] 상단 네비게이션 바, 푸터는 랜딩 페이지와 동일한 스타일과 규칙으로 만들어주세요.
[ ] 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 "/products" 를 활용해주세요.
[X] 상품 목록 페이지네이션 기능을 구현합니다.
[ ] 드롭 다운으로 "최신 순" 또는 "좋아요 순"을 선택해서 정렬을 구현하세요.
[X] 상품 목록 검색 기능을 구현합니다.
[ ] 베스트 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 "/products"의 정렬 기준 favorite을 사용해주세요.
심화
공통
[ ] 커스텀 hook을 만들어 필요한 곳에 활용해 보세요.
중고마켓 페이지
[ ] 중고 마켓의 카드 컴포넌트 반응형 기준은 다음과 같습니다.
베스트 상품
Desktop : 4열
Tablet : 2열
Mobile : 1열
전체 상품
Desktop : 5열
Tablet : 3열
Mobile : 2열
반응형에 따른 페이지 네이션 기능을 구현합니다.
반응형으로 보여지는 물품들의 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.
주요 변경사항
스크린샷
멘토에게