Merge pull request #374 from DevKor-github/codex/spare-time-minimum-bubble

jjoonleo · web-flow · commit a0dee4b4621e · 2026-05-06T01:23:55.000+09:00
[codex] Add spare time minimum warning
diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb
@@ -23,6 +23,10 @@
     "@setSpareTimeWarning": {
         "description": "Warning for setting spare time during onboarding"
     },
+    "spareTimeMinimumWarning": "Minimum spare time is 10 minutes",
+    "@spareTimeMinimumWarning": {
+        "description": "Warning shown when onboarding spare time is at the minimum value"
+    },
     "todaysAppointments": "Today's Appointments",
     "@todaysAppointments": {
         "description": "Title for today's appointments section on the home screen"
diff --git a/lib/l10n/app_ko.arb b/lib/l10n/app_ko.arb
@@ -5,6 +5,7 @@
     "setSpareTimeTitle": "여유시간을 설정해주세요",
     "setSpareTimeDescription": "설정한 여유시간만큼 일찍 도착할 수 있어요.",
     "setSpareTimeWarning": "여유시간은 혹시 모를 상황을 위해 꼭 설정해야 돼요.",
+    "spareTimeMinimumWarning": "여유시간은 10분 아래로 설정할 수 없어요",
     "todaysAppointments": "오늘의 약속",
     "slogan": "작은 준비가\n큰 여유를 만들어요!",
     "noAppointments": "약속이 없는 날이에요",
diff --git a/lib/l10n/app_localizations.dart b/lib/l10n/app_localizations.dart
@@ -134,6 +134,12 @@ abstract class AppLocalizations {
   /// **'You must set a spare time in case of unexpected situations.'**
   String get setSpareTimeWarning;
 
+  /// Warning shown when onboarding spare time is at the minimum value
+  ///
+  /// In en, this message translates to:
+  /// **'Minimum spare time is 10 minutes'**
+  String get spareTimeMinimumWarning;
+
   /// Title for today's appointments section on the home screen
   ///
   /// In en, this message translates to:
diff --git a/lib/l10n/app_localizations_en.dart b/lib/l10n/app_localizations_en.dart
@@ -28,6 +28,9 @@ class AppLocalizationsEn extends AppLocalizations {
   String get setSpareTimeWarning =>
       'You must set a spare time in case of unexpected situations.';
 
+  @override
+  String get spareTimeMinimumWarning => 'Minimum spare time is 10 minutes';
+
   @override
   String get todaysAppointments => 'Today\'s Appointments';
 
diff --git a/lib/l10n/app_localizations_ko.dart b/lib/l10n/app_localizations_ko.dart
@@ -26,6 +26,9 @@ class AppLocalizationsKo extends AppLocalizations {
   @override
   String get setSpareTimeWarning => '여유시간은 혹시 모를 상황을 위해 꼭 설정해야 돼요.';
 
+  @override
+  String get spareTimeMinimumWarning => '여유시간은 10분 아래로 설정할 수 없어요';
+
   @override
   String get todaysAppointments => '오늘의 약속';
 
diff --git a/lib/presentation/onboarding/schedule_spare_time/components/shcedule_spare_time_field.dart b/lib/presentation/onboarding/schedule_spare_time/components/shcedule_spare_time_field.dart
@@ -1,22 +1,27 @@
 import 'package:flutter/widgets.dart';
+import 'package:on_time_front/presentation/shared/components/error_message_bubble.dart';
 import 'package:on_time_front/presentation/shared/components/time_stepper.dart';
 
 class ScheduleSpareTimeField extends StatelessWidget {
   const ScheduleSpareTimeField({
     super.key,
     required this.lowerBound,
     required this.spareTime,
+    required this.minimumWarningMessage,
     required this.onSpareTimeDecreased,
     required this.onSpareTimeIncreased,
   });
 
   final Duration spareTime;
   final Duration lowerBound;
+  final String minimumWarningMessage;
   final VoidCallback onSpareTimeIncreased;
   final VoidCallback onSpareTimeDecreased;
 
   @override
   Widget build(BuildContext context) {
+    final isAtMinimum = spareTime <= lowerBound;
+
     return Padding(
       padding: EdgeInsets.only(top: 90.0),
       child: Column(
@@ -27,6 +32,16 @@ class ScheduleSpareTimeField extends StatelessWidget {
             lowerBound: lowerBound,
             value: spareTime,
           ),
+          if (isAtMinimum)
+            Padding(
+              padding: const EdgeInsets.only(top: 8),
+              child: ErrorMessageBubble(
+                width: 300,
+                padding: const EdgeInsets.only(left: 72),
+                tailPosition: TailPosition.top,
+                errorMessage: Text(minimumWarningMessage),
+              ),
+            ),
           Expanded(child: SizedBox()),
         ],
       ),
diff --git a/lib/presentation/onboarding/schedule_spare_time/screens/schedule_spare_time_form.dart b/lib/presentation/onboarding/schedule_spare_time/screens/schedule_spare_time_form.dart
@@ -14,7 +14,7 @@ class ScheduleSpareTimeForm extends StatefulWidget {
 
 class _ScheduleSpareTimeFormState extends State<ScheduleSpareTimeForm> {
   Duration spareTime = Duration(minutes: 30);
-  final Duration lowerBound = Duration(minutes: 0);
+  final Duration lowerBound = Duration(minutes: 10);
 
   @override
   Widget build(BuildContext context) {
@@ -42,9 +42,14 @@ class _ScheduleSpareTimeFormState extends State<ScheduleSpareTimeForm> {
       child: ScheduleSpareTimeField(
         lowerBound: lowerBound,
         spareTime: spareTime,
+        minimumWarningMessage:
+            AppLocalizations.of(context)!.spareTimeMinimumWarning,
         onSpareTimeDecreased: () {
           setState(() {
-            spareTime -= Duration(minutes: 10);
+            final updatedSpareTime = spareTime - Duration(minutes: 10);
+            if (updatedSpareTime >= lowerBound) {
+              spareTime = updatedSpareTime;
+            }
           });
         },
         onSpareTimeIncreased: () {
diff --git a/lib/presentation/shared/components/error_message_bubble.dart b/lib/presentation/shared/components/error_message_bubble.dart
@@ -44,9 +44,11 @@ class ErrorMessageBubble extends StatelessWidget {
     this.action,
     this.tailPosition = TailPosition.bottom,
     this.padding = const EdgeInsets.only(left: 72.0),
+    this.width,
   });
 
   final EdgeInsets padding;
+  final double? width;
 
   final Widget errorMessage;
   final TextButton? action;
@@ -65,10 +67,12 @@ class ErrorMessageBubble extends StatelessWidget {
       style: Theme.of(context).textTheme.bodyLarge!.copyWith(
             color: Theme.of(context).colorScheme.error,
             decorationColor: Theme.of(context).colorScheme.error,
+            letterSpacing: 0,
           ),
       child: _MessageBubbleBody(
         errorMessage: errorMessage,
         action: action,
+        width: width,
       ),
     );
 
@@ -144,49 +148,55 @@ class _MessageBubbleBody extends StatelessWidget {
   const _MessageBubbleBody({
     required this.errorMessage,
     required this.action,
+    required this.width,
   });
 
   final Widget errorMessage;
   final Widget? action;
+  final double? width;
 
   @override
   Widget build(BuildContext context) {
     final colorScheme = Theme.of(context).colorScheme;
     return Container(
+      width: width,
       padding: const EdgeInsets.symmetric(horizontal: 21, vertical: 13.5),
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(16),
         color: colorScheme.errorContainer,
       ),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: [
-          errorMessage,
-          TextButtonTheme(
-              data: TextButtonThemeData(
-                style: ButtonStyle(
-                  backgroundColor: WidgetStateProperty.all(
-                    Colors.transparent,
+      child: action == null
+          ? errorMessage
+          : Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Flexible(child: errorMessage),
+                TextButtonTheme(
+                  data: TextButtonThemeData(
+                    style: ButtonStyle(
+                      backgroundColor: WidgetStateProperty.all(
+                        Colors.transparent,
+                      ),
+                      overlayColor: WidgetStateProperty.all(
+                        Colors.transparent,
+                      ),
+                      elevation: WidgetStateProperty.all(0),
+                      foregroundColor: WidgetStateProperty.all(
+                        Theme.of(context).colorScheme.error,
+                      ),
+                      textStyle: WidgetStateProperty.all(
+                        DefaultTextStyle.of(context).style,
+                      ),
+                      padding: WidgetStateProperty.all(
+                        const EdgeInsets.symmetric(horizontal: 0),
+                      ),
+                      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                    ),
                   ),
-                  overlayColor: WidgetStateProperty.all(
-                    Colors.transparent,
-                  ),
-                  elevation: WidgetStateProperty.all(0),
-                  foregroundColor: WidgetStateProperty.all(
-                    Theme.of(context).colorScheme.error,
-                  ),
-                  textStyle: WidgetStateProperty.all(
-                    DefaultTextStyle.of(context).style,
-                  ),
-                  padding: WidgetStateProperty.all(
-                    const EdgeInsets.symmetric(horizontal: 0),
-                  ),
-                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
-                ),
-              ),
-              child: action ?? const SizedBox.shrink())
-        ],
-      ),
+                  child: action!,
+                )
+              ],
+            ),
     );
   }
 }
diff --git a/widgetbook/lib/schedule_spare_time_field.dart b/widgetbook/lib/schedule_spare_time_field.dart
@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import 'package:on_time_front/presentation/onboarding/schedule_spare_time/components/shcedule_spare_time_field.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+@widgetbook.UseCase(
+  name: 'default',
+  type: ScheduleSpareTimeField,
+)
+Widget useCaseScheduleSpareTimeField(BuildContext context) {
+  final initialMinutes = context.knobs.int.input(
+    label: 'Initial Minutes',
+    initialValue: 10,
+  );
+
+  return _ScheduleSpareTimeFieldUseCase(initialMinutes: initialMinutes);
+}
+
+class _ScheduleSpareTimeFieldUseCase extends StatefulWidget {
+  const _ScheduleSpareTimeFieldUseCase({required this.initialMinutes});
+
+  final int initialMinutes;
+
+  @override
+  State<_ScheduleSpareTimeFieldUseCase> createState() =>
+      _ScheduleSpareTimeFieldUseCaseState();
+}
+
+class _ScheduleSpareTimeFieldUseCaseState
+    extends State<_ScheduleSpareTimeFieldUseCase> {
+  static const _lowerBound = Duration(minutes: 10);
+  late Duration _spareTime;
+
+  @override
+  void initState() {
+    super.initState();
+    _spareTime = _normalizedInitialSpareTime;
+  }
+
+  @override
+  void didUpdateWidget(covariant _ScheduleSpareTimeFieldUseCase oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.initialMinutes != widget.initialMinutes) {
+      _spareTime = _normalizedInitialSpareTime;
+    }
+  }
+
+  Duration get _normalizedInitialSpareTime {
+    final initialSpareTime = Duration(minutes: widget.initialMinutes);
+    return initialSpareTime < _lowerBound ? _lowerBound : initialSpareTime;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ScheduleSpareTimeField(
+      lowerBound: _lowerBound,
+      spareTime: _spareTime,
+      minimumWarningMessage: '여유시간은 10분 아래로 설정할 수 없어요',
+      onSpareTimeDecreased: () {
+        setState(() {
+          final updatedSpareTime = _spareTime - const Duration(minutes: 10);
+          if (updatedSpareTime >= _lowerBound) {
+            _spareTime = updatedSpareTime;
+          }
+        });
+      },
+      onSpareTimeIncreased: () {
+        setState(() {
+          _spareTime += const Duration(minutes: 10);
+        });
+      },
+    );
+  }
+}
