[design] 구글 로그인 버튼

boostcampwm-2024 · Jan 5, 2025 · ce24415 · ce24415
1 parent 6fd934e
commit ce24415
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/app/src/main/java/com/squirtles/musicroad/profile/ProfileScreen.kt b/app/src/main/java/com/squirtles/musicroad/profile/ProfileScreen.kt
@@ -4,20 +4,25 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.MusicNote
 import androidx.compose.material.icons.outlined.Archive
 import androidx.compose.material.icons.outlined.Map
 import androidx.compose.material.icons.outlined.Notifications
 import androidx.compose.material.icons.outlined.SwitchAccount
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExtendedFloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -33,6 +38,7 @@ import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -41,6 +47,7 @@ import com.squirtles.musicroad.common.Constants.COLOR_STOPS
 import com.squirtles.musicroad.common.DefaultTopAppBar
 import com.squirtles.musicroad.common.HorizontalSpacer
 import com.squirtles.musicroad.common.VerticalSpacer
+import com.squirtles.musicroad.ui.theme.Black
 import com.squirtles.musicroad.ui.theme.Primary
 import com.squirtles.musicroad.ui.theme.White
 
@@ -94,7 +101,11 @@ fun ProfileScreen(
                     contentScale = ContentScale.Crop
                 )
 
-                VerticalSpacer(40)
+                VerticalSpacer(20)
+
+                GoogleSignInButton({})
+
+                VerticalSpacer(20)
 
                 ProfileMenus(
                     title = stringResource(R.string.user_info_pick_category_title),
@@ -163,3 +174,32 @@ fun ProfileScreen(
         }
     }
 }
+
+@Composable
+private fun GoogleSignInButton(onClick: () -> Unit) {
+    Button(
+        onClick = onClick,
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp)
+            .height(48.dp),
+        shape = RoundedCornerShape(8.dp),
+        colors = ButtonDefaults.buttonColors(containerColor = White)
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Image(
+                painter = painterResource(id = R.drawable.img_google_logo),
+                contentDescription = stringResource(id = R.string.setting_profile_google_icon),
+                modifier = Modifier.size(24.dp)
+            )
+            HorizontalSpacer(8)
+            Text(stringResource(id = R.string.setting_profile_sign_in_google), color = Black)
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun PreviewGoogleSignInButton() {
+    GoogleSignInButton {}
+}
diff --git a/app/src/main/res/drawable/img_google_logo.png b/app/src/main/res/drawable/img_google_logo.png
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -110,4 +110,7 @@
     <string name="setting_profile_confirm_icon_description">변경 사항 적용</string>
     <string name="setting_profile_update_nickname_success">변경 사항이 적용되었습니다.</string>
     <string name="setting_profile_update_nickname_failure">일시적인 오류가 발생했습니다.</string>
+
+    <string name="setting_profile_sign_in_google">Sign in with Google</string>
+    <string name="setting_profile_google_icon">Google Logo</string>
 </resources>