한국의 첫 번째 모프계산기, MofMof 🦎

🦎 HOME PAGE

📝 MofMof Wiki

팀원 소개, 데일리 스크럼, 주간 Sprint 계획 및 리뷰, Ground Rule 등 프로젝트 과정이 담겨있는 공간입니다.

💡 기획 의도

모프(morph)란?

Polymorphism 단어에서 파생되었으며 다형성이라는 뜻을 가지고 있습니다. 다형성이란, 같은 종의 생물이지만 모습이나 고유한 특징이 다양한 성질을 말합니다. 예를 들어, 펫테일 게코라는 같은 도마뱀 종류더라도 모프에 따라서 색깔과 무늬, 패턴 이 등이 다른 생김새를 가지게 됩니다.

PMI

• Plus : 한국어로 제공하는 모프계산기 서비스(국내 유일), 입문자들을 위한 모프 소개 정보 제공
• Minus : 도마뱀 시장에서 가장 적은 비율을 차지하고 있는 종류인 펫테일 게코를 우선하여 서비스 제공
• Interest : 브랜드 color와 도마뱀 이미지를 사용하여 유저들에게 친근함과 우수한 사용자 경험 제공

STP + 벤치마킹

• Segmentation : 국내 모프계산기 서비스가 존재하지 않음, 파충류 시장 소비자들이 이용하고 있는 '파사모' 카페에 모프와 관련된 유사한 질문글이 많이 게시되고 있음
• 벤치마킹(Benchmarking) : 모프마켓, 영어로 되어있는 외국 모프계산기 사이트
• Targeting : 도마뱀을 키우기 시작하여 정보를 얻고자 하는 입문자
• Positioning : 한국어로 모프 계산기 서비스를 제공하는 유일한 플랫폼

🏆 프로젝트 목표

• [skill] 4가지 주요 기능 구현(모프계산기, 모프 소개, 메인 페이지, 게시판)
• [relationship] 혼자서 고민하지 말고 다같이 소통하기

✨ 디자인

🔎 기술 스택

• Front-End : CRA, styled-components, React Router
• Back-End : firebase
• Collaborate : git, GitHub, Figma, Discord

👀 프로젝트 주요 기능

모프 계산기(입력) : 부모 도마뱀의 각 유전자 값을 입력하는 페이지 입니다.

• ✅ 주요 기능 : 전체 모프 리스트 확인, 모프 검색, 선택한 모프 취소 기능, 입력한 값 초기화, 6개 이상 모프 선택 제한, 중복 모프 선택 제한

모프 계산기(결과) : 유저가 입력한 부모 모프 값을 바탕으로 퍼넷스퀘어 결과 값을 보여주는 페이지 입니다.

• ✅ 주요 기능 : 결과 값을 원형 그래프로 구현(react rechats 사용)하여 결과 % 비율을 pie 안에 위치, 결과값을 데이터 표로 구현, 다시하기 버튼 클릭시 입력페이지로 이동, 사용법 안내

모프 소개 : 입문자에게 모프 정보를 제공하는 MofMof만의 차별화된 서비스 페이지 입니다.

• ✅ 주요 기능 : 전체 모프 리스트 확인, 모프 검색, 필터링

모프 상세 페이지 : 더 많은 모프 이미지와 자세한 정보가 담긴 페이지 입니다.

• ✅ 주요 기능 : 이미지 크게 보기

스플래쉬/메인페이지

로그인/회원가입

🚀 프로젝트 사용법

npm i

npm start

# or

yarn

yarn start