Skip to content

Commit 37f5b8a

Browse files
JJUYAAAJJUYAAA
authored
Merge pull request #63 from JJUYAAA/ui/#61-feed_qa
[UI] 피드 페이지 UI 수정 및 전체 QA 진행
2 parents f6c6175 + a3dfdf1 commit 37f5b8a

40 files changed

Lines changed: 1323 additions & 606 deletions

‎app/build.gradle.kts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,16 +66,16 @@ dependencies {
6666
implementation(libs.androidx.lifecycle.viewmodel.compose)
6767
implementation(libs.androidx.navigation.runtime.android)
6868
implementation(libs.kotlinx.serialization.json)
69-
implementation(libs.accompanist.pager)
70-
implementation(libs.accompanist.pager.indicators)
7169
implementation(libs.coil.compose)
70+
implementation(libs.foundation)
7271
testImplementation(libs.junit)
7372
androidTestImplementation(libs.androidx.junit)
7473
androidTestImplementation(libs.androidx.espresso.core)
7574
androidTestImplementation(platform(libs.androidx.compose.bom))
7675
androidTestImplementation(libs.androidx.ui.test.junit4)
7776
debugImplementation(libs.androidx.ui.tooling)
7877
debugImplementation(libs.androidx.ui.test.manifest)
78+
implementation("androidx.compose.foundation:foundation:1.5.0")
7979

8080
// Hilt
8181
implementation(libs.hilt.android)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ fun ActionBarButton(
8282
modifier = Modifier.clickable { onPinClick() },
8383
painter = painterResource(R.drawable.ic_pin),
8484
contentDescription = null,
85-
tint = Color.White
85+
tint = colors.White
8686
)
8787
}
8888
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ fun CardItemRoom(
109109
modifier = Modifier.size(20.dp),
110110
painter = painterResource(id = R.drawable.ic_group),
111111
contentDescription = "그룹 아이콘",
112-
tint = Color.White
112+
tint = colors.White
113113
)
114114
Spacer(modifier = Modifier.width(4.dp))
115115

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ fun CardItemRoomSmall(
116116
modifier = Modifier.size(20.dp),
117117
painter = painterResource(id = R.drawable.ic_group),
118118
contentDescription = "그룹 아이콘",
119-
tint = Color.White
119+
tint = colors.White
120120
)
121121
Spacer(modifier = Modifier.width(4.dp))
122122

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ fun CardRoomBook(
6868
Text(
6969
text = title,
7070
style = typography.menu_m500_s16_h24,
71-
color = Color.White,
71+
color = colors.White,
7272
maxLines = 1,
7373
modifier = Modifier.weight(1f),
7474
)
@@ -77,7 +77,7 @@ fun CardRoomBook(
7777
Icon(
7878
imageVector = ImageVector.vectorResource(R.drawable.ic_chevron_right),
7979
contentDescription = "더보기",
80-
tint = Color.White,
80+
tint = colors.White,
8181
)
8282
}
8383

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

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,19 @@ import androidx.compose.foundation.layout.padding
1111
import androidx.compose.foundation.layout.size
1212
import androidx.compose.foundation.layout.width
1313
import androidx.compose.foundation.shape.CircleShape
14+
import androidx.compose.material3.Icon
1415
import androidx.compose.material3.Text
1516
import androidx.compose.runtime.Composable
1617
import androidx.compose.ui.Alignment
1718
import androidx.compose.ui.Modifier
1819
import androidx.compose.ui.draw.clip
20+
import androidx.compose.ui.res.painterResource
21+
import androidx.compose.ui.res.stringResource
1922
import androidx.compose.ui.tooling.preview.Preview
2023
import androidx.compose.ui.unit.Dp
2124
import androidx.compose.ui.unit.dp
2225
import coil.compose.AsyncImage
26+
import com.texthip.thip.R
2327
import com.texthip.thip.ui.common.buttons.OutlinedButton
2428
import com.texthip.thip.ui.theme.ThipTheme
2529
import com.texthip.thip.ui.theme.ThipTheme.colors
@@ -34,6 +38,8 @@ fun AuthorHeader(
3438
buttonText: String = "",
3539
buttonWidth: Dp = 60.dp,
3640
showButton: Boolean = true,
41+
showThipNum: Boolean = false,
42+
thipNum: Int? = null,
3743
profileImageSize: Dp = 54.dp,
3844
onButtonClick: () -> Unit = {}
3945
) {
@@ -91,6 +97,19 @@ fun AuthorHeader(
9197
onClick = onButtonClick
9298
)
9399
}
100+
if(showThipNum && thipNum!=null){
101+
Text(
102+
text = stringResource(R.string.thip_num,thipNum),
103+
style = typography.view_r400_s11_h20,
104+
color = colors.White
105+
)
106+
Spacer(modifier = Modifier.width(18.dp))
107+
Icon(
108+
painter = painterResource(R.drawable.ic_chevron),
109+
contentDescription = null,
110+
tint = colors.White,
111+
)
112+
}
94113
}
95114
}
96115

@@ -110,8 +129,9 @@ fun PreviewAuthorHeader() {
110129
profileImage = null,
111130
nickname = "열자자제한열열자제한",
112131
badgeText = "칭호칭호칭호",
113-
buttonWidth = 60.dp,
114-
showButton = false
132+
showButton = false,
133+
showThipNum = true,
134+
thipNum = 10
115135
)
116136
}
117137
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ fun HeaderMenuBarTab(
2626
titles: List<String>,
2727
selectedTabIndex: Int,
2828
onTabSelected: (Int) -> Unit,
29-
indicatorColor: Color = Color.White,
29+
indicatorColor: Color = colors.White,
3030
) {
3131
ScrollableTabRow(
3232
selectedTabIndex = selectedTabIndex,

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
package com.texthip.thip.ui.common.modal
22

33
import androidx.compose.foundation.ScrollState
4+
import androidx.compose.runtime.Composable
45
import androidx.compose.ui.Modifier
56
import androidx.compose.ui.draw.drawBehind
67
import androidx.compose.ui.geometry.CornerRadius
78
import androidx.compose.ui.geometry.Offset
89
import androidx.compose.ui.geometry.Size
910
import androidx.compose.ui.graphics.Color
11+
import androidx.compose.ui.tooling.preview.Preview
1012
import androidx.compose.ui.unit.Dp
1113
import androidx.compose.ui.unit.dp
1214

‎app/src/main/java/com/texthip/thip/ui/feed/component/FeedSubscribelistBar.kt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import androidx.compose.foundation.layout.padding
1111
import androidx.compose.foundation.layout.size
1212
import androidx.compose.foundation.layout.width
1313
import androidx.compose.foundation.shape.CircleShape
14-
import androidx.compose.material.Icon
15-
import androidx.compose.material.Text
14+
import androidx.compose.material3.Icon
15+
import androidx.compose.material3.Text
1616
import androidx.compose.runtime.Composable
1717
import androidx.compose.ui.Alignment
1818
import androidx.compose.ui.Modifier
@@ -47,7 +47,7 @@ fun FeedSubscribeBarlist(
4747
Icon(
4848
painter = painterResource(id = R.drawable.ic_group),
4949
contentDescription = null,
50-
tint = Color.Unspecified
50+
tint = colors.White
5151
)
5252
Text(
5353
text = buildAnnotatedString {

‎app/src/main/java/com/texthip/thip/ui/feed/component/ImageViewerModal.kt‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
package com.texthip.thip.ui.feed.component
2+
3+
import androidx.compose.foundation.Image
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.clickable
6+
import androidx.compose.foundation.layout.Arrangement
7+
import androidx.compose.foundation.layout.Box
8+
import androidx.compose.foundation.layout.Row
9+
import androidx.compose.foundation.layout.fillMaxSize
10+
import androidx.compose.foundation.layout.padding
11+
import androidx.compose.foundation.layout.size
12+
import androidx.compose.foundation.pager.HorizontalPager
13+
import androidx.compose.foundation.pager.rememberPagerState
14+
import androidx.compose.foundation.shape.CircleShape
15+
import androidx.compose.material3.Icon
16+
import androidx.compose.material3.Text
17+
import androidx.compose.runtime.Composable
18+
import androidx.compose.ui.Alignment
19+
import androidx.compose.ui.Modifier
20+
import androidx.compose.ui.draw.clip
21+
import androidx.compose.ui.graphics.Color
22+
import androidx.compose.ui.graphics.painter.Painter
23+
import androidx.compose.ui.layout.ContentScale
24+
import androidx.compose.ui.res.painterResource
25+
import androidx.compose.ui.res.stringResource
26+
import androidx.compose.ui.tooling.preview.Preview
27+
import androidx.compose.ui.unit.dp
28+
import androidx.compose.ui.zIndex
29+
import com.texthip.thip.R
30+
import com.texthip.thip.ui.theme.ThipTheme
31+
import com.texthip.thip.ui.theme.ThipTheme.colors
32+
import com.texthip.thip.ui.theme.ThipTheme.typography
33+
34+
@Composable
35+
fun ImageViewerModal(
36+
images: List<Painter>,
37+
initialIndex: Int = 0,
38+
onDismiss: () -> Unit
39+
) {
40+
val pagerState = rememberPagerState(
41+
initialPage = initialIndex,
42+
pageCount = { images.size }
43+
)
44+
45+
Box(
46+
modifier = Modifier
47+
.fillMaxSize()
48+
.background(colors.Black)
49+
.clickable { onDismiss() }
50+
) {
51+
// 닫기 버튼
52+
Icon(
53+
painter = painterResource(R.drawable.ic_x),
54+
contentDescription = "닫기",
55+
tint = colors.White,
56+
modifier = Modifier
57+
.align(Alignment.TopEnd)
58+
.padding(20.dp)
59+
.size(24.dp)
60+
.clickable { onDismiss() }
61+
.zIndex(1f)
62+
)
63+
64+
// 이미지 페이저
65+
HorizontalPager(
66+
state = pagerState,
67+
modifier = Modifier
68+
.fillMaxSize()
69+
.clickable { /* HorizontalPager 내부 클릭 시 모달 닫기 방지 */ }
70+
) { page ->
71+
Box(
72+
modifier = Modifier.fillMaxSize(),
73+
contentAlignment = Alignment.Center
74+
) {
75+
Image(
76+
painter = images[page],
77+
contentDescription = null,
78+
contentScale = ContentScale.Fit, // 원본 비율 유지하면서 화면에 맞춤
79+
modifier = Modifier.fillMaxSize()
80+
)
81+
}
82+
}
83+
84+
// 페이지 인디케이터 (이미지가 2개 이상일 때만 표시)
85+
if (images.size > 1) {
86+
Row(
87+
modifier = Modifier
88+
.align(Alignment.BottomCenter)
89+
.padding(20.dp),
90+
horizontalArrangement = Arrangement.spacedBy(8.dp)
91+
) {
92+
repeat(images.size) { index ->
93+
Box(
94+
modifier = Modifier
95+
.size(8.dp)
96+
.clip(CircleShape)
97+
.background(
98+
if (index == pagerState.currentPage) colors.White
99+
else colors.White.copy(alpha = 0.4f)
100+
)
101+
)
102+
}
103+
}
104+
}
105+
106+
// 이미지 카운터 (예: 1/3)
107+
if (images.size > 1) {
108+
Text(
109+
text = stringResource(id = R.string.tag_count, images.size, 3),
110+
style = typography.copy_r400_s14,
111+
color = colors.White,
112+
modifier = Modifier
113+
.align(Alignment.TopCenter)
114+
.padding(20.dp)
115+
.background(
116+
colors.Black.copy(alpha = 0.5f),
117+
shape = androidx.compose.foundation.shape.RoundedCornerShape(12.dp)
118+
)
119+
.padding(horizontal = 12.dp, vertical = 6.dp)
120+
)
121+
}
122+
}
123+
}
124+
125+
126+
@Preview
127+
@Composable
128+
private fun ImageViewerModalSingleImagePreview() {
129+
ThipTheme {
130+
val mockImages = listOf(
131+
painterResource(R.drawable.bookcover_sample)
132+
)
133+
134+
ImageViewerModal(
135+
images = mockImages,
136+
initialIndex = 0,
137+
onDismiss = {}
138+
)
139+
}
140+
}
141+
142+
@Preview
143+
@Composable
144+
private fun ImageViewerModalMultipleImagesPreview() {
145+
ThipTheme {
146+
val mockImages = listOf(
147+
painterResource(R.drawable.character_art),
148+
painterResource(R.drawable.character_literature),
149+
painterResource(R.drawable.character_sociology)
150+
)
151+
152+
ImageViewerModal(
153+
images = mockImages,
154+
initialIndex = 1,
155+
onDismiss = { }
156+
)
157+
}
158+
}

0 commit comments

Comments
 (0)