6. 필터 추가해보기 (카테고리 필터링)

0. 이전 -> 추가할 것

• 모든 일정이 다 보임 -> 원하는 것만 보기(필터링)
• 일정 찾으려면 스크롤 -> 한 번에 필터

1. 조건에 맞는 것만 고르기 .filter

• 배열에서 조건에 맞는 것만 골라내기
• 원본 배열은 변하지 않음!
  • 새로운 배열을 만들어서 반환
• $0 = filter 안에서 각 항목을 가리킴

// 전체 일정
let allEvents = [회의, 운동, 치과, 독서]

// 업무만 필터링
let workOnly = allEvents.filter {
	$0.category == .work
}
// -> [회의]

// $0 = "이 일정"
// $0.category = "이 일정의 카테고리"
// == .work = "업무인가?"
// -> true면 포함, false면 제외

• .filter는 원본을 안 바꿈 -> 새 배열 반환
• $0은 클로저 안의 축약 표현 (각 항목)
• 조건이 true인 것만 결과에 포함됨

2. 필터 버튼 UI 만들기

// 필터 버튼 UI
ScrollView(.horizontal) {
	Hstack{
    	// "전체" 버튼
        Button("전체") {
        	selectedFilter = nil
        }
        
        // 카테고리별 버튼
        ForEach(
        	EventCategory.allCases,
            id: \.self) { cat in
            Button(cat.rawValue) {
        		selectedFilter = cat    	
            }
        }
    }
}

// 버튼 스타일
// 선택된 버튼 강조
.backgroud(
	isSelected
    	? category.color // 선택 시 색상
        : Color.gray     // 미선택 시 회색
)
.foregroundColor(
	isSelected
    	? .white		// 선택시 흰색
        : .gray			// 미선택시 회색
)
.clipShape(Capsule())   // 캡슐 모양

3. 전체 보기 vs 카테고리별 보기

• nil이 핵심!
  • selectedFilter: EventCategory?
  • nil -> 값이 없다 -> 필터 선택 안함 -> 전체 표시
  • .work -> "업무"선택됨 -> "업무"만 표시

var filteredEvents: [Event] {
	if let filter = selectedFilter {
    	//필터 있으면 -> 해당 카테고리만
        return events.filter {
        	$0.category == filter
        }
    } else {
    	// nuil 이면 -> 전체
        return events
    }
}

4. @State로 필터 상태 관리

• @State가 바뀌면 화면이 자동 새로고침
• 필터 버튼 탭 -> @State 변경 -> 목록 갱신
• 사용자가 볼 때마다 최신 상태 유지

@State var selectedFilter:
	EventCategory? = nil	// 초기값: 전체
    
// 버튼 탭 -> @State 변경
Button("업무") {
	selectedFilter = .work
    // 화면 자동 새로고침
    // filteredEvents 재계산
    // "업무"만 보임
}

5. 프롬프트 작성

일정관리 앱을 이어서 개발할게.

추가할 기능:

[필터 UI]
1. 목록 상단에 필터 버튼들이 가로로 나란히 있다
2. 버튼: "전체", "업무", "개인", "약속", "기타"
3. 선택된 필터 버튼은 배경색이 다르게 표시된다 (강조)
4. 선택 안 된 버튼은 회색 배경

[필터 기능]
5. "전체"를 누르면 모든 일정이 보인다
6. "업무"를 누르면 업무 카테고리 일정만 보인다
7. "개인"을 누르면 개인 카테고리 일정만 보인다
8. "약속"을 누르면 약속 카테고리 일정만 보인다
9. "기타"를 누르면 기타 카테고리 일정만 보인다
10. 필터가 바뀌면 목록이 즉시 업데이트된다

[디자인]
11. 필터 버튼들은 스크롤 가능하게 (ScrollView)
12. 버튼은 동글동글한 캡슐 모양
13. 카테고리별 색상을 버튼에도 적용

현재 코드:
[여기에 Day 5의 전체 코드 붙여넣기]

전체 코드를 하나의 파일로 다시 작성해줘.

 

.

6. 실행 체크

• [ㅇ] 각 카테고리별 일정을 3개씩 만들었다
• [ㅇ] 모든 필터 버튼을 눌러봤다
• [ㅇ] 필터 전환이 잘 되는지 확인했다
• [ㅇ] 빈 필터도 테스트했다
• [ㅇ] 선택된 버튼 강조를 확인했다