Conversation
…ithub-actions [Fix] delete merged branch github action
| if (!articleId) { | ||
| throw new Error("Invalid article ID"); | ||
| } |
There was a problem hiding this comment.
articleId 파라미터가 옵셔널이 아니기때문에 이 코드가 실행 될 일이 없을 것 같습니다.
| if (!response.ok) { | ||
| throw new Error(`HTTP error: ${response.status}`); | ||
| } | ||
| const body = await response.json(); |
There was a problem hiding this comment.
body의 타입이 안나오지 않나요? 해당 함수의 리턴값을 지정해주시면 좋을 것 같아요 !
|
|
||
| useEffect(() => { | ||
| const fetchArticles = async () => { | ||
| let url = `https://panda-market-api.vercel.app/articles?orderBy=${orderBy}`; |
There was a problem hiding this comment.
fetch를 좀 커스텀해서 base url을 미리 설정하는게 어떨까요? 이 라인을 넣는 코드가 계속 반복되네요.
| const [comments, setComments] = useState<ProductComment[]>([]); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const [error, setError] = useState<string | null>(null); |
There was a problem hiding this comment.
3가지 상태와 타입을 잘 지정해주셨습니다 !!
| const [page, setPage] = useState(1); | ||
| const [pageSize, setPageSize] = useState<number | null>(null); |
There was a problem hiding this comment.
page, pageSize, totalPageNum 은 왠지 항상 같이 다니는 상태같아보이는데 객체로 상태를 관리하시는게 어떨까요?
| { key: "recent", label: "최신순" }, | ||
| { key: "favorite", label: "인기순" }, |
There was a problem hiding this comment.
key와 label로 관리하는것은 좋은 방법입니다. 저도 프로그래밍적으로 쓰이는 데이터랑 화면에 보여주는 데이터를 달리하니까 꽤 유연하게 개발했던 것 같습니다.
There was a problem hiding this comment.
커스텀 훅을 직접 만드신거죠? 잘 만드셨어요 ! https://usehooks-ts.com 이 라이브러리도 한번 사용해보세요 !
|
|
||
| useEffect(() => { | ||
| // router.query를 가져오기 전에 router가 준비되었는지 확인 | ||
| if (!router.isReady) return; |
There was a problem hiding this comment.
이 코드가 없으면 무슨일이 생기는지 알려주실 수 있나요 ?
| import backIcon from '../../../assets/images/ic_back.png'; | ||
|
|
||
| export default function CommentList({ commentList }) { | ||
| const comment = commentList.length ? ( |
There was a problem hiding this comment.
length > 0 이라고 적어주시는게 더 명확한 표현 같습니다 !
| setCurrentPage(page); | ||
| }; | ||
|
|
||
| const sortText = options.order === 'recent' ? '최신순' : '좋아요순'; |
There was a problem hiding this comment.
다른 파일에서 recent, 최신순을 객체로 관리하셨는데, 그 방식대로 이것도 관리를 하시면 더 좋을 것 같은데요 ?
요구사항
기본
상품 등록 페이지
상품 등록 페이지 주소는 “/addboard” 입니다.
게시판 이미지는 최대 한개 업로드가 가능합니다.
각 input의 placeholder 값을 정확히 입력해주세요.
이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
회원가입, 로그인 api를 사용하여 받은accessToken을 사용하여 게시물 등록을 합니다.
‘등록’ 버튼을 누르면 게시물 상세 페이지로 이동합니다.
상품 상세 페이지
상품 상세 페이지 주소는 “/board/{id}” 입니다.
댓글 input 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
활성화된 ‘등록' 버튼을 누르면 댓글이 등록됩니다