Merge pull request #58 from YAPP-Github/feature/TNT-185

[TNT-185] 트레이니 마이페이지 UI 구현

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/Dialog.kt

@@ -156,7 +156,7 @@ fun TnTSingleButtonPopupDialog(
 fun TnTIconPopupDialog(
     title: String,
     content: String,
-    topIcon: Painter,
+    topIcon: Painter = painterResource(R.drawable.ic_round_warning),
     leftButtonText: String,
     rightButtonText: String,
     modifier: Modifier = Modifier,

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/Toggle.kt

@@ -1,16 +1,28 @@
 package co.kr.tnt.designsystem.component
 
+import androidx.compose.animation.core.FastOutSlowInEasing
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 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.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -39,6 +51,43 @@ fun TnTCheckToggle(
     )
 }
 
+@Composable
+fun TnTSwitch(
+    checked: Boolean,
+    onCheckedChange: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val trackColor = if (checked) {
+        TnTTheme.colors.redColors.Red500
+    } else {
+        TnTTheme.colors.neutralColors.Neutral300
+    }
+
+    val thumbPosition by animateFloatAsState(
+        targetValue = if (checked) 20f else 0f,
+        animationSpec = tween(durationMillis = 200, easing = FastOutSlowInEasing),
+        label = "thumbPosition",
+    )
+
+    Box(
+        modifier = modifier
+            .width(44.dp)
+            .height(24.dp)
+            .clip(RoundedCornerShape(12.dp))
+            .background(trackColor)
+            .clickable(onClick = onCheckedChange)
+            .padding(horizontal = 2.dp),
+    ) {
+        Box(
+            modifier = Modifier
+                .size(20.dp)
+                .offset(x = thumbPosition.dp)
+                .align(Alignment.CenterStart)
+                .background(Color.White, CircleShape),
+        )
+    }
+}
+
 @Preview
 @Composable
 private fun TnTCheckTogglePreview() {
@@ -51,3 +100,16 @@ private fun TnTCheckTogglePreview() {
         )
     }
 }
+
+@Preview
+@Composable
+private fun TnTSwitchPreview() {
+    TnTTheme {
+        var checked by remember { mutableStateOf(true) }
+
+        TnTSwitch(
+            checked = checked,
+            onCheckedChange = { checked = !checked },
+        )
+    }
+}

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/button/Button.kt

@@ -1,11 +1,12 @@
 package co.kr.tnt.designsystem.component.button
 
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
@@ -17,6 +18,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -45,14 +47,17 @@ fun TnTTextButton(
             color = type.borderColor(enabled),
         ),
         contentPadding = size.contentPadding,
-        modifier = modifier
-            .height(size.height)
-            // Small, XSmall 버튼을 위해 Button minWidth 설정
-            .defaultMinSize(minWidth = Dp.Hairline),
+        // Small, XSmall 버튼을 위해 Button minWidth, minHeight 설정
+        modifier = modifier.defaultMinSize(
+            minWidth = Dp.Hairline,
+            minHeight = size.height,
+        ),
     ) {
         Text(
             text = text,
             style = size.textStyle(),
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1,
         )
     }
 }
@@ -77,28 +82,43 @@ fun TnTIconButton(
             color = type.borderColor(enabled),
         ),
         contentPadding = size.contentPadding,
-        modifier = modifier
-            .height(size.height)
-            // Small, XSmall 버튼을 위해 Button minWidth 설정
-            .defaultMinSize(minWidth = Dp.Hairline),
+        // Small, XSmall 버튼을 위해 Button minWidth 설정
+        modifier = modifier.defaultMinSize(
+            minWidth = Dp.Hairline,
+            minHeight = size.height,
+        ),
     ) {
         when (iconPosition) {
             is IconPosition.Leading -> {
-                iconPosition.icon()
-                Text(
-                    text = text,
-                    style = size.textStyle(),
-                    modifier = Modifier.padding(start = 4.dp),
-                )
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(4.dp),
+                ) {
+                    iconPosition.icon()
+                    Text(
+                        text = text,
+                        style = size.textStyle(),
+                        overflow = TextOverflow.Ellipsis,
+                        maxLines = 1,
+                        modifier = Modifier.weight(1f, false),
+                    )
+                }
             }
 
             is IconPosition.Trailing -> {
-                Text(
-                    text = text,
-                    style = size.textStyle(),
-                    modifier = Modifier.padding(end = 4.dp),
-                )
-                iconPosition.icon()
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(4.dp),
+                ) {
+                    Text(
+                        text = text,
+                        style = size.textStyle(),
+                        overflow = TextOverflow.Ellipsis,
+                        maxLines = 1,
+                        modifier = Modifier.weight(1f, false),
+                    )
+                    iconPosition.icon()
+                }
             }
         }
     }
@@ -137,7 +157,7 @@ fun TnTBottomButton(
 fun TnTTnTTextButtonPreview() {
     TnTTheme {
         TnTTextButton(
-            size = ButtonSize.Medium,
+            size = ButtonSize.Small,
             type = ButtonType.Primary,
             text = "텍스트",
             enabled = true,
@@ -162,24 +182,40 @@ private fun TnTOutLinedButtonPreview() {
     }
 }
 
-@Preview(showBackground = true, widthDp = 150, heightDp = 100)
+@Preview(showBackground = true, widthDp = 150, heightDp = 130)
 @Composable
 private fun TnTIconButtonPreview() {
     TnTTheme {
-        TnTIconButton(
-            size = ButtonSize.Medium,
-            type = ButtonType.GrayOutline,
-            iconPosition = IconPosition.Trailing {
-                Icon(
-                    painter = painterResource(R.drawable.ic_delete),
-                    contentDescription = null,
-                )
-            },
-            text = "텍스트",
-            enabled = true,
-            onClick = { },
-            modifier = Modifier.wrapContentSize(),
-        )
+        Column(verticalArrangement = Arrangement.spacedBy(5.dp)) {
+            TnTIconButton(
+                size = ButtonSize.Medium,
+                type = ButtonType.GrayOutline,
+                iconPosition = IconPosition.Trailing {
+                    Icon(
+                        painter = painterResource(R.drawable.ic_delete),
+                        contentDescription = null,
+                    )
+                },
+                text = "텍스트",
+                enabled = true,
+                onClick = { },
+                modifier = Modifier.wrapContentSize(),
+            )
+            TnTIconButton(
+                size = ButtonSize.Medium,
+                type = ButtonType.GrayOutline,
+                iconPosition = IconPosition.Leading {
+                    Icon(
+                        painter = painterResource(R.drawable.ic_delete),
+                        contentDescription = null,
+                    )
+                },
+                text = "텍스트",
+                enabled = true,
+                onClick = { },
+                modifier = Modifier.wrapContentSize(),
+            )
+        }
     }
 }
 

core/navigation/src/main/java/co/kr/tnt/navigation/RouteModel.kt

@@ -12,6 +12,13 @@ sealed interface Route {
     @Serializable
     data object Login : Route
 
+    @Serializable
+    data class RoleSelection(
+        val authId: String,
+        val authType: String,
+        val email: String,
+    ) : Route
+
     @Serializable
     data class TrainerSignUp(
         val authId: String,
@@ -33,9 +40,8 @@ sealed interface Route {
     data class TraineeConnect(val isFromMyPage: Boolean) : Route
 
     @Serializable
-    data class RoleSelection(
-        val authId: String,
-        val authType: String,
-        val email: String,
-    ) : Route
+    data object TraineeMyPage : Route
+
+    @Serializable
+    data class WebView(val url: String) : Route
 }

core/ui/src/main/java/co/kr/tnt/ui/component/TnTMyPageButton.kt

@@ -0,0 +1,65 @@
+package co.kr.tnt.ui.component
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonColors
+import androidx.compose.material3.LocalMinimumInteractiveComponentSize
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import co.kr.tnt.designsystem.theme.TnTTheme
+
+@Composable
+fun TnTMyPageButton(
+    text: String,
+    verticalPadding: Dp,
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+) {
+    CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides 39.dp) {
+        Button(
+            onClick = onClick,
+            shape = RoundedCornerShape(12.dp),
+            colors = ButtonColors(
+                containerColor = TnTTheme.colors.commonColors.Common0,
+                contentColor = TnTTheme.colors.neutralColors.Neutral700,
+                disabledContainerColor = TnTTheme.colors.commonColors.Common0,
+                disabledContentColor = TnTTheme.colors.neutralColors.Neutral700,
+            ),
+            elevation = null,
+            contentPadding = PaddingValues(horizontal = 20.dp, vertical = verticalPadding),
+            modifier = modifier
+                .fillMaxWidth()
+                .defaultMinSize(Dp.Hairline),
+        ) {
+            Text(
+                text = text,
+                style = TnTTheme.typography.body2Medium,
+                modifier = Modifier.fillMaxWidth(),
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1,
+            )
+        }
+    }
+}
+
+@Preview
+@Preview(fontScale = 1.5f)
+@Composable
+private fun TnTMyPageButtonPreview() {
+    TnTTheme {
+        TnTMyPageButton(
+            text = "트레이너와 연결하기",
+            onClick = {},
+            verticalPadding = 8.dp,
+        )
+    }
+}

core/ui/src/main/java/co/kr/tnt/ui/model/RecordChip.kt

@@ -29,10 +29,10 @@ sealed interface RecordChip {
             return when (type) {
                 is RecordType.MealType -> {
                     val title = when (type) {
-                        RecordType.MealType.BREAKFAST -> stringResource(R.string.diet_breakfast)
-                        RecordType.MealType.LUNCH -> stringResource(R.string.diet_lunch)
-                        RecordType.MealType.DINNER -> stringResource(R.string.diet_dinner)
-                        RecordType.MealType.SNACK -> stringResource(R.string.diet_snack)
+                        RecordType.MealType.BREAKFAST -> stringResource(R.string.meal_breakfast)
+                        RecordType.MealType.LUNCH -> stringResource(R.string.meal_lunch)
+                        RecordType.MealType.DINNER -> stringResource(R.string.meal_dinner)
+                        RecordType.MealType.SNACK -> stringResource(R.string.meal_snack)
                     }
                     val emoji = when (type) {
                         RecordType.MealType.BREAKFAST -> "🌞"