hue-leica / IN-CYWORLD-FRONT

🌐 90년대 생의 밈을 테스트할 수 있는 웹 서비스입니다.

인-싸이월드

📑 프로젝트 소개

🌐 90년대생의 밈 테스트 기능을 제공하는 웹 서비스입니다.

PROJECT PERIOD: 2020.11.21 ~ 2020.11.22, 2021.01.25 ~ 2021.02.09

✨ 주요 기능

🧔 메인

💡 메인

• [1] 자신의 출생연도를 입력하고 테스트를 시작한다.

🧔 테스트

💡 테스트

• [1] 90년대 유행했던 짤을 보고 정답을 맞히며 테스트를 진행한다.

🧔 결과

💡 결과

• [1] 테스트 결과에 따라 레벨을 4단계로 나누어 자신의 레벨(점수 및 연령대별 상위 퍼센트)을 보여준다.

• [2] 레벨에 따른 영상을 추천해준다!

• [3] 테스트를 처음부터 다시 진행하거나 최종 결과를 공유할 수 있다.

🗂 프로젝트 구조

public
 ┣ images
 ┃ ┣ Question_1.png
 ┃ ┣ ...
 ┃ ┗ result-background.png
 ┣ favicon.ico
 ┣ index.html
 ┗ meta-image.png
src
 ┣ assets
 ┃ ┣ icons
 ┃ ┃ ┣ btn-retry.svg
 ┃ ┃ ┣ ...
 ┃ ┃ ┗ result-sketchbook.svg
 ┃ ┗ images
 ┃ ┃ ┣ landing.png
 ┃ ┃ ┣ ...
 ┃ ┃ ┗ result-sketchbook.png
 ┣ components
 ┃ ┣ style
 ┃ ┃ ┗ Landing.scss
 ┃ ┗ Background.js
 ┣ lib
 ┃ ┣ api
 ┃ ┃ ┗ Answer.js
 ┃ ┗ data
 ┃ ┃ ┗ Question.js
 ┣ pages
 ┃ ┣ LandingPage.js
 ┃ ┣ QuestionPage.js
 ┃ ┗ ResultPage.js
 ┣ App.css
 ┣ App.js
 ┣ index.css
 ┣ index.js
 ┗ reportWebVitals.js

🛠 사용 기술

Front-End	Back-End	DataBase	Front-Server	Back-Server	Tool
JavaScript React Axios	JavaScript Node.js	MySQL	Vercel	AWS EC2	Git Figma Notion

"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.0",
"node-sass": "4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4",
"styled-components": "^5.2.1"

🖥 Local 실행 방법

[1] Yarn 설치

Yarn 설치 바로가기

[2] Clone the Repo

git clone https://github.com/mnxmnz/IN-CYWORLD.git

[3] Install Packages

yarn

[4] Run the Project

yarn start

💻 개발자

김민지	김정욱	안채린

🔗 URL

• 인-싸이월드 바로가기