[css] 유효성 검사 경고 문구

인턴을 할 때 회원가입 유효성 검사로 고생한 적이 있어서 이번에는 정말 잘 만들고 싶었다. 그러다 보니 사소한 것도 고민하게 되었고 결국 나는 이렇게 간단한 것도 벨로그에 적어 올리게 되었다.

🚨 갈등 상황: 경고 문구 유무에 따른 문항별 간격 차이 발생

경고 문구가 있을 경우, 경고 문구가 한 줄일 경우, 두 줄일 경우 모두 문항과 문항 사이의 간격이 다르다.

🩺 원인: 문항 제목, 입력란, 경고문구를 동일 레벨에서 배치

다음과 같이 작성해서 발생한 문제였다.

<RowArea>
   <QuestionRow>이메일</QuestionRow>
   <AnswerRow type="text" placeholder="이메일을 입력해주세요." onChange={onChangeEmail} />
   <AlertMessage>{emailMessage}</AlertMessage>
</RowArea>

💉 해결 방법: 입력란, 경고문구를 묶음

썩 마음에 들지는 않지만 다음과 같이 입력란과 경고 문구 태그를 묶음으로써 해결하였다. AnswerArea는 position:relative로 두었고, AlertMessage는 position:absolute로 지정하였다.

<RowArea>
   <QuestionRow>이메일</QuestionRow>
   <AnswerArea>
       <AnswerRow type="text" placeholder="이메일을 입력해주세요." onChange={onChangeEmail} />
       <AlertMessage>{emailMessage}</AlertMessage>
   </AnswerArea>
</RowArea>