Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[김희주] sprint 5 #43

Open
wants to merge 2 commits into
base: react-김희주
Choose a base branch
from

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
Collaborator

@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
Collaborator

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
Collaborator

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