[정남영] 스프린트미션5#54
Merged
wseungjin merged 11 commits intocodeit-sprint-fullstack:react-정남영from Jun 2, 2025
Hidden character warning
The head ref may contain hidden characters: "react-\uc815\ub0a8\uc601"
Merged
Conversation
wseungjin
approved these changes
Jun 2, 2025
Collaborator
wseungjin
left a comment
wseungjin
left a comment
There was a problem hiding this comment.
이번주도 수고 많으셨습니다~
멘토링 시간엔 같이 코드를 보면서 이야기해보죠
| const [bestItemCount, setBestItemCount] = useState(4); | ||
| const [sort, setSort] = useState("recent"); | ||
| const [salesItemCount, setSalesItemCount] = useState(10); | ||
| const [startPage, setStartPage] = useState(1); |
Collaborator
There was a problem hiding this comment.
이게 왜 있는걸까요? currentPage만 있으면 해결 가능해보입니다.
| import CustomButton from "../component/customSelect/customSelect.jsx"; | ||
|
|
||
| const PandaMaket = () => { | ||
| const [bestItemCount, setBestItemCount] = useState(4); |
Collaborator
There was a problem hiding this comment.
이 상태도 필요 없어보입니다.
screenSize를 계속 observe하는 식으로 상태를 만들면 어떻까요?
| const PandaMaket = () => { | ||
| const [bestItemCount, setBestItemCount] = useState(4); | ||
| const [sort, setSort] = useState("recent"); | ||
| const [salesItemCount, setSalesItemCount] = useState(10); |
Collaborator
There was a problem hiding this comment.
이 상태도 필요 없어보입니다. (2)
screenSize를 계속 observe하는 식으로 상태를 만들면 어떻까요?
| const [startPage, setStartPage] = useState(1); | ||
| const [currentPage, setCurrentPage] = useState(1); | ||
|
|
||
| const [getBestItem, setGetBestItem] = useState([]); |
Collaborator
There was a problem hiding this comment.
getBestItem 없이 bestItem,setBestItem하면 될거 같아요
|
|
||
| const handleSortClick = (option) => { | ||
| onChange({ | ||
| target: { value: option === "최신순" ? "recent" : "favorite" }, |
Collaborator
There was a problem hiding this comment.
이런거 enum타입이던 const 타입이던 따로 관리해주는건 어떨까요
SORT.RECENT = 'recent' 이럭식으로요
| const fetchSalesItems = async () => { | ||
| try { | ||
| const res = await fetch( | ||
| `https://panda-market-api.vercel.app/products?page=${currentPage}&pageSize=${salesItemCount}&orderBy=${sort}` |
Collaborator
There was a problem hiding this comment.
fetch랑 데이터 로직으로 모아서 custom 훅으로 만들어 보는건 어떨까요?
| ))} | ||
| </div> | ||
| </div> | ||
| </div> |
Collaborator
There was a problem hiding this comment.
이 컴포넌트도 너무 큰거 같아요 쪼갤 여지가 많아 보입니다.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
요구사항
기본
공통
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값을 적절하게 설정합니다.
주요 변경사항
스크린샷
멘토에게
[검색 시에는 상품 리스트가 올바르게 업데이트되지만, 이후 페이지네이션(예: 다음 페이지 버튼)을 누르면 검색 결과가 아닌 기본 상품 리스트가 다시 렌더링되는 문제가 발생함.]