Add alarm screen components into widgetbooks

lib/presentation/alarm/screens/alarm_screen.dart

@@ -73,8 +73,8 @@ class AlarmScreen extends StatelessWidget {
               context.go(
                 '/earlyLate',
                 extra: {
-                  'earlyLateTime': infoState.beforeOutTime,
-                  'isLate': infoState.isLate,
+                  'earlyLateTime': timerState.beforeOutTime,
+                  'isLate': timerState.isLate,
                 },
               );
             }

lib/presentation/early_late/components/check_list_box_widget.dart

@@ -1,70 +1,99 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:on_time_front/presentation/early_late/bloc/early_late_screen_bloc.dart';
 import 'package:on_time_front/presentation/early_late/components/check_list_item_widget.dart';
 
-class ChecklistBox extends StatelessWidget {
+class CheckListBoxWidget extends StatelessWidget {
   final double screenWidth;
   final double screenHeight;
-  final List<String> items; // 체크리스트 항목들
+  final List<String> checkList;
+  final List<bool> checkedStates;
+  final void Function(int index) onItemToggled;
 
-  const ChecklistBox({
+  const CheckListBoxWidget({
     super.key,
     required this.screenWidth,
     required this.screenHeight,
-    required this.items,
+    required this.checkList,
+    required this.checkedStates,
+    required this.onItemToggled,
   });
 
   @override
   Widget build(BuildContext context) {
-    return BlocBuilder<EarlyLateScreenBloc, EarlyLateScreenState>(
-      builder: (context, state) {
-        if (state is EarlyLateScreenLoadSuccess) {
-          return Center(
-            child: SizedBox(
-              width: screenWidth * 0.9,
-              height: screenHeight * 0.35,
-              child: Container(
-                decoration: BoxDecoration(
-                  color: const Color(0xffF6F6F6),
-                  borderRadius: const BorderRadius.all(Radius.circular(18)),
+    return Center(
+      child: SizedBox(
+        width: screenWidth * 0.9,
+        height: screenHeight * 0.35,
+        child: Container(
+          decoration: const BoxDecoration(
+            color: Color(0xffF6F6F6),
+            borderRadius: BorderRadius.all(Radius.circular(18)),
+          ),
+          child: Padding(
+            padding: const EdgeInsets.all(20),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const _TextSection(),
+                const SizedBox(height: 20),
+                _ChecklistSection(
+                  checkList: checkList,
+                  checkedStates: checkedStates,
+                  screenHeight: screenHeight,
+                  onItemToggled: onItemToggled,
                 ),
-                child: Padding(
-                  padding: const EdgeInsets.all(20),
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      const Text(
-                        '나가기 전에 확인하세요',
-                        style: TextStyle(
-                          fontSize: 20,
-                          fontWeight: FontWeight.bold,
-                        ),
-                      ),
-                      const SizedBox(height: 20),
-                      Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: List.generate(
-                          items.length,
-                          (index) => Padding(
-                            padding:
-                                EdgeInsets.only(bottom: screenHeight * 0.01),
-                            child: ChecklistItemWidget(
-                              index: index,
-                              label: items[index],
-                            ),
-                          ),
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-              ),
+              ],
             ),
-          );
-        }
-        return const SizedBox.shrink();
-      },
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _TextSection extends StatelessWidget {
+  const _TextSection();
+
+  @override
+  Widget build(BuildContext context) {
+    return const Text(
+      '나가기 전에 확인하세요',
+      style: TextStyle(
+        fontSize: 20,
+        fontWeight: FontWeight.bold,
+      ),
+    );
+  }
+}
+
+class _ChecklistSection extends StatelessWidget {
+  final List<String> checkList;
+  final List<bool> checkedStates;
+  final double screenHeight;
+  final void Function(int index) onItemToggled;
+
+  const _ChecklistSection({
+    required this.checkList,
+    required this.checkedStates,
+    required this.screenHeight,
+    required this.onItemToggled,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: List.generate(
+        checkList.length,
+        (index) => Padding(
+          padding: EdgeInsets.only(bottom: screenHeight * 0.01),
+          child: ChecklistItemWidget(
+            index: index,
+            label: checkList[index],
+            isChecked: checkedStates[index],
+            onToggle: () => onItemToggled(index),
+          ),
+        ),
+      ),
     );
   }
 }

lib/presentation/early_late/components/check_list_item_widget.dart

@@ -1,65 +1,54 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:on_time_front/presentation/early_late/bloc/early_late_screen_bloc.dart';
 
 class ChecklistItemWidget extends StatelessWidget {
   final int index;
   final String label;
+  final bool isChecked;
+  final VoidCallback onToggle;
 
-  const ChecklistItemWidget(
-      {super.key, required this.index, required this.label});
+  const ChecklistItemWidget({
+    super.key,
+    required this.index,
+    required this.label,
+    required this.isChecked,
+    required this.onToggle,
+  });
 
   @override
   Widget build(BuildContext context) {
-    return BlocBuilder<EarlyLateScreenBloc, EarlyLateScreenState>(
-      builder: (context, state) {
-        if (state is EarlyLateScreenLoadSuccess) {
-          bool isChecked = state.checklist[index];
-
-          return GestureDetector(
-            onTap: () {
-              context
-                  .read<EarlyLateScreenBloc>()
-                  .add(ChecklistItemToggled(index));
-            },
-            child: Row(
-              children: [
-                Container(
-                  width: 24,
-                  height: 24,
-                  decoration: BoxDecoration(
-                    shape: BoxShape.rectangle,
-                    border: Border.all(
-                      color: const Color(0xff5C79FB),
-                      width: 2,
-                    ),
-                    borderRadius: const BorderRadius.all(Radius.circular(5)),
-                    color: isChecked
-                        ? const Color(0xff5C79FB)
-                        : Colors.transparent,
-                  ),
-                  child: isChecked
-                      ? const Icon(Icons.check, color: Colors.white, size: 20)
-                      : null,
-                ),
-                const SizedBox(width: 15),
-                Text(
-                  label,
-                  style: TextStyle(
-                    fontSize: 16,
-                    fontWeight: FontWeight.bold,
-                    color: isChecked ? const Color(0xff5C79FB) : Colors.black,
-                    decoration: isChecked
-                        ? TextDecoration.lineThrough
-                        : TextDecoration.none,
-                  ),
-                ),
-              ],
+    return GestureDetector(
+      onTap: onToggle,
+      child: Row(
+        children: [
+          Container(
+            width: 24,
+            height: 24,
+            decoration: BoxDecoration(
+              shape: BoxShape.rectangle,
+              border: Border.all(
+                color: const Color(0xff5C79FB),
+                width: 2,
+              ),
+              borderRadius: const BorderRadius.all(Radius.circular(5)),
+              color: isChecked ? const Color(0xff5C79FB) : Colors.transparent,
+            ),
+            child: isChecked
+                ? const Icon(Icons.check, color: Colors.white, size: 20)
+                : null,
+          ),
+          const SizedBox(width: 15),
+          Text(
+            label,
+            style: TextStyle(
+              fontSize: 16,
+              fontWeight: FontWeight.bold,
+              color: isChecked ? const Color(0xff5C79FB) : Colors.black,
+              decoration:
+                  isChecked ? TextDecoration.lineThrough : TextDecoration.none,
             ),
-          );
-        }
-        return const SizedBox.shrink();
-      },
+          ),
+        ],
+      ),
     );
   }
 }

lib/presentation/early_late/components/early_late_message_image_widget.dart

@@ -1,45 +1,34 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:on_time_front/presentation/early_late/bloc/early_late_screen_bloc.dart';
 
 class EarlyLateMessageImageWidget extends StatelessWidget {
   final double screenHeight;
+  final String earlylateMessage;
 
-  const EarlyLateMessageImageWidget({super.key, required this.screenHeight});
+  const EarlyLateMessageImageWidget({
+    super.key,
+    required this.screenHeight,
+    required this.earlylateMessage,
+  });
 
   @override
   Widget build(BuildContext context) {
-    return BlocBuilder<EarlyLateScreenBloc, EarlyLateScreenState>(
-      builder: (context, state) {
-        if (state is EarlyLateScreenLoadSuccess) {
-          return Column(
-            children: [
-              SizedBox(
-                width: 292,
-                height: 60,
-                child: Text(
-                  state.earlylateMessage,
-                  style: const TextStyle(
-                    fontSize: 16,
-                    fontWeight: FontWeight.bold,
-                    height: 1.8,
-                  ),
-                  textAlign: TextAlign.center,
-                ),
-              ),
-              Padding(
-                padding: EdgeInsets.only(top: screenHeight * 0.01),
-                child: Image.asset(
-                  'assets/character.png',
-                  width: 150,
-                  height: 150,
-                ),
-              ),
-            ],
-          );
-        }
-        return const SizedBox.shrink();
-      },
+    return Column(
+      children: [
+        Text(
+          earlylateMessage,
+          style: const TextStyle(
+            fontSize: 18,
+            fontWeight: FontWeight.w500,
+            color: Colors.black87,
+          ),
+          textAlign: TextAlign.center,
+        ),
+        const SizedBox(height: 10),
+        Image.asset(
+          'assets/character.png',
+          height: screenHeight * 0.25,
+        ),
+      ],
     );
   }
 }