코오롱글로벌 x 위코드
BPS Form - Survey Tool 기획으로 Survey Tool 제작
유저 플로우 :
로그인 > 템플릿 > 에디터(내용 입력 및 스타일 수정) > 배포 > 응답자 설문지 작성 후 통계 확인
개발은 초기 세팅부터 모두 직접 구현하였습니다
|
|
| 조은지 | 이주영 |
| Front-End | Front-End |
|
|
| 문정진 | 이석원 |
| Back-End | Back-End |
- 프로젝트 구현 : 22.9.19 ~ 22.10.13(N일)
- 버그 수정 및 리팩토링 : 22.10. 16 ~
- 구현 기능 데모 영상
- 백앤드
- 협업 툴
- Express 초기 세팅
1. 로그인 기능 구현
- jwt 방식을 통해 구현
- 입력값이 데이터베이스와 일치하지 않으면 에러 구현
2. 메인 페이지 구현
- 검색 and 필터링 and pageNo and limit -> 모든 조건을 하나의 쿼리문으로 해결 (다중 필터 기능)
- MySQL 이벤트 스케줄러 사용 (날짜에 따른 상태 자동 업데이트)
3. 링크 & 강제 종료 기능 구현
- 링크 URL 제공 기능
- Survey 강제 종료 기능
4. 에디터 폼 데이터 저장 기능
- 날짜 형식의 정규식 사용
- Survey 페이지에 필요한 제목, 질문, 날짜, 랜딩 페이지 등을 DB에 저장
- 쿼리문 총 5개 실행 -> 추후 리팩터링에 트랜잭션 적용 예정
5. 미들웨어
- 토큰의 일치 여부 확인 미들웨어
- 에러 핸들링에 필요한 미들웨어
6. 도커 배포
- compose 파일로 db, 프론트엔드, 백엔드 한 번에 배포 가능
- 도커 허브를 통한 이미지 태그 관리
- KODA NOTION
- tickets 관리
- convention 공유
- 일정 공유
- 👉 NOTION 페이지 보러가기
- API 명세서
- 👉 API 명세서 보러가기
- 1. 로그인 페이지 구현
jwt 방식을 통해 구현 각각 id, pw 4글자 입력시 버튼 활성화
- 2. 메인 페이지 구현
서베이 페이지 네이션 기능 구현
- 3. 링크 페이지 구현
해당 페이지 설문조사 응답자용 링크 복사 기능
- 4. 통계 페이지
Rechart 라이브러리 사용 (객관식 통계)
- 5. 공통 모달
메인과 에디터 페이지에서 쓰이는 공통 모달 작업
- 1. 공통 네브 Router 기능 (중첩 라우팅)
React-Router-dom의 Outlet 내장 함수를 활용하여 원하는 페이지에서만 상단 nav가 보이도록 함.
- 2. 선택 질문 항목 추가 및 삭제 기능
export const QUESTION_ARRAY = (sortIndex, formId, ...args) => {
return {
1: (
<MultipleSingle
sortIndex={sortIndex}
question={args[0]}
option={args[1]}
onRemove={args[2]}
formId={formId}
/>
),
2: (
<MultipleMultiple
...
/>
),
3: (
<ShortDescription
...
/>
),왼쪽 선택항목 7개는 각각 id를 가지고 있고 7개 중 하나를 선택하면 해당하는 컴포넌트가 그려지도록 설계했다. 여기서 인자가 3개 이상 있을 경우는 객체로 바꾸는 것이 좋다는 것도 알게 돼어 수정하려고 합니다.
- 3.객관식 질문 양식 중 문제 추가 삭제 기능
const [optionIndexes, setOptionIndexes] = useState(Object.keys(option));
//객관식 문항수를 상위 컴포넌트로부터 option이라는 props로 받고 있다.
const addOptionIndexes = () => {
setOptionIndexes([...optionIndexes, optionIndexes.length.toString()]);
};
...
{optionIndexes.map(idx => (
<Choice key={idx}>
...}객관식 문항이라는 option을 받고 option의 index는 계속 변하는 값이므로 state로 지정하여 관리했습니다. 그리고 이 값을 map을 사용하여 option의 갯수에 따라 문항이 생성되도록 만들었습니다. 여기서 어려움이 있었던 부분은 addOptionIndexes 부분이었습니다,. Object.keys(option)을 사용하면 결과값이 배열에 문자열이 담기는 것을 모르고 기능 작동이 안되는 것이었습니다. 알고보니 optionIndexes.length의 결과값이 숫자타입이라는 것을 알게 됐고 어려워보였던 문제지만 굉장히 간단한 문제였다는 것을 알게 됐습니다.
- 4. 폼 데이터 생성 및 삭제 기능
//생성
//최상위 컴포넌트 Editor.js
<MakeSurvey onSubmit={methods.handleSubmit(onSubmit)}>
//상위 컴포넌트 SurveyEditor.js
<TitleInput
placeholder="제목을 입력하세요"
{...register('surveyName', {
shouldSelect: true,
required: {
value: 'title',
message: `제목은 필수!`,
},
})}
/>각 인풋에 register을 등록하고 마지막 onsubmit이 될때 한번에 폼이 생성되어 보내지도록 하였습니다.
//삭제
const methods = useForm({shouldUnregister: true});여기서 많이 해맸었습니다. 선택 항목을 삭제했음에도 불구하고 보내지는 폼에서는 적용이 되지 않는 어려움을 마주했습니다. 하루 종일 다양한 방법을 시도했고 결과적으로 Usehook-Form 공식문서를 통해 shouldUnregister:true를 정의하면 마지막 onsubmit 될때 register된 상태인 input의 form만 생성된다는 것을 알았습니다.
- 5. 폼 데이터 안에서 이미지 보내는 기능
- 6. 에디터 및 고객 폼 데이터 유효성 검사 기능
<ErrorMessage
errors={errors}
name="surveyName"
render={({ message }) => (
<ErrorM>
<Icon>
<MdInfo />
</Icon>
{message}
</ErrorM>
)}
/>ErrorMessage라는 react-hook-form안에 있는 컴포넌트를 import하여 설정해서 커스텀해주었습니다. name은 해당 register된 이름과 동일하게 설정해주어야 원하는 동작을 하였고 message 또한 미리 설정해주어야 에러 객체가 있을때 message가 보여졌습니다.
- 7. 고객 페이지 폼데이터 생성 기능
