[UI/#124] 마이페이지 이미지 추가

teamterning · Jul 18, 2024 · be2b301 · be2b301
1 parent 4487b58
commit be2b301
Show file tree

Hide file tree

Showing 3 changed files with 362 additions and 56 deletions.
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
@@ -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
@@ -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 = {}
+        )
+    }
+}