💡 마리쥬는 마이 리틀 쥬라기의 약자로, 이색동물 스트리밍 서비스입니다

🦎기획배경

최근 이색 동물에 대한 사람들의 관심이 증가하고 이색 반려 동물 시장이 떠오르고 있습니다.

이색 동물을 키우기 위해서는 양육 환경 조성을 위한 충분한 양육 정보가 필요합니다. 하지만 흔한 반려동물에 비해 정보가 부족하고, 접근성이 떨어진다는 단점이 있습니다.

마이리틀 쥬라기는 최근 떠오르는 이색 반려동물 시장을 공략한 전국 이색 반려동물 샵 통합 관리 서비스입니다.

체험 이벤트 예약과 실시간 방송 중계 모니터링을 지원합니다.

이색 반려동물 숍은 가게 홍보를, 사용자는 이색동물 정보를 보다 쉽게 수집할 수 있습니다.

사용자용 서비스 페이지

메인화면

• 현재 스트리밍중인 동물 방송 목록 제공
• 방송 썸네일과 함께 보이는 방송중인 동물 프로필

방송 필터링

• 원하는 동물 방송에 대한 필터링 지원
• 키워드 검색 및 필터링 버튼 지원

방송 화면

• 선택한 동물에 대한 실시간 방송
• 상호작용 버튼을 이용한 놀이 이벤트
• 먹이 투표로 급여 먹이 투표 가능
• 특별한 순간을 보면 지급되는 배지

로그인/회원가입

• 실시간 validation check
• 수정 필요한 입력에 대한 시각적인 표시 제공

파충류 샵 화면

• 전국 파충류 샵 정보를 지도로 한눈에
• 확대 축소에 따라 변하는 파충류 샵 목록
• 샵 이름 및 취급 동물 목록 필터링 지원

• 지도 다크모드 완벽지원

샵 상세화면

• 샵 동물 정보부터 로드뷰까지 샵 정보 열람가능
• 방송중인 해당 샵 동물 방송 목록 제공
• 체험 프로그램 예약 가능
• 샵 팔로우 기능 제공

동물 사전

• 마리쥬에서 방송중인 동물 종에 대한 정보 제공
• 디지털사전을 연상시키는 귀여운 디자인
• 각 동물 종분류에 해당하는 샵 동물 목록 제공
• 샵 동물 클릭 해당 동물의 상세 정보 열람 가능

동물 상세화면

• 샵 내 동물의 정보와 종의 정보를 제공
• 연관 동물 목록 제공

마이페이지

• 사용자의 배지 컬렉션
  • 배지 수집률 게이지로 시각화
• 팔로우중인 샵 목록 swiper
• 체험 프로그램 예약 목록 swiper
  • 예약 취소 및 예약 현황 확인 가능

사업자용 웹페이지

방송화면

• 발급받은 사업자 아이디로 로그인
• 방송할 동물 선택하여 방송 진행
• 먹이 투표 등 사용자 이벤트 실행 가능

---

✨ Co-work tool ✨

🖥 개발환경

• 형상관리 : Gitlab
• 이슈관리 : Jira
• 커뮤니케이션 : Mattermost, Notion
• 디자인 : Figma

🛠 기타 편의 툴

• Postman
• Termius

✨ Front End Stack ✨

• IDE : Visual Studio Code 1.75.1
• language
  • Typescript 4.9.4
  • node js 18.13.0
• Framework
  • react 18.2.0
  • react toolkit 1.9.1
• Http : Axios 1.2.3
• API
  • kakao Map
• formatter
  • eslint 8.32.0
  • prettier 2.8.3
• router : react-router-dom 6.7.0
• state management tool
  • react-redux 8.0.5
  • reduxjs/toolkit 1.9.1
• Library

    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.11.5",
    "@reduxjs/toolkit": "^1.9.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.11",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@types/react-router-dom": "^5.3.3",
    "@types/styled-components": "^5.1.26",
    "axios": "^1.2.3",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-prettier": "^4.2.1",
    "moment": "^2.29.4",
    "openvidu-browser": "^2.25.0",
    "prettier": "^2.8.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.7.0",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.6",
    "swiper": "^9.0.2",
    "typescript": "^4.9.4",
    "web-vitals": "^2.1.4"

✨ Back End Stack ✨

• IDE : Intellij IDEA 2020.3
• language : Java openjdk 11.0.15 2022-04-19 LTS
• Springboot 2.7.8
  • Spring Data JPA
  • Lombok
  • Spring Security
  • Spring Cloud 2021.0.5
  • Spring Cloud Discovery
  • Spring Cloud Config
  • Validation
  • Spring Web
• Build tool : Gradle 7.6
• QueryDsl 1.0.10
• Swagger 2.9.2
• p6spy 1.8.1
• com.auth0:java-jwt 3.10.2
• Openvidu 2.25.0

📚 DB

• Mysql 8.0.32-0ubuntu0.20.04.2

🛰 Server

• https TLS 1.0
• Ubuntu 20.0.4
• Nginx 1.18.0
• Docker 20.10.23
• Jenkins Jenkins/jenkins:lts-jdk11(Image tag name)

---

🏰 시스템 아키텍쳐

✨ 기술 특이점

🎯 MSA 설계

• 배포

  • 서비스별 배포가 가능.(배포시 전체 서비스의 중단이 없음)
  • 특정 서비스의 요구사항만 반영하여, 빠르게 배포 가능.

• 확장

  • 다양하고, 새로운 서비스에 대한 유연한 확장 가능.

• 장애

  • 일부 서비스의 장애가 전체 서비스로 확장될 가능성을 차단. (User service 에 해당하는 장애가 Owner service에 영향을 미치지 ❌)
  • 부분적 장애에 대한 격리 처리 가능.

---

🦎 요구사항 정의 및 기능 명세

요구사항 정의 및 명세

---

🐢 화면 설계서

화면 설계서

---

🦖 ER Diagram

ER Diagram

---

🍀 MARIZOO 팀의 개발자들을 소개합니다!!

한유경	정민우	윤성운	김승희	이성복	최희수
Leader & FrontEnd	Frontend	Frontend	Backend	Backend	Backend