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

[임귀태] Sprint5 #163

Merged

Conversation

KorpoQ
Copy link
Collaborator

@KorpoQ KorpoQ commented Jun 21, 2024

체크리스트 [기본]

중고마켓

  • 중고마켓 페이지 주소는 “/items” 입니다.
  • 페이지 주소가 “/items” 일때 상단 네비게이션 바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
  • 상단 네비게이션 바는 이전 미션에서 구현한 랜딩 페이지와 동일한 스타일로 만들어 주세요.
  • 상품 데이터 정보는 https://panda-market-api.vercel.app/docs/#/ 에 명세된 GET 메소드 “/products” 를 사용해주세요.
  • '상품 등록하기' 버튼을 누르면 “/additem” 로 이동합니다. ( 빈 페이지 )
  • 전체 상품에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.

중고마켓 반응형

베스트 상품

  • Desktop : 4개 보이기
  • Tablet : 2개 보이기
  • Mobile : 1개 보이기

전체 상품

  • Desktop : 12개 보이기
  • Tablet : 6개 보이기
  • Mobile : 4개 보이기

체크리스트 [심화]

  • 페이지 네이션 기능을 구현합니다.

@KorpoQ KorpoQ changed the title React 임귀태 sprint5 [임귀태] Sprint5 Jun 21, 2024
@KorpoQ KorpoQ added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels Jun 21, 2024
@KorpoQ KorpoQ requested a review from jyh0521 June 23, 2024 22:02
Copy link
Collaborator

@jyh0521 jyh0521 left a comment

Choose a reason for hiding this comment

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

과제하느라 고생하셨습니다! 기존의 과제에서 리액트로 잘 변환해주셨네요 👍

Copy link
Collaborator

Choose a reason for hiding this comment

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

라우터 적용해주신거 좋네요! 사용하시지 않는 주석은 지워주셔도 좋습니다.


try {
const response = await fetch(
`https://panda-market-api.vercel.app/products?${query}`
Copy link
Collaborator

Choose a reason for hiding this comment

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

base url 부분은 보안상 외부로 노출하지 않는 것이 좋기 때문에 .env 파일을 만들어서 관리해주시고 gitignore에 .env를 올려주셔서 깃에 올라오지 않게 해주시는 것도 좋습니다.

src/pages/AddItemPage/AddItemPage.jsx Show resolved Hide resolved
src/pages/HomePage/HomePage.scss Show resolved Hide resolved
src/pages/HomePage/HomePage.scss Show resolved Hide resolved
src/pages/ItemsPage/ItemsPage.scss Show resolved Hide resolved
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import ItemCard from "./ItemCard";
import { getProducts as getAllItems } from "../../../js/itemApi";
Copy link
Collaborator

Choose a reason for hiding this comment

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

alias path라는 것을 적용해보시면 경로를 좀 더 깔끔하게 관리할 수 있습니다.


// 화면 크기 변경 시, pageSize 재계산
window.addEventListener("resize", handleResize);
fetchData({ page, pageSize, orderBy: "recent" });
Copy link
Collaborator

Choose a reason for hiding this comment

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

recent 같이 변하지 않는 값은 상수로 관리해주시면 좋습니다!

src/pages/ItemsPage/components/ItemCard.jsx Show resolved Hide resolved
Copy link
Collaborator

Choose a reason for hiding this comment

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

컴포넌트는 내부에서 export와 return 해주셔야 합니다. 여기에는 둘 다 빠져있는 것 같아요!

@jyh0521 jyh0521 merged commit e2af230 into codeit-bootcamp-frontend:React-임귀태 Jun 24, 2024
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.

4 participants