[SwiftUI] Memo 기능 리뷰 (Feat. 나만의 Todo)

오늘은 제가 만들고 있는 나만의 Todo앱의 Memo 기능에 대해 리뷰해보려고 합니다.

이번에 구현한 Memo 기능은 메모 작성하기와 메모 상세 보기를 중심으로 살펴볼 예정이에요.

 

지난번 포스팅(Todo 기능 구현 리뷰)에서도 소개했듯이, 메모 불러오기와 메모 삭제 기능은 Todo 기능과 거의 동일한 구조로 구성되어 있어서 이번 포스팅에서는 따로 다루지 않고 위 링크를 참고해주시면 도움이 될 것 같아요.

 

이번 포스팅에서는 메모 작성하기 기능과 상세 화면 구성에서 어떤 점을 고려해서 구현했는지,

SwiftUI를 활용하면서 어떻게 더 간결하고 유연하게 UI 흐름을 만들었는지 중심으로 리뷰해보겠습니다.

 

그럼 하나씩 살펴볼게요! 🚀

---

✏️ 메모 작성하기

사용자가 메모 제목과 내용을 입력하면 Firebase Firestore에 저장하고, 메모 목록에 추가되는 기능입니다.

 

1. 메모 작성 화면 구성

다음과 같은 입력 UI를 구성했어요:

• 제목 입력 → TextField
• 내용 입력 → TextEditor + placeholder 오버레이
• 현재 날짜/시간 표시 → 하단에 고정 표시

특히 TextEditor에는 SwiftUI 기본으로는 placeholder가 없기 때문에

내용이 비어있을 때는 별도로 오버레이를 사용해 "내용을 입력하세요." 를 표시하도록 처리했습니다:

TextEditor(text: $memoContent)
    .overlay(
        Group {
            if memoContent.isEmpty {
                Text("내용을 입력하세요.")
                    .foregroundColor(.iconOn)
                    .padding(.leading, Constants.ControlWidth * 30)
                    .padding(.top, Constants.ControlHeight * 30)
            }
        }, alignment: .topLeading
    )

 

UIKit에서는 UITextView에 placeholder 처리를 별도로 해줘야 했지만,

SwiftUI에서는 Group + overlay 패턴으로 간단하게 구현할 수 있어 편리했습니다.

 

2. 유효성 검사 및 Firestore에 저장

guard !memoTitle.trimmingCharacters(in: .whitespaces).isEmpty else {
    showingTitleAlert = true
    return
}

guard !memoContent.trimmingCharacters(in: .whitespaces).isEmpty else {
    showingContentAlert = true
    return
}

사용자가 제목 또는 내용을 입력하지 않았을 경우, Alert 창을 띄워 유효성 검사를 처리하도록 구성했습니다.

let newMemo = memo(
    id: UUID().uuidString,
    title: memoTitle,
    content: memoContent,
    date: formattedToday
)

viewModel.process(.createMemo(newMemo)) { success in
    if success {
        dismiss()
    }
}

성공 시에는 메모 모델을 생성해 Firestore에 저장하고, 저장 완료 후 .dismiss()를 호출해 화면을 닫는 구조입니다.

 

3. Firestore 저장 처리

documentRef.updateData([
    "memo": FieldValue.arrayUnion([memoData])
]) { error in
    if let error = error {
        print("❌ 저장 실패: \(error.localizedDescription)")
        completion(false)
    } else {
        print("✅ Firestore 저장 성공!")
        completion(true)
    }
}

 

FieldValue.arrayUnion을 사용해 중복 없이 안전하게 추가하고

Firestore 문서 전체를 다시 쓰지 않고 배열 항목 추가하도록 하였습니다. 

이 방식은 동시 다중 사용자 환경에서도 안정적인 데이터 저장이 가능하다는 점에서 Todo 기능과 동일하게 적용했습니다.

---

☁️ 메모 상세 보기

이번에는 메모 기능 중에서 작성된 메모를 확인하는 상세 보기 화면을 리뷰해볼게요.

메모 목록에서 원하는 메모를 선택하면 sheet 형태로 상세 내용을 확인할 수 있도록 구성했습니다.

 

1. 메모 선택 시 sheet로 상세 화면 띄우기

.sheet(item: $selectedMemo) { memo in
    MemoDetailView(memo: memo)
}

메모 목록 화면에서는 각 메모 항목(Button) 클릭 시 selectedMemo 값에 해당 메모를 할당하고,

selectedMemo가 바인딩된 sheet가 자동으로 띄워지는 구조로 구성했어요.

 

Button(action: {
    selectedMemo = memo
}, label: {
    // 메모 셀 UI 구성
})

• 클릭 시 → selectedMemo 값이 설정됨 → .sheet 트리거
• 닫기 시 → 자동으로 selectedMemo = nil 되어 sheet 종료

 

2. 상세 화면 구성

상세 화면에서는 다음 정보를 보여주도록 구성했습니다:

• 메모 제목
• 작성 날짜/시간
• 메모 내용

구성은 VStack 안에 Text 컴포넌트를 사용해서 각 항목을 깔끔하게 나열했습니다:

if let title = memo?.title {
    Text("\(title)")
        .font(.system(size: 26, weight: .bold))
        .foregroundColor(.bk)
}

if let date = memo?.date {
    Text("\(date)")
        .font(.system(size: 20, weight: .medium))
        .foregroundColor(.key)
}

if let content = memo?.content {
    Text("\(content)")
        .font(.system(size: 17))
        .foregroundColor(.bk)
}

중요한 포인트:

• if let 바인딩을 사용해서 안전하게 옵셔널 처리를 하였습니다.
• 상태 기반 View 구성으로 별도 reload가 필요 없습니다.
• Spacer() 활용으로 아래 여백 확보하여 UI가 깔끔하게 정렬하였습니다.

---

🎬 Memo 기능 구현 영상

---

🧩 마무리

이번 포스팅에서는 나만의 Todo 앱의 Memo 기능을 리뷰해보았습니다. 

메모 작성하기 기능과 메모 상세 보기 화면 중심으로, SwiftUI의 상태 기반 UI 구성과 화면 전환 흐름,

그리고 Firestore 연동 방식까지 전반적인 구현 흐름을 살펴보았습니다.

 

📌 전체 구현 코드가 궁금하신 분들은 아래 링크를 참고해주세요:

👉 🔗 GitHub 저장소 바로가기

GitHub - woolnd/SwiftUI_MyTodo

 

또한 이 프로젝트의 UIKit 버전도 함께 개발한 경험이 있으니,
비교나 학습에 관심 있으신 분들은 제 GitHub와 블로그를 참고해주시면 도움이 되실 거예요 :)

 

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