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

4. 삭제와 수정 추가 (CRUD 완성해보기)

by yoondoo 2026. 3. 20.
728x90

0. 이전

  • 일정을 새롭게 추가할 수 있었다.
    • 제목을 쓰지 않으면 저장 불가
  • 오늘은 일정을 삭제 or 수정할 수 있게 기능을 추가해보자.

1. 스와이프 삭제 .onDelete

  • 목록에서 왼쪽으로 밀면 삭제 버튼 등장
  • 일정을 밀어서 삭제
ForEach(events) { event in
	// 일정 표시
}
.onDelete { indexSet in
  events.remove(
  	atOffsets: indexSet
  )
}

// indexSet = "몇 번째를 지울지"
// remove(atOffsets:) = 배열에서 제거
  • .onDelete는 ForEach 바로 뒤에 붙여야 동작
  • indexSet = 삭제할 항목의 위치(번호) 정보
  • 삭제하면 배열에서 완정히 사라짐(복구 불가)

2. 수정 화면 만들기

  • 추가와 수정은 같은 폼
  • 수정의 경우 기존 데이터가 미리 채워져 있어야함
  • 상세화면 -> 수정 버튼 -> 수정 화면
  • 저장하면 덮어쓰기
// EventDetailView 상단에
.toolbar {
	Button("수정") {
    	showingEdit = true
    }
}
.sheet(isPresented:
      $showingEdit) {
 	AddEventView(
    	events: $events,
        eventToEdit: event  // 수정모드!
    )
}

3. 기존 데이터 불러오기(추가 vs 수정 구분법)

  • Optional로 구분
  • 있을 수도, 없을 수도 있는 값
  • swift에서 ?가 붙으면 Optional

eventToEdit이 없으면 추가 모드

eventToEdit이 있으면 수정 모드

var eventToEdit: Event?   // Oprional

// 화면이 나타날 때
.onAppear {
	if let event = eventToEdit{
    	// 수정 모드: 기존 값 채우기
        title = event.title
        date = event.date
        memo = event.memo
    }
    // 없으면: 추가 모드 (빈 값)
}

4. 프롬프트 작성

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

추가할 기능:

[삭제 기능]
1. 목록에서 일정을 왼쪽으로 스와이프하면 삭제 버튼이 나타난다
2. 삭제 버튼을 누르면 해당 일정이 목록에서 제거된다
3. 삭제 확인 없이 바로 삭제된다

[수정 기능]
4. 상세 화면 상단에 "수정" 버튼이 있다
5. 수정 버튼을 탭하면 일정 수정 화면이 나타난다
6. 수정 화면은 추가 화면과 동일하지만, 기존 데이터가 미리 입력되어 있다
7. 저장하면 새 일정 추가가 아니라 기존 일정이 수정된다
8. 제목이 비어있으면 저장 버튼이 비활성화된다

전체 코드를 하나의 파일로 다시 작성해줘.
AddEventView를 수정/추가 둘 다 처리할 수 있게 만들어줘.

5.실행 체크

  • [ㅇ] 일정을 스와이프해서 삭제했다
  • [ㅇ] 상세 화면에서 수정 버튼을 눌렀다
  • [ㅇ] 수정 화면에서 내용을 바꿨다
  • [ㅇ] 저장해서 수정 내용이 반영되는 걸 확인했다
  • [ㅇ] 취소 버튼도 눌러봤다
반응형

댓글