[신혜윤] 풀스택-FE-mission5

[hyeyoonS]

요구사항

기본 요구사항

공통

• Github에 위클리 미션 PR을 만들어 주세요.
• React를 사용해 진행합니다.

중고마켓 페이지

• PC, Tablet, Mobile 디자인에 해당하는 중고마켓 페이지를 만들어 주세요.
• 중고마켓 페이지 url path는 별도로 설정하지 않고, ‘/’에 보이도록 합니다.
• 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 “/products” 를 사용해주세요.
  • 페이지 번호, 페이지 당 상품 수, 정렬 기준, 검색 키워드와 같은 쿼리 파라미터는 사용하지 않습니다.
• 중고 마켓의 카드 컴포넌트 반응형 기준은 다음과 같습니다.
  • 베스트 상품
    • Desktop : 4열
    • Tablet : 2열
    • Mobile : 1열
  • 전체 상품
    • Desktop : 12열
    • Tablet : 6열
    • Mobile : 4열
• 상단 네비게이션 바, 푸터는 랜딩 페이지와 동일한 스타일과 규칙으로 만들어주세요. (스프린트 미션 1 ~ 3 요구사항 참고)
• 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 “/products” 를 활용해주세요.
  • 상품 목록 페이지네이션 기능을 구현합니다.
  • 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 구현하세요.
  • 상품 목록 검색 기능을 구현합니다.
• 베스트 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 “/products”의 정렬 기준 favorite을 사용해주세요.

심화 요구사항

공통

• 커스텀 hook을 만들어 필요한 곳에 활용해 보세요.

중고마켓 페이지

• LocalStorage를 활용해 오늘 본 상품을 구현합니다.

QA종합 의견

난이도

• 라이브러리를 사용하지 않고 순수 리액트로 구현했는데, 학습에 적절한 난이도라고 생각합니다!

• 페이지네이션 전용, 검색 전용 api 없이 단일 api (get /products) 로 구현하는 것은 어렵지 않았지만..

  • 윈도우 사이즈를 추적해서 반응형에 따라 페이지네이션 조건문 작성
  • 검색 기능을 filter로 구현하였기에 검색 이벤트 발생시 페이지네이션 초기화

  등의 추가 작업이 필요했습니다.! 단일api여서 프론트 코드가 조금 복잡해졌는데… 요구사항 외 자연스러운 플로우를 위한 +@ 의 문제라서 괜찮을 것 같습니다….!

---

분량

• Nav와 Footer는 이전에 사용했던 코드 재사용이 가능하고, 베스트 상품과 판매중인 상품도 재사용 가능한 컴포넌트로 제작하면 되어서 분량도 부담스럽지 않았어요!

---

의견

• 판매중인 상품에서 좋아요순 정렬은 쿼리 파라미터를 별도로 사용하지 않고 불러온 상품 데이터를 프론트에서 favoriteCount 순으로 정렬(sort메소드 사용)하는 방식으로 구현했습니다.
  그런데 베스트 상품 데이터는 [https://panda-market-api.vercel.app/docs/에](https://panda-market-api.vercel.app/docs/%EC%97%90) 명세된 GET 메소드 “/products”의 정렬 기준 favorite을 사용해야 하는데요.
  ⇒ 판매중인 상품에서 좋아요순 정렬 = 베스트 상품은 **보여주는 데이터의 숫자만 다를 뿐 결국 같은 데이터**를 보여주게 됩니다 ~!!
  구현에는 문제가 없지만 베스트 상품과 좋아요순 정렬을 했을 때 보여지는 상품이 겹쳐서.. 기획의 의도가 조금 갸웃합니다.

  ⇒ 생각해본 개선 방안,,,,

  1. 좋아요 순과 베스트 상품의 정렬이 겹치지 않도록 하는 새로운 데이터필드?가 있으면 어떨까요?
  2. 베스트 상품을 기존대로 “/products”의 정렬 기준 favorite으로 정렬하되, 심화 요구사항으로 favorite으로 정렬된 순서 n개 중 무작위로 베스트 상품에 노출되도록 하는 건 어떨까요?

• 풀스택 미션5에서는 상품을 클릭해도 상세페이지로 이동하지 않는 것으로 이해했습니다.(상세페이지로 이동하는 내용은 미션9 요구사항에 있습니다!)
  그런데 심화요구사항에LocalStorage를 활용해 오늘 본 상품을 구현합니다.라고 되어있는데, 오늘 본 상품을 구현하려면 상품 클릭 후 상세페이지로 이동해야 이를 바탕으로 구현 가능한 기능이 가능합니다!
  심화요구사항 내용이 수정되어야 할 것 같아요 우선 제외하고 구현하였습니다!

문의사항 (궁금궁금)

피그마 디자인 문의사항
LocalStorage 활용 심화 문의사항 관련

미션5 관련 문의사항은 슬랙으로 공유드렸습니다!