[refactor]:ReactionScreen 필터링 로직 적용, EditProfileScreen 텍스트필드 적용 및 컴포넌트 수정(#26)

JJUYAAA · JJUYAAA · commit 83ee93561c60 · 2025-07-02T19:09:18.000+09:00
diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardAlarm.kt b/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,7 +24,6 @@ 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.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
@@ -53,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)
diff --git a/app/src/main/java/com/texthip/thip/ui/common/forms/FormTextFieldDefault.kt b/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 = {
diff --git a/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt b/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,7 +46,7 @@ fun ProfileBar(
     Row(
         modifier = modifier
             .fillMaxWidth()
-            .padding( vertical = 12.dp),
+            .padding( vertical = 12.dp)
             .clickable { onClick() },
         verticalAlignment = Alignment.CenterVertically
     ) {
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/EditProfileScreen.kt b/app/src/main/java/com/texthip/thip/ui/myPage/EditProfileScreen.kt
@@ -1,6 +1,7 @@
 package com.texthip.thip.ui.myPage.screen
 
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.FlowRow
@@ -21,7 +22,7 @@ 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.common.forms.BaseInputTextField
+import com.texthip.thip.ui.common.forms.FormTextFieldDefault
 import com.texthip.thip.ui.common.topappbar.InputTopAppBar
 import com.texthip.thip.ui.myPage.component.RoleCard
 import com.texthip.thip.ui.myPage.mock.RoleItem
@@ -91,7 +92,12 @@ fun EditProfileScreen() {
                     .padding(bottom = 12.dp)
             )
             //TODO 컴포넌트 수정 필요 -> text count 추가, boolean 값으로 icon, limit 설정가능하도록
-            BaseInputTextField(
+            FormTextFieldDefault(
+                modifier = Modifier.fillMaxWidth(),
+                showLimit = true,
+                limit = 10,
+                showIcon = false,
+                containerColor = colors.DarkGrey02,
                 hint = stringResource(R.string.change_nickname)
             )
             Spacer(modifier = Modifier.height(40.dp))
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/ReactionsScreen.kt b/app/src/main/java/com/texthip/thip/ui/myPage/ReactionsScreen.kt
@@ -21,7 +21,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.texthip.thip.R
 import com.texthip.thip.ui.common.buttons.OptionChipButton
-import com.texthip.thip.ui.common.cards.NotificationCard
+import com.texthip.thip.ui.common.cards.CardAlarm
 import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
 import com.texthip.thip.ui.myPage.mock.ReactionItem
 import com.texthip.thip.ui.theme.Black
@@ -30,21 +30,30 @@ import com.texthip.thip.ui.theme.Black
 fun ReactionsScreen() {
     //추후 뷰모델로 수정 예정
     val reactions = listOf(
-        ReactionItem("@user 1님의 피드 글","어쩌구 저쩌구 콘텐츠 내용입니다.어쩌구 저쩌구 콘텐츠 내용입니다.어쩌구 저쩌구 콘텐츠 내용입니다.", "2",true),
-        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "7", true),
-        ReactionItem("@user 3님의 기록", "어쩌구 저쩌구 콘텐츠 내용입니다.", "17", true),
-        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "7", true),
-        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "7", true),
-        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "7", true),
-        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "7", true),
-        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "7", true),
-        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "7", true),
-        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "7", true),
-        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "7", true),
-        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "7", true)
+        ReactionItem("@user 1님의 피드 글","어쩌구 저쩌구 콘텐츠 내용입니다.어쩌구 저쩌구 콘텐츠 내용입니다.어쩌구 저쩌구 콘텐츠 내용입니다.","좋아요", "2"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글","7"),
+        ReactionItem("@user 3님의 기록", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글", "17"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "좋아요", "25"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글", "7"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글", "7"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "좋아요", "7"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글", "7"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글", "7"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "좋아요", "7"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글", "7"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "좋아요", "7")
     )
     var isLikesSelected by remember { mutableStateOf(false) }
     var isCommentsSelected by remember { mutableStateOf(false) }
+    val filteredReactions = reactions.filter { item ->
+        when {
+            isLikesSelected && isCommentsSelected -> true
+            isLikesSelected -> item.type == stringResource(R.string.likes)
+            isCommentsSelected -> item.type == stringResource(R.string.comments)
+            else -> true
+        }
+    }
+
     Scaffold(
         containerColor = Black,
         topBar = {
@@ -63,16 +72,14 @@ fun ReactionsScreen() {
             Row(modifier = Modifier.padding(start = 20.dp, top = 20.dp, bottom = 20.dp)) {
                 OptionChipButton(
                     text = stringResource(R.string.likes),
-                    isFilled = true,
-                    onClick = {
-                    }
+                    isFilled = isLikesSelected,
+                    onClick = {isLikesSelected = !isLikesSelected}
                 )
                 Spacer(modifier = Modifier.width(12.dp))
                 OptionChipButton(
                     text = stringResource(R.string.comments),
-                    isFilled = true,
-                    onClick = {
-                    }
+                    isFilled = isCommentsSelected,
+                    onClick = {isCommentsSelected = !isCommentsSelected}
                 )
 
             }
@@ -82,12 +89,13 @@ fun ReactionsScreen() {
                     .padding(horizontal = 20.dp),
                 verticalArrangement = Arrangement.spacedBy(20.dp)
             ) {
-                items(reactions) { item ->
-                    NotificationCard(
+                items(filteredReactions) { item ->
+                    CardAlarm(
                         title = item.title,
                         message = item.message,
                         timeAgo = item.timeAgo,
-                        isRead = item.isRead,
+                        isRead = true,
+                        badgeText = item.type,
                         onClick = {}
                     )
                 }
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/mock/ReactionItem.kt b/app/src/main/java/com/texthip/thip/ui/myPage/mock/ReactionItem.kt
@@ -3,6 +3,6 @@ package com.texthip.thip.ui.myPage.mock
 data class ReactionItem(
     val title: String,
     val message: String,
-    val timeAgo: String,
-    val isRead: Boolean
+    val type: String,
+    val timeAgo: String
 )
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/screen/MyPageScreen.kt b/app/src/main/java/com/texthip/thip/ui/myPage/screen/MyPageScreen.kt
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/MainNavHost.kt b/app/src/main/java/com/texthip/thip/ui/navigator/MainNavHost.kt
@@ -7,7 +7,7 @@ import androidx.navigation.NavHostController
 import com.texthip.thip.ui.bookSearch.screen.BookSearchScreen
 import com.texthip.thip.ui.feed.screen.FeedScreen
 import com.texthip.thip.ui.group.screen.GroupScreen
-import com.texthip.thip.ui.myPage.MyPageScreen
+import com.texthip.thip.ui.myPage.screen.MyPageScreen
 
 @Composable
 fun MainNavHost(navController: NavHostController) {

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,6 @@ package com.texthip.thip.ui.myPage.mock`
`3`	`3`	`data class ReactionItem(`
`4`	`4`	`val title: String,`
`5`	`5`	`val message: String,`
`6`		`- val timeAgo: String,`
`7`		`- val isRead: Boolean`
	`6`	`+ val type: String,`
	`7`	`+ val timeAgo: String`
`8`	`8`	`)`