From d8e022005ad2c2ac0c82080b13a246d5d65ddc68 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 14 Jul 2025 15:00:40 +0900
Subject: [PATCH 01/24] =?UTF-8?q?[ui]:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85-=EC=9E=A5=EB=A5=B4=EC=84=A0=ED=83=9D=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84=20(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/signin/screen/SignupGenreScreen.kt     | 146 ++++++++++++++++++
 app/src/main/res/values/strings.xml           |   9 ++
 2 files changed, 155 insertions(+)
 create mode 100644 app/src/main/java/com/texthip/thip/ui/signin/screen/SignupGenreScreen.kt

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
new file mode 100644
index 00000000..369e6b7a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupGenreScreen.kt
@@ -0,0 +1,146 @@
+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
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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
+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.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
+fun SignupGenreScreen() {
+    var selectedIndex by rememberSaveable { mutableStateOf(-1) }
+    val isRightButtonEnabled by remember { derivedStateOf { selectedIndex != -1 } }
+
+    val roleCards = listOf(
+        RoleItem(
+            stringResource(R.string.literature),
+            stringResource(R.string.literary_person),
+            R.drawable.character_literature,
+            colors.NeonGreen
+        ),
+        RoleItem(
+            stringResource(R.string.science_it),
+            stringResource(R.string.scientist),
+            R.drawable.character_science,
+            colors.Lavendar
+        ),
+        RoleItem(
+            stringResource(R.string.social_science),
+            stringResource(R.string.sociologist),
+            R.drawable.character_sociology,
+            colors.Orange
+        ),
+        RoleItem(
+            stringResource(R.string.art),
+            stringResource(R.string.artist),
+            R.drawable.character_art,
+            colors.Pink
+        ),
+        RoleItem(
+            stringResource(R.string.humanities),
+            stringResource(R.string.philosopher),
+            R.drawable.character_humanities,
+            colors.Skyblue
+        )
+    )
+
+    Column(
+        Modifier
+            .fillMaxSize()
+    ) {
+        InputTopAppBar(
+            title = stringResource(R.string.settings_2),
+            isRightButtonEnabled = isRightButtonEnabled,
+            rightButtonName = stringResource(R.string.next),
+            isLeftIconVisible = false,
+            onLeftClick = {},
+            onRightClick = {
+                // TODO 다음 화면으로 이동
+            }
+        )
+
+        Spacer(modifier = Modifier.height(40.dp))
+
+        Column(
+            modifier = Modifier
+                .padding(horizontal = 20.dp)
+                .fillMaxWidth()
+        ) {
+            Text(
+                text = stringResource(R.string.select_genre),
+                style = typography.smalltitle_sb600_s18_h24,
+                color = colors.White,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 8.dp)
+            )
+            Text(
+                text = stringResource(R.string.genre_can_be_changed),
+                style = typography.copy_r400_s14,
+                color = colors.White,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 20.dp)
+            )
+            LazyVerticalGrid(
+                columns = GridCells.Adaptive(minSize = 152.dp), // 카드 최소 크기
+                modifier = Modifier
+                    .fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(16.dp),
+                verticalArrangement = Arrangement.spacedBy(16.dp),
+                userScrollEnabled = false,
+            ) {
+                items(roleCards.size) { index ->
+                    RoleCard(
+                        genre = roleCards[index].genre,
+                        role = roleCards[index].role,
+                        imageResId = roleCards[index].imageResId,
+                        genreColor = colors.White,
+                        roleColor = roleCards[index].roleColor,
+                        selected = selectedIndex == index,
+                        onClick = { selectedIndex = index }
+                    )
+                }
+            }
+        }
+    }
+}
+
+
+@Preview
+@Composable
+private fun SignupGenreScreenPrev() {
+    ThipTheme {
+        SignupGenreScreen()
+    }
+}
\ 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 e61783ec..58d39fd6 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -81,8 +81,10 @@
     <string name="edit_role">칭호 편집</string>
     <string name="role_description">장르는 칭호와 연결돼요.</string>
     <string name="choice_one">아래에서 하나를 선택해주세요.</string>
+
     <string name="ask_account_deletion">정말로 탈퇴하시겠어요?</string>
     <string name="delete_account_description">\'예\'를 누르면 모든 기록이 사라져요.</string>
+
     <string name="literature">문학</string>
     <string name="literary_person">문학가</string>
     <string name="science_it">과학·IT</string>
@@ -93,7 +95,9 @@
     <string name="artist">예술가</string>
     <string name="humanities">인문학</string>
     <string name="philosopher">철학자</string>
+
     <string name="logout_description">또 THIP 해주실거죠?</string>
+
     <string name="leave_thip">THIP 떠나기</string>
     <string name="leave_thip_notice_title">탈퇴 주의사항</string>
     <string name="leave_thip_notice_1">회원탈퇴 시 계정정보는 </string>
@@ -104,10 +108,13 @@
     <string name="leave_thip_agree">주의사항을 확인하였으며 이에 동의합니다.</string>
     <string name="delete_account_complete">탈퇴 완료</string>
     <string name="see_you_again">다음에 또 만나요!</string>
+
+
     <string name="push_notification">푸시 알림</string>
     <string name="notification_description">알림센터의 모든 알림을 포함해요</string>
     <string name="push_off">푸시 알림이 해제되었어요.</string>
     <string name="push_on">푸시 알림이 설정되었어요.</string>
+
     <string name="customer_center_email">texthip2025@gmail.com</string>
     <string name="customer_center_description">이메일로 닉네임과 문의사항을 보내주시면\n빠른 시일 내로 해결해 드릴게요!</string>
 
@@ -238,6 +245,8 @@
     <string name="hello_user">안녕하세요, %1$s님</string>
     <string name="signin_done">이제 Thip에서 활동할 준비를 모두 마쳤어요!</string>
     <string name="start_thip">지금 바로 Thip 시작하기</string>
+    <string name="select_genre">관심있는 장르를 하나 선택해주세요.</string>
+    <string name="genre_can_be_changed">이후 내 정보에서 변경이 가능해요.</string>
 
     <!--    feed   -->
     <string name="my_subscription_list">내 구독 리스트</string>

From 108c38c2459cb614cbc4a4fdeb39046bd70c40ce Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 14 Jul 2025 15:01:23 +0900
Subject: [PATCH 02/24] =?UTF-8?q?[fix]:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95=20-=20lazygrid=EB=A1=9C?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=20(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/mypage/screen/MypageEditScreen.kt | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageEditScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageEditScreen.kt
index 2994b8bf..759ec7b2 100644
--- a/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageEditScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageEditScreen.kt
@@ -10,6 +10,8 @@ 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.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -26,6 +28,7 @@ import com.texthip.thip.ui.common.forms.FormTextFieldDefault
 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
 
@@ -125,18 +128,21 @@ fun EditProfileScreen() {
             )
 
 
-            FlowRow(
-                modifier = Modifier.fillMaxWidth(),
-                horizontalArrangement = Arrangement.spacedBy(20.dp),
-                verticalArrangement = Arrangement.spacedBy(16.dp)
+            LazyVerticalGrid(
+                columns = GridCells.Adaptive(minSize = 152.dp), // 카드 최소 크기
+                modifier = Modifier
+                    .fillMaxWidth(),
+                horizontalArrangement = Arrangement.spacedBy(16.dp),
+                verticalArrangement = Arrangement.spacedBy(16.dp),
+                userScrollEnabled = false,
             ) {
-                roleCards.forEachIndexed { index, RoleItem ->
+                items(roleCards.size) { index ->
                     RoleCard(
-                        genre = RoleItem.genre,
-                        role = RoleItem.role,
-                        imageResId = RoleItem.imageResId,
+                        genre = roleCards[index].genre,
+                        role = roleCards[index].role,
+                        imageResId = roleCards[index].imageResId,
                         genreColor = colors.White,
-                        roleColor = RoleItem.roleColor,
+                        roleColor = roleCards[index].roleColor,
                         selected = selectedIndex == index,
                         onClick = { selectedIndex = index }
                     )
@@ -150,5 +156,7 @@ fun EditProfileScreen() {
 @Preview
 @Composable
 private fun EditProfileScreenPrev() {
-    EditProfileScreen()
+    ThipTheme {
+        EditProfileScreen()
+    }
 }
\ No newline at end of file

From f5c57f4cfe8c2f6ac89d2651a8f7ce0e863b7d25 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 14 Jul 2025 15:25:22 +0900
Subject: [PATCH 03/24] =?UTF-8?q?[fix]:=20=ED=94=84=EB=A1=9C=ED=95=84?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=ED=81=AC=EA=B8=B0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/common/header/AuthorHeader.kt     | 36 +++++++++++++------
 1 file changed, 25 insertions(+), 11 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 b2ea1afc..ef46552f 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
@@ -41,6 +41,7 @@ fun AuthorHeader(
     badgeText: String,
     buttonText: String,
     buttonWidth: Dp? = null,
+    showButton: Boolean = true,
     onButtonClick: () -> Unit = {}
 ) {
     Row(
@@ -54,13 +55,13 @@ fun AuthorHeader(
                 painter = profileImage,
                 contentDescription = "작성자 장르이미지",
                 modifier = Modifier
-                    .size(48.dp)
+                    .size(54.dp)
                     .clip(CircleShape)
             )
         } else {
             Box(
                 modifier = Modifier
-                    .size(48.dp)
+                    .size(54.dp)
                     .clip(CircleShape)
                     .background(colors.Grey)
             )
@@ -82,7 +83,8 @@ fun AuthorHeader(
                 maxLines = 1
             )
         }
-        OutlinedButton(
+        if (showButton) {
+            OutlinedButton(
             modifier = Modifier
                 .then(
                     if (buttonWidth != null)
@@ -94,7 +96,8 @@ fun AuthorHeader(
             text = buttonText,
             textStyle = typography.view_m500_s14,
             onClick = onButtonClick
-        )
+            )
+        }
     }
 }
 
@@ -102,12 +105,23 @@ fun AuthorHeader(
 @Composable
 fun PreviewAuthorHeader() {
     ThipTheme {
-        AuthorHeader(
-            profileImage = null,
-            nickname = "열자자제한열열자제한",
-            badgeText = "칭호칭호칭호",
-            buttonText = "구독",
-            buttonWidth = 60.dp
-        )
+        Column {
+            AuthorHeader(
+                profileImage = null,
+                nickname = "열자자제한열열자제한",
+                badgeText = "칭호칭호칭호",
+                buttonText = "구독",
+                buttonWidth = 60.dp,
+                modifier = Modifier.padding(bottom = 20.dp)
+            )
+            AuthorHeader(
+                profileImage = null,
+                nickname = "열자자제한열열자제한",
+                badgeText = "칭호칭호칭호",
+                buttonText = "구독",
+                buttonWidth = 60.dp,
+                showButton = false
+            )
+        }
     }
 }
\ No newline at end of file

From 839d2fd1777455b8fcd0581dbe68aedb1d1041d8 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 14 Jul 2025 15:30:12 +0900
Subject: [PATCH 04/24] =?UTF-8?q?[fix]:=20showButton=20=EC=9D=B8=EC=9E=90?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EA=B0=84=EB=8B=A8=ED=95=9C?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95=20(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/com/texthip/thip/ui/common/header/AuthorHeader.kt  | 6 ++----
 1 file changed, 2 insertions(+), 4 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 ef46552f..35d8cd6f 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
@@ -39,8 +39,8 @@ fun AuthorHeader(
     profileImage: Painter?,
     nickname: String,
     badgeText: String,
-    buttonText: String,
-    buttonWidth: Dp? = null,
+    buttonText: String = "",
+    buttonWidth: Dp = 60.dp,
     showButton: Boolean = true,
     onButtonClick: () -> Unit = {}
 ) {
@@ -111,14 +111,12 @@ fun PreviewAuthorHeader() {
                 nickname = "열자자제한열열자제한",
                 badgeText = "칭호칭호칭호",
                 buttonText = "구독",
-                buttonWidth = 60.dp,
                 modifier = Modifier.padding(bottom = 20.dp)
             )
             AuthorHeader(
                 profileImage = null,
                 nickname = "열자자제한열열자제한",
                 badgeText = "칭호칭호칭호",
-                buttonText = "구독",
                 buttonWidth = 60.dp,
                 showButton = false
             )

From 5a5109f70ff6d1b4d10943855756eb71f7f4e306 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 14 Jul 2025 15:42:19 +0900
Subject: [PATCH 05/24] =?UTF-8?q?[ui]:=20=EB=82=B4=ED=94=BC=EB=93=9C=5F?=
 =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=ED=97=A4=EB=8D=94=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/common/header/AuthorHeader.kt     | 15 ++----
 .../texthip/thip/ui/feed/screen/FeedScreen.kt | 48 +++++++++++++++----
 2 files changed, 42 insertions(+), 21 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 35d8cd6f..ca1e59da 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
@@ -2,8 +2,6 @@ package com.texthip.thip.ui.common.header
 
 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.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -14,29 +12,24 @@ 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.foundation.shape.RoundedCornerShape
 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.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.texthip.thip.ui.common.buttons.OutlinedButton
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
-import com.texthip.thip.R
-import com.texthip.thip.ui.common.buttons.OutlinedButton
-import com.texthip.thip.ui.theme.Grey02
+import coil.compose.rememberAsyncImagePainter
 
 @Composable
 fun AuthorHeader(
     modifier: Modifier = Modifier,
-    profileImage: Painter?,
+    profileImage: String?,
     nickname: String,
     badgeText: String,
     buttonText: String = "",
@@ -52,7 +45,7 @@ fun AuthorHeader(
     ) {
         if (profileImage != null) {
             Image(
-                painter = profileImage,
+                painter = rememberAsyncImagePainter(profileImage),
                 contentDescription = "작성자 장르이미지",
                 modifier = Modifier
                     .size(54.dp)
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 6b6c5b83..11080517 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
@@ -1,42 +1,70 @@
 package com.texthip.thip.ui.feed.screen
 
+import android.widget.Space
 import androidx.compose.foundation.background
-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.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import com.texthip.thip.R
-import com.texthip.thip.ui.common.topappbar.LeftNameTopAppBar
+import com.texthip.thip.ui.common.header.AuthorHeader
+import com.texthip.thip.ui.common.header.HeaderMenuBarTab
 import com.texthip.thip.ui.common.topappbar.LogoTopAppBar
+import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
 
 @Composable
-fun FeedScreen(navController: NavController) {
+fun FeedScreen(navController: NavController? = null,
+               nickname: String,
+               userRole: String) {
+    var selectedIndex = rememberSaveable { mutableIntStateOf(0) }
+
     Column(
         Modifier
-            .background(colors.Black)
             .fillMaxSize()
     ) {
         LogoTopAppBar(
             leftIcon = painterResource(R.drawable.ic_plusfriend),
-            hasNotification = true,
+            hasNotification = false,
             onLeftClick = {},
             onRightClick = {}
         )
+        Spacer(modifier = Modifier.height(40.dp))
+        HeaderMenuBarTab(
+            titles = listOf("피드", "내 피드"),
+            selectedTabIndex = selectedIndex.value,
+            onTabSelected = { selectedIndex.value = it }
+        )
         Column(
             modifier = Modifier
-                .padding(horizontal = 20.dp)
                 .fillMaxSize()
         ) {
-
+            Spacer(modifier = Modifier.height(32.dp))
+            AuthorHeader(
+                profileImage = null,
+                nickname = nickname,
+                badgeText = userRole,
+                buttonText = "",
+                buttonWidth = 60.dp,
+                showButton = false
+            )
         }
     }
+}
+
+@Preview
+@Composable
+private fun FeesScreenPrev() {
+    ThipTheme {
+        FeedScreen(nickname = "ThipUser01", userRole = "문학 칭호")
+    }
 }
\ No newline at end of file

From f8b330d0cdf2b463bb73ca025aaba657dd7ea181 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 14 Jul 2025 15:42:56 +0900
Subject: [PATCH 06/24] =?UTF-8?q?[fix]:=20=ED=97=A4=EB=8D=94=5F=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20painter->String=20=EB=B3=80=EA=B2=BD=20(#4?=
 =?UTF-8?q?5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/compiler.xml                                            | 2 +-
 .idea/gradle.xml                                              | 2 +-
 .idea/misc.xml                                                | 2 +-
 app/build.gradle.kts                                          | 1 +
 .../java/com/texthip/thip/ui/feed/mock/MySubscriptionData.kt  | 2 +-
 .../main/java/com/texthip/thip/ui/navigator/MainNavHost.kt    | 4 +++-
 gradle/libs.versions.toml                                     | 2 ++
 7 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/.idea/compiler.xml b/.idea/compiler.xml
index b86273d9..b589d56e 100644
--- a/.idea/compiler.xml
+++ b/.idea/compiler.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="CompilerConfiguration">
-    <bytecodeTargetLevel target="21" />
+    <bytecodeTargetLevel target="17" />
   </component>
 </project>
\ No newline at end of file
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index 639c779c..dec7287d 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -6,7 +6,7 @@
       <GradleProjectSettings>
         <option name="testRunner" value="CHOOSE_PER_TEST" />
         <option name="externalProjectPath" value="$PROJECT_DIR$" />
-        <option name="gradleJvm" value="#GRADLE_LOCAL_JAVA_HOME" />
+        <option name="gradleJvm" value="17" />
         <option name="modules">
           <set>
             <option value="$PROJECT_DIR$" />
diff --git a/.idea/misc.xml b/.idea/misc.xml
index 5e471df0..e1be6aca 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_21" project-jdk-name="jbr-21" project-jdk-type="JavaSDK" />
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="temurin-17" project-jdk-type="JavaSDK" />
 </project>
\ No newline at end of file
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index a7b39ef7..0194e34f 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -57,6 +57,7 @@ dependencies {
     implementation(libs.androidx.navigation.runtime.android)
     implementation(libs.accompanist.pager)
     implementation(libs.accompanist.pager.indicators)
+    implementation(libs.coil.compose)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/mock/MySubscriptionData.kt b/app/src/main/java/com/texthip/thip/ui/feed/mock/MySubscriptionData.kt
index ea20ccbd..d50207fd 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/mock/MySubscriptionData.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/mock/MySubscriptionData.kt
@@ -4,7 +4,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 
 data class MySubscriptionData(
-    val profileImageUrl: Painter? = null,
+    val profileImageUrl: String? = null,
     val nickname: String,
     val role: String,
     val roleColor: Color,
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/MainNavHost.kt b/app/src/main/java/com/texthip/thip/ui/navigator/MainNavHost.kt
index c3b8701d..15d54e37 100644
--- a/app/src/main/java/com/texthip/thip/ui/navigator/MainNavHost.kt
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/MainNavHost.kt
@@ -12,7 +12,9 @@ import com.texthip.thip.ui.mypage.screen.MyPageScreen
 @Composable
 fun MainNavHost(navController: NavHostController) {
     NavHost(navController = navController, startDestination = Routes.Feed.route) {
-        composable(Routes.Feed.route) { FeedScreen(navController) }
+        composable(Routes.Feed.route) {
+            FeedScreen(navController = navController, nickname = "ThipUser01", userRole = "문학가")
+        }
         composable(Routes.Group.route) { GroupScreen(navController) }
         composable(Routes.BookSearch.route) { BookSearchScreen(navController) }
         composable(Routes.MyPage.route) {
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index f596e68f..67690343 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -14,6 +14,7 @@ lifecycleViewmodelCompose = "2.9.1"
 navigationRuntimeAndroid = "2.9.0"
 accompanistPager = "0.36.0"
 accompanistPagerIndicators = "0.36.0"
+coilCompose = "2.7.0"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -36,6 +37,7 @@ androidx-lifecycle-viewmodel-compose = { group = "androidx.lifecycle", name = "l
 androidx-navigation-runtime-android = { group = "androidx.navigation", name = "navigation-runtime-android", version.ref = "navigationRuntimeAndroid" }
 accompanist-pager = { group = "com.google.accompanist", name = "accompanist-pager", version.ref = "accompanistPager" }
 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" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }

From 365b1e23fff645fb869c6a0b81fd1b7172ec4231 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 14 Jul 2025 20:15:53 +0900
Subject: [PATCH 07/24] =?UTF-8?q?[ui]:=20=ED=94=BC=EB=93=9C=5F=EB=82=B4?=
 =?UTF-8?q?=ED=94=BC=EB=93=9C=20=EA=B5=AC=ED=98=84=EC=A4=91(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/common/topappbar/LogoTopAppBar.kt |   1 +
 .../texthip/thip/ui/feed/screen/FeedScreen.kt | 170 ++++++++++++++----
 app/src/main/res/values/strings.xml           |  26 +--
 3 files changed, 143 insertions(+), 54 deletions(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/common/topappbar/LogoTopAppBar.kt b/app/src/main/java/com/texthip/thip/ui/common/topappbar/LogoTopAppBar.kt
index 1885b647..df7ac93a 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/topappbar/LogoTopAppBar.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/topappbar/LogoTopAppBar.kt
@@ -23,6 +23,7 @@ import com.texthip.thip.ui.theme.ThipTheme.colors
 
 @Composable
 fun LogoTopAppBar(
+    modifier: Modifier = Modifier,
     leftIcon: Painter,
     hasNotification: Boolean,
     onLeftClick: () -> Unit = {},
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 11080517..02c19b3f 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
@@ -1,17 +1,23 @@
 package com.texthip.thip.ui.feed.screen
 
-import android.widget.Space
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 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.foundation.lazy.itemsIndexed
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
@@ -19,52 +25,152 @@ import com.texthip.thip.R
 import com.texthip.thip.ui.common.header.AuthorHeader
 import com.texthip.thip.ui.common.header.HeaderMenuBarTab
 import com.texthip.thip.ui.common.topappbar.LogoTopAppBar
+import com.texthip.thip.ui.mypage.component.SavedFeedCard
+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
 
 @Composable
-fun FeedScreen(navController: NavController? = null,
-               nickname: String,
-               userRole: String) {
-    var selectedIndex = rememberSaveable { mutableIntStateOf(0) }
+fun FeedScreen(
+    navController: NavController? = null,
+    nickname: String,
+    userRole: String,
+    feeds: List<FeedItem> = emptyList(),
+    totalFeedCount: Int = 0,
+    selectedTabIndex: Int = 0
+) {
+    val selectedIndex = rememberSaveable { mutableIntStateOf(selectedTabIndex) }
 
-    Column(
-        Modifier
-            .fillMaxSize()
-    ) {
+    Box(modifier = Modifier.fillMaxSize()) {
         LogoTopAppBar(
             leftIcon = painterResource(R.drawable.ic_plusfriend),
             hasNotification = false,
             onLeftClick = {},
-            onRightClick = {}
+            onRightClick = {},
+            modifier = Modifier.align(Alignment.TopStart)
         )
-        Spacer(modifier = Modifier.height(40.dp))
-        HeaderMenuBarTab(
-            titles = listOf("피드", "내 피드"),
-            selectedTabIndex = selectedIndex.value,
-            onTabSelected = { selectedIndex.value = it }
-        )
-        Column(
+
+        // 스크롤 영역 전체
+        LazyColumn(
             modifier = Modifier
                 .fillMaxSize()
+                .padding(top = 40.dp),
+            verticalArrangement = Arrangement.spacedBy(12.dp)
         ) {
-            Spacer(modifier = Modifier.height(32.dp))
-            AuthorHeader(
-                profileImage = null,
-                nickname = nickname,
-                badgeText = userRole,
-                buttonText = "",
-                buttonWidth = 60.dp,
-                showButton = false
-            )
+            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
+                    )
+                    //TODO '띱 하는중' 컴포넌트 만들고 추가
+
+                    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)
+                    )
+                }
+
+                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(feeds, key = { _, item -> item.id }) { index, feed ->
+                        val bookImage = feed.imageUrl?.let { painterResource(it) }
+                        val profileImage = feed.userProfileImage?.let { painterResource(it) }
+
+                        SavedFeedCard(
+                            feedItem = feed,
+                            bookImage = bookImage,
+                            profileImage = profileImage,
+                            onBookmarkClick = {},
+                            onLikeClick = {}
+                        )
+
+                        if (index != feeds.lastIndex) {
+                            HorizontalDivider(
+                                color = colors.DarkGrey02,
+                                thickness = 10.dp
+                            )
+                        }
+                    }
+                }
+            } else {
+                //피드
+                item {
+                    Spacer(modifier = Modifier.height(20.dp))
+                }
+            }
         }
     }
 }
 
-@Preview
+@Preview(showBackground = true)
 @Composable
-private fun FeesScreenPrev() {
+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,
+            //imageUrl = R.drawable.bookcover_sample
+        )
+    }
+
     ThipTheme {
-        FeedScreen(nickname = "ThipUser01", userRole = "문학 칭호")
+        FeedScreen(
+            nickname = "ThipUser01",
+            userRole = "문학 칭호",
+            selectedTabIndex = 1,
+            feeds = mockFeeds,
+            totalFeedCount = mockFeeds.size
+        )
     }
-}
\ 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 58d39fd6..ee9ca43e 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -166,26 +166,6 @@
     <string name="my_record">내 기록</string>
     <string name="view_by_page">페이지별 보기</string>
     <string name="view_by_all">총평 보기</string>
-    <string name="group_note_info">내 진행도에 따라 일부 댓글은 블러처리됩니다.</string>
-    <string name="write_reply">답글작성</string>
-    <string name="annotation">\@</string>
-    <string name="space_bar">\ </string>
-    <string name="reply_to">00님에게 댓글을 남겨보세요.</string>
-    <string name="group_done_title">완료된 모임방</string>
-    <string name="group_done_user_comment">%1$s님이 참여했던 모임방들을 확인해보세요.</string>
-    <string name="group_room_search_hint">" 방 제목 혹은 책 제목을 검색해보세요."</string>
-    <string name="group_recent_search">최근 검색어</string>
-    <string name="group_no_recent_search">최근 검색어가 아직 없어요.</string>
-    <string name="group_room_search_topappbar">모임 검색</string>
-    <string name="group_searched_room_size">전체 %1$d</string>
-    <string name="group_no_search_result1">해당하는 모임방이 없어요</string>
-    <string name="group_no_search_result2">직접 모임방을 만들어보세요.</string>
-    <string name="group_secret_screen_comment">비밀번호를 입력해주세요.</string>
-    <string name="group_secret_screen_error_comment">비밀번호가 일치하지 않습니다.</string>
-    <string name="group_participant_complete_alarm">모임방 참여가 완료되었어요!</string>
-    <string name="group_participant_cancel_popup">참여를 취소하시겠어요?</string>
-    <string name="group_participant_cancel_comment">참여 취소 후 다시 참여할 수 있어요.</string>
-    <string name="group_participant_cancel_alarm">모임방 참여가 취소되었어요! 다른 방을 찾아보세요.</string>
 
     <!--    alarm    -->
     <string name="alarm_feed">피드</string>
@@ -251,9 +231,11 @@
     <!--    feed   -->
     <string name="my_subscription_list">내 구독 리스트</string>
     <string name="whole_num">전체 %d</string>
-    <string name="toast_subscribe">%1$s 님을 구독했어요</string>
-    <string name="toast_unsubscribe">%1$s 님을 구독취소했어요</string>
+    <string name="toast_subscribe">%1$s 님을 구독 했어요</string>
+    <string name="toast_unsubscribe">%1$s 님을 구독 취소했어요</string>
     <string name="subscribe_cancel">구독취소</string>
+    <string name="create_feed">피드에 글을 작성해 보세요</string>
+
     <string name="group_participant_close_popup">모집을 마감하시겠습니까?</string>
     <string name="group_participant_close_comment">독서메이트 모집을 마감하면\n지금 바로 모임방 활동을 바로 시작할 수 있어요.</string>
     <string name="group_participant_close_alarm">독서메이트 모집을 성공적으로 마감했어요.</string>

From 4c6a07f3ff2adcaa800c3675ddca3c8653069ba4 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 14 Jul 2025 21:16:24 +0900
Subject: [PATCH 08/24] =?UTF-8?q?[ui]:=20=EB=82=B4=20=EB=9D=B1=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=B0=98=EC=98=81(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../com/texthip/thip/ui/common/header/AuthorHeader.kt |  5 +++--
 .../thip/ui/feed/component/MySubscriptionList.kt      |  5 +++--
 .../thip/ui/feed/screen/MySubscriptionListScreen.kt   |  6 +++---
 .../com/texthip/thip/ui/signin/screen/SplashScreen.kt |  2 +-
 app/src/main/res/values/strings.xml                   | 11 ++++++-----
 5 files changed, 16 insertions(+), 13 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 ca1e59da..4205cfbb 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
@@ -35,6 +35,7 @@ fun AuthorHeader(
     buttonText: String = "",
     buttonWidth: Dp = 60.dp,
     showButton: Boolean = true,
+    profileImageSize: Dp = 54.dp,
     onButtonClick: () -> Unit = {}
 ) {
     Row(
@@ -48,13 +49,13 @@ fun AuthorHeader(
                 painter = rememberAsyncImagePainter(profileImage),
                 contentDescription = "작성자 장르이미지",
                 modifier = Modifier
-                    .size(54.dp)
+                    .size(profileImageSize)
                     .clip(CircleShape)
             )
         } else {
             Box(
                 modifier = Modifier
-                    .size(54.dp)
+                    .size(profileImageSize)
                     .clip(CircleShape)
                     .background(colors.Grey)
             )
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 7d2b0251..88219fe7 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
@@ -31,8 +31,9 @@ fun MySubscriptionList(
                 profileImage = member.profileImageUrl,
                 nickname = member.nickname,
                 badgeText = member.role,
-                buttonText = stringResource(if(member.isSubscribed) R.string.subscribe_cancel else R.string.subscribe),
-                buttonWidth = 73.dp,
+                buttonText = stringResource(if(member.isSubscribed) R.string.thip_cancel else R.string.thip),
+                buttonWidth = 64.dp,
+                profileImageSize = 36.dp,
                 onButtonClick = {
                     onUnsubscribe(member.nickname)
                 }
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 63e57cf2..0ba930af 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
@@ -160,7 +160,7 @@ fun MySubscriptionScreen(
         ) {
             DefaultTopAppBar(
                 onLeftClick = {},
-                title = stringResource(R.string.my_subscription_list)
+                title = stringResource(R.string.my_thip_list)
             )
             Column(
                 modifier = Modifier
@@ -195,9 +195,9 @@ fun MySubscriptionScreen(
                                 }
                                 toastMessage =
                                     if (members.find { it.nickname == nickname }?.isSubscribed == true) {
-                                        context.getString(R.string.toast_subscribe, nickname)
+                                        context.getString(R.string.toast_thip, nickname)
                                     } else {
-                                        context.getString(R.string.toast_unsubscribe, nickname)
+                                        context.getString(R.string.toast_thip_cancel, nickname)
                                     }
                             }
                         )
diff --git a/app/src/main/java/com/texthip/thip/ui/signin/screen/SplashScreen.kt b/app/src/main/java/com/texthip/thip/ui/signin/screen/SplashScreen.kt
index ee1d470b..cc62e0e8 100644
--- a/app/src/main/java/com/texthip/thip/ui/signin/screen/SplashScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/signin/screen/SplashScreen.kt
@@ -42,7 +42,7 @@ fun SplashScreen() {
         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))
             },
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index ee9ca43e..5f9821eb 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -211,7 +211,7 @@
     <string name="group_input_count">%1$d / %2$d</string>
 
     <!--    splash screen   -->
-    <string name="thip">띱!</string>
+    <string name="splash_thip">띱!</string>
     <string name="splash_ment">하고 떠오른 그 문장을 나눠요</string>
 
     <!--    signin   -->
@@ -229,11 +229,12 @@
     <string name="genre_can_be_changed">이후 내 정보에서 변경이 가능해요.</string>
 
     <!--    feed   -->
-    <string name="my_subscription_list">내 구독 리스트</string>
+    <string name="my_thip_list">내 띱 리스트</string>
     <string name="whole_num">전체 %d</string>
-    <string name="toast_subscribe">%1$s 님을 구독 했어요</string>
-    <string name="toast_unsubscribe">%1$s 님을 구독 취소했어요</string>
-    <string name="subscribe_cancel">구독취소</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="create_feed">피드에 글을 작성해 보세요</string>
 
     <string name="group_participant_close_popup">모집을 마감하시겠습니까?</string>

From b88d1b2b13f3cdfcad321e6d31c4bd65999ab54b Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 21 Jul 2025 14:09:15 +0900
Subject: [PATCH 09/24] =?UTF-8?q?[ui]:=20=EB=9D=B1=20=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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
new file mode 100644
index 00000000..6cc07557
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/FeedSubscribelistBar.kt
@@ -0,0 +1,132 @@
+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.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Icon
+import androidx.compose.material.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.res.painterResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import coil.compose.rememberAsyncImagePainter
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun FeedSubscribeBarlist(
+    modifier: Modifier = Modifier,
+    followerProfileImageUrls: List<String>,
+    onClick: () -> Unit
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(24.dp)
+            .clickable { onClick() },
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Icon(
+            painter = painterResource(id = R.drawable.ic_group),
+            contentDescription = null,
+            tint = Color.Unspecified
+        )
+        Text(
+            text = buildAnnotatedString {
+                withStyle(
+                    style = SpanStyle(
+                        fontWeight = FontWeight.Bold,
+                        color = colors.White
+                    )
+                ) {
+                    append("${followerProfileImageUrls.size}명")
+                }
+                withStyle(
+                    style = SpanStyle(
+                        color = colors.Grey
+                    )
+                ) {
+                    append("이 띱 하는중")
+                }
+            },
+            style = typography.info_r400_s12,
+            modifier = Modifier.padding(start = 2.dp)
+        )
+        Spacer(modifier = Modifier.weight(1f))
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            followerProfileImageUrls.take(5).reversed().forEachIndexed { index, imageUrl ->
+                Image(
+                    painter = rememberAsyncImagePainter(model = imageUrl),
+                    contentDescription = null,
+                    modifier = Modifier
+                        .size(24.dp)
+                        .clip(CircleShape)
+                        .background(Color.LightGray)
+                )
+
+                val isLast = index == followerProfileImageUrls.take(5).lastIndex
+                Spacer(modifier = Modifier.width(if (isLast) 15.dp else 4.dp))
+            }
+
+            Icon(
+                painter = painterResource(id = R.drawable.ic_chevron),
+                contentDescription = null,
+                tint = colors.Grey
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun FeedSubscribelistBarPreview() {
+    ThipTheme {
+        Column {
+            // Case 1: 팔로워 0
+            FeedSubscribeBarlist(
+                followerProfileImageUrls = emptyList(),
+                onClick = {}
+            )
+
+            // Case 2: 팔로워 3
+            FeedSubscribeBarlist(
+                followerProfileImageUrls = listOf(
+                    "https://example.com/image1.jpg",
+                    "https://example.com/image2.jpg",
+                    "https://example.com/image3.jpg"
+                ),
+                onClick = {}
+            )
+
+            // Case 3: 팔로워 6
+            FeedSubscribeBarlist(
+                followerProfileImageUrls = List(6) {
+                    "https://example.com/profile$it.jpg"
+                },
+                onClick = {}
+            )
+        }
+    }
+
+}
\ No newline at end of file

From 9c53c601165a1c2807ed99ce4e42843b623434cf Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 21 Jul 2025 14:10:15 +0900
Subject: [PATCH 10/24] =?UTF-8?q?[ui]:=20=EB=82=98=EC=9D=98=20=ED=94=BC?=
 =?UTF-8?q?=EB=93=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=99=84=EC=84=B1(#4?=
 =?UTF-8?q?5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/feed/component/MyFeedCard.kt      | 160 ++++++++++++++++++
 .../texthip/thip/ui/feed/screen/FeedScreen.kt |  59 +++++--
 .../texthip/thip/ui/mypage/mock/FeedItem.kt   |   2 +
 app/src/main/res/values/strings.xml           |  20 +++
 4 files changed, 227 insertions(+), 14 deletions(-)
 create mode 100644 app/src/main/java/com/texthip/thip/ui/feed/component/MyFeedCard.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
new file mode 100644
index 00000000..e7646f43
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/MyFeedCard.kt
@@ -0,0 +1,160 @@
+package com.texthip.thip.ui.feed.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+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.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.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 com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.ActionBookButton
+import com.texthip.thip.ui.mypage.mock.FeedItem
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun MyFeedCard(
+    modifier: Modifier = Modifier,
+    feedItem: FeedItem,
+    bookImage: Painter? = null,
+    onLikeClick: () -> Unit = {}
+) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 20.dp)
+    ) {
+        Column(
+            modifier = modifier
+                .fillMaxWidth()
+                .padding(top = 16.dp, bottom = 16.dp)
+        ) {
+            ActionBookButton(
+                bookTitle = feedItem.bookTitle,
+                bookAuthor = feedItem.authName,
+
+                onClick = {}
+            )
+        }
+        if (bookImage  != null) {
+            Image(
+                painter = bookImage ,
+                contentDescription = null,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(480.dp),
+                contentScale = ContentScale.Crop
+            )
+        }
+
+        Text(
+            text = feedItem.content,
+            style = typography.feedcopy_r400_s14_h20,
+            color = colors.White,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(bottom = 16.dp)
+        )
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Icon(
+                modifier = Modifier.clickable { 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))
+            if (feedItem.isLocked) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_lock),
+                    contentDescription = null,
+                    tint = Color.Unspecified
+                )
+            }
+        }
+
+    }
+}
+
+@Preview
+@Composable
+private fun MyFeedCardPrev() {
+    val feed1 = FeedItem(
+        id = 1,
+        userProfileImage = R.drawable.character_literature,
+        userName = "user.01",
+        userRole = stringResource(R.string.influencer),
+        bookTitle = "책 제목",
+        authName = "한강",
+        timeAgo = "3시간 전",
+        content = "무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷",
+        likeCount = 10,
+        commentCount = 5,
+        isLiked = false,
+        isSaved = true,
+        isLocked = true,
+        imageUrl = null
+    )
+
+    val feed2 = FeedItem(
+        id = 2,
+        userProfileImage = R.drawable.character_art,
+        userName = "user.01",
+        userRole = stringResource(R.string.influencer),
+        bookTitle = "책 제목",
+        authName = "한강",
+        timeAgo = "3시간 전",
+        content = "한줄만 입력 가능",
+        likeCount = 10,
+        commentCount = 5,
+        isLiked = false,
+        isSaved = true,
+        isLocked = false,
+        imageUrl = R.drawable.bookcover_sample
+    )
+
+    Column {
+        MyFeedCard(
+            feedItem = feed1,
+            bookImage = null
+        )
+        MyFeedCard(
+            feedItem = feed2,
+            bookImage = painterResource(feed2.imageUrl!!)
+        )
+    }
+
+
+}
\ No newline at end of file
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 02c19b3f..6642b1bc 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
@@ -13,6 +13,8 @@ import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -22,9 +24,12 @@ 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.buttons.FloatingButton
 import com.texthip.thip.ui.common.header.AuthorHeader
 import com.texthip.thip.ui.common.header.HeaderMenuBarTab
 import com.texthip.thip.ui.common.topappbar.LogoTopAppBar
+import com.texthip.thip.ui.feed.component.FeedSubscribeBarlist
+import com.texthip.thip.ui.feed.component.MyFeedCard
 import com.texthip.thip.ui.mypage.component.SavedFeedCard
 import com.texthip.thip.ui.mypage.mock.FeedItem
 import com.texthip.thip.ui.theme.ThipTheme
@@ -38,10 +43,15 @@ fun FeedScreen(
     userRole: String,
     feeds: List<FeedItem> = emptyList(),
     totalFeedCount: Int = 0,
-    selectedTabIndex: Int = 0
+    selectedTabIndex: Int = 0,
+    followerProfileImageUrls: List<String> = emptyList()
 ) {
     val selectedIndex = rememberSaveable { mutableIntStateOf(selectedTabIndex) }
-
+    val feedStateList = remember {
+        mutableStateListOf<FeedItem>().apply {
+            addAll(feeds)
+        }
+    }
     Box(modifier = Modifier.fillMaxSize()) {
         LogoTopAppBar(
             leftIcon = painterResource(R.drawable.ic_plusfriend),
@@ -79,8 +89,13 @@ fun FeedScreen(
                         buttonWidth = 60.dp,
                         showButton = false
                     )
-                    //TODO '띱 하는중' 컴포넌트 만들고 추가
-
+                    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),
@@ -113,18 +128,21 @@ fun FeedScreen(
                         }
                     }
                 } else {
-                    itemsIndexed(feeds, key = { _, item -> item.id }) { index, feed ->
+                    itemsIndexed(feedStateList, key = { _, item -> item.id }) { index, feed ->
                         val bookImage = feed.imageUrl?.let { painterResource(it) }
-                        val profileImage = feed.userProfileImage?.let { painterResource(it) }
-
-                        SavedFeedCard(
+                        Spacer(modifier = Modifier.height(if (index == 0) 20.dp else 40.dp))
+                        MyFeedCard(
                             feedItem = feed,
                             bookImage = bookImage,
-                            profileImage = profileImage,
-                            onBookmarkClick = {},
-                            onLikeClick = {}
+                            onLikeClick = {
+                                val updated = feed.copy(
+                                    isLiked = !feed.isLiked,
+                                    likeCount = if (feed.isLiked) feed.likeCount - 1 else feed.likeCount + 1
+                                )
+                                feedStateList[index] = updated
+                            },
                         )
-
+                        Spacer(modifier = Modifier.height(40.dp))
                         if (index != feeds.lastIndex) {
                             HorizontalDivider(
                                 color = colors.DarkGrey02,
@@ -140,6 +158,10 @@ fun FeedScreen(
                 }
             }
         }
+        FloatingButton(
+            icon = painterResource(id = R.drawable.ic_write),
+            onClick = {  }
+        )
     }
 }
 
@@ -160,9 +182,17 @@ private fun FeedScreenPreview() {
             commentCount = it,
             isLiked = false,
             isSaved = false,
-            //imageUrl = R.drawable.bookcover_sample
+            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(
@@ -170,7 +200,8 @@ private fun FeedScreenPreview() {
             userRole = "문학 칭호",
             selectedTabIndex = 1,
             feeds = mockFeeds,
-            totalFeedCount = mockFeeds.size
+            totalFeedCount = mockFeeds.size,
+            followerProfileImageUrls = mockFollowerImages
         )
     }
 }
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 814a1c3e..3dab91cc 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
@@ -13,6 +13,8 @@ data class FeedItem(
     val commentCount: Int,
     val isLiked: Boolean,
     val isSaved: Boolean,
+    val isLocked: Boolean = false,
+    val tags: List<String> = emptyList(),
     val imageUrl: Int? = null
 )
 
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 5f9821eb..50c4382a 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -166,6 +166,26 @@
     <string name="my_record">내 기록</string>
     <string name="view_by_page">페이지별 보기</string>
     <string name="view_by_all">총평 보기</string>
+    <string name="group_note_info">내 진행도에 따라 일부 댓글은 블러처리됩니다.</string>
+    <string name="write_reply">답글작성</string>
+    <string name="annotation">\@</string>
+    <string name="space_bar">\ </string>
+    <string name="reply_to">00님에게 댓글을 남겨보세요.</string>
+    <string name="group_done_title">완료된 모임방</string>
+    <string name="group_done_user_comment">%1$s님이 참여했던 모임방들을 확인해보세요.</string>
+    <string name="group_room_search_hint">" 방 제목 혹은 책 제목을 검색해보세요."</string>
+    <string name="group_recent_search">최근 검색어</string>
+    <string name="group_no_recent_search">최근 검색어가 아직 없어요.</string>
+    <string name="group_room_search_topappbar">모임 검색</string>
+    <string name="group_searched_room_size">전체 %1$d</string>
+    <string name="group_no_search_result1">해당하는 모임방이 없어요</string>
+    <string name="group_no_search_result2">직접 모임방을 만들어보세요.</string>
+    <string name="group_secret_screen_comment">비밀번호를 입력해주세요.</string>
+    <string name="group_secret_screen_error_comment">비밀번호가 일치하지 않습니다.</string>
+    <string name="group_participant_complete_alarm">모임방 참여가 완료되었어요!</string>
+    <string name="group_participant_cancel_popup">참여를 취소하시겠어요?</string>
+    <string name="group_participant_cancel_comment">참여 취소 후 다시 참여할 수 있어요.</string>
+    <string name="group_participant_cancel_alarm">모임방 참여가 취소되었어요! 다른 방을 찾아보세요.</string>
 
     <!--    alarm    -->
     <string name="alarm_feed">피드</string>

From e8f945b8625821a60d502b6088e0a26b69f18fdc Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 21 Jul 2025 20:55:13 +0900
Subject: [PATCH 11/24] =?UTF-8?q?[ui]:=20=EB=82=98=EC=9D=98=20=ED=94=BC?=
 =?UTF-8?q?=EB=93=9C=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80(#4?=
 =?UTF-8?q?5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/feed/screen/FeedCommentScreen.kt  | 338 ++++++++++++++++++
 1 file changed, 338 insertions(+)
 create mode 100644 app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt

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
new file mode 100644
index 00000000..635283d2
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
@@ -0,0 +1,338 @@
+package com.texthip.thip.ui.feed.screen
+
+import androidx.compose.foundation.Image
+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.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.lazy.LazyColumn
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+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
+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.common.buttons.OptionChipButton
+import com.texthip.thip.ui.common.forms.CommentTextField
+import com.texthip.thip.ui.common.header.ProfileBar
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.group.note.component.CommentItem
+import com.texthip.thip.ui.group.note.component.ReplyItem
+import com.texthip.thip.ui.mypage.mock.FeedItem
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+import com.texthip.thip.ui.group.note.mock.CommentItem as FeedCommentItem
+import com.texthip.thip.ui.group.note.mock.ReplyItem as FeedReplyItem
+
+@Composable
+fun FeedCommentScreen(
+    modifier: Modifier = Modifier,
+    feedItem: FeedItem,
+    bookImage: Painter? = null,
+    profileImage: Painter? = null,
+    currentUserId: Int,
+    currentUserName: String,
+    currentUserGenre: String,
+    currentUserProfileImageUrl: String,
+    onLikeClick: () -> Unit = {},
+    onCommentInputChange: (String) -> Unit = {},
+    onSendClick: () -> Unit = {}
+) {
+    val commentInput = remember { mutableStateOf("") }
+    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()
+    ) {
+        DefaultTopAppBar(
+            isRightIconVisible = true,
+            isTitleVisible = false,
+            onLeftClick = {},
+            onRightClick = {},
+        )
+        LazyColumn(
+            modifier = modifier.fillMaxWidth().padding(top = 56.dp),
+            contentPadding = PaddingValues(bottom = 20.dp)
+        ) {
+            item {
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(20.dp)
+                ) {
+                    ProfileBar(
+                        profileImage = profileImage,
+                        topText = feedItem.userName,
+                        bottomText = feedItem.userRole,
+                        showSubscriberInfo = false,
+                        hoursAgo = feedItem.timeAgo
+                    )
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(top = 16.dp, bottom = 16.dp)
+                    ) {
+                        ActionBookButton(
+                            bookTitle = feedItem.bookTitle,
+                            bookAuthor = feedItem.authName,
+                            onClick = {}
+                        )
+                    }
+                    Text(
+                        text = feedItem.content,
+                        style = typography.feedcopy_r400_s14_h20,
+                        color = colors.White,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(bottom = 16.dp)
+                    )
+                    if (bookImage != null) {
+                        Image(
+                            painter = bookImage,
+                            contentDescription = null,
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .height(480.dp),
+                            contentScale = ContentScale.Crop
+                        )
+                    }
+                    if (feedItem.tags.isNotEmpty()) {
+                        Row(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(vertical = 16.dp),
+                            horizontalArrangement = Arrangement.spacedBy(8.dp)
+                        ) {
+                            feedItem.tags.forEach { tag ->
+                                OptionChipButton(
+                                    text = tag,
+                                    isFilled = false,
+                                    isSelected = false,
+                                    onClick = {}
+                                )
+                            }
+                        }
+                    }
+                    HorizontalDivider(
+                        color = colors.DarkGrey02,
+                        thickness = 1.dp,
+                    )
+                    Row(
+                        modifier = Modifier.padding(top = 16.dp, bottom = 30.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))
+                        if (feedItem.isLocked) {
+                            Icon(
+                                painter = painterResource(R.drawable.ic_lock),
+                                contentDescription = null,
+                                tint = Color.Unspecified
+                            )
+                        }
+                    }
+                }
+                HorizontalDivider(
+                    color = colors.DarkGrey02,
+                    thickness = 10.dp
+                )
+                Spacer(modifier = Modifier.height(40.dp))
+            }
+            commentList.forEach { commentItem ->
+                item {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 20.dp, vertical = 24.dp)
+                    ) {
+                        CommentItem(
+                            data = commentItem,
+                            onReplyClick = { replyTo.value = it }
+                        )
+                        Spacer(modifier = Modifier.height(12.dp))
+                        commentItem.replyList.forEach { reply ->
+                            ReplyItem(
+                                data = reply,
+                                onReplyClick = { replyTo.value = it }
+                            )
+                        }
+                    }
+                }
+            }
+        }
+        CommentTextField(
+            modifier = Modifier
+                .align(Alignment.BottomCenter),
+            input = commentInput.value,
+            hint =stringResource(R.string.feed_reply_to, feedItem.userName),
+            onInputChange = {
+                commentInput.value = it
+                onCommentInputChange(it)
+            },
+            onSendClick = {
+                if (commentInput.value.isNotBlank()) {
+                    val replyTargetNickname = replyTo.value
+                    if (replyTargetNickname == null) {
+
+                        commentList.add(
+                            FeedCommentItem(
+                                commentId = commentList.size + 1,
+                                userId = currentUserId,
+                                nickName = currentUserName,
+                                genreName = currentUserGenre,
+                                profileImageUrl = currentUserProfileImageUrl,
+                                content = commentInput.value,
+                                postDate = justNow,
+                                isWriter = true,
+                                isLiked = false,
+                                likeCount = 0,
+                                replyList = emptyList()
+                            )
+                        )
+                    }else {
+                        // 대댓글
+                        val parentIndex = commentList.indexOfFirst { it.nickName == replyTargetNickname }
+                        if (parentIndex != -1) {
+                            val parentComment = commentList[parentIndex]
+                            val newReply = FeedReplyItem(
+                                replyId = parentComment.replyList.size + 1,
+                                userId = currentUserId,
+                                nickName = currentUserName,
+                                parentNickname = replyTargetNickname,
+                                genreName = currentUserGenre,
+                                profileImageUrl = currentUserProfileImageUrl,
+                                content = commentInput.value,
+                                postDate = justNow,
+                                isWriter = true,
+                                isLiked = false,
+                                likeCount = 0
+                            )
+                            val updatedReplies = parentComment.replyList + newReply
+                            commentList[parentIndex] = parentComment.copy(replyList = updatedReplies)
+                        }
+                    }
+                    commentInput.value = ""
+                    replyTo.value = null
+                    onSendClick()
+                }
+            },
+            replyTo = replyTo.value,
+            onCancelReply = { replyTo.value = null }
+        )
+
+    }
+
+}
+
+@Preview
+@Composable
+private fun FeedCommentScreenPrev() {
+    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,
+            imageUrl = R.drawable.bookcover_sample,
+            tags = listOf("에세이", "문학", "힐링")
+        ),
+        bookImage = painterResource(R.drawable.bookcover_sample),
+        profileImage = painterResource(R.drawable.character_literature),
+        onLikeClick = {},
+        onCommentInputChange = {},
+        onSendClick = {},
+        currentUserId = 999,
+        currentUserName = "나",
+        currentUserGenre = "장르",
+        currentUserProfileImageUrl = ""
+    )
+}
\ No newline at end of file

From bd412ab004ef30a0dcf3e3fe038c98000cfb86ba Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 21 Jul 2025 20:55:44 +0900
Subject: [PATCH 12/24] =?UTF-8?q?[ui]:=20=EB=82=B4=20=EA=B5=AC=EB=8F=85=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=88?=
 =?UTF-8?q?=ED=8A=B8(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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
new file mode 100644
index 00000000..50db7a32
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt
@@ -0,0 +1,146 @@
+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.BoxWithConstraints
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Icon
+import androidx.compose.material.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.platform.LocalDensity
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import coil.compose.rememberAsyncImagePainter
+import com.texthip.thip.R
+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 getDisplayNameFor(index: Int): String {
+    val nicknames = listOf("aaaaaaaa", "bbbbbbb", "aaaaaaaaaaaa", "bbbbbbb", "aaaaa", "bbb","aaaaa")
+    return nicknames.getOrNull(index) ?: ""
+}
+
+@Composable
+fun MySubscribeBarlist(
+    modifier: Modifier = Modifier,
+    subscriptions: List<MySubscriptionData>,
+    onClick: () -> Unit
+) {
+// 이미지 + 간격 너비
+    val imageWidthWithSpacing = 36.dp + 12.dp
+    val density = LocalDensity.current
+
+    BoxWithConstraints(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(82.dp)
+            .clickable { onClick() }
+    ) {
+        val maxWidthPx = with(density) { maxWidth.toPx() }
+        val imageWithSpacingPx = with(density) { imageWidthWithSpacing.toPx() }
+
+        val maxVisibleCount = ((maxWidthPx - 36f) / imageWithSpacingPx).toInt()
+
+        Column {
+            Row(
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_group),
+                    contentDescription = null,
+                    tint = Color.Unspecified
+                )
+                Text(
+                    text = stringResource(R.string.my_subscription),
+                    style = typography.smalltitle_sb600_s14_h20,
+                    color = Color.White,
+                    modifier = Modifier.padding(start = 2.dp)
+                )
+            }
+
+            Spacer(modifier = Modifier.height(4.dp))
+
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(58.dp)
+                    .clickable { onClick() },
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                subscriptions.take(maxVisibleCount).forEach { profile ->
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        modifier = Modifier.width(36.dp)
+                    ) {
+                        Image(
+                            painter = rememberAsyncImagePainter(model = profile.profileImageUrl),
+                            contentDescription = null,
+                            modifier = Modifier
+                                .size(36.dp)
+                                .clip(CircleShape)
+                                .background(Color.LightGray)
+                        )
+                        Text(
+                            text = profile.nickname,
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis,
+                            style = typography.view_r400_s11_h20,
+                            color = Color.White,
+                            modifier = Modifier.width(36.dp)
+                        )
+                    }
+                    Spacer(modifier = Modifier.width(12.dp))
+                }
+                Spacer(modifier = Modifier.weight(1f))
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_chevron),
+                    contentDescription = null,
+                    tint = colors.Grey
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun MySubscribeBarlistPrev() {
+    ThipTheme {
+        val previewData = List(10) {
+            MySubscriptionData(
+                profileImageUrl = "https://example.com/profile$it.jpg",
+                nickname = "닉네임$it",
+                role = "문학가",
+                roleColor = Color.Red,
+                subscriberCount = 100 + it
+            )
+        }
+
+        Column {
+            MySubscribeBarlist(
+                subscriptions = previewData,
+                onClick = {}
+            )
+        }
+    }
+
+}
\ No newline at end of file

From ddfe631c37c7954dbe0449083968c31a4ae25394 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 21 Jul 2025 20:56:12 +0900
Subject: [PATCH 13/24] =?UTF-8?q?[ui]:=20=ED=99=88/=ED=94=BC=EB=93=9C=20->?=
 =?UTF-8?q?=20=ED=94=BC=EB=93=9C=20item=20=EC=B6=94=EA=B0=80(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/feed/mock/MySubscriptionData.kt   |  2 +-
 .../texthip/thip/ui/feed/screen/FeedScreen.kt | 88 ++++++++++++++++++-
 2 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/feed/mock/MySubscriptionData.kt b/app/src/main/java/com/texthip/thip/ui/feed/mock/MySubscriptionData.kt
index d50207fd..0b222adb 100644
--- a/app/src/main/java/com/texthip/thip/ui/feed/mock/MySubscriptionData.kt
+++ b/app/src/main/java/com/texthip/thip/ui/feed/mock/MySubscriptionData.kt
@@ -8,6 +8,6 @@ data class MySubscriptionData(
     val nickname: String,
     val role: String,
     val roleColor: Color,
-    val subscriberCount: Int,
+    val subscriberCount: Int = 0,
     var isSubscribed: Boolean = true
 )
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 6642b1bc..131da9d6 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
@@ -18,6 +18,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -30,6 +31,8 @@ import com.texthip.thip.ui.common.header.HeaderMenuBarTab
 import com.texthip.thip.ui.common.topappbar.LogoTopAppBar
 import com.texthip.thip.ui.feed.component.FeedSubscribeBarlist
 import com.texthip.thip.ui.feed.component.MyFeedCard
+import com.texthip.thip.ui.feed.component.MySubscribeBarlist
+import com.texthip.thip.ui.feed.mock.MySubscriptionData
 import com.texthip.thip.ui.mypage.component.SavedFeedCard
 import com.texthip.thip.ui.mypage.mock.FeedItem
 import com.texthip.thip.ui.theme.ThipTheme
@@ -52,6 +55,56 @@ fun FeedScreen(
             addAll(feeds)
         }
     }
+    val mySubscriptions = listOf(
+        MySubscriptionData(
+            profileImageUrl = "https://example.com/image1.jpg",
+            nickname = "abcabcabcabc",
+            role = "문학가",
+            roleColor = colors.Orange
+        ),
+        MySubscriptionData(
+            profileImageUrl = "https://example.com/image.jpg",
+            nickname = "aaaaaaa",
+            role = "작가",
+            roleColor = colors.Orange
+        ),
+        MySubscriptionData(
+            profileImageUrl = "https://example.com/image1.jpg",
+            nickname = "abcabcabcabc",
+            role = "문학가",
+            roleColor = colors.Orange
+        ),
+        MySubscriptionData(
+            profileImageUrl = "https://example.com/image.jpg",
+            nickname = "aaaaaaa",
+            role = "작가",
+            roleColor = colors.Orange
+        ),
+        MySubscriptionData(
+            profileImageUrl = "https://example.com/image1.jpg",
+            nickname = "abcabcabcabc",
+            role = "문학가",
+            roleColor = colors.Orange
+        ),
+        MySubscriptionData(
+            profileImageUrl = "https://example.com/image.jpg",
+            nickname = "aaaaaaa",
+            role = "작가",
+            roleColor = colors.Orange
+        ),
+        MySubscriptionData(
+            profileImageUrl = "https://example.com/image1.jpg",
+            nickname = "abcabcabcabc",
+            role = "문학가",
+            roleColor = colors.Orange
+        ),
+        MySubscriptionData(
+            profileImageUrl = "https://example.com/image.jpg",
+            nickname = "aaaaaaa",
+            role = "작가",
+            roleColor = colors.Orange
+        )
+    )
     Box(modifier = Modifier.fillMaxSize()) {
         LogoTopAppBar(
             leftIcon = painterResource(R.drawable.ic_plusfriend),
@@ -155,6 +208,39 @@ fun FeedScreen(
                 //피드
                 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) }
+                    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
+                        },
+                        onLikeClick = {
+                            val updated = feed.copy(
+                                isLiked = !feed.isLiked,
+                                likeCount = if (feed.isLiked) feed.likeCount - 1 else feed.likeCount + 1
+                            )
+                            feedStateList[index] = updated
+                        }
+                    )
+                    if (index != feeds.lastIndex) {
+                        HorizontalDivider(
+                            color = colors.DarkGrey02,
+                            thickness = 10.dp
+                        )
+                    }
                 }
             }
         }
@@ -198,7 +284,7 @@ private fun FeedScreenPreview() {
         FeedScreen(
             nickname = "ThipUser01",
             userRole = "문학 칭호",
-            selectedTabIndex = 1,
+            selectedTabIndex = 0,
             feeds = mockFeeds,
             totalFeedCount = mockFeeds.size,
             followerProfileImageUrls = mockFollowerImages

From c100d85600a13e5cd6e72f13bd841ac760a7cf4e Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Mon, 21 Jul 2025 20:56:25 +0900
Subject: [PATCH 14/24] =?UTF-8?q?[ui]:=20=EC=83=88=20=EA=B8=80=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/feed/screen/FeedWriteScreen.kt    | 188 ++++++++++++++++++
 app/src/main/res/values/strings.xml           |  10 +
 2 files changed, 198 insertions(+)
 create mode 100644 app/src/main/java/com/texthip/thip/ui/feed/screen/FeedWriteScreen.kt

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
new file mode 100644
index 00000000..91eaa83d
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedWriteScreen.kt
@@ -0,0 +1,188 @@
+package com.texthip.thip.ui.feed.screen
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.blur
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.KeyboardType
+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.GenreChipRow
+import com.texthip.thip.ui.common.buttons.ToggleSwitchButton
+import com.texthip.thip.ui.common.forms.WarningTextField
+import com.texthip.thip.ui.common.topappbar.InputTopAppBar
+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.GroupRoomDurationPicker
+import com.texthip.thip.ui.group.makeroom.component.GroupSelectBook
+import com.texthip.thip.ui.group.makeroom.component.MemberLimitPicker
+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.GroupMakeRoomRequest
+import com.texthip.thip.ui.group.makeroom.mock.dummyGroupBooks
+import com.texthip.thip.ui.group.makeroom.mock.dummySavedBooks
+import com.texthip.thip.ui.group.makeroom.viewmodel.ApiResult
+import com.texthip.thip.ui.group.makeroom.viewmodel.GroupCreateResponse
+import com.texthip.thip.ui.group.makeroom.viewmodel.GroupMakeRoomViewModel
+import com.texthip.thip.ui.group.makeroom.viewmodel.GroupRepository
+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 FeedWriteScreen(
+    onNavigateBack: () -> Unit,
+    onGroupCreated: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    val scrollState = rememberScrollState()
+
+    var selectedGenreIndex by remember { mutableIntStateOf(-1) }
+    val genres = listOf("문학", "과학·IT", "사회과학", "인문학", "예술")
+
+    var roomTitle by remember { mutableStateOf("") }
+    var isPrivate by remember { mutableStateOf(false) }
+    val showBookSearchSheet = remember { mutableStateOf(false) }
+    val selectedBook = remember { mutableStateOf<BookData?>(null) }
+    Box {
+        Column(
+            modifier = modifier
+                .fillMaxSize(),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            InputTopAppBar(
+                title = stringResource(R.string.new_feed),
+                rightButtonName = stringResource(R.string.registration),
+                isRightButtonEnabled = false,
+                onLeftClick = onNavigateBack,
+                onRightClick = {}
+            )
+            Column(
+                modifier = Modifier
+                    .verticalScroll(scrollState)
+                    .fillMaxSize()
+                    .padding(horizontal = 20.dp),
+                verticalArrangement = Arrangement.Top,
+            ) {
+                Spacer(modifier = Modifier.padding(top = 20.dp))
+
+                GroupSelectBook(
+                    selectedBook = selectedBook.value,
+                    onChangeBookClick = { showBookSearchSheet.value = true },
+                    onSelectBookClick = { showBookSearchSheet.value = true }
+                )
+
+                SectionDivider()
+
+                GroupInputField(
+                    title = stringResource(R.string.write_feed),
+                    hint = stringResource(R.string.write_feed_hint),
+                    value = roomTitle,
+                    maxLength = 2000,
+                    onValueChange = { roomTitle = it }
+                )
+
+                SectionDivider()
+
+                Text(
+                    text = stringResource(R.string.add_photo),
+                    style = typography.smalltitle_sb600_s18_h24,
+                    color = colors.White
+                )
+                Spacer(modifier = Modifier.padding(top = 12.dp))
+
+                SectionDivider()
+
+                Text(
+                    text = stringResource(R.string.group_private_option),
+                    style = typography.smalltitle_sb600_s18_h24,
+                    color = colors.White
+                )
+                Spacer(modifier = Modifier.padding(top = 12.dp))
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.SpaceBetween
+                ) {
+                    Text(
+                        text = stringResource(R.string.feed_private_comment),
+                        style = typography.menu_r400_s14_h24,
+                        color = colors.White
+                    )
+                    ToggleSwitchButton(
+                        isChecked = isPrivate,
+                        onToggleChange = { isPrivate = it }
+                    )
+                }
+                SectionDivider()
+
+                Text(
+                    text = stringResource(R.string.tag),
+                    style = typography.smalltitle_sb600_s18_h24,
+                    color = colors.White,
+                )
+                Spacer(modifier = Modifier.padding(top = 12.dp))
+                GenreChipRow(
+                    modifier = Modifier.width(18.dp),
+                    genres = genres,
+                    selectedIndex = selectedGenreIndex,
+                    onSelect = { selectedGenreIndex = it }
+                )
+                Spacer(modifier = Modifier.height(12.dp))
+
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.End
+                ) {
+                }
+
+
+            }
+        }
+
+        if (showBookSearchSheet.value) {
+            GroupBookSearchBottomSheet(
+                onDismiss = { showBookSearchSheet.value = false },
+                onBookSelect = { book ->
+                    selectedBook.value = book
+                    showBookSearchSheet.value = false
+                },
+                onRequestBook = {
+                    showBookSearchSheet.value = false
+                },
+                savedBooks = dummySavedBooks,
+                groupBooks = dummyGroupBooks
+            )
+        }
+
+        // 로딩 인디케이터
+        /*if (uiState.isLoading) {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(colors.Black.copy(alpha = 0.5f)),
+                contentAlignment = Alignment.Center
+            ) {
+                CircularProgressIndicator(color = colors.NeonGreen)
+            }
+        }*/
+    }
+}
+
+
+@Preview
+@Composable
+private fun GroupMakeRoomScreenPreview() {
+    ThipTheme {
+        FeedWriteScreen(
+            onNavigateBack = { },
+            onGroupCreated = { }
+        )
+    }
+}
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 50c4382a..ed736fb5 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -266,5 +266,15 @@
     <string name="group_empty_card_description">모임방을 찾아 참여해보세요!</string>
     <string name="group_myroom_error_comment1">참여 중인 모임방이 없어요</string>
     <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="new_feed">새 글</string>
+    <string name="registration">등록</string>
+    <string name="write_feed">글 작성</string>
+    <string name="write_feed_hint">...한 생각이 들었어요.🤔</string>
+    <string name="feed_private_comment">비공개로 설정</string>
+    <string name="tag">태그</string>
+    <string name="add_photo">사진 추가</string>
 
 </resources>
\ No newline at end of file

From 894f0dba940333e049448eb10b93345086438436 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Tue, 22 Jul 2025 12:46:32 +0900
Subject: [PATCH 15/24] =?UTF-8?q?[ui]:=20=EC=83=88=20=EA=B8=80=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20-=20=EC=84=9C?=
 =?UTF-8?q?=EB=B8=8C=20=EC=9E=A5=EB=A5=B4=20=EC=B9=A9=20=EA=B5=AC=ED=98=84?=
 =?UTF-8?q?=20(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/common/buttons/SubGenreChipRow.kt |  76 +++++++++++++
 .../thip/ui/feed/screen/FeedWriteScreen.kt    | 106 ++++++++++++++----
 .../thip/ui/mypage/screen/MypageEditScreen.kt |   2 -
 3 files changed, 158 insertions(+), 26 deletions(-)
 create mode 100644 app/src/main/java/com/texthip/thip/ui/common/buttons/SubGenreChipRow.kt

diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/SubGenreChipRow.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/SubGenreChipRow.kt
new file mode 100644
index 00000000..577d609b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/SubGenreChipRow.kt
@@ -0,0 +1,76 @@
+package com.texthip.thip.ui.common.buttons
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.ui.theme.ThipTheme
+
+@Composable
+fun SubGenreChipGrid(
+    subGenres: List<String>,
+    selectedGenres: List<String>,
+    onGenreToggle: (String) -> Unit
+) {
+    /*LazyVerticalGrid(
+        columns = GridCells.Fixed(5),
+        modifier = Modifier.fillMaxWidth(),
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        userScrollEnabled = false
+    ) {
+        items(subGenres.size) { index ->
+            val genre = subGenres[index]
+            OptionChipButton(
+                text = genre,
+                isSelected = selectedGenres.contains(genre),
+                isFilled = false,
+                onClick = { onGenreToggle(genre) },
+                modifier = Modifier
+            )
+        }
+    }*/
+    FlowRow(
+        modifier = Modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        verticalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        subGenres.forEach { genre ->
+            OptionChipButton(
+                text = genre,
+                isSelected = selectedGenres.contains(genre),
+                isFilled = false,
+                onClick = { onGenreToggle(genre) }
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewSubGenreChipGrid() {
+    ThipTheme {
+        val previewSubGenres = listOf(
+            "태그1", "태그2", "태그3", "태그4", "태그5",
+            "태그6", "태그7", "태그8", "태그9", "태그10"
+        )
+        val selectedGenres = remember { mutableStateListOf<String>() }
+
+        SubGenreChipGrid(
+            subGenres = previewSubGenres,
+            selectedGenres = selectedGenres,
+            onGenreToggle = { genre ->
+                if (selectedGenres.contains(genre)) {
+                    selectedGenres.remove(genre)
+                } else {
+                    selectedGenres.add(genre)
+                }
+            }
+        )
+    }
+}
\ No newline at end of file
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 91eaa83d..6ece170f 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
@@ -1,51 +1,65 @@
 package com.texthip.thip.ui.feed.screen
-import androidx.compose.foundation.layout.*
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+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.width
+import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Text
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+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.draw.blur
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.input.KeyboardType
 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.GenreChipButton
 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.forms.WarningTextField
 import com.texthip.thip.ui.common.topappbar.InputTopAppBar
 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.GroupRoomDurationPicker
 import com.texthip.thip.ui.group.makeroom.component.GroupSelectBook
-import com.texthip.thip.ui.group.makeroom.component.MemberLimitPicker
 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.GroupMakeRoomRequest
 import com.texthip.thip.ui.group.makeroom.mock.dummyGroupBooks
 import com.texthip.thip.ui.group.makeroom.mock.dummySavedBooks
-import com.texthip.thip.ui.group.makeroom.viewmodel.ApiResult
-import com.texthip.thip.ui.group.makeroom.viewmodel.GroupCreateResponse
-import com.texthip.thip.ui.group.makeroom.viewmodel.GroupMakeRoomViewModel
-import com.texthip.thip.ui.group.makeroom.viewmodel.GroupRepository
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
-
+import androidx.compose.foundation.lazy.items
+import androidx.compose.runtime.saveable.rememberSaveable
 
 @Composable
 fun FeedWriteScreen(
     onNavigateBack: () -> Unit,
-    onGroupCreated: () -> Unit,
     modifier: Modifier = Modifier
 ) {
     val scrollState = rememberScrollState()
-
-    var selectedGenreIndex by remember { mutableIntStateOf(-1) }
+    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 일반", "수학", "물리", "화학"),
+        2 to listOf("정치", "경제", "법", "사회", "교육"),
+        3 to listOf("철학", "역사", "심리", "종교", "윤리"),
+        4 to listOf("음악", "미술", "공예", "무용", "연극")
+    )
     var roomTitle by remember { mutableStateOf("") }
     var isPrivate by remember { mutableStateOf(false) }
     val showBookSearchSheet = remember { mutableStateOf(false) }
@@ -132,14 +146,59 @@ fun FeedWriteScreen(
                     modifier = Modifier.width(18.dp),
                     genres = genres,
                     selectedIndex = selectedGenreIndex,
-                    onSelect = { selectedGenreIndex = it }
+                    onSelect = {
+                        selectedGenreIndex = it
+                        selectedSubGenres = emptyList()
+                    }
                 )
                 Spacer(modifier = Modifier.height(12.dp))
 
-                Row(
-                    modifier = Modifier.fillMaxWidth(),
-                    horizontalArrangement = Arrangement.End
-                ) {
+                if (selectedGenreIndex != -1) {
+                    val subGenres = subGenreMap[selectedGenreIndex].orEmpty()
+                    Spacer(modifier = Modifier.height(8.dp))
+
+                    SubGenreChipGrid(
+                        subGenres = subGenres,
+                        selectedGenres = selectedSubGenres,
+                        onGenreToggle = { genre ->
+                            selectedSubGenres = if (selectedSubGenres.contains(genre)) {
+                                selectedSubGenres - genre
+                            } else {
+                                if (selectedSubGenres.size < 5) selectedSubGenres + genre else selectedSubGenres
+                            }
+                        }
+                    )
+                    Row(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.End
+                    ) {
+                        Text(
+                            text = "${selectedSubGenres.size}/5",
+                            style = typography.info_r400_s12,
+                            color = colors.NeonGreen,
+                            )
+                    }
+                }
+                if (selectedSubGenres.isNotEmpty()) {
+                    Spacer(modifier = Modifier.height(12.dp))
+                    LazyRow(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.spacedBy(8.dp)
+                    ) {
+                        items(selectedSubGenres) { subGenre ->
+                            GenreChipButton(
+                                text = subGenre,
+                                onClick = {
+                                    // 칩을 클릭해도 제거되도록 할 수 있음
+                                    selectedSubGenres = selectedSubGenres - subGenre
+                                },
+                                onCloseClick = {
+                                    // X 버튼 클릭시 해당 서브장르 제거
+                                    selectedSubGenres = selectedSubGenres - subGenre
+                                }
+                            )
+                        }
+                    }
                 }
 
 
@@ -181,8 +240,7 @@ fun FeedWriteScreen(
 private fun GroupMakeRoomScreenPreview() {
     ThipTheme {
         FeedWriteScreen(
-            onNavigateBack = { },
-            onGroupCreated = { }
+            onNavigateBack = { }
         )
     }
 }
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageEditScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageEditScreen.kt
index 759ec7b2..df9c0228 100644
--- a/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageEditScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageEditScreen.kt
@@ -1,10 +1,8 @@
 package com.texthip.thip.ui.mypage.screen
 
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth

From 29d5fc473136b3ae833a0f3978c5e0f27869437b Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Tue, 22 Jul 2025 14:24:11 +0900
Subject: [PATCH 16/24] =?UTF-8?q?[ui]:=20=EC=83=88=20=EA=B8=80=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20-=20=EC=82=AC?=
 =?UTF-8?q?=EC=A7=84=20=EC=B6=94=EA=B0=80=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/feed/screen/FeedWriteScreen.kt    | 123 ++++++++++++++----
 app/src/main/res/values/strings.xml           |   4 +-
 2 files changed, 104 insertions(+), 23 deletions(-)

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 6ece170f..749cd66a 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
@@ -1,5 +1,12 @@
 package com.texthip.thip.ui.feed.screen
 
+import android.net.Uri
+import androidx.activity.compose.rememberLauncherForActivityResult
+import androidx.activity.result.contract.ActivityResultContracts
+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.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -9,22 +16,34 @@ 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.layout.width
 import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Icon
+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
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+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 coil.compose.rememberAsyncImagePainter
 import com.texthip.thip.R
 import com.texthip.thip.ui.common.buttons.GenreChipButton
 import com.texthip.thip.ui.common.buttons.GenreChipRow
@@ -41,8 +60,6 @@ import com.texthip.thip.ui.group.makeroom.mock.dummySavedBooks
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
-import androidx.compose.foundation.lazy.items
-import androidx.compose.runtime.saveable.rememberSaveable
 
 @Composable
 fun FeedWriteScreen(
@@ -64,6 +81,15 @@ fun FeedWriteScreen(
     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.GetContent()
+    ) { uri: Uri? ->
+        uri?.let {
+            if (imageUris.size < 3) imageUris.add(it)
+        }
+    }
+    val isImageLimitReached = imageUris.size >= 3
     Box {
         Column(
             modifier = modifier
@@ -84,7 +110,7 @@ fun FeedWriteScreen(
                     .padding(horizontal = 20.dp),
                 verticalArrangement = Arrangement.Top,
             ) {
-                Spacer(modifier = Modifier.padding(top = 20.dp))
+                Spacer(modifier = Modifier.height(20.dp))
 
                 GroupSelectBook(
                     selectedBook = selectedBook.value,
@@ -109,10 +135,69 @@ fun FeedWriteScreen(
                     style = typography.smalltitle_sb600_s18_h24,
                     color = colors.White
                 )
-                Spacer(modifier = Modifier.padding(top = 12.dp))
+                Spacer(modifier = Modifier.height(12.dp))
+                LazyRow(
+                    horizontalArrangement = Arrangement.spacedBy(12.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = Modifier.fillMaxWidth()
+                ) {
+                    item {
+                        Box(
+                            modifier = Modifier
+                                .size(80.dp)
+                                .background(color = colors.DarkGrey02)
+                                .border(width = 1.dp, color = if (isImageLimitReached) colors.DarkGrey else colors.Grey02,
+                                )
+                                .let {
+                                    if (!isImageLimitReached) it.clickable {
+                                        imagePickerLauncher.launch("image/*")
+                                    } else it // 클릭 비활성화
+                                },
 
+                            contentAlignment = Alignment.Center
+                        ) {
+                            Icon(
+                                painter = painterResource(id = R.drawable.ic_plus),
+                                contentDescription = null,
+                                tint = if (isImageLimitReached) colors.DarkGrey else colors.White
+                            )
+                        }
+                    }
+                    items(imageUris.size) { index ->
+                        Box(modifier = Modifier.size(80.dp)) {
+                            Image(
+                                painter = rememberAsyncImagePainter(imageUris[index]),
+                                contentDescription = null,
+                                modifier = Modifier.fillMaxSize(),
+                                contentScale = ContentScale.Crop
+                            )
+                            IconButton(
+                                onClick = { imageUris.removeAt(index) },
+                                modifier = Modifier
+                                    .align(Alignment.TopEnd)
+                                    .size(24.dp)
+                            ) {
+                                Icon(
+                                    painter = painterResource(id = R.drawable.ic_x),
+                                    contentDescription = null,
+                                    tint = colors.White
+                                )
+                            }
+                        }
+                    }
+                }
+                Row(
+                    modifier = Modifier.fillMaxWidth().padding(top = 12.dp),
+                    horizontalArrangement = Arrangement.End
+                ) {
+                    Text(
+                        text = stringResource(id = R.string.photo_count, imageUris.size, 3),
+                        style = typography.info_r400_s12,
+                        color = colors.NeonGreen,
+                    )
+                }
+                Spacer(modifier = Modifier.padding(top = 32.dp))
                 SectionDivider()
-
                 Text(
                     text = stringResource(R.string.group_private_option),
                     style = typography.smalltitle_sb600_s18_h24,
@@ -173,12 +258,19 @@ fun FeedWriteScreen(
                         horizontalArrangement = Arrangement.End
                     ) {
                         Text(
-                            text = "${selectedSubGenres.size}/5",
+                            text = stringResource(id = R.string.tag_count, selectedSubGenres.size, 5),
                             style = typography.info_r400_s12,
                             color = colors.NeonGreen,
                             )
                     }
                 }
+                Spacer(modifier = Modifier.height(12.dp))
+                Text(
+                    text = stringResource(R.string.selected_tags),
+                    style = typography.menu_r400_s14_h24,
+                    color = colors.White
+                )
+                Spacer(modifier = Modifier.height(12.dp))
                 if (selectedSubGenres.isNotEmpty()) {
                     Spacer(modifier = Modifier.height(12.dp))
                     LazyRow(
@@ -189,19 +281,18 @@ fun FeedWriteScreen(
                             GenreChipButton(
                                 text = subGenre,
                                 onClick = {
-                                    // 칩을 클릭해도 제거되도록 할 수 있음
+                                    //해당 칩 눌렀을 때도 서브장르 삭제
                                     selectedSubGenres = selectedSubGenres - subGenre
                                 },
                                 onCloseClick = {
-                                    // X 버튼 클릭시 해당 서브장르 제거
+                                    //x버튼 누르면 서브장르 삭제
                                     selectedSubGenres = selectedSubGenres - subGenre
                                 }
                             )
                         }
                     }
                 }
-
-
+                Spacer(modifier = Modifier.height(20.dp))
             }
         }
 
@@ -219,18 +310,6 @@ fun FeedWriteScreen(
                 groupBooks = dummyGroupBooks
             )
         }
-
-        // 로딩 인디케이터
-        /*if (uiState.isLoading) {
-            Box(
-                modifier = Modifier
-                    .fillMaxSize()
-                    .background(colors.Black.copy(alpha = 0.5f)),
-                contentAlignment = Alignment.Center
-            ) {
-                CircularProgressIndicator(color = colors.NeonGreen)
-            }
-        }*/
     }
 }
 
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index ed736fb5..d323a9f9 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -276,5 +276,7 @@
     <string name="feed_private_comment">비공개로 설정</string>
     <string name="tag">태그</string>
     <string name="add_photo">사진 추가</string>
-
+    <string name="photo_count">%1$d / %2$d</string>
+    <string name="selected_tags">선택된 태그</string>
+    <string name="tag_count">%1$d / %2$d</string>
 </resources>
\ No newline at end of file

From 23c0314374bb9d80ddecc9cb73a7ada8d6c54723 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Tue, 22 Jul 2025 14:42:53 +0900
Subject: [PATCH 17/24] =?UTF-8?q?[ui]:=20=EC=83=88=20=EA=B8=80=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20-=20=EC=82=AC?=
 =?UTF-8?q?=EC=A7=84=20=EC=B6=94=EA=B0=80=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../com/texthip/thip/ui/feed/screen/FeedWriteScreen.kt | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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 749cd66a..fcbdf8e2 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
@@ -77,7 +77,7 @@ fun FeedWriteScreen(
         3 to listOf("철학", "역사", "심리", "종교", "윤리"),
         4 to listOf("음악", "미술", "공예", "무용", "연극")
     )
-    var roomTitle by remember { mutableStateOf("") }
+    var feed_content by remember { mutableStateOf("") }
     var isPrivate by remember { mutableStateOf(false) }
     val showBookSearchSheet = remember { mutableStateOf(false) }
     val selectedBook = remember { mutableStateOf<BookData?>(null) }
@@ -96,10 +96,11 @@ fun FeedWriteScreen(
                 .fillMaxSize(),
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
+            val isRightButtonEnabled = selectedBook.value != null && feed_content.isNotBlank() && selectedGenreIndex != -1 && selectedSubGenres.isNotEmpty()
             InputTopAppBar(
                 title = stringResource(R.string.new_feed),
                 rightButtonName = stringResource(R.string.registration),
-                isRightButtonEnabled = false,
+                isRightButtonEnabled = isRightButtonEnabled,
                 onLeftClick = onNavigateBack,
                 onRightClick = {}
             )
@@ -123,9 +124,9 @@ fun FeedWriteScreen(
                 GroupInputField(
                     title = stringResource(R.string.write_feed),
                     hint = stringResource(R.string.write_feed_hint),
-                    value = roomTitle,
+                    value = feed_content,
                     maxLength = 2000,
-                    onValueChange = { roomTitle = it }
+                    onValueChange = { feed_content = it }
                 )
 
                 SectionDivider()
@@ -196,7 +197,6 @@ fun FeedWriteScreen(
                         color = colors.NeonGreen,
                     )
                 }
-                Spacer(modifier = Modifier.padding(top = 32.dp))
                 SectionDivider()
                 Text(
                     text = stringResource(R.string.group_private_option),

From 38dfa108a6af4971be2a025eebae6ccef9842942 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Tue, 22 Jul 2025 18:15:27 +0900
Subject: [PATCH 18/24] =?UTF-8?q?[ui]:=20=EC=83=88=20=EA=B8=80=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20-=20=EB=B0=94?=
 =?UTF-8?q?=ED=85=80=EC=8B=9C=ED=8A=B8,=20=EB=8B=A4=EC=9D=B4=EC=96=BC?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=20(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/feed/component/MySubscribelistBar.kt   |  6 +-
 .../thip/ui/feed/screen/FeedCommentScreen.kt  | 79 +++++++++++++++++--
 app/src/main/res/values/strings.xml           |  4 +
 3 files changed, 77 insertions(+), 12 deletions(-)

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 50db7a32..8cda5a5c 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
@@ -33,11 +33,6 @@ 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 getDisplayNameFor(index: Int): String {
-    val nicknames = listOf("aaaaaaaa", "bbbbbbb", "aaaaaaaaaaaa", "bbbbbbb", "aaaaa", "bbb","aaaaa")
-    return nicknames.getOrNull(index) ?: ""
-}
 
 @Composable
 fun MySubscribeBarlist(
@@ -65,6 +60,7 @@ fun MySubscribeBarlist(
                 verticalAlignment = Alignment.CenterVertically
             ) {
                 Icon(
+                    modifier = Modifier.size(20.dp),
                     painter = painterResource(id = R.drawable.ic_group),
                     contentDescription = null,
                     tint = Color.Unspecified
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 635283d2..77a6ebab 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,6 +1,7 @@
 package com.texthip.thip.ui.feed.screen
 
 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
@@ -17,12 +18,20 @@ 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
 import androidx.compose.runtime.mutableStateListOf
 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.graphics.Color
+import android.graphics.RenderEffect
+import android.graphics.Shader
+import android.os.Build
+import androidx.compose.ui.draw.blur
+import androidx.compose.ui.graphics.asComposeRenderEffect
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
@@ -30,13 +39,16 @@ 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.bottomsheet.MenuBottomSheet
 import com.texthip.thip.ui.common.buttons.ActionBookButton
 import com.texthip.thip.ui.common.buttons.OptionChipButton
 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.group.note.component.CommentItem
 import com.texthip.thip.ui.group.note.component.ReplyItem
+import com.texthip.thip.ui.group.room.mock.MenuBottomSheetItem
 import com.texthip.thip.ui.mypage.mock.FeedItem
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
@@ -57,6 +69,9 @@ fun FeedCommentScreen(
     onCommentInputChange: (String) -> Unit = {},
     onSendClick: () -> Unit = {}
 ) {
+    var isBottomSheetVisible by remember { mutableStateOf(false) }
+    var showDialog by remember { mutableStateOf(false) }
+
     val commentInput = remember { mutableStateOf("") }
     val replyTo = remember { mutableStateOf<String?>(null) }
     val feed = remember { mutableStateOf(feedItem) }
@@ -95,15 +110,18 @@ fun FeedCommentScreen(
     Box(
         modifier = Modifier
             .fillMaxSize()
+            .blur(if (showDialog) 10.dp else 0.dp)
     ) {
         DefaultTopAppBar(
             isRightIconVisible = true,
             isTitleVisible = false,
             onLeftClick = {},
-            onRightClick = {},
+            onRightClick = { isBottomSheetVisible = true },
         )
         LazyColumn(
-            modifier = modifier.fillMaxWidth().padding(top = 56.dp),
+            modifier = modifier
+                .fillMaxWidth()
+                .padding(top = 56.dp),
             contentPadding = PaddingValues(bottom = 20.dp)
         ) {
             item {
@@ -244,7 +262,7 @@ fun FeedCommentScreen(
             modifier = Modifier
                 .align(Alignment.BottomCenter),
             input = commentInput.value,
-            hint =stringResource(R.string.feed_reply_to, feedItem.userName),
+            hint = stringResource(R.string.feed_reply_to, feedItem.userName),
             onInputChange = {
                 commentInput.value = it
                 onCommentInputChange(it)
@@ -269,9 +287,10 @@ fun FeedCommentScreen(
                                 replyList = emptyList()
                             )
                         )
-                    }else {
+                    } else {
                         // 대댓글
-                        val parentIndex = commentList.indexOfFirst { it.nickName == replyTargetNickname }
+                        val parentIndex =
+                            commentList.indexOfFirst { it.nickName == replyTargetNickname }
                         if (parentIndex != -1) {
                             val parentComment = commentList[parentIndex]
                             val newReply = FeedReplyItem(
@@ -288,7 +307,8 @@ fun FeedCommentScreen(
                                 likeCount = 0
                             )
                             val updatedReplies = parentComment.replyList + newReply
-                            commentList[parentIndex] = parentComment.copy(replyList = updatedReplies)
+                            commentList[parentIndex] =
+                                parentComment.copy(replyList = updatedReplies)
                         }
                     }
                     commentInput.value = ""
@@ -301,7 +321,52 @@ fun FeedCommentScreen(
         )
 
     }
-
+    if (isBottomSheetVisible) {
+        MenuBottomSheet(
+            items = listOf(
+                MenuBottomSheetItem(
+                    text = stringResource(R.string.edit_feed),
+                    color = colors.White,
+                    onClick = { }
+                ),
+                MenuBottomSheetItem(
+                    text = stringResource(R.string.delete_feed),
+                    color = colors.Red,
+                    onClick = {
+                        isBottomSheetVisible = false
+                        showDialog = true
+                    }
+                )
+            ),
+            onDismiss = {
+                isBottomSheetVisible = false
+            }
+        )
+    }
+    if (showDialog) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .clickable(enabled = true, onClick = { showDialog = false })
+        ) {
+            Box(
+                modifier = Modifier.align(Alignment.Center)
+            ) {
+                DialogPopup(
+                    title = stringResource(R.string.delete_feed_dialog_title),
+                    description = stringResource(R.string.delete_feed_dialog_description),
+                    onConfirm = {
+                        showDialog = false
+                        isBottomSheetVisible = false
+                    },
+                    onCancel = {
+                        showDialog = false
+                        isBottomSheetVisible = false
+                    }
+                )
+            }
+        }
+    }
 }
 
 @Preview
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index d323a9f9..53df988d 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -279,4 +279,8 @@
     <string name="photo_count">%1$d / %2$d</string>
     <string name="selected_tags">선택된 태그</string>
     <string name="tag_count">%1$d / %2$d</string>
+    <string name="edit_feed">수정하기</string>
+    <string name="delete_feed">삭제하기</string>
+    <string name="delete_feed_dialog_title">이 피드를 삭제하시겠어요?</string>
+    <string name="delete_feed_dialog_description">삭제 후에는 되돌릴 수 없어요.</string>
 </resources>
\ No newline at end of file

From 8955792ca30a2044932fac82096960e3c9f066e1 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Tue, 22 Jul 2025 18:21:47 +0900
Subject: [PATCH 19/24] =?UTF-8?q?[ui]:=20=EC=83=88=20=EA=B8=80=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20-=20=EB=B0=94?=
 =?UTF-8?q?=ED=85=80=EC=8B=9C=ED=8A=B8,=20=EB=8B=A4=EC=9D=B4=EC=96=BC?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=20(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/com/texthip/thip/ui/feed/screen/FeedWriteScreen.kt    | 3 ---
 1 file changed, 3 deletions(-)

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 fcbdf8e2..9a2c7c8b 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
@@ -21,7 +21,6 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -36,8 +35,6 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 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.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource

From dbc7a69e2f01bcde0a2ab6b38e3e1419e93777af Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Sun, 27 Jul 2025 14:09:47 +0900
Subject: [PATCH 20/24] =?UTF-8?q?[refactor]:=20AsyncImage=EB=A1=9C=20?=
 =?UTF-8?q?=ED=86=B5=EC=9D=BC=20(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../com/texthip/thip/ui/common/header/AuthorHeader.kt    | 9 ++++-----
 .../thip/ui/feed/component/FeedSubscribelistBar.kt       | 7 +++----
 .../texthip/thip/ui/feed/component/MySubscribelistBar.kt | 7 +++----
 3 files changed, 10 insertions(+), 13 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 4205cfbb..14d694d5 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
@@ -1,6 +1,5 @@
 package com.texthip.thip.ui.common.header
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -20,11 +19,11 @@ import androidx.compose.ui.draw.clip
 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.ui.common.buttons.OutlinedButton
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
-import coil.compose.rememberAsyncImagePainter
 
 @Composable
 fun AuthorHeader(
@@ -45,9 +44,9 @@ fun AuthorHeader(
         verticalAlignment = Alignment.CenterVertically
     ) {
         if (profileImage != null) {
-            Image(
-                painter = rememberAsyncImagePainter(profileImage),
-                contentDescription = "작성자 장르이미지",
+            AsyncImage(
+                model = profileImage,
+                contentDescription = null,
                 modifier = Modifier
                     .size(profileImageSize)
                     .clip(CircleShape)
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 6cc07557..77e7fab9 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
@@ -1,6 +1,5 @@
 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.Column
@@ -26,7 +25,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import coil.compose.rememberAsyncImagePainter
+import coil.compose.AsyncImage
 import com.texthip.thip.R
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
@@ -76,8 +75,8 @@ fun FeedSubscribeBarlist(
             verticalAlignment = Alignment.CenterVertically
         ) {
             followerProfileImageUrls.take(5).reversed().forEachIndexed { index, imageUrl ->
-                Image(
-                    painter = rememberAsyncImagePainter(model = imageUrl),
+                AsyncImage(
+                    model = imageUrl,
                     contentDescription = null,
                     modifier = Modifier
                         .size(24.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 8cda5a5c..5915c6ca 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
@@ -1,6 +1,5 @@
 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.BoxWithConstraints
@@ -26,7 +25,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import coil.compose.rememberAsyncImagePainter
+import coil.compose.AsyncImage
 import com.texthip.thip.R
 import com.texthip.thip.ui.feed.mock.MySubscriptionData
 import com.texthip.thip.ui.theme.ThipTheme
@@ -87,8 +86,8 @@ fun MySubscribeBarlist(
                         horizontalAlignment = Alignment.CenterHorizontally,
                         modifier = Modifier.width(36.dp)
                     ) {
-                        Image(
-                            painter = rememberAsyncImagePainter(model = profile.profileImageUrl),
+                        AsyncImage(
+                            model = profile.profileImageUrl,
                             contentDescription = null,
                             modifier = Modifier
                                 .size(36.dp)

From ca8c94743d1546531f82835865c1d983092a9715 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Sun, 27 Jul 2025 14:10:08 +0900
Subject: [PATCH 21/24] =?UTF-8?q?[refactor]:=20AsyncImage=EB=A1=9C=20?=
 =?UTF-8?q?=ED=86=B5=EC=9D=BC=20(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/feed/screen/FeedWriteScreen.kt    | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

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 9a2c7c8b..8144ee5e 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
@@ -3,10 +3,10 @@ package com.texthip.thip.ui.feed.screen
 import android.net.Uri
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -35,12 +35,14 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalFocusManager
 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 coil.compose.rememberAsyncImagePainter
+import coil.compose.AsyncImage
 import com.texthip.thip.R
 import com.texthip.thip.ui.common.buttons.GenreChipButton
 import com.texthip.thip.ui.common.buttons.GenreChipRow
@@ -80,13 +82,16 @@ fun FeedWriteScreen(
     val selectedBook = remember { mutableStateOf<BookData?>(null) }
     val imageUris = remember { mutableStateListOf<Uri>() }
     val imagePickerLauncher = rememberLauncherForActivityResult(
-        contract = ActivityResultContracts.GetContent()
-    ) { uri: Uri? ->
-        uri?.let {
-            if (imageUris.size < 3) imageUris.add(it)
+        contract = ActivityResultContracts.GetMultipleContents()
+    ) { uris: List<Uri> ->
+        if (uris.isNotEmpty()) {
+            val availableSlots = 3 - imageUris.size
+            val imagesToAdd = uris.take(availableSlots) // 3장까지만 유지
+            imageUris.addAll(imagesToAdd)
         }
     }
     val isImageLimitReached = imageUris.size >= 3
+    val focusManager = LocalFocusManager.current
     Box {
         Column(
             modifier = modifier
@@ -105,7 +110,12 @@ fun FeedWriteScreen(
                 modifier = Modifier
                     .verticalScroll(scrollState)
                     .fillMaxSize()
-                    .padding(horizontal = 20.dp),
+                    .padding(horizontal = 20.dp)
+                    .pointerInput(Unit) {
+                        detectTapGestures(onTap = {
+                            focusManager.clearFocus()
+                        })
+                    },
                 verticalArrangement = Arrangement.Top,
             ) {
                 Spacer(modifier = Modifier.height(20.dp))
@@ -163,8 +173,8 @@ fun FeedWriteScreen(
                     }
                     items(imageUris.size) { index ->
                         Box(modifier = Modifier.size(80.dp)) {
-                            Image(
-                                painter = rememberAsyncImagePainter(imageUris[index]),
+                            AsyncImage(
+                                model = imageUris[index],
                                 contentDescription = null,
                                 modifier = Modifier.fillMaxSize(),
                                 contentScale = ContentScale.Crop
@@ -234,7 +244,6 @@ fun FeedWriteScreen(
                     }
                 )
                 Spacer(modifier = Modifier.height(12.dp))
-
                 if (selectedGenreIndex != -1) {
                     val subGenres = subGenreMap[selectedGenreIndex].orEmpty()
                     Spacer(modifier = Modifier.height(8.dp))
@@ -269,7 +278,6 @@ fun FeedWriteScreen(
                 )
                 Spacer(modifier = Modifier.height(12.dp))
                 if (selectedSubGenres.isNotEmpty()) {
-                    Spacer(modifier = Modifier.height(12.dp))
                     LazyRow(
                         modifier = Modifier.fillMaxWidth(),
                         horizontalArrangement = Arrangement.spacedBy(8.dp)
@@ -313,7 +321,7 @@ fun FeedWriteScreen(
 
 @Preview
 @Composable
-private fun GroupMakeRoomScreenPreview() {
+private fun FeedWriteScreenPreview() {
     ThipTheme {
         FeedWriteScreen(
             onNavigateBack = { }

From 5747691b1a43226b23df6b8a670cafbf6d5af0f5 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Sun, 27 Jul 2025 14:11:22 +0900
Subject: [PATCH 22/24] =?UTF-8?q?[refactor]:=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20=EC=A3=BC=EC=84=9D,=20import=20=EC=A0=95=EB=A6=AC?=
 =?UTF-8?q?=20=EB=B0=8F=20modifier=20=EC=A0=95=EB=A6=AC(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/common/buttons/SubGenreChipRow.kt | 18 ---------------
 .../thip/ui/common/topappbar/LogoTopAppBar.kt |  2 +-
 .../thip/ui/feed/screen/FeedCommentScreen.kt  | 22 +++----------------
 .../thip/ui/mypage/component/SavedFeedCard.kt |  2 +-
 4 files changed, 5 insertions(+), 39 deletions(-)

diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/SubGenreChipRow.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/SubGenreChipRow.kt
index 577d609b..e5da0e3b 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/buttons/SubGenreChipRow.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/SubGenreChipRow.kt
@@ -17,24 +17,6 @@ fun SubGenreChipGrid(
     selectedGenres: List<String>,
     onGenreToggle: (String) -> Unit
 ) {
-    /*LazyVerticalGrid(
-        columns = GridCells.Fixed(5),
-        modifier = Modifier.fillMaxWidth(),
-        verticalArrangement = Arrangement.spacedBy(8.dp),
-        horizontalArrangement = Arrangement.spacedBy(8.dp),
-        userScrollEnabled = false
-    ) {
-        items(subGenres.size) { index ->
-            val genre = subGenres[index]
-            OptionChipButton(
-                text = genre,
-                isSelected = selectedGenres.contains(genre),
-                isFilled = false,
-                onClick = { onGenreToggle(genre) },
-                modifier = Modifier
-            )
-        }
-    }*/
     FlowRow(
         modifier = Modifier.fillMaxWidth(),
         horizontalArrangement = Arrangement.spacedBy(8.dp),
diff --git a/app/src/main/java/com/texthip/thip/ui/common/topappbar/LogoTopAppBar.kt b/app/src/main/java/com/texthip/thip/ui/common/topappbar/LogoTopAppBar.kt
index df7ac93a..411fb48b 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/topappbar/LogoTopAppBar.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/topappbar/LogoTopAppBar.kt
@@ -36,7 +36,7 @@ fun LogoTopAppBar(
     }
 
     Box(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxWidth()
             .background(color = colors.Black)
             .padding(horizontal = 20.dp, vertical = 16.dp),
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 77a6ebab..040548fd 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,18 +1,8 @@
 package com.texthip.thip.ui.feed.screen
 
 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.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.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
@@ -25,13 +15,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import android.graphics.RenderEffect
-import android.graphics.Shader
-import android.os.Build
 import androidx.compose.ui.draw.blur
-import androidx.compose.ui.graphics.asComposeRenderEffect
-import androidx.compose.ui.graphics.graphicsLayer
+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
@@ -46,8 +31,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.group.note.component.CommentItem
-import com.texthip.thip.ui.group.note.component.ReplyItem
+import com.texthip.thip.ui.group.note.component.*
 import com.texthip.thip.ui.group.room.mock.MenuBottomSheetItem
 import com.texthip.thip.ui.mypage.mock.FeedItem
 import com.texthip.thip.ui.theme.ThipTheme.colors
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 b847a6ab..5d82f201 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
@@ -37,7 +37,7 @@ fun SavedFeedCard(
     onLikeClick: () -> Unit = {}
 ) {
     Column(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxWidth()
             .padding(20.dp)
     ) {

From 3ddcdceb04f879a817ab2ea7121e91e540514e97 Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Sun, 27 Jul 2025 14:27:06 +0900
Subject: [PATCH 23/24] =?UTF-8?q?[refactor]:=20FeedCommentScreen=20?=
 =?UTF-8?q?=EB=8C=93=EA=B8=80=20=EC=97=AC=EB=B0=B1=20=EC=88=98=EC=A0=95(#4?=
 =?UTF-8?q?5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../thip/ui/feed/screen/FeedCommentScreen.kt  | 67 ++++++++++---------
 1 file changed, 37 insertions(+), 30 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 040548fd..9a587288 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
@@ -34,6 +34,7 @@ import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
 import com.texthip.thip.ui.group.note.component.*
 import com.texthip.thip.ui.group.room.mock.MenuBottomSheetItem
 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
 import com.texthip.thip.ui.group.note.mock.CommentItem as FeedCommentItem
@@ -229,9 +230,10 @@ fun FeedCommentScreen(
                     ) {
                         CommentItem(
                             data = commentItem,
-                            onReplyClick = { replyTo.value = it }
+                            onReplyClick = { replyTo.value = it },
+
                         )
-                        Spacer(modifier = Modifier.height(12.dp))
+                        Spacer(modifier = Modifier.height(24.dp))
                         commentItem.replyList.forEach { reply ->
                             ReplyItem(
                                 data = reply,
@@ -241,6 +243,9 @@ fun FeedCommentScreen(
                     }
                 }
             }
+            item {
+                Spacer(modifier = Modifier.height(40.dp))
+            }
         }
         CommentTextField(
             modifier = Modifier
@@ -356,32 +361,34 @@ fun FeedCommentScreen(
 @Preview
 @Composable
 private fun FeedCommentScreenPrev() {
-    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,
-            imageUrl = R.drawable.bookcover_sample,
-            tags = listOf("에세이", "문학", "힐링")
-        ),
-        bookImage = painterResource(R.drawable.bookcover_sample),
-        profileImage = painterResource(R.drawable.character_literature),
-        onLikeClick = {},
-        onCommentInputChange = {},
-        onSendClick = {},
-        currentUserId = 999,
-        currentUserName = "나",
-        currentUserGenre = "장르",
-        currentUserProfileImageUrl = ""
-    )
+    ThipTheme {
+        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,
+                imageUrl = R.drawable.bookcover_sample,
+                tags = listOf("에세이", "문학", "힐링")
+            ),
+            bookImage = painterResource(R.drawable.bookcover_sample),
+            profileImage = painterResource(R.drawable.character_literature),
+            onLikeClick = {},
+            onCommentInputChange = {},
+            onSendClick = {},
+            currentUserId = 999,
+            currentUserName = "나",
+            currentUserGenre = "장르",
+            currentUserProfileImageUrl = ""
+        )
+    }
 }
\ No newline at end of file

From 9c0496a6299211dd9c2e0d1c711899a27a43a21d Mon Sep 17 00:00:00 2001
From: JJUYAAA <jjjjyy020704@naver.com>
Date: Sun, 27 Jul 2025 14:33:44 +0900
Subject: [PATCH 24/24] =?UTF-8?q?[refactor]:=20FeedWriteScreen=20=EB=B8=94?=
 =?UTF-8?q?=EB=9F=AC=20=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80(#45)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/com/texthip/thip/ui/feed/screen/FeedWriteScreen.kt  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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 8144ee5e..279a6a8f 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
@@ -35,6 +35,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.blur
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalFocusManager
@@ -92,10 +93,12 @@ fun FeedWriteScreen(
     }
     val isImageLimitReached = imageUris.size >= 3
     val focusManager = LocalFocusManager.current
+
     Box {
         Column(
             modifier = modifier
-                .fillMaxSize(),
+                .fillMaxSize()
+                .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()