20260309 #51 todo list screen 캘린더 중심 재설계

docs/plans/2026-03-09-todo-list-calendar-redesign.md

@@ -0,0 +1,46 @@
+# 홈 화면 Todo Bank + Slidable 스와이프 액션 구현
+
+**Goal:** 홈 화면 바텀시트에 todo bank 섹션을 추가하고, 할일 스와이프 액션을 flutter_slidable로 개선하여 날짜별 할일 관리 UX를 향상시킨다.
+
+**Architecture:** 기존 HomeScreen 바텀시트에 todo bank 섹션 추가. TodoListScreen은 변경 없음. DismissibleTodoItem을 Dismissible에서 flutter_slidable의 Slidable로 교체.
+
+**Tech Stack:** Flutter · Riverpod · flutter_slidable · table_calendar
+
+**관련 이슈:** #51
+
+---
+
+## 구현 내용
+
+### 1. Todo Bank (홈 화면 바텀시트)
+
+**변경 파일:**
+- `lib/features/todo/presentation/providers/todo_provider.dart` — `todosNotForDate` provider 추가
+- `lib/features/todo/presentation/providers/todo_provider.g.dart` — 코드 생성
+- `lib/features/home/presentation/screens/home_screen.dart` — `_buildTodoBankSection`, `_addTodoToDate` 추가
+
+**동작:**
+- 홈 화면 캘린더에서 날짜 선택 후, 해당 날짜에 배정되지 않은 할일 목록을 "할 일 추가" 섹션으로 표시
+- 할일을 탭하면 선택된 날짜의 scheduledDates에 추가되어 즉시 해당 날짜 할일 목록에 나타남
+- 다른 날짜를 선택하면 해당 날짜에 미배정된 할일이 다시 bank에 표시됨
+- scheduledDates가 비어있는 할일(미지정)은 bank에 표시하지 않음
+
+### 2. Slidable 스와이프 액션
+
+**변경 파일:**
+- `lib/features/todo/presentation/widgets/dismissible_todo_item.dart` — Dismissible → Slidable 교체
+- `pubspec.yaml` / `pubspec.lock` — flutter_slidable 패키지 추가
+
+**동작:**
+- **좌→우 (startActionPane):** 카테고리 이동 — `primaryLight` 색상
+- **우→좌 (endActionPane):**
+  - 날짜에서 제거 (contextDate가 있을 때만) — `accentGoldLight` 색상
+  - 삭제 — `error` 색상
+- CustomSlidableAction + 투명 배경 + 아이콘/텍스트만 표시 (다크 우주 테마에 어울리는 미니멀 스타일)
+- 타이머 연동 중인 할일은 제거/삭제 차단
+
+### 3. 변경하지 않은 것
+
+- TodoListScreen (카테고리 그리드 중심 레이아웃 유지)
+- CategoryTodoScreen 및 라우팅
+- 기존 할일 CRUD 로직

lib/features/home/presentation/screens/home_screen.dart

@@ -19,6 +19,7 @@ import '../../../../routes/route_paths.dart';
 import '../../../timer/presentation/providers/study_stats_provider.dart';
 import '../../../todo/domain/entities/todo_entity.dart';
 import '../../../todo/presentation/providers/todo_provider.dart';
+import '../../../../core/widgets/space/todo_item.dart';
 import '../../../todo/presentation/widgets/dismissible_todo_item.dart';
 import '../../../todo/presentation/widgets/todo_add_bottom_sheet.dart';
 import '../widgets/space_calendar.dart';
@@ -346,6 +347,7 @@ class _HomeScreenState extends ConsumerState<HomeScreen> {
       _selectedDay.day,
     );
     final todosForSelected = ref.watch(todosForDateProvider(selectedKey));
+    final bankTodos = ref.watch(todosNotForDateProvider(selectedKey));
     final unscheduled = ref.watch(unscheduledTodosProvider);
     final todosByDate = ref.watch(todosByDateMapProvider);
     final dateLabel = DateFormat('M/d', 'ko_KR').format(_selectedDay);
@@ -421,16 +423,19 @@ class _HomeScreenState extends ConsumerState<HomeScreen> {
         ),
         SizedBox(height: AppSpacing.s8),
 
-        if (todosForSelected.isEmpty)
+        if (todosForSelected.isEmpty && bankTodos.isEmpty)
           Padding(
             padding: AppPadding.horizontal20,
             child: _buildEmptyTodoCard(),
           )
-        else
+        else if (todosForSelected.isNotEmpty)
           ...todosForSelected.map(
             (todo) => _buildTodoRow(todo, contextDate: _selectedDay),
           ),
 
+        // ── 할 일 추가 (todo bank) ──
+        _buildTodoBankSection(selectedKey, bankTodos),
+
         // ── 카테고리 관리 버튼 ──
         Padding(
           padding: AppPadding.horizontal20,
@@ -485,6 +490,53 @@ class _HomeScreenState extends ConsumerState<HomeScreen> {
     );
   }
 
+  /// 할 일 추가 (todo bank): 선택된 날짜에 배정되지 않은 할일 목록
+  ///
+  /// 탭하면 해당 날짜에 즉시 추가된다.
+  Widget _buildTodoBankSection(
+    DateTime selectedDate,
+    List<TodoEntity> bankTodos,
+  ) {
+    if (bankTodos.isEmpty) return const SizedBox.shrink();
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        SizedBox(height: AppSpacing.s16),
+        Padding(
+          padding: AppPadding.horizontal20,
+          child: _buildSectionTitle('할 일 추가'),
+        ),
+        SizedBox(height: AppSpacing.s8),
+        ...bankTodos.map(
+          (todo) => Padding(
+            padding: EdgeInsets.fromLTRB(20.w, 0, 20.w, AppSpacing.s8),
+            child: TodoItem(
+              title: todo.title,
+              subtitle: todo.studyTimeLabel,
+              isCompleted: false,
+              leading: Icon(
+                Icons.add_circle_outline_rounded,
+                color: AppColors.primary,
+                size: 24.w,
+              ),
+              onToggle: () => _addTodoToDate(ref, todo, selectedDate),
+              onTap: () => _addTodoToDate(ref, todo, selectedDate),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Future<void> _addTodoToDate(
+    WidgetRef ref,
+    TodoEntity todo,
+    DateTime date,
+  ) async {
+    await ref.read(todoListNotifierProvider.notifier).addDateToTodo(todo, date);
+  }
+
   Widget _buildEmptyTodoCard() {
     return AppCard(
       style: AppCardStyle.outlined,

lib/features/todo/domain/entities/todo_entity.dart

@@ -30,4 +30,7 @@ class TodoEntity with _$TodoEntity {
     if (scheduledDates.isEmpty) return completedDates.isNotEmpty;
     return scheduledDates.every((d) => isCompletedForDate(d));
   }
+
+  String? get studyTimeLabel =>
+      actualMinutes != null && actualMinutes! > 0 ? '$actualMinutes분 공부' : null;
 }

lib/features/todo/presentation/providers/todo_provider.dart

@@ -128,6 +128,20 @@ class TodoListNotifier extends _$TodoListNotifier {
     }
   }
 
+  /// 특정 날짜를 할일에 추가 (todo bank → 날짜 배정)
+  Future<void> addDateToTodo(TodoEntity todo, DateTime date) async {
+    final normalized = TodoEntity.normalizeDate(date);
+    if (todo.scheduledDates.any(
+      (d) => TodoEntity.normalizeDate(d) == normalized,
+    )) {
+      return;
+    }
+    final updated = todo.copyWith(
+      scheduledDates: [...todo.scheduledDates, normalized],
+    );
+    await updateTodo(updated);
+  }
+
   Future<void> updateTodo(TodoEntity todo) async {
     final previousState = state;
     state = AsyncData(
@@ -291,12 +305,25 @@ class CategoryListNotifier extends _$CategoryListNotifier {
 @riverpod
 List<TodoEntity> todosForDate(Ref ref, DateTime date) {
   final todos = ref.watch(todoListNotifierProvider).valueOrNull ?? [];
-  final normalizedDate = DateTime(date.year, date.month, date.day);
+  final normalizedDate = TodoEntity.normalizeDate(date);
+  return todos.where((t) {
+    return t.scheduledDates.any(
+      (d) => TodoEntity.normalizeDate(d) == normalizedDate,
+    );
+  }).toList();
+}
+
+// === 해당 날짜에 배정되지 않은 할일 (todo bank용) ===
+
+@riverpod
+List<TodoEntity> todosNotForDate(Ref ref, DateTime date) {
+  final todos = ref.watch(todoListNotifierProvider).valueOrNull ?? [];
+  final normalizedDate = TodoEntity.normalizeDate(date);
   return todos.where((t) {
-    return t.scheduledDates.any((d) {
-      final scheduled = DateTime(d.year, d.month, d.day);
-      return scheduled == normalizedDate;
-    });
+    if (t.scheduledDates.isEmpty) return false;
+    return !t.scheduledDates.any(
+      (d) => TodoEntity.normalizeDate(d) == normalizedDate,
+    );
   }).toList();
 }
 
@@ -316,7 +343,7 @@ Map<DateTime, List<TodoEntity>> todosByDateMap(Ref ref) {
   final map = <DateTime, List<TodoEntity>>{};
   for (final todo in todos) {
     for (final date in todo.scheduledDates) {
-      final key = DateTime(date.year, date.month, date.day);
+      final key = TodoEntity.normalizeDate(date);
       map.putIfAbsent(key, () => []).add(todo);
     }
   }