Overview

💫 프로젝트 기간 : 2023. 05. 29 ~ 2023. 07. 06

👊🏻 Introduce

Save Game은

소비 절약을 위한 챌린지를 만들어 서로의 지출을 공유하며 절약에 대한 동기부여를 제공하는 서비스입니다

💰 카테고리 별로 지출을 기록하여 나만의 지출 가계부를 만들어보세요!

📢 목표 지출 금액 혹은 도전하고픈 카테고리 별 챌린지에 참여해보세요! 해당하는 챌린지가 존재하지 않는다면 직접 만들어서 참여자를 모집해보세요!

😀 오늘 사용한 지출 내역, 있었던 일을 다른 사람들과 나눠보세요! 함께 나누면 즐거움이 2배!

🥇절약왕은 누구? 누적 지출 금액에 따라 챌린지 내 순위가 매겨집니다. 절약왕이 될 수도, 낙오자가 될 수도 있어요. 당신의 운명은?

시연 영상

녹화_2023_07_06_18_34_09_341.mp4

Project

• 🌟 배포 링크 (https://save-game-jeongseonp.vercel.app/)

• ⚙ 프로젝트 아키텍쳐 (https://miro.com/app/board/uXjVM_lbK)

• 🐱 Github (https://github.com/save-game/frontend)

---

🛠 기술 스택

Frontend

• React
• Typescript
• Recoil
• React-Router-Dom
• React-Query
• browser-image-compression
• React-Datepicker
• React-Hook-Form
• yup
• React-Chartjs
• firebase

Styles

• Tailwind CSS
• Daisy UI
• Styled-Component
• React-icons

Backend

• Language : Java 11
• Framework : Springboot
• Build Tool : Gradle
• DB : MySQL
• Test : Junit, Postman
• JPA
• Auth : Jwt, Spring Security
• Docker
• AWS(EC2, RDS)
• Kakao API
• Spring Scheduler
• QueryDSL

CI / CD

• Deploy
  • Vercel
  • Docker
  • Cloud Service : Google Cloud Platform
  • Jenkins
• Communication
  • Slack
  • Gather
  • Github

📋 ERD

🔗 담당 기능

• 회원가입 기능 : react-hook-form과 yup을 이용해 유효성 검사와 중복체크를 구현했습니다.

• 챌린지
  • 필터 기능 :텍스트 입력, 카테고리 선택, 금액 설정 슬라이드, 날짜 선택 처럼 다양한 필터를 통해서 챌린지, 지출 내역을 찾을 수 있게 만들었습니다.
  • 등록 기능 : react-hook-form을 활용하여 새로운 챌린지 등록폼 작성했습니다.
  • 나가기 기능

• 게시판 기능
  • 게시글 이미지 등록 : 사용자가 이미지를 선택하면 Input file에 onChange로 선택된 파일을 감지하여 URL.createObject메서드로 구한 로컬 url로 화면에 미리보기를 표시합니다. 이미지 용량을 줄이기 위해 Brower-image-compression으로 리사이징 후 firebase storage에 저장 및 firebase의 url을 구해 백엔드 서버에 저장했습니다.
  • 게시글 수정 / 삭제 : userQuery로 쿼리를 받아오고 useMutation을 사용하 Mutation onSuccess에 해당 쿼리 키를 invalidate하여 새로 데이터를 받아오도록해서 불필요한 데이터 요청을 방지했습니다.

• 가계부 기능
  • 필터 기능 : 월별, 기간별(최근 한달, 최근 3개월, 최근 6개월), 카테고리 별 필터를 구현하였습니다.

🌷 Bud 소개

• 이단비 / FE
• 이상호 / FE
• 박정선 / FE
• 김성재 / BE
• 김창호 / BE
• 손진성 / BE

프로젝트를 마치며

프로젝트를 하면서 좀 더 공부해야 할 부분들도 보이고 팀원들과 소통하는 과정에서 많이 배웠습니다. 저의 목표는 맡은 바 최선을 다하자였는데 민폐를 안끼쳤으니 목표는 채운 듯 합니다. 이슈는 바로바로 기록해놔야 한다는 깨달음을 얻기도 했고 팀원들과 대화는 자주 할수록 좋다라는 것도 느꼈습니다. 이번 프로젝트로 많은 것을 얻어간 듯 합니다.