Conversation
…ithub-actions [Fix] delete merged branch github action
…상석-sprint1 [박상석]sprint1
…상석-sprint2 Basic 박상석 sprint2
| import ProductListPage from './components/page/ProductListPage'; | ||
| import ProductRegPage from './components/page/ProductRegPage'; | ||
| import ProductDetailPage from './components/page/ProductDetailPage'; |
There was a problem hiding this comment.
component 이름 조금 더 명확해졌군요! 좋습니다
| <Route path='/items' element={<ProductListPage />} /> | ||
| <Route path='/additem' element={<ProductRegPage />} /> | ||
| <Route path='/items/:productId' element={<ProductDetailPage />} /> |
There was a problem hiding this comment.
개인적인 선호도 차이이긴 한데, /endpoint 들이 같은 애들끼리 묶어두면 좀 더 관리할때 수월하답니다!
| <Route path='/items' element={<ProductListPage />} /> | |
| <Route path='/additem' element={<ProductRegPage />} /> | |
| <Route path='/items/:productId' element={<ProductDetailPage />} /> | |
| <Route path='/items' element={<ProductListPage />} /> | |
| <Route path='/items/:productId' element={<ProductDetailPage />} /> | |
| <Route path='/additem' element={<ProductRegPage />} /> |
| import { Link } from "react-router-dom"; | ||
|
|
||
| export default function ProductBestList() { | ||
|
|
| export default function ProductBestList() { | ||
|
|
||
| const [bestItem, setBestItem] = useState([]); | ||
| const noImage = 'https://via.placeholder.com/222?text=No+Image'; |
There was a problem hiding this comment.
상수로 꺼내놓는거 좋네요!
혹시 이런 요소들을 다 모아서 constants.js와 같은 파일에 관리해보면 어떨까요?
|
|
||
| useEffect(() => { | ||
|
|
||
| async function bestItems() { |
There was a problem hiding this comment.
함수 이름은 명사가 아닌 동사로 선언해주시는게 좋아요!
getBestItems 라는 이름은 어떨까요?
| </label> | ||
| <input | ||
| value={productSearch} | ||
| onChange={getProductData} |
There was a problem hiding this comment.
input의 onChange에는 event가 전달될거에요.
이벤트가 발생할때마다 네트워크 통신을 해야한다면 퍼포먼스 차원에서 이슈가 생길 수 있답니다.
따라서 인풋을 입력하고 엔터를 쳐야만 getProductData 함수가 호출되도록 하거나,
입력중이라면 기다렸다가 입력을 멈춘뒤 0.3초 이후에 함수 호출이 되도록 해보면 어떨까요?
| //최신순, 좋아요순 정렬 함수 | ||
| function sortedItems() { | ||
| if (sortOrder === '최신순') { | ||
| return [...items].sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)); | ||
| } else if (sortOrder === '좋아요순') { | ||
| return [...items].sort((a, b) => b.favoriteCount - a.favoriteCount); | ||
| } | ||
| } |
There was a problem hiding this comment.
정렬의 경우, 클라이언트에서 처리하지말구 정렬값이 바뀔때마다 서버에서 데이터를 새로 조회해서 오도록 해주세요!
|
|
||
| try { | ||
|
|
||
| const response = await axios.get('https://panda-market-api.vercel.app/products', { |
There was a problem hiding this comment.
이제 보면 이렇게 특정 엔드포인트에 네트워크 요청을 하는 경우들이 많이 있짢아요.
이 네트워크 요청을 위한 기능을 따로 함수로 추출해서 재활용해보면 어떨까요?
제품들에 대해 조회하는 기능이라면
export async function getProducts(params) {}처럼 만들어놓고, 필요한곳에서 다음과 같이 활용하는거죠
useEffect(() => {
getProducts({ page: 1, limit: 10, orderBy: 'popular' })
.then(setProducts)
.catch(console.error)
}, [])| } | ||
| </div> | ||
|
|
||
| <Link to="#" class="pageLink pageLinkNext" onClick={handleNext}> |
There was a problem hiding this comment.
리액트에서는 class가 아니라 className 을 사용해주셔야 해요
| return ( | ||
|
|
||
| <div class="paginationBox"> | ||
| <Link to="#" class="pageLink pageLinkPrev" onClick={handlePrev}> |
요구사항
Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React를 사용합니다
기본
상품 상세
[o]상품 상세 페이지 주소는 "/items/{productId}" 입니다.
[o]response 로 받은 아래의 데이터로 화면을 구현합니다.
=> favoriteCount : 하트 개수
=> images : 상품 이미지
=> tags : 상품태그
=> name : 상품 이름
=> description : 상품 설명
[o]목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 "/items" 으로 이동합니다
상품 문의 댓글
=> image : 작성자 이미지
=> nickname : 작성자 닉네임
=> content : 작성자가 남긴 문구
=> description : 상품 설명
=> updatedAt : 문의글 마지막 업데이트 시간
심화
주요변경사함
-상품페이지 구조를 변경했습니다.
스크린샷
멘토에게
-https://codeit02-pandamarket.netlify.app/items/324