[학식] 페이지 UI 퍼블리싱 #22

CheolheeLee0 · 2022-11-28T17:40:42Z

Describe your changes

영상으로 확인하기

학식 페이지 UI 개발

1. 공통 컴포넌트 설계

cafeteria_button.dart (1, 2, 3, 4학, 긱사, 생과대 식당 선택 버튼)
cafeteria_listview.dart (1, 2, 3, 4학, 긱사, 생과대 식당 선택 ListVIew)

operation_time.dart (1, 2, 3, 4학, 긱사, 생과대 운영시간을 표시하는 전체 위젯)
operation_time_text.dart (1, 2, 3, 4학, 긱사, 생과대 운영시간의 텍스트 위젯)
opertion_time_info.dart (1, 2, 3, 4학, 긱사, 생과대 운영시간 정보를 저장하는 파일)

dat_button.dart (2, 3, 4학, 긱사, 생과대 요일 선택 버튼)
day_list_view.dart (2, 3, 4학, 긱사, 생과대 요일 선택 ListView)

first_sh_food_button.dart (1학 음식 종류를 선택하는 버튼)
first_sh_food_category_list_view.dart (1학 음식 종류를 선택하는 ListView)
first_sh_list_view.dart (1학 음식 표시하는 ListView)
first_sh_food_card.dart (1학 음식 카드)

food_card.dart (2, 3, 4학, 긱사, 생과대 식단 표시하는 카드)
food_list_view.dart (2, 3, 4학, 긱사, 생과대 식단 표시하는 ListView)

2. UI 화면 설계

상위 카테고리
- 1, 2, 3, 4학, 긱사, 생과대
하위 카테고리
- 1학
  - 음식 종류 선택 : 라면&간식, 한식, 양식, 일식, 중식, 스낵
- 2, 3, 4학, 긱사, 생과대
  - 식단 요일 선택 : 오늘. 월, 화, 수, 목, 금, 토, 일
식단, 메뉴 표시
- 1학
  - 푸드코트별 음식 메뉴 표시 : 라면&간식, 한식, 양식, 일식, 중식, 스낵
- 2, 3, 4학, 긱사, 생과대
  - 요일별 식단 표시 : 메인A & 메인C, 직원 & 학생
아래로 스크롤시 BottomNavigation 숨기기
- 위로 스크롤 시 BottomNavigation 보이기

3. Controller, Provider, Repository 설계 - 3 layered architecture

1학 음식 가져오기
2, 3, 4학, 긱사, 생과대 식단 가져오기

4. 더미 데이터 추가

1학 음식 더미데이터
2, 3, 4학, 긱사, 생과대 식단 더미데이터

5. 원산지 파싱

쌀밥 [쌀:국내산] => 쌀:국내산

String convertOrigin(String foodFullName) {
	final RegExp exp = RegExp(r'(\[.*\])');
	final RegExpMatch? match = exp.firstMatch(foodFullName);
	if (match == null) return '';
	String origin = match[0].toString();
	origin = origin.replaceAll('[', '').replaceAll(']', '');
	return origin;
}

Fixes #21

Checklist

🤔 이 프로젝트의 스타일 가이드를 따르나요?
🤔 머지하기 전에 스스로 코드에 문제가 없음을 확인했나요?
🤔 필요한 주석을 필요한 곳에 넣어주었나요?

Next Step Todo (optional)

학식 백엔드 실서버 API연동

Questions

💬 질문 사항이에요!
- 제가 폴더 이름을 변경해서 pull request에서 conflict가 나는 것 같습니다! 이럴 때 git push --force 로 해결해도 될까요? 어떤 방법이 좋을지 궁금합니다!

okinawaa · 2022-11-29T01:36:30Z

제가 폴더 이름을 변경해서 pull request에서 conflict가 나는 것 같습니다! 이럴 때 git push --force 로 해결해도 될까요? 어떤 방법이 좋을지 궁금합니다!

현재 에디터에서 develop브랜치를 받으시면 에디터상에서 충돌이날것이고 거기서 해결하시고 다시 push하시면 될 것 같습니다.
일단 철희님 레포지토리에서 이 레포지토리를 업데이트 받으셔야합니다.

git remote update

git merge origin/develop

==> 충돌 해결

git add .

git commit -m "fix: resolve merge conflict"

git push origin feed-food-ui

fix: resolve merge conflict

CheolheeLee0 · 2022-11-29T07:08:49Z

현재 에디터에서 develop브랜치를 받으시면 에디터상에서 충돌이날것이고 거기서 해결하시고 다시 push하시면 될 것 같습니다.
일단 철희님 레포지토리에서 이 레포지토리를 업데이트 받으셔야합니다.

아하 자세한 설명 감사합니다! 말씀해주신대로 merge 하니까 conflict 오류 없어졌네요!

…ndroid)

okinawaa

많이 배웠습니다!

기여 감사합니다💪

okinawaa · 2022-12-03T13:12:22Z

analysis_options.yaml

@@ -11,3 +11,4 @@ linter:
 analyzer:
  errors:
    invalid_annotation_target: ignore
+  exclude: [build/**, lib/**.freezed.dart, lib/**.g.dart]


okinawaa · 2022-12-03T13:26:46Z

lib/app/4_view/1_component/0_button/gray_weekday_button.dart

+import 'package:cnubot_app/app/4_view/0_constant/constant_color.dart';
+import 'package:cnubot_app/app/4_view/0_constant/constant_text_style.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class GrayWeekdayButton extends StatelessWidget {
+  const GrayWeekdayButton({
+    Key? key,
+    required this.text,
+  }) : super(key: key);
+
+  final String text;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.fromLTRB(6.w, 3.h, 6.w, 3.h),
+      margin: EdgeInsets.fromLTRB(4.w, 0, 3.w, 0),
+      decoration: BoxDecoration(
+        color: kGrayEE,
+        borderRadius: BorderRadius.circular(100.r),
+      ),
+      child: Text(
+        text,
+        style: kBody5,
+      ),
+    );
+  }
+}


gray_time_button괴
gray_weekday_button 만들어주신것 정말 좋은 것같습니다!

하지만, 같은 디자인인데 추후에 time과 weekday에 관련이 없는 부분이 해당 위젯을 사용해야할 때 헷갈릴 것 같습니다!

디자인은 gray_weekday_button이라서 GrayWeekdayButton 를쓰려하는데 Weekday랑은 전혀 상관없는 도메인일수도 있습니다.

1_component/0_button 은 특정 도메인에 속하지 않은 common 위젯을 모아두는 곳이므로 도메인(time, weekday)을 빼고 보다 더 제네럴 하게 이름을 짓는 것은 어떨까요?

DeepGraybutton, lightGrayButton 요런 느낌으로요!

네 재사용하려면 그렇게 변경하는 것이 좋을 것 같습니다! 수정했습니다~

okinawaa · 2022-12-03T13:29:02Z

lib/app/4_view/1_component/1_layout/nav/bottom_nav_bar.dart

-          icon: NavItem(
-            assetName: 'n',
-            selected: currentPage.index == 0 ? true : false,
+    final double bnbHeight = Platform.isIOS ? 110.h : 87.h;


IOS랑 다르게 처리하신 이유가 궁금합니다!

BottomNavigation 높이를 줄어들게 애니메이션 사용하려면 높이 설정을 해야하는데,
ios는 android와 다르게 아래 사진처럼 SafeArea 영역이 존재해서, android처럼 87.h를 하면 오버플로우가 나서 오버플로우가 안나도록 적정 높이로 설정하였습니다!
고민하다가 이게 제일 나은 방법인 것 같아서 이렇게 했는데 더 나은 방법 찾으시면 말씀해주시면 감사하겠습니다!

좋습니다! 적절하게 처리하신것같아요!

okinawaa · 2022-12-03T13:32:19Z

lib/app/4_view/1_component/1_layout/nav/bottom_nav_bar.dart

    required this.updateCurrentPage,
  }) : super(key: key);

  final NavPage currentPage;
+  final bool visible;


항상 스크롤에 따른 무언가 보여줌을 어떻게 처리해야할지 궁금했는데,
너무 잘 구현해주셔서 감사합니다.
visible 이 바뀌는 과정에서 overflow warning 네모박스가 다음 동영상과 같이 나오는데 해결가능할까요?

Screen.Recording.2022-12-03.at.10.31.29.PM.mov

iphone pro max ios 16.0 환경입니다!

flutter run --release 해서 릴리즈 환경에서는 오버플로우 박스 안보이긴 하는데,
label을 넣으면 항상 텍스트가 있는데, height가 0이 되면서 오버플로우는 어쩔 수 없는 것 같습니다!

아 release 환경에서는안보이군요! 그러면 ok입니다!

okinawaa · 2022-12-03T13:35:50Z

lib/app/4_view/1_component/1_layout/nav/bottom_nav_bar.dart

+          BottomNavigationBarItem(
+            icon: NavItem(
+              assetName: 'n',
+              selected: currentPage.index == 0 ? true : false,
+            ),
+            label: NavPage.notice.displayName,
          ),
-          label: NavPage.notice.displayName,
-        ),
-        BottomNavigationBarItem(
-          icon: NavItem(
-            assetName: 'm',
-            selected: currentPage.index == 1 ? true : false,
+          BottomNavigationBarItem(
+            icon: NavItem(
+              assetName: 'm',
+              selected: currentPage.index == 1 ? true : false,
+            ),
+            label: NavPage.food.displayName,
          ),
-          label: NavPage.food.displayName,
-        ),
-        BottomNavigationBarItem(
-          icon: NavItem(
-            assetName: 't',
-            selected: currentPage.index == 2 ? true : false,
+          BottomNavigationBarItem(
+            icon: NavItem(
+              assetName: 't',
+              selected: currentPage.index == 2 ? true : false,
+            ),
+            label: NavPage.bus.displayName,
          ),
-          label: NavPage.bus.displayName,
-        ),
-        BottomNavigationBarItem(
-          icon: NavItem(
-            assetName: 'l',
-            selected: currentPage.index == 3 ? true : false,
+          BottomNavigationBarItem(
+            icon: NavItem(
+              assetName: 'l',
+              selected: currentPage.index == 3 ? true : false,
+            ),
+            label: NavPage.library.displayName,


index에 따른 true false 분기가 너무 반복되는데

다음과 같이 함수를 만들어서 해결하는것은 어떨까요?!

네 코드 줄이는 좋은 방법인 것 같습니다! 추가했습니다~

okinawaa · 2022-12-03T13:38:53Z

lib/app/4_view/2_screen/6_food/component/dat_button.dart

+import 'package:cnubot_app/app/4_view/0_constant/enum/day_type.dart';
+import 'package:cnubot_app/app/4_view/1_component/0_button/gray_button.dart';
+import 'package:flutter/material.dart';
+
+class DayButton extends StatelessWidget {
+  const DayButton({
+    Key? key,
+    required this.dayType,
+    required this.currentType,
+    this.onTap,
+  }) : super(key: key);
+  final DayType dayType;
+  final DayType currentType;
+  final Function? onTap;
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: () {
+        if (onTap != null) {
+          onTap!(dayType);
+        }
+      },
+      child: GrayRoundButton(
+        isSelected: dayType == currentType,
+        text: dayType.displayName,
+      ),
+    );
+  }
+}


이 파일 명이
dat_button.dart인데 day_button.dart로 안하신 이유가 있으신가요?!

앗 파일명 오타가 났네요 수정했습니다~

okinawaa · 2022-12-03T13:40:50Z

lib/app/4_view/2_screen/6_food/component/first_sh_food_card.dart

+                SizedBox(
+                  width: 60.w,
+                  child: Text(
+                    firstShFoodModel.foodName,


이 텍스트명 현재는

매운차돌온 면

이런식으로되어있는데

매운차돌온 면

으로 수정하는것은어떨까요?
textAlign.center 를 주는것이 더이쁜가용?!

디자인이 중앙정렬이 되어있어서 이렇게 했는데,
왼쪽 정렬이 나은가요? 저는 둘다 괜찮은 것 같습니다!

디자인이 그렇군요! ㅠ
그러면 그렇게 중앙정렬 유지하는게 좋을 것 같습니다!😂

okinawaa · 2022-12-03T13:54:32Z

lib/app/4_view/2_screen/6_food/food_controller.dart

+    }
+  }
+
+  void getFirstSHFoodModelList({bool? refresh}) async {


철희님 지금까지 작업해주신 컨벤션 보면
getFirstSHFoodModelList => getFirstShFoodModelList

이렇게 되어야하는데 getFirstSHFoodModelList 로 작업하신 이유가 있으신가요?!

맞습니다 수정했습니다!

SH -> Sh

CheolheeLee0 added 12 commits November 6, 2022 00:16

feat: 백엔드에 맞춰 enum 수정

f4d57d1

feat: freezed model build shell script

96582c9

feat: 모든 게시판 API 연동 완료

d5ce9a4

fix: bottom nav color 변경

0d14947

fix: vscode problems

5f77854

fix: remove remark

6b49bae

fix: back to offAllNamed

bd316c4

feat: 학식 기본화면 추가

76e4a11

feat: 식당 선택, 메뉴 선택, 요일 선택 버튼 추가

a0de69e

feat: 시설별 운영시간 추가

4c32d7f

refactor: json 분리

e2903aa

feat: 스크롤바 추가

a5d7e1b

CheolheeLee0 self-assigned this Nov 28, 2022

CheolheeLee0 added the enhancement New feature or request label Nov 28, 2022

chore: 주석 제거

24889ed

okinawaa self-requested a review November 29, 2022 01:31

Merge remote-tracking branch 'origin/develop' into feat-food-ui

4bdc2f4

fix: resolve merge conflict

CheolheeLee0 added 11 commits November 29, 2022 16:24

feat: set scrollbar background color to grayF3

17886b0

feat: food API

f9b5038

feat: Add cafeteria param

7d5cc03

feat: Add Day param

1100484

feat: Add food type param

2002381

feat: Add food time icon (breakfast, lunch, dinner)

5b75baa

feat: create first_sh_food_model (1학)

175757d

feat: create food_model (1학 제외한 모든 식당)

b88b6a5

fix: change cafeteria_type enum name

f3299dd

fix: rename first_sh_type (1학: 한식, 일식, ...)

9f3dad1

feat: Add TimeType (breakfast, lunch, dinner)

6cd6b2b

CheolheeLee0 added 13 commits December 3, 2022 02:45

feat: Add getByParam (use when execute fromJson method)

fbbd0bd

feat: Add constant_color

78618fa

feat: Add constant_text_style

db9c908

fix: rename FirstShFoodType (1학: 한식, 일식, 중식, ...)

19d4ef0

feat: Add 1학 (FirstShFood) component - listview, card, category_listview

1241a30

feat: Add FoodScreen & FoodController

8e0aa56

feat: Add FoodProvider & FoodRepository with dummy data

301465d

fix: rename first_sh_food_button

0747102

fix: change if to switch

af8bef2

feat: hide BottomNavigationBar when scroll down

0b8b489

fix: set BottomNavigationBar height according to the platform (ios, a…

49be9a6

…ndroid)

fix: change param name to foodFullName

905002b

fix: remove NeverScrollableScrollPhysics()

4822f7b

okinawaa requested changes Dec 3, 2022

View reviewed changes

CheolheeLee0 added 4 commits December 3, 2022 23:15

fix: change gray button name

2dfdf0c

fix: Add isSelect(int)

96c5806

fix: rename file name (dat -> day button)

c874eec

fix: SH -> Sh

0f92ffb

CheolheeLee0 changed the title ~~feat: 학식 - 식당 선택버튼, 운영시간 UI 개발~~ feat: 학식 페이지 UI 퍼블리싱 Dec 3, 2022

CheolheeLee0 changed the title ~~feat: 학식 페이지 UI 퍼블리싱~~ [학식] 페이지 UI 퍼블리싱 Dec 3, 2022

okinawaa merged commit 4a40094 into cnu-bot:develop Dec 4, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[학식] 페이지 UI 퍼블리싱 #22

[학식] 페이지 UI 퍼블리싱 #22

CheolheeLee0 commented Nov 28, 2022 •

edited

okinawaa commented Nov 29, 2022

CheolheeLee0 commented Nov 29, 2022

okinawaa left a comment

okinawaa Dec 3, 2022

okinawaa Dec 3, 2022

CheolheeLee0 Dec 3, 2022

okinawaa Dec 3, 2022

CheolheeLee0 Dec 3, 2022 •

edited

okinawaa Dec 3, 2022

okinawaa Dec 3, 2022

okinawaa Dec 3, 2022

CheolheeLee0 Dec 3, 2022

okinawaa Dec 3, 2022

okinawaa Dec 3, 2022

CheolheeLee0 Dec 3, 2022

okinawaa Dec 3, 2022

CheolheeLee0 Dec 3, 2022

okinawaa Dec 3, 2022

CheolheeLee0 Dec 3, 2022

okinawaa Dec 3, 2022

okinawaa Dec 3, 2022

CheolheeLee0 Dec 3, 2022

[학식] 페이지 UI 퍼블리싱 #22

[학식] 페이지 UI 퍼블리싱 #22

Conversation

CheolheeLee0 commented Nov 28, 2022 • edited

Describe your changes

영상으로 확인하기

학식 페이지 UI 개발

1. 공통 컴포넌트 설계

2. UI 화면 설계

3. Controller, Provider, Repository 설계 - 3 layered architecture

4. 더미 데이터 추가

5. 원산지 파싱

Checklist

Next Step Todo (optional)

Questions

okinawaa commented Nov 29, 2022

CheolheeLee0 commented Nov 29, 2022

okinawaa left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CheolheeLee0 Dec 3, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CheolheeLee0 commented Nov 28, 2022 •

edited

CheolheeLee0 Dec 3, 2022 •

edited