[refactor] #188 ProfileImage 공통 컴포넌트 정의 및 교체

Author: Ojongseok

feature/mypage/impl/src/main/java/com/neki/android/feature/mypage/impl/profile/EditProfileScreen.kt

@@ -35,7 +35,7 @@ import com.neki.android.feature.mypage.impl.main.MyPageIntent
 import com.neki.android.feature.mypage.impl.main.MyPageState
 import com.neki.android.feature.mypage.impl.main.MyPageViewModel
 import com.neki.android.feature.mypage.impl.profile.model.EditProfileImageType
-import com.neki.android.feature.mypage.impl.profile.component.EditProfileImage
+import com.neki.android.feature.mypage.impl.profile.component.ProfileImage
 import com.neki.android.feature.mypage.impl.profile.component.ProfileEditTopBar
 import com.neki.android.feature.mypage.impl.profile.component.SelectProfileImageDialog
 import com.neki.android.feature.mypage.impl.profile.component.ProfileImageOption
@@ -76,7 +76,7 @@ fun EditProfileScreen(
     onIntent: (MyPageIntent) -> Unit = {},
 ) {
     var displayProfileImage by remember {
-        mutableStateOf<Any?>(uiState.userInfo.profileImageUrl)
+        mutableStateOf<Any>(uiState.userInfo.profileImageUrl)
     }
 
     LaunchedEffect(uiState.profileImageState) {
@@ -108,7 +108,7 @@ fun EditProfileScreen(
                 onIntent(MyPageIntent.ClickEditComplete(nickname = textFieldState.text.toString()))
             },
         )
-        EditProfileImage(
+        ProfileImage(
             profileImage = displayProfileImage,
             onClickCameraIcon = { onIntent(MyPageIntent.ClickCameraIcon) },
         )

feature/mypage/impl/src/main/java/com/neki/android/feature/mypage/impl/profile/ProfileSettingScreen.kt

@@ -21,8 +21,8 @@ import com.neki.android.feature.mypage.impl.main.MyPageEffect
 import com.neki.android.feature.mypage.impl.main.MyPageIntent
 import com.neki.android.feature.mypage.impl.main.MyPageState
 import com.neki.android.feature.mypage.impl.main.MyPageViewModel
+import com.neki.android.feature.mypage.impl.profile.component.ProfileImage
 import com.neki.android.feature.mypage.impl.profile.component.ProfileSettingTopBar
-import com.neki.android.feature.mypage.impl.profile.component.SettingProfileImage
 import timber.log.Timber
 
 @Composable
@@ -72,11 +72,11 @@ fun ProfileSettingScreen(
         ProfileSettingTopBar(
             onBack = { onIntent(MyPageIntent.ClickBackIcon) },
         )
-        SettingProfileImage(
+        ProfileImage(
+            profileImage = uiState.userInfo.profileImageUrl.ifEmpty { null },
             nickname = uiState.userInfo.nickname,
-            profileImage = uiState.userInfo.profileImageUrl,
-            onClickEdit = { onIntent(MyPageIntent.ClickEditIcon) },
             onClickCameraIcon = { onIntent(MyPageIntent.ClickEditIcon) },
+            onClickEdit = { onIntent(MyPageIntent.ClickEditIcon) },
         )
         SectionTitleText(text = "서비스 정보 및 지원")
         SectionItem(

feature/mypage/impl/src/main/java/com/neki/android/feature/mypage/impl/profile/component/EditProfileImage.kt

@@ -17,9 +17,8 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.unit.dp
 import coil3.compose.AsyncImage
 import com.neki.android.core.designsystem.ComponentPreview
@@ -29,23 +28,26 @@ import com.neki.android.core.designsystem.ui.theme.NekiTheme
 import com.neki.android.core.ui.compose.VerticalSpacer
 
 @Composable
-internal fun SettingProfileImage(
-    nickname: String,
-    profileImage: String = "",
-    imageSize: Dp = 142.dp,
-    onClickEdit: () -> Unit,
+internal fun ProfileImage(
+    profileImage: Any? = null,
+    nickname: String = "",
     onClickCameraIcon: () -> Unit,
+    onClickEdit: () -> Unit = {},
 ) {
     Column(
-        modifier = Modifier.padding(top = 20.dp, bottom = 27.dp),
+        modifier = Modifier
+            .padding(
+                top = 20.dp,
+                bottom = if (nickname.isNotEmpty()) 34.dp else 28.dp
+            ),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         Box {
             AsyncImage(
                 modifier = Modifier
-                    .size(imageSize)
+                    .size(142.dp)
                     .clip(CircleShape),
-                model = profileImage.ifEmpty { R.drawable.image_profile_empty },
+                model = profileImage ?: R.drawable.image_profile_empty,
                 contentDescription = null,
                 contentScale = ContentScale.Crop,
                 placeholder = painterResource(R.drawable.image_profile_empty),
@@ -69,33 +71,45 @@ internal fun SettingProfileImage(
                 )
             }
         }
-        VerticalSpacer(16.dp)
-        Row(
-            horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally),
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            Text(
-                text = nickname,
-                style = NekiTheme.typography.title20Medium,
-                color = NekiTheme.colorScheme.gray900,
-            )
-            Icon(
-                modifier = Modifier.noRippleClickableSingle(onClick = onClickEdit),
-                imageVector = ImageVector.vectorResource(R.drawable.icon_edit),
-                contentDescription = null,
-                tint = Color.Unspecified,
-            )
+        if (nickname.isNotEmpty()) {
+            VerticalSpacer(16.dp)
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Text(
+                    text = nickname,
+                    style = NekiTheme.typography.title20Medium,
+                    color = NekiTheme.colorScheme.gray900,
+                )
+                Icon(
+                    modifier = Modifier.noRippleClickableSingle(onClick = onClickEdit),
+                    imageVector = ImageVector.vectorResource(R.drawable.icon_edit),
+                    contentDescription = null,
+                    tint = Color.Unspecified,
+                )
+            }
         }
     }
 }
 
 @ComponentPreview
 @Composable
-private fun SettingProfileImagePreview() {
+private fun ProfileImageWithNicknamePreview() {
     NekiTheme {
-        SettingProfileImage(
+        ProfileImage(
             nickname = "네키네키",
+            onClickCameraIcon = {},
             onClickEdit = {},
+        )
+    }
+}
+
+@ComponentPreview
+@Composable
+private fun ProfileImagePreview() {
+    NekiTheme {
+        ProfileImage(
             onClickCameraIcon = {},
         )
     }