Skip to content

Latest commit

 

History

History
354 lines (309 loc) · 15.4 KB

README.md

File metadata and controls

354 lines (309 loc) · 15.4 KB
Raw

🏃‍♀️ 내 손 안의 플로깅 앱 : 줍줍 🏃‍♂️

'나' 와 '환경' 모두를 생각하는 플로깅 어플리케이션 🌳
플로깅 기록을 보다 간편하게 작성해보세요 🌎


✈️ 프로젝트 결과

🔗 소개 및 시연 영상

🔗 ER Diagram

🔗 Figma

🔗 API 명세서


⏰ 개발 기간

2023년 10월 10일 ~ 2023년 11월 17일


👩‍💻 멤버 구성

멤버
김주현
김수민
박소윤
서원호
서지오
안 나
역할 팀장 / BackEnd FrontEnd BackEnd FrontEnd BackEnd / Infra BackEnd

📌 주요 기능

📍 현재 위치를 활용한 플로깅

  • 메인화면에서 플로깅 바로 시작하기 가능
  • 사용자 위치 실시간 조회
  • 실시간 플로깅 경로, 플로깅 시간, 거리, 칼로리 확인 가능

📅 캘린더를 활용한 기록 조회

  • 캘린더를 활용하여 일별 기록 조회 가능
  • 각 플로깅 기록의 거리, 시간, 칼로리, 이동경로 조회 가능
  • 각 쓰레기를 통해 획득한 코인을 일일 레포트에서 확인 가능

🗑️ 쓰레기통 위치 정보 제공

  • 쓰레기통 공공데이터 활용
  • 일반쓰레기통과 재활용쓰레기통 분리하여 제공
  • 지도 중심좌표를 기준으로 1km 이내 쓰레기통 조회

🤖 Trash.ai를 활용한 쓰레기 이미지 분석

  • 쓰레기 이미지 분류 AI를 활용하여 주운 쓰레기 감지
  • 60여가지 카테고리를 14개로 재범주화하여 간략화
  • 측정된 쓰레기 종류의 환경오염 척도에 따라 코인 획득 가능

🐧 나만의 캐릭터 "펭깅" 키우기

  • 마이페이지에서 플로깅 펭귄 캐릭터 확인 가능
  • 플로깅 도중 주운 쓰레기를 통해 획득한 코인으로 상점에서 아이템 구매하여 캐릭터에게 제공
  • 아이템 구매시 캐릭터의 exp 증가
  • 일정 exp 증가시 레벨업 후 펭귄 캐릭터 성장

📋 기록 누적 레포트 제공

  • 누적 레포트 화면을 통해서 지금까지 플로깅 누적기록 조회
  • 총 플로깅 횟수, 플로깅시간, 총 소모 칼로리, 각 쓰레기별 주운 개수 확인 가능

🎯 사용자 경험 향상

  • 직관적이고 사용하기 쉬운 인터페이스를 디자인하여 사용자의 참여를 유도
  • 리워드 시스템 등을 활용하여 사용자의 활동을 지속적으로 유도
  • 라이트 모드, 다크 모드 지원
  • 회원가입시 튜토리얼 지원
  • 사용자 의견 작성 페이지를 통해 사용자 의견 수렴 가능
  • 캐릭터 키우기 설명 페이지로 사용설명 제공

🖥️ 화면 설명

🔼 소셜 로그인 🔼 메인 페이지 🔼 사용자 키, 몸무게 정보 입력 🔼 사용자 생년월일, 성별 정보 입력



🔼 플로깅 시간, 거리, 칼로리 측정 🔼 플로깅 이동경로 기록 🔼 쓰레기통 조회 화면 🔼 쓰레기 분석 화면



🔼 플로깅 결과 화면 🔼 플로깅 기록 캘린더 🔼 플로깅 일별 조회 🔼 플로깅 일일 레포트



🔼 마이페이지(라이트 모드) 🔼 마이페이지(다크 모드) 🔼 다음 레벨 🔼 누적 레포트



🔼 상점 🔼 아이템 🔼 아이템 구매 🔼 설정화면



📌 기술스택

     🛠 Frontend Develop

TypeScript React Vite Redux TensorFlow

     🛠 Backend Develop
Java Spring Spring Gradle

     🛠 DataBase
MariaDB MongoDB Redis

     🛠 Infra
AWS Docker Jenkins Nginx Datadog

     🛠 SCM

Jira Notion Slack


🏛️ System Architecture

Architecture

👨‍💻 Structure

✍ Back-End

◼ Package Structure

├── board
│   ├── 📂 controller
│   │   ├── 📂 dto
│   │   │   ├── 📂 request
│   │   │   │   └── BoardListRequest
│   │   │   └── 📂 response
│   │   │       └── BoardListResponse
│   │   └── BoardController 
│   ├── 📂 service
│   │   └── BoardService
│   ├── 📂 domain
│   ├── 📂 repository
│   │	├── BoardSpringDataRepository
│   │	└── BoardQueryRepository
│   └── 📂 exception
├── member
│   ├── 📂 controller
│   ├── 📂 application
│   ├── 📂 persistence
│   ├── 📂 domain
│   └── 📂 exception
├── Application

✍ Front-End

Directory structure 

├── public
│   ├── index.html
│   └── web.config
├── src
│   ├── 📂 api
│   ├── 📂 assets
│   │   ├── 📂 images
│   │   ├── 📂 font
│   ├── 📂 router
│   ├── 📂 components
│   ├── 📂 hooks
│   ├── 📂 pages
│   ├── 📂 styles
│   ├── 📂 utils
│   ├── vite-env.d.ts
│   ├── App.tsx
│   └── main.tsx
├── .eslintrc.cjs
│── .gitignore
├── .prettierrc
├── package.json
├── tsconfig.json
├── tsconfig.node.json
├── yarn.lock
└── vite.config.js

🎊 Git Commit Convention

💡 Commit Type

  • 커밋 메시지는 타입과 제목으로 구성되고, 태그는 영어로 쓰되 첫 문자는 소문자로 한다.
  • 타입: 제목 형태이며 : 뒤에만 space가 있음에 유의한다.
  • 타입
    • feature: 새로운 기능 추가
    • fix : 오류 수정
    • docs : 문서 수정
    • style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우, 주석추가 및 수정
    • refactor : 코드 리펙토링
    • test : 테스트 코드, 리펙토링 테스트 코드 추가
    • chore : 위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 수정 등)
    • hotfix : 긴급 수정 사항
    • rename : 파일 혹은 폴더명 수정, 옮기기
    • remove : 파일 삭제

🎃 Git Flow 전략 (Branch)

💡 git flow 과정

  • master 브랜치에서 develop 브랜치를 분기합니다.
  • 개발자들은 develop 브랜치에 자유롭게 커밋을 합니다. 도안
  • 기능 구현이 있는 경우 develop 브랜치에서 feature/{fe|be}-{#issue-number} 브랜치를 분기합니다.
  • 배포 전 테스트는 develop 브랜치에서 진행한 후 master에 merge합니다.
    • master: 기준이 되는 브랜치로 서비스를 배포하는 브랜치
    • develop: 개발 브랜치로 개발자들이 이 브랜치를 기준으로 각자 작업한 기능들을 Merge
    • feature: 단위 기능을 개발하는 브랜치로 기능 개발이 완료되면 develop 브랜치에 Merge