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. 실행 체크
- [ㅇ] 검색 기능을 테스트했다
- [ㅇ] 날짜별 그룹화를 확인했다
- [ㅇ] 검색 + 필터 조합을 테스트했다
반응형
'AI 해보기 > 딸깍! 일정관리 앱 만들어보기' 카테고리의 다른 글
| 9. 탭 뷰 만들기 (0) | 2026.03.20 |
|---|---|
| 7. 기간 필터와 정렬 (0) | 2026.03.20 |
| 6. 필터 추가해보기 (카테고리 필터링) (1) | 2026.03.20 |
| 5. 카테고리와 알림 (0) | 2026.03.20 |
| 4. 삭제와 수정 추가 (CRUD 완성해보기) (0) | 2026.03.20 |
댓글