[react/과제] MBTI Test: 무료 MBTI 검사 페이지

'무료 MBTI 검사 페이지 만들기'로 tanstack, zustand, tailwind 활용해보기

GitHub 바로가기

포켓몬 도감 사이트 바로가기

트러블 슈팅

 

 

---

       개요 

무료 MBTI 검사 사이트이다.
로그인 하여 테스트 페이지에서 자신의 성격 유형을 파악하고,
결과 페이지에서 다른 사람들의 유형도 살펴볼 수 있다.
숨기기 또는 공개하기를 눌러 자신의 결과를 공개하거나 숨길 수 있다.

 

react, tanstack, zustand, axios, json-server, tailwind, react-toastify 사용

• 로그인/회원가입 또는 테스트하기를 눌러 로그인 하기 (로그인 하지 않은 사용자는 접근할 수 없다.)
• 테스트를 진행하고 결과 페이지에서 결과 확인하기
• 검사 결과를 삭제하거나 결과의 공개 범위를 설정할 수 있다.

 

tanstack과 zustand를 활용해볼 수 있어 좋았고,

더불어 tailwind, json-server을 공부하고 써볼 수 있는 기회였다!

 

 

---

       파일 구성 

│── db.json
│── index.html
│── server.js
│
├── src
│   ├── api                # API 호출 관련 파일
│   │   ├── api.js
│   │   ├── auth.js
│   │   ├── testResults.js
│   │
│   ├── assets             # 정적 파일 (이미지, 아이콘 등)
│   │
│   ├── components         # 재사용 가능한 UI 컴포넌트
│   │   ├── layout         # 레이아웃 관련 컴포넌트
│   │   │   ├── Footer.jsx
│   │   │   ├── Header.jsx
│   │   │   ├── Layout.jsx
│   │   │   ├── Navi.jsx
│   │   │   ├── Title.jsx
│   │   ├── AuthForm.jsx
│   │   ├── Btn.jsx
│   │   ├── ResultCard.jsx
│   │   ├── ShareBtn.jsx
│   │   ├── TestForm.jsx
│   │
│   ├── data               # 데이터 관련 파일
│   │   ├── questions.js
│   │
│   ├── pages              # 페이지 단위 컴포넌트
│   │   ├── Home.jsx
│   │   ├── Login.jsx
│   │   ├── Profile.jsx
│   │   ├── ResultPage.jsx
│   │   ├── Signup.jsx
│   │   ├── TestPage.jsx
│   │
│   ├── routes             # 라우트 관련 파일
│   │   ├── ProtectedRoute.jsx
│   │   ├── Router.jsx
│   │
│   ├── tanstack           # React Query 관련 폴더
│   │   ├── mutations
│   │   │   ├── useAuthMutations.js
│   │   │   ├── useResultMutations.js
│   │   ├── queries
│   │   │   ├── useQueries.js
│   │   ├── client.js
│   │
│   ├── utils              # 유틸리티 함수 모음
│   │   ├── mbtiCalculator.js
│   │
│   ├── zustand/store      # Zustand 상태 관리
│   │   ├── useAuthStore.js
│   │
│   ├── App.jsx
│   ├── index.css
│   ├── main.jsx

 

 

 

---

       페이지 설명 

홈페이지에서 테스트 하러 가기 혹은 로그인/회원가입을 누르면 로그인 페이지로 이동한다.

(로그인 하지 않은 회원은 결과보기 페이지, 테스트 페이지에 접근할 수 없다.)

 

검사 결과가 있는 경우 자신의 가장 최근 검사 결과가 뜨게되고,

없는 경우 검사 결과가 없다는 문구가 나온다.

 

 

테스트 페이지에서 테스트를 진행하고,

결과페이지로 가 자신의 결과와 더불어 다른 사람들의 검사 결과를 확인할 수 있다.

자신의 검사 결과는 숨기기 버튼을 통해 공개하거나 숨길 수 있다.

 

 

---

       기능 설명 

01 Axios: API 요청

• jwt 인증을 적용하여 회원가입과 로그인 기능을 구현했다.

• json-server를 사용하여 결과 데이터를 업데이트, 수정 및 삭제 가능하게 했다.

 

02 Tanstack: 서버와 로컬 상태 동기화

• useMutation을 사용하여 회원 관련 정보와 검사 결과가 즉시 반영되도록 했다.

• useQuery로 항상 최신 상태가 유지되도록 했다.

 

03 Zustand: 전역 상태 관리

• 사용자 정보를 관리하여 API 호출을 줄였다.

• localStorage에 정보를 저장하여 새로고침 해도 로그인 상태가 유지되도록 했다.

• 저장된 로그인 상태를 통해 사용자가 접근할 수 있는 페이지와 없는 페이지를 분리했다.

 

 

---

이번에 새로운 라이브러리들을 왕창 사용해볼 수 있어서 좋았다.

zustand,와 tanstack 등 사용성이 좋은 라이브러리를 알게되고 연습도 해봤다.

더불어 tailwind도 처음 써봤는데 너무 편리했고,

json-server로 가상의 DB를 만들어주는 방법도 알게되어 기쁘다.

다른 프로젝트를 할 때 모두 유용하게 자주 써먹을 수 있을 것 같다.