“수입이 얼마일까 이번 달은?”
SOODAL($OODAL)은 사용자의 금융 생활을 효율적으로 개선할 수 있는 가계부 웹 서비스입니다. 마이데이터와 개인화된 금융 서비스가 핵심으로 대두되면서 개인의 체계적인 재정 관리를 돕기 위해 SOODAL은 다음과 같은 기능을 제공합니다. 메인 대시보드 페이지에서 월별 수익/지출 그래프와 최근 거래 내역, 지출 건별 많은 순 내역을 확인하고, 거래 내역 조회 페이지에서 총 거래 내역을 조회 및 삭제, 추가 할 수 있습니다. 또한 수달 캘린더 페이지에서는 일별로 소비 내용을 직관적으로 파악할 수 있어 사용자의 효율적인 재정 관리를 돕습니다. SOODAL을 통해 보다 건강한 금융 생활을 시작하세요!
SOODAL의 대시보드는 사용자가 한눈에 월별 수입 및 지출 현황을 파악할 수 있도록 설계되었습니다.
-
월별 지출 내역: 각 달의 지출과 수입을 그래프로 시각화하여 보여줍니다.
-
최근 거래 내역: 최근 발생한 거래 내역을 날짜/금액/내역/타입 항목으로 일목요연하게 정리하여 제공합니다.
-
지출 TOP3 내역
- 지출 금액 TOP 3
- 카테고리 별로 가장 지출 금액의 합이 높은 순으로 TOP3을 정리하여 제공합니다. 사용자는 어떤 카테고리에서 가장 지출을 많이 하고 있는 지 파악하여 소비 계획을 생성할 수 있습니다.
- 지출 건 수 TOP 3
- 카테고리 별로 지출 건 수가 가장 많은 TOP3을 정리하여 제공합니다. 사용자는 어떤 카테고리에서 가장 지출 횟수가 많은 지 확인 할 수 있습니다.
- 지출 금액 TOP 3
거래 내역 조회 페이지에서는 수입 / 지출의 모든 내역을 한 번에 리스트로 사용자가 받아 볼 수 있도록 설계되었습니다.
-
거래 내역 조회 : 화면 로드 후, 보여지는 리스트에서 사용자는 날짜 별로 시간, 카테고리, 수입/지출, 내역, 가격 항목 데이터를 확인할 수 있습니다.
-
거래 내역 카테고리 별 조회 : 사용자는 리스트 항목을 카테고리별로 골라 해당 항목만 따로 확인할 수 있습니다.
-
거래 내역 추가 : 오른쪽 상단 아이콘을 클릭하여 사용자는 거래 내역을 스스로 추가하고, 리스트 내에서 추가 된 항목을 볼 수 있습니다.
-
거래 내역 삭제 : 사용자는 거래 내역 리스트 테이블 행의 맨 마지막 삭제 아이콘을 클릭하여 손쉽게 삭제할 수 있습니다. 삭제된 리스트는 자동으로 업데이트 됩니다.
캘린더 기능을 통해 일별 소비 내역을 한눈에 파악할 수 있습니다.
- 일별 지출 내역: 각 날짜별 지출 내역을 상세히 기록하여, 특정 일자에 어떤 소비가 있었는지 쉽게 확인할 수 있습니다.
- 월간 소비 패턴 파악: 월간 소비 패턴을 시각적으로 분석할 수 있어, 보다 체계적인 소비 계획을 세울 수 있습니다.
SOODAL은 사용자가 수입과 지출을 손쉽게 관리할 수 있도록 도와줍니다. 이를 통해 사용자들은 자신의 금융 상태를 명확히 파악하고, 더 나은 재무 결정을 내리고 소비 계획을 세울 수 있습니다.
대시보드와 캘린더 기능을 통해 사용자들은 자신의 소비 패턴을 시각적으로 분석할 수 있습니다. 이는 사용자가 소비 습관을 개선하고, 불필요한 지출을 줄이는 데 큰 도움을 줍니다.
지출 내역을 체계적으로 관리함으로써 사용자는 개인 맞춤형 금융 계획을 세울 수 있습니다. SOODAL은 사용자가 재정적인 목표를 설정하고 달성하는 데 필요한 모든 정보를 제공합니다.
- 재무 관리 능력 향상: 사용자는 자신의 재무 상태를 정확히 파악하고, 체계적으로 관리할 수 있습니다.
- 소비 패턴 개선: 사용자는 자신의 소비 패턴을 분석하고 개선할 수 있어, 불필요한 지출을 줄일 수 있습니다.
- 재정 목표 달성: SOODAL을 통해 사용자는 명확한 재정 목표를 세우고 이를 달성할 수 있습니다.
VSCode + Volar (and disable Vetur).
See Vite Configuration Reference.
npm installnpm run devnpm run build{
"data": [
{
"id": 0,
"member_id": "admin",
"member_pwd": "admin",
"member_name": "김건영",
"email": "[email protected]",
"date": "2024-06-13",
"time": "13:00",
"type": "수입",
"category": "급여",
"amount": "5150000",
"memo": "월급"
}
]
}
data라는 이름을 가지는 jSON 데이터 아래로 id값이 PK
📦src
┣ 📂assets
┃ ┣ 📜base.css
┃ ┣ 📜logo.svg
┃ ┗ 📜main.css
┣ 📂components
┃ ┣ 📜.DS_Store
┃ ┣ 📜AddList.vue
┃ ┣ 📜Calendar.vue
┃ ┣ 📜CountTop.vue
┃ ┣ 📜DoughnutChart.vue
┃ ┣ 📜ExpenseList.vue
┃ ┣ 📜IncomeList.vue
┃ ┣ 📜List.vue
┃ ┣ 📜ListHeader.vue
┃ ┣ 📜LoginGuide.vue
┃ ┣ 📜LoginModal.vue
┃ ┣ 📜LoginReminderModal.vue
┃ ┣ 📜Main.vue
┃ ┣ 📜PayTop.vue
┃ ┣ 📜RecentContract.vue
┃ ┗ 📜sidebar.vue
┣ 📂router
┃ ┗ 📜index.js
┣ 📜.DS_Store
┣ 📜App.vue
┗ 📜main.js
- 전공 B반 주정윤, github
- 전공 B반 김건영,
- 전공 B반 권초원,