과제 주제 📝

iOS 입문 강의를 수강하고 배운 내용을 활용하여 ToDoList App을 만드는 것이 과제이다!

이전 숫자 야구 과제와 동일하게 구현해야 되는 기능으로 필수 구현 기능이 있고, 부가적으로 선택 구현 기능이 있다.

• 필수 구현 기능

  • Lv1. Todo List 화면 만들기 (TodoListViewController)

    Storyboard를 활용하여 UI를 구성해주세요.
     UIButton과 UITableView을 활용하여 화면을 구성해주세요.
     할일에 대한 데이터 구성
        - 할일 데이터의 고유값인 “id (Int)”
        - 할일 제목인 “Title (String)”
        - 완료 여부를 확인할 “isCompleted (Bool)”

  • Lv2. Todo 추가 및 완료 기능 구현하기 (TodoListViewController)

    Lv1에서 만든 Todo 추가 버튼을 이용해주세요.
    UIAlertController를 활용해서 할 일 추가 UI 및 기능을 구현해보세요. 
    (Closure 등을 사용해서 Action을 추가해보세요.)
    버튼 혹은 UISegmentedControl을 활용, Todo의 완료 상태를 완료/미완료 상태로 변경합니다.

  • Lv3. Todo 삭제 기능 구현하기 (TodoListViewController)

    Todo List에서 특정 Todo를 삭제할 수 있도록 화면과 기능을 자유롭게 구성해보세요.

• 선택 구현 기능

  • Lv4. Todo Cell 발전시키기

     Todo 데이터에 들어있는 다양한 요소들을 배치해봅니다.
     Interface Builder의 수많은 속성들을 바꾸어보세요. (코드로 바꾸어보아도 좋아요)

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

     iOS에서는 기본적으로 구현해주는 animation들이 다양하게 있어요
     ex) tableview에 cell이 추가되거나 삭제되는 animation

위 조건들 중 현재는 필수 구현 기능인 Lv.3까지 설계하였고, Lv4와 Lv5의 구현 목표 중 일부만 구현에 성공하였다... 🥲

---

Lv.1 🐵

필수 구현 기능

Storyboard를 활용하여 UI를 구성
UIButton과 UITableView을 활용하여 화면을 구성
할일에 대한 데이터 구성

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var toDoListTable: UITableView!
    
    var data: [(id: Int, title: String, isCompleted: Bool)] = []
    var count: Int = 0

    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        toDoListTable.dataSource = self
        toDoListTable.delegate = self
        toDoListTable.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
    }
    
    @IBAction func addListButton(_ sender: Any) {
        count += 1
        
        data.append((id: count, title: "todolist title", isCompleted: false))
        
        toDoListTable.reloadData()
    }
}

extension ViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        
        let item = data[indexPath.row]
        cell.textLabel?.text = item.title
        
        return cell
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("Selected: \(data[indexPath.row])")
        tableView.deselectRow(at: indexPath, animated: true)
    }
}

우선 아래의 그림처럼 ViewController의 UI를 구성하였다!

해당 과제에서 UITableView를 사용하기 때문에, 다음 단계에서 코드가 길어길 것을 고려하여 extension을 활용하여 UITableViewDataSource와 UITableViewDelegate에 대하 설정을 해주었다.

이때, Cell에 입력될 데이터는 ViewController 클래스 내부에 data 배열을 만들어서 활용하였다.

해당 배열에 출력된 값의 고유번호, 출력될 내용과 완료 여부를 포함시켰다.

여기까지가 Lv.1 단계이지만, addListButton 함수를 만들어 버튼을 누르면, count가 증가하여 고유번호가 알맞게 입력되도록 설정하였다.

---

Lv.2 🐶

필수 구현 기능

Lv.1에서 만든 Todo 추가 버튼이 동작하도록 구현
UIAlertController를 활용해서 할 일 추가 UI 및 기능을 구현
UISegmentedControl을 활용, Todo의 완료 상태를 완료/미완료 상태로 변경
할일을 나타내는 Todo의 완료/미완료 상태에 따라 UI를 변경

					:

@IBAction func addListButton(_ sender: Any) {
        let alertTitle = "할 일 추가"
        let addTitle = "추가"
        let cancelTitle = "취소"
        
        let addListAlert = UIAlertController(title: alertTitle, message: nil, preferredStyle: .alert)
        
        addListAlert.addTextField { textField in
            textField.placeholder = "할 일 입력"
        }

        let cancelButton = UIAlertAction(title: cancelTitle, style: .cancel)
        
        let addButton = UIAlertAction(title: addTitle, style: .default) { _ in
            if let textField = addListAlert.textFields?.first, let taskTitle = textField.text, !taskTitle.isEmpty {
                self.addTask(title: taskTitle)
            }
        }
        
        addListAlert.addAction(addButton)
        addListAlert.addAction(cancelButton)
        
        self.present(addListAlert, animated: true)
    }
    
    
    func addTask(title: String) {
        count += 1
        data.append((id: count, title: title, isCompleted: false))
        toDoListTable.reloadData()
    }
}

					:
                    
extension ViewController: UITableViewDataSource, UITableViewDelegate {

					:
                    
 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        
        let item = data[indexPath.row]
        cell.textLabel?.text = item.title
        
        let taskStateSwitch = UISwitch()
        taskStateSwitch.isOn = item.isCompleted
        taskStateSwitch.addTarget(self, action: #selector(switchStateChanged(_:)), for: .valueChanged)

        cell.accessoryView = taskStateSwitch
        
        return cell
    }
    
					:
    
    @objc func switchStateChanged(_ sender: UISwitch) {
        guard let cell = sender.superview as? UITableViewCell,
              let indexPath = toDoListTable.indexPath(for: cell),
              let taskTitle = cell.textLabel?.text
        else {
            return
        }
        
        data[indexPath.row].isCompleted = sender.isOn
        
        let attributedString = NSMutableAttributedString(string: taskTitle)
        if sender.isOn {
            attributedString.addAttribute(NSAttributedString.Key.strikethroughStyle, value: 1, range: NSMakeRange(0, attributedString.length))
        }
        cell.textLabel?.attributedText = attributedString
    }
}

코드 전부를 입력하기엔 양이 너무 많아 수정 및 추가된 부분만 정리하였다!

Lv.2 요구 조건을 따르기 위해 addListButton에 UIAlertController를 추가하였으며, UIAlertAction을 활용하여 "추가" 버튼을 누를 경우 TextField에 입력한 값을 addTask 함수의 title에 저장하도록 만들었다.

이때, textField에 입력된 값은 배열 형태로 저장되기에 .first를 통해 입력값에 접근할 수 있다!

그리고 UISwitch를 사용하여 각 Cell 마다 완료 여부를 선택할 수 있는 기능을 추가하였고, 이를 구현하기 위해 switchStateChanged 함수를 만들었다.

또한 할 일을 완료했을 경우, 해당 Tilte에 밑줄이 생기도록 NSMutableAttributedString을 활용하였다. 해당 기능도 switchStateChanged 함수 내부에 있는데, sender.isOn를 통해 완료 여부를 파악하고 해당 동작을 하도록 설계하였다.

---

Lv.3 🐹

필수 구현 기능

Todo 삭제하기 기능 추가
Todo를 스와이프하여 삭제 - UITableView의 기능

					:
                    
extension ViewController: UITableViewDataSource, UITableViewDelegate {

					:
                    
    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == .delete {
            data.remove(at: indexPath.row)
            
            tableView.deleteRows(at: [indexPath], with: .fade)
        }
    }
    
					:
}

Lv.3에서는 삭제 기능을 추가해야 하며, 해당 기능을 위해 editingStyle == .delete 조건을 활용하여 tableView 내의 Cell을 삭제시키도록 만들었다.

---

Lv.4 & Lv.5 ⁇

선택 구현 기능

Todo 데이터에 들어있는 다양한 요소들을 배치
Interface Builder의 수많은 속성들을 수정
할일 추가 등 animation이 있는 코드 구성
기타 시도해보고 싶은 기능

import UIKit

class ViewController: UIViewController {
    var data: [(id: Int, title: String, isCompleted: Bool, addTime: String)] = []

					:

	func addTask(title: String) {
        let addListTime = DateFormatter()
        addListTime.dateFormat = "HH:mm"
        let addListTimeTrnasString = addListTime.string(from: Date())
        
        count += 1
        
        data.append((id: count, title: title, isCompleted: false, addTime: addListTimeTrnasString))
        
        toDoListTable.reloadData()
    }
}


extension ViewController: UITableViewDataSource, UITableViewDelegate {

					:

@objc func switchStateChanged(_ sender: UISwitch) {

					:
            
            showcompletedAlert()
        }
					:
    }
    
    
    func showcompletedAlert() {
        let completedTitle = "🎉🎉🎉"
        let completedMessage = "할 일을 끝냈습니다! 😝"
        let doneTitle = "확인"
            
        let completedAlert = UIAlertController(title: completedTitle, message: completedMessage, preferredStyle: .alert)

        let doneButton = UIAlertAction(title: doneTitle, style: .default) { _ in
        }
        
        completedAlert.addAction(doneButton)
        
        self.present(completedAlert, animated: true)
    }
}

마지막 Lv.4 & 5에서는 요구하는 모든 기능을 구현하지 못하였지만, 몇몇 기능을 구현하였기에 이를 정리해보았다!

우선 기존 data에 addTime이라는 "작성 시간"이라는 요소를 추가하였다. 그래서 addTask를 살펴보면 DateFormatter를 통해 시간을 불러와 .dateFormat = "HH:mm"으로 24시간 형태로 시간을 변환해준 뒤, 이를 addListTimeTrnasString에 문자열 타입으로 저장해주었다.

그리고 할 일을 완료했을 때, showcompletedAlert 함수를 통해 🎉 축하 알람이 발생하도록 만들었다. 😅

아래는 todoList App을 실행시킨 모습이다!

---

과제를 마무리하며... 🔍

이번 과제도 어떻게 만들다보니 완성은 한 것 같다.😂

그나마 저번 과제에 비해 코드를 읽기 편한 것 같고 무엇보다 변수나 함수 명을 적절히 잘 작성한 것 같아 가독성이 훨씬 좋아진 것처럼 느껴진다!

하지만 난이도가 지난번 과제에 비해 상대적으로 매우 어려웠으며, 이로 인해 스스로 해결했다보다는 거의 대부분의 기능을 검색을 통해 만들었다... 🙈

이러한 부분이 많이 아쉽게 느껴진다.

그래도 지금처럼 모르는 내용을 잘 활용해서 결과물을 만들어 내는 것도 나름 의미가 있었던 것 같다!

Github -> toDoList-Memo