[ui] 위니 피드 / 서브 플로팅 버튼 추가 및 디자인 변경 반영 #234

sxunea · 2024-01-10T07:49:39Z

closed [ui] 위니 피드 / 플로팅 버튼 절약,낭비 서브 버튼 추가 및 간단한 디자인 변경 반영 #232

📝 Work Description

업로드 FAB 클릭 시 소비 / 절약 서브 버튼 구현
배너 디자인 변경 반영
sub color 디자인 시스템 추가

📸 Screenshot

📣 To Reviewers

일단 UI는 완성됐는데 문제가 있습니다 위의 사진 처럼 업로드 버튼을 클릭하면 기존 뷰는 어둡게 변하고 그 위에 서브 버튼이 추가되어야 하는 상황인데, 실행시켜보면 UI는 구현이 되었지만 기존 뷰의 비활성화 처리가 되지 않았어요 !

지금 구현 방식은 FAB 를 클릭하면 fragment에 어두운 오버레이가 추가되고, 서브버튼의 visibility를 조절하는 방식인데, 서브 버튼이 나타나면서 배경은 어두워지되, 기존 뷰는 보이고, 클릭이나 스크롤은 비활성화가 되어야 합니다
근데 이게 오버레이를 추가하는 방식이다 보니 서브버튼-절약했어요 를 클릭해도 뒤 기존 뷰의 위니 피드가 클릭이 됩니다

시도 했던 방법은 이걸 framelayout으로 변경하는 거랑 / 기존 뷰 전체를 isClickable, isFocusable을 false로 관리하는 것인데 첫번째 시도는 결과가 같았구, 두번째 시도는 해당 속성을 false로 줘도 클릭리스너가 달려있으면 이를 제어할 수가 없다고 하더라구요 .. ! 딱 다이얼로그가 나타나는 방식으로 구현해야 하는데 아이디어 있으면 부탁합니다 . . .

-> 다이얼로그로 구현하면 됐었네요 .. 쓰다가 깨달았다 😿 서브버튼 자체를 다이얼로그로 구현하고 FAB 클릭 시 다이얼로그를 오른쪽 하단에 위치시키도록 했습니다 : )

fab 두 개 있으면 runtime 오류 생김 -> 하나 사용하고 이미지 와 배경색 변경하는 방향으로 수정

위니피드 안의 cardview 형태로 구현했었는데 dialog로 구현 방식 변경

leeeha

한가지 첨언하고 싶은 것은 다이얼로그가 뜰 때 디폴트로 아래에서 위로 올라오는 듯한 애니메이션이 있더라구요..?! 이게 없으면 조금 더 자연스럽게 업로드 버튼이 '연필 모양 -> X 버튼'으로 바뀔 거 같은데 이 부분 혹시 개선 가능할까요?? 👀

leeeha · 2024-01-12T08:53:00Z

app/src/main/java/org/go/sopt/winey/presentation/main/feed/WineyFeedFragment.kt

-        initFabClickListener()
-        initNotificationButtonClickListener()
+        addListener()
+        addObserver()


ㅋㅋㅋ러넥트 코드가 생각나네요!! 🤣

leeeha · 2024-01-12T08:54:54Z

app/src/main/java/org/go/sopt/winey/presentation/main/feed/WineyFeedFragment.kt

@@ -316,12 +322,22 @@ class WineyFeedFragment :
    }

    private fun initFabClickListener() {
-        binding.btnWineyfeedFloating.setOnSingleClickListener {
+        binding.fabWineyfeedUpload.setOnSingleClickListener {


네이밍 바꾼 거 좋네요! 👍

leeeha · 2024-01-12T09:00:48Z

app/src/main/java/org/go/sopt/winey/presentation/main/feed/WineyFeedFragment.kt

+            },
+            handleConsumeButton = {}
+        )
+        dialog.show(parentFragmentManager, TAG_CONGRATULATION_DIALOG)


parentFragmentManager는 requireActivity, requireContext와 유사하게 변수가 널인 경우에 예외를 던진다고 합니다!
nullable 타입을 반환하는 등 런타임 에러를 방지할 수 있는 다른 방법을 찾아보는 게 좋을 거 같아요!

관련 러넥트 문서: https://www.notion.so/runnectiosonboarding/f73a4433b0194225bbc764abfb8f8fd8?pvs=4

다이얼로그를 서로 구분하는 데 사용되는 tag 이름을 다른 걸로 지어주는 게 좋을 거 같아요! 현재 다이얼로그는 축하 다이얼로그가 아닌 거 같아서요 :)

leeeha · 2024-01-12T09:02:54Z

app/src/main/java/org/go/sopt/winey/presentation/main/feed/WineyFeedFragment.kt

@@ -507,6 +523,7 @@ class WineyFeedFragment :
        private const val TAG_CONGRATULATION_DIALOG = "CONGRATULATION_DIALOG"
        private const val TAG_FEED_DELETE_DIALOG = "FEED_DELETE_DIALOG"
        private const val TAG_FEED_REPORT_DIALOG = "FEED_REPORT_DIALOG"
+        private const val TAG_UPLOAD_DIALOG = "UPLOAD_DIALOG"


여기 만들어두고 깜박하셨군요!

만들어두고 넣질 않았네요 ㅎㅎㅎ

leeeha · 2024-01-12T09:04:22Z

app/src/main/java/org/go/sopt/winey/util/fragment/WineyUploadDialogFragment.kt

+        setupDialogBehavior()
+        initConsumeButtonClickListener(handleConsume)
+        initSaveButtonClickListener(handleSave)
+        initCloseButtonClickListener()


여기도 addListener로 묶어주면 코드의 통일성이 더 생길 거 같습니다!

leeeha · 2024-01-12T09:10:02Z

app/src/main/res/values/colors.xml

+    <color name="sub_red_500">#FF6271</color>
+    <color name="sub_red_100">#FFB0B8</color>
+    <color name="sub_green_500">#00CB81</color>
+    <color name="sub_green_100">#80E5C0</color>


서브 컬러 색깔 이쁘더라구요 역시 디팀👍

leeeha · 2024-01-12T09:12:48Z

app/src/main/res/layout/layout_wineyfeed_banner_instagram.xml

-        android:layout_marginEnd="9dp"
+        android:layout_width="95dp"
+        android:layout_height="56dp"
+        android:layout_marginEnd="10dp"
        android:src="@drawable/img_insta"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />


디테일한 수정 작업 고생하셨습니당~~!!

null일 시 IllegalStateException 발생하지 않게 함수를 리턴시킴

This reverts commit 26086a5.

Nullable 타입 반환

leeeha · 2024-01-16T05:44:09Z

app/src/main/java/org/go/sopt/winey/presentation/main/feed/WineyFeedFragment.kt

+            },
+            handleConsumeButton = {}
+        )
+        activity?.supportFragmentManager?.let { dialog.show(it, TAG_UPLOAD_DIALOG) }


nullable 타입 반환에 따라 별도 처리를 해줘야 한다는 게 다소 번거롭지만, non-null 타입이 null을 반환하여 exception이 발생하는 것은 막을 수 있을 거 같습니다!

sxunea added 8 commits January 8, 2024 21:09

[add] #232 sub color 추가

1817f02

[ui] #232 절약 / 과소비 금액 변경 디자인 반영

c09c7f5

[chore] #232 이미지 리소스 추가

b274d8c

[ui] #232 FAB 클릭 시 나오는 cardview 디자인 구현

9d94fc7

[mod] #232 레이아웃 수정

248cebc

[mod] #232 레이아웃 수정

e6f6ac7

fab 두 개 있으면 runtime 오류 생김 -> 하나 사용하고 이미지 와 배경색 변경하는 방향으로 수정

[feat] #232 위니피드 fab 클릭 시 업로드 카드 뷰 구현

cfaa0fd

[mod] #232 위니피드 배너 디자인 변경 반영

4608b3b

sxunea added ui 🎨 UI 관련 작업 혜선 🐱 labels Jan 10, 2024

sxunea requested review from leeeha and Sangwook123 January 10, 2024 07:49

sxunea self-assigned this Jan 10, 2024

sxunea added 5 commits January 10, 2024 18:07

[chore] #232 이미지 리소스 추가

38c1175

[ui] #232 업로드 서브 버튼 다이얼로그 디자인 구현

1e643ef

위니피드 안의 cardview 형태로 구현했었는데 dialog로 구현 방식 변경

[feat] #232 업로드 FAB 클릭 시 서브 버튼 다이얼로그 나타나도록 구현

c013538

[chore] #232 observer, listener 묶어서 관리

23c1d1f

[chore] #232 ktlint 반영

2ea3806

leeeha approved these changes Jan 12, 2024

View reviewed changes

sxunea added 4 commits January 15, 2024 21:05

[refacotr] #232 parentFragmentManager null 안전하게 개선

26086a5

null일 시 IllegalStateException 발생하지 않게 함수를 리턴시킴

[refactor] #232 listener 묶어서 함수화

9b2c941

Revert "[refacotr] #232 parentFragmentManager null 안전하게 개선"

63049ab

This reverts commit 26086a5.

[refactor] #232 parentFragmentManager IllegalStateException 방지

3807235

Nullable 타입 반환

leeeha approved these changes Jan 16, 2024

View reviewed changes

[chore] #232 onViewCreated 등록 누락 함수 복구

c9fc405

sxunea merged commit 3e6ed20 into develop Jan 16, 2024
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ui] 위니 피드 / 서브 플로팅 버튼 추가 및 디자인 변경 반영 #234

[ui] 위니 피드 / 서브 플로팅 버튼 추가 및 디자인 변경 반영 #234

sxunea commented Jan 10, 2024 •

edited

Loading

leeeha left a comment •

edited

Loading

leeeha Jan 12, 2024

leeeha Jan 12, 2024

leeeha Jan 12, 2024

leeeha Jan 12, 2024

leeeha Jan 12, 2024

sxunea Jan 15, 2024

leeeha Jan 12, 2024

leeeha Jan 12, 2024

leeeha Jan 12, 2024

leeeha Jan 16, 2024

[ui] 위니 피드 / 서브 플로팅 버튼 추가 및 디자인 변경 반영 #234

[ui] 위니 피드 / 서브 플로팅 버튼 추가 및 디자인 변경 반영 #234

Conversation

sxunea commented Jan 10, 2024 • edited Loading

📝 Work Description

📸 Screenshot

📣 To Reviewers

leeeha left a comment • edited Loading

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

sxunea commented Jan 10, 2024 •

edited

Loading

leeeha left a comment •

edited

Loading