배포 링크

https://wpo-team-01.github.io/wanted-codestates-project-1-7/

프로젝트 실행 방법

1. npm install
2. npm start

구현한 기능 목록

1. 생성된 폼 목록 : 사용자가 생성된 폼을 리스트 형식으로 구현하였고, 적용된 필드를 미리 볼 수 있도록 표현함.

• [폼 작성하기] : 설문 참여자가 폼을 작성할 수 있는 화면으로 이동
• [제출된 폼 확인하기] : 설문 참여자가 작정한 설문 결과 리스트로 이동
• [폼 생성하기] : 사용자가 폼을 생성할 수 있는 화면으로 이동

2. 폼 생성 : 사용자가 커스터마이징 할 수 있는 폼 생성 UI

• [필드 추가하기] : 새로운 필드 추가
• [타입 선택] : 6가지 타입(텍스트, 전화번호, 주소, 드롭다운, 첨부파일, 이용약관) 선택 기능
• [필수 / 선택 여부 기능] : 체크박스로 구현
• [라벨 입력] : 라벨을 입력할 수 있는 기능
• [필드 삭제 기능] : x 표시를 눌러 필드를 삭제
• [필드 드래그] : 6 dot 모양 아이콘을 통해 필드의 위치 변경 가능
• [플레이스 홀더] : 타입이 텍스트 or 전화번호인 경우 노출
• [옵션] : 타입이 드롭다운인 경우 노출, 텍스트 입력 시 "," 기준으로 자동으로 토큰 생성
• [설명영역]: 위지윅에디터를 이용하여 일부 구현 (그림 및 파일 첨부 제외)

3. 생성된 폼 : 생성한 폼 데이터를 이용하여 설문 참여 가능하도록 UI 구현

• [text type] : 한글 또는 알파벳외 입력만 가능하도록 유효성 검사 기능
• [phone type] : 숫자만 입력 가능하도록 유효성 검사 기능 (휴대전화번호 형식에 맞춰 hyphen 자동입력)
• [address type] : 클릭시 카카오 우편번호 서비스 기능 (모달 형식)
• [select type] : 배열안의 options data 선택 기능
• [file type] : 이미지 미리보기 기능
• [agreement type] : 체크 표시에 따른 icon 변화 및 > 아이콘 클릭시 약관동의 활성화 (모달 형식)

4. 입력된 데이터 목록 : 특정 폼 설문 참여자가 입력한 데이터들을 조회하기 위한 화면

• 설문 데이터들을 리스트 형식으로 구현하였으며 각 리스트 마다 삽입한 toggle button을 이용하여 조회 및 숨기기 기능 구현

어려웠던 점

설계 단계에서 와이어프레임을 사용자 관점에서 구상하는 것과 API 통신 및 Restful하게 짜는 것이 어려웠다. Git은 적응 중이긴 하지만 아직까지 익숙하게 사용하지 못하고 있다. 특히 PR을 통한 코드 리뷰가 익숙치 않아 더 많은 경험이 필요하다. 드래그 앤 드랍 기능을 라이브러리 없이 구현해보려고 했지만 역량 부족에다가 시간도 없어서 라이브러리를 사용했다. 하지만 라이브러리 사용 및 분석도 매우 어려웠다.