[이태식] sprint6

[leeetaesik]

요구사항

기본

• 상품 등록 페이지 주소는 “/additem” 입니다.
• 페이지 주소가 “/additem” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
• 상품 이미지는 최대 한개 업로드가 가능합니다.
• 각 input의 placeholder 값을 정확히 입력해주세요.
• 이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.

심화

• 이미지 안의 X 버튼을 누르면 이미지가 삭제됩니다.
• 추가된 태그 안의 X 버튼을 누르면 해당 태그는 삭제됩니다.

주요 변경사항

스크린샷

https://leetaesik-sprint.netlify.app/additem

멘토에게

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[GANGYIKIM]

태식님 6번째 미션 작업 고생하셨습니다!
태그 기능까지 추가되면 완벽해질 것 같아요.
추후 시간이 되시면 구현해보세요.
다음 미션도 화이팅입니다!

[GANGYIKIM]

💊 제안
공통 컴포넌트는 다양하게 사용될 수 있어야 합니다!
Input의 type 속성도 받을 수 있으면 좋을 것 같아요~

Suggested change

	const Input = ({ placeholder, className, value, onChange }) => {
	const Input = ({ type, placeholder, className, value, onChange }) => {

[GANGYIKIM]

💊 제안
className을 받으시고 빈 문자열로 초기화해주셔야 className에 undefined가 들어가지 않습니다~

Suggested change

	const Input = ({ placeholder, className, value, onChange }) => {
	const Input = ({ placeholder, className = "", value, onChange }) => {

[GANGYIKIM]

❗️ 수정요청
button type 속성의 기본값은 submit입니다~ 아래의 경우는 button이 더 적절할 것 같아요~

Suggested change

	<button onClick={() => onDelete(children)} className="cursor-pointer">
	<button type="button" onClick={() => onDelete(children)} className="cursor-pointer">

[GANGYIKIM]

❗️ 수정요청

Suggested change

console.log(location);

[GANGYIKIM]

💊 제안
아래처럼 작성하시는 것이 더 가독성에 좋을 것 같아요

Suggested change

	useEffect(() => {
	if (name && description && price && tag) setIsDisable(false);
	else setIsDisable(true);
	}, [name, description, price, tag]);
	useEffect(() => {
	const isValidForm = name && description && price && tag;
	setIsDisable(!isValidForm);
	}, [name, description, price, tag]);

[GANGYIKIM]

❗️ 수정요청
등록 버튼 활성화 조건중 tag는 문자열이 아니라 문자열의 배열입니다~ 태그 추가 기능을 구현하시면서 이 부분도 같이 수정하시면 좋겠습니다~

[GANGYIKIM]

💊 제안
label로 작성하셔서 input과 연결해주시는 것을 추천드려요!

Suggested change

	<h2 className="text-2lg">상품명</h2>
	<Input
	value={name}
	placeholder="상품명을 입력해주세요"
	onChange={(e) => setName(e.target.value)}
	/>
	<label htmlFor="name" className="text-2lg">상품명</label>
	<Input
	id="name"
	value={name}
	placeholder="상품명을 입력해주세요"
	onChange={(e) => setName(e.target.value)}
	/>

[GANGYIKIM]

💊 제안
이미지 파일만 받을 수 있도록 구현하시면 더 좋을 것 같아요~
참고로 accept 속성을 이용하시고, handleUploadImg 함수 내부에서 추가적으로 확장자를 한번 더 검사하셔야합니다.
accpet 속성은 제안일 뿐 제한이 아니기 때문에 유저가 accept의 명시된 확장자 이외의 파일도 올릴 수 있습니다~

[GANGYIKIM]

❗️ 수정요청
태그가 추가되는 로직을 추가해주세요~

[GANGYIKIM]

💊 제안
지금과 같은 금액 input 인풋의 경우 number 타입이 더 적절할 것 같아요!