/Find-My-Roomie

[React] 나의 룸메이트 유형이 궁금하다면?

Primary LanguageJavaScript

💚 find my Roomie

나의 룸메이트 유형을 찾고 싶다면 지금 바로 테스트 해보세요!
나와 잘 맞는 룸메이트 유형과 피하면 좋은 룸메이트 유형을 알려드려요.
(본 프로젝트는 DSC EWHA 2기 React3 팀의 프로젝트입니다.)

테스트 하러 가기


✨ 기능

* 테스트 페이지

  1. 테스트하기 버튼을 통해 테스트를 시작합니다.
  2. 문제에 따라 여러 선택지 중 하나를 선택할 수 있으며, 문제 번호에 맞게 프로그레스바가 채워집니다.
  3. 일정 개수의 문제를 맞출 경우 로딩 화면으로 넘어가며, 결과 확인 버튼을 누르면 결과 화면으로 이동합니다.

* 결과 페이지

  1. 선택지에 따라 결정된 본인의 유형 및 설명을 확인할 수 있습니다.
  2. 본인과 잘 맞는 유형과 잘 맞지 않는 유형을 확인할 수 있습니다.
  3. 결과를 카카오톡으로 공유하거나, 링크 복사할 수 있습니다.
  4. 테스트 첫 화면으로 돌아가거나, 모든 유형에 대해 살펴보는 페이지로 이동할 수 있습니다.
  5. 개발자 소개 페이지로 이동할 수 있습니다.

* 모든 유형 확인 페이지

  1. 모든 유형을 한번에 확인할 수 있습니다.
  2. 테스트 첫 화면으로 돌아가거나, 개발자 소개 페이지로 이동할 수 있습니다.
pic_battery pic_cleaner pic_plant pic_tumbler pic_pajamas pic_bluetooth pic_instantrice pic_eyepatch
보조배터리 휴대용 손소독제 베란다 화분 텀블러 파자마 블루투스 스피커 즉석밥 안대
pic_multi pic_gwajam pic_coffee pic_candlewarmer pic_wine pic_bedtable pic_moodlight pic_game
멀티탭 과잠 커피머신 캔들워머 와인잔 베드테이블 무드등 보드게임

* 개발자 소개 페이지

  1. 개발자에 대한 소개를 확인할 수 있으며, 더 알아보기를 클릭 시 각 개발자의 SNS로 연결됩니다.
  2. 테스트 첫 화면으로 돌아가거나, 모든 유형에 대해 살펴보는 페이지로 이동할 수 있습니다.

* 404 NOT FOUND

  1. 없는 페이지임을 알려주는 문구를 확인 후 테스트 첫 화면으로 돌아갈 수 있습니다.

🗂 프로젝트 구조

├── App.js
├── assets
│   ├── btn
│   │   ├── btn_kakao.svg
│   │   └── btn_link.svg
│   ├── developers
│   │   ├── kahyun.png
│   │   ├── mihey.png
│   │   └── sayyoung.png
│   ├── result
│   │   └── pic_cry_for_kakao.png
│   └── ewhasymbol.png
├── components
│   ├── BoxComponent.js
│   ├── ButtonComponent.js
│   ├── Kakao.js
│   └── ProgressBar.js
├── index.js
├── pages
│   ├── contents
│   │   ├── developers.js
│   │   ├── questions.js
│   │   └── results.js
│   ├── AllResultPage.js
│   ├── DeveloperPage.js
│   ├── LandingPage.js
│   ├── QuizPage.js
│   ├── ResultPage.js
│   └── WarningPage.js
├── reportWebVitals.js
├── setupTests.js
└── style
    ├── fonts
    │   ├── JalnanOTF.otf
    │   ├── Spoqa\ Han\ Sans\ Neo\ Bold.otf
    │   ├── Spoqa\ Han\ Sans\ Neo\ Light.otf
    │   └── Spoqa\ Han\ Sans\ Neo\ Regular.otf
    ├── index.css
    └── theme.js

🛠 기술 스택

      "dependencies": {
        "@testing-library/jest-dom": "^5.11.4",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "html-react-parser": "1.2.4",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.1",
        "styled-components": "^5.2.1",
        "web-vitals": "^0.2.4"
      }

💻개발자

🎩 나미혜 🐧 박가현 ☀️ 장세영
KakaoTalk_20210222_231012423 1 KakaoTalk_20210222_231030387 1 Group 50
무드등 과잠 와인잔