Conversation
| const data = await getArticles({ | ||
| orderBy: sortOrder, | ||
| page: currentPage, | ||
| page: page, |
There was a problem hiding this comment.
속성명과 값이 같은 경우 아래처럼 사용할 수 있습니다.
{
orderBy: sortOrder,
page,
pageSize: 10,
keyword
}
| if (page === 1) { | ||
| setArticles(data.list); | ||
| } else { | ||
| if (currentPage === page) { | ||
| const updatedArticles = [...articles, ...data.list]; | ||
| setArticles(updatedArticles); | ||
| } | ||
| const updatedArticles = [...articles, ...data.list]; | ||
| setArticles(updatedArticles); |
There was a problem hiding this comment.
이런 분기는 삼항연산자로도 표현 가능하긴 합니다. 취향에 맞게 사용하시면 될 것 같아요.
| const getPageSize = () => { | ||
| if (typeof window === "undefined") return 10; | ||
| const width = window.innerWidth; | ||
| if (width < 768) { | ||
| return 4; | ||
| } else if (width < 1280) { | ||
| return 6; | ||
| } else { | ||
| return 10; | ||
| } | ||
| }; |
There was a problem hiding this comment.
이 함수 다른 컴포넌트에서도 사용했던 것 같은데, 유틸 함수로 만들어서 꺼내쓰게 바꿔보시면 어떨까요?
| }; | ||
|
|
||
| function AllItems() { | ||
| const [orderBy, setOrderBy] = useState<string>("recent"); |
There was a problem hiding this comment.
useState의 타입에 'recent' | 'like' 이런식으로 타입을 특정 값으로 강제하는 방법도 추천드립니다.
| } | ||
| }; | ||
|
|
||
| const debounce = (func: (...args: any[]) => void, delay: number) => { |
There was a problem hiding this comment.
debounce 같은 함수도 자주 사용되기 때문에 유틸로 관리해주셔도 좋을 것 같습니다.
components/BestItemCard.tsx
Outdated
| function BestItemCard({ item }: AllItemCardProps) { | ||
| return ( | ||
| <div className={styles.item_card}> | ||
| <img |
There was a problem hiding this comment.
여기는 next/image를 사용하지 않으신 이유가 있을까요?
There was a problem hiding this comment.
const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "**",
},
],
},
};
|
|
||
| const handleSubmit = (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
| console.log("Form submitted:", values); |
There was a problem hiding this comment.
console.log는 제거해주시면 좋을 것 같습니다.
There was a problem hiding this comment.
컴포넌트 파일명은 파스칼 케이스를 주로 사용하니까 여기도 AddBoard가 적절할 것 같아요.
| export interface GetProductsParams { | ||
| page?: number; | ||
| pageSize?: number; | ||
| keyword?: string | undefined; |
There was a problem hiding this comment.
?를 사용했기때문에 undefined는 빼주셔도 됩니다.
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게