Conversation
| }) => { | ||
| return ( | ||
| <Main> | ||
| <MainH1>베스트 상품</MainH1> |
There was a problem hiding this comment.
P3:
클래스명에 태그명을 넣게 되면 나중에 태그를 바꾸게 될 때 클래스명도 같이 바꿔야합니다.
가능하면 MainTitle 같은 식으로 태그와 연관없는 이름을 추천드립니다.
| setSortOrder, | ||
| activePage, | ||
| setActivePage, | ||
| totalpage, |
There was a problem hiding this comment.
P3:
| totalpage, | |
| totalPage, |
| return ( | ||
| <Main> | ||
| <MainH1>베스트 상품</MainH1> | ||
| <BestProducts bestProducts={bestProducts} /> |
There was a problem hiding this comment.
P2:
좋아요순으로 정렬된 상품을 부모에서 필요한 이유가 있을까요?
부모에서 해당 데이터가 필요한 것이 아니라면 BestProducts 에서 데이터를 불러오시는걸 추천드립니다.
| <EntireHeader> | ||
| <MainH1>전체상품</MainH1> | ||
| <EntireDiv> | ||
| <SearchInput type="text" placeholder="검색할 상품을 입력해주세요" /> |
There was a problem hiding this comment.
P2:
해당 input에 값이 입력되었을때 해당 값 기반으로 products 를 다시 호출하는 로직을 추가해주시면 좋겠네요.
| `; | ||
|
|
||
| const Pagination = ({ activePage, setActivePage, totalpage }) => { | ||
| const [pagebuttons, setPagebuttons] = useState([1, 2, 3, 4, 5]); |
There was a problem hiding this comment.
P1:
| const [pagebuttons, setPagebuttons] = useState([1, 2, 3, 4, 5]); | |
| const [pageButtons, setPageButtons] = useState([1, 2, 3, 4, 5]); |
| {pagebuttons.map((number) => ( | ||
| <button | ||
| <PaginationButton | ||
| key={number} | ||
| onClick={() => handlePageClick(number)} | ||
| style={getButtonStyle(number)} |
There was a problem hiding this comment.
P1:
styledComponent를 사용하시니 해당 라이브러리에서 props를 넘겨서 조건부 렌더링하는 방식으로 작성해주세요.
| <div className="pagination"> | ||
| <button><</button> | ||
| <PaginationContainer> | ||
| <PaginationButton onClick={() => handlePreviousClick()} type="button"> |
There was a problem hiding this comment.
P1:
해당 함수에 arg가 필요없다면 아래처럼 사용해주세요.
| <PaginationButton onClick={() => handlePreviousClick()} type="button"> | |
| <PaginationButton onClick={handlePreviousClick} type="button"> |
| if (activePage === 1) { | ||
| return; | ||
| } |
There was a problem hiding this comment.
P1:
버튼을 클릭했을때 첫번째 페이지일때 함수를 실행하지 않는 것도 좋지만, activePage가 1일때 prev button에 disabled 속성을 주어서 사용자가 해당 버튼이 동작하지 않는다는 것을 알려주는 것이 사용자 경험 측면에서 더 좋을 것 같습니다.
| <Nav> | ||
| <NavLink to={"/"}>자유게시판</NavLink> | ||
| <NavLink to={"/additem"}>중고마켓</NavLink> |
There was a problem hiding this comment.
P2:
해당 컴포넌트의 to 속성과 동일한 url일때 fontColor가 디자인처럼 파란색이 될 수 있게 처리해주시면 좋겠습니다.
| const data = await fetchProducts(1, "favorite", pageSize); | ||
| const totalpage = Math.ceil(data.totalCount / 10); | ||
| setTotalpage(totalpage); | ||
| setBestProducts(data.list); |
There was a problem hiding this comment.
P3:
아래 코드도 동일동작합니다.
| const data = await fetchProducts(1, "favorite", pageSize); | |
| const totalpage = Math.ceil(data.totalCount / 10); | |
| setTotalpage(totalpage); | |
| setBestProducts(data.list); | |
| const {totalCount, list} = await fetchProducts(1, "favorite", pageSize); | |
| const totalpage = Math.ceil(totalCount / 10); | |
| setTotalpage(totalpage); | |
| setBestProducts(list); |
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게