From 85135e69d079afbc09fa81d82f864cc43e5cb969 Mon Sep 17 00:00:00 2001 From: Gyubin Date: Tue, 8 Jul 2025 13:00:40 +0900 Subject: [PATCH 1/4] =?UTF-8?q?[ui]:=20=EA=B8=B0=EC=A1=B4=EC=9D=98=20?= =?UTF-8?q?=EC=95=8C=EB=9E=8C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20(#36)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .idea/misc.xml | 2 ++ .../com/texthip/thip/ui/common/cards/CardAlarm.kt | 12 +++++++----- app/src/main/res/values/strings.xml | 5 +++++ 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/.idea/misc.xml b/.idea/misc.xml index 1e536c6c..38860e7c 100644 --- a/.idea/misc.xml +++ b/.idea/misc.xml @@ -1,6 +1,8 @@ + + \ No newline at end of file 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 index e23d86a6..16dd30ad 100644 --- 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 @@ -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 @@ -86,11 +87,12 @@ fun CardAlarm( ) } - Spacer(modifier = Modifier.width(12.dp)) + Spacer(modifier = Modifier.width(8.dp)) // 내용 (제목, 빨간 점, 시간, 메시지) Column( - modifier = Modifier.weight(1f) + modifier = Modifier.weight(1f), + verticalArrangement = Arrangement.Center ) { Row( modifier = Modifier.fillMaxWidth(), @@ -98,7 +100,7 @@ fun CardAlarm( ) { Text( text = title, - style = typography.menu_sb600_s14_h24, + style = typography.view_m500_s14, color = if (isRead) colors.Grey01 else colors.White, modifier = Modifier.weight(1f), maxLines = 1, @@ -121,7 +123,7 @@ fun CardAlarm( Text( text = timeAgo + stringResource(R.string.time_ago), - style = typography.view_m500_s12_h20, + style = typography.timedate_r400_s11, color = if (isRead) colors.Grey02 else colors.Grey01, ) } @@ -129,7 +131,7 @@ fun CardAlarm( } } - Spacer(modifier = Modifier.width(12.dp)) + Spacer(modifier = Modifier.height(12.dp)) Text( text = message, diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index d3b28e70..e675b57c 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -166,4 +166,9 @@ 내 기록 페이지별 보기 총평 보기 + + + 피드 + 모임 + 알림 \ No newline at end of file From d24d2ecac5b8b688efd5b68f6a6d34c48469f899 Mon Sep 17 00:00:00 2001 From: Gyubin Date: Tue, 8 Jul 2025 13:01:01 +0900 Subject: [PATCH 2/4] =?UTF-8?q?[ui]:=20=EC=95=8C=EB=9E=8C=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=ED=85=9C=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=ED=95=84?= =?UTF-8?q?=ED=84=B0=20=EC=B6=94=EA=B0=80=20(#36)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../alarmpage/component/AlarmFilterRow.kt | 49 +++++++++++++++++++ .../ui/common/alarmpage/mock/AlarmItem.kt | 10 ++++ app/src/main/res/drawable/ic_notification.xml | 9 ++++ 3 files changed, 68 insertions(+) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/alarmpage/component/AlarmFilterRow.kt create mode 100644 app/src/main/java/com/texthip/thip/ui/common/alarmpage/mock/AlarmItem.kt create mode 100644 app/src/main/res/drawable/ic_notification.xml diff --git a/app/src/main/java/com/texthip/thip/ui/common/alarmpage/component/AlarmFilterRow.kt b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/component/AlarmFilterRow.kt new file mode 100644 index 00000000..f70659bc --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/component/AlarmFilterRow.kt @@ -0,0 +1,49 @@ +package com.texthip.thip.ui.common.alarmpage.component + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Row +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.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.buttons.OptionChipButton + +@Composable +fun AlarmFilterRow( + selectedStates: BooleanArray, + onToggle: (Int) -> Unit +) { + Row( + horizontalArrangement = Arrangement.spacedBy(12.dp) + ) { + OptionChipButton( + text = stringResource(R.string.alarm_feed), + isFilled = true, + onClick = { onToggle(0) } + ) + OptionChipButton( + text = stringResource(R.string.alarm_group), + isFilled = true, + onClick = { onToggle(1) } + ) + } +} + +@Preview(showBackground = true) +@Composable +fun AlarmFilterRowPreview() { + var selectedStates by remember { mutableStateOf(booleanArrayOf(false, false)) } + + AlarmFilterRow( + selectedStates = selectedStates, + onToggle = { idx -> + selectedStates = selectedStates.copyOf().also { it[idx] = !it[idx] } + } + ) +} + diff --git a/app/src/main/java/com/texthip/thip/ui/common/alarmpage/mock/AlarmItem.kt b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/mock/AlarmItem.kt new file mode 100644 index 00000000..84bc094f --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/mock/AlarmItem.kt @@ -0,0 +1,10 @@ +package com.texthip.thip.ui.common.alarmpage.mock + +data class AlarmItem( + val id: Int, + val badgeText: String, + val title: String, + val message: String, + val timeAgo: String, + var isRead: Boolean +) \ No newline at end of file diff --git a/app/src/main/res/drawable/ic_notification.xml b/app/src/main/res/drawable/ic_notification.xml new file mode 100644 index 00000000..42aaeff8 --- /dev/null +++ b/app/src/main/res/drawable/ic_notification.xml @@ -0,0 +1,9 @@ + + + From 387ed2e307768e5e4dc9461f8ab2bd80ad177526 Mon Sep 17 00:00:00 2001 From: Gyubin Date: Tue, 8 Jul 2025 13:02:08 +0900 Subject: [PATCH 3/4] =?UTF-8?q?[ui]:=20=EC=95=8C=EB=9E=8C=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4(=EA=B3=B5=ED=86=B5)=20=EA=B5=AC=ED=98=84=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C=20=20(#36)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/common/alarmpage/screen/AlarmScreen.kt | 145 ++++++++++++++++++ app/src/main/res/values/strings.xml | 1 + 2 files changed, 146 insertions(+) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/alarmpage/screen/AlarmScreen.kt diff --git a/app/src/main/java/com/texthip/thip/ui/common/alarmpage/screen/AlarmScreen.kt b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/screen/AlarmScreen.kt new file mode 100644 index 00000000..e75881ef --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/screen/AlarmScreen.kt @@ -0,0 +1,145 @@ +package com.texthip.thip.ui.common.alarmpage.screen + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +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.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.common.alarmpage.component.AlarmFilterRow +import com.texthip.thip.ui.common.alarmpage.mock.AlarmItem +import com.texthip.thip.ui.common.cards.CardAlarm +import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar +import com.texthip.thip.ui.theme.ThipTheme +import com.texthip.thip.ui.theme.ThipTheme.colors +import com.texthip.thip.ui.theme.ThipTheme.typography + +@Composable +fun AlarmScreen( + alarmItems: List, onCardClick: (AlarmItem) -> Unit = {} +) { + var selectedStates by remember { mutableStateOf(booleanArrayOf(false, false)) } + var alarms by remember { mutableStateOf(alarmItems) } + + val filteredList = when { + selectedStates[0] && !selectedStates[1] -> alarms.filter { it.badgeText == stringResource(R.string.alarm_feed) } + !selectedStates[0] && selectedStates[1] -> alarms.filter { it.badgeText == stringResource(R.string.alarm_group) } + selectedStates[0] && selectedStates[1] -> alarms + else -> alarms + } + + Column( + Modifier + .background(colors.Black) + .fillMaxSize() + ) { + DefaultTopAppBar( + title = stringResource(R.string.alarm_string), + onLeftClick = {}, + ) + Column( + Modifier + .background(colors.Black) + .fillMaxSize() + .padding(horizontal = 20.dp) + ) { + Spacer(modifier = Modifier.height(20.dp)) + AlarmFilterRow( + selectedStates = selectedStates, onToggle = { idx -> + selectedStates = selectedStates.copyOf().also { it[idx] = !it[idx] } + }) + Spacer(modifier = Modifier.height(20.dp)) + + if (filteredList.isEmpty()) { + Column( + modifier = Modifier.fillMaxSize(), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally + ) { + Column( + modifier = Modifier.fillMaxSize(), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally + ) { + Icon( + painter = painterResource(R.drawable.ic_notification), + contentDescription = null, + tint = colors.Grey02, + ) + Spacer(modifier = Modifier.height(12.dp)) + Text( + text = stringResource(R.string.alarm_notification_comment), + style = typography.smalltitle_sb600_s16_h20, + color = colors.Grey01 + ) + } + + } + } else { + LazyColumn( + verticalArrangement = Arrangement.spacedBy(20.dp), + contentPadding = PaddingValues(bottom = 20.dp), + modifier = Modifier.fillMaxSize() + ) { + items(filteredList, key = { it.id }) { alarm -> + CardAlarm( + badgeText = alarm.badgeText, + title = alarm.title, + message = alarm.message, + timeAgo = alarm.timeAgo, + isRead = alarm.isRead, + onClick = { + alarms = alarms.map { + if (it.id == alarm.id) it.copy(isRead = true) else it + } + }) + } + } + } + } + } +} + + +@Preview(showBackground = true) +@Composable +fun AlarmScreenPreview() { + ThipTheme { + AlarmScreen( + alarmItems = listOf( + AlarmItem(1, "피드", "내 글을 좋아합니다.", "user123님이 내 글에 좋아요를 눌렀어요.", "2", false), + AlarmItem(2, "모임", "같이 읽기를 시작했어요!", "모임방에서 20분 동안 같이 읽기가 시작되었어요!", "7", false), + AlarmItem(3, "피드", "내 글에 댓글이 달렸어요.", "user1: 진짜 공감합니다!", "2025.01.12", true), + AlarmItem(4, "모임", "투표가 시작되었어요!", "투표지를 먼저 열람합니다.", "17", false) + ) + ) + } +} + +@Preview(showBackground = true) +@Composable +fun AlarmScreenEmptyPreview() { + ThipTheme { + AlarmScreen( + alarmItems = emptyList() + ) + } +} \ No newline at end of file diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index e675b57c..26d74825 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -171,4 +171,5 @@ 피드 모임 알림 + 새로운 알림이 없어요 \ No newline at end of file From 5c618a0caa7ce7a5a5a8df51fc0aeb856e8cdd39 Mon Sep 17 00:00:00 2001 From: Gyubin Date: Wed, 9 Jul 2025 20:41:04 +0900 Subject: [PATCH 4/4] =?UTF-8?q?[ui]:=20AlarmScreen=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20CardAlarm=20=EB=B0=B0=EA=B2=BD=EC=83=89,=20?= =?UTF-8?q?=EB=B9=A8=EA=B0=84=20=EC=A0=90=20=EC=88=98=EC=A0=95=20(#36)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/common/alarmpage/screen/AlarmScreen.kt | 33 +++++++------------ .../texthip/thip/ui/common/cards/CardAlarm.kt | 11 ++++--- .../java/com/texthip/thip/ui/theme/Color.kt | 3 ++ 3 files changed, 22 insertions(+), 25 deletions(-) diff --git a/app/src/main/java/com/texthip/thip/ui/common/alarmpage/screen/AlarmScreen.kt b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/screen/AlarmScreen.kt index e75881ef..cefec058 100644 --- a/app/src/main/java/com/texthip/thip/ui/common/alarmpage/screen/AlarmScreen.kt +++ b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/screen/AlarmScreen.kt @@ -42,13 +42,11 @@ fun AlarmScreen( val filteredList = when { selectedStates[0] && !selectedStates[1] -> alarms.filter { it.badgeText == stringResource(R.string.alarm_feed) } !selectedStates[0] && selectedStates[1] -> alarms.filter { it.badgeText == stringResource(R.string.alarm_group) } - selectedStates[0] && selectedStates[1] -> alarms else -> alarms } Column( Modifier - .background(colors.Black) .fillMaxSize() ) { DefaultTopAppBar( @@ -57,7 +55,6 @@ fun AlarmScreen( ) Column( Modifier - .background(colors.Black) .fillMaxSize() .padding(horizontal = 20.dp) ) { @@ -69,29 +66,23 @@ fun AlarmScreen( Spacer(modifier = Modifier.height(20.dp)) if (filteredList.isEmpty()) { + Column( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { - Column( - modifier = Modifier.fillMaxSize(), - verticalArrangement = Arrangement.Center, - horizontalAlignment = Alignment.CenterHorizontally - ) { - Icon( - painter = painterResource(R.drawable.ic_notification), - contentDescription = null, - tint = colors.Grey02, - ) - Spacer(modifier = Modifier.height(12.dp)) - Text( - text = stringResource(R.string.alarm_notification_comment), - style = typography.smalltitle_sb600_s16_h20, - color = colors.Grey01 - ) - } - + Icon( + painter = painterResource(R.drawable.ic_notification), + contentDescription = null, + tint = colors.Grey02, + ) + Spacer(modifier = Modifier.height(12.dp)) + Text( + text = stringResource(R.string.alarm_notification_comment), + style = typography.smalltitle_sb600_s16_h20, + color = colors.Grey01 + ) } } else { LazyColumn( 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 index 16dd30ad..71e90ff4 100644 --- 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 @@ -10,6 +10,7 @@ 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.offset import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width @@ -43,8 +44,8 @@ fun CardAlarm( message: String, timeAgo: String, isRead: Boolean = false, - containerColorUnread: Color = colors.DarkGrey, // 안읽음 상태의 배경색 - containerColorRead: Color = colors.DarkGrey02, // 읽음 상태의 배경색 + containerColorUnread: Color = colors.DarkGrey02, // 안읽음 상태의 배경색 + containerColorRead: Color = colors.DarkGrey03, // 읽음 상태의 배경색 onClick: () -> Unit = {} ) { Card( @@ -112,7 +113,6 @@ fun CardAlarm( ) { // 안읽음 상태일 때만 빨간 점 if (!isRead) { - Spacer(modifier = Modifier.width(8.dp)) Box( modifier = Modifier .size(6.dp) @@ -125,13 +125,16 @@ fun CardAlarm( text = timeAgo + stringResource(R.string.time_ago), style = typography.timedate_r400_s11, color = if (isRead) colors.Grey02 else colors.Grey01, + modifier = Modifier + .padding(top = 7.dp, end = 2.dp) + .offset(y = (-5).dp) ) } } } } - Spacer(modifier = Modifier.height(12.dp)) + Spacer(modifier = Modifier.height(10.dp)) Text( text = message, diff --git a/app/src/main/java/com/texthip/thip/ui/theme/Color.kt b/app/src/main/java/com/texthip/thip/ui/theme/Color.kt index 18710484..31961f3e 100644 --- a/app/src/main/java/com/texthip/thip/ui/theme/Color.kt +++ b/app/src/main/java/com/texthip/thip/ui/theme/Color.kt @@ -35,6 +35,7 @@ val Grey02 = Color(0xFF888888) val Grey03 = Color(0xFF525252) val DarkGrey = Color(0xFF3D3D3D) val DarkGrey50 = Color(0x803D3D3D) +val DarkGrey03 = Color(0xFF1D1D1D) val DarkGrey02 = Color(0xFF282828) val DarkGrey01 = Color(0x4B4B4B4B) val Black = Color(0xFF121212) @@ -71,6 +72,7 @@ data class ThipColors( val DarkGrey: Color, val darkGray01: Color, val DarkGrey50: Color, + val DarkGrey03: Color, val DarkGrey02: Color, val Black: Color, val Black50: Color, @@ -106,6 +108,7 @@ val defaultThipColors = ThipColors( DarkGrey = DarkGrey, darkGray01 = DarkGrey01, DarkGrey50 = DarkGrey50, + DarkGrey03 = DarkGrey03, DarkGrey02 = DarkGrey02, Black = Black, Black50 = Black50,