[Flutter + Firebase로 북마크 앱 만들기 #8] 스마트 카테고리 관리 시스템

📌 시리즈 목차

• #1 프로젝트 초기 설정 및 Firebase 연동

• #2 프로젝트 구조 설계 및 Riverpod 적용

• #3 Firebase Authentication 연동 및 로그인 구현

• #4 Firestore 연동 및 북마크 CRUD 구현

• #5 Firebase Hosting으로 웹 배포하기

• #6 Android 앱 빌드 및 Play Store 배포 준비

• #7 스마트 URL 런처 구현 (SNS 앱 연동)

• #8 스마트 카테고리 관리 시스템 ← 현재 글

• #9 모던 UI 디자인 시스템 구축

🎯 이번 글에서 다룬 내용

구현한 기능

✅ 카테고리 자동완성 (Autocomplete)
✅ 카테고리 이름 변경 (Batch 업데이트)
✅ 카테고리 삭제 (북마크 General로 이동)
✅ 실시간 카테고리 업데이트 (StreamProvider)
✅ General 기본 카테고리 보호

문제 해결

❌ 하드코딩된 ['General'] 목록
❌ Dropdown으로 제한된 선택
❌ 카테고리 추가/수정 불가
❌ 실시간 업데이트 안 됨

↓

✅ 자유로운 카테고리 입력
✅ 기존 카테고리 자동완성
✅ 카테고리 편집/삭제 가능
✅ 실시간 자동 업데이트

💡 핵심 아이디어

카테고리는 북마크에서 자동 추출

Firestore 구조:
bookmarks/
  └── {bookmarkId}/
      ├── userId: "user123"
      ├── url: "https://..."
      ├── title: "제목"
      ├── category: "개발"  ← String 필드
      └── ...

카테고리 목록:
북마크들의 category 필드를
Set으로 중복 제거 → 정렬

• ✅ 별도 categories 컬렉션 불필요

• ✅ 추가 Firestore 쿼리 없음

• ✅ 자연스러운 카테고리 생성

• ✅ 간단한 구조

🏗️ 1단계: 카테고리 자동완성 위젯

CategoryAutocomplete 생성

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import '../../../core/constants/app_colors.dart';
import '../services/bookmark_provider.dart';

class CategoryAutocomplete extends ConsumerStatefulWidget {
  final String? initialValue;
  final ValueChanged<String> onChanged;

  const CategoryAutocomplete({
    super.key,
    this.initialValue,
    required this.onChanged,
  });

  @override
  ConsumerState<CategoryAutocomplete> createState() =>
      _CategoryAutocompleteState();
}

class _CategoryAutocompleteState extends ConsumerState<CategoryAutocomplete> {
  late final TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController(text: widget.initialValue ?? 'General');
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final categoriesAsync = ref.watch(categoriesProvider);

    return categoriesAsync.when(
      data: (categories) {
        // General이 없으면 추가
        final allCategories = ['General', ...categories]
            .toSet()
            .toList();

        return Autocomplete<String>(
          initialValue: TextEditingValue(text: _controller.text),
          optionsBuilder: (TextEditingValue textEditingValue) {
            if (textEditingValue.text.isEmpty) {
              return allCategories;
            }

            // 입력값과 매칭되는 카테고리 필터링
            return allCategories.where((String option) {
              return option
                  .toLowerCase()
                  .contains(textEditingValue.text.toLowerCase());
            });
          },
          onSelected: (String selection) {
            _controller.text = selection;
            widget.onChanged(selection);
          },
          fieldViewBuilder: (
            BuildContext context,
            TextEditingController fieldController,
            FocusNode focusNode,
            VoidCallback onFieldSubmitted,
          ) {
            fieldController.text = _controller.text;
            fieldController.selection = _controller.selection;

            return TextFormField(
              controller: fieldController,
              focusNode: focusNode,
              decoration: InputDecoration(
                labelText: '카테고리',
                hintText: '카테고리를 입력하거나 선택하세요',
                prefixIcon: const Icon(Icons.category),
                suffixIcon: IconButton(
                  icon: const Icon(Icons.arrow_drop_down),
                  onPressed: () {
                    focusNode.requestFocus();
                  },
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
              onChanged: (value) {
                _controller.text = value;
                widget.onChanged(value);
              },
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return '카테고리를 입력하세요';
                }
                return null;
              },
            );
          },
          optionsViewBuilder: (
            BuildContext context,
            AutocompleteOnSelected<String> onSelected,
            Iterable<String> options,
          ) {
            return Align(
              alignment: Alignment.topLeft,
              child: Material(
                elevation: 4.0,
                borderRadius: BorderRadius.circular(12),
                child: Container(
                  constraints: const BoxConstraints(maxHeight: 200),
                  width: 300,
                  child: ListView.builder(
                    padding: const EdgeInsets.all(8),
                    itemCount: options.length + 1,
                    shrinkWrap: true,
                    itemBuilder: (BuildContext context, int index) {
                      // 마지막 항목: "새 카테고리 만들기"
                      if (index == options.length) {
                        return ListTile(
                          leading: const Icon(
                            Icons.add_circle_outline,
                            color: AppColors.primary,
                          ),
                          title: Text(
                            '새 카테고리: "${_controller.text}"',
                            style: const TextStyle(
                              color: AppColors.primary,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          onTap: () {
                            onSelected(_controller.text);
                          },
                        );
                      }

                      // 기존 카테고리 목록
                      final String option = options.elementAt(index);
                      return ListTile(
                        leading: Icon(
                          option == 'General'
                              ? Icons.folder_special
                              : Icons.folder,
                          color: option == 'General'
                              ? AppColors.primary
                              : Colors.grey[600],
                        ),
                        title: Text(option),
                        trailing: option == 'General'
                            ? const Chip(
                                label: Text(
                                  '기본',
                                  style: TextStyle(fontSize: 10),
                                ),
                                visualDensity: VisualDensity.compact,
                              )
                            : null,
                        onTap: () {
                          onSelected(option);
                        },
                      );
                    },
                  ),
                ),
              ),
            );
          },
        );
      },
      loading: () => TextFormField(
        controller: _controller,
        decoration: InputDecoration(
          labelText: '카테고리',
          prefixIcon: const Icon(Icons.category),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
          ),
        ),
        onChanged: widget.onChanged,
      ),
      error: (_, __) => TextFormField(
        controller: _controller,
        decoration: InputDecoration(
          labelText: '카테고리',
          prefixIcon: const Icon(Icons.category),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
          ),
        ),
        onChanged: widget.onChanged,
      ),
    );
  }
}

• Autocomplete<String> 위젯 활용

• 기존 카테고리 필터링

• "새 카테고리: XXX" 옵션 추가

• General 특별 표시

🎨 2단계: AddBookmarkDialog 업데이트

Dropdown → Autocomplete 변경

// 하드코딩된 카테고리
final List<String> _defaultCategories = ['General'];

DropdownButtonFormField<String>(
  items: _defaultCategories.map((category) {
    return DropdownMenuItem(
      value: category,
      child: Text(category),
    );
  }).toList(),
)

// CategoryAutocomplete 사용
CategoryAutocomplete(
  initialValue: _selectedCategory,
  onChanged: (value) {
    setState(() {
      _selectedCategory = value;
    });
  },
)

📁 3단계: 카테고리 관리 다이얼로그

ManageCategoriesDialog 생성

1. 카테고리 이름 변경

Future<void> _saveEdit(String oldCategory) async {
  final newCategory = _editController.text.trim();

  // 유효성 검사
  if (newCategory.isEmpty) return;
  if (newCategory == oldCategory) return;

  // Batch 업데이트
  await bookmarkService.renameCategoryForUser(
    currentUser.uid,
    oldCategory,
    newCategory,
  );
}

2. 카테고리 삭제

Future<void> _deleteCategory(String category) async {
  await bookmarkService.deleteCategoryForUser(
    currentUser.uid,
    category,
  );
  // 해당 카테고리 북마크 → General로 이동
}

3. UI 구성

ListTile(
  leading: Icon(category == 'General'
    ? Icons.folder_special
    : Icons.folder),
  title: isEditing
    ? TextField(...)  // 편집 모드
    : Text(category), // 일반 모드
  trailing: isGeneral
    ? Chip(label: Text('기본'))  // General
    : Row([편집버튼, 삭제버튼]),  // 일반 카테고리
)

🔧 4단계: BookmarkService 확장

카테고리 관리 함수 추가

1. 카테고리 목록 조회

Future<List<String>> getCategories(String userId) async {
  try {
    final snapshot = await _firestore
        .collection(_collection)
        .where('userId', isEqualTo: userId)
        .get();

    final categories = snapshot.docs
        .map((doc) => doc.data()['category'] as String)
        .toSet()  // 중복 제거
        .toList();

    categories.sort();  // 정렬
    return categories;
  } catch (e) {
    throw '카테고리 조회 중 오류: $e';
  }
}

2. 카테고리 이름 변경

Future<void> renameCategoryForUser(
  String userId,
  String oldCategory,
  String newCategory,
) async {
  try {
    // General 보호
    if (oldCategory == 'General') {
      throw 'General 카테고리는 변경할 수 없습니다';
    }

    // 해당 카테고리의 모든 북마크 조회
    final snapshot = await _firestore
        .collection(_collection)
        .where('userId', isEqualTo: userId)
        .where('category', isEqualTo: oldCategory)
        .get();

    // Batch 업데이트
    final batch = _firestore.batch();

    for (var doc in snapshot.docs) {
      batch.update(
        doc.reference,
        {
          'category': newCategory,
          'updatedAt': Timestamp.now(),
        },
      );
    }

    await batch.commit();
  } catch (e) {
    throw '카테고리 변경 중 오류: $e';
  }
}

• 한 번에 여러 문서 업데이트

• 원자성 보장 (all or nothing)

• 네트워크 호출 최소화

3. 카테고리 삭제

Future<void> deleteCategoryForUser(
  String userId,
  String category,
) async {
  try {
    // General 보호
    if (category == 'General') {
      throw 'General 카테고리는 삭제할 수 없습니다';
    }

    // 해당 카테고리 북마크 조회
    final snapshot = await _firestore
        .collection(_collection)
        .where('userId', isEqualTo: userId)
        .where('category', isEqualTo: category)
        .get();

    if (snapshot.docs.isEmpty) return;

    // Batch로 General로 변경
    final batch = _firestore.batch();

    for (var doc in snapshot.docs) {
      batch.update(
        doc.reference,
        {
          'category': 'General',
          'updatedAt': Timestamp.now(),
        },
      );
    }

    await batch.commit();
  } catch (e) {
    throw '카테고리 삭제 중 오류: $e';
  }
}

4. 카테고리별 북마크 개수

Future<Map<String, int>> getCategoryCounts(String userId) async {
  try {
    final snapshot = await _firestore
        .collection(_collection)
        .where('userId', isEqualTo: userId)
        .get();

    final Map<String, int> counts = {};

    for (var doc in snapshot.docs) {
      final category = doc.data()['category'] as String? ?? 'General';
      counts[category] = (counts[category] ?? 0) + 1;
    }

    return counts;
  } catch (e) {
    throw '카테고리 통계 조회 중 오류: $e';
  }
}

🔥 5단계: 실시간 업데이트 구현

문제: FutureProvider의 한계

// FutureProvider - 한 번만 실행
final categoriesProvider = FutureProvider<List<String>>((ref) async {
  final bookmarkService = ref.watch(bookmarkServiceProvider);
  final currentUser = ref.watch(currentUserProvider);

  if (currentUser == null) return [];

  // Firestore 직접 호출 (한 번만!)
  return await bookmarkService.getCategories(currentUser.uid);
});

• ❌ 북마크 추가 시 업데이트 안 됨

• ❌ 카테고리 변경 시 업데이트 안 됨

• ❌ Flutter restart 필요

해결: StreamProvider로 변경

// StreamProvider - 실시간 업데이트!
final categoriesProvider = StreamProvider.autoDispose<List<String>>((ref) {
  final bookmarksAsync = ref.watch(bookmarksStreamProvider);

  // 북마크 Stream에서 카테고리 추출
  return bookmarksAsync.when(
    data: (bookmarks) {
      // 중복 제거 및 정렬
      final categories = bookmarks
          .map((bookmark) => bookmark.category)
          .toSet()
          .toList();

      categories.sort();

      // Stream으로 반환
      return Stream.value(categories);
    },
    loading: () => Stream.value([]),
    error: (_, __) => Stream.value([]),
  );
});

• ✅ bookmarksStreamProvider 구독

• ✅ 북마크 변경 시 자동 재계산

• ✅ 추가 Firestore 요청 없음

• ✅ autoDispose로 메모리 최적화

작동 원리

1. Firestore에서 북마크 변경 감지
   ↓
2. bookmarksStreamProvider 업데이트
   ↓
3. categoriesProvider가 자동 재계산
   ↓
4. CategoryFilterSection 자동 리렌더링
   ↓
5. UI 즉시 반영! ✨

🎨 6단계: CategoryFilterSection 업데이트

"관리" 버튼 추가

// 카테고리 버튼들
...allCategories.map((category) {
  // 기존 FilterChip들
}),

// 카테고리 관리 버튼 추가
const SizedBox(width: 4),
ActionChip(
  avatar: const Icon(
    Icons.settings,
    size: 18,
    color: AppColors.primary,
  ),
  label: const Text(
    '관리',
    style: TextStyle(
      color: AppColors.primary,
      fontWeight: FontWeight.w500,
    ),
  ),
  onPressed: () {
    showDialog(
      context: context,
      builder: (context) => const ManageCategoriesDialog(),
    );
  },
  backgroundColor: AppColors.primaryLight,
  side: BorderSide(
    color: AppColors.primary.withOpacity(0.3),
  ),
),

🎬 사용자 시나리오

1. 새 카테고리 생성

[북마크 추가]
1. "북마크 추가" 버튼 클릭
2. URL, 제목 입력
3. 카테고리 필드 클릭
4. "디자인" 입력
5. 드롭다운에 "새 카테고리: 디자인" 표시
6. 선택 후 저장
   ↓
✅ "디자인" 카테고리 자동 생성
✅ 필터 섹션에 즉시 표시
✅ 다음 북마크부터 자동완성에 표시

2. 카테고리 이름 변경

[카테고리 관리]
1. 필터 섹션에서 "관리" 버튼 클릭
2. "개발" 카테고리 옆 편집 버튼 클릭
3. "개발자"로 변경
4. 저장 버튼 클릭
   ↓
✅ 해당 카테고리의 모든 북마크 업데이트
✅ 필터 섹션에 즉시 반영
✅ 자동완성에도 즉시 반영

3. 카테고리 삭제

[카테고리 관리]
1. "뉴스" 카테고리 삭제 버튼 클릭
2. 확인 다이얼로그:
   "이 카테고리의 북마크 5개가
    General 카테고리로 이동됩니다"
3. "삭제" 확인
   ↓
✅ 5개 북마크 → General로 이동
✅ "뉴스" 카테고리 필터에서 사라짐
✅ 즉시 UI 업데이트

🖼️ UI 스크린샷

자동완성 드롭다운

┌──────────────────────────────┐
│ 카테고리: [개발____] 🔽       │
│ ┌──────────────────────────┐ │
│ │ 📁 General (기본)         │ │
│ │ 📁 개발                  │ │
│ │ 📁 뉴스                  │ │
│ │ ➕ 새 카테고리: "개발자"  │ │
│ └──────────────────────────┘ │
└──────────────────────────────┘

카테고리 필터

┌──────────────────────────────────────┐
│ [전체] [General] [개발] [뉴스] [⚙️관리] │
└──────────────────────────────────────┘

카테고리 관리 다이얼로그

┌─────────────────────────────────┐
│ 📁  카테고리 관리            ✖  │
├─────────────────────────────────┤
│  ┌──────────────────────────┐  │
│  │ 📁 General  [기본]        │  │
│  │ 기본 카테고리 (수정/삭제 불가)│  │
│  └──────────────────────────┘  │
│  ┌──────────────────────────┐  │
│  │ 📁 개발      [✏️] [🗑️]   │  │
│  └──────────────────────────┘  │
│  ┌──────────────────────────┐  │
│  │ 📁 뉴스      [✏️] [🗑️]   │  │
│  └──────────────────────────┘  │
├─────────────────────────────────┤
│ 💡 북마크 추가 시 새 카테고리를  │
│    입력하면 자동으로 생성돼요!   │
└─────────────────────────────────┘

삭제 확인 다이얼로그

┌─────────────────────────────────┐
│      카테고리 삭제               │
├─────────────────────────────────┤
│  정말 "개발" 카테고리를          │
│  삭제하시겠습니까?               │
│                                 │
│  ┌───────────────────────────┐ │
│  │ ⚠️ 이 카테고리의 북마크    │ │
│  │    12개가 General로       │ │
│  │    이동됩니다.            │ │
│  └───────────────────────────┘ │
│          [취소]  [삭제]          │
└─────────────────────────────────┘

🐛 트러블슈팅

문제 1: 카테고리가 실시간으로 업데이트 안 됨

• 북마크 추가 후 필터에 카테고리 안 나타남

• Flutter restart 해야 반영됨

// Before
final categoriesProvider = FutureProvider<List<String>>(...)

// After
final categoriesProvider = StreamProvider.autoDispose<List<String>>(...)

문제 2: General 카테고리가 수정/삭제됨

if (category == 'General') {
  throw 'General 카테고리는 변경/삭제할 수 없습니다';
}

문제 3: Batch 업데이트 실패

final batch = _firestore.batch();
// ... batch.update() 호출들 ...
await batch.commit(); // 필수!

📊 성능 최적화

1. autoDispose 사용

StreamProvider.autoDispose<List<String>>

• 화면 벗어나면 자동 구독 해제

• 메모리 누수 방지

2. Batch 업데이트

// Bad (여러 번 네트워크 호출)
for (var doc in docs) {
  await doc.reference.update({...});
}

// Good (한 번에 처리)
final batch = _firestore.batch();
for (var doc in docs) {
  batch.update(doc.reference, {...});
}
await batch.commit();

3. 기존 Stream 재사용

// Bad (추가 Firestore 요청)
return bookmarkService.getCategoriesStream(userId);

// Good (기존 Stream 활용)
return bookmarksStreamProvider
    .map((bookmarks) => extractCategories(bookmarks));

📁 최종 파일 구조

lib/features/bookmarks/
├── models/
│   └── bookmark.dart
├── services/
│   ├── bookmark_provider.dart        ← Stream으로 변경
│   └── bookmark_service.dart         ← 함수 추가
└── widgets/
    ├── add_bookmark_dialog.dart      ← Autocomplete 적용
    ├── category_filter_section.dart  ← 관리 버튼 추가
    ├── category_autocomplete.dart    ← 새로 추가
    └── manage_categories_dialog.dart ← 새로 추가

🎓 배운 점

기술적 학습

• optionsBuilder: 자동완성 목록 생성

• fieldViewBuilder: 입력 필드 커스터마이징

• optionsViewBuilder: 드롭다운 UI 커스터마이징

• FutureProvider vs StreamProvider

• autoDispose로 메모리 관리

• Provider 간 의존성 관리

• 여러 문서 원자적 업데이트

• 네트워크 호출 최적화

• 트랜잭션 관리

UX 디자인

• 북마크 추가 시 자동 생성

• 별도 생성 과정 불필요

• 직관적인 워크플로우

• 변경 즉시 UI 반영

• 사용자 혼란 방지

• 빠른 피드백 루프

• General 카테고리 보호

• 삭제 전 확인 다이얼로그

• 북마크 개수 안내

💡 개선 가능한 부분

1. 카테고리 아이콘/색상

class Category {
  final String name;
  final IconData icon;
  final Color color;
  final int order;
}

• 별도 categories 컬렉션 필요

• UI 풍부해짐

• 복잡도 증가

2. 드래그 앤 드롭 정렬

ReorderableListView(
  onReorder: (oldIndex, newIndex) {
    // 카테고리 순서 변경
  },
)

3. 카테고리별 통계

ListTile(
  title: Text(category),
  trailing: Chip(
    label: Text('${count}개'),
  ),
)

🔗 관련 자료

공식 문서

• Autocomplete Widget

• Riverpod StreamProvider

• Firestore Batch Writes

✅ 완료!

구현한 기능 정리

✅ 카테고리 자동완성 (CategoryAutocomplete)
✅ 새 카테고리 즉시 생성
✅ 카테고리 이름 변경 (Batch 업데이트)
✅ 카테고리 삭제 (북마크 General로 이동)
✅ General 기본 카테고리 보호
✅ 실시간 업데이트 (StreamProvider)
✅ 카테고리 관리 다이얼로그
✅ 삭제 확인 다이얼로그
✅ 북마크 개수 표시

🤔 개발 중 고민했던 점

1. 카테고리 저장 방식

users/{userId}/categories/{categoryId}
  - name: "개발"
  - icon: "code"
  - color: "#4CAF50"
  - order: 0

• 카테고리에 메타데이터 추가 가능

• 명확한 관리

• 복잡한 구조

• 추가 Firestore 쿼리

• 동기화 필요

bookmarks/{bookmarkId}
  - category: "개발"  // String 필드

• ✅ 간단한 구조

• ✅ 추가 쿼리 없음

• ✅ 자연스러운 생성

• 메타데이터 제한

• 빈 카테고리 불가

2. 실시간 업데이트 방식

// 북마크 추가 후
ref.invalidate(categoriesProvider);

• 매번 수동 호출 필요

• 실수로 빠뜨리기 쉬움

• 여러 곳에 코드 중복

final categoriesProvider = StreamProvider.autoDispose((ref) {
  return bookmarksStreamProvider.map(...);
});

• ✅ 자동 업데이트

• ✅ 한 곳에서 관리

• ✅ 실수 방지

3. 더미 북마크 생성 여부

// 더미 북마크 생성
{
  url: "https://placeholder.category",
  title: "[카테고리 예약]",
  category: "새카테고리",
  isPlaceholder: true
}

• 복잡도 증가

• Firestore에 불필요한 데이터

• 필터링 로직 추가 필요

// 자연스러운 생성
북마크 추가 → 자동완성에 입력 → 저장 → 카테고리 생성

• ✅ 심플한 로직

• ✅ 깔끔한 데이터

• ✅ 직관적인 UX

💬 실전 팁

1. Autocomplete 커스터마이징

optionsViewBuilder: (context, onSelected, options) {
  return Material(
    elevation: 4.0,
    child: ListView.builder(
      itemBuilder: (context, index) {
        // 커스텀 ListTile
        return ListTile(
          leading: Icon(...),
          title: Text(...),
          trailing: Chip(...),
        );
      },
    ),
  );
}

2. Batch 업데이트 최적화

const int BATCH_SIZE = 500;

for (int i = 0; i < docs.length; i += BATCH_SIZE) {
  final batch = _firestore.batch();

  for (int j = i; j < min(i + BATCH_SIZE, docs.length); j++) {
    batch.update(docs[j].reference, {...});
  }

  await batch.commit();
}

3. Provider 메모리 관리

// 화면 벗어나도 계속 구독
final provider = StreamProvider((ref) {...});

// 자동으로 구독 해제
final provider = StreamProvider.autoDispose((ref) {...});

4. 에러 처리

try {
  await bookmarkService.deleteCategory(...);
} catch (e) {
  // Bad: 기술적 메시지
  // "FirebaseException: permission-denied"

  // Good: 사용자 친화적
  Fluttertoast.showToast(
    msg: '카테고리 삭제 중 문제가 발생했습니다',
    backgroundColor: AppColors.error,
  );
}

📈 성능 측정

Before vs After

Before (개별 업데이트):
- 북마크 10개: ~2초
- 북마크 100개: ~20초

After (Batch 업데이트):
- 북마크 10개: ~0.3초  ✅ 6.7배 빠름
- 북마크 100개: ~1.5초  ✅ 13배 빠름

Before:
- 카테고리 추가: 1 read + N writes (N=북마크 수)
- 카테고리 변경: 1 read + N writes
- 합계: 2 + 2N requests

After:
- 카테고리 추가: 0 requests (Stream 재사용)
- 카테고리 변경: 1 read + 1 batch write
- 합계: 2 requests  ✅ (1+N)배 절약

🎨 디자인 결정

1. 아이콘 선택

General → Icons.folder_special (특별함 강조)
일반 카테고리 → Icons.folder (친숙함)
추가 → Icons.add_circle_outline (명확한 액션)
편집 → Icons.edit (표준 아이콘)
삭제 → Icons.delete (위험 색상)

2. 색상 사용

Primary (파란색):
- General 카테고리
- 선택된 필터
- 관리 버튼

Success (초록색):
- 저장 완료
- 추가 성공

Error (빨간색):
- 삭제 버튼
- 에러 메시지

Warning (주황색):
- 삭제 확인
- 중요 안내

3. 인터랙션 디자인

// 버튼 클릭 시
- 로딩 인디케이터 표시
- 버튼 비활성화
- 완료 후 토스트 메시지

// 편집 모드
- TextField로 변경
- 저장/취소 버튼 표시
- 다른 액션 비활성화

🧪 테스트 체크리스트

카테고리 자동완성:
☑ 기존 카테고리 필터링
☑ 새 카테고리 생성 옵션
☑ General 특별 표시
☑ Enter 키로 선택
☑ 드롭다운 아이콘 클릭

카테고리 이름 변경:
☑ 편집 모드 진입
☑ 빈 이름 검증
☑ 같은 이름 무시
☑ General 변경 불가
☑ Batch 업데이트 성공
☑ 즉시 UI 반영

카테고리 삭제:
☑ 확인 다이얼로그 표시
☑ 북마크 개수 표시
☑ General 삭제 불가
☑ 북마크 General로 이동
☑ 빈 카테고리 삭제
☑ 즉시 필터에서 제거

실시간 업데이트:
☑ 북마크 추가 시 카테고리 추가
☑ 북마크 삭제 시 카테고리 제거
☑ 카테고리 변경 시 필터 업데이트
☑ 여러 화면 동기화
☑ Hot Reload 동작

📱 반응형 고려사항

모바일

constraints: BoxConstraints(
  maxWidth: 500,  // 다이얼로그 최대 너비
  maxHeight: 600, // 다이얼로그 최대 높이
)

// 드롭다운
width: 300,  // 적절한 크기

태블릿/웹

// 더 큰 화면에서도 적절한 크기 유지
constraints: BoxConstraints(
  maxWidth: min(MediaQuery.of(context).size.width * 0.8, 600),
)

🔐 보안 고려사항

Firestore Rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /bookmarks/{bookmarkId} {
      allow read, write: if request.auth != null
        && request.auth.uid == resource.data.userId;

      // 카테고리 변경 시 userId 변경 불가
      allow update: if request.auth != null
        && request.auth.uid == resource.data.userId
        && request.resource.data.userId == resource.data.userId;
    }
  }
}

🎓 학습 자료

추천 영상

• Flutter Autocomplete Tutorial

• Riverpod Advanced Patterns

• Firestore Batch Operations

추천 글

• Building Better UX with Autocomplete

• State Management with Riverpod

• Firestore Best Practices

🙏 마치며

핵심 내용 요약

1. Autocomplete로 사용자 친화적 입력
2. StreamProvider로 실시간 업데이트
3. Batch로 효율적인 대량 업데이트
4. General 보호로 안정성 확보
5. 자연스러운 카테고리 생성 플로우

배운 점

• Flutter Autocomplete 활용법

• Riverpod Stream 패턴

• Firestore Batch 최적화

• UX 디자인 고민과 결정

• 실시간 동기화 구현