과제 firebase 연동_Flutter 숙련주차 6일

박진·2026년 1월 12일

2026.01.12 (월)
Repository 적용
Firebase 연동
ViewModel 연결

UI 구현 및 폴더 정리, 뼈대 작업 완료 후 오늘은 Firebase 연동 및 ViewModel 연결하는 작업을 해보았다.

오늘의 공부 이미지 💫

🥨 Repository 클래스 설계

Repository는 데이터 저장소 역할을 한다. 오늘 중점적으로 구현해본 것은 데이터를 Firebase에 넣는 insert 함수 만들기~!

class TodoRepository {

  // ✅ 할 일 추가(Insert) 구현
  // ToDoEntity 객체를 받아 Firestore에 저장
  Future<void> insert({required ToDoEntity todo}) async {
    // 1. Firestore 인스턴스를 가져오기 (이제 데이터베이스 접근 권한 가ㄷ짐)
    FirebaseFirestore firestore = FirebaseFirestore.instance;

    // 2. 컬렉션 참조 생성: 'todos'라는 이름의 폴더(컬렉션)를 가리킨다.
    final collectionRef = firestore.collection('todos');

    // 3. 문서 참조 생성: 컬렉션 안에 새 문서를 넣을 준비를 한다.
    // .doc() 안에 아무것도 안 넣으면 Firestore가 자동으로 고유 ID를 생성해준다.
    final docRef = collectionRef.doc();

    // 4. 데이터 직렬화(Serialization): Dart 객체(Entity)를 Firestore가 이해할 수 있는 Map(JSON 형식)으로 변환한다.
    final data = todo.copyWith(id: docRef.id).toJson();

    // 5. 저장: 최종적으로 문서를 저장한다. 네트워크 작업이므로 await가 필수!
    await docRef.set(data);
    print("Firestore 저장 완료: ${docRef.id}");
  }
}

🥨 ViewModel 구현

home_view_model.dart 로 가서 Repository에게 데이터를 넘겨준다.
ViewModel은 UI와 Repository 사이에 가운데 역할로 UI로 부터 저장 버튼을 눌렀다 라는 신호를 받으면 Repository에 데이터를 넘겨준다. Riverpod의 Notifier를 사용해서 상태 관리해준다.

class HomeViewModel extends Notifier<List<ToDoEntity>> {
  // Repository 인스턴스를 생성하여 보유한다.
  final todoRepo = TodoRepository();

  @override
  List<ToDoEntity> build() {
    // getAllTodo();
    return [];
  }


  // ✅ UI에서 호출할 할 일 추가 함수
  Future<void> addToDo({required ToDoEntity todo}) async {
    final todos = await todoRepo.insert(todo: todo); // 저장하는 역할 *할일 추가
  }

... 생략 ...

// 뷰모델을 제공해주는 Provider 정의 (관리자)
final homeViewModelProvider = NotifierProvider<HomeViewModel, List<ToDoEntity>>(
  () => HomeViewModel(),
);

🥨 UI에서 호출

UI (할 일 추가 바텀 시트)에서 사용자가 내용을 입력하고 저장 버튼을 눌렀을 때, ViewModel의 함수를 실행할 수 있는 부분

// 저장 버튼 클릭 시 실행되는 함수
void saveToDo() {
    // Riverpod을 통해 HomeViewModel의 notifier를 가져오기
    final vm = ref.read(homeViewModelProvider.notifier);

    if (titleController.text.isEmpty) return;

    // ToDoEntity 객체를 만듬
    // ID는 Firestore에서 자동 생성할 것이므로 일단 빈 문자열로 넘긴다.
    final newTodo = ToDoEntity(
      id: "", // Repository에서 실제 ID로 교체될 예정
      title: titleController.text,
      description: descriptionController.text,
      isFavorite: isFavorite,
      isDone: false,
    );

    // 바텀 시트 닫기
    Navigator.of(context).pop();
}