Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

265 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

OSoRi_Repository

오(O)늘의 소(So)비 리(Ri)포트

0. Getting Started (시작하기)

[서비스 링크] : http://13.239.33.140



1. Project Overview (프로젝트 개요)

  • 프로젝트 이름: 오소리

1. 문제 제기 (Problem Statement)

기존의 가계부 서비스들이 가진 한계와 사용자가 느끼는 피로도를 다음과 같이 정의했습니다.

  • 수동 기록의 번거로움: 보험료, 구독료 등 반복되는 고정 지출을 매번 손으로 입력해야 하며, 영수증 정보를 일일이 타이핑하는 과정에서 사용자는 쉽게 지치고 중도 포기하게 됩니다.
  • 단순 사후 리포트의 한계: 과거 지출 내역의 합계만 보여주는 정적인 리포트는 사용자에게 실질적인 자극이나 미래 지출에 대한 가이드를 제공하지 못합니다.
  • 공동 관리의 비효율성: 그룹 지출 시 별도의 계산기로 정산하고 각자의 앱에 다시 기록하는 이중 수고가 발생하며, 멤버 간 지출 현황을 실시간으로 파악하기 어렵습니다.
  • 지속 가능성 부족: 혼자 기록하고 반성하는 과정이 의무적으로만 느껴져 동기부여가 결여되고 '작심삼일'로 끝나기 쉬운 시스템입니다.

2. 프로젝트 목적 (Project Objectives)

'오소리 가계부'는 위와 같은 문제를 해결하여 "함께 관리하고, 자동으로 기록하며, 미래를 예측하는" 혁신적인 가계부 경험을 제공하고자 합니다.

  • 자동화된 기록 시스템 구축: 영수증 OCR 스캔과 Scheduler 기능을 활용하여 번거로운 입력 과정을 최소화하고, 단 3초 만에 지출을 자동 등록하는 편리함을 제공합니다.
  • 데이터 기반의 미래 예측: 단순한 과거 기록을 넘어 선형 회귀 분석을 통해 다음 달 지출액을 예측함으로써, 계획적인 소비 습관 형성을 돕습니다.
  • 실시간 협업 및 소셜 관리: WebSocket 알림을 통한 실시간 지출 공유와 그룹 챌린지 기능을 도입하여, 가계부 작성을 재미있는 소설 활동으로 전환하고 지속 가능성을 높입니다.
  • 스마트한 공동 정산: N분의 1 자동 계산 및 멤버별 자동 기입 기능을 통해 그룹 관리의 수고를 획기적으로 줄입니다.


2. Team Members (팀원 및 팀 소개)

서채원 전성중 조수인 강민채
서채원 전성중 조수인 강민채
Team Leader Team Member Team Member Team Member
GitHub GitHub GitHub GitHub


3. Key Features (주요 기능)

  • 회원가입:

    • 회원가입 시 DB에 유저정보가 등록됩니다.
  • 로그인:

    • 사용자 인증 정보를 통해 로그인합니다.
  • 개인 가계부:

    • 개인 가계부 관리와 수입/지출 내역을 통해 소비패턴 분석과 뱃지 획득이 가능합니다.
  • 그룹 가계부:

    • 가족/연인과 함께 수입/지출을 관리하며 챌린지를 통해 뱃지 획득을 하실 수 있습니다.
  • 실시간 알림:

    • 그룹 가계부에서 초대와 수입/지출 내역 추가 시 실시간 알림을 보내드립니다.
  • 지출 분석:

    • 개인 가계부와 그룹 가계부의 카테고리별, 멤버별, 등 다양한 지출 분석
  • 지출 등록:

    • 새로운 내역 등록 시 사용할 수 있는 영수증 OCR 스캔과 고정 지출 자동 등록
  • 멤버십 구축:

    • 오소리를 이용하는 회원으로 소속감과 재미를 느낄 수 있는 여러 챌린지와 뱃지 발급 시스템
  • 개인화 금융 비서/챗봇:

    • 개인 수입/지출 데이터를 이용한 개인화된 금융 비서


4. Tasks & Responsibilities (작업 및 역할 분담)

서채원 서채원
  • 프로젝트 계획 및 관리
  • 팀 리딩 및 커뮤니케이션
  • 메인 페이지 구현
  • 마이 페이지 - 진행 중인 가계부 목록/이전 가계부 목록 조회 기능 구현
  • 그룹 가계부 이메일로 회원 초대 기능 구현
  • 실시간 그룹 가계부 초대 요청 알림 수락/거절 기능 구현
  • 이전 그룹 가계부 목록 조회
  • 그룹 가계부 상세 페이지 구현
  • 그룹 가계부 수입/지출 내역 목록 조회/삭제 기능 구현
  • 가계부 관리자 기능 구현(예산 금액 수정, 멤버 추가/삭제, 가계부 삭제)
  • Gemini API를 사용한 개인화 질문봇 기능 구현
  • 수입/지출 내역 추가 시 실시간 알림 기능 구현
전성중 전성중
  • 회원 가입 페이지 구현
  • 회원가입 기능 구현
  • 로그인 페이지/기능 구현(소셜 로그인(API) 포함)
  • 회원 상태에 따른 서비스 제한 기능 구현
  • 내 가계부 고정 지출 등록 기능 구현
  • 회원정보 수정 페이지 구현
  • 수정 기능(사용자 정보 변경, 비밀번호 수정, 회원 탈퇴) 구현
  • 계정 잠금 처리(로그인 5회 이상 실패 시 10분 잠금)
  • 로그인 마지막 기록 갱신 및 실패 횟수 기록 기능
조수인 조수인
  • 캘린더뷰 페이지 구현
  • 개인 가계부 소비 패턴(카테고리별 소비 합산/월말, 다음달 지출액 예상) 분석 기능 구현
  • 그룹 가계부 기간 내 가용 예산 계산 기능/사용자 소비 차트 구현
  • 마이페이지 내 이상치 탐지를 통한 카테고리별 과다 지출 알림 기능 구현
  • 새로운 챌린지 신청 기능 구현
  • 그룹 챌린지 성공/실패 판정 여부 로직
  • 회원가입 시 기본 뱃지, 그룹 챌린지 달성 시 뱃지 지급 기능 구현
  • 내 뱃지 페이지 구현
  • 마이페이지 내 최근 받은 뱃지 보여주기 기능 구현
강민채 강민채
  • (개인/그룹)새로운 가계부 추가 페이지 구현
  • 가계부 정보 입력폼 구현
  • 개인 가계부 상세 페이지 구현
  • 개인 가계부 수입/지출 내역 목록 조회 기능 구현
  • 예산 금액 수정 기능 구현
  • 수입/지출 내역 추가 기능 구현
  • 최근 수입/지출 내역 목록 조회/선택 시 자동 입력 기능 구현
  • 영수증 분석하기 (네이버 클로바/카카오 검색 API) 기능 구현


5. Technology Stack (기술 스택)

5.1 Frontend

CSS CSS
JavaScript JavaScript
HTML HTML
React React
React Router React Router
Axios Axios

5.2 Backend

Java 17 Java 17
Spring Boot 3.x Spring Boot
MyBatis MyBatis
OJDBC OJDBC
Maven Maven
Lombok Lombok

5.3 Framework / Library

Naver OCR API Naver OCR API
Kakao API Kakao API
Gemini API Gemini API
Spring WebSocket Spring WebSocket
STOMP
SocketJS
Spring Security Crypto Spring Security Crypto
JWT JWT
GSON GSON

5.3 Tool

STS4 STS4
Visual Studio Visual Studio
Node.js Node.js
Oracle SQL Developer SqlDeveloper

5.4 Database

| Oracle SQL | SqlDeveloper |

5.5 Cooperation

Git git

6. Project Structure (프로젝트 구조)

project/
├── public/
│   └── vite.svg                    # Vite 기본 로고 파일
├── src/
│   ├── Data/                       # 급여일, 카테고리, 가계부 데이터 생성기
│   ├── api/                        # 각 api 모
│   ├── assets/                     # React 공식로고 파
│   ├── components/common/          # 공통 컴포넌트
│   ├── context/                    # 로그인 상태 관리 
│   ├── features/                   # 각 페이지별 컴포넌트
│   │   ├── Util/                   # 소비 패턴 분석
│   │   ├── alarm/                  # 실시간 알림 커스텀 훅 
│   │   ├── auth/pages/             # 챌린지, 소비/지출, 고정지출, 멤버 관련 컴포넌트 
│   │   ├── group/                  # 그룹 가계부 관련 컴포넌트 
│   │   ├── menu/                   # 캘린더뷰 컴포넌
│   ├── hooks/                      # 그룹 가계부 훅
│   ├── layouts/                    # 인증 관련 레이아 컴포넌트
│   ├── routes/                     # 보안 라우트 컴포넌트
│   ├── App.jsx                     # 라우팅 구조, 소켓 핸들, 컨트롤러 
│   ├── index.css                   # 전역 css 파일
│   └── main.jsx                    # React 엔트리 포인트, 컴포넌구 구조
├── package-lock.json               # 정확한 종속성 버전이 기록된 파일로, 일관된 빌드를 보장
├── package.json                    # 프로젝트 종속성 및 스크립트 정의
├── .gitignore                      # Git 무시 파일 목록
└── README.md                       # 프로젝트 개요 및 사용법


7. ERD Cloud (DB 구조)

스크린샷 2026-03-06 200154

8. Development Workflow (개발 워크플로우)

브랜치 전략 (Branch Strategy)

우리의 브랜치 전략은 Git Flow를 기반으로 하며, 다음과 같은 브랜치를 사용합니다.

  • Main Branch

    • 배포 가능한 상태의 코드를 유지합니다.
    • 모든 배포는 이 브랜치에서 이루어집니다.
  • {name} Branch

    • 팀원 각자의 개발 브랜치입니다.
    • 모든 기능 개발은 이 브랜치에서 이루어집니다.


9. Coding Convention

명명 규칙

  • 상수 : 영문 대문자 + 스네이크 케이스
const NAME_ROLE;
  • 변수 & 함수 : 카멜케이스
// state
const [isLoading, setIsLoading] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
const [currentUser, setCurrentUser] = useState(null);

// 배열 - 복수형 이름 사용
const datas = [];

// 이벤트 핸들러: 'on'으로 시작
const onClick = () => {};
const onChange = () => {};

// 반환 값이 불린인 경우: 'is'로 시작
const isLoading = false;

// Fetch함수: method(get, post, put, del)로 시작
const getEnginList = () => {...}


10. 커밋 컨벤션

type 종류

feat : 새로운 기능 추가
fix : 버그 수정
docs : 문서 수정
style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
refactor : 코드 리펙토링
chore : 빌드 업무 수정, 패키지 매니저 수정

커밋 예시

== ex1
✨Feat: "회원 가입 기능 구현"

SMS, 이메일 중복확인 API 개발

== ex2
📚chore: styled-components 라이브러리 설치

UI개발을 위한 라이브러리 styled-components 설치


11. WebPage Overview (웹사이트 시현)

마이페이지 / 자산관리 탭

image image image

내 가계부

image image

그룹 가계부

image image

캘린더뷰 탭

image

고정지출 탭

image image

챌린지 탭

image image image image

내 뱃지 탭

image

프로필 설정 탭

image

질문봇

image image

About

KH 파이널 프로젝트 프론트 레파지토리

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages