Conversation
| pageSize: params.pageSize.toString(), | ||
| }).toString(); | ||
| export async function getProducts(params = {}) { | ||
| const query = new URLSearchParams(params).toString(); | ||
|
|
||
| try { | ||
| const response = await fetch(`https://panda-market-api.vercel.app/products?${query}`); |
There was a problem hiding this comment.
base url 부분은 .env 파일로 관리해보시는 것을 추천드려요!
| }): Promise<Comment[]> { | ||
| const { productId, params: queryParams } = params; | ||
|
|
||
| export async function getProductComments({ productId, params }: { productId: number; params: {} }) { |
There was a problem hiding this comment.
params에도 어떤 타입이 들어올지 명시해주시는 것이 좋습니다.
| import styled from 'styled-components'; | ||
| import { ReactComponent as CloseIcon } from '../../assets/images/icons/ic_x.svg'; | ||
|
|
||
| interface DeleteButtonProps { | ||
| type DeleteButtonProps = { |
There was a problem hiding this comment.
interface에서 type으로 바꿔주신 이유가 있나요?
| onSortSelection: (value: string) => void; | ||
| } | ||
| type DropdownMenuProps = { | ||
| onSortSelection: (value: 'recent' | 'favorite') => void; |
There was a problem hiding this comment.
recent나 favorite 같은 값들은 상수로 관리해주시는 것을 추천드립니다. 그리고 상수를 이용해서 타입을 지정해줄 수도 있어요!
|
|
||
| const PaginationBar = ({ totalPageNum, activePageNum, onPageChange }: PaginationBarProps) => { | ||
| const maxVisiblePages = 5; | ||
| let startPage: number = 1; | ||
| let startPage = 1; |
There was a problem hiding this comment.
page 변수들도 상수로 관리할 수 있게 해주시면 어떨까요?
| @@ -7,6 +7,7 @@ import ItemProfileSection from './components/ItemProfileSection'; | |||
| import ItemCommentSection from './components/ItemCommentSection'; | |||
| import { ReactComponent as BackIcon } from '../../assets/images/icons/ic_back.svg'; | |||
| import LoadingSpinner from '../../components/UI/LoadingSpinner'; | |||
| import { Product } from '../../types/ProductTypes'; | |||
There was a problem hiding this comment.
alias path를 사용해보시는 것도 추천드립니다!
| @@ -18,23 +19,25 @@ const BackToMarketPageLink = styled(StyledLink)<{ $pill?: string }>` | |||
| `; | |||
|
|
|||
| function ItemPage() { | |||
| const [product, setProduct] = useState(null); | |||
| const [product, setProduct] = useState<Product | null>(null); | |||
There was a problem hiding this comment.
null 대신에 undefined를 사용해주시는 것도 추천드려요! undefined를 사용하면 null 값을 추가적으로 사용하지 않아도 되기 때문입니다.
There was a problem hiding this comment.
저는 개인적으로 스타일드 컴포넌트는 컴포넌트 하단부에 위치시키는 것을 선호합니다. 스타일드 컴포넌트가 상단에 있으면 스타일드 컴포넌트가 많아질수록 컴포넌트를 찾아가기가 어려워지더라구요!
|
|
||
| function AllItemsSection() { | ||
| const [orderBy, setOrderBy] = useState('recent'); | ||
| const [orderBy, setOrderBy] = useState<OrderBy>('recent'); |
There was a problem hiding this comment.
OrderBy를 상수로 선언하고, 타입으로 활용할 수 있습니다. keyof나 typeof 같은 키워드를 한번 검색해보시는 것을 추천드릴게요!
요구사항
로그인
회원가입
심화
스크린샷
멘토에게