KB 리틀 스타 ⭐️

어린이를 위한 가계부 웹 애플리케이션

어린이들이 쉽고 재미있게 가계부 작성 습관을 들이고, 경제 지식을 쌓을 수 있는 앱입니다. 단순히 숫자를 기록하는 것이 아니라, 아이들이 가계부를 게임처럼 경험하며, 자연스럽게 소비를 기록하고 돌아보는 습관을 기를 수 있습니다.

[KB] IT's Your Life 6기 스켈레톤 프로젝트

개발 기간 : 2025.04.07 ~ 2025.04.11

👥 Member

이름	역할	담당 업무	GitHub
서상훈	팀장	퀴즈 기능 개발, 퀴즈 데이터, 배포	@Hoonssac
김세연	팀원	가계부 수입/지출, 카테고리 기능 개발	@yonseeee
이찬양	팀원	로그인/회원가입, 홈, 통계, 기본 컴포넌트 개발	@cyLee1111
염정우	팀원	포켓몬 뽑기, 도감 기능 개발	@yeomine

📀 Installation

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

🛠️ Stack

Environment

Config

Development

Communication

🎯 주요 기능

로그인 기능

• 닉네임, 비밀번호, 나이를 기입하면 쉽게 회원가입이 가능합니다.
• 가입한 닉네임, 비밀번호로 로그인을 할 수 있습니다.

수입 지출 기록

• 수입과 지출을 쉽게 기록하고 확인할 수 있습니다.
• 직관적인 UI로 카테고리별 금액을 한 눈에 볼 수 있습니다.
• 직접 카테고리를 만들 수 있는 커스터마이징 기능을 제공합니다.

오늘의 퀴즈

• 아이들이 금융과 경제 개념을 자연스럽게 익힐 수 있는 퀴즈 기능을 제공합니다.
• 초등학생 이해 수준에 맞춘 난이도로 구성되어 있으며, 단순한 학습을 넘어 게임처럼 즐길 수 있는 인터렉티브한 경험을 통해 학습 몰입도를 높입니다.
• 또한, 하루 한 번만 참여할 수 있는 제한적인 응시 기회를 제공함으로써, 아이들에게 기대감과 집중도를 높이는 효과를 줍니다.

포켓몬 도감

• 아이들이 가계부 작성의 흥미를 잃지 않도록 해주는 핵심 기능입니다.
• 뽑기 기능을 통해 총 151종의 포켓몬을 수집할 수 있습니다.
• 포켓몬 관련 데이터는 공식 API pokeapi에서 제공받았습니다.
• 홈 화면에 표시되는 대표 포켓몬 설정이 가능합니다.

마일리지 시스템

• 퀴즈 참여, 가계부 작성으로 마일리지를 받을 수 있습니다.
• 받은 마일리지는 계속 누적됩니다.
• 일정 마일리지로 포켓몬을 뽑을 수 있습니다.

💾 데이터 구조 설계

🖥️ 화면 설계

🛠️ 프로젝트 구조

📁 src
├── 📁 apis
│   ├── pokedex.js
│   └── users.js
├── 📁 assets
│   ├── 📁 images
│   └── 📁 sounds
├── 📁 components
│   ├── 📁 common
│   │   ├── 📁 icons
│   │   │   ├── IconBase.vue
│   │   │   ├── IconHome.vue
│   │   │   ├── IconInfo.vue
│   │   │   ├── IconMileage.vue
│   │   │   ├── IconMoneyTrack.vue
│   │   │   ├── IconPokemon.vue
│   │   │   ├── IconQuiz.vue
│   │   │   └── IconStatistics.vue
│   │   ├── BottomBar.vue
│   │   ├── CustomButton.vue
│   │   ├── CustomModal.vue
│   │   ├── ProgressBar.vue
│   │   ├── TeamRocketAlert.vue
│   │   └── TopBar.vue
│   ├── 📁 home
│   │   └── Help.vue
│   ├── 📁 money-tracker
│   │   ├── AddCategoryModal.vue
│   │   ├── DeleteTransactionModal.vue
│   │   └── SuccessAlert.vue
│   └── 📁 pokemon
├── 📁 pages
│   ├── 📁 home
│   │   ├── Home.vue
│   │   ├── Login.vue
│   │   ├── SelectMainPokemon.vue
│   │   └── Signup.vue
│   ├── 📁 money-tracker
│   │   ├── AddTransactionPage.vue
│   │   ├── EarnMileagePage.vue
│   │   ├── EditTransactionPage.vue
│   │   ├── ExpenseCategory.vue
│   │   ├── IncomeCategory.vue
│   │   ├── MoneyTrackPage.vue
│   │   └── TransactionListPage.vue
│   ├── 📁 pokemon
│   │   ├── PokedexPage.vue
│   │   └── PokemonGachaPage.vue
│   └── 📁 quiz
│       └── QuizIntro.vue
├── 📁 pokemon
│   ├── Pokedex.vue
│   └── PokemonGacha.vue
├── 📁 quiz
│   ├── MileageCounter.vue
│   ├── MileageDisplay.vue
│   ├── QuizOptionPrompt.vue
│   ├── QuizProfessorTalk.vue
│   ├── QuizStartPrompt.vue
│   └── TodayLimitModal.vue
├── 📁 quiz
│   ├── QuizIntro.vue
│   ├── QuizMain.vue
│   ├── QuizQuestion.vue
│   ├── QuizResult.vue
│   └── QuizReward.vue
├── 📁 statistics
│   ├── PieChart.vue
│   └── Statistics.vue
├── 📁 router
│   └── index.js
├── 📁 stores
│   ├── authStore.js
│   ├── moneyTrackerStore.js
│   ├── pokedexStore.js
│   ├── quizResult.js
│   └── signupStore.js
├── App.vue
├── main.js
├── db.json
├── index.html
├── package.json
├── package-lock.json
├── vite.config.js
└── jsconfig.json