[x] 이름, 전화번호, 이메일, 비밀번호, 자기소개를 입력 받을 수 있는 폼을 modal ui로 만든다.
[x] 전화번호 혹은 이메일이 입력되면, 체크박스로 개인정보보호방침에 동의합니다 라는 항목이 나타나게 한다.
[x] 항목이 모두 입력되면 다음 버튼이 나타나고 이를 클릭하면 가족 구성원을 입력할 수 있도록 한다.
[x] 추가 를 누르면 이름과 관계를 입력할 수 있는 입력 폼을 만들고, 입력을 받도록 한다.
[x] 단, 1. 항목에 저장된 내용은 메모리 혹은 어떤 방식으로든 써먹을 수 있게 한다.
[x] 또한 1. 항목에 표시되는 input 혹은 기타 html 태그들은 화면에 보여서는 안된다.
[x] 즉 모든 항목을 즉시에 입력하는 방식이 아닌 단계별로 입력하는 일종의 Wizard 형태를 개발하는 것
[x] 가족 구성원을 입력하고 (0명이어도 무방), 회원가입 을 누르면 폼에 입력된 내용들을 확인하고 가입 완료 표시를 보여준다.
[x] 폼을 닫고 회원가입이 완료되었음을 알리는 모달 창을 만든다.
[x] 수정하고 싶은 내용이 있을 경우 수정할 수 있도록 한다.
💬 소감
요구사항을 어느정도 해석해야하는 부분이 일정부분 필요하여 생각보다 작업을 구현하는데 많은 시간이 걸렸습니다.
특히 2가지 부분이 힘들었는데요. 다른 분들과 같이 공감대를 나눌 수 있다면 좋을 것 같습니다 :)
1. 마크업
wizard형태의 form을 만들기 위해서 어느정도 ui가 필요하기 때문에 구현해야할 부분이 많았기에, Material library의 마크업을 활용하였습니다. 사실 공식 홈페이지의 Document가 디자인 가이드를 위한 문서여서, 마크업으로 활용하기에 그다지 친절한 느낌은 아니지만, 잘 안보게 되던 디자인 가이드문서를 다시 볼 수 있어서 좋았습니다 :)
2. wizard 형태
그동안 라이브러리를 사용했어서 직접 구현하려니 어떻게 구현해야 가장 간결할까 고민해봤는데 쉽지 않았던 것 같습니다. 현재는 step이 넘어갈 때마다 이전 스텝을 inactive하고, 넘어가는 stepd을 active하는 방식으로 class들을 조절하였는데 다른 분들은 어떻게 접근하셨는지 궁금하네요 :)
🔗 미션 링크
8
🏴 미션 진행 내역
💬 소감
요구사항을 어느정도 해석해야하는 부분이 일정부분 필요하여 생각보다 작업을 구현하는데 많은 시간이 걸렸습니다. 특히 2가지 부분이 힘들었는데요. 다른 분들과 같이 공감대를 나눌 수 있다면 좋을 것 같습니다 :)
1. 마크업
wizard형태의 form을 만들기 위해서 어느정도 ui가 필요하기 때문에 구현해야할 부분이 많았기에, Material library의 마크업을 활용하였습니다. 사실 공식 홈페이지의 Document가 디자인 가이드를 위한 문서여서, 마크업으로 활용하기에 그다지 친절한 느낌은 아니지만, 잘 안보게 되던 디자인 가이드문서를 다시 볼 수 있어서 좋았습니다 :)
2. wizard 형태
그동안 라이브러리를 사용했어서 직접 구현하려니 어떻게 구현해야 가장 간결할까 고민해봤는데 쉽지 않았던 것 같습니다. 현재는 step이 넘어갈 때마다 이전 스텝을 inactive하고, 넘어가는 stepd을 active하는 방식으로 class들을 조절하였는데 다른 분들은 어떻게 접근하셨는지 궁금하네요 :)