Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eeeyooon/google-form
구글 설문조사 클론코딩
https://github.com/eeeyooon/google-form
react redux redx-toolkit styled-components typescript
Last synced: 5 days ago
JSON representation
구글 설문조사 클론코딩
- Host: GitHub
- URL: https://github.com/eeeyooon/google-form
- Owner: eeeyooon
- Created: 2023-12-16T08:33:04.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2023-12-17T06:43:04.000Z (11 months ago)
- Last Synced: 2023-12-17T09:53:44.413Z (11 months ago)
- Topics: react, redux, redx-toolkit, styled-components, typescript
- Language: TypeScript
- Homepage: https://google-form-eeeyooon.vercel.app
- Size: 340 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 구글 설문조사 구현
## 프로젝트 설치 및 실행
해당 프로젝트를 열고 다음과 같이 명령어를 실행해주세요.
```
npm install
yarn install
```
```
npm run start
yarn start
```
## 프로젝트 개요
📢 프로젝트 주제 : 구글 설문조사 기능을 구현한 프로젝트입니다.
📆 프로젝트 기간 : 231202 ~ 231211
💜 [구글 설문조사 사용해보기](https://google-form-eeeyooon.vercel.app/)
## 기술 스택
폴더 구조와 라이브러리는 README 하단에서 확인할 수 있습니다.
## 구현 기능
### 구글 설문조사 기본 기능
- 설문지 제목과 설명을 추가 및 편집할 수 있습니다.
- 질문을 추가하고, 질문의 유형을 선택할 수 있습니다.
(단답형, 장문형, 객관식 질문, 체크박스, 드롭다운)
- 필수 옵션 설정이 가능합니다.
### 질문 복사, 삭제 기능
- 질문을 복사할 수가 있습니다. 질문의 유형, 내용과 질문 안의 옵션들, 필수 옵션까지 모두 복사가 됩니다.
- 질문을 삭제할 수 있습니다.
### 질문 순서 변경 (Drag & Drop)
- 질문의 순서를 드래그앤드랍을 통해 자유롭게 변경할 수 있습니다.
### 질문의 옵션 순서 변경 (Drag & Drop)
- 질문의 옵션 순서를 드래그앤드랍을 통해 자유롭게 변경할 수 있습니다.
- 옵션을 삭제할 수 있습니다.
### 미리 보기 및 양식 지우기 기능
- 설문지의 미리보기가 가능합니다.
- 사용자가 생성한 설문지 그대로 답변을 입력하고 선택하는 것이 가능합니다.
- 양식 지우기 버튼을 누르면 사용자가 입력한 답변들을 모두 지울 수 있습니다.
### 설문지 응답 제출하기
- 미리보기에서 설문지에 대해 응답한 내용을 한 눈에 확인할 수 있습니다.
### 사용자 친화적인 UI/UX
- 사용자가 선택한 질문이나 옵션 입력창에 포커스, 하이라이트 등을 추가하여 명확히 확인할 수 있게 구현하였습니다.
- 필수 옵션이 설정된 질문에 입력을 하지 않으면 해당 질문에 하이라이트를 추가하여 사용자가 바로 알 수 있게 하였습니다.
### 질문 데이터 저장
- `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"
},
```