[feat] 온보딩 추가 설명 뷰 구현 #193

HAJIEUN02 · 2024-02-20T09:25:10Z

Related issue 🛠

closed [feat] 온보딩 추가 설명 뷰 구현 #176

Work Description ✏️

TabLayout을 활용한 indicator 구현
- 각 indicator 요소를 클릭했을 시 해당 페이지로 이동할 것
- 스와이프되는 indicator 애니메이션
ViewPager2를 활용한 스와이프로 페이지 넘기기 구현
소셜로그인 화면으로 건너뛰기
다음 페이지로 이동 + 마지막 페이지에서는 소셜로그인 화면으로 이동
안드로이드 기본 이전 버튼 관리
신규회원/로그아웃/회원탈퇴 상태일 때 온보딩으로 연결
AuthActivity, PlanActivity, CustomSnackbar bottom margin 수정

Screenshot 📸

XRecorder_26022024_165333.mp4

Uncompleted Tasks 😅

indicator image 위로 늘어난 거 해결

To Reviewers 📢

헤헤..

… 값 수정

jihyunniiii

고생핑 ~

jihyunniiii · 2024-02-20T11:08:04Z

app/src/main/AndroidManifest.xml

+        <activity
+            android:name=".presentation.ui.onboarding.OnboardingExplanationActivity"
+            android:exported="false" />


android:screenOrientation="portrait"
tools:ignore="LockedOrientationActivity"

이거 추가해주고 위치 아래로 바꿔줘요 ~

jihyunniiii · 2024-02-21T13:17:18Z

app/src/main/AndroidManifest.xml

+        <activity
+            android:name=".presentation.ui.onboarding.OnboardingExplanationActivity"
+            android:exported="false" />


Suggested change

<activity

android:name=".presentation.ui.onboarding.OnboardingExplanationActivity"

android:exported="false" />

<activity

android:name=".presentation.ui.onboarding.OnboardingExplanationActivity"

android:exported="false"

android:screenOrientation="portrait"

tools:ignore="LockedOrientationActivity" />

이렇게 바꿔주시구 OnBoardingActivity 아래로 위치 바꿔주세용

jihyunniiii · 2024-02-21T13:17:40Z

app/src/main/java/org/sopt/pingle/presentation/type/OnboardingExplanationType.kt

+import org.sopt.pingle.R
+
+enum class OnboardingExplanationType(@StringRes val description: Int, @DrawableRes val image: Int) {
+    // For the FIRST page, check layout > item_onboarding_expansion_tile.xml


영어 잘 하시네염 ㅋ

app/src/main/java/org/sopt/pingle/presentation/ui/auth/AuthActivity.kt

jihyunniiii · 2024-02-21T13:24:10Z

app/src/main/java/org/sopt/pingle/presentation/ui/onboarding/OnboardingExplanationActivity.kt

온보딩 내에서도 onboarding과 onboardingExplanation으로 폴더링 나눠주면 좋을 것 같네용
글고 온보딩 네이밍 onboarding으로 통일시키는 거 저는 찬성이요 !

jihyunniiii · 2024-02-21T14:18:11Z

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

+            <com.google.android.material.tabs.TabLayout
+                android:id="@+id/tl_onboarding_indicator"
+                android:layout_width="wrap_content"
+                android:backgroundTint="@color/g_11"


이렇게 안 하고 백그라운드 @null 로 설정하면 됨니다

jihyunniiii · 2024-02-21T14:26:52Z

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

+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:tabBackground="@drawable/selector_indicator_onboarding"


지금 배경에 지정한 게 drawable이자나요 근데 이걸 tabBackground에 지정하면 그 탭에 크기에 맞춰 꽉 차게 아이콘이 설정되는 것 같아요 (생각해보면 background니까 당연함)
그래서 svg로 적용하는 게 아니라 shape 만들어서 하면 (크기 지정 필수) 뭔가 잘 될 것 같아요 ㅋ.ㅋ
한 번 시도해보시겠서요? (안 될 수도? ㅋㅋ)

아니면 tabLayout 자체에 고정 height를 줘보세염 !

shape으로 만들어서 해결했습니다!!!!!!!!!!!!!!!!!!!!!!!!!!ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ

jihyunniiii · 2024-02-21T14:27:12Z

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

+        <TextView
+            android:id="@+id/tv_onboarding_explanation_skip"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="@dimen/spacing34"
+            android:layout_marginEnd="@dimen/spacing26"
+            android:text="@string/on_boarding_explanation_skip_button"
+            android:textAppearance="@style/TextAppearance.Pingle.Body.Med.14"
+            android:textColor="@color/white"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />


터치영역 잡아달라고 해야할 것 같네욤 지금 잘 눌리나요?

넹 꽤 잘 눌리는데 함 물어볼까나요?

터치영역 답변 온걸로 수정했서용

jihyunniiii · 2024-02-21T14:28:21Z

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

+            android:id="@+id/tv_onboarding_explanation_description"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="40dp"


아 저기 이미지 기준 마진을 맞췄네욥 프레임 기준으로 해야되는데ㅜㅜ 감사합니당

jihyunniiii · 2024-02-21T14:29:02Z

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

+            android:id="@+id/tv_onboarding_explanation_title"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="@dimen/spacing24"


4 아닌갑쇼?

마자요... 수정했슴미다 위와 같은 이유로..

Doreminwoo

고생하셨어요~!~

Doreminwoo · 2024-02-24T17:24:36Z

app/src/main/java/org/sopt/pingle/presentation/ui/auth/AuthActivity.kt

    companion object {
        const val TAG = "AuthActivity"
-        const val KAKAO_LOGIN_LADING = "Kakao Login Lading..."
+        const val KAKAO_LOGIN_LOADING = "Kakao Login Loading..."


감삼핑 ㅋㅎㅋㅋ

Doreminwoo · 2024-02-24T17:27:26Z

app/src/main/java/org/sopt/pingle/presentation/ui/main/more/MoreFragment.kt

@@ -87,7 +87,7 @@ class MoreFragment : BindingFragment<FragmentMoreBinding>(R.layout.fragment_more
            when (withDrawState) {
                is UiState.Success -> {
                    kakaoAuthService.withdrawKakao()
-                    moveToSign()
+                    moveToOnboardingExplanation()


훨씬 직관적이네요

Suggested change

moveToOnboardingExplanation()

navigateToOnboardingExplanation()

다른부분들에서 네이밍을 move 대신 navigate로 하니깐 요렇게 하는게 어떨까요?

넹 다 navigate로 통일했습니다 ~!

app/src/main/java/org/sopt/pingle/presentation/ui/onboarding/OnboardingExplanationActivity.kt

HAJIEUN02

코리 감사합니다! 반영해쑵니다

app/src/main/java/org/sopt/pingle/presentation/ui/auth/AuthActivity.kt

HAJIEUN02 · 2024-02-25T07:16:31Z

app/src/main/java/org/sopt/pingle/presentation/ui/main/more/MoreFragment.kt

@@ -87,7 +87,7 @@ class MoreFragment : BindingFragment<FragmentMoreBinding>(R.layout.fragment_more
            when (withDrawState) {
                is UiState.Success -> {
                    kakaoAuthService.withdrawKakao()
-                    moveToSign()
+                    moveToOnboardingExplanation()


넹 다 navigate로 통일했습니다 ~!

app/src/main/java/org/sopt/pingle/presentation/ui/onboarding/OnboardingExplanationActivity.kt

HAJIEUN02 · 2024-02-26T04:25:00Z

app/src/main/java/org/sopt/pingle/presentation/ui/onboarding/OnboardingExplanationAdapter.kt

+        }
+    }
+
+    override fun getItemCount(): Int = ONBOARDING_SIZE


이유는 모르겠는데 이걸 안 쓰면 리사이클러뷰 아이템들이 뷰에 안 끼워지더라구요ㅜ

HAJIEUN02 · 2024-02-26T05:12:34Z

app/src/main/java/org/sopt/pingle/presentation/ui/onboarding/OnboardingExplanationActivity.kt

+    private fun navigateToAuth() {
+        Intent(this, AuthActivity::class.java).apply {
+            startActivity(this)
+        }
+    }
+


돌아와야 해서 flag 없이 보냈고 뒤로가기 누르면 그냥 finish 돼서 보고 있던 온보딩 페이지로 돌아오도록 했숩니당!

HAJIEUN02 · 2024-02-26T05:45:28Z

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

+        <TextView
+            android:id="@+id/tv_onboarding_explanation_skip"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="@dimen/spacing34"
+            android:layout_marginEnd="@dimen/spacing26"
+            android:text="@string/on_boarding_explanation_skip_button"
+            android:textAppearance="@style/TextAppearance.Pingle.Body.Med.14"
+            android:textColor="@color/white"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />


넹 꽤 잘 눌리는데 함 물어볼까나요?

HAJIEUN02 · 2024-02-26T06:04:28Z

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

+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/layout_onboarding"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginHorizontal="@dimen/spacing16"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent">


영역 잡아서 indicator랑 위에 리사이클러뷰 뜰 텍스트 사이 마진 잡으려고 한번 묶었습니다!

HAJIEUN02 · 2024-02-26T07:40:19Z

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

+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                app:tabBackground="@drawable/selector_indicator_onboarding"


shape으로 만들어서 해결했습니다!!!!!!!!!!!!!!!!!!!!!!!!!!ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ

HAJIEUN02 · 2024-02-26T07:46:20Z

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

+            android:id="@+id/tv_onboarding_explanation_description"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="40dp"


아 저기 이미지 기준 마진을 맞췄네욥 프레임 기준으로 해야되는데ㅜㅜ 감사합니당

HAJIEUN02 · 2024-02-26T07:46:34Z

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

+            android:id="@+id/tv_onboarding_explanation_title"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="@dimen/spacing24"


마자요... 수정했슴미다 위와 같은 이유로..

jihyunniiii

쏘굿도리 ~

jihyunniiii · 2024-02-26T13:23:44Z

...opt/pingle/presentation/ui/onboarding/onboardingexplanation/OnboardingExplanationActivity.kt

+        super.onDestroy()
+        binding.vpOnboardingExplanation.adapter = null


이거 안정성을 위해 순서 바꿔주시는 게 좋을 것 같습니다 ~

jihyunniiii · 2024-02-26T13:24:09Z

...opt/pingle/presentation/ui/onboarding/onboardingexplanation/OnboardingExplanationActivity.kt

+    }
+
+    private fun initAdapter() {
+        runCatching {


쏘 굿도리 ~

jihyunniiii · 2024-02-26T13:26:25Z

...sopt/pingle/presentation/ui/onboarding/onboardingexplanation/OnboardingExplanationAdapter.kt

+            onContentsTheSame = { old, new -> old == new },
+            onItemsTheSame = { old, new -> old == new }


onContentsTheSame와 onItemsTheSame의 차이는 무엇일까요? 차이점을 바탕으로 고쳐주시면 좋을 것 같네요 ~

onItemsTheSame은 Referential equality를 갖는지 판정, onContentsTheSame은 두 객체의 아이템이 Structural equality를 갖는지 판정하는 역할입니다! 구조적 동등성은 equals()를 확인하는 거구 참조적 동등성은 old Item과 new Item이 동일한 객체를 가리키고 있는지 확인하는 거라구 하네용.

같은 객체인지도 확인해주고 같은 내용인지도 확인해줌으로써 확실하게 old item과 new item이 같은지 확인해주는 거군용

jihyunniiii · 2024-02-26T13:33:53Z

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

+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/layout_onboarding"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginHorizontal="@dimen/spacing16"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent">


움 이해가 잘 안 가는데,, 버튼 기준으로 인디케이터 배치하고 건너뛰기 텍스트 배치한 것과 인디케이터 사이 간격 만큼 ViewPager 배치하면 될 것 같은데 아닌가요???

jihyunniiii · 2024-02-26T13:34:24Z

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

+    <data>
+
+        <variable
+            name="page"


네이밍을 그대로 OnboardingExplanationType으로 가져가는 게 직관적일 것 같다는 생각입니다

jihyunniiii · 2024-03-01T12:27:06Z

쏘굿

# Conflicts: # app/src/main/java/org/sopt/pingle/presentation/ui/main/more/MoreFragment.kt

HAJIEUN02 added 11 commits February 15, 2024 22:26

[add] #176 온보딩 추가설명 뷰 : 이미지 3배수 추가

1dbcdf5

[add] #176 온보딩 추가설명 뷰 : String 추가

da5df0e

[add] #176 온보딩 추가설명 뷰 : indicator 이미지와 selector 추가

491df9d

[feat] #176 온보딩 추가설명 뷰 : UI 구현 및 타입 생성

cbd210a

[feat] #176 온보딩 추가설명 뷰 : 멀티뷰타입으로 구현

d5683b5

Merge branch 'develop' into feat-onboarding-explanation

56e024e

[chore] #176 온보딩 추가설명 뷰 : indicator background 설정 오류 해결

0939a29

[chore] #176 온보딩 추가설명 뷰 : item 영역 마진값 조정

2e82fc5

[chore] #176 온보딩 추가설명 뷰 : 어댑터 position 및 온보딩 뷰에 맞는 size 설정

12c1d2d

[chore] #176 온보딩 추가설명 뷰 : PINGLE SpannableString 설정

09cc6d4

[feat] #176 온보딩 추가설명 뷰 : skip/다음 버튼과 AuthActivity 연결

8625a87

HAJIEUN02 added ✨ feat ✨ 🐹 지은 🐹 labels Feb 20, 2024

HAJIEUN02 self-assigned this Feb 20, 2024

HAJIEUN02 requested a review from a team as a code owner February 20, 2024 09:25

HAJIEUN02 added this to the 3차 스프린트 뷰 작업 milestone Feb 20, 2024

HAJIEUN02 added 9 commits February 21, 2024 17:33

[feat] #176 SplashActivity, AuthActivity와 온보딩 추가설명 뷰 연결

d7eff58

[feat] #176 온보딩 추가설명 뷰 : 안드로이드 기본 이전 버튼 관리

2c43962

[chore] #176 ktlint 적용

32728ac

[chore] #176 온보딩 추가설명 뷰 : enum class에 FIRST page에 대한 주석 추가

ea476ff

[feat] #176 온보딩 추가설명 뷰 : 로그아웃/회원탈퇴/신규회원인 경우만 온보딩 실행

6b23996

[feat] #176 온보딩 추가설명 뷰 : 로그아웃/회원탈퇴 시 해당 뷰로 이동하도록 연결

6fbb451

[chore] #176 AuthActivity, PlanActivity, CustomSnackbar bottom margin…

5c6ec73

… 값 수정

[chore] #176 온보딩 추가설명 뷰 : viewType 예외처리

c5fc685

[chore] #176 코드리뷰 반영

b0f2b8f

jihyunniiii reviewed Feb 21, 2024

View reviewed changes

Doreminwoo reviewed Feb 24, 2024

View reviewed changes

HAJIEUN02 added 3 commits February 25, 2024 15:27

Merge branch 'develop' into feat-onboarding-explanation

79f842c

Merge branch 'develop' into feat-onboarding-explanation

02db9b2

[mod] #193 온보딩 추가설명 뷰 : indicator 사이즈 오류 해결

2840b40

HAJIEUN02 commented Feb 26, 2024

View reviewed changes

HAJIEUN02 added 2 commits February 26, 2024 16:55

[chore] #193 패키지 이동 및 파일명 수정

47d1915

[chore] #193 코드리뷰 반영

54e83a6

jihyunniiii reviewed Feb 26, 2024

View reviewed changes

HAJIEUN02 added 2 commits March 1, 2024 15:35

Merge branch 'develop' into feat-onboarding-explanation

68dde8b

[chore] #193 온보딩 추가설명 뷰 : 코드리뷰 반영

a16fa11

Doreminwoo approved these changes Mar 1, 2024

View reviewed changes

HAJIEUN02 added 2 commits March 1, 2024 21:56

Merge branch 'develop' into feat-onboarding-explanation

b3a2e9d

# Conflicts: # app/src/main/java/org/sopt/pingle/presentation/ui/main/more/MoreFragment.kt

[chore] #193 온보딩 추가설명 뷰 : 충돌 해결 및 ktlintFormat 적용

53a515d

HAJIEUN02 merged commit 5be293b into develop Mar 1, 2024
1 check passed

jihyunniiii deleted the feat-onboarding-explanation branch March 3, 2024 00:36

	moveToOnboardingExplanation()
	navigateToOnboardingExplanation()

		super.onDestroy()
		binding.vpOnboardingExplanation.adapter = null

		onContentsTheSame = { old, new -> old == new },
		onItemsTheSame = { old, new -> old == new }

[feat] 온보딩 추가 설명 뷰 구현 #193

[feat] 온보딩 추가 설명 뷰 구현 #193

Conversation

HAJIEUN02 commented Feb 20, 2024 • edited Loading

Related issue 🛠

Work Description ✏️

Screenshot 📸

Uncompleted Tasks 😅

To Reviewers 📢

jihyunniiii 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

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

Doreminwoo 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

HAJIEUN02 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

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

jihyunniiii 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jihyunniiii commented Mar 1, 2024

HAJIEUN02 commented Feb 20, 2024 •

edited

Loading