🔀 :: (#910) 이미지 정책 강화로 인한 이미지 픽커 구현

uson1004 · web-flow · commit 826b272894c7 · 2026-04-28T19:46:26.000+09:00
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
@@ -11,8 +11,6 @@
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-permission android:name="android.permission.VIBRATE" />
     <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
-    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
-    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
 
     <application
         android:name=".android.app.DmsApplication"
diff --git a/app/src/main/kotlin/team/aliens/dms/android/app/ui/DmsApp.kt b/app/src/main/kotlin/team/aliens/dms/android/app/ui/DmsApp.kt
@@ -234,12 +234,15 @@ fun DmsApp(
                                 onNavigateSetting = {
                                     backStack.add(SettingScreenNav)
                                 },
+                                onNavigateNotification = {
+                                    backStack.add(NotificationScreenNav)
+                                },
+                                onNavigateSelectProfile = {
+                                    backStack.add(SelectProfileScreenNav)
+                                },
                                 onShowSnackBar = { snackBarType, message ->
                                     appState.showSnackBar(snackBarType, message)
                                 },
-                                onNavigateNotification = {
-                                    backStack.add(NotificationScreenNav)
-                                }
                             )
                         }
                         entry<MealScreenNav> {
diff --git a/feature/build.gradle.kts b/feature/build.gradle.kts
@@ -66,6 +66,7 @@ dependencies {
 
     implementation(libs.androidx.core)
     implementation(libs.androidx.appcompat)
+    implementation(libs.androidx.activity.compose)
 
     implementation(libs.androidx.compose)
     implementation(libs.androidx.compose.util)
diff --git a/feature/src/main/kotlin/team/aliens/dms/android/feature/main/mypage/navigation/MyPageRoute.kt b/feature/src/main/kotlin/team/aliens/dms/android/feature/main/mypage/navigation/MyPageRoute.kt
@@ -10,12 +10,14 @@ fun MyPageRoute(
     onNavigatePointHistory: (PointType) -> Unit,
     onNavigateSetting: () -> Unit,
     onNavigateNotification: () -> Unit,
+    onNavigateSelectProfile: () -> Unit,
     onShowSnackBar: (DmsSnackBarType, String) -> Unit,
 ) {
     MyPage(
         onNavigatePointHistory = onNavigatePointHistory,
         onNavigateSetting = onNavigateSetting,
         onNavigateNotification = onNavigateNotification,
+        onNavigateSelectProfile = onNavigateSelectProfile,
         onShowSnackBar = onShowSnackBar,
     )
 }
diff --git a/feature/src/main/kotlin/team/aliens/dms/android/feature/main/mypage/ui/MyPageScreen.kt b/feature/src/main/kotlin/team/aliens/dms/android/feature/main/mypage/ui/MyPageScreen.kt
@@ -38,6 +38,7 @@ internal fun MyPage(
     onNavigatePointHistory: (PointType) -> Unit,
     onNavigateSetting: () -> Unit,
     onNavigateNotification: () -> Unit,
+    onNavigateSelectProfile: () -> Unit,
     onShowSnackBar: (DmsSnackBarType, String) -> Unit,
 ) {
     val viewModel: MyPageViewModel = hiltViewModel()
@@ -58,6 +59,7 @@ internal fun MyPage(
         state = state,
         onNavigatePointHistory = onNavigatePointHistory,
         onNavigateNotification = onNavigateNotification,
+        onNavigateSelectProfile = onNavigateSelectProfile,
         onSettingClick = onNavigateSetting,
     )
 }
@@ -67,6 +69,7 @@ private fun MyPageScreen(
     state: MyPageState,
     onNavigatePointHistory: (PointType) -> Unit,
     onNavigateNotification: () -> Unit,
+    onNavigateSelectProfile: () -> Unit,
     onSettingClick: () -> Unit,
 ) {
     Column(
@@ -103,6 +106,7 @@ private fun MyPageScreen(
                 schoolName = state.myPage.schoolName,
                 genderType = state.myPage.sex,
                 profileImageUrl = state.myPage.profileImageUrl,
+                onProfileClick = onNavigateSelectProfile,
             )
             PhraseContent(
                 phrase = state.myPage.phrase,
diff --git a/feature/src/main/kotlin/team/aliens/dms/android/feature/main/mypage/ui/component/ProfileContent.kt b/feature/src/main/kotlin/team/aliens/dms/android/feature/main/mypage/ui/component/ProfileContent.kt
@@ -1,6 +1,7 @@
 package team.aliens.dms.android.feature.main.mypage.ui.component
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -35,6 +36,7 @@ internal fun ProfileContent(
     schoolName: String,
     genderType: Sex,
     profileImageUrl: String?,
+    onProfileClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     Row(
@@ -47,7 +49,8 @@ internal fun ProfileContent(
         AsyncImage(
             modifier = Modifier
                 .size(60.dp)
-                .clip(CircleShape),
+                .clip(CircleShape)
+                .clickable(onClick = onProfileClick),
             model = profileImageUrl ?: DmsIcon.ProfileDefault,
             contentDescription = null,
             contentScale = ContentScale.Crop,
diff --git a/feature/src/main/kotlin/team/aliens/dms/android/feature/profile/ui/SelectProfileScreen.kt b/feature/src/main/kotlin/team/aliens/dms/android/feature/profile/ui/SelectProfileScreen.kt
@@ -1,47 +1,39 @@
 package team.aliens.dms.android.feature.profile.ui
 
-import android.Manifest
 import android.net.Uri
-import android.os.Build
+import androidx.activity.compose.rememberLauncherForActivityResult
+import androidx.activity.result.PickVisualMediaRequest
+import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.systemBarsPadding
-import androidx.compose.foundation.lazy.grid.GridCells
-import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
-import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.CheckCircle
-import androidx.compose.material.icons.outlined.Circle
+import androidx.compose.material.icons.filled.AddAPhoto
 import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
 import androidx.core.net.toUri
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import coil.compose.AsyncImage
-import com.google.accompanist.permissions.ExperimentalPermissionsApi
-import com.google.accompanist.permissions.isGranted
-import com.google.accompanist.permissions.rememberPermissionState
-import kotlinx.collections.immutable.ImmutableList
-import kotlinx.collections.immutable.toPersistentList
 import team.aliens.dms.android.core.designsystem.DmsTheme
+import team.aliens.dms.android.core.designsystem.labelM
 import team.aliens.dms.android.core.designsystem.appbar.DmsTopAppBar
 import team.aliens.dms.android.core.designsystem.button.ButtonColor
 import team.aliens.dms.android.core.designsystem.button.ButtonType
@@ -50,27 +42,33 @@ import team.aliens.dms.android.core.designsystem.snackbar.DmsSnackBarType
 import team.aliens.dms.android.feature.profile.viewmodel.SelectProfileSideEffect
 import team.aliens.dms.android.feature.profile.viewmodel.SelectProfileViewModel
 
-@OptIn(ExperimentalPermissionsApi::class)
 @Composable
 internal fun SelectProfile(
     onBack: () -> Unit,
     onNavigateAdjustProfile: (String) -> Unit,
     onShowSnackBar: (DmsSnackBarType, String) -> Unit,
 ) {
     val viewModel: SelectProfileViewModel = hiltViewModel()
-    val permission = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
-        Manifest.permission.READ_MEDIA_IMAGES
-    } else {
-        Manifest.permission.READ_EXTERNAL_STORAGE
-    }
-    val request = rememberPermissionState(permission = permission)
-
     val state by viewModel.uiState.collectAsStateWithLifecycle()
     val updatedOnNavigateAdjustProfile by rememberUpdatedState(onNavigateAdjustProfile)
     val updatedOnShowSnackBar by rememberUpdatedState(onShowSnackBar)
 
+    val updatedOnBack by rememberUpdatedState(onBack)
+    val photoPickerLauncher = rememberLauncherForActivityResult(
+        contract = ActivityResultContracts.PickVisualMedia(),
+    ) { uri ->
+        if (uri != null) {
+            viewModel.selectImage(uri.toString())
+        } else if (state.selectedUri.isBlank()) {
+            updatedOnBack()
+        }
+    }
+
+    LaunchedEffect(Unit) {
+        photoPickerLauncher.launch(PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly))
+    }
+
     LaunchedEffect(Unit) {
-        request.launchPermissionRequest()
         viewModel.sideEffect.collect {
             when (it) {
                 is SelectProfileSideEffect.SuccessProfileImage -> updatedOnNavigateAdjustProfile(it.profileImageUrl)
@@ -81,107 +79,91 @@ internal fun SelectProfile(
         }
     }
 
-    LaunchedEffect(request.status.isGranted) {
-        if (request.status.isGranted) {
-            viewModel.loadImagesIfNeeded()
-        }
-    }
-
     SelectProfileScreen(
         onBack = onBack,
         uploadProfileImage = viewModel::uploadProfileImage,
-        uriList = state.uriList.toPersistentList(),
         selectedUri = state.selectedUri,
         enabled = state.enabled,
-        onSelectImage = viewModel::selectImage,
+        onPickImage = {
+            photoPickerLauncher.launch(PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly))
+        },
     )
 }
 
 @Composable
 private fun SelectProfileScreen(
     onBack: () -> Unit,
     uploadProfileImage: (Uri?) -> Unit,
-    uriList: ImmutableList<String>,
     selectedUri: String,
     enabled: Boolean,
-    onSelectImage: (String) -> Unit,
+    onPickImage: () -> Unit,
 ) {
     Column(
         modifier = Modifier
             .fillMaxSize()
             .systemBarsPadding(),
+        horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-        DmsTopAppBar(onBackClick = onBack, actions = {
-            DmsButton(
-                onClick = { uploadProfileImage(selectedUri.toUri()) },
-                text = "선택",
-                buttonType = ButtonType.Text,
-                buttonColor = ButtonColor.Primary,
-                enabled = enabled,
-            )
-        },)
-        LazyVerticalGrid(
-            columns = GridCells.Fixed(3),
-            horizontalArrangement = Arrangement.spacedBy(4.dp),
-            verticalArrangement = Arrangement.spacedBy(4.dp),
-            contentPadding = PaddingValues(4.dp),
-            modifier = Modifier.fillMaxSize(),
-        ) {
-            items(uriList) { uri ->
-                val isSelected = selectedUri.isNotEmpty() && selectedUri == uri
-                ImageItem(
-                    imageUri = uri,
-                    isSelected = isSelected,
-                    onClick = { onSelectImage(uri) },
+        DmsTopAppBar(
+            onBackClick = onBack,
+            actions = {
+                DmsButton(
+                    onClick = { uploadProfileImage(selectedUri.toUri()) },
+                    text = "선택",
+                    buttonType = ButtonType.Text,
+                    buttonColor = ButtonColor.Primary,
+                    enabled = enabled,
                 )
-            }
-        }
+            },
+        )
+        Spacer(modifier = Modifier.weight(1f))
+        ProfileImagePicker(
+            selectedUri = selectedUri,
+            onPickImage = onPickImage,
+        )
+        Spacer(modifier = Modifier.weight(1f))
     }
 }
 
 @Composable
-fun ImageItem(
-    imageUri: String,
-    isSelected: Boolean,
-    onClick: () -> Unit
+private fun ProfileImagePicker(
+    selectedUri: String,
+    onPickImage: () -> Unit,
 ) {
-    Box(
-        modifier = Modifier
-            .aspectRatio(1f)
-            .clickable(onClick = onClick)
+    val hasImage = selectedUri.isNotEmpty()
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-        AsyncImage(
-            model = imageUri,
-            contentDescription = null,
-            contentScale = ContentScale.Crop,
-            modifier = Modifier.matchParentSize()
-        )
-        if (isSelected) {
-            Box(
-                modifier = Modifier
-                    .matchParentSize()
-                    .background(Color.Black.copy(alpha = 0.4f)) // 반투명 검은색
-            )
-        }
-        Icon(
-            imageVector = if (isSelected) Icons.Filled.CheckCircle else Icons.Outlined.Circle,
-            contentDescription = if (isSelected) "선택됨" else "선택 안됨",
-            tint = if (isSelected) DmsTheme.colorScheme.onPrimary else Color.White, // 선택되면 강조색, 아니면 흰색
+        Box(
             modifier = Modifier
-                .align(Alignment.TopEnd)
-                .padding(8.dp)
-                .size(24.dp)
-                .background(
-                    color = if (!isSelected) Color.Black.copy(alpha = 0.2f) else Color.Transparent,
-                    shape = CircleShape
+                .size(160.dp)
+                .clip(CircleShape)
+                .background(DmsTheme.colorScheme.surfaceVariant)
+                .border(2.dp, DmsTheme.colorScheme.primary, CircleShape)
+                .clickable(onClick = onPickImage),
+            contentAlignment = Alignment.Center,
+        ) {
+            if (hasImage) {
+                AsyncImage(
+                    model = selectedUri,
+                    contentDescription = null,
+                    contentScale = ContentScale.Crop,
+                    modifier = Modifier.matchParentSize(),
                 )
-        )
-        if (isSelected) {
-            Box(
-                modifier = Modifier
-                    .matchParentSize()
-                    .border(3.dp, DmsTheme.colorScheme.onPrimary) // 굵은 테두리
-            )
+            } else {
+                Icon(
+                    imageVector = Icons.Filled.AddAPhoto,
+                    contentDescription = "사진 선택",
+                    tint = DmsTheme.colorScheme.primary,
+                    modifier = Modifier.size(48.dp),
+                )
+            }
         }
+        Spacer(modifier = Modifier.height(16.dp))
+        Text(
+            text = "탭하여 사진 선택",
+            style = DmsTheme.typography.labelM,
+            color = DmsTheme.colorScheme.inverseOnSurface,
+        )
     }
 }
diff --git a/feature/src/main/kotlin/team/aliens/dms/android/feature/profile/viewmodel/SelectProfileViewModel.kt b/feature/src/main/kotlin/team/aliens/dms/android/feature/profile/viewmodel/SelectProfileViewModel.kt
