해양생물 MBTI 테스트

링크 https://marine-life-mbti.netlify.app/

About this

제작동기

MBTI 16개 유형을 바탕으로 각 성향과 비슷한 해양생물을 찾아주고 설명해주는 React 웹 입니다. 해양환경공단의 블로그 게시글을 보고 웹 사이트로 구현하고 싶다는 생각이 들어 곧바로 해양환경공단에 문의하여 자료 사용 허가를 받고 디자이너와 협업하여 만든 개인프로젝트 입니다.

제작기간

2023.02.18 ~ 2021.02.26

제작인원

프론트엔드 개발자 1명,

앱 디자이너 1명

기술스택

React, Styled-Components, Figma, ESLint, Prettier

실행순서

사용자는 2개의 선택지 중 하나의 선택지를 고르게 됩니다.
총 12단계의 선택을 하게되면 자신의 결정에 따른 MBTI결과와 이에 대응하는 MBTI 유형에 맞는 해양생물을 찾아줍니다.
자신의 결과를 다른 링크를 복사하여 공유하거나, 카카오톡을 통해 공유합니다.

실행화면

참고자료

https://www.newspenguin.com/
해양수산부
해양환경공단

Dependencies & Tools

tools

tools

IDE : VScode

Deploy : netlify

dependencies

react-copy-clipboard : 링크 복사 기능을 위하여 사용함
react-router-dom : 라우터를 사용하여 결과물을 출력하기 위하여 사용
styled-reset : css초기화 등을 간편하게 하기 위하여 사용함
Prettier, ESLint : 단축 기능 사용을 위하여 확장도구 사용

How to use

설치방법

1.create-react-app 설치

create-react-app

2.yarn 설치

npm install --global yarn

3.실행하기

yarn start

배포 방법 1.yarn build

yarn build

2.deploy netilfy