프로젝트 개요

구글 설문조사 클론 코딩

• 배포 링크

기능 구현

• 설문지 제목 추가, 편집
• 설문지 설명 추가, 편집
• 질문을 추가하면 질문이 추가
  • 단답형
  • 장문형
  • 객관식 질문
  • 체크박스
  • 드롭다운
• 질문 복사 기능
• 질문 삭제 기능
• 필수 옵션 설정 기능
• 질문 및 질문의 옵션 순서 변경(DnD)
• 미리 보기 기능
  • 제출 버튼 눌렀을 경우 사용자가 작성한 데이터를 보여 줍니다.
• 브라우저 새고로침 시 질문 데이터 유지
• 양식 지우기

프로젝트 구조

src/
├── components/
│   ├── Answer/
│   ├── common/
│   ├── Question/
│   └── Result/
├── hooks/
├── pages/
├── store/
│   └── slices/
└── styles/

• components/: 프로젝트의 React 컴포넌트들이 위치한 폴더입니다.
  • Answer/: 답변(viewform 페이지)과 관련된 컴포넌트들이 위치한 폴더입니다.
  • common/: 공통으로 사용되는 컴포넌트들이 위치한 폴더입니다.
  • Question/: 질문(root 페이지)과 관련된 컴포넌트들이 위치한 폴더입니다.
  • Result/: 결과 페이지와 관련된 컴포넌트들이 위치한 폴더입니다.
• hooks/: 커스텀 훅들이 위치한 폴더입니다.
• pages/: 각 페이지에 대응하는 컴포넌트들이 위치한 폴더입니다.
• store/: Redux store와 관련된 파일들이 위치한 폴더입니다. slices/ 하위 폴더에는 각각의 리덕스 슬라이스들이 위치해 있습니다.
• styles/: 스타일과 관련된 파일들이 위치한 폴더입니다. 전역 스타일, 테마 등을 정의하는 파일들이 포함되어 있습니다.

설치

npm i

실행

npm run dev