feat: add search page (#343)

gsainfoteam · Sep 13, 2024 · 42b9f15 · 42b9f15
1 parent 9fffa39
commit 42b9f15
Show file tree

Hide file tree

Showing 5 changed files with 186 additions and 0 deletions.
diff --git a/assets/i18n/notice.i18n.json b/assets/i18n/notice.i18n.json
@@ -41,6 +41,28 @@
       "upload": "Publish Notice"
     }
   },
+  "calendar": {
+    "weeksAgo": {
+      "one": "$n week ago",
+      "other": "$n weeks ago"
+    },
+    "daysAgo": {
+      "one": "$n day ago",
+      "other": "$n days ago"
+    },
+    "hoursAgo": {
+      "one": "$n hour ago",
+      "other": "$n hours ago"
+    },
+    "minutesAgo": {
+      "one": "$n minute ago",
+      "other": "$n minutes ago"
+    },
+    "secondsAgo": {
+      "one": "$n second ago",
+      "other": "$n seconds ago"
+    }
+  },
   "dDay": {
     "daysLeft(rich)": {
       "one": "$n day left",
@@ -60,5 +82,9 @@
     },
     "overdue": "OVERDUE"
   },
+  "search": {
+    "hint": "Search Notice",
+    "description": "Enter search keyword"
+  },
   "list": "List"
 }
diff --git a/assets/i18n/notice_ko.i18n.json b/assets/i18n/notice_ko.i18n.json
@@ -41,6 +41,23 @@
       "upload": "공지 게시하기"
     }
   },
+  "calendar": {
+    "weeksAgo": {
+      "other": "$n주 전"
+    },
+    "daysAgo": {
+      "other": "$n일 전"
+    },
+    "hoursAgo": {
+      "other": "$n시간 전"
+    },
+    "minutesAgo": {
+      "other": "$n분 전"
+    },
+    "secondsAgo": {
+      "other": "$n초 전"
+    }
+  },
   "dDay": {
     "daysLeft(rich)": {
       "other": "$n일 남음"
@@ -57,5 +74,9 @@
     },
     "overdue": "기한 지남"
   },
+  "search": {
+    "hint": "공지 검색",
+    "description": "검색 키워드를 입력해보세요"
+  },
   "list": "목록"
 }
diff --git a/lib/app/modules/notice/presentation/pages/search_page.dart b/lib/app/modules/notice/presentation/pages/search_page.dart
@@ -0,0 +1,126 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:ziggle/app/modules/common/presentation/widgets/ziggle_button.dart';
+import 'package:ziggle/app/modules/common/presentation/widgets/ziggle_pressable.dart';
+import 'package:ziggle/app/values/palette.dart';
+import 'package:ziggle/gen/assets.gen.dart';
+import 'package:ziggle/gen/strings.g.dart';
+
+class SearchPage extends StatefulWidget {
+  const SearchPage({super.key});
+
+  @override
+  State<SearchPage> createState() => _SearchPageState();
+}
+
+class _SearchPageState extends State<SearchPage> {
+  String _keyword = '';
+
+  @override
+  Widget build(BuildContext context) {
+    const count = 10;
+    return Scaffold(
+      appBar: PreferredSize(
+        preferredSize: const Size.fromHeight(60),
+        child: SafeArea(
+          bottom: false,
+          child: Padding(
+            padding: const EdgeInsets.all(10),
+            child: Row(
+              children: [
+                Expanded(
+                  child: CupertinoSearchTextField(
+                    prefixIcon: Assets.icons.search.svg(width: 20),
+                    placeholder: t.notice.search.hint,
+                    suffixIcon: const Icon(Icons.cancel),
+                    onChanged: (v) => setState(() => _keyword = v),
+                  ),
+                ),
+                const SizedBox(width: 10),
+                ZiggleButton.text(
+                  onPressed: () => context.pop(),
+                  child: Text(
+                    t.common.cancel,
+                    style: const TextStyle(color: Palette.grayText),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+      body: _keyword.isEmpty
+          ? Center(
+              child: Column(
+                children: [
+                  const SizedBox(height: 50),
+                  Assets.icons.search.svg(
+                    width: 65,
+                    height: 65,
+                    colorFilter: const ColorFilter.mode(
+                      Palette.gray,
+                      BlendMode.srcIn,
+                    ),
+                  ),
+                  const SizedBox(height: 9),
+                  Text(
+                    t.notice.search.description,
+                    style: const TextStyle(
+                      color: Palette.grayText,
+                      fontSize: 16,
+                      fontWeight: FontWeight.w400,
+                    ),
+                  )
+                ],
+              ),
+            )
+          : ListView.builder(
+              itemCount: count,
+              itemBuilder: (context, index) => Container(
+                padding: const EdgeInsets.only(left: 16),
+                decoration: index != count - 1
+                    ? null
+                    : const BoxDecoration(
+                        border: Border(
+                          bottom:
+                              BorderSide(color: Color(0x5B3C3C43), width: 0.33),
+                        ),
+                      ),
+                child: Container(
+                  padding: const EdgeInsets.symmetric(vertical: 9),
+                  decoration: const BoxDecoration(
+                    border: Border(
+                      top: BorderSide(color: Color(0x5B3C3C43), width: 0.33),
+                    ),
+                  ),
+                  child: ZigglePressable(
+                    onPressed: () {},
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.stretch,
+                      children: [
+                        Text(
+                          'title',
+                          style: const TextStyle(
+                            fontSize: 17,
+                            fontWeight: FontWeight.w400,
+                            color: Palette.black,
+                          ),
+                        ),
+                        Text(
+                          '인포팀, 하루전',
+                          style: const TextStyle(
+                            fontSize: 15,
+                            fontWeight: FontWeight.w400,
+                            color: Palette.grayText,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+            ),
+    );
+  }
+}
diff --git a/lib/app/router/notice_routes.dart b/lib/app/router/notice_routes.dart
@@ -1,10 +1,19 @@
 part of 'routes.dart';
 
+@TypedGoRoute<SearchRoute>(path: '/search')
+class SearchRoute extends GoRouteData {
+  const SearchRoute();
+  static final $parentNavigatorKey = rootNavigatorKey;
+  @override
+  Widget build(context, state) => const SearchPage();
+}
+
 @TypedGoRoute<NoticeCategoryRoute>(path: '/category/:type')
 class NoticeCategoryRoute extends GoRouteData {
   const NoticeCategoryRoute(this.type);
 
   final NoticeType type;
+  static final $parentNavigatorKey = rootNavigatorKey;
 
   @override
   Widget build(context, state) => ListPage(title: type.name);

diff --git a/lib/app/router/routes.dart b/lib/app/router/routes.dart
@@ -19,6 +19,7 @@ import 'package:ziggle/app/modules/notice/presentation/pages/notice_write_config
 import 'package:ziggle/app/modules/notice/presentation/pages/notice_write_consent_page.dart';
 import 'package:ziggle/app/modules/notice/presentation/pages/notice_write_preview_page.dart';
 import 'package:ziggle/app/modules/notice/presentation/pages/notice_write_select_tags_page.dart';
+import 'package:ziggle/app/modules/notice/presentation/pages/search_page.dart';
 import 'package:ziggle/app/modules/splash/presentation/pages/splash_page.dart';
 import 'package:ziggle/gen/assets.gen.dart';
 import 'package:ziggle/gen/strings.g.dart';
@@ -29,10 +30,13 @@ part 'notice_routes.dart';
 part 'routes.g.dart';
 part 'splash_routes.dart';
 
+final GlobalKey<NavigatorState> rootNavigatorKey = GlobalKey<NavigatorState>();
+
 abstract class AppRoutes {
   AppRoutes._();
 
   static final config = GoRouter(
+    navigatorKey: rootNavigatorKey,
     initialLocation: const SplashRoute().location,
     routes: $appRoutes,
     debugLogDiagnostics: kDebugMode,