[이다슬] sprint5#57
Open
dslee0525 wants to merge 12 commits intocodeit-sprint-fullstack:react-이다슬from
Hidden character warning
The head ref may contain hidden characters: "react-\uc774\ub2e4\uc2ac-sprint5"
Open
Conversation
…-sprint1 [이다슬]feat:미션 1,2 주차 작업물
…슬-sprint2 [이다슬] sprint 미션 3&4
…슬-sprint4 [이다슬] 스프린트 미션 4 api 사용하여 crud
rl0425
approved these changes
Jun 2, 2025
| align-items: stretch; | ||
| gap: 24px; | ||
| } | ||
| section.content-area article .img-area img{ |
Collaborator
There was a problem hiding this comment.
디테일한 태그 지정은 좋지만, 너무 많은 태그가 들어갈 경우에 추후 태그 중 한개라도 바뀌게 된다면 스타일 적응이 안되게 됩니다. 유지보수적인 측면에서 추후에 코드를 변경할 경우가 매우 많기 때문에, 너무 디테일한 CSS 선택자보다는 클래스를 사용하시는 것을 추천드립니다.
| return ( | ||
| <div className={styles.wrap}> | ||
| <Header className={styles.header} /> | ||
| <div className={styles.container}>{children}</div> |
Collaborator
There was a problem hiding this comment.
children이 메인 요소라면, main 태그를 사용하시는 것이 시맨틱 태그 개선이 될 것 같습니다.
| pageSize = 10, | ||
| }) { | ||
| const query = `page=${page}&pageSize=${pageSize}&orderBy=${orderBy}`; | ||
| const response = await fetch( |
Collaborator
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() { |
Collaborator
There was a problem hiding this comment.
마찬가지로 try catch문을 사용하셔서 위와 같이 에러를 예외처리 하시면 됩니다.
| <Link to="/">FAQ</Link> | ||
| </li> | ||
| </ul> | ||
| <p class={styles.copyright}>©codeit - 2024</p> |
Collaborator
There was a problem hiding this comment.
class가 오타나신것 같습니다.
class -> className
| </li> | ||
| <li> | ||
| <Link to="https://x.com/" target="_blank"> | ||
| <img src={youtubeIcon} alt="유튜브" /> |
Collaborator
There was a problem hiding this comment.
유튜브 링크인데, 트위터 링크로 연결이 되어있습니다.
| </ul> | ||
| </nav> | ||
| <div className={styles.util}> | ||
| <Link to={"/"} className={`btn active ${styles.login}`}> |
Collaborator
There was a problem hiding this comment.
이 부분도 위와 마찬가지로 일관되게 styles.login로 사용하시고, login 안에 btn과 active 클래스에 해당하는 속성을 넣으시는 것도 좋을 것 같습니다.
| @@ -0,0 +1,23 @@ | |||
| import heartIcon from "../assets/ic_heart.svg"; | |||
| function ProductList({ item }) { | |||
Collaborator
There was a problem hiding this comment.
네이밍이 List인데, 단일 아이템을 렌더링 하셔서 ProductItem으로 바꾸시는게 좋을 것 같습니다.
| setItems(list); | ||
| }; | ||
| const handleLoadBestProducts = async () => { | ||
| const { list } = await getBestProducts(); |
Collaborator
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);
}
};
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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" 를 활용해주세요.
[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값을 적절하게 설정합니다.
주요 변경사항
스크린샷
멘토에게