[FEATURE] #63 : 비회원 마이페이지 화면 UI 완성

pknu-wap · Dec 23, 2023 · f9a387d · f9a387d
1 parent ea62683
commit f9a387d
Showing 1 changed file with 60 additions and 1 deletion.
diff --git a/feature/profile/src/main/java/com/wap/wapp/feature/profile/ProfileScreen.kt b/feature/profile/src/main/java/com/wap/wapp/feature/profile/ProfileScreen.kt
@@ -7,8 +7,10 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Card
@@ -18,6 +20,11 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -39,6 +46,7 @@ internal fun ProfileRoute(
 internal fun ProfileScreen(
     role: Role = Role.GUEST,
     navigateToProfileSetting: () -> Unit = {},
+    navigateToLogin: () -> Unit = {},
 ) {
     Column(
         modifier = Modifier
@@ -72,7 +80,35 @@ internal fun ProfileScreen(
         WappProfileCard(role = role, userName = "태규")
 
         if (role == Role.GUEST) {
-            return@Column
+            Text(
+                text = SpannableGuestText(),
+                color = WappTheme.colors.white,
+                style = WappTheme.typography.titleRegular.copy(fontSize = 26.sp),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 20.dp)
+                    .padding(top = 60.dp),
+            )
+
+            Card(
+                shape = RoundedCornerShape(10.dp),
+                backgroundColor = WappTheme.colors.yellow34,
+                modifier = Modifier
+                    .padding(horizontal = 15.dp)
+                    .padding(top = 40.dp)
+                    .height(50.dp)
+                    .fillMaxWidth()
+                    .clickable { navigateToLogin() },
+            ) {
+                Text(
+                    text = "로그인 하러 가기",
+                    style = WappTheme.typography.contentMedium,
+                    color = WappTheme.colors.white,
+                    textAlign = TextAlign.Center,
+                    modifier = Modifier.wrapContentHeight(),
+                )
+            }
+            return
         }
 
         Box(
@@ -120,6 +156,29 @@ internal fun ProfileScreen(
     }
 }
 
+@Composable
+fun SpannableGuestText() = buildAnnotatedString {
+    append("로그인하여\n")
+    withStyle(
+        style = SpanStyle(
+            color = WappTheme.colors.yellow34,
+            textDecoration = TextDecoration.Underline,
+        ),
+    ) {
+        append("WAPP")
+    }
+    append(" 와 ")
+    withStyle(
+        style = SpanStyle(
+            color = WappTheme.colors.yellow34,
+            textDecoration = TextDecoration.Underline,
+        ),
+    ) {
+        append("추억")
+    }
+    append("을 쌓아보세요!")
+}
+
 @Preview
 @Composable
 fun PreviewProfileScreen() {