[#16] Option 공통 컴포넌트 개발 (배경 컬러/이미지 선택)

[gummmmmy0v0]

📝 작업 내용

Option 공통 컴포넌트 개발

• 토글 버튼 컬러/이미지 선택에 따라 컬러 옵션/이미지 옵션 변경
• 선택한 배경 체크 표시
• 생성하기 버튼 (활성화/비활성화) -> 클릭 시 /post/{id} 이동

📷 스크린샷 (선택)

🧐 해결해야 하는 문제 (선택)

• 일단 테스트 이미지와 랜덤 아이디로 시도해보았고 테스트로는 잘 나오고 있지만... 실제로는 어떨지 잘 모르겠습니다...
• 이름 앞 뒤에 공백이 있을 시에도 생성하기 버튼이 비활성화 되도록 하였는데 이러면 "맛있는 고구마"와 같은 이름 입력 중에도 버튼이 활성화 > 비활성화로 왔다갔다 하는 문제가 있습니다. 이름이 완전 공백일 때만 비활성화 되도록 하는 것이 나을까요?

👀 새로 알게 된 내용 (선택)

💬 리뷰어에게 남길 말 (선택)

• 중간에 실수로 페이지를 삭제한 상태로 커밋한게 있어서 중복된 커밋 있습니다...😭
• InputField 밑에 에러메시지가 뜰 때 아래 요소들이 밑으로 내려가는 건 어떻게 해결하면 좋을까요?

[gummmmmy0v0]

이거 보니까... #22랑 섞여버렸네요...

[nidor022]

👍

[cskime]

이름 앞 뒤에 공백이 있을 시에도 생성하기 버튼이 비활성화 되도록 하였는데 이러면 "맛있는 고구마"와 같은 이름 입력 중에도 버튼이 활성화 > 비활성화로 왔다갔다 하는 문제가 있습니다. 이름이 완전 공백일 때만 비활성화 되도록 하는 것이 나을까요?

• 네. 일단 input에 text가 입력된 상태라면 활성화 하는게 맞을 것 같아요.
• 아래 조건에 해당할 때만 비활성화하면 되지 않을까요?
  • 아무 text도 입력하지 않았을 때
  • 입력된 text의 앞/뒤 공백을 제거한 결과가 빈 문자열일 때

InputField 밑에 에러메시지가 뜰 때 아래 요소들이 밑으로 내려가는 건 어떻게 해결하면 좋을까요?

• 어떤 결과를 의도하는지에 따라 달라질 것 같습니다.
• TextField 크기가 처음부터 error message가 표시될 때 높이를 갖게 만들거나, TextField 아래 요소들을 처음부터 error message가 표시되었을 때 위치에 배치하면 밀려 내려가는 현상을 없앨 수 있을거에요.
  • 첫 번째 방법은 TextField component 자체를 조금 수정하는게 좋을 것 같고,
  • 두 번째 방법은 TextField 아래 요소에 margin을 주면 될 것 같네요.
• 그런데, 저는 밀려 내려가는게 문제라고 생각되진 않아요. 인화님 보시기에 더 자연스러운 방법으로 만드시면 될 것 같습니다.

[cskime]

• [#22] Post Page 구현, 공통 컴포넌트 적용 #23 이 PR에 추가된 commit들을 먼저 리뷰하고 왔는데, 이 PR에도 똑같은 commit들이 있네요.
• 혹시 두 PR에 추가된 내용이 완전히 동일하면, 이 PR은 close하고 [#22] Post Page 구현, 공통 컴포넌트 적용 #23 PR에서 한 번에 수정하는게 낫겠어요.