Feat: [홈] 홈 탭 UI 구현

lib/core/constants/text_style.dart

@@ -29,13 +29,19 @@ abstract class AppTextStyle {
       );
 
   static final TextStyle headlineBold1 = pretendardBoldStyle(24, 33);
-  static final TextStyle headlineRegular1 = pretendardRegularStyle(24, 33);
   static final TextStyle headlineBold2 = pretendardBoldStyle(20, 24);
+
+  static final TextStyle headlineRegular1 = pretendardRegularStyle(24, 33);
   static final TextStyle headlineRegular2 = pretendardRegularStyle(20, 24);
+
+  static final TextStyle headlineMedium1 = pretendardMediumStyle(24, 33);
+  static final TextStyle headlineMedium2 = pretendardMediumStyle(20, 24);
+
   static final TextStyle bodyBold1 = pretendardSemiBoldStyle(16, 19);
-  static final TextStyle bodyRegular1 = pretendardSemiBoldStyle(16, 19);
   static final TextStyle bodyBold2 = pretendardRegularStyle(14, 17);
-  static final TextStyle bodyRegular2 = pretendardRegularStyle(14, 17);
   static final TextStyle bodyBold3 = pretendardRegularStyle(12, 14);
+
+  static final TextStyle bodyRegular1 = pretendardSemiBoldStyle(16, 19);
+  static final TextStyle bodyRegular2 = pretendardRegularStyle(14, 17);
   static final TextStyle bodyRegular3 = pretendardRegularStyle(12, 14);
 }

lib/presentation/main/main_page.dart

@@ -85,12 +85,17 @@ class _BottomNavigationBar extends ConsumerWidget {
               ...MainNavigationTab.values.mapIndexed(
                 (index, e) => BottomNavigationBarItem(
                   label: e.label,
+                  activeIcon: SvgPicture.asset(
+                    e.iconPath,
+                    colorFilter: ColorFilter.mode(
+                      AppColor.of.primaryGreen,
+                      BlendMode.srcIn,
+                    ),
+                  ),
                   icon: SvgPicture.asset(
                     e.iconPath,
                     colorFilter: ColorFilter.mode(
-                      currentTab.index == index
-                          ? AppColor.of.primaryGreen
-                          : AppColor.of.gray50,
+                      AppColor.of.gray50,
                       BlendMode.srcIn,
                     ),
                   ),

lib/presentation/pages/home/home_event.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/rendering.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:pets_next_door_flutter/presentation/pages/home/providers/home_tab_controller_provider.dart';
+import 'package:pets_next_door_flutter/presentation/pages/home/providers/show_search_bar_provider.dart';
+
+abstract interface class _HomeEvent {
+  void onScrollDirectionChanged(WidgetRef ref, ScrollDirection direction);
+
+  Future<void> onSearchTextSubmitted(String text, HomeTabType currentTab);
+}
+
+mixin class HomeEvent implements _HomeEvent {
+  @override
+  void onScrollDirectionChanged(WidgetRef ref, ScrollDirection direction) {
+    if (direction == ScrollDirection.reverse) {
+      ref.read(showSearchBarProvider.notifier).show = false;
+    }
+
+    if (direction == ScrollDirection.forward) {
+      ref.read(showSearchBarProvider.notifier).show = true;
+    }
+  }
+
+  @override
+  Future<void> onSearchTextSubmitted(
+      String text, HomeTabType currentTab) async {
+    print(currentTab);
+    // TODO: 검색 api 연결
+  }
+}

lib/presentation/pages/home/home_view.dart

@@ -1,49 +1,57 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:pets_next_door_flutter/core/enums/home_home_tab_type.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:pets_next_door_flutter/core/constants/colors.dart';
 import 'package:pets_next_door_flutter/core/constants/sizes.dart';
-import 'package:pets_next_door_flutter/presentation/pages/home/providers/home_home_tab_controller_provider.dart';
+import 'package:pets_next_door_flutter/core/constants/text_style.dart';
+import 'package:pets_next_door_flutter/presentation/pages/home/home_event.dart';
+import 'package:pets_next_door_flutter/presentation/pages/home/providers/current_tab_type_provider.dart';
+import 'package:pets_next_door_flutter/presentation/pages/home/providers/home_tab_controller_provider.dart';
 import 'package:pets_next_door_flutter/presentation/pages/home/providers/show_search_bar_provider.dart';
 import 'package:pets_next_door_flutter/presentation/pages/pet_mate/pet_sitting_mate_view.dart';
 import 'package:pets_next_door_flutter/presentation/pages/pet_sos/pet_sitting_sos_view.dart';
 
-class HomeView extends ConsumerStatefulWidget {
+class HomeView extends StatelessWidget {
   const HomeView({super.key});
 
   @override
-  ConsumerState<HomeView> createState() => _HomeViewState();
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: Column(
+        children: [
+          gapH8,
+          // 위치 지정
+          const _LocationButton(),
+          const _TabViewBody(),
+        ],
+      ),
+    );
+  }
 }
 
-class _HomeViewState extends ConsumerState<HomeView>
-    with SingleTickerProviderStateMixin {
-  static const _tabBar = HomeHomeTabType.values;
+class _TabViewBody extends HookConsumerWidget {
+  const _TabViewBody({super.key});
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
     final tabController =
-        ref.watch(homeHomeTabControllerProvider(this, _tabBar.length));
-
-    return DefaultTabController(
-      length: 2,
-      child: SafeArea(
-        child: Column(
-          children: [
-            gapH8,
-            const _HomeLoactionHeader(),
-            _HomeTabBar(tabController: tabController),
-            const _HomeSearchBar(),
-            _HomeTabBarView(tabController: tabController),
-          ],
-        ),
+        ref.watch(homeTabControllerProvider(useSingleTickerProvider()));
+
+    return Expanded(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          _TabBar(tabController: tabController),
+          _SearchBar(),
+          _TabContentView(tabController: tabController),
+        ],
       ),
     );
   }
 }
 
-class _HomeLoactionHeader extends StatelessWidget {
-  const _HomeLoactionHeader({
-    super.key,
-  });
+class _LocationButton extends StatelessWidget {
+  const _LocationButton({super.key});
 
   @override
   Widget build(BuildContext context) {
@@ -59,10 +67,7 @@ class _HomeLoactionHeader extends StatelessWidget {
               children: [
                 SizedBox(
                   height: 30,
-                  child: Text(
-                    '용답동',
-                    style: const TextStyle(fontSize: 23),
-                  ),
+                  child: Text('용답동', style: AppTextStyle.headlineBold1),
                 ),
                 Positioned(
                     child: Container(
@@ -78,29 +83,33 @@ class _HomeLoactionHeader extends StatelessWidget {
   }
 }
 
-class _HomeTabBarView extends StatelessWidget {
-  const _HomeTabBarView({
+class _TabContentView extends ConsumerWidget with HomeEvent {
+  const _TabContentView({
     required this.tabController,
   });
 
   final TabController tabController;
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
     return Expanded(
       child: TabBarView(
         controller: tabController,
-        children: const [
-          PetSittingSosView(),
-          PetSittingMateView(),
+        children: [
+          PetSittingSosView(
+            onScrollDirectionChanged: (di) => onScrollDirectionChanged(ref, di),
+          ),
+          PetSittingMateView(
+            onScrollDirectionChanged: (di) => onScrollDirectionChanged(ref, di),
+          ),
         ],
       ),
     );
   }
 }
 
-class _HomeTabBar extends StatelessWidget {
-  const _HomeTabBar({
+class _TabBar extends StatelessWidget {
+  const _TabBar({
     required this.tabController,
   });
 
@@ -117,15 +126,15 @@ class _HomeTabBar extends StatelessWidget {
         labelPadding: const EdgeInsets.only(right: 16),
         indicatorColor: Colors.transparent,
         dividerColor: Colors.transparent,
-        unselectedLabelColor: Colors.grey,
-        labelColor: Colors.red,
+        unselectedLabelColor: AppColor.of.gray50,
+        labelColor: AppColor.of.primaryGreen,
         overlayColor: const MaterialStatePropertyAll(Colors.transparent),
         indicator: const UnderlineTabIndicator(borderRadius: BorderRadius.zero),
         tabs: [
-          ...HomeHomeTabType.values.map(
+          ...HomeTabType.values.map(
             (tab) => Text(
               tab.label,
-              style: const TextStyle(fontSize: 20),
+              style: AppTextStyle.headlineMedium2,
             ),
           ),
         ],
@@ -134,12 +143,13 @@ class _HomeTabBar extends StatelessWidget {
   }
 }
 
-class _HomeSearchBar extends ConsumerWidget {
-  const _HomeSearchBar();
+class _SearchBar extends ConsumerWidget with HomeEvent {
+  const _SearchBar();
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final showSearchBar = ref.watch(showSearchBarProvider);
+    final currentTab = ref.watch(currentTabTypeProvider);
 
     return AnimatedContainer(
       clipBehavior: Clip.hardEdge,
@@ -149,30 +159,32 @@ class _HomeSearchBar extends ConsumerWidget {
       decoration: BoxDecoration(
         border: Border(
           bottom: showSearchBar
-              ? const BorderSide(width: 15, color: Colors.grey)
+              ? BorderSide(width: 15, color: AppColor.of.gray20)
               : BorderSide.none,
         ),
       ),
       child: Container(
         height: 40,
         width: double.infinity,
-        child: Expanded(
-          child: TextField(
-            decoration: InputDecoration(
-              contentPadding: EdgeInsets.symmetric(horizontal: 12),
-              filled: true,
-              fillColor: Colors.grey,
-              focusColor: Colors.grey,
-              prefixIcon: Padding(
-                padding: const EdgeInsets.only(left: 12, right: 8),
-                child: Icon(Icons.search),
-              ),
-              prefixIconConstraints: BoxConstraints(maxHeight: 40),
-              border: OutlineInputBorder(
-                  borderSide: BorderSide.none,
-                  borderRadius: BorderRadius.circular(4),
-                  gapPadding: 0),
+        child: TextField(
+          onSubmitted: (searchText) => onSearchTextSubmitted(
+            searchText,
+            currentTab,
+          ),
+          decoration: InputDecoration(
+            contentPadding: EdgeInsets.symmetric(horizontal: 12),
+            filled: true,
+            fillColor: AppColor.of.gray20,
+            focusColor: AppColor.of.gray20,
+            prefixIcon: Padding(
+              padding: const EdgeInsets.only(left: 12, right: 8),
+              child: Icon(Icons.search),
             ),
+            prefixIconConstraints: BoxConstraints(maxHeight: 40),
+            border: OutlineInputBorder(
+                borderSide: BorderSide.none,
+                borderRadius: BorderRadius.circular(4),
+                gapPadding: 0),
           ),
         ),
       ),

lib/presentation/pages/home/providers/current_tab_type_provider.dart

@@ -0,0 +1,18 @@
+import 'package:pets_next_door_flutter/presentation/pages/home/providers/home_tab_controller_provider.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+part 'current_tab_type_provider.g.dart';
+
+/// 홈에서 현재 어떤 탭(돌봄급구/돌봄메이트)에 있는지
+///
+@riverpod
+class CurrentTabType extends _$CurrentTabType {
+  @override
+  HomeTabType build() {
+    return HomeTabType.values.first;
+  }
+
+  set tabType(HomeTabType tabType) {
+    state = tabType;
+  }
+}