diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/button/TwoTooTextButton.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/button/TwoTooTextButton.kt index 3cfe9483..7a663a71 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/button/TwoTooTextButton.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/button/TwoTooTextButton.kt @@ -11,6 +11,7 @@ import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Shape import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.mashup.twotoo.presenter.designsystem.theme.* @@ -23,11 +24,12 @@ fun TwoTooTextButton( .height(57.dp) .padding(horizontal = 30.dp), enabled: Boolean = true, + shape: Shape = TwoTooTheme.shape.medium, onClick: () -> Unit = {}, ) { Button( modifier = modifier, - shape = TwoTooTheme.shape.medium, + shape = shape, colors = if (enabled) { ButtonDefaults.buttonColors(containerColor = TwoTooTheme.color.mainBrown) } else { diff --git a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/dialog/FlowerLanguageDialog.kt b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/dialog/FlowerLanguageDialog.kt index 387a871a..dc5e2c07 100644 --- a/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/dialog/FlowerLanguageDialog.kt +++ b/presenter/src/main/java/com/mashup/twotoo/presenter/designsystem/component/dialog/FlowerLanguageDialog.kt @@ -1,5 +1,11 @@ package com.mashup.twotoo.presenter.designsystem.component.dialog +import android.content.Context +import android.content.Intent +import android.graphics.Bitmap +import android.net.Uri +import android.provider.MediaStore +import android.util.Log import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box @@ -12,83 +18,181 @@ import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.LocalContentAlpha -import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.asAndroidBitmap 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.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.window.Dialog import androidx.compose.ui.window.DialogProperties +import androidx.constraintlayout.compose.ConstraintLayout import com.mashup.twotoo.presenter.R import com.mashup.twotoo.presenter.designsystem.component.TwoTooImageView +import com.mashup.twotoo.presenter.designsystem.component.button.TwoTooTextButton import com.mashup.twotoo.presenter.designsystem.theme.TwoTooTheme import com.mashup.twotoo.presenter.home.model.FlowerLanguageUiModel +import dev.shreyaspatil.capturable.Capturable +import dev.shreyaspatil.capturable.controller.rememberCaptureController +import java.io.ByteArrayOutputStream + +fun getImageUri(inContext: Context, inImage: Bitmap): Uri? { + val bytes = ByteArrayOutputStream() + inImage.compress(Bitmap.CompressFormat.JPEG, 100, bytes) + val path = + MediaStore.Images.Media.insertImage(inContext.contentResolver, inImage, "Title", null) + return Uri.parse(path) +} @Composable fun FlowerLanguageDialog( flowerLanguageUiModel: FlowerLanguageUiModel, onClickDismiss: () -> Unit, onDismissRequest: () -> Unit = {}, - properties: DialogProperties = DialogProperties(), + properties: DialogProperties = DialogProperties( + dismissOnBackPress = true, + dismissOnClickOutside = true, + ), ) { val screenWidth = LocalConfiguration.current.screenWidthDp.dp val context = LocalContext.current + val captureController = rememberCaptureController() + Dialog( onDismissRequest = onDismissRequest, properties = properties, ) { - Box( - modifier = Modifier - .background( - TwoTooTheme.color.backgroundYellow, - shape = TwoTooTheme.shape.medium, - ) - .width(screenWidth - 102.dp), + Column( + horizontalAlignment = Alignment.CenterHorizontally, ) { - TwoTooImageView( - modifier = Modifier - .height(96.dp) - .clip(RoundedCornerShape(bottomEnd = 20.dp, bottomStart = 20.dp)) - .align(Alignment.BottomCenter), - model = R.drawable.img_flower_card_bottom, - previewPlaceholder = R.drawable.img_flower_card_bottom, + Text( + text = stringResource(id = R.string.get_card_title, flowerLanguageUiModel.getFlowerName(context)), + style = TwoTooTheme.typography.headLineNormal20, + color = TwoTooTheme.color.mainWhite, ) - Column { - Icon( - painter = painterResource(id = R.drawable.ic_cancel), - modifier = Modifier - .align(Alignment.End) - .padding(top = 14.dp, end = 14.dp) - .clickable { onClickDismiss() }, - contentDescription = null, - ) - FlowerLanguageContent( - modifier = Modifier.fillMaxWidth().align(Alignment.CenterHorizontally).padding(bottom = 32.dp), - flower = flowerLanguageUiModel.getFlowerName(context), - language = flowerLanguageUiModel.getFlowerLanguage(context), - ) - TwoTooImageView( - modifier = Modifier.size(99.dp, 164.dp) - .align(Alignment.CenterHorizontally), - model = flowerLanguageUiModel.getFlowerImage(context), - previewPlaceholder = R.drawable.img_home_fourth_stage_fig_partner, + Spacer( + modifier = Modifier.height(16.dp), + ) + Column( + modifier = Modifier + .background( + TwoTooTheme.color.mainWhite, + shape = TwoTooTheme.shape.medium, + ) + .width(screenWidth - 102.dp) + .padding(11.dp), + ) { + Capturable( + controller = captureController, + onCaptured = { bitmap, error -> + + if (bitmap != null) { + val androidBitmap = bitmap.asAndroidBitmap() + val path = getImageUri(context, androidBitmap) + + val share = Intent(Intent.ACTION_SEND) + share.setType("image/jpeg") + + share.putExtra(Intent.EXTRA_STREAM, path) + context.startActivity(Intent.createChooser(share, "Select")) + } + if (error != null) { + Log.e("Error", error.message ?: "") + } + }, + ) { + ConstraintLayout( + modifier = Modifier.background( + color = TwoTooTheme.color.backgroundYellow, + shape = TwoTooTheme.shape.medium, + ), + ) { + val (content, flowerImage, challengeCount, groundImage) = createRefs() + + FlowerLanguageContent( + modifier = Modifier.constrainAs(content) { + start.linkTo(parent.start) + end.linkTo(parent.end) + top.linkTo(parent.top, 32.dp) + }, + flower = flowerLanguageUiModel.getFlowerName(context), + language = flowerLanguageUiModel.getFlowerLanguage(context), + ) + + TwoTooImageView( + modifier = Modifier + .constrainAs(groundImage) { + start.linkTo(parent.start) + end.linkTo(parent.end) + bottom.linkTo(parent.bottom) + } + .height(96.dp) + .clip(RoundedCornerShape(bottomEnd = 20.dp, bottomStart = 20.dp)), + model = R.drawable.img_flower_card_bottom, + previewPlaceholder = R.drawable.img_flower_card_bottom, + ) + + TwoTooImageView( + modifier = Modifier + .size(99.dp, 164.dp) + .constrainAs(flowerImage) { + bottom.linkTo(challengeCount.top, 22.dp) + start.linkTo(parent.start) + end.linkTo(parent.end) + top.linkTo(content.bottom, 32.dp) + }, + model = flowerLanguageUiModel.getFlowerImage(context), + previewPlaceholder = R.drawable.img_home_fourth_stage_fig_partner, + ) + ChallengeCountCard( + modifier = Modifier.constrainAs(challengeCount) { + start.linkTo(parent.start) + end.linkTo(parent.end) + bottom.linkTo(parent.bottom, 30.dp) + }, + flowerLanguageUiModel.challengeNo, + ) + } + } + Spacer( + modifier = Modifier.height(11.dp), ) - Spacer(modifier = Modifier.height(22.dp)) - ChallengeCountCard( + TwoTooTextButton( modifier = Modifier - .align(Alignment.CenterHorizontally) - .padding(bottom = 30.dp), - flowerLanguageUiModel.challengeNo, + .fillMaxWidth() + .height(49.dp), + text = stringResource(id = R.string.share), + shape = TwoTooTheme.shape.extraSmall, + onClick = { + captureController.capture(Bitmap.Config.ARGB_8888) + }, + + ) + } + Spacer( + modifier = Modifier.height(10.dp), + ) + Box( + modifier = Modifier + .fillMaxWidth() + .height(49.dp) + .clickable { + onClickDismiss() + }, + contentAlignment = Alignment.Center, + ) { + Text( + text = stringResource(id = R.string.close), + style = TwoTooTheme.typography.headLineNormal18, + color = TwoTooTheme.color.mainWhite, ) } } @@ -120,12 +224,15 @@ fun FlowerLanguageContent(modifier: Modifier, flower: String, language: String) @Composable fun ChallengeCountCard( modifier: Modifier, - challengeCount: Int + challengeCount: Int, ) { Text( modifier = modifier.then( Modifier - .background(color = Color.White.copy(alpha = LocalContentAlpha.current), shape = RoundedCornerShape(4.dp)) + .background( + color = Color.White.copy(alpha = LocalContentAlpha.current), + shape = RoundedCornerShape(4.dp), + ) .padding(vertical = 4.dp, horizontal = 10.dp), ), text = stringResource(id = R.string.challenge_number, challengeCount), diff --git a/presenter/src/main/res/values/string.xml b/presenter/src/main/res/values/string.xml index 28620968..15ef9f84 100644 --- a/presenter/src/main/res/values/string.xml +++ b/presenter/src/main/res/values/string.xml @@ -250,4 +250,10 @@ [투투]에 초대합니다.\n👉 링크를 누르고 로그인하여 챌린지를 진행해보세요! %s Twotoo + %1$s 카드를 획득했어요! + 공유하기 + 닫기 + + + \ No newline at end of file