[UI] my page 화면 구현 완료

.gitignore

@@ -13,3 +13,4 @@
 .externalNativeBuild
 .cxx
 local.properties
+.idea/deploymentTargetSelector.xml

app/build.gradle.kts

@@ -52,6 +52,8 @@ dependencies {
     implementation(libs.androidx.ui.tooling.preview)
     implementation(libs.androidx.material3)
     implementation(libs.androidx.navigation.compose)
+    implementation(libs.androidx.foundation)
+    implementation(libs.androidx.lifecycle.viewmodel.compose)
     implementation(libs.androidx.navigation.runtime.android)
     implementation(libs.accompanist.pager)
     implementation(libs.accompanist.pager.indicators)

app/src/main/java/com/texthip/thip/ui/common/buttons/MenuItemButton.kt

@@ -0,0 +1,89 @@
+package com.texthip.thip.ui.common.buttons
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+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 com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun MenuItemButton(
+    text: String,
+    icon: Painter? = null,
+    contentColor: Color,
+    backgroundColor: Color,
+    hasRightIcon: Boolean = false,
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit = {},
+) {
+    val hasLeftIcon = icon != null
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(56.dp)
+            .background(color = backgroundColor, shape = RoundedCornerShape(12.dp))
+            .clickable(onClick = onClick)
+            .padding(horizontal = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            if (hasLeftIcon) {
+                Icon(
+                    painter = icon,
+                    contentDescription = null,
+                    tint = contentColor,
+                )
+                Spacer(modifier = Modifier.width(12.dp))
+            }
+            Text(
+                text = text,
+                color = contentColor,
+                style = typography.smalltitle_sb600_s16_h24,
+            )
+        }
+        if (hasRightIcon) {
+            Icon(
+                painter = painterResource(R.drawable.ic_chevron),
+                contentDescription = null,
+                tint = contentColor,
+            )
+        }
+
+    }
+}
+
+@Preview
+@Composable
+private fun MenuItemButtonPreview() {
+    MenuItemButton(
+        text = stringResource(R.string.saved),
+        icon = painterResource(R.drawable.ic_save),
+        contentColor = colors.White,
+        backgroundColor = colors.DarkGrey02,
+        hasRightIcon = true,
+        modifier = Modifier
+            .fillMaxWidth(),
+        onClick = {}
+    )
+}

app/src/main/java/com/texthip/thip/ui/common/buttons/ToggleSwitchButton.kt

@@ -20,15 +20,15 @@ import com.texthip.thip.R
 import com.texthip.thip.ui.theme.ThipTheme.colors
 
 @Composable
-fun ToggleSwitchButton() {
-    var isChecked by remember { mutableStateOf(true) }
-
+fun ToggleSwitchButton(
+    isChecked: Boolean,
+    onToggleChange: (Boolean) -> Unit
+) {
+    //var isChecked by remember { mutableStateOf(true) }
     Switch(
         modifier = Modifier.padding(4.dp),
         checked = isChecked,
-        onCheckedChange = {
-            isChecked = it
-        },
+        onCheckedChange = onToggleChange,
         colors = SwitchDefaults.colors(
             checkedThumbColor = colors.White,
             checkedTrackColor = colors.Purple,
@@ -49,11 +49,16 @@ fun ToggleSwitchButton() {
 @Preview
 @Composable
 private fun ToggleSwitchButtonPreview() {
+    var isChecked by remember { mutableStateOf(true) }
+
     Column(
         modifier = Modifier
             .fillMaxSize()
             .padding(30.dp)
     ) {
-        ToggleSwitchButton()
+        ToggleSwitchButton(
+            isChecked = isChecked,
+            onToggleChange = { isChecked = it }
+        )
     }
 }

app/src/main/java/com/texthip/thip/ui/common/cards/CardAlarm.kt

@@ -1,6 +1,5 @@
 package com.texthip.thip.ui.common.cards
 
-import androidx.compose.ui.graphics.Color
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
@@ -25,6 +24,7 @@ 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.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
@@ -51,7 +51,7 @@ fun CardAlarm(
             .fillMaxWidth()
             .clickable { onClick() },
         colors = CardDefaults.cardColors(
-            containerColor = if (isRead) containerColorUnread else containerColorRead
+            containerColor = if (isRead) containerColorRead else containerColorUnread
         ),
         elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
         shape = RoundedCornerShape(12.dp)

app/src/main/java/com/texthip/thip/ui/common/forms/FormTextFieldDefault.kt

@@ -4,6 +4,9 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -33,15 +36,17 @@ fun FormTextFieldDefault(
     hint: String,
     showLimit: Boolean = false,
     limit: Int = 10,
-    showIcon: Boolean = true
+    showIcon: Boolean = true,
+    containerColor: Color = colors.Black
 ) {
     var text by rememberSaveable { mutableStateOf("") }
     val myStyle = typography.menu_r400_s14_h24.copy(lineHeight = 14.sp)
 
     // 글자수 제한 적용
     val displayText = if (showLimit && text.length > limit) text.substring(0, limit) else text
 
-    Box(modifier = modifier) {
+    Box(modifier = modifier
+        .height(48.dp)) {
         OutlinedTextField(
             value = displayText,
             onValueChange = {
@@ -56,15 +61,14 @@ fun FormTextFieldDefault(
                 )
             },
             textStyle = myStyle,
-            modifier = Modifier
-                .size(width = 320.dp, height = 48.dp),
+            modifier = Modifier.fillMaxSize(),
             shape = RoundedCornerShape(12.dp),
             colors = TextFieldDefaults.colors(
                 focusedTextColor = colors.White,
                 focusedIndicatorColor = Color.Transparent,
                 unfocusedIndicatorColor = Color.Transparent,
-                focusedContainerColor = colors.Black,
-                unfocusedContainerColor = colors.Black,
+                focusedContainerColor = containerColor,
+                unfocusedContainerColor = containerColor,
                 cursorColor = colors.NeonGreen
             ),
             trailingIcon = {

app/src/main/java/com/texthip/thip/ui/common/header/AuthorHeader.kt

@@ -28,6 +28,7 @@ import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 import com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.OutlinedButton
 import com.texthip.thip.ui.theme.Grey02
 
 @Composable
@@ -36,7 +37,8 @@ fun AuthorHeader(
     profileImage: Painter?,
     nickname: String,
     badgeText: String,
-    onSubscribeClick: () -> Unit
+    buttonText: String,
+    onButtonClick: () -> Unit = {}
 ) {
     Row(
         modifier = modifier
@@ -77,21 +79,13 @@ fun AuthorHeader(
                 maxLines = 1
             )
         }
-
-        Box(
+        OutlinedButton(
             modifier = Modifier
-                .clip(RoundedCornerShape(20.dp))
-                .border(1.dp, Grey02, RoundedCornerShape(20.dp))
-                .background(Color.Transparent)
-                .clickable { onSubscribeClick() }
-                .padding(horizontal = 12.dp, vertical = 8.dp)
-        ) {
-            Text(
-                text = stringResource(R.string.subscribe),
-                style = typography.menu_m500_s14_h24,
-                color = colors.White
-            )
-        }
+                .size(width = 51.dp, height = 35.dp),
+            text = buttonText,
+            textStyle = typography.menu_m500_s14_h24,
+            onClick = onButtonClick
+        )
     }
 }
 
@@ -103,7 +97,7 @@ fun PreviewAuthorHeader() {
             profileImage = null,
             nickname = "열자자제한열열자제한",
             badgeText = "칭호칭호칭호",
-            onSubscribeClick = { println("구독") }
+            buttonText = "구독"
         )
     }
 }

app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt

@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
@@ -45,6 +46,7 @@ fun ProfileBar(
     Row(
         modifier = modifier
             .fillMaxWidth()
+            .padding( vertical = 12.dp)
             .clickable { onClick() },
         verticalAlignment = Alignment.CenterVertically
     ) {

app/src/main/java/com/texthip/thip/ui/common/modal/DialogPopup.kt

@@ -12,8 +12,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -47,7 +45,7 @@ fun DialogPopup(
             verticalArrangement = Arrangement.SpaceBetween,
             modifier = Modifier.fillMaxSize()
         ) {
-            Column {
+            Column (){
                 Text(
                     text = title,
                     color = colors.White,
@@ -61,7 +59,6 @@ fun DialogPopup(
                 )
             }
 
-            //TODO: 추후 버튼 공통 컴포넌트로 변경
             Row(
                 horizontalArrangement = Arrangement.spacedBy(20.dp),
                 modifier = Modifier.fillMaxWidth()
@@ -71,14 +68,14 @@ fun DialogPopup(
                     contentColor = colors.White,
                     backgroundColor = colors.Grey02,
                     modifier = Modifier.weight(1f),
-                    onClick = {},
+                    onClick = onCancel,
                 )
                 ActionMediumButton(
                     text = stringResource(R.string.yes),
                     contentColor = colors.White,
                     backgroundColor = colors.Purple,
                     modifier = Modifier.weight(1f),
-                    onClick = {},
+                    onClick = onConfirm,
                 )
             }