SwiftUI 가계부 앱 개발기 5편 – 카드 관리 기능: 결제일 및 청구 주기 설정

이번 글에서는 SwiftUI 기반 가계부 앱에 카드 결제 관련 기능을 구현하는 과정을 소개합니다.
카드 사용은 가계부 앱에서 자주 사용되는 항목이며, 결제일 설정 및 청구 기간 계산을 통해 향후 통계 기능과 유기적으로 연결될 수 있도록 설계합니다.

1. 카드 관리 화면 구성

카드 관리는 설정 화면에서 접근 가능한 메뉴 항목으로 배치하며,
사용자는 본인이 사용하는 카드를 등록하거나 삭제할 수 있습니다.

swift
NavigationLink(destination: CardListView()) {
   Text("카드 관리")
}

화면 내부는 다음과 같이 구성합니다:

• 상단 제목: “카드 관리” (ToolbarItem으로 배치)
• 닫기 버튼: 우측 상단 “닫기” 버튼
• 카드 리스트: 등록된 카드 목록 표시
• 추가 필드: 카드명, 결제일, 청구 기간 입력 UI

2. 카드 정보 모델링 (CoreData)

CoreData에서 카드 정보를 저장할 수 있도록 Entity를 설계합니다.

Card Entity 필드 구성:

💡 청구 시작/종료일은 향후 통계 범위에 활용됩니다.

3. 카드 등록 UI 구성

사용자는 카드명을 입력하고 결제일 및 청구기간을 설정할 수 있습니다.

TextField("카드명", text: $cardName)
Picker("결제일", selection: $billingDay) {
   ForEach(1…31, id: .self) { day in
     Text("(day)일").tag(Int16(day))
   }
}
HStack {
   Picker("청구 시작일", selection: $cycleStart) { … }
   Picker("청구 종료일", selection: $cycleEnd) { … }
}

4. 카드 삭제 기능

기존 카드 목록은 List 형태로 구성하고, 스와이프 제스처를 통해 삭제할 수 있도록 합니다.

.onDelete { indexSet in
   // 삭제된 카드 객체를 CoreData에서 제거
}

5. 향후 통계에의 활용

사용자가 입력한 결제일 및 청구 기간은 통계 기능에 다음과 같이 활용할 수 있습니다:

• 특정 월의 카드 사용 내역이 청구 주기 안에 포함되는지 판단
• 예: 5일 결제일의 경우, 지난달 1일~말일까지의 데이터를 5일 기준으로 집계

이를 통해 실제 청구 기준에 맞춘 통계 분석이 가능해집니다.

6. 마무리

이번 편에서는 카드 정보를 수집하고 관리할 수 있는 화면을 구성하고,

이를 향후 통계 기능과 연계하기 위한 기반 데이터 구조를 설계했습니다.

SwiftUI 가계부 앱 개발기 6편 – 통계 화면 구성: 월별 그래프 및 유형별 정리에서는 이 카드/카테고리 데이터를 기반으로 월별 통계 그래프 및 분석 화면 구성을 다루겠습니다.

시리즈 목록