265 약속 추가하기 폼 UI 작업

lib/presentation/schedule_create/components/schedule_multi_page_form.dart

@@ -83,6 +83,7 @@ class _ScheduleMultiPageFormState extends State<ScheduleMultiPageForm>
                   onNextPageButtonClicked: state.isValid
                       ? () => _onNextPageButtonClicked(context)
                       : null,
+                  isNextButtonEnabled: state.isValid,
                   onPreviousPageButtonClicked: _onPreviousPageButtonClicked,
                 ),
                 StepProgress(
@@ -130,15 +131,17 @@ class _ScheduleMultiPageFormState extends State<ScheduleMultiPageForm>
       _updateCurrentPageIndex(_tabController.index + 1);
     } else {
       widget.onSaved?.call();
-      context.go('/home');
+      // context.go('/home');
+      Navigator.of(context).pop(); // Close the form
     }
   }
 
   void _onPreviousPageButtonClicked() {
     if (_tabController.index > 0) {
       _updateCurrentPageIndex(_tabController.index - 1);
     } else {
-      context.go('/home');
+      // context.go('/home');
+      Navigator.of(context).pop(); // Close the form
     }
   }
 

lib/presentation/schedule_create/components/top_bar.dart

@@ -1,13 +1,16 @@
 import 'package:flutter/material.dart';
 
 class TopBar extends StatelessWidget {
-  const TopBar(
-      {super.key,
-      required this.onNextPageButtonClicked,
-      required this.onPreviousPageButtonClicked});
+  const TopBar({
+    super.key,
+    required this.onNextPageButtonClicked,
+    required this.onPreviousPageButtonClicked,
+    required this.isNextButtonEnabled,
+  });
 
   final void Function()? onNextPageButtonClicked;
   final void Function() onPreviousPageButtonClicked;
+  final bool isNextButtonEnabled; // 버튼 활성화 여부
 
   @override
   Widget build(BuildContext context) {
@@ -25,8 +28,8 @@ class TopBar extends StatelessWidget {
                   style: Theme.of(context).textTheme.titleMedium)),
         ),
         TextButton(
-          child: const Text('다음'),
           onPressed: onNextPageButtonClicked,
+          child: const Text('다음'),
         ),
       ],
     );

lib/presentation/schedule_create/schedule_date_time/screens/schedule_date_time_form.dart

@@ -24,6 +24,8 @@ class ScheduleDateTimeForm extends StatelessWidget {
               readOnly: true,
               decoration: InputDecoration(
                 labelText: '약속 시간',
+                labelStyle:
+                    TextStyle(color: Theme.of(context).colorScheme.primary),
                 floatingLabelBehavior: FloatingLabelBehavior.always,
                 hintText:
                     '${DateTime.now().year}년 ${DateTime.now().month}월 ${DateTime.now().day}일',
@@ -48,7 +50,7 @@ class ScheduleDateTimeForm extends StatelessWidget {
             ),
           ),
           SizedBox(
-            width: 16,
+            width: 30,
           ),
           Expanded(
             flex: 1,
@@ -57,12 +59,25 @@ class ScheduleDateTimeForm extends StatelessWidget {
               decoration: InputDecoration(
                   labelText: '',
                   floatingLabelBehavior: FloatingLabelBehavior.always,
-                  hintText:
-                      '${DateTime.now().hour}시 ${DateTime.now().minute}분'),
+                  hintText: () {
+                    final now = DateTime.now();
+                    final period = now.hour >= 12 ? '오후' : '오전';
+                    final hour12 = now.hour % 12 == 0 ? 12 : now.hour % 12;
+                    final minute = now.minute.toString().padLeft(2, '0');
+                    return '$period $hour12:$minute';
+                  }()),
               controller: TextEditingController(
-                  text: state.scheduleTime.value == null
-                      ? null
-                      : '${state.scheduleTime.value!.hour > 12 ? '오후' : '오전'} ${state.scheduleTime.value!.hour % 12}:${state.scheduleTime.value!.minute}'),
+                text: state.scheduleTime.value == null
+                    ? null
+                    : () {
+                        final time = state.scheduleTime.value!;
+                        final period = time.hour >= 12 ? '오후' : '오전';
+                        final hour12 =
+                            time.hour % 12 == 0 ? 12 : time.hour % 12;
+                        final minute = time.minute.toString().padLeft(2, '0');
+                        return '$period $hour12:$minute';
+                      }(),
+              ),
               onTap: () {
                 context.showCupertinoDatePickerModal(
                   title: '시간을 입력해주세요.',

lib/presentation/schedule_create/schedule_name/screens/schedule_name_form.dart

@@ -18,9 +18,15 @@ class _ScheduleNameFormState extends State<ScheduleNameForm> {
         builder: (context, state) {
       return TextFormField(
         decoration: InputDecoration(
-            labelText: '약속 이름',
-            floatingLabelBehavior: FloatingLabelBehavior.always,
-            hintText: 'adsflksdfj'),
+          labelText: '약속 이름',
+          labelStyle: TextStyle(
+            color: Theme.of(context).colorScheme.primary,
+          ),
+          floatingLabelBehavior: FloatingLabelBehavior.always,
+          hintText: '예) 영화 보기',
+          hintStyle: TextStyle(
+              color: Theme.of(context).colorScheme.surfaceContainerHighest),
+        ),
         textInputAction: TextInputAction.done,
         initialValue: state.scheduleName.value,
         onChanged: (scheduleName) {

lib/presentation/schedule_create/schedule_place_moving_time.dart/screens/schedule_place_moving_time_form.dart

@@ -38,6 +38,9 @@ class _SchedulePlaceMovingTimeFormState
           TextFormField(
             decoration: InputDecoration(
                 labelText: '약속 장소',
+                labelStyle: TextStyle(
+                  color: Theme.of(context).colorScheme.primary,
+                ),
                 floatingLabelBehavior: FloatingLabelBehavior.always),
             initialValue: state.placeName.value,
             focusNode: _placeFocusNode,
@@ -48,12 +51,20 @@ class _SchedulePlaceMovingTimeFormState
                   .placeNameChanged(newValue);
             },
           ),
+          SizedBox(
+            height: 15,
+          ),
           Row(
             children: [
               Expanded(
                 child: TextField(
                   readOnly: true,
-                  decoration: InputDecoration(labelText: '이동 소요 시간'),
+                  decoration: InputDecoration(
+                    labelText: '이동 소요 시간',
+                    labelStyle: TextStyle(
+                      color: Theme.of(context).colorScheme.primary,
+                    ),
+                  ),
                   focusNode: _timeFocusNode,
                   textInputAction: TextInputAction.done,
                   controller: TextEditingController(

lib/presentation/schedule_create/schedule_spare_and_preparing_time/preparation_form/screens/preparation_edit_form.dart

@@ -40,6 +40,9 @@ class _PreparationEditFormState extends State<PreparationEditForm> {
                             context.pop(state.toPreparationEntity());
                           }
                         : null,
+                    // 버튼 활성화 여부 상태
+                    isNextButtonEnabled: state.isValid,
+
                     onPreviousPageButtonClicked: context.pop,
                   ),
                   Expanded(

lib/presentation/schedule_create/screens/schedule_create_screen.dart

@@ -10,18 +10,29 @@ class ScheduleCreateScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Material(
+      color: Colors.transparent,
       child: SafeArea(
-        child: BlocProvider<ScheduleFormBloc>(
-          create: (context) =>
-              getIt.get<ScheduleFormBloc>()..add(ScheduleFormCreateRequested()),
-          child: BlocBuilder<ScheduleFormBloc, ScheduleFormState>(
-            builder: (context, state) {
-              return ScheduleMultiPageForm(
-                onSaved: () => context.read<ScheduleFormBloc>().add(
-                      const ScheduleFormCreated(),
-                    ),
-              );
-            },
+        child: FractionallySizedBox(
+          heightFactor: 0.85,
+          child: Container(
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius:
+                  const BorderRadius.vertical(top: Radius.circular(24)),
+            ),
+            child: BlocProvider<ScheduleFormBloc>(
+              create: (context) => getIt.get<ScheduleFormBloc>()
+                ..add(ScheduleFormCreateRequested()),
+              child: BlocBuilder<ScheduleFormBloc, ScheduleFormState>(
+                builder: (context, state) {
+                  return ScheduleMultiPageForm(
+                    onSaved: () => context.read<ScheduleFormBloc>().add(
+                          const ScheduleFormCreated(),
+                        ),
+                  );
+                },
+              ),
+            ),
           ),
         ),
       ),

lib/presentation/shared/components/bottom_nav_bar_scaffold.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:go_router/go_router.dart';
+import 'package:on_time_front/presentation/schedule_create/screens/schedule_create_screen.dart';
 import 'package:on_time_front/presentation/shared/constants/app_colors.dart';
 
 class BottomNavBarScaffold extends StatefulWidget {
@@ -72,8 +73,16 @@ class _BottomNavigationBarScaffoldState extends State<BottomNavBarScaffold> {
           height: 76,
           width: 76,
           child: FilledButton(
+            // onPressed: () {
+            //   context.go('/scheduleCreate');
+            // },
             onPressed: () {
-              context.go('/scheduleCreate');
+              showModalBottomSheet(
+                context: context,
+                isScrollControlled: true,
+                backgroundColor: Colors.transparent,
+                builder: (context) => ScheduleCreateScreen(),
+              );
             },
             style: FilledButton.styleFrom(
               shape: CircleBorder(),