next.js 로 설문 사이트 만들기3

5월 초에 작성하고 진행못했던 플젝 이어서 합니다...

일정이 너무 바빠서 이제 작성합니다.

먼저 설문을 진행하려면 

설문자의 정보, 정보에 대한 동의서 등이 필요합니다.

이부분에 대해 적당한 그림을 그려줍니다.

 

첫번째 설문자의 정보를 입력하는란엔

input태그들을 이용해 필요한 데이터를 입력하게 하고

또는 선택지를 주어서 선택하게 만들어줍니다.

 

1차 설문자의 정보를 넣는 부분에 대한 레이어에 대략적인 설계는 끝나게 됩니다.

 

두번째 동의서 및 동의 부분

동의 내용에 해당하는 부분들을 보여주고 

체크박스를 이용해 동의에 대한 체크를 받아줍니다.

 

2차 설문자의 동의 부분에 대한 설계가 끝납니다.

 

이렇게 첫페이지가 완성됩니다.

 

그밖에 "헤더"에 설문의 정보를 넣는다던지 "푸터"에 사이트의 정보를 넣는다던지

공통적인 부분을 작성해줍니다. 

위 사진은 위 설계 내용을 기반으로 만들어본 결과 입니다.

 

부분적인 설명을 붙이자면

먼저 빨간 점이 없는 input의 경우는 값을 안넣어도 상관없이 넘어가기 버튼을 누를때 빈값 체크를 하지않습니다.

빨간 점이 있는 다른 input은 빈값 체크를 하며,

전화번호의 경우 11자리 숫자를 입력하면 자동적으로 010-0000-0000 과 같은 형식으로 저장됩니다.

그 다음 동의를 체크하게 되면 넘어가기 버튼은 파란색으로 활성이 되며 체크를 안할경우 활성이 되지않아 위와 같은 검은 색을 띄게 됩니다.

동의 체크하고 활성됬다고 넘어가기를 바로 누른다고 넘어가는게 아니라 왼쪽의 값들도 체크해야됨을 인지해야합니다.

 

이후 넘어가기를 누르게 되면 위에 입력한 정보를 가지고 다음페이지로 넘어가게 되는데

이때 리덕스를 사용해도되고 로컬스토리지, 쿼리 등을 사용하여 정보를 넘기면 됩니다.

 

위 페이지에서 사용된 방식등은 추가로 올릴예정입니다.

css나 전화번호 체크, 리덕스인지 로컬스토리지인지 쿼리인지 등등..