[feature] Google 로그인 기능 구현 #169

yuni-ju · 2025-01-25T09:32:12Z

#️⃣연관된 이슈

resolved: [유저 정보] 소셜 로그인 #163

📝작업 내용 및 코드

회원, 비회원 기능 분리 (비회원도 지도의 픽 정보와 상세 정보를 볼 수 있습니다.)
로그인 버튼이 활성화되는 경우는 다음과 같습니다.
- 비회원이 메인 화면에서 담은 픽 화면 버튼을 누르는 경우 dialog
- 비회원이 픽 상세 정보 화면에서 픽 담기를 누르는 경우 dialog
- 비회원이 프로필 화면에 들어가면 로그인 버튼이 보여짐
- dialog의 메세지는 로그인 시 어떤 기능을 사용할 수 있는지 설명을 바꿀 수 있도록 구현했습니다.
로그인 로직
- 로그인 시 기존에 존재하는 계정은 정보를 불러오고, 존재하지 않는 경우 정보를 firebase에 저장합니다.
- 자동 로그인을 위해 id는 기기에 저장합니다. 앱을 재실행 시 저장된 id로 정보를 불러옵니다.
- 비회원이 앱 사용 중에 로그인 성공 시 상태 업데이트를 위해 픽 정보를 다시 불러오거나 지도 화면으로 이동합니다.
로그아웃 기능 구현
- 로그아웃 시 기기에서 유저 정보를 지우고 구글에 사용자 인증 정보 삭제 요청을 합니다.
프로필 화면에서 사용자의 구글 프로필 이미지를 보여줍니다.
- 프로필 이미지 변경 기능은 구현하지 않았습니다.

실행 화면

1. 비회원 실행

2. 로그인 및 로그아웃

3. 이미 담은 픽화면에서 로그인 하는 경우 담기 정보 업데이트

💬리뷰 요구사항

기존의 랜덤 아이디로 로그인하는 코드를 그대로 두는 것이 나을까요? 아니면 없앨까요? 일단 혹시 몰라서 놔두긴 했습니다.
기기에 로그인 된 구글 계정이 없거나, Google Play없는 기기로는 로그인 불가능합니다! 테스트 시 참고부탁드립니다.
업데이트 해야할 것들 따로 공유드리겠습니다 :)
a. google-services.json 파일 업데이트 필요합니다.
b. local.properties에 GOOGLE_CLIENT_ID 추가가 필요합니다.

참고 사항

추후 회원 탈퇴 기능 구현이 필요합니다.
현재 프로필 이미지 변경 기능이 없습니다.

…e-login

meanjoo

실행을 해보고 싶은데 새 노트북에서 환경을 세팅하고 뭐가 문젠지 에뮬레이터로 실행하니 앱이 스플래시 화면만 계속 보여지다가 네트워크 연결이 원활하지 않습니다. 라는 토스트 메시지를 띄우면서 종료되더라구요,, 윤겸님 브랜치에서만 그런 게 아니라 모든 브랜치에서 이런 현상이 일어나 아마 이 노트북 환경 문제인 것 같습니다 ㅎㅎ 그러나 이유는 잘 모르겠는..
그래서 에뮬레이터가 문젠가 싶어 실기기로도 해보고 싶었는데 제가 지금 케이블이 없어서...... 실행을 해보지 못했습니다 ㅠㅠ
집에 돌아가는 다음 주에 데스크톱에서 실기기로 실행해보거나 케이블이 생기면 노트북에서 실기기로 그때 실행해보고 리뷰할 사항이 더 있다면 하겠습니다😢

아무튼 위의 이유로 코드만 보고 리뷰하는 점 참고해주세요..!!

구글로 로그인되었다면 id가 null이 아니고 로그인되지 않았다면 id가 null이 되는 방식으로 하여 로그인 기능을 null을 활용하여 처리했다고 이해했습니다!
그러다보니 null 처리를 해야하는 곳이 많아진 것 같은데 저였어도 null로 관리했을 것 같아 마땅히 더 좋은 방법은 떠오르지 않네요 ㅎㅎ,,

그리고 기존의 랜덤 아이디로 로그인하는 코드는 만약 구글 로그인이 잘 된다면 없애도 된다고 생각합니다! 지워도 커밋에 이력이 남아있으니 필요하다면 다시 찾아서 넣으면 되지 않을까욥 ㅎㅎ

meanjoo · 2025-01-25T15:59:11Z

app/src/main/java/com/squirtles/musicroad/map/MapScreen.kt

+    if (showSignInDialogDescription != null) {
+        SignInAlertDialog(
+            onDismissRequest = { showSignInDialogDescription = null },
+            onGoogleSignInClick = {
+                GoogleId(context).signIn(
+                    onSuccess = { credential ->
+                        accountViewModel.signIn(credential)
+                        showSignInDialogDescription = null
+                    }
+                )
+            },
+            description = showSignInDialogDescription!!
+        )
+    }


!!의 사용을 피하기 위해 let 구문을 사용하는 것도 나쁘지 않을 것 같습니다!

showSignInDialogDescription?.let { description -> SignInAlertDialog( onDismissRequest = { showSignInDialogDescription = null }, onGoogleSignInClick = { GoogleId(context).signIn( onSuccess = { credential -> accountViewModel.signIn(credential) showSignInDialogDescription = null } ) }, description = description ) }

DetailPickScreen에도 같은 코드가 있던데 혹시 변경하신다면 저기도 함께 하면 될 것 같습니당

저도 이 부분을 고민하다가 showSignInDialogDescription의 null여부에 따라 SignInAlertDialog가 보여짐을 좀 더 명시적으로 나타내고 싶어서 if문으로 구현을 했었습니다! 혹시 제 의도와 무관하게 let구문을 쓰더라도 가독성이 괜찮은 것 같으면 바꾸겠습니다 :)

meanjoo · 2025-01-25T16:11:37Z

domain/src/main/java/com/squirtles/domain/usecase/user/CreateGoogledIdUserUseCase.kt

이건 그냥 네이밍에 대한 궁금증인데 제가 만들었다면 CreateGoogleIdUser로 했을 것 같은데 구글 아이디로 로그인된 유저를 뜻하기 위해 CreateGoogledIdUser인 걸까요..?!

app 모듈의 account 하위에는 GoogleId라는 이름으로 클래스를 만드셨는데 use case와 FirebaseRepository에서는 GoogledId라는 이름을 사용하셔서 의도된 뜻이 있는 건지 궁금해서 여쭤봅니당!!

헉 오타입니다...! 발견해주셔서 감사합니다

meanjoo · 2025-01-25T16:45:41Z

app/src/main/java/com/squirtles/musicroad/picklist/PickListScreen.kt

-                        selectAllPicks = { pickListViewModel.selectAllPicks() },
-                        deselectAllPicks = { pickListViewModel.deselectAllPicks() },
-                    )
+                    if (pickListViewModel.getUserId() == userId) {


이 if문은 현재 유저의 픽 보관함, 등록한 픽 화면일 때만 편집 모드 버튼을 보여주기 위한 거죵??
제가 만들 때 빠뜨렸었나 보네요 ㅎㅎ;; 감사합니다

맞습니다 ㅎㅎ 저도 리뷰할 때 발견 못했었는걸요 ! 😂

meanjoo · 2025-01-25T17:19:19Z

app/src/main/java/com/squirtles/musicroad/profile/ProfileViewModel.kt

-            if (userId == currentUser.userId) {
-                _profileUser.emit(currentUser)
+            if (userId == currentUser?.userId) {
+                _profileUser.emit(currentUser ?: DEFAULT_USER)
            } else {
                val otherProfileUsr = fetchUserByIdUseCase(userId).getOrDefault(DEFAULT_USER)


otherProfileUser에 e가 빠진 것 같아요!

miller198

고생하셨어요!! 👏👏👏
랜덤 아이디로 로그인하는 코드는 삭제하는게 좋겠네요

miller198 · 2025-01-26T11:18:46Z

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

+    <string name="sign_in_dialog_title_favorite_picks">담은 픽을 확인하기 위해\n로그인이 필요합니다</string>
+    <string name="sign_in_dialog_title_add_pick">픽을 등록하기 위해\n로그인이 필요합니다</string>
+    <string name="sign_in_dialog_title_favorite">픽을 담기 위해\n로그인이 필요합니다</string>
+    <string name="sign_in_dialog_dismiss">더 둘러보기</string>


다이얼로그 닫는 버튼 텍스트는 '취소'가 더 직관적이라 생각해요

miller198 · 2025-01-26T12:08:12Z

app/src/main/java/com/squirtles/musicroad/map/MapScreen.kt

@@ -48,6 +55,7 @@ fun MapScreen(
    val playerState by playerServiceViewModel.playerState.collectAsStateWithLifecycle()

    val context = LocalContext.current
+    var showSignInDialogDescription by remember { mutableStateOf<String?>(null) }


보통 show~는 Boolean 값으로 특정 UI 요소를 보일지 말지 결정하는데 쓰이지않나요?
signInDialogDescription 으로 바꾸는게 좋을 것 같습니다
(아님말고입니다 ㅎㅎ)

앗 그렇게 보일 수 있겠네요! string의 null 여부로 보여주는데 boolean 변수를 하나 더 생성하지 않으려고 이 방식을 사용했었습니다.
음.. 아니면 혹시 show변수를 하나 더 생성하고 description은 따로 관리하는 것이 더 좋을까요?

miller198 · 2025-01-26T12:19:13Z

app/src/main/java/com/squirtles/musicroad/pick/DetailPickScreen.kt

+        accountViewModel.signInSuccess
+            .flowWithLifecycle(lifecycleOwner.lifecycle, Lifecycle.State.STARTED)
+            .collect { isSuccess ->
+                if (isSuccess) pickViewModel.fetchPick(pickId)


여기서 fetchPick을 다시 하는건 픽담기 후 로그인 했을때 화면을 다시 설정하기 위함인가요? 안하면 어떻게 되나용

네 맞습니다
비회원 상태일 때 기본으로 픽을 담은 여부가 false 상태입니다.
여기서 fetchPick을 하지 않으면 dialog를 통해 로그인 후, 유저의 픽 담기 여부와 상관 없이 여전히 false 상태가 유지됩니다.

miller198 · 2025-01-26T12:42:26Z

data/src/main/java/com/squirtles/data/datasource/remote/firebase/FirebaseDataSourceImpl.kt

+    override suspend fun createGoogledIdUser(userId: String, userName: String?, userProfileImage: String?): User? {
+        return suspendCancellableCoroutine { continuation ->
+            val documentReference = db.collection("users").document(userId)
+            documentReference.set(FirebaseUser(name = userName, profileImage = userProfileImage))


GoogleIdTokenCredential에서 이름을 가져오는 것 같은데 이때 displayName은 어떤 이름인가요??

id가 구글 아이디로 이메일이고, displayName은 구글 닉네임에 해당됩니다!

miller198 · 2025-01-26T12:45:34Z

domain/src/main/java/com/squirtles/domain/usecase/user/SignOutUseCase.kt

이 유스케이스의 역할은 data store의 유저 ID를 지우는 것인데 이름은 SignOut이라 혼동이 생길 수 있어보여요
역할을 정확히 지칭하는 이름이 좋을 것 같습니다

처음에는 SignOut에 관해 필요한 기능들을 모아두려고 해당 이름을 지었는데, 만들고 보니 clear만 하게 되었네요 ㅎㅎ 말씀하신대로 수정하겠습니다

yuni-ju added 14 commits January 6, 2025 00:40

[design] 구글 로그인 버튼

ce24415

[feature] 회원, 비회원 기능 분리

6228244

Merge remote-tracking branch 'origin/develop' into feature/#163-googl…

65ece56

…e-login

[feature] merge 후 로그인 확인 기능 적용

1ed6aa5

[feature] 로그인 요청 Dialog

4e4d338

[feature] 로그인 안내 메시지 보여주기

f3ea5fa

[fix] 나의 픽만 편집 가능하도록 수정

05e9a1b

[feature] Google 계정으로 사용자 정보 불러오기

6ad1d68

[refactor] GoogleId class 분리

e7ece31

[feature] Google id로 앱에 로그인

85bc0bb

[feature] 로그인 후 상태 업데이트

ac76133

[feature] 로그아웃 기능

d34aa88

[feature] 사용자 프로필 이미지 표시

8932b11

[feature] 로그인 시 계정 존재여부 확인

fe67ec6

yuni-ju added design 화면 디자인 feature 기능 개발 labels Jan 25, 2025

yuni-ju added this to the 유저 정보 milestone Jan 25, 2025

yuni-ju requested review from miller198 and meanjoo January 25, 2025 09:32

yuni-ju self-assigned this Jan 25, 2025

meanjoo reviewed Jan 25, 2025

View reviewed changes

miller198 reviewed Jan 26, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feature] Google 로그인 기능 구현 #169

[feature] Google 로그인 기능 구현 #169

yuni-ju commented Jan 25, 2025 •

edited

Loading

meanjoo left a comment

meanjoo Jan 25, 2025

yuni-ju Jan 26, 2025

meanjoo Jan 25, 2025

yuni-ju Jan 26, 2025

meanjoo Jan 25, 2025

yuni-ju Jan 26, 2025

meanjoo Jan 25, 2025

miller198 left a comment

miller198 Jan 26, 2025

miller198 Jan 26, 2025

yuni-ju Jan 27, 2025

miller198 Jan 26, 2025

yuni-ju Jan 27, 2025

miller198 Jan 26, 2025

yuni-ju Jan 27, 2025

miller198 Jan 26, 2025

yuni-ju Jan 27, 2025

[feature] Google 로그인 기능 구현 #169

Are you sure you want to change the base?

[feature] Google 로그인 기능 구현 #169

Conversation

yuni-ju commented Jan 25, 2025 • edited Loading

#️⃣연관된 이슈

📝작업 내용 및 코드

실행 화면

1. 비회원 실행

2. 로그인 및 로그아웃

3. 이미 담은 픽화면에서 로그인 하는 경우 담기 정보 업데이트

💬리뷰 요구사항

참고 사항

meanjoo 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

miller198 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

yuni-ju commented Jan 25, 2025 •

edited

Loading