diff --git a/assets/icons/empty_leaf.svg b/assets/icons/empty_leaf.svg new file mode 100644 index 0000000..7d4addd --- /dev/null +++ b/assets/icons/empty_leaf.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/icons/home_list_chicken_icon.svg b/assets/icons/home_list_chicken_icon.svg new file mode 100644 index 0000000..b8b2cc2 --- /dev/null +++ b/assets/icons/home_list_chicken_icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/lib/app/config/app_routes.dart b/lib/app/config/app_routes.dart index 1c74917..08c6f05 100644 --- a/lib/app/config/app_routes.dart +++ b/lib/app/config/app_routes.dart @@ -3,4 +3,5 @@ abstract class AppRoutes { static const String ROOT = '/'; static const String HOME = '/home'; + static const String HOME_LIST_DETAIL = '/home-list-detail'; } diff --git a/lib/app/config/font_system.dart b/lib/app/config/font_system.dart index 8ab44b1..bb331ca 100644 --- a/lib/app/config/font_system.dart +++ b/lib/app/config/font_system.dart @@ -83,4 +83,12 @@ abstract class FontSystem { color: Colors.black, height: 1.667, ); + + static const TextStyle Sub4Bold = TextStyle( + fontSize: 10, + fontWeight: FontWeight.w700, + fontFamily: AppConfig.APP_FONT_STYLE, + color: Colors.black, + height: 1.5, + ); } diff --git a/lib/presentation/view/home/home_screen.dart b/lib/presentation/view/home/home_screen.dart index 25b661f..cfed9b9 100644 --- a/lib/presentation/view/home/home_screen.dart +++ b/lib/presentation/view/home/home_screen.dart @@ -3,6 +3,7 @@ import 'package:farm04_modeul/app/config/color_system.dart'; import 'package:farm04_modeul/presentation/view/home/widget/home_food_category_list_view.dart'; import 'package:farm04_modeul/presentation/view_model/home/home_view_model.dart'; import 'package:farm04_modeul/presentation/view/home/widget/component/home_type_toggle_button.dart'; +import 'package:farm04_modeul/presentation/widget/image/svg_image_box.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; diff --git a/lib/presentation/view/home/widget/component/home_food_category_item.dart b/lib/presentation/view/home/widget/component/home_food_category_item.dart index e69de29..f5cefef 100644 --- a/lib/presentation/view/home/widget/component/home_food_category_item.dart +++ b/lib/presentation/view/home/widget/component/home_food_category_item.dart @@ -0,0 +1,37 @@ +import 'package:farm04_modeul/app/config/color_system.dart'; +import 'package:farm04_modeul/app/config/font_system.dart'; +import 'package:farm04_modeul/presentation/view_model/home/home_view_model.dart'; +import 'package:farm04_modeul/presentation/widget/image/svg_image_box.dart'; +import 'package:flutter/cupertino.dart'; + +class HomeFoodCategoryItem extends StatelessWidget { + const HomeFoodCategoryItem({ + super.key, + required this.state, + required this.onTap, + }); + + final HomeFoodCategoryItemState state; + final Function() onTap; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: onTap, + child: Column( + children: [ + SvgImageBox( + assetPath: state.assetsPath, + width: 45, + height: 45, + color: ColorSystem.primary.shade500 + ), + Text( + state.name, + style: FontSystem.Sub4Bold, + ) + ], + ), + ); + } +} \ No newline at end of file diff --git a/lib/presentation/view/home/widget/home_food_category_list_view.dart b/lib/presentation/view/home/widget/home_food_category_list_view.dart index b7833a5..70dc5b5 100644 --- a/lib/presentation/view/home/widget/home_food_category_list_view.dart +++ b/lib/presentation/view/home/widget/home_food_category_list_view.dart @@ -1,17 +1,40 @@ +import 'package:farm04_modeul/app/config/app_routes.dart'; import 'package:farm04_modeul/core/view/base_widget.dart'; +import 'package:farm04_modeul/presentation/view/home/widget/component/home_food_category_item.dart'; import 'package:farm04_modeul/presentation/view_model/home/home_view_model.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +import 'package:get/get.dart'; class HomeFoodCategoryListView extends BaseWidget{ const HomeFoodCategoryListView({super.key}); @override Widget buildView(BuildContext context) { - return Scaffold( - body: Center( - child: const Text('This is the Home Food Category List View!'), - ), - ); /// 임시 scaffold + return Obx( + () { + List items = viewModel.homeFoodCategoryOverviewList; + + return GridView.builder( + padding: EdgeInsets.symmetric(horizontal: 0), + gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 5, mainAxisSpacing: 5), + itemCount: items.length, + itemBuilder: (context, index) { + return HomeFoodCategoryItem( + state: items[index], + onTap: () { + Get.toNamed( + AppRoutes.HOME_LIST_DETAIL, + arguments: { + 'id': items[index].id, + } + ); + }, + ); + } + ); + } + ); } } \ No newline at end of file diff --git a/lib/presentation/view_model/home/home_view_model.dart b/lib/presentation/view_model/home/home_view_model.dart index 4bace53..b533aa6 100644 --- a/lib/presentation/view_model/home/home_view_model.dart +++ b/lib/presentation/view_model/home/home_view_model.dart @@ -1,6 +1,18 @@ import 'package:farm04_modeul/app/utility/log_util.dart'; import 'package:get/get.dart'; +class HomeFoodCategoryItemState { + final int id; + final String name; + final String assetsPath; + + HomeFoodCategoryItemState({ + required this.id, + required this.name, + required this.assetsPath + }); +} + class HomeViewModel extends GetxController { /* ------------------------------------------------------ */ /* Static Fields ---------------------------------------- */ @@ -13,12 +25,14 @@ class HomeViewModel extends GetxController { /* ------------------------------------------------------ */ /* Private Fields --------------------------------------- */ /* ------------------------------------------------------ */ - RxInt _selectedTypeToggleIndex = RxInt(-1); /// viewModel 값 업데이트를 위해 RxInt 값 이용 + late RxInt _selectedTypeToggleIndex = RxInt(-1); /// viewModel 값 업데이트를 위해 RxInt 값 이용 + late final RxList _homeFoodCategoryOverviewList; /* ------------------------------------------------------ */ /* Public Fields ---------------------------------------- */ /* ------------------------------------------------------ */ int get selectedTypeToggleIndex => _selectedTypeToggleIndex.value; /// getter method + List get homeFoodCategoryOverviewList => _homeFoodCategoryOverviewList; /* ------------------------------------------------------ */ /* Method ----------------------------------------------- */ @@ -29,17 +43,13 @@ class HomeViewModel extends GetxController { super.onInit(); _selectedTypeToggleIndex = RxInt(-1); + _homeFoodCategoryOverviewList = [].obs; } @override void onReady() { super.onReady(); - _fetchHomeFoodCategoryListInformation(); - } - - // food category 목록 정보 가져오기 - void _fetchHomeFoodCategoryListInformation() async { - + _updateFoodCategoryData(); } // toggle select 변경하기 @@ -49,4 +59,29 @@ class HomeViewModel extends GetxController { "changed seletedTypeToggleIndex to ${index}", ); } + // food category list 데이터 업데이트 + void _updateFoodCategoryData() async { + List data = [ + HomeFoodCategoryItemState(id: 1, name: '전체', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 2, name: '치킨', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 3, name: '피자', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 4, name: '한식', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 5, name: '분식', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 6, name: '족발/보쌈', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 7, name: '중식', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 8, name: '돈까스/회/일식', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 9, name: '패스트푸드', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 10, name: '카페/디저트', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 11, name: '아시안/양식', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 12, name: '야식', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 13, name: '도시락', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 14, name: '브랜드관', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 15, name: '전통시장', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 16, name: '부평특별관', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + HomeFoodCategoryItemState(id: 17, name: '외식업특별관', assetsPath: 'assets/icons/home_list_chicken_icon.svg'), + ]; + + _homeFoodCategoryOverviewList.clear(); /// 데이터 초기화 + _homeFoodCategoryOverviewList.addAll(data); + } } \ No newline at end of file