Skip to content

Commit 537ca9f

Browse files
Nico1eKimNico1eKim
authored
Merge pull request #42 from rbqks529/ui/#36-common_alarmpage
[UI] 공통 알림 페이지 구현 완료
2 parents e3536fb + 87036dd commit 537ca9f

7 files changed

Lines changed: 218 additions & 8 deletions

File tree

‎.idea/misc.xml‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/src/main/java/com/texthip/thip/ui/common/alarmpage/component/AlarmFilterRow.kt‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
package com.texthip.thip.ui.common.alarmpage.component
2+
3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Row
5+
import androidx.compose.runtime.Composable
6+
import androidx.compose.runtime.getValue
7+
import androidx.compose.runtime.mutableStateOf
8+
import androidx.compose.runtime.remember
9+
import androidx.compose.runtime.setValue
10+
import androidx.compose.ui.res.stringResource
11+
import androidx.compose.ui.tooling.preview.Preview
12+
import androidx.compose.ui.unit.dp
13+
import com.texthip.thip.R
14+
import com.texthip.thip.ui.common.buttons.OptionChipButton
15+
16+
@Composable
17+
fun AlarmFilterRow(
18+
selectedStates: BooleanArray,
19+
onToggle: (Int) -> Unit
20+
) {
21+
Row(
22+
horizontalArrangement = Arrangement.spacedBy(12.dp)
23+
) {
24+
OptionChipButton(
25+
text = stringResource(R.string.alarm_feed),
26+
isFilled = true,
27+
onClick = { onToggle(0) }
28+
)
29+
OptionChipButton(
30+
text = stringResource(R.string.alarm_group),
31+
isFilled = true,
32+
onClick = { onToggle(1) }
33+
)
34+
}
35+
}
36+
37+
@Preview(showBackground = true)
38+
@Composable
39+
fun AlarmFilterRowPreview() {
40+
var selectedStates by remember { mutableStateOf(booleanArrayOf(false, false)) }
41+
42+
AlarmFilterRow(
43+
selectedStates = selectedStates,
44+
onToggle = { idx ->
45+
selectedStates = selectedStates.copyOf().also { it[idx] = !it[idx] }
46+
}
47+
)
48+
}
49+

‎app/src/main/java/com/texthip/thip/ui/common/alarmpage/mock/AlarmItem.kt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
package com.texthip.thip.ui.common.alarmpage.mock
2+
3+
data class AlarmItem(
4+
val id: Int,
5+
val badgeText: String,
6+
val title: String,
7+
val message: String,
8+
val timeAgo: String,
9+
var isRead: Boolean
10+
)

‎app/src/main/java/com/texthip/thip/ui/common/alarmpage/screen/AlarmScreen.kt‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
package com.texthip.thip.ui.common.alarmpage.screen
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Arrangement
5+
import androidx.compose.foundation.layout.Column
6+
import androidx.compose.foundation.layout.PaddingValues
7+
import androidx.compose.foundation.layout.Spacer
8+
import androidx.compose.foundation.layout.fillMaxSize
9+
import androidx.compose.foundation.layout.height
10+
import androidx.compose.foundation.layout.padding
11+
import androidx.compose.foundation.lazy.LazyColumn
12+
import androidx.compose.foundation.lazy.items
13+
import androidx.compose.material3.Icon
14+
import androidx.compose.material3.Text
15+
import androidx.compose.runtime.Composable
16+
import androidx.compose.runtime.getValue
17+
import androidx.compose.runtime.mutableStateOf
18+
import androidx.compose.runtime.remember
19+
import androidx.compose.runtime.setValue
20+
import androidx.compose.ui.Alignment
21+
import androidx.compose.ui.Modifier
22+
import androidx.compose.ui.res.painterResource
23+
import androidx.compose.ui.res.stringResource
24+
import androidx.compose.ui.tooling.preview.Preview
25+
import androidx.compose.ui.unit.dp
26+
import com.texthip.thip.R
27+
import com.texthip.thip.ui.common.alarmpage.component.AlarmFilterRow
28+
import com.texthip.thip.ui.common.alarmpage.mock.AlarmItem
29+
import com.texthip.thip.ui.common.cards.CardAlarm
30+
import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
31+
import com.texthip.thip.ui.theme.ThipTheme
32+
import com.texthip.thip.ui.theme.ThipTheme.colors
33+
import com.texthip.thip.ui.theme.ThipTheme.typography
34+
35+
@Composable
36+
fun AlarmScreen(
37+
alarmItems: List<AlarmItem>, onCardClick: (AlarmItem) -> Unit = {}
38+
) {
39+
var selectedStates by remember { mutableStateOf(booleanArrayOf(false, false)) }
40+
var alarms by remember { mutableStateOf(alarmItems) }
41+
42+
val filteredList = when {
43+
selectedStates[0] && !selectedStates[1] -> alarms.filter { it.badgeText == stringResource(R.string.alarm_feed) }
44+
!selectedStates[0] && selectedStates[1] -> alarms.filter { it.badgeText == stringResource(R.string.alarm_group) }
45+
else -> alarms
46+
}
47+
48+
Column(
49+
Modifier
50+
.fillMaxSize()
51+
) {
52+
DefaultTopAppBar(
53+
title = stringResource(R.string.alarm_string),
54+
onLeftClick = {},
55+
)
56+
Column(
57+
Modifier
58+
.fillMaxSize()
59+
.padding(horizontal = 20.dp)
60+
) {
61+
Spacer(modifier = Modifier.height(20.dp))
62+
AlarmFilterRow(
63+
selectedStates = selectedStates, onToggle = { idx ->
64+
selectedStates = selectedStates.copyOf().also { it[idx] = !it[idx] }
65+
})
66+
Spacer(modifier = Modifier.height(20.dp))
67+
68+
if (filteredList.isEmpty()) {
69+
70+
Column(
71+
modifier = Modifier.fillMaxSize(),
72+
verticalArrangement = Arrangement.Center,
73+
horizontalAlignment = Alignment.CenterHorizontally
74+
) {
75+
Icon(
76+
painter = painterResource(R.drawable.ic_notification),
77+
contentDescription = null,
78+
tint = colors.Grey02,
79+
)
80+
Spacer(modifier = Modifier.height(12.dp))
81+
Text(
82+
text = stringResource(R.string.alarm_notification_comment),
83+
style = typography.smalltitle_sb600_s16_h20,
84+
color = colors.Grey01
85+
)
86+
}
87+
} else {
88+
LazyColumn(
89+
verticalArrangement = Arrangement.spacedBy(20.dp),
90+
contentPadding = PaddingValues(bottom = 20.dp),
91+
modifier = Modifier.fillMaxSize()
92+
) {
93+
items(filteredList, key = { it.id }) { alarm ->
94+
CardAlarm(
95+
badgeText = alarm.badgeText,
96+
title = alarm.title,
97+
message = alarm.message,
98+
timeAgo = alarm.timeAgo,
99+
isRead = alarm.isRead,
100+
onClick = {
101+
alarms = alarms.map {
102+
if (it.id == alarm.id) it.copy(isRead = true) else it
103+
}
104+
})
105+
}
106+
}
107+
}
108+
}
109+
}
110+
}
111+
112+
113+
@Preview(showBackground = true)
114+
@Composable
115+
fun AlarmScreenPreview() {
116+
ThipTheme {
117+
AlarmScreen(
118+
alarmItems = listOf(
119+
AlarmItem(1, "피드", "내 글을 좋아합니다.", "user123님이 내 글에 좋아요를 눌렀어요.", "2", false),
120+
AlarmItem(2, "모임", "같이 읽기를 시작했어요!", "모임방에서 20분 동안 같이 읽기가 시작되었어요!", "7", false),
121+
AlarmItem(3, "피드", "내 글에 댓글이 달렸어요.", "user1: 진짜 공감합니다!", "2025.01.12", true),
122+
AlarmItem(4, "모임", "투표가 시작되었어요!", "투표지를 먼저 열람합니다.", "17", false)
123+
)
124+
)
125+
}
126+
}
127+
128+
@Preview(showBackground = true)
129+
@Composable
130+
fun AlarmScreenEmptyPreview() {
131+
ThipTheme {
132+
AlarmScreen(
133+
alarmItems = emptyList()
134+
)
135+
}
136+
}

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import androidx.compose.foundation.layout.Column
99
import androidx.compose.foundation.layout.Row
1010
import androidx.compose.foundation.layout.Spacer
1111
import androidx.compose.foundation.layout.fillMaxWidth
12+
import androidx.compose.foundation.layout.height
13+
import androidx.compose.foundation.layout.offset
1214
import androidx.compose.foundation.layout.padding
1315
import androidx.compose.foundation.layout.size
1416
import androidx.compose.foundation.layout.width
@@ -42,8 +44,8 @@ fun CardAlarm(
4244
message: String,
4345
timeAgo: String,
4446
isRead: Boolean = false,
45-
containerColorUnread: Color = colors.DarkGrey, // 안읽음 상태의 배경색
46-
containerColorRead: Color = colors.DarkGrey02, // 읽음 상태의 배경색
47+
containerColorUnread: Color = colors.DarkGrey02, // 안읽음 상태의 배경색
48+
containerColorRead: Color = colors.DarkGrey03, // 읽음 상태의 배경색
4749
onClick: () -> Unit = {}
4850
) {
4951
Card(
@@ -86,19 +88,20 @@ fun CardAlarm(
8688
)
8789
}
8890

89-
Spacer(modifier = Modifier.width(12.dp))
91+
Spacer(modifier = Modifier.width(8.dp))
9092

9193
// 내용 (제목, 빨간 점, 시간, 메시지)
9294
Column(
93-
modifier = Modifier.weight(1f)
95+
modifier = Modifier.weight(1f),
96+
verticalArrangement = Arrangement.Center
9497
) {
9598
Row(
9699
modifier = Modifier.fillMaxWidth(),
97100
verticalAlignment = Alignment.CenterVertically
98101
) {
99102
Text(
100103
text = title,
101-
style = typography.menu_sb600_s14_h24,
104+
style = typography.view_m500_s14,
102105
color = if (isRead) colors.Grey01 else colors.White,
103106
modifier = Modifier.weight(1f),
104107
maxLines = 1,
@@ -110,7 +113,6 @@ fun CardAlarm(
110113
) {
111114
// 안읽음 상태일 때만 빨간 점
112115
if (!isRead) {
113-
Spacer(modifier = Modifier.width(8.dp))
114116
Box(
115117
modifier = Modifier
116118
.size(6.dp)
@@ -121,15 +123,18 @@ fun CardAlarm(
121123

122124
Text(
123125
text = timeAgo + stringResource(R.string.time_ago),
124-
style = typography.view_m500_s12_h20,
126+
style = typography.timedate_r400_s11,
125127
color = if (isRead) colors.Grey02 else colors.Grey01,
128+
modifier = Modifier
129+
.padding(top = 7.dp, end = 2.dp)
130+
.offset(y = (-5).dp)
126131
)
127132
}
128133
}
129134
}
130135
}
131136

132-
Spacer(modifier = Modifier.width(12.dp))
137+
Spacer(modifier = Modifier.height(10.dp))
133138

134139
Text(
135140
text = message,

‎app/src/main/java/com/texthip/thip/ui/theme/Color.kt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ val Grey02 = Color(0xFF888888)
3535
val Grey03 = Color(0xFF525252)
3636
val DarkGrey = Color(0xFF3D3D3D)
3737
val DarkGrey50 = Color(0x803D3D3D)
38+
val DarkGrey03 = Color(0xFF1D1D1D)
3839
val DarkGrey02 = Color(0xFF282828)
3940
val DarkGrey01 = Color(0x4B4B4B4B)
4041
val Black = Color(0xFF121212)
@@ -71,6 +72,7 @@ data class ThipColors(
7172
val DarkGrey: Color,
7273
val darkGray01: Color,
7374
val DarkGrey50: Color,
75+
val DarkGrey03: Color,
7476
val DarkGrey02: Color,
7577
val Black: Color,
7678
val Black50: Color,
@@ -106,6 +108,7 @@ val defaultThipColors = ThipColors(
106108
DarkGrey = DarkGrey,
107109
darkGray01 = DarkGrey01,
108110
DarkGrey50 = DarkGrey50,
111+
DarkGrey03 = DarkGrey03,
109112
DarkGrey02 = DarkGrey02,
110113
Black = Black,
111114
Black50 = Black50,

‎app/src/main/res/values/strings.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,12 @@
167167
<string name="view_by_page">페이지별 보기</string>
168168
<string name="view_by_all">총평 보기</string>
169169

170+
<!-- alarm -->
171+
<string name="alarm_feed">피드</string>
172+
<string name="alarm_group">모임</string>
173+
<string name="alarm_string">알림</string>
174+
<string name="alarm_notification_comment">새로운 알림이 없어요</string>
175+
170176
<!-- group makeroom -->
171177
<string name="group_making_group">모임 만들기</string>
172178
<string name="group_saved_book">저장한 책</string>

0 commit comments

Comments
 (0)