sjoleee/google-form

Google Form 클론코딩 📝

GOOGLE FORM

• 구글폼 클론코딩 Web

🛠 Skills: 개발환경 및 기술스택

• React.js
• TypeScript
• Redux toolkit
• Styled-components
• MUI
• React-hook-form
• Beautiful-DnD

📂 Directory Structure: 디렉토리 구조

src
 ┣ assets
 ┣ components
 ┃ ┣ AddCardButton
 ┃ ┣ Card
 ┃ ┣ CardFooter
 ┃ ┣ CardHeader
 ┃ ┣ InputCheckbox
 ┃ ┣ InputRadio
 ┃ ┣ InputSelect
 ┃ ┣ InputTextField
 ┃ ┣ ItemTypeSection
 ┃ ┣ Layout
 ┃ ┣ PreviewCard
 ┃ ┣ PreviewCardTitle
 ┃ ┗ TextFieldSection
 ┣ pages
 ┃ ┣ Form
 ┃ ┣ Preview
 ┃ ┗ Result
 ┣ store
 ┣ style
 ┣ App.tsx
 ┣ index.tsx
 ┗ react-app-env.d.ts

🌟 Key Features: 주요 기능 소개

설문지 제목 및 설명
설문지 제목 및 설명을 입력, 편집할 수 있음

질문 추가 기능
5가지 유형의 질문을 추가할 수 있음. 버튼 클릭시 객관식 질문 하나를 추가함.

질문 유형 변경 기능
질문의 유형을 변경할 수 있음. 드롭다운을 통해 해당하는 질문의 type을 변경함.

질문 복제 기능
질문을 복제할 수 있음. 타겟 질문을 하나 더 생성하여 바로 뒤에 추가함.

질문 삭제 기능
질문을 삭제할 수 있음. 타겟 질문을 삭제함.

필수 옵션 기능
타겟 질문을 필수로 응답해야하는 질문으로 설정할 수 있음.

보기 추가 및 삭제 기능
객관식, 체크박스, 드롭다운의 경우, 보기를 추가 및 삭제할 수 있음. 타겟 질문이 가진 보기 데이터를 추가 및 삭제함

질문 및 보기 이동
질문 및 보기의 순서를 드래그 앤 드롭으로 변경할 수 있음

미리보기 기능
새 탭에서 설문지를 미리보기 및 제출할 수 있음

미리보기 입력 초기화 기능
미리보기에서 작성한 입력을 버튼으로 초기화할 수 있음

미리보기 제출 기능
미리보기에서 입력한 결과를 확인할 수 있음