Conversation
| <div className="mb-[24px]"> | ||
| <label | ||
| htmlFor={id} | ||
| className="font-[700] text-[18px] text-[#1F2937] block mb-[8px]" |
There was a problem hiding this comment.
There was a problem hiding this comment.
또한 기본적인 디자인 토큰은 tailwind config에 넣어서 쓰시는 것이 좋습니다~!
| }; | ||
| reader.readAsDataURL(file); | ||
| } | ||
| e.target.value = ""; |
There was a problem hiding this comment.
해당 부분은 이미지를 지우거나, 제출을 완료할 때 들어가야 됩니다~! 지금은 previewUrl만 남고 실제 제출할 데이터는 남지 않게 되네요 🤣
| if (e.key === "Enter") { | ||
| e.preventDefault(); | ||
| const trimmed = tagInput.trim(); | ||
| if (trimmed && !tags.includes(trimmed)) { |
There was a problem hiding this comment.
중복을 걸러낼 때 Set을 써보셔도 좋아요~! :)
| </label> | ||
| )} | ||
| <div className="relative"> | ||
| {type === "textarea" ? ( |
There was a problem hiding this comment.
type은 input이 가지고 있는 고유 html 속성이죠..! 커스텀하여 props로 쓰기에는 부적절합니다.
function A({ as }) {
const Component = as;
return <Component />
}
<A as='textarea' />이런 식으로 쓰실 수 있어요!
| ...rest | ||
| }) => { | ||
| return ( | ||
| <div className={`${hidden ? "hidden" : "mb-[24px]"}`}> |
There was a problem hiding this comment.
마진의 경우 부모가 조절하는 것이 좋겠습니다~! 간격이 꼭 있을 거란 보장이 없죠 :)
| )} | ||
| </div> | ||
| {error && !hidden && ( | ||
| <p className="text-red-500 text-sm mt-[4px] ml-[16px]">{error}</p> |
| const currentPage = Number(searchParams.get("page")) || 1; | ||
| const searchKeyword = searchParams.get("keyword") || ""; |
| }; | ||
|
|
||
| const setSearchKeyword = (newKeyword) => { | ||
| setSearchKeyword((prev) => ({ |
|
|
||
| const values = watch(); | ||
|
|
||
| const allFieldsFilled = |
There was a problem hiding this comment.
register에 validation을 넣어주셨으면, useForm formState에서 isValid를 사용하실 수 있습니다~
https://www.react-hook-form.com/api/useform/formstate/
|
|
||
| const AddItemPage = () => { | ||
| const [previewUrl, setPreviewUrl] = useState(""); | ||
| const [showWarning, setShowWarning] = useState(false); |
There was a problem hiding this comment.
이미지 관련 상태들은 ImageUploader에 들어가는 것이 좋겠죠~! :)
요구사항
기본
상품 등록
체크리스트 [심화]
상품 등록
주요 변경사항
배포 링크
https://panda-market-ten.vercel.app/
멘토에게