[UI] 로그인/ 스플래시/ 홈-내 구독 리스트 구현

app/src/main/java/com/texthip/thip/ui/bookSearch/screen/BookSearchScreen.kt → app/src/main/java/com/texthip/thip/ui/booksearch/screen/BookSearchScreen.kt

@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.bookSearch.screen
+package com.texthip.thip.ui.booksearch.screen
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize

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

@@ -10,6 +10,7 @@ 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.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
@@ -31,6 +32,8 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 fun ActionMediumButton(
     text: String,
     icon: Painter? = null,
+    iconSize: Int = 24,
+    iconTint: Color = Color.Unspecified,
     contentColor: Color,
     backgroundColor: Color,
     hasRightIcon: Boolean = false,
@@ -54,7 +57,8 @@ fun ActionMediumButton(
             Icon(
                 painter = icon,
                 contentDescription = null,
-                tint = contentColor,
+                tint = iconTint,
+                modifier = Modifier.size(iconSize.dp)
             )
         }
 

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

@@ -2,9 +2,12 @@ package com.texthip.thip.ui.common.forms
 
 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
 import androidx.compose.foundation.text.KeyboardOptions
@@ -16,6 +19,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -37,93 +41,139 @@ fun WarningTextField(
     hint: String,
     warningMessage: String = "경고 메시지를 입력해주세요.",
     showWarning: Boolean = false,
+    showLimit: Boolean = true,
     maxLength: Int = Int.MAX_VALUE,
+    showIcon: Boolean = false,
+    containerColor: Color = colors.Black,
     isNumberOnly: Boolean = false,
     keyboardType: KeyboardType = KeyboardType.Text
 ) {
     val myStyle = typography.menu_r400_s14_h24.copy(lineHeight = 14.sp)
-    OutlinedTextField(
-        value = value,
-        onValueChange = { input ->
-            var filtered = input
-            if (isNumberOnly) filtered = filtered.filter { it.isDigit() }
-            if (filtered.length > maxLength) filtered = filtered.take(maxLength)
-            onValueChange(filtered)
-        },
-        placeholder = {
-            Text(
-                text = hint,
-                color = colors.Grey02,
-                style = myStyle
+
+    Column {
+        Box(
+            modifier = modifier
+                .height(48.dp)
+        ) {
+            OutlinedTextField(
+                value = value,
+                onValueChange = { input ->
+                    var filtered = input
+                    if (isNumberOnly) filtered = filtered.filter { it.isDigit() }
+                    if (filtered.length > maxLength) filtered = filtered.take(maxLength)
+                    onValueChange(filtered)
+                },
+                placeholder = {
+                    Text(
+                        text = hint,
+                        color = colors.Grey02,
+                        style = myStyle
+                    )
+                },
+                textStyle = myStyle,
+                modifier = Modifier.fillMaxSize(),
+                shape = RoundedCornerShape(12.dp),
+                colors = TextFieldDefaults.colors(
+                    focusedTextColor = colors.White,
+                    focusedIndicatorColor = if (showWarning) colors.Red else Color.Transparent,
+                    unfocusedIndicatorColor = if (showWarning) colors.Red else Color.Transparent,
+                    focusedContainerColor = containerColor,
+                    unfocusedContainerColor = containerColor,
+                    cursorColor = colors.NeonGreen
+                ),
+                trailingIcon = {
+                    if (showIcon) {
+                        if (value.isNotEmpty()) {
+                            Icon(
+                                painter = painterResource(id = R.drawable.ic_x_circle_white),
+                                contentDescription = "Clear text",
+                                modifier = Modifier.clickable { onValueChange("")},
+                                tint = Color.Unspecified
+                            )
+                        } else {
+                            Icon(
+                                painter = painterResource(id = R.drawable.ic_x_circle),
+                                contentDescription = "Clear text"
+                            )
+                        }
+                    }
+                },
+                singleLine = true,
+                keyboardOptions = KeyboardOptions(keyboardType = keyboardType)
+
             )
-        },
-        textStyle = myStyle,
-        modifier = modifier
-            .fillMaxWidth()
-            .height(48.dp),
-        shape = RoundedCornerShape(12.dp),
-        colors = TextFieldDefaults.colors(
-            focusedTextColor = colors.White,
-            focusedIndicatorColor = if (showWarning) colors.Red else Color.Transparent,
-            unfocusedIndicatorColor = if (showWarning) colors.Red else Color.Transparent,
-            focusedContainerColor = colors.DarkGrey50,
-            unfocusedContainerColor = colors.DarkGrey50,
-            cursorColor = colors.NeonGreen
-        ),
-        trailingIcon = {
-            if (value.isNotEmpty()) {
-                Icon(
-                    painter = painterResource(id = R.drawable.ic_x_circle_white),
-                    contentDescription = "Clear text",
-                    modifier = Modifier.clickable { onValueChange("") },
-                    tint = Color.Unspecified
-                )
-            } else {
-                Icon(
-                    painter = painterResource(id = R.drawable.ic_x_circle),
-                    contentDescription = "Clear text"
-                )
+
+            if (showLimit && maxLength != Int.MAX_VALUE) {
+                Box(
+                    modifier = Modifier
+                        .align(Alignment.CenterEnd)
+                        .padding(end = 14.dp)
+                ) {
+                    Text(
+                        text = "${value.length}/$maxLength",
+                        color = colors.White,
+                        style = typography.info_r400_s12_h24
+                    )
+                }
             }
-        },
-        singleLine = true,
-        keyboardOptions = KeyboardOptions(keyboardType = keyboardType)
-    )
-    if (showWarning) {
-        Spacer(modifier = Modifier.height(4.dp))
-        Text(
-            text = warningMessage,
-            color = colors.Red,
-            style = typography.info_r400_s12.copy(lineHeight = 12.sp)
-        )
+        }
+        if (showWarning) {
+            Spacer(modifier = Modifier.height(4.dp))
+            Text(
+                text = warningMessage,
+                color = colors.Red,
+                style = typography.info_r400_s12.copy(lineHeight = 12.sp)
+            )
+        }
     }
 }
 
-
 @Composable
 @Preview(showBackground = true, backgroundColor = 0xFF000000, widthDp = 360, heightDp = 200)
 fun WarningTextFieldPreviewEmpty() {
-    var password by remember { mutableStateOf("") }
+    var text by rememberSaveable { mutableStateOf("") }
 
     Box(
         modifier = Modifier.size(width = 360.dp, height = 200.dp),
         contentAlignment = Alignment.Center
     ) {
         WarningTextField(
-            value = password,
-            onValueChange = { password = it },
-            hint = "4자리 숫자로 입장 비밀번호를 설정",
-            showWarning = password.isNotEmpty() && password.length < 4,
-            warningMessage = "4자리 숫자를 입력해주세요.",
-            maxLength = 4,
-            isNumberOnly = true,
-            keyboardType = KeyboardType.NumberPassword
+            value = text,
+            onValueChange = { text = it },
+            hint = "인풋 텍스트",
+            showWarning = true,
+            showIcon = false,
+            showLimit = true,
+            maxLength = 10,
+            warningMessage = "경고 메시지를 입력해주세요."
         )
     }
 }
 
 @Composable
 @Preview(showBackground = true, backgroundColor = 0xFF000000, widthDp = 360, heightDp = 200)
 fun WarningTextFieldPreviewNormal() {
+    var text by rememberSaveable { mutableStateOf("") }
+
+    Box(
+        modifier = Modifier.size(width = 360.dp, height = 200.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        WarningTextField(
+
+            value = text,
+            onValueChange  = { text = it },
+            hint = "인풋 텍스트",
+            showWarning = false,
+            showIcon = true,
+            showLimit = false
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true, backgroundColor = 0xFF000000, widthDp = 360, heightDp = 200)
+fun WarningTextFieldPreviewNormal_numberonly() {
     var password by remember { mutableStateOf("") }
 
     Box(
@@ -141,4 +191,4 @@ fun WarningTextFieldPreviewNormal() {
             keyboardType = KeyboardType.NumberPassword
         )
     }
-}
+}

app/src/main/java/com/texthip/thip/ui/common/header/AuthorHeader.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.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -23,6 +24,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
@@ -38,6 +40,7 @@ fun AuthorHeader(
     nickname: String,
     badgeText: String,
     buttonText: String,
+    buttonWidth: Dp? = null,
     onButtonClick: () -> Unit = {}
 ) {
     Row(
@@ -81,9 +84,15 @@ fun AuthorHeader(
         }
         OutlinedButton(
             modifier = Modifier
-                .size(width = 51.dp, height = 35.dp),
+                .then(
+                    if (buttonWidth != null)
+                        Modifier
+                            .width(buttonWidth)
+                            .height(33.dp)
+                    else Modifier
+                ),
             text = buttonText,
-            textStyle = typography.menu_m500_s14_h24,
+            textStyle = typography.view_m500_s14,
             onClick = onButtonClick
         )
     }
@@ -97,7 +106,8 @@ fun PreviewAuthorHeader() {
             profileImage = null,
             nickname = "열자자제한열열자제한",
             badgeText = "칭호칭호칭호",
-            buttonText = "구독"
+            buttonText = "구독",
+            buttonWidth = 60.dp
         )
     }
 }

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

@@ -40,7 +40,7 @@ fun ProfileBar(
     bottomTextColor: Color = colors.NeonGreen, // todo: 서버에서 색 보내주는걸로 받기?
     showSubscriberInfo: Boolean,
     subscriberCount: Int = 0,
-    hoursAgo: Int = 0,
+    hoursAgo: String = "",
     onClick: () -> Unit = { }
 ) {
     Row(
@@ -107,7 +107,7 @@ fun ProfileBar(
             }
         } else {
             Text(
-                text = stringResource(R.string.hours_ago, hoursAgo),
+                text = hoursAgo,
                 style = typography.timedate_r400_s11,
                 color = colors.Grey01
             )
@@ -132,7 +132,7 @@ fun PreviewProfileBar() {
                 topText = "user.04",
                 bottomText = stringResource(R.string.influencer),
                 showSubscriberInfo = false,
-                hoursAgo = 7
+                hoursAgo = "10시간 전"
             )
         }
     }

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

@@ -25,7 +25,7 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 fun ToastWithDate(
     modifier: Modifier = Modifier,
     message: String,
-    date: String
+    date: String? = null
 ) {
     Box(
         modifier = modifier
@@ -41,18 +41,20 @@ fun ToastWithDate(
         Row(
             modifier = Modifier.fillMaxWidth(),
             verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.SpaceBetween
+            horizontalArrangement = if (date != null) Arrangement.SpaceBetween else Arrangement.Start
         ) {
             Text(
                 text = message,
                 color = colors.White,
                 style = typography.view_m500_s12_h20
             )
-            Text(
-                text = date,
-                color = colors.Grey02,
-                style = typography.timedate_r400_s11
-            )
+            if (date != null) {
+                Text(
+                    text = date,
+                    color = colors.Grey02,
+                    style = typography.timedate_r400_s11
+                )
+            }
         }
     }
 }