Conversation
There was a problem hiding this comment.
- 수정을 할 때 캐시가 남아있어서 바로 바로 상품의 value 값을 못 받아오는 것 같습니다. 빈 공간으로 보이거나 다른 상품의 input value 값이 보이는데 어떻게 해야 할까용??
- 수정이 필요한 타이밍을 감지해서 refetch 해줘야 하는 타이밍을 지정해주시면 좋을 거 같아요!
- 첫 렌더링 시 AllProduct 컴포넌트에 있는 if (itemList.length === 0) return 상품이 없습니다.; 이 구문이 계속 보입니다 ㅠ
- itemList의 초기값이 어떻게 불러와지는지 확인해보세요! 빈 배열이 아닌데 처음에만 잠깐 빈 배열로 넘어오는거라면 임의적으로 시간 텀을 줘서 itemList가 제대로 부여된 뒤에 보여질 수 있도록 조작해주시면 됩니다 👍
- 이미지를 제외하고 input 에 모든 값을 입력하면 이 미션 내용인데 post를 보낼 시에 image도 required 값으로 되 있어서 오류가 나는데 이럴 때는 기본 값으로 어떻게 줘야 할까요??
- 필수값이라면 image로 넘겨줘야 하는 타입에 맞게 임의로 빈 스트링 혹은 빈 배열과 같은 초기값을 넘겨줘야해요!
정현님 미션까지 진행하시다니.. 완전 부지런하셔요 진짜!
마지막 파트까지 힘내서 달려봅시다!
| const INITIAL_VALUES: FormInitialValues = { | ||
| imgFile: null, | ||
| title: "", | ||
| images: "", |
There was a problem hiding this comment.
const INITIAL_VALUES: FormInitialValues = {
images: [], // 이 부분을 [] 빈 배열로 변경해보세요
name: "",
description: "",
price: "",
tags: [],
};
formValues?.images[0] 처럼 대부분의 Images는 배열로 값을 넣어주고 있어서 초기값 자체를 빈 배열로 해주면 좋을 거 같아요!
| const submitActive: boolean = | ||
| title.trim() !== "" && | ||
| name.trim() !== "" && | ||
| description.trim() !== "" && | ||
| price !== "" && |
There was a problem hiding this comment.
Number(price) > 0 이라는 조건을 추가해주면 가격이 - 일 경우를 방지할 수 있을 거 같아요 👍
| } | ||
|
|
||
| export default function ErrorComponent({ message, isOpen }: ErrorType) { | ||
| const [fade, setFade] = useState({ fadeAnimation: "fadeIn" }); |
There was a problem hiding this comment.
이게 fadeAnimation 하나만 사용되는거라면 state 값을 단순 string으로 가져가는게 좋을거 같아보여요!
| return () => clearTimeout(timer); | ||
| }, [isOpen, message]); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
단순히 닫힐 때 fadeOut을 원하는 거라면 이 useEffect는 불필요할 거 같고 위에 쓰인 useEffect로 충분해보입니다!
| export default function ErrorComponent({ message, isOpen }: ErrorType) { | ||
| const [fade, setFade] = useState({ fadeAnimation: "fadeIn" }); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
여기에 아래 코드를 추가해주면 isOpen이 빠르게 변화했을 때 예기치 못한 동작을 발생시킬 수 있는 걸 방지할 수 있을 것 같아요!
예상치 못하게 에니메이션이 겹치는 타이밍이 생길 수 있을 것 같아서요 👍
if (!isOpen) {
setFade("fadeOut");
return;
}
| onSuccess: (res) => { | ||
| setIsLoggedIn(true); | ||
| localStorage.setItem("userId", res.user.id); | ||
| localStorage.setItem("token", res.accessToken); |
There was a problem hiding this comment.
이제 이 토큰을 보안상 httponly cookie에 저장할 수 있도록 해보세요! 혹은 로그인 유지 기능이 필요없다면 적어도 sessionStorage를 이용해보시는 것도 좋을 거 같구요!
| const params = useParams(); | ||
| const navigate = useNavigate(); | ||
| const { data, isPending: getDataIsPending } = useQuery({ | ||
| queryKey: ["products", params.productid], |
There was a problem hiding this comment.
params.productid가 반복적으로 사용되는 것 같아요!
const productId = parseInt(params.productId, 10); 로 변수로 저장하고 재사용하시는 게 좋을거 같아용
| {...(register ? register(name, rules) : {})} | ||
| /> | ||
| <div className={styles.visibleIcon} onClick={togglePasswordVisibility}> | ||
| {isPassword && hideBtn ? ( |
There was a problem hiding this comment.
isPassword && hideBtn && <img /> 로 사용하시는 것이 더 좋아보여요 :)
요구사항
기본
중고마켓
상품 상세
상품 등록
주요 변경사항
스크린샷
멘토에게
if (itemList.length === 0) return <div>상품이 없습니다.</div>;이 구문이 계속 보입니다 ㅠ이미지를 제외하고 input 에 모든 값을 입력하면 이 미션 내용인데post를 보낼 시에 image도 required 값으로 되 있어서 오류가 나는데 이럴 때는 기본 값으로 어떻게 줘야 할까요??