[Swfit] todoList 과제

LV1. Todo List 화면 만들기

1. UI 구현하기
2. Storyboard를 활용하여 기본 Todo List 화면 UI를 구성해주세요.
   1. UI는 자유롭게 구성해도 됩니다. 다만, 요구사항을 지켜주세요.
3. Todo에 필요한 데이터를 구성해보아요.
   1. 할일에 대한 Title (String), 완료 여부를 확인할 isCompleted (Bool) 등 데이터를 구성해요.
   2. 그 외 나타내주고 싶은 데이터가 있다면 자유롭게 추가해도 좋습니다.
   3. 필요하다면 테스트 데이터를 넣어서 UI에서 확인해볼 수 있습니다.
   4. 예시

   struct Todo {
     // 타이틀 (String)
     // 완료 여부 (Bool)
     // 기타 추가로 나타내고 싶은 데이터가 있으면 구성해줍니다.
   }
   

4. UIButton과 UITableView을 활용하여 화면을 구성해주세요.
   1. Todo 추가
   2. Todo List

 

LV2. Todo 추가 및 완료 기능 구현하기

• Todo 추가하기
  • Lv1에서 만든 Todo 추가 버튼을 이용해주세요.
  • UIAlertController를 활용해서 할 일 추가 UI 및 기능을 구현해보세요. (Closure 등을 사용해서 Action을 추가해보아요.)
    • iOS 입문 단계 강의에서 UIAlertController를 따로 다루지 않았기에, 아래 개발자 공식문서를 참고하여 얼럿을 구현해봅니다.
    • UIAlertController | Apple Developer Documentation
• Todo 완료하기
  • 버튼 혹은 UISegmentedControl 등을 활용하여 Todo의 완료 상태를 완료/미완료 상태로 만들어주세요.
  • 할일을 나타내는 Todo의 완료/미완료 상태에 따라 UI를 변경해주세요. (아래 참고 이미지를 보면 할일 완료시 가로선을 넣었어요.)

 

LV3. Todo 삭제 기능 구현하기

• Todo 삭제하기
  • Todo List에서 특정 Todo를 삭제할 수 있도록 화면과 기능을 자유롭게 구성해보세요.
  • Todo Cell에 삭제 UIButton을 구성하여도 되고, Todo를 스와이프하여 삭제하여도 좋습니다.
    • 스와이프 삭제 시 UITableView의 기능을 이용해봐요.

 

## 선택 구현기능

Lv4 Todo Cell 발전시키기

• Todo 데이터에 들어있는 다양한 요소들을 배치해보아요.
  • Title과 isCompleted 데이터만 있다면 더 추가해봐요.
• Interface Builder의 수많은 속성들을 바꾸어보세요. (코드로 바꾸어보아도 좋아요)
  • UIImageView - Todo에 사진 추가하기
  • UILabel - Due date 시간 추가하기
  • 기타 자유로운 UIKit 요소 추가 및 속성 변경

 

Lv5 할일 추가 등 animation이 있는 코드 구성하기

• iOS에서는 기본적으로 구현해주는 animation들이 다양하게 있어요
  • tableview에 cell이 추가되거나 삭제되는 animation
  • 기타 시도해보고 싶은 기능

---

진행상황

 

viewController class에 tableView라는 이름의 IBOutlet 변수를 생성해 주고, editButton IBOulet변수도 생성해 줌.

editButton은 UIBarButtonItem 형태로 형성해주었습니다.

그리고 edit과 add 버튼에 대한 @IBAction함수도 추가해 줌.

@IBOutlet weak var tableView: UITableView!
    @IBOutlet var editButton: UIBarButtonItem!
    var doneButton: UIBarButtonItem?
    
    var tasks = [Task]()  {
        didSet {
            self.saveTasks()
        }
    }

• • •  

 

Add 버튼을 누르면 tapAddButton() alert창 실행

@IBAction func tapAddButton(_ sender: UIBarButtonItem) {
        // Alert
        let alert = UIAlertController(title: "Todo Title", message: "내용을 입력해주세요.", preferredStyle: .alert)
        let registerButton = UIAlertAction(title: "등록", style: .default, handler: { [weak self] _ in
            guard let title = alert.textFields?[0].text else { return }
            let task = Task(title: title, done: false)
            self?.tasks.append(task)
            // Add > 텍스트필드에 있는 값을 가져옴.
            // Upload
            self?.tableView.reloadData()
        })
        
        let cancelButton = UIAlertAction(title: "취소", style: .cancel, handler: nil)
        alert.addAction(cancelButton)
        alert.addAction(registerButton)
        alert.addTextField(configurationHandler: { textField in
            textField.placeholder = "내용을 입력해주세요." })
        self.present(alert, animated: true, completion: nil)
    
    }

 

Task 구조체 추가

struct Task {
    var title: String // 할일 내용 저장
    var done: Bool // 할일이 완료 되었는지 여부 저장
}

 

todo제목, 내용을 저장해주는 함수 saveTasks()

저장한 todo를 불러오는 함수 loadTasks()

// Save
    func saveTasks() {
        let data = self.tasks.map {
            [
                "title": $0.title,
                "done": $0.done
            ]
        }
        let userDefaults = UserDefaults.standard
        userDefaults.set(data, forKey: "tasks")
    }
    
    // Load
    func loadTasks() {
        let userDefaults = UserDefaults.standard
        guard let data = userDefaults.object(forKey: "tasks") as? [[String: Any]] else { return }
        self.tasks = data.compactMap{
            guard let title = $0["title"] as? String else { return nil }
            guard let done = $0["done"] as? Bool else { return nil }
            return Task(title: title, done: done)
        }
    }