⚡ 지출 관리 앱 개발 예제

// app.component.ts
import { Component } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { Storage } from '@ionic/storage-angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.html'
})
export class AppComponent {
  expenses = [];
  newAmount = '';
  newCategory = '';
  errorMessage = '';

  constructor(private storage: Storage) {
    this.initStorage();
  }

  async initStorage() {
    await this.storage.create();
    const savedExpenses = await this.storage.get('expenses') || [];
    this.expenses = savedExpenses;
  }

  addExpense() {
    if (!this.newAmount || !this.newCategory) {
      this.errorMessage = '금액과 카테고리를 입력해주세요';
      return;
    }

    const amount = parseFloat(this.newAmount);
    if (isNaN(amount) || amount <= 0) {
      this.errorMessage = '유효한 금액을 입력해주세요';
      return;
    }

    this.expenses.push({
      id: Date.now(),
      amount: amount,
      category: this.newCategory,
      date: new Date().toISOString()
    });

    this.storage.set('expenses', this.expenses);
    this.resetForm();
  }

  deleteExpense(id: number) {
    this.expenses = this.exp3enses.filter(exp => exp.id !== id);
    this.storage.set('expenses', this.expenses);
  }

  editExpense(index: number) {
    // 편집 기능 구현 시 사용할 메서드
  }

  resetForm() {
    this.newAmount = '';
    this.newCategory = '';
    this.errorMessage = '';
  }
}

// app.html
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>지출 관리 앱</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="ion-padding">
    <ion-card>
      <ion-item>
        <ion-label>금액</ion-label>
        <ion-input type="number" [(ngModel)]="newAmount" placeholder="0.00"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>카테고리</ion-label>
        <ion-input [(ngModel)]="newCategory" placeholder="식비,교통비 등"></ion-input>
      </ion-item>
      <ion-button (click)="addExpense()">지출 추가</ion-button>
      <p *ngIf="errorMessage" color="danger">{{ errorMessage }}</p>
    </ion-card>

    <ion-grid>
      <ion-row *ngFor="let expense of expenses">
        <ion-col> {{ expense.category }} </ion-col>
        <ion-col> {{ expense.amount | currency:"KRW":0 }} </ion-col>
        <ion-col>
          <ion-button (click)="deleteExpense(expense.id)">삭제</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>
</ion-app>