환경보호를 실천함에 있어 동기와 성취감을 주는 웹서비스
Eco2는 쉽게 지킬 수 있는 환경 미션 목록을 제공하고, 매일 실천을 독려하는 데일리 미션 기능과 보상을 통해 사용자가 꾸준히 환경 보호를 실천할 수 있도록 돕습니다. 또한, 퀘스트를 통해 다른 사람과 함께 미션을 진행할 수 있습니다.
2022.07.04 ~ 2022.08.19
- React 18.2.0
- node.js 16.13.2
- redux-toolkit 1.8.3
- HTML, CSS, JavaScript
- Java 11
- Springboot 2.7.1
- Spring Security
- JJWT 0.11.5
- Spring Data JPA
- MySQL
- Firebase 9.0.0
- Springboot Redis
- Stomp WebSocket 2.3.3-1
- Swagger
| 기능 | 내용 |
|---|---|
| 데일리미션 | 매일 인증할 미션을 선택하고, 인증 시 보상을 받을 수 있습니다. 오늘 하루 지킬 미션을 지정하고, 미션을 인증하면 나무를 꾸밀 수 있는 아이템을 받습니다. 모든 미션에 인증글을 작성하면 카카오톡 공유가 가능한 사진을 지급합니다. 미션은 카테고리 별로 분류되어 있고, 기본적으로 제공되는 미션 목록 외에 유저가 원하는 미션을 직접 작성할 수도 있습니다. 사용자의 선택을 돕고, 다양한 미션을 참여하도록 독려하기 위해 날씨에 따라 매일 미션 3개를 추천하고, 현재 가장 많은 사람이 참여한 미션 상위 5개를 제공합니다. |
| 퀘스트 | 위치를 기반으로 다른 사람과 함께 미션을 진행할 수 있습니다. 현재 위치 500m 주변에 핀을 꽂아 퀘스트를 생성할 수 있으며, 다른 사람이 생성한 퀘스트에 참여할 수도 있습니다. 미션을 인증하면 나무를 꾸밀 수 있는 아이템을 받습니다. 생성한 퀘스트의 참여인원이 설정한 목표인원에 도달하면 추가적인 아이템을 지급합니다. 하루 3개의 퀘스트를 생성할 수 있고, 퀘스트끼리의 간격이 20m를 초과해야 퀘스트를 생성할 수 있습니다. |
| 나무 꾸미기 | 데일리미션과 퀘스트를 통해 받은 보상으로 자신만의 나무를 꾸밀 수 있습니다. |
| 인증글 피드 | 카테고리 별로 다른 사람들이 작성한 인증글을 확인하고 소통할 수 있습니다. |
| 기능 | 내용 |
|---|---|
| 피드 조회 | 사용자들이 올린 인증글을 조회하고 다른 사용자들과 소통할 수 있습니다. 미션의 카테고리별로 피드를 조회하고, 게시물에 댓글, 좋아요를 달 수 있습니다. 자신이 쓴 게시글은 수정 및 삭제가 가능합니다. |
| 회원가입/로그인 | 일반 메일을 활용한 로그인과 소셜로그인이 가능합니다. 일반 메일로 로그인할 경우, 인증메일을 통해 사용자 인증을 받습니다. |
| 친구 | 다른 사용자와 친구관계를 맺을 수 있습니다. |
| 채팅 | 다른 사용자와 채팅을 할 수 있습니다. |
| 신고 | 부적절한 게시물, 댓글을 신고할 수 있습니다. 제대로 된 인증글이 아니거나, 광고글, 불쾌한 내용을 담은 글 또는 댓글의 경우 신고가 가능하고, 관리자 계정으로 로그인하여 신고된 글과 댓글을 조회하고 스크리닝 후 삭제할 수 있습니다. |
| 공지사항 | 관리자 계정으로 공지사항을 작성할 수 있습니다. 중요한 공지는 상단으로 고정시키는 기능을 사용할 수 있습니다. |
| 알림 | 다양한 알림을 받을 수 있습니다. 친구 신청 및 수락, 인증글에 달린 댓글, 신고당한 글/댓글의 삭제, 채팅 등의 알림을 받을 수 있습니다. |
- 미션과 퀘스트를 통해 얻은 보상 확인 및 활용하여 자신만의 나무 꾸미기
- 지금까지 참여했던 미션 카테고리 통계 확인 가능
- 날씨에 따라 매일 미션 3개 추천
- 트렌딩을 통해 가장 많이 참여한 미션 상위 5개 확인 가능
- 카테고리 별로 나눠진 추천리스트에서 원하는 미션을 선택
- 자주 하는 미션을 즐겨찾기로 등록 가능
- 커스텀 미션 기능을 통해 목록에 없는 미션을 직접 생성하여 실천 가능
- 미션 수행 후, 인증 게시물을 올리면 보상 아이템 지급
- 모든 데일리 미션 수행 후, 보상받기 버튼을 누르면 보상 이미지 지급
- 보상 이미지 다운로드, 카카오톡 공유 가능
- 지도에서 위치를 정해 퀘스트를 생성하고, 다른 사람과 함께 미션 진행 가능
- 하루에 퀘스트를 3개 생성했을 시, 추가적으로 퀘스트 생성 불가능
- 50m 이내에 퀘스트가 존재하면 퀘스트 생성 불가능
- 미션 수행 후, 인증 게시물을 올리면 보상 아이템 지급
- 퀘스트 참여 인원수가 목표 인원수에 도달하면 추가 보상 아이템 지급
-
회원가입
-
로그인
-
프로필
-
친구
-
채팅
-
신고
- 신고받은 게시물/댓글을 관리자가 확인 후 처리
-
공지사항
-
관리자는 공지사항 작성 가능
-
긴급 공지사항은 상단 고정
-
-
알림
-
계정설정
| Front-end | Back-end | ||||
|
|
|
|
|
|
| 김우원 | 신영제 | 조유진 | 김은경 | 김은혜 | 정세미 |
| 이름 | 개발 내용 |
|---|---|
| 김우원 | FE - react-dnd를 이용하여 이미지파일 드래그엔드롭 구현 - 모바일 환경에서는 작동 안하는 문제가 발생하여 Backends를 react-dnd에서 제공하는 TouchBackend로 변경 - TouchBackend로 변경 시 Preview가 보이지 않는 현상 발생… react-dnd의 isDragging 함수를 사용하여 드래그시 보여질 컴포넌트를 만들어서 해결 - kakao-map api를 활용한 위치기반 퀘스트 생성 및 참여 기능 구현 - kakao Developers의 maps api sample과 docs에서 제공하는 web Api자료를 분석하여 React 원하는 기능을 개발 할 수 있도록 코드 작성 - 퀘스트 생성시 퀘스트 정보가 담긴 마커를 반경 500미터 내에 찍을 수 있도록 클릭 이벤트 생성 - 모달 - 생성, 조회등에 사용될 모달 기능 직접 구현 - styled-components를 활용하여 자주 쓰이는 컴포넌트 제작 - redux/toolkit과 axios를 이용한 백엔드 서버와의 비동기 연동 및 상태관리 - .env.development와 .env.production파일을 나누어 배포와 로컬 테스트시 사용할 api key, base_url 관리 DevOps - Linux EC2 인프라 환경 세팅(Open jdk 11, mySQL, redis…) - 프론트엔드 백엔드 EC2 배포 - Nginx 웹서버 적용 - Certbot을 이용한 서비스 SSL 보안 적용 |
| 김은경 | - DB 설계 - Spring Data JPA 세팅 및 Entity 설계 - SpringSecurity를 이용한 권한 인증 구현 - JWT를 이용한 토큰 생성 구현 - 회원가입 API 및 이메일 인증 구현 - 미션리스트 관리 API 구현 - 데일리미션 관리 API 구현 - 관리자 신고 기능 API 구현 - 관리자 신고 서버 연동 및 CSS - Socket.io, STOMP를 이용한 실시간 채팅 서버 구현 - 채팅 서버 연동 및 CSS |
| 김은혜 | - 인증 게시물 등록 및 관리 - 사진 업로드, 수정, 조회 구현 - 댓글 및 좋아요 기능 구현 - 인증 게시물 등록시 통계치 연계 - 유저 페이지 및 특정 게시물 CSS 구현 |
| 신영제 | - 미션리스트 서버 연동 - 즐겨 찾기 추가 및 불러오기 서버 연동 - 추천 리스트 불러오기 서버 연동 - 미션 카테고리별 분류 - 미션 완료 등록하기 서버 연동 - 선택한 미션 별 동적 카운트 구현 - 함수 별 모달창 연동 |
| 정세미 | - DB 설계 - 소셜 로그인 - OAuth2를 활용한 카카오 로그인 구현 - Firebase Authentication을 이용한 구글 로그인 구현 - 계정정보, 회원정보 API - 친구 API - 퀘스트 API - 이미지 조회 API - 미션 추천 API - 공공데이터 API 활용 - Firestore 활용한 알림 기능 구현 |
| 조유진 | - 회원가입, 로그인 서비스 개발 - 이메일, 비밀번호, 에코네임 유효성 검사 - 유저 프로필 페이지 개발 - 회원 정보 수정 및 개인 피드 - date-fns를 활용하여 달력 개발 - 달력 내에 보상 이미지 저장 기능, 카카오톡 공유 기능 구현 - 공지사항 페이지 구현 - 메인 피드 및 게시물 - 카테고리 별 피드 분류 - 게시물 작성, 수정, 삭제, 신고 구현 - 수정, 삭제, 신고, 확인 모달 구현 |