[UIKit] 메모 기능 구현 리뷰 (Feat. 나만의 Todo)

오늘은 나만의 Todo 앱에서 메모 기능에 대해 간단히 리뷰해보려 합니다.

이번 포스트에서는 메모 작성하기, 메모 상세 화면 두 가지 기능에 초점을 맞춰 소개할게요.

 

저번 포스트에서 다뤘던 Todo 불러오기, Todo 삭제하기, 메모 불러오기, 메모 삭제하기 기능은 로직이 거의 동일하기 때문에 이번에는 생략하겠습니다.

혹시 이전 내용을 확인하고 싶다면 아래 링크를 참고해 주세요👇

🔗 이전 포스트 보러 가기

[UIKit] Todo 기능 구현 리뷰 (Feat. 나만의 Todo)

---

✏️ Memo 생성

이번에는 메모 작성하기와 메모 상세 보기 중에서 먼저 메모 작성 기능에 대해 살펴보려고 합니다.

작성된 메모는 Firebase Firestore에 저장됩니다. 전반적인 저장 로직은 이전 포스팅에서 다룬 Todo 저장 방식과 동일하므로, 이번 포스트에서는 UI 요소들과 커스터마이징한 TextView 처리 방식에 더 집중해서 설명드릴게요.

📝 메모 작성 화면 구성

메모 작성 화면에서는 아래와 같은 UI 요소들을 사용했습니다:

• UITextField : 메모 제목 입력
• UITextView : 메모 본문 내용 입력
• UILabel : 현재 날짜 표시
• UIButton : 메모 생성 버튼

1. 제목 입력은 UITextField로, 본문은 TextView로!

TextField는 줄바꿈이 필요 없기 때문에 Return 키를  완료(Done)로 설정해 키보드를 내리도록 했습니다.

extension MemoCreateViewController: UITextFieldDelegate {
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        titleTextField.endEditing(true)
        return true
    }
}

 

본문 내용은 여러 줄 입력이 필요하므로 UITextView를 사용했어요. 대신 키보드 상단에 ‘완료’ 버튼을 달아 사용자가 직접 키보드를 내릴 수 있도록 setupDoneButtonOnKeyboard() 메서드를 추가했습니다.

private func setupDoneButtonOnKeyboard() {
    let toolbar = UIToolbar()
    toolbar.sizeToFit()
    
    let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
    let doneButton = UIBarButtonItem(title: "완료", style: .done, target: self, action: #selector(doneButtonTapped))
    
    toolbar.items = [flexibleSpace, doneButton]
    contentTextView.inputAccessoryView = toolbar
}

@objc private func doneButtonTapped() {
    view.endEditing(true) // 키보드 내림
}

 

2. TextView에는 Placeholder가 없다?! 

UITextField는 기본적으로 placeholder 속성이 제공되지만, UITextView는 그렇지 않기 때문에 아래와 같은 방식으로 플레이스홀더 기능을 구현했어요.

let textViewPlaceHolder = "내용을 입력하세요."

extension MemoCreateViewController: UITextViewDelegate {
    func textViewDidBeginEditing(_ textView: UITextView) {
        if contentTextView.text == textViewPlaceHolder {
            contentTextView.text = nil
            contentTextView.textColor = .bk // 기본 텍스트 색상
        }
    }
    
    func textViewDidEndEditing(_ textView: UITextView) {
        if contentTextView.text.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
            contentTextView.text = textViewPlaceHolder
            contentTextView.textColor = .gray2 // 플레이스홀더 색상
        }
    }
}

사용자가 내용을 작성하려고 할 때 플레이스홀더 문구가 사라지도록 했고, 작성이 완료된 후 아무 내용이 없다면 다시 플레이스홀더가 나타나도록 구성했습니다.

 

3. 메모 저장은 이전 포스팅과 동일한 Firestore 로직

작성 버튼을 누르면 ViewModel을 통해 메모 저장 로직이 실행됩니다.

이 로직은 이전 Todo 저장 방식과 거의 동일하므로 이번 포스트에서는 생략하겠습니다.

---

🔍 Memo 상세화면

메모를 작성했다면, 이제 해당 메모를 눌러 내용을 확인하는 상세 화면도 필요하겠죠?

이번에는 UICollectionView에서 셀을 선택했을 때, 어떻게 메모 상세 화면으로 자연스럽게 이동하는지 그 흐름을 정리해보겠습니다.

 

1. 셀 터치 시 상세 화면으로 이동

MemoViewController에서는 각 셀을 탭했을 때 collectionView(_:didSelectItemAt:) delegate 메서드가 호출되도록 구현했습니다.

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    let selectedMemo = viewModel.state.viewModels.memoViewModels[indexPath.row]
    
    let storyboard = UIStoryboard(name: "MemoDetail", bundle: nil)
    let detailVC = storyboard.instantiateViewController(withIdentifier: "MemoDetailViewController") as! MemoDetailViewController
    
    detailVC.memoTitle = selectedMemo.title
    detailVC.memoID = selectedMemo.id
    detailVC.memoContent = selectedMemo.content
    detailVC.memoDate = selectedMemo.date
    
    present(detailVC, animated: true)
}

 

선택된 셀의 ViewModel에서 필요한 데이터(제목, 내용, 날짜, ID)를 추출하고, MemoDetailViewController에 전달하여 present 방식으로 모달 형태로 띄워줍니다.

 

2. MemoDetailViewController 구성

상세 화면은 굉장히 심플하게 구성되어 있습니다. 전달받은 데이터를 그대로 화면에 표시해주는 구조예요.

override func viewDidLoad() {
    super.viewDidLoad()
    
    titleLabel.text = memoTitle
    dateLabel.text = memoDate
    contentLabel.text = memoContent
}

 

UILabel 세 개를 사용하여 메모의 제목, 날짜, 내용을 표시합니다. 전달받은 속성들을 각 레이블에 매핑해주면 끝!

---

🎬 Memo 기능 구현 영상

---

🧩 마무리

이번 포스팅에서는 나만의 Todo 앱에 포함된 메모 기능 중 메모 작성 화면 구성과 메모 상세 화면 이동 및 표시

기능에 대해 간단히 소개해드렸습니다.

 

Firestore에 저장하는 로직은 기존 Todo 저장 방식과 거의 동일하므로 생략하고,

대신 UITextView에 직접 구현한 Placeholder 처리와 키보드 내림 버튼 커스터마이징,

그리고 셀 클릭 시 상세 화면으로 자연스럽게 이동하는 흐름에 집중해서 설명드렸습니다.

 

📌 전체 코드가 궁금하신 분들은 GitHub 저장소를 참고해주세요:

👉 🔗 GitHub 저장소 바로가기

GitHub - woolnd/UIKit_MyTodo

 

다음 포스팅에서는 앱의 또 다른 핵심 기능인 ‘녹음 기능’ 구현에 대해 소개해드릴 예정입니다.

녹음 시작/정지 버튼 구성부터, 녹음 파일 저장 및 리스트화, 재생 기능까지 하나씩 정리해볼게요.

 

앞으로도 꾸준히 기록하며 성장하는 개발자가 되기 위해 달려보겠습니다! 🚀

읽어주셔서 감사합니다 😊