{"id":23376264,"url":"https://github.com/chay140/mbit-test","last_synced_at":"2026-04-26T22:31:52.247Z","repository":{"id":265103276,"uuid":"893734995","full_name":"chay140/mbit-test","owner":"chay140","description":"MBTI 테스트 React+Vite / json-server SPA 프로젝트","archived":false,"fork":false,"pushed_at":"2026-03-31T07:05:45.000Z","size":365,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-31T08:47:48.104Z","etag":null,"topics":["json-server","jwt","react"],"latest_commit_sha":null,"homepage":"https://mbit-test.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chay140.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-11-25T05:42:26.000Z","updated_at":"2026-03-31T07:05:42.000Z","dependencies_parsed_at":"2024-11-27T17:43:26.617Z","dependency_job_id":null,"html_url":"https://github.com/chay140/mbit-test","commit_stats":null,"previous_names":["chay140/mbit-test"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chay140/mbit-test","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chay140%2Fmbit-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chay140%2Fmbit-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chay140%2Fmbit-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chay140%2Fmbit-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chay140","download_url":"https://codeload.github.com/chay140/mbit-test/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chay140%2Fmbit-test/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32315711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T21:09:39.134Z","status":"ssl_error","status_checked_at":"2026-04-26T21:09:21.240Z","response_time":129,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["json-server","jwt","react"],"created_at":"2024-12-21T17:36:10.011Z","updated_at":"2026-04-26T22:31:52.229Z","avatar_url":"https://github.com/chay140.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MBTI 성격 유형 검사 서비스\n![android-chrome-192x192](https://github.com/user-attachments/assets/c467cd9c-c73a-46bf-99dc-5564974769de)\n\n## 📖 목차\n\n1. [프로젝트 설명](#프로젝트-설명)\n2. [주요 기능](#주요-기능)\n3. [프로젝트 구성](#프로젝트-구성)\n4. [Trouble Shooting](#trouble-shooting)\n5. [개발기간](#개발기간)\n6. [기술스택](#기술스택)\n\n## 프로젝트 설명\n단순한 MBTI 테스트에 **회원가입/로그인**, **프로필 관리**, **테스트 결과 저장** 의 기능을 추가하여 만든 프로젝트. **JWT 인증**과 **RESTful API 통신**을 실습하는 애플리케이션이기도 합니다. (`Axios`, `Tanstack Query(React Query)`, ` json-server` 등을 활용합니다)\n\n![HomePage](https://github.com/user-attachments/assets/4c342f2e-9fa5-4afb-a0b0-791e48c275c5)\n\n## 주요 기능\n### 회원가입 및 로그인 \n - JWT 인증을 사용한 간단한 회원가입과 로그인을 지원합니다\n - 회원가입 : 아이디, 비밀번호, 닉네임을 입력하여 계정을 생성할 수 있습니다\n - 로그인 : 가입한 아이디, 비밀번호로 로그인이 가능합니다.\n - 회원은 프로필 페이지에서 닉네임 수정이 가능합니다\n\n### MBTI 테스트\n - 간단한 무료 MBTI 테스트를 통해 MBTI를 알아볼 수 있습니다\n - 테스트 후의 결과는 JSON Server로 저장 됩니다\n\n### 테스트 결과 보기\n - 테스트 결과를 JSON Server로 관리하여 조회가 가능합니다\n\n\n## 프로젝트 구성\n```\nsrc/\n├── api/\n│   ├── auth.js\n│   ├── axiosInstance.js\n│   ├── testResults.js\n│   └── testAxiosInstance.js\n├── components/\n│   ├── [재사용 가능한 UI 컴포넌트 목록]\n├── context/\n│   ├── [Context API 파일]\n├── data/\n│   ├── [테스트 결과 데이터를 관리하는 JSON 또는 파일]\n├── pages/\n│   ├── Home.jsx\n│   ├── Login.jsx\n│   ├── Profile.jsx\n│   ├── Signup.jsx\n│   ├── TestPage.jsx\n│   └── TestResult.jsx\n├── shared/\n│   ├── ProtectedRoute.jsx\n│   └── Router.jsx\n├── utils/\n│   ├── [테스트 결과 계산 로직 및 기타 유틸리티 함수]\n├── App.jsx\n└── main.jsx\n\n```\n- `api/`: API 호출 및 인증 관련 로직을 관리하는 디렉토리\n    - `auth.js`: 사용자 인증을 처리하는 파일\n    - `axiosInstance.js`: 인증 토큰이 포함된 axios 인스턴스를 설정\n    - `testResults.js`: 테스트 결과를 관리하는 API 호출 파일\n    - `testAxiosInstance.js`: 테스트 결과 전용 axios 인스턴스를 설정\n- `components/`: 각 페이지에서 사용하는 재사용 가능한 UI 컴포넌트를 관리하는 디렉토리\n- `context/`: Context API를 사용한 전역 상태 관리 디렉토리\n    - 주로 사용자 인증 상태 관리\n- `data/`: 테스트 결과를 생성하기 위한 정적 데이터 파일\n- `pages/`: 애플리케이션의 주요 페이지 레이아웃을 구성하는 디렉토리\n    - `Home.jsx`: 홈 페이지\n    - `Login.jsx`: 로그인 페이지\n    - `Profile.jsx`: 사용자 프로필 페이지\n    - `Signup.jsx`: 회원가입 페이지\n    - `TestPage.jsx`: 테스트 페이지\n    - `TestResult.jsx`: 테스트 결과 페이지\n- `shared/`: 라우터 관련 파일\n    - `ProtectedRoutes.jsx`: 인증된 사용자만 접근할 수 있는 라우트를 관리\n    - `Router.jsx`: 애플리케이션의 모든 라우팅을 설정\n- `utils/`: 테스트 결과 계산 로직 및 기타 유틸리티 함수 파일\n\n\n## Trouble Shooting\n### JWT 인증 오류\n\u003cdetails\u003e\n\u003csummary\u003e원인 분석 및 해결방안\u003c/summary\u003e\n\u003cdiv markdown=\"1\"\u003e\n\n#### ⚙️ 문제 상황 및 원인 분석\nJWT 인증으로 서버에 요청을 보내도 에러가 뜨며 처리가 안되거나, 오류의 원인을 찾아내는데 어려움을 겪었습니다\n\n#### 🚀 import 확인과 개발자 도구 팁\n에러를 콘솔에 찍어도 문제 확인이 어려운 경우 개발자 도구를 활용하며 문제를 해결해나갔습니다.\n\n대표적인 에러로는 회원가입시 이미 등록된 유저와 동일한 아이디 입력시 409에러가 떠서 문제를 일으키는 것을 확인했습니다.\n\n\u003cbr\u003e\n\u003c/div\u003e\n\u003c/details\u003e\n\n**블로그 포스팅** : [MBTI 테스트 만들기1 : JWT 인증](https://velog.io/@chay140/MBTI-테스트-만들기)\n\n\n### json-server 배포 오류\n\u003cdetails\u003e\n\u003csummary\u003e원인 분석 및 해결방안\u003c/summary\u003e\n\u003cdiv markdown=\"1\"\u003e\n\n#### ⚙️ 문제 상황 및 원인 분석\n데이터베이스를 위한 서버 배포시 발생한 오류로, localhost json-server에서 URL만 바꿨을 뿐인데 테스트 결과가 저장되지도 않고, 불러와지지도 않았습니다. 바꾼 부분이 test db 서버 URL이었기 때문에 이 부분을 중심으로 문제를 파악하려고 했습니다.\n\n#### 🚀 요청 URL 확인 및 axios instance 문법 수정\nGlitch에서 받은 live server URL 후에 db 경로를 제대로 설정하지 않아서 문제가 생겼습니다. 이 부분을 \"..../testResults\"를 추가해주어 테스트를 올바른 경로에 추가할 수 있도록 수정했습니다\n\n기존 URL을 바꾸는 과정에서 axios.post()의 인자에, 경로 변수를 지워버린 것을 발견하여 추가해주었습니다. 이후 원활히 작동했습니다.\n\n\u003cbr\u003e\n\u003c/div\u003e\n\u003c/details\u003e\n\n**블로그 포스팅** : [MBTI 테스트 만들기2 : json-server 배포 오류 찾기](https://velog.io/@chay140/MBTI-테스트-만들기2-json-server-배포-오류-찾기)\n\n\n### Vercel에서 ProtectedRoute 오류\n\u003cdetails\u003e\n\u003csummary\u003e원인 분석 및 해결방안\u003c/summary\u003e\n\u003cdiv markdown=\"1\"\u003e\n\n#### ⚙️ 문제 상황 및 원인 분석\nVercel을 통해 배포한 프로젝트에서 Protected Route가 작동하지 않는 오류를 발견하였습니다. local에서 돌릴때는 문제가 없었으나, Vercel에 배포과정 중 route의 설정이 local과 달라 생긴 문제라고 판단했습니다.\n\n#### 🚀 vercel.json 설정\n구글링을 해본 결과, vercel에서 react-router-dom이 예상대로 작동하지 않는 일이 많이 발생하는데 이는 라우팅 방식의 차이가 있어서 local과는 다른 기본값을 따로 저장해주어야 했습니다.\n\nvercel.json이라는 파일을 생성하여\n```js\n{\n  \"rewrites\": [{ \"source\": \"/(.*)\", \"destination\": \"/\" }]\n}\n```\n위의 내용을 포함하여 재배포한 결과, 문제를 해결하였습니다.\n\n\u003cbr\u003e\n\u003c/div\u003e\n\u003c/details\u003e\n\n**블로그 포스팅** : [MBTI 테스트 만들기3 : Vercel에서 ProtectedRoute 오류 해결](https://velog.io/@chay140/MBTI-테스트-만들기3-Vercel에서-ProtectedRoute-오류-해결)\n\n\n\n## 개발 기간\n* 2024.11.25 (월) ~ 2024.11.28 (목)\n\n## 기술 스택\n### Language\n![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge\u0026logo=JavaScript\u0026logoColor=black)\n![HTML](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n![CSS](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n\n### Auth API\n![jwt](https://img.shields.io/badge/json%20web%20tokens-323330?style=for-the-badge\u0026logo=json-web-tokens\u0026logoColor=61DAFB)\n![axios](https://img.shields.io/badge/Axios-0058CC?style=for-the-badge\u0026logo=axios\u0026logoColor=white)\n\n### Library\n![react](https://img.shields.io/badge/React-555555?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n![tailwind](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n![react-router-dom](https://img.shields.io/badge/React_Router-0081CB?style=for-the-badge\u0026logo=react-router\u0026logoColor=white)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchay140%2Fmbit-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchay140%2Fmbit-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchay140%2Fmbit-test/lists"}