SwiftUI 캘린더 커스텀 하기

SwiftUI는 신속하고 직관적인 방식으로 사용자 인터페이스를 구축할 수 있는 도구를 제공합니다. 특히, 캘린더는 많은 앱에서 자주 사용되는 기능입니다. 이 글에서는 SwiftUI를 사용하여 커스텀 캘린더를 만드는 방법을 단계별로 설명합니다.

기본적인 캘린더의 구조 이해하기

캘린더를 만들기 위해서는 우선 날짜와 시간을 다루는 Date와 Calendar 객체를 활용해야 합니다. Swift에서는 Date 객체를 통해 년, 월, 일 등의 값을 쉽게 조작할 수 있도록 다양한 메서드를 제공합니다.

swift
let calendar = Calendar.current
let date = Date()
let components = calendar.dateComponents([.year, .month, .day], from: date)

위 코드에서는 현재 날짜와 시간의 년, 월, 일 정보를 얻어옵니다. 다음으로, DateFormatter를 이용하여 날짜를 원하는 형식으로 변환할 수 있습니다.

swift
let formatter = DateFormatter()
formatter.dateFormat = "yyyy-MM-dd"
let dateString = formatter.string(from: date)

캘린더의 기본 UI 구성하기

SwiftUI에서는 List와 ForEach를 이용하여 날짜를 목록 형식으로 쉽게 나열할 수 있습니다. 기본적인 캘린더 뷰를 구성해봅시다.

swift
import SwiftUI

struct CalendarView: View {
    let calendar = Calendar.current
    let dates: [Date] = {
        var dates = [Date]()
        let today = Date()
        for i in 0..<30 {
            if let date = calendar.date(byAdding: .day, value: i, to: today) {
                dates.append(date)
            }
        }
        return dates
    }()

    var body: some View {
        List(dates, id: \.self) { date in
            Text("\(date, formatter: DateFormatter.shortDate)")
        }
    }
}

위 코드에서는 현재 날짜부터 30일간의 날짜를 List로 나열한 간단한 캘린더를 만듭니다. 원하는 형식으로 날짜를 표시하기 위해 DateFormatter.shortDate를 사용했습니다.

날짜 셀 커스텀하기

각 날짜 셀을 커스텀하여 더 멋진 UI를 구성할 수 있습니다. 예를 들어, 특정 날짜에 이벤트가 있는 경우 해당 날짜를 강조합니다.

swift
import SwiftUI

struct CalendarView: View {
    let calendar = Calendar.current
    let dates: [Date] = {
        var dates = [Date]()
        let today = Date()
        for i in 0..<30 {
            if let date = calendar.date(byAdding: .day, value: i, to: today) {
                dates.append(date)
            }
        }
        return dates
    }()

    var body: some View {
        List(dates, id: \.self) { date in
            CalendarDateView(date: date)
        }
    }
}

struct CalendarDateView: View {
    let date: Date
    let formatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "yyyy-MM-dd"
        return formatter
    }()

    var body: some View {
        HStack {
            Text(formatter.string(from: date))
                .padding()
                .background(Color.blue)
                .cornerRadius(8)
                .foregroundColor(.white)
            Spacer()
        }
        .padding(.vertical, 4)
    }
}

이제 각 날짜 셀이 파란색 배경으로 강조되고, 둥근 모서리를 가진 디자인으로 바뀝니다.

월별 캘린더 구성하기

마지막으로, 월별로 캘린더를 구성하여 보겠습니다. SwiftUI의 Grid 레이아웃을 활용하여 각 날짜를 달력 형태로 배치합니다.

swift
import SwiftUI

struct MonthlyCalendarView: View {
    @State private var currentDate = Date()
    private let calendar = Calendar.current
    private let formatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "MMM yyyy"
        return formatter
    }()

    var body: some View {
        VStack {
            Text(formatter.string(from: currentDate))
                .font(.title)
                .padding()

            let days = generateDays(for: currentDate)
            LazyVGrid(columns: Array(repeating: .init(.flexible()), count: 7)) {
                ForEach(days, id: \.self) { date in
                    Text("\(calendar.component(.day, from: date))")
                        .frame(maxWidth: .infinity, minHeight: 40)
                        .background(Color.gray.opacity(0.2))
                        .cornerRadius(4)
                }
            }
            .padding()
        }
    }

    func generateDays(for month: Date) -> [Date] {
        guard let monthInterval = calendar.dateInterval(of: .month, for: month) else { return [] }
        var days: [Date] = []
        var date = monthInterval.start

        repeat {
            days.append(date)
            date = calendar.date(byAdding: .day, value: 1, to: date)!
        } while date < monthInterval.end

        return days
    }
}

이제 월별 캘린더가 생성되며, 각 날짜가 그리드 레이아웃으로 배치됩니다. 이 방법을 통해 복잡한 캘린더 기능을 커스텀할 수 있습니다.

SwiftUI를 사용하여 캘린더를 커스터마이징하는 것은 다소 복잡할 수 있지만, 기본적인 캘린더 구조를 이해하고, Date, DateFormatter, Calendar 객체를 효과적으로 사용하는 방법을 알면 쉽게 구현할 수 있습니다.