차근차근 커스텀 캘린더

[OneMoreThink]

오늘도 안녕하신지요. 아임 파인입니다.
동료 러너의 캘린더의 귀신이 들렸다는 카톡을 받고
Kavsoft의 Custom Calendar 영상중 Calendar를 구성하는 부분만 빠르게 정리해보았습니다.
급하게 막 써내려가서 많은 타이포와 틀린 부분이 예상갑니다... ( 그래도 달력 정상적으로 뜬건 확인했습니다...)
영상의 흐름대로 정리해 나갔으니 혹시 달력을 사용중(또는 예정)이 시라면 '코드에 들린 귀신을 퇴치하는데' 조금이나마 도움이 되길 바랍니다.
(영상 일일이 따라치기 힘드니까 글 마지막에 소스코드만 모아놨습니다)

출처

Kavsoft
SwiftUI 3.0 Elegant Task App UI With Custom Date Picker - Custom Graphical Date Picker - Xcode 13
https://www.youtube.com/watch?v=UZI2dvLoPr8&t=650s

CustomCalendarHeader - 년도, 달, 화살표

• HomeView내부에서 @State를 통해 현재 날짜를 관리하도록 함
• HomeView위에 CustomDatePicker를 올리고 @State 값을 @binding을 통해 넘겨주어 CustomDatePicker에서도 currentDate 값에 접근이 가능하도록 함

import SwiftUI

struct Home: View {
    
    @State var currentDate: Date = Date()
    
    var body: some View {
        
        ScrollView(.vertical, showsIndicators: false){
            
            VStack(spacing: 20){
                
                CustomDatePicker(currentDate: $currentDate)
            }
        }
    }
}

struct CustomDatePicker: View {
    
    @Binding var currentDate: Date
    
    var body: some View {
        
        VStack(spacing: 35){
            // 달력 Header :  년도 + 날 + 화살표
            HStack(spacing: 20){
                
                // 년도 + 달
                VStack(alignment: .leading, spacing: 10){
                    
                    Text("2021")
                        .font(.caption)
                        .fontWeight(.semibold)
                    
                    Text("Setemper")
                        .font(.title.bold())
                    
                }
                // 년도 + 달
                
                // Spacer에 최소길이를 0으로 함으로써 Spacer가 HStack에서
                // 최대한 공간을 차지하도록 함 -> 따라서 HStack의 다른 컴포넌트
                // 왼쪽에는 VStack 오른쪽에는 버튼들이 최대한 밀림
                Spacer(minLength: 0)
                
                
                Button(action: {
                    
                }, label: {
                    Image(systemName: "chevron.left")
                        .font(.title2)
                })
                
                Button(action: {
                    
                }, label: {
                    Image(systemName: "chevron.right")
                        .font(.title2)
                })
            }
            // 달력 Header :  년도 + 날 + 화살표
            .padding(.horizontal) // 달력 헤더: 수평방향 패딩
            
        }
    }
}

#Preview {
    CustomDatePicker(currentDate: .constant(Date()))
}

CustomCalendarHeader - 요일 표시

• 요일을 나타낼 배열 days를 선언해서 요일을 나타내는 문자열을 넣어두고
• ForEach 문을 통해서 순회하며 문자열 하나씩 꺼내기 ( String은 해싱가능하기때문에 자체 값을 (.self) 를 id로 사용 가능

struct CustomDatePicker: View {
    
    @Binding var currentDate: Date
    
    var body: some View {
        
        VStack(spacing: 35){
            
            // 배열을 사용해 ForEach문에서 사용할 요일들을 만들어 두기
            // VStack 내부에 선언해 아래의 ForEach에서 접근 가능하게
            let days: [String] =
                ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]
            
            
            // 달력 Header :  년도 + 날 + 화살표
            HStack(spacing: 20){ ... } // fold
            // 달력 Header :  년도 + 날 + 화살표
            .padding(.horizontal) // 달력 헤더: 수평방향 패딩
            
            // 위에서 만든 요일배열에서 가로방향으로 하나씩 꺼내기
            // ForEach문을 통해 순회하며 배열의 요소를 하나씩 꺼내기
            HStack(spacing: 0){
                // 위에서 선언한 days 배열에서 요소를 하나씩 꺼내서 day 변수로 받은 다음
                ForEach(days, id: \.self){ day in
                    
                    // Text에 day 변수로 받은 요일값(ex: "Sun") 넣어주기
                    Text(day)
                        .font(.callout)
                        .fontWeight(.semibold)
                        .frame(maxWidth: .infinity)
                        // 각 요일에 대하여 maxWidth를 .infinity로 주어
                        // 가로 방향 최대한 값을 가지도록하기 
                    
                }
            }
            
        }

    }
}

일수 띄우기

• 지정한 달에 맞는 날짜들을 가져오는 로직이 필요
• 원하는 형식으로 날짜를 지정하기 위해 DateValue struct 별도로 만들어 사용
• currentMonth를 이용해서 지정한 달의 날짜들을 가져오는 로직을 생성

Date extension

struct CustomDatePicker: View { 
//.... 생략
}

// Date라는 type을 확장해서 Date라는 타입을 가진 애가 해당 func을 사용할 수 있게 함
extension Date{
    
    func getAllDates() -> [Date] {
        // 현재 지역과 시간대를 기준으로 한 Calendar 만들기 -> 날짜에 대한 정보를 가지고 있음)
        let calendar = Calendar.current
        
        // getAllDates를 호출한 Calendar type의 애가(self)
        // Calendar type의 정보중 , 월에 대한 정보를 가져와서 해당 월에 몇일까지 있는지 계산한 range
        let range = calendar.range(of: .day, in: .month, for: self)!
        
        // 현재 날짜에서 해당 월에 있는 일수만큼
        // 반복해서 일을 더한 Date들을 반환
        // 예를 들어 오늘 날짜가 4월 16일이고 / 4월은 총 30일 이므로
        // 현재 날짜 4월 16일에서 1을 더한 4월 17일 반환
        // 그다음은 4월 17일에서 1을 더한 4월 18일 반환
        // 이짓을 총 이번 달의 날짜수인 30번 반복하면
        // 30개의 Date 가 있는 묶음(배열)이 나옴
        return range.compactMap{ day -> Date in
            return calendar.date(byAdding: .day,value: day, to: self)!
            
        }
    }
}

DateValue

// 각 날짜와 상호작용을 위해서 별도의 구조를 만듬
// Identifiable -> ForEach문에서 해당 타입(DateValue)의 요소로 구성된 배열을 순회하기 위해서는
// 각 요소가 구분이 가능해야함, (Identifiable 를 옆에 써주고, DateValue 내부에 id를 만들어주면됨 )
struct DateValue: Identifiable{
    var id = UUID().uuidString // 각 날들이 구분이 가능하게 id를 부여함
    var day: Int // Date에서 날짜정보만 뺌
    var date: Date // Date 정보 
}

currentMonth와 extractDate()

struct CustomDatePicker: View {
    
    @Binding var currentDate: Date
    
    // 해당 값을 바꾸면서 달력의 달을 조정
    @State var currentMonth: Int = 0
    
    var body: some View {
	//        ... 생략
    }
    
    // 현재날짜에서 @State currentMonth 값을 이용해 달을 바꾸고
    // 달이 바뀌면 해당 달에 대한 날짜들을 반환함 (앞서 만든 DateValue라는 타입으로)
    func extractDate() -> [DateValue]{
        
        // 현재 날짜가져오기
        let calendar = Calendar.current
        
        // 가져온 현재 날짜에서 달(.month)에 currentMonth 값을 더하고 이를 Date 타입으로 반환
        guard let currentMonth =
                calendar.date(byAdding: .month, value: self.currentMonth, to: Date()) else {
            return []
        }
        
        // 앞서 Date extension 을 사용 ( Date 타입으로 반환했기 때문에 사용가능)
        // 앞서 현재 달 + currentMonth(이것에 값을 바꾸면서 달을 바꿈) 을 통해 원하는 달을 구하고
        // 해당 달의 일들을 구함
       return  currentMonth.getAllDates().compactMap { date -> DateValue in
            
           // 이때 getAllDates()에서 반환된 Date 배열의 요소들에서 날짜를 추출해서
            let day = calendar.component(.day, from: date)
            
           // 앞서 우리가 만든 DateValue type에 넣어줌
            return DateValue(day: day, date: date)
        }
    }
}

LazyVGrid를 사용해서 달력 일수 띄우기

struct CustomDatePicker: View {
    
    @Binding var currentDate: Date
    
    // Month update on arrow button clicks
    @State var currentMonth: Int = 0
    
    var body: some View {
        
        VStack(spacing: 35){
			// 생략... 
            	
                        
          	// LazyVGrid에서 사용할 GridItem을 정의 
			// 한 줄에 (행방향,수평방향)으로 7개 
            let colums = Array(repeating: GridItem(), count: 7)
            	
			// 앞서 정의한 colums넣어주고 , 사이공간 지정 
            LazyVGrid(columns: colums, spacing: 15){
                // extractDate()를 호출하면
                // 현재 날짜에 현재 달의 날짜 수만큼 개수의 날짜들이 나옴
                // 나온 날짜들을 ForEach문을 통해 순회
                // 현재 나오는 날짜의 앞서 우리가 만든 DateValue임	
				//(여기서 ForEach사용을 위해 Identifiable 사용)
                ForEach(extractDate()){ value in
                    Text("\(value.day)")
                        .font(.title3.bold())
                }
            }
            
        }
    }
    
   }
}

여기까지 왔을 때 이상한점 : 달을 기준으로 1일부터 해당달에 있는 일수만큼 나와야하는데 현재 날짜를 기준으로 형성됨 ( 오늘 날짜 16일 )

GPT Wal
시간 구성 요소의 문제점
Date 객체는 내부적으로 시간도 포함하고 있기 때문에, 단순히 날짜(년, 월, 일)만을 고려하여 계산할 때 다음과 같은 문제가 발생할 수 있습니다:

• 시간대(Time Zone) 영향: Date 객체는 UTC 기준으로 시간을 저장하므로, 로컬 시간대에 따라 실제 시간이 다르게 해석될 수 있습니다. 예를 들어, 자정이 아닌 시간에 Date 객체가 생성되면, 시간대에 따라 날짜가 바뀔 수 있습니다.
• 자정 계산의 부정확성: 만약 Date 객체가 자정을 정확히 나타내지 않으면, 일을 추가할 때 예상치 못한 결과가 발생할 수 있습니다. 예를 들어, 자정이 아닌 오전 1시로 설정된 Date 객체에 하루를 추가하면, 결과적으로 다음 날의 오전 1시가 되며, 이는 캘린더에 날짜를 표시할 때 혼란을 줄 수 있습니다.

첫 날 계산 로직의 필요성
위에서 언급한 문제들을 피하기 위해, 월의 첫 날을 계산할 때는 다음과 같은 로직을 사용합니다:

• 월의 첫날(startDate)을 계산할 때, Calendar의 date(from:) 메서드를 사용하여 년도와 월만을 지정하고, 나머지 시간 부분은 초기화합니다. 이렇게 함으로써, 해당 월의 첫 날 자정을 정확하게 표현할 수 있습니다.
• 첫날을 계산할 때 day == 1 ? 0 : day 조건을 사용하는 것은, 계산된 startDate가 이미 첫날 자정을 나타내므로, 이 날짜에 추가적인 날짜를 더하지 않도록 하기 위함입니다. 이는 불필요한 오류를 방지하고, 코드의 정확성을 유지하기 위한 방법입니다.

달력의 시작 날짜를 1로 맞추도록 getAllDates 변경

// Date라는 type을 확장해서 Date라는 타입을 가진 애가 해당 func을 사용할 수 있게 함
extension Date{
    
    // 현재 날짜부터 현재 달의 일수만큼 Date들 구해서 반환
    func getAllDates() -> [Date] {
        // 현재 지역과 시간대를 기준으로 한 Calendar 만들기 -> 날짜에 대한 정보를 가지고 있음)
        let calendar = Calendar.current
        
        // 시작일 설정
        let startDate =
        calendar.date(from: Calendar.current.dateComponents([.year, .month], from: self))!
        
        // 시작일의 달을 꺼내오고
        var range = calendar.range(of: .day, in: .month, for: startDate)!
        range.removeLast()
        
        // 달에 맞게 일수 처리 
        return range.compactMap{ day -> Date in
            return calendar.date(byAdding: .day, value: day == 1 ? 0 : day, to: startDate)!
            
        }
    }
}

달력의 화살표를 누르면 currentMonth를 수정하는 로직 포함시키기

• withAnimation을 사용시 해당 값이 변하여 화면이 업데이트 될때 애니메이션 효과
• currentMonth를 변경하면 extractDate 내부에서 currentMonth가 변함
• 따라서 extractDate가 다시 계산되고 이를 사용하는 LazyVGrid가 다시 랜더링

                Button(action: {
                    withAnimation{
                        currentMonth -= 1
                    }
                }, label: {
                    Image(systemName: "chevron.left")
                        .font(.title2)
                })
                
                Button(action: {
                    withAnimation{
                        currentMonth += 1
                    }
                }, label: {
                    Image(systemName: "chevron.right")
                        .font(.title2)
                })

• onChange() 를 사용 currentMonth 값이 변경될때마다 getCurrentMonth를 이용해 해당 달에 대한 Date 값 가져와서 현재 날짜인 currentDate 값을 업데이트

    // 현재 Month(ex: 4월에 currentMonth 값을 더해서) 지정한 달의 Date 값 가져오기
    func getCurrentMonth() -> Date {
        // 현재 날짜가져오기
        let calendar = Calendar.current
        
        // 가져온 현재 날짜에서 달(.month)에 currentMonth 값을 더하고 이를 Date 타입으로 반환
        guard let currentMonth =
                calendar.date(byAdding: .month, value: self.currentMonth, to: Date()) else {
            return Date()
        }
        return currentMonth
    }
    
    // 현재날짜에서 @State currentMonth 값을 이용해 달을 바꾸고
    // 달이 바뀌면 해당 달에 대한 날짜들을 반환함 (앞서 만든 DateValue라는 타입으로)
    func extractDate() -> [DateValue]{
        
        // 현재 날짜가져오기
        let calendar = Calendar.current
        
        // 가져온 현재 날짜에서 달(.month)에 currentMonth 값을 더하고 이를 Date 타입으로 반환
        // getCurrentMonth() 따로 만들었으므로 이를 이용해서 원하는 달에 대한 Date 값을 얻어옴
        let currentMonth = getCurrentMonth()
        
        // 앞서 Date extension 을 사용 ( Date 타입으로 반환했기 때문에 사용가능)
        // 앞서 현재 달 + currentMonth(이것에 값을 바꾸면서 달을 바꿈) 을 통해 원하는 달을 구하고
        // 해당 달의 일들을 구함
       return  currentMonth.getAllDates().compactMap { date -> DateValue in
            
           // 이때 getAllDates()에서 반환된 Date 배열의 요소들에서 날짜를 추출해서
            let day = calendar.component(.day, from: date)
            
           // 앞서 우리가 만든 DateValue type에 넣어줌
            return DateValue(day: day, date: date)
        }
    }

struct CustomDatePicker: View {
    
    @Binding var currentDate: Date
    
    // Month update on arrow button clicks
    @State var currentMonth: Int = 0
    
    var body: some View {
        
        
        VStack(spacing: 35){
                       	// .... 생략 
        }
        .onChange(of: currentMonth) { newValue in
            // 화살표를 눌러서 현재 Month에 currentMonth를 더해서 나온 달에 대한 Date 값으로
            // currentDate를 업데이트
            currentDate = getCurrentMonth()
        }
    }
    
    // 현재 Month(ex: 4월에 currentMonth 값을 더해서) 지정한 달의 Date 값 가져오기
    func getCurrentMonth() -> Date {
        // 현재 날짜가져오기
        let calendar = Calendar.current
        
        // 가져온 현재 날짜에서 달(.month)에 currentMonth 값을 더하고 이를 Date 타입으로 반환
        guard let currentMonth =
                calendar.date(byAdding: .month, value: self.currentMonth, to: Date()) else {
            return Date()
        }
        return currentMonth
    }
    
    // 현재날짜에서 @State currentMonth 값을 이용해 달을 바꾸고
    // 달이 바뀌면 해당 달에 대한 날짜들을 반환함 (앞서 만든 DateValue라는 타입으로)
    func extractDate() -> [DateValue]{
        
        // 현재 날짜가져오기
        let calendar = Calendar.current
        
        // 가져온 현재 날짜에서 달(.month)에 currentMonth 값을 더하고 이를 Date 타입으로 반환
        // getCurrentMonth() 따로 만들었으므로 이를 이용해서 원하는 달에 대한 Date 값을 얻어옴
        let currentMonth = getCurrentMonth()
        
        // 앞서 Date extension 을 사용 ( Date 타입으로 반환했기 때문에 사용가능)
        // 앞서 현재 달 + currentMonth(이것에 값을 바꾸면서 달을 바꿈) 을 통해 원하는 달을 구하고
        // 해당 달의 일들을 구함
       return  currentMonth.getAllDates().compactMap { date -> DateValue in
            
           // 이때 getAllDates()에서 반환된 Date 배열의 요소들에서 날짜를 추출해서
            let day = calendar.component(.day, from: date)
            
           // 앞서 우리가 만든 DateValue type에 넣어줌
            return DateValue(day: day, date: date)
        }
    }
}

• currentDate 날짜의 년도와 달을 원하는 형태로 포멧팅해주는 기능 추가

    // Date를 원하는 형태로 보여주기 위해 포멧팅해줌
    func extraDate()->[String]{
         
        // Date를 원하는 형태로 바꿔주는 formatter 만들기
        let formatter = DateFormatter()
        // 만든 formatter에 원하는 형식 지정해주기
        formatter.dateFormat = "YYYY MMMM"
        
        // 현재 currentDate(Date)에 위에서 만든 formatter를 적용해서 반환
        let date = formatter.string(from: currentDate)
        return date.components(separatedBy: " ")
        
    }

• 년도 + 달을 나타내는 VStack의 Text()에 위에서 만든 기능을 사용
• 첫번째 요소 [0] : 년도
• 두번째 요소 [1] : 달

            HStack(spacing: 20){
                
                // 년도 + 달
                VStack(alignment: .leading, spacing: 10){
                    
                    Text(extraDate()[0])
                        .font(.caption)
                        .fontWeight(.semibold)
                    
                    Text(extraDate()[1])
                        .font(.title.bold())
                    
                }

HomeView Preview에서 확인해야 제대로 볼 수 있음

여기까지 왔을 때 날짜와 요일이 맞지 않는 현상이 보임
주어진 달의 날짜와 요일을 맞추기위해 달에 맞는 날짜들을 반환하는 extractDate()와 일수를 처리하는 Date extension의 getAllDates 수정

func extractDate() -> [DateValue]{
        
        // 현재 날짜가져오기
        let calendar = Calendar.current
        
        // 가져온 현재 날짜에서 달(.month)에 currentMonth 값을 더하고 이를 Date 타입으로 반환
        // getCurrentMonth() 따로 만들었으므로 이를 이용해서 원하는 달에 대한 Date 값을 얻어옴
        let currentMonth = getCurrentMonth()
        
        // 앞서 Date extension 을 사용 ( Date 타입으로 반환했기 때문에 사용가능)
        // 앞서 현재 달 + currentMonth(이것에 값을 바꾸면서 달을 바꿈) 을 통해 원하는 달을 구하고
        // 해당 달의 일들을 구함
       var days =  currentMonth.getAllDates().compactMap { date -> DateValue in
            
           // 이때 getAllDates()에서 반환된 Date 배열의 요소들에서 날짜를 추출해서
            let day = calendar.component(.day, from: date)
            
           // 앞서 우리가 만든 DateValue type에 넣어줌
            return DateValue(day: day, date: date)
        }
        
        // 주어진 달의 첫날 요일 계산 -> 일요일(1) ~ 토요일(7)
        let firstWeekday = calendar.component(.weekday, from: days.first?.date ?? Date())
        
        // 달의 첫주의 시작이 일요일이 아닐 경우 해당 달의 첫주의 없는 요일들이 비게 되므로 해당 날짜들을 처리
        // -1 넣어두기
        for _ in 0 ..< firstWeekday - 1{
            days.insert(DateValue(day: -1, date: Date()), at: 0)
        }
        
        return days
    }

// Date라는 type을 확장해서 Date라는 타입을 가진 애가 해당 func을 사용할 수 있게 함
extension Date{
    
    // 현재 날짜부터 현재 달의 일수만큼 Date들 구해서 반환
    func getAllDates() -> [Date] {
        // 현재 지역과 시간대를 기준으로 한 Calendar 만들기 -> 날짜에 대한 정보를 가지고 있음)
        let calendar = Calendar.current
        
        // 시작일 설정
        let startDate =
        calendar.date(from: Calendar.current.dateComponents([.year, .month], from: self))!
        
        // 시작일의 달을 꺼내오고
        let range = calendar.range(of: .day, in: .month, for: startDate)!
        
        // 달에 맞게 일수 처리 // 1부터 시작해서 더해가므로 처음 값이 2가 되므로 value 에서 1 빼줌
        return range.compactMap{ day -> Date in
            return calendar.date(byAdding: .day, value: day - 1, to: startDate)!
            
        }
    }
}

@ViewBuilder 사용

    // 조건에 따라 날짜를 표시할지 안할지를 결정하기 위해 @ViewBuilder 사용
    // -1 (이번달에 포함이 안되는 날짜의 경우에)는 화면을 그릴 때 제외 
    @ViewBuilder
    func CardView(value: DateValue) -> some View {
        
        VStack {
            if value.day != -1 {
                Text("\(value.day)")
                    .font(.title3.bold())
            }
        }
        .padding(.vertical, 8)
        .frame(height: 60, alignment: .top)
        
    }

• LazyVGrid에서 각 GridItem( ) (날짜) 를 그릴때 사용

            LazyVGrid(columns: colums, spacing: 15){
                // extractDate()를 호출하면
                // 현재 날짜에 현재 달의 날짜 수만큼 개수의 날짜들이 나옴
                // 나온 날짜들을 ForEach문을 통해 순회
                // 현재 나오는 날짜의 앞서 우리가 만든 DateValue임(여기서 ForEach사용을 위해 Identifiable 사용)
                ForEach(extractDate()){ value in
                    CardView(value: value)
                }
            }

import Foundation

struct DateValue: Identifiable{
    var id = UUID().uuidString
    var day: Int
    var date: Date
}

import SwiftUI

struct Home: View {
    
    @State var currentDate: Date = Date()
    
    var body: some View {
        
        ScrollView(.vertical, showsIndicators: false){
            
            VStack(spacing: 20){
                
                CustomDatePicker(currentDate: $currentDate)
            }
        }
    }
}

#Preview {
    Home()
}

struct CustomDatePicker: View {
    
    @Binding var currentDate: Date
    
    @State var currentMonth: Int = 0
    
    var body: some View {
        
        
        VStack(spacing: 35){
            
            let days: [String] =
                ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]
            
            HStack(spacing: 20){
                
                VStack(alignment: .leading, spacing: 10){
                    
                    Text(extraDate()[0])
                        .font(.caption)
                        .fontWeight(.semibold)
                    
                    Text(extraDate()[1])
                        .font(.title.bold())
                    
                }
                
                Spacer(minLength: /*@START_MENU_TOKEN@*/0/*@END_MENU_TOKEN@*/)
                
                
                Button(action: {
                    withAnimation{
                        currentMonth -= 1
                    }
                }, label: {
                    Image(systemName: "chevron.left")
                        .font(.title2)
                })
                
                Button(action: {
                    withAnimation{
                        currentMonth += 1
                    }
                }, label: {
                    Image(systemName: "chevron.right")
                        .font(.title2)
                })
            }
            
            .padding(.horizontal)
            
            HStack(spacing: 0){
                ForEach(days, id: \.self){ day in
                    
                    Text(day)
                        .font(.callout)
                        .fontWeight(.semibold)
                        .frame(maxWidth: .infinity)                    
                }
            }
            
            let colums = Array(repeating: GridItem(), count: 7)
            
            LazyVGrid(columns: colums, spacing: 15){
                ForEach(extractDate()){ value in
                    CardView(value: value)
                }
            }
            
        }
        .onChange(of: currentMonth) { newValue in
            currentDate = getCurrentMonth()
        }
    }
    
    @ViewBuilder
    func CardView(value: DateValue) -> some View {
        
        VStack {
            if value.day != -1 {
                Text("\(value.day)")
                    .font(.title3.bold())
            }
        }
        .padding(.vertical, 8)
        .frame(height: 60, alignment: .top)
        
    }
    
    
    func extraDate()->[String]{
         
        let formatter = DateFormatter()
        formatter.dateFormat = "YYYY MMMM"
        
        let date = formatter.string(from: currentDate)
        return date.components(separatedBy: " ")
        
    }
    
    func getCurrentMonth() -> Date {

        let calendar = Calendar.current
        
        guard let currentMonth =
                calendar.date(byAdding: .month, value: self.currentMonth, to: Date()) else {
            return Date()
        }
        return currentMonth
    }
    
    func extractDate() -> [DateValue]{
        
        let calendar = Calendar.current
        
        let currentMonth = getCurrentMonth()
        
        var days =  currentMonth.getAllDates().compactMap { date -> DateValue in
            
            let day = calendar.component(.day, from: date)
            
            return DateValue(day: day, date: date)
        }
        
        let firstWeekday = calendar.component(.weekday, from: days.first?.date ?? Date())
        
        for _ in 0 ..< firstWeekday - 1{
            days.insert(DateValue(day: -1, date: Date()), at: 0)
        }
        
        return days
    }
}

#Preview {
    CustomDatePicker(currentDate: .constant(Date())) 
}


extension Date{
    
    func getAllDates() -> [Date] {
        let calendar = Calendar.current

        let startDate =
        calendar.date(from: Calendar.current.dateComponents([.year, .month], from: self))!
        
        let range = calendar.range(of: .day, in: .month, for: startDate)!
        
        return range.compactMap{ day -> Date in
            return calendar.date(byAdding: .day, value: day - 1, to: startDate)!
            
        }
    }
}

[Bell-isHere]

우오아ㅏ아ㅏ아아아ㅏ아ㅏㅏㅏ 퇴마사👻

[OneMoreThink]

달력을 눌렀을 때 선택된 날짜에 대응하는 Task들 띄우기 ( 영상 뒷부분 )

import Foundation

### 날짜에 대응하는 일정들을 매핑하기 위해서는 이를 모델링한 struct이 필요합니다.


// Task 구조체 정의 -> 각각의 Task
struct Task: Identifiable {
    var id = UUID().uuidString
    var title: String
    var time: Date = Date()
}


// TaskMetaData 구조체 정의 -> 해당 날짜의 Task를 그루핑하는 구조체 
struct TaskMetaData: Identifiable {
    var id = UUID().uuidString
    var tasks: [Task]
    var taskDate: Date
}

// 현재날짜에서 offset만큼 떨어진 날짜를 반환
func getSampleData(offset: Int) -> Date {
    let calendar = Calendar.current
    let date = calendar.date(byAdding: .day, value: offset, to: Date())
    return date ?? Date()
}

// TaskMetaData 배열에 샘플 데이터 생성 (접근자를 사용하지 않아서 CustomDatePicker에서도 해당 변수의 값에 접근이 가능함)
// 해당 샘플 데이터를 통해 각 날짜에 대한 task를 띄움 
var tasks: [TaskMetaData] = [
    TaskMetaData(
        tasks: [
            Task(title: "프로젝트 회의", time: getSampleData(offset: 0)),
            Task(title: "코드 리뷰", time: getSampleData(offset: 0)),
            Task(title: "고객 미팅", time: getSampleData(offset: 0))
        ],
        taskDate: getSampleData(offset: 0)
    ),
    TaskMetaData(
        tasks: [
            Task(title: "문서 작성", time: getSampleData(offset: -2)),
            Task(title: "팀 미팅", time: getSampleData(offset: -2)),
            Task(title: "제품 개발 스프린트 시작", time: getSampleData(offset: -2))
        ],
        taskDate: getSampleData(offset: -2)
    ),
    TaskMetaData(
        tasks: [
            Task(title: "제품 발표 준비", time: getSampleData(offset: 5)),
            Task(title: "인프라 문제 점검", time: getSampleData(offset: 5))
        ],
        taskDate: getSampleData(offset: 5)
    ),
    TaskMetaData(
        tasks: [
            Task(title: "시장 조사", time: getSampleData(offset: 8)),
            Task(title: "경쟁사 분석 회의", time: getSampleData(offset: 8)),
            Task(title: "UI/UX 개선 회의", time: getSampleData(offset: 8))
        ],
        taskDate: getSampleData(offset: 8)
    ),
    TaskMetaData(
        tasks: [
            Task(title: "사내 교육 프로그램", time: getSampleData(offset: -4)),
            Task(title: "품질 보증 검토", time: getSampleData(offset: -4)),
            Task(title: "마케팅 전략 회의", time: getSampleData(offset: -4))
        ],
        taskDate: getSampleData(offset: -4)
    ),
    TaskMetaData(
        tasks: [
            Task(title: "신제품 런칭 준비", time: getSampleData(offset: 1)),
            Task(title: "법적 문제 검토", time: getSampleData(offset: 1))
        ],
        taskDate: getSampleData(offset: 1)
    )
]

            LazyVGrid(columns: colums, spacing: 15){
                // ForEach를 통해 extractDate()를 통해 받아온 DateValue를 순회하면서
                // CardView @ViewBuilder를 통해 각 cell을 그림
                ForEach(extractDate()){ value in
                    CardView(value: value)
                    // background를 이용해 currentDate와 value가 같은 경우 캡슐모양 바탕 그리기
                        .background(
                            Capsule()
                                .fill(.yellow)
                                .padding(.horizontal, 8)
                                // value로 들어온 날짜가 currentDate와 같은 경우는 캡슐을 보여주고  opacity 1
                                // 아닌 경우 opacity 0으로 해서 안보이게
                                .opacity(isSameDay(date1: value.date, date2: currentDate) ? 1 : 0)
                            
                        
                        )
                    // CardView로 그려진 각 GridItem에 onTapGesture를 적용해서 누르면 해당 GridItem의 date 값으로
                    // currentDate를 업데이트
                    // 그러면 currentDate가 변경되면서 currentDate에 대해 조건이 걸려있는 화면 다 바뀜
                        .onTapGesture {
                            currentDate = value.date
                        }
                }
            }
            
        }
        .onChange(of: currentMonth) { newValue in
            currentDate = getCurrentMonth()
        }
    }
    
    // LazyVGrid의 각 GridItem에 해당하는 cell을 그릴때 아래의 @ViewBuilder를 사용하여
    // isSameDay를 이용 각 아이템의 조건을 체크하여 그림을 어떻게 그릴지 결정
    @ViewBuilder
    func CardView(value: DateValue) -> some View {
        
        VStack {
            // ForEach를 통해 들어오는 value 값이 -1(현재 달에 포함안되는날)이 아닌 경우에는 그린다.
            if value.day != -1 {
                // Task에 파일에 선언한 tasks 샘플데이터를 사용
                // [TaskMetaData]에서 하나씩 꺼낸 TaskMetaData 요소를 task에 받은 뒤
                // 받은 task의 taskDate가 현재 랜더링하려는 GridItem의 날짜값(value)와 같은 경우
                // 해당 task를 반환해서 task에 넣고 활용
                // 아닌 경우 다음 TaskMetaData를 꺼내서 확인하기
                // 위의 방법으로 [TaskMetaData]의 요소들을 순회하면서 가장 먼저(first) 조건(where)을 만족하는 요소 반환하기
                if let task = tasks.first(where: {task in
                    return isSameDay(date1: task.taskDate, date2: value.date)
                }){
                    // 위의 if let 구문이 성공해 (TaskMetaData.taskDate와 현재 랜더링 하려는 날짜와 같은 TaskMetaData가
                    // tasks 샘플데이터 내에 존재한 경우
                    Text("\(value.day)") // 랜더링하려는 날짜 (value)
                        .font(.title3.bold())
                        .foregroundStyle(isSameDay(date1: task.taskDate, date2: currentDate) ? .white : .primary)
                    // 조건을 충족해 가져온 task의 날짜가 현재 날짜와 같은지 확인해서 색상을 다르게 랜더링
                    // task의 날짜가 currentDate와 같은지 확인해서 만족하는 경우 글자색 하얀색, 아닌경우 글자색 검은색
                        .frame(maxWidth: .infinity)
                    
                    Spacer()
                    
                    // 주어진 날짜에 task가 있으면 동그라미 띄우기
                    Circle()
                        .fill(isSameDay(date1: task.taskDate, date2: currentDate) ? .white : .yellow)
                        .frame(width: 8, height: 8)
                }
                else {
                    
                    // 만약에 CardView로 받은 날짜(value)와 같은 날의 TaskMetaData가 없는 경우 아래를 실행
                    Text("\(value.day)")
                        .font(.title3.bold())
                        .foregroundStyle(isSameDay(date1: value.date, date2: currentDate) ? .white : .primary)
                        .frame(maxWidth: .infinity)
                    
                    
                    Spacer()
                }
            }
        }
        .padding(.vertical, 8)
        .frame(height: 60, alignment: .top)
        
    }
    
    // Date 타입의 값을 두개 받아서 둘이 같은지, 다른지 확인
    func isSameDay(date1: Date, date2: Date) -> Bool {
        let calendar = Calendar.current
        return calendar.isDate(date1, inSameDayAs: date2)
    }

            // 해당 날짜에 대한 일정 목록이 있는 경우 띄우기
            VStack(spacing: 15){
                // 제목 
                Text("Tasks")
                    .font(.title2.bold())
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.vertical, 20)
                
                // 위에서 현재 날짜와 일치하는 TaskMetaData가 있는 경우 해당 TaskMetaData를 task로 가져와서
                if let task = tasks.first(where: {task in
                    return isSameDay(date1: task.taskDate, date2: currentDate)
                }){
                    
                    // TaskMetaData의 내부에 있는 tasks 배열(task요소들로 구성)을 순회하며
                    // 화면에 그리기
                    ForEach(task.tasks){ task in
                        VStack(alignment: .leading, spacing: 10){
                            // 시간 랜덤값줌
                            Text(task.time.addingTimeInterval(CGFloat.random(in: 0...5000)), style: .time)
                            
                            Text(task.title)
                                .font(.title2.bold())
                        }
                        .padding(.vertical, 10)
                        .padding(.horizontal)
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .background(
                            Color(.yellow)
                                .opacity(0.5)
                                .cornerRadius(10)
                        )
                        
                    }
                    
                }else {
                    Text("No Task Found")
                }
            }
            .padding()

struct Home: View {
    
    @State var currentDate: Date = Date()
    
    var body: some View {
        
        ScrollView(.vertical, showsIndicators: false){
            
            VStack(spacing: 20){
                
                CustomDatePicker(currentDate: $currentDate)
                
            }
            .padding(.vertical)
        }
        // safeArea를 고려해서 컴포넌트 위치 선정
        .safeAreaInset(edge: .bottom){
            
            HStack{
                
                Button(action: {
                    // Task를 추가하는버튼
                    
                }, label: {
                    Text("Add Task")
                        .fontWeight(.bold)
                        .padding(.vertical)
                        .frame(maxWidth: .infinity)
                        .background(.red, in: Capsule())
                })
                
                Button(action: {
                    // Reminder를 추가하는 버튼 
                    
                }, label: {
                    Text("Add Reminder")
                        .fontWeight(.bold)
                        .padding(.vertical)
                        .frame(maxWidth: .infinity)
                        .background(.orange, in: Capsule())
                })
            }
            .tint(.black)
        }
    }
}

#Preview {
    Home()
}

전체 코드

struct DateValue: Identifiable{
    var id = UUID().uuidString
    var day: Int
    var date: Date
}

import Foundation

struct Task: Identifiable {
    var id = UUID().uuidString
    var title: String
    var time: Date = Date()
}

struct TaskMetaData: Identifiable {
    var id = UUID().uuidString
    var tasks: [Task]
    var taskDate: Date
}

func getSampleData(offset: Int) -> Date {
    let calendar = Calendar.current
    let date = calendar.date(byAdding: .day, value: offset, to: Date())
    return date ?? Date()
}

var tasks: [TaskMetaData] = [
    TaskMetaData(
        tasks: [
            Task(title: "프로젝트 회의", time: getSampleData(offset: 0)),
            Task(title: "코드 리뷰", time: getSampleData(offset: 0)),
            Task(title: "고객 미팅", time: getSampleData(offset: 0))
        ],
        taskDate: getSampleData(offset: 0)
    ),
    TaskMetaData(
        tasks: [
            Task(title: "문서 작성", time: getSampleData(offset: -2)),
            Task(title: "팀 미팅", time: getSampleData(offset: -2)),
            Task(title: "제품 개발 스프린트 시작", time: getSampleData(offset: -2))
        ],
        taskDate: getSampleData(offset: -2)
    ),
    TaskMetaData(
        tasks: [
            Task(title: "제품 발표 준비", time: getSampleData(offset: 5)),
            Task(title: "인프라 문제 점검", time: getSampleData(offset: 5))
        ],
        taskDate: getSampleData(offset: 5)
    ),
    TaskMetaData(
        tasks: [
            Task(title: "시장 조사", time: getSampleData(offset: 8)),
            Task(title: "경쟁사 분석 회의", time: getSampleData(offset: 8)),
            Task(title: "UI/UX 개선 회의", time: getSampleData(offset: 8))
        ],
        taskDate: getSampleData(offset: 8)
    ),
    TaskMetaData(
        tasks: [
            Task(title: "사내 교육 프로그램", time: getSampleData(offset: -4)),
            Task(title: "품질 보증 검토", time: getSampleData(offset: -4)),
            Task(title: "마케팅 전략 회의", time: getSampleData(offset: -4))
        ],
        taskDate: getSampleData(offset: -4)
    ),
    TaskMetaData(
        tasks: [
            Task(title: "신제품 런칭 준비", time: getSampleData(offset: 1)),
            Task(title: "법적 문제 검토", time: getSampleData(offset: 1))
        ],
        taskDate: getSampleData(offset: 1)
    )
]

import SwiftUI

struct Home: View {
    
    @State var currentDate: Date = Date()
    
    var body: some View {
        
        ScrollView(.vertical, showsIndicators: false){
            
            VStack(spacing: 20){
                
                CustomDatePicker(currentDate: $currentDate)
                
            }
            .padding(.vertical)
        }
        .safeAreaInset(edge: .bottom){
            
            HStack{
                
                Button(action: {
                    
                }, label: {
                    Text("Add Task")
                        .fontWeight(.bold)
                        .padding(.vertical)
                        .frame(maxWidth: .infinity)
                        .background(.red, in: Capsule())
                })
                
                Button(action: {
                    
                }, label: {
                    Text("Add Reminder")
                        .fontWeight(.bold)
                        .padding(.vertical)
                        .frame(maxWidth: .infinity)
                        .background(.orange, in: Capsule())
                })
            }
            .tint(.black)
        }
    }
}

#Preview {
    Home()
}

import SwiftUI

struct CustomDatePicker: View {
    
    @Binding var currentDate: Date
    
    @State var currentMonth: Int = 0
    
    var body: some View {
        
        
        VStack(spacing: 35){
            
            let days: [String] =
                ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]
            
            HStack(spacing: 20){
                
                VStack(alignment: .leading, spacing: 10){
                    
                    Text(extraDate()[0])
                        .font(.caption)
                        .fontWeight(.semibold)
                    
                    Text(extraDate()[1])
                        .font(.title.bold())
                    
                }
                
                Spacer(minLength: /*@START_MENU_TOKEN@*/0/*@END_MENU_TOKEN@*/)
                
                
                Button(action: {
                    withAnimation{
                        currentMonth -= 1
                    }
                }, label: {
                    Image(systemName: "chevron.left")
                        .font(.title2)
                })
                
                Button(action: {
                    withAnimation{
                        currentMonth += 1
                    }
                }, label: {
                    Image(systemName: "chevron.right")
                        .font(.title2)
                })
            }
            
            .padding(.horizontal)
            
            HStack(spacing: 0){
                ForEach(days, id: \.self){ day in
                    
                    Text(day)
                        .font(.callout)
                        .fontWeight(.semibold)
                        .frame(maxWidth: .infinity)
                }
            }
            
            let colums = Array(repeating: GridItem(), count: 7)
            
            LazyVGrid(columns: colums, spacing: 15){
                ForEach(extractDate()){ value in
                    CardView(value: value)
                        .background(
                            Capsule()
                                .fill(.yellow)
                                .padding(.horizontal, 8)
                                .opacity(isSameDay(date1: value.date, date2: currentDate) ? 1 : 0)
                            
                        
                        )
                        .onTapGesture {
                            currentDate = value.date
                        }
                }
            }
            
            
            VStack(spacing: 15){
                Text("Tasks")
                    .font(.title2.bold())
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.vertical, 20)
                
                if let task = tasks.first(where: {task in
                    return isSameDay(date1: task.taskDate, date2: currentDate)
                }){
                   
                    ForEach(task.tasks){ task in
                        VStack(alignment: .leading, spacing: 10){
                            Text(task.time.addingTimeInterval(CGFloat.random(in: 0...5000)), style: .time)
                            
                            Text(task.title)
                                .font(.title2.bold())
                        }
                        .padding(.vertical, 10)
                        .padding(.horizontal)
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .background(
                            Color(.yellow)
                                .opacity(0.5)
                                .cornerRadius(10)
                        )
                        
                    }
                    
                }else {
                    Text("No Task Found")
                }
            }
            .padding()
            
        }
        .onChange(of: currentMonth) { newValue in
            currentDate = getCurrentMonth()
        }
    }
    
    @ViewBuilder
    func CardView(value: DateValue) -> some View {
        
        VStack {
      
            if value.day != -1 {
                if let task = tasks.first(where: {task in
                    return isSameDay(date1: task.taskDate, date2: value.date)
                }){
                    Text("\(value.day)") 
                        .font(.title3.bold())
                        .foregroundStyle(isSameDay(date1: task.taskDate, date2: currentDate) ? .white : .primary)
                        .frame(maxWidth: .infinity)
                    
                    Spacer()
                    
                    Circle()
                        .fill(isSameDay(date1: task.taskDate, date2: currentDate) ? .white : .yellow)
                        .frame(width: 8, height: 8)
                }
                else {
                   
                    Text("\(value.day)")
                        .font(.title3.bold())
                        .foregroundStyle(isSameDay(date1: value.date, date2: currentDate) ? .white : .primary)
                        .frame(maxWidth: .infinity)
                    
                    
                    Spacer()
                }
            }
        }
        .padding(.vertical, 8)
        .frame(height: 60, alignment: .top)
        
    }
    
    func isSameDay(date1: Date, date2: Date) -> Bool {
        let calendar = Calendar.current
        return calendar.isDate(date1, inSameDayAs: date2)
    }
    
    
    func extraDate()->[String]{
         
        let formatter = DateFormatter()
        formatter.dateFormat = "YYYY MMMM"
        
        let date = formatter.string(from: currentDate)
        return date.components(separatedBy: " ")
        
    }
    
    func getCurrentMonth() -> Date {

        let calendar = Calendar.current
        
        guard let currentMonth =
                calendar.date(byAdding: .month, value: self.currentMonth, to: Date()) else {
            return Date()
        }
        return currentMonth
    }
    
    func extractDate() -> [DateValue]{
        
        let calendar = Calendar.current
        
        let currentMonth = getCurrentMonth()
        
        var days =  currentMonth.getAllDates().compactMap { date -> DateValue in
            
            let day = calendar.component(.day, from: date)
            
            return DateValue(day: day, date: date)
        }
        
        let firstWeekday = calendar.component(.weekday, from: days.first?.date ?? Date())
        
        for _ in 0 ..< firstWeekday - 1{
            days.insert(DateValue(day: -1, date: Date()), at: 0)
        }
        
        return days
    }
}

#Preview {
    CustomDatePicker(currentDate: .constant(Date()))
}


extension Date{
    
    func getAllDates() -> [Date] {
        let calendar = Calendar.current

        let startDate =
        calendar.date(from: Calendar.current.dateComponents([.year, .month], from: self))!
        
        let range = calendar.range(of: .day, in: .month, for: startDate)!
        
        return range.compactMap{ day -> Date in
            return calendar.date(byAdding: .day, value: day - 1, to: startDate)!
            
        }
    }
}

[unnnyong]

우와.. 파인 짱이에요!!!!!!