InputComponent.jsx

const InputComponent = ({ id, type, placeholder, isRequired, name }) => {
  return (
        <div className="InputComponent">
          <label for={id}>{name}</label> 
          {isRequired && <span className="required">필수</span>{" "}}
          <br />
          <input
            id={id}
            type={type}
            placeholder={placeholder}
            required={isRequired}
            className="app-input"
          />
        </div>
  );
};

// props로 받은 isRequired에 따라서 달라지는 부분이 input 속성의 required와 필수 span 태그 부분밖에 없는 것으로 보이네요.
// span 태그는 && 연산자를 사용해서 isReuiqred가 true 일때만 보여주면 될 것 같아요.
// input 태그의 required 속성도 isReuiqred를 넘겨주면 될 것 같아요.
// 제가 실행해보지는 않고 간단하게 수정해보았으니 직접 수정해보시고 잘 돌아가는지 확인해보시면 될 것 같아요.
// 질문 있으시면 언제든지 편하게 주세요!!
export default InputComponent;