2022. 08 ~ 2022. 12
git clone https://github.com/KSWA-SWEEP/Formduo-Front.gitcd Formduo-Front
npm install프로젝트 루트 경로에 환경 변수 파일 설정
⇒ 기본적으로 env 파일 만들어서 설정해주면 되며, .env.local 등 환경에 맞는 파일 추가하여 환경에 따른 변수 설정 가능
📋 .env
# BE (Spring Cloud Gateway) url
NEXT_PUBLIC_API_URL=${Backend url}
# FE 도메인
NEXT_PUBLIC_BASE_URL=${domain url}# development 환경 실행 시
npm run dev
# production 환경 실행 시
npm run build
npm start- JavaScript
- CSS
📋 package.json
...
"dependencies": {
// Next.js - 13 버전 사용
"next": "12.3.1",
// React - 18 버전 사용
"react": "18.2.0",]
"react-dom": "18.2.0",
// 📄 UI
"@tailwindcss/forms": "^0.5.3",
// Tailwind Component Library - modal, popup 등 사용
"@headlessui/react": "^1.7.3",
"@heroicons/react": "^2.0.12",
"@mui/material": "^5.10.9",
"@mui/styled-engine-sc": "^5.10.6",
// 설문 분석 차트를 그리기 위한 Library
"@nivo/bar": "^0.80.0",
"@nivo/core": "^0.80.0",
"@nivo/pie": "^0.80.0",
// 📄 기타 기능
// Datepicker Library
"react-datepicker": "^4.8.0",
// 설문 결과 csv 파일 생성을 위한 Library
"react-csv": "^2.2.2",
// 음성 설문 기능을 위한 음성 녹음 및 재생 Library
"react-audio-player": "^0.17.0",
// 전역 상태 관리를 위한 Library
"recoil": "^0.7.6",
// 설문 공유 QR Code 생성을 위한 Library
"qrcode.react": "^3.1.0",
// 회원 가입 메일 인증을 위한 Library
"emailjs-com": "^3.2.0",
// 환경 변수를 위한 Library
"dotenv": "^16.0.3",
"dotenv-webpack": "^8.0.1",
// API 호출을 위한 Library
"axios": "^1.1.3",
// 쿠키 조회 및 수정을 위한 Library
"cookies": "^0.8.0",
"cookies-next": "^2.1.1",
// 📄 Test
// 단위 테스트를 위한 Library
"jest": "^29.2.2",
}
...📙 jaksim31-front
├─ 📁 pages
│ ├─ about
│ │ └─ formduo.js
│ ├─ account
│ │ ├─ changePw.js
│ │ ├─ myPage.js
│ │ ├─ signIn.js
│ │ └─ signUp.js
│ ├─ api
│ │ ├─ auth
│ │ │ ├─ changePw.js
│ │ │ ├─ isMember.js
│ │ │ ├─ login.js
│ │ │ ├─ logout.js
│ │ │ ├─ members.js
│ │ │ ├─ reissue.js
│ │ │ └─ signup.js
│ │ ├─ response
│ │ │ ├─ all
│ │ │ │ └─ [svyId].js
│ │ │ ├─ conv
│ │ │ ├─ conv.js
│ │ │ ├─ create.js
│ │ │ └─ [id].js
│ │ └─ survey
│ │ ├─ qbox.js
│ │ ├─ surveys
│ │ │ ├─ type.js
│ │ │ └─ [id].js
│ │ └─ surveys.js
│ ├─ auth
│ │ └─ singUp.js
│ ├─ index.js
│ ├─ survey
│ │ ├─ create
│ │ │ ├─ basic.js
│ │ │ ├─ duo.js
│ │ │ ├─ emotion.js
│ │ │ ├─ finish.js
│ │ │ └─ [surveyId].js
│ │ ├─ emotion
│ │ │ └─ [convId].js
│ │ ├─ list
│ │ │ └─ mySurvey.js
│ │ ├─ modify
│ │ │ └─ [modifyid].js
│ │ ├─ preview
│ │ │ ├─ basic.js
│ │ │ ├─ duo.js
│ │ │ └─ emotion.js
│ │ ├─ result
│ │ │ ├─ list.js
│ │ │ └─ [surveyId].js
│ │ ├─ share
│ │ │ ├─ basic.js
│ │ │ ├─ finish.js
│ │ │ └─ [surveyId].js
│ │ ├─ share.js
│ │ └─ tutorial.js
│ ├─ _app.js
│ └─ _error.js
│
├─ ✨ components
│ ├─ common
│ │ ├─ Footer.js
│ │ ├─ Header.js
│ │ ├─ Layout.js
│ │ ├─ LazyShow.js
│ │ ├─ Loading.js
│ │ └─ Modal.js
│ ├─ func
│ │ └─ checkAccessToken.js
│ └─ ui
│ ├─ about
│ │ └─ AboutFormDuo.js
│ ├─ account
│ │ ├─ FindUserEmail.js
│ │ └─ UserInfo.js
│ ├─ icon
│ │ ├─ CustomizeSvg.js
│ │ ├─ SurveySvg.js
│ │ └─ TalkSvg.js
│ ├─ MainContent.js
│ ├─ MainPage.js
│ ├─ PageTitle.js
│ ├─ survey
│ │ ├─ BasicSurveyCreate.js
│ │ ├─ DuoSurveyCreate.js
│ │ ├─ emotion
│ │ │ ├─ Conversation.js
│ │ │ ├─ Error.js
│ │ │ └─ PieChart.js
│ │ ├─ EmotionSurveyCreate.js
│ │ ├─ input
│ │ │ ├─ ContentItem.js
│ │ │ ├─ ContentList.js
│ │ │ ├─ QboxQuestion.js
│ │ │ ├─ Question.js
│ │ │ └─ Respond.js
│ │ ├─ Qbox.js
│ │ ├─ result
│ │ │ ├─ chart
│ │ │ │ ├─ BarChart.js
│ │ │ │ ├─ RadarChart.js
│ │ │ │ ├─ Slider.js
│ │ │ │ ├─ SubjectiveChart.js
│ │ │ │ └─ SubjectiveList.js
│ │ │ ├─ ResponseTable.js
│ │ │ ├─ SurveyAnalysis.js
│ │ │ └─ SurveyResults.js
│ │ ├─ show
│ │ │ ├─ Checkbox.js
│ │ │ ├─ Date.js
│ │ │ ├─ Dropbox.js
│ │ │ ├─ File.js
│ │ │ ├─ Objective.js
│ │ │ ├─ Rating.js
│ │ │ ├─ ShowQuestionList.js
│ │ │ ├─ ShowQuestionListItem.js
│ │ │ ├─ Subjective.js
│ │ │ ├─ Video.js
│ │ │ └─ Voice.js
│ │ ├─ SurveyGridList.js
│ │ ├─ SurveyModify.js
│ │ ├─ SurveyPreview.js
│ │ ├─ SurveyResponse.js
│ │ ├─ SurveyTableList.js
│ │ ├─ SurveyTitleInput.js
│ │ ├─ SurveyTitleShow.js
│ │ └─ TutorialContent.js
│ └─ temp
│ ├─ Features.js
│ ├─ Logo.js
│ └─ Product.js
│
├─ 🧩 atoms
│ ├─ accToken.js
│ ├─ glbSvyContents.js
│ ├─ refToken.js
│ └─ subjAns.js
│
├─ 📦 public
│ ├─ favicon.ico
│ ├─ img
│ │ ├─ black.png
│ │ ├─ [email protected]
│ │ ├─ [email protected]
│ │ ├─ blue-yellow.png
│ │ ├─ [email protected]
│ │ ├─ [email protected]
│ │ ├─ blue.png
│ │ ├─ [email protected]
│ │ ├─ [email protected]
│ │ ├─ gray.png
│ │ ├─ [email protected]
│ │ ├─ [email protected]
│ │ ├─ icon.png
│ │ ├─ [email protected]
│ │ ├─ [email protected]
│ │ ├─ mainImage.jpg
│ │ ├─ mixed.png
│ │ ├─ [email protected]
│ │ ├─ [email protected]
│ │ ├─ survey.jpg
│ │ ├─ svyThumbnail01.png
│ │ ├─ svyThumbnail02.png
│ │ ├─ svyThumbnail1.png
│ │ ├─ svyThumbnail2.png
│ │ ├─ tutorial
│ │ │ ├─ AnalyzeChart.png
│ │ │ ├─ create-buttons.png
│ │ │ ├─ create-duo-add.png
│ │ │ ├─ create-duo.png
│ │ │ ├─ create-objective.png
│ │ │ ├─ create-question-types.png
│ │ │ ├─ create-subjective.png
│ │ │ ├─ list-analyze.png
│ │ │ ├─ list-share.png
│ │ │ ├─ list-svy.png
│ │ │ ├─ list.png
│ │ │ ├─ menu.png
│ │ │ ├─ preview.png
│ │ │ ├─ save-child-popup-date.png
│ │ │ ├─ save-child-popup.png
│ │ │ └─ save-parent-popup.png
│ │ ├─ userBasicImg.png
│ │ ├─ white.png
│ │ ├─ [email protected]
│ │ ├─ [email protected]
│ │ ├─ yellow-blue.png
│ │ ├─ [email protected]
│ │ ├─ [email protected]
│ │ ├─ yellow.png
│ │ ├─ [email protected]
│ │ └─ [email protected]
│ ├─ robots.txt
│ ├─ sitemap-0.xml
│ └─ sitemap.xml
│
├─ 📊 tests
│ ├─ header.test.js
│ ├─ login.test.js
│ ├─ share.test.js
│ ├─ signIn.test.js
│ └─ surveyTitleShow.test.js
│
├─ 🎨 styles
│ ├─ globals.css
│ └─ Home.module.css
│
├─ 🔩 scripts
│ └─ deploy.sh
│
├─ 🧶 lib
│ └─ gtag.js
│
├─ 📖 README.md
├─ 🐳 Dockerfile
├─ 🤵🏻 Jenkinsfile
├─ .env
├─ package.json
├─ jest.config.js
├─ next.config.js
├─ sitemap.config.js
└─ tailwind.config.js
폼듀는 새로운 형식의 설문인 음성 설문 기능을 제공합니다. react-audio-player 라이브러리를 사용하여 음성 녹음 및 재생 기능을 구현하였으며, 음성 녹음을 완료하면 본인이 답변한 응답을 다시 확인해볼 수 있습니다.
개인정보 보호를 위해 첫 음성 설문 참여 시 팝업을 통해 권한을 요청합니다.
간편하고 빠른 설문 제작을 위해 폼듀는 Q-Box 기능을 제공합니다. Q-Box에서는 사용자들이 자주 하는 질문 및 사용자가 이전 설문에서 만들었던 질문 목록을 확인할 수 있으며, 설문에 바로 추가한 후 보기 및 질문을 자유롭게 수정할 수 있습니다.
