[차경훈] sprint5 #151
[차경훈] sprint5 #151
Conversation
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
경훈님 이번 미션도 고생 많으셨습니다~!
요구 사항도 잘 구현해 주셨고 기본적으로 리엑트도 능숙하신 거 같습니다~!
컴포넌트화, 커스텀 훅 정의 등으로 재사용성, 가독성을 고려해 주시면 더욱 좋을 거 같습니다 :)
| const API_BASE_URL = "https://panda-market-api.vercel.app/"; // API base URL 업데이트 | ||
|
|
||
| // 화면 크기 감지 Hook | ||
| const useWindowSize = () => { |
There was a problem hiding this comment.
커스텀 훅을 잘 정의해 주셨군요! 👍
hooks 폴더에 따로 모아 관리하시면 더욱 좋을 거 같습니다 :)
| const [allItems, setAllItems] = useState([]); | ||
| const [totalAllItemsCount, setTotalAllItemsCount] = useState(0); | ||
| const [currentPage, setCurrentPage] = useState(1); | ||
| const [orderBy, setOrderBy] = useState("recent"); // 'recent' or 'favorite' |
There was a problem hiding this comment.
여유가 되신다면 정렬, 검색, 페이지 값들을 상태가 아니라 url 쿼리스트링으로 관리해 보시면 좋습니다~!
지금은 새로고침을 하거나 브라우저 뒤로가기 버튼 등을 누르면 모든 상태 값이 날라가게 됩니다 😢
There was a problem hiding this comment.
여유가 되신다면 정렬, 검색, 페이지 값들을 상태가 아니라 url 쿼리스트링으로 관리해 보시면 좋습니다~!
지금은 새로고침을 하거나 브라우저 뒤로가기 버튼 등을 누르면 모든 상태 값이 날라가게 됩니다 😢
네 알겠습니다!
| return windowSize; | ||
| }; | ||
|
|
||
| function ItemsPage() { |
There was a problem hiding this comment.
대체로 기능 자체는 잘 구현해 주셨는데, 하나의 컴포넌트에 너무 많은 로직이 담겨져 있습니다.
관련된 코드를 모아 컴포넌트로 추상화 해보시면 더욱 좋을 거 같습니다!
예를 들면,
bestItems와 관련된 로딩, 에러, 상품 관련 상태 값들과 jsx 부분을 모아 BestItems 컴포넌트로 만들 수 있겠죠!
또한 드랍다운이나 페이지네이션도 상태 값과 jsx를 모아 컴포넌트화 할 수 있을 거에요! :)
지금은 각각의 상태 값이 뒤섞여 있어, 필요한 로직을 찾기가 어려운 느낌이 있습니다..!
There was a problem hiding this comment.
넵, 컴포넌트화 하도록 하겠습니다!
| const mobileSortRef = useRef(null); | ||
|
|
||
| // 모바일 외부 클릭 시 드롭다운 닫기 | ||
| useEffect(() => { |
There was a problem hiding this comment.
해당 useEffect도 커스텀 훅으로 제작할 수 있겠네요 :)
| // params: { page, pageSize, orderBy, keyword } | ||
| // setLoading 상태는 각 useEffect에서 호출 전에 직접 관리 | ||
| setError(null); | ||
| let queryParams = `?orderBy=${params.orderBy || "recent"}`; |
There was a problem hiding this comment.
URLSearchParams을 사용하시면 조금 더 쉽게 구현하실 수 있습니다!
https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams#%EC%98%88%EC%A0%9C
| import { Link, useNavigate } from "react-router-dom"; | ||
| import "../auth.css"; | ||
|
|
||
| function SignupPage() { |
There was a problem hiding this comment.
부지런히 옮겨주셨군요..!!! 🤣
인풋이 하나 늘 때마다 상태, 유효성 검사 관리가 점점 복잡해지죠..!
react-hook-form, zod를 사용해 보시면 좋습니다 :)
| const handleSubmit = (e) => { | ||
| e.preventDefault(); | ||
| const isEmailValid = validateEmail(); | ||
| const isNicknameValid = validateNickname(); |
There was a problem hiding this comment.
아직 리팩토링 중이시겠지만.. 지금은 상태 값만 따라가도 충분할 거 같네요 :)
| )} | ||
| </div> | ||
| <div className="header-row2"> | ||
| <form onSubmit={handleSearchSubmit} className="search-form"> |
| )} | ||
| </div> | ||
| </div> | ||
| {loadingAll ? ( |
There was a problem hiding this comment.
현재 페이지 이동을 할 때마다 스크롤이 위로 튀는 현상이 있습니다. 아마 로딩 때 마다 달라지는 UI 때문일 거 같네요 🤔 좋은 UX를 위해 여유가 있으시다면 해결해 보셔도 좋을 거 같습니다 :)
| <Header /> | ||
| <Routes> | ||
| <Route path="/" element={<HomePage />} /> | ||
| <Route path="/signin" element={<SigninPage />} /> |
There was a problem hiding this comment.
로그인 페이지는 다른 레이아웃을 가질 수 있도록 고려해 주세요 :)
2 participants
기본
심화
주요 변경사항