MBTI

🧾 80가지 문항으로 알아보는 MBTI

배포 주소 : https://hj-mbti.netlify.app

목차

1. 배포 주소
2. 프로젝트 기능 설명
3. 프로젝트 설치 및 실행 방법
4. 폴더 디렉토리
5. 기술 스택

1. 배포 주소

https://hj-mbti.netlify.app

2. 프로젝트 기능 설명

---

시연영상

https://www.youtube.com/watch?v=zHvnPIbFr-k

시작화면

문답 / 결과

문답을 아예 체크안하고 결과창 넘어갔을 때

문답을 체크하다 말고 결과창 넘어갔을 때

반응형

시작화면 반응형

문답 반응형

결과 반응형

3. 프로젝트 설치 및 실행 방법

$ npm update
$ yarn install
$ yarn start

4. 폴더 디렉토리

📦public
 ┣ 📜heart.ico
 ┣ 📜index.html
 ┗ 📜_redirects
📦src
 ┣ 📂components
 ┃ ┣ 📂footer
 ┃ ┃ ┣ 📜footer.jsx
 ┃ ┃ ┗ 📜footer.module.css
 ┃ ┣ 📂header
 ┃ ┃ ┣ 📜header.jsx
 ┃ ┃ ┗ 📜header.module.css
 ┃ ┣ 📂login
 ┃ ┃ ┣ 📜login.jsx
 ┃ ┃ ┗ 📜login.module.css
 ┃ ┣ 📂questions
 ┃ ┃ ┣ 📂progressBar
 ┃ ┃ ┃ ┣ 📜progressBar.jsx
 ┃ ┃ ┃ ┗ 📜progressBar.module.css
 ┃ ┃ ┣ 📂question
 ┃ ┃ ┃ ┣ 📜question.jsx
 ┃ ┃ ┃ ┗ 📜question.module.css
 ┃ ┃ ┣ 📜questions.jsx
 ┃ ┃ ┗ 📜questions.module.css
 ┃ ┗ 📂result
 ┃ ┃ ┣ 📜result.jsx
 ┃ ┃ ┗ 📜result.module.css
 ┣ 📂data
 ┃ ┗ 📜mbti.json
 ┣ 📜app.jsx
 ┣ 📜app.module.css
 ┣ 📜index.js
 ┣ 📜index.module.css
 ┗ 📜setupProxy.js

5. 기술 스택

#####언어