[UI] 피드 페이지 UI 수정 및 전체 QA 진행

app/build.gradle.kts

@@ -66,16 +66,16 @@ dependencies {
     implementation(libs.androidx.lifecycle.viewmodel.compose)
     implementation(libs.androidx.navigation.runtime.android)
     implementation(libs.kotlinx.serialization.json)
-    implementation(libs.accompanist.pager)
-    implementation(libs.accompanist.pager.indicators)
     implementation(libs.coil.compose)
+    implementation(libs.foundation)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
     androidTestImplementation(platform(libs.androidx.compose.bom))
     androidTestImplementation(libs.androidx.ui.test.junit4)
     debugImplementation(libs.androidx.ui.tooling)
     debugImplementation(libs.androidx.ui.test.manifest)
+    implementation("androidx.compose.foundation:foundation:1.5.0")
 
     // Hilt
     implementation(libs.hilt.android)

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

@@ -82,7 +82,7 @@ fun ActionBarButton(
                     modifier = Modifier.clickable { onPinClick() },
                     painter = painterResource(R.drawable.ic_pin),
                     contentDescription = null,
-                    tint = Color.White
+                    tint = colors.White
                 )
             }
         }

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

@@ -109,7 +109,7 @@ fun CardItemRoom(
                             modifier = Modifier.size(20.dp),
                             painter = painterResource(id = R.drawable.ic_group),
                             contentDescription = "그룹 아이콘",
-                            tint = Color.White
+                            tint = colors.White
                         )
                         Spacer(modifier = Modifier.width(4.dp))
 

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

@@ -116,7 +116,7 @@ fun CardItemRoomSmall(
                             modifier = Modifier.size(20.dp),
                             painter = painterResource(id = R.drawable.ic_group),
                             contentDescription = "그룹 아이콘",
-                            tint = Color.White
+                            tint = colors.White
                         )
                         Spacer(modifier = Modifier.width(4.dp))
 

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

@@ -68,7 +68,7 @@ fun CardRoomBook(
                 Text(
                     text = title,
                     style = typography.menu_m500_s16_h24,
-                    color = Color.White,
+                    color = colors.White,
                     maxLines = 1,
                     modifier = Modifier.weight(1f),
                 )
@@ -77,7 +77,7 @@ fun CardRoomBook(
                 Icon(
                     imageVector = ImageVector.vectorResource(R.drawable.ic_chevron_right),
                     contentDescription = "더보기",
-                    tint = Color.White,
+                    tint = colors.White,
                 )
             }
 

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

@@ -11,15 +11,19 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+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 androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
+import com.texthip.thip.R
 import com.texthip.thip.ui.common.buttons.OutlinedButton
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
@@ -34,6 +38,8 @@ fun AuthorHeader(
     buttonText: String = "",
     buttonWidth: Dp = 60.dp,
     showButton: Boolean = true,
+    showThipNum: Boolean = false,
+    thipNum: Int? = null,
     profileImageSize: Dp = 54.dp,
     onButtonClick: () -> Unit = {}
 ) {
@@ -91,6 +97,19 @@ fun AuthorHeader(
             onClick = onButtonClick
             )
         }
+        if(showThipNum && thipNum!=null){
+            Text(
+                text = stringResource(R.string.thip_num,thipNum),
+                style = typography.view_r400_s11_h20,
+                color = colors.White
+            )
+            Spacer(modifier = Modifier.width(18.dp))
+            Icon(
+                painter = painterResource(R.drawable.ic_chevron),
+                contentDescription = null,
+                tint = colors.White,
+            )
+        }
     }
 }
 
@@ -110,8 +129,9 @@ fun PreviewAuthorHeader() {
                 profileImage = null,
                 nickname = "열자자제한열열자제한",
                 badgeText = "칭호칭호칭호",
-                buttonWidth = 60.dp,
-                showButton = false
+                showButton = false,
+                showThipNum = true,
+                thipNum = 10
             )
         }
     }

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

@@ -26,7 +26,7 @@ fun HeaderMenuBarTab(
     titles: List<String>,
     selectedTabIndex: Int,
     onTabSelected: (Int) -> Unit,
-    indicatorColor: Color = Color.White,
+    indicatorColor: Color = colors.White,
 ) {
     ScrollableTabRow(
         selectedTabIndex = selectedTabIndex,

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

@@ -1,12 +1,14 @@
 package com.texthip.thip.ui.common.modal
 
 import androidx.compose.foundation.ScrollState
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.CornerRadius
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 

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

@@ -11,8 +11,8 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.Icon
-import androidx.compose.material.Text
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -47,7 +47,7 @@ fun FeedSubscribeBarlist(
         Icon(
             painter = painterResource(id = R.drawable.ic_group),
             contentDescription = null,
-            tint = Color.Unspecified
+            tint = colors.White
         )
         Text(
             text = buildAnnotatedString {

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

@@ -0,0 +1,158 @@
+package com.texthip.thip.ui.feed.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.layout.ContentScale
+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 androidx.compose.ui.zIndex
+import com.texthip.thip.R
+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 ImageViewerModal(
+    images: List<Painter>,
+    initialIndex: Int = 0,
+    onDismiss: () -> Unit
+) {
+    val pagerState = rememberPagerState(
+        initialPage = initialIndex,
+        pageCount = { images.size }
+    )
+
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(colors.Black)
+            .clickable { onDismiss() }
+    ) {
+        // 닫기 버튼
+        Icon(
+            painter = painterResource(R.drawable.ic_x),
+            contentDescription = "닫기",
+            tint = colors.White,
+            modifier = Modifier
+                .align(Alignment.TopEnd)
+                .padding(20.dp)
+                .size(24.dp)
+                .clickable { onDismiss() }
+                .zIndex(1f)
+        )
+
+        // 이미지 페이저
+        HorizontalPager(
+            state = pagerState,
+            modifier = Modifier
+                .fillMaxSize()
+                .clickable { /* HorizontalPager 내부 클릭 시 모달 닫기 방지 */ }
+        ) { page ->
+            Box(
+                modifier = Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                Image(
+                    painter = images[page],
+                    contentDescription = null,
+                    contentScale = ContentScale.Fit, // 원본 비율 유지하면서 화면에 맞춤
+                    modifier = Modifier.fillMaxSize()
+                )
+            }
+        }
+
+        // 페이지 인디케이터 (이미지가 2개 이상일 때만 표시)
+        if (images.size > 1) {
+            Row(
+                modifier = Modifier
+                    .align(Alignment.BottomCenter)
+                    .padding(20.dp),
+                horizontalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+                repeat(images.size) { index ->
+                    Box(
+                        modifier = Modifier
+                            .size(8.dp)
+                            .clip(CircleShape)
+                            .background(
+                                if (index == pagerState.currentPage) colors.White
+                                else colors.White.copy(alpha = 0.4f)
+                            )
+                    )
+                }
+            }
+        }
+
+        // 이미지 카운터 (예: 1/3)
+        if (images.size > 1) {
+            Text(
+                text = stringResource(id = R.string.tag_count, images.size, 3),
+                style = typography.copy_r400_s14,
+                color = colors.White,
+                modifier = Modifier
+                    .align(Alignment.TopCenter)
+                    .padding(20.dp)
+                    .background(
+                        colors.Black.copy(alpha = 0.5f),
+                        shape = androidx.compose.foundation.shape.RoundedCornerShape(12.dp)
+                    )
+                    .padding(horizontal = 12.dp, vertical = 6.dp)
+            )
+        }
+    }
+}
+
+
+@Preview
+@Composable
+private fun ImageViewerModalSingleImagePreview() {
+    ThipTheme {
+        val mockImages = listOf(
+            painterResource(R.drawable.bookcover_sample)
+        )
+
+        ImageViewerModal(
+            images = mockImages,
+            initialIndex = 0,
+            onDismiss = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun ImageViewerModalMultipleImagesPreview() {
+    ThipTheme {
+        val mockImages = listOf(
+            painterResource(R.drawable.character_art),
+            painterResource(R.drawable.character_literature),
+            painterResource(R.drawable.character_sociology)
+        )
+
+        ImageViewerModal(
+            images = mockImages,
+            initialIndex = 1,
+            onDismiss = { }
+        )
+    }
+}