Skip to content

Conversation

lucy-kim04
Copy link
Collaborator

요구사항

기본

  • Github에 스프린트 미션 PR을 만들어 주세요.

  • React를 사용해 진행합니다.
    중고마켓 페이지

  • PC, Tablet, Mobile 디자인에 해당하는 중고마켓 페이지를 만들어 주세요.

  • 중고마켓 페이지 url path는 별도로 설정하지 않고, '/'에 보이도록 합니다.

  • 상단 네비게이션 바, 푸터는 랜딩 페이지와 동일한 스타일과 규칙으로 만들어주세요.

  • 상품 데이터는 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값을 적절하게 설정합니다.

주요 변경사항

스크린샷

image

멘토에게

  • 커밋 수정하다가.... 다 날라가서 일단 한만큼 올리겠습니다...ㅋㅋㅋㅋ 내일 중간중간 추가할게요....하하..ㅠ

@lucy-kim04 lucy-kim04 requested a review from seobew December 1, 2024 13:59
@lucy-kim04 lucy-kim04 self-assigned this Dec 1, 2024
@lucy-kim04 lucy-kim04 added 미완성🫠 완성은 아니지만 제출합니다... 순한맛🐑 마음이 많이 여립니다.. labels Dec 1, 2024
Copy link

@seobew seobew left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아고 희주님 커밋이 날라가셔서 속상하시겠어요 ㅠ

PR 올려주셔서 감사하고 계속 보고 있을테니 작업하시면 커밋 남겨주세요!
바로 리뷰 해드리겠습니다~

git reflog 로 지워진 커밋들을 확인후 갈수 있는 방법이 있긴 합니다!
한번 시도해보세요 ㅎㅎ 저도 어쩌다 한번씩 날려먹을때 사용합니다
https://heina-fantasy.tistory.com/295

고생하셨어요 ㅎㅎ

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기에 기본 html과 index.js 에 react 기본 파일들 추가해주세요 ㅎㅎ
https://github.com/react-cosmos/create-react-app-example/blob/master/public/index.html

<section className="best-products">
<h2>베스트 상품</h2>
<div className="product-grid">
{products.map((product) => (
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요렇게 써도 좋지만 구조 분해 할당으로 해도 좋을것 같아요 ㅎㅎ
이미 잘 쓰고 계시지만, 참고용으로 남겨놓습니다.
{products.map(({ id, image, name }) => (

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
미완성🫠 완성은 아니지만 제출합니다... 순한맛🐑 마음이 많이 여립니다..
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants