Conversation
just-codingbaby
added
매운맛🔥
| } | ||
|
|
||
| export async function getArticleList(keyword) { | ||
| return apiRequest('GET', ARTICLE_BASE_URL, {},{page:'1',pageSize:'100',keyword}); |
There was a problem hiding this comment.
사소한 부분일 수도 있습니다만 page와 pageSize는 숫자(int)일 가능성이 높기에 문자열 처리를 하지 않는 편이 더 명확할 것 같습니다
There was a problem hiding this comment.
gitignore는 협업 과정에서 중요한 설정 중 하나입니다. 프로젝트에 맞는 gitignore 설정 방법을 공부하시면 도움이 될 것 같습니다.
참고
| function(error) { | ||
| if(error.response) { | ||
| console.log('Request Interceptor 에러 발생: ',error.response.status); | ||
| return error; |
There was a problem hiding this comment.
에러가 발생했을 때는 대응할 수 있도록 코드가 작성되어야 합니다. 지금처럼 error를 반환할 경우 각 코드에서 일일히 에러 대응을 해야하는 등의 코드 중복이 발생할 수 있으며 심지어 정상응답처럼 코드가 동작하여 예기치 못한 상황이 발생할 수도 있습니다.
interceptors를 통해 일괄적으로 관리하는 방향으로 선택하셨다면 에러도 해당 코드 안에서 처리하는 방법을 고민해 보시는 것도 좋을 것 같습니다.
| @@ -0,0 +1,56 @@ | |||
| import axios from "axios"; | |||
|
|
|||
| const ARTICLE_BASE_URL = 'https://sprint-mission-api.vercel.app/articles'; | |||
There was a problem hiding this comment.
product url 과 main 도메인은 같고, path만 다른 것으로 보입니다. 이런 경우 별도의 파일로 분리하여 관리하는 방법도 생각해 볼 수 있을 것 같습니다.
| const {id, name, description, price, images, favoriteCount, createdAt, updatedAt} = item; | ||
|
|
||
| return ( | ||
| <div key={id} className={label === '베스트 상품' ? 'favoriteProductItem' : 'sortedProductItem'} > |
There was a problem hiding this comment.
key는 컴포넌트 안에서 처리하는 것 보다 외부에서 주입하는 것이 좋습니다. ProductList의 map에서 key={item.id} 와 같은 형식으로 사용해 보시는건 어떨까요
| </div> | ||
| </div>) | ||
| } | ||
| <div className={label === '베스트 상품' ? 'favoriteProductList' : 'sortedProductList'}> |
There was a problem hiding this comment.
"베스트 상품" 이라는 변수가 세 번 정도 사용되었는데 하드 코딩 보단 관리 가능한 변수로 분리하여 사용하시는게 재사용성과 유지 보수 측면에서 좋다고 생각됩니다.
| <select className='sortedSelect' onChange={handleSortChange}> | ||
| <option value="recent">최신순</option> | ||
| <option value="favorite">좋아요순</option> | ||
| </select> |
There was a problem hiding this comment.
피그마를 보았을 때 기본 CSS 구현 보다는 라이브러리를 고려한 디자인으로 추측됩니다. 이 부분은 직접 구현 보다는 라이브러리를 사용한다고 생각하시면 좋을 것 같습니다.
참고
There was a problem hiding this comment.
좋은 정보 감사합니다. 미션6 끝나는 대로 부족한 부분들 수정하도록 하겠습니다
| import { useState } from 'react'; | ||
|
|
||
|
|
||
| function ProductItem({ item , label }) { |
There was a problem hiding this comment.
ProductItem은 ProducList와 다른 역할을 하는 컴포넌트로 별도의 파일로 분리해 주시는게 좋습니다.
요구사항
기본 요구사항
공통
중고마켓 페이지
PC, Tablet, Mobile 디자인에 해당하는 중고마켓 페이지를 만들어 주세요.
중고마켓 페이지 url path는 별도로 설정하지 않고, ‘/’에 보이도록 합니다.
상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 “/products” 를 사용해주세요.
상단 네비게이션 바, 푸터는 랜딩 페이지와 동일한 스타일과 규칙으로 만들어주세요.
상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 “/products” 를 활용해주세요.
상품 목록 페이지네이션 기능을 구현합니다.
드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 구현하세요.
상품 목록 검색 기능을 구현합니다.
베스트 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 “/products”의 정렬 기준 favorite을 사용해주세요.
심화 요구사항
공통
커스텀 hook을 만들어 필요한 곳에 활용해 보세요.
중고마켓 페이지
중고 마켓의 카드 컴포넌트 반응형 기준은 다음과 같습니다.
베스트 상품
Desktop : 4열
Tablet : 2열
Mobile : 1열
전체 상품
Desktop : 5열
Tablet : 3열
Mobile : 2열
반응형에 따른 페이지 네이션 기능을 구현합니다.
반응형으로 보여지는 물품들의 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.
멘토에게