[Mission003] 자바스크립트로 Form 과 Modal 에 대한 UI 만들기

[YongHoonJJo]

8

미션 진행 내역

• [x] 이름, 전화번호, 이메일, 비밀번호, 자기소개를 입력 받을 수 있는 폼 만들기 (1. 항목)
• [ ] 전화번호 혹은 이메일이 입력되면, 체크박스로 개인정보보호방침에 동의합니다 라는 항목이 나타나게 하기
• [ ] 버튼을 클릭하면 폼이 제출되도록 하기. (HTML native form submit 을 의미함)
• [ ] 항목이 모두 입력되면 다음 버튼이 나타나게 하기.
  • [x] 이를 클릭하면 가족 구성원을 입력할 수 있도록 하기
• [x] 추가 를 누르면 이름과 관계를 입력할 수 있는 입력 폼을 만들고, 입력을 받도록 하기
  • [x] 1. 항목에 저장된 내용은 메모리 혹은 어떤 방식으로든 써먹을 수 있게 하기
  • [x] 1. 항목에 표시되는 input 혹은 기타 html 태그들은 화면에 보이지 않게 하기
• [x] 단계별로 입력하는 일종의 Wizard 형태를 개발
• [x] 가족 구성원을 입력하고 (0명이어도 무방), 회원가입 을 누르면 폼에 입력된 내용들을 확인하고 가입 완료 표시를 보여주기
• [ ] 수정하고 싶은 내용이 있을 경우 수정할 수 있도록 하기
• [ ] 폼을 닫고 회원가입이 완료되었음을 알리는 모달 창 만들기

소감

제가 가져온 미션이지만, 좀 많이 힘드네요 ㅜㅜ 아직 모달 이라던가, 디테일한 요구사항은 진행하지 못하였습니다. 조만간 업데이트 하겠습니다..!!

React + StyledComponent 의 아이디어를 이용해서 미션을 진행해 보았는데, 기능을 추가해나가면서 일관성이 점점 무너지는 것 같았습니다..ㅜㅜ JS 로 마크업 및 스타일링을 모두 진행하려 하니, CSS 의 가상요소를 처리하는 것이 쉽지 않았던 것 같습니다.

[ganeodolu]

미션때문에 자주 사용되고 있지만 몰랐던 Modal이라는 것에 대해 접하게 해주셔서 감사합니다. CSS를 별도의 파일로 만들지 않고, setStyle로 적용하는 점이 새로웠습니다. 제가 리뷰시 보다 나은 해결책을 내기에는 어려워서 체험단처럼 구현된 기능을 테스트하면서 리뷰하는데 체크하신 부분은 전부 잘 작동하네요. 나중에 (항목이 모두 입력되면 다음 버튼이 나타나게 하기) 기능을 넣으면 필요 없을 수 있을 것 같지만 회원가입창에 아무런 내용을 입력하지 않아도 다음으로 넘어가는 것을 방지하는 내용을 추가하면 더 좋을 것 같아요. :smiley_cat: