Skip to content

[조원정] Sprint 5#99

Merged
gyulrangdev merged 33 commits intocodeit-sprint-fullstack:react-조원정from
jwj2087:react-조원정
Aug 13, 2025

Hidden character warning

The head ref may contain hidden characters: "react-\uc870\uc6d0\uc815"
Merged

[조원정] Sprint 5#99
gyulrangdev merged 33 commits intocodeit-sprint-fullstack:react-조원정from
jwj2087:react-조원정

Conversation

@jwj2087
Copy link
Collaborator

@jwj2087 jwj2087 commented Aug 10, 2025

요구사항

기본

공통

  • 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값을 적절하게 설정합니다.

주요 변경사항

  • 리액트를 기반으로 상품검색 페이지 제작

멘토에게

  • 반응형은 구현하지 못했습니다..추후 완성해서 업데이트 예정입니다..
  • react-vite로 구현하였습니다. 실행은 npm run dev를 통해 부탁드립니다!

Copy link
Collaborator

@gyulrangdev gyulrangdev left a comment

Choose a reason for hiding this comment

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

실행 시 오류가 발생하여 해당 부분 최대한 제거한 뒤 프로젝트를 확인하고 싶었으나 그러기 위한 수정 포인트가 많아서 결국 확인하지 못했습니다😭 다음에는 화면을 확인할 수 있으면 좋겠어요!

image

고생 많으셨어요~

@@ -0,0 +1,20 @@
import ic_heart from "../../assets/icon/ic_heart.svg";
Copy link
Collaborator

Choose a reason for hiding this comment

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

assets에 font밖에 없어서 에러가 발생하고 있어요 🥲

Copy link
Collaborator

Choose a reason for hiding this comment

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

react 브랜치에서는 react 코드만 넣는게 좋을 것 같아요.
그래야 diff에 html 프로젝트가 안 잡혀요.

(+) react-조원정 (base) <- react-조원정-sprint5 이렇게 되어야 브랜치 컨벤션에 맞아요.

},
"dependencies": {
"react": "^19.1.1",
"react-dom": "^19.1.1"
Copy link
Collaborator

Choose a reason for hiding this comment

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

axios 를 사용하고 계신 것으로 보이는데, package.json에 명시해주지 않아서 npm install을 해도 오류가 발생해요.

@gyulrangdev gyulrangdev merged commit 110b9a1 into codeit-sprint-fullstack:react-조원정 Aug 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants