링크 https://felizmbti.netlify.app/
제작동기
최근에 유행한 MBTI 16개 유형을 바탕으로 각자 성향에 맞는 여행지를 추천해주는 React웹앱이다. 유명한 MBTI테스트 사이트 중 MBTI유형에 기반한 해외여행지 추천에 대한 마땅한 사이트가 없었고, 코로나 사태가 장기간 지속됨으로 인한 해외여행에 대한 일반인들의 니즈가 크다고 판단하여 제작하게 되었다.
제작기간 2021.02.12 ~ 2021.02.25
제작인원 1명
실행순서
-
사용자는 2개의 선택지 중 하나의 선택지를 고르게 된다.
-
총 12단계의 선택을 하게되면 자신의 결정에 따른 MBTI결과와 이에 대응하는 여행지를 하단에 추천해준다.
-
자신의 성향과 맞는 다른 유형의 사람을 추천해준다.
실행화면
 |
 |
 |
|---|---|---|
 |
 |
 |
-
MBTI 성격유형에 따른 관광자 행동의 차이: 20대 젊은 층을 대상으로 (권보민, 박은경 관광경영연구 제23권 제2호) https://academic.naver.com/article.naver?doc_id=559917672
tools
IDE : VScode Deploy : netlify Framework : ReactJS
dependencies
dependencies
- fontawesome : 고퀄리티의 아이콘을 위하여 사용하였음
- react-copy-clipboard : 링크 복사 기능을 위하여 사용함
- react-router-dom : 라우터를 사용하여 결과물을 출력하기 위하여 사용
- styled-reset : css초기화 등을 간편하게 하기 위하여 사용함.
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.2",
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-brands-svg-icons": "^5.15.2",
"@fortawesome/free-regular-svg-icons": "^5.15.2",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"postcss": "^8.2.6",
"react": "^17.0.1",
"react-copy-to-clipboard": "^5.0.3",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"styled-components": "^5.2.1",
"styled-reset": "^4.3.4",
"web-vitals": "^1.0.1"
},
설치방법
1.create-react-app 설치
create-react-app
2.yarn 설치
npm install --global yarn
3.실행하기
yarn start
배포 방법 1.yarn build
yarn build
2.deploy netilfy
deploy netlify
2-1. 혹시 netlify를 사용할 줄 모른다면 참고해주시길 바랍니다.