내 돈 내가 쓴 기록, 내돈내쓴

'고정 지출부터 소비 리포트까지, 한눈에 관리하고 빠르게 기록하는 스마트 반응형 가계부 웹 애플리케이션'

🌱 Features

1️⃣ 예정 거래 알림 - 고정 지출/수입 데이터를 기반으로 오늘 예정 거래 알림

2️⃣ 홈 - 캘린더를 통한 날짜별 데이터 보기, 버튼으로 수정 화면 연결

3️⃣ 빠른추가 - 빠른 추가 기능을 통해 한 번의 클릭으로 거래 추가까지 바로 가능

4️⃣ 기본추가 - 플로팅 버튼으로 어느 페이지에서든 추가 화면으로 이동 가능

5️⃣ 거래목록 - 날짜별 거래목록을 리스트로 보기

6️⃣ 필터 - 다양한 수입/지출, 카테고리, 기간 필터 기능

7️⃣ 소비리포트 - 데이터 기반 차트 생성 및 요약 제공

8️⃣ 설정 및 프로필 관리 - 이름 수정, 카테고리 기본값, 고정 수입/지출 수정

🛠️ Skills & Tech Stack

🧑🏻‍💻👩🏻‍💻 Authors

권채린	김유빈	배성현	이상명	최승아
거래 목록 리스트	팀장 / 자료 / 홈 캘린더, 알림	설정 및 프로필 관리	DB / 거래 세부 페이지	디자인 / 소비 리포트

👾 Package

"@fullcalendar/core": "^6.1.17",
"@fullcalendar/daygrid": "^6.1.17",
"@fullcalendar/interaction": "^6.1.17",
"@fullcalendar/vue3": "^6.1.17",
"@vuepic/vue-datepicker": "^11.0.2",
"apexcharts": "^4.5.0",
"axios": "^1.8.4",
"dayjs": "^1.11.13",
"pinia": "^3.0.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0",
"vue3-apexcharts": "^1.8.0",
"vue3-toastify": "^0.2.8"

📍 Project Directory Structure

kb-skeleton-project
├─ .editorconfig
├─ .prettierrc.json
├─ README.md
├─ db.json
├─ eslint.config.js
├─ index.html
├─ jsconfig.json
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  └─ images
│     └─ categories
│        ├─ cafe.png
│        ├─ congratulations.png
│        ├─ education.png
│        ├─ financial.png
│        ├─ foodExpense.png
│        ├─ investment.png
│        ├─ leisure.png
│        ├─ life.png
│        ├─ medical.png
│        ├─ otherIncome.png
│        ├─ pinmoney.png
│        ├─ pleasure.png
│        ├─ residentialCommunication.png
│        ├─ salary.png
│        ├─ shopping.png
│        ├─ traffic.png
│        ├─ travel.png
│        ├─ unclassified.png
│        └─ watergas.png
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  ├─ base.css
│  │  ├─ fonts.css
│  │  ├─ icons
│  │  │  ├─ IconAdd.svg
│  │  │  ├─ IconArrowBack.svg
│  │  │  ├─ IconArrowForward.svg
│  │  │  ├─ IconClose.svg
│  │  │  ├─ IconMenu.svg
│  │  │  ├─ IconMenuOpen.svg
│  │  │  ├─ IconReset.svg
│  │  │  └─ IconTop.svg
│  │  └─ main.css
│  ├─ components
│  │  ├─ button
│  │  │  ├─ BtnCircle.vue
│  │  │  ├─ BtnDual.vue
│  │  │  ├─ BtnLg.vue
│  │  │  ├─ BtnMed.vue
│  │  │  ├─ BtnSm.vue
│  │  │  └─ BtnXs.vue
│  │  ├─ chart
│  │  │  ├─ Doughnut.vue
│  │  │  └─ Line.vue
│  │  ├─ input
│  │  │  ├─ InputLg.vue
│  │  │  ├─ InputMed.vue
│  │  │  ├─ InputSm.vue
│  │  │  ├─ SelectLg.vue
│  │  │  ├─ SelectMed.vue
│  │  │  └─ SelectSm.vue
│  │  └─ layout
│  │     ├─ Floating.vue
│  │     ├─ Footer.vue
│  │     ├─ Header.vue
│  │     └─ HeaderMobile.vue
│  ├─ composables
│  │  └─ UseIsMobile.js
│  ├─ main.js
│  ├─ pages
│  │  ├─ detailPage
│  │  │  ├─ DetailPage.vue
│  │  │  ├─ _components
│  │  │  └─ components
│  │  │     ├─ AddTransaction.vue
│  │  │     ├─ UpdateTransaction.vue
│  │  │     └─ ViewTransaction.vue
│  │  ├─ homePage
│  │  │  ├─ HomePage.vue
│  │  │  └─ _components
│  │  │     ├─ Calendar.vue
│  │  │     └─ Modal.vue
│  │  ├─ listPage
│  │  │  ├─ ListPage.vue
│  │  │  └─ _components
│  │  │     ├─ ListItem.vue
│  │  │     ├─ ListSideBar.vue
│  │  │     ├─ TransactionList.vue
│  │  │     └─ TransactionOneDay.vue
│  │  ├─ notFoundPage
│  │  │  ├─ NotFoundPage.vue
│  │  │  └─ _components
│  │  ├─ reportPage
│  │  │  ├─ ReportPage.vue
│  │  │  └─ _components
│  │  │     ├─ DoughnutExplain.vue
│  │  │     └─ LineExplain.vue
│  │  └─ userPage
│  │     ├─ UserEditPage.vue
│  │     ├─ UserPage.vue
│  │     ├─ UserSettingPage.vue
│  │     └─ _components
│  │        ├─ AddQuickOptionModal.vue
│  │        └─ EditQuickOptionModal.vue
│  ├─ router
│  │  └─ index.js
│  └─ stores
│     └─ counter.js
└─ vite.config.js

🔀 백엔드 json-server(데이터 json 구조)