해당 프로젝트를 열고 다음과 같이 명령어를 실행해주세요.
npm install
yarn install
npm run start
yarn start
📢 프로젝트 주제 : 구글 설문조사 기능을 구현한 프로젝트입니다.
📆 프로젝트 기간 : 231202 ~ 231211
폴더 구조와 라이브러리는 README 하단에서 확인할 수 있습니다.
- 설문지 제목과 설명을 추가 및 편집할 수 있습니다.
- 질문을 추가하고, 질문의 유형을 선택할 수 있습니다. (단답형, 장문형, 객관식 질문, 체크박스, 드롭다운)
- 필수 옵션 설정이 가능합니다.
- 질문을 복사할 수가 있습니다. 질문의 유형, 내용과 질문 안의 옵션들, 필수 옵션까지 모두 복사가 됩니다.
- 질문을 삭제할 수 있습니다.
- 질문의 순서를 드래그앤드랍을 통해 자유롭게 변경할 수 있습니다.
- 질문의 옵션 순서를 드래그앤드랍을 통해 자유롭게 변경할 수 있습니다.
- 옵션을 삭제할 수 있습니다.
- 설문지의 미리보기가 가능합니다.
- 사용자가 생성한 설문지 그대로 답변을 입력하고 선택하는 것이 가능합니다.
- 양식 지우기 버튼을 누르면 사용자가 입력한 답변들을 모두 지울 수 있습니다.
- 미리보기에서 설문지에 대해 응답한 내용을 한 눈에 확인할 수 있습니다.
- 사용자가 선택한 질문이나 옵션 입력창에 포커스, 하이라이트 등을 추가하여 명확히 확인할 수 있게 구현하였습니다.
- 필수 옵션이 설정된 질문에 입력을 하지 않으면 해당 질문에 하이라이트를 추가하여 사용자가 바로 알 수 있게 하였습니다.
redux-persist를 사용하여 질문 데이터를localstorage에 저장하였기때문에 브라우저 새로고침을 해도 질문 데이터가 그대로 유지 됩니다.
📦src
┣ 📂components
┃ ┣ 📂Card
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styles.ts
┃ ┣ 📂CardFooter
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styles.ts
┃ ┣ 📂CardHeader
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styles.ts
┃ ┣ 📂PreviewCard
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styles.ts
┃ ┣ 📂PreviewCheckbox
┃ ┃ ┗ 📜index.tsx
┃ ┣ 📂PreviewDnd
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styles.ts
┃ ┣ 📂PreviewInputText
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styles.ts
┃ ┣ 📂PreviewRadio
┃ ┃ ┗ 📜index.tsx
┃ ┣ 📂Question
┃ ┃ ┣ 📂OptionQuestion
┃ ┃ ┃ ┣ 📜index.tsx
┃ ┃ ┃ ┗ 📜styles.ts
┃ ┃ ┣ 📂TextQuestion
┃ ┃ ┃ ┣ 📜index.tsx
┃ ┃ ┃ ┗ 📜styles.ts
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂SelectType
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styles.ts
┃ ┣ 📂SideMenu
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styles.ts
┃ ┣ 📂TitleSection
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styles.ts
┃ ┗ 📜styles.ts
┣ 📂const
┃ ┗ 📜QuestionTypes.ts
┣ 📂pages
┃ ┣ 📂Form
┃ ┃ ┗ 📜index.tsx
┃ ┣ 📂Preview
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styles.ts
┃ ┣ 📂Submit
┃ ┃ ┣ 📜index.tsx
┃ ┃ ┗ 📜styles.ts
┃ ┗ 📜index.ts
┣ 📂slices
┃ ┣ 📜formSlice.ts
┃ ┣ 📜previewSlice.ts
┃ ┗ 📜questionSlice.ts
┣ 📂store
┃ ┗ 📜index.ts
┣ 📂style
┃ ┣ 📜global.ts
┃ ┗ 📜theme.ts
┣ 📜App.tsx
┣ 📜index.tsx
┗ 📜react-app-env.d.ts
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.14.19",
"@reduxjs/toolkit": "^1.9.7",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.66",
"@types/react": "^18.2.40",
"@types/react-beautiful-dnd": "^13.1.7",
"@types/react-dom": "^18.2.17",
"@types/react-redux": "^7.1.31",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "^18.2.0",
"react-icons": "^4.12.0",
"react-redux": "^8.1.3",
"react-router-dom": "^6.20.1",
"react-scripts": "5.0.1",
"redux": "^4.2.1",
"redux-persist": "^6.0.0",
"styled-components": "^6.1.1",
"styled-reset": "^4.5.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},