인증사진을 줌하거나 저장하는 로직 추가

gradle/libs.versions.toml

@@ -38,6 +38,8 @@ coroutine_test = "1.7.2"
 bottomsheetdialog = "1.2.1"
 extensions-compose-keyboard-state = "1.4.3"
 lottie = "6.1.0"
+capture = "1.0.3"
+
 
 [libraries]
 core-ktx = { module = "androidx.core:core-ktx", version.ref = "core_ktx" }
@@ -123,6 +125,9 @@ compose-keyboard-state = { module = "tech.thdev:extensions-compose-keyboard-stat
 #lottie
 lottie = { module = "com.airbnb.android:lottie-compose", version.ref = "lottie" }
 
+#capturable
+capture = { module ="dev.shreyaspatil:capturable", version.ref = "capture" }
+
 [plugins]
 android-application = { id = "com.android.application", version.ref = "android_gradle_plugin" }
 android-library = { id = "com.android.library", version.ref = "android_gradle_plugin" }

presenter/build.gradle.kts

@@ -88,6 +88,7 @@ dependencies {
     implementation(libs.bottomsheetdialog)
     implementation(libs.compose.keyboard.state)
     implementation(libs.lottie)
+    implementation(libs.capture)
 }
 
 fun getApiKey(propertyKey: String): String {

presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toast/TwoTooSnackbar.kt

@@ -35,7 +35,7 @@ fun SnackBarHost(modifier: Modifier, snackState: SnackbarHostState) {
 }
 
 @Composable
-fun TwoTooSnackBarView(
+private fun TwoTooSnackBarView(
     message: String,
 ) {
     Card(

presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/toolbar/TwoTooBackToolbar.kt

@@ -23,6 +23,7 @@ fun TwoTooBackToolbar(
     titleModifier: Modifier = Modifier,
     @DrawableRes backIconId: Int = R.drawable.ic_back,
     color: Color = Color.Transparent,
+    contentColor: Color? = null,
     actionIconButton: @Composable () -> Unit = {},
 ) {
     TopAppBar(
@@ -34,7 +35,7 @@ fun TwoTooBackToolbar(
                 Text(
                     text = title,
                     modifier = titleModifier,
-                    color = TwoTooTheme.color.mainBrown,
+                    color = contentColor ?: TwoTooTheme.color.mainBrown,
                     style = TwoTooTheme.typography.headLineNormal24,
                     textAlign = TextAlign.Center,
                 )
@@ -48,6 +49,7 @@ fun TwoTooBackToolbar(
                     Icon(
                         painter = painterResource(id = backIconId),
                         contentDescription = null,
+                        tint = contentColor ?: LocalContentColor.current,
                     )
                 }
             }

presenter/src/main/java/com/mashup/twotoo/presenter/history/datail/HistoryDetailScreen.kt

@@ -36,6 +36,7 @@ fun HistoryDetailRoute(
     commitNo: Int,
     historyViewModel: HistoryViewModel,
     onClickBackButton: () -> Unit,
+    onClickImage: (String) -> Unit,
 ) {
     Log.i("HistoryDetailRoute", "commitNo = $commitNo")
     val lifecycleOwner = LocalLifecycleOwner.current
@@ -46,15 +47,17 @@ fun HistoryDetailRoute(
     }
     val state by historyViewModel.collectAsState()
     HistoryDetailScreen(
-        onClickBackButton = onClickBackButton,
         historyDetailInfoUiModel = state.historyDetailInfoUiModel,
+        onClickBackButton = onClickBackButton,
+        onClickImage = onClickImage,
     )
 }
 
 @Composable
 fun HistoryDetailScreen(
-    onClickBackButton: () -> Unit,
     historyDetailInfoUiModel: HistoryDetailInfoUiModel,
+    onClickBackButton: () -> Unit = {},
+    onClickImage: (String) -> Unit = {},
 ) {
     val scrollableState = rememberScrollState()
 
@@ -98,7 +101,10 @@ fun HistoryDetailScreen(
                         .fillMaxWidth()
                         .padding(vertical = 24.dp)
                         .aspectRatio(1f)
-                        .clip(TwoTooTheme.shape.extraSmall),
+                        .clip(TwoTooTheme.shape.extraSmall).clickable {
+                            onClickImage(historyDetailInfoUiModel.infoUiModel.photoUrl)
+                        },
+
                 )
                 Text(
                     text = historyDetailInfoUiModel.challengeName,

presenter/src/main/java/com/mashup/twotoo/presenter/history/detailImage/DetailImageScreen.kt

@@ -0,0 +1,220 @@
+package com.mashup.twotoo.presenter.history.detailImage
+
+import android.graphics.Bitmap
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.gestures.detectTransformGestures
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.material.SnackbarHostState
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.asAndroidBitmap
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalContext
+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.constraintlayout.compose.ConstraintLayout
+import androidx.constraintlayout.compose.Dimension
+import com.mashup.twotoo.presenter.R
+import com.mashup.twotoo.presenter.designsystem.component.TwoTooImageView
+import com.mashup.twotoo.presenter.designsystem.component.toast.SnackBarHost
+import com.mashup.twotoo.presenter.designsystem.component.toolbar.TwoTooBackToolbar
+import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme
+import com.mashup.twotoo.presenter.util.saveBitmapToStorage
+import dev.shreyaspatil.capturable.Capturable
+import dev.shreyaspatil.capturable.controller.rememberCaptureController
+import kotlinx.coroutines.launch
+
+@Composable
+fun DetailImageRoute(
+    url: String,
+    onClickBackButton: () -> Unit = {},
+) {
+    DetailImageScreen(
+        modifier = Modifier.fillMaxSize(),
+        url = url,
+        onClickBackButton = onClickBackButton,
+    )
+}
+
+@Composable
+fun DetailImageScreen(
+    url: String,
+    modifier: Modifier = Modifier,
+    onClickBackButton: () -> Unit = {},
+) {
+    var scale by remember { mutableFloatStateOf(1f) }
+    var offsetX by remember { mutableFloatStateOf(0f) }
+    var offsetY by remember { mutableFloatStateOf(0f) }
+    var settingMenuVisibility by remember { mutableStateOf(false) }
+    val captureController = rememberCaptureController()
+    val context = LocalContext.current
+
+    val screenWidth = LocalConfiguration.current.screenWidthDp.toFloat()
+    val snackbarHostState: SnackbarHostState = remember { SnackbarHostState() }
+    val successToastText = stringResource(id = R.string.saveImageSuccessToastText)
+    val errorToastText = stringResource(id = R.string.saveImageErrorToastText)
+    val coroutineScope = rememberCoroutineScope()
+
+    ConstraintLayout(
+        modifier = modifier
+            .background(color = Color.Black)
+            .pointerInput(Unit) {
+                detectTransformGestures(
+                    onGesture = { _, pan, gestureZoom, _ ->
+                        scale = (scale * gestureZoom).coerceIn(1f, 5f)
+                        if (scale > 1) {
+                            offsetX += pan.x * scale
+                            offsetY += pan.y * scale
+                            offsetX = offsetX.coerceIn(-screenWidth, screenWidth)
+                            offsetY = offsetY.coerceIn(-screenWidth, screenWidth)
+                        } else {
+                            offsetX = 0f
+                            offsetY = 0f
+                        }
+                    },
+                )
+            }
+            .pointerInput(Unit) {
+                detectTapGestures(
+                    onDoubleTap = {
+                        scale = 1f
+                        offsetX = 0f
+                        offsetY = 0f
+                    },
+                )
+            },
+    ) {
+        val (topBar, image, captureWrapper, dropDownMenu, snackBar) = createRefs()
+        TwoTooBackToolbar(
+            modifier = Modifier.constrainAs(topBar) {
+                top.linkTo(parent.top)
+                start.linkTo(parent.start)
+                end.linkTo(parent.end)
+            },
+            onClickBackIcon = {
+                onClickBackButton()
+            },
+            contentColor = Color.White,
+        ) {
+            IconButton(
+                onClick = {
+                    settingMenuVisibility = true
+                },
+            ) {
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_more),
+                    contentDescription = null,
+                    tint = Color.White,
+                )
+            }
+            DropdownMenu(
+                modifier = Modifier
+                    .wrapContentHeight()
+                    .constrainAs(dropDownMenu) {
+                        top.linkTo(topBar.bottom)
+                        end.linkTo(parent.end)
+                    },
+                expanded = settingMenuVisibility,
+                onDismissRequest = { settingMenuVisibility = false },
+            ) {
+                DropdownMenuItem(text = {
+                    Text(text = stringResource(id = R.string.saveImage))
+                }, onClick = {
+                    captureController.capture(Bitmap.Config.ARGB_8888)
+                })
+            }
+        }
+
+        Capturable(
+            modifier = Modifier.constrainAs(captureWrapper) {
+                centerHorizontallyTo(parent)
+                centerVerticallyTo(parent)
+                height = Dimension.ratio("1:1")
+            },
+            controller = captureController,
+            onCaptured = { bitmap, error ->
+                if (bitmap != null) {
+                    saveBitmapToStorage(
+                        context = context,
+                        bitmap = bitmap.asAndroidBitmap(),
+                        title = url,
+                        onSuccessToSave = {
+                            coroutineScope.launch {
+                                snackbarHostState.showSnackbar(successToastText)
+                            }
+                            settingMenuVisibility = false
+                        },
+                        onFailToSave = {
+                            coroutineScope.launch {
+                                snackbarHostState.showSnackbar(errorToastText)
+                            }
+                            settingMenuVisibility = false
+                        },
+                    )
+                }
+                if (error != null) {
+                    coroutineScope.launch {
+                        snackbarHostState.showSnackbar(errorToastText)
+                    }
+                    settingMenuVisibility = false
+                }
+            },
+        ) {
+            TwoTooImageView(
+                modifier = Modifier
+                    .constrainAs(image) {
+                        linkTo(
+                            start = parent.start,
+                            end = parent.end,
+                            top = parent.top,
+                            bottom = parent.bottom,
+                        )
+                    }
+                    .graphicsLayer {
+                        scaleX = scale
+                        scaleY = scale
+                        translationX = offsetX
+                        translationY = offsetY
+                    },
+                model = url,
+                contentScale = ContentScale.Fit,
+                previewPlaceholder = R.drawable.empty_image_color_placeholder,
+            )
+        }
+        SnackBarHost(
+            modifier = Modifier.constrainAs(snackBar) {
+                start.linkTo(parent.start)
+                end.linkTo(parent.end)
+                bottom.linkTo(parent.bottom, margin = 30.dp)
+            },
+            snackState = snackbarHostState,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun PreviewDetailImageScreen() {
+    TwoTooTheme {
+        DetailImageRoute(url = "")
+    }
+}

presenter/src/main/java/com/mashup/twotoo/presenter/history/navigation/HistoryNavigation.kt

@@ -1,18 +1,22 @@
 package com.mashup.twotoo.presenter.history.navigation
 
 import android.annotation.SuppressLint
+import android.util.Log
+import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.remember
 import androidx.lifecycle.ViewModelStoreOwner
 import androidx.navigation.*
 import androidx.navigation.compose.composable
 import com.mashup.twotoo.presenter.di.daggerViewModel
 import com.mashup.twotoo.presenter.history.HistoryRoute
 import com.mashup.twotoo.presenter.history.datail.HistoryDetailRoute
+import com.mashup.twotoo.presenter.history.detailImage.DetailImageRoute
 import com.mashup.twotoo.presenter.history.di.HistoryComponentProvider
 import com.mashup.twotoo.presenter.home.model.HomeGoalAchievePartnerAndMeUiModel
 import com.mashup.twotoo.presenter.navigation.NavigationRoute
 import com.mashup.twotoo.presenter.util.MoshiUtils
 import com.mashup.twotoo.presenter.util.componentProvider
+import com.mashup.twotoo.presenter.util.toIncodeUrl
 
 fun NavController.navigateToHistory(challengeNo: Int, homeGoalAchievePartnerAndMeUiModel: HomeGoalAchievePartnerAndMeUiModel? = null) {
     if (homeGoalAchievePartnerAndMeUiModel != null) {
@@ -27,6 +31,10 @@ private fun NavController.navigateToHistoryDetail(commitNo: Int) {
     this.navigate(route = "${NavigationRoute.HistoryGraph.HistoryDetailScreen.route}/$commitNo")
 }
 
+private fun NavController.navigateToDetailImageScreen(url: String) {
+    this.navigate(route = "${NavigationRoute.HistoryGraph.DetailImageScreen.route}/${url.toIncodeUrl()}")
+}
+
 @SuppressLint("UnrememberedGetBackStackEntry")
 fun NavGraphBuilder.historyGraph(navController: NavController) {
     navigation(startDestination = "${NavigationRoute.HistoryGraph.HistoryScreen.route}/{challengeNo}?progress={progress}", route = NavigationRoute.HistoryGraph.route) {
@@ -84,7 +92,25 @@ fun NavGraphBuilder.historyGraph(navController: NavController) {
             HistoryDetailRoute(
                 commitNo = commitNo,
                 historyViewModel = historyViewModel,
-                onClickBackButton = { navController.popBackStack() },
+                onClickBackButton = navController::popBackStack,
+                onClickImage = navController::navigateToDetailImageScreen,
+            )
+        }
+
+        composable(
+            route = "${NavigationRoute.HistoryGraph.DetailImageScreen.route}/{url}",
+            arguments = listOf(
+                navArgument("url") { type = NavType.StringType },
+            ),
+        ) { navBackStackEntry: NavBackStackEntry ->
+
+            val url = navBackStackEntry.arguments?.getString("url") ?: ""
+            SideEffect {
+                Log.d("Exception", "historyGraph: $url")
+            }
+            DetailImageRoute(
+                url = url,
+                onClickBackButton = navController::popBackStack,
             )
         }
     }

presenter/src/main/java/com/mashup/twotoo/presenter/navigation/TopLevelDestination.kt

@@ -71,6 +71,7 @@ sealed class NavigationRoute(val route: String) {
     object HistoryGraph : NavigationRoute("history") {
         object HistoryScreen : NavigationRoute("history/screen")
         object HistoryDetailScreen : NavigationRoute("detail/screen")
+        object DetailImageScreen : NavigationRoute("detail/image/screen")
     }
 
     object GuideGraph : NavigationRoute("guide") {

presenter/src/main/java/com/mashup/twotoo/presenter/util/IncodingImageUrl.kt

@@ -0,0 +1,8 @@
+package com.mashup.twotoo.presenter.util
+
+import java.net.URLEncoder
+import java.nio.charset.StandardCharsets
+
+fun String.toIncodeUrl(): String {
+    return URLEncoder.encode(this, StandardCharsets.UTF_8.toString())
+}