From be2b3017d508dd3dd937afeb06d1ea84df7a6fcb Mon Sep 17 00:00:00 2001 From: boiledegg Date: Fri, 19 Jul 2024 05:04:47 +0900 Subject: [PATCH] =?UTF-8?q?[UI/#124]=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/item/TerningLottieAnimation.kt | 5 - .../com/terning/feature/mypage/MyPageRoute.kt | 134 +++++---- .../main/res/drawable/ic_terning_mypage.xml | 279 ++++++++++++++++++ 3 files changed, 362 insertions(+), 56 deletions(-) create mode 100644 feature/src/main/res/drawable/ic_terning_mypage.xml diff --git a/core/src/main/java/com/terning/core/designsystem/component/item/TerningLottieAnimation.kt b/core/src/main/java/com/terning/core/designsystem/component/item/TerningLottieAnimation.kt index 112d6fa00..65a0cbdcb 100644 --- a/core/src/main/java/com/terning/core/designsystem/component/item/TerningLottieAnimation.kt +++ b/core/src/main/java/com/terning/core/designsystem/component/item/TerningLottieAnimation.kt @@ -1,15 +1,10 @@ package com.terning.core.designsystem.component.item -import androidx.compose.foundation.layout.aspectRatio -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier -import androidx.compose.ui.unit.dp import com.airbnb.lottie.compose.LottieAnimation import com.airbnb.lottie.compose.LottieCompositionSpec -import com.airbnb.lottie.compose.LottieConstants import com.airbnb.lottie.compose.rememberLottieComposition @Composable diff --git a/feature/src/main/java/com/terning/feature/mypage/MyPageRoute.kt b/feature/src/main/java/com/terning/feature/mypage/MyPageRoute.kt index bb2f72a21..96b8e5e75 100644 --- a/feature/src/main/java/com/terning/feature/mypage/MyPageRoute.kt +++ b/feature/src/main/java/com/terning/feature/mypage/MyPageRoute.kt @@ -1,10 +1,14 @@ package com.terning.feature.mypage +import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape @@ -15,9 +19,12 @@ import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier 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.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle @@ -29,6 +36,7 @@ import com.terning.core.designsystem.component.topappbar.MyPageTopAppBar import com.terning.core.designsystem.theme.Back import com.terning.core.designsystem.theme.Grey200 import com.terning.core.designsystem.theme.Grey350 +import com.terning.core.designsystem.theme.TerningPointTheme import com.terning.core.designsystem.theme.TerningTheme import com.terning.core.designsystem.theme.White import com.terning.core.extension.customShadow @@ -118,64 +126,73 @@ fun MyPageScreen( onOpinionClick: () -> Unit ) { Scaffold( - modifier = Modifier, - topBar = { - MyPageTopAppBar(modifier = Modifier) - } + modifier = Modifier ) { paddingValues -> - - Column( - modifier = Modifier.padding(top = paddingValues.calculateTopPadding()) + Box( + modifier = Modifier + .fillMaxSize() + .padding(top = paddingValues.calculateTopPadding()), + contentAlignment = Alignment.BottomCenter ) { - Text( - text = stringResource(id = R.string.my_page_name, name), - modifier = Modifier.padding( - top = 21.dp, - start = 24.dp, - ), - style = TerningTheme.typography.heading1, + Image( + modifier = Modifier.fillMaxSize(), + painter = painterResource(id = R.drawable.ic_terning_mypage), + contentDescription = "" ) - Spacer(modifier = Modifier.weight(2f)) - MyPageInfo( - modifier = Modifier - .customShadow( - color = Grey200, - shadowRadius = 30.dp, - shadowWidth = 2.dp - ) - .background( - color = Back, - shape = RoundedCornerShape(topEnd = 30.dp, topStart = 30.dp) - ), - onNoticeClick = { onNoticeClick() }, - onOpinionClick = { onOpinionClick() } - ) - Row( - modifier = Modifier - .fillMaxWidth() - .background(Back) - .padding(bottom = 17.dp), - horizontalArrangement = Arrangement.Center, + + Column( + modifier = Modifier.fillMaxSize() ) { Text( - text = stringResource(id = R.string.my_page_logout), - style = TerningTheme.typography.button4, - color = Grey350, - modifier = Modifier.noRippleClickable { - onLogoutClick() - } + text = stringResource(id = R.string.my_page_name, name), + modifier = Modifier.padding( + top = 21.dp, + start = 24.dp, + ), + style = TerningTheme.typography.heading1, ) - Spacer(modifier = Modifier.padding(end = 10.dp)) - TerningImage(painter = R.drawable.ic_my_page_divider) - Spacer(modifier = Modifier.padding(end = 10.dp)) - Text( - text = stringResource(id = R.string.my_page_quit), - style = TerningTheme.typography.button4, - color = Grey350, - modifier = Modifier.noRippleClickable { - onQuitClick() - } + Spacer(modifier = Modifier.weight(2f)) + MyPageInfo( + modifier = Modifier + .customShadow( + color = Grey200, + shadowRadius = 30.dp, + shadowWidth = 2.dp + ) + .background( + color = Back, + shape = RoundedCornerShape(topEnd = 30.dp, topStart = 30.dp) + ), + onNoticeClick = { onNoticeClick() }, + onOpinionClick = { onOpinionClick() } ) + Row( + modifier = Modifier + .fillMaxWidth() + .background(Back) + .padding(bottom = 17.dp), + horizontalArrangement = Arrangement.Center, + ) { + Text( + text = stringResource(id = R.string.my_page_logout), + style = TerningTheme.typography.button4, + color = Grey350, + modifier = Modifier.noRippleClickable { + onLogoutClick() + } + ) + Spacer(modifier = Modifier.padding(end = 10.dp)) + TerningImage(painter = R.drawable.ic_my_page_divider) + Spacer(modifier = Modifier.padding(end = 10.dp)) + Text( + text = stringResource(id = R.string.my_page_quit), + style = TerningTheme.typography.button4, + color = Grey350, + modifier = Modifier.noRippleClickable { + onQuitClick() + } + ) + } } } } @@ -232,3 +249,18 @@ fun MyPageInfo( } private const val VERSION = "1.0.0" + + +@Preview(showBackground = true) +@Composable +fun MyPageScreenPreview(){ + TerningPointTheme { + MyPageScreen( + onLogoutClick = {}, + onQuitClick = {}, + name = "이석준", + onNoticeClick = {}, + onOpinionClick = {} + ) + } +} \ No newline at end of file diff --git a/feature/src/main/res/drawable/ic_terning_mypage.xml b/feature/src/main/res/drawable/ic_terning_mypage.xml new file mode 100644 index 000000000..b6b6eb466 --- /dev/null +++ b/feature/src/main/res/drawable/ic_terning_mypage.xml @@ -0,0 +1,279 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +