[김희성] Sprint 6

[huiseong29]

요구사항

기본

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

심화

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

주요 변경사항

• 요구사항에 맞게 구성

스크린샷

PC 버전 등록

태블릿 버전 등록

모바일 버전 등록

버튼 활성화 조건

멘토에게

• 코드 로직이나 더 나은, 좋은 방법이 있는지 봐주시면 좋겠습니다~

[dongqui]

희성님 이번 미션도 고생 많으셨습니다 💯

요구 사항도 꼼꼼하게 잘 챙겨주셨고, 구조도 깔끔해서 보기 편안했습니다.
빠르게 성장하시는 게 느껴지네요!!

[dongqui]

꼼꼼하게 잘 챙겨주셨군요! 👍

[dongqui]

기본 html 속성들이라면, 생략하시는 것도 괜찮습니다 :)

export default function InputBox({
  title,
  isInput = true,
  height,
  ...rest
}) {
  return (
    <div className="input-wrapper">
      <label>{title}</label>
      {isInput ? (
        <input {...rest} />
      ) : (
        <textarea {...rest} />
      )}
    </div>
  );
}

[dongqui]

조금 더 명시적으로 나타내주는 방법도 있습니다 :)
jsx는 변수도 태그로 인식합니다!

export default function InputBox({
  title,
  as = "input", // 'input' or 'textarea'
  height,
  ...rest
}) {
  const Component = as;

  return (
    <div className="input-wrapper">
      <label>{title}</label>
      <Component {...rest} />
    </div>
  );
}

[dongqui]

중복을 다루실 때 Set을 사용해 보시면 좋아요~!

[dongqui]

중요하진 않지만.. 이렇게 줄이는 방법도 있습니다 🤣

  switch (name) {
    case "price":
      const rawValue = value.replace(/,/g, "").replace(/\D/g, ""); // 문자 막음 -> 숫자만 가능하게
      const formatted = rawValue.replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 3자리마다 쉼표 추가
      setFormValue({ ...formValue, price: formatted });
      break;
    default:
      setFormValue((prev) => ({ ...prev, [name]: value}));

[dongqui]

깔끔하네요 👍

[dongqui]

에러나던데, 해당 파일이 커밋에 안 들어갔나봐요~!