본문 바로가기
AI 해보기/딸깍! 일정관리 앱 만들어보기

8. 검색과 그룹별

by yoondoo 2026. 3. 20.
728x90

0. 이전 -> 추가 될 기능

  • 검색 기능 없음 -> 제목 + 메모 실시간 검색
  • 일정이 쭉 나열 -> 날짜별 그룹화
  • 스크롤로 찾기 -> 검색 + 필터 + 그룹

1. 검색 줄 .searchable

  • 네비게이션 바에 검색 바 자동 추가
  • 입력하면 실시간으로 필터링
  • 제목 + 메모에서 동시 검색
  • 필터 / 정렬과 함께 동작
.searchable(
	text: $searchText
)

var searched: [Event] {
	if searchText.isEmpty {
    	return filtered				
    }
    return filtered.filter {
    	$0.title
          .localizedCaseInsensitive
          Contains(searchText)  	// 대소문자 무시
        || $0.memo					// ||는 or다. 제목이나 메모 중 하나만 맞아도 ok
           .localizedCaseInsensitive
           Contains(searchText)		// 대소문자 무시
    }
}

 

2. 날짜별 그룹화

  • 같은 날짜의 일정을 묶기
  • 각 날짜가 섹션 헤더로 표시
  • "오늘", "내일", 나머지는 날짜
  • Dictionary(grouping:by:) 사용
let grouped = Dictionary(
	grouping: events
) { event in
	Calendar.current
      .startOfDay(for: event.date)
}

// Section으로 표시
ForEach(sortedDates) { date in
	Section(header:
    	Text(headerFor(date))
    ) {
    	ForEach(grouped[date]!) {
        	EventRaw(event: $0)
        }
	}
}
  • Dictionary(grouping:by:) 같은 키끼리 자동 묶기
  • Section: 각 그룹에 헤더를 붙여서 표시

3. 프롬프트 작성

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

추가할 기능:

[검색 기능]
1. 상단에 검색 바가 나타난다
2. 검색어를 입력하면 제목에 검색어가 포함된 일정만 표시된다
3. 검색어가 비어있으면 전체 일정 표시
4. 대소문자 구분 없이 검색
5. 검색어: "회의" → "중요한 회의", "팀 회의" 모두 검색됨

[날짜별 그룹화]
6. 같은 날짜의 일정끼리 묶어서 표시한다
7. 각 그룹에 날짜 헤더가 있다 (예: "2024년 2월 8일")
8. 헤더에 해당 날짜의 일정 개수도 표시 (예: "2024년 2월 8일 (3)")
9. 날짜가 가까운 그룹이 위로
10. 오늘 날짜는 "오늘"로 표시

[통합]
11. 검색 + 필터 + 그룹화가 모두 함께 작동
12. 검색 결과도 날짜별로 그룹화되어 표시

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

4. 실행 체크

  • [ㅇ] 검색 기능을 테스트했다
  • [ㅇ] 날짜별 그룹화를 확인했다
  • [ㅇ] 검색 + 필터 조합을 테스트했다
반응형

댓글