From caab1d1865fb6d5bc5a68fc8be6647eb3069192c Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 28 Jul 2025 14:30:20 +0900
Subject: [PATCH 01/22] =?UTF-8?q?[refactor]:=20Feed=20data=20class=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80,=20FeedWriteScreen=20=EC=A0=81=EC=9A=A9(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/misc.xml                                |  2 +-
 .../com/texthip/thip/ui/feed/mock/FeedData.kt | 21 +++++
 .../thip/ui/feed/screen/FeedWriteScreen.kt    | 81 ++++++++++---------
 3 files changed, 65 insertions(+), 39 deletions(-)
 create mode 100644 app/src/main/java/com/texthip/thip/ui/feed/mock/FeedData.kt

diff --git a/.idea/misc.xml b/.idea/misc.xml
index e1be6aca..38860e7c 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -4,5 +4,5 @@
     <option name="optimizeImportsOnTheFly" value="true" />
   </component>
   <component name="ExternalStorageConfigurationManager" enabled="true" />
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="temurin-17" project-jdk-type="JavaSDK" />
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="jbr-21" project-jdk-type="JavaSDK" />
 </project>
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/mock/FeedData.kt b/app/src/main/java/com/texthip/thip/ui/feed/mock/FeedData.kt
new file mode 100644
index 00000000..40ecf8ae
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/mock/FeedData.kt
@@ -0,0 +1,21 @@
+package com.texthip.thip.ui.feed.mock
+
+import android.net.Uri
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.snapshots.SnapshotStateList
+import com.texthip.thip.ui.group.makeroom.mock.BookData
+
+data class FeedData(
+    val selectedBook: BookData? = null,
+    val feedContent: String = "",
+    val isPrivate: Boolean = false,
+    val selectedGenreIndex: Int = -1,
+    val selectedSubGenres: List<String> = emptyList(),
+    val imageUris: SnapshotStateList<Uri> = mutableStateListOf()
+) {
+    val isReadyToSubmit: Boolean
+        get() = selectedBook != null &&
+                feedContent.isNotBlank() &&
+                selectedGenreIndex != -1 &&
+                selectedSubGenres.isNotEmpty()
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedWriteScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedWriteScreen.kt
index 279a6a8f..b0bac9dc 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedWriteScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedWriteScreen.kt
@@ -27,11 +27,8 @@ import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableIntStateOf
-import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -50,11 +47,11 @@ import com.texthip.thip.ui.common.buttons.GenreChipRow
 import com.texthip.thip.ui.common.buttons.SubGenreChipGrid
 import com.texthip.thip.ui.common.buttons.ToggleSwitchButton
 import com.texthip.thip.ui.common.topappbar.InputTopAppBar
+import com.texthip.thip.ui.feed.mock.FeedData
 import com.texthip.thip.ui.group.makeroom.component.GroupBookSearchBottomSheet
 import com.texthip.thip.ui.group.makeroom.component.GroupInputField
 import com.texthip.thip.ui.group.makeroom.component.GroupSelectBook
 import com.texthip.thip.ui.group.makeroom.component.SectionDivider
-import com.texthip.thip.ui.group.makeroom.mock.BookData
 import com.texthip.thip.ui.group.makeroom.mock.dummyGroupBooks
 import com.texthip.thip.ui.group.makeroom.mock.dummySavedBooks
 import com.texthip.thip.ui.theme.ThipTheme
@@ -66,10 +63,9 @@ fun FeedWriteScreen(
     onNavigateBack: () -> Unit,
     modifier: Modifier = Modifier
 ) {
+    var feedData by remember { mutableStateOf(FeedData()) }
     val scrollState = rememberScrollState()
-    var selectedGenreIndex by rememberSaveable { mutableIntStateOf(-1) }
     val genres = listOf("문학", "과학·IT", "사회과학", "인문학", "예술")
-    var selectedSubGenres by remember { mutableStateOf<List<String>>(emptyList()) }
     val subGenreMap = mapOf(
         0 to listOf("소설", "에세이", "시", "고전", "추리", "판타지", "로맨스", "SF", "공포", "역사"),
         1 to listOf("AI", "프로그래밍", "로봇", "IT 일반", "수학", "물리", "화학"),
@@ -77,21 +73,17 @@ fun FeedWriteScreen(
         3 to listOf("철학", "역사", "심리", "종교", "윤리"),
         4 to listOf("음악", "미술", "공예", "무용", "연극")
     )
-    var feed_content by remember { mutableStateOf("") }
-    var isPrivate by remember { mutableStateOf(false) }
     val showBookSearchSheet = remember { mutableStateOf(false) }
-    val selectedBook = remember { mutableStateOf<BookData?>(null) }
-    val imageUris = remember { mutableStateListOf<Uri>() }
     val imagePickerLauncher = rememberLauncherForActivityResult(
         contract = ActivityResultContracts.GetMultipleContents()
     ) { uris: List<Uri> ->
         if (uris.isNotEmpty()) {
-            val availableSlots = 3 - imageUris.size
+            val availableSlots = 3 - feedData.imageUris.size
             val imagesToAdd = uris.take(availableSlots) // 3장까지만 유지
-            imageUris.addAll(imagesToAdd)
+            feedData.imageUris.addAll(imagesToAdd)
         }
     }
-    val isImageLimitReached = imageUris.size >= 3
+    val isImageLimitReached = feedData.imageUris.size >= 3
     val focusManager = LocalFocusManager.current
 
     Box {
@@ -101,7 +93,7 @@ fun FeedWriteScreen(
                 .then(if (showBookSearchSheet.value) Modifier.blur(5.dp) else Modifier),
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
-            val isRightButtonEnabled = selectedBook.value != null && feed_content.isNotBlank() && selectedGenreIndex != -1 && selectedSubGenres.isNotEmpty()
+            val isRightButtonEnabled = feedData.selectedBook != null && feedData.feedContent.isNotBlank() && feedData.selectedGenreIndex != -1 && feedData.selectedSubGenres.isNotEmpty()
             InputTopAppBar(
                 title = stringResource(R.string.new_feed),
                 rightButtonName = stringResource(R.string.registration),
@@ -124,7 +116,7 @@ fun FeedWriteScreen(
                 Spacer(modifier = Modifier.height(20.dp))
 
                 GroupSelectBook(
-                    selectedBook = selectedBook.value,
+                    selectedBook = feedData.selectedBook,
                     onChangeBookClick = { showBookSearchSheet.value = true },
                     onSelectBookClick = { showBookSearchSheet.value = true }
                 )
@@ -134,9 +126,11 @@ fun FeedWriteScreen(
                 GroupInputField(
                     title = stringResource(R.string.write_feed),
                     hint = stringResource(R.string.write_feed_hint),
-                    value = feed_content,
+                    value = feedData.feedContent,
                     maxLength = 2000,
-                    onValueChange = { feed_content = it }
+                    onValueChange = { newText ->
+                        feedData = feedData.copy(feedContent = newText)
+                        }
                 )
 
                 SectionDivider()
@@ -174,16 +168,16 @@ fun FeedWriteScreen(
                             )
                         }
                     }
-                    items(imageUris.size) { index ->
+                    items(feedData.imageUris.size) { index ->
                         Box(modifier = Modifier.size(80.dp)) {
                             AsyncImage(
-                                model = imageUris[index],
+                                model = feedData.imageUris[index],
                                 contentDescription = null,
                                 modifier = Modifier.fillMaxSize(),
                                 contentScale = ContentScale.Crop
                             )
                             IconButton(
-                                onClick = { imageUris.removeAt(index) },
+                                onClick = { feedData.imageUris.removeAt(index) },
                                 modifier = Modifier
                                     .align(Alignment.TopEnd)
                                     .size(24.dp)
@@ -202,7 +196,7 @@ fun FeedWriteScreen(
                     horizontalArrangement = Arrangement.End
                 ) {
                     Text(
-                        text = stringResource(id = R.string.photo_count, imageUris.size, 3),
+                        text = stringResource(id = R.string.photo_count, feedData.imageUris.size, 3),
                         style = typography.info_r400_s12,
                         color = colors.NeonGreen,
                     )
@@ -225,8 +219,10 @@ fun FeedWriteScreen(
                         color = colors.White
                     )
                     ToggleSwitchButton(
-                        isChecked = isPrivate,
-                        onToggleChange = { isPrivate = it }
+                        isChecked = feedData.isPrivate,
+                        onToggleChange = { isChecked ->
+                            feedData = feedData.copy(isPrivate = isChecked)
+                        }
                     )
                 }
                 SectionDivider()
@@ -240,26 +236,31 @@ fun FeedWriteScreen(
                 GenreChipRow(
                     modifier = Modifier.width(18.dp),
                     genres = genres,
-                    selectedIndex = selectedGenreIndex,
+                    selectedIndex = feedData.selectedGenreIndex,
                     onSelect = {
-                        selectedGenreIndex = it
-                        selectedSubGenres = emptyList()
+                        feedData = feedData.copy(selectedGenreIndex = it, selectedSubGenres = emptyList())
                     }
                 )
                 Spacer(modifier = Modifier.height(12.dp))
-                if (selectedGenreIndex != -1) {
-                    val subGenres = subGenreMap[selectedGenreIndex].orEmpty()
+                if (feedData.selectedGenreIndex != -1) {
+                    val subGenres = subGenreMap[feedData.selectedGenreIndex].orEmpty()
                     Spacer(modifier = Modifier.height(8.dp))
 
                     SubGenreChipGrid(
                         subGenres = subGenres,
-                        selectedGenres = selectedSubGenres,
+                        selectedGenres = feedData.selectedSubGenres,
                         onGenreToggle = { genre ->
-                            selectedSubGenres = if (selectedSubGenres.contains(genre)) {
-                                selectedSubGenres - genre
+                            val newSelected = if (feedData.selectedSubGenres.contains(genre)) {
+                                feedData.selectedSubGenres - genre
                             } else {
-                                if (selectedSubGenres.size < 5) selectedSubGenres + genre else selectedSubGenres
+                                if (feedData.selectedSubGenres.size < 5) {
+                                    feedData.selectedSubGenres + genre
+                                } else {
+                                    feedData.selectedSubGenres
+                                }
                             }
+
+                            feedData = feedData.copy(selectedSubGenres = newSelected)
                         }
                     )
                     Row(
@@ -267,7 +268,7 @@ fun FeedWriteScreen(
                         horizontalArrangement = Arrangement.End
                     ) {
                         Text(
-                            text = stringResource(id = R.string.tag_count, selectedSubGenres.size, 5),
+                            text = stringResource(id = R.string.tag_count, feedData.selectedSubGenres.size, 5),
                             style = typography.info_r400_s12,
                             color = colors.NeonGreen,
                             )
@@ -280,21 +281,25 @@ fun FeedWriteScreen(
                     color = colors.White
                 )
                 Spacer(modifier = Modifier.height(12.dp))
-                if (selectedSubGenres.isNotEmpty()) {
+                if (feedData.selectedSubGenres.isNotEmpty()) {
                     LazyRow(
                         modifier = Modifier.fillMaxWidth(),
                         horizontalArrangement = Arrangement.spacedBy(8.dp)
                     ) {
-                        items(selectedSubGenres) { subGenre ->
+                        items(feedData.selectedSubGenres) { subGenre ->
                             GenreChipButton(
                                 text = subGenre,
                                 onClick = {
                                     //해당 칩 눌렀을 때도 서브장르 삭제
-                                    selectedSubGenres = selectedSubGenres - subGenre
+                                    feedData = feedData.copy(
+                                        selectedSubGenres =feedData.selectedSubGenres - subGenre
+                                    )
                                 },
                                 onCloseClick = {
                                     //x버튼 누르면 서브장르 삭제
-                                    selectedSubGenres = selectedSubGenres - subGenre
+                                    feedData = feedData.copy(
+                                        selectedSubGenres = feedData.selectedSubGenres - subGenre
+                                    )
                                 }
                             )
                         }
@@ -308,7 +313,7 @@ fun FeedWriteScreen(
             GroupBookSearchBottomSheet(
                 onDismiss = { showBookSearchSheet.value = false },
                 onBookSelect = { book ->
-                    selectedBook.value = book
+                    feedData = feedData.copy(selectedBook= book)
                     showBookSearchSheet.value = false
                 },
                 onRequestBook = {

From 909c5419b118c45f7d1b497ac99f05921f1af820 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 28 Jul 2025 15:01:15 +0900
Subject: [PATCH 02/22] =?UTF-8?q?[refactor]:=20FeedNavigation=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/navigator/navigations/FeedNavigation.kt    | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/navigations/FeedNavigation.kt b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/FeedNavigation.kt
index d6868bbd..b13f8dfc 100644
--- a/app/src/main/java/com/texthip/thip/ui/navigator/navigations/FeedNavigation.kt
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/FeedNavigation.kt
@@ -9,6 +9,14 @@ import com.texthip.thip.ui.navigator.routes.MainTabRoutes
 // Feed
 fun NavGraphBuilder.feedNavigation(navController: NavHostController) {
     composable<MainTabRoutes.Feed> {
-        FeedScreen(navController) 
+        FeedScreen(
+            navController = navController,
+            nickname = "ThipUser01",
+            userRole = "문학가",
+            feeds = emptyList(),
+            totalFeedCount = 0,
+            selectedTabIndex = 0,
+            followerProfileImageUrls = emptyList()
+        )
     }
 }
\ No newline at end of file

From b9ba48fa52d29612798c6846515aecf2630ed906 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Tue, 29 Jul 2025 10:53:59 +0900
Subject: [PATCH 03/22] =?UTF-8?q?[refactor]:=20FeedCard=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9D=B4=EB=AF=B8=EC=A7=80=201-3?=
 =?UTF-8?q?=EA=B0=9C=EB=A1=9C=20=EC=88=98=EC=A0=95(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/common/modal/ScrollbarUtil.kt     |  2 +
 .../ui/feed/component/FeedSubscribelistBar.kt |  2 +-
 .../thip/ui/feed/component/MyFeedCard.kt      | 39 +++++----
 .../ui/feed/component/MySubscribelistBar.kt   |  2 +-
 .../thip/ui/feed/screen/FeedCommentScreen.kt  |  2 +-
 .../texthip/thip/ui/feed/screen/FeedScreen.kt | 72 ++++++++-------
 .../ui/mypage/component/MypageSaveFeed.kt     |  2 -
 .../thip/ui/mypage/component/SavedFeedCard.kt | 87 +++++++++++--------
 .../texthip/thip/ui/mypage/mock/FeedItem.kt   |  2 +-
 .../ui/mypage/viewmodel/SavedFeedViewModel.kt |  6 +-
 .../navigator/navigations/FeedNavigation.kt   |  1 +
 11 files changed, 121 insertions(+), 96 deletions(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/common/modal/ScrollbarUtil.kt b/app/src/main/java/com/texthip/thip/ui/common/modal/ScrollbarUtil.kt
index 6689e4eb..40a7978a 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/modal/ScrollbarUtil.kt
+++ b/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
 
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/FeedSubscribelistBar.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/FeedSubscribelistBar.kt
index 77e7fab9..3d770546 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/component/FeedSubscribelistBar.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/FeedSubscribelistBar.kt
@@ -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 {
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/MyFeedCard.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/MyFeedCard.kt
index e7646f43..7ff821a2 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/component/MyFeedCard.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/MyFeedCard.kt
@@ -8,6 +8,7 @@ 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.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -33,6 +34,8 @@ fun MyFeedCard(
     bookImage: Painter? = null,
     onLikeClick: () -> Unit = {}
 ) {
+    val images = feedItem.imageUrls.orEmpty().map { painterResource(id = it) }
+
     Column(
         modifier = modifier
             .fillMaxWidth()
@@ -41,7 +44,7 @@ fun MyFeedCard(
         Column(
             modifier = modifier
                 .fillMaxWidth()
-                .padding(top = 16.dp, bottom = 16.dp)
+                .padding(bottom = 16.dp)
         ) {
             ActionBookButton(
                 bookTitle = feedItem.bookTitle,
@@ -50,15 +53,24 @@ fun MyFeedCard(
                 onClick = {}
             )
         }
-        if (bookImage  != null) {
-            Image(
-                painter = bookImage ,
-                contentDescription = null,
+        if (images.isNotEmpty()) {
+            Row(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .height(480.dp),
-                contentScale = ContentScale.Crop
-            )
+                    .padding(bottom = 16.dp),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                images.take(3).forEach { image ->
+                    Image(
+                        painter = image,
+                        contentDescription = null,
+                        modifier = Modifier
+                            .padding(end = 10.dp)
+                            .size(100.dp),
+                        contentScale = ContentScale.Crop
+                    )
+                }
+            }
         }
 
         Text(
@@ -125,9 +137,8 @@ private fun MyFeedCardPrev() {
         isLiked = false,
         isSaved = true,
         isLocked = true,
-        imageUrl = null
+        imageUrls = null
     )
-
     val feed2 = FeedItem(
         id = 2,
         userProfileImage = R.drawable.character_art,
@@ -142,17 +153,15 @@ private fun MyFeedCardPrev() {
         isLiked = false,
         isSaved = true,
         isLocked = false,
-        imageUrl = R.drawable.bookcover_sample
+        imageUrls = listOf(R.drawable.bookcover_sample)
     )
 
     Column {
         MyFeedCard(
-            feedItem = feed1,
-            bookImage = null
+            feedItem = feed1
         )
         MyFeedCard(
-            feedItem = feed2,
-            bookImage = painterResource(feed2.imageUrl!!)
+            feedItem = feed2
         )
     }
 
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt
index 5915c6ca..a8dcc2c4 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt
@@ -62,7 +62,7 @@ fun MySubscribeBarlist(
                     modifier = Modifier.size(20.dp),
                     painter = painterResource(id = R.drawable.ic_group),
                     contentDescription = null,
-                    tint = Color.Unspecified
+                    tint = colors.White
                 )
                 Text(
                     text = stringResource(R.string.my_subscription),
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
index 9a587288..d2e07887 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
@@ -377,7 +377,7 @@ private fun FeedCommentScreenPrev() {
                 isLiked = true,
                 isSaved = false,
                 isLocked = true,
-                imageUrl = R.drawable.bookcover_sample,
+                imageUrls = listOf(R.drawable.bookcover_sample),
                 tags = listOf("에세이", "문학", "힐링")
             ),
             bookImage = painterResource(R.drawable.bookcover_sample),
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt
index 131da9d6..7b11c08b 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt
@@ -182,11 +182,9 @@ fun FeedScreen(
                     }
                 } else {
                     itemsIndexed(feedStateList, key = { _, item -> item.id }) { index, feed ->
-                        val bookImage = feed.imageUrl?.let { painterResource(it) }
                         Spacer(modifier = Modifier.height(if (index == 0) 20.dp else 40.dp))
                         MyFeedCard(
                             feedItem = feed,
-                            bookImage = bookImage,
                             onLikeClick = {
                                 val updated = feed.copy(
                                     isLiked = !feed.isLiked,
@@ -217,12 +215,10 @@ fun FeedScreen(
                 }
                 itemsIndexed(feedStateList, key = { _, item -> item.id }) { index, feed ->
                     val profileImage = feed.userProfileImage?.let { painterResource(it) }
-                    val bookImage = feed.imageUrl?.let { painterResource(it) }
 
                     SavedFeedCard(
                         feedItem = feed,
                         profileImage = profileImage,
-                        bookImage = bookImage,
                         onBookmarkClick = {
                             val updated = feed.copy(isSaved = !feed.isSaved)
                             feedStateList[index] = updated
@@ -254,40 +250,42 @@ fun FeedScreen(
 @Preview(showBackground = true)
 @Composable
 private fun FeedScreenPreview() {
-    val mockFeeds = List(5) {
-        FeedItem(
-            id = it + 1,
-            userProfileImage = R.drawable.character_literature,
-            userName = "user.$it",
-            userRole = "문학 칭호",
-            bookTitle = "책 제목 ",
-            authName = "한강",
-            timeAgo = "1시간 전",
-            content = "내용내용내용 입니다.",
-            likeCount = it,
-            commentCount = it,
-            isLiked = false,
-            isSaved = false,
-            isLocked = it % 2 == 0,
-            imageUrl = R.drawable.bookcover_sample
-        )
-    }
-    val mockFollowerImages = listOf(
-        "https://example.com/image1.jpg",
-        "https://example.com/image2.jpg",
-        "https://example.com/image3.jpg",
-        "https://example.com/image4.jpg",
-        "https://example.com/image5.jpg"
-    )
-
     ThipTheme {
-        FeedScreen(
-            nickname = "ThipUser01",
-            userRole = "문학 칭호",
-            selectedTabIndex = 0,
-            feeds = mockFeeds,
-            totalFeedCount = mockFeeds.size,
-            followerProfileImageUrls = mockFollowerImages
+        val mockFeeds = List(5) {
+            FeedItem(
+                id = it + 1,
+                userProfileImage = R.drawable.character_literature,
+                userName = "user.$it",
+                userRole = "문학 칭호",
+                bookTitle = "책 제목 ",
+                authName = "한강",
+                timeAgo = "1시간 전",
+                content = "내용내용내용 입니다.",
+                likeCount = it,
+                commentCount = it,
+                isLiked = false,
+                isSaved = false,
+                isLocked = it % 2 == 0,
+                imageUrls = listOf(R.drawable.bookcover_sample)
+            )
+        }
+        val mockFollowerImages = listOf(
+            "https://example.com/image1.jpg",
+            "https://example.com/image2.jpg",
+            "https://example.com/image3.jpg",
+            "https://example.com/image4.jpg",
+            "https://example.com/image5.jpg"
         )
+
+        ThipTheme {
+            FeedScreen(
+                nickname = "ThipUser01",
+                userRole = "문학 칭호",
+                selectedTabIndex = 0,
+                feeds = mockFeeds,
+                totalFeedCount = mockFeeds.size,
+                followerProfileImageUrls = mockFollowerImages
+            )
+        }
     }
 }
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/component/MypageSaveFeed.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/MypageSaveFeed.kt
index eeab2b6d..970a7539 100644
--- a/app/src/main/java/com/texthip/thip/ui/mypage/component/MypageSaveFeed.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/component/MypageSaveFeed.kt
@@ -15,12 +15,10 @@ fun FeedContent(viewModel: SavedFeedViewModel = viewModel()) {
 
     LazyColumn {
         items(feedList, key = { it.id }) { feed ->
-            val bookImagePainter = feed.imageUrl?.let { painterResource(it) }
             val profileImagePainter = feed.userProfileImage?.let { painterResource(it) }
 
             SavedFeedCard(
                 feedItem = feed,
-                bookImage = bookImagePainter,
                 profileImage = profileImagePainter,
                 onBookmarkClick = { viewModel.toggleBookmark(feed.id) },
                 onLikeClick = { viewModel.toggleLike(feed.id) }
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt
index 5d82f201..1e7e3757 100644
--- a/app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt
@@ -6,8 +6,10 @@ 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.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -24,6 +26,7 @@ import com.texthip.thip.R
 import com.texthip.thip.ui.common.buttons.ActionBookButton
 import com.texthip.thip.ui.common.header.ProfileBar
 import com.texthip.thip.ui.mypage.mock.FeedItem
+import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 
@@ -31,11 +34,15 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 fun SavedFeedCard(
     modifier: Modifier = Modifier,
     feedItem: FeedItem,
-    bookImage: Painter? = null,
     profileImage: Painter? = null,
     onBookmarkClick: () -> Unit = {},
     onLikeClick: () -> Unit = {}
 ) {
+    val images = feedItem.imageUrls.orEmpty().map { painterResource(id = it) }
+    val imagePainters = feedItem.imageUrls.orEmpty().map { painterResource(it) }
+    val hasImages = imagePainters.isNotEmpty()
+    val maxLines = if (hasImages) 3 else 8
+
     Column(
         modifier = modifier
             .fillMaxWidth()
@@ -51,7 +58,7 @@ fun SavedFeedCard(
         Column(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(top = 16.dp, bottom = 16.dp)
+                .padding(top = 16.dp)
         ) {
             ActionBookButton(
                 bookTitle = feedItem.bookTitle,
@@ -59,25 +66,32 @@ fun SavedFeedCard(
                 onClick = {}
             )
         }
-        if (bookImage  != null) {
-            Image(
-                painter = bookImage ,
-                contentDescription = null,
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .height(480.dp),
-                contentScale = ContentScale.Crop
-            )
-        }
-
-        Text(
+        ExpandableTextWithMore(
             text = feedItem.content,
-            style = typography.feedcopy_r400_s14_h20,
-            color = colors.White,
+            maxLinesWhenCollapsed = maxLines,
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(bottom = 16.dp)
+                .padding(vertical = 16.dp)
         )
+        if (images.isNotEmpty()) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 16.dp),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                images.take(3).forEach { image ->
+                    Image(
+                        painter = image,
+                        contentDescription = null,
+                        modifier = Modifier
+                            .padding(end = 10.dp)
+                            .size(100.dp),
+                        contentScale = ContentScale.Crop
+                    )
+                }
+            }
+        }
         Row(
             verticalAlignment = Alignment.CenterVertically
         ) {
@@ -112,7 +126,6 @@ fun SavedFeedCard(
                 tint = Color.Unspecified
             )
         }
-
     }
 }
 
@@ -132,7 +145,7 @@ private fun SavedFeedCardPrev() {
         commentCount = 5,
         isLiked = false,
         isSaved = true,
-        imageUrl = null
+        imageUrls = null
     )
 
     val feed2 = FeedItem(
@@ -143,26 +156,30 @@ private fun SavedFeedCardPrev() {
         bookTitle = "책 제목",
         authName = "한강",
         timeAgo = "3시간 전",
-        content = "한줄만 입력 가능",
+        content = "한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 " +
+                "한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능",
         likeCount = 10,
         commentCount = 5,
         isLiked = false,
         isSaved = true,
-        imageUrl = R.drawable.bookcover_sample
+        imageUrls = listOf(R.drawable.bookcover_sample,R.drawable.bookcover_sample,R.drawable.bookcover_sample)
     )
+    val scrollState = rememberScrollState()
 
-    Column {
-        SavedFeedCard(
-            feedItem = feed1,
-            profileImage = painterResource(feed1.userProfileImage!!),
-            bookImage = null
-        )
-        SavedFeedCard(
-            feedItem = feed2,
-            profileImage = painterResource(feed2.userProfileImage!!),
-            bookImage = painterResource(feed2.imageUrl!!)
-        )
+    ThipTheme {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .verticalScroll(scrollState)
+        ) {
+            SavedFeedCard(
+                feedItem = feed1,
+                profileImage = painterResource(feed1.userProfileImage!!)
+            )
+            SavedFeedCard(
+                feedItem = feed2,
+                profileImage = painterResource(feed2.userProfileImage!!)
+            )
+        }
     }
-
-
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/mock/FeedItem.kt b/app/src/main/java/com/texthip/thip/ui/mypage/mock/FeedItem.kt
index 3dab91cc..99009098 100644
--- a/app/src/main/java/com/texthip/thip/ui/mypage/mock/FeedItem.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/mock/FeedItem.kt
@@ -15,6 +15,6 @@ data class FeedItem(
     val isSaved: Boolean,
     val isLocked: Boolean = false,
     val tags: List<String> = emptyList(),
-    val imageUrl: Int? = null
+    val imageUrls: List<Int>? = emptyList()
 )
 
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedFeedViewModel.kt b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedFeedViewModel.kt
index 1eefdc48..ff0756d4 100644
--- a/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedFeedViewModel.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedFeedViewModel.kt
@@ -36,7 +36,7 @@ class SavedFeedViewModel: ViewModel() {
                 commentCount = 4,
                 isLiked = false,
                 isSaved = true,
-                imageUrl = R.drawable.bookcover_sample
+                imageUrls = null
             ),
             FeedItem(
                 id = 3,
@@ -51,7 +51,7 @@ class SavedFeedViewModel: ViewModel() {
                 commentCount = 4,
                 isLiked = false,
                 isSaved = true,
-                imageUrl = R.drawable.bookcover_sample
+                imageUrls = listOf(R.drawable.bookcover_sample)
             ),
             FeedItem(
                 id = 4,
@@ -66,7 +66,7 @@ class SavedFeedViewModel: ViewModel() {
                 commentCount = 4,
                 isLiked = false,
                 isSaved = true,
-                imageUrl = R.drawable.bookcover_sample
+                imageUrls = listOf(R.drawable.bookcover_sample)
             ),
             FeedItem(
                 id = 5,
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/navigations/FeedNavigation.kt b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/FeedNavigation.kt
index b13f8dfc..e7e3a8b9 100644
--- a/app/src/main/java/com/texthip/thip/ui/navigator/navigations/FeedNavigation.kt
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/FeedNavigation.kt
@@ -9,6 +9,7 @@ import com.texthip.thip.ui.navigator.routes.MainTabRoutes
 // Feed
 fun NavGraphBuilder.feedNavigation(navController: NavHostController) {
     composable<MainTabRoutes.Feed> {
+        //TODO 추후 view model 적용 예정
         FeedScreen(
             navController = navController,
             nickname = "ThipUser01",

From eb35501f1f0c41913c71b6d037a48f6d0d094a54 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Fri, 1 Aug 2025 14:03:40 +0900
Subject: [PATCH 04/22] =?UTF-8?q?[refactor]:=20FeedCommentList=20data=20cl?=
 =?UTF-8?q?ass=EB=A1=9C=20=EB=8C=80=EC=B2=B4(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/feed/screen/FeedCommentScreen.kt  | 179 +++++++++++-------
 1 file changed, 108 insertions(+), 71 deletions(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
index d2e07887..4edbff9f 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
@@ -3,6 +3,7 @@ package com.texthip.thip.ui.feed.screen
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
@@ -13,6 +14,7 @@ import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshots.SnapshotStateList
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.blur
@@ -32,6 +34,7 @@ import com.texthip.thip.ui.common.header.ProfileBar
 import com.texthip.thip.ui.common.modal.DialogPopup
 import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
 import com.texthip.thip.ui.group.note.component.*
+import com.texthip.thip.ui.group.note.mock.mockCommentList
 import com.texthip.thip.ui.group.room.mock.MenuBottomSheetItem
 import com.texthip.thip.ui.mypage.mock.FeedItem
 import com.texthip.thip.ui.theme.ThipTheme
@@ -52,7 +55,8 @@ fun FeedCommentScreen(
     currentUserProfileImageUrl: String,
     onLikeClick: () -> Unit = {},
     onCommentInputChange: (String) -> Unit = {},
-    onSendClick: () -> Unit = {}
+    onSendClick: () -> Unit = {},
+    commentList: SnapshotStateList<FeedCommentItem> = remember { mutableStateListOf() }
 ) {
     var isBottomSheetVisible by remember { mutableStateOf(false) }
     var showDialog by remember { mutableStateOf(false) }
@@ -61,37 +65,7 @@ fun FeedCommentScreen(
     val replyTo = remember { mutableStateOf<String?>(null) }
     val feed = remember { mutableStateOf(feedItem) }
     val justNow = stringResource(R.string.just_a_moment_ago)
-    val commentList = remember {
-        mutableStateListOf(
-            FeedCommentItem(
-                commentId = 1,
-                userId = 1,
-                nickName = "사용자1",
-                genreName = "문학",
-                profileImageUrl = "",
-                content = "너무 공감돼요!",
-                postDate = "1시간 전",
-                isWriter = false,
-                isLiked = false,
-                likeCount = 3,
-                replyList = listOf(
-                    FeedReplyItem(
-                        replyId = 2,
-                        userId = 2,
-                        nickName = "사용자2",
-                        parentNickname = "사용자1",
-                        genreName = "문학",
-                        profileImageUrl = "",
-                        content = "저도 그렇게 느꼈어요.",
-                        postDate = "30분 전",
-                        isWriter = false,
-                        isLiked = false,
-                        likeCount = 1
-                    )
-                )
-            )
-        )
-    }
+
     Box(
         modifier = Modifier
             .fillMaxSize()
@@ -221,31 +195,54 @@ fun FeedCommentScreen(
                 )
                 Spacer(modifier = Modifier.height(40.dp))
             }
-            commentList.forEach { commentItem ->
+            if (commentList.isEmpty()) {
                 item {
-                    Column(
+                     Column (
                         modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(horizontal = 20.dp, vertical = 24.dp)
+                            .fillMaxWidth(),
+                         verticalArrangement = Arrangement.Center
                     ) {
-                        CommentItem(
-                            data = commentItem,
-                            onReplyClick = { replyTo.value = it },
-
+                        Text(
+                            text = stringResource(R.string.no_comments_yet),
+                            style = typography.smalltitle_sb600_s18_h24,
+                            color = colors.White
                         )
-                        Spacer(modifier = Modifier.height(24.dp))
-                        commentItem.replyList.forEach { reply ->
-                            ReplyItem(
-                                data = reply,
-                                onReplyClick = { replyTo.value = it }
-                            )
+                         Spacer(modifier = Modifier.height(8.dp))
+                        Text(
+                            text = stringResource(R.string.no_comment_subtext),
+                            style = typography.copy_r400_s14,
+                            color = colors.Grey
+                        )
+                    }
+                }
+            }else{
+                commentList.forEachIndexed{ index, commentItem ->
+                    item {
+                        Column(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(horizontal = 20.dp, vertical = 24.dp)
+                        ) {
+                            CommentItem(
+                                data = commentItem,
+                                onReplyClick = { replyTo.value = it },
+
+                                )
+                            Spacer(modifier = Modifier.height(24.dp))
+                            commentItem.replyList.forEach { reply ->
+                                ReplyItem(
+                                    data = reply,
+                                    onReplyClick = { replyTo.value = it }
+                                )
+                                Spacer(modifier = Modifier.height(24.dp))
+                            }
+                            if (index == commentList.lastIndex) {
+                                Spacer(modifier = Modifier.height(40.dp))
+                            }
                         }
                     }
                 }
             }
-            item {
-                Spacer(modifier = Modifier.height(40.dp))
-            }
         }
         CommentTextField(
             modifier = Modifier
@@ -362,33 +359,73 @@ fun FeedCommentScreen(
 @Composable
 private fun FeedCommentScreenPrev() {
     ThipTheme {
+        val mockFeedItem =  FeedItem(
+            id = 1,
+            userProfileImage = R.drawable.character_literature,
+            userName = "문학소녀",
+            userRole = "문학 칭호",
+            bookTitle = "채식주의자",
+            authName = "한강",
+            timeAgo = "1시간 전",
+            content = "이 책은 인간의 본성과 억압에 대한 깊은 성찰을 담고 있어요. 인상 깊은 문장이 많았어요.",
+            likeCount = 12,
+            commentCount = 3,
+            isLiked = true,
+            isSaved = false,
+            isLocked = true,
+            imageUrls = listOf(R.drawable.bookcover_sample),
+            tags = listOf("에세이", "문학", "힐링")
+        )
+        val commentList = remember { mutableStateListOf<FeedCommentItem>() }
+
         FeedCommentScreen(
-            feedItem = FeedItem(
-                id = 1,
-                userProfileImage = R.drawable.character_literature,
-                userName = "문학소녀",
-                userRole = "문학 칭호",
-                bookTitle = "채식주의자",
-                authName = "한강",
-                timeAgo = "1시간 전",
-                content = "이 책은 인간의 본성과 억압에 대한 깊은 성찰을 담고 있어요. 인상 깊은 문장이 많았어요.",
-                likeCount = 12,
-                commentCount = 3,
-                isLiked = true,
-                isSaved = false,
-                isLocked = true,
-                imageUrls = listOf(R.drawable.bookcover_sample),
-                tags = listOf("에세이", "문학", "힐링")
-            ),
+            feedItem = mockFeedItem,
+            bookImage = painterResource(R.drawable.bookcover_sample),
+            profileImage = painterResource(R.drawable.character_literature),
+            currentUserId = 999,
+            currentUserName = "나",
+            currentUserGenre = "문학",
+            currentUserProfileImageUrl = "",
+            commentList = commentList
+        )
+    }
+}
+@Preview
+@Composable
+private fun FeedCommentScreenWithMockComments() {
+    ThipTheme {
+        val mockFeedItem =  FeedItem(
+            id = 1,
+            userProfileImage = R.drawable.character_literature,
+            userName = "문학소녀",
+            userRole = "문학 칭호",
+            bookTitle = "채식주의자",
+            authName = "한강",
+            timeAgo = "1시간 전",
+            content = "이 책은 인간의 본성과 억압에 대한 깊은 성찰을 담고 있어요. 인상 깊은 문장이 많았어요.",
+            likeCount = 12,
+            commentCount = 3,
+            isLiked = true,
+            isSaved = false,
+            isLocked = true,
+            imageUrls = listOf(R.drawable.bookcover_sample),
+            tags = listOf("에세이", "문학", "힐링")
+        )
+        val commentList = remember {
+            mutableStateListOf<FeedCommentItem>().apply {
+                addAll(mockCommentList.commentData)
+            }
+        }
+
+        FeedCommentScreen(
+            feedItem = mockFeedItem,
             bookImage = painterResource(R.drawable.bookcover_sample),
             profileImage = painterResource(R.drawable.character_literature),
-            onLikeClick = {},
-            onCommentInputChange = {},
-            onSendClick = {},
             currentUserId = 999,
             currentUserName = "나",
-            currentUserGenre = "장르",
-            currentUserProfileImageUrl = ""
+            currentUserGenre = "문학",
+            currentUserProfileImageUrl = "",
+            commentList = commentList
         )
     }
 }
\ No newline at end of file

From 28a294aebc8ac4e6fd98b939adf4b912848467bc Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Fri, 1 Aug 2025 14:11:58 +0900
Subject: [PATCH 05/22] =?UTF-8?q?[refactor]:=20FeedCard=20=EB=B3=B8?=
 =?UTF-8?q?=EB=AC=B8=20=ED=81=B4=EB=A6=AD=EA=B0=80=EB=8A=A5=ED=95=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/feed/component/MyFeedCard.kt      | 32 +++++++++----------
 .../texthip/thip/ui/feed/screen/FeedScreen.kt |  7 ++--
 .../thip/ui/mypage/component/SavedFeedCard.kt |  4 ++-
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/MyFeedCard.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/MyFeedCard.kt
index 7ff821a2..cc1194a1 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/component/MyFeedCard.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/MyFeedCard.kt
@@ -6,7 +6,6 @@ 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.material3.Icon
@@ -15,7 +14,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 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
@@ -23,6 +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.ActionBookButton
+import com.texthip.thip.ui.mypage.component.ExpandableTextWithMore
 import com.texthip.thip.ui.mypage.mock.FeedItem
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
@@ -31,11 +30,13 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 fun MyFeedCard(
     modifier: Modifier = Modifier,
     feedItem: FeedItem,
-    bookImage: Painter? = null,
-    onLikeClick: () -> Unit = {}
+    onLikeClick: () -> Unit = {},
+    onContentClick: () -> Unit = {}
 ) {
     val images = feedItem.imageUrls.orEmpty().map { painterResource(id = it) }
-
+    val imagePainters = feedItem.imageUrls.orEmpty().map { painterResource(it) }
+    val hasImages = imagePainters.isNotEmpty()
+    val maxLines = if (hasImages) 3 else 8
     Column(
         modifier = modifier
             .fillMaxWidth()
@@ -44,7 +45,6 @@ fun MyFeedCard(
         Column(
             modifier = modifier
                 .fillMaxWidth()
-                .padding(bottom = 16.dp)
         ) {
             ActionBookButton(
                 bookTitle = feedItem.bookTitle,
@@ -53,6 +53,14 @@ fun MyFeedCard(
                 onClick = {}
             )
         }
+        ExpandableTextWithMore(
+            text = feedItem.content,
+            maxLinesWhenCollapsed = maxLines,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(vertical = 16.dp)
+                .clickable{onContentClick()}
+        )
         if (images.isNotEmpty()) {
             Row(
                 modifier = Modifier
@@ -73,14 +81,6 @@ fun MyFeedCard(
             }
         }
 
-        Text(
-            text = feedItem.content,
-            style = typography.feedcopy_r400_s14_h20,
-            color = colors.White,
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(bottom = 16.dp)
-        )
         Row(
             verticalAlignment = Alignment.CenterVertically
         ) {
@@ -131,7 +131,7 @@ private fun MyFeedCardPrev() {
         bookTitle = "책 제목",
         authName = "한강",
         timeAgo = "3시간 전",
-        content = "무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷",
+        content = "무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷",
         likeCount = 10,
         commentCount = 5,
         isLiked = false,
@@ -153,7 +153,7 @@ private fun MyFeedCardPrev() {
         isLiked = false,
         isSaved = true,
         isLocked = false,
-        imageUrls = listOf(R.drawable.bookcover_sample)
+        imageUrls = listOf(R.drawable.bookcover_sample,R.drawable.bookcover_sample)
     )
 
     Column {
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt
index 7b11c08b..daf1c120 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt
@@ -192,6 +192,7 @@ fun FeedScreen(
                                 )
                                 feedStateList[index] = updated
                             },
+                            onContentClick = {} //FeedCommentScreen으로
                         )
                         Spacer(modifier = Modifier.height(40.dp))
                         if (index != feeds.lastIndex) {
@@ -229,7 +230,9 @@ fun FeedScreen(
                                 likeCount = if (feed.isLiked) feed.likeCount - 1 else feed.likeCount + 1
                             )
                             feedStateList[index] = updated
-                        }
+                        },
+                        onContentClick = {} //FeedCommentScreen으로
+
                     )
                     if (index != feeds.lastIndex) {
                         HorizontalDivider(
@@ -260,7 +263,7 @@ private fun FeedScreenPreview() {
                 bookTitle = "책 제목 ",
                 authName = "한강",
                 timeAgo = "1시간 전",
-                content = "내용내용내용 입니다.",
+                content = "내용내용내용 입니다. 내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.내용내용내용 입니다.",
                 likeCount = it,
                 commentCount = it,
                 isLiked = false,
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt
index 1e7e3757..290bef27 100644
--- a/app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt
@@ -36,7 +36,8 @@ fun SavedFeedCard(
     feedItem: FeedItem,
     profileImage: Painter? = null,
     onBookmarkClick: () -> Unit = {},
-    onLikeClick: () -> Unit = {}
+    onLikeClick: () -> Unit = {},
+    onContentClick: () -> Unit = {}
 ) {
     val images = feedItem.imageUrls.orEmpty().map { painterResource(id = it) }
     val imagePainters = feedItem.imageUrls.orEmpty().map { painterResource(it) }
@@ -72,6 +73,7 @@ fun SavedFeedCard(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(vertical = 16.dp)
+                .clickable { onContentClick() }
         )
         if (images.isNotEmpty()) {
             Row(

From 1d871748797500a474ad1f3609e3a8eecde6ae1b Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Fri, 1 Aug 2025 14:12:39 +0900
Subject: [PATCH 06/22] =?UTF-8?q?[refactor]:=20FeedCard=20"..=EB=8D=94?=
 =?UTF-8?q?=EB=B3=B4=EA=B8=B0"=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?=
 =?UTF-8?q?=EC=A4=91(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/ExpandableTextWithMore.kt       | 71 +++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 app/src/main/java/com/texthip/thip/ui/mypage/component/ExpandableTextWithMore.kt

diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/component/ExpandableTextWithMore.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/ExpandableTextWithMore.kt
new file mode 100644
index 00000000..83b9cd80
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/component/ExpandableTextWithMore.kt
@@ -0,0 +1,71 @@
+package com.texthip.thip.ui.mypage.component
+
+import androidx.compose.foundation.clickable
+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.Modifier
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.text.withStyle
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+//TODO 수정 후 SavedFeedCard에 적용 예정
+@Composable
+fun ExpandableTextWithMore(
+    maxLinesWhenCollapsed: Int,
+    text: String,
+    modifier: Modifier = Modifier
+) {
+    var isExpanded by remember { mutableStateOf(false) }
+    var truncatedText by remember { mutableStateOf("") }
+    var shouldShowMore by remember { mutableStateOf(false) }
+
+    val overflowTag = "MORE"
+
+    if (isExpanded) {
+        Text(
+            text = text,
+            style = typography.feedcopy_r400_s14_h20,
+            color = colors.White,
+            modifier = modifier
+        )
+    } else {
+        Text(
+            text = buildAnnotatedString {
+                append(truncatedText)
+                if (shouldShowMore) {
+                    append(" ")
+                    pushStringAnnotation(tag = overflowTag, annotation = "more")
+                    withStyle(style = SpanStyle(color = colors.White)) {
+                        append("…더보기")
+                    }
+                    pop()
+                }
+            },
+            maxLines = maxLinesWhenCollapsed,
+            overflow = TextOverflow.Clip, //직접 컨트롤
+            style = typography.feedcopy_r400_s14_h20,
+            color = colors.White,
+            modifier = modifier.clickable {
+                if (shouldShowMore) isExpanded = true
+            },
+            onTextLayout = { result ->
+                val isOverflowing = result.lineCount > maxLinesWhenCollapsed
+                if (isOverflowing && !shouldShowMore) {
+                    shouldShowMore = true
+                    val end = result.getLineEnd(maxLinesWhenCollapsed - 1, visibleEnd = true)
+                    truncatedText = text.take(end).trimEnd()
+                } else if (!isOverflowing && !shouldShowMore) {
+                    // 줄 수 안 넘는 경우 → 본문 그대로
+                    truncatedText = text
+                }
+            }
+        )
+    }
+}
\ No newline at end of file

From c7b5f97e4772a4e51945c3fa530a93f503ffacb9 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Fri, 1 Aug 2025 18:13:28 +0900
Subject: [PATCH 07/22] =?UTF-8?q?[refactor]:=20FeedCard=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EB=B6=84=EA=B8=B0=EC=B2=98=EB=A6=AC,=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20padding=20=EC=88=98=EC=A0=95,=20?=
 =?UTF-8?q?=EA=B0=80=EB=A1=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EA=B0=80?=
 =?UTF-8?q?=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=B2=98=EB=A6=AC=20(#6?=
 =?UTF-8?q?1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../texthip/thip/ui/feed/FeedItemType.java    |   5 +
 .../thip/ui/feed/screen/FeedCommentScreen.kt  | 107 ++++++++++++------
 2 files changed, 76 insertions(+), 36 deletions(-)
 create mode 100644 app/src/main/java/com/texthip/thip/ui/feed/FeedItemType.java

diff --git a/app/src/main/java/com/texthip/thip/ui/feed/FeedItemType.java b/app/src/main/java/com/texthip/thip/ui/feed/FeedItemType.java
new file mode 100644
index 00000000..4e44d365
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/FeedItemType.java
@@ -0,0 +1,5 @@
+package com.texthip.thip.ui.feed;
+
+public enum FeedItemType {
+    LOCKED, SAVABLE
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
index 4edbff9f..84436fe2 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
@@ -5,6 +5,8 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
@@ -33,6 +35,7 @@ import com.texthip.thip.ui.common.forms.CommentTextField
 import com.texthip.thip.ui.common.header.ProfileBar
 import com.texthip.thip.ui.common.modal.DialogPopup
 import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.feed.FeedItemType
 import com.texthip.thip.ui.group.note.component.*
 import com.texthip.thip.ui.group.note.mock.mockCommentList
 import com.texthip.thip.ui.group.room.mock.MenuBottomSheetItem
@@ -47,7 +50,7 @@ import com.texthip.thip.ui.group.note.mock.ReplyItem as FeedReplyItem
 fun FeedCommentScreen(
     modifier: Modifier = Modifier,
     feedItem: FeedItem,
-    bookImage: Painter? = null,
+    feedType: FeedItemType,
     profileImage: Painter? = null,
     currentUserId: Int,
     currentUserName: String,
@@ -56,8 +59,9 @@ fun FeedCommentScreen(
     onLikeClick: () -> Unit = {},
     onCommentInputChange: (String) -> Unit = {},
     onSendClick: () -> Unit = {},
-    commentList: SnapshotStateList<FeedCommentItem> = remember { mutableStateListOf() }
-) {
+    commentList: SnapshotStateList<FeedCommentItem> = remember { mutableStateListOf() },
+
+    ) {
     var isBottomSheetVisible by remember { mutableStateOf(false) }
     var showDialog by remember { mutableStateOf(false) }
 
@@ -66,6 +70,7 @@ fun FeedCommentScreen(
     val feed = remember { mutableStateOf(feedItem) }
     val justNow = stringResource(R.string.just_a_moment_ago)
 
+    val images = feedItem.imageUrls.orEmpty().map { painterResource(id = it) }
     Box(
         modifier = Modifier
             .fillMaxSize()
@@ -87,9 +92,10 @@ fun FeedCommentScreen(
                 Column(
                     modifier = Modifier
                         .fillMaxWidth()
-                        .padding(20.dp)
                 ) {
                     ProfileBar(
+                        modifier = Modifier
+                            .padding(20.dp),
                         profileImage = profileImage,
                         topText = feedItem.userName,
                         bottomText = feedItem.userRole,
@@ -99,7 +105,7 @@ fun FeedCommentScreen(
                     Column(
                         modifier = Modifier
                             .fillMaxWidth()
-                            .padding(top = 16.dp, bottom = 16.dp)
+                            .padding(vertical = 16.dp, horizontal = 20.dp)
                     ) {
                         ActionBookButton(
                             bookTitle = feedItem.bookTitle,
@@ -113,23 +119,32 @@ fun FeedCommentScreen(
                         color = colors.White,
                         modifier = Modifier
                             .fillMaxWidth()
-                            .padding(bottom = 16.dp)
+                            .padding(bottom = 16.dp, start = 20.dp,end = 20.dp)
                     )
-                    if (bookImage != null) {
-                        Image(
-                            painter = bookImage,
-                            contentDescription = null,
+                    if (images.isNotEmpty()) {
+                        LazyRow(
                             modifier = Modifier
                                 .fillMaxWidth()
-                                .height(480.dp),
-                            contentScale = ContentScale.Crop
-                        )
+                                .padding(start = 20.dp, bottom = 16.dp),
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            itemsIndexed(images.take(3)) { index, image ->
+                                Image(
+                                    painter = image,
+                                    contentDescription = null,
+                                    modifier = Modifier
+                                        .padding(end = 16.dp)
+                                        .size(200.dp),
+                                    contentScale = ContentScale.Crop
+                                )
+                            }
+                        }
                     }
                     if (feedItem.tags.isNotEmpty()) {
                         Row(
                             modifier = Modifier
                                 .fillMaxWidth()
-                                .padding(vertical = 16.dp),
+                                .padding(bottom = 16.dp, start = 20.dp, end = 20.dp),
                             horizontalArrangement = Arrangement.spacedBy(8.dp)
                         ) {
                             feedItem.tags.forEach { tag ->
@@ -143,11 +158,12 @@ fun FeedCommentScreen(
                         }
                     }
                     HorizontalDivider(
+                        modifier = Modifier.padding(horizontal = 20.dp),
                         color = colors.DarkGrey02,
                         thickness = 1.dp,
                     )
                     Row(
-                        modifier = Modifier.padding(top = 16.dp, bottom = 30.dp),
+                        modifier = Modifier.padding(top = 16.dp, bottom = 30.dp, start = 20.dp, end = 20.dp),
                         verticalAlignment = Alignment.CenterVertically
                     ) {
                         Icon(
@@ -180,12 +196,28 @@ fun FeedCommentScreen(
                             modifier = Modifier.padding(start = 5.dp, end = 12.dp)
                         )
                         Spacer(modifier = Modifier.weight(1f))
-                        if (feedItem.isLocked) {
-                            Icon(
-                                painter = painterResource(R.drawable.ic_lock),
-                                contentDescription = null,
-                                tint = Color.Unspecified
-                            )
+
+                        when (feedType) {
+                            FeedItemType.LOCKED -> {
+                                if (feedItem.isLocked) {
+                                    Icon(
+                                        painter = painterResource(R.drawable.ic_lock),
+                                        contentDescription = null,
+                                        tint = Color.Unspecified
+                                    )
+                                }
+                                // else: 아무것도 안 띄움
+                            }
+
+                            FeedItemType.SAVABLE -> {
+                                Icon(
+                                    painter = painterResource(
+                                        if (feedItem.isSaved) R.drawable.ic_save_filled else R.drawable.ic_save
+                                    ),
+                                    contentDescription = null,
+                                    tint = Color.Unspecified
+                                )
+                            }
                         }
                     }
                 }
@@ -193,21 +225,22 @@ fun FeedCommentScreen(
                     color = colors.DarkGrey02,
                     thickness = 10.dp
                 )
-                Spacer(modifier = Modifier.height(40.dp))
             }
             if (commentList.isEmpty()) {
                 item {
-                     Column (
+                    Column(
                         modifier = Modifier
-                            .fillMaxWidth(),
-                         verticalArrangement = Arrangement.Center
+                            .fillMaxWidth()
+                            .height(400.dp),
+                        verticalArrangement = Arrangement.Center,
+                        horizontalAlignment = Alignment.CenterHorizontally
                     ) {
                         Text(
                             text = stringResource(R.string.no_comments_yet),
                             style = typography.smalltitle_sb600_s18_h24,
                             color = colors.White
                         )
-                         Spacer(modifier = Modifier.height(8.dp))
+                        Spacer(modifier = Modifier.height(8.dp))
                         Text(
                             text = stringResource(R.string.no_comment_subtext),
                             style = typography.copy_r400_s14,
@@ -215,9 +248,10 @@ fun FeedCommentScreen(
                         )
                     }
                 }
-            }else{
-                commentList.forEachIndexed{ index, commentItem ->
+            } else {
+                commentList.forEachIndexed { index, commentItem ->
                     item {
+                        Spacer(modifier = Modifier.height(40.dp))
                         Column(
                             modifier = Modifier
                                 .fillMaxWidth()
@@ -359,7 +393,7 @@ fun FeedCommentScreen(
 @Composable
 private fun FeedCommentScreenPrev() {
     ThipTheme {
-        val mockFeedItem =  FeedItem(
+        val mockFeedItem = FeedItem(
             id = 1,
             userProfileImage = R.drawable.character_literature,
             userName = "문학소녀",
@@ -372,15 +406,15 @@ private fun FeedCommentScreenPrev() {
             commentCount = 3,
             isLiked = true,
             isSaved = false,
-            isLocked = true,
-            imageUrls = listOf(R.drawable.bookcover_sample),
+            isLocked = false,
+            imageUrls = listOf(R.drawable.bookcover_sample, R.drawable.bookcover_sample),
             tags = listOf("에세이", "문학", "힐링")
         )
         val commentList = remember { mutableStateListOf<FeedCommentItem>() }
 
         FeedCommentScreen(
             feedItem = mockFeedItem,
-            bookImage = painterResource(R.drawable.bookcover_sample),
+            feedType = FeedItemType.LOCKED,
             profileImage = painterResource(R.drawable.character_literature),
             currentUserId = 999,
             currentUserName = "나",
@@ -390,11 +424,12 @@ private fun FeedCommentScreenPrev() {
         )
     }
 }
+
 @Preview
 @Composable
 private fun FeedCommentScreenWithMockComments() {
     ThipTheme {
-        val mockFeedItem =  FeedItem(
+        val mockFeedItem = FeedItem(
             id = 1,
             userProfileImage = R.drawable.character_literature,
             userName = "문학소녀",
@@ -406,8 +441,8 @@ private fun FeedCommentScreenWithMockComments() {
             likeCount = 12,
             commentCount = 3,
             isLiked = true,
-            isSaved = false,
-            isLocked = true,
+            isSaved = true,
+            isLocked = false,
             imageUrls = listOf(R.drawable.bookcover_sample),
             tags = listOf("에세이", "문학", "힐링")
         )
@@ -419,7 +454,7 @@ private fun FeedCommentScreenWithMockComments() {
 
         FeedCommentScreen(
             feedItem = mockFeedItem,
-            bookImage = painterResource(R.drawable.bookcover_sample),
+            feedType = FeedItemType.SAVABLE,
             profileImage = painterResource(R.drawable.character_literature),
             currentUserId = 999,
             currentUserName = "나",

From ef29411d205f35e85f411363c9341cef9ff401cc Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Fri, 1 Aug 2025 19:58:51 +0900
Subject: [PATCH 08/22] =?UTF-8?q?[ui]:=20FeedCommentScreen=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=9E=90=EC=84=B8=ED=9E=88=20=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9=20(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/build.gradle.kts                          |   4 +-
 .../ui/feed/component/FeedSubscribelistBar.kt |   4 +-
 .../ui/feed/component/ImageViewerModal.kt     | 156 ++++++++++++++++++
 .../ui/feed/component/MySubscribelistBar.kt   |   4 +-
 .../thip/ui/feed/{ => mock}/FeedItemType.java |   2 +-
 .../thip/ui/feed/screen/FeedCommentScreen.kt  |  21 ++-
 .../feed/screen/MySubscriptionListScreen.kt   |   2 +-
 gradle/libs.versions.toml                     |   2 +
 8 files changed, 184 insertions(+), 11 deletions(-)
 create mode 100644 app/src/main/java/com/texthip/thip/ui/feed/component/ImageViewerModal.kt
 rename app/src/main/java/com/texthip/thip/ui/feed/{ => mock}/FeedItemType.java (56%)

diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index 12d7ff1d..39ece0c0 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -57,9 +57,8 @@ 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)
@@ -67,4 +66,5 @@ dependencies {
     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")
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/FeedSubscribelistBar.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/FeedSubscribelistBar.kt
index 3d770546..30e5022f 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/component/FeedSubscribelistBar.kt
+++ b/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
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/ImageViewerModal.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/ImageViewerModal.kt
new file mode 100644
index 00000000..080bb889
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/ImageViewerModal.kt
@@ -0,0 +1,156 @@
+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.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.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(Color.Black)
+            .clickable { onDismiss() }
+    ) {
+        // 닫기 버튼
+        Icon(
+            painter = painterResource(R.drawable.ic_x),
+            contentDescription = "닫기",
+            tint = Color.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) Color.White
+                                else Color.White.copy(alpha = 0.4f)
+                            )
+                    )
+                }
+            }
+        }
+
+        // 이미지 카운터 (예: 1/3)
+        if (images.size > 1) {
+            Text(
+                text = "${pagerState.currentPage + 1}/${images.size}",
+                style = typography.copy_r400_s14,
+                color = Color.White,
+                modifier = Modifier
+                    .align(Alignment.TopCenter)
+                    .padding(20.dp)
+                    .background(
+                        Color.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 = { }
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt
index a8dcc2c4..b47f862f 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt
@@ -12,8 +12,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
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/FeedItemType.java b/app/src/main/java/com/texthip/thip/ui/feed/mock/FeedItemType.java
similarity index 56%
rename from app/src/main/java/com/texthip/thip/ui/feed/FeedItemType.java
rename to app/src/main/java/com/texthip/thip/ui/feed/mock/FeedItemType.java
index 4e44d365..8a8c2785 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/FeedItemType.java
+++ b/app/src/main/java/com/texthip/thip/ui/feed/mock/FeedItemType.java
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.feed;
+package com.texthip.thip.ui.feed.mock;
 
 public enum FeedItemType {
     LOCKED, SAVABLE
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
index 84436fe2..c7531431 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
@@ -35,7 +35,8 @@ import com.texthip.thip.ui.common.forms.CommentTextField
 import com.texthip.thip.ui.common.header.ProfileBar
 import com.texthip.thip.ui.common.modal.DialogPopup
 import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
-import com.texthip.thip.ui.feed.FeedItemType
+import com.texthip.thip.ui.feed.component.ImageViewerModal
+import com.texthip.thip.ui.feed.mock.FeedItemType
 import com.texthip.thip.ui.group.note.component.*
 import com.texthip.thip.ui.group.note.mock.mockCommentList
 import com.texthip.thip.ui.group.room.mock.MenuBottomSheetItem
@@ -71,6 +72,8 @@ fun FeedCommentScreen(
     val justNow = stringResource(R.string.just_a_moment_ago)
 
     val images = feedItem.imageUrls.orEmpty().map { painterResource(id = it) }
+    var showImageViewer by remember { mutableStateOf(false) }
+    var selectedImageIndex by remember { mutableStateOf(0) }
     Box(
         modifier = Modifier
             .fillMaxSize()
@@ -134,7 +137,11 @@ fun FeedCommentScreen(
                                     contentDescription = null,
                                     modifier = Modifier
                                         .padding(end = 16.dp)
-                                        .size(200.dp),
+                                        .size(200.dp)
+                                        .clickable {
+                                            selectedImageIndex = index
+                                            showImageViewer = true
+                                        },
                                     contentScale = ContentScale.Crop
                                 )
                             }
@@ -387,6 +394,14 @@ fun FeedCommentScreen(
             }
         }
     }
+    // 이미지 뷰어 모달
+    if (showImageViewer && images.isNotEmpty()) {
+        ImageViewerModal(
+            images = images.take(3),
+            initialIndex = selectedImageIndex,
+            onDismiss = { showImageViewer = false }
+        )
+    }
 }
 
 @Preview
@@ -407,7 +422,7 @@ private fun FeedCommentScreenPrev() {
             isLiked = true,
             isSaved = false,
             isLocked = false,
-            imageUrls = listOf(R.drawable.bookcover_sample, R.drawable.bookcover_sample),
+            imageUrls = listOf(R.drawable.character_sociology, R.drawable.character_art),
             tags = listOf("에세이", "문학", "힐링")
         )
         val commentList = remember { mutableStateListOf<FeedCommentItem>() }
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/MySubscriptionListScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/MySubscriptionListScreen.kt
index 0ba930af..110aad0e 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/screen/MySubscriptionListScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/MySubscriptionListScreen.kt
@@ -9,7 +9,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.material.Text
+import androidx.compose.material3.Text
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 12d1cd00..84a4502a 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -16,6 +16,7 @@ accompanistPager = "0.36.0"
 accompanistPagerIndicators = "0.36.0"
 coilCompose = "2.7.0"
 kotlinxSerializationJson = "1.9.0"
+foundationVersion = "1.9.0-rc01"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -40,6 +41,7 @@ accompanist-pager = { group = "com.google.accompanist", name = "accompanist-page
 accompanist-pager-indicators = { group = "com.google.accompanist", name = "accompanist-pager-indicators", version.ref = "accompanistPagerIndicators" }
 coil-compose = { group = "io.coil-kt", name = "coil-compose", version.ref = "coilCompose" }
 kotlinx-serialization-json = { group = "org.jetbrains.kotlinx", name = "kotlinx-serialization-json", version.ref = "kotlinxSerializationJson" }
+foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "foundationVersion" }
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }
 kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }

From c50d8848db7e53a88fa1145c7b34bc975b7b8a6b Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Fri, 1 Aug 2025 20:17:43 +0900
Subject: [PATCH 09/22] =?UTF-8?q?[refactor]:=20loginScreen=20text=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/java/com/texthip/thip/ui/signin/screen/LoginScreen.kt  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/signin/screen/LoginScreen.kt b/app/src/main/java/com/texthip/thip/ui/signin/screen/LoginScreen.kt
index 3f150f75..9a88c9e7 100644
--- a/app/src/main/java/com/texthip/thip/ui/signin/screen/LoginScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/signin/screen/LoginScreen.kt
@@ -48,7 +48,7 @@ fun LoginScreen() {
         Text(
             text = buildAnnotatedString {
                 withStyle(style = SpanStyle(color = Purple)) {
-                    append(stringResource(R.string.thip))
+                    append(stringResource(R.string.splash_thip))
                 }
                 append(stringResource(R.string.splash_ment))
             },

From 0f44edcfeaf58121165bc24c5bbddfcc56e09c5a Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Fri, 1 Aug 2025 20:18:27 +0900
Subject: [PATCH 10/22] =?UTF-8?q?[refactor]:=20=EC=84=A0=ED=83=9D=EB=90=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EC=9D=80=20RoleCard=20=EC=9E=A5=EB=A5=B4?=
 =?UTF-8?q?=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=83=89=EC=83=81=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../com/texthip/thip/ui/mypage/component/RoleCard.kt   |  3 ++-
 .../texthip/thip/ui/signin/screen/SignupGenreScreen.kt | 10 ++--------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/component/RoleCard.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/RoleCard.kt
index 27157d30..3d342ae8 100644
--- a/app/src/main/java/com/texthip/thip/ui/mypage/component/RoleCard.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/component/RoleCard.kt
@@ -61,6 +61,7 @@ fun RoleCard(
     } else {
         SolidColor(colors.Black.copy(alpha = 0.3f))
     }
+    val actualGenreColor = if (selected) genreColor else colors.Grey01
     Box(
         modifier = modifier
             .width(162.dp)
@@ -92,7 +93,7 @@ fun RoleCard(
             Text(
                 text = genre,
                 style = typography.smalltitle_m500_s18_h24,
-                color = genreColor
+                color = actualGenreColor
             )
             Text(
                 text = role,
diff --git a/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupGenreScreen.kt b/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupGenreScreen.kt
index 369e6b7a..7b1233bf 100644
--- a/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupGenreScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupGenreScreen.kt
@@ -1,10 +1,6 @@
 package com.texthip.thip.ui.signin.screen
 
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.FlowRow
-import com.texthip.thip.ui.mypage.component.RoleCard
-import com.texthip.thip.ui.mypage.mock.RoleItem
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
@@ -19,7 +15,6 @@ import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
@@ -27,13 +22,12 @@ 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.WarningTextField
 import com.texthip.thip.ui.common.topappbar.InputTopAppBar
+import com.texthip.thip.ui.mypage.component.RoleCard
+import com.texthip.thip.ui.mypage.mock.RoleItem
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
-import kotlinx.coroutines.delay
-import kotlinx.coroutines.launch
 
 
 @Composable

From 60ba367cc51ffc28f5ad4c4e18a32e90d6620dd8 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Fri, 1 Aug 2025 20:30:38 +0900
Subject: [PATCH 11/22] =?UTF-8?q?[refactor]:=20RoleCard=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EB=90=9C=20=EB=94=94=EC=9E=90=EC=9D=B8=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95=20(=EA=B7=B8=EB=9D=BC=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=ED=9A=A8=EA=B3=BC=20=EC=A0=9C=EA=B1=B0=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=83=89=EC=83=81=20=EC=B6=94=EA=B0=80)=20(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../com/texthip/thip/ui/mypage/component/RoleCard.kt  | 11 +++--------
 app/src/main/java/com/texthip/thip/ui/theme/Color.kt  | 10 +++++++++-
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/component/RoleCard.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/RoleCard.kt
index 3d342ae8..4779eb62 100644
--- a/app/src/main/java/com/texthip/thip/ui/mypage/component/RoleCard.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/component/RoleCard.kt
@@ -52,14 +52,9 @@ fun RoleCard(
     val borderColor = if (selected) White else DarkGrey
     val bgAlpha = if (selected) 1f else 0.3f
     val backgroundBrush = if (selected) {
-        Brush.verticalGradient(
-            colors = listOf(
-                colors.Black.copy(alpha = 0.7f), //상단은 어둡게
-                colors.White.copy(alpha = 0.2f)  //하단은 밝게
-            )
-        )
+        colors.Black800
     } else {
-        SolidColor(colors.Black.copy(alpha = 0.3f))
+        colors.Black700
     }
     val actualGenreColor = if (selected) genreColor else colors.Grey01
     Box(
@@ -67,7 +62,7 @@ fun RoleCard(
             .width(162.dp)
             .height(100.dp)
             .clip(RoundedCornerShape(12.dp))
-            .background(brush = backgroundBrush, shape = RoundedCornerShape(12.dp))
+            .background(color = backgroundBrush, shape = RoundedCornerShape(12.dp))
             .border(
                 width = 1.dp,
                 color = borderColor,
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 6306b18d..1fe1ebe9 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
@@ -43,6 +43,10 @@ val Black = Color(0xFF121212)
 val Black50 = Color(0x80121212)
 val Black10 = Color(0x1A121212)
 val Black00 = Color(0x00121212)
+val Black700 = Color(0xFF090909)
+val Black800 = Color(0xFF040404)
+
+
 
 @Immutable
 data class ThipColors(
@@ -80,6 +84,8 @@ data class ThipColors(
     val Black50: Color,
     val Black10: Color,
     val Black00: Color,
+    val Black800: Color,
+    val Black700: Color
 )
 
 val defaultThipColors = ThipColors(
@@ -116,7 +122,9 @@ val defaultThipColors = ThipColors(
     Black = Black,
     Black50 = Black50,
     Black10 = Black10,
-    Black00 = Black00
+    Black00 = Black00,
+    Black700 = Black700,
+    Black800 = Black800
 )
 
 val LocalThipColorsProvider = staticCompositionLocalOf { defaultThipColors }
\ No newline at end of file

From 54e9dcf01a6b53994c9420ebd82b0c7588aab1e3 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Fri, 1 Aug 2025 21:18:16 +0900
Subject: [PATCH 12/22] =?UTF-8?q?[refactor]:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B3=80=EA=B2=BD=EB=90=9C=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EB=B0=98=EC=98=81=ED=95=98=EC=97=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/mypage/screen/MypageScreen.kt     | 83 ++++++++++++-------
 app/src/main/res/drawable/ic_doc.xml          | 41 +++++++++
 app/src/main/res/drawable/ic_version.xml      | 15 ++++
 app/src/main/res/values/strings.xml           |  3 +
 4 files changed, 112 insertions(+), 30 deletions(-)
 create mode 100644 app/src/main/res/drawable/ic_doc.xml
 create mode 100644 app/src/main/res/drawable/ic_version.xml

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
index f8467f32..d670a134 100644
--- 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
@@ -1,19 +1,24 @@
 package com.texthip.thip.ui.mypage.screen
 
 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.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.material3.Scaffold
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 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
@@ -26,7 +31,7 @@ import com.texthip.thip.ui.common.buttons.MenuItemButton
 import com.texthip.thip.ui.common.header.AuthorHeader
 import com.texthip.thip.ui.common.modal.DialogPopup
 import com.texthip.thip.ui.common.topappbar.LeftNameTopAppBar
-import com.texthip.thip.ui.theme.Black
+import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 
@@ -37,10 +42,13 @@ fun MyPageScreen(
     badgeText: String
 ) {
     var showLogoutDialog by remember { mutableStateOf(false) }
+    val scrollState = rememberScrollState()
+
     Column(
         Modifier
             .background(colors.Black)
             .fillMaxSize()
+            .verticalScroll(scrollState)
     ) {
         LeftNameTopAppBar(
             title = stringResource(R.string.my_page),
@@ -51,7 +59,7 @@ fun MyPageScreen(
             modifier = Modifier
                 .fillMaxSize()
         ) {
-            Spacer(modifier = Modifier.height(40.dp))
+            Spacer(modifier = Modifier.height(20.dp))
             AuthorHeader(
                 profileImage = null,
                 nickname = nickname,
@@ -82,16 +90,6 @@ fun MyPageScreen(
                     modifier = Modifier.fillMaxWidth(),
                     onClick = {}
                 )
-                Spacer(modifier = Modifier.height(16.dp))
-                MenuItemButton(
-                    text = stringResource(R.string.reactions),
-                    icon = painterResource(R.drawable.ic_heart),
-                    contentColor = colors.White,
-                    backgroundColor = colors.DarkGrey02,
-                    hasRightIcon = true,
-                    modifier = Modifier.fillMaxWidth(),
-                    onClick = {}
-                )
             }
             Spacer(modifier = Modifier.height(40.dp))
             Column(
@@ -100,7 +98,7 @@ fun MyPageScreen(
                     .padding(horizontal = 20.dp)
             ) {
                 Text(
-                    text = stringResource(R.string.menu),
+                    text = stringResource(R.string.etc),
                     style = typography.smalltitle_sb600_s18_h24,
                     color = colors.White,
                     modifier = Modifier
@@ -118,8 +116,8 @@ fun MyPageScreen(
                 )
                 Spacer(modifier = Modifier.height(16.dp))
                 MenuItemButton(
-                    text = stringResource(R.string.guide),
-                    icon = painterResource(R.drawable.ic_guide),
+                    text = stringResource(R.string.customer_service),
+                    icon = painterResource(R.drawable.ic_center),
                     contentColor = colors.White,
                     backgroundColor = colors.DarkGrey02,
                     hasRightIcon = true,
@@ -128,8 +126,8 @@ fun MyPageScreen(
                 )
                 Spacer(modifier = Modifier.height(16.dp))
                 MenuItemButton(
-                    text = stringResource(R.string.customer_service),
-                    icon = painterResource(R.drawable.ic_center),
+                    text = stringResource(R.string.terms_of_use),
+                    icon = painterResource(R.drawable.ic_doc),
                     contentColor = colors.White,
                     backgroundColor = colors.DarkGrey02,
                     hasRightIcon = true,
@@ -138,8 +136,8 @@ fun MyPageScreen(
                 )
                 Spacer(modifier = Modifier.height(16.dp))
                 MenuItemButton(
-                    text = stringResource(R.string.delete_account),
-                    icon = painterResource(R.drawable.ic_bye),
+                    text = stringResource(R.string.guide),
+                    icon = painterResource(R.drawable.ic_guide),
                     contentColor = colors.White,
                     backgroundColor = colors.DarkGrey02,
                     hasRightIcon = true,
@@ -148,17 +146,40 @@ fun MyPageScreen(
                 )
                 Spacer(modifier = Modifier.height(16.dp))
                 MenuItemButton(
-                    text = stringResource(R.string.log_out),
-                    icon = painterResource(R.drawable.ic_logout),
-                    contentColor = colors.Red,
+                    text = stringResource(R.string.version_1_0),
+                    icon = painterResource(R.drawable.ic_version),
+                    contentColor = colors.White,
                     backgroundColor = colors.DarkGrey02,
-                    hasRightIcon = false,
+                    hasRightIcon = true,
                     modifier = Modifier.fillMaxWidth(),
-                    onClick = {
-                        showLogoutDialog = true
+                    onClick = {}
+                )
+            }
+            Spacer(modifier = Modifier.height(184.dp))
+
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 40.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Text(
+                    text = stringResource(R.string.log_out),
+                    style = typography.feedcopy_r400_s14_h20,
+                    color = colors.Grey01,
+                    modifier = Modifier.clickable { showLogoutDialog = true }
+                )
+                Spacer(modifier = Modifier.height(24.dp))
+                Text(
+                    text = stringResource(R.string.delete_account),
+                    style = typography.feedcopy_r400_s14_h20,
+                    color = colors.Grey01,
+                    modifier = Modifier.clickable {
+                        // TODO: 탈퇴 로직
                     }
                 )
             }
+
             if (showLogoutDialog) {
                 Dialog(onDismissRequest = { showLogoutDialog = false }) {
                     DialogPopup(
@@ -181,8 +202,10 @@ fun MyPageScreen(
 @Preview
 @Composable
 private fun MyPagePrev() {
-    MyPageScreen(
-        nickname = "ThipUser01",
-        badgeText = "문학가"
-    )
+    ThipTheme {
+        MyPageScreen(
+            nickname = "ThipUser01",
+            badgeText = "문학가"
+        )
+    }
 }
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ic_doc.xml b/app/src/main/res/drawable/ic_doc.xml
new file mode 100644
index 00000000..32879e60
--- /dev/null
+++ b/app/src/main/res/drawable/ic_doc.xml
@@ -0,0 +1,41 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M13.75,3.25L6.75,3.25C6.286,3.25 5.841,3.434 5.513,3.763C5.184,4.091 5,4.536 5,5L5,19C5,19.464 5.184,19.909 5.513,20.237C5.841,20.566 6.286,20.75 6.75,20.75H17.25C17.714,20.75 18.159,20.566 18.487,20.237C18.816,19.909 19,19.464 19,19V8.5L13.75,3.25Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M13.75,3.25V8.5H19"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M15.5,12.875H8.5"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M15.5,16.375H8.5"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M10.25,9.375H9.375H8.5"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_version.xml b/app/src/main/res/drawable/ic_version.xml
new file mode 100644
index 00000000..717d60f2
--- /dev/null
+++ b/app/src/main/res/drawable/ic_version.xml
@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M5.25,2.848L14.755,2.848C15.148,2.848 15.518,3.033 15.754,3.347L19.75,8.668C19.912,8.884 20,9.148 20,9.419L20,19.9C20,20.591 19.44,21.15 18.75,21.15L5.25,21.15C4.56,21.15 4,20.591 4,19.9L4,4.098C4,3.407 4.56,2.848 5.25,2.848Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"/>
+  <path
+      android:pathData="M14.002,8.544C13.098,8.149 12.088,8.068 11.131,8.311C10.175,8.555 9.326,9.11 8.72,9.889C8.29,10.443 8.001,11.087 7.869,11.766L7.278,10.939C7.037,10.602 6.568,10.523 6.231,10.763C5.894,11.004 5.816,11.472 6.056,11.809L7.488,13.815L7.575,13.916C7.795,14.131 8.131,14.193 8.418,14.057L10.646,13.004L10.713,12.967C11.039,12.77 11.169,12.356 11.003,12.005C10.826,11.63 10.379,11.471 10.004,11.648L9.364,11.951C9.459,11.538 9.642,11.148 9.905,10.809C10.306,10.293 10.868,9.926 11.501,9.764C12.135,9.603 12.804,9.657 13.403,9.919C14.002,10.18 14.496,10.634 14.809,11.208C15.122,11.782 15.235,12.444 15.129,13.089C15.024,13.734 14.706,14.326 14.227,14.77C13.748,15.215 13.134,15.487 12.483,15.544C11.832,15.601 11.18,15.439 10.631,15.085L10.565,15.047C10.226,14.874 9.805,14.981 9.594,15.307C9.37,15.655 9.47,16.12 9.818,16.344C10.647,16.88 11.631,17.124 12.614,17.038C13.597,16.952 14.524,16.541 15.248,15.87C15.971,15.199 16.45,14.305 16.609,13.331C16.768,12.357 16.598,11.357 16.126,10.49C15.654,9.624 14.907,8.938 14.002,8.544Z"
+      android:fillColor="#FEFEFE"/>
+</vector>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index b9f0fc1e..d42fdfff 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -66,12 +66,15 @@
 
     <!--    myPage Screen    -->
     <string name="my_page">마이페이지</string>
+    <string name="etc">기타</string>
     <string name="edit">편집</string>
     <string name="my_activity">내 활동</string>
     <string name="saved">저장</string>
     <string name="reactions">반응</string>
     <string name="notification_settings">알림설정</string>
     <string name="guide">가이드</string>
+    <string name="version_1_0">버전 1.0</string>
+    <string name="terms_of_use">이용약관</string>
     <string name="customer_service">고객센터</string>
     <string name="delete_account">회원탈퇴</string>
     <string name="log_out">로그아웃</string>

From 9116c68b4253b79e16e9f7fe514b86ad8ddf4ce2 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Sat, 2 Aug 2025 10:31:22 +0900
Subject: [PATCH 13/22] =?UTF-8?q?[refactor]:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B0=98=EC=9D=91,=20=EC=95=8C=EB=A6=BC?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20ui=20=EC=88=98=EC=A0=95(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../screen/MypageNotificationEditScreen.kt      |  5 ++---
 .../ui/mypage/screen/MypageReactionScreen.kt    | 17 +++++++++++------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageNotificationEditScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageNotificationEditScreen.kt
index feb41106..af5b4fe8 100644
--- a/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageNotificationEditScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageNotificationEditScreen.kt
@@ -25,6 +25,7 @@ import androidx.compose.ui.zIndex
 import com.texthip.thip.R
 import com.texthip.thip.ui.common.buttons.ToggleSwitchButton
 import com.texthip.thip.ui.common.modal.ToastWithDate
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
 import com.texthip.thip.ui.common.topappbar.InputTopAppBar
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
@@ -65,11 +66,9 @@ fun NotificationScreen() {
                 .background(colors.Black)
                 .fillMaxSize()
         ) {
-            InputTopAppBar(
+            DefaultTopAppBar(
                 title = stringResource(R.string.notification_settings),
-                isRightButtonEnabled = true,
                 onLeftClick = {},
-                onRightClick = {}
             )
             Spacer(modifier = Modifier.height(40.dp))
             Column(
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageReactionScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageReactionScreen.kt
index 28396257..70c2324b 100644
--- a/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageReactionScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageReactionScreen.kt
@@ -10,7 +10,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material3.Scaffold
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -25,7 +25,6 @@ import com.texthip.thip.ui.common.buttons.OptionChipButton
 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
 import com.texthip.thip.ui.theme.ThipTheme.colors
 
 @Composable
@@ -72,13 +71,13 @@ fun ReactionsScreen() {
             Row(modifier = Modifier.padding(start = 20.dp, top = 20.dp, bottom = 20.dp)) {
                 OptionChipButton(
                     text = stringResource(R.string.likes),
-                    isFilled = isLikesSelected,
+                    isFilled = true,
                     onClick = {isLikesSelected = !isLikesSelected}
                 )
                 Spacer(modifier = Modifier.width(12.dp))
                 OptionChipButton(
                     text = stringResource(R.string.comments),
-                    isFilled = isCommentsSelected,
+                    isFilled = true,
                     onClick = {isCommentsSelected = !isCommentsSelected}
                 )
 
@@ -89,14 +88,20 @@ fun ReactionsScreen() {
                     .padding(horizontal = 20.dp),
                 verticalArrangement = Arrangement.spacedBy(20.dp)
             ) {
-                items(filteredReactions) { item ->
+                itemsIndexed (filteredReactions) { index, item ->
+                    val isLastItem = index == filteredReactions.lastIndex
                     CardAlarm(
                         title = item.title,
                         message = item.message,
                         timeAgo = item.timeAgo,
                         isRead = true,
                         badgeText = item.type,
-                        onClick = {}
+                        onClick = {},
+                        modifier = if (isLastItem) {
+                            Modifier.padding(bottom = 20.dp)
+                        } else {
+                            Modifier
+                        }
                     )
                 }
             }

From 31e18d69febbbcec4e42c1984c46b0e6622ea912 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Sat, 2 Aug 2025 11:14:49 +0900
Subject: [PATCH 14/22] =?UTF-8?q?[refactor]:=20=EB=82=B4=20=EB=9D=B1=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D,=20=EB=8B=A4=EB=A5=B8=20=EC=9C=A0=EC=A0=80?=
 =?UTF-8?q?=20=EB=9D=B1=20=EB=AA=A9=EB=A1=9D=20=EB=B6=84=EB=A6=AC=EB=90=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=B2=98=EB=A6=AC(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/common/header/AuthorHeader.kt     | 24 ++++++++++-
 .../ui/feed/component/MySubscriptionList.kt   | 43 +++++++++++++++++++
 .../feed/screen/MySubscriptionListScreen.kt   |  5 ++-
 app/src/main/res/values/strings.xml           |  5 ++-
 4 files changed, 71 insertions(+), 6 deletions(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/common/header/AuthorHeader.kt b/app/src/main/java/com/texthip/thip/ui/common/header/AuthorHeader.kt
index 14d694d5..f8731155 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/header/AuthorHeader.kt
+++ b/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
             )
         }
     }
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscriptionList.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscriptionList.kt
index 88219fe7..cb6b1aec 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscriptionList.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscriptionList.kt
@@ -18,6 +18,7 @@ import com.texthip.thip.ui.theme.ThipTheme.colors
 @Composable
 fun MySubscriptionList(
     members: List<MySubscriptionData>,
+    isMine: Boolean=true,
     onUnsubscribe: (String) -> Unit
 ) {
     Column(
@@ -34,6 +35,9 @@ fun MySubscriptionList(
                 buttonText = stringResource(if(member.isSubscribed) R.string.thip_cancel else R.string.thip),
                 buttonWidth = 64.dp,
                 profileImageSize = 36.dp,
+                showButton = isMine,
+                showThipNum = !isMine,
+                thipNum = member.subscriberCount,
                 onButtonClick = {
                     onUnsubscribe(member.nickname)
                 }
@@ -85,4 +89,43 @@ private fun MySubscriptionListPrev() {
         ),
         onUnsubscribe = {}
     )
+}
+
+@Preview
+@Composable
+private fun MySubscriptionListPrev2() {
+    MySubscriptionList(
+        members = listOf(
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "Thiper",
+                role = "칭호칭호",
+                roleColor = colors.Yellow,
+                subscriberCount = 100,
+            ),
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "thipthip",
+                role = "공식 인플루언서",
+                roleColor = colors.NeonGreen,
+                subscriberCount = 50
+            ),
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "Thiper",
+                role = "칭호칭호",
+                roleColor = colors.Yellow,
+                subscriberCount = 100
+            ),
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "thip01",
+                role = "작가",
+                roleColor = colors.NeonGreen,
+                subscriberCount = 100
+            ),
+        ),
+        isMine = false,
+        onUnsubscribe = {}
+    )
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/MySubscriptionListScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/MySubscriptionListScreen.kt
index 110aad0e..1eed1583 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/screen/MySubscriptionListScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/MySubscriptionListScreen.kt
@@ -38,7 +38,8 @@ import kotlinx.coroutines.delay
 
 @Composable
 fun MySubscriptionScreen(
-    navController: NavController? = null
+    navController: NavController? = null,
+    titleText: String = stringResource(R.string.my_thip_list)
 ) {
     val initialmembers = listOf(
         MySubscriptionData(
@@ -160,7 +161,7 @@ fun MySubscriptionScreen(
         ) {
             DefaultTopAppBar(
                 onLeftClick = {},
-                title = stringResource(R.string.my_thip_list)
+                title = titleText
             )
             Column(
                 modifier = Modifier
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index d42fdfff..4dd01448 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -285,12 +285,13 @@
     <string name="genre_can_be_changed">이후 내 정보에서 변경이 가능해요.</string>
 
     <!--    feed   -->
-    <string name="my_thip_list">내 띱 리스트</string>
+    <string name="my_thip_list">내 띱 목록</string>
     <string name="whole_num">전체 %d</string>
     <string name="toast_thip">%1$s 님을 띱 했어요</string>
     <string name="toast_thip_cancel">%1$s 님을 띱 취소했어요</string>
     <string name="thip">띱 하기</string>
     <string name="thip_cancel">띱 취소</string>
+    <string name="thip_num">%d명이 띱 하는 중</string>
     <string name="create_feed">피드에 글을 작성해 보세요</string>
 
     <string name="group_participant_close_popup">모집을 마감하시겠습니까?</string>
@@ -304,7 +305,7 @@
     <string name="group_myroom_error_comment2">첫번째 모임방에 참여해보세요</string>
     <string name="feed_reply_to">%1$s 님에게 댓글을 남겨보세요.</string>
     <string name="just_a_moment_ago">방금 전</string>
-    <string name="my_subscription">내 구독</string>
+    <string name="my_subscription">내 띱</string>
     <string name="new_feed">새 글</string>
     <string name="registration">등록</string>
     <string name="write_feed">글 작성</string>

From 4e3bc4c757087d15ecfe178573992b1c1695f494 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Sat, 2 Aug 2025 11:34:13 +0900
Subject: [PATCH 15/22] =?UTF-8?q?[ui]:=20=EB=8B=A4=EB=A5=B8=20=EC=9C=A0?=
 =?UTF-8?q?=EC=A0=80=20=EB=9D=B1=20=EB=AA=A9=EB=A1=9D=20=ED=99=94=EB=A9=B4?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/feed/component/MySubscriptionList.kt   |   4 +
 .../ui/feed/screen/SubscriptionListScreen.kt  | 177 ++++++++++++++++++
 app/src/main/res/values/strings.xml           |   1 +
 3 files changed, 182 insertions(+)
 create mode 100644 app/src/main/java/com/texthip/thip/ui/feed/screen/SubscriptionListScreen.kt

diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscriptionList.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscriptionList.kt
index cb6b1aec..5e1e2999 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscriptionList.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscriptionList.kt
@@ -2,7 +2,9 @@ package com.texthip.thip.ui.feed.component
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+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.material3.HorizontalDivider
 import androidx.compose.runtime.Composable
@@ -48,6 +50,8 @@ fun MySubscriptionList(
                     color = colors.DarkGrey02,
                     thickness = 1.dp
                 )
+            }else{
+                Spacer(modifier = Modifier.height(76.dp))
             }
         }
     }
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/SubscriptionListScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/SubscriptionListScreen.kt
new file mode 100644
index 00000000..684ea1e5
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/SubscriptionListScreen.kt
@@ -0,0 +1,177 @@
+package com.texthip.thip.ui.feed.screen
+
+import androidx.compose.foundation.background
+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.lazy.LazyColumn
+import androidx.compose.material3.HorizontalDivider
+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.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.feed.component.MySubscriptionList
+import com.texthip.thip.ui.feed.mock.MySubscriptionData
+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 SubscriptionScreen(
+    navController: NavController? = null,
+    titleText: String = stringResource(R.string.thip_list)
+) {
+    val initialmembers = listOf(
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 100
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thipthip",
+            role = "공식 인플루언서",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 50
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 0
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thip01",
+            role = "작가",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 1000
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 500
+        ),
+
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thipthip",
+            role = "공식 인플루언서",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 105
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 8
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thip01",
+            role = "작가",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 100
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 88
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thipthip",
+            role = "공식 인플루언서",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 50
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 100
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thip01",
+            role = "작가",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 1
+        ),
+    )
+
+    var members by remember { mutableStateOf(initialmembers) }
+
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            onLeftClick = {},
+            title = titleText
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+
+        ) {
+            Spacer(modifier = Modifier.height(40.dp))
+            Text(
+                text = stringResource(R.string.whole_num, members.size),
+                style = typography.menu_m500_s14_h24,
+                color = colors.Grey,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(start = 20.dp, bottom = 4.dp)
+            )
+            HorizontalDivider(
+                modifier = Modifier.padding(horizontal = 20.dp),
+                color = colors.DarkGrey02,
+                thickness = 1.dp
+            )
+            LazyColumn(
+                modifier = Modifier
+                    .fillMaxSize()
+            ) {
+                item {
+                    MySubscriptionList(
+                        members = members,
+                        isMine = false,
+                        onUnsubscribe = {  }
+                    )
+                }
+            }
+        }
+    }
+
+}
+
+@Preview
+@Composable
+private fun SubscriptionListScreenPrev() {
+    ThipTheme {
+        SubscriptionScreen()
+    }
+}
\ 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 4dd01448..4f70ba19 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -286,6 +286,7 @@
 
     <!--    feed   -->
     <string name="my_thip_list">내 띱 목록</string>
+    <string name="thip_list">띱 목록</string>
     <string name="whole_num">전체 %d</string>
     <string name="toast_thip">%1$s 님을 띱 했어요</string>
     <string name="toast_thip_cancel">%1$s 님을 띱 취소했어요</string>

From 50e47d9d901f62857071aa74655b2b5490f6fa4b Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Sat, 2 Aug 2025 11:47:15 +0900
Subject: [PATCH 16/22] =?UTF-8?q?[refactor]:=20=EB=8D=94=EB=B3=B4=EA=B8=B0?=
 =?UTF-8?q?=20=EA=B4=80=EB=A0=A8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20&=20maxline=20=EC=A0=81=EC=9A=A9=EB=A7=8C(?=
 =?UTF-8?q?#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/feed/component/MyFeedCard.kt      | 34 ++++-----
 .../component/ExpandableTextWithMore.kt       | 71 -------------------
 .../thip/ui/mypage/component/SavedFeedCard.kt |  8 ++-
 3 files changed, 20 insertions(+), 93 deletions(-)
 delete mode 100644 app/src/main/java/com/texthip/thip/ui/mypage/component/ExpandableTextWithMore.kt

diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/MyFeedCard.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/MyFeedCard.kt
index cc1194a1..447372ae 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/component/MyFeedCard.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/MyFeedCard.kt
@@ -21,7 +21,6 @@ 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.ActionBookButton
-import com.texthip.thip.ui.mypage.component.ExpandableTextWithMore
 import com.texthip.thip.ui.mypage.mock.FeedItem
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
@@ -34,34 +33,32 @@ fun MyFeedCard(
     onContentClick: () -> Unit = {}
 ) {
     val images = feedItem.imageUrls.orEmpty().map { painterResource(id = it) }
-    val imagePainters = feedItem.imageUrls.orEmpty().map { painterResource(it) }
-    val hasImages = imagePainters.isNotEmpty()
+    val hasImages = images.isNotEmpty()
     val maxLines = if (hasImages) 3 else 8
+
     Column(
         modifier = modifier
             .fillMaxWidth()
             .padding(horizontal = 20.dp)
     ) {
-        Column(
-            modifier = modifier
-                .fillMaxWidth()
-        ) {
-            ActionBookButton(
-                bookTitle = feedItem.bookTitle,
-                bookAuthor = feedItem.authName,
+        ActionBookButton(
+            bookTitle = feedItem.bookTitle,
+            bookAuthor = feedItem.authName,
+            onClick = {}
+        )
 
-                onClick = {}
-            )
-        }
-        ExpandableTextWithMore(
+        Text(
             text = feedItem.content,
-            maxLinesWhenCollapsed = maxLines,
+            style = typography.feedcopy_r400_s14_h20,
+            color = colors.White,
+            maxLines = maxLines,
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(vertical = 16.dp)
-                .clickable{onContentClick()}
+                .clickable { onContentClick() }
         )
-        if (images.isNotEmpty()) {
+
+        if (hasImages) {
             Row(
                 modifier = Modifier
                     .fillMaxWidth()
@@ -116,7 +113,6 @@ fun MyFeedCard(
                 )
             }
         }
-
     }
 }
 
@@ -147,7 +143,7 @@ private fun MyFeedCardPrev() {
         bookTitle = "책 제목",
         authName = "한강",
         timeAgo = "3시간 전",
-        content = "한줄만 입력 가능",
+        content = "세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!",
         likeCount = 10,
         commentCount = 5,
         isLiked = false,
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/component/ExpandableTextWithMore.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/ExpandableTextWithMore.kt
deleted file mode 100644
index 83b9cd80..00000000
--- a/app/src/main/java/com/texthip/thip/ui/mypage/component/ExpandableTextWithMore.kt
+++ /dev/null
@@ -1,71 +0,0 @@
-package com.texthip.thip.ui.mypage.component
-
-import androidx.compose.foundation.clickable
-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.Modifier
-import androidx.compose.ui.text.SpanStyle
-import androidx.compose.ui.text.buildAnnotatedString
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.text.withStyle
-import com.texthip.thip.ui.theme.ThipTheme.colors
-import com.texthip.thip.ui.theme.ThipTheme.typography
-
-//TODO 수정 후 SavedFeedCard에 적용 예정
-@Composable
-fun ExpandableTextWithMore(
-    maxLinesWhenCollapsed: Int,
-    text: String,
-    modifier: Modifier = Modifier
-) {
-    var isExpanded by remember { mutableStateOf(false) }
-    var truncatedText by remember { mutableStateOf("") }
-    var shouldShowMore by remember { mutableStateOf(false) }
-
-    val overflowTag = "MORE"
-
-    if (isExpanded) {
-        Text(
-            text = text,
-            style = typography.feedcopy_r400_s14_h20,
-            color = colors.White,
-            modifier = modifier
-        )
-    } else {
-        Text(
-            text = buildAnnotatedString {
-                append(truncatedText)
-                if (shouldShowMore) {
-                    append(" ")
-                    pushStringAnnotation(tag = overflowTag, annotation = "more")
-                    withStyle(style = SpanStyle(color = colors.White)) {
-                        append("…더보기")
-                    }
-                    pop()
-                }
-            },
-            maxLines = maxLinesWhenCollapsed,
-            overflow = TextOverflow.Clip, //직접 컨트롤
-            style = typography.feedcopy_r400_s14_h20,
-            color = colors.White,
-            modifier = modifier.clickable {
-                if (shouldShowMore) isExpanded = true
-            },
-            onTextLayout = { result ->
-                val isOverflowing = result.lineCount > maxLinesWhenCollapsed
-                if (isOverflowing && !shouldShowMore) {
-                    shouldShowMore = true
-                    val end = result.getLineEnd(maxLinesWhenCollapsed - 1, visibleEnd = true)
-                    truncatedText = text.take(end).trimEnd()
-                } else if (!isOverflowing && !shouldShowMore) {
-                    // 줄 수 안 넘는 경우 → 본문 그대로
-                    truncatedText = text
-                }
-            }
-        )
-    }
-}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt
index 290bef27..21324213 100644
--- a/app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt
@@ -67,9 +67,11 @@ fun SavedFeedCard(
                 onClick = {}
             )
         }
-        ExpandableTextWithMore(
+        Text(
             text = feedItem.content,
-            maxLinesWhenCollapsed = maxLines,
+            style = typography.feedcopy_r400_s14_h20,
+            color = colors.White,
+            maxLines = maxLines,
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(vertical = 16.dp)
@@ -142,7 +144,7 @@ private fun SavedFeedCardPrev() {
         bookTitle = "책 제목",
         authName = "한강",
         timeAgo = "3시간 전",
-        content = "무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷",
+        content = "무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷",
         likeCount = 10,
         commentCount = 5,
         isLiked = false,

From 0a11894348f7216f780bb138bb1500f9d3165953 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Fri, 8 Aug 2025 18:26:06 +0900
Subject: [PATCH 17/22] =?UTF-8?q?[refactor]:=20=EC=BB=AC=EB=9F=AC=20thip?=
 =?UTF-8?q?=EC=9D=98=20colors=EB=A1=9C=20=EC=9D=BC=EA=B4=84=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/common/buttons/ActionBarButton.kt    |  2 +-
 .../texthip/thip/ui/common/cards/CardItemRoom.kt |  2 +-
 .../thip/ui/common/cards/CardItemRoomSmall.kt    |  2 +-
 .../texthip/thip/ui/common/cards/CardRoomBook.kt |  4 ++--
 .../thip/ui/common/header/HeaderMenuBarTab.kt    |  2 +-
 .../thip/ui/feed/component/ImageViewerModal.kt   | 16 +++++++++-------
 .../thip/ui/feed/component/MySubscribelistBar.kt |  6 +++---
 .../group/makeroom/component/GroupWheelPicker.kt |  2 +-
 .../ui/group/myroom/component/GroupEmptyCard.kt  |  2 +-
 .../ui/group/myroom/component/GroupMainCard.kt   |  2 +-
 .../thip/ui/group/note/component/ReplyItem.kt    |  2 +-
 11 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBarButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBarButton.kt
index 60a64898..5af726aa 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBarButton.kt
+++ b/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
                 )
             }
         }
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardItemRoom.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardItemRoom.kt
index c319d0d1..33a02afb 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/cards/CardItemRoom.kt
+++ b/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))
 
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardItemRoomSmall.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardItemRoomSmall.kt
index e4599b5e..9859ce13 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/cards/CardItemRoomSmall.kt
+++ b/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))
 
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardRoomBook.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardRoomBook.kt
index b298e218..eab849c6 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/cards/CardRoomBook.kt
+++ b/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,
                 )
             }
 
diff --git a/app/src/main/java/com/texthip/thip/ui/common/header/HeaderMenuBarTab.kt b/app/src/main/java/com/texthip/thip/ui/common/header/HeaderMenuBarTab.kt
index 0e090e39..fc1bf53e 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/header/HeaderMenuBarTab.kt
+++ b/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,
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/ImageViewerModal.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/ImageViewerModal.kt
index 080bb889..0fed4b94 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/component/ImageViewerModal.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/ImageViewerModal.kt
@@ -22,11 +22,13 @@ 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
@@ -43,14 +45,14 @@ fun ImageViewerModal(
     Box(
         modifier = Modifier
             .fillMaxSize()
-            .background(Color.Black)
+            .background(colors.Black)
             .clickable { onDismiss() }
     ) {
         // 닫기 버튼
         Icon(
             painter = painterResource(R.drawable.ic_x),
             contentDescription = "닫기",
-            tint = Color.White,
+            tint = colors.White,
             modifier = Modifier
                 .align(Alignment.TopEnd)
                 .padding(20.dp)
@@ -93,8 +95,8 @@ fun ImageViewerModal(
                             .size(8.dp)
                             .clip(CircleShape)
                             .background(
-                                if (index == pagerState.currentPage) Color.White
-                                else Color.White.copy(alpha = 0.4f)
+                                if (index == pagerState.currentPage) colors.White
+                                else colors.White.copy(alpha = 0.4f)
                             )
                     )
                 }
@@ -104,14 +106,14 @@ fun ImageViewerModal(
         // 이미지 카운터 (예: 1/3)
         if (images.size > 1) {
             Text(
-                text = "${pagerState.currentPage + 1}/${images.size}",
+                text = stringResource(id = R.string.tag_count, images.size, 3),
                 style = typography.copy_r400_s14,
-                color = Color.White,
+                color = colors.White,
                 modifier = Modifier
                     .align(Alignment.TopCenter)
                     .padding(20.dp)
                     .background(
-                        Color.Black.copy(alpha = 0.5f),
+                        colors.Black.copy(alpha = 0.5f),
                         shape = androidx.compose.foundation.shape.RoundedCornerShape(12.dp)
                     )
                     .padding(horizontal = 12.dp, vertical = 6.dp)
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt
index b47f862f..d8b4125e 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt
@@ -67,7 +67,7 @@ fun MySubscribeBarlist(
                 Text(
                     text = stringResource(R.string.my_subscription),
                     style = typography.smalltitle_sb600_s14_h20,
-                    color = Color.White,
+                    color = colors.White,
                     modifier = Modifier.padding(start = 2.dp)
                 )
             }
@@ -99,7 +99,7 @@ fun MySubscribeBarlist(
                             maxLines = 1,
                             overflow = TextOverflow.Ellipsis,
                             style = typography.view_r400_s11_h20,
-                            color = Color.White,
+                            color = colors.White,
                             modifier = Modifier.width(36.dp)
                         )
                     }
@@ -125,7 +125,7 @@ private fun MySubscribeBarlistPrev() {
                 profileImageUrl = "https://example.com/profile$it.jpg",
                 nickname = "닉네임$it",
                 role = "문학가",
-                roleColor = Color.Red,
+                roleColor = colors.Red,
                 subscriberCount = 100 + it
             )
         }
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupWheelPicker.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupWheelPicker.kt
index cca7af26..fdf71339 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupWheelPicker.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupWheelPicker.kt
@@ -266,7 +266,7 @@ fun WheelPickerPreview() {
 
     Box(
         modifier = Modifier
-            .background(Color.Black),
+            .background(colors.Black),
         contentAlignment = Alignment.Center
     ) {
         Row(
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupEmptyCard.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupEmptyCard.kt
index 1b11017b..05d398e4 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupEmptyCard.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupEmptyCard.kt
@@ -33,7 +33,7 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 @Composable
 fun GroupEmptyCard(
     modifier: Modifier = Modifier,
-    backgroundColor: Color = Color.White,
+    backgroundColor: Color = colors.White,
     onClick: () -> Unit = {}
 ) {
     // 그라데이션
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupMainCard.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupMainCard.kt
index 2feb3c94..3fc92203 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupMainCard.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupMainCard.kt
@@ -40,7 +40,7 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 @Composable
 fun GroupMainCard(
     data: GroupCardData,
-    backgroundColor: Color = Color.White,
+    backgroundColor: Color = colors.White,
     onClick: () -> Unit = {}
 ) {
     // 그라데이션
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/ReplyItem.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/ReplyItem.kt
index 16353fee..3849a853 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/note/component/ReplyItem.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/ReplyItem.kt
@@ -42,7 +42,7 @@ fun ReplyItem(
         Icon(
             painter = painterResource(R.drawable.ic_reply),
             contentDescription = null,
-            tint = Color.White
+            tint = colors.White
         )
 
         Column(

From a3a37a9160e2eac33a3cc05df938742360f11346 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Fri, 8 Aug 2025 22:25:12 +0900
Subject: [PATCH 18/22] =?UTF-8?q?[refactor]:=20=ED=94=BC=EB=93=9C=20?=
 =?UTF-8?q?=EB=8C=93=EA=B8=80=20=EC=8A=A4=ED=81=AC=EB=A6=B0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/feed/screen/FeedCommentScreen.kt  | 336 +++++++++++-------
 1 file changed, 200 insertions(+), 136 deletions(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
index c7531431..dc6665e9 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
@@ -1,14 +1,26 @@
 package com.texthip.thip.ui.feed.screen
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+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.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.HorizontalDivider
-import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -22,6 +34,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.blur
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -37,7 +50,8 @@ import com.texthip.thip.ui.common.modal.DialogPopup
 import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
 import com.texthip.thip.ui.feed.component.ImageViewerModal
 import com.texthip.thip.ui.feed.mock.FeedItemType
-import com.texthip.thip.ui.group.note.component.*
+import com.texthip.thip.ui.group.note.component.CommentItem
+import com.texthip.thip.ui.group.note.component.ReplyItem
 import com.texthip.thip.ui.group.note.mock.mockCommentList
 import com.texthip.thip.ui.group.room.mock.MenuBottomSheetItem
 import com.texthip.thip.ui.mypage.mock.FeedItem
@@ -60,9 +74,8 @@ fun FeedCommentScreen(
     onLikeClick: () -> Unit = {},
     onCommentInputChange: (String) -> Unit = {},
     onSendClick: () -> Unit = {},
-    commentList: SnapshotStateList<FeedCommentItem> = remember { mutableStateListOf() },
-
-    ) {
+    commentList: SnapshotStateList<FeedCommentItem> = remember { mutableStateListOf() }
+) {
     var isBottomSheetVisible by remember { mutableStateOf(false) }
     var showDialog by remember { mutableStateOf(false) }
 
@@ -74,10 +87,25 @@ fun FeedCommentScreen(
     val images = feedItem.imageUrls.orEmpty().map { painterResource(id = it) }
     var showImageViewer by remember { mutableStateOf(false) }
     var selectedImageIndex by remember { mutableStateOf(0) }
+
+    var selectedComment by remember { mutableStateOf<FeedCommentItem?>(null) }
+    var selectedReply by remember { mutableStateOf<FeedReplyItem?>(null) }
+
     Box(
-        modifier = Modifier
-            .fillMaxSize()
-            .blur(if (showDialog) 10.dp else 0.dp)
+        modifier = if (isBottomSheetVisible || showDialog) {
+            Modifier
+                .fillMaxSize()
+                .blur(5.dp)
+        } else {
+            Modifier.fillMaxSize()
+        }
+            //바깥 터치 시 선택 해제 되도록
+            .pointerInput(Unit) {
+                detectTapGestures(onTap = {
+                    selectedComment = null
+                    selectedReply = null
+                })
+            }
     ) {
         DefaultTopAppBar(
             isRightIconVisible = true,
@@ -85,20 +113,18 @@ fun FeedCommentScreen(
             onLeftClick = {},
             onRightClick = { isBottomSheetVisible = true },
         )
+
         LazyColumn(
             modifier = modifier
                 .fillMaxWidth()
                 .padding(top = 56.dp),
             contentPadding = PaddingValues(bottom = 20.dp)
         ) {
+            // 상단 피드
             item {
-                Column(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                ) {
+                Column {
                     ProfileBar(
-                        modifier = Modifier
-                            .padding(20.dp),
+                        modifier = Modifier.padding(20.dp),
                         profileImage = profileImage,
                         topText = feedItem.userName,
                         bottomText = feedItem.userRole,
@@ -106,7 +132,7 @@ fun FeedCommentScreen(
                         hoursAgo = feedItem.timeAgo
                     )
                     Column(
-                        modifier = Modifier
+                        Modifier
                             .fillMaxWidth()
                             .padding(vertical = 16.dp, horizontal = 20.dp)
                     ) {
@@ -122,11 +148,11 @@ fun FeedCommentScreen(
                         color = colors.White,
                         modifier = Modifier
                             .fillMaxWidth()
-                            .padding(bottom = 16.dp, start = 20.dp,end = 20.dp)
+                            .padding(bottom = 16.dp, start = 20.dp, end = 20.dp)
                     )
                     if (images.isNotEmpty()) {
                         LazyRow(
-                            modifier = Modifier
+                            Modifier
                                 .fillMaxWidth()
                                 .padding(start = 20.dp, bottom = 16.dp),
                             verticalAlignment = Alignment.CenterVertically
@@ -149,7 +175,7 @@ fun FeedCommentScreen(
                     }
                     if (feedItem.tags.isNotEmpty()) {
                         Row(
-                            modifier = Modifier
+                            Modifier
                                 .fillMaxWidth()
                                 .padding(bottom = 16.dp, start = 20.dp, end = 20.dp),
                             horizontalArrangement = Arrangement.spacedBy(8.dp)
@@ -159,80 +185,14 @@ fun FeedCommentScreen(
                                     text = tag,
                                     isFilled = false,
                                     isSelected = false,
-                                    onClick = {}
-                                )
-                            }
-                        }
-                    }
-                    HorizontalDivider(
-                        modifier = Modifier.padding(horizontal = 20.dp),
-                        color = colors.DarkGrey02,
-                        thickness = 1.dp,
-                    )
-                    Row(
-                        modifier = Modifier.padding(top = 16.dp, bottom = 30.dp, start = 20.dp, end = 20.dp),
-                        verticalAlignment = Alignment.CenterVertically
-                    ) {
-                        Icon(
-                            modifier = Modifier.clickable {
-                                feed.value = feed.value.copy(
-                                    isLiked = !feed.value.isLiked,
-                                    likeCount = if (feed.value.isLiked) feed.value.likeCount - 1 else feed.value.likeCount + 1
-                                )
-                                onLikeClick()
-                            },
-                            painter = painterResource(if (feedItem.isLiked) R.drawable.ic_heart_filled else R.drawable.ic_heart),
-                            contentDescription = null,
-                            tint = Color.Unspecified
-                        )
-                        Text(
-                            text = feedItem.likeCount.toString(),
-                            style = typography.feedcopy_r400_s14_h20,
-                            color = colors.White,
-                            modifier = Modifier.padding(start = 5.dp, end = 12.dp)
-                        )
-                        Icon(
-                            painter = painterResource(R.drawable.ic_comment),
-                            contentDescription = null,
-                            tint = colors.White
-                        )
-                        Text(
-                            text = feedItem.commentCount.toString(),
-                            style = typography.feedcopy_r400_s14_h20,
-                            color = colors.White,
-                            modifier = Modifier.padding(start = 5.dp, end = 12.dp)
-                        )
-                        Spacer(modifier = Modifier.weight(1f))
-
-                        when (feedType) {
-                            FeedItemType.LOCKED -> {
-                                if (feedItem.isLocked) {
-                                    Icon(
-                                        painter = painterResource(R.drawable.ic_lock),
-                                        contentDescription = null,
-                                        tint = Color.Unspecified
-                                    )
-                                }
-                                // else: 아무것도 안 띄움
-                            }
-
-                            FeedItemType.SAVABLE -> {
-                                Icon(
-                                    painter = painterResource(
-                                        if (feedItem.isSaved) R.drawable.ic_save_filled else R.drawable.ic_save
-                                    ),
-                                    contentDescription = null,
-                                    tint = Color.Unspecified
-                                )
+                                    onClick = {})
                             }
                         }
                     }
+                    HorizontalDivider(color = colors.DarkGrey02, thickness = 10.dp)
                 }
-                HorizontalDivider(
-                    color = colors.DarkGrey02,
-                    thickness = 10.dp
-                )
             }
+            //댓글이 없는 경우
             if (commentList.isEmpty()) {
                 item {
                     Column(
@@ -262,32 +222,136 @@ fun FeedCommentScreen(
                         Column(
                             modifier = Modifier
                                 .fillMaxWidth()
-                                .padding(horizontal = 20.dp, vertical = 24.dp)
+                                .padding(horizontal = 20.dp)
                         ) {
-                            CommentItem(
-                                data = commentItem,
-                                onReplyClick = { replyTo.value = it },
-
-                                )
-                            Spacer(modifier = Modifier.height(24.dp))
-                            commentItem.replyList.forEach { reply ->
-                                ReplyItem(
-                                    data = reply,
+                            // 댓글 아이템
+                            Box(
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .pointerInput(Unit) {
+                                        detectTapGestures(
+                                            onLongPress = {
+                                                selectedComment = commentItem
+                                                selectedReply = null
+                                            }
+                                        )
+                                    }
+                            ) {
+                                CommentItem(
+                                    data = commentItem,
                                     onReplyClick = { replyTo.value = it }
                                 )
-                                Spacer(modifier = Modifier.height(24.dp))
                             }
-                            if (index == commentList.lastIndex) {
-                                Spacer(modifier = Modifier.height(40.dp))
+                            if (selectedComment == commentItem) {
+                                Row(
+                                    modifier = Modifier.fillMaxWidth(),
+                                    horizontalArrangement = Arrangement.End
+                                ) {
+                                    val isMyComment = commentItem.userId == currentUserId
+                                    Box(
+                                        modifier = Modifier
+                                            .background(Color.Transparent, RoundedCornerShape(12.dp))
+                                            .border(
+                                                width = 1.dp,
+                                                color = colors.White,
+                                                shape = RoundedCornerShape(12.dp)
+                                            )
+                                            .clickable {
+                                                if (isMyComment) {
+                                                    //TODO 삭제 로직
+                                                } else {
+                                                    //TODO 신고 로직
+                                                }
+                                                selectedComment = null
+                                            }
+                                            .padding(horizontal = 20.dp, vertical = 12.dp)
+                                    ) {
+                                        Text(
+                                            text = stringResource(if (isMyComment) R.string.delete else R.string.report),
+                                            color = if (isMyComment) colors.White else colors.Red,
+                                            style = typography.feedcopy_r400_s14_h20
+                                        )
+                                    }
+                                }
+                            }
+                        }
+
+                        // 대댓글들
+                        Spacer(modifier = Modifier.height(24.dp))
+                        commentItem.replyList.forEach { reply ->
+                            Column(
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .padding(horizontal = 20.dp)
+                            ) {
+                                // 대댓글 아이템
+                                Box(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .pointerInput(Unit) {
+                                            detectTapGestures(
+                                                onLongPress = {
+                                                    selectedReply = reply
+                                                    selectedComment = null
+                                                }
+                                            )
+                                        }
+                                ) {
+                                    ReplyItem(data = reply, onReplyClick = { replyTo.value = it })
+                                }
+
+                                if (selectedReply == reply) {
+                                    Row(
+                                        modifier = Modifier
+                                            .fillMaxWidth(),
+                                        horizontalArrangement = Arrangement.End
+                                    ) {
+                                        val isMyReply = reply.userId == currentUserId
+                                        Box(
+                                            modifier = Modifier
+                                                .background(
+                                                    Color.Transparent,
+                                                    RoundedCornerShape(12.dp)
+                                                )
+                                                .border(
+                                                    width = 1.dp,
+                                                    color = colors.White,
+                                                    shape = RoundedCornerShape(12.dp)
+                                                )
+                                                .clickable {
+                                                    if (isMyReply) {
+                                                        //TODO 삭제 로직
+                                                    } else {
+                                                        //TODO 신고 로직
+                                                    }
+                                                    selectedReply = null
+                                                }
+                                                .padding(horizontal = 20.dp, vertical = 12.dp)
+                                        ) {
+                                            Text(
+                                                text = stringResource(if (isMyReply) R.string.delete else R.string.report),
+                                                color = if (isMyReply) colors.White else colors.Red,
+                                                style = typography.feedcopy_r400_s14_h20
+                                            )
+                                        }
+                                    }
+                                }
+                                Spacer(modifier = Modifier.height(24.dp))
                             }
                         }
+
+
+                        if (index == commentList.lastIndex) {
+                            Spacer(modifier = Modifier.height(40.dp))
+                        }
                     }
                 }
             }
         }
+
+        // 댓글 입력창
         CommentTextField(
-            modifier = Modifier
-                .align(Alignment.BottomCenter),
+            modifier = Modifier.align(Alignment.BottomCenter),
             input = commentInput.value,
             hint = stringResource(R.string.feed_reply_to, feedItem.userName),
             onInputChange = {
@@ -298,7 +362,6 @@ fun FeedCommentScreen(
                 if (commentInput.value.isNotBlank()) {
                     val replyTargetNickname = replyTo.value
                     if (replyTargetNickname == null) {
-
                         commentList.add(
                             FeedCommentItem(
                                 commentId = commentList.size + 1,
@@ -315,7 +378,6 @@ fun FeedCommentScreen(
                             )
                         )
                     } else {
-                        // 대댓글
                         val parentIndex =
                             commentList.indexOfFirst { it.nickName == replyTargetNickname }
                         if (parentIndex != -1) {
@@ -333,9 +395,8 @@ fun FeedCommentScreen(
                                 isLiked = false,
                                 likeCount = 0
                             )
-                            val updatedReplies = parentComment.replyList + newReply
                             commentList[parentIndex] =
-                                parentComment.copy(replyList = updatedReplies)
+                                parentComment.copy(replyList = parentComment.replyList + newReply)
                         }
                     }
                     commentInput.value = ""
@@ -346,15 +407,15 @@ fun FeedCommentScreen(
             replyTo = replyTo.value,
             onCancelReply = { replyTo.value = null }
         )
-
     }
+
     if (isBottomSheetVisible) {
         MenuBottomSheet(
             items = listOf(
                 MenuBottomSheetItem(
                     text = stringResource(R.string.edit_feed),
                     color = colors.White,
-                    onClick = { }
+                    onClick = {}
                 ),
                 MenuBottomSheetItem(
                     text = stringResource(R.string.delete_feed),
@@ -365,20 +426,16 @@ fun FeedCommentScreen(
                     }
                 )
             ),
-            onDismiss = {
-                isBottomSheetVisible = false
-            }
+            onDismiss = { isBottomSheetVisible = false }
         )
     }
+
     if (showDialog) {
         Box(
-            modifier = Modifier
+            Modifier
                 .fillMaxSize()
-                .clickable(enabled = true, onClick = { showDialog = false })
-        ) {
-            Box(
-                modifier = Modifier.align(Alignment.Center)
-            ) {
+                .clickable { showDialog = false }) {
+            Box(Modifier.align(Alignment.Center)) {
                 DialogPopup(
                     title = stringResource(R.string.delete_feed_dialog_title),
                     description = stringResource(R.string.delete_feed_dialog_description),
@@ -394,7 +451,7 @@ fun FeedCommentScreen(
             }
         }
     }
-    // 이미지 뷰어 모달
+
     if (showImageViewer && images.isNotEmpty()) {
         ImageViewerModal(
             images = images.take(3),
@@ -406,7 +463,7 @@ fun FeedCommentScreen(
 
 @Preview
 @Composable
-private fun FeedCommentScreenPrev() {
+private fun FeedCommentScreenWithMockComments() {
     ThipTheme {
         val mockFeedItem = FeedItem(
             id = 1,
@@ -416,20 +473,27 @@ private fun FeedCommentScreenPrev() {
             bookTitle = "채식주의자",
             authName = "한강",
             timeAgo = "1시간 전",
-            content = "이 책은 인간의 본성과 억압에 대한 깊은 성찰을 담고 있어요. 인상 깊은 문장이 많았어요.",
+            content = "이 책은 인간의 본성과 억압에 대한 깊은 성찰을 담고 있어요.",
             likeCount = 12,
             commentCount = 3,
             isLiked = true,
-            isSaved = false,
-            isLocked = false,
-            imageUrls = listOf(R.drawable.character_sociology, R.drawable.character_art),
+            isSaved = true,
+            isLocked = true,
+            imageUrls = listOf(
+                R.drawable.bookcover_sample,
+                R.drawable.bookcover_sample,
+                R.drawable.bookcover_sample
+            ),
             tags = listOf("에세이", "문학", "힐링")
         )
-        val commentList = remember { mutableStateListOf<FeedCommentItem>() }
-
+        val commentList = remember {
+            mutableStateListOf<FeedCommentItem>().apply {
+                addAll(mockCommentList.commentData)
+            }
+        }
         FeedCommentScreen(
             feedItem = mockFeedItem,
-            feedType = FeedItemType.LOCKED,
+            feedType = FeedItemType.SAVABLE,
             profileImage = painterResource(R.drawable.character_literature),
             currentUserId = 999,
             currentUserName = "나",
@@ -442,7 +506,7 @@ private fun FeedCommentScreenPrev() {
 
 @Preview
 @Composable
-private fun FeedCommentScreenWithMockComments() {
+private fun FeedCommentScreenPrev() {
     ThipTheme {
         val mockFeedItem = FeedItem(
             id = 1,
@@ -452,20 +516,20 @@ private fun FeedCommentScreenWithMockComments() {
             bookTitle = "채식주의자",
             authName = "한강",
             timeAgo = "1시간 전",
-            content = "이 책은 인간의 본성과 억압에 대한 깊은 성찰을 담고 있어요. 인상 깊은 문장이 많았어요.",
+            content = "이 책은 인간의 본성과 억압에 대한 깊은 성찰을 담고 있어요.",
             likeCount = 12,
             commentCount = 3,
             isLiked = true,
             isSaved = true,
             isLocked = false,
-            imageUrls = listOf(R.drawable.bookcover_sample),
+            imageUrls = listOf(
+                R.drawable.bookcover_sample,
+                R.drawable.bookcover_sample,
+                R.drawable.bookcover_sample
+            ),
             tags = listOf("에세이", "문학", "힐링")
         )
-        val commentList = remember {
-            mutableStateListOf<FeedCommentItem>().apply {
-                addAll(mockCommentList.commentData)
-            }
-        }
+        val commentList = remember { mutableStateListOf<FeedCommentItem>() }
 
         FeedCommentScreen(
             feedItem = mockFeedItem,
@@ -478,4 +542,4 @@ private fun FeedCommentScreenWithMockComments() {
             commentList = commentList
         )
     }
-}
\ No newline at end of file
+}

From 9da55fc256c9f079294915c59468d87a0b30dc15 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Fri, 8 Aug 2025 22:25:37 +0900
Subject: [PATCH 19/22] =?UTF-8?q?[refactor]:=20=ED=94=BC=EB=93=9C=20?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EB=B2=94=EC=9C=84=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=95(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../texthip/thip/ui/feed/screen/FeedScreen.kt | 215 +++++++++---------
 1 file changed, 107 insertions(+), 108 deletions(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt
index daf1c120..d896e9b9 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedScreen.kt
@@ -2,6 +2,7 @@ package com.texthip.thip.ui.feed.screen
 
 import androidx.compose.foundation.layout.Arrangement
 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
@@ -106,85 +107,121 @@ fun FeedScreen(
         )
     )
     Box(modifier = Modifier.fillMaxSize()) {
-        LogoTopAppBar(
-            leftIcon = painterResource(R.drawable.ic_plusfriend),
-            hasNotification = false,
-            onLeftClick = {},
-            onRightClick = {},
-            modifier = Modifier.align(Alignment.TopStart)
-        )
-
-        // 스크롤 영역 전체
-        LazyColumn(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(top = 40.dp),
-            verticalArrangement = Arrangement.spacedBy(12.dp)
+        Column(
+            modifier = Modifier.fillMaxSize()
         ) {
-            item {
-                Spacer(modifier = Modifier.height(40.dp))
-                HeaderMenuBarTab(
-                    titles = listOf("피드", "내 피드"),
-                    selectedTabIndex = selectedIndex.value,
-                    onTabSelected = { selectedIndex.value = it }
-                )
-            }
-
-            if (selectedIndex.value == 1) {
-                // 내 피드
-                item {
-                    Spacer(modifier = Modifier.height(32.dp))
-                    AuthorHeader(
-                        profileImage = null,
-                        nickname = nickname,
-                        badgeText = userRole,
-                        buttonText = "",
-                        buttonWidth = 60.dp,
-                        showButton = false
-                    )
-                    Spacer(modifier = Modifier.height(16.dp))
-                    FeedSubscribeBarlist(
-                        modifier = Modifier.padding(horizontal = 20.dp),
-                        followerProfileImageUrls = followerProfileImageUrls,
-                        onClick = {
-                        }
-                    )
-                    Spacer(modifier = Modifier.height(40.dp))
-                    Text(
-                        text = stringResource(R.string.whole_num, totalFeedCount),
-                        style = typography.menu_m500_s14_h24,
-                        color = colors.Grey,
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(bottom = 12.dp, start = 20.dp)
-                    )
-                    HorizontalDivider(
-                        color = colors.DarkGrey02,
-                        thickness = 1.dp,
-                        modifier = Modifier.padding(horizontal = 20.dp)
-                    )
-                }
+            LogoTopAppBar(
+                leftIcon = painterResource(R.drawable.ic_plusfriend),
+                hasNotification = false,
+                onLeftClick = {},
+                onRightClick = {},
+            )
+            Spacer(modifier = Modifier.height(32.dp))
+            HeaderMenuBarTab(
+                titles = listOf("피드", "내 피드"),
+                selectedTabIndex = selectedIndex.value,
+                onTabSelected = { selectedIndex.value = it }
+            )
 
-                if (totalFeedCount == 0) {
+            // 스크롤 영역 전체
+            LazyColumn(
+                modifier = Modifier.weight(1f),
+                verticalArrangement = Arrangement.spacedBy(12.dp)
+            ) {
+                if (selectedIndex.value == 1) {
+                    // 내 피드
                     item {
-                        Box(
+                        Spacer(modifier = Modifier.height(32.dp))
+                        AuthorHeader(
+                            profileImage = null,
+                            nickname = nickname,
+                            badgeText = userRole,
+                            buttonText = "",
+                            buttonWidth = 60.dp,
+                            showButton = false
+                        )
+                        Spacer(modifier = Modifier.height(16.dp))
+                        FeedSubscribeBarlist(
+                            modifier = Modifier.padding(horizontal = 20.dp),
+                            followerProfileImageUrls = followerProfileImageUrls,
+                            onClick = {
+                            }
+                        )
+                        Spacer(modifier = Modifier.height(40.dp))
+                        Text(
+                            text = stringResource(R.string.whole_num, totalFeedCount),
+                            style = typography.menu_m500_s14_h24,
+                            color = colors.Grey,
                             modifier = Modifier
                                 .fillMaxWidth()
-                                .padding(top = 110.dp),
-                            contentAlignment = Alignment.TopCenter
-                        ) {
-                            Text(
-                                text = stringResource(R.string.create_feed),
-                                style = typography.smalltitle_sb600_s18_h24,
-                                color = colors.Grey
+                                .padding(bottom = 12.dp, start = 20.dp)
+                        )
+                        HorizontalDivider(
+                            color = colors.DarkGrey02,
+                            thickness = 1.dp,
+                            modifier = Modifier.padding(horizontal = 20.dp)
+                        )
+                    }
+
+                    if (totalFeedCount == 0) {
+                        item {
+                            Box(
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .padding(top = 110.dp),
+                                contentAlignment = Alignment.TopCenter
+                            ) {
+                                Text(
+                                    text = stringResource(R.string.create_feed),
+                                    style = typography.smalltitle_sb600_s18_h24,
+                                    color = colors.Grey
+                                )
+                            }
+                        }
+                    } else {
+                        itemsIndexed(feedStateList, key = { _, item -> item.id }) { index, feed ->
+                            Spacer(modifier = Modifier.height(if (index == 0) 20.dp else 40.dp))
+                            MyFeedCard(
+                                feedItem = feed,
+                                onLikeClick = {
+                                    val updated = feed.copy(
+                                        isLiked = !feed.isLiked,
+                                        likeCount = if (feed.isLiked) feed.likeCount - 1 else feed.likeCount + 1
+                                    )
+                                    feedStateList[index] = updated
+                                },
+                                onContentClick = {} //FeedCommentScreen으로
                             )
+                            Spacer(modifier = Modifier.height(40.dp))
+                            if (index != feeds.lastIndex) {
+                                HorizontalDivider(
+                                    color = colors.DarkGrey02,
+                                    thickness = 10.dp
+                                )
+                            }
                         }
                     }
                 } else {
+                    //피드
+                    item {
+                        Spacer(modifier = Modifier.height(20.dp))
+                        MySubscribeBarlist(
+                            modifier = Modifier.padding(horizontal = 20.dp),
+                            subscriptions = mySubscriptions,
+                            onClick = {
+                            }
+                        )
+                    }
                     itemsIndexed(feedStateList, key = { _, item -> item.id }) { index, feed ->
-                        Spacer(modifier = Modifier.height(if (index == 0) 20.dp else 40.dp))
-                        MyFeedCard(
+                        val profileImage = feed.userProfileImage?.let { painterResource(it) }
+
+                        SavedFeedCard(
                             feedItem = feed,
+                            profileImage = profileImage,
+                            onBookmarkClick = {
+                                val updated = feed.copy(isSaved = !feed.isSaved)
+                                feedStateList[index] = updated
+                            },
                             onLikeClick = {
                                 val updated = feed.copy(
                                     isLiked = !feed.isLiked,
@@ -193,8 +230,8 @@ fun FeedScreen(
                                 feedStateList[index] = updated
                             },
                             onContentClick = {} //FeedCommentScreen으로
+
                         )
-                        Spacer(modifier = Modifier.height(40.dp))
                         if (index != feeds.lastIndex) {
                             HorizontalDivider(
                                 color = colors.DarkGrey02,
@@ -203,49 +240,11 @@ fun FeedScreen(
                         }
                     }
                 }
-            } else {
-                //피드
-                item {
-                    Spacer(modifier = Modifier.height(20.dp))
-                    MySubscribeBarlist(
-                        modifier = Modifier.padding(horizontal = 20.dp),
-                        subscriptions = mySubscriptions,
-                        onClick = {
-                        }
-                    )
-                }
-                itemsIndexed(feedStateList, key = { _, item -> item.id }) { index, feed ->
-                    val profileImage = feed.userProfileImage?.let { painterResource(it) }
-
-                    SavedFeedCard(
-                        feedItem = feed,
-                        profileImage = profileImage,
-                        onBookmarkClick = {
-                            val updated = feed.copy(isSaved = !feed.isSaved)
-                            feedStateList[index] = updated
-                        },
-                        onLikeClick = {
-                            val updated = feed.copy(
-                                isLiked = !feed.isLiked,
-                                likeCount = if (feed.isLiked) feed.likeCount - 1 else feed.likeCount + 1
-                            )
-                            feedStateList[index] = updated
-                        },
-                        onContentClick = {} //FeedCommentScreen으로
-
-                    )
-                    if (index != feeds.lastIndex) {
-                        HorizontalDivider(
-                            color = colors.DarkGrey02,
-                            thickness = 10.dp
-                        )
-                    }
-                }
             }
         }
         FloatingButton(
             icon = painterResource(id = R.drawable.ic_write),
-            onClick = {  }
+            onClick = { }
         )
     }
 }

From 54b0fa912030871c7d82d18aec2540e79eaec865 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Fri, 8 Aug 2025 22:26:12 +0900
Subject: [PATCH 20/22] =?UTF-8?q?[refactor]:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EB=B2=94?=
 =?UTF-8?q?=EC=9C=84(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/mypage/screen/MypageScreen.kt     | 268 +++++++++---------
 1 file changed, 137 insertions(+), 131 deletions(-)

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
index d670a134..4797ea41 100644
--- 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
@@ -10,6 +10,7 @@ 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.lazy.LazyColumn
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Text
@@ -42,163 +43,168 @@ fun MyPageScreen(
     badgeText: String
 ) {
     var showLogoutDialog by remember { mutableStateOf(false) }
-    val scrollState = rememberScrollState()
 
     Column(
         Modifier
             .background(colors.Black)
             .fillMaxSize()
-            .verticalScroll(scrollState)
     ) {
         LeftNameTopAppBar(
             title = stringResource(R.string.my_page),
             leftIcon = painterResource(R.drawable.ic_search),
             rightIcon = painterResource(R.drawable.ic_plus)
         )
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
+        LazyColumn(
+            modifier = Modifier.weight(1f),
+            verticalArrangement = Arrangement.spacedBy(0.dp)
         ) {
-            Spacer(modifier = Modifier.height(20.dp))
-            AuthorHeader(
-                profileImage = null,
-                nickname = nickname,
-                badgeText = badgeText,
-                buttonText = stringResource(R.string.edit)
-            )
-            Spacer(modifier = Modifier.height(40.dp))
-
-            Column(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(horizontal = 20.dp)
-            ) {
-                Text(
-                    text = stringResource(R.string.my_activity),
-                    style = typography.smalltitle_sb600_s18_h24,
-                    color = colors.White,
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(bottom = 12.dp)
-                )
-                MenuItemButton(
-                    text = stringResource(R.string.saved),
-                    icon = painterResource(R.drawable.ic_save),
-                    contentColor = colors.White,
-                    backgroundColor = colors.DarkGrey02,
-                    hasRightIcon = true,
-                    modifier = Modifier.fillMaxWidth(),
-                    onClick = {}
+            item {
+                Spacer(modifier = Modifier.height(20.dp))
+                AuthorHeader(
+                    profileImage = null,
+                    nickname = nickname,
+                    badgeText = badgeText,
+                    buttonText = stringResource(R.string.edit)
                 )
+                Spacer(modifier = Modifier.height(40.dp))
             }
-            Spacer(modifier = Modifier.height(40.dp))
-            Column(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(horizontal = 20.dp)
-            ) {
-                Text(
-                    text = stringResource(R.string.etc),
-                    style = typography.smalltitle_sb600_s18_h24,
-                    color = colors.White,
+            item {
+                Column(
                     modifier = Modifier
                         .fillMaxWidth()
-                        .padding(bottom = 12.dp)
-                )
-                MenuItemButton(
-                    text = stringResource(R.string.notification_settings),
-                    icon = painterResource(R.drawable.ic_notice),
-                    contentColor = colors.White,
-                    backgroundColor = colors.DarkGrey02,
-                    hasRightIcon = true,
-                    modifier = Modifier.fillMaxWidth(),
-                    onClick = {}
-                )
-                Spacer(modifier = Modifier.height(16.dp))
-                MenuItemButton(
-                    text = stringResource(R.string.customer_service),
-                    icon = painterResource(R.drawable.ic_center),
-                    contentColor = colors.White,
-                    backgroundColor = colors.DarkGrey02,
-                    hasRightIcon = true,
-                    modifier = Modifier.fillMaxWidth(),
-                    onClick = {}
-                )
-                Spacer(modifier = Modifier.height(16.dp))
-                MenuItemButton(
-                    text = stringResource(R.string.terms_of_use),
-                    icon = painterResource(R.drawable.ic_doc),
-                    contentColor = colors.White,
-                    backgroundColor = colors.DarkGrey02,
-                    hasRightIcon = true,
-                    modifier = Modifier.fillMaxWidth(),
-                    onClick = {}
-                )
-                Spacer(modifier = Modifier.height(16.dp))
-                MenuItemButton(
-                    text = stringResource(R.string.guide),
-                    icon = painterResource(R.drawable.ic_guide),
-                    contentColor = colors.White,
-                    backgroundColor = colors.DarkGrey02,
-                    hasRightIcon = true,
-                    modifier = Modifier.fillMaxWidth(),
-                    onClick = {}
-                )
-                Spacer(modifier = Modifier.height(16.dp))
-                MenuItemButton(
-                    text = stringResource(R.string.version_1_0),
-                    icon = painterResource(R.drawable.ic_version),
-                    contentColor = colors.White,
-                    backgroundColor = colors.DarkGrey02,
-                    hasRightIcon = true,
-                    modifier = Modifier.fillMaxWidth(),
-                    onClick = {}
-                )
-            }
-            Spacer(modifier = Modifier.height(184.dp))
-
-            Column(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(bottom = 40.dp),
-                horizontalAlignment = Alignment.CenterHorizontally
-            ) {
-                Text(
-                    text = stringResource(R.string.log_out),
-                    style = typography.feedcopy_r400_s14_h20,
-                    color = colors.Grey01,
-                    modifier = Modifier.clickable { showLogoutDialog = true }
-                )
-                Spacer(modifier = Modifier.height(24.dp))
-                Text(
-                    text = stringResource(R.string.delete_account),
-                    style = typography.feedcopy_r400_s14_h20,
-                    color = colors.Grey01,
-                    modifier = Modifier.clickable {
-                        // TODO: 탈퇴 로직
-                    }
-                )
+                        .padding(horizontal = 20.dp)
+                ) {
+                    Text(
+                        text = stringResource(R.string.my_activity),
+                        style = typography.smalltitle_sb600_s18_h24,
+                        color = colors.White,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(bottom = 12.dp)
+                    )
+                    MenuItemButton(
+                        text = stringResource(R.string.saved),
+                        icon = painterResource(R.drawable.ic_save),
+                        contentColor = colors.White,
+                        backgroundColor = colors.DarkGrey02,
+                        hasRightIcon = true,
+                        modifier = Modifier.fillMaxWidth(),
+                        onClick = {}
+                    )
+                }
+                Spacer(modifier = Modifier.height(40.dp))
             }
-
-            if (showLogoutDialog) {
-                Dialog(onDismissRequest = { showLogoutDialog = false }) {
-                    DialogPopup(
+            item {
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 20.dp)
+                ) {
+                    Text(
+                        text = stringResource(R.string.etc),
+                        style = typography.smalltitle_sb600_s18_h24,
+                        color = colors.White,
                         modifier = Modifier
-                            .fillMaxWidth(),
-                        title = stringResource(R.string.log_out),
-                        description = stringResource(R.string.logout_description),
-                        onCancel = { showLogoutDialog = false },
-                        onConfirm = {
-                            showLogoutDialog = false
-                            // TODO: 로그아웃 로직
+                            .fillMaxWidth()
+                            .padding(bottom = 12.dp)
+                    )
+                    MenuItemButton(
+                        text = stringResource(R.string.notification_settings),
+                        icon = painterResource(R.drawable.ic_notice),
+                        contentColor = colors.White,
+                        backgroundColor = colors.DarkGrey02,
+                        hasRightIcon = true,
+                        modifier = Modifier.fillMaxWidth(),
+                        onClick = {}
+                    )
+                    Spacer(modifier = Modifier.height(16.dp))
+                    MenuItemButton(
+                        text = stringResource(R.string.customer_service),
+                        icon = painterResource(R.drawable.ic_center),
+                        contentColor = colors.White,
+                        backgroundColor = colors.DarkGrey02,
+                        hasRightIcon = true,
+                        modifier = Modifier.fillMaxWidth(),
+                        onClick = {}
+                    )
+                    Spacer(modifier = Modifier.height(16.dp))
+                    MenuItemButton(
+                        text = stringResource(R.string.terms_of_use),
+                        icon = painterResource(R.drawable.ic_doc),
+                        contentColor = colors.White,
+                        backgroundColor = colors.DarkGrey02,
+                        hasRightIcon = true,
+                        modifier = Modifier.fillMaxWidth(),
+                        onClick = {}
+                    )
+                    Spacer(modifier = Modifier.height(16.dp))
+                    MenuItemButton(
+                        text = stringResource(R.string.guide),
+                        icon = painterResource(R.drawable.ic_guide),
+                        contentColor = colors.White,
+                        backgroundColor = colors.DarkGrey02,
+                        hasRightIcon = true,
+                        modifier = Modifier.fillMaxWidth(),
+                        onClick = {}
+                    )
+                    Spacer(modifier = Modifier.height(16.dp))
+                    MenuItemButton(
+                        text = stringResource(R.string.version_1_0),
+                        icon = painterResource(R.drawable.ic_version),
+                        contentColor = colors.White,
+                        backgroundColor = colors.DarkGrey02,
+                        hasRightIcon = true,
+                        modifier = Modifier.fillMaxWidth(),
+                        onClick = {}
+                    )
+                }
+                Spacer(modifier = Modifier.height(184.dp))
+            }
+            item {
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(bottom = 40.dp),
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    Text(
+                        text = stringResource(R.string.log_out),
+                        style = typography.feedcopy_r400_s14_h20,
+                        color = colors.Grey01,
+                        modifier = Modifier.clickable { showLogoutDialog = true }
+                    )
+                    Spacer(modifier = Modifier.height(24.dp))
+                    Text(
+                        text = stringResource(R.string.delete_account),
+                        style = typography.feedcopy_r400_s14_h20,
+                        color = colors.Grey01,
+                        modifier = Modifier.clickable {
+                            // TODO: 탈퇴 로직
                         }
                     )
                 }
             }
         }
+
+        if (showLogoutDialog) {
+            Dialog(onDismissRequest = { showLogoutDialog = false }) {
+                DialogPopup(
+                    modifier = Modifier
+                        .fillMaxWidth(),
+                    title = stringResource(R.string.log_out),
+                    description = stringResource(R.string.logout_description),
+                    onCancel = { showLogoutDialog = false },
+                    onConfirm = {
+                        showLogoutDialog = false
+                        // TODO: 로그아웃 로직
+                    }
+                )
+            }
+        }
     }
 }
 
+
 @Preview
 @Composable
 private fun MyPagePrev() {

From c4edd462a25a8b02634dff92b7a49973432c76fc Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Fri, 8 Aug 2025 22:26:41 +0900
Subject: [PATCH 21/22] =?UTF-8?q?[refactor]:=20=EB=B0=B0=EA=B2=BD=EC=BB=AC?=
 =?UTF-8?q?=EB=9F=AC=20=EC=82=AD=EC=A0=9C(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../com/texthip/thip/ui/feed/screen/SubscriptionListScreen.kt    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/SubscriptionListScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/SubscriptionListScreen.kt
index 684ea1e5..76d355a4 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/screen/SubscriptionListScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/SubscriptionListScreen.kt
@@ -125,7 +125,6 @@ fun SubscriptionScreen(
 
     Column(
         Modifier
-            .background(colors.Black)
             .fillMaxSize()
     ) {
         DefaultTopAppBar(

From 3b9d668a4762ed83360f480fb2db7a738a6e8e3a Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Fri, 8 Aug 2025 22:37:16 +0900
Subject: [PATCH 22/22] =?UTF-8?q?[refactor]:=20commentList=20=ED=8C=8C?=
 =?UTF-8?q?=EB=9D=BC=EB=AF=B8=ED=84=B0=EC=97=90=20=EC=83=81=ED=83=9C=20?=
 =?UTF-8?q?=EC=84=A0=EC=96=B8=ED=95=98=EB=8A=94=20=EB=B6=80=EB=B6=84=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95(#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/feed/screen/FeedCommentScreen.kt  | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
index dc6665e9..0ff1b2b3 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
@@ -74,8 +74,9 @@ fun FeedCommentScreen(
     onLikeClick: () -> Unit = {},
     onCommentInputChange: (String) -> Unit = {},
     onSendClick: () -> Unit = {},
-    commentList: SnapshotStateList<FeedCommentItem> = remember { mutableStateListOf() }
+    commentList: SnapshotStateList<FeedCommentItem>? = null
 ) {
+    val CommentList = commentList ?: remember { mutableStateListOf<FeedCommentItem>() }
     var isBottomSheetVisible by remember { mutableStateOf(false) }
     var showDialog by remember { mutableStateOf(false) }
 
@@ -193,7 +194,7 @@ fun FeedCommentScreen(
                 }
             }
             //댓글이 없는 경우
-            if (commentList.isEmpty()) {
+            if (CommentList.isEmpty()) {
                 item {
                     Column(
                         modifier = Modifier
@@ -216,7 +217,7 @@ fun FeedCommentScreen(
                     }
                 }
             } else {
-                commentList.forEachIndexed { index, commentItem ->
+                CommentList.forEachIndexed { index, commentItem ->
                     item {
                         Spacer(modifier = Modifier.height(40.dp))
                         Column(
@@ -250,7 +251,10 @@ fun FeedCommentScreen(
                                     val isMyComment = commentItem.userId == currentUserId
                                     Box(
                                         modifier = Modifier
-                                            .background(Color.Transparent, RoundedCornerShape(12.dp))
+                                            .background(
+                                                Color.Transparent,
+                                                RoundedCornerShape(12.dp)
+                                            )
                                             .border(
                                                 width = 1.dp,
                                                 color = colors.White,
@@ -341,7 +345,7 @@ fun FeedCommentScreen(
                         }
 
 
-                        if (index == commentList.lastIndex) {
+                        if (index == CommentList.lastIndex) {
                             Spacer(modifier = Modifier.height(40.dp))
                         }
                     }
@@ -362,9 +366,9 @@ fun FeedCommentScreen(
                 if (commentInput.value.isNotBlank()) {
                     val replyTargetNickname = replyTo.value
                     if (replyTargetNickname == null) {
-                        commentList.add(
+                        CommentList.add(
                             FeedCommentItem(
-                                commentId = commentList.size + 1,
+                                commentId = CommentList.size + 1,
                                 userId = currentUserId,
                                 nickName = currentUserName,
                                 genreName = currentUserGenre,
@@ -379,9 +383,9 @@ fun FeedCommentScreen(
                         )
                     } else {
                         val parentIndex =
-                            commentList.indexOfFirst { it.nickName == replyTargetNickname }
+                            CommentList.indexOfFirst { it.nickName == replyTargetNickname }
                         if (parentIndex != -1) {
-                            val parentComment = commentList[parentIndex]
+                            val parentComment = CommentList[parentIndex]
                             val newReply = FeedReplyItem(
                                 replyId = parentComment.replyList.size + 1,
                                 userId = currentUserId,
@@ -395,7 +399,7 @@ fun FeedCommentScreen(
                                 isLiked = false,
                                 likeCount = 0
                             )
-                            commentList[parentIndex] =
+                            CommentList[parentIndex] =
                                 parentComment.copy(replyList = parentComment.replyList + newReply)
                         }
                     }