야금 (Ya-Geum)

야무진 금융 챌린지 — 소비를 기록하고, 절약을 경쟁하는 모바일 가계부 앱

---

소개

야금은 KB국민은행 스타일의 UI를 기반으로 만든 개인 재무 관리 모바일 웹 앱입니다.
단순한 수입·지출 기록을 넘어, 월별 챌린지와 절약 랭킹 시스템을 통해 소비 습관 개선을 유도합니다.

---

팀원 및 역할

이름	담당 기능	비고
양승환 (팀장)	거래내역 메인, 거래 추가 바텀시트, json-server API 설계, 챌린지 DB 구조 설계	백엔드 배포 (Railway)
강채연	라우터 구성, 앱 레이아웃, 공통 디자인 시스템 (컬러·타이포), 하단 네비게이션
김건우	로그인, 회원가입 (3단계 플로우), 사용자 인증
이채연	월별 요약 (차트, 순이익 테이블, 카테고리별 지출)
장지연	챌린지, 절약 랭킹, 프로필	프론트엔드 배포 (Vercel)

---

주요 기능

가계부

• 월별 수입·지출 내역 기록 및 조회
• 카테고리 필터 (식비, 카페, 쇼핑, 교통, 여가, 의료 등)
• 날짜별 그룹핑 및 일별 합계 표시
• 드래그로 닫는 모달 방식의 거래 추가

요약

• 월별 수입·지출 막대 차트 시각화
• 월별 순이익 테이블 (수입 / 지출 / 순이익)
• 카테고리별 지출 비율 바 차트

챌린지

• 운영자가 매월 지정한 절약 챌린지 참여 (예: 10만원 한달살기)
• 나의 소비 금액 실시간 진행률 표시
• 같은 챌린지 참여자 간 절약 금액 기준 실시간 랭킹 (3초 폴링)
• 소비 0원인 유저는 랭킹 미노출

프로필

• 닉네임·프로필 이미지 수정
• 챌린지 성공 횟수 기반 레벨 시스템
• 나의 챌린지 히스토리 (성공 / 실패 / 진행중 상태 표시)

인증

• 이메일 + 비밀번호 로그인 / 회원가입
• 신규 가입 시 이번 달 챌린지 자동 참여
• 스플래시 화면 → 로그인 → 메인 흐름

---

기술 스택

구분	기술
프레임워크	Vue 3 (Composition API, <script setup>)
빌드 도구	Vite 7
상태 관리	Pinia
라우터	Vue Router 5
스타일	Tailwind CSS 4
HTTP 클라이언트	Axios
날짜 유틸	Day.js
백엔드	json-server (Glitch 배포)
프론트 배포	Vercel

---

화면 구성

스플래시 → 로그인 / 회원가입
              ↓
    ┌─────────────────────┐
    │  NavBar (야금 로고)   │
    ├──────┬──────┬───────┤
    │ 가계부│ 요약 │챌린지 │ 프로필
    └──────┴──────┴───────┘
              ↕ (좌우 스와이프 탭 전환)
    BottomBar (가계부 / 요약 / 챌린지 / 프로필)

---

프로젝트 구조

src/
├── api/            # axios 인스턴스, 트랜잭션/챌린지 API
├── assets/         # 아이콘, 이미지, 전역 CSS
├── components/
│   ├── challenge/  # ChallengeCard, RankingList
│   ├── common/     # NavBar, BottomBar
│   ├── profile/    # ProfileCard, ChallengeHistory, ChallengeItem
│   ├── Register/   # 회원가입 단계별 컴포넌트
│   └── transaction/# TransactionItem, TransactionModal
├── router/         # Vue Router 설정
├── stores/         # Pinia 스토어 (user, budget, register)
├── utils/          # format, icons 유틸
└── views/          # 각 탭 뷰 (Home, Summary, Challenge, Profile 등)

---

디자인 시스템

KB국민은행 브랜드 컬러 기반의 커스텀 Tailwind 테마를 사용합니다.

토큰	용도
kb-yellow	주요 액션, 강조
kb-income	수입 (초록)
kb-expense	지출 (빨강)
kb-profit	본문 텍스트
kb-app-bg	배경
kb-card	카드 배경

---

협업 컨벤션

커밋 메시지, 이슈, PR, 브랜치, 폴더 구조 등 팀 협업 규칙은 CONVENTION.md를 참고하세요.