Conversation
| @@ -0,0 +1,13 @@ | |||
| import axios from "axios"; | |||
|
|
|||
| const API_URL = "https://panda-market-api.vercel.app"; | |||
There was a problem hiding this comment.
NEXT 환경변수를 이용해서 관리해보시면 좋을 것 같아요 !
보안상의 이점이 있답니다.
| content: string; | ||
| title: string; | ||
| nickname: string; | ||
| id?: number; |
There was a problem hiding this comment.
확인했을때 id 필드는 옵셔널인가요? id는 거의 Required 일꺼같아서요 ~ !
|
|
||
| const handleChange = (e: ChangeEvent<HTMLInputElement>) => { | ||
| const nextValue = | ||
| e.target.files && e.target.files.length > 0 ? e.target.files[0] : null; |
There was a problem hiding this comment.
이런 부분을 ts-patterns와 같은 라이브러리를 사용해서 가독성을 높여보시는건 어떨까요?
| useEffect(() => { | ||
| if (!value) return; | ||
|
|
||
| const nextPreview = URL.createObjectURL(value); | ||
| setPreview(nextPreview); | ||
|
|
||
| return () => { | ||
| setPreview(undefined); | ||
| URL.revokeObjectURL(nextPreview); | ||
| }; | ||
| }, [value]); |
There was a problem hiding this comment.
URL.createObjectURL을 이용해서 프리뷰 URL 생성 좋습니다 ~~
There was a problem hiding this comment.
그리고 언마운트시에 revoke도 좋아요 !
| .sronly { | ||
| position: absolute; | ||
| width: 1px; | ||
| height: 1px; | ||
| padding: 0; | ||
| margin: -1px; | ||
| overflow: hidden; | ||
| clip-path: inset(50%); | ||
| border: 0; | ||
| clip: rect(0 0 0 0); | ||
| } |
| @@ -1,12 +1,17 @@ | |||
| import Header from "@/components/Header"; | |||
| import type { AppProps } from "next/app"; | |||
| import "@/styles/global.css"; | |||
| import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; | |||
|
|
|||
| const queryClient = new QueryClient(); | |||
There was a problem hiding this comment.
queryClient를 state에 선언하는게 좋다고들하는데 혹시 그 이유를 들어보셨나요?
| onError: (error) => { | ||
| console.error("전송 실패:", error); | ||
| if (axios.isAxiosError(error)) { | ||
| console.error("axios error:", error.response?.data); | ||
| } | ||
| }, |
There was a problem hiding this comment.
onError시에 로그말고 유저에게 UI로써 뭔가 보여주면 더 좋습니다 !
| {mutation.status === "pending" ? ( | ||
| <div>로딩 중...</div> |
There was a problem hiding this comment.
mutation의 에러상태를 이용해서 유저에게도 보여주도록 하세요 ~
| if (isLoading) return <div>Loading...</div>; | ||
| if (error) return <div>Error loading comments</div>; | ||
| if (!articles) return <div>데이터 전송 안됨</div>; |
There was a problem hiding this comment.
여기는 에러 처리를 잘 해주셨네요 ! 3가지 상태를 잘 관리해주셨습니다 ~ 이렇게 해주세요
요구사항
기본
게시글 등록 페이지
게시글 상세 페이지
주요 변경사항
스크린샷
멘토에게