diff --git a/.gitignore b/.gitignore
index aa724b77..ccd4a741 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,10 @@
 .externalNativeBuild
 .cxx
 local.properties
+.idea/deploymentTargetSelector.xml
+.idea/misc.xml
+.idea/gradle.xml
+.idea/appInsightsSettings.xml
+/app/google-services.json
+*.properties
+*.jks
\ No newline at end of file
diff --git a/.idea/.gitignore b/.idea/.gitignore
deleted file mode 100644
index 26d33521..00000000
--- a/.idea/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
diff --git a/.idea/appInsightsSettings.xml b/.idea/appInsightsSettings.xml
index 371f2e29..1b7cae7d 100644
--- a/.idea/appInsightsSettings.xml
+++ b/.idea/appInsightsSettings.xml
@@ -3,15 +3,29 @@
   <component name="AppInsightsSettings">
     <option name="tabSettings">
       <map>
+        <entry key="Android Vitals">
+          <value>
+            <InsightsFilterSettings>
+              <option name="connection">
+                <ConnectionSetting>
+                  <option name="appId" value="com.texthip.thip" />
+                </ConnectionSetting>
+              </option>
+              <option name="signal" value="SIGNAL_UNSPECIFIED" />
+              <option name="timeIntervalDays" value="SEVEN_DAYS" />
+              <option name="visibilityType" value="ALL" />
+            </InsightsFilterSettings>
+          </value>
+        </entry>
         <entry key="Firebase Crashlytics">
           <value>
             <InsightsFilterSettings>
               <option name="connection">
                 <ConnectionSetting>
-                  <option name="appId" value="PLACEHOLDER" />
-                  <option name="mobileSdkAppId" value="" />
-                  <option name="projectId" value="" />
-                  <option name="projectNumber" value="" />
+                  <option name="appId" value="com.texthip.thip" />
+                  <option name="mobileSdkAppId" value="1:353417813537:android:69029c2bc957df7fab4d60" />
+                  <option name="projectId" value="thip-3a698" />
+                  <option name="projectNumber" value="353417813537" />
                 </ConnectionSetting>
               </option>
               <option name="signal" value="SIGNAL_UNSPECIFIED" />
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
new file mode 100644
index 00000000..7f70f7ef
--- /dev/null
+++ b/.idea/codeStyles/Project.xml
@@ -0,0 +1,158 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <JavaCodeStyleSettings>
+      <option name="IMPORT_LAYOUT_TABLE">
+        <value>
+          <package name="" withSubpackages="true" static="false" module="true" />
+          <package name="android" withSubpackages="true" static="true" />
+          <package name="androidx" withSubpackages="true" static="true" />
+          <package name="com" withSubpackages="true" static="true" />
+          <package name="junit" withSubpackages="true" static="true" />
+          <package name="net" withSubpackages="true" static="true" />
+          <package name="org" withSubpackages="true" static="true" />
+          <package name="java" withSubpackages="true" static="true" />
+          <package name="javax" withSubpackages="true" static="true" />
+          <package name="" withSubpackages="true" static="true" />
+          <emptyLine />
+          <package name="android" withSubpackages="true" static="false" />
+          <emptyLine />
+          <package name="androidx" withSubpackages="true" static="false" />
+          <emptyLine />
+          <package name="com" withSubpackages="true" static="false" />
+          <emptyLine />
+          <package name="junit" withSubpackages="true" static="false" />
+          <emptyLine />
+          <package name="net" withSubpackages="true" static="false" />
+          <emptyLine />
+          <package name="org" withSubpackages="true" static="false" />
+          <emptyLine />
+          <package name="java" withSubpackages="true" static="false" />
+          <emptyLine />
+          <package name="javax" withSubpackages="true" static="false" />
+          <emptyLine />
+          <package name="" withSubpackages="true" static="false" />
+          <emptyLine />
+        </value>
+      </option>
+    </JavaCodeStyleSettings>
+    <JetCodeStyleSettings>
+      <option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
+    </JetCodeStyleSettings>
+    <codeStyleSettings language="XML">
+      <option name="FORCE_REARRANGE_MODE" value="1" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="4" />
+      </indentOptions>
+      <arrangement>
+        <rules>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>xmlns:android</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>^$</XML_NAMESPACE>
+                </AND>
+              </match>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>xmlns:.*</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>^$</XML_NAMESPACE>
+                </AND>
+              </match>
+              <order>BY_NAME</order>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>.*:id</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
+                </AND>
+              </match>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>.*:name</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
+                </AND>
+              </match>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>name</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>^$</XML_NAMESPACE>
+                </AND>
+              </match>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>style</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>^$</XML_NAMESPACE>
+                </AND>
+              </match>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>.*</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>^$</XML_NAMESPACE>
+                </AND>
+              </match>
+              <order>BY_NAME</order>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>.*</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>http://schemas.android.com/apk/res/android</XML_NAMESPACE>
+                </AND>
+              </match>
+              <order>ANDROID_ATTRIBUTE_ORDER</order>
+            </rule>
+          </section>
+          <section>
+            <rule>
+              <match>
+                <AND>
+                  <NAME>.*</NAME>
+                  <XML_ATTRIBUTE />
+                  <XML_NAMESPACE>.*</XML_NAMESPACE>
+                </AND>
+              </match>
+              <order>BY_NAME</order>
+            </rule>
+          </section>
+        </rules>
+      </arrangement>
+    </codeStyleSettings>
+    <codeStyleSettings language="kotlin">
+      <option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
+    </codeStyleSettings>
+  </code_scheme>
+</component>
\ No newline at end of file
diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
new file mode 100644
index 00000000..79ee123c
--- /dev/null
+++ b/.idea/codeStyles/codeStyleConfig.xml
@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>
\ No newline at end of file
diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml
deleted file mode 100644
index 5a5e615c..00000000
--- a/.idea/deploymentTargetSelector.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="deploymentTargetSelector">
-    <selectionStates>
-      <SelectionState runConfigName="BookTopAppBarPreview">
-        <option name="selectionMode" value="DROPDOWN" />
-      </SelectionState>
-    </selectionStates>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/deviceManager.xml b/.idea/deviceManager.xml
new file mode 100644
index 00000000..6f58639c
--- /dev/null
+++ b/.idea/deviceManager.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DeviceTable">
+    <option name="columnSorters">
+      <list>
+        <ColumnSorterState>
+          <option name="column" value="API" />
+          <option name="order" value="DESCENDING" />
+        </ColumnSorterState>
+        <ColumnSorterState>
+          <option name="column" value="Name" />
+          <option name="order" value="ASCENDING" />
+        </ColumnSorterState>
+      </list>
+    </option>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index 639c779c..d124cf2a 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="jbr-21" />
         <option name="modules">
           <set>
             <option value="$PROJECT_DIR$" />
diff --git a/.idea/misc.xml b/.idea/misc.xml
index 1e536c6c..62464c5c 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -2,5 +2,6 @@
   <component name="CodeInsightWorkspaceSettings">
     <option name="optimizeImportsOnTheFly" value="true" />
   </component>
+  <component name="ExternalStorageConfigurationManager" enabled="true" />
   <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="jbr-21" project-jdk-type="JavaSDK" />
 </project>
\ No newline at end of file
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index a776656f..8d113e29 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -1,9 +1,25 @@
+import java.io.FileInputStream
+import java.util.Properties
+
 plugins {
     alias(libs.plugins.android.application)
     alias(libs.plugins.kotlin.android)
     alias(libs.plugins.kotlin.compose)
+    alias(libs.plugins.kotlin.serialization)
+    id("com.google.dagger.hilt.android")
+    id("com.google.gms.google-services")
+    kotlin("kapt")
+}
+
+val properties = Properties().apply {
+    load(project.rootProject.file("local.properties").inputStream())
 }
 
+val keystorePropertiesFile = rootProject.file("keystore.properties")
+val keystoreProperties = Properties()
+keystoreProperties.load(FileInputStream(keystorePropertiesFile))
+
+
 android {
     namespace = "com.texthip.thip"
     compileSdk = 35
@@ -12,19 +28,47 @@ android {
         applicationId = "com.texthip.thip"
         minSdk = 29
         targetSdk = 35
-        versionCode = 1
-        versionName = "1.0"
+        versionCode = 7
+        versionName = "1.2.1"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
+
+        buildConfigField("String", "BASE_URL", "\"${properties["BASE_URL"]}\"")
+        buildConfigField("String", "NATIVE_APP_KEY", "\"${properties["NATIVE_APP_KEY"]}\"")
+        manifestPlaceholders += mapOf(
+            "NATIVE_APP_KEY" to properties["NATIVE_APP_KEY"] as String
+        )
+    }
+
+    signingConfigs {
+        create("release") {
+            keyAlias = keystoreProperties["keyAlias"] as String
+            keyPassword = keystoreProperties["keyPassword"] as String
+            storeFile = file(keystoreProperties["storeFile"] as String)
+            storePassword = keystoreProperties["storePassword"] as String
+        }
     }
 
     buildTypes {
+        debug {
+            isMinifyEnabled = true
+
+            isShrinkResources = true
+            proguardFiles(
+                getDefaultProguardFile("proguard-android-optimize.txt"),
+                "proguard-rules.pro"
+            )
+            signingConfig = signingConfigs.getByName("debug")
+        }
         release {
-            isMinifyEnabled = false
+            isMinifyEnabled = true
+
+            isShrinkResources = true
             proguardFiles(
                 getDefaultProguardFile("proguard-android-optimize.txt"),
                 "proguard-rules.pro"
             )
+            signingConfig = signingConfigs.getByName("release")
         }
     }
     compileOptions {
@@ -36,6 +80,7 @@ android {
     }
     buildFeatures {
         compose = true
+        buildConfig = true
     }
 }
 
@@ -50,6 +95,14 @@ dependencies {
     implementation(libs.androidx.ui.tooling.preview)
     implementation(libs.androidx.material3)
     implementation(libs.androidx.navigation.compose)
+    //implementation(libs.androidx.foundation)
+    implementation(libs.androidx.lifecycle.viewmodel.compose)
+    implementation(libs.androidx.navigation.runtime.android)
+    implementation(libs.kotlinx.serialization.json)
+    implementation(libs.coil.compose)
+    implementation(libs.foundation)
+    implementation(libs.androidx.lifecycle.runtime.compose)
+    implementation(libs.androidx.datastore.preferences)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
@@ -57,4 +110,36 @@ dependencies {
     androidTestImplementation(libs.androidx.ui.test.junit4)
     debugImplementation(libs.androidx.ui.tooling)
     debugImplementation(libs.androidx.ui.test.manifest)
+    implementation("androidx.compose.foundation:foundation:1.5.0")
+
+    // Hilt
+    implementation(libs.hilt.android)
+    kapt(libs.hilt.android.compiler)
+    implementation(libs.androidx.hilt.navigation.compose)
+
+// Retrofit
+    implementation(libs.retrofit)
+    //implementation(libs.converter.gson)
+    implementation(libs.retrofit.kotlin.serialization.converter)
+
+// OkHttp
+    implementation(libs.okhttp)
+    implementation(libs.logging.interceptor)
+
+// 카카오 로그인 SDK
+    implementation("com.kakao.sdk:v2-all:2.21.6")
+
+// 토큰 저장을 위한 DataStore
+    //implementation ("androidx.datastore:datastore-preferences:1.1.1")
+
+// 구글 로그인
+    implementation("com.google.android.gms:play-services-auth:21.2.0")
+
+    implementation("androidx.credentials:credentials:1.2.2")
+    implementation("androidx.credentials:credentials-play-services-auth:1.2.2")
+
+}
+
+kapt {
+    correctErrorTypes = true
 }
\ No newline at end of file
diff --git a/app/proguard-rules.pro b/app/proguard-rules.pro
index 481bb434..2deda3ed 100644
--- a/app/proguard-rules.pro
+++ b/app/proguard-rules.pro
@@ -18,4 +18,10 @@
 
 # If you keep the line number information, uncomment this to
 # hide the original source file name.
-#-renamesourcefileattribute SourceFile
\ No newline at end of file
+#-renamesourcefileattribute SourceFile
+
+# Kakao SDK v2
+-keep class com.kakao.** { *; }
+-keep enum com.kakao.** { *; }
+-keep interface com.kakao.** { *; }
+-keep class com.texthip.thip.ui.navigator.** { *; }
\ No newline at end of file
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index 33cb3ada..2fe2f65a 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -2,8 +2,12 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
 
+    <uses-permission android:name="android.permission.INTERNET" />
+
     <application
-        android:allowBackup="true"
+        android:name=".ThipApplication"
+        android:allowBackup="false"
+        android:networkSecurityConfig="@xml/network_security_config"
         android:dataExtractionRules="@xml/data_extraction_rules"
         android:fullBackupContent="@xml/backup_rules"
         android:icon="@mipmap/ic_launcher"
@@ -12,9 +16,29 @@
         android:supportsRtl="true"
         android:theme="@style/Theme.Thip"
         tools:targetApi="31">
+
+        <meta-data
+            android:name="com.kakao.sdk.AppKey"
+            android:value="${NATIVE_APP_KEY}" />
+
+        <activity
+            android:name="com.kakao.sdk.auth.AuthCodeHandlerActivity"
+            android:exported="true">
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+
+                <data android:host="oauth"
+                    android:scheme="kakao${NATIVE_APP_KEY}" />
+
+            </intent-filter>
+        </activity>
+
         <activity
             android:name=".MainActivity"
             android:exported="true"
+            android:windowSoftInputMode="adjustResize"
             android:label="@string/app_name"
             android:theme="@style/Theme.Thip">
             <intent-filter>
@@ -24,5 +48,4 @@
             </intent-filter>
         </activity>
     </application>
-
 </manifest>
\ No newline at end of file
diff --git a/app/src/main/ic_launcher-playstore.png b/app/src/main/ic_launcher-playstore.png
new file mode 100644
index 00000000..1ed697a6
Binary files /dev/null and b/app/src/main/ic_launcher-playstore.png differ
diff --git a/app/src/main/java/com/texthip/thip/MainActivity.kt b/app/src/main/java/com/texthip/thip/MainActivity.kt
index 97070bcf..4e86f830 100644
--- a/app/src/main/java/com/texthip/thip/MainActivity.kt
+++ b/app/src/main/java/com/texthip/thip/MainActivity.kt
@@ -4,78 +4,91 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import androidx.compose.foundation.layout.Column
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.runtime.LaunchedEffect
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import com.texthip.thip.data.manager.AuthStateManager
+import com.texthip.thip.data.manager.TokenManager
+import com.texthip.thip.ui.navigator.navigations.authNavigation
+import com.texthip.thip.ui.navigator.routes.CommonRoutes
 import com.texthip.thip.ui.theme.ThipTheme
-import com.texthip.thip.ui.theme.ThipTheme.colors
-import com.texthip.thip.ui.theme.ThipTheme.typography
+import dagger.hilt.android.AndroidEntryPoint
+import kotlinx.coroutines.flow.collectLatest
+import javax.inject.Inject
 
+@AndroidEntryPoint
 class MainActivity : ComponentActivity() {
+    @Inject
+    lateinit var tokenManager: TokenManager
+    @Inject
+    lateinit var authStateManager: AuthStateManager
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         enableEdgeToEdge()
         setContent {
             ThipTheme {
-                /*Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
-                    Greeting(
-                        name = "Android",
-                        modifier = Modifier.padding(innerPadding)
-                    )
-                }*/
-                MainScreen()
+                RootNavHost(authStateManager)
             }
         }
+//        getKakaoKeyHash(this)
     }
 }
 
 @Composable
-fun Greeting(name: String, modifier: Modifier = Modifier) {
-    Column {
-        Text(
-            text = "Hello $name!",
-            modifier = modifier,
-            style = typography.bigtitle_b700_s22_h24,
-            color = colors.Purple,
-        )
-
-        Text(
-            text = "Hello $name!",
-            modifier = modifier,
-            style = typography.smalltitle_sb600_s16_h20,
-            color = colors.NeonGreen,
-        )
-
-        Text(
-            text = "Hello $name!",
-            modifier = modifier,
-            style = typography.menu_sb600_s12,
-            color = colors.Red,
-        )
-
-        Text(
-            text = "Hello $name!",
-            modifier = modifier,
-            style = typography.navi_m500_s10,
-            color = colors.DarkGrey,
-        )
+fun RootNavHost(authStateManager: AuthStateManager) {
+    val navController = rememberNavController()
 
-        Text(
-            text = "Hello $name!",
-            modifier = modifier,
-            style = typography.view_r400_s11_h20,
-            color = colors.Black,
-        )
+    LaunchedEffect(Unit) {
+        authStateManager.tokenExpiredEvent.collectLatest {
+            navController.navigate(CommonRoutes.Login) {
+                popUpTo(0) { inclusive = true }
+            }
+        }
     }
+    
+    NavHost(
+        navController = navController,
+        startDestination = CommonRoutes.Splash
+    ) {
+        // --- 인증 관련 화면들 ---
+        authNavigation(
+            onNavigateToLogin = {
+                navController.navigate(CommonRoutes.Login) {
+                    popUpTo(CommonRoutes.Splash) { inclusive = true }
+                }
+            },
+            onNavigateToHome = {
+                navController.navigate(CommonRoutes.Main) {
+                    popUpTo(CommonRoutes.Splash) { inclusive = true }
+                }
+            },
+            onNavigateToSignup = {
+                navController.navigate(CommonRoutes.SignupFlow)
+            },
+            onNavigateToMainAfterSignup = {
+                navController.navigate(CommonRoutes.Main) { // 혹은 MainGraph
+                    popUpTo(CommonRoutes.Splash) { inclusive = true }
+                }
+            },
+            navController = navController
+        )
 
-}
 
-@Preview(showBackground = true)
-@Composable
-fun GreetingPreview() {
-    ThipTheme {
-        Greeting("Android")
+        // --- 메인 관련 화면들 ---
+        composable<CommonRoutes.Main> { // MainScreen으로 가는 경로 추가
+            MainScreen(
+                onNavigateToLogin = {
+                    navController.navigate(CommonRoutes.Login) {
+                        // 메인 화면으로 돌아올 수 없도록 모든 화면 기록 삭제
+                        popUpTo(CommonRoutes.Main) {
+                            inclusive = true
+                        }
+                    }
+                }
+            )
+        }
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/MainScreen.kt b/app/src/main/java/com/texthip/thip/MainScreen.kt
index f408ea0e..1b4ef1dd 100644
--- a/app/src/main/java/com/texthip/thip/MainScreen.kt
+++ b/app/src/main/java/com/texthip/thip/MainScreen.kt
@@ -5,27 +5,55 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import com.texthip.thip.ui.navigator.BottomNavigationBar
 import com.texthip.thip.ui.navigator.MainNavHost
-import com.texthip.thip.ui.navigator.NavBarItems
+import com.texthip.thip.ui.navigator.extensions.isMainTabRoute
+import com.texthip.thip.ui.navigator.routes.MainTabRoutes
 
 @Composable
-fun MainScreen() {
+fun MainScreen(
+    onNavigateToLogin: () -> Unit
+) {
     val navController = rememberNavController()
     val navBackStackEntry by navController.currentBackStackEntryAsState()
-    val currentRoute = navBackStackEntry?.destination?.route
-    val showBottomBar = currentRoute in NavBarItems.BarItems.map { it.route }
+    val currentDestination = navBackStackEntry?.destination
+    var feedReselectionTrigger by remember { mutableStateOf(0) }
+
+    val showBottomBar = currentDestination?.isMainTabRoute() ?: true
 
     Scaffold(
         bottomBar = {
-            if (showBottomBar) BottomNavigationBar(navController)
-        }
+            if (showBottomBar) {
+                BottomNavigationBar(
+                    navController = navController,
+                    onTabReselected = { route ->
+                        when (route) {
+                            MainTabRoutes.Feed -> {
+                                feedReselectionTrigger += 1
+                            }
+                            else -> {
+                                // 다른 탭들은 향후 확장 가능
+                            }
+                        }
+                    }
+                )
+            }
+        },
+        containerColor = Color.Transparent
     ) { innerPadding ->
         Box(modifier = Modifier.padding(innerPadding)) {
-            MainNavHost (navController)
+            MainNavHost(
+                navController = navController,
+                onNavigateToLogin = onNavigateToLogin,
+                onFeedTabReselected = feedReselectionTrigger
+            )
         }
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ThipApplication.kt b/app/src/main/java/com/texthip/thip/ThipApplication.kt
new file mode 100644
index 00000000..58da5b7b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ThipApplication.kt
@@ -0,0 +1,25 @@
+package com.texthip.thip
+
+import android.app.Application
+import com.kakao.sdk.common.KakaoSdk
+import com.texthip.thip.data.manager.TokenManager
+import dagger.hilt.android.HiltAndroidApp
+import javax.inject.Inject
+
+
+@HiltAndroidApp
+class ThipApplication : Application(){
+    @Inject
+    lateinit var tokenManager: TokenManager
+
+    override fun onCreate() {
+        super.onCreate()
+
+        // 카카오 SDK 초기화
+        try {
+            KakaoSdk.init(this, BuildConfig.NATIVE_APP_KEY)
+        }catch (e: Exception){
+            e.printStackTrace()
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/di/DataStoreModule.kt b/app/src/main/java/com/texthip/thip/data/di/DataStoreModule.kt
new file mode 100644
index 00000000..ab84768c
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/di/DataStoreModule.kt
@@ -0,0 +1,25 @@
+package com.texthip.thip.data.di
+
+import android.content.Context
+import androidx.datastore.core.DataStore
+import androidx.datastore.preferences.preferencesDataStore
+import dagger.Module
+import dagger.Provides
+import dagger.hilt.InstallIn
+import dagger.hilt.android.qualifiers.ApplicationContext
+import dagger.hilt.components.SingletonComponent
+import androidx.datastore.preferences.core.Preferences
+import javax.inject.Singleton
+
+@Module
+@InstallIn(SingletonComponent::class)
+object DataStoreModule {
+
+    private val Context.dataStore: DataStore<Preferences> by preferencesDataStore(name = "thip_tokens")
+
+    @Provides
+    @Singleton
+    fun provideDataStore(@ApplicationContext context: Context): DataStore<Preferences> {
+        return context.dataStore
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/data/di/NetworkModule.kt b/app/src/main/java/com/texthip/thip/data/di/NetworkModule.kt
new file mode 100644
index 00000000..f2bacd8d
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/di/NetworkModule.kt
@@ -0,0 +1,79 @@
+package com.texthip.thip.data.di
+
+import android.content.Context
+import com.jakewharton.retrofit2.converter.kotlinx.serialization.asConverterFactory
+import com.texthip.thip.BuildConfig
+import com.texthip.thip.utils.auth.AuthInterceptor
+import com.texthip.thip.utils.image.ImageUploadHelper
+import dagger.Module
+import dagger.Provides
+import dagger.hilt.InstallIn
+import dagger.hilt.android.qualifiers.ApplicationContext
+import dagger.hilt.components.SingletonComponent
+import kotlinx.serialization.ExperimentalSerializationApi
+import kotlinx.serialization.json.Json
+import okhttp3.MediaType.Companion.toMediaType
+import okhttp3.OkHttpClient
+import okhttp3.logging.HttpLoggingInterceptor
+import retrofit2.Retrofit
+import java.util.concurrent.TimeUnit
+import javax.inject.Singleton
+
+@Module
+@InstallIn(SingletonComponent::class)
+object NetworkModule {
+    @OptIn(ExperimentalSerializationApi::class)
+    @Provides
+    @Singleton
+    fun provideJson(): Json =
+        Json {
+            isLenient = true // 유연한 JSON 구분 허용
+            prettyPrint = true // 출력 JSON 을 예쁘게 들여쓰기해서 가독성을 높임
+            encodeDefaults = true // 파라미터의 기본값(default) 을 JSON 으로 인코딩
+            explicitNulls = false // null 값을 명시적으로 표시하지 않음
+            ignoreUnknownKeys = true // JSON 에 정의하지 않은 키가 있어도 무시하고 파싱
+        }
+
+    @Provides
+    @Singleton
+    fun providesOkHttpClient(
+        loggingInterceptor: HttpLoggingInterceptor,
+        authInterceptor: AuthInterceptor,
+//        authAuthenticator: TokenAuthenticator
+    ): OkHttpClient =
+        OkHttpClient.Builder().apply {
+            connectTimeout(10, TimeUnit.SECONDS)
+            writeTimeout(10, TimeUnit.SECONDS)
+            readTimeout(10, TimeUnit.SECONDS)
+            addInterceptor(loggingInterceptor)
+            addInterceptor(authInterceptor)
+//            authenticator(authAuthenticator)
+        }.build()
+
+    @Provides
+    @Singleton
+    fun providesLoggingInterceptor(): HttpLoggingInterceptor =
+        HttpLoggingInterceptor().apply {
+            level = HttpLoggingInterceptor.Level.BODY
+        }
+
+    @Provides
+    @Singleton
+    fun providesRetrofit(
+        json: Json,
+        okHttpClient: OkHttpClient
+    ): Retrofit =
+        Retrofit.Builder()
+            .baseUrl(BuildConfig.BASE_URL)
+            .addConverterFactory(
+                json.asConverterFactory(requireNotNull("application/json".toMediaType()))
+            )
+            .client(okHttpClient)
+            .build()
+
+    @Provides
+    @Singleton
+    fun provideImageUploadHelper(
+        @ApplicationContext context: Context
+    ): ImageUploadHelper = ImageUploadHelper(context)
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/di/ServiceModule.kt b/app/src/main/java/com/texthip/thip/data/di/ServiceModule.kt
new file mode 100644
index 00000000..4d8b0fe8
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/di/ServiceModule.kt
@@ -0,0 +1,59 @@
+package com.texthip.thip.data.di
+
+import com.texthip.thip.data.service.AuthService
+import com.texthip.thip.data.service.BookService
+import com.texthip.thip.data.service.RecentSearchService
+import com.texthip.thip.data.service.CommentsService
+import com.texthip.thip.data.service.FeedService
+import com.texthip.thip.data.service.RoomsService
+import com.texthip.thip.data.service.UserService
+import dagger.Module
+import dagger.Provides
+import dagger.hilt.InstallIn
+import dagger.hilt.components.SingletonComponent
+import retrofit2.Retrofit
+import javax.inject.Singleton
+
+@Module
+@InstallIn(SingletonComponent::class)
+object ServiceModule {
+
+    @Provides
+    @Singleton
+    fun provideBookService(retrofit: Retrofit): BookService {
+        return retrofit.create(BookService::class.java)
+    }
+
+    @Provides
+    @Singleton
+    fun providesRoomsService(retrofit: Retrofit): RoomsService =
+        retrofit.create(RoomsService::class.java)
+
+    @Provides
+    @Singleton
+    fun provideAuthService(retrofit: Retrofit): AuthService {
+        return retrofit.create(AuthService::class.java)
+    }
+
+    @Provides
+    @Singleton
+    fun provideUserService(retrofit: Retrofit): UserService {
+        return retrofit.create(UserService::class.java)
+    }
+
+    @Provides
+    @Singleton
+    fun provideRecentSearchService(retrofit: Retrofit): RecentSearchService {
+        return retrofit.create(RecentSearchService::class.java)
+    }
+
+    @Provides
+    @Singleton
+    fun providesCommentsService(retrofit: Retrofit): CommentsService =
+        retrofit.create(CommentsService::class.java)
+
+    @Provides
+    @Singleton
+    fun provideFeedService(retrofit: Retrofit): FeedService =
+        retrofit.create(FeedService::class.java)
+}
diff --git a/app/src/main/java/com/texthip/thip/data/manager/AuthStateManager.kt b/app/src/main/java/com/texthip/thip/data/manager/AuthStateManager.kt
new file mode 100644
index 00000000..c6420b0b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/manager/AuthStateManager.kt
@@ -0,0 +1,16 @@
+package com.texthip.thip.data.manager
+
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.asSharedFlow
+import javax.inject.Inject
+import javax.inject.Singleton
+
+@Singleton
+class AuthStateManager @Inject constructor() {
+    private val _tokenExpiredEvent = MutableSharedFlow<Unit>(extraBufferCapacity = 1)
+    val tokenExpiredEvent = _tokenExpiredEvent.asSharedFlow()
+    
+    fun triggerTokenExpired() {
+        _tokenExpiredEvent.tryEmit(Unit)
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/manager/Genre.kt b/app/src/main/java/com/texthip/thip/data/manager/Genre.kt
new file mode 100644
index 00000000..817cb49a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/manager/Genre.kt
@@ -0,0 +1,24 @@
+package com.texthip.thip.data.manager
+
+/**
+ * 도서 장르를 나타내는 enum class
+ */
+enum class Genre(
+    val displayKey: String,
+    val apiCategory: String,
+    val networkApiCategory: String = apiCategory
+) {
+    LITERATURE("literature", "문학"),
+    SCIENCE_IT("science_it", "과학·IT", "과학·IT"),
+    SOCIAL_SCIENCE("social_science", "사회과학"),
+    HUMANITIES("humanities", "인문학"),
+    ART("art", "예술");
+
+    companion object {
+        fun getDefault() = LITERATURE
+
+        fun fromDisplayKey(displayKey: String): Genre? {
+            return entries.find { it.displayKey == displayKey }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/manager/GenreManager.kt b/app/src/main/java/com/texthip/thip/data/manager/GenreManager.kt
new file mode 100644
index 00000000..c4cefe27
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/manager/GenreManager.kt
@@ -0,0 +1,24 @@
+package com.texthip.thip.data.manager
+
+import javax.inject.Inject
+import javax.inject.Singleton
+
+@Singleton
+class GenreManager @Inject constructor() {
+    
+    fun getGenres(): List<Genre> {
+        return Genre.entries
+    }
+    
+    fun mapGenreToApiCategory(genre: Genre): String {
+        return genre.networkApiCategory
+    }
+    
+    fun getDefaultGenre(): Genre {
+        return Genre.getDefault()
+    }
+    
+    fun getGenreByDisplayKey(displayKey: String): Genre? {
+        return Genre.fromDisplayKey(displayKey)
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/manager/TokenManager.kt b/app/src/main/java/com/texthip/thip/data/manager/TokenManager.kt
new file mode 100644
index 00000000..db370f35
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/manager/TokenManager.kt
@@ -0,0 +1,69 @@
+package com.texthip.thip.data.manager
+
+import androidx.datastore.core.DataStore
+import androidx.datastore.preferences.core.Preferences
+import androidx.datastore.preferences.core.edit
+import androidx.datastore.preferences.core.stringPreferencesKey
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.first
+import kotlinx.coroutines.flow.map
+import javax.inject.Inject
+import javax.inject.Singleton
+
+
+@Singleton
+class TokenManager @Inject constructor(
+    private val dataStore: DataStore<Preferences>
+) {
+    companion object {
+        private val APP_TOKEN_KEY = stringPreferencesKey("app_token") // 정식 액세스토큰
+        private val TEMP_TOKEN_KEY = stringPreferencesKey("temp_token") // 임시 토큰
+        private val REFRESH_TOKEN_KEY = stringPreferencesKey("refresh_token")
+    }
+
+    // ====== 정식 토큰 ======
+    suspend fun saveToken(token: String) {
+        dataStore.edit { prefs ->
+            prefs[APP_TOKEN_KEY] = token
+        }
+    }
+
+    fun getToken(): Flow<String?> {
+        return dataStore.data.map { prefs -> prefs[APP_TOKEN_KEY] }
+    }
+
+    suspend fun getTokenOnce(): String? {
+        return dataStore.data.map { prefs -> prefs[APP_TOKEN_KEY] }.first()
+    }
+
+    suspend fun deleteToken() {
+        dataStore.edit { prefs -> prefs.remove(APP_TOKEN_KEY) }
+    }
+
+    // ====== 임시 토큰 ======
+    suspend fun saveTempToken(token: String) {
+        dataStore.edit { prefs -> prefs[TEMP_TOKEN_KEY] = token }
+    }
+
+    suspend fun getTempTokenOnce(): String? {
+        return dataStore.data.map { prefs -> prefs[TEMP_TOKEN_KEY] }.first()
+    }
+
+    suspend fun deleteTempToken() {
+        dataStore.edit { prefs -> prefs.remove(TEMP_TOKEN_KEY) }
+    }
+
+    // ====== Refresh 토큰 (추후 확장용) ======
+    suspend fun saveRefreshToken(token: String) {
+        dataStore.edit { prefs -> prefs[REFRESH_TOKEN_KEY] = token }
+    }
+
+    suspend fun getRefreshTokenOnce(): String? {
+        return dataStore.data.map { prefs -> prefs[REFRESH_TOKEN_KEY] }.first()
+    }
+
+    suspend fun clearTokens() {
+        dataStore.edit { prefs -> prefs.clear() }
+    }
+}
+
diff --git a/app/src/main/java/com/texthip/thip/data/manager/UserDataManager.kt b/app/src/main/java/com/texthip/thip/data/manager/UserDataManager.kt
new file mode 100644
index 00000000..11cfd151
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/manager/UserDataManager.kt
@@ -0,0 +1,19 @@
+package com.texthip.thip.data.manager
+
+import javax.inject.Inject
+import javax.inject.Singleton
+
+@Singleton
+class UserDataManager @Inject constructor() {
+    
+    private var cachedUserName: String? = null
+    
+    fun getUserName(): String {
+        return cachedUserName ?: "사용자"
+    }
+    
+    fun cacheUserName(name: String) {
+        cachedUserName = name
+    }
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/auth/request/AuthRequest.kt b/app/src/main/java/com/texthip/thip/data/model/auth/request/AuthRequest.kt
new file mode 100644
index 00000000..927af6ea
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/auth/request/AuthRequest.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.data.model.auth.request
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class AuthRequest(
+    @SerialName("oauth2Id") val oauth2Id: String
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/auth/response/AuthResponse.kt b/app/src/main/java/com/texthip/thip/data/model/auth/response/AuthResponse.kt
new file mode 100644
index 00000000..23d1f64d
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/auth/response/AuthResponse.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.data.model.auth.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class AuthResponse(
+    @SerialName("token") val token: String,
+    @SerialName("isNewUser") val isNewUser: Boolean
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/base/ApiResponseHandler.kt b/app/src/main/java/com/texthip/thip/data/model/base/ApiResponseHandler.kt
new file mode 100644
index 00000000..0da739ad
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/base/ApiResponseHandler.kt
@@ -0,0 +1,19 @@
+package com.texthip.thip.data.model.base
+
+fun <T> BaseResponse<T>.handleBaseResponse(): Result<T?> {
+    return if (isSuccess) {
+        Result.success(this.response)
+    } else {
+        Result.failure(
+            ThipApiFailureException(
+                code = this.code,
+                message = this.message
+            )
+        )
+    }
+}
+
+data class ThipApiFailureException(
+    val code: Int,
+    override val message: String
+) : Throwable()
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/base/BaseResponse.kt b/app/src/main/java/com/texthip/thip/data/model/base/BaseResponse.kt
new file mode 100644
index 00000000..6e6bb8ed
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/base/BaseResponse.kt
@@ -0,0 +1,12 @@
+package com.texthip.thip.data.model.base
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class BaseResponse<T>(
+    @SerialName("isSuccess") val isSuccess: Boolean,
+    @SerialName("code") val code: Int,
+    @SerialName("message") val message: String,
+    @SerialName("data") val response: T? = null,
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/book/request/BookSaveRequest.kt b/app/src/main/java/com/texthip/thip/data/model/book/request/BookSaveRequest.kt
new file mode 100644
index 00000000..52ebb5c3
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/book/request/BookSaveRequest.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.book.request
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class BookSaveRequest(
+    @SerialName("type") val type: Boolean = false
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/book/response/BookDetailResponse.kt b/app/src/main/java/com/texthip/thip/data/model/book/response/BookDetailResponse.kt
new file mode 100644
index 00000000..d93e2ab3
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/book/response/BookDetailResponse.kt
@@ -0,0 +1,17 @@
+package com.texthip.thip.data.model.book.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class BookDetailResponse(
+    @SerialName("title") val title: String = "",
+    @SerialName("imageUrl") val imageUrl: String? = null,
+    @SerialName("authorName") val authorName: String = "",
+    @SerialName("publisher") val publisher: String = "",
+    @SerialName("isbn") val isbn: String = "",
+    @SerialName("description") val description: String = "",
+    @SerialName("recruitingRoomCount") val recruitingRoomCount: Int = 0,
+    @SerialName("readCount") val readCount: Int = 0,
+    @SerialName("isSaved") val isSaved: Boolean = false
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/book/response/BookListResponse.kt b/app/src/main/java/com/texthip/thip/data/model/book/response/BookListResponse.kt
new file mode 100644
index 00000000..3b821b27
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/book/response/BookListResponse.kt
@@ -0,0 +1,22 @@
+package com.texthip.thip.data.model.book.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+
+@Serializable
+data class BookListResponse(
+    @SerialName("bookList") val bookList: List<BookSavedResponse> = emptyList(),
+    @SerialName("nextCursor") val nextCursor: String? = null,
+    @SerialName("isLast") val isLast: Boolean = false
+)
+
+@Serializable
+data class BookSavedResponse(
+    @SerialName("bookId") val bookId: Int = 0,
+    @SerialName("bookTitle") val bookTitle: String = "",
+    @SerialName("authorName") val authorName: String = "",
+    @SerialName("publisher") val publisher: String = "",
+    @SerialName("bookImageUrl") val bookImageUrl: String? = null,
+    @SerialName("isbn") val isbn: String = "",
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/book/response/BookSaveResponse.kt b/app/src/main/java/com/texthip/thip/data/model/book/response/BookSaveResponse.kt
new file mode 100644
index 00000000..29ae456c
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/book/response/BookSaveResponse.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.data.model.book.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class BookSaveResponse(
+    @SerialName("isbn") val isbn: String = "",
+    @SerialName("isSaved") val isSaved: Boolean = false
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/book/response/BookSearchResponse.kt b/app/src/main/java/com/texthip/thip/data/model/book/response/BookSearchResponse.kt
new file mode 100644
index 00000000..ef835215
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/book/response/BookSearchResponse.kt
@@ -0,0 +1,24 @@
+package com.texthip.thip.data.model.book.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class BookSearchResponse(
+    @SerialName("searchResult") val searchResult: List<BookSearchItem> = emptyList(),
+    @SerialName("page") val page: Int = 0,
+    @SerialName("size") val size: Int = 0,
+    @SerialName("totalElements") val totalElements: Int = 0,
+    @SerialName("totalPages") val totalPages: Int = 0,
+    @SerialName("last") val last: Boolean = true,
+    @SerialName("first") val first: Boolean = true
+)
+
+@Serializable
+data class BookSearchItem(
+    @SerialName("title") val title: String = "",
+    @SerialName("imageUrl") val imageUrl: String? = null,
+    @SerialName("authorName") val authorName: String = "",
+    @SerialName("publisher") val publisher: String = "",
+    @SerialName("isbn") val isbn: String = ""
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/book/response/BookUserSaveResponse.kt b/app/src/main/java/com/texthip/thip/data/model/book/response/BookUserSaveResponse.kt
new file mode 100644
index 00000000..061ee805
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/book/response/BookUserSaveResponse.kt
@@ -0,0 +1,22 @@
+package com.texthip.thip.data.model.book.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class BookUserSaveResponse(
+    val bookList: List<BookUserSaveList>,
+    @SerialName("nextCursor") val nextCursor: String? = null,
+    @SerialName("isLast") val isLast: Boolean = false
+)
+
+@Serializable
+data class BookUserSaveList(
+    val bookId: Int,
+    val bookTitle: String,
+    val authorName: String,
+    val publisher: String,
+    val bookImageUrl: String? = null,
+    val isbn: String = "",
+    val isSaved: Boolean = true
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/book/response/MostSearchedBooksResponse.kt b/app/src/main/java/com/texthip/thip/data/model/book/response/MostSearchedBooksResponse.kt
new file mode 100644
index 00000000..cc37ffce
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/book/response/MostSearchedBooksResponse.kt
@@ -0,0 +1,17 @@
+package com.texthip.thip.data.model.book.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class MostSearchedBooksResponse(
+    @SerialName("bookList") val bookList: List<PopularBookItem> = emptyList()
+)
+
+@Serializable
+data class PopularBookItem(
+    @SerialName("rank") val rank: Int = 0,
+    @SerialName("title") val title: String = "",
+    @SerialName("imageUrl") val imageUrl: String? = null,
+    @SerialName("isbn") val isbn: String = ""
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/book/response/RecentSearchResponse.kt b/app/src/main/java/com/texthip/thip/data/model/book/response/RecentSearchResponse.kt
new file mode 100644
index 00000000..f0266204
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/book/response/RecentSearchResponse.kt
@@ -0,0 +1,15 @@
+package com.texthip.thip.data.model.book.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RecentSearchResponse(
+    @SerialName("recentSearchList") val recentSearchList: List<RecentSearchItem> = emptyList()
+)
+
+@Serializable
+data class RecentSearchItem(
+    @SerialName("recentSearchId") val recentSearchId: Int = 0,
+    @SerialName("searchTerm") val searchTerm: String = ""
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/book/response/RecruitingRoomsResponse.kt b/app/src/main/java/com/texthip/thip/data/model/book/response/RecruitingRoomsResponse.kt
new file mode 100644
index 00000000..02480466
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/book/response/RecruitingRoomsResponse.kt
@@ -0,0 +1,23 @@
+package com.texthip.thip.data.model.book.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RecruitingRoomsResponse(
+    @SerialName("recruitingRoomList") val recruitingRoomList: List<RecruitingRoomItem> = emptyList(),
+    @SerialName("totalRoomCount") val totalRoomCount: Int = 0,
+    @SerialName("nextCursor") val nextCursor: String? = null,
+    @SerialName("isLast") val isLast: Boolean = true
+)
+
+@Serializable
+data class RecruitingRoomItem(
+    @SerialName("roomId") val roomId: Int = 0,
+    @SerialName("bookImageUrl") val bookImageUrl: String? = null,
+    @SerialName("roomName") val roomName: String = "",
+    @SerialName("memberCount") val memberCount: Int = 0,
+    @SerialName("recruitCount") val recruitCount: Int = 0,
+    @SerialName("deadlineEndDate") val deadlineEndDate: String = "",
+    @SerialName("isPublic") val isPublic: Boolean = true
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/comments/request/CommentsCreateRequest.kt b/app/src/main/java/com/texthip/thip/data/model/comments/request/CommentsCreateRequest.kt
new file mode 100644
index 00000000..da8d8438
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/comments/request/CommentsCreateRequest.kt
@@ -0,0 +1,11 @@
+package com.texthip.thip.data.model.comments.request
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class CommentsCreateRequest(
+    val content: String,
+    val isReplyRequest: Boolean,
+    val parentId: Int? = null,
+    val postType: String,
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/comments/request/CommentsLikesRequest.kt b/app/src/main/java/com/texthip/thip/data/model/comments/request/CommentsLikesRequest.kt
new file mode 100644
index 00000000..ec0867b6
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/comments/request/CommentsLikesRequest.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.data.model.comments.request
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class CommentsLikesRequest(
+    val type: Boolean
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/comments/response/CommentsCreateResponse.kt b/app/src/main/java/com/texthip/thip/data/model/comments/response/CommentsCreateResponse.kt
new file mode 100644
index 00000000..fdaaec4f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/comments/response/CommentsCreateResponse.kt
@@ -0,0 +1,20 @@
+package com.texthip.thip.data.model.comments.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class CommentsCreateResponse(
+    val commentId: Int?,
+    val creatorId: Long?,
+    val creatorProfileImageUrl: String?,
+    val creatorNickname: String?,
+    val aliasName: String?,
+    val aliasColor: String?,
+    val postDate: String?,
+    val content: String?,
+    val likeCount: Int,
+    val isDeleted: Boolean,
+    val isWriter: Boolean,
+    val isLike: Boolean,
+    val replyList: List<ReplyList>,
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/comments/response/CommentsDeleteResponse.kt b/app/src/main/java/com/texthip/thip/data/model/comments/response/CommentsDeleteResponse.kt
new file mode 100644
index 00000000..21d8cfc9
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/comments/response/CommentsDeleteResponse.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.data.model.comments.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class CommentsDeleteResponse(
+    val postId: Long
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/comments/response/CommentsLikesResponse.kt b/app/src/main/java/com/texthip/thip/data/model/comments/response/CommentsLikesResponse.kt
new file mode 100644
index 00000000..4f420f90
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/comments/response/CommentsLikesResponse.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.comments.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class CommentsLikesResponse(
+    val commentId: Int,
+    val isLiked: Boolean,
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/comments/response/CommentsResponse.kt b/app/src/main/java/com/texthip/thip/data/model/comments/response/CommentsResponse.kt
new file mode 100644
index 00000000..73a70059
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/comments/response/CommentsResponse.kt
@@ -0,0 +1,43 @@
+package com.texthip.thip.data.model.comments.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class CommentsResponse(
+    val commentList: List<CommentList>,
+    val nextCursor: String?,
+    val isLast: Boolean,
+)
+
+@Serializable
+data class CommentList(
+    val commentId: Int?,
+    val creatorId: Long?,
+    val creatorProfileImageUrl: String?,
+    val creatorNickname: String?,
+    val aliasName: String?,
+    val aliasColor: String?,
+    val postDate: String?,
+    val content: String?,
+    val likeCount: Int,
+    val isDeleted: Boolean,
+    val isWriter: Boolean,
+    val isLike: Boolean,
+    val replyList: List<ReplyList>,
+)
+
+@Serializable
+data class ReplyList(
+    val commentId: Int,
+    val parentCommentCreatorNickname: String,
+    val creatorId: Long,
+    val creatorProfileImageUrl: String,
+    val creatorNickname: String,
+    val aliasName: String,
+    val aliasColor: String,
+    val postDate: String,
+    val content: String,
+    val likeCount: Int,
+    val isLike: Boolean,
+    val isWriter: Boolean,
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/request/CreateFeedRequest.kt b/app/src/main/java/com/texthip/thip/data/model/feed/request/CreateFeedRequest.kt
new file mode 100644
index 00000000..6b2a66ca
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/request/CreateFeedRequest.kt
@@ -0,0 +1,18 @@
+package com.texthip.thip.data.model.feed.request
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class CreateFeedRequest(
+    @SerialName("isbn")
+    val isbn: String,
+    @SerialName("contentBody")
+    val contentBody: String,
+    @SerialName("isPublic")
+    val isPublic: Boolean,
+    @SerialName("tagList")
+    val tagList: List<String> = emptyList(),
+    @SerialName("imageUrls")
+    val imageUrls: List<String> = emptyList()
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/request/FeedLikeRequest.kt b/app/src/main/java/com/texthip/thip/data/model/feed/request/FeedLikeRequest.kt
new file mode 100644
index 00000000..d3fb5c11
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/request/FeedLikeRequest.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.feed.request
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class FeedLikeRequest(
+    @SerialName("type") val type: Boolean
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/request/FeedSaveRequest.kt b/app/src/main/java/com/texthip/thip/data/model/feed/request/FeedSaveRequest.kt
new file mode 100644
index 00000000..e795813b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/request/FeedSaveRequest.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.feed.request
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class FeedSaveRequest(
+    @SerialName("type") val type: Boolean
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/request/PresignedUrlRequest.kt b/app/src/main/java/com/texthip/thip/data/model/feed/request/PresignedUrlRequest.kt
new file mode 100644
index 00000000..f10143ba
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/request/PresignedUrlRequest.kt
@@ -0,0 +1,14 @@
+package com.texthip.thip.data.model.feed.request
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class ImageMetadata(
+    @SerialName("extension")
+    val extension: String,
+    @SerialName("size")
+    val size: Long
+)
+
+typealias PresignedUrlRequest = List<ImageMetadata>
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/request/UpdateFeedRequest.kt b/app/src/main/java/com/texthip/thip/data/model/feed/request/UpdateFeedRequest.kt
new file mode 100644
index 00000000..ac9dc2da
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/request/UpdateFeedRequest.kt
@@ -0,0 +1,12 @@
+package com.texthip.thip.data.model.feed.request
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class UpdateFeedRequest(
+    @SerialName("contentBody") val contentBody: String? = null,
+    @SerialName("isPublic") val isPublic: Boolean? = null,
+    @SerialName("tagList") val tagList: List<String>? = null,
+    @SerialName("remainImageUrls") val remainImageUrls: List<String>? = null
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/response/AllFeedResponse.kt b/app/src/main/java/com/texthip/thip/data/model/feed/response/AllFeedResponse.kt
new file mode 100644
index 00000000..31025630
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/response/AllFeedResponse.kt
@@ -0,0 +1,33 @@
+package com.texthip.thip.data.model.feed.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+
+@Serializable
+data class AllFeedResponse(
+    @SerialName("feedList") val feedList: List<AllFeedItem>,
+    @SerialName("nextCursor") val nextCursor: String?,
+    @SerialName("isLast") val isLast: Boolean
+)
+
+@Serializable
+data class AllFeedItem(
+    @SerialName("feedId") val feedId: Int,
+    @SerialName("creatorId") val creatorId: Long,
+    @SerialName("creatorNickname") val creatorNickname: String,
+    @SerialName("creatorProfileImageUrl") val creatorProfileImageUrl: String?,
+    @SerialName("aliasName") val aliasName: String,
+    @SerialName("aliasColor") val aliasColor: String,
+    @SerialName("postDate") val postDate: String,
+    @SerialName("isbn") val isbn: String,
+    @SerialName("bookTitle") val bookTitle: String,
+    @SerialName("bookAuthor") val bookAuthor: String,
+    @SerialName("contentBody") val contentBody: String,
+    @SerialName("contentUrls") val contentUrls: List<String>,
+    @SerialName("likeCount") val likeCount: Int,
+    @SerialName("commentCount") val commentCount: Int,
+    @SerialName("isSaved") val isSaved: Boolean,
+    @SerialName("isLiked") val isLiked: Boolean,
+    @SerialName("isWriter") val isWriter: Boolean
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/response/CreateFeedResponse.kt b/app/src/main/java/com/texthip/thip/data/model/feed/response/CreateFeedResponse.kt
new file mode 100644
index 00000000..467ee374
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/response/CreateFeedResponse.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.data.model.feed.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class CreateFeedResponse(
+    @SerialName("feedId")
+    val feedId: Int
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedDetailResponse.kt b/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedDetailResponse.kt
new file mode 100644
index 00000000..886d2238
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedDetailResponse.kt
@@ -0,0 +1,28 @@
+package com.texthip.thip.data.model.feed.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class FeedDetailResponse(
+    @SerialName("feedId") val feedId: Int,
+    @SerialName("creatorId") val creatorId: Long,
+    @SerialName("creatorNickname") val creatorNickname: String,
+    @SerialName("creatorProfileImageUrl") val creatorProfileImageUrl: String?,
+    @SerialName("aliasName") val aliasName: String,
+    @SerialName("aliasColor") val aliasColor: String,
+    @SerialName("postDate") val postDate: String,
+    @SerialName("bookTitle") val bookTitle: String,
+    @SerialName("isbn") val isbn: String,
+    @SerialName("bookAuthor") val bookAuthor: String,
+    @SerialName("bookImageUrl") val bookImageUrl: String? = null,  // 책 이미지 URL 추가
+    @SerialName("contentBody") val contentBody: String,
+    @SerialName("contentUrls") val contentUrls: List<String>,
+    @SerialName("likeCount") val likeCount: Int,
+    @SerialName("commentCount") val commentCount: Int,
+    @SerialName("isSaved") val isSaved: Boolean,
+    @SerialName("isLiked") val isLiked: Boolean,
+    @SerialName("isWriter") val isWriter: Boolean,
+    @SerialName("isPublic") val isPublic: Boolean? = null,  // 공개/비공개 설정 추가
+    @SerialName("tagList") val tagList: List<String>
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedLikeResponse.kt b/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedLikeResponse.kt
new file mode 100644
index 00000000..d0ac267e
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedLikeResponse.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.data.model.feed.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class FeedLikeResponse(
+    @SerialName("feedId") val feedId: Long,
+    @SerialName("isLiked") val isLiked: Boolean
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedMineInfoResponse.kt b/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedMineInfoResponse.kt
new file mode 100644
index 00000000..5417e0d5
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedMineInfoResponse.kt
@@ -0,0 +1,17 @@
+package com.texthip.thip.data.model.feed.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class FeedMineInfoResponse(
+    @SerialName("creatorId") val creatorId: Long,
+    @SerialName("profileImageUrl") val profileImageUrl: String?,
+    @SerialName("nickname") val nickname: String,
+    @SerialName("aliasName") val aliasName: String,
+    @SerialName("aliasColor") val aliasColor: String,
+    @SerialName("followerCount") val followerCount: Int,
+    @SerialName("totalFeedCount") val totalFeedCount: Int,
+    @SerialName("isFollowing") val isFollowing: Boolean,
+    @SerialName("latestFollowerProfileImageUrls") val latestFollowerProfileImageUrls: List<String>
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedSaveResponse.kt b/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedSaveResponse.kt
new file mode 100644
index 00000000..64ba310b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedSaveResponse.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.data.model.feed.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class FeedSaveResponse(
+    @SerialName("feedId") val feedId: Long,
+    @SerialName("isSaved") val isSaved: Boolean
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedUsersInfoResponse.kt b/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedUsersInfoResponse.kt
new file mode 100644
index 00000000..a10cde7f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedUsersInfoResponse.kt
@@ -0,0 +1,16 @@
+package com.texthip.thip.data.model.feed.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class FeedUsersInfoResponse(
+    val creatorId: Long,
+    val profileImageUrl: String,
+    val nickname: String,
+    val aliasName: String,
+    val aliasColor: String,
+    val followerCount: Int,
+    val totalFeedCount: Int,
+    val isFollowing: Boolean,
+    val latestFollowerProfileImageUrls: List<String>
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedUsersResponse.kt b/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedUsersResponse.kt
new file mode 100644
index 00000000..5ba8eb19
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedUsersResponse.kt
@@ -0,0 +1,27 @@
+package com.texthip.thip.data.model.feed.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class FeedUsersResponse (
+    val feedList: List<FeedList>,
+    val nextCursor: String? = null,
+    val isLast: Boolean = false,
+)
+
+@Serializable
+data class FeedList(
+    val feedId: Long,
+    val postDate: String,
+    val isbn: String,
+    val bookTitle: String,
+    val bookAuthor: String,
+    val contentBody: String,
+    val contentUrls: List<String>,
+    val likeCount: Int,
+    val commentCount: Int,
+    val isPublic: Boolean,
+    val isSaved: Boolean,
+    val isLiked: Boolean,
+    val isWriter: Boolean,
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedWriteInfoResponse.kt b/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedWriteInfoResponse.kt
new file mode 100644
index 00000000..7b95c45f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/response/FeedWriteInfoResponse.kt
@@ -0,0 +1,18 @@
+package com.texthip.thip.data.model.feed.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class FeedWriteInfoResponse(
+    @SerialName("categoryList")
+    val categoryList: List<FeedCategory>
+)
+
+@Serializable
+data class FeedCategory(
+    @SerialName("category")
+    val category: String,
+    @SerialName("tagList")
+    val tagList: List<String>
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/response/MyFeedResponse.kt b/app/src/main/java/com/texthip/thip/data/model/feed/response/MyFeedResponse.kt
new file mode 100644
index 00000000..03af4f33
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/response/MyFeedResponse.kt
@@ -0,0 +1,29 @@
+package com.texthip.thip.data.model.feed.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+
+@Serializable
+data class MyFeedResponse(
+    @SerialName("feedList") val feedList: List<MyFeedItem>,
+    @SerialName("nextCursor") val nextCursor: String?,
+    @SerialName("isLast") val isLast: Boolean
+)
+
+@Serializable
+data class MyFeedItem(
+    @SerialName("feedId") val feedId: Int,
+    @SerialName("postDate") val postDate: String,
+    @SerialName("isbn") val isbn: String,
+    @SerialName("bookTitle") val bookTitle: String,
+    @SerialName("bookAuthor") val bookAuthor: String,
+    @SerialName("contentBody") val contentBody: String,
+    @SerialName("contentUrls") val contentUrls: List<String>,
+    @SerialName("likeCount") val likeCount: Int,
+    @SerialName("commentCount") val commentCount: Int,
+    @SerialName("isPublic") val isPublic: Boolean,
+    @SerialName("isSaved") val isSaved: Boolean,
+    @SerialName("isLiked") val isLiked: Boolean,
+    @SerialName("isWriter") val isWriter: Boolean
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/response/PresignedUrlResponse.kt b/app/src/main/java/com/texthip/thip/data/model/feed/response/PresignedUrlResponse.kt
new file mode 100644
index 00000000..f69b68e4
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/response/PresignedUrlResponse.kt
@@ -0,0 +1,18 @@
+package com.texthip.thip.data.model.feed.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class PresignedUrlInfo(
+    @SerialName("presignedUrl")
+    val presignedUrl: String,
+    @SerialName("fileUrl")
+    val fileUrl: String
+)
+
+@Serializable
+data class PresignedUrlResponse(
+    @SerialName("presignedUrls")
+    val presignedUrls: List<PresignedUrlInfo>
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/feed/response/RelatedBooksResponse.kt b/app/src/main/java/com/texthip/thip/data/model/feed/response/RelatedBooksResponse.kt
new file mode 100644
index 00000000..d725a953
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/feed/response/RelatedBooksResponse.kt
@@ -0,0 +1,32 @@
+package com.texthip.thip.data.model.feed.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RelatedBooksResponse(
+    @SerialName("feeds") val feeds: List<RelatedFeedItem>,
+    @SerialName("nextCursor") val nextCursor: String?,
+    @SerialName("isLast") val isLast: Boolean
+)
+
+@Serializable
+data class RelatedFeedItem(
+    @SerialName("feedId") val feedId: Int,
+    @SerialName("creatorId") val creatorId: Int,
+    @SerialName("isWriter") val isWriter: Boolean,
+    @SerialName("creatorNickname") val creatorNickname: String,
+    @SerialName("creatorProfileImageUrl") val creatorProfileImageUrl: String?,
+    @SerialName("aliasName") val aliasName: String,
+    @SerialName("aliasColor") val aliasColor: String,
+    @SerialName("postDate") val postDate: String,
+    @SerialName("isbn") val isbn: String,
+    @SerialName("bookTitle") val bookTitle: String,
+    @SerialName("bookAuthor") val bookAuthor: String,
+    @SerialName("contentBody") val contentBody: String,
+    @SerialName("contentUrls") val contentUrls: List<String>,
+    @SerialName("likeCount") val likeCount: Int,
+    @SerialName("commentCount") val commentCount: Int,
+    @SerialName("isSaved") val isSaved: Boolean,
+    @SerialName("isLiked") val isLiked: Boolean
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/request/CreateRoomRequest.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/request/CreateRoomRequest.kt
new file mode 100644
index 00000000..c09b736a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/request/CreateRoomRequest.kt
@@ -0,0 +1,17 @@
+package com.texthip.thip.data.model.rooms.request
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class CreateRoomRequest(
+    @SerialName("isbn") val isbn: String,
+    @SerialName("category") val category: String,
+    @SerialName("roomName") val roomName: String,
+    @SerialName("description") val description: String,
+    @SerialName("progressStartDate") val progressStartDate: String,
+    @SerialName("progressEndDate") val progressEndDate: String,
+    @SerialName("recruitCount") val recruitCount: Int,
+    @SerialName("password") val password: String? = null,
+    @SerialName("isPublic") val isPublic: Boolean
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomJoinRequest.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomJoinRequest.kt
new file mode 100644
index 00000000..f17bd436
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomJoinRequest.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.rooms.request
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomJoinRequest(
+    @SerialName("type") val type: String
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomSecretRoomRequest.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomSecretRoomRequest.kt
new file mode 100644
index 00000000..cd2dfbb4
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomSecretRoomRequest.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.data.model.rooms.request
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+
+@Serializable
+data class RoomSecretRoomRequest(
+    @SerialName("password") val password: String
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsCreateDailyGreetingRequest.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsCreateDailyGreetingRequest.kt
new file mode 100644
index 00000000..1e829ae5
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsCreateDailyGreetingRequest.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.data.model.rooms.request
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsCreateDailyGreetingRequest(
+    val content: String,
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsCreateVoteRequest.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsCreateVoteRequest.kt
new file mode 100644
index 00000000..043e09aa
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsCreateVoteRequest.kt
@@ -0,0 +1,16 @@
+package com.texthip.thip.data.model.rooms.request
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsCreateVoteRequest(
+    val page: Int,
+    val isOverview: Boolean,
+    val content: String,
+    val voteItemList: List<VoteItem>
+)
+
+@Serializable
+data class VoteItem(
+    val itemName: String
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsPatchRecordRequest.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsPatchRecordRequest.kt
new file mode 100644
index 00000000..6056cf59
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsPatchRecordRequest.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.data.model.rooms.request
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsPatchRecordRequest(
+    val content: String
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsPatchVoteRequest.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsPatchVoteRequest.kt
new file mode 100644
index 00000000..b0abe055
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsPatchVoteRequest.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.data.model.rooms.request
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsPatchVoteRequest(
+    val content: String,
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsPostsLikesRequest.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsPostsLikesRequest.kt
new file mode 100644
index 00000000..6c3240c2
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsPostsLikesRequest.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.rooms.request
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsPostsLikesRequest(
+    val type: Boolean,
+    val roomPostType: String,
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsPostsRequestParams.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsPostsRequestParams.kt
new file mode 100644
index 00000000..6b98cf0e
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsPostsRequestParams.kt
@@ -0,0 +1,14 @@
+package com.texthip.thip.data.model.rooms.request
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsPostsRequestParams(
+    val type: String,
+    val sort: String? = null,
+    val pageStart: Int? = null,
+    val pageEnd: Int? = null,
+    val isOverview: Boolean? = null,
+    val isPageFilter: Boolean? = null,
+    val cursor: String? = null
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsRecordRequest.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsRecordRequest.kt
new file mode 100644
index 00000000..649fcf96
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsRecordRequest.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.data.model.rooms.request
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsRecordRequest(
+    val page: Int,
+    val isOverview: Boolean = false,
+    val content: String,
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsVoteRequest.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsVoteRequest.kt
new file mode 100644
index 00000000..fa8c3823
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/request/RoomsVoteRequest.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.rooms.request
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsVoteRequest(
+    val voteItemId: Int,
+    val type: Boolean
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/CreateRoomResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/CreateRoomResponse.kt
new file mode 100644
index 00000000..5877eac0
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/CreateRoomResponse.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class CreateRoomResponse(
+    @SerialName("roomId") val roomId: Int
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/JoinedRoomListResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/JoinedRoomListResponse.kt
new file mode 100644
index 00000000..84d6615f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/JoinedRoomListResponse.kt
@@ -0,0 +1,23 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+
+@Serializable
+data class JoinedRoomListResponse(
+    @SerialName("roomList") val roomList: List<JoinedRoomResponse>,
+    @SerialName("nickname") val nickname: String,
+    @SerialName("nextCursor") val nextCursor: String? = null,
+    @SerialName("isLast") val isLast: Boolean
+)
+
+@Serializable
+data class JoinedRoomResponse(
+    @SerialName("roomId") val roomId: Int,
+    @SerialName("bookImageUrl") val bookImageUrl: String?,
+    @SerialName("roomTitle") val roomTitle: String,
+    @SerialName("memberCount") val memberCount: Int,
+    @SerialName("userPercentage") val userPercentage: Int
+)
+
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/MyRoomListResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/MyRoomListResponse.kt
new file mode 100644
index 00000000..7ca80e32
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/MyRoomListResponse.kt
@@ -0,0 +1,23 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class MyRoomListResponse(
+    @SerialName("roomList") val roomList: List<MyRoomResponse>,
+    @SerialName("nextCursor") val nextCursor: String?,
+    @SerialName("isLast") val isLast: Boolean
+)
+
+@Serializable
+data class MyRoomResponse(
+    @SerialName("roomId") val roomId: Int,
+    @SerialName("bookImageUrl") val bookImageUrl: String,
+    @SerialName("roomName") val roomName: String,
+    @SerialName("recruitCount") val recruitCount: Int,
+    @SerialName("memberCount") val memberCount: Int,
+    @SerialName("endDate") val endDate: String,
+    @SerialName("type") val type: String,
+    @SerialName("isPublic") val isPublic: Boolean
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomCloseResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomCloseResponse.kt
new file mode 100644
index 00000000..35aa9ec3
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomCloseResponse.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomCloseResponse(
+    @SerialName("roomId") val roomId: Int
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomJoinResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomJoinResponse.kt
new file mode 100644
index 00000000..1345eb9d
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomJoinResponse.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomJoinResponse(
+    @SerialName("roomId") val roomId: Int,
+    @SerialName("type") val type: String
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomMainResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomMainResponse.kt
new file mode 100644
index 00000000..a49b4d53
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomMainResponse.kt
@@ -0,0 +1,21 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+
+@Serializable
+data class RoomMainResponse(
+    @SerialName("roomId") val roomId: Int,
+    @SerialName("bookImageUrl") val bookImageUrl: String?,
+    @SerialName("roomName") val roomName: String,
+    @SerialName("recruitCount") val recruitCount: Int,
+    @SerialName("memberCount") val memberCount: Int,
+    @SerialName("deadlineDate") val deadlineDate: String
+)
+
+@Serializable
+data class RoomMainList(
+    @SerialName("deadlineRoomList") val deadlineRoomList: List<RoomMainResponse> = emptyList(),
+    @SerialName("popularRoomList") val popularRoomList: List<RoomMainResponse> = emptyList()
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomRecruitingResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomRecruitingResponse.kt
new file mode 100644
index 00000000..d34b247e
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomRecruitingResponse.kt
@@ -0,0 +1,39 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomRecruitingResponse(
+    @SerialName("isHost") val isHost: Boolean,
+    @SerialName("isJoining") val isJoining: Boolean,
+    @SerialName("roomId") val roomId: Int,
+    @SerialName("roomName") val roomName: String,
+    @SerialName("roomImageUrl") val roomImageUrl: String?,
+    @SerialName("isPublic") val isPublic: Boolean,
+    @SerialName("progressStartDate") val progressStartDate: String,
+    @SerialName("progressEndDate") val progressEndDate: String,
+    @SerialName("recruitEndDate") val recruitEndDate: String,
+    @SerialName("category") val category: String,
+    @SerialName("categoryColor") val categoryColor: String,
+    @SerialName("roomDescription") val roomDescription: String,
+    @SerialName("memberCount") val memberCount: Int,
+    @SerialName("recruitCount") val recruitCount: Int,
+    @SerialName("isbn") val isbn: String,
+    @SerialName("bookImageUrl") val bookImageUrl: String,
+    @SerialName("bookTitle") val bookTitle: String,
+    @SerialName("authorName") val authorName: String,
+    @SerialName("bookDescription") val bookDescription: String,
+    @SerialName("publisher") val publisher: String,
+    @SerialName("recommendRooms") val recommendRooms: List<RecommendRoomResponse>
+)
+
+@Serializable
+data class RecommendRoomResponse(
+    @SerialName("roomId") val roomId: Int,
+    @SerialName("bookImageUrl") val bookImageUrl: String?,
+    @SerialName("roomName") val roomName: String,
+    @SerialName("memberCount") val memberCount: Int,
+    @SerialName("recruitCount") val recruitCount: Int,
+    @SerialName("recruitEndDate") val recruitEndDate: String
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomSecretRoomResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomSecretRoomResponse.kt
new file mode 100644
index 00000000..b8c8340a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomSecretRoomResponse.kt
@@ -0,0 +1,11 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+
+@Serializable
+data class RoomSecretRoomResponse(
+    @SerialName("matched") val matched: Boolean = false,
+    @SerialName("roomId") val roomId: Int = 0
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsBookPageResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsBookPageResponse.kt
new file mode 100644
index 00000000..2ed41c16
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsBookPageResponse.kt
@@ -0,0 +1,11 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsBookPageResponse(
+    val totalBookPage: Int,
+    val recentBookPage: Int,
+    val isOverviewPossible: Boolean,
+    val roomId: Int,
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsCreateDailyGreetingResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsCreateDailyGreetingResponse.kt
new file mode 100644
index 00000000..24bbba69
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsCreateDailyGreetingResponse.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsCreateDailyGreetingResponse(
+    val attendanceCheckId: Long,
+    val roomId: Long,
+    val isFirstWrite: Boolean,
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsCreateVoteResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsCreateVoteResponse.kt
new file mode 100644
index 00000000..c68c122b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsCreateVoteResponse.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsCreateVoteResponse(
+    val voteId: Int,
+    val roomId: Int
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsDailyGreetingResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsDailyGreetingResponse.kt
new file mode 100644
index 00000000..ba687abe
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsDailyGreetingResponse.kt
@@ -0,0 +1,22 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsDailyGreetingResponse(
+    val todayCommentList: List<TodayCommentList>,
+    val nextCursor: String?,
+    val isLast: Boolean
+)
+
+@Serializable
+data class TodayCommentList(
+    val attendanceCheckId: Int,
+    val creatorId: Int,
+    val creatorNickname: String,
+    val creatorProfileImageUrl: String,
+    val todayComment: String,
+    val postDate: String,
+    val date: String,
+    val isWriter: Boolean,
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsDeleteDailyGreetingResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsDeleteDailyGreetingResponse.kt
new file mode 100644
index 00000000..0eb5a2ba
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsDeleteDailyGreetingResponse.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsDeleteDailyGreetingResponse (
+    val roomId: Int,
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsDeleteRecordResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsDeleteRecordResponse.kt
new file mode 100644
index 00000000..66b46cd0
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsDeleteRecordResponse.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsDeleteRecordResponse(
+    val roomId: Int,
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsDeleteVoteResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsDeleteVoteResponse.kt
new file mode 100644
index 00000000..53f21581
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsDeleteVoteResponse.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsDeleteVoteResponse(
+    val roomId: Int
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsPatchRecordResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsPatchRecordResponse.kt
new file mode 100644
index 00000000..70db8fe1
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsPatchRecordResponse.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsPatchRecordResponse(
+    val roomId: Int
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsPatchVoteResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsPatchVoteResponse.kt
new file mode 100644
index 00000000..09c46d8e
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsPatchVoteResponse.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsPatchVoteResponse(
+    val roomId: Int,
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsPlayingResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsPlayingResponse.kt
new file mode 100644
index 00000000..1931e0be
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsPlayingResponse.kt
@@ -0,0 +1,38 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsPlayingResponse(
+    val isHost: Boolean,
+    val roomId: Int,
+    val roomName: String,
+    val roomImageUrl: String,
+    val isPublic: Boolean,
+    val progressStartDate: String,
+    val progressEndDate: String,
+    val category: String,
+    val categoryColor: String,
+    val roomDescription: String,
+    val memberCount: Int,
+    val recruitCount: Int,
+    val isbn: String,
+    val bookTitle: String,
+    val authorName: String,
+    val currentPage: Int,
+    val userPercentage: Int,
+    val currentVotes: List<CurrentVote>
+)
+
+@Serializable
+data class CurrentVote(
+    val content: String,
+    val page: Int,
+    val isOverview: Boolean,
+    val voteItems: List<VoteItem>
+)
+
+@Serializable
+data class VoteItem(
+    val itemName: String
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsPostsLikesResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsPostsLikesResponse.kt
new file mode 100644
index 00000000..be694d64
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsPostsLikesResponse.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsPostsLikesResponse(
+    val postId: Int,
+    val isLiked: Boolean,
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsPostsResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsPostsResponse.kt
new file mode 100644
index 00000000..226062f3
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsPostsResponse.kt
@@ -0,0 +1,40 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsPostsResponse(
+    val postList: List<PostList>,
+    val roomId: Int,
+    val isbn: String,
+    val isOverviewEnabled: Boolean,
+    val nextCursor: String?,
+    val isLast: Boolean,
+)
+
+@Serializable
+data class PostList(
+    val postId: Int,
+    val postDate: String,
+    val postType: String,
+    val page: Int,
+    val userId: Long,
+    val nickName: String,
+    val profileImageUrl: String?,
+    val content: String,
+    val likeCount: Int,
+    val commentCount: Int,
+    val isOverview: Boolean,
+    val isLiked: Boolean,
+    val isWriter: Boolean,
+    val isLocked: Boolean,
+    val voteItems: List<VoteItems>,
+)
+
+@Serializable
+data class VoteItems(
+    val voteItemId: Int,
+    val itemName: String,
+    val count: Int,
+    val isVoted: Boolean,
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsRecordResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsRecordResponse.kt
new file mode 100644
index 00000000..003c1e71
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsRecordResponse.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsRecordResponse(
+    val recordId: Int,
+    val roomId: Int,
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsRecordsPinResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsRecordsPinResponse.kt
new file mode 100644
index 00000000..14b51994
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsRecordsPinResponse.kt
@@ -0,0 +1,11 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsRecordsPinResponse(
+    val bookTitle: String,
+    val authorName: String,
+    val bookImageUrl: String,
+    val isbn: String,
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsSearchResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsSearchResponse.kt
new file mode 100644
index 00000000..b869356b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsSearchResponse.kt
@@ -0,0 +1,22 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsSearchResponse(
+    @SerialName("roomList") val roomList: List<SearchRoomItem> = emptyList(),
+    @SerialName("nextCursor") val nextCursor: String? = null,
+    @SerialName("isLast") val isLast: Boolean = true
+)
+
+@Serializable
+data class SearchRoomItem(
+    @SerialName("roomId") val roomId: Int = 0,
+    @SerialName("bookImageUrl") val bookImageUrl: String? = null,
+    @SerialName("roomName") val roomName: String = "",
+    @SerialName("memberCount") val memberCount: Int = 0,
+    @SerialName("recruitCount") val recruitCount: Int = 0,
+    @SerialName("deadlineDate") val deadlineDate: String = "",
+    @SerialName("isPublic") val isPublic: Boolean = true
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsUsersResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsUsersResponse.kt
new file mode 100644
index 00000000..0c24c461
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsUsersResponse.kt
@@ -0,0 +1,18 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsUsersResponse(
+    val userList: List<UserList>
+)
+
+@Serializable
+data class UserList(
+    val userId: Long,
+    val nickname: String,
+    val imageUrl: String,
+    val aliasColor: String,
+    val aliasName: String,
+    val followerCount: Int,
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsVoteResponse.kt b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsVoteResponse.kt
new file mode 100644
index 00000000..1d90a17f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/rooms/response/RoomsVoteResponse.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.data.model.rooms.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class RoomsVoteResponse(
+    val voteItems: List<VoteItems>,
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/users/request/FollowRequest.kt b/app/src/main/java/com/texthip/thip/data/model/users/request/FollowRequest.kt
new file mode 100644
index 00000000..7b1c9bda
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/users/request/FollowRequest.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.data.model.users.request
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class FollowRequest(
+    val type: Boolean
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/users/request/NicknameRequest.kt b/app/src/main/java/com/texthip/thip/data/model/users/request/NicknameRequest.kt
new file mode 100644
index 00000000..b0ad1b79
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/users/request/NicknameRequest.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.data.model.users.request
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class NicknameRequest(
+    val nickname: String
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/users/request/ProfileUpdateRequest.kt b/app/src/main/java/com/texthip/thip/data/model/users/request/ProfileUpdateRequest.kt
new file mode 100644
index 00000000..28f62012
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/users/request/ProfileUpdateRequest.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.users.request
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class ProfileUpdateRequest(
+    val nickname: String?,
+    val aliasName: String
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/users/request/SignupRequest.kt b/app/src/main/java/com/texthip/thip/data/model/users/request/SignupRequest.kt
new file mode 100644
index 00000000..934acab0
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/users/request/SignupRequest.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.users.request
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class SignupRequest(
+    val nickname: String,
+    val aliasName: String
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/users/response/AliasChoiceResponse.kt b/app/src/main/java/com/texthip/thip/data/model/users/response/AliasChoiceResponse.kt
new file mode 100644
index 00000000..1529507b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/users/response/AliasChoiceResponse.kt
@@ -0,0 +1,17 @@
+package com.texthip.thip.data.model.users.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class AliasChoiceResponse(
+    @SerialName("aliasChoices") val aliasChoices: List<AliasChoice>
+)
+
+@Serializable
+data class AliasChoice(
+    @SerialName("aliasName") val aliasName: String,
+    @SerialName("categoryName") val categoryName: String,
+    @SerialName("imageUrl") val imageUrl: String,
+    @SerialName("aliasColor") val aliasColor: String
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/users/response/FollowResponse.kt b/app/src/main/java/com/texthip/thip/data/model/users/response/FollowResponse.kt
new file mode 100644
index 00000000..51dfea5c
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/users/response/FollowResponse.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.users.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class FollowResponse(
+    @SerialName("isFollowing") val isFollowing: Boolean
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/users/response/MyFollowingsResponse.kt b/app/src/main/java/com/texthip/thip/data/model/users/response/MyFollowingsResponse.kt
new file mode 100644
index 00000000..b16a183a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/users/response/MyFollowingsResponse.kt
@@ -0,0 +1,22 @@
+package com.texthip.thip.data.model.users.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class MyFollowingsResponse(
+    @SerialName("followings") val followings: List<FollowingList>,
+    @SerialName("totalFollowingCount") val totalFollowingCount: Int,
+    @SerialName("nextCursor") val nextCursor: String?,
+    @SerialName("isLast") val isLast: Boolean
+)
+
+@Serializable
+data class FollowingList(
+    @SerialName("userId") val userId: Long,
+    @SerialName("nickname") val nickname: String,
+    @SerialName("profileImageUrl") val profileImageUrl: String?,
+    @SerialName("aliasName") val aliasName: String,
+    @SerialName("aliasColor") val aliasColor: String,
+    @SerialName("isFollowing") val isFollowing: Boolean
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/users/response/MyPageInfoResponse.kt b/app/src/main/java/com/texthip/thip/data/model/users/response/MyPageInfoResponse.kt
new file mode 100644
index 00000000..51acc39f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/users/response/MyPageInfoResponse.kt
@@ -0,0 +1,12 @@
+package com.texthip.thip.data.model.users.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class MyPageInfoResponse(
+    @SerialName("profileImageUrl") val profileImageUrl: String?,
+    @SerialName("nickname") val nickname: String,
+    @SerialName("aliasName") val aliasName: String,
+    @SerialName("aliasColor") val aliasColor: String
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/users/response/NicknameResponse.kt b/app/src/main/java/com/texthip/thip/data/model/users/response/NicknameResponse.kt
new file mode 100644
index 00000000..3dfab011
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/users/response/NicknameResponse.kt
@@ -0,0 +1,9 @@
+package com.texthip.thip.data.model.users.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class NicknameResponse(
+    @SerialName("isVerified") val isVerified: Boolean
+)
diff --git a/app/src/main/java/com/texthip/thip/data/model/users/response/OthersFollowersResponse.kt b/app/src/main/java/com/texthip/thip/data/model/users/response/OthersFollowersResponse.kt
new file mode 100644
index 00000000..502b9acc
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/users/response/OthersFollowersResponse.kt
@@ -0,0 +1,23 @@
+package com.texthip.thip.data.model.users.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class OthersFollowersResponse(
+  @SerialName("followers") val followers: List<FollowerList>,
+  @SerialName("totalFollowerCount") val totalFollowerCount: Int,
+  @SerialName("nextCursor") val nextCursor: String?,
+  @SerialName("isLast") val isLast: Boolean
+)
+
+@Serializable
+data class FollowerList(
+  @SerialName("userId") val userId: Long,
+  @SerialName("nickname") val nickname: String,
+  @SerialName("profileImageUrl") val profileImageUrl: String?,
+  @SerialName("aliasName") val aliasName: String,
+  @SerialName("aliasColor") val aliasColor: String,
+  @SerialName("followerCount") val followerCount: Int,
+  @SerialName("isMyself") val isMyself: Boolean
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/users/response/SignupResponse.kt b/app/src/main/java/com/texthip/thip/data/model/users/response/SignupResponse.kt
new file mode 100644
index 00000000..ac7ff41c
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/users/response/SignupResponse.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.data.model.users.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class SignupResponse(
+    @SerialName("accessToken") val accessToken: String,
+    @SerialName("userId") val userId: Long
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/users/response/UserSearchResponse.kt b/app/src/main/java/com/texthip/thip/data/model/users/response/UserSearchResponse.kt
new file mode 100644
index 00000000..0558eaff
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/users/response/UserSearchResponse.kt
@@ -0,0 +1,18 @@
+package com.texthip.thip.data.model.users.response
+
+import kotlinx.serialization.Serializable
+import kotlinx.serialization.SerialName
+
+@Serializable
+data class UserSearchResponse(
+    val userList: List<UserItem>
+)
+@Serializable
+data class UserItem(
+    @SerialName("userId") val userId: Int,
+    @SerialName("nickname") val nickname: String,
+    @SerialName("profileImageUrl") val profileImageUrl: String?,
+    @SerialName("aliasName") val aliasName: String,
+    @SerialName("aliasColor") val aliasColor: String,
+    @SerialName("followerCount") val followerCount: Int
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/model/users/response/UsersMyFollowingsRecentFeedsResponse.kt b/app/src/main/java/com/texthip/thip/data/model/users/response/UsersMyFollowingsRecentFeedsResponse.kt
new file mode 100644
index 00000000..7a04925f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/model/users/response/UsersMyFollowingsRecentFeedsResponse.kt
@@ -0,0 +1,15 @@
+package com.texthip.thip.data.model.users.response
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class UsersMyFollowingsRecentFeedsResponse(
+    val myFollowingUsers: List<RecentWriterList>
+)
+
+@Serializable
+data class RecentWriterList(
+    val userId: Long,
+    val nickname: String,
+    val profileImageUrl: String
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/provider/StringResourceProvider.kt b/app/src/main/java/com/texthip/thip/data/provider/StringResourceProvider.kt
new file mode 100644
index 00000000..c6114fc4
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/provider/StringResourceProvider.kt
@@ -0,0 +1,21 @@
+package com.texthip.thip.data.provider
+
+import android.content.Context
+import androidx.annotation.StringRes
+import dagger.hilt.android.qualifiers.ApplicationContext
+import javax.inject.Inject
+import javax.inject.Singleton
+
+@Singleton
+class StringResourceProvider @Inject constructor(
+    @param:ApplicationContext private val context: Context
+) {
+    
+    fun getString(@StringRes resId: Int): String {
+        return context.getString(resId)
+    }
+    
+    fun getString(@StringRes resId: Int, vararg formatArgs: Any): String {
+        return context.getString(resId, *formatArgs)
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/repository/AuthRepository.kt b/app/src/main/java/com/texthip/thip/data/repository/AuthRepository.kt
new file mode 100644
index 00000000..ff69d8f5
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/repository/AuthRepository.kt
@@ -0,0 +1,91 @@
+package com.texthip.thip.data.repository
+
+import android.content.Context
+import com.kakao.sdk.user.UserApiClient
+import com.texthip.thip.data.model.auth.request.AuthRequest
+import com.texthip.thip.data.model.auth.response.AuthResponse
+import com.texthip.thip.data.model.base.handleBaseResponse
+import com.texthip.thip.data.service.AuthService
+import kotlinx.coroutines.CancellableContinuation
+import kotlinx.coroutines.suspendCancellableCoroutine
+import kotlinx.serialization.json.Json
+import kotlinx.serialization.json.jsonObject
+import kotlinx.serialization.json.jsonPrimitive
+import java.util.Base64
+import javax.inject.Inject
+import javax.inject.Singleton
+import kotlin.coroutines.resume
+import kotlin.coroutines.resumeWithException
+
+@Singleton
+class AuthRepository @Inject constructor(
+    private val authService: AuthService
+) {
+
+    suspend fun loginWithKakao(context: Context): Result<AuthResponse?> {
+        return runCatching {
+            //카카오SDK를 통해 사용자 고유 ID 가져옴
+            val kakaoUserId = getKakaoUserId(context)
+
+            //신규/기존 유저인지 확인 요청
+             val request = AuthRequest(oauth2Id = "kakao_$kakaoUserId")
+            authService.checkNewUser(request)
+                .handleBaseResponse()
+                .getOrThrow()
+        }
+    }
+    suspend fun loginWithGoogle(idToken: String): Result<AuthResponse?> {
+        return runCatching {
+            val payload = idToken.split('.')[1]//ID 토큰을 .기준 분리
+            val decodedJson = String(Base64.getUrlDecoder().decode(payload))//디코딩 해서 JSON 문자열 반환
+
+            val jsonObject = Json.parseToJsonElement(decodedJson).jsonObject
+            val googleSubId = jsonObject["sub"]?.jsonPrimitive?.content ?: throw IllegalStateException("구글 userID (sub)값이 없습니다.")//sub 값 추출
+
+            //받아온 UID로 신규/기존 유저인지 확인 요청
+            val request = AuthRequest(oauth2Id = "google_$googleSubId")
+            authService.checkNewUser(request)
+                .handleBaseResponse()
+                .getOrThrow()
+        }
+    }
+
+    //카카오 SDK 로그인 수행 -> 유저ID를 반환하는 suspend 메서드
+    private suspend fun getKakaoUserId(context: Context): Long = suspendCancellableCoroutine { continuation ->
+        // 카카오톡 설치 여부에 따라 로그인 방식 결정
+        if (UserApiClient.instance.isKakaoTalkLoginAvailable(context)) {
+            // 카카오톡으로 로그인
+            UserApiClient.instance.loginWithKakaoTalk(context) { token, error ->
+                if (error != null) {
+                    continuation.resumeWithException(error)
+                } else if (token != null) {
+                    // 로그인 성공 시 사용자 정보 요청
+                    fetchUserInfo(continuation)
+                }
+            }
+        } else {
+            // 카카오계정으로 로그인
+            UserApiClient.instance.loginWithKakaoAccount(context) { token, error ->
+                if (error != null) {
+                    continuation.resumeWithException(error)
+                } else if (token != null) {
+                    // 로그인 성공 시 사용자 정보 요청
+                    fetchUserInfo(continuation)
+                }
+            }
+        }
+    }
+
+    //사용자 정보를 가져오는 중복 코드를 별도의 함수로 분리함
+    private fun fetchUserInfo(continuation: CancellableContinuation<Long>) {
+        UserApiClient.instance.me { user, error ->
+            if (error != null) {
+                continuation.resumeWithException(error)
+            } else if (user?.id != null) {
+                continuation.resume(user.id!!)
+            } else {
+                continuation.resumeWithException(IllegalStateException("Kakao User ID is null"))
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/repository/BookRepository.kt b/app/src/main/java/com/texthip/thip/data/repository/BookRepository.kt
new file mode 100644
index 00000000..b4fb7072
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/repository/BookRepository.kt
@@ -0,0 +1,75 @@
+package com.texthip.thip.data.repository
+
+import com.texthip.thip.data.model.base.handleBaseResponse
+import com.texthip.thip.data.model.book.request.BookSaveRequest
+import com.texthip.thip.data.model.book.response.BookDetailResponse
+import com.texthip.thip.data.model.book.response.BookListResponse
+import com.texthip.thip.data.model.book.response.BookSaveResponse
+import com.texthip.thip.data.model.book.response.BookSearchResponse
+import com.texthip.thip.data.model.book.response.BookUserSaveResponse
+import com.texthip.thip.data.model.book.response.MostSearchedBooksResponse
+import com.texthip.thip.data.model.book.response.RecruitingRoomsResponse
+import com.texthip.thip.data.service.BookService
+import javax.inject.Inject
+import javax.inject.Singleton
+
+@Singleton
+class BookRepository @Inject constructor(
+    private val bookService: BookService
+) {
+
+    /** 저장된 책 또는 모임 책 목록 조회 */
+    suspend fun getBooks(type: String, cursor: String? = null): Result<BookListResponse?> = runCatching {
+        bookService.getBooks(type, cursor)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 책 검색 */
+    suspend fun searchBooks(
+        keyword: String,
+        page: Int = 1,
+        isFinalized: Boolean = false
+    ): Result<BookSearchResponse?> = runCatching {
+        bookService.searchBooks(keyword, page, isFinalized)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 인기 책 조회 */
+    suspend fun getMostSearchedBooks(): Result<MostSearchedBooksResponse?> = runCatching {
+        bookService.getMostSearchedBooks()
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 책 상세 조회 */
+    suspend fun getBookDetail(isbn: String): Result<BookDetailResponse?> = runCatching {
+        bookService.getBookDetail(isbn)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 책 저장/저장취소 */
+    suspend fun saveBook(isbn: String, type: Boolean): Result<BookSaveResponse?> = runCatching {
+        bookService.saveBook(isbn, BookSaveRequest(type))
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 모집중인 방 조회 */
+    suspend fun getRecruitingRooms(
+        isbn: String,
+        cursor: String? = null
+    ): Result<RecruitingRoomsResponse?> = runCatching {
+        bookService.getRecruitingRooms(isbn, cursor)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    suspend fun getSavedBooks(cursor: String? = null): Result<BookUserSaveResponse?> = runCatching {
+        bookService.getSavedBooks(cursor)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/repository/CommentsRepository.kt b/app/src/main/java/com/texthip/thip/data/repository/CommentsRepository.kt
new file mode 100644
index 00000000..a7b10c00
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/repository/CommentsRepository.kt
@@ -0,0 +1,59 @@
+package com.texthip.thip.data.repository
+
+import com.texthip.thip.data.model.base.handleBaseResponse
+import com.texthip.thip.data.model.comments.request.CommentsCreateRequest
+import com.texthip.thip.data.model.comments.request.CommentsLikesRequest
+import com.texthip.thip.data.service.CommentsService
+import javax.inject.Inject
+import javax.inject.Singleton
+
+@Singleton
+class CommentsRepository @Inject constructor(
+    private val commentsService: CommentsService,
+) {
+    suspend fun getComments(
+        postId: Long,
+        postType: String = "RECORD",
+        cursor: String? = null,
+    ) = runCatching {
+        commentsService.getComments(
+            postId = postId,
+            postType = postType,
+            cursor = cursor
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun likeComment(
+        commentId: Long,
+        type: Boolean
+    ) = runCatching {
+        commentsService.likeComment(
+            commentId = commentId,
+            response = CommentsLikesRequest(type)
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun createComment(
+        postId: Long,
+        content: String,
+        isReplyRequest: Boolean,
+        parentId: Int? = null,
+        postType: String = "RECORD",
+    ) = runCatching {
+        commentsService.createComment(
+            postId = postId,
+            request = CommentsCreateRequest(
+                content = content,
+                isReplyRequest = isReplyRequest,
+                parentId = parentId,
+                postType = postType
+            )
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun deleteComment(
+        commentId: Long
+    ) = runCatching {
+        commentsService.deleteComment(commentId).handleBaseResponse().getOrThrow()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/repository/FeedRepository.kt b/app/src/main/java/com/texthip/thip/data/repository/FeedRepository.kt
new file mode 100644
index 00000000..93e2d12d
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/repository/FeedRepository.kt
@@ -0,0 +1,271 @@
+package com.texthip.thip.data.repository
+
+import android.net.Uri
+import com.texthip.thip.data.model.base.handleBaseResponse
+import com.texthip.thip.data.model.feed.request.CreateFeedRequest
+import com.texthip.thip.data.model.feed.request.FeedLikeRequest
+import com.texthip.thip.data.model.feed.request.FeedSaveRequest
+import com.texthip.thip.data.model.feed.request.UpdateFeedRequest
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.async
+import kotlinx.coroutines.awaitAll
+import kotlinx.coroutines.withContext
+import com.texthip.thip.data.model.feed.response.AllFeedResponse
+import com.texthip.thip.data.model.feed.response.CreateFeedResponse
+import com.texthip.thip.data.model.feed.response.FeedDetailResponse
+import com.texthip.thip.data.model.feed.response.FeedLikeResponse
+import com.texthip.thip.data.model.feed.response.FeedMineInfoResponse
+import com.texthip.thip.data.model.feed.response.FeedSaveResponse
+import com.texthip.thip.data.model.feed.response.FeedWriteInfoResponse
+import com.texthip.thip.data.model.feed.response.MyFeedResponse
+import com.texthip.thip.data.model.feed.response.RelatedBooksResponse
+import com.texthip.thip.data.service.FeedService
+import com.texthip.thip.ui.feed.mock.FeedStateUpdateResult
+import com.texthip.thip.utils.image.ImageUploadHelper
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.asSharedFlow
+import javax.inject.Inject
+import javax.inject.Singleton
+
+@Singleton
+class FeedRepository @Inject constructor(
+    private val feedService: FeedService,
+    private val imageUploadHelper: ImageUploadHelper
+) {
+    private val _feedStateUpdateResult = MutableSharedFlow<FeedStateUpdateResult>()
+    val feedStateUpdateResult: Flow<FeedStateUpdateResult> = _feedStateUpdateResult.asSharedFlow()
+
+    /** 피드 작성에 필요한 카테고리 및 태그 목록 조회 */
+    suspend fun getFeedWriteInfo(): Result<FeedWriteInfoResponse?> = runCatching {
+        val response = feedService.getFeedWriteInfo()
+            .handleBaseResponse()
+            .getOrThrow()
+
+        // 카테고리 순서 조정
+        val orderedCategories = response?.categoryList?.sortedBy { category ->
+            when (category.category) {
+                "문학" -> 0
+                "과학·IT" -> 1
+                "사회과학" -> 2
+                "인문학" -> 3
+                "예술" -> 4
+                else -> 999
+            }
+        } ?: emptyList()
+
+        response?.copy(categoryList = orderedCategories)
+    }
+
+    /** 피드 생성 */
+    suspend fun createFeed(
+        isbn: String,
+        contentBody: String,
+        isPublic: Boolean,
+        tagList: List<String>,
+        imageUris: List<Uri>
+    ): Result<CreateFeedResponse?> = runCatching {
+        val imageUrls = if (imageUris.isNotEmpty()) {
+            uploadImagesToS3(imageUris)
+        } else {
+            emptyList()
+        }
+
+        val request = CreateFeedRequest(
+            isbn = isbn,
+            contentBody = contentBody,
+            isPublic = isPublic,
+            tagList = tagList,
+            imageUrls = imageUrls
+        )
+
+        feedService.createFeed(request)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 이미지들을 S3에 업로드하고 CloudFront URL 목록 반환 */
+    private suspend fun uploadImagesToS3(imageUris: List<Uri>): List<String> = withContext(Dispatchers.IO) {
+        val validImagePairs = imageUris.map { uri ->
+            async { 
+                imageUploadHelper.getImageMetadata(uri)?.let { metadata ->
+                    uri to metadata
+                }
+            }
+        }.awaitAll().filterNotNull()
+
+        if (validImagePairs.isEmpty()) return@withContext emptyList()
+
+        val presignedUrlRequest = validImagePairs.map { it.second }
+        
+        val presignedResponse = feedService.getPresignedUrls(presignedUrlRequest)
+            .handleBaseResponse()
+            .getOrThrow() ?: throw Exception("Failed to get presigned URLs")
+
+        // 개수 검증
+        if (validImagePairs.size != presignedResponse.presignedUrls.size) {
+            throw Exception("Presigned URL count mismatch: expected ${validImagePairs.size}, got ${presignedResponse.presignedUrls.size}")
+        }
+
+        val uploadedImageUrls = mutableListOf<String>()
+
+        validImagePairs.forEachIndexed { index, (uri, _) ->
+            val presignedInfo = presignedResponse.presignedUrls[index]
+
+            imageUploadHelper.uploadImageToS3(
+                uri = uri,
+                presignedUrl = presignedInfo.presignedUrl
+            ).onSuccess {
+                uploadedImageUrls.add(presignedInfo.fileUrl)
+            }.onFailure { exception ->
+                throw Exception("Failed to upload image ${index + 1}: ${exception.message}")
+            }
+        }
+
+        uploadedImageUrls
+    }
+
+
+    /** 전체 피드 목록 조회 */
+    suspend fun getAllFeeds(cursor: String? = null): Result<AllFeedResponse?> = runCatching {
+        feedService.getAllFeeds(cursor)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 내 피드 목록 조회 */
+    suspend fun getMyFeeds(cursor: String? = null): Result<MyFeedResponse?> = runCatching {
+        feedService.getMyFeeds(cursor)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 내 피드 정보 조회 */
+    suspend fun getMyFeedInfo(): Result<FeedMineInfoResponse?> = runCatching {
+        feedService.getMyFeedInfo()
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 특정 책과 관련된 피드 목록 조회 */
+    suspend fun getRelatedBookFeeds(
+        isbn: String,
+        sort: String? = null,
+        cursor: String? = null
+    ): Result<RelatedBooksResponse?> = runCatching {
+        feedService.getRelatedBookFeeds(isbn, sort, cursor)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 피드 상세 조회 */
+    suspend fun getFeedDetail(feedId: Long): Result<FeedDetailResponse?> = runCatching {
+        feedService.getFeedDetail(feedId)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 피드 수정 */
+    suspend fun updateFeed(
+        feedId: Long,
+        contentBody: String? = null,
+        isPublic: Boolean? = null,
+        tagList: List<String>? = null,
+        remainImageUrls: List<String>? = null
+    ): Result<CreateFeedResponse?> = runCatching {
+        val request = UpdateFeedRequest(
+            contentBody = contentBody,
+            isPublic = isPublic,
+            tagList = tagList,
+            remainImageUrls = remainImageUrls
+        )
+
+        feedService.updateFeed(feedId, request)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+
+    suspend fun getFeedUsersInfo(userId: Long) = runCatching {
+        feedService.getFeedUsersInfo(userId)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    suspend fun getFeedUsers(userId: Long) = runCatching {
+        feedService.getFeedUsers(userId)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 피드 삭제 */
+    suspend fun deleteFeed(feedId: Long): Result<String?> = runCatching {
+        feedService.deleteFeed(feedId)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /*suspend fun changeFeedLike(feedId: Long, newLikeStatus: Boolean): Result<FeedLikeResponse?> = runCatching {
+        val request = FeedLikeRequest(type = newLikeStatus)
+        feedService.changeFeedLike(feedId, request)
+            .handleBaseResponse()
+            .getOrThrow()
+    }*/
+    suspend fun changeFeedLike(
+        feedId: Long, newLikeStatus: Boolean,
+        currentLikeCount: Int,
+        currentIsSaved: Boolean
+    ): Result<FeedLikeResponse?> {
+        // 👈 3. 기존 로직을 수정하여 성공 시 방송(emit)하도록 변경
+        return runCatching {
+            val request = FeedLikeRequest(type = newLikeStatus)
+            feedService.changeFeedLike(feedId, request)
+                .handleBaseResponse()
+                .getOrThrow()
+        }.onSuccess { response ->
+            // API 호출 성공 및 응답 데이터가 있을 경우
+            response?.let {
+                // 변경된 상태를 객체로 만들어 방송(emit)
+                val newLikeCount = if (it.isLiked) currentLikeCount + 1 else currentLikeCount - 1
+                val update = FeedStateUpdateResult(
+                    feedId = feedId,
+                    isLiked = it.isLiked,
+                    likeCount = newLikeCount,
+                    isSaved = currentIsSaved, // isSaved 상태는 그대로 유지
+                    commentCount = 0 // 좋아요 함수에서는 댓글 수 정보 없음
+                )
+                _feedStateUpdateResult.emit(update)
+            }
+        }
+    }
+
+    /** 피드 저장 */
+    suspend fun changeFeedSave(
+        feedId: Long, newSaveStatus: Boolean, currentIsLiked: Boolean,
+        currentLikeCount: Int
+    ): Result<FeedSaveResponse?> =
+        runCatching {
+            val request = FeedSaveRequest(type = newSaveStatus)
+            feedService.changeFeedSave(feedId, request)
+                .handleBaseResponse()
+                .getOrThrow()
+        }.onSuccess { response ->
+            response?.let {
+                // API 응답(isSaved)과 파라미터로 받은 값들을 조합
+                val update = FeedStateUpdateResult(
+                    feedId = feedId,
+                    isLiked = currentIsLiked, // isLiked 상태는 그대로 유지
+                    likeCount = currentLikeCount,
+                    isSaved = it.isSaved,
+                    commentCount = 0 // 저장 함수에서는 댓글 수 정보 없음
+                )
+                _feedStateUpdateResult.emit(update)
+            }
+        }
+
+    suspend fun getSavedFeeds(cursor: String? = null): Result<AllFeedResponse?> = runCatching {
+        feedService.getSavedFeeds(cursor)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/repository/RecentSearchRepository.kt b/app/src/main/java/com/texthip/thip/data/repository/RecentSearchRepository.kt
new file mode 100644
index 00000000..1b8e7067
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/repository/RecentSearchRepository.kt
@@ -0,0 +1,28 @@
+package com.texthip.thip.data.repository
+
+import com.texthip.thip.data.model.base.handleBaseResponse
+import com.texthip.thip.data.model.book.response.RecentSearchResponse
+import com.texthip.thip.data.service.RecentSearchService
+import javax.inject.Inject
+import javax.inject.Singleton
+
+@Singleton
+class RecentSearchRepository @Inject constructor(
+    private val recentSearchService: RecentSearchService
+) {
+
+    /** 최근 검색어 조회 */
+    suspend fun getRecentSearches(type: String): Result<RecentSearchResponse?> = runCatching {
+        recentSearchService.getRecentSearches(type)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 최근 검색어 삭제 */
+    suspend fun deleteRecentSearch(recentSearchId: Int): Result<Unit> = runCatching {
+        recentSearchService.deleteRecentSearch(recentSearchId)
+            .handleBaseResponse()
+            .getOrThrow()
+            ?: Unit
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/repository/RoomsRepository.kt b/app/src/main/java/com/texthip/thip/data/repository/RoomsRepository.kt
new file mode 100644
index 00000000..9fb33aae
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/repository/RoomsRepository.kt
@@ -0,0 +1,349 @@
+package com.texthip.thip.data.repository
+
+import com.texthip.thip.data.manager.Genre
+import com.texthip.thip.data.manager.GenreManager
+import com.texthip.thip.data.manager.UserDataManager
+import com.texthip.thip.data.model.base.handleBaseResponse
+import com.texthip.thip.data.model.rooms.request.CreateRoomRequest
+import com.texthip.thip.data.model.rooms.request.RoomJoinRequest
+import com.texthip.thip.data.model.rooms.request.RoomSecretRoomRequest
+import com.texthip.thip.data.model.rooms.request.RoomsCreateDailyGreetingRequest
+import com.texthip.thip.data.model.rooms.request.RoomsCreateVoteRequest
+import com.texthip.thip.data.model.rooms.request.RoomsPatchRecordRequest
+import com.texthip.thip.data.model.rooms.request.RoomsPatchVoteRequest
+import com.texthip.thip.data.model.rooms.request.RoomsPostsLikesRequest
+import com.texthip.thip.data.model.rooms.request.RoomsRecordRequest
+import com.texthip.thip.data.model.rooms.request.RoomsVoteRequest
+import com.texthip.thip.data.model.rooms.request.VoteItem
+import com.texthip.thip.data.model.rooms.response.JoinedRoomListResponse
+import com.texthip.thip.data.model.rooms.response.MyRoomListResponse
+import com.texthip.thip.data.model.rooms.response.RoomCloseResponse
+import com.texthip.thip.data.model.rooms.response.RoomMainList
+import com.texthip.thip.data.model.rooms.response.RoomRecruitingResponse
+import com.texthip.thip.data.model.rooms.response.RoomSecretRoomResponse
+import com.texthip.thip.data.model.rooms.response.RoomsSearchResponse
+import com.texthip.thip.data.service.RoomsService
+import javax.inject.Inject
+import javax.inject.Singleton
+
+@Singleton
+class RoomsRepository @Inject constructor(
+    private val roomsService: RoomsService,
+    private val genreManager: GenreManager,
+    private val userDataManager: UserDataManager
+) {
+
+    /** 장르 목록 조회 */
+    fun getGenres(): Result<List<Genre>> = runCatching {
+        genreManager.getGenres()
+    }
+
+    /** 사용자 이름 조회(캐싱 데이터 사용)*/
+    fun getUserName(): Result<String> = runCatching {
+        userDataManager.getUserName()
+    }
+
+    /** 내가 참여 중인 모임방 목록 조회 */
+    suspend fun getMyJoinedRooms(cursor: String? = null): Result<JoinedRoomListResponse?> = runCatching {
+        val response = roomsService.getJoinedRooms(cursor)
+            .handleBaseResponse()
+            .getOrThrow()
+
+        response?.let { joinedRoomsDto ->
+            userDataManager.cacheUserName(joinedRoomsDto.nickname)
+        }
+        response
+    }
+
+    /** 카테고리별 모임방 섹션 조회 (마감임박/인기) */
+    suspend fun getRoomSections(genre: Genre? = null): Result<RoomMainList?> = runCatching {
+        val selectedGenre = genre ?: genreManager.getDefaultGenre()
+        val apiCategory = genreManager.mapGenreToApiCategory(selectedGenre)
+
+        roomsService.getRooms(apiCategory)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 타입별 내 모임방 목록 조회 */
+    suspend fun getMyRoomsByType(
+        type: String?,
+        cursor: String? = null
+    ): Result<MyRoomListResponse?> = runCatching {
+        roomsService.getMyRooms(type, cursor)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 모집중인 모임방 상세 정보 조회 */
+    suspend fun getRoomRecruiting(roomId: Int): Result<RoomRecruitingResponse?> = runCatching {
+        roomsService.getRoomRecruiting(roomId)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    /** 새 모임방 생성 */
+    suspend fun createRoom(request: CreateRoomRequest): Result<Int> = runCatching {
+        val response = roomsService.createRoom(request)
+            .handleBaseResponse()
+            .getOrThrow()
+            ?: throw NoSuchElementException("모임방 생성 응답을 받을 수 없습니다.")
+        response.roomId
+    }
+
+    /** 모임방 참여 또는 취소 */
+    suspend fun joinOrCancelRoom(roomId: Int, type: String): Result<String> = runCatching {
+        val request = RoomJoinRequest(type = type)
+        val response = roomsService.joinOrCancelRoom(roomId, request)
+            .handleBaseResponse()
+            .getOrThrow()
+            ?: throw NoSuchElementException("모임방 참여/취소 응답을 받을 수 없습니다.")
+        response.type
+    }
+
+    /** 비밀번호 입력 */
+    suspend fun postParticipateSecretRoom(
+        roomId: Int,
+        password: String
+    ): Result<RoomSecretRoomResponse> = runCatching {
+        val request = RoomSecretRoomRequest(password = password)
+        val response = roomsService.postParticipateSecretRoom(roomId, request)
+            .handleBaseResponse()
+            .getOrThrow()
+            ?: throw NoSuchElementException("비밀번호 입력 응답을 받을 수 없습니다.")
+
+        response
+    }
+
+    /** 모집 마감 */
+    suspend fun closeRoom(roomId: Int): Result<RoomCloseResponse> = runCatching {
+        val response = roomsService.closeRoom(roomId)
+            .handleBaseResponse()
+            .getOrThrow()
+            ?: throw NoSuchElementException("모집 마감 응답을 받을 수 없습니다.")
+        response
+    }
+
+    /** 모임방 검색 */
+    suspend fun searchRooms(
+        keyword: String,
+        category: String,
+        sort: String = "deadline",
+        isFinalized: Boolean = false,
+        cursor: String? = null
+    ): Result<RoomsSearchResponse?> = runCatching {
+        roomsService.searchRooms(keyword, category, sort, isFinalized, cursor)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+
+    /** 기록장 API들 */
+    suspend fun getRoomsPlaying(
+        roomId: Int
+    ) = runCatching {
+        roomsService.getRoomsPlaying(
+            roomId = roomId
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun getRoomsUsers(
+        roomId: Int
+    ) = runCatching {
+        roomsService.getRoomsUsers(
+            roomId = roomId
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun getRoomsPosts(
+        roomId: Int,
+        type: String = "group",
+        sort: String? = "latest",
+        pageStart: Int? = null,
+        pageEnd: Int? = null,
+        isOverview: Boolean? = false,
+        isPageFilter: Boolean? = false,
+        cursor: String? = null,
+    ) = runCatching {
+        roomsService.getRoomsPosts(
+            roomId = roomId,
+            type = type,
+            sort = sort,
+            pageStart = pageStart,
+            pageEnd = pageEnd,
+            isOverview = isOverview,
+            isPageFilter = isPageFilter,
+            cursor = cursor
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun postRoomsRecord(
+        roomId: Int,
+        content: String,
+        isOverview: Boolean = false,
+        page: Int = 0
+    ) = runCatching {
+        roomsService.postRoomsRecord(
+            roomId = roomId,
+            request = RoomsRecordRequest(
+                page = page,
+                isOverview = isOverview,
+                content = content
+            )
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun postRoomsCreateVote(
+        roomId: Int,
+        page: Int,
+        isOverview: Boolean,
+        content: String,
+        voteItemList: List<VoteItem>
+    ) = runCatching {
+        roomsService.postRoomsCreateVote(
+            roomId = roomId,
+            request = RoomsCreateVoteRequest(
+                page = page,
+                isOverview = isOverview,
+                content = content,
+                voteItemList = voteItemList
+            )
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun getRoomsBookPage(
+        roomId: Int,
+    ) = runCatching {
+        roomsService.getRoomsBookPage(
+            roomId = roomId
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun postRoomsVote(
+        roomId: Int,
+        voteId: Int,
+        voteItemId: Int,
+        type: Boolean
+    ) = runCatching {
+        roomsService.postRoomsVote(
+            roomId = roomId,
+            voteId = voteId,
+            request = RoomsVoteRequest(
+                voteItemId = voteItemId,
+                type = type
+            )
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun deleteRoomsRecord(
+        roomId: Int,
+        recordId: Int
+    ) = runCatching {
+        roomsService.deleteRoomsRecord(
+            roomId = roomId,
+            recordId = recordId
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun deleteRoomsVote(
+        roomId: Int,
+        voteId: Int
+    ) = runCatching {
+        roomsService.deleteRoomsVote(
+            roomId = roomId,
+            voteId = voteId
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun postRoomsPostsLikes(
+        postId: Int,
+        type: Boolean,
+        roomPostType: String
+    ) = runCatching {
+        roomsService.postRoomsPostsLikes(
+            postId = postId,
+            request = RoomsPostsLikesRequest(
+                type = type,
+                roomPostType = roomPostType
+            )
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun getRoomsDailyGreeting(
+        roomId: Int,
+        cursor: String?
+    ) = runCatching {
+        roomsService.getRoomsDailyGreeting(
+            roomId = roomId,
+            cursor = cursor
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun postRoomsDailyGreeting(
+        roomId: Int,
+        content: String
+    ) = runCatching {
+        roomsService.postRoomsDailyGreeting(
+            roomId = roomId,
+            request = RoomsCreateDailyGreetingRequest(
+                content = content
+            )
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun deleteRoomsDailyGreeting(
+        roomId: Int,
+        attendanceCheckId: Int
+    ) = runCatching {
+        roomsService.deleteRoomsDailyGreeting(
+            roomId = roomId,
+            attendanceCheckId = attendanceCheckId
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun getRoomsRecordsPin(
+        roomId: Int,
+        recordId: Int
+    ) = runCatching {
+        roomsService.getRoomsRecordsPin(
+            roomId = roomId,
+            recordId = recordId
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun leaveRoom(
+        roomId: Int,
+    ) = runCatching {
+        roomsService.leaveRoom(
+            roomId = roomId,
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun patchRoomsRecord(
+        roomId: Int,
+        recordId: Int,
+        content: String
+    ) = runCatching {
+        roomsService.patchRoomsRecord(
+            roomId = roomId,
+            recordId = recordId,
+            request = RoomsPatchRecordRequest(
+                content = content
+            )
+        ).handleBaseResponse().getOrThrow()
+    }
+
+    suspend fun patchRoomsVote(
+        roomId: Int,
+        voteId: Int,
+        content: String,
+    ) = runCatching {
+        roomsService.patchRoomsVote(
+            roomId = roomId,
+            voteId = voteId,
+            request = RoomsPatchVoteRequest(
+                content = content,
+            )
+        ).handleBaseResponse().getOrThrow()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/repository/UserRepository.kt b/app/src/main/java/com/texthip/thip/data/repository/UserRepository.kt
new file mode 100644
index 00000000..dc7dfe02
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/repository/UserRepository.kt
@@ -0,0 +1,146 @@
+package com.texthip.thip.data.repository
+
+import retrofit2.HttpException
+import android.util.Log
+import com.texthip.thip.data.manager.TokenManager
+import com.texthip.thip.data.model.base.BaseResponse
+import com.texthip.thip.data.model.base.ThipApiFailureException
+import com.texthip.thip.data.model.base.handleBaseResponse
+import com.texthip.thip.data.model.users.request.FollowRequest
+import com.texthip.thip.data.model.users.request.NicknameRequest
+import com.texthip.thip.data.model.users.request.ProfileUpdateRequest
+import com.texthip.thip.data.model.users.request.SignupRequest
+import com.texthip.thip.data.model.users.response.AliasChoiceResponse
+import com.texthip.thip.data.model.users.response.FollowResponse
+import com.texthip.thip.data.model.users.response.MyFollowingsResponse
+import com.texthip.thip.data.model.users.response.MyPageInfoResponse
+import com.texthip.thip.data.model.users.response.NicknameResponse
+import com.texthip.thip.data.model.users.response.OthersFollowersResponse
+import com.texthip.thip.data.model.users.response.SignupResponse
+import com.texthip.thip.data.model.users.response.UserSearchResponse
+import com.texthip.thip.data.service.UserService
+import kotlinx.serialization.json.Json
+import javax.inject.Inject
+import javax.inject.Singleton
+
+@Singleton
+class UserRepository @Inject constructor(
+    private val userService: UserService,
+    private val tokenManager: TokenManager,
+    private val json: Json
+) {
+    //내 팔로잉 목록 조회
+    suspend fun getMyFollowings(
+        cursor: String?,
+        size: Int = 10
+    ): Result<MyFollowingsResponse?> = runCatching {
+        userService.getMyFollowings(cursor = cursor, size = size)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    suspend fun getMyFollowingsRecentFeeds() = runCatching {
+        userService.getMyFollowingsRecentFeeds()
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    //다른 유저 팔로워 목록 조회
+    suspend fun getOthersFollowers(
+        userId: Long,
+        cursor: String?,
+        size: Int = 10
+    ): Result<OthersFollowersResponse?> = runCatching {
+        userService.getUserFollowers(userId = userId, cursor = cursor, size = size)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    //마이페이지 정보 조회
+    suspend fun getMyPageInfo(): Result<MyPageInfoResponse?> = runCatching {
+        userService.getMyPage()
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    suspend fun checkNickname(nickname: String): Result<NicknameResponse?> = runCatching {
+        userService.checkNickname(NicknameRequest(nickname))
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+    suspend fun getAliasChoices(): Result<AliasChoiceResponse?> = runCatching {
+        userService.getAliasChoices()
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    suspend fun toggleFollow(
+        followingUserId: Long,
+        isFollowing: Boolean
+    ): Result<FollowResponse?> = runCatching {
+        val request = FollowRequest(type = isFollowing)
+        userService.toggleFollow(followingUserId, request)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+/*
+    suspend fun updateProfile(request: ProfileUpdateRequest): Result<Unit?> = runCatching {
+        userService.updateProfile(request)
+            .handleBaseResponse()
+            .getOrThrow()
+    }*/
+    suspend fun updateProfile(request: ProfileUpdateRequest): Result<Unit?> {
+        return try {
+            val response = userService.updateProfile(request)
+            response.handleBaseResponse().getOrThrow()
+            Result.success(Unit)
+        } catch (e: HttpException) {
+            val errorBody = e.response()?.errorBody()?.string()
+            if (errorBody != null) {
+                try {
+                    val baseResponse = json.decodeFromString<BaseResponse<Unit>>(errorBody)
+                    Result.failure(ThipApiFailureException(baseResponse.code, baseResponse.message))
+                } catch (jsonException: Exception) {
+                    Result.failure(e) // JSON 파싱 실패 시 원래 HttpException 반환
+                }
+            } else {
+                Result.failure(e) // 에러 본문이 없으면 원래 HttpException 반환
+            }
+        } catch (e: Exception) {
+            Result.failure(e)
+        }
+    }
+
+
+    suspend fun signup(request: SignupRequest): Result<SignupResponse?> {
+        Log.d("SignupDebug", "UserRepository.signup() 호출됨. 요청 닉네임: ${request.nickname}")
+
+        val tempToken = tokenManager.getTempTokenOnce()
+
+        Log.d("SignupDebug", "가져온 임시 토큰: $tempToken")
+
+        if (tempToken.isNullOrBlank()) {
+            return Result.failure(Exception("임시 토큰이 없습니다. 로그인을 다시 시도해주세요."))
+        }
+        return runCatching {
+            userService.signup("Bearer $tempToken", request)
+                .handleBaseResponse()
+                .getOrThrow()
+        }
+    }
+
+    suspend fun searchUsers(
+        keyword: String,
+        isFinalized: Boolean
+    ): Result<UserSearchResponse?> = runCatching {
+        userService.searchUsers(isFinalized = isFinalized, keyword = keyword)
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+
+    suspend fun deleteAccount(): Result<Unit?> = runCatching {
+        userService.deleteAccount()
+            .handleBaseResponse()
+            .getOrThrow()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/service/AuthService.kt b/app/src/main/java/com/texthip/thip/data/service/AuthService.kt
new file mode 100644
index 00000000..51722ad2
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/service/AuthService.kt
@@ -0,0 +1,15 @@
+package com.texthip.thip.data.service
+
+import com.texthip.thip.data.model.auth.request.AuthRequest
+import com.texthip.thip.data.model.auth.response.AuthResponse
+import com.texthip.thip.data.model.base.BaseResponse
+import retrofit2.http.Body
+import retrofit2.http.POST
+
+interface AuthService {
+    //신규유저 여부 확인
+    @POST("auth/users")
+    suspend fun checkNewUser(
+        @Body request: AuthRequest
+    ): BaseResponse<AuthResponse>
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/service/BookService.kt b/app/src/main/java/com/texthip/thip/data/service/BookService.kt
new file mode 100644
index 00000000..3e47624a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/service/BookService.kt
@@ -0,0 +1,63 @@
+package com.texthip.thip.data.service
+
+import com.texthip.thip.data.model.base.BaseResponse
+import com.texthip.thip.data.model.book.request.BookSaveRequest
+import com.texthip.thip.data.model.book.response.BookDetailResponse
+import com.texthip.thip.data.model.book.response.BookListResponse
+import com.texthip.thip.data.model.book.response.BookSaveResponse
+import com.texthip.thip.data.model.book.response.BookSearchResponse
+import com.texthip.thip.data.model.book.response.BookUserSaveResponse
+import com.texthip.thip.data.model.book.response.MostSearchedBooksResponse
+import com.texthip.thip.data.model.book.response.RecruitingRoomsResponse
+import retrofit2.http.Body
+import retrofit2.http.GET
+import retrofit2.http.POST
+import retrofit2.http.Path
+import retrofit2.http.Query
+
+interface BookService {
+
+    /** 저장된 책 또는 모임 책 목록 조회 */
+    @GET("books/selectable-list")
+    suspend fun getBooks(
+        @Query("type") type: String,
+        @Query("cursor") cursor: String? = null
+    ): BaseResponse<BookListResponse>
+
+    /** 책 검색 */
+    @GET("books")
+    suspend fun searchBooks(
+        @Query("keyword") keyword: String,
+        @Query("page") page: Int = 1,
+        @Query("isFinalized") isFinalized: Boolean = false
+    ): BaseResponse<BookSearchResponse>
+
+    /** 인기 책 조회 */
+    @GET("books/most-searched")
+    suspend fun getMostSearchedBooks(): BaseResponse<MostSearchedBooksResponse>
+
+    /** 책 상세 조회 */
+    @GET("books/{isbn}")
+    suspend fun getBookDetail(
+        @Path("isbn") isbn: String
+    ): BaseResponse<BookDetailResponse>
+
+    /** 책 저장/저장취소 */
+    @POST("books/{isbn}/saved")
+    suspend fun saveBook(
+        @Path("isbn") isbn: String,
+        @Body request: BookSaveRequest
+    ): BaseResponse<BookSaveResponse>
+
+    /** 모집중인 방 조회 */
+    @GET("books/{isbn}/recruiting-rooms")
+    suspend fun getRecruitingRooms(
+        @Path("isbn") isbn: String,
+        @Query("cursor") cursor: String? = null
+    ): BaseResponse<RecruitingRoomsResponse>
+
+    @GET("books/saved")
+    suspend fun getSavedBooks(
+        @Query("cursor") cursor: String? = null
+    ): BaseResponse<BookUserSaveResponse>
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/service/CommentsService.kt b/app/src/main/java/com/texthip/thip/data/service/CommentsService.kt
new file mode 100644
index 00000000..b8594590
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/service/CommentsService.kt
@@ -0,0 +1,41 @@
+package com.texthip.thip.data.service
+
+import com.texthip.thip.data.model.base.BaseResponse
+import com.texthip.thip.data.model.comments.request.CommentsCreateRequest
+import com.texthip.thip.data.model.comments.request.CommentsLikesRequest
+import com.texthip.thip.data.model.comments.response.CommentsCreateResponse
+import com.texthip.thip.data.model.comments.response.CommentsDeleteResponse
+import com.texthip.thip.data.model.comments.response.CommentsLikesResponse
+import com.texthip.thip.data.model.comments.response.CommentsResponse
+import retrofit2.http.Body
+import retrofit2.http.DELETE
+import retrofit2.http.GET
+import retrofit2.http.POST
+import retrofit2.http.Path
+import retrofit2.http.Query
+
+interface CommentsService {
+    @GET("comments/{postId}")
+    suspend fun getComments(
+        @Path("postId") postId: Long,
+        @Query("postType") postType: String = "RECORD",
+        @Query("cursor") cursor: String? = null,
+    ): BaseResponse<CommentsResponse>
+
+    @POST("comments/{commentId}/likes")
+    suspend fun likeComment(
+        @Path("commentId") commentId: Long,
+        @Body response: CommentsLikesRequest
+    ): BaseResponse<CommentsLikesResponse>
+
+    @POST("comments/{postId}")
+    suspend fun createComment(
+        @Path("postId") postId: Long,
+        @Body request: CommentsCreateRequest
+    ): BaseResponse<CommentsCreateResponse>
+
+    @DELETE("comments/{commentId}")
+    suspend fun deleteComment(
+        @Path("commentId") commentId: Long
+    ): BaseResponse<CommentsDeleteResponse>
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/service/FeedService.kt b/app/src/main/java/com/texthip/thip/data/service/FeedService.kt
new file mode 100644
index 00000000..557820de
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/service/FeedService.kt
@@ -0,0 +1,119 @@
+package com.texthip.thip.data.service
+
+import com.texthip.thip.data.model.base.BaseResponse
+import com.texthip.thip.data.model.feed.request.CreateFeedRequest
+import com.texthip.thip.data.model.feed.request.FeedLikeRequest
+import com.texthip.thip.data.model.feed.request.FeedSaveRequest
+import com.texthip.thip.data.model.feed.request.PresignedUrlRequest
+import com.texthip.thip.data.model.feed.request.UpdateFeedRequest
+import com.texthip.thip.data.model.feed.response.AllFeedResponse
+import com.texthip.thip.data.model.feed.response.CreateFeedResponse
+import com.texthip.thip.data.model.feed.response.FeedDetailResponse
+import com.texthip.thip.data.model.feed.response.FeedLikeResponse
+import com.texthip.thip.data.model.feed.response.FeedMineInfoResponse
+import com.texthip.thip.data.model.feed.response.FeedSaveResponse
+import com.texthip.thip.data.model.feed.response.FeedUsersInfoResponse
+import com.texthip.thip.data.model.feed.response.FeedUsersResponse
+import com.texthip.thip.data.model.feed.response.FeedWriteInfoResponse
+import com.texthip.thip.data.model.feed.response.MyFeedResponse
+import com.texthip.thip.data.model.feed.response.PresignedUrlResponse
+import com.texthip.thip.data.model.feed.response.RelatedBooksResponse
+import retrofit2.http.Body
+import retrofit2.http.DELETE
+import retrofit2.http.GET
+import retrofit2.http.PATCH
+import retrofit2.http.POST
+import retrofit2.http.Path
+import retrofit2.http.Query
+
+
+interface FeedService {
+
+    /** 피드 작성에 필요한 카테고리 및 태그 목록 조회 */
+    @GET("feeds/write-info")
+    suspend fun getFeedWriteInfo(): BaseResponse<FeedWriteInfoResponse>
+
+    /** 피드 이미지 업로드용 presigned URL 발급 */
+    @POST("feeds/images/presigned-url")
+    suspend fun getPresignedUrls(
+        @Body request: PresignedUrlRequest
+    ): BaseResponse<PresignedUrlResponse>
+
+    /** 피드 생성 */
+    @POST("feeds")
+    suspend fun createFeed(
+        @Body request: CreateFeedRequest
+    ): BaseResponse<CreateFeedResponse>
+
+    /** 전체 피드 목록 조회 */
+    @GET("feeds")
+    suspend fun getAllFeeds(
+        @Query("cursor") cursor: String? = null
+    ): BaseResponse<AllFeedResponse>
+
+    /** 내 피드 목록 조회 */
+    @GET("feeds/mine")
+    suspend fun getMyFeeds(
+        @Query("cursor") cursor: String? = null
+    ): BaseResponse<MyFeedResponse>
+
+    /** 내 피드 정보 조회 */
+    @GET("feeds/mine/info")
+    suspend fun getMyFeedInfo(): BaseResponse<FeedMineInfoResponse>
+
+    /** 특정 책과 관련된 피드 목록 조회 */
+    @GET("feeds/related-books/{isbn}")
+    suspend fun getRelatedBookFeeds(
+        @Path("isbn") isbn: String,
+        @Query("sort") sort: String? = null,
+        @Query("cursor") cursor: String? = null
+    ): BaseResponse<RelatedBooksResponse>
+
+    /** 피드 상세 조회 */
+    @GET("feeds/{feedId}")
+    suspend fun getFeedDetail(
+        @Path("feedId") feedId: Long
+    ): BaseResponse<FeedDetailResponse>
+
+    @GET("feeds/users/{userId}/info")
+    suspend fun getFeedUsersInfo(
+        @Path("userId") userId: Long
+    ): BaseResponse<FeedUsersInfoResponse>
+
+    @GET("feeds/users/{userId}")
+    suspend fun getFeedUsers(
+        @Path("userId") userId: Long
+    ): BaseResponse<FeedUsersResponse>
+
+    /** 피드 삭제 */
+    @DELETE("feeds/{feedId}")
+    suspend fun deleteFeed(
+        @Path("feedId") feedId: Long
+    ): BaseResponse<String>
+
+    /** 피드 좋아요 상태 변경 */
+    @POST("feeds/{feedId}/likes")
+    suspend fun changeFeedLike(
+        @Path("feedId") feedId: Long,
+        @Body request: FeedLikeRequest
+    ): BaseResponse<FeedLikeResponse>
+
+    /** 피드 수정 */
+    @PATCH("feeds/{feedId}")
+    suspend fun updateFeed(
+        @Path("feedId") feedId: Long,
+        @Body request: UpdateFeedRequest
+    ): BaseResponse<CreateFeedResponse>
+
+    /** 피드 저장 상태 변경 */
+    @POST("feeds/{feedId}/saved")
+    suspend fun changeFeedSave(
+        @Path("feedId") feedId: Long,
+        @Body request: FeedSaveRequest
+    ): BaseResponse<FeedSaveResponse>
+
+    @GET("feeds/saved")
+    suspend fun getSavedFeeds(
+        @Query("cursor") cursor: String? = null
+    ): BaseResponse<AllFeedResponse>
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/service/RecentSearchService.kt b/app/src/main/java/com/texthip/thip/data/service/RecentSearchService.kt
new file mode 100644
index 00000000..e4f9f041
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/service/RecentSearchService.kt
@@ -0,0 +1,23 @@
+package com.texthip.thip.data.service
+
+import com.texthip.thip.data.model.base.BaseResponse
+import com.texthip.thip.data.model.book.response.RecentSearchResponse
+import retrofit2.http.DELETE
+import retrofit2.http.GET
+import retrofit2.http.Path
+import retrofit2.http.Query
+
+interface RecentSearchService {
+
+    /** 최근 검색어 조회 */
+    @GET("recent-searches")
+    suspend fun getRecentSearches(
+        @Query("type") type: String
+    ): BaseResponse<RecentSearchResponse>
+
+    /** 최근 검색어 삭제 */
+    @DELETE("recent-searches/{recentSearchId}")
+    suspend fun deleteRecentSearch(
+        @Path("recentSearchId") recentSearchId: Int
+    ): BaseResponse<Unit>
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/service/RoomsService.kt b/app/src/main/java/com/texthip/thip/data/service/RoomsService.kt
new file mode 100644
index 00000000..f43d1f7d
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/service/RoomsService.kt
@@ -0,0 +1,217 @@
+package com.texthip.thip.data.service
+
+import com.texthip.thip.data.model.base.BaseResponse
+import com.texthip.thip.data.model.rooms.request.CreateRoomRequest
+import com.texthip.thip.data.model.rooms.request.RoomJoinRequest
+import com.texthip.thip.data.model.rooms.request.RoomSecretRoomRequest
+import com.texthip.thip.data.model.rooms.request.RoomsCreateDailyGreetingRequest
+import com.texthip.thip.data.model.rooms.request.RoomsCreateVoteRequest
+import com.texthip.thip.data.model.rooms.request.RoomsPatchRecordRequest
+import com.texthip.thip.data.model.rooms.request.RoomsPatchVoteRequest
+import com.texthip.thip.data.model.rooms.request.RoomsPostsLikesRequest
+import com.texthip.thip.data.model.rooms.request.RoomsRecordRequest
+import com.texthip.thip.data.model.rooms.request.RoomsVoteRequest
+import com.texthip.thip.data.model.rooms.response.CreateRoomResponse
+import com.texthip.thip.data.model.rooms.response.JoinedRoomListResponse
+import com.texthip.thip.data.model.rooms.response.MyRoomListResponse
+import com.texthip.thip.data.model.rooms.response.RoomCloseResponse
+import com.texthip.thip.data.model.rooms.response.RoomJoinResponse
+import com.texthip.thip.data.model.rooms.response.RoomMainList
+import com.texthip.thip.data.model.rooms.response.RoomRecruitingResponse
+import com.texthip.thip.data.model.rooms.response.RoomSecretRoomResponse
+import com.texthip.thip.data.model.rooms.response.RoomsBookPageResponse
+import com.texthip.thip.data.model.rooms.response.RoomsCreateDailyGreetingResponse
+import com.texthip.thip.data.model.rooms.response.RoomsCreateVoteResponse
+import com.texthip.thip.data.model.rooms.response.RoomsDailyGreetingResponse
+import com.texthip.thip.data.model.rooms.response.RoomsDeleteDailyGreetingResponse
+import com.texthip.thip.data.model.rooms.response.RoomsDeleteRecordResponse
+import com.texthip.thip.data.model.rooms.response.RoomsDeleteVoteResponse
+import com.texthip.thip.data.model.rooms.response.RoomsPatchRecordResponse
+import com.texthip.thip.data.model.rooms.response.RoomsPatchVoteResponse
+import com.texthip.thip.data.model.rooms.response.RoomsPlayingResponse
+import com.texthip.thip.data.model.rooms.response.RoomsPostsLikesResponse
+import com.texthip.thip.data.model.rooms.response.RoomsPostsResponse
+import com.texthip.thip.data.model.rooms.response.RoomsRecordResponse
+import com.texthip.thip.data.model.rooms.response.RoomsRecordsPinResponse
+import com.texthip.thip.data.model.rooms.response.RoomsSearchResponse
+import com.texthip.thip.data.model.rooms.response.RoomsUsersResponse
+import com.texthip.thip.data.model.rooms.response.RoomsVoteResponse
+import retrofit2.http.Body
+import retrofit2.http.DELETE
+import retrofit2.http.GET
+import retrofit2.http.PATCH
+import retrofit2.http.POST
+import retrofit2.http.Path
+import retrofit2.http.Query
+
+interface RoomsService {
+
+    /** 참여 중인 모임방 목록 조회 */
+    @GET("rooms/home/joined")
+    suspend fun getJoinedRooms(
+        @Query("cursor") cursor: String? = null
+    ): BaseResponse<JoinedRoomListResponse>
+
+    /** 카테고리별 모임방 목록 조회 (마감임박/인기) */
+    @GET("rooms")
+    suspend fun getRooms(
+        @Query("category") category: String = "문학"
+    ): BaseResponse<RoomMainList>
+
+    /** 내가 만든/참여한 모임방 목록 조회 */
+    @GET("rooms/my")
+    suspend fun getMyRooms(
+        @Query("type") type: String? = null,
+        @Query("cursor") cursor: String? = null
+    ): BaseResponse<MyRoomListResponse>
+
+    /** 모집중인 모임방 상세 정보 조회 */
+    @GET("rooms/{roomId}/recruiting")
+    suspend fun getRoomRecruiting(@Path("roomId") roomId: Int): BaseResponse<RoomRecruitingResponse>
+
+    /** 새 모임방 생성 */
+    @POST("rooms")
+    suspend fun createRoom(
+        @Body request: CreateRoomRequest
+    ): BaseResponse<CreateRoomResponse>
+
+    /** 모임방 참여/취소 */
+    @POST("rooms/{roomId}/join")
+    suspend fun joinOrCancelRoom(
+        @Path("roomId") roomId: Int,
+        @Body request: RoomJoinRequest
+    ): BaseResponse<RoomJoinResponse>
+
+    /** 비밀번호 입력 */
+    @POST("rooms/{roomId}/password")
+    suspend fun postParticipateSecretRoom(
+        @Path("roomId") roomId: Int,
+        @Body request: RoomSecretRoomRequest
+    ): BaseResponse<RoomSecretRoomResponse>
+
+    /** 모집 마감 */
+    @POST("rooms/{roomId}/close")
+    suspend fun closeRoom(
+        @Path("roomId") roomId: Int
+    ): BaseResponse<RoomCloseResponse>
+
+    /** 모임방 검색 */
+    @GET("rooms/search")
+    suspend fun searchRooms(
+        @Query("keyword") keyword: String,
+        @Query("category") category: String,
+        @Query("sort") sort: String = "deadline",
+        @Query("isFinalized") isFinalized: Boolean = false,
+        @Query("cursor") cursor: String? = null
+    ): BaseResponse<RoomsSearchResponse>
+
+
+
+    /** 기록장 API들 */
+    @GET("rooms/{roomId}/playing")
+    suspend fun getRoomsPlaying(
+        @Path("roomId") roomId: Int
+    ): BaseResponse<RoomsPlayingResponse>
+
+    @GET("rooms/{roomId}/users")
+    suspend fun getRoomsUsers(
+        @Path("roomId") roomId: Int
+    ): BaseResponse<RoomsUsersResponse>
+
+    @GET("rooms/{roomId}/posts")
+    suspend fun getRoomsPosts(
+        @Path("roomId") roomId: Int,
+        @Query("type") type: String = "group",
+        @Query("sort") sort: String? = "latest",
+        @Query("pageStart") pageStart: Int? = null,
+        @Query("pageEnd") pageEnd: Int? = null,
+        @Query("isOverview") isOverview: Boolean? = false,
+        @Query("isPageFilter") isPageFilter: Boolean? = false,
+        @Query("cursor") cursor: String? = null,
+    ): BaseResponse<RoomsPostsResponse>
+
+    @POST("rooms/{roomId}/record")
+    suspend fun postRoomsRecord(
+        @Path("roomId") roomId: Int,
+        @Body request: RoomsRecordRequest
+    ): BaseResponse<RoomsRecordResponse>
+
+    @POST("rooms/{roomId}/vote")
+    suspend fun postRoomsCreateVote(
+        @Path("roomId") roomId: Int,
+        @Body request: RoomsCreateVoteRequest
+    ): BaseResponse<RoomsCreateVoteResponse>
+
+    @GET("rooms/{roomId}/book-page")
+    suspend fun getRoomsBookPage(
+        @Path("roomId") roomId: Int,
+    ): BaseResponse<RoomsBookPageResponse>
+
+    @POST("rooms/{roomId}/vote/{voteId}")
+    suspend fun postRoomsVote(
+        @Path("roomId") roomId: Int,
+        @Path("voteId") voteId: Int,
+        @Body request: RoomsVoteRequest
+    ): BaseResponse<RoomsVoteResponse>
+
+    @DELETE("rooms/{roomId}/record/{recordId}")
+    suspend fun deleteRoomsRecord(
+        @Path("roomId") roomId: Int,
+        @Path("recordId") recordId: Int
+    ): BaseResponse<RoomsDeleteRecordResponse>
+
+    @DELETE("rooms/{roomId}/vote/{voteId}")
+    suspend fun deleteRoomsVote(
+        @Path("roomId") roomId: Int,
+        @Path("voteId") voteId: Int
+    ): BaseResponse<RoomsDeleteVoteResponse>
+
+    @POST("room-posts/{postId}/likes")
+    suspend fun postRoomsPostsLikes(
+        @Path("postId") postId: Int,
+        @Body request: RoomsPostsLikesRequest
+    ): BaseResponse<RoomsPostsLikesResponse>
+
+    @GET("rooms/{roomId}/daily-greeting")
+    suspend fun getRoomsDailyGreeting(
+        @Path("roomId") roomId: Int,
+        @Query("cursor") cursor: String? = null
+    ): BaseResponse<RoomsDailyGreetingResponse>
+
+    @POST("rooms/{roomId}/daily-greeting")
+    suspend fun postRoomsDailyGreeting(
+        @Path("roomId") roomId: Int,
+        @Body request: RoomsCreateDailyGreetingRequest
+    ): BaseResponse<RoomsCreateDailyGreetingResponse>
+
+    @DELETE("rooms/{roomId}/daily-greeting/{attendanceCheckId}")
+    suspend fun deleteRoomsDailyGreeting(
+        @Path("roomId") roomId: Int,
+        @Path("attendanceCheckId") attendanceCheckId: Int
+    ): BaseResponse<RoomsDeleteDailyGreetingResponse>
+
+    @GET("rooms/{roomId}/records/{recordId}/pin")
+    suspend fun getRoomsRecordsPin(
+        @Path("roomId") roomId: Int,
+        @Path("recordId") recordId: Int
+    ): BaseResponse<RoomsRecordsPinResponse>
+
+    @DELETE("rooms/{roomId}/leave")
+    suspend fun leaveRoom(
+        @Path("roomId") roomId: Int
+    ): BaseResponse<Unit>
+
+    @PATCH("rooms/{roomId}/records/{recordId}")
+    suspend fun patchRoomsRecord(
+        @Path("roomId") roomId: Int,
+        @Path("recordId") recordId: Int,
+        @Body request: RoomsPatchRecordRequest
+    ): BaseResponse<RoomsPatchRecordResponse>
+
+    @PATCH("rooms/{roomId}/votes/{voteId}")
+    suspend fun patchRoomsVote(
+        @Path("roomId") roomId: Int,
+        @Path("voteId") voteId: Int,
+        @Body request: RoomsPatchVoteRequest
+    ): BaseResponse<RoomsPatchVoteResponse>
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/data/service/UserService.kt b/app/src/main/java/com/texthip/thip/data/service/UserService.kt
new file mode 100644
index 00000000..064180ae
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/data/service/UserService.kt
@@ -0,0 +1,81 @@
+package com.texthip.thip.data.service
+
+import com.texthip.thip.data.model.base.BaseResponse
+import com.texthip.thip.data.model.users.request.FollowRequest
+import com.texthip.thip.data.model.users.request.NicknameRequest
+import com.texthip.thip.data.model.users.request.ProfileUpdateRequest
+import com.texthip.thip.data.model.users.request.SignupRequest
+import com.texthip.thip.data.model.users.response.AliasChoiceResponse
+import com.texthip.thip.data.model.users.response.FollowResponse
+import com.texthip.thip.data.model.users.response.MyFollowingsResponse
+import com.texthip.thip.data.model.users.response.MyPageInfoResponse
+import com.texthip.thip.data.model.users.response.NicknameResponse
+import com.texthip.thip.data.model.users.response.OthersFollowersResponse
+import com.texthip.thip.data.model.users.response.SignupResponse
+import com.texthip.thip.data.model.users.response.UserSearchResponse
+import com.texthip.thip.data.model.users.response.UsersMyFollowingsRecentFeedsResponse
+import retrofit2.http.Body
+import retrofit2.http.DELETE
+import retrofit2.http.GET
+import retrofit2.http.Header
+import retrofit2.http.PATCH
+import retrofit2.http.POST
+import retrofit2.http.Path
+import retrofit2.http.Query
+
+interface UserService {
+    @GET("users/my-followings")
+    suspend fun getMyFollowings(
+        @Query("size") size: Int = 10,
+        @Query("cursor") cursor: String? = null
+    ): BaseResponse<MyFollowingsResponse>
+
+    @GET("users/my-followings/recent-feeds")
+    suspend fun getMyFollowingsRecentFeeds(): BaseResponse<UsersMyFollowingsRecentFeedsResponse>
+
+    @GET("users/{userId}/followers")
+    suspend fun getUserFollowers(
+        @Path("userId") userId: Long,
+        @Query("size") size: Int = 10,
+        @Query("cursor") cursor: String? = null
+    ): BaseResponse<OthersFollowersResponse>
+
+    @GET("users/my-page")
+    suspend fun getMyPage(): BaseResponse<MyPageInfoResponse>
+
+    @POST("users/nickname")
+    suspend fun checkNickname(
+        @Body request: NicknameRequest
+    ): BaseResponse<NicknameResponse>
+
+    @GET("users/alias")
+    suspend fun getAliasChoices(): BaseResponse<AliasChoiceResponse>
+
+    @POST("users/following/{followingUserId}")
+    suspend fun toggleFollow(
+        @Path("followingUserId") followingUserId: Long,
+        @Body request: FollowRequest
+    ): BaseResponse<FollowResponse>
+
+    @PATCH("users")
+    suspend fun updateProfile(
+        @Body request: ProfileUpdateRequest
+    ): BaseResponse<Unit>
+
+    @POST("users/signup")
+    suspend fun signup(
+        @Header("Authorization") tempToken: String,
+        @Body request: SignupRequest
+    ): BaseResponse<SignupResponse>
+
+    @GET("users")
+    suspend fun searchUsers(
+        @Query("isFinalized") isFinalized: Boolean,
+        @Query("keyword") keyword: String,
+        @Query("size") size: Int = 30
+    ): BaseResponse<UserSearchResponse>
+
+    @DELETE("users")
+    suspend fun deleteAccount(): BaseResponse<Unit>
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/bookSearch/screen/BookSearchScreen.kt b/app/src/main/java/com/texthip/thip/ui/bookSearch/screen/BookSearchScreen.kt
deleted file mode 100644
index b4e70e78..00000000
--- a/app/src/main/java/com/texthip/thip/ui/bookSearch/screen/BookSearchScreen.kt
+++ /dev/null
@@ -1,19 +0,0 @@
-package com.texthip.thip.ui.bookSearch.screen
-
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.navigation.NavController
-
-@Composable
-fun BookSearchScreen(navController: NavController) {
-    Box(
-        modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.Center
-    ) {
-        Text(text = "Book Search Screen")
-    }
-}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/alarmpage/component/AlarmFilterRow.kt b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/component/AlarmFilterRow.kt
new file mode 100644
index 00000000..f70659bc
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/component/AlarmFilterRow.kt
@@ -0,0 +1,49 @@
+package com.texthip.thip.ui.common.alarmpage.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.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.OptionChipButton
+
+@Composable
+fun AlarmFilterRow(
+    selectedStates: BooleanArray,
+    onToggle: (Int) -> Unit
+) {
+    Row(
+        horizontalArrangement = Arrangement.spacedBy(12.dp)
+    ) {
+        OptionChipButton(
+            text = stringResource(R.string.alarm_feed),
+            isFilled = true,
+            onClick = { onToggle(0) }
+        )
+        OptionChipButton(
+            text = stringResource(R.string.alarm_group),
+            isFilled = true,
+            onClick = { onToggle(1) }
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun AlarmFilterRowPreview() {
+    var selectedStates by remember { mutableStateOf(booleanArrayOf(false, false)) }
+
+    AlarmFilterRow(
+        selectedStates = selectedStates,
+        onToggle = { idx ->
+            selectedStates = selectedStates.copyOf().also { it[idx] = !it[idx] }
+        }
+    )
+}
+
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardAlarm.kt b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/component/CardAlarm.kt
similarity index 60%
rename from app/src/main/java/com/texthip/thip/ui/common/cards/CardAlarm.kt
rename to app/src/main/java/com/texthip/thip/ui/common/alarmpage/component/CardAlarm.kt
index afdeb777..4bc909f2 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/cards/CardAlarm.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/component/CardAlarm.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.common.cards
+package com.texthip.thip.ui.common.alarmpage.component
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
@@ -9,6 +9,8 @@ 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.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -24,6 +26,7 @@ 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.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
@@ -34,12 +37,15 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 
 
 @Composable
-fun NotificationCard(
+fun CardAlarm(
     modifier: Modifier = Modifier,
+    badgeText: String,
     title: String,
     message: String,
     timeAgo: String,
     isRead: Boolean = false,
+    containerColorUnread: Color = colors.DarkGrey02,  // 안읽음 상태의 배경색
+    containerColorRead: Color = colors.DarkGrey03, // 읽음 상태의 배경색
     onClick: () -> Unit = {}
 ) {
     Card(
@@ -47,7 +53,7 @@ fun NotificationCard(
             .fillMaxWidth()
             .clickable { onClick() },
         colors = CardDefaults.cardColors(
-            containerColor = if (isRead) colors.DarkGrey else colors.DarkGrey02
+            containerColor = if (isRead) containerColorRead else containerColorUnread
         ),
         elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
         shape = RoundedCornerShape(12.dp)
@@ -65,7 +71,6 @@ fun NotificationCard(
                 // 뱃지
                 Box(
                     modifier = Modifier
-                        .size(width = 40.dp, height = 24.dp)
                         .clip(RoundedCornerShape(13.dp))
                         .border(
                             width = 1.dp,
@@ -75,17 +80,20 @@ fun NotificationCard(
                     contentAlignment = Alignment.Center
                 ) {
                     Text(
-                        text = stringResource(R.string.group),
+                        modifier = Modifier
+                            .padding(horizontal = 10.dp, vertical = 2.dp),
+                        text = badgeText,
                         color = if (isRead) colors.Grey01 else colors.Grey,
                         style = typography.menu_sb600_s12_h20
                     )
                 }
 
-                Spacer(modifier = Modifier.width(12.dp))
+                Spacer(modifier = Modifier.width(8.dp))
 
                 // 내용 (제목, 빨간 점, 시간, 메시지)
                 Column(
-                    modifier = Modifier.weight(1f)
+                    modifier = Modifier.weight(1f),
+                    verticalArrangement = Arrangement.Center
                 ) {
                     Row(
                         modifier = Modifier.fillMaxWidth(),
@@ -93,7 +101,7 @@ fun NotificationCard(
                     ) {
                         Text(
                             text = title,
-                            style = typography.menu_sb600_s14_h24,
+                            style = typography.view_m500_s14,
                             color = if (isRead) colors.Grey01 else colors.White,
                             modifier = Modifier.weight(1f),
                             maxLines = 1,
@@ -103,28 +111,37 @@ fun NotificationCard(
                         Column(
                             horizontalAlignment = Alignment.End
                         ) {
-                            // 안읽음 상태일 때만 빨간 점
-                            if (!isRead) {
-                                Spacer(modifier = Modifier.width(8.dp))
-                                Box(
-                                    modifier = Modifier
-                                        .size(6.dp)
-                                        .clip(RoundedCornerShape(3.dp))
-                                        .background(color = colors.Red)
-                                )
+                            // 빨간 점을 위한 고정 공간 (항상 6dp 높이 유지)
+                            Box(
+                                modifier = Modifier
+                                    .size(6.dp),
+                                contentAlignment = Alignment.Center
+                            ) {
+                                // 안읽음 상태일 때만 빨간 점 표시
+                                if (!isRead) {
+                                    Box(
+                                        modifier = Modifier
+                                            .size(6.dp)
+                                            .clip(RoundedCornerShape(3.dp))
+                                            .background(color = colors.Red)
+                                    )
+                                }
                             }
 
                             Text(
-                                text = timeAgo + stringResource(R.string.time_ago),
-                                style = typography.view_m500_s12_h20,
+                                text = timeAgo,
+                                style = typography.timedate_r400_s11,
                                 color = if (isRead) colors.Grey02 else colors.Grey01,
+                                modifier = Modifier
+                                    .padding(top = 7.dp, end = 2.dp)
+                                    .offset(y = (-5).dp)
                             )
                         }
                     }
                 }
             }
 
-            Spacer(modifier = Modifier.width(12.dp))
+            Spacer(modifier = Modifier.height(10.dp))
 
             Text(
                 text = message,
@@ -147,22 +164,48 @@ fun PreviewNotificationCards() {
         verticalArrangement = Arrangement.spacedBy(8.dp)
     ) {
         // 안읽은 알림
-        NotificationCard(
+        CardAlarm(
             title = "같이 읽기를 시작했어요!",
+            badgeText = "모임",
             message = "한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다.",
-            timeAgo = "12",
+            timeAgo = "12시간 전",
             isRead = isRead
         ) {
             isRead = true
         }
 
         // 읽은 알림
-        NotificationCard(
+        CardAlarm(
             title = "같이 읽기를 시작했어요!",
+            badgeText = "모임",
             message = "한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다.",
-            timeAgo = "12",
+            timeAgo = "12시간 전",
             isRead = true
         )
+
+        CardAlarm(
+            title = "같이 읽기를 시작했어요!",
+            badgeText = "피드",
+            message = "한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다.",
+            timeAgo = "12시간 전",
+            isRead = false
+        )
+
+        CardAlarm(
+            title = "같이 읽기를 시작했어요!",
+            badgeText = "좋아요",
+            message = "한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다.",
+            timeAgo = "12시간 전",
+            isRead = isRead
+        )
+
+        CardAlarm(
+            title = "같이 읽기를 시작했어요!",
+            badgeText = "댓글",
+            message = "한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다.",
+            timeAgo = "12시간 전",
+            isRead = isRead
+        )
     }
 
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/alarmpage/mock/AlarmItem.kt b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/mock/AlarmItem.kt
new file mode 100644
index 00000000..84bc094f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/mock/AlarmItem.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.ui.common.alarmpage.mock
+
+data class AlarmItem(
+    val id: Int,
+    val badgeText: String,
+    val title: String,
+    val message: String,
+    val timeAgo: String,
+    var isRead: Boolean
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/alarmpage/screen/AlarmScreen.kt b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/screen/AlarmScreen.kt
new file mode 100644
index 00000000..3044e2e5
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/screen/AlarmScreen.kt
@@ -0,0 +1,129 @@
+package com.texthip.thip.ui.common.alarmpage.screen
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+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.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.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.alarmpage.component.AlarmFilterRow
+import com.texthip.thip.ui.common.alarmpage.mock.AlarmItem
+import com.texthip.thip.ui.common.alarmpage.component.CardAlarm
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+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 AlarmScreen(
+    alarmItems: List<AlarmItem>, 
+    onCardClick: (AlarmItem) -> Unit = {},  // 나중에 서버랑 연동할 때 사용
+    onNavigateBack: () -> Unit = {}
+) {
+    var selectedStates by remember { mutableStateOf(booleanArrayOf(false, false)) }
+    var alarms by remember { mutableStateOf(alarmItems) }
+
+    val filteredList = when {
+        selectedStates[0] && !selectedStates[1] -> alarms.filter { it.badgeText == stringResource(R.string.alarm_feed) }
+        !selectedStates[0] && selectedStates[1] -> alarms.filter { it.badgeText == stringResource(R.string.alarm_group) }
+        else -> alarms
+    }
+
+    Column(
+        Modifier
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            title = stringResource(R.string.alarm_string),
+            onLeftClick = onNavigateBack,
+        )
+        Column(
+            Modifier
+                .fillMaxSize()
+                .padding(horizontal = 20.dp)
+        ) {
+            Spacer(modifier = Modifier.height(20.dp))
+            AlarmFilterRow(
+                selectedStates = selectedStates, onToggle = { idx ->
+                    selectedStates = selectedStates.copyOf().also { it[idx] = !it[idx] }
+                })
+            Spacer(modifier = Modifier.height(20.dp))
+
+            if (filteredList.isEmpty()) {
+
+                Column(
+                    modifier = Modifier.fillMaxSize(),
+                    verticalArrangement = Arrangement.Center,
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    Text(
+                        text = stringResource(R.string.alarm_notification_comment),
+                        style = typography.smalltitle_sb600_s18_h24,
+                        color = colors.White
+                    )
+                }
+            } else {
+                LazyColumn(
+                    verticalArrangement = Arrangement.spacedBy(20.dp),
+                    contentPadding = PaddingValues(bottom = 20.dp),
+                    modifier = Modifier.fillMaxSize()
+                ) {
+                    items(filteredList, key = { it.id }) { alarm ->
+                        CardAlarm(
+                            badgeText = alarm.badgeText,
+                            title = alarm.title,
+                            message = alarm.message,
+                            timeAgo = alarm.timeAgo,
+                            isRead = alarm.isRead,
+                            onClick = {
+                                alarms = alarms.map {
+                                    if (it.id == alarm.id) it.copy(isRead = true) else it
+                                }
+                            })
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@Preview(showBackground = true)
+@Composable
+fun AlarmScreenPreview() {
+    ThipTheme {
+        AlarmScreen(
+            alarmItems = listOf(
+                AlarmItem(1, "피드", "내 글을 좋아합니다.", "user123님이 내 글에 좋아요를 눌렀어요.", "2", false),
+                AlarmItem(2, "모임", "같이 읽기를 시작했어요!", "모임방에서 20분 동안 같이 읽기가 시작되었어요!", "7", false),
+                AlarmItem(3, "피드", "내 글에 댓글이 달렸어요.", "user1: 진짜 공감합니다!", "2025.01.12", true),
+                AlarmItem(4, "모임", "투표가 시작되었어요!", "투표지를 먼저 열람합니다.", "17", false)
+            )
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun AlarmScreenEmptyPreview() {
+    ThipTheme {
+        AlarmScreen(
+            alarmItems = emptyList()
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/alarmpage/viewmodel/AlarmViewModel.kt b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/viewmodel/AlarmViewModel.kt
new file mode 100644
index 00000000..efa44466
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/viewmodel/AlarmViewModel.kt
@@ -0,0 +1,27 @@
+package com.texthip.thip.ui.common.alarmpage.viewmodel
+
+import androidx.lifecycle.ViewModel
+import com.texthip.thip.ui.common.alarmpage.mock.AlarmItem
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+
+class AlarmViewModel : ViewModel() {
+    private val _alarmItems = MutableStateFlow<List<AlarmItem>>(emptyList())
+    val alarmItems: StateFlow<List<AlarmItem>> = _alarmItems.asStateFlow()
+
+    // 알림 더미 데이터
+    init {
+        _alarmItems.value = listOf(
+            AlarmItem(1, "피드", "내 글을 좋아합니다.", "user123님이 내 글에 좋아요를 눌렀어요.", "2시간 전", false),
+            AlarmItem(2, "모임", "같이 읽기를 시작했어요!", "모임방에서 20분 동안 같이 읽기가 시작되었어요!", "7시간 전", false),
+            AlarmItem(4, "모임", "투표가 시작되었어요!", "투표지를 먼저 열람합니다.", "17시간 전", false),
+            AlarmItem(5, "피드", "팔로워가 새 글을 올렸어요.", "user456님이 새 리뷰를 작성했습니다.", "1일 전", true),
+            AlarmItem(6, "모임", "새로운 모임방 초대", "호르몬 체인지 완독하는 방에 초대되었습니다.", "2일 전", false)
+        )
+    }
+
+    fun onCardClick(item: AlarmItem) {
+        // TODO: 알림 카드 클릭 처리
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/bottomsheet/CustomBottomSheet.kt b/app/src/main/java/com/texthip/thip/ui/common/bottomsheet/CustomBottomSheet.kt
new file mode 100644
index 00000000..3eedc1e2
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/bottomsheet/CustomBottomSheet.kt
@@ -0,0 +1,168 @@
+package com.texthip.thip.ui.common.bottomsheet
+
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.detectVerticalDragGestures
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.utils.rooms.advancedImePadding
+import kotlinx.coroutines.launch
+
+private const val BOTTOM_SHEET_HIDDEN_OFFSET = 300f
+private const val BOTTOM_SHEET_VISIBLE_OFFSET = 0f
+private const val BOTTOM_SHEET_DISMISS_THRESHOLD = 100f
+private const val ANIMATION_DURATION = 300
+
+@Composable
+fun CustomBottomSheet(
+    onDismiss: () -> Unit,
+    content: @Composable ColumnScope.() -> Unit
+) {
+    val scope = rememberCoroutineScope()
+    val animatableOffset = remember { Animatable(BOTTOM_SHEET_HIDDEN_OFFSET) } // 시작 위치 아래
+    var offsetY by remember { mutableFloatStateOf(BOTTOM_SHEET_VISIBLE_OFFSET) }
+    var isDismissing by remember { mutableStateOf(false) }
+
+    // 등장 애니메이션
+    LaunchedEffect(Unit) {
+        animatableOffset.animateTo(
+            targetValue = BOTTOM_SHEET_VISIBLE_OFFSET,
+            animationSpec = tween(durationMillis = ANIMATION_DURATION)
+        )
+    }
+
+    // 바깥 클릭 감지
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(color = colors.Black30)
+            .clickable(
+                indication = null,
+                interactionSource = remember { MutableInteractionSource() }
+            ) {
+                if (!isDismissing) {
+                    isDismissing = true
+                    scope.launch {
+                        animatableOffset.animateTo(
+                            BOTTOM_SHEET_HIDDEN_OFFSET,
+                            tween(ANIMATION_DURATION)
+                        )
+                        onDismiss()
+                    }
+                }
+            }
+            .zIndex(1f)
+    )
+
+    // BottomSheet 본체
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .zIndex(2f),
+        contentAlignment = Alignment.BottomCenter
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .offset(y = (offsetY + animatableOffset.value).dp)
+                .advancedImePadding()
+                .background(
+                    color = colors.DarkGrey,
+                    shape = RoundedCornerShape(topEnd = 12.dp, topStart = 12.dp)
+                )
+                .pointerInput(Unit) {
+                    detectVerticalDragGestures(
+                        onVerticalDrag = { _, dragAmount ->
+                            if (dragAmount > 0) {
+                                offsetY += dragAmount / 2  // 아래로 드래그할 때만 적용
+                            }
+                        },
+                        onDragEnd = {
+                            if (offsetY > BOTTOM_SHEET_DISMISS_THRESHOLD && !isDismissing) {
+                                isDismissing = true
+                                scope.launch {
+                                    animatableOffset.animateTo(
+                                        BOTTOM_SHEET_HIDDEN_OFFSET,
+                                        tween(ANIMATION_DURATION)
+                                    )
+                                    onDismiss()
+                                }
+                            } else {
+                                offsetY = BOTTOM_SHEET_VISIBLE_OFFSET
+                            }
+                        }
+                    )
+                }
+                .clickable(enabled = true) {} // 내부 클릭 무시되지 않도록
+        ) {
+            Column(modifier = Modifier.fillMaxWidth()) {
+                content()
+            }
+        }
+    }
+}
+
+
+@Preview()
+@Composable
+fun PreviewCustomBottomSheet() {
+    var showSheet by remember { mutableStateOf(true) }
+
+    ThipTheme {
+        Box(Modifier.fillMaxSize()) {
+            Text(
+                text = "Main Content Area",
+                color = Color.White,
+                modifier = Modifier
+                    .align(Alignment.Center)
+            )
+
+            if (showSheet) {
+                CustomBottomSheet(
+                    onDismiss = { showSheet = false }
+                ) {
+                    Text(
+                        "바텀 시트 예시",
+                        color = Color.White,
+                        modifier = Modifier.padding(bottom = 16.dp)
+                    )
+                    Button(
+                        onClick = { showSheet = false },
+                        modifier = Modifier.fillMaxWidth()
+                    ) {
+                        Text("닫기", color = Color.Black)
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/common/bottomsheet/MenuBottomSheet.kt b/app/src/main/java/com/texthip/thip/ui/common/bottomsheet/MenuBottomSheet.kt
new file mode 100644
index 00000000..ebda7048
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/bottomsheet/MenuBottomSheet.kt
@@ -0,0 +1,84 @@
+package com.texthip.thip.ui.common.bottomsheet
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.group.room.mock.MenuBottomSheetItem
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun MenuBottomSheet(
+    items: List<MenuBottomSheetItem>,
+    onDismiss: () -> Unit
+) {
+    CustomBottomSheet(
+        onDismiss = onDismiss,
+    ) {
+        Column(modifier = Modifier.padding(20.dp)) {
+            items.forEachIndexed { index, item ->
+                if (index > 0) {
+                    Spacer(modifier = Modifier.height(8.dp))
+                    HorizontalDivider(modifier = Modifier.height(1.dp), color = colors.Grey03)
+                    Spacer(modifier = Modifier.height(8.dp))
+                }
+
+                Column(
+                    modifier = Modifier
+                        .height(50.dp)
+                        .padding(horizontal = 12.dp, vertical = 8.dp),
+                    verticalArrangement = Arrangement.Center
+                ) {
+                    Text(
+                        text = item.text,
+                        style = typography.menu_m500_s16_h24,
+                        color = item.color,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .clickable {
+                                item.onClick()
+                                onDismiss()
+                            }
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun MenuBottomSheetPreview() {
+    MenuBottomSheet(
+        items = listOf(
+            MenuBottomSheetItem(
+                text = stringResource(R.string.leave_room),
+                color = colors.White,
+                onClick = { }
+            ),
+            MenuBottomSheetItem(
+                text = stringResource(R.string.report_room),
+                color = colors.Red,
+                onClick = { }
+            ),
+            MenuBottomSheetItem(
+                text = stringResource(R.string.delete_room),
+                color = colors.Red,
+                onClick = { }
+            )
+        ),
+        onDismiss = {}
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBarButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBarButton.kt
new file mode 100644
index 00000000..9440c051
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBarButton.kt
@@ -0,0 +1,131 @@
+package com.texthip.thip.ui.common.buttons
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun ActionBarButton(
+    modifier: Modifier = Modifier,
+    isLiked: Boolean,
+    likeCount: Int,
+    commentCount: Int,
+    isSaveVisible: Boolean = false,
+    isSaved: Boolean = false,
+    isPinVisible: Boolean = false,
+    isLockIcon: Boolean = false,
+    onLikeClick: () -> Unit = {},
+    onCommentClick: () -> Unit = {},
+    onBookmarkClick: () -> Unit = {},
+    onPinClick: () -> Unit = {}
+) {
+    Row(
+        modifier = modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+            Row(
+                modifier = Modifier.clickable { onLikeClick() },
+                horizontalArrangement = Arrangement.spacedBy(2.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(
+                    painter = painterResource(if (isLiked) R.drawable.ic_heart_filled else R.drawable.ic_heart),
+                    contentDescription = null,
+                    tint = Color.Unspecified
+                )
+                Text(
+                    text = likeCount.toString(),
+                    style = typography.feedcopy_r400_s14_h20,
+                    color = colors.White,
+                )
+            }
+
+            Row(
+                modifier = Modifier.clickable { onCommentClick() },
+                horizontalArrangement = Arrangement.spacedBy(2.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_comment),
+                    contentDescription = null,
+                    tint = colors.White
+                )
+                Text(
+                    text = commentCount.toString(),
+                    style = typography.feedcopy_r400_s14_h20,
+                    color = colors.White,
+                )
+            }
+
+            if (isPinVisible) {
+                Icon(
+                    modifier = Modifier.clickable { onPinClick() },
+                    painter = painterResource(R.drawable.ic_pin),
+                    contentDescription = null,
+                    tint = colors.White
+                )
+            }
+        }
+
+        if (isSaveVisible) {
+            if (isLockIcon) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_lock),
+                    contentDescription = null,
+                    tint = Color.Unspecified
+                )
+            } else {
+                Icon(
+                    modifier = Modifier.clickable { onBookmarkClick() },
+                    painter = painterResource(
+                        if (isSaved) R.drawable.ic_save_filled else R.drawable.ic_save
+                    ),
+                    contentDescription = null,
+                    tint = Color.Unspecified
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun ActionBarButtonPreview() {
+    var isLiked by remember { mutableStateOf(false) }
+    var isSaved by remember { mutableStateOf(false) }
+
+    ActionBarButton(
+        isLiked = isLiked,
+        likeCount = 123,
+        commentCount = 45,
+        isSaveVisible = true,
+        isSaved = isSaved,
+        isPinVisible = false,
+        onLikeClick = { isLiked = !isLiked },
+        onCommentClick = {},
+        onBookmarkClick = { isSaved = !isSaved },
+        onPinClick = {},
+        isLockIcon = true
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBookButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBookButton.kt
index fd5ebe2f..1a109d7e 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBookButton.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBookButton.kt
@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
@@ -32,7 +33,7 @@ fun ActionBookButton(
 ) {
     Box(
         modifier = Modifier
-            .background(color = colors.DarkGrey, shape = RoundedCornerShape(12.dp))
+            .background(color = colors.DarkGrey02, shape = RoundedCornerShape(12.dp))
             .clickable {
                 onClick()
             }
@@ -51,16 +52,25 @@ fun ActionBookButton(
                 maxLines = 1
             )
 
+            // 저자명과 "저"를 분리
             Text(
-                text = bookAuthor + stringResource(R.string.author),
+                text = bookAuthor,
                 style = typography.info_r400_s12_h24,
                 color = colors.Grey,
-                modifier = Modifier.width(100.dp),
+                modifier = Modifier
+                    .widthIn(max = 80.dp)
+                    .padding(start = 8.dp),
                 textAlign = TextAlign.Right,
                 overflow = TextOverflow.Ellipsis,
                 maxLines = 1
             )
 
+            Text(
+                text = stringResource(R.string.author),
+                style = typography.info_r400_s12_h24,
+                color = colors.Grey,
+            )
+
             Icon(
                 painter = painterResource(R.drawable.ic_chevron),
                 contentDescription = null,
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt
index 33a0f0ec..9bcf0811 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt
@@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
@@ -31,9 +32,12 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 fun ActionMediumButton(
     text: String,
     icon: Painter? = null,
+    iconSize: Int = 24,
+    iconTint: Color = Color.Unspecified,
     contentColor: Color,
     backgroundColor: Color,
     hasRightIcon: Boolean = false,
+    hasRightPlusIcon: Boolean = false,
     modifier: Modifier = Modifier,
     onClick: () -> Unit = {},
 ) {
@@ -54,7 +58,8 @@ fun ActionMediumButton(
             Icon(
                 painter = icon,
                 contentDescription = null,
-                tint = contentColor,
+                tint = iconTint,
+                modifier = Modifier.size(iconSize.dp)
             )
         }
 
@@ -66,7 +71,7 @@ fun ActionMediumButton(
 
         if (hasRightIcon) {
             Icon(
-                painter = painterResource(R.drawable.ic_chevron),
+                painter = if (hasRightPlusIcon) painterResource(R.drawable.ic_plus) else painterResource(R.drawable.ic_chevron),
                 contentDescription = null,
                 tint = contentColor,
             )
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/ExpandableFloatingButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ExpandableFloatingButton.kt
index 763d2010..48b318e5 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/buttons/ExpandableFloatingButton.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/ExpandableFloatingButton.kt
@@ -51,7 +51,7 @@ fun ExpandableFloatingButton(
     Box(
         modifier = Modifier
             .fillMaxSize()
-            .padding(16.dp), // TODO: 화면에서 버튼 위치 조정
+            .padding(end = 20.dp, bottom = 32.dp),
         contentAlignment = Alignment.BottomEnd
     ) {
         Column(
@@ -65,7 +65,7 @@ fun ExpandableFloatingButton(
             ) {
                 Column(
                     modifier = Modifier
-                        .padding(bottom = 80.dp, end = 16.dp) // TODO: 화면에서 버튼 위치 조정
+                        .padding(bottom = 62.dp)
                         .width(184.dp)
                         .background(
                             color = colors.Black,
@@ -80,7 +80,6 @@ fun ExpandableFloatingButton(
                     verticalArrangement = Arrangement.spacedBy(16.dp)
                 ) {
                     menuItems.forEachIndexed { index, item ->
-//                        if (index > 0) Spacer(modifier = Modifier.height(16.dp))
                         MenuItem(
                             icon = item.icon,
                             text = item.text,
@@ -101,8 +100,7 @@ fun ExpandableFloatingButton(
             contentColor = colors.NeonGreen,
             shape = CircleShape,
             modifier = Modifier
-                .padding(16.dp)
-                .size(56.dp)
+                .size(50.dp)
                 .border(width = 2.dp, color = colors.NeonGreen50, shape = CircleShape)
         ) {
             Icon(
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt
index af36e038..f717013e 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt
@@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 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
@@ -42,13 +43,32 @@ fun FilterButton(
 ) {
     var expanded by remember { mutableStateOf(false) }
 
-    Column(modifier = modifier) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth(),
+        contentAlignment = Alignment.TopEnd
+    ) {
+        // 바깥 클릭 감지(expanded 상태에서만 보이도록 함)
+        if (expanded) {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = null
+                    ) {
+                        expanded = false
+                    }
+            )
+        }
+
+        // 버튼 영역
         Row(
             modifier = Modifier
-                .fillMaxWidth()
+                .height(36.dp)
                 .clickable(
                     interactionSource = remember { MutableInteractionSource() },
-                    indication = null // 클릭 효과 제거
+                    indication = null
                 ) { expanded = !expanded },
             horizontalArrangement = Arrangement.End,
             verticalAlignment = Alignment.CenterVertically
@@ -66,46 +86,41 @@ fun FilterButton(
                 tint = colors.Grey02,
                 modifier = Modifier.size(24.dp)
             )
-
         }
 
-        // 드롭다운 애니메이션 박스
+        // 드롭다운
         AnimatedVisibility(
             visible = expanded,
             enter = fadeIn(),
             exit = fadeOut()
         ) {
-            Box(
-                modifier = Modifier.fillMaxWidth(),
-                contentAlignment = Alignment.TopEnd
+            Column(
+                modifier = Modifier
+                    .padding(top = 36.dp) // 버튼 아래로 띄우기
+                    .width(144.dp)
+                    .border(
+                        width = 1.dp,
+                        color = colors.Grey01,
+                        shape = RoundedCornerShape(16.dp)
+                    )
+                    .background(color = colors.Black, shape = RoundedCornerShape(16.dp))
+                    .padding(vertical = 20.dp, horizontal = 12.dp)
+                    .align(Alignment.TopEnd), // 오버레이 위치 고정
+                verticalArrangement = Arrangement.spacedBy(16.dp)
             ) {
-                Column(
-                    modifier = Modifier
-                        .padding(top = 8.dp)
-                        .width(144.dp)
-                        .border(
-                            width = 1.dp,
-                            color = colors.Grey01,
-                            shape = RoundedCornerShape(16.dp)
-                        )
-                        .background(color = colors.Black, shape = RoundedCornerShape(16.dp))
-                        .padding(vertical = 20.dp, horizontal = 12.dp),
-                    verticalArrangement = Arrangement.spacedBy(16.dp)
-                ) {
-                    options.forEach { option ->
-                        val isSelected = option == selectedOption
-                        Text(
-                            text = option,
-                            color = if (isSelected) colors.White else colors.Grey02,
-                            style = typography.feedcopy_r400_s14_h20,
-                            modifier = Modifier
-                                .fillMaxWidth()
-                                .clickable {
-                                    onOptionSelected(option)
-                                    expanded = false
-                                }
-                        )
-                    }
+                options.forEach { option ->
+                    val isSelected = option == selectedOption
+                    Text(
+                        text = option,
+                        color = if (isSelected) colors.White else colors.Grey02,
+                        style = typography.feedcopy_r400_s14_h20,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .clickable {
+                                onOptionSelected(option)
+                                expanded = false
+                            }
+                    )
                 }
             }
         }
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterChipButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterChipButton.kt
new file mode 100644
index 00000000..06664188
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterChipButton.kt
@@ -0,0 +1,79 @@
+package com.texthip.thip.ui.common.buttons
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun FilterChipButton(
+    modifier: Modifier = Modifier,
+    text: String,
+    isSelected: Boolean,
+    onClick: () -> Unit,
+    onCloseClick: () -> Unit
+) {
+    Row(
+        modifier = modifier
+            .height(36.dp)
+            .background(
+                color = if (isSelected) colors.Purple else colors.DarkGrey,
+                shape = RoundedCornerShape(20.dp)
+            )
+            .padding(start = 12.dp, end = if (isSelected) 8.dp else 12.dp)
+            .clickable(
+                interactionSource = remember { MutableInteractionSource() },
+                indication = null // 클릭 효과 제거
+            ) {
+                onClick()
+            },
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        Text(
+            text = text,
+            style = typography.menu_r400_s14_h24,
+            color = colors.White
+        )
+
+        if (isSelected) {
+            Icon(
+                painter = painterResource(R.drawable.ic_x),
+                contentDescription = "Close Icon",
+                tint = colors.White,
+                modifier = Modifier.clickable(onClick = onCloseClick)
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun FilterChipButtonPreview() {
+    var isSelected by remember { mutableStateOf(false) }
+    FilterChipButton(
+        text = "페이지별 보기",
+        isSelected = isSelected,
+        onClick = { isSelected = !isSelected },
+        onCloseClick = { isSelected = false }
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt
index 976ae34d..db153970 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt
@@ -24,13 +24,14 @@ import com.texthip.thip.ui.theme.ThipTheme.colors
 
 @Composable
 fun FloatingButton(
+    modifier: Modifier = Modifier,
     icon: Painter,
     onClick: () -> Unit = { }
 ) {
     var expanded by remember { mutableStateOf(false) }
 
     Box(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxSize()
             .padding(end = 20.dp, bottom = 32.dp),
         contentAlignment = Alignment.BottomEnd
@@ -45,7 +46,6 @@ fun FloatingButton(
             contentColor = colors.NeonGreen,
             shape = CircleShape,
             modifier = Modifier
-                .padding(16.dp)
                 .size(56.dp)
                 .border(width = 2.dp, color = colors.NeonGreen50, shape = CircleShape)
         ) {
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/FormButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/FormButton.kt
new file mode 100644
index 00000000..8d5f2b33
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/FormButton.kt
@@ -0,0 +1,101 @@
+package com.texthip.thip.ui.common.buttons
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+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.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.PageTextField
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun FormButton(
+    modifier: Modifier = Modifier,
+    firstPage: String,
+    onFirstPageChange: (String) -> Unit,
+    lastPage: String,
+    onLastPageChange: (String) -> Unit,
+    onFinishClick: () -> Unit
+) {
+    val isSendEnabled = firstPage.isNotBlank() || lastPage.isNotBlank()
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(36.dp)
+            .background(color = colors.DarkGrey, shape = RoundedCornerShape(20.dp))
+            .padding(start = 12.dp, top = 4.dp, end = 4.dp, bottom = 4.dp),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            PageTextField(
+                text = firstPage,
+                onTextChange = onFirstPageChange
+            )
+
+            Text(
+                text = stringResource(R.string.tilde),
+                style = typography.copy_r400_s14,
+                color = colors.White
+            )
+
+            PageTextField(
+                text = lastPage,
+                onTextChange = onLastPageChange
+            )
+
+            Text(
+                text = stringResource(R.string.page),
+                style = typography.copy_r400_s14,
+                color = colors.White
+            )
+
+            SendButton(
+                icon = R.drawable.ic_reset,
+                enabled = isSendEnabled
+            ) {
+                onFirstPageChange("")
+                onLastPageChange("")
+            }
+        }
+
+        SendButton(
+            icon = R.drawable.ic_check,
+            onClick = onFinishClick
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun FormButtonPreview() {
+    var firstPage by rememberSaveable { mutableStateOf("") }
+    var lastPage by rememberSaveable { mutableStateOf("") }
+
+    FormButton(
+        firstPage = firstPage,
+        onFirstPageChange = { firstPage = it },
+        lastPage = lastPage,
+        onLastPageChange = { lastPage = it },
+        onFinishClick = {}
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/GenreChipButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/GenreChipButton.kt
index 6cd73363..95aa52db 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/buttons/GenreChipButton.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/GenreChipButton.kt
@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -16,9 +17,9 @@ 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.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
@@ -29,29 +30,33 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 fun GenreChipButton(
     modifier: Modifier = Modifier,
     text: String,
-    onClick: () -> Unit = { }
+    onClick: () -> Unit = {},
+    onCloseClick: () -> Unit = {}
 ) {
     Box(
         modifier = modifier
+            .height(40.dp)
+            .clip(RoundedCornerShape(20.dp))
+            .background(color = Color.Transparent, shape = RoundedCornerShape(12.dp))
+            .clickable {
+                onClick()
+            }
             .border(
                 width = 1.dp,
-                color = colors.White,
+                color = colors.Grey02,
                 shape = RoundedCornerShape(20.dp)
             )
-            .background(color = Color.Transparent, shape = RoundedCornerShape(12.dp))
-            .padding(top = 4.dp, bottom = 4.dp, end = 8.dp, start = 12.dp)
-            .clickable {
-                onClick()
-            },
+            .padding(top = 8.dp, bottom = 8.dp, end = 8.dp, start = 12.dp),
+
         contentAlignment = Alignment.Center,
     ) {
         Row(
             verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(2.dp),
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
         ) {
             Text(
                 text = text,
-                color = colors.White,
+                color = colors.Grey01,
                 style = typography.info_r400_s12,
             )
             Icon(
@@ -59,6 +64,9 @@ fun GenreChipButton(
                 contentDescription = null,
                 tint = Color.Unspecified,
                 modifier = Modifier
+                    .clickable {
+                        onCloseClick()
+                    }
                     .size(20.dp)
             )
         }
@@ -75,7 +83,7 @@ private fun GenreChipButtonPreview() {
         verticalArrangement = Arrangement.spacedBy(30.dp, Alignment.CenterVertically),
     ) {
         GenreChipButton(
-            text = stringResource(R.string.essay),
+            text = "책",
         )
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/GenreChipRow.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/GenreChipRow.kt
new file mode 100644
index 00000000..47af29a7
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/GenreChipRow.kt
@@ -0,0 +1,138 @@
+package com.texthip.thip.ui.common.buttons
+
+import android.annotation.SuppressLint
+import androidx.compose.foundation.layout.Arrangement
+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.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.platform.LocalConfiguration
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.ui.theme.ThipTheme
+
+@SuppressLint("ConfigurationScreenWidthHeight")
+@Composable
+fun GenreChipRow(
+    modifier: Modifier = Modifier.width(4.dp),
+    genres: List<String>,
+    selectedIndex: Int,
+    onSelect: (Int) -> Unit,
+    horizontalArrangement: Arrangement.Horizontal = Arrangement.Center
+) {
+    val configuration = LocalConfiguration.current
+    val screenWidthDp = configuration.screenWidthDp
+    
+    if (screenWidthDp < 360) {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Row(
+                horizontalArrangement = Arrangement.Center
+            ) {
+                genres.take(3).forEachIndexed { idx, genre ->
+                    OptionChipButton(
+                        modifier = Modifier
+                            .clip(RoundedCornerShape(20.dp)),
+                        text = genre,
+                        isFilled = true,
+                        isSelected = selectedIndex == idx,
+                        onClick = {
+                            if (selectedIndex == idx) {
+                                onSelect(-1)
+                            } else {
+                                onSelect(idx)
+                            }
+                        }
+                    )
+                    if (idx < 2) {
+                        Spacer(modifier = modifier)
+                    }
+                }
+            }
+            Spacer(modifier = Modifier.height(8.dp))
+
+            Row(
+                horizontalArrangement = Arrangement.Center
+            ) {
+                genres.drop(3).forEachIndexed { relativeIdx, genre ->
+                    val idx = relativeIdx + 3
+                    OptionChipButton(
+                        modifier = Modifier
+                            .clip(RoundedCornerShape(20.dp)),
+                        text = genre,
+                        isFilled = true,
+                        isSelected = selectedIndex == idx,
+                        onClick = {
+                            if (selectedIndex == idx) {
+                                onSelect(-1)
+                            } else {
+                                onSelect(idx)
+                            }
+                        }
+                    )
+                    if (relativeIdx < genres.drop(3).size - 1) {
+                        Spacer(modifier = modifier)
+                    }
+                }
+            }
+        }
+    } else {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = horizontalArrangement
+        ) {
+            genres.forEachIndexed { idx, genre ->
+                OptionChipButton(
+                    modifier = Modifier
+                        .clip(RoundedCornerShape(20.dp)),
+                    text = genre,
+                    isFilled = true,
+                    isSelected = selectedIndex == idx,
+                    onClick = {
+                        if (selectedIndex == idx) {
+                            onSelect(-1)
+                        } else {
+                            onSelect(idx)
+                        }
+                    }
+                )
+                if (idx < genres.size - 1) {
+                    Spacer(modifier = modifier)
+                }
+            }
+        }
+    }
+}
+
+@Preview(name = "Normal Screen (>=360dp)", widthDp = 400)
+@Composable
+fun PreviewGenreChipRowNormal() {
+    ThipTheme {
+        GenreChipRow(
+            genres = listOf("문학", "과학·IT", "사회과학", "인문학", "예술"),
+            selectedIndex = 0,
+            onSelect = {}
+        )
+    }
+}
+
+@Preview(name = "Small Screen (<360dp)", widthDp = 320)
+@Composable
+fun PreviewGenreChipRowSmall() {
+    ThipTheme {
+        GenreChipRow(
+            genres = listOf("문학", "과학·IT", "사회과학", "인문학", "예술"),
+            selectedIndex = 2,
+            onSelect = {}
+        )
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt
index f30320b7..3a31dec5 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt
@@ -23,28 +23,35 @@ 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.clip
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.texthip.thip.data.model.rooms.response.VoteItems
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 
 
 @Composable
 fun GroupVoteButton(
-    options: List<String>,
-    voteResults: List<Int>
+    modifier: Modifier = Modifier,
+    voteItems: List<VoteItems>,
+    selectedIndex: Int?, // 선택한 인덱스
+    hasVoted: Boolean = false, // 투표 여부
+    onOptionSelected: (Int?) -> Unit
 ) {
-    var selectedIndex by remember { mutableStateOf<Int?>(null) }
+    val totalVotes = voteItems.sumOf { it.count }
 
     Column(
-        modifier = Modifier
-            .fillMaxWidth(),
-        verticalArrangement = Arrangement.spacedBy(12.dp)
+        modifier = modifier.fillMaxWidth(),
+        verticalArrangement = Arrangement.spacedBy(10.dp)
     ) {
-        options.forEachIndexed { index, option ->
+        voteItems.forEachIndexed { index, item ->
             val isSelected = selectedIndex == index
-            val hasVoted = selectedIndex != null
-            val votePercent = if (hasVoted) voteResults.getOrNull(index)?.coerceIn(0, 100) ?: 0 else 0
+            val votePercent = if (totalVotes > 0) {
+                (item.count.toFloat() / totalVotes * 100).toInt()
+            } else {
+                0
+            }
 
             val animatedPercent by animateFloatAsState(
                 targetValue = votePercent / 100f,
@@ -69,22 +76,23 @@ fun GroupVoteButton(
             Box(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .background(color = backgroundColor, shape = RoundedCornerShape(12.dp))
                     .height(44.dp)
+                    .clip(RoundedCornerShape(12.dp))
+                    .background(color = backgroundColor)
                     .clickable {
-                        selectedIndex = if (isSelected) null else index
+                        if (isSelected) {
+                            onOptionSelected(null)
+                        } else {
+                            onOptionSelected(index)
+                        }
                     }
             ) {
-                // 퍼센트 채우기
                 if (hasVoted) {
                     Box(
                         modifier = Modifier
                             .fillMaxHeight()
                             .fillMaxWidth(animatedPercent)
-                            .background(
-                                color = percentBarColor,
-                                shape = RoundedCornerShape(topStart = 12.dp, bottomStart = 12.dp)
-                            )
+                            .background(color = percentBarColor)
                     )
                 }
 
@@ -96,13 +104,13 @@ fun GroupVoteButton(
                     horizontalArrangement = Arrangement.SpaceBetween
                 ) {
                     Text(
-                        text = "${index + 1}. $option",
+                        text = "${index + 1}. ${item.itemName}",
                         color = textColor,
                         style = fontStyle
                     )
                     if (hasVoted) {
                         Text(
-                            text = "${votePercent}%",
+                            text = "${item.count}표",
                             color = textColor,
                             style = fontStyle
                         )
@@ -116,15 +124,37 @@ fun GroupVoteButton(
 @Preview
 @Composable
 private fun GroupVoteButtonPreview() {
-    val options = listOf("밥", "국수", "고기")
-    val results = listOf(20, 30, 50)
+    var selected by remember { mutableStateOf<Int?>(null) }
+    var voteItems by remember {
+        mutableStateOf(
+            listOf(
+                VoteItems(1, "밥", 25, false),
+                VoteItems(2, "국수", 35, false),
+                VoteItems(3, "고기", 40, false)
+            )
+        )
+    }
 
-    Column(
-        modifier = Modifier.fillMaxSize()
-    ) {
+    val hasVoted = voteItems.any { it.isVoted }
+
+    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
         GroupVoteButton(
-            options = options,
-            voteResults = results
+            voteItems = voteItems,
+            selectedIndex = selected,
+            hasVoted = hasVoted,
+            onOptionSelected = {
+                if (selected == it) {
+                    // ✅ 이미 선택한 항목을 다시 클릭한 경우: 취소 처리
+                    selected = null
+                    voteItems = voteItems.map { it.copy(isVoted = false) }
+                } else {
+                    // ✅ 새로운 항목 선택
+                    selected = it
+                    voteItems = voteItems.mapIndexed { index, item ->
+                        item.copy(isVoted = index == it)
+                    }
+                }
+            }
         )
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/MenuItemButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/MenuItemButton.kt
new file mode 100644
index 00000000..34abd394
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/MenuItemButton.kt
@@ -0,0 +1,89 @@
+package com.texthip.thip.ui.common.buttons
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+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.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.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.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun MenuItemButton(
+    text: String,
+    icon: Painter? = null,
+    contentColor: Color,
+    backgroundColor: Color,
+    hasRightIcon: Boolean = false,
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit = {},
+) {
+    val hasLeftIcon = icon != null
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(56.dp)
+            .background(color = backgroundColor, shape = RoundedCornerShape(12.dp))
+            .clickable(onClick = onClick)
+            .padding(horizontal = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            if (hasLeftIcon) {
+                Icon(
+                    painter = icon,
+                    contentDescription = null,
+                    tint = contentColor,
+                )
+                Spacer(modifier = Modifier.width(12.dp))
+            }
+            Text(
+                text = text,
+                color = contentColor,
+                style = typography.smalltitle_sb600_s16_h24,
+            )
+        }
+        if (hasRightIcon) {
+            Icon(
+                painter = painterResource(R.drawable.ic_chevron),
+                contentDescription = null,
+                tint = contentColor,
+            )
+        }
+
+    }
+}
+
+@Preview
+@Composable
+private fun MenuItemButtonPreview() {
+    MenuItemButton(
+        text = stringResource(R.string.saved),
+        icon = painterResource(R.drawable.ic_save),
+        contentColor = colors.White,
+        backgroundColor = colors.DarkGrey02,
+        hasRightIcon = true,
+        modifier = Modifier
+            .fillMaxWidth(),
+        onClick = {}
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/OptionChipButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/OptionChipButton.kt
index 22069b2e..66de672e 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/buttons/OptionChipButton.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/OptionChipButton.kt
@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
@@ -19,6 +20,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.texthip.thip.R
@@ -30,22 +32,30 @@ fun OptionChipButton(
     modifier: Modifier = Modifier,
     text: String,
     isFilled: Boolean = false,
+    isSelected: Boolean? = null,
+    enabled: Boolean = true,
+    textStyle: TextStyle = typography.info_r400_s12,
     onClick: () -> Unit,
+    onDisabledClick: () -> Unit = { }
 ) {
     var isClicked by remember { mutableStateOf(false) }
+    val checked = isSelected ?: isClicked
 
     val textColor = when {
+        !enabled -> colors.DarkGrey
         isFilled -> colors.White
-        isClicked -> colors.Purple
+        checked -> colors.Purple
         else -> colors.Grey01
     }
     val backgroundColor = when {
-        isFilled && isClicked -> colors.Purple
+        !enabled && isFilled -> colors.DarkGrey02
+        isFilled && checked -> colors.Purple
         isFilled -> colors.DarkGrey
         else -> Color.Transparent
     }
     val borderColor = when {
-        !isFilled && isClicked -> colors.Purple
+        !enabled -> colors.DarkGrey02
+        !isFilled && checked -> colors.Purple
         !isFilled -> colors.Grey02
         else -> Color.Transparent
     }
@@ -62,15 +72,20 @@ fun OptionChipButton(
                 shape = RoundedCornerShape(20.dp)
             )
             .clickable {
-                isClicked = !isClicked
-                onClick()
+                if (enabled) {
+                    if (isSelected == null) isClicked = !isClicked
+                    onClick()
+                } else {
+                    onDisabledClick.invoke()
+                }
             }
-            .padding(vertical = 8.dp, horizontal = 12.dp),
+            .height(30.dp)
+            .padding(horizontal = 12.dp),
         contentAlignment = Alignment.Center,
     ) {
         Text(
             text = text,
-            style = typography.info_r400_s12,
+            style = textStyle,
             color = textColor
         )
     }
diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/SendButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/SendButton.kt
new file mode 100644
index 00000000..b238d471
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/SendButton.kt
@@ -0,0 +1,69 @@
+package com.texthip.thip.ui.common.buttons
+
+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.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+
+@Composable
+fun SendButton(
+    modifier: Modifier = Modifier,
+    icon: Int,
+    enabled: Boolean = true,
+    onClick: () -> Unit = {}
+) {
+    Box(
+        modifier = modifier
+            .background(
+                color = if (enabled) colors.Purple else colors.Grey02,
+                shape = RoundedCornerShape(20.dp)
+            )
+            .let {
+                if (enabled) it.clickable(onClick = onClick) else it
+            }
+            .padding(vertical = 2.dp, horizontal = 9.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(
+            painter = painterResource(id = icon),
+            contentDescription = "Send Icon",
+            tint = colors.White,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun SendButtonPreview() {
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        // 비활성 상태
+        SendButton(
+            icon = R.drawable.ic_send,
+            enabled = false,
+            onClick = { }
+        )
+
+        // 활성 상태
+        SendButton(
+            icon = R.drawable.ic_send,
+            onClick = { }
+        )
+    }
+}
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..16eeeb7c
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/SubGenreChipRow.kt
@@ -0,0 +1,66 @@
+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.Alignment
+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,
+    horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally
+) {
+    FlowRow(
+        modifier = Modifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.spacedBy(8.dp, horizontalAlignment),
+        verticalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        val isLimitReached = selectedGenres.size >= 5
+
+        subGenres.forEach { genre ->
+            val isSelected = selectedGenres.contains(genre)
+            val isEnabled = isSelected || !isLimitReached
+
+            OptionChipButton(
+                text = genre,
+                isSelected = isSelected,
+                isFilled = false,
+                enabled = isEnabled,
+                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/common/buttons/ToggleSwitchButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ToggleSwitchButton.kt
index 97e4854b..4e3f8c07 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/buttons/ToggleSwitchButton.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/ToggleSwitchButton.kt
@@ -2,6 +2,7 @@ package com.texthip.thip.ui.common.buttons
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Switch
@@ -20,22 +21,28 @@ import com.texthip.thip.R
 import com.texthip.thip.ui.theme.ThipTheme.colors
 
 @Composable
-fun ToggleSwitchButton() {
-    var isChecked by remember { mutableStateOf(true) }
-
+fun ToggleSwitchButton(
+    isChecked: Boolean,
+    enabled: Boolean = true,
+    onToggleChange: (Boolean) -> Unit
+) {
     Switch(
-        modifier = Modifier.padding(4.dp),
+        modifier = Modifier.height(30.dp),
         checked = isChecked,
-        onCheckedChange = {
-            isChecked = it
-        },
+        onCheckedChange = onToggleChange,
         colors = SwitchDefaults.colors(
             checkedThumbColor = colors.White,
+            disabledCheckedThumbColor = colors.White,
             checkedTrackColor = colors.Purple,
+            disabledCheckedTrackColor = colors.Purple,
             uncheckedThumbColor = colors.White,
+            disabledUncheckedThumbColor = colors.White,
             uncheckedTrackColor = colors.DarkGrey,
+            disabledUncheckedTrackColor = colors.DarkGrey,
             uncheckedBorderColor = Color.Transparent,
+            disabledUncheckedBorderColor = Color.Transparent,
         ),
+        enabled = enabled,
         thumbContent = {
             Icon(
                 painter = painterResource(R.drawable.ic_circle),
@@ -49,11 +56,16 @@ fun ToggleSwitchButton() {
 @Preview
 @Composable
 private fun ToggleSwitchButtonPreview() {
+    var isChecked by remember { mutableStateOf(true) }
+
     Column(
         modifier = Modifier
             .fillMaxSize()
             .padding(30.dp)
     ) {
-        ToggleSwitchButton()
+        ToggleSwitchButton(
+            isChecked = isChecked,
+            onToggleChange = { isChecked = it }
+        )
     }
 }
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardBookList.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardBookList.kt
index 544a6555..14c97c32 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/cards/CardBookList.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/cards/CardBookList.kt
@@ -1,13 +1,11 @@
 package com.texthip.thip.ui.common.cards
 
-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.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
@@ -25,11 +23,11 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
 import com.texthip.thip.R
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
@@ -40,30 +38,25 @@ fun CardBookList(
     title: String,
     author: String,
     publisher: String,
-    imageRes: Int? = R.drawable.bookcover_sample, // 기본 이미지 리소스
+    imageUrl: String? = null, // API에서 받은 이미지 URL
+    showBookmark: Boolean = false,
     isBookmarked: Boolean = false,
-    onBookmarkClick: () -> Unit = {}
+    onBookmarkClick: () -> Unit = {},
+    onClick: () -> Unit = {},
 ) {
     Row(
         modifier = modifier
             .fillMaxWidth()
-            .background(Color.Transparent),
+            .background(Color.Transparent)
+            .clickable { onClick() },
     ) {
         // 책 이미지
-        Box(
-            modifier = Modifier
-                .size(width = 80.dp, height = 108.dp)
-        ) {
-
-            imageRes?.let {
-                Image(
-                    painter = painterResource(id = it),
-                    contentDescription = null,
-                    modifier = Modifier.fillMaxSize(),
-                    contentScale = ContentScale.Crop
-                )
-            }
-        }
+        AsyncImage(
+            model = imageUrl ?: R.drawable.img_book_cover_sample,
+            contentDescription = "책 이미지",
+            modifier = Modifier.size(width = 80.dp, height = 108.dp),
+            contentScale = ContentScale.Crop
+        )
 
         Spacer(modifier = Modifier.width(12.dp))
 
@@ -89,15 +82,19 @@ fun CardBookList(
 
         Spacer(modifier = Modifier.width(12.dp))
 
-        IconButton(
-            onClick = onBookmarkClick,
-            modifier = Modifier.size(24.dp)
-        ) {
-            Icon(
-                imageVector = if (isBookmarked) ImageVector.vectorResource(R.drawable.ic_save_filled) else ImageVector.vectorResource(R.drawable.ic_save),
-                contentDescription = "북마크",
-                tint = if (isBookmarked) colors.Purple else colors.Grey01
-            )
+        if(showBookmark) {
+            IconButton(
+                onClick = onBookmarkClick,
+                modifier = Modifier.size(24.dp)
+            ) {
+                Icon(
+                    imageVector = if (isBookmarked) ImageVector.vectorResource(R.drawable.ic_save_filled) else ImageVector.vectorResource(
+                        R.drawable.ic_save
+                    ),
+                    contentDescription = "북마크",
+                    tint = if (isBookmarked) colors.Purple else colors.Grey01
+                )
+            }
         }
     }
 }
@@ -107,6 +104,7 @@ fun CardBookList(
 @Composable
 fun PreviewBookTitleCard() {
     var isBookmarked by remember { mutableStateOf(false) }
+    var showBookmark by remember { mutableStateOf(true) }
 
     Column(
         modifier = Modifier.padding(16.dp),
@@ -116,9 +114,9 @@ fun PreviewBookTitleCard() {
             title = "책제목입니다.책제목입니다.책제목입니다.책제목입니다.책제목입니다.책제목입니다.",
             author = "리처드 도킨스",
             publisher = "을유문화사",
+            showBookmark = showBookmark,
             isBookmarked = isBookmarked,
             onBookmarkClick = { isBookmarked = !isBookmarked }
         )
     }
-
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardBookSearch.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardBookSearch.kt
index 1bc7fa03..15cb00a6 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/cards/CardBookSearch.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/cards/CardBookSearch.kt
@@ -1,13 +1,10 @@
 package com.texthip.thip.ui.common.cards
 
-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.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -17,9 +14,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
 import com.texthip.thip.R
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
@@ -28,40 +25,33 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 @Composable
 fun CardBookSearch(
     modifier: Modifier = Modifier,
-    number: Int,
+    number: Int? = null,
     title: String,
-    imageRes: Int? = R.drawable.bookcover_sample, // 기본 이미지 리소스
+    imageUrl: String? = null, // API에서 받은 이미지 URL
     onClick: () -> Unit = {}
 ) {
     Row(
         modifier = modifier
             .fillMaxWidth()
-            .clickable { onClick() }
-            .padding(vertical = 8.dp),
+            .clickable { onClick() },
         verticalAlignment = Alignment.CenterVertically
     ) {
-        // 넘버
-        Text(
-            text = "$number.",
-            style = typography.menu_m500_s16_h24,
-            color = colors.White,
-            modifier = Modifier.padding(end = 12.dp)
-        )
+        number?.let {
+            Text(
+                text = "$it. ",
+                style = typography.menu_m500_s16_h24,
+                color = colors.White,
+                modifier = Modifier.padding(end = 4.dp)
+            )
+        }
 
         // 이미지
-        Box(
-            modifier = Modifier
-                .size(width = 45.dp, height = 60.dp)
-        ) {
-            imageRes?.let {
-                Image(
-                    painter = painterResource(id = it),
-                    contentDescription = null,
-                    modifier = Modifier.fillMaxSize(),
-                    contentScale = ContentScale.Crop
-                )
-            }
-        }
+        AsyncImage(
+            model = imageUrl ?: R.drawable.img_book_cover_sample,
+            contentDescription = "책 이미지",
+            modifier = Modifier.size(width = 45.dp, height = 60.dp),
+            contentScale = ContentScale.Crop
+        )
 
         Spacer(modifier = Modifier.width(8.dp))
 
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardChat.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardChat.kt
new file mode 100644
index 00000000..76efaaea
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/cards/CardChat.kt
@@ -0,0 +1,70 @@
+package com.texthip.thip.ui.common.cards
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun CardChat(
+    title: String,
+    subtitle: String,
+    onClick: () -> Unit = {},
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(color = colors.DarkGrey02, shape = RoundedCornerShape(12.dp))
+            .padding(vertical = 16.dp, horizontal = 12.dp)
+            .clickable { onClick() },
+        verticalArrangement = Arrangement.spacedBy(12.dp)
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Text(
+                text = title,
+                style = typography.smalltitle_sb600_s16_h24,
+                color = colors.White,
+            )
+
+            Icon(
+                painter = painterResource(R.drawable.ic_chevron),
+                contentDescription = "Chevron Icon",
+                tint = colors.Grey02,
+            )
+        }
+
+        Text(
+            text = subtitle,
+            style = typography.info_m500_s12,
+            color = colors.Grey,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun CardChatPreview() {
+    CardChat(
+        title = "출석체크",
+        subtitle = "모임방 멤버들과 간단한 인사를 나눠보세요!",
+    ) {}
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardCommentGroup.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardCommentGroup.kt
new file mode 100644
index 00000000..b2305a6f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/cards/CardCommentGroup.kt
@@ -0,0 +1,60 @@
+package com.texthip.thip.ui.common.cards
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.data.model.rooms.response.TodayCommentList
+import com.texthip.thip.ui.common.header.ProfileBarWithDate
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun CardCommentGroup(
+    data: TodayCommentList,
+    onMenuClick: () -> Unit
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 20.dp)
+    ) {
+        ProfileBarWithDate(
+            profileImage = data.creatorProfileImageUrl,
+            nickname = data.creatorNickname,
+            dateText = data.postDate,
+            onMenuClick = onMenuClick
+        )
+        Spacer(Modifier.height(8.dp))
+        Text(
+            text = data.todayComment,
+            style = typography.feedcopy_r400_s14_h20,
+            color = colors.Grey
+
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun CardCommentGroupPreview() {
+    CardCommentGroup(
+        data = TodayCommentList(
+            attendanceCheckId = 1,
+            creatorId = 1,
+            creatorProfileImageUrl = "",
+            creatorNickname = "user.01",
+            todayComment = "이것은 그룹 채팅의 댓글입니다. 이곳에 댓글 내용을 작성할 수 있습니다. 여러 줄로 작성해도 됩니다.",
+            postDate = "11시간 전",
+            date = "2025-08-18",
+            isWriter = false
+        ),
+        onMenuClick = {}
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardInputBook.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardInputBook.kt
index e6b322af..b154ee90 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/cards/CardInputBook.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/cards/CardInputBook.kt
@@ -24,6 +24,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.AsyncImage
 import com.texthip.thip.R
 import com.texthip.thip.ui.common.buttons.OutlinedButton
 import com.texthip.thip.ui.theme.ThipTheme.colors
@@ -34,7 +35,9 @@ fun CardInputBook(
     modifier: Modifier = Modifier,
     title: String,
     author: String,
-    imageRes: Int? = R.drawable.bookcover_sample, // 기본 이미지 리소스
+    imageUrl: String? = null, // 이미지 URL (AsyncImage 사용)
+    imageRes: Int? = R.drawable.img_book_cover_sample, // 기본 이미지 리소스 (fallback)
+    showChangeButton: Boolean = true, // 변경 버튼 표시 여부
     onChangeClick: () -> Unit = {}
 ) {
     Row(
@@ -47,14 +50,26 @@ fun CardInputBook(
             modifier = Modifier
                 .size(width = 60.dp, height = 80.dp)
         ) {
-
-            imageRes?.let {
-                Image(
-                    painter = painterResource(id = it),
+            if (!imageUrl.isNullOrBlank()) {
+                // URL 이미지가 있는 경우 AsyncImage 사용
+                AsyncImage(
+                    model = imageUrl,
                     contentDescription = null,
                     modifier = Modifier.fillMaxSize(),
-                    contentScale = ContentScale.Crop
+                    contentScale = ContentScale.Crop,
+                    fallback = imageRes?.let { painterResource(id = it) },
+                    error = imageRes?.let { painterResource(id = it) }
                 )
+            } else {
+                // URL이 없는 경우 기본 이미지 리소스 사용
+                imageRes?.let {
+                    Image(
+                        painter = painterResource(id = it),
+                        contentDescription = null,
+                        modifier = Modifier.fillMaxSize(),
+                        contentScale = ContentScale.Crop
+                    )
+                }
             }
         }
 
@@ -74,22 +89,26 @@ fun CardInputBook(
             )
             Spacer(modifier = Modifier.height(8.dp))
             Text(
-                text = "$author 저",
+                text = stringResource(R.string.card_input_author, author),
                 style = typography.view_m500_s12_h20,
-                color = colors.Grey01
+                color = colors.Grey01,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
             )
         }
-        // 텍스트 정보와 버튼 사이 19dp 고정 간격
-        Spacer(modifier = Modifier.width(19.dp))
 
-        OutlinedButton(
-            modifier = Modifier
-                .size(width = 49.dp, height = 33.dp)
-                .align(Alignment.Bottom),
-            text = stringResource(R.string.change),
-            textStyle = typography.view_m500_s14,
-            onClick = onChangeClick
-        )
+        if (showChangeButton) {
+            Spacer(modifier = Modifier.width(19.dp))
+
+            OutlinedButton(
+                modifier = Modifier
+                    .size(width = 49.dp, height = 33.dp)
+                    .align(Alignment.Bottom),
+                text = stringResource(R.string.change),
+                textStyle = typography.view_m500_s14,
+                onClick = onChangeClick
+            )
+        }
     }
 }
 
@@ -105,6 +124,7 @@ fun CardInputBookPreview() {
         CardInputBook(
             title = "책제목입니다.책제목입니다.책제목입니다.책제목입니다.책제목입니다.",
             author = "리처드 도킨스",
+            imageUrl = null, // 기본 이미지 사용
             onChangeClick = {}
         )
     }
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardItemRoom.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardItemRoom.kt
new file mode 100644
index 00000000..081eeba3
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/cards/CardItemRoom.kt
@@ -0,0 +1,234 @@
+package com.texthip.thip.ui.common.cards
+
+import androidx.compose.foundation.Image
+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
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+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.layout.ContentScale
+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.AsyncImage
+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 CardItemRoom(
+    modifier: Modifier = Modifier,
+    title: String,
+    participants: Int,
+    maxParticipants: Int,
+    isRecruiting: Boolean,
+    endDate: String? = null,
+    imageUrl: String? = null,
+    hasBorder: Boolean = false,
+    isSecret: Boolean? = null,
+    onClick: () -> Unit = {}
+) {
+    Card(
+        modifier = modifier
+            .fillMaxWidth()
+            .then(
+                if (hasBorder)
+                    Modifier
+                        .border(
+                            width = 1.dp,
+                            color = colors.Grey02,
+                            shape = RoundedCornerShape(12.dp)
+                        )
+                else Modifier
+            )
+            .clickable { onClick() },
+        colors = CardDefaults.cardColors(
+            containerColor = colors.DarkGrey
+        ),
+        shape = RoundedCornerShape(12.dp)
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(12.dp)
+        ) {
+            Row(
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                // 이미지
+                Box(
+                    modifier = Modifier.size(width = 80.dp, height = 107.dp)
+                ) {
+                    AsyncImage(
+                        model = imageUrl ?: R.drawable.img_book_cover_sample,
+                        contentDescription = "책 이미지",
+                        modifier = Modifier.fillMaxSize(),
+                        contentScale = ContentScale.Crop
+                    )
+                    if (isSecret == true) {
+                        Image(
+                            painter = painterResource(id = R.drawable.ic_secret_cover),
+                            contentDescription = "비밀방",
+                            modifier = Modifier.fillMaxSize()
+                        )
+                    }
+                }
+
+                Spacer(modifier = Modifier.width(12.dp))
+
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(107.dp),
+                    verticalArrangement = Arrangement.Center
+                ) {
+                    Text(
+                        text = title,
+                        color = colors.White,
+                        style = typography.smalltitle_sb600_s18_h24,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                    Spacer(modifier = Modifier.height(8.dp))
+                    Row(verticalAlignment = Alignment.CenterVertically) {
+                        Icon(
+                            modifier = Modifier.size(20.dp),
+                            painter = painterResource(id = R.drawable.ic_group),
+                            contentDescription = "그룹 아이콘",
+                            tint = colors.White
+                        )
+                        Spacer(modifier = Modifier.width(4.dp))
+
+                        if (isRecruiting) {
+                            Row(
+                                verticalAlignment = Alignment.CenterVertically
+                            ) {
+                                Text(
+                                    text = stringResource(
+                                        R.string.card_item_participant_count,
+                                        participants,
+                                    ),
+                                    style = typography.menu_sb600_s12,
+                                    color = colors.White
+                                )
+                                Spacer(modifier = Modifier.width(2.dp))
+
+                                Text(
+                                    text = stringResource(
+                                        R.string.card_item_participant_count_max,
+                                        maxParticipants
+                                    ),
+                                    style = typography.info_m500_s12,
+                                    color = colors.Grey
+                                )
+                            }
+                        } else {
+                            Row(
+                                verticalAlignment = Alignment.CenterVertically
+                            ) {
+                                Text(
+                                    text = stringResource(
+                                        R.string.card_item_participating_count,
+                                        participants
+                                    ),
+                                    style = typography.menu_sb600_s12,
+                                    color = colors.White
+                                )
+                                Text(
+                                    text = stringResource(R.string.card_item_participant_string),
+                                    style = typography.info_m500_s12,
+                                    color = colors.Grey
+                                )
+                            }
+                        }
+                    }
+                    endDate?.let {
+                        Spacer(modifier = Modifier.height(5.dp))
+
+                        Text(
+                            text = endDate
+                                    + if (isRecruiting) stringResource(
+                                R.string.card_item_end
+                            ) else stringResource(R.string.card_item_finish),
+
+                            color = if (isRecruiting) colors.Red else colors.Grey01,
+                            style = typography.menu_sb600_s12_h20,
+                            maxLines = 1
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@Preview()
+@Composable
+fun CardItemRoomPreview() {
+    ThipTheme {
+        Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
+            CardItemRoom(
+                title = "모임방 이름입니다. 모임방 이름입니다.",
+                participants = 22,
+                maxParticipants = 30,
+                isRecruiting = true,
+                endDate = "3일 뒤",
+                imageUrl = null
+            )
+            CardItemRoom(
+                title = "모임방 이름입니다. 모임방 이름입니다.",
+                participants = 22,
+                maxParticipants = 30,
+                isRecruiting = false,
+                endDate = "3",
+                imageUrl = null
+            )
+            CardItemRoom(
+                title = "모임방 이름입니다. 모임방 이름입니다.",
+                participants = 22,
+                maxParticipants = 30,
+                isRecruiting = true,
+                endDate = "3",
+                imageUrl = null,
+                hasBorder = true
+            )
+            CardItemRoom(
+                title = "모임방 이름입니다. 모임방 이름입니다.",
+                participants = 22,
+                maxParticipants = 30,
+                isRecruiting = false,
+                endDate = "3",
+                imageUrl = null,
+                hasBorder = true
+            )
+            CardItemRoom(
+                title = "모임방 이름입니다. 모임방 이름입니다.",
+                participants = 22,
+                maxParticipants = 30,
+                isRecruiting = false,
+                imageUrl = null,
+                hasBorder = true
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardItemRoomSmall.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardItemRoomSmall.kt
new file mode 100644
index 00000000..bd16e843
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/cards/CardItemRoomSmall.kt
@@ -0,0 +1,180 @@
+package com.texthip.thip.ui.common.cards
+
+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.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+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.layout.ContentScale
+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.AsyncImage
+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 CardItemRoomSmall(
+    modifier: Modifier = Modifier,
+    title: String,
+    participants: Int,
+    maxParticipants: Int,
+    endDate: String?,
+    imageUrl: String? = null, // API에서 받은 이미지 URL
+    isWide: Boolean = false,
+    isSecret: Boolean = false,
+    onClick: () -> Unit = {}
+) {
+    val cardModifier = if (isWide) {
+        modifier
+            .fillMaxWidth()
+    } else {
+        modifier
+            .width(232.dp)
+    }
+    val bgColor = if (isWide) colors.Black else colors.DarkGrey
+
+    Card(
+        modifier = cardModifier
+            .height(104.dp)
+            .clickable { onClick() },
+        colors = CardDefaults.cardColors(
+            containerColor = bgColor
+        ),
+        shape = RoundedCornerShape(12.dp)
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(12.dp)
+        ) {
+            Row(
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                // 이미지
+                Box(
+                    modifier = Modifier
+                        .size(width = 60.dp, height = 80.dp)
+                ) {
+                    AsyncImage(
+                        model = imageUrl ?: R.drawable.bookcover_sample_small,
+                        contentDescription = "책 이미지",
+                        modifier = Modifier.fillMaxSize(),
+                        contentScale = ContentScale.Crop
+                    )
+                    if (isSecret) {
+                        Image(
+                            painter = painterResource(id = R.drawable.ic_secret_cover),
+                            contentDescription = "비밀방",
+                            modifier = Modifier
+                                .fillMaxSize()
+                        )
+                    }
+                }
+
+                Spacer(modifier = Modifier.width(12.dp))
+
+                Column(
+                    modifier = Modifier.fillMaxWidth()
+                ) {
+
+                    Text(
+                        modifier = Modifier.padding(top = 4.dp),
+                        text = title,
+                        color = colors.White,
+                        style = if (isWide) typography.smalltitle_sb600_s18_h24 else typography.menu_sb600_s14_h24,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                    Spacer(modifier = Modifier.height(4.dp))
+
+                    Row(verticalAlignment = Alignment.CenterVertically) {
+                        Icon(
+                            modifier = Modifier.size(20.dp),
+                            painter = painterResource(id = R.drawable.ic_group),
+                            contentDescription = "그룹 아이콘",
+                            tint = colors.White
+                        )
+                        Spacer(modifier = Modifier.width(4.dp))
+
+                        Row(
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            Text(
+                                text = stringResource(
+                                    R.string.card_item_participant_count,
+                                    participants,
+                                ),
+                                style = typography.menu_sb600_s12,
+                                color = colors.White
+                            )
+                            Spacer(modifier = Modifier.width(2.dp))
+
+                            Text(
+                                text = stringResource(
+                                    R.string.card_item_participant_count_max,
+                                    maxParticipants
+                                ),
+                                style = typography.info_m500_s12,
+                                color = colors.Grey
+                            )
+                        }
+                    }
+                    Spacer(modifier = Modifier.height(7.dp))
+
+                    endDate?.let {
+                        Text(
+                            text = endDate + stringResource(R.string.card_item_end),
+                            color = colors.Red,
+                            style = typography.menu_sb600_s12_h20
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview()
+@Composable
+fun CardItemRoomSmallPreview() {
+    ThipTheme {
+        Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
+
+            CardItemRoomSmall(
+                title = "방 제목입니다 방 제목입니다",
+                participants = 22,
+                maxParticipants = 30,
+                endDate = "3일 뒤"
+            )
+
+            CardItemRoomSmall(
+                title = "와이드 카드 fillMaxWidth",
+                participants = 18,
+                maxParticipants = 25,
+                endDate = "5",
+                isWide = true
+            )
+        }
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardNote.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardNote.kt
new file mode 100644
index 00000000..e6a8473b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/cards/CardNote.kt
@@ -0,0 +1,104 @@
+package com.texthip.thip.ui.common.cards
+
+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.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.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.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun CardNote(
+    currentPage: Int,
+    percentage: Int,
+    onClick: () -> Unit = { }
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(color = colors.DarkGrey02, shape = RoundedCornerShape(12.dp))
+            .padding(vertical = 16.dp, horizontal = 12.dp)
+            .clickable { onClick() },
+        verticalArrangement = Arrangement.spacedBy(12.dp)
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Text(
+                text = stringResource(R.string.record_book),
+                style = typography.smalltitle_sb600_s16_h24,
+                color = colors.White,
+            )
+
+            Icon(
+                painter = painterResource(R.drawable.ic_chevron),
+                contentDescription = "Chevron Icon",
+                tint = colors.Grey02,
+            )
+        }
+
+        Text(
+            text = stringResource(R.string.current_page, currentPage),
+            style = typography.info_m500_s12,
+            color = colors.Grey,
+        )
+
+        Row(
+            verticalAlignment = Alignment.Bottom
+        ) {
+            Text(
+                text = percentage.toString(),
+                style = typography.smalltitle_sb600_s16_h20,
+                color = colors.Purple,
+            )
+            Text(
+                text = stringResource(R.string.percent),
+                style = typography.menu_sb600_s12,
+                color = colors.Purple,
+            )
+        }
+
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(8.dp)
+                .background(color = colors.Grey02, shape = RoundedCornerShape(12.dp))
+        ) {
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth(fraction = (percentage / 100f).toFloat())
+                    .fillMaxHeight()
+                    .background(color = colors.Purple, shape = RoundedCornerShape(12.dp))
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun CardNotePreview() {
+    CardNote(
+        currentPage = 50,
+        percentage = 30,
+        onClick = { }
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardRoomBook.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardRoomBook.kt
index 068a4ce5..ae264ad8 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/cards/CardRoomBook.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/cards/CardRoomBook.kt
@@ -1,13 +1,10 @@
 package com.texthip.thip.ui.common.cards
 
-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.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
@@ -24,23 +21,24 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
 import com.texthip.thip.R
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 
 @Composable
-fun DetailedDarkCard(
+fun CardRoomBook(
     modifier: Modifier = Modifier,
     title: String,
     author: String,
     publisher: String,
     description: String,
-    imageRes: Int? = R.drawable.bookcover_sample,
+    imageUrl: String? = null, // API에서 받은 이미지 URL
     onClick: () -> Unit = {}
 ) {
     Card(
@@ -67,7 +65,7 @@ fun DetailedDarkCard(
                 Text(
                     text = title,
                     style = typography.menu_m500_s16_h24,
-                    color = Color.White,
+                    color = colors.White,
                     maxLines = 1,
                     modifier = Modifier.weight(1f),
                 )
@@ -76,7 +74,7 @@ fun DetailedDarkCard(
                 Icon(
                     imageVector = ImageVector.vectorResource(R.drawable.ic_chevron_right),
                     contentDescription = "더보기",
-                    tint = Color.White,
+                    tint = colors.White,
                 )
             }
 
@@ -87,19 +85,12 @@ fun DetailedDarkCard(
                 modifier = Modifier.fillMaxWidth()
             ) {
                 // 책 이미지
-                Box(
-                    modifier = Modifier
-                        .size(width = 80.dp, height = 107.dp)
-                ) {
-                    imageRes?.let {
-                        Image(
-                            painter = painterResource(id = it),
-                            contentDescription = null,
-                            modifier = Modifier.fillMaxSize(),
-                            contentScale = ContentScale.Crop
-                        )
-                    }
-                }
+                AsyncImage(
+                    model = imageUrl ?: R.drawable.img_book_cover_sample,
+                    contentDescription = "책 이미지",
+                    modifier = Modifier.size(width = 80.dp, height = 107.dp),
+                    contentScale = ContentScale.Crop
+                )
 
                 Spacer(modifier = Modifier.width(16.dp))
 
@@ -109,16 +100,34 @@ fun DetailedDarkCard(
                 ) {
                     Spacer(modifier = Modifier.height(7.dp))
 
-                    Text(
-                        text = "$author 저 · $publisher",
-                        color = colors.White,
-                        style = typography.info_m500_s12,
-                    )
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Text(
+                            text = stringResource(R.string.card_author, author),
+                            color = colors.White,
+                            style = typography.info_m500_s12,
+                        )
+                        Spacer(modifier = Modifier.width(4.dp))
+
+                        Text(
+                            text = "·",
+                            color = colors.Grey02,
+                            style = typography.info_m500_s12,
+                        )
+                        Spacer(modifier = Modifier.width(4.dp))
 
-                    Spacer(modifier = Modifier.height(21.dp))
+                        Text(
+                            text = publisher,
+                            color = colors.White,
+                            style = typography.info_m500_s12,
+                        )
+
+                    }
 
                     Text(
-                        text = "도서 소개",
+                        modifier = Modifier.padding(top = 21.dp),
+                        text = stringResource(R.string.card_book_explain),
                         color = colors.White,
                         style = typography.info_m500_s12,
                     )
@@ -141,13 +150,13 @@ fun DetailedDarkCard(
 
 @Preview
 @Composable
-fun PreviewDetailedDarkCard() {
+fun PreviewCardRoomBook() {
 
     Column(
         modifier = Modifier.padding(16.dp),
         verticalArrangement = Arrangement.spacedBy(8.dp)
     ) {
-        DetailedDarkCard(
+        CardRoomBook(
             title = "도서명을 입력, 예시까지 최대 입력 후...",
             author = "저자명",
             publisher = "출판사",
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardVote.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardVote.kt
new file mode 100644
index 00000000..9002c2cb
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/cards/CardVote.kt
@@ -0,0 +1,172 @@
+package com.texthip.thip.ui.common.cards
+
+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.Row
+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.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+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.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.data.model.rooms.response.CurrentVote
+import com.texthip.thip.data.model.rooms.response.VoteItem
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun CardVote(
+    voteData: List<CurrentVote>,
+    onVoteClick: (CurrentVote) -> Unit = {}
+) {
+    val pageCount = voteData.size
+    val pagerState = rememberPagerState(pageCount = { pageCount })
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(color = colors.DarkGrey02, shape = RoundedCornerShape(12.dp))
+            .padding(vertical = 16.dp),
+        verticalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        Text(
+            text = stringResource(R.string.vote_title),
+            style = typography.smalltitle_sb600_s16_h24,
+            color = colors.White,
+            modifier = Modifier.padding(horizontal = 12.dp)
+        )
+
+        if (voteData.isEmpty()) {
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 12.dp)
+                    .padding(vertical = 60.dp),
+                contentAlignment = Alignment.Center
+            ) {
+                Text(
+                    text = stringResource(R.string.no_vote),
+                    style = typography.info_m500_s12,
+                    color = colors.Grey
+                )
+            }
+        } else {
+            HorizontalPager(
+                state = pagerState,
+                modifier = Modifier.fillMaxWidth()
+            ) { page ->
+                val vote = voteData[page]
+
+                Column(
+                    modifier = Modifier
+                        .height(176.dp)
+                        .padding(horizontal = 12.dp)
+                        .clickable { onVoteClick(vote) }, // 전체 클릭 시 이동
+                    verticalArrangement = Arrangement.spacedBy(10.dp)
+                ) {
+                    Text(
+                        text = vote.content,
+                        style = typography.info_m500_s12,
+                        color = colors.White,
+                    )
+
+                    vote.voteItems.forEachIndexed { index, item ->
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .background(
+                                    color = colors.DarkGrey,
+                                    shape = RoundedCornerShape(12.dp)
+                                )
+                                .height(44.dp)
+                        ) {
+                            Row(
+                                modifier = Modifier
+                                    .fillMaxSize()
+                                    .padding(horizontal = 12.dp),
+                                verticalAlignment = Alignment.CenterVertically,
+                            ) {
+                                Text(
+//                                    text = "${index + 1}. ${item.itemName}",
+                                    text = stringResource(
+                                        R.string.numbering,
+                                        index + 1,
+                                        item.itemName
+                                    ),
+                                    color = colors.White,
+                                    style = typography.feedcopy_r400_s14_h20
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        Row(
+            Modifier
+                .fillMaxWidth(),
+            horizontalArrangement = Arrangement.Center
+        ) {
+            repeat(pageCount) { iteration ->
+                val color =
+                    if (pagerState.currentPage == iteration) colors.White else colors.Grey02
+                Box(
+                    modifier = Modifier
+                        .padding(horizontal = 12.dp)
+                        .background(color, CircleShape)
+                        .size(4.dp)
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun CardVotePreview() {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        CardVote(
+            voteData = listOf(
+                CurrentVote(
+                    content = "3연에 나오는 심장은 무엇을 의미하는 걸까요?",
+                    page = 12,
+                    isOverview = false,
+                    voteItems = listOf(
+                        VoteItem("사랑"),
+                        VoteItem("희생"),
+                        VoteItem("고통"),
+                    )
+                ),
+                CurrentVote(
+                    content = "가장 인상 깊었던 구절은 무엇인가요?",
+                    page = 25,
+                    isOverview = false,
+                    voteItems = listOf(
+                        VoteItem("1연 1행"),
+                        VoteItem("2연 3행"),
+                    )
+                )
+            )
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/forms/BookPageTextField.kt b/app/src/main/java/com/texthip/thip/ui/common/forms/BookPageTextField.kt
index fe832cae..c4ec4432 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/forms/BookPageTextField.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/forms/BookPageTextField.kt
@@ -1,11 +1,12 @@
 package com.texthip.thip.ui.common.forms
 
 
+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.Spacer
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardOptions
@@ -16,10 +17,12 @@ import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 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.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -41,79 +44,99 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 @Composable
 fun BookPageTextField(
     modifier: Modifier = Modifier,
-    bookPage: Int
+    bookTotalPage: Int,
+    enabled: Boolean = true,
+    readOnly: Boolean = false,
+    text: String,
+    isError: Boolean,
+    onValueChange: (String) -> Unit,
+    showClearButton: Boolean = true,
+    showTotalPage: Boolean = true
 ) {
-    var text by rememberSaveable { mutableStateOf("") }
-    var isError by rememberSaveable { mutableStateOf(false) }
-    var errorMessageRes by rememberSaveable { mutableStateOf<Int?>(null) }
-    var errorMessageParam by rememberSaveable { mutableStateOf(0) }
-
+    var hasFocusCleared by remember(text) { mutableStateOf(false) }
+    
     Column {
         OutlinedTextField(
             value = text,
-            onValueChange = { newText: String ->
+            onValueChange = { newText ->
                 if (newText.isEmpty() || newText.all { it.isDigit() }) {
-                    text = newText
-                    if (newText.isNotEmpty()) {
-                        val pageNum = newText.toInt()
-                        isError = pageNum > bookPage
-                        if (isError) {
-                            errorMessageRes = R.string.error_page_over
-                            errorMessageParam = bookPage
-                        } else {
-                            errorMessageRes = null
-                        }
-                    } else {
-                        isError = false
-                        errorMessageRes = null
-                    }
+                    onValueChange(newText)
                 }
             },
-            visualTransformation = SuffixTransformation(
-                suffix = "/${bookPage}p",
-                suffixColor = colors.Grey02
-            ),
+            enabled = enabled,
+            readOnly = readOnly,
+            visualTransformation = if (showTotalPage) {
+                SuffixTransformation("/${bookTotalPage}p", colors.Grey02)
+            } else {
+                VisualTransformation.None
+            },
             keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
-            modifier = modifier.size(width = 320.dp, height = 48.dp),
+            modifier = modifier
+                .size(width = 320.dp, height = 48.dp)
+                .then(
+                    if (enabled) {
+                        Modifier.onFocusChanged { focusState ->
+                            if (focusState.isFocused && !hasFocusCleared && text.isNotEmpty()) {
+                                hasFocusCleared = true
+                                onValueChange("")
+                            }
+                            if (!focusState.isFocused) {
+                                hasFocusCleared = false
+                            }
+                        }
+                    } else {
+                        Modifier
+                    }
+                )
+                .then(
+                    if (isError)
+                        Modifier.border(
+                            width = 1.dp,
+                            color = colors.Red,
+                            shape = RoundedCornerShape(12.dp)
+                        )
+                    else Modifier
+                ),
             textStyle = typography.menu_r400_s14_h24.copy(lineHeight = 12.sp),
             maxLines = 1,
             shape = RoundedCornerShape(12.dp),
             colors = TextFieldDefaults.colors(
                 focusedTextColor = colors.White,
-                focusedIndicatorColor = if (isError) colors.Red else Color.Transparent,
-                unfocusedIndicatorColor = if (isError) colors.Red else Color.Transparent,
-                focusedContainerColor = colors.Black,
-                unfocusedContainerColor = colors.Black,
-                cursorColor = colors.NeonGreen
+                unfocusedTextColor = colors.White,
+                disabledTextColor = colors.White,
+                focusedIndicatorColor = Color.Transparent,
+                unfocusedIndicatorColor = Color.Transparent,
+                disabledIndicatorColor = Color.Transparent,
+                focusedContainerColor = colors.DarkGrey02,
+                unfocusedContainerColor = colors.DarkGrey02,
+                disabledContainerColor = colors.DarkGrey02,
+                cursorColor = colors.NeonGreen,
             ),
-            trailingIcon = {
-                if (text.isNotEmpty()) {
+            trailingIcon = if (showClearButton && enabled) {
+                {
                     Icon(
-                        painter = painterResource(id = R.drawable.ic_x_circle_white),
+                        painter = painterResource(id = R.drawable.ic_x_circle_grey),
                         contentDescription = "Clear text",
                         modifier = Modifier.clickable {
-                            text = ""
-                            isError = false
-                            errorMessageRes = null
+                            if (text.isNotEmpty()) {
+                                onValueChange("")
+                            }
                         },
                         tint = Color.Unspecified
                     )
-                } else {
-                    Icon(
-                        painter = painterResource(id = R.drawable.ic_x_circle),
-                        contentDescription = "Clear text"
-                    )
                 }
-            }
+            } else null
         )
 
-        if (isError && errorMessageRes != null) {
-            Spacer(modifier = Modifier.height(4.dp))
-            Text(
-                text = stringResource(id = errorMessageRes!!, errorMessageParam),
-                color = colors.Red,
-                style = typography.menu_r400_s14_h24.copy(lineHeight = 12.sp)
-            )
+        Box(modifier = Modifier.height(24.dp)) {
+            if (isError) {
+                Text(
+                    modifier = Modifier.padding(start = 4.dp, top = 8.dp),
+                    text = stringResource(id = R.string.error_page_over),
+                    color = colors.Red,
+                    style = typography.menu_r400_s14_h24.copy(lineHeight = 12.sp)
+                )
+            }
         }
     }
 }
@@ -135,6 +158,7 @@ class SuffixTransformation(
         val offsetMapping = object : OffsetMapping {
             override fun originalToTransformed(offset: Int): Int =
                 offset.coerceAtMost(original.length)
+
             override fun transformedToOriginal(offset: Int): Int =
                 offset.coerceAtMost(original.length)
         }
@@ -147,12 +171,19 @@ class SuffixTransformation(
 @Composable
 @Preview(showBackground = true, backgroundColor = 0xFF000000, widthDp = 360, heightDp = 200)
 fun BookPageTextFieldPreviewEmpty() {
+    var text by rememberSaveable { mutableStateOf("") }
+
     Box(
         modifier = Modifier.size(width = 360.dp, height = 200.dp),
         contentAlignment = Alignment.Center
     ) {
         BookPageTextField(
-            bookPage = 456
+            bookTotalPage = 456,
+            text = text,
+            isError = false,
+            onValueChange = {
+                text = it
+            }
         )
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/forms/BorderedTextField.kt b/app/src/main/java/com/texthip/thip/ui/common/forms/BorderedTextField.kt
index 6307dd2a..bfebf4ea 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/forms/BorderedTextField.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/forms/BorderedTextField.kt
@@ -1,86 +1,147 @@
 package com.texthip.thip.ui.common.forms
 
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsFocusedAsState
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.material3.Icon
-import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 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.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 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 BorderedTextField(
     modifier: Modifier = Modifier,
-    hint: String
+    hint: String,
+    text: String,
+    canRemove: Boolean = true,
+    isEnabled: Boolean = true,
+    onTextChange: (String) -> Unit,
+    onDelete: () -> Unit,
+    onRemoveField: () -> Unit
 ) {
-    var text by rememberSaveable { mutableStateOf("") }
     val myStyle = typography.menu_r400_s14_h24.copy(lineHeight = 14.sp)
+    val interactionSource = remember { MutableInteractionSource() }
+    val isFocused by interactionSource.collectIsFocusedAsState()
 
-    OutlinedTextField(
-        value = text,
-        onValueChange = { text = it },
-        placeholder = {
-            Text(
-                text = hint,
-                color = colors.Grey02,
-                style = myStyle
-            )
-        },
-        textStyle = myStyle,
-        modifier = modifier.size(width = 320.dp, height = 48.dp),
-        shape = RoundedCornerShape(12.dp),
-        colors = TextFieldDefaults.colors(
-            focusedTextColor = colors.White,
-            focusedIndicatorColor = colors.Grey02,
-            unfocusedIndicatorColor = colors.Grey02,
-            focusedContainerColor = colors.Black00,
-            unfocusedContainerColor = colors.Black00,
-            cursorColor = colors.NeonGreen,
-        ),
+    val iconRes = if (isEnabled) {
+        when {
+            isFocused && text.isEmpty() -> R.drawable.ic_x_circle_darkgrey
+            isFocused && text.isNotEmpty() -> R.drawable.ic_x_circle_grey
+            !isFocused && canRemove -> R.drawable.ic_delete
+            else -> null
+        }
+    } else {
+        null
+    }
+
+    val iconEnabled = when (iconRes) {
+        R.drawable.ic_x_circle_grey -> true
+        R.drawable.ic_delete -> true
+        else -> false
+    }
+
+    val iconTint = when (iconRes) {
+        R.drawable.ic_delete -> colors.Grey02
+
+        else -> Color.Unspecified
+    }
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(48.dp)
+            .border(width = 1.dp, color = colors.Grey02, shape = RoundedCornerShape(12.dp)),
+    ) {
+        BasicTextField(
+            value = text,
+            onValueChange = onTextChange,
+            enabled = isEnabled,
+            textStyle = myStyle.copy(color = colors.White),
+            singleLine = true,
+            modifier = Modifier
+                .fillMaxWidth()
+                .matchParentSize()
+                .padding(horizontal = 12.dp, vertical = 14.dp),
+            interactionSource = interactionSource,
+            cursorBrush = SolidColor(colors.NeonGreen),
+            decorationBox = { innerTextField ->
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Box(modifier = Modifier.weight(1f)) {
+                        if (text.isEmpty()) {
+                            Text(
+                                text = hint,
+                                color = colors.Grey02,
+                                style = myStyle
+                            )
+                        }
+                        innerTextField()
+                    }
 
-        trailingIcon = {
-            if (text.isNotEmpty()) {
-                Icon(
-                    painter = painterResource(id = R.drawable.ic_x_circle_white),
-                    contentDescription = "Clear text",
-                    modifier = Modifier.clickable { text = "" },
-                    tint = Color.Unspecified
-                )
-            } else {
-                Icon(
-                    painter = painterResource(id = R.drawable.ic_x_circle),
-                    contentDescription = "Clear text"
-                )
+                    iconRes?.let {
+                        Icon(
+                            painter = painterResource(id = it),
+                            contentDescription = "Action Icon",
+                            modifier = Modifier
+                                .clickable(enabled = iconEnabled) {
+                                    when (it) {
+                                        R.drawable.ic_x_circle_grey -> onDelete()
+                                        R.drawable.ic_delete -> onRemoveField()
+                                    }
+                                },
+                            tint = iconTint
+                        )
+                    }
+                }
             }
-        }
-    )
+        )
+    }
 }
 
 @Composable
-@Preview(showBackground = true, backgroundColor = 0xFF000000, widthDp = 360, heightDp = 200)
+@Preview()
 fun BorderedTextFieldPreview() {
-    Box(
-        modifier = Modifier.size(width = 360.dp, height = 200.dp),
-        contentAlignment = Alignment.Center
-    ) {
+    ThipTheme {
+        var text by rememberSaveable { mutableStateOf("") }
+
         BorderedTextField(
-            hint = "가이드 텍스트를 입력"
+            hint = "가이드 텍스트를 입력",
+            text = text,
+            onTextChange = { newText ->
+                text = newText
+            },
+            onDelete = {
+                text = ""
+            },
+            onRemoveField = {
+                // 필드 제거
+            },
         )
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/forms/CommentTextField.kt b/app/src/main/java/com/texthip/thip/ui/common/forms/CommentTextField.kt
new file mode 100644
index 00000000..220dc637
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/forms/CommentTextField.kt
@@ -0,0 +1,173 @@
+package com.texthip.thip.ui.common.forms
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+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.defaultMinSize
+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.layout.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+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.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.SolidColor
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+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 CommentTextField(
+    modifier: Modifier = Modifier,
+    hint: String,
+    input: String,
+    onInputChange: (String) -> Unit,
+    onSendClick: () -> Unit,
+    replyTo: String? = null,
+    onCancelReply: () -> Unit = {}
+) {
+    val focusManager = LocalFocusManager.current
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(color = colors.DarkGrey02)
+    ) {
+        if (replyTo != null) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                modifier = Modifier
+                    .padding(start = 20.dp, end = 20.dp, top = 10.dp, bottom = 2.dp)
+                    .height(24.dp)
+            ) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_reply),
+                    contentDescription = "Reply Arrow",
+                    tint = colors.Grey01,
+                    modifier = Modifier.size(24.dp)
+                )
+                Spacer(modifier = Modifier.width(4.dp))
+                Text(
+                    text = buildAnnotatedString {
+                        withStyle(style = SpanStyle(color = colors.NeonGreen)) {
+                            append("@$replyTo")
+                        }
+                        append(stringResource(R.string.comment_to))
+                    },
+                    style = typography.info_r400_s12_h24,
+                    color = colors.Grey01
+                )
+                Spacer(modifier = Modifier.weight(1f))
+                IconButton(onClick = onCancelReply) {
+                    Icon(
+                        painter = painterResource(R.drawable.ic_x),
+                        contentDescription = "Cancel Reply",
+                        tint = colors.White
+                    )
+                }
+            }
+        }
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 20.dp, vertical = 10.dp)
+                .background(colors.DarkGrey, shape = RoundedCornerShape(20.dp)),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            BasicTextField(
+                value = input,
+                onValueChange = onInputChange,
+                maxLines = 5,
+                textStyle = typography.menu_r400_s14_h24.copy(color = colors.White),
+                modifier = Modifier
+                    .weight(1f)
+                    .padding(start = 12.dp, top = 4.dp, bottom = 4.dp, end = 12.dp)
+                    .defaultMinSize(minHeight = 36.dp)
+                    .wrapContentHeight(),  // 높이 자동 확장
+                cursorBrush = SolidColor(colors.NeonGreen),
+                decorationBox = { innerTextField ->
+                    Box {
+                        if (input.isEmpty()) {
+                            Text(
+                                text = hint,
+                                color = colors.Grey02,
+                                style = typography.menu_r400_s14_h24
+                            )
+                        }
+                        innerTextField()
+                    }
+                }
+            )
+
+            // 전송 버튼
+            val isEnabled = input.isNotBlank()
+            Box(
+                modifier = Modifier
+                    .padding(end = 8.dp, bottom = 8.dp)
+                    .size(width = 42.dp, height = 28.dp)
+                    .align(Alignment.Bottom)
+                    .background(
+                        color = if (isEnabled) colors.Purple else colors.Grey02,
+                        shape = RoundedCornerShape(20.dp)
+                    )
+                    .clickable(enabled = isEnabled) {
+                        onSendClick()
+                        focusManager.clearFocus()
+                    },
+                contentAlignment = Alignment.Center
+            ) {
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_send),
+                    contentDescription = "Send",
+                    tint = colors.White,
+                    modifier = Modifier.size(24.dp)
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun CommentTextFieldPreview() {
+    var input by remember { mutableStateOf("") }
+    var replyTo by remember { mutableStateOf<String?>("사용자") }
+
+    ThipTheme {
+        CommentTextField(
+            input = input,
+            hint = "00님에게 댓글을 남겨보세요.",
+            onInputChange = { input = it },
+            onSendClick = {
+                input = ""
+                replyTo = null
+            },
+            replyTo = replyTo,
+            onCancelReply = { replyTo = null }
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/forms/FormTextFieldDefault.kt b/app/src/main/java/com/texthip/thip/ui/common/forms/FormTextFieldDefault.kt
index cc8f2285..ef3df040 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/forms/FormTextFieldDefault.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/forms/FormTextFieldDefault.kt
@@ -1,13 +1,18 @@
 package com.texthip.thip.ui.common.forms
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 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.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.material3.Icon
-import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -16,6 +21,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -25,62 +31,114 @@ import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 
 @Composable
-fun BaseInputTextField(
+fun FormTextFieldDefault(
     modifier: Modifier = Modifier,
-    hint: String
+    hint: String,
+    showLimit: Boolean = false,
+    limit: Int = 10,
+    showIcon: Boolean = true,
+    containerColor: Color = colors.Black
 ) {
     var text by rememberSaveable { mutableStateOf("") }
     val myStyle = typography.menu_r400_s14_h24.copy(lineHeight = 14.sp)
 
-    OutlinedTextField(
-        value = text,
-        onValueChange = { text = it },
-        placeholder = {
-            Text(
-                text = hint,
-                color = colors.Grey02,
-                style = myStyle
-            )
-        },
-        textStyle = myStyle,
-        modifier = modifier.size(width = 320.dp, height = 48.dp),
-        shape = RoundedCornerShape(12.dp),
-        colors = TextFieldDefaults.colors(
-            focusedTextColor = colors.White,
-            focusedIndicatorColor = Color.Transparent,
-            unfocusedIndicatorColor = Color.Transparent,
-            focusedContainerColor = colors.Black,
-            unfocusedContainerColor = colors.Black,
-            cursorColor = colors.NeonGreen
-        ),
-        trailingIcon = {
-            if (text.isNotEmpty()) {
-                Icon(
-                    painter = painterResource(id = R.drawable.ic_x_circle_white),
-                    contentDescription = "Clear text",
-                    modifier = Modifier.clickable { text = "" },
-                    tint = Color.Unspecified
+    // 글자수 제한 적용
+    val displayText = if (showLimit && text.length > limit) text.substring(0, limit) else text
+
+    Box(modifier = modifier
+        .height(48.dp)) {
+        BasicTextField(
+            value = displayText,
+            onValueChange = {
+                // 글자수 제한 적용
+                text = if (showLimit && it.length > limit) it.substring(0, limit) else it
+            },
+            textStyle = myStyle.copy(color = colors.White),
+            modifier = Modifier
+                .fillMaxSize()
+                .background(
+                    color = containerColor,
+                    shape = RoundedCornerShape(12.dp)
                 )
-            } else {
-                Icon(
-                    painter = painterResource(id = R.drawable.ic_x_circle),
-                    contentDescription = "Clear text"
+                .padding(horizontal = 14.dp, vertical = 12.dp),
+            singleLine = true,
+            cursorBrush = SolidColor(colors.NeonGreen),
+            decorationBox = { innerTextField ->
+                Box(
+                    modifier = Modifier.fillMaxSize(),
+                    contentAlignment = Alignment.CenterStart
+                ) {
+                    if (displayText.isEmpty()) {
+                        Text(
+                            text = hint,
+                            color = colors.Grey02,
+                            style = myStyle
+                        )
+                    }
+                    innerTextField()
+                    
+                    if (showIcon) {
+                        if (text.isNotEmpty()) {
+                            Icon(
+                                painter = painterResource(id = R.drawable.ic_x_circle_white),
+                                contentDescription = "Clear text",
+                                modifier = Modifier
+                                    .align(Alignment.CenterEnd)
+                                    .clickable { text = "" },
+                                tint = Color.Unspecified
+                            )
+                        } else {
+                            Icon(
+                                painter = painterResource(id = R.drawable.ic_x_circle),
+                                contentDescription = "Clear text",
+                                modifier = Modifier.align(Alignment.CenterEnd)
+                            )
+                        }
+                    }
+                }
+            }
+        )
+
+        // 글자수 제한 표시 (오른쪽 상단)
+        if (showLimit) {
+            Box(
+                modifier = Modifier
+                    .align(Alignment.CenterEnd)
+                    .padding(end = 14.dp)
+            ) {
+                Text(
+                    text = "${text.length}/$limit",
+                    color = colors.White,
+                    style = typography.info_r400_s12_h24
                 )
             }
-        },
-        singleLine = true
-    )
+        }
+    }
 }
 
+
 @Composable
 @Preview(showBackground = true, backgroundColor = 0xFF000000, widthDp = 360, heightDp = 200)
-fun InputTextFieldPreviewEmpty() {
+fun FormTextFieldDefaultPreview() {
     Box(
         modifier = Modifier.size(width = 360.dp, height = 200.dp),
         contentAlignment = Alignment.Center
     ) {
-        BaseInputTextField(
-            hint = "이곳에 텍스트를 입력하세요"
-        )
+        Column {
+            FormTextFieldDefault(
+                hint = "이곳에 텍스트를 입력하세요",
+                showLimit = true,
+                limit = 20,
+                showIcon = false
+            )
+            Spacer(modifier = Modifier.padding(vertical = 8.dp))
+
+            FormTextFieldDefault(
+                hint = "이곳에 텍스트를 입력하세요",
+                showLimit = false,
+                limit = 10,
+                showIcon = true
+            )
+        }
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/forms/PageTextField.kt b/app/src/main/java/com/texthip/thip/ui/common/forms/PageTextField.kt
new file mode 100644
index 00000000..4c5bd43a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/forms/PageTextField.kt
@@ -0,0 +1,65 @@
+package com.texthip.thip.ui.common.forms
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+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.graphics.SolidColor
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun PageTextField(
+    modifier: Modifier = Modifier,
+    text: String,
+    onTextChange: (String) -> Unit,
+) {
+    Box(
+        modifier = modifier
+            .size(width = 36.dp, height = 26.dp)
+            .border(width = 1.dp, color = colors.White, shape = RoundedCornerShape(8.dp))
+            .padding(horizontal = 4.dp),
+        contentAlignment = Alignment.CenterStart,
+    ) {
+        BasicTextField(
+            value = text,
+            onValueChange = { newText ->
+                // 숫자만 필터링
+                if (newText.all { it.isDigit() }) {
+                    onTextChange(newText)
+                }
+            },
+            textStyle = typography.copy_r400_s14.copy(color = colors.White),
+            keyboardOptions = KeyboardOptions.Default.copy(
+                keyboardType = KeyboardType.Number
+            ),
+            cursorBrush = SolidColor(colors.NeonGreen),
+            maxLines = 1,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun PageTextFieldPreview() {
+    var text by rememberSaveable { mutableStateOf("") }
+
+    PageTextField(
+        text = text,
+        onTextChange = { text = it },
+        modifier = Modifier
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/forms/SearchBookTextField.kt b/app/src/main/java/com/texthip/thip/ui/common/forms/SearchBookTextField.kt
new file mode 100644
index 00000000..066ada9d
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/forms/SearchBookTextField.kt
@@ -0,0 +1,127 @@
+package com.texthip.thip.ui.common.forms
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+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.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+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.graphics.SolidColor
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+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 SearchBookTextField(
+    modifier: Modifier = Modifier,
+    text: String,
+    hint: String,
+    onValueChange: (String) -> Unit,
+    onSearch: (String) -> Unit = {}
+) {
+    val myStyle = typography.menu_r400_s14_h24.copy(
+        color = colors.White
+    )
+    val shape = RoundedCornerShape(12.dp)
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(40.dp)
+            .clip(shape)
+            .background(colors.DarkGrey),
+        contentAlignment = Alignment.CenterStart
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.fillMaxSize()
+        ) {
+            BasicTextField(
+                value = text,
+                onValueChange = { onValueChange(it) },
+                singleLine = true,
+                textStyle = myStyle,
+                cursorBrush = SolidColor(colors.NeonGreen),
+                keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
+                keyboardActions = KeyboardActions(
+                    onSearch = { onSearch(text) }
+                ),
+                modifier = Modifier
+                    .weight(1f)
+                    .padding(start = 12.dp, end = 8.dp),
+                decorationBox = { innerTextField ->
+                    Box(contentAlignment = Alignment.CenterStart) {
+                        if (text.isEmpty()) {
+                            Text(
+                                text = hint,
+                                color = colors.Grey02,
+                                style = myStyle
+                            )
+                        }
+                        innerTextField()
+                    }
+                }
+            )
+
+            if (text.isNotEmpty()) {
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_x_circle_grey02),
+                    contentDescription = "Clear text",
+                    modifier = Modifier
+                        .clickable { onValueChange("") },
+                    tint = Color.Unspecified
+                )
+            }
+            Spacer(Modifier.width(20.dp))
+            Icon(
+                painter = painterResource(id = R.drawable.ic_search),
+                contentDescription = "Search",
+                modifier = Modifier
+                    .clickable {
+                        onSearch(text)
+                    },
+                tint = colors.White
+            )
+            Spacer(Modifier.width(12.dp))
+        }
+    }
+}
+
+
+@Preview()
+@Composable
+private fun SearchBookTextFieldPreview() {
+    ThipTheme {
+        var text by rememberSaveable { mutableStateOf("") }
+        SearchBookTextField(
+            text = text,
+            hint = "책 제목, 저자검색",
+            onValueChange = { text = it },
+            onSearch = { /* 검색 실행 */ }
+        )
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/common/forms/SingleDigitTextBox.kt b/app/src/main/java/com/texthip/thip/ui/common/forms/SingleDigitTextBox.kt
new file mode 100644
index 00000000..2b618894
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/forms/SingleDigitTextBox.kt
@@ -0,0 +1,110 @@
+package com.texthip.thip.ui.common.forms
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+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.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.text.TextRange
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+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 SingleDigitBox(
+    modifier: Modifier = Modifier,
+    value: String,
+    onValueChange: (String) -> Unit,
+    onBackspace: (() -> Unit)? = null,
+    containerColor: Color = colors.darkGray01,
+    borderColor: Color = Color.Transparent
+) {
+    // TextFieldValue로 커서 위치 제어
+    val textFieldValue = remember(value) {
+        val displayText = value.ifEmpty { "\u200B" } // Zero Width Space
+        TextFieldValue(
+            text = displayText,
+            selection = TextRange(displayText.length) // 커서를 맨 끝에 위치
+        )
+    }
+    
+    val myStyle = typography.smalltitle_sb600_s18_h24.copy(
+        lineHeight = 20.sp,
+        textAlign = TextAlign.Center,
+        color = colors.White
+    )
+
+    Box(
+        modifier = modifier
+            .size(44.dp)
+            .background(containerColor, RoundedCornerShape(12.dp))
+            .border(1.dp, borderColor, RoundedCornerShape(12.dp)),
+        contentAlignment = Alignment.Center
+    ) {
+        BasicTextField(
+            value = textFieldValue,
+            onValueChange = { newValue ->
+                val cleaned = newValue.text.replace("\u200B", "")
+                val filtered = cleaned.filter { it.isDigit() }.take(1)
+                
+                // 백스페이스 감지: Zero Width Space가 지워졌을 때
+                if (newValue.text.isEmpty() && value.isEmpty()) {
+                    onBackspace?.invoke()
+                    return@BasicTextField
+                }
+                
+                onValueChange(filtered)
+            },
+            textStyle = myStyle.copy(
+                color = if (value.isEmpty()) Color.Transparent else colors.White
+            ),
+            singleLine = true,
+            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword),
+            cursorBrush = SolidColor(colors.NeonGreen),
+            decorationBox = { innerTextField ->
+                Box(
+                    Modifier.fillMaxSize(),
+                    contentAlignment = Alignment.Center
+                ) { 
+                    innerTextField()
+                }
+            }
+        )
+    }
+}
+
+@Preview
+@Composable
+fun PreviewSingleDigitBox() {
+    ThipTheme {
+        var digit by rememberSaveable { mutableStateOf("") }
+        Box(
+            modifier = Modifier.size(60.dp),
+            contentAlignment = Alignment.Center
+        ) {
+            SingleDigitBox(
+                value = digit,
+                onValueChange = { digit = it }
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/forms/WarningTextField.kt b/app/src/main/java/com/texthip/thip/ui/common/forms/WarningTextField.kt
index 533cfcea..27dbc3d6 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/forms/WarningTextField.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/forms/WarningTextField.kt
@@ -4,22 +4,29 @@ import androidx.compose.foundation.clickable
 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.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.material3.Icon
-import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 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.graphics.Color
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -29,54 +36,94 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 
 @Composable
 fun WarningTextField(
+    value: String,
+    onValueChange: (String) -> Unit,
     modifier: Modifier = Modifier,
     hint: String,
-    warningMessage: String = "경고 메시지를 입력해주세요.",
-    showWarning: Boolean
+    warningMessage: String = "",
+    showWarning: Boolean = false,
+    showLimit: Boolean = true,
+    maxLength: Int = Int.MAX_VALUE,
+    showIcon: Boolean = false,
+    containerColor: Color = colors.Black,
+    isNumberOnly: Boolean = false,
+    keyboardType: KeyboardType = KeyboardType.Text,
+    preventUppercase: Boolean = false
 ) {
-    var text by rememberSaveable { mutableStateOf("") }
-    val myStyle = typography.menu_r400_s14_h24.copy(lineHeight = 14.sp)
+    val myStyle = typography.menu_r400_s14_h24.copy(lineHeight = 16.sp)
 
     Column {
-        OutlinedTextField(
-            value = text,
-            onValueChange = { text = it },
-            placeholder = {
-                Text(
-                    text = hint,
-                    color = colors.Grey02,
-                    style = myStyle
-                )
-            },
-            textStyle = myStyle,
-            modifier = modifier.size(width = 320.dp, height = 48.dp),
-            shape = RoundedCornerShape(12.dp),
-            colors = TextFieldDefaults.colors(
-                focusedTextColor = colors.White,
-                focusedIndicatorColor = if (showWarning) colors.Red else Color.Transparent,
-                unfocusedIndicatorColor = if (showWarning) colors.Red else Color.Transparent,
-                focusedContainerColor = colors.Black,
-                unfocusedContainerColor = colors.Black,
-                cursorColor = colors.NeonGreen
-            ),
-            trailingIcon = {
-                if (text.isNotEmpty()) {
-                    Icon(
-                        painter = painterResource(id = R.drawable.ic_x_circle_white),
-                        contentDescription = "Clear text",
-                        modifier = Modifier.clickable { text = "" },
-                        tint = Color.Unspecified
+        Box(
+            modifier = modifier
+                .height(48.dp)
+        ) {
+            BasicTextField(
+                value = value,
+                onValueChange = { input ->
+                    var filtered = input
+                    if (isNumberOnly) filtered = filtered.filter { it.isDigit() }
+                    if (preventUppercase) filtered = filtered.lowercase()
+                    if (filtered.length > maxLength) filtered = filtered.take(maxLength)
+                    onValueChange(filtered)
+                },
+                textStyle = myStyle.copy(color = colors.White),
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(
+                        color = containerColor,
+                        shape = RoundedCornerShape(12.dp)
                     )
-                } else {
-                    Icon(
-                        painter = painterResource(id = R.drawable.ic_x_circle),
-                        contentDescription = "Clear text"
+                    .border(
+                        width = if (showWarning) 1.dp else 0.dp,
+                        color = if (showWarning) colors.Red else Color.Transparent,
+                        shape = RoundedCornerShape(12.dp)
                     )
+                    .padding(horizontal = 14.dp, vertical = 12.dp),
+                singleLine = true,
+                keyboardOptions = KeyboardOptions(keyboardType = keyboardType),
+                cursorBrush = SolidColor(colors.NeonGreen),
+                decorationBox = { innerTextField ->
+                    Box(
+                        modifier = Modifier.fillMaxSize(),
+                        contentAlignment = Alignment.CenterStart
+                    ) {
+                        if (value.isEmpty()) {
+                            Text(
+                                text = hint,
+                                color = colors.Grey02,
+                                style = myStyle
+                            )
+                        }
+                        innerTextField()
+                        
+                        if (showIcon) {
+                            Icon(
+                                painter = painterResource(id = R.drawable.ic_x_circle_grey),
+                                contentDescription = "Clear text",
+                                modifier = Modifier
+                                    .align(Alignment.CenterEnd)
+                                    .clickable { onValueChange("") },
+                                tint = Color.Unspecified
+                            )
+                        }
+                    }
                 }
-            },
-            singleLine = true
-        )
+            )
 
+            if (showLimit && maxLength != Int.MAX_VALUE) {
+                Box(
+                    modifier = Modifier
+                        .align(Alignment.CenterEnd)
+                        .padding(end = 14.dp)
+                ) {
+                    Text(
+                        text = "${value.length}/$maxLength",
+                        color = colors.White,
+                        style = typography.info_r400_s12_h24
+                    )
+                }
+            }
+        }
         if (showWarning) {
             Spacer(modifier = Modifier.height(4.dp))
             Text(
@@ -91,13 +138,20 @@ fun WarningTextField(
 @Composable
 @Preview(showBackground = true, backgroundColor = 0xFF000000, widthDp = 360, heightDp = 200)
 fun WarningTextFieldPreviewEmpty() {
+    var text by rememberSaveable { mutableStateOf("") }
+
     Box(
         modifier = Modifier.size(width = 360.dp, height = 200.dp),
         contentAlignment = Alignment.Center
     ) {
         WarningTextField(
+            value = text,
+            onValueChange = { text = it },
             hint = "인풋 텍스트",
             showWarning = true,
+            showIcon = false,
+            showLimit = true,
+            maxLength = 10,
             warningMessage = "경고 메시지를 입력해주세요."
         )
     }
@@ -106,13 +160,19 @@ fun WarningTextFieldPreviewEmpty() {
 @Composable
 @Preview(showBackground = true, backgroundColor = 0xFF000000, widthDp = 360, heightDp = 200)
 fun WarningTextFieldPreviewNormal() {
+    var text by rememberSaveable { mutableStateOf("") }
+
     Box(
         modifier = Modifier.size(width = 360.dp, height = 200.dp),
         contentAlignment = Alignment.Center
     ) {
         WarningTextField(
+            value = text,
+            onValueChange = { text = it },
             hint = "인풋 텍스트",
-            showWarning = false
+            showWarning = false,
+            showIcon = true,
+            showLimit = false
         )
     }
-}
\ No newline at end of file
+}
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 8f98f717..483add11 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.border
 import androidx.compose.foundation.clickable
@@ -9,53 +8,70 @@ 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.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.OutlinedButton
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
-import com.texthip.thip.R
-import com.texthip.thip.ui.theme.Grey02
 
 @Composable
 fun AuthorHeader(
     modifier: Modifier = Modifier,
-    profileImage: Painter?,
+    profileImage: String?,
     nickname: String,
     badgeText: String,
-    onSubscribeClick: () -> Unit
+    badgeTextColor: Color = colors.NeonGreen,
+    buttonText: String = "",
+    buttonWidth: Dp = 60.dp,
+    showButton: Boolean = true,
+    showThipNum: Boolean = false,
+    thipNum: Int? = null,
+    profileImageSize: Dp = 54.dp,
+    onButtonClick: () -> Unit = {},
+    onClick: () -> Unit = {}
 ) {
     Row(
         modifier = modifier
             .fillMaxWidth()
-            .padding(horizontal = 20.dp),
+            .padding(horizontal = 20.dp)
+            .clickable(onClick = onClick),
         verticalAlignment = Alignment.CenterVertically
     ) {
         if (profileImage != null) {
-            Image(
-                painter = profileImage,
-                contentDescription = "작성자 장르이미지",
+            AsyncImage(
+                model = profileImage,
+                contentDescription = null,
                 modifier = Modifier
-                    .size(48.dp)
+                    .size(profileImageSize)
                     .clip(CircleShape)
+                    .border(
+                        width = 0.5.dp,
+                        color = colors.Grey02,
+                        shape = CircleShape
+                    )
             )
         } else {
             Box(
                 modifier = Modifier
-                    .size(48.dp)
+                    .size(profileImageSize)
                     .clip(CircleShape)
                     .background(colors.Grey)
             )
@@ -73,25 +89,40 @@ fun AuthorHeader(
             Text(
                 text = badgeText,
                 style = typography.feedcopy_r400_s14_h20,
-                color = colors.NeonGreen,
+                color = badgeTextColor,
                 maxLines = 1
             )
         }
-
-        Box(
-            modifier = Modifier
-                .clip(RoundedCornerShape(20.dp))
-                .border(1.dp, Grey02, RoundedCornerShape(20.dp))
-                .background(Color.Transparent)
-                .clickable { onSubscribeClick() }
-                .padding(horizontal = 12.dp, vertical = 8.dp)
-        ) {
-            Text(
-                text = stringResource(R.string.subscribe),
-                style = typography.menu_m500_s14_h24,
-                color = colors.White
+        if (showButton) {
+            OutlinedButton(
+                modifier = Modifier
+                    .width(buttonWidth)
+                    .height(33.dp),
+                text = buttonText,
+                textStyle = typography.view_m500_s14,
+                onClick = onButtonClick
             )
         }
+        if (showThipNum && thipNum != null) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    text = stringResource(
+                        R.string.thip_num,
+                        thipNum
+                    ) + stringResource(R.string.thip_ing),
+                    style = typography.view_r400_s11_h20,
+                    color = colors.White
+                )
+                Spacer(modifier = Modifier.width(18.dp))
+                Icon(
+                    painter = painterResource(R.drawable.ic_chevron),
+                    contentDescription = null,
+                    tint = colors.White,
+                )
+            }
+        }
     }
 }
 
@@ -99,11 +130,23 @@ fun AuthorHeader(
 @Composable
 fun PreviewAuthorHeader() {
     ThipTheme {
-        AuthorHeader(
-            profileImage = null,
-            nickname = "열자자제한열열자제한",
-            badgeText = "칭호칭호칭호",
-            onSubscribeClick = { println("구독") }
-        )
+        Column {
+            AuthorHeader(
+                profileImage = null,
+                nickname = "열자자제한열열자제한",
+                badgeText = "칭호칭호칭호",
+                buttonText = "구독",
+                modifier = Modifier.padding(bottom = 20.dp)
+            )
+            AuthorHeader(
+                profileImage = null,
+                nickname = "열자자제한열열자제한",
+                badgeText = "칭호칭호칭호",
+                badgeTextColor = colors.Yellow,
+                showButton = false,
+                showThipNum = true,
+                thipNum = 10
+            )
+        }
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/header/HeaderMenuBarTab.kt b/app/src/main/java/com/texthip/thip/ui/common/header/HeaderMenuBarTab.kt
new file mode 100644
index 00000000..fc1bf53e
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/header/HeaderMenuBarTab.kt
@@ -0,0 +1,83 @@
+package com.texthip.thip.ui.common.header
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ScrollableTabRow
+import androidx.compose.material3.Tab
+import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
+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.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun HeaderMenuBarTab(
+    modifier: Modifier = Modifier,
+    titles: List<String>,
+    selectedTabIndex: Int,
+    onTabSelected: (Int) -> Unit,
+    indicatorColor: Color = colors.White,
+) {
+    ScrollableTabRow(
+        selectedTabIndex = selectedTabIndex,
+        containerColor = Color.Transparent,
+        contentColor = colors.White,
+        edgePadding = 0.dp,
+        indicator = { tabPositions ->
+            val tabPosition = tabPositions[selectedTabIndex]
+            Box(
+                modifier = Modifier
+                    .tabIndicatorOffset(tabPosition)
+                    .padding(horizontal = 20.dp)
+                    .height(2.dp)
+                    .background(indicatorColor, shape = RoundedCornerShape(1.5.dp))
+            )
+        },
+        divider = {},
+        modifier = modifier
+    ) {
+        titles.forEachIndexed { index, title ->
+            val selected = selectedTabIndex == index
+            Tab(
+                modifier = Modifier
+                    .padding(horizontal = 5.dp)
+                    .height(40.dp),
+                selected = selected,
+                onClick = { onTabSelected(index) },
+                selectedContentColor = colors.White,
+                unselectedContentColor = colors.Grey02,
+                text = {
+                    Text(
+                        text = title,
+                        style = typography.smalltitle_sb600_s18_h24,
+                        textAlign = TextAlign.Start
+                    )
+                }
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun HeaderMenuBarTabPreview() {
+    var selectedIndex = rememberSaveable { mutableIntStateOf(0) }
+
+    Box(modifier = Modifier) {
+        HeaderMenuBarTab(
+            titles = listOf("그룹 기록", "내 기록"),
+            selectedTabIndex = selectedIndex.value,
+            onTabSelected = { selectedIndex.value = it }
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt b/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt
index 50eba01b..2c592a64 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt
@@ -1,13 +1,12 @@
 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.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 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.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
@@ -18,14 +17,12 @@ 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.ColorFilter
-import androidx.compose.ui.graphics.painter.Painter
 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.AsyncImage
 import com.texthip.thip.R
-import com.texthip.thip.ui.theme.Grey
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
@@ -33,37 +30,38 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 @Composable
 fun ProfileBar(
     modifier: Modifier = Modifier,
-    profileImage: Painter?,
+    profileImage: String?,
     topText: String,
     bottomText: String,
+    bottomTextColor: Color = colors.NeonGreen,
     showSubscriberInfo: Boolean,
     subscriberCount: Int = 0,
-    hoursAgo: Int = 0
+    hoursAgo: String = "",
+    onClick: () -> Unit = { }
 ) {
     Row(
         modifier = modifier
             .fillMaxWidth()
-            .padding(horizontal = 16.dp, vertical = 12.dp),
+            .clickable { onClick() },
         verticalAlignment = Alignment.CenterVertically
     ) {
-        if (profileImage != null) {
-            Image(
-                painter = profileImage,
-                contentDescription = "프로필 이미지",
-                modifier = Modifier
-                    .size(36.dp)
-                    .clip(CircleShape)
-            )
-        } else {
-            Box(
-                modifier = Modifier
-                    .size(36.dp)
-                    .clip(CircleShape)
-                    .background(Grey)
-            )
-        }
+        AsyncImage(
+            model = profileImage,
+            contentDescription = "프로필 이미지",
+            modifier = Modifier
+                .size(36.dp)
+                .clip(CircleShape)
+                .border(
+                    width = 0.5.dp,
+                    color = colors.Grey02,
+                    shape = CircleShape
+                )
+        )
         Spacer(modifier = Modifier.width(8.dp))
-        Column(modifier = Modifier.weight(1f)) {
+        Column(
+            modifier = Modifier.weight(1f),
+            verticalArrangement = Arrangement.spacedBy(4.dp)
+        ) {
             Text(
                 text = topText,
                 style = typography.view_m500_s14,
@@ -72,7 +70,7 @@ fun ProfileBar(
             Text(
                 text = bottomText,
                 style = typography.info_r400_s12,
-                color = colors.NeonGreen
+                color = bottomTextColor
             )
         }
         if (showSubscriberInfo) {
@@ -80,11 +78,17 @@ fun ProfileBar(
                 verticalAlignment = Alignment.CenterVertically
             ) {
                 Text(
-                    text = stringResource(R.string.subscriber_num,subscriberCount),
+                    text = subscriberCount.toString(),
+                    style = typography.timedate_r400_s11,
+                    color = colors.Grey01
+                )
+                Spacer(modifier = Modifier.width(2.dp))
+                Text(
+                    text = stringResource(R.string.subscriber_num),
                     style = typography.timedate_r400_s11,
                     color = colors.Grey01
                 )
-                Spacer(modifier = Modifier.width(4.dp))
+                Spacer(modifier = Modifier.width(2.dp))
                 Icon(
                     painter = painterResource(id = R.drawable.ic_chevron_right),
                     contentDescription = "화살표",
@@ -94,7 +98,7 @@ fun ProfileBar(
             }
         } else {
             Text(
-                text = stringResource(R.string.hours_ago,hoursAgo),
+                text = hoursAgo,
                 style = typography.timedate_r400_s11,
                 color = colors.Grey01
             )
@@ -108,18 +112,18 @@ fun PreviewProfileBar() {
     ThipTheme {
         Column {
             ProfileBar(
-                profileImage = null,
+                profileImage = "문학_image",
                 topText = "user.01",
                 bottomText = stringResource(R.string.influencer),
                 showSubscriberInfo = true,
                 subscriberCount = 77
             )
             ProfileBar(
-                profileImage = null,
+                profileImage = "문학_image",
                 topText = "user.04",
                 bottomText = stringResource(R.string.influencer),
                 showSubscriberInfo = false,
-                hoursAgo = 7
+                hoursAgo = "10시간 전"
             )
         }
     }
diff --git a/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBarFeed.kt b/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBarFeed.kt
new file mode 100644
index 00000000..e6fd2ec6
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBarFeed.kt
@@ -0,0 +1,103 @@
+package com.texthip.thip.ui.common.header
+
+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
+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.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+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 ProfileBarFeed(
+    profileImage: String?,
+    nickname: String,
+    genreName: String,
+    genreColor: Color = colors.NeonGreen,
+    date: String,
+    onClick: () -> Unit = {}
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clickable { onClick() },
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Row {
+            if (profileImage != null) {
+                AsyncImage(
+                    model = profileImage,
+                    contentDescription = "프로필 이미지",
+                    modifier = Modifier
+                        .size(24.dp)
+                        .clip(CircleShape)
+                        .border(
+                            width = 0.5.dp,
+                            color = colors.Grey02,
+                            shape = CircleShape
+                        )
+                )
+            } else {
+                Box(
+                    modifier = Modifier
+                        .size(24.dp)
+                        .clip(CircleShape)
+                        .background(colors.Grey)
+                )
+            }
+            Spacer(modifier = Modifier.width(4.dp))
+            Column {
+                Text(
+                    text = nickname,
+                    style = typography.menu_sb600_s12,
+                    color = colors.White
+                )
+                Spacer(modifier = Modifier.height(2.dp))
+                Text(
+                    text = genreName,
+                    style = typography.timedate_r400_s11,
+                    color = genreColor
+                )
+            }
+        }
+
+        Text(
+            text = date,
+            style = typography.timedate_r400_s11,
+            color = colors.Grey01
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun ProfileBarFeedPreview() {
+    ThipTheme {
+        ProfileBarFeed(
+            profileImage = null,
+            nickname = "user.01",
+            genreName = "칭호칭호",
+            genreColor = colors.SocialScience,
+            date = "2025.01.12"
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBarWithDate.kt b/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBarWithDate.kt
index a9bef9eb..11cf3e9b 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBarWithDate.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/header/ProfileBarWithDate.kt
@@ -1,19 +1,16 @@
 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.Arrangement
 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.padding
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -21,10 +18,10 @@ 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.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
 import com.texthip.thip.R
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
@@ -32,46 +29,46 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 
 @Composable
 fun ProfileBarWithDate(
-    profileImage: Painter?,
+    profileImage: String,
     nickname: String,
     dateText: String,
     onMenuClick: () -> Unit = {}
 ) {
     Row(
         modifier = Modifier
-            .fillMaxWidth()
-            .padding(horizontal = 16.dp, vertical = 8.dp),
-        verticalAlignment = Alignment.CenterVertically
+            .fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
     ) {
-        if (profileImage != null) {
-            Image(
-                painter = profileImage,
+        Row {
+            AsyncImage(
+                model = profileImage,
                 contentDescription = "프로필 이미지",
                 modifier = Modifier
                     .size(24.dp)
                     .clip(CircleShape)
+                    .border(
+                        width = 0.5.dp,
+                        color = colors.Grey02,
+                        shape = CircleShape
+                    )
             )
-        } else {
-            Box(
-                modifier = Modifier
-                    .size(24.dp)
-                    .clip(CircleShape)
-                    .background(colors.Grey)
-            )
-        }
-        Spacer(modifier = Modifier.width(8.dp))
-        Column(modifier = Modifier.weight(1f)) {
-            Text(
-                text = nickname,
-                style = typography.menu_sb600_s12,
-                color = colors.White
-            )
-            Text(
-                text = dateText,
-                style = typography.timedate_r400_s11,
-                color = colors.Grey01
-            )
+            Spacer(modifier = Modifier.width(4.dp))
+            Column {
+                Text(
+                    text = nickname,
+                    style = typography.menu_sb600_s12,
+                    color = colors.White
+                )
+                Spacer(modifier = Modifier.height(2.dp))
+                Text(
+                    text = dateText,
+                    style = typography.timedate_r400_s11,
+                    color = colors.Grey01
+                )
+            }
         }
+
         Icon(
             painter = painterResource(R.drawable.ic_more),
             contentDescription = "메뉴",
@@ -82,12 +79,13 @@ fun ProfileBarWithDate(
         )
     }
 }
+
 @Preview(showBackground = true)
 @Composable
 fun PreviewProfileBarWithDate() {
     ThipTheme {
         ProfileBarWithDate(
-            profileImage = null,
+            profileImage = "https://example.com",
             nickname = "user.01",
             dateText = "2025.01.12"
         )
diff --git a/app/src/main/java/com/texthip/thip/ui/common/modal/DialogPopup.kt b/app/src/main/java/com/texthip/thip/ui/common/modal/DialogPopup.kt
index e920b072..37229e1d 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/modal/DialogPopup.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/modal/DialogPopup.kt
@@ -2,18 +2,12 @@ package com.texthip.thip.ui.common.modal
 
 import androidx.compose.foundation.background
 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.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -33,55 +27,45 @@ fun DialogPopup(
     onConfirm: () -> Unit,
     onCancel: () -> Unit
 ) {
-    Box(
+    Column(
         modifier = modifier
-            .width(320.dp)
-            .height(182.dp)
+            .size(width = 320.dp, height = 182.dp)
             .background(
                 color = colors.DarkGrey,
                 shape = RoundedCornerShape(12.dp)
             )
-            .padding(20.dp)
+            .padding(20.dp),
+        verticalArrangement = Arrangement.SpaceBetween,
     ) {
-        Column(
-            verticalArrangement = Arrangement.SpaceBetween,
-            modifier = Modifier.fillMaxSize()
-        ) {
-            Column {
-                Text(
-                    text = title,
-                    color = colors.White,
-                    style = typography.smalltitle_m500_s18_h24,
-                )
-                Spacer(modifier = Modifier.height(12.dp))
-                Text(
-                    text = description,
-                    color = colors.White,
-                    style = typography.copy_r400_s14,
-                )
-            }
-
-            //TODO: 추후 버튼 공통 컴포넌트로 변경
-            Row(
-                horizontalArrangement = Arrangement.spacedBy(20.dp),
-                modifier = Modifier.fillMaxWidth()
-            ) {
-                ActionMediumButton(
-                    text = stringResource(R.string.no),
-                    contentColor = colors.White,
-                    backgroundColor = colors.Grey02,
-                    modifier = Modifier.weight(1f),
-                    onClick = {},
-                )
-                ActionMediumButton(
-                    text = stringResource(R.string.yes),
-                    contentColor = colors.White,
-                    backgroundColor = colors.Purple,
-                    modifier = Modifier.weight(1f),
-                    onClick = {},
-                )
-            }
+        Text(
+            text = title,
+            color = colors.White,
+            style = typography.smalltitle_m500_s18_h24,
+        )
+        Text(
+            text = description,
+            color = colors.White,
+            style = typography.copy_r400_s14,
+        )
 
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(20.dp),
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            ActionMediumButton(
+                text = stringResource(R.string.no),
+                contentColor = colors.White,
+                backgroundColor = colors.Grey02,
+                modifier = Modifier.weight(1f),
+                onClick = onCancel,
+            )
+            ActionMediumButton(
+                text = stringResource(R.string.yes),
+                contentColor = colors.White,
+                backgroundColor = colors.Purple,
+                modifier = Modifier.weight(1f),
+                onClick = onConfirm,
+            )
         }
     }
 }
diff --git a/app/src/main/java/com/texthip/thip/ui/common/modal/InfoPopup.kt b/app/src/main/java/com/texthip/thip/ui/common/modal/InfoPopup.kt
index 8cc0290a..652f7642 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/modal/InfoPopup.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/modal/InfoPopup.kt
@@ -1,6 +1,8 @@
 package com.texthip.thip.ui.common.modal
 
 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
@@ -8,13 +10,17 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
+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.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -31,42 +37,73 @@ fun InfoPopup(
 ) {
     val scrollState = rememberScrollState()
 
-    Box(
-        modifier = modifier
-            .fillMaxWidth()
-            .background(colors.DarkGrey, shape = RoundedCornerShape(12.dp))
-            .padding(20.dp)
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = Modifier.background(Color.Transparent)
     ) {
-        Column {
-            Row(
-                verticalAlignment = Alignment.CenterVertically,
-                modifier = Modifier.fillMaxWidth()
+        Box(
+            modifier = modifier
+                .fillMaxWidth()
+                .background(colors.DarkGrey, shape = RoundedCornerShape(12.dp))
+                .padding(20.dp)
+        ) {
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally
             ) {
-                Text(
-                    text = title,
-                    color = colors.White,
-                    style = typography.smalltitle_sb600_s16_h24
-                )
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = Modifier.fillMaxWidth()
+                ) {
+                    Text(
+                        text = title,
+                        color = colors.White,
+                        style = typography.smalltitle_sb600_s16_h24
+                    )
+                }
+                Spacer(modifier = Modifier.height(12.dp))
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(284.dp)
+                        .verticalScroll(scrollState)
+                        .drawVerticalScrollbar(scrollState)
+                ) {
+                    Text(
+                        modifier = Modifier.padding(end = 8.dp),
+                        text = content,
+                        color = colors.White,
+                        style = typography.copy_r400_s12_h20
+                    )
+                }
             }
-            Spacer(modifier = Modifier.height(12.dp))
-            Box(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .height(284.dp)
-                    .verticalScroll(scrollState)
-                    .drawVerticalScrollbar(scrollState)
-            ) {
-                Text(
-                    text = content,
-                    color = colors.White,
-                    style = typography.copy_r400_s12_h20
+        }
+
+        // 아래쪽 X버튼 (원형)
+        Box(
+            modifier = Modifier
+                .padding(top = 20.dp)
+                .size(50.dp)
+                .background(Color.Transparent, shape = RoundedCornerShape(24.dp))
+                .border(
+                    width = 2.dp,
+                    color = colors.Grey02,
+                    shape = RoundedCornerShape(24.dp)
                 )
-            }
+                .clickable { onDismiss() },
+            contentAlignment = Alignment.Center
+        ) {
+            Icon(
+                painter = painterResource(R.drawable.ic_x_20),
+                contentDescription = "닫기",
+                tint = colors.White,
+                modifier = Modifier.size(24.dp)
+            )
         }
     }
 }
 
-@Preview(showBackground = true)
+
+@Preview()
 @Composable
 fun PreviewInfoPopup() {
     val dummyText = """
diff --git a/app/src/main/java/com/texthip/thip/ui/common/modal/ScrollbarUtil.kt b/app/src/main/java/com/texthip/thip/ui/common/modal/ScrollbarUtil.kt
index 6689e4eb..40a7978a 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/modal/ScrollbarUtil.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/modal/ScrollbarUtil.kt
@@ -1,12 +1,14 @@
 package com.texthip.thip.ui.common.modal
 
 import androidx.compose.foundation.ScrollState
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.geometry.CornerRadius
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 
diff --git a/app/src/main/java/com/texthip/thip/ui/common/modal/ToastWithDate.kt b/app/src/main/java/com/texthip/thip/ui/common/modal/ToastWithDate.kt
new file mode 100644
index 00000000..88c4e2c4
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/modal/ToastWithDate.kt
@@ -0,0 +1,71 @@
+package com.texthip.thip.ui.common.modal
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+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.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.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun ToastWithDate(
+    modifier: Modifier = Modifier,
+    message: String = stringResource(R.string.group_room_chat_max),
+    color: Color = colors.White,
+    date: String? = null
+) {
+    Box(
+        modifier = modifier
+            .clip(RoundedCornerShape(12.dp))
+            .background(color = colors.DarkGrey02)
+            .border(
+                width = 1.dp,
+                color = colors.Grey02,
+                shape = RoundedCornerShape(12.dp)
+            )
+            .padding(15.dp)
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = if (date != null) Arrangement.SpaceBetween else Arrangement.Start
+        ) {
+            Text(
+                text = message,
+                color = color,
+                style = typography.view_m500_s12_h20
+            )
+            if (date != null) {
+                Text(
+                    text = date,
+                    color = colors.Grey02,
+                    style = typography.timedate_r400_s11
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun ToastPrev() {
+    ToastWithDate(
+        message = stringResource(R.string.push_off),
+        date = "2025년 6월 29일 22시 30분",
+        modifier = Modifier.fillMaxWidth()
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/modal/ToolTip.kt b/app/src/main/java/com/texthip/thip/ui/common/modal/ToolTip.kt
index 183acbc1..dd292125 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/modal/ToolTip.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/modal/ToolTip.kt
@@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -19,6 +18,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -27,7 +27,6 @@ import androidx.compose.ui.unit.dp
 import com.texthip.thip.R
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
-import androidx.compose.ui.platform.LocalDensity
 
 enum class ArrowPosition {
     LEFT, CENTER, RIGHT
@@ -57,6 +56,7 @@ fun PopupModal(
     text: String,
     modifier: Modifier = Modifier,
     arrowPosition: ArrowPosition = ArrowPosition.RIGHT,
+    isEligible: Boolean = true,
     onClose: () -> Unit = {}
 ) {
     Column(
@@ -70,14 +70,14 @@ fun PopupModal(
             val arrowModifier = when (arrowPosition) {
                 ArrowPosition.LEFT -> Modifier
                     .align(Alignment.TopStart)
-                    .padding(start = 24.dp)
+                    .padding(start = 64.dp)
 
                 ArrowPosition.CENTER -> Modifier
                     .align(Alignment.TopCenter)
 
                 ArrowPosition.RIGHT -> Modifier
                     .align(Alignment.TopEnd)
-                    .padding(end = 24.dp)
+                    .padding(end = 64.dp)
             }
             TriangleArrow(
                 color = colors.DarkGrey,
@@ -95,7 +95,7 @@ fun PopupModal(
             ) {
                 Text(
                     text = text,
-                    color = colors.NeonGreen,
+                    color = if (isEligible) colors.NeonGreen else colors.Red,
                     style = typography.info_m500_s12,
                     modifier = Modifier.weight(1f)
                 )
@@ -117,25 +117,26 @@ fun PopupModal(
 private fun PopupPrev() {
     Column {
         PopupModal(
-            text = stringResource(R.string.condition_of_general_review,80),
+            text = stringResource(R.string.condition_of_general_review),
             modifier = Modifier
                 .width(400.dp)
                 .padding(16.dp),
             arrowPosition = ArrowPosition.LEFT
         )
         PopupModal(
-            text = stringResource(R.string.condition_of_general_review,80),
+            text = stringResource(R.string.condition_of_general_review),
             modifier = Modifier
                 .width(400.dp)
                 .padding(16.dp),
             arrowPosition = ArrowPosition.CENTER
         )
         PopupModal(
-            text = stringResource(R.string.condition_of_general_review,80),
+            text = stringResource(R.string.condition_of_general_review),
             modifier = Modifier
                 .width(400.dp)
                 .padding(16.dp),
-            arrowPosition = ArrowPosition.RIGHT
+            arrowPosition = ArrowPosition.RIGHT,
+            isEligible = false
         )
     }
 }
diff --git a/app/src/main/java/com/texthip/thip/ui/common/screen/RegisterBookScreen.kt b/app/src/main/java/com/texthip/thip/ui/common/screen/RegisterBookScreen.kt
new file mode 100644
index 00000000..5e59b62c
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/screen/RegisterBookScreen.kt
@@ -0,0 +1,69 @@
+package com.texthip.thip.ui.common.screen
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+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.topappbar.DefaultTopAppBar
+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 RegisterBookScreen(
+    modifier: Modifier = Modifier,
+    onLeftClick: () -> Unit = {}
+) {
+    Column(
+        modifier = modifier
+            .fillMaxSize(),
+        verticalArrangement = Arrangement.Top,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        DefaultTopAppBar(
+            title = stringResource(R.string.group_request_book),
+            onLeftClick = onLeftClick,
+        )
+        Column (
+            modifier = Modifier
+                .fillMaxSize(),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Text(
+                text = stringResource(R.string.customer_center_email),
+                style = typography.smalltitle_sb600_s18_h24,
+                color = colors.White
+            )
+            Spacer(modifier = Modifier.padding(top = 8.dp))
+
+            Text(
+                text = stringResource(R.string.group_request_book_comment_1),
+                style = typography.copy_r400_s14,
+                color = colors.White
+            )
+            Text(
+                text = stringResource(R.string.group_request_book_comment_2),
+                style = typography.copy_r400_s14,
+                color = colors.White
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun GroupRegisterBookPreview() {
+    ThipTheme {
+        RegisterBookScreen()
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/common/topappbar/BookTopAppBar.kt b/app/src/main/java/com/texthip/thip/ui/common/topappbar/BookTopAppBar.kt
deleted file mode 100644
index 69e3e31f..00000000
--- a/app/src/main/java/com/texthip/thip/ui/common/topappbar/BookTopAppBar.kt
+++ /dev/null
@@ -1,63 +0,0 @@
-package com.texthip.thip.ui.common.topappbar
-
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.tooling.preview.Preview
-import com.texthip.thip.R
-import com.texthip.thip.ui.common.view.CountingBar
-import com.texthip.thip.ui.theme.ThipTheme
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun BookTopAppBar(
-    count: Int = 0,
-    onLeftClick: () -> Unit,
-    onRightClick: () -> Unit,
-) {
-    TopAppBar(
-        navigationIcon = {
-            IconButton(onClick = onLeftClick) {
-                Icon(
-                    painter = painterResource(R.drawable.ic_arrow_back),
-                    contentDescription = "Back Button",
-                    tint = Color.Unspecified
-                )
-            }
-        },
-        title = {
-            CountingBar(
-                count = count,
-            )
-        },
-        actions = {
-            IconButton(onClick = onRightClick) {
-                Icon(
-                    painter = painterResource(R.drawable.ic_more),
-                    contentDescription = "More Options",
-                    tint = Color.Unspecified
-                )
-            }
-        },
-        colors = TopAppBarDefaults.topAppBarColors(
-            containerColor = Color.Transparent,
-        ),
-    )
-}
-
-@Preview(showBackground = false)
-@Composable
-private fun BookTopAppBarPreview() {
-    ThipTheme {
-        BookTopAppBar(
-            onLeftClick = { },
-            onRightClick = { },
-            count = 210
-        )
-    }
-}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/topappbar/DefaultTopAppBar.kt b/app/src/main/java/com/texthip/thip/ui/common/topappbar/DefaultTopAppBar.kt
index 8d51b534..97060311 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/topappbar/DefaultTopAppBar.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/topappbar/DefaultTopAppBar.kt
@@ -1,64 +1,77 @@
 package com.texthip.thip.ui.common.topappbar
 
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.material3.CenterAlignedTopAppBar
-import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
+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.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.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun DefaultTopAppBar(
+    modifier: Modifier = Modifier,
     title: String = stringResource(R.string.page_name),
     isTitleVisible: Boolean = true,
     isRightIconVisible: Boolean = false,
     onLeftClick: () -> Unit,
     onRightClick: () -> Unit = {},
 ) {
-    CenterAlignedTopAppBar(
-        navigationIcon = {
-            IconButton(onClick = onLeftClick) {
-                Icon(
-                    painter = painterResource(R.drawable.ic_arrow_back),
-                    contentDescription = "Back Button",
-                    tint = Color.Unspecified
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 20.dp, vertical = 16.dp)
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.ic_arrow_back),
+            contentDescription = "Back Button",
+            tint = Color.Unspecified,
+            modifier = Modifier
+                .align(Alignment.CenterStart)
+                .clickable(
+                    interactionSource = remember { MutableInteractionSource() },
+                    indication = null,
+                    onClick = onLeftClick
                 )
-            }
-        },
-        title = {
-            if (isTitleVisible) {
-                Text(
-                    text = title,
-                    color = colors.White,
-                    style = typography.bigtitle_b700_s22_h24
-                )
-            }
-        },
-        actions = {
-            if (isRightIconVisible) {
-                IconButton(onClick = onRightClick) {
-                    Icon(
-                        painter = painterResource(R.drawable.ic_more),
-                        contentDescription = "More Options",
-                        tint = Color.Unspecified
+        )
+
+        if (isTitleVisible) {
+            Text(
+                text = title,
+                color = colors.White,
+                style = typography.bigtitle_b700_s22_h24,
+                modifier = Modifier.align(Alignment.Center)
+            )
+        }
+
+        if (isRightIconVisible) {
+            Icon(
+                painter = painterResource(R.drawable.ic_more),
+                contentDescription = "More Options",
+                tint = Color.Unspecified,
+                modifier = Modifier
+                    .align(Alignment.CenterEnd)
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = null,
+                        onClick = onRightClick
                     )
-                }
-            }
-        },
-        colors = TopAppBarDefaults.topAppBarColors(
-            containerColor = Color.Transparent,
-        ),
-    )
+            )
+        }
+    }
 }
 
 @Preview
diff --git a/app/src/main/java/com/texthip/thip/ui/common/topappbar/FeedListTopAppBar.kt b/app/src/main/java/com/texthip/thip/ui/common/topappbar/FeedListTopAppBar.kt
index aace1689..6168cb01 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/topappbar/FeedListTopAppBar.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/topappbar/FeedListTopAppBar.kt
@@ -1,15 +1,17 @@
 package com.texthip.thip.ui.common.topappbar
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
-import androidx.compose.material3.CenterAlignedTopAppBar
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBarDefaults
 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.res.painterResource
@@ -21,7 +23,6 @@ import com.texthip.thip.R
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun FeedListTopAppBar(
     nickname: String = "ThipUser 01ThipUser 01",
@@ -29,54 +30,55 @@ fun FeedListTopAppBar(
     onLeftClick: () -> Unit,
     onRightClick: () -> Unit = {},
 ) {
-    CenterAlignedTopAppBar(
-        navigationIcon = {
-            IconButton(onClick = onLeftClick) {
-                Icon(
-                    painter = painterResource(R.drawable.ic_arrow_back),
-                    contentDescription = "Back Button",
-                    tint = Color.Unspecified
-                )
-            }
-        },
-        title = {
-            Row(
-                horizontalArrangement = Arrangement.spacedBy(8.dp)
-            ) {
-                Text(
-                    text = nickname,
-                    color = colors.White,
-                    style = typography.bigtitle_b700_s22_h24,
-                    modifier = Modifier.width(100.dp),
-                    maxLines = 1,
-                    overflow = TextOverflow.Ellipsis,
-                )
-                Text(
-                    text = stringResource(R.string.subscriber),
-                    color = colors.White,
-                    style = typography.bigtitle_b700_s22_h24,
-                    modifier = Modifier.width(100.dp),
-                    maxLines = 1
-                )
-            }
-        },
-        actions = {
-            if (isRightIconVisible) {
-                IconButton(onClick = {
-                    onRightClick()
-                }) {
-                    Icon(
-                        painter = painterResource(R.drawable.ic_more),
-                        contentDescription = "More Options",
-                        tint = Color.Unspecified
-                    )
-                }
-            }
-        },
-        colors = TopAppBarDefaults.topAppBarColors(
-            containerColor = Color.Transparent,
-        ),
-    )
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(color = colors.Black)
+            .padding(horizontal = 20.dp, vertical = 16.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.ic_arrow_back),
+            contentDescription = "Back Button",
+            tint = Color.Unspecified,
+            modifier = Modifier
+                .align(Alignment.CenterStart)
+                .clickable { onLeftClick() }
+        )
+
+        Row(
+            modifier = Modifier.align(Alignment.Center),
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Text(
+                text = nickname,
+                color = colors.White,
+                style = typography.bigtitle_b700_s22_h24,
+                modifier = Modifier.width(100.dp),
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
+            Text(
+                text = stringResource(R.string.subscriber),
+                color = colors.White,
+                style = typography.bigtitle_b700_s22_h24,
+                modifier = Modifier.width(100.dp),
+                maxLines = 1
+            )
+        }
+
+        if (isRightIconVisible) {
+            Icon(
+                painter = painterResource(R.drawable.ic_more),
+                contentDescription = "More Options",
+                tint = Color.Unspecified,
+                modifier = Modifier
+                    .align(Alignment.CenterEnd)
+                    .clickable { onRightClick() }
+            )
+        }
+    }
 }
 
 @Preview
diff --git a/app/src/main/java/com/texthip/thip/ui/common/topappbar/GradationTopAppBar.kt b/app/src/main/java/com/texthip/thip/ui/common/topappbar/GradationTopAppBar.kt
new file mode 100644
index 00000000..d13f3b76
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/topappbar/GradationTopAppBar.kt
@@ -0,0 +1,137 @@
+package com.texthip.thip.ui.common.topappbar
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+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.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+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
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.view.CountingBar
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import kotlinx.coroutines.delay
+
+@Composable
+fun GradationTopAppBar(
+    isImageVisible: Boolean = false,
+    count: Int = 0,
+    autoHideCount: Boolean? = null,
+    countDisplayDurationMs: Long = 5000L,
+    onLeftClick: () -> Unit,
+    isRightIconVisible: Boolean = false,
+    onRightClick: () -> Unit = {},
+) {
+    var isCountVisible by remember { mutableStateOf(isImageVisible) }
+
+    // autoHideCount가 null이 아닐 때만 자동 숨김 로직 실행
+    LaunchedEffect(autoHideCount, count) {
+        when (autoHideCount) {
+            true -> {
+                if (count > 0) {
+                    isCountVisible = true
+                    delay(countDisplayDurationMs)
+                    isCountVisible = false
+                }
+            }
+
+            false -> {
+                isCountVisible = true
+            }
+
+            null -> {
+                // 기존 동작 유지: isImageVisible 파라미터 사용
+                isCountVisible = isImageVisible
+            }
+        }
+    }
+
+    val bgColor = Brush.verticalGradient(
+        colors = listOf(
+            colors.Black,
+            colors.Black00
+        )
+    )
+
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(brush = bgColor)
+            .padding(horizontal = 20.dp)
+            .height(56.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.ic_arrow_back),
+            contentDescription = "Back Button",
+            tint = Color.Unspecified,
+            modifier = Modifier
+                .align(Alignment.CenterStart)
+                .clickable(
+                    interactionSource = remember { MutableInteractionSource() },
+                    indication = null,
+                    onClick = onLeftClick
+                )
+        )
+
+        Column {
+            AnimatedVisibility(
+                visible = isCountVisible && count > 0
+            ) {
+                CountingBar(
+                    content = stringResource(R.string.reading_user_num, count)
+                )
+            }
+        }
+
+        if (isRightIconVisible) {
+            Icon(
+                painter = painterResource(R.drawable.ic_more),
+                contentDescription = "More Options",
+                tint = Color.Unspecified,
+                modifier = Modifier
+                    .align(Alignment.CenterEnd)
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = null,
+                        onClick = onRightClick
+                    )
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun GradationTopAppBarPreview() {
+    Column {
+        GradationTopAppBar(
+            onLeftClick = { },
+            onRightClick = { },
+            count = 210
+        )
+        GradationTopAppBar(
+            isImageVisible = true,
+            onLeftClick = { },
+            onRightClick = { },
+            count = 210
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/topappbar/InputTopAppBar.kt b/app/src/main/java/com/texthip/thip/ui/common/topappbar/InputTopAppBar.kt
index 8da648f4..300d4b20 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/topappbar/InputTopAppBar.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/topappbar/InputTopAppBar.kt
@@ -1,14 +1,16 @@
 package com.texthip.thip.ui.common.topappbar
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.CenterAlignedTopAppBar
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBarDefaults
 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.res.painterResource
@@ -20,7 +22,6 @@ import com.texthip.thip.ui.common.buttons.HeaderButton
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun InputTopAppBar(
     title: String = stringResource(R.string.page_name),
@@ -30,41 +31,41 @@ fun InputTopAppBar(
     onLeftClick: () -> Unit = {},
     onRightClick: () -> Unit = {},
 ) {
-    CenterAlignedTopAppBar(
-        navigationIcon = {
-            if (isLeftIconVisible) {
-                IconButton(onClick = onLeftClick) {
-                    Icon(
-                        painter = painterResource(R.drawable.ic_arrow_back),
-                        contentDescription = "Back Button",
-                        tint = Color.Unspecified
-                    )
-                }
-            }
-        },
-        title = {
-            Text(
-                text = title,
-                color = colors.White,
-                style = typography.bigtitle_b700_s22_h24
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(color = colors.Black)
+            .height(56.dp)
+            .padding(horizontal = 20.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        if (isLeftIconVisible) {
+            Icon(
+                painter = painterResource(R.drawable.ic_arrow_back),
+                contentDescription = "Back Button",
+                tint = Color.Unspecified,
+                modifier = Modifier
+                    .align(Alignment.CenterStart)
+                    .clickable { onLeftClick() }
             )
-        },
-        actions = {
-            HeaderButton(
-                text = rightButtonName,
-                enabled = isRightButtonEnabled,
-                onClick = {
-                    onRightClick()
-                },
-                modifier = Modifier.padding(
-                    end = 18.dp
-                )
-            )
-        },
-        colors = TopAppBarDefaults.topAppBarColors(
-            containerColor = Color.Transparent,
-        ),
-    )
+        }
+
+        Text(
+            text = title,
+            color = colors.White,
+            style = typography.bigtitle_b700_s22_h24,
+            modifier = Modifier.align(Alignment.Center)
+        )
+
+        HeaderButton(
+            text = rightButtonName,
+            enabled = isRightButtonEnabled,
+            onClick = onRightClick,
+            modifier = Modifier
+                .align(Alignment.CenterEnd)
+                .padding(end = 2.dp)
+        )
+    }
 }
 
 @Preview
diff --git a/app/src/main/java/com/texthip/thip/ui/common/topappbar/LeftNameTopAppBar.kt b/app/src/main/java/com/texthip/thip/ui/common/topappbar/LeftNameTopAppBar.kt
index fdfb0d63..c46aebb6 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/topappbar/LeftNameTopAppBar.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/topappbar/LeftNameTopAppBar.kt
@@ -1,15 +1,17 @@
 package com.texthip.thip.ui.common.topappbar
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement.Absolute.spacedBy
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 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
@@ -21,66 +23,62 @@ import com.texthip.thip.R
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun LeftNameTopAppBar(
     title: String = stringResource(R.string.page_name),
     isLeftIconVisible: Boolean = false,
     isRightIconVisible: Boolean = false,
-    leftIcon: Painter,
-    rightIcon: Painter,
+    leftIcon: Painter = painterResource(R.drawable.ic_search),
+    rightIcon: Painter = painterResource(R.drawable.ic_plus),
     onLeftClick: () -> Unit = {},
     onRightClick: () -> Unit = {}
 ) {
-    TopAppBar(
-        navigationIcon = {
-            Text(
-                text = title,
-                color = colors.White,
-                style = typography.bigtitle_b700_s22_h24,
-                modifier = Modifier.padding(start = 18.dp)
-            )
-        },
-        title = {
-            Spacer(modifier = Modifier)
-        },
-        actions = {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(color = colors.Black)
+            .padding(horizontal = 20.dp, vertical = 16.dp),
+        contentAlignment = Alignment.CenterStart
+    ) {
+        Text(
+            text = title,
+            color = colors.White,
+            style = typography.bigtitle_b700_s22_h24,
+            modifier = Modifier.align(Alignment.CenterStart)
+        )
+
+        Row(
+            modifier = Modifier
+                .align(Alignment.CenterEnd),
+            horizontalArrangement = spacedBy(20.dp),
+        ) {
             if (isLeftIconVisible) {
-                IconButton(onClick = onLeftClick) {
-                    Icon(
-                        painter = leftIcon,
-                        contentDescription = "Left Icon",
-                        tint = Color.Unspecified
-                    )
-                }
+                Icon(
+                    painter = leftIcon,
+                    contentDescription = "Left Icon",
+                    tint = Color.Unspecified,
+                    modifier = Modifier.clickable { onLeftClick() }
+                )
             }
             if (isRightIconVisible) {
-                IconButton(onClick = onRightClick) {
-                    Icon(
-                        painter = rightIcon,
-                        contentDescription = "Right Icon",
-                        tint = Color.Unspecified
-                    )
-                }
+                Icon(
+                    painter = rightIcon,
+                    contentDescription = "Right Icon",
+                    tint = Color.Unspecified,
+                    modifier = Modifier.clickable { onRightClick() }
+                )
             }
-        },
-        colors = TopAppBarDefaults.topAppBarColors(
-            containerColor = Color.Transparent,
-        )
-    )
+        }
+    }
 }
 
+
 @Preview
 @Composable
 private fun LeftNameTopAppBarPreview() {
     Column {
+        LeftNameTopAppBar()
         LeftNameTopAppBar(
-            leftIcon = painterResource(R.drawable.ic_search),
-            rightIcon = painterResource(R.drawable.ic_plus)
-        )
-        LeftNameTopAppBar(
-            leftIcon = painterResource(R.drawable.ic_search),
-            rightIcon = painterResource(R.drawable.ic_plus),
             isLeftIconVisible = true,
             isRightIconVisible = true
         )
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 31c5fe2b..14fcd678 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
@@ -1,15 +1,17 @@
 package com.texthip.thip.ui.common.topappbar
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 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
@@ -17,10 +19,11 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun LogoTopAppBar(
+    modifier: Modifier = Modifier,
     leftIcon: Painter,
     hasNotification: Boolean,
     onLeftClick: () -> Unit = {},
@@ -29,42 +32,44 @@ fun LogoTopAppBar(
     val rightIcon = if (hasNotification) {
         painterResource(R.drawable.ic_notice_yes)
     } else {
-        painterResource(R.drawable.ic_notice)
+        painterResource(R.drawable.ic_notice_no)
     }
 
-    TopAppBar(
-        navigationIcon = {
-            Image(
-                painter = painterResource(R.drawable.ic_logo),
-                contentDescription = "Logo",
-                modifier = Modifier
-                    .height(24.dp)
-                    .padding(start = 18.dp),
-            )
-        },
-        title = {
-            Spacer(modifier = Modifier)
-        },
-        actions = {
-            IconButton(onClick = onLeftClick) {
-                Icon(
-                    painter = leftIcon,
-                    contentDescription = "Left Icon",
-                    tint = Color.Unspecified
-                )
-            }
-            IconButton(onClick = onRightClick) {
-                Icon(
-                    painter = rightIcon,
-                    contentDescription = "Right Icon",
-                    tint = Color.Unspecified
-                )
-            }
-        },
-        colors = TopAppBarDefaults.topAppBarColors(
-            containerColor = Color.Transparent,
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(color = colors.Black)
+            .padding(horizontal = 20.dp, vertical = 16.dp),
+        contentAlignment = Alignment.CenterStart
+    ) {
+        Image(
+            painter = painterResource(R.drawable.ic_logo),
+            contentDescription = "Logo",
+            modifier = Modifier
+                .height(24.dp)
+                .align(Alignment.CenterStart)
         )
-    )
+
+        Row(
+            modifier = Modifier
+                .align(Alignment.CenterEnd),
+            horizontalArrangement = Arrangement.spacedBy(20.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Icon(
+                painter = leftIcon,
+                contentDescription = "Left Icon",
+                tint = Color.Unspecified,
+                modifier = Modifier.clickable { onLeftClick() }
+            )
+            Icon(
+                painter = rightIcon,
+                contentDescription = "Right Icon",
+                tint = Color.Unspecified,
+                modifier = Modifier.clickable { onRightClick() }
+            )
+        }
+    }
 }
 
 @Preview
@@ -73,7 +78,7 @@ private fun LogoTopAppBarPreview() {
     LogoTopAppBar(
         leftIcon = painterResource(R.drawable.ic_search),
         hasNotification = true,
-        onLeftClick = { },
-        onRightClick = { }
+        onLeftClick = {},
+        onRightClick = {}
     )
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/view/CountingBar.kt b/app/src/main/java/com/texthip/thip/ui/common/view/CountingBar.kt
index 3b063009..03876a9b 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/view/CountingBar.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/view/CountingBar.kt
@@ -2,9 +2,7 @@ package com.texthip.thip.ui.common.view
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
@@ -21,24 +19,21 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 @Composable
 fun CountingBar(
     modifier: Modifier = Modifier,
-    count: Int
+    content: String,
 ) {
-    Box(
+    Row(
         modifier = modifier
             .background(colors.DarkGrey02, shape = RoundedCornerShape(16.dp))
-            .padding(horizontal = 16.dp, vertical = 8.dp)
+            .padding(horizontal = 16.dp, vertical = 8.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.Center,
     ) {
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.Center,
-            modifier = Modifier.fillMaxWidth()
-        ) {
-            Text(
-                text = stringResource(R.string.reading_user_num, count),
-                color = colors.NeonGreen,
-                style = typography.menu_r400_s14_h24
-            )
-        }
+        Text(
+            content,
+            color = colors.NeonGreen,
+            style = typography.menu_r400_s14_h24,
+            maxLines = 1
+        )
     }
 }
 
@@ -46,7 +41,6 @@ fun CountingBar(
 @Composable
 private fun CountingBarPrev() {
     CountingBar(
-        count = 200,
-        modifier = Modifier.fillMaxWidth()
+        content = stringResource(R.string.reading_user_num, 200),
     )
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/CommentPopup.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/CommentPopup.kt
new file mode 100644
index 00000000..130d3a87
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/CommentPopup.kt
@@ -0,0 +1,71 @@
+package com.texthip.thip.ui.feed.component
+
+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.padding
+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.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Popup
+import androidx.compose.ui.window.PopupProperties
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+import kotlin.math.roundToInt
+
+@Composable
+fun CommentActionPopup(
+    text: String,
+    textColor: Color = colors.White,
+    onClick: () -> Unit,
+    onDismissRequest: () -> Unit
+) {
+    val density = LocalDensity.current
+    val yOffsetPx = with(density) { 45.dp.toPx() }.roundToInt()
+
+    Popup(
+        alignment = Alignment.BottomEnd,
+        offset = IntOffset(x = 0, yOffsetPx),
+        onDismissRequest = onDismissRequest,
+        properties = PopupProperties(focusable = true)
+    ) {
+        Box(
+            modifier = Modifier
+                .background(
+                    colors.Black,
+                    RoundedCornerShape(12.dp)
+                )
+                .border(
+                    width = 1.dp,
+                    color = colors.White,
+                    shape = RoundedCornerShape(12.dp)
+                )
+                .clickable { onClick() }
+                .padding(horizontal = 20.dp, vertical = 12.dp)
+        ) {
+            Text(
+                text = text,
+                style = typography.feedcopy_r400_s14_h20,
+                color = textColor
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun CommentActionPopupPreview() {
+    CommentActionPopup(
+        text = "삭제하기",
+        onClick = { },
+        onDismissRequest = { }
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/FeedSubscribelistBar.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/FeedSubscribelistBar.kt
new file mode 100644
index 00000000..eeb3a7f5
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/FeedSubscribelistBar.kt
@@ -0,0 +1,140 @@
+package com.texthip.thip.ui.feed.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+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.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+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.AsyncImage
+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 = colors.White
+        )
+        Text(
+            text = buildAnnotatedString {
+                withStyle(
+                    style = SpanStyle(
+                        fontWeight = FontWeight.Bold,
+                        color = colors.White
+                    )
+                ) {
+                    append(stringResource(R.string.thip_num, followerProfileImageUrls.size))                }
+                withStyle(
+                    style = SpanStyle(
+                        color = colors.Grey
+                    )
+                ) {
+                    append(stringResource(R.string.thip_ing))
+                }
+            },
+            style = typography.info_r400_s12,
+            modifier = Modifier.padding(start = 2.dp)
+        )
+        Spacer(modifier = Modifier.weight(1f))
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            if (followerProfileImageUrls.isNotEmpty()) {
+                val previewList = followerProfileImageUrls.take(5)
+                previewList.reversed().forEachIndexed { index, imageUrl ->
+                    AsyncImage(
+                        model = imageUrl,
+                        contentDescription = null,
+                        modifier = Modifier
+                            .size(24.dp)
+                            .clip(CircleShape)
+                            .border(
+                                width = 0.5.dp,
+                                color = colors.Grey02,
+                                shape = CircleShape
+                            )
+                            .background(Color.LightGray)
+                    )
+
+                    val isLast = index == previewList.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
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/ImageViewerModal.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/ImageViewerModal.kt
new file mode 100644
index 00000000..65d455ca
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/ImageViewerModal.kt
@@ -0,0 +1,165 @@
+package com.texthip.thip.ui.feed.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import coil.compose.AsyncImage
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun ImageViewerModal(
+    imageUrls: List<String>,
+    initialIndex: Int = 0,
+    onDismiss: () -> Unit
+) {
+    val pagerState = rememberPagerState(
+        initialPage = initialIndex,
+        pageCount = { imageUrls.size }
+    )
+
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(colors.Black80)
+            .clickable { onDismiss() }
+    ) {
+        // 이전 버튼
+        Box(
+            modifier = Modifier
+                .align(Alignment.TopStart)
+                .padding(horizontal = 20.dp, vertical = 16.dp)
+                .zIndex(1f)
+        ) {
+            Icon(
+                painter = painterResource(R.drawable.ic_arrow_back),
+                contentDescription = "닫기",
+                tint = colors.White,
+                modifier = Modifier
+                    .size(24.dp)
+                    .clickable { onDismiss() }
+            )
+        }
+
+        // 이미지 페이저
+        HorizontalPager(
+            state = pagerState,
+            modifier = Modifier
+                .fillMaxSize()
+                .clickable { /* HorizontalPager 내부 클릭 시 모달 닫기 방지 */ }
+        ) { page ->
+            Box(
+                modifier = Modifier
+                    .fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                AsyncImage(
+                    model = imageUrls[page],
+                    contentDescription = null,
+                    contentScale = ContentScale.Fit, // 원본 비율 유지하면서 화면에 맞춤
+                    modifier = Modifier.fillMaxSize()
+                )
+            }
+        }
+
+        // 페이지 인디케이터 (이미지가 2개 이상일 때만 표시)
+        if (imageUrls.size > 1) {
+            Row(
+                modifier = Modifier
+                    .align(Alignment.BottomCenter)
+                    .padding(20.dp),
+                horizontalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+                repeat(imageUrls.size) { index ->
+                    Box(
+                        modifier = Modifier
+                            .size(8.dp)
+                            .clip(CircleShape)
+                            .background(
+                                if (index == pagerState.currentPage) colors.White
+                                else colors.White.copy(alpha = 0.4f)
+                            )
+                    )
+                }
+            }
+        }
+
+        // 이미지 카운터 (예: 1/3)
+        if (imageUrls.size > 1) {
+            Text(
+                text = stringResource(
+                    id = R.string.tag_count,
+                    pagerState.currentPage + 1,
+                    imageUrls.size
+                ),
+                style = typography.copy_r400_s14,
+                color = colors.White,
+                modifier = Modifier
+                    .align(Alignment.TopCenter)
+                    .padding(20.dp)
+                    .background(
+                        colors.Black.copy(alpha = 0.5f),
+                        shape = androidx.compose.foundation.shape.RoundedCornerShape(12.dp)
+                    )
+                    .padding(horizontal = 12.dp, vertical = 6.dp)
+            )
+        }
+    }
+}
+
+
+@Preview
+@Composable
+private fun ImageViewerModalSingleImagePreview() {
+    ThipTheme {
+        val mockImageUrls = listOf(
+            "https://example.com/image1.jpg"
+        )
+
+        ImageViewerModal(
+            imageUrls = mockImageUrls,
+            initialIndex = 0,
+            onDismiss = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun ImageViewerModalMultipleImagesPreview() {
+    ThipTheme {
+        val mockImageUrls = listOf(
+            "https://example.com/image1.jpg",
+            "https://example.com/image2.jpg",
+            "https://example.com/image3.jpg"
+        )
+
+        ImageViewerModal(
+            imageUrls = mockImageUrls,
+            initialIndex = 1,
+            onDismiss = { }
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/LiveSearchPeopleResult.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/LiveSearchPeopleResult.kt
new file mode 100644
index 00000000..23e0941c
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/LiveSearchPeopleResult.kt
@@ -0,0 +1,95 @@
+package com.texthip.thip.ui.feed.component
+
+import androidx.compose.foundation.background
+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.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.ui.common.header.AuthorHeader
+import com.texthip.thip.ui.feed.mock.MySubscriptionData
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+
+@Composable
+fun SearchPeopleResult(
+    modifier: Modifier = Modifier,
+    peopleList: List<MySubscriptionData>,
+    onThipNumClick: (MySubscriptionData) -> Unit = {}
+) {
+    LazyColumn (modifier = modifier){
+        itemsIndexed(peopleList) { index, user ->
+            AuthorHeader(
+                profileImage = user.profileImageUrl,
+                nickname = user.nickname,
+                badgeText = user.role,
+                badgeTextColor = user.roleColor,
+                profileImageSize = 36.dp,
+                showButton = false,
+                showThipNum = true,
+                thipNum = user.subscriberCount,
+                onClick = { onThipNumClick(user) }
+            )
+            if (index < peopleList.size - 1) {
+                Spacer(
+                    modifier = Modifier
+                        .padding(vertical = 12.dp, horizontal = 20.dp)
+                        .fillMaxWidth()
+                        .height(1.dp)
+                        .background(colors.DarkGrey02)
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SearchPeopleResultPreview() {
+    ThipTheme {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+        ) {
+            SearchPeopleResult(
+                peopleList = listOf(
+                    MySubscriptionData(
+                        userId = 1L,
+                        profileImageUrl = null,
+                        nickname = "Thiper_Official",
+                        role = "공식 인플루언서",
+                        roleColor = colors.NeonGreen,
+                        subscriberCount = 50,
+                        isSubscribed = false,
+
+                    ),
+                    MySubscriptionData(
+                        userId = 1L,
+                        profileImageUrl = null,
+                        nickname = "Thiper_Writer",
+                        role = "작가",
+                        roleColor = colors.Yellow,
+                        subscriberCount = 120,
+                        isSubscribed = true
+                    ),
+                    MySubscriptionData(
+                        userId = 1L,
+                        profileImageUrl = null,
+                        nickname = "Thiper_Newbie",
+                        role = "칭호칭호",
+                        roleColor = colors.White,
+                        subscriberCount = 0,
+                        isSubscribed = false
+                    )
+                )
+            )
+        }
+    }
+}
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..c8fe5980
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/MyFeedCard.kt
@@ -0,0 +1,255 @@
+package com.texthip.thip.ui.feed.component
+
+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.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.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.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.AsyncImage
+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
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun MyFeedCard(
+    modifier: Modifier = Modifier,
+    feedItem: FeedItem,
+    onLikeClick: () -> Unit = {},
+    onContentClick: () -> Unit = {},
+    onBookClick: () -> Unit = {}
+) {
+    val hasImages = feedItem.imageUrls.isNotEmpty()
+    val maxTextLines = if (hasImages) 3 else 8
+    
+    // 실제 텍스트 줄 수를 기준으로 표시할 텍스트 계산
+    val processedText = remember(feedItem.content, hasImages) {
+        val lines = feedItem.content.split("\n")
+        val nonEmptyLines = mutableListOf<Int>() // 실제 텍스트가 있는 줄의 인덱스
+        
+        lines.forEachIndexed { index, line ->
+            if (line.trim().isNotEmpty()) {
+                nonEmptyLines.add(index)
+            }
+        }
+        
+        if (nonEmptyLines.size <= maxTextLines) {
+            // 실제 텍스트 줄이 제한보다 적으면 전체 표시
+            feedItem.content
+        } else {
+            // 실제 텍스트 줄이 제한을 초과하면, maxTextLines 번째 텍스트 줄까지만 표시
+            val lastAllowedLineIndex = nonEmptyLines[maxTextLines - 1]
+            lines.take(lastAllowedLineIndex + 1).joinToString("\n")
+        }
+    }
+    
+    // 잘림 여부는 파생 값으로 계산
+    val isTextTruncated = processedText != feedItem.content
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 20.dp)
+    ) {
+        ActionBookButton(
+            bookTitle = feedItem.bookTitle,
+            bookAuthor = feedItem.authName,
+            onClick = onBookClick
+        )
+
+        /*Column(
+            modifier = Modifier
+                .clickable { onContentClick() },
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Text(
+                text = feedItem.content,
+                style = typography.feedcopy_r400_s14_h20,
+                color = colors.White,
+                maxLines = maxLines,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = 16.dp)
+            )
+
+            if (hasImages) {
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(bottom = 16.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    feedItem.imageUrls.take(3).forEach { imageUrl ->
+                        AsyncImage(
+                            model = imageUrl,
+                            contentDescription = null,
+                            modifier = Modifier
+                                .padding(end = 10.dp)
+                                .size(100.dp),
+                            contentScale = ContentScale.Crop
+                        )
+                    }
+                }
+            }
+        }*/
+        Box(
+            modifier = Modifier
+                .clickable { onContentClick() }
+        ) {
+            Text(
+                text = processedText,
+                style = typography.feedcopy_r400_s14_h20,
+                color = colors.White,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 16.dp),
+            )
+
+            // 텍스트가 잘린 경우에만 "...더보기" 표시
+            if (isTextTruncated) {
+                Image(
+                    painter = painterResource(id = R.drawable.ic_text_more),
+                    contentDescription = null,
+                    modifier = Modifier
+                        .align(Alignment.BottomEnd)
+                        .width(80.dp)
+                        .height(24.dp)
+                )
+            }
+        }
+        if (hasImages) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = 16.dp),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                feedItem.imageUrls.take(3).forEach { imageUrl ->
+                    AsyncImage(
+                        model = imageUrl,
+                        contentDescription = null,
+                        modifier = Modifier
+                            .padding(end = 10.dp)
+                            .size(100.dp),
+                        contentScale = ContentScale.Crop
+                    )
+                }
+            }
+        }
+
+
+        Row(
+            modifier = Modifier.padding(top = 16.dp),
+            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(
+                modifier = Modifier.clickable { onContentClick() },
+                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 = 1L,
+        userProfileImage = "https://example.com/profile1.jpg",
+        userName = "user.01",
+        userRole = stringResource(R.string.influencer),
+        bookTitle = "책 제목",
+        authName = "한강",
+        timeAgo = "3시간 전",
+        content = "무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷",
+        likeCount = 10,
+        commentCount = 5,
+        isLiked = false,
+        isSaved = true,
+        isLocked = true,
+        imageUrls = emptyList()
+    )
+    val feed2 = FeedItem(
+        id = 2L,
+        userProfileImage = "https://example.com/profile2.jpg",
+        userName = "user.01",
+        userRole = stringResource(R.string.influencer),
+        bookTitle = "책 제목",
+        authName = "한강",
+        timeAgo = "3시간 전",
+        content = "세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!세 줄만 보여줄거임!!",
+        likeCount = 10,
+        commentCount = 5,
+        isLiked = false,
+        isSaved = true,
+        isLocked = false,
+        imageUrls = listOf(
+            "https://example.com/image1.jpg",
+            "https://example.com/image2.jpg"
+        )
+    )
+    ThipTheme {
+        Column {
+            MyFeedCard(
+                feedItem = feed1
+            )
+            MyFeedCard(
+                feedItem = feed2
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt
new file mode 100644
index 00000000..8037a1b9
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscribelistBar.kt
@@ -0,0 +1,201 @@
+package com.texthip.thip.ui.feed.component
+
+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.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.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import com.texthip.thip.R
+import com.texthip.thip.data.model.users.response.RecentWriterList
+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 MySubscribeBarlist(
+    modifier: Modifier = Modifier,
+    subscriptions: List<RecentWriterList>,
+    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(
+                    modifier = Modifier.size(20.dp),
+                    painter = painterResource(id = R.drawable.ic_group),
+                    contentDescription = null,
+                    tint = colors.White
+                )
+                Text(
+                    text = stringResource(R.string.my_subscription),
+                    style = typography.smalltitle_sb600_s14_h20,
+                    color = colors.White,
+                    modifier = Modifier.padding(start = 2.dp)
+                )
+            }
+
+            Spacer(modifier = Modifier.height(4.dp))
+
+            if (subscriptions.isEmpty()) {
+                EmptyMySubscriptionBar()
+            } else {
+                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)
+                        ) {
+                            AsyncImage(
+                                model = profile.profileImageUrl,
+                                contentDescription = null,
+                                modifier = Modifier
+                                    .size(36.dp)
+                                    .clip(CircleShape)
+                                    .border(
+                                        width = 0.5.dp,
+                                        color = colors.Grey02,
+                                        shape = CircleShape
+                                    )
+                                    .background(Color.LightGray)
+                            )
+                            Text(
+                                text = profile.nickname,
+                                maxLines = 1,
+                                overflow = TextOverflow.Ellipsis,
+                                style = typography.view_r400_s11_h20,
+                                color = colors.White,
+                                modifier = Modifier.width(36.dp),
+                                textAlign = TextAlign.Center
+                            )
+                        }
+                        Spacer(modifier = Modifier.width(12.dp))
+                    }
+                    Spacer(modifier = Modifier.weight(1f))
+                    Icon(
+                        painter = painterResource(id = R.drawable.ic_chevron),
+                        contentDescription = null,
+                        tint = colors.Grey
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun EmptyMySubscriptionBar() {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(42.dp)
+            .clip(RoundedCornerShape(12.dp))
+            .background(colors.DarkGrey02)
+            .clickable { }
+    ) {
+        Text(
+            modifier = Modifier
+                .align(Alignment.CenterStart)
+                .padding(start = 12.dp),
+            text = stringResource(R.string.find_thip_mate),
+            color = colors.White,
+            style = typography.view_m500_s12_h20
+        )
+
+        Icon(
+            painter = painterResource(id = R.drawable.ic_search_character),
+            contentDescription = null,
+            tint = Color.Unspecified,
+            modifier = Modifier
+                .align(Alignment.BottomEnd)
+                .padding(end = 12.dp)
+                .width(32.dp)
+                .height(42.dp)
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun MySubscribeBarlistPrev() {
+    ThipTheme {
+        val previewData = List(10) {
+            RecentWriterList(
+                userId = it.toLong(),
+                profileImageUrl = "https://example.com/profile$it.jpg",
+                nickname = "닉네임임$it"
+            )
+        }
+
+        Column {
+            MySubscribeBarlist(
+                subscriptions = previewData,
+                onClick = {}
+            )
+        }
+    }
+
+}
+
+@Preview
+@Composable
+private fun MySubscribeBarlistWithoutDataPrev() {
+    ThipTheme {
+        val previewData = emptyList<RecentWriterList>()
+
+        Column {
+            MySubscribeBarlist(
+                subscriptions = previewData,
+                onClick = {}
+            )
+        }
+    }
+
+}
\ No newline at end of file
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
new file mode 100644
index 00000000..5e1e2999
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/MySubscriptionList.kt
@@ -0,0 +1,135 @@
+package com.texthip.thip.ui.feed.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.runtime.Composable
+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.header.AuthorHeader
+import com.texthip.thip.ui.feed.mock.MySubscriptionData
+import com.texthip.thip.ui.theme.ThipTheme.colors
+
+@Composable
+fun MySubscriptionList(
+    members: List<MySubscriptionData>,
+    isMine: Boolean=true,
+    onUnsubscribe: (String) -> Unit
+) {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 20.dp)
+    ) {
+        members.forEachIndexed { index, member ->
+            AuthorHeader(
+                profileImage = member.profileImageUrl,
+                nickname = member.nickname,
+                badgeText = member.role,
+                buttonText = stringResource(if(member.isSubscribed) R.string.thip_cancel else R.string.thip),
+                buttonWidth = 64.dp,
+                profileImageSize = 36.dp,
+                showButton = isMine,
+                showThipNum = !isMine,
+                thipNum = member.subscriberCount,
+                onButtonClick = {
+                    onUnsubscribe(member.nickname)
+                }
+            )
+
+            if (index != members.lastIndex) {
+                HorizontalDivider(
+                    color = colors.DarkGrey02,
+                    thickness = 1.dp
+                )
+            }else{
+                Spacer(modifier = Modifier.height(76.dp))
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun MySubscriptionListPrev() {
+    MySubscriptionList(
+        members = listOf(
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "Thiper",
+                role = "칭호칭호",
+                roleColor = colors.Yellow,
+                subscriberCount = 100,
+            ),
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "thipthip",
+                role = "공식 인플루언서",
+                roleColor = colors.NeonGreen,
+                subscriberCount = 50
+            ),
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "Thiper",
+                role = "칭호칭호",
+                roleColor = colors.Yellow,
+                subscriberCount = 100
+            ),
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "thip01",
+                role = "작가",
+                roleColor = colors.NeonGreen,
+                subscriberCount = 100
+            ),
+        ),
+        onUnsubscribe = {}
+    )
+}
+
+@Preview
+@Composable
+private fun MySubscriptionListPrev2() {
+    MySubscriptionList(
+        members = listOf(
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "Thiper",
+                role = "칭호칭호",
+                roleColor = colors.Yellow,
+                subscriberCount = 100,
+            ),
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "thipthip",
+                role = "공식 인플루언서",
+                roleColor = colors.NeonGreen,
+                subscriberCount = 50
+            ),
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "Thiper",
+                role = "칭호칭호",
+                roleColor = colors.Yellow,
+                subscriberCount = 100
+            ),
+            MySubscriptionData(
+                profileImageUrl = null,
+                nickname = "thip01",
+                role = "작가",
+                roleColor = colors.NeonGreen,
+                subscriberCount = 100
+            ),
+        ),
+        isMine = false,
+        onUnsubscribe = {}
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/OthersFeedCard.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/OthersFeedCard.kt
new file mode 100644
index 00000000..b65aa3ca
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/OthersFeedCard.kt
@@ -0,0 +1,150 @@
+package com.texthip.thip.ui.feed.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+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.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.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import com.texthip.thip.R
+import com.texthip.thip.data.model.feed.response.FeedList
+import com.texthip.thip.ui.common.buttons.ActionBarButton
+import com.texthip.thip.ui.common.buttons.ActionBookButton
+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 OthersFeedCard(
+    modifier: Modifier = Modifier,
+    feedItem: FeedList,
+    onLikeClick: () -> Unit = {},
+    onContentClick: () -> Unit = {},
+    onBookmarkClick: () -> Unit = {}
+) {
+    val images = feedItem.contentUrls
+    val hasImages = images.isNotEmpty()
+    val maxLines = if (hasImages) 3 else 8
+
+    var isTextTruncated by remember { mutableStateOf(false) }
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 20.dp)
+            .clickable { onContentClick() }
+    ) {
+        ActionBookButton(
+            bookTitle = feedItem.bookTitle,
+            bookAuthor = feedItem.bookAuthor,
+            onClick = {}
+        )
+        Spacer(modifier = Modifier.height(16.dp))
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(vertical = 16.dp)
+                .clickable { onContentClick() }
+        ) {
+
+            Text(
+                text = feedItem.contentBody,
+                style = typography.feedcopy_r400_s14_h20,
+                color = colors.White,
+                maxLines = maxLines,
+                modifier = Modifier
+                    .fillMaxWidth(),
+                //.clickable { onContentClick() }
+                onTextLayout = { textLayoutResult ->
+                    isTextTruncated = textLayoutResult.hasVisualOverflow
+                }
+            )
+            if (isTextTruncated) {
+                Image(
+                    painter = painterResource(id = R.drawable.ic_text_more),
+                    contentDescription = null, // decorative image
+                    modifier = Modifier
+                        .align(Alignment.BottomEnd)
+                        .width(80.dp)
+                        .height(24.dp)
+                )
+            }
+        }
+
+        if (hasImages) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 16.dp),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                images.take(3).forEach { image ->
+                    AsyncImage(
+                        model = image,
+                        contentDescription = null,
+                        modifier = Modifier
+                            .padding(end = 10.dp)
+                            .size(100.dp),
+                        contentScale = ContentScale.Crop
+                    )
+                }
+            }
+        }
+
+        ActionBarButton(
+            isLiked = feedItem.isLiked,
+            likeCount = feedItem.likeCount,
+            commentCount = feedItem.commentCount,
+            isSaveVisible = true,
+            isSaved = feedItem.isSaved,
+            onLikeClick = onLikeClick,
+            onCommentClick = onContentClick,
+            onBookmarkClick = onBookmarkClick
+        )
+    }
+}
+
+
+@Preview
+@Composable
+private fun OthersFeedCardPreview() {
+    val feed = FeedList(
+        feedId = 1,
+        postDate = "3시간 전",
+        isbn = "12345", bookTitle = "미드나이트 라이브러리", bookAuthor = "매트 헤이그",
+        contentBody = "피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.피드 내용입니다. 정말 재미있게 읽은 책이에요. 여러분도 꼭 읽어보세요.",
+        contentUrls = listOf("https://picsum.photos/100"),
+        likeCount = 10, commentCount = 5, isPublic = true,
+        isSaved = true, isLiked = false, isWriter = false
+    )
+    ThipTheme {
+        Column {
+            OthersFeedCard(
+                feedItem = feed
+            )
+            OthersFeedCard(
+                feedItem = feed
+            )
+        }
+    }
+
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/PeopleRecentSearch.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/PeopleRecentSearch.kt
new file mode 100644
index 00000000..0296bf88
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/PeopleRecentSearch.kt
@@ -0,0 +1,114 @@
+package com.texthip.thip.ui.feed.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.Spacer
+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.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.GenreChipButton
+import com.texthip.thip.ui.feed.viewmodel.RecentSearchUiItem
+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 PeopleRecentSearch(
+    modifier: Modifier = Modifier,
+    recentSearches: List<RecentSearchUiItem>,
+    onSearchClick: (String) -> Unit,
+    onRemove: (Long) -> Unit
+) {
+    Column (modifier = modifier){
+        Text(
+            text = stringResource(R.string.group_recent_search),
+            color = colors.White,
+            style = typography.smalltitle_sb600_s18_h24
+        )
+        Spacer(modifier = Modifier.height(16.dp))
+        if (recentSearches.isEmpty()) {
+            Text(
+                text = stringResource(R.string.group_no_recent_search),
+                color = colors.Grey01,
+                style = typography.menu_r400_s14_h24
+            )
+        } else {
+            FlowRow(
+                verticalArrangement = Arrangement.spacedBy(12.dp),
+                horizontalArrangement = Arrangement.spacedBy(16.dp),
+                maxLines = 2,
+            ) {
+                recentSearches.take(5).forEach { item ->
+                    GenreChipButton(
+                        text = item.term,
+                        onClick = { onSearchClick(item.term) },
+                        onCloseClick = { onRemove(item.id) }
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun PeopleRecentSearchPrev() {
+    ThipTheme {
+        Box(
+            modifier = Modifier
+                .padding(16.dp)
+        ) {
+            var searches by remember {
+                mutableStateOf(
+                    listOf(
+                        RecentSearchUiItem(id = 1, term = "thip"),
+                        RecentSearchUiItem(id = 2, term = "걔누구더라"),
+                        RecentSearchUiItem(id = 3, term = "으아아아"),
+                        RecentSearchUiItem(id = 4, term = "ㅇㅇ"),
+                        RecentSearchUiItem(id = 5, term = "user.02")
+                    )
+                )
+            }
+
+            PeopleRecentSearch(
+                recentSearches = searches,
+                onSearchClick = { searchTerm ->
+                },
+                onRemove = { searchId ->
+                    searches = searches.filterNot { it.id == searchId }
+                }
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun PeopleRecentSearchEmptyPrev() {
+    ThipTheme {
+        Box(
+            modifier = Modifier
+                .background(colors.Black)
+                .padding(16.dp)
+        ) {
+            PeopleRecentSearch(
+                recentSearches = emptyList(),
+                onSearchClick = { },
+                onRemove = { }
+            )
+        }
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/component/SearchPeopleEmptyResult.kt b/app/src/main/java/com/texthip/thip/ui/feed/component/SearchPeopleEmptyResult.kt
new file mode 100644
index 00000000..611f946f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/component/SearchPeopleEmptyResult.kt
@@ -0,0 +1,47 @@
+package com.texthip.thip.ui.feed.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+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 SearchPeopleEmptyResult(
+    modifier: Modifier= Modifier,
+    mainText: String
+) {
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(
+            text = mainText,
+            color = colors.White,
+            style = typography.smalltitle_sb600_s18_h24
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SearchPeopleEmptyResultPrev() {
+    ThipTheme {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+        ) {
+            SearchPeopleEmptyResult(
+                mainText = "검색 결과가 없습니다"
+            )
+        }
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/mock/FeedData.kt b/app/src/main/java/com/texthip/thip/ui/feed/mock/FeedData.kt
new file mode 100644
index 00000000..40ecf8ae
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/mock/FeedData.kt
@@ -0,0 +1,21 @@
+package com.texthip.thip.ui.feed.mock
+
+import android.net.Uri
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.snapshots.SnapshotStateList
+import com.texthip.thip.ui.group.makeroom.mock.BookData
+
+data class FeedData(
+    val selectedBook: BookData? = null,
+    val feedContent: String = "",
+    val isPrivate: Boolean = false,
+    val selectedGenreIndex: Int = -1,
+    val selectedSubGenres: List<String> = emptyList(),
+    val imageUris: SnapshotStateList<Uri> = mutableStateListOf()
+) {
+    val isReadyToSubmit: Boolean
+        get() = selectedBook != null &&
+                feedContent.isNotBlank() &&
+                selectedGenreIndex != -1 &&
+                selectedSubGenres.isNotEmpty()
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/mock/FeedItemType.java b/app/src/main/java/com/texthip/thip/ui/feed/mock/FeedItemType.java
new file mode 100644
index 00000000..8a8c2785
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/mock/FeedItemType.java
@@ -0,0 +1,5 @@
+package com.texthip.thip.ui.feed.mock;
+
+public enum FeedItemType {
+    LOCKED, SAVABLE
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/mock/FeedStateUpdateResult.kt b/app/src/main/java/com/texthip/thip/ui/feed/mock/FeedStateUpdateResult.kt
new file mode 100644
index 00000000..d8c9e1cb
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/mock/FeedStateUpdateResult.kt
@@ -0,0 +1,12 @@
+package com.texthip.thip.ui.feed.mock
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class FeedStateUpdateResult(
+    val feedId: Long,
+    val isLiked: Boolean,
+    val likeCount: Int,
+    val isSaved: Boolean,
+    val commentCount: Int
+)
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
new file mode 100644
index 00000000..f9d786ad
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/mock/MySubscriptionData.kt
@@ -0,0 +1,28 @@
+package com.texthip.thip.ui.feed.mock
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import com.texthip.thip.data.model.users.response.UserItem
+import com.texthip.thip.utils.color.hexToColor
+
+data class MySubscriptionData(
+    val userId: Long? =null,
+    val profileImageUrl: String? = null,
+    val nickname: String,
+    val role: String,
+    val roleColor: Color,
+    val subscriberCount: Int = 0,
+    var isSubscribed: Boolean = true
+)
+
+fun UserItem.toMySubscriptionData(): MySubscriptionData {
+    return MySubscriptionData(
+        userId = this.userId.toLong(),
+        profileImageUrl = this.profileImageUrl,
+        nickname = this.nickname,
+        role = this.aliasName,
+        roleColor = hexToColor(this.aliasColor),
+        subscriberCount = this.followerCount,
+        isSubscribed = false // API 응답에 구독 여부 정보가 없음
+    )
+}
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..ef41dd92
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedCommentScreen.kt
@@ -0,0 +1,657 @@
+package com.texthip.thip.ui.feed.screen
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+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
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.ime
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.blur
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.navigation.NavHostController
+import coil.compose.AsyncImage
+import com.texthip.thip.R
+import com.texthip.thip.data.model.comments.response.CommentList
+import com.texthip.thip.data.model.feed.response.FeedDetailResponse
+import com.texthip.thip.ui.common.bottomsheet.MenuBottomSheet
+import com.texthip.thip.ui.common.buttons.ActionBarButton
+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.modal.ToastWithDate
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.feed.component.ImageViewerModal
+import com.texthip.thip.ui.feed.viewmodel.FeedDetailUiState
+import com.texthip.thip.ui.feed.viewmodel.FeedDetailViewModel
+import com.texthip.thip.ui.group.note.component.CommentSection
+import com.texthip.thip.ui.group.note.viewmodel.CommentsEvent
+import com.texthip.thip.ui.group.note.viewmodel.CommentsUiState
+import com.texthip.thip.ui.group.note.viewmodel.CommentsViewModel
+import com.texthip.thip.ui.group.room.mock.MenuBottomSheetItem
+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.utils.color.hexToColor
+import com.texthip.thip.utils.rooms.advancedImePadding
+import kotlinx.coroutines.delay
+
+private data class CommentActionTarget(val commentId: Int, val isWriter: Boolean)
+
+@Composable
+fun FeedCommentScreen(
+    navController: NavHostController,
+    modifier: Modifier = Modifier,
+    feedId: Long,
+    onNavigateBack: () -> Unit = {},
+    onNavigateToFeedEdit: (Int) -> Unit = {},
+    onNavigateToUserProfile: (userId: Long) -> Unit = {},
+    onNavigateToBookDetail: (String) -> Unit = {},
+    feedDetailViewModel: FeedDetailViewModel = hiltViewModel(),
+    commentsViewModel: CommentsViewModel = hiltViewModel()
+) {
+    val feedDetailUiState by feedDetailViewModel.uiState.collectAsState()
+    val commentsUiState by commentsViewModel.uiState.collectAsState()
+
+    LaunchedEffect(feedDetailUiState.feedDetail) {
+        feedDetailUiState.feedDetail?.let { detail ->
+            //커스텀객체 타입 인식오류 -> 직렬화가 아닌 잘게 쪼개어 전달
+                navController.previousBackStackEntry?.savedStateHandle?.let { handle ->
+                handle.set("updated_feed_id", detail.feedId.toLong())
+                handle.set("updated_feed_isLiked", detail.isLiked)
+                handle.set("updated_feed_likeCount", detail.likeCount)
+                handle.set("updated_feed_isSaved", detail.isSaved)
+                handle.set("updated_feed_commentCount", detail.commentCount)
+            }
+        }
+    }
+
+    LaunchedEffect(feedDetailUiState.deleteSuccess) {
+        if (feedDetailUiState.deleteSuccess) {
+            navController.previousBackStackEntry
+                ?.savedStateHandle
+                ?.set("deleted_feed_id", feedId)
+
+            onNavigateBack()
+        }
+    }
+    LaunchedEffect(feedId) {
+        feedDetailViewModel.loadFeedDetail(feedId)
+        commentsViewModel.initialize(postId = feedId, postType = "FEED")
+    }
+
+    // 댓글이 생성되면 피드 상세 정보를 다시 로드
+    LaunchedEffect(commentsUiState.isCommentCreated) {
+        if (commentsUiState.isCommentCreated) {
+            feedDetailViewModel.loadFeedDetail(feedId)
+            commentsViewModel.resetCommentCreatedState()
+        }
+    }
+
+    FeedCommentContent(
+        modifier = modifier,
+        feedDetailUiState = feedDetailUiState,
+        commentsUiState = commentsUiState,
+        onNavigateBack = onNavigateBack,
+        onNavigateToFeedEdit = onNavigateToFeedEdit,
+        onNavigateToUserProfile = onNavigateToUserProfile,
+        onNavigateToBookDetail = onNavigateToBookDetail,
+        onLikeClick = { feedDetailViewModel.changeFeedLike() },
+        onBookmarkClick = { feedDetailViewModel.changeFeedSave() },
+        onDeleteFeed = { feedDetailViewModel.deleteFeed(feedId) },
+        onCommentEvent = commentsViewModel::onEvent
+    )
+}
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+private fun FeedCommentContent(
+    modifier: Modifier = Modifier,
+    feedDetailUiState: com.texthip.thip.ui.feed.viewmodel.FeedDetailUiState,
+    commentsUiState: com.texthip.thip.ui.group.note.viewmodel.CommentsUiState,
+    onNavigateBack: () -> Unit,
+    onNavigateToFeedEdit: (Int) -> Unit,
+    onNavigateToUserProfile: (userId: Long) -> Unit,
+    onNavigateToBookDetail: (String) -> Unit,
+    onLikeClick: () -> Unit,
+    onBookmarkClick: () -> Unit,
+    onDeleteFeed: () -> Unit,
+    onCommentEvent: (CommentsEvent) -> Unit
+) {
+    // 로딩 상태 처리
+    if (feedDetailUiState.isLoading) {
+        Box(
+            modifier = Modifier.fillMaxSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            CircularProgressIndicator(
+                color = colors.White,
+                modifier = Modifier.size(48.dp)
+            )
+        }
+        return
+    }
+
+    // 에러 상태 처리
+    if (feedDetailUiState.error != null) {
+        Box(
+            modifier = Modifier.fillMaxSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                Text(
+                    text = "오류가 발생했습니다",
+                    style = typography.smalltitle_sb600_s18_h24,
+                    color = colors.White
+                )
+                Spacer(modifier = Modifier.height(8.dp))
+                Text(
+                    text = feedDetailUiState.error,
+                    style = typography.copy_r400_s14,
+                    color = colors.Grey
+                )
+            }
+        }
+        return
+    }
+
+    // 피드 데이터가 없으면 리턴
+    val feedDetail = feedDetailUiState.feedDetail ?: return
+    var isPostMenuVisible by remember { mutableStateOf(false) }
+    var isCommentMenuVisible by remember { mutableStateOf(false) }
+    var selectedCommentForMenu by remember { mutableStateOf<CommentActionTarget?>(null) }
+    var showDeleteDialog by remember { mutableStateOf(false) }
+    var showToast by remember { mutableStateOf(false) }
+    var toastMessage by remember { mutableStateOf("") }
+
+    LaunchedEffect(showToast) {
+        if (showToast) {
+            delay(3000)
+            showToast = false
+        }
+    }
+
+    val images = feedDetail.contentUrls
+    var showImageViewer by remember { mutableStateOf(false) }
+    var selectedImageIndex by remember { mutableStateOf(0) }
+
+    var commentInput by remember { mutableStateOf("") }
+    var replyingToCommentId by remember { mutableStateOf<Int?>(null) }
+    var replyingToNickname by remember { mutableStateOf<String?>(null) }
+
+    val focusManager = LocalFocusManager.current
+    val focusRequester = remember { FocusRequester() }
+    val listState = rememberLazyListState()
+
+    val isKeyboardVisible = WindowInsets.ime.getBottom(LocalDensity.current) > 0
+
+    LaunchedEffect(isKeyboardVisible) {
+        if (!isKeyboardVisible) {
+            replyingToCommentId = null
+            replyingToNickname = null
+            focusManager.clearFocus()
+        }
+    }
+
+    val isOverlayVisible = isPostMenuVisible || isCommentMenuVisible || showDeleteDialog || showImageViewer
+
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .advancedImePadding()
+    ) {
+        Box(
+            modifier = if (isOverlayVisible) {
+                Modifier
+                    .fillMaxSize()
+                    .blur(5.dp)
+            } else {
+                Modifier.fillMaxSize()
+            }
+                // 바깥 터치 시 키보드 숨기기
+                .pointerInput(Unit) {
+                    detectTapGestures(onTap = {
+                        focusManager.clearFocus()
+                    })
+                }
+        ) {
+            Column(modifier = Modifier.fillMaxSize()) {
+                DefaultTopAppBar(
+                    isRightIconVisible = true,
+                    isTitleVisible = false,
+                    onLeftClick = onNavigateBack,
+                    onRightClick = { isPostMenuVisible = true },
+                )
+
+                LazyColumn(
+                    state = listState,
+                    modifier = modifier
+                        .fillMaxWidth()
+                        .weight(1f),
+                    contentPadding = PaddingValues(bottom = 20.dp)
+                ) {
+                    // 상단 피드
+                    item {
+                        Column {
+                            ProfileBar(
+                                modifier = Modifier.padding(20.dp),
+                                profileImage = feedDetail.creatorProfileImageUrl ?: "",
+                                topText = feedDetail.creatorNickname,
+                                bottomText = feedDetail.aliasName,
+                                bottomTextColor = hexToColor(feedDetail.aliasColor),
+                                showSubscriberInfo = false,
+                                hoursAgo = feedDetail.postDate,
+                                onClick = { onNavigateToUserProfile(feedDetail.creatorId) }
+                            )
+                            Column(
+                                Modifier
+                                    .fillMaxWidth()
+                                    .padding(vertical = 16.dp, horizontal = 20.dp)
+                            ) {
+                                ActionBookButton(
+                                    bookTitle = feedDetail.bookTitle,
+                                    bookAuthor = feedDetail.bookAuthor,
+                                    onClick = {
+                                        onNavigateToBookDetail(feedDetail.isbn)
+                                    }
+                                )
+                            }
+                            Text(
+                                text = feedDetail.contentBody,
+                                style = typography.feedcopy_r400_s14_h20,
+                                color = colors.White,
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .padding(bottom = 16.dp, start = 20.dp, end = 20.dp)
+                            )
+                            if (images.isNotEmpty()) {
+                                LazyRow(
+                                    Modifier
+                                        .fillMaxWidth()
+                                        .padding(start = 20.dp, bottom = 16.dp),
+                                    verticalAlignment = Alignment.CenterVertically
+                                ) {
+                                    itemsIndexed(images.take(3)) { index, imageUrl ->
+                                        AsyncImage(
+                                            model = imageUrl,
+                                            contentDescription = null,
+                                            modifier = Modifier
+                                                .padding(end = 16.dp)
+                                                .size(200.dp)
+                                                .clickable {
+                                                    selectedImageIndex = index
+                                                    showImageViewer = true
+                                                },
+                                            contentScale = ContentScale.Crop
+                                        )
+                                    }
+                                }
+                            }
+                            if (feedDetail.tagList.isNotEmpty()) {
+                                FlowRow(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .padding(bottom = 16.dp, start = 20.dp, end = 20.dp),
+                                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                                    verticalArrangement = Arrangement.spacedBy(8.dp),
+                                    maxLines = 2 // 최대 2줄로 제한
+                                ) {
+                                    feedDetail.tagList.forEach { tag ->
+                                        OptionChipButton(
+                                            text = "#$tag",
+                                            isFilled = false,
+                                            isSelected = false,
+                                            onClick = {})
+                                    }
+                                }
+                            }
+                            HorizontalDivider(
+                                modifier = Modifier.padding(horizontal = 20.dp, vertical = 16.dp),
+                                color = colors.DarkGrey02, thickness = 1.dp
+                            )
+
+                            ActionBarButton(
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .padding(horizontal = 20.dp),
+                                isLiked = feedDetail.isLiked,
+                                likeCount = feedDetail.likeCount,
+                                commentCount = feedDetail.commentCount,
+                                isSaveVisible = true,
+                                isSaved = feedDetail.isSaved,
+                                isPinVisible = false,
+                                isLockIcon = feedDetail.isPublic == false,
+                                onLikeClick = onLikeClick,
+                                onBookmarkClick = onBookmarkClick,
+                            )
+
+                            HorizontalDivider(
+                                modifier = Modifier.padding(top = 16.dp),
+                                color = colors.DarkGrey03,
+                                thickness = 10.dp
+                            )
+                        }
+                    }
+                    when {
+                        commentsUiState.isLoading -> {
+                            item {
+                                Box(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .padding(vertical = 40.dp),
+                                    contentAlignment = Alignment.Center
+                                ) {
+                                    CircularProgressIndicator(color = colors.White)
+                                }
+                            }
+                        }
+                        // 댓글 없음
+                        commentsUiState.comments.isEmpty() -> {
+                            item {
+                                Column(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .height(400.dp),
+                                    verticalArrangement = Arrangement.Center,
+                                    horizontalAlignment = Alignment.CenterHorizontally
+                                ) {
+                                    Text(
+                                        text = stringResource(R.string.no_comments_yet),
+                                        style = typography.smalltitle_sb600_s18_h24,
+                                        color = colors.White
+                                    )
+                                    Spacer(modifier = Modifier.height(8.dp))
+                                    Text(
+                                        text = stringResource(R.string.no_comment_subtext),
+                                        style = typography.copy_r400_s14,
+                                        color = colors.Grey
+                                    )
+                                }
+                            }
+                        }
+
+                        else -> {
+                            items(
+                                items = commentsUiState.comments,
+                                key = { comment -> comment.commentId ?: comment.hashCode() }
+                            ) { commentItem ->
+                                CommentSection(
+                                    commentItem = commentItem,
+                                    onEvent = onCommentEvent,
+                                    onReplyClick = { commentId, nickname ->
+                                        replyingToCommentId = commentId
+                                        replyingToNickname = nickname
+                                        focusRequester.requestFocus()
+                                    },
+                                    onCommentLongPress = { comment ->
+                                        selectedCommentForMenu = CommentActionTarget(comment.commentId!!, comment.isWriter)
+                                        isCommentMenuVisible = true
+                                    },
+                                    onReplyLongPress = { reply ->
+                                        selectedCommentForMenu = CommentActionTarget(reply.commentId, reply.isWriter)
+                                        isCommentMenuVisible = true
+                                    },
+                                    onProfileClick = onNavigateToUserProfile
+                                )
+                            }
+                        }
+                    }
+                }
+
+                // 댓글 입력창
+                CommentTextField(
+                    modifier = Modifier.focusRequester(focusRequester),
+                    input = commentInput,
+                    hint = stringResource(R.string.reply_to),
+                    onInputChange = { commentInput = it },
+                    onSendClick = {
+                        if (commentInput.isNotBlank()) {
+                            onCommentEvent(
+                                CommentsEvent.CreateComment(
+                                    content = commentInput,
+                                    parentId = replyingToCommentId
+                                )
+                            )
+                            commentInput = ""
+                            replyingToCommentId = null
+                            replyingToNickname = null
+                            focusManager.clearFocus()
+                        }
+                    },
+                    replyTo = replyingToNickname,
+                    onCancelReply = {
+                        replyingToCommentId = null
+                        replyingToNickname = null
+                    }
+                )
+            }
+
+            // 신고 완료 토스트
+            AnimatedVisibility(
+                visible = showToast,
+                enter = slideInVertically(
+                    initialOffsetY = { -it },
+                    animationSpec = tween(durationMillis = 1000)
+                ),
+                exit = slideOutVertically(
+                    targetOffsetY = { -it },
+                    animationSpec = tween(durationMillis = 1000)
+                ),
+                modifier = Modifier
+                    .align(Alignment.TopCenter)
+                    .padding(horizontal = 20.dp, vertical = 16.dp)
+                    .zIndex(3f)
+            ) {
+                ToastWithDate(
+                    message = toastMessage
+                )
+            }
+        }
+
+        if (isPostMenuVisible) {
+            val menuItems = if (feedDetail.isWriter) {
+                listOf(
+                    MenuBottomSheetItem(
+                        text = stringResource(R.string.edit_feed),
+                        color = colors.White,
+                        onClick = {
+                            isPostMenuVisible = false
+                            onNavigateToFeedEdit(feedDetail.feedId)
+                        }
+                    ),
+                    MenuBottomSheetItem(
+                        text = stringResource(R.string.delete_feed),
+                        color = colors.Red,
+                        onClick = {
+                            isPostMenuVisible = false
+                            showDeleteDialog = true
+                        }
+                    )
+                )
+            } else {
+                listOf(
+                    MenuBottomSheetItem(
+                        text = stringResource(R.string.report),
+                        color = colors.Red,
+                        onClick = {
+                            toastMessage = "피드 신고를 완료했습니다."
+                            showToast = true
+                            isPostMenuVisible = false
+                        }
+                    )
+                )
+            }
+            MenuBottomSheet(
+                items = menuItems,
+                onDismiss = { isPostMenuVisible = false }
+            )
+        }
+
+        if (isCommentMenuVisible && selectedCommentForMenu != null) {
+            val comment = selectedCommentForMenu!!
+            val menuItems = if (comment.isWriter) {
+                listOf(
+                    MenuBottomSheetItem(
+                        text = stringResource(R.string.delete),
+                        color = colors.Red,
+                        onClick = {
+                            onCommentEvent(CommentsEvent.DeleteComment(comment.commentId))
+                            toastMessage = "댓글 삭제를 완료했습니다."
+                            showToast = true
+                            isCommentMenuVisible = false
+                        }
+                    )
+                )
+            } else {
+                listOf(
+                    MenuBottomSheetItem(
+                        text = stringResource(R.string.report),
+                        color = colors.Red,
+                        onClick = {
+                            toastMessage = "댓글 신고를 완료했습니다."
+                            showToast = true
+                            isCommentMenuVisible = false
+                        }
+                    )
+                )
+            }
+
+            MenuBottomSheet(
+                items = menuItems,
+                onDismiss = { isCommentMenuVisible = false }
+            )
+        }
+
+        if (showDeleteDialog) {
+            Box(
+                Modifier
+                    .fillMaxSize()
+                    .clickable(enabled = false, onClick = {})
+            ) {
+                Box(Modifier.align(Alignment.Center)) {
+                    DialogPopup(
+                        title = stringResource(R.string.delete_feed_dialog_title),
+                        description = stringResource(R.string.delete_feed_dialog_description),
+                        onConfirm = {
+                            showDeleteDialog = false
+                            onDeleteFeed()
+                        },
+                        onCancel = {
+                            showDeleteDialog = false
+                        }
+                    )
+                }
+            }
+        }
+
+        if (showImageViewer && images.isNotEmpty()) {
+            ImageViewerModal(
+                imageUrls = images.take(3),
+                initialIndex = selectedImageIndex,
+                onDismiss = { showImageViewer = false }
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun FeedCommentContentPreview() {
+    ThipTheme {
+        FeedCommentContent(
+            feedDetailUiState = FeedDetailUiState(
+                feedDetail = FeedDetailResponse(
+                    feedId = 1,
+                    creatorId = 123L,
+                    creatorNickname = "책읽는사람",
+                    creatorProfileImageUrl = "",
+                    aliasName = "문학 애호가",
+                    aliasColor = "#FF6B9D",
+                    postDate = "2시간 전",
+                    bookTitle = "코스모스",
+                    isbn = "9788983711892",
+                    bookAuthor = "칼 세이건",
+                    contentBody = "이 책을 읽으면서 우주에 대한 새로운 시각을 갖게 되었습니다. 과학적 사실들이 아름다운 문장으로 표현되어 있어서 읽는 내내 감동받았어요.",
+                    contentUrls = listOf("https://example.com/image1.jpg"),
+                    tagList = listOf("과학", "우주", "감동"),
+                    isLiked = true,
+                    likeCount = 42,
+                    commentCount = 8,
+                    isSaved = false,
+                    isWriter = false,
+                    isPublic = true
+                )
+            ),
+            commentsUiState = CommentsUiState(
+                comments = listOf(
+                    CommentList(
+                        commentId = 1,
+                        creatorId = 456L,
+                        creatorProfileImageUrl = "",
+                        creatorNickname = "독서왕",
+                        aliasName = "과학 전문가",
+                        aliasColor = "#00FF7F",
+                        postDate = "1시간 전",
+                        content = "정말 좋은 책이네요! 저도 읽어보고 싶습니다.",
+                        likeCount = 5,
+                        isDeleted = false,
+                        isWriter = false,
+                        isLike = false,
+                        replyList = emptyList()
+                    )
+                )
+            ),
+            onNavigateBack = {},
+            onNavigateToFeedEdit = {},
+            onNavigateToUserProfile = {},
+            onNavigateToBookDetail = {},
+            onLikeClick = {},
+            onBookmarkClick = {},
+            onDeleteFeed = {},
+            onCommentEvent = {}
+        )
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedMyScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedMyScreen.kt
new file mode 100644
index 00000000..eda45f2f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedMyScreen.kt
@@ -0,0 +1,224 @@
+package com.texthip.thip.ui.feed.screen
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+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.CircularProgressIndicator
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+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.data.model.feed.response.FeedList
+import com.texthip.thip.data.model.feed.response.FeedMineInfoResponse
+import com.texthip.thip.data.model.feed.response.MyFeedItem
+import com.texthip.thip.ui.common.header.AuthorHeader
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.feed.component.FeedSubscribeBarlist
+import com.texthip.thip.ui.feed.component.OthersFeedCard
+import com.texthip.thip.ui.feed.viewmodel.FeedUiState
+import com.texthip.thip.ui.feed.viewmodel.FeedViewModel
+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.utils.color.hexToColor
+
+@Composable
+fun FeedMyScreen(
+    viewModel: FeedViewModel,
+    onNavigateBack: () -> Unit,
+    onNavigateToSubscriptionList: (userId: Long) -> Unit = {},
+    onNavigateToFeedComment: (feedId: Long) -> Unit = {},
+) {
+    val uiState by viewModel.uiState.collectAsState()
+
+    LaunchedEffect(Unit) {
+        viewModel.onTabSelected(1)
+    }
+
+    FeedMyContent(
+        uiState = uiState,
+        onNavigateBack = onNavigateBack,
+        onLikeClick = { feedId -> viewModel.changeFeedLike(feedId) },
+        onBookmarkClick = { feedId -> viewModel.changeFeedSave(feedId) },
+        onNavigateToSubscriptionList = onNavigateToSubscriptionList,
+        onNavigateToFeedComment = onNavigateToFeedComment
+    )
+}
+
+@Composable
+fun FeedMyContent(
+    uiState: FeedUiState,
+    onNavigateBack: () -> Unit,
+    onLikeClick: (Long) -> Unit,
+    onBookmarkClick: (Long) -> Unit,
+    onNavigateToSubscriptionList: (userId: Long) -> Unit,
+    onNavigateToFeedComment: (feedId: Long) -> Unit = {},
+) {
+    val userInfo = uiState.myFeedInfo
+
+    fun MyFeedItem.toFeedList(): FeedList {
+        return FeedList(
+            feedId = this.feedId.toLong(),
+            postDate = this.postDate,
+            isbn = this.isbn,
+            bookTitle = this.bookTitle,
+            bookAuthor = this.bookAuthor,
+            contentBody = this.contentBody,
+            contentUrls = this.contentUrls,
+            likeCount = this.likeCount,
+            commentCount = this.commentCount,
+            isPublic = this.isPublic,
+            isSaved = this.isSaved,
+            isLiked = this.isLiked,
+            isWriter = this.isWriter
+        )
+    }
+
+    Box(modifier = Modifier.fillMaxSize()) {
+        Column(
+            modifier = Modifier.fillMaxSize()
+        ) {
+            DefaultTopAppBar(
+                isRightIconVisible = false,
+                isTitleVisible = false,
+                onLeftClick = onNavigateBack,
+            )
+
+            if (uiState.isRefreshing || (uiState.isLoading && uiState.myFeeds.isEmpty())) {
+                Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+                    CircularProgressIndicator()
+                }
+            } else if (userInfo != null) {
+                LazyColumn(
+                    modifier = Modifier.weight(1f),
+                    verticalArrangement = Arrangement.spacedBy(12.dp)
+                ) {
+                    item {
+                        Spacer(modifier = Modifier.height(32.dp))
+                        AuthorHeader(
+                            profileImage = userInfo.profileImageUrl,
+                            nickname = userInfo.nickname,
+                            badgeText = userInfo.aliasName,
+                            badgeTextColor = hexToColor(userInfo.aliasColor),
+                            showButton = false,
+                            modifier = Modifier.padding(bottom = 20.dp)
+                        )
+                        Spacer(modifier = Modifier.height(16.dp))
+                        FeedSubscribeBarlist(
+                            modifier = Modifier.padding(horizontal = 20.dp),
+                            followerProfileImageUrls = userInfo.latestFollowerProfileImageUrls
+                                ?: emptyList(),
+                            onClick = { onNavigateToSubscriptionList(userInfo.creatorId) }
+                        )
+                        Spacer(modifier = Modifier.height(40.dp))
+                        Text(
+                            text = stringResource(R.string.whole_num, userInfo.totalFeedCount),
+                            style = typography.menu_m500_s14_h24,
+                            color = colors.Grey,
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(bottom = 12.dp, start = 20.dp)
+                        )
+                        HorizontalDivider(
+                            color = colors.DarkGrey03,
+                            thickness = 1.dp,
+                            modifier = Modifier.padding(horizontal = 20.dp)
+                        )
+                    }
+                    if (userInfo.totalFeedCount == 0) {
+                        item {
+                            Box(
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .padding(top = 244.dp),
+                                contentAlignment = Alignment.TopCenter
+                            ) {
+                                Text(
+                                    text = stringResource(R.string.empty_feed),
+                                    style = typography.smalltitle_sb600_s18_h24,
+                                    color = colors.White
+                                )
+                            }
+                        }
+                    } else {
+                        itemsIndexed(
+                            items = uiState.myFeeds,
+                            key = { _, item -> item.feedId }
+                        ) { index, feed ->
+                            Spacer(modifier = Modifier.height(if (index == 0) 20.dp else 40.dp))
+                            OthersFeedCard(
+                                feedItem = feed.toFeedList(),
+                                onLikeClick = { onLikeClick(feed.feedId.toLong()) },
+                                onBookmarkClick = { onBookmarkClick(feed.feedId.toLong()) },
+                                onContentClick = { onNavigateToFeedComment(feed.feedId.toLong()) }
+                            )
+                            Spacer(modifier = Modifier.height(40.dp))
+                            if (index < uiState.myFeeds.lastIndex) {
+                                HorizontalDivider(
+                                    color = colors.DarkGrey03,
+                                    thickness = 10.dp
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun FeedMyScreenPreview() {
+    // Preview용 가짜 데이터
+    val mockUserInfo = FeedMineInfoResponse(
+        creatorId = 1,
+        profileImageUrl = "",
+        nickname = "김작가",
+        aliasName = "소설가",
+        aliasColor = "#A0F8E8",
+        totalFeedCount = 5,
+        followerCount = 150,
+        latestFollowerProfileImageUrls = emptyList(),
+        isFollowing = true,
+    )
+    val mockFeeds = List(5) {
+        MyFeedItem(
+            feedId = it, postDate = "2시간 전", isbn = "1234",
+            bookTitle = "나의 책 제목 ${it + 1}", bookAuthor = "나",
+            contentBody = "내가 작성한 피드 내용입니다. 내용은 여기에 표시됩니다.",
+            contentUrls = emptyList(), likeCount = 15, commentCount = 3,
+            isPublic = true, isSaved = false, isLiked = it % 2 == 0,
+            isWriter = true
+        )
+    }
+
+    ThipTheme {
+        FeedMyContent(
+            uiState = FeedUiState(
+                isLoading = false,
+                myFeedInfo = mockUserInfo,
+                myFeeds = mockFeeds
+            ),
+            onLikeClick = {},
+            onBookmarkClick = {},
+            onNavigateToSubscriptionList = {},
+            onNavigateBack = {},
+        )
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedOthersScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedOthersScreen.kt
new file mode 100644
index 00000000..3de4b5e0
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedOthersScreen.kt
@@ -0,0 +1,256 @@
+package com.texthip.thip.ui.feed.screen
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.texthip.thip.R
+import com.texthip.thip.data.model.feed.response.FeedList
+import com.texthip.thip.data.model.feed.response.FeedUsersInfoResponse
+import com.texthip.thip.ui.common.header.AuthorHeader
+import com.texthip.thip.ui.common.modal.ToastWithDate
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.feed.component.FeedSubscribeBarlist
+import com.texthip.thip.ui.feed.component.OthersFeedCard
+import com.texthip.thip.ui.feed.viewmodel.FeedOthersUiState
+import com.texthip.thip.ui.feed.viewmodel.FeedOthersViewModel
+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.utils.color.hexToColor
+import kotlinx.coroutines.delay
+
+@Composable
+fun FeedOthersScreen(
+    onNavigateBack: () -> Unit,
+    onNavigateToSubscriptionList: (userId: Long) -> Unit = {},
+    onNavigateToFeedComment: (feedId: Long) -> Unit = {},
+    viewModel: FeedOthersViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsState()
+    val context = LocalContext.current
+    
+    LaunchedEffect(Unit) {
+        viewModel.fetchData()
+    }
+
+    FeedOthersContent(
+        uiState = uiState,
+        onNavigateBack = onNavigateBack,
+        onLikeClick = { feedId -> viewModel.changeFeedLike(feedId) },
+        onBookmarkClick = { feedId -> viewModel.changeFeedSave(feedId) },
+        onToggleFollow = {
+            val followedMessage =
+                context.getString(R.string.toast_thip, uiState.userInfo?.nickname ?: "")
+            val unfollowedMessage =
+                context.getString(R.string.toast_thip_cancel, uiState.userInfo?.nickname ?: "")
+            viewModel.toggleFollow(followedMessage, unfollowedMessage)
+        },
+        onHideToast = viewModel::hideToast,
+        onNavigateToSubscriptionList = onNavigateToSubscriptionList,
+        onNavigateToFeedComment = onNavigateToFeedComment
+    )
+}
+
+@Composable
+fun FeedOthersContent(
+    uiState: FeedOthersUiState,
+    onNavigateBack: () -> Unit,
+    onLikeClick: (Long) -> Unit,
+    onBookmarkClick: (Long) -> Unit,
+    onToggleFollow: () -> Unit,
+    onHideToast: () -> Unit,
+    onNavigateToSubscriptionList: (userId: Long) -> Unit,
+    onNavigateToFeedComment: (feedId: Long) -> Unit = {},
+) {
+    val userInfo = uiState.userInfo
+    LaunchedEffect(uiState.showToast) {
+        if (uiState.showToast) {
+            delay(2000)
+            onHideToast()
+        }
+    }
+
+    Box(modifier = Modifier.fillMaxSize()) {
+        Column(
+            modifier = Modifier.fillMaxSize()
+        ) {
+            DefaultTopAppBar(
+                isRightIconVisible = false,
+                isTitleVisible = false,
+                onLeftClick = onNavigateBack,
+            )
+
+            if (uiState.isLoading) {
+                Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+                    CircularProgressIndicator()
+                }
+            } else if (userInfo != null) {
+                // 스크롤 영역
+                LazyColumn(
+                    modifier = Modifier.weight(1f),
+                    verticalArrangement = Arrangement.spacedBy(12.dp)
+                ) {
+                    item {
+                        Spacer(modifier = Modifier.height(32.dp))
+                        AuthorHeader(
+                            profileImage = userInfo.profileImageUrl,
+                            nickname = userInfo.nickname,
+                            badgeText = userInfo.aliasName,
+                            badgeTextColor = hexToColor(userInfo.aliasColor),
+                            buttonText = if (userInfo.isFollowing) stringResource(R.string.thip_cancel) else stringResource(
+                                R.string.thip
+                            ),
+                            // TODO: 띱하기/취소하기 로직 연결
+                            onButtonClick = onToggleFollow,
+                            modifier = Modifier.padding(bottom = 20.dp)
+                        )
+                        Spacer(modifier = Modifier.height(16.dp))
+                        FeedSubscribeBarlist(
+                            modifier = Modifier.padding(horizontal = 20.dp),
+                            followerProfileImageUrls = userInfo.latestFollowerProfileImageUrls,
+                            onClick = { onNavigateToSubscriptionList(userInfo.creatorId) }
+                        )
+                        Spacer(modifier = Modifier.height(40.dp))
+                        Text(
+                            text = stringResource(R.string.whole_num, userInfo.totalFeedCount),
+                            style = typography.menu_m500_s14_h24,
+                            color = colors.Grey,
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(bottom = 12.dp, start = 20.dp)
+                        )
+                        HorizontalDivider(
+                            color = colors.DarkGrey03,
+                            thickness = 1.dp,
+                            modifier = Modifier.padding(horizontal = 20.dp)
+                        )
+                    }
+                    if (userInfo.totalFeedCount == 0) {
+                        item {
+                            Box(
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .padding(top = 244.dp),
+                                contentAlignment = Alignment.TopCenter
+                            ) {
+                                Text(
+                                    text = stringResource(R.string.empty_feed),
+                                    style = typography.smalltitle_sb600_s18_h24,
+                                    color = colors.White
+                                )
+                            }
+                        }
+                    } else {
+                        itemsIndexed(
+                            items = uiState.feeds,
+                            key = { _, item -> item.feedId }
+                        ) { index, feed ->
+                            Spacer(modifier = Modifier.height(if (index == 0) 20.dp else 40.dp))
+                            OthersFeedCard(
+                                feedItem = feed,
+                                onLikeClick = { onLikeClick(feed.feedId) },
+                                onBookmarkClick = { onBookmarkClick(feed.feedId) },
+                                onContentClick = { onNavigateToFeedComment(feed.feedId) }
+                            )
+                            Spacer(modifier = Modifier.height(40.dp))
+                            if (index < uiState.feeds.lastIndex) {
+                                HorizontalDivider(
+                                    color = colors.DarkGrey03,
+                                    thickness = 10.dp
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        AnimatedVisibility(
+            visible = uiState.showToast,
+            enter = slideInVertically(
+                initialOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            exit = slideOutVertically(
+                targetOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .padding(horizontal = 20.dp, vertical = 16.dp)
+                .zIndex(2f)
+        ) {
+            ToastWithDate(
+                message = uiState.toastMessage,
+                modifier = Modifier.fillMaxWidth()
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun FeedOthersScreenPrev() {
+
+    val mockUserInfo = FeedUsersInfoResponse(
+        creatorId = 1,
+        profileImageUrl = "",
+        nickname = "김독서",
+        aliasName = "문학가",
+        aliasColor = "#A0F8E8",
+        followerCount = 120,
+        totalFeedCount = 5,
+        isFollowing = true,
+        latestFollowerProfileImageUrls = emptyList()
+    )
+    val mockFeeds = List(5) {
+        FeedList(
+            feedId = it.toLong(), postDate = "1시간 전", isbn = "1234",
+            bookTitle = "미리보기 책 제목 ${it + 1}", bookAuthor = "작가",
+            contentBody = "미리보기 피드 내용입니다. 내용은 여기에 표시됩니다.",
+            contentUrls = emptyList(), likeCount = 10, commentCount = 2,
+            isPublic = true, isSaved = false, isLiked = true, isWriter = false
+        )
+    }
+
+    ThipTheme {
+        FeedOthersContent(
+            uiState = FeedOthersUiState(
+                isLoading = false,
+                userInfo = mockUserInfo,
+                feeds = mockFeeds
+            ),
+            onNavigateBack = {},
+            onLikeClick = {},
+            onToggleFollow = {},
+            onHideToast = {},
+            onBookmarkClick = {},
+            onNavigateToSubscriptionList = {}
+        )
+    }
+}
\ 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 51e73f62..d55debb8 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,19 +1,680 @@
 package com.texthip.thip.ui.feed.screen
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Text
+import androidx.compose.material3.pulltorefresh.PullToRefreshBox
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+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.Alignment
 import androidx.compose.ui.Modifier
-import androidx.navigation.NavController
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import com.texthip.thip.R
+import com.texthip.thip.data.model.feed.response.AllFeedItem
+import com.texthip.thip.data.model.users.response.RecentWriterList
+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.feed.component.MySubscribeBarlist
+import com.texthip.thip.ui.feed.mock.FeedStateUpdateResult
+import com.texthip.thip.ui.feed.viewmodel.FeedUiState
+import com.texthip.thip.ui.feed.viewmodel.FeedViewModel
+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
+import com.texthip.thip.utils.color.hexToColor
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
 
+
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun FeedScreen(navController: NavController) {
-    Box(
-        modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.Center
+fun FeedScreen(
+    onNavigateToMySubscription: () -> Unit = {},
+    onNavigateToFeedWrite: () -> Unit = {},
+    onNavigateToFeedComment: (Long) -> Unit = {},
+    onNavigateToBookDetail: (String) -> Unit = {},
+    resultFeedId: Long? = null,
+    onNavigateToUserProfile: (userId: Long) -> Unit = {},
+    onNavigateToSearchPeople: () -> Unit = {},
+    onNavigateToNotification: () -> Unit = {},
+    refreshFeed: Boolean? = null,
+    onFeedTabReselected: Int = 0, // 바텀 네비게이션 재선택 트리거
+    onNavigateToOthersSubscription: (userId: Long) -> Unit = {},
+    onResultConsumed: () -> Unit = {},
+    onRefreshConsumed: () -> Unit = {},
+    navController: NavHostController,
+    feedViewModel: FeedViewModel = hiltViewModel(),
+) {
+    val feedUiState by feedViewModel.uiState.collectAsState()
+    val scope = rememberCoroutineScope()
+    var showProgressBar by remember { mutableStateOf(false) }
+    val progress = remember { Animatable(0f) }
+
+    val feedTabTitles = listOf(stringResource(R.string.feed), stringResource(R.string.my_feed))
+
+    // 탭별로 별도의 스크롤 상태 관리
+    val allFeedListState = rememberSaveable(saver = LazyListState.Saver) {
+        LazyListState()
+    }
+    val myFeedListState = rememberSaveable(saver = LazyListState.Saver) {
+        LazyListState()
+    }
+    val currentListState = when (feedUiState.selectedTabIndex) {
+        0 -> allFeedListState
+        1 -> myFeedListState
+        else -> allFeedListState
+    }
+
+    // 무한 스크롤 로직
+    val shouldLoadMore by remember(
+        feedUiState.canLoadMoreCurrentTab,
+        feedUiState.isLoadingMore,
+        feedUiState.selectedTabIndex
     ) {
-        Text(text = "Feed Screen")
+        derivedStateOf {
+            val layoutInfo = currentListState.layoutInfo
+            val totalItems = layoutInfo.totalItemsCount
+            val lastVisibleIndex = layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0
+
+            feedUiState.canLoadMoreCurrentTab &&
+                    !feedUiState.isLoadingMore &&
+                    feedUiState.currentTabFeeds.isNotEmpty() &&
+                    totalItems > 0 &&
+                    lastVisibleIndex >= totalItems - 3
+        }
+    }
+
+    LaunchedEffect(Unit) {
+        navController.currentBackStackEntry?.savedStateHandle?.let { handle ->
+            handle.getLiveData<Long>("deleted_feed_id").observeForever { deletedId ->
+                if (deletedId != null) {
+                    feedViewModel.removeDeletedFeed(deletedId)
+                    handle.remove<Long>("deleted_feed_id")
+                }
+            }
+        }
+    }
+
+    LaunchedEffect(shouldLoadMore) {
+        if (shouldLoadMore) {
+            feedViewModel.loadMoreFeeds()
+        }
+    }
+
+    var isUserTabChange by remember { mutableStateOf(false) }
+    var shouldScrollToTop by remember { mutableStateOf(false) }
+
+    LaunchedEffect(Unit) {
+        // 최초 진입시에만 데이터 로딩
+        if (feedUiState.allFeeds.isEmpty() && feedUiState.myFeeds.isEmpty()) {
+            feedViewModel.refreshData()
+        }
+
+        val hasUpdatedFeedData =
+            navController.currentBackStackEntry?.savedStateHandle?.get<Long>("updated_feed_id") != null
+        val fromProfile =
+            navController.currentBackStackEntry?.savedStateHandle?.get<Boolean>("from_profile") ?: false
+
+        if (!hasUpdatedFeedData && !fromProfile) {
+            // 일반적인 경우: 전체 새로고침 + 스크롤 상단 이동
+            feedViewModel.refreshData()
+            allFeedListState.scrollToItem(0)
+        } else {
+            // 댓글 화면 또는 프로필에서 돌아온 경우: recentWriters만 업데이트
+            feedViewModel.fetchRecentWriters()
+        }
+
+        // 프로필 플래그 제거
+        if (fromProfile) {
+            navController.currentBackStackEntry?.savedStateHandle?.remove<Boolean>("from_profile")
+        }
+    }
+
+    LaunchedEffect(feedUiState.selectedTabIndex) {
+        if (isUserTabChange) {
+            currentListState.scrollToItem(0)
+            isUserTabChange = false
+        }
+    }
+    
+    // 같은 탭 재클릭 시 스크롤 상단 이동 처리
+    LaunchedEffect(shouldScrollToTop) {
+        if (shouldScrollToTop) {
+            currentListState.scrollToItem(0)
+            shouldScrollToTop = false
+        }
+    }
+    
+    // 중복된 로직 제거 - 기존 bottomNavReselected 방식만 사용
+
+    LaunchedEffect(resultFeedId) {
+        if (resultFeedId != null) {
+            onResultConsumed()
+
+            showProgressBar = true
+            progress.snapTo(0f)
+            scope.launch {
+                progress.animateTo(
+                    targetValue = 1f,
+                    animationSpec = tween(durationMillis = 1000, easing = LinearEasing)
+                )
+                delay(500)
+                if (showProgressBar) {
+                    showProgressBar = false
+                }
+                feedViewModel.refreshData()
+            }
+        }
+    }
+
+    LaunchedEffect(refreshFeed) {
+        if (refreshFeed == true) {
+            onRefreshConsumed()
+            if (resultFeedId == null) {
+                feedViewModel.refreshData()
+                currentListState.scrollToItem(0)
+            }
+        }
+    }
+    
+    // 바텀 네비게이션 탭 재선택 처리 (직접 상태 전달 방식)
+    LaunchedEffect(onFeedTabReselected) {
+        if (onFeedTabReselected > 0) {
+            feedViewModel.refreshOnBottomNavReselect()
+            currentListState.scrollToItem(0)
+        }
+    }
+    LaunchedEffect(Unit) { //커스텀객체 타입 인식오류 -> 직렬화가 아닌 잘게 쪼개어 전달
+        navController.currentBackStackEntry?.savedStateHandle?.let { handle ->
+            handle.getLiveData<Long>("updated_feed_id").observeForever { feedId ->
+                if (feedId != null) {
+                    val isLiked = handle.get<Boolean>("updated_feed_isLiked") ?: false
+                    val likeCount = handle.get<Int>("updated_feed_likeCount") ?: 0
+                    val isSaved = handle.get<Boolean>("updated_feed_isSaved") ?: false
+                    val commentCount = handle.get<Int>("updated_feed_commentCount") ?: 0
+
+                    val result = FeedStateUpdateResult(
+                        feedId = feedId,
+                        isLiked = isLiked,
+                        likeCount = likeCount,
+                        isSaved = isSaved,
+                        commentCount = commentCount
+                    )
+
+                    feedViewModel.updateFeedStateFromResult(result)
+
+                    handle.remove<Long>("updated_feed_id")
+                    handle.remove<Boolean>("updated_feed_isLiked")
+                    handle.remove<Int>("updated_feed_likeCount")
+                    handle.remove<Boolean>("updated_feed_isSaved")
+                    handle.remove<Int>("updated_feed_commentCount")
+                }
+            }
+        }
+    }
+
+    FeedContent(
+        feedUiState = feedUiState,
+        showProgressBar = showProgressBar,
+        progress = progress.value,
+        currentListState = currentListState,
+        feedTabTitles = feedTabTitles,
+        onNavigateToSearchPeople = onNavigateToSearchPeople,
+        onNavigateToNotification = onNavigateToNotification,
+        onNavigateToMySubscription = onNavigateToMySubscription,
+        onNavigateToOthersSubscription = onNavigateToOthersSubscription,
+        onNavigateToFeedComment = onNavigateToFeedComment,
+        onNavigateToBookDetail = onNavigateToBookDetail,
+        onNavigateToUserProfile = { userId ->
+            navController.currentBackStackEntry?.savedStateHandle?.set("from_profile", true)
+            onNavigateToUserProfile(userId)
+        },
+        onNavigateToFeedWrite = onNavigateToFeedWrite,
+        onTabSelected = { index ->
+            val isCurrentTab = feedUiState.selectedTabIndex == index
+            if (isCurrentTab) {
+                shouldScrollToTop = true
+            } else {
+                isUserTabChange = true
+            }
+            feedViewModel.onTabSelected(index)
+        },
+        onChangeFeedLike = feedViewModel::changeFeedLike,
+        onChangeFeedSave = feedViewModel::changeFeedSave,
+        onPullToRefresh = feedViewModel::pullToRefresh
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun FeedContent(
+    feedUiState: com.texthip.thip.ui.feed.viewmodel.FeedUiState,
+    showProgressBar: Boolean,
+    progress: Float,
+    currentListState: LazyListState,
+    feedTabTitles: List<String>,
+    onNavigateToSearchPeople: () -> Unit,
+    onNavigateToNotification: () -> Unit,
+    onNavigateToMySubscription: () -> Unit,
+    onNavigateToOthersSubscription: (userId: Long) -> Unit,
+    onNavigateToFeedComment: (Long) -> Unit,
+    onNavigateToBookDetail: (String) -> Unit,
+    onNavigateToUserProfile: (userId: Long) -> Unit,
+    onNavigateToFeedWrite: () -> Unit,
+    onTabSelected: (Int) -> Unit,
+    onChangeFeedLike: (Long) -> Unit,
+    onChangeFeedSave: (Long) -> Unit,
+    onPullToRefresh: () -> Unit
+) {
+    // 초기 로딩 상태 처리
+    if (feedUiState.isLoading && feedUiState.currentTabFeeds.isEmpty()) {
+        Box(
+            modifier = Modifier.fillMaxSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            CircularProgressIndicator(
+                color = colors.White,
+                modifier = Modifier.size(48.dp)
+            )
+        }
+        return
+    }
+
+    Box(modifier = Modifier.fillMaxSize()) {
+        PullToRefreshBox(
+            isRefreshing = feedUiState.isPullToRefreshing,
+            onRefresh = onPullToRefresh
+        ) {
+            Column(
+                modifier = Modifier.fillMaxSize()
+            ) {
+                LogoTopAppBar(
+                    leftIcon = painterResource(R.drawable.ic_plusfriend),
+                    hasNotification = false,
+                    onLeftClick = onNavigateToSearchPeople,
+                    onRightClick = onNavigateToNotification,
+                )
+                Spacer(modifier = Modifier.height(32.dp))
+                HeaderMenuBarTab(
+                    titles = feedTabTitles,
+                    selectedTabIndex = feedUiState.selectedTabIndex,
+                    onTabSelected = { index ->
+                        val isCurrentTab = feedUiState.selectedTabIndex == index
+                        onTabSelected(index)
+                    }
+                )
+
+                // 스크롤 영역 전체
+                LazyColumn(
+                    state = currentListState,
+                    modifier = Modifier.weight(1f),
+                    verticalArrangement = Arrangement.spacedBy(12.dp)
+                ) {
+                    item {
+                        AnimatedVisibility(visible = showProgressBar) {
+                            Column(
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .padding(start = 20.dp, end = 20.dp, top = 32.dp),
+                            ) {
+                                Text(
+                                    modifier = Modifier.padding(bottom = 12.dp),
+                                    text = if (progress < 1.0f) {
+                                        stringResource(R.string.posting_in_progress_feed)
+                                    } else {
+                                        stringResource(R.string.posting_complete_feed)
+                                    },
+                                    style = typography.view_m500_s14,
+                                    color = colors.NeonGreen
+                                )
+
+                                Box(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .height(8.dp)
+                                        .clip(RoundedCornerShape(12.dp))
+                                        .background(color = colors.Grey02) // 트랙(배경) 색상
+                                ) {
+                                    Box(
+                                        modifier = Modifier
+                                            .fillMaxWidth(fraction = progress)
+                                            .fillMaxHeight()
+                                            .background(
+                                                color = colors.NeonGreen,
+                                                shape = RoundedCornerShape(12.dp)
+                                            )
+                                    )
+                                }
+                            }
+                        }
+                    }
+
+                    if (feedUiState.selectedTabIndex == 1) {
+                        // 내 피드
+                        item {
+                            Spacer(modifier = Modifier.height(32.dp))
+
+                            val myFeedInfo = feedUiState.myFeedInfo
+                            AuthorHeader(
+                                profileImage = myFeedInfo?.profileImageUrl,
+                                nickname = myFeedInfo?.nickname ?: "",
+                                badgeText = myFeedInfo?.aliasName ?: "",
+                                badgeTextColor = myFeedInfo?.aliasColor?.let { hexToColor(it) }
+                                    ?: colors.NeonGreen,
+                                buttonText = "",
+                                buttonWidth = 60.dp,
+                                showButton = false
+                            )
+                            Spacer(modifier = Modifier.height(16.dp))
+                            FeedSubscribeBarlist(
+                                modifier = Modifier.padding(horizontal = 20.dp),
+                                followerProfileImageUrls = myFeedInfo?.latestFollowerProfileImageUrls
+                                    ?: emptyList(),
+                                onClick = {
+                                    myFeedInfo?.creatorId?.let { creatorId ->
+                                        onNavigateToOthersSubscription(creatorId)
+                                    }
+                                }
+                            )
+                            Spacer(modifier = Modifier.height(40.dp))
+                            Text(
+                                text = stringResource(
+                                    R.string.whole_num,
+                                    myFeedInfo?.totalFeedCount ?: 0
+                                ),
+                                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 (feedUiState.myFeeds.isEmpty()) {
+                            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.White
+                                    )
+                                }
+                            }
+                        } else {
+                            itemsIndexed(
+                                feedUiState.myFeeds,
+                                key = { _, item -> item.feedId }) { index, myFeed ->
+                                Spacer(modifier = Modifier.height(if (index == 0) 20.dp else 40.dp))
+
+                                // MyFeedItem을 FeedItem으로 변환
+                                val feedItem = FeedItem(
+                                    id = myFeed.feedId.toLong(),
+                                    userProfileImage = null,
+                                    userName = "", // 내 피드이므로 고정값
+                                    userRole = "", // 내 피드이므로 고정값
+                                    bookTitle = myFeed.bookTitle,
+                                    authName = myFeed.bookAuthor,
+                                    timeAgo = myFeed.postDate,
+                                    content = myFeed.contentBody,
+                                    likeCount = myFeed.likeCount,
+                                    commentCount = myFeed.commentCount,
+                                    isLiked = myFeed.isLiked,
+                                    isSaved = myFeed.isSaved,
+                                    isLocked = !myFeed.isPublic, // isPublic의 반대값
+                                    tags = emptyList(),
+                                    imageUrls = myFeed.contentUrls
+                                )
+
+                                MyFeedCard(
+                                    feedItem = feedItem,
+                                    onLikeClick = { onChangeFeedLike(feedItem.id) },
+                                    onContentClick = {
+                                        onNavigateToFeedComment(feedItem.id)
+                                    },
+                                    onBookClick = {
+                                        onNavigateToBookDetail(myFeed.isbn)
+                                    }
+                                )
+                                Spacer(modifier = Modifier.height(40.dp))
+                                if (index != feedUiState.myFeeds.lastIndex) {
+                                    HorizontalDivider(
+                                        color = colors.DarkGrey02,
+                                        thickness = 6.dp
+                                    )
+                                }
+                            }
+                        }
+                    } else {
+                        //피드
+                        item {
+                            Spacer(modifier = Modifier.height(20.dp))
+                            MySubscribeBarlist(
+                                modifier = Modifier.padding(horizontal = 20.dp),
+                                subscriptions = feedUiState.recentWriters,
+                                onClick = onNavigateToMySubscription
+                            )
+                        }
+                        itemsIndexed(
+                            feedUiState.allFeeds,
+                            key = { _, item -> item.feedId }) { index, allFeed ->
+                            // AllFeedItem을 FeedItem으로 변환
+                            val feedItem = FeedItem(
+                                id = allFeed.feedId.toLong(),
+                                userProfileImage = allFeed.creatorProfileImageUrl,
+                                userName = allFeed.creatorNickname,
+                                userRole = allFeed.aliasName,
+                                bookTitle = allFeed.bookTitle,
+                                authName = allFeed.bookAuthor,
+                                timeAgo = allFeed.postDate,
+                                content = allFeed.contentBody,
+                                likeCount = allFeed.likeCount,
+                                commentCount = allFeed.commentCount,
+                                isLiked = allFeed.isLiked,
+                                isSaved = allFeed.isSaved,
+                                isLocked = false,
+                                tags = emptyList(),
+                                imageUrls = allFeed.contentUrls
+                            )
+
+                            Spacer(modifier = Modifier.height(if (index == 0) 20.dp else 40.dp))
+
+                            SavedFeedCard(
+                                feedItem = feedItem,
+                                bottomTextColor = hexToColor(allFeed.aliasColor),
+                                onBookmarkClick = {
+                                    onChangeFeedSave(feedItem.id)
+                                },
+                                onLikeClick = {
+                                    onChangeFeedLike(feedItem.id)
+                                },
+                                onContentClick = {
+                                    onNavigateToFeedComment(feedItem.id)
+                                },
+                                onCommentClick = {
+                                    onNavigateToFeedComment(feedItem.id)
+                                },
+                                onBookClick = {
+                                    onNavigateToBookDetail(allFeed.isbn)
+                                },
+                                onProfileClick = {
+                                    onNavigateToUserProfile(allFeed.creatorId)
+                                }
+                            )
+                            Spacer(modifier = Modifier.height(40.dp))
+                            if (index != feedUiState.allFeeds.lastIndex) {
+                                HorizontalDivider(
+                                    color = colors.DarkGrey02,
+                                    thickness = 6.dp
+                                )
+                            }
+                        }
+                    }
+
+                    // 무한 스크롤 로딩 인디케이터
+                    if (feedUiState.isLoadingMore) {
+                        item {
+                            Box(
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .padding(16.dp),
+                                contentAlignment = Alignment.Center
+                            ) {
+                                CircularProgressIndicator(
+                                    color = colors.White
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        FloatingButton(
+            icon = painterResource(id = R.drawable.ic_write),
+            onClick = onNavigateToFeedWrite
+        )
+
+        // 탭 전환 시 화면 가운데 로딩 인디케이터
+        if (feedUiState.isRefreshing) {
+            Box(
+                modifier = Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                CircularProgressIndicator(
+                    color = colors.White,
+                    modifier = Modifier.size(48.dp)
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun FeedContentPreview() {
+    ThipTheme {
+        FeedContent(
+            feedUiState = FeedUiState(
+                selectedTabIndex = 0,
+                allFeeds = listOf(
+                    AllFeedItem(
+                        feedId = 1,
+                        creatorId = 123L,
+                        creatorNickname = "책읽는사람",
+                        creatorProfileImageUrl = "",
+                        aliasName = "문학 애호가",
+                        aliasColor = "#FF6B9D",
+                        postDate = "2시간 전",
+                        isbn = "9788983711892",
+                        bookTitle = "코스모스",
+                        bookAuthor = "칼 세이건",
+                        contentBody = "이 책을 읽으면서 우주에 대한 새로운 시각을 갖게 되었습니다. 과학적 사실들이 아름다운 문장으로 표현되어 있어서 읽는 내내 감동받았어요.",
+                        contentUrls = listOf("https://example.com/image1.jpg"),
+                        likeCount = 42,
+                        commentCount = 8,
+                        isSaved = false,
+                        isLiked = true,
+                        isWriter = false
+                    ),
+                    AllFeedItem(
+                        feedId = 2,
+                        creatorId = 456L,
+                        creatorNickname = "소설러버",
+                        creatorProfileImageUrl = "",
+                        aliasName = "추리소설 전문가",
+                        aliasColor = "#4ECDC4",
+                        postDate = "4시간 전",
+                        isbn = "9788932473234",
+                        bookTitle = "셜록 홈즈의 모험",
+                        bookAuthor = "아서 코난 도일",
+                        contentBody = "홈즈의 추리 과정이 정말 흥미진진합니다. 논리적 사고의 힘을 보여주는 명작이에요.",
+                        contentUrls = emptyList(),
+                        likeCount = 28,
+                        commentCount = 15,
+                        isSaved = true,
+                        isLiked = false,
+                        isWriter = false
+                    )
+                ),
+                recentWriters = listOf(
+                    RecentWriterList(
+                        userId = 789L,
+                        nickname = "철학자",
+                        profileImageUrl = ""
+                    ),
+                    RecentWriterList(
+                        userId = 101L,
+                        nickname = "역사학도",
+                        profileImageUrl = ""
+                    )
+                )
+            ),
+            showProgressBar = false,
+            progress = 0f,
+            currentListState = LazyListState(),
+            feedTabTitles = listOf("피드", "내 피드"),
+            onNavigateToSearchPeople = {},
+            onNavigateToNotification = {},
+            onNavigateToMySubscription = {},
+            onNavigateToOthersSubscription = {},
+            onNavigateToFeedComment = {},
+            onNavigateToBookDetail = {},
+            onNavigateToUserProfile = {},
+            onNavigateToFeedWrite = {},
+            onTabSelected = {},
+            onChangeFeedLike = {},
+            onChangeFeedSave = {},
+            onPullToRefresh = {}
+        )
     }
-}
\ 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
new file mode 100644
index 00000000..19bdfba9
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/FeedWriteScreen.kt
@@ -0,0 +1,472 @@
+package com.texthip.thip.ui.feed.screen
+
+import android.net.Uri
+import android.os.Build
+import androidx.activity.compose.rememberLauncherForActivityResult
+import androidx.activity.result.PickVisualMediaRequest
+import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.ui.platform.LocalContext
+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
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.rememberScrollState
+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.collectAsState
+import androidx.compose.runtime.getValue
+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
+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.hilt.navigation.compose.hiltViewModel
+import coil.compose.AsyncImage
+import com.texthip.thip.R
+import com.texthip.thip.data.model.feed.response.FeedCategory
+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.topappbar.InputTopAppBar
+import com.texthip.thip.ui.feed.viewmodel.FeedWriteUiState
+import com.texthip.thip.ui.feed.viewmodel.FeedWriteViewModel
+import com.texthip.thip.ui.group.makeroom.component.GroupBookSearchBottomSheet
+import com.texthip.thip.ui.group.makeroom.component.GroupInputField
+import com.texthip.thip.ui.group.makeroom.component.GroupSelectBook
+import com.texthip.thip.ui.group.makeroom.component.SectionDivider
+import com.texthip.thip.ui.group.makeroom.mock.BookData
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun FeedWriteScreen(
+    modifier: Modifier = Modifier,
+    onNavigateBack: () -> Unit,
+    onFeedCreated: (Long) -> Unit = {},
+    viewModel: FeedWriteViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsState()
+
+    FeedWriteContent(
+        uiState = uiState,
+        onNavigateBack = onNavigateBack,
+        onCreateFeed = {
+            viewModel.createOrUpdateFeed(
+                onSuccess = { feedId ->
+                    onFeedCreated(feedId)
+                },
+                onError = { errorMessage ->
+                }
+            )
+        },
+        onSelectBook = viewModel::selectBook,
+        onToggleBookSearchSheet = viewModel::toggleBookSearchSheet,
+        onUpdateFeedContent = viewModel::updateFeedContent,
+        onAddImages = viewModel::addImages,
+        onRemoveImage = viewModel::removeImage,
+        onRemoveExistingImage = viewModel::removeExistingImage,
+        onTogglePrivate = viewModel::togglePrivate,
+        onSelectCategory = viewModel::selectCategory,
+        onToggleTag = viewModel::toggleTag,
+        onRemoveTag = viewModel::removeTag,
+        onSearchBooks = viewModel::searchBooks,
+        onLoadMoreSavedBooks = viewModel::loadMoreSavedBooks,
+        onLoadMoreGroupBooks = viewModel::loadMoreGroupBooks,
+        onLoadMoreSearchResults = viewModel::loadMoreSearchResults,
+        modifier = modifier
+    )
+}
+
+@Composable
+fun FeedWriteContent(
+    modifier: Modifier = Modifier,
+    uiState: FeedWriteUiState,
+    onNavigateBack: () -> Unit = {},
+    onCreateFeed: () -> Unit = {},
+    onSelectBook: (BookData) -> Unit = {},
+    onToggleBookSearchSheet: (Boolean) -> Unit = {},
+    onUpdateFeedContent: (String) -> Unit = {},
+    onAddImages: (List<Uri>) -> Unit = {},
+    onRemoveImage: (Int) -> Unit = {},
+    onRemoveExistingImage: (Int) -> Unit = {},
+    onTogglePrivate: (Boolean) -> Unit = {},
+    onSelectCategory: (Int) -> Unit = {},
+    onToggleTag: (String) -> Unit = {},
+    onRemoveTag: (String) -> Unit = {},
+    onSearchBooks: (String) -> Unit = {},
+    onLoadMoreSavedBooks: () -> Unit = {},
+    onLoadMoreGroupBooks: () -> Unit = {},
+    onLoadMoreSearchResults: () -> Unit = {}
+) {
+    val scrollState = rememberScrollState()
+    val focusManager = LocalFocusManager.current
+    
+    val remainingSlots = 3 - uiState.currentImageCount
+    
+    // Android 13+ Photo Picker (개수 제한 지원) - 최소 2로 설정하여 API 제약 회피
+    val photoPickerLauncher = rememberLauncherForActivityResult(
+        contract = ActivityResultContracts.PickMultipleVisualMedia(maxItems = maxOf(2, remainingSlots))
+    ) { uris ->
+        if (uris.isNotEmpty() && remainingSlots > 0) {
+            onAddImages(uris.take(remainingSlots))
+        }
+    }
+    
+    // Fallback for older Android versions
+    val legacyImagePickerLauncher = rememberLauncherForActivityResult(
+        contract = ActivityResultContracts.GetMultipleContents()
+    ) { uris ->
+        if (uris.isNotEmpty()) {
+            onAddImages(uris)
+        }
+    }
+
+    Box {
+        Column(
+            modifier = modifier
+                .fillMaxSize()
+                .then(if (uiState.showBookSearchSheet) Modifier.blur(5.dp) else Modifier),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            InputTopAppBar(
+                title = stringResource(
+                    if (uiState.isEditMode) R.string.edit_feed_title
+                    else R.string.new_feed
+                ),
+                rightButtonName = stringResource(
+                    R.string.registration
+                ),
+                isRightButtonEnabled = uiState.isFormValid && !uiState.isLoading,
+                onLeftClick = onNavigateBack,
+                onRightClick = onCreateFeed
+            )
+            Column(
+                modifier = Modifier
+                    .verticalScroll(scrollState)
+                    .fillMaxSize()
+                    .padding(horizontal = 20.dp)
+                    .pointerInput(Unit) {
+                        detectTapGestures(onTap = {
+                            focusManager.clearFocus()
+                        })
+                    },
+                verticalArrangement = Arrangement.Top,
+            ) {
+                Spacer(modifier = Modifier.height(20.dp))
+
+                GroupSelectBook(
+                    selectedBook = uiState.selectedBook,
+                    onChangeBookClick = { onToggleBookSearchSheet(true) },
+                    onSelectBookClick = { onToggleBookSearchSheet(true) },
+                    isBookPreselected = uiState.isBookPreselected
+                )
+
+                SectionDivider()
+
+                GroupInputField(
+                    title = stringResource(R.string.write_feed),
+                    hint = stringResource(R.string.write_feed_hint),
+                    value = uiState.feedContent,
+                    maxLength = 2000,
+                    onValueChange = onUpdateFeedContent
+                )
+
+                SectionDivider()
+
+                Text(
+                    text = stringResource(R.string.add_photo),
+                    style = typography.smalltitle_sb600_s18_h24,
+                    color = colors.White
+                )
+                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 (!uiState.canAddMoreImages) colors.DarkGrey else colors.Grey02,
+                                )
+                                .let {
+                                    if (uiState.canAddMoreImages) it.clickable {
+                                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU && remainingSlots > 1) {
+                                            photoPickerLauncher.launch(
+                                                PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly)
+                                            )
+                                        } else {
+                                            legacyImagePickerLauncher.launch("image/*")
+                                        }
+                                    } else it // 클릭 비활성화
+                                },
+
+                            contentAlignment = Alignment.Center
+                        ) {
+                            Icon(
+                                painter = painterResource(id = R.drawable.ic_plus),
+                                contentDescription = null,
+                                tint = if (!uiState.canAddMoreImages) colors.DarkGrey else colors.White
+                            )
+                        }
+                    }
+                    // 기존 이미지들 (수정 모드에서만 표시)
+                    items(uiState.existingImageUrls.size) { index ->
+                        Box(modifier = Modifier.size(80.dp)) {
+                            AsyncImage(
+                                model = uiState.existingImageUrls[index],
+                                contentDescription = null,
+                                modifier = Modifier.fillMaxSize(),
+                                contentScale = ContentScale.Crop
+                            )
+                            IconButton(
+                                onClick = { onRemoveExistingImage(index) },
+                                modifier = Modifier
+                                    .align(Alignment.TopEnd)
+                                    .size(24.dp)
+                            ) {
+                                Icon(
+                                    painter = painterResource(id = R.drawable.ic_x),
+                                    contentDescription = null,
+                                    tint = colors.White
+                                )
+                            }
+                        }
+                    }
+                    // 새로 추가한 이미지들
+                    items(uiState.imageUris.size) { index ->
+                        Box(modifier = Modifier.size(80.dp)) {
+                            AsyncImage(
+                                model = uiState.imageUris[index],
+                                contentDescription = null,
+                                modifier = Modifier.fillMaxSize(),
+                                contentScale = ContentScale.Crop
+                            )
+                            IconButton(
+                                onClick = { onRemoveImage(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,
+                            uiState.currentImageCount,
+                            3
+                        ),
+                        style = typography.info_r400_s12,
+                        color = colors.NeonGreen,
+                    )
+                }
+                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 = uiState.isPrivate,
+                        onToggleChange = onTogglePrivate
+                    )
+                }
+                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(8.dp),
+                    genres = uiState.categories.map { it.category },
+                    selectedIndex = uiState.selectedCategoryIndex,
+                    onSelect = onSelectCategory,
+                    horizontalArrangement = Arrangement.Start
+                )
+                Spacer(modifier = Modifier.height(12.dp))
+                if (uiState.selectedCategoryIndex != -1) {
+                    Spacer(modifier = Modifier.height(8.dp))
+
+                    SubGenreChipGrid(
+                        subGenres = uiState.availableTags,
+                        selectedGenres = uiState.selectedTags,
+                        onGenreToggle = onToggleTag,
+                        horizontalAlignment = Alignment.Start
+                    )
+                    Row(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.End
+                    ) {
+                        Text(
+                            modifier = Modifier.padding(top = 12.dp),
+                            text = stringResource(
+                                id = R.string.tag_count,
+                                uiState.selectedTags.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 (uiState.selectedTags.isNotEmpty()) {
+                    LazyRow(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.spacedBy(8.dp)
+                    ) {
+                        items(uiState.selectedTags) { tag ->
+                            GenreChipButton(
+                                text = tag,
+                                onClick = {
+                                    //해당 칩 눌렀을 때도 태그 삭제
+                                    onRemoveTag(tag)
+                                },
+                                onCloseClick = {
+                                    //x버튼 누르면 태그 삭제
+                                    onRemoveTag(tag)
+                                }
+                            )
+                        }
+                    }
+                }
+                Spacer(modifier = Modifier.height(20.dp))
+            }
+        }
+
+        if (uiState.showBookSearchSheet) {
+            GroupBookSearchBottomSheet(
+                onDismiss = { onToggleBookSearchSheet(false) },
+                onBookSelect = { book ->
+                    onSelectBook(book)
+                    onToggleBookSearchSheet(false)
+                },
+                onRequestBook = {
+                    onToggleBookSearchSheet(false)
+                },
+                savedBooks = uiState.savedBooks,
+                groupBooks = uiState.groupBooks,
+                searchResults = uiState.searchResults,
+                isLoading = uiState.isLoadingBooks,
+                isSearching = uiState.isSearching,
+                isLoadingMoreSaved = uiState.isLoadingMoreSavedBooks,
+                isLoadingMoreGroup = uiState.isLoadingMoreGroupBooks,
+                isLoadingMoreSearch = uiState.isLoadingMoreSearchResults,
+                hasMoreSaved = !uiState.isLastSavedBooks,
+                hasMoreGroup = !uiState.isLastGroupBooks,
+                hasMoreSearch = !uiState.isLastSearchPage,
+                onSearch = onSearchBooks,
+                onLoadMoreSaved = onLoadMoreSavedBooks,
+                onLoadMoreGroup = onLoadMoreGroupBooks,
+                onLoadMoreSearch = onLoadMoreSearchResults
+            )
+        }
+    }
+}
+
+
+@Preview
+@Composable
+private fun FeedWriteScreenPreview() {
+    ThipTheme {
+        FeedWriteContent(
+            uiState = FeedWriteUiState(
+                selectedBook = BookData(
+                    title = "미드나이트 라이브러리",
+                    imageUrl = "https://picsum.photos/300/400?1",
+                    author = "매트 헤이그",
+                    isbn = "9788937477263"
+                ),
+                feedContent = "이 책을 읽고 정말 많은 생각이 들었습니다...",
+                selectedCategoryIndex = 0,
+                selectedTags = listOf("한국소설", "에세이"),
+                categories = listOf(
+                    FeedCategory(
+                        category = "문학",
+                        tagList = listOf("한국소설", "외국소설", "에세이", "시", "고전")
+                    ),
+                    FeedCategory(
+                        category = "과학·IT",
+                        tagList = listOf("프로그래밍", "AI", "과학일반")
+                    ),
+                    FeedCategory(
+                        category = "사회과학",
+                        tagList = listOf("프로그래밍", "AI", "과학일반")
+                    ),
+                    FeedCategory(
+                        category = "인문학",
+                        tagList = listOf("프로그래밍", "AI", "과학일반")
+                    ),
+                    FeedCategory(
+                        category = "예술",
+                        tagList = listOf("프로그래밍", "AI", "과학일반")
+                    )
+                ),
+                imageUris = emptyList(),
+                isPrivate = false
+            )
+        )
+    }
+}
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
new file mode 100644
index 00000000..a760a108
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/MySubscriptionListScreen.kt
@@ -0,0 +1,237 @@
+package com.texthip.thip.ui.feed.screen
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.texthip.thip.R
+import com.texthip.thip.data.model.users.response.FollowingList
+import com.texthip.thip.ui.common.header.AuthorHeader
+import com.texthip.thip.ui.common.modal.ToastWithDate
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.feed.viewmodel.MySubscriptionUiState
+import com.texthip.thip.ui.feed.viewmodel.MySubscriptionViewModel
+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.utils.color.hexToColor
+import kotlinx.coroutines.delay
+
+@Composable
+fun MySubscriptionScreen(
+    onNavigateBack: () -> Unit,
+    onNavigateToUserProfile: (Long) -> Unit,
+    viewModel: MySubscriptionViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsState()
+    val lazyListState = rememberLazyListState()
+    val context = LocalContext.current
+
+    val isScrolledToEnd by remember {
+        derivedStateOf {
+            val layoutInfo = lazyListState.layoutInfo
+            if (layoutInfo.totalItemsCount == 0) return@derivedStateOf false
+            val lastVisibleItemIndex = layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0
+            lastVisibleItemIndex >= layoutInfo.totalItemsCount - 1
+        }
+    }
+
+    LaunchedEffect(isScrolledToEnd) {
+        if (isScrolledToEnd && !uiState.isLoading && !uiState.isLastPage) {
+            viewModel.fetchMyFollowings()
+        }
+    }
+
+    MySubscriptionContent(
+        uiState = uiState,
+        lazyListState = lazyListState,
+        onNavigateBack = onNavigateBack,
+        onToggleFollow = { userId, nickname ->
+            val followedMessage = context.getString(R.string.toast_thip, nickname)
+            val unfollowedMessage = context.getString(R.string.toast_thip_cancel, nickname)
+            viewModel.toggleFollow(userId, followedMessage, unfollowedMessage)
+        },
+        onUserClick = { userId ->
+            onNavigateToUserProfile(userId)
+        },
+        onHideToast = { viewModel.hideToast() }
+    )
+}
+@Composable
+fun MySubscriptionContent(
+    uiState: MySubscriptionUiState,
+    lazyListState: LazyListState,
+    onNavigateBack: () -> Unit,
+    onToggleFollow: (userId: Long, nickname: String) -> Unit,
+    onUserClick: (userId: Long) -> Unit,
+    onHideToast: () -> Unit
+) {
+    LaunchedEffect(uiState.showToast) {
+        if (uiState.showToast) {
+            delay(2000)
+            onHideToast()
+        }
+    }
+
+    Box(modifier = Modifier.fillMaxSize()) {
+        AnimatedVisibility(
+            visible = uiState.showToast,
+            enter = slideInVertically(
+                initialOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            exit = slideOutVertically(
+                targetOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .padding(horizontal = 15.dp, vertical = 15.dp)
+                .zIndex(1f)
+        ) {
+            ToastWithDate(
+                message = uiState.toastMessage,
+                modifier = Modifier.fillMaxWidth()
+            )
+        }
+
+        Column(
+            Modifier
+                .background(colors.Black)
+                .fillMaxSize()
+        ) {
+            DefaultTopAppBar(
+                onLeftClick = onNavigateBack,
+                title = stringResource(R.string.my_thip_list)
+            )
+            Column(modifier = Modifier.fillMaxWidth()) {
+                Spacer(modifier = Modifier.height(40.dp))
+                Text(
+                    text = stringResource(R.string.whole_num, uiState.totalCount),
+                    style = typography.menu_m500_s14_h24,
+                    color = colors.Grey,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(start = 20.dp, bottom = 4.dp)
+                )
+                HorizontalDivider(
+                    modifier = Modifier.padding(horizontal = 20.dp),
+                    color = colors.DarkGrey02,
+                    thickness = 1.dp
+                )
+
+                LazyColumn(
+                    state = lazyListState,
+                    modifier = Modifier.fillMaxSize(),
+                    contentPadding = PaddingValues(vertical = 20.dp)
+                ) {
+                    itemsIndexed(
+                        items = uiState.followings,
+                        key = { _, user -> user.userId }
+                    ) { index, user ->
+                        Column(modifier = Modifier.padding(horizontal = 20.dp)) {
+                            AuthorHeader(
+                                profileImage = user.profileImageUrl,
+                                nickname = user.nickname,
+                                badgeText = user.aliasName,
+                                badgeTextColor = hexToColor(user.aliasColor),
+                                buttonText = stringResource(if (user.isFollowing) R.string.thip_cancel else R.string.thip),
+                                buttonWidth = 64.dp,
+                                profileImageSize = 36.dp,
+                                onButtonClick = { onToggleFollow(user.userId, user.nickname) },
+                                onClick = { onUserClick(user.userId) }
+                            )
+
+                            if (index < uiState.followings.lastIndex) {
+                                Spacer(modifier = Modifier.height(16.dp))
+                                HorizontalDivider(
+                                    color = colors.DarkGrey02,
+                                    thickness = 1.dp
+                                )
+                                Spacer(modifier = Modifier.height(16.dp))
+                            }
+                        }
+                    }
+
+                    if (uiState.isLoading && !uiState.isLastPage) {
+                        item {
+                            Row(
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .padding(vertical = 16.dp),
+                                verticalAlignment = Alignment.CenterVertically
+                            ) {
+                                Spacer(modifier = Modifier.weight(1f))
+                                CircularProgressIndicator(modifier = Modifier.size(24.dp))
+                                Spacer(modifier = Modifier.weight(1f))
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@Preview
+@Composable
+private fun MySubscriptionListScreenPrev() {
+    val mockUsers = (1..10).map {
+        FollowingList(
+            userId = it.toLong(),
+            profileImageUrl = null,
+            nickname = "문학소년 $it",
+            aliasName = if (it % 3 == 0) "공식 인플루언서" else "글쓰는 탐험가",
+            aliasColor = if (it % 3 == 0) "#00C7B2" else "#FFD600",
+            isFollowing = true
+        )
+    }
+
+    ThipTheme {
+        MySubscriptionContent(
+            uiState = MySubscriptionUiState(
+                isLoading = false,
+                followings = mockUsers,
+                totalCount = 25,
+                isLastPage = false,
+                showToast = false
+            ),
+            lazyListState = rememberLazyListState(),
+            onNavigateBack = {},
+            onToggleFollow = { _, _ -> },
+            onUserClick = {},
+            onHideToast = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/OthersSubscriptionListScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/OthersSubscriptionListScreen.kt
new file mode 100644
index 00000000..99fe1c20
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/OthersSubscriptionListScreen.kt
@@ -0,0 +1,185 @@
+package com.texthip.thip.ui.feed.screen
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.texthip.thip.R
+import com.texthip.thip.data.model.users.response.FollowerList
+import com.texthip.thip.ui.common.header.AuthorHeader
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.feed.viewmodel.OthersSubscriptionUiState
+import com.texthip.thip.ui.feed.viewmodel.OthersSubscriptionViewModel
+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.utils.color.hexToColor
+
+@Composable
+fun OthersSubscriptionListScreen(
+    onNavigateBack: () -> Unit,
+    onProfileClick: (userId: Long, isMyself: Boolean) -> Unit = { _, _ -> },
+    viewModel: OthersSubscriptionViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsState()
+    val lazyListState = rememberLazyListState()
+
+    val isScrolledToEnd by remember {
+        derivedStateOf {
+            val layoutInfo = lazyListState.layoutInfo
+            if (layoutInfo.totalItemsCount == 0) return@derivedStateOf false
+            val lastVisibleItemIndex = layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0
+            lastVisibleItemIndex >= layoutInfo.totalItemsCount - 1
+        }
+    }
+
+    LaunchedEffect(isScrolledToEnd) {
+        if (isScrolledToEnd && !uiState.isLoading && !uiState.isLastPage) {
+            viewModel.fetchOthersFollowers()
+        }
+    }
+
+    OthersSubscriptionContent(
+        uiState = uiState,
+        lazyListState = lazyListState,
+        onNavigateBack = onNavigateBack,
+        onProfileClick = onProfileClick
+    )
+}
+@Composable
+fun OthersSubscriptionContent(
+    uiState: OthersSubscriptionUiState,
+    lazyListState: LazyListState,
+    onNavigateBack: () -> Unit,
+    onProfileClick: (userId: Long, isMyself: Boolean) -> Unit
+) {
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            onLeftClick = onNavigateBack,
+            title = stringResource(R.string.thip_list)
+        )
+        Column(modifier = Modifier.fillMaxWidth()) {
+            Spacer(modifier = Modifier.height(40.dp))
+            Text(
+                text = stringResource(R.string.whole_num, uiState.totalCount),
+                style = typography.menu_m500_s14_h24,
+                color = colors.Grey,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(start = 20.dp, bottom = 4.dp)
+            )
+            HorizontalDivider(
+                modifier = Modifier.padding(horizontal = 20.dp),
+                color = colors.DarkGrey02,
+                thickness = 1.dp
+            )
+
+            LazyColumn(
+                state = lazyListState,
+                modifier = Modifier.fillMaxSize(),
+                contentPadding = PaddingValues(vertical = 20.dp)
+            ) {
+                itemsIndexed(
+                    items = uiState.followers,
+                    key = { _, user -> user.userId }
+                ) { index, user ->
+                    Column(modifier = Modifier.padding(horizontal = 20.dp)) {
+                        AuthorHeader(
+                            profileImage = user.profileImageUrl,
+                            nickname = user.nickname,
+                            badgeText = user.aliasName,
+                            badgeTextColor = hexToColor(user.aliasColor),
+                            showButton = false,
+                            showThipNum = true,
+                            profileImageSize = 36.dp,
+                            thipNum = user.followerCount,
+                            onClick = { onProfileClick(user.userId, user.isMyself) }
+                        )
+
+                        if (index < uiState.followers.lastIndex) {
+                            Spacer(modifier = Modifier.height(16.dp))
+                            HorizontalDivider(
+                                color = colors.DarkGrey02,
+                                thickness = 1.dp
+                            )
+                            Spacer(modifier = Modifier.height(16.dp))
+                        }
+                    }
+                }
+
+                if (uiState.isLoading && !uiState.isLastPage) {
+                    item {
+                        Row(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(vertical = 16.dp),
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            Spacer(modifier = Modifier.weight(1f))
+                            CircularProgressIndicator(modifier = Modifier.size(24.dp))
+                            Spacer(modifier = Modifier.weight(1f))
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@Preview
+@Composable
+private fun OthersSubscriptionListScreenPrev() {
+    val mockUsers = (1..10).map {
+        FollowerList(
+            userId = it.toLong(),
+            profileImageUrl = null,
+            nickname = "문학소년 $it",
+            aliasName = if (it % 3 == 0) "공식 인플루언서" else "글쓰는 탐험가",
+            aliasColor = if (it % 3 == 0) "#00C7B2" else "#FFD600",
+            followerCount = it * 10,
+            isMyself = true
+        )
+    }
+
+    ThipTheme {
+        OthersSubscriptionContent(
+            uiState = OthersSubscriptionUiState(
+                isLoading = false,
+                followers = mockUsers,
+                totalCount = mockUsers.size,
+                isLastPage = false
+            ),
+            lazyListState = rememberLazyListState(),
+            onNavigateBack = {},
+            onProfileClick = { _, _ -> }
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/SearchPeopleScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/SearchPeopleScreen.kt
new file mode 100644
index 00000000..2f66251c
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/SearchPeopleScreen.kt
@@ -0,0 +1,239 @@
+package com.texthip.thip.ui.feed.screen
+
+import androidx.compose.foundation.background
+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.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.forms.SearchBookTextField
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.feed.component.PeopleRecentSearch
+import com.texthip.thip.ui.feed.component.SearchPeopleEmptyResult
+import com.texthip.thip.ui.feed.component.SearchPeopleResult
+import com.texthip.thip.ui.feed.mock.MySubscriptionData
+import com.texthip.thip.ui.feed.viewmodel.RecentSearchUiItem
+import com.texthip.thip.ui.feed.viewmodel.SearchPeopleUiState
+import com.texthip.thip.ui.feed.viewmodel.SearchPeopleViewModel
+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 SearchPeopleScreen(
+    viewModel: SearchPeopleViewModel = hiltViewModel(),
+    onNavigateBack: () -> Unit,
+    onUserClick: (Long) -> Unit,
+) {
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+    val focusManager = LocalFocusManager.current
+
+    LaunchedEffect(Unit) {
+        viewModel.fetchRecentSearches()
+    }
+
+    LaunchedEffect(uiState.isSearched) {
+        if (uiState.isSearched) {
+            focusManager.clearFocus()
+        }
+    }
+
+    SearchPeopleContent(
+        uiState = uiState,
+        onNavigateBack = onNavigateBack,
+        onSearchTextChanged = viewModel::onSearchTextChanged,
+        onFinalSearch = viewModel::onFinalSearch,
+        onRecentSearchClick = { keyword -> viewModel.onFinalSearch(keyword) },
+        onRecentSearchRemove = viewModel::removeRecentSearch,
+        onUserClick = { user -> onUserClick(user.userId!!.toLong())}
+    )
+}
+
+@Composable
+fun SearchPeopleContent(
+    uiState: SearchPeopleUiState,
+    onNavigateBack: () -> Unit,
+    onSearchTextChanged: (String) -> Unit,
+    onFinalSearch: (String) -> Unit,
+    onRecentSearchClick: (String) -> Unit,
+    onRecentSearchRemove: (Long) -> Unit,
+    onUserClick: (MySubscriptionData) -> Unit
+) {
+
+    Column(
+        modifier = Modifier.fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            title = stringResource(R.string.search_user),
+            onLeftClick = onNavigateBack,
+        )
+        Spacer(modifier = Modifier.height(16.dp))
+
+        SearchBookTextField(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 20.dp),
+            hint = stringResource(R.string.search_user_you_look_for),
+            text = uiState.searchText,
+            onValueChange = onSearchTextChanged,
+            onSearch = onFinalSearch
+        )
+        Spacer(modifier = Modifier.height(16.dp))
+
+        when {
+            uiState.isSearched && uiState.searchResults.isNotEmpty() -> { //검색했는데 결과 있음
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 20.dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Text(
+                        text = stringResource(
+                            R.string.group_searched_room_size,
+                            uiState.searchResults.size
+                        ),
+                        color = colors.Grey,
+                        style = typography.menu_m500_s14_h24
+                    )
+                }
+                Spacer(
+                    modifier = Modifier
+                        .padding(top = 4.dp, bottom = 16.dp)
+                        .padding(horizontal = 20.dp)
+                        .fillMaxWidth()
+                        .height(1.dp)
+                        .background(colors.DarkGrey02)
+                )
+                SearchPeopleResult(peopleList = uiState.searchResults,onThipNumClick = onUserClick)
+            }
+
+            uiState.isSearched && uiState.searchResults.isEmpty() -> { //검색했는데 결과 없음
+                SearchPeopleEmptyResult(
+                    modifier = Modifier.padding(horizontal = 20.dp),
+                    mainText = stringResource(R.string.no_user_you_look_for)
+                )
+            }
+
+            uiState.searchText.isNotBlank() && !uiState.isSearched  -> { //검색중
+                SearchPeopleResult(peopleList = uiState.searchResults,onThipNumClick = onUserClick)
+            }
+
+            else -> { //최근검색어 보여주기
+                PeopleRecentSearch(
+                    modifier = Modifier.padding(horizontal = 20.dp),
+                    recentSearches = uiState.recentSearches,
+                    onSearchClick = onRecentSearchClick,
+                    onRemove = onRecentSearchRemove
+                )
+            }
+        }
+
+
+    }
+}
+
+
+@Preview
+@Composable
+private fun SearchPeopleContentPreview_Recent() {
+    ThipTheme {
+        SearchPeopleContent(
+            uiState = SearchPeopleUiState(
+                recentSearches = listOf(
+                    RecentSearchUiItem(id = 1, term = "메롱"),
+                    RecentSearchUiItem(id = 2, term = "메메롱"),
+                    RecentSearchUiItem(id = 3, term = "메메메롱")
+                )
+            ),
+            onSearchTextChanged = {},
+            onFinalSearch = {},
+            onRecentSearchClick = {},
+            onRecentSearchRemove = {},
+            onUserClick = {},
+            onNavigateBack = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun SearchPeopleContentPreview_Typing() {
+    val dummyResults = listOf(
+        MySubscriptionData(1L,null, "메롱이", "인플루언서", colors.NeonGreen, 12, false),
+        MySubscriptionData(1L,null, "메메롱이", "칭호", colors.NeonGreen, 1, false),
+    )
+    ThipTheme {
+        SearchPeopleContent(
+            uiState = SearchPeopleUiState(
+                searchText = "메롱",
+                searchResults = dummyResults
+            ),
+            onSearchTextChanged = {},
+            onFinalSearch = {},
+            onRecentSearchClick = {},
+            onRecentSearchRemove = {},
+            onUserClick = {},
+            onNavigateBack = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun SearchPeopleContentPreview_Result() {
+    val dummyResults = listOf(
+        MySubscriptionData(1L, null, "Thip_Official", "인플루언서", colors.NeonGreen, 111, false),
+        MySubscriptionData(1L, null, "thip01", "작가", colors.NeonGreen, 0, false)
+    )
+    ThipTheme {
+        SearchPeopleContent(
+            uiState = SearchPeopleUiState(
+                searchText = "thip",
+                isSearched = true,
+                searchResults = dummyResults
+            ),
+            onSearchTextChanged = {},
+            onFinalSearch = {},
+            onRecentSearchClick = {},
+            onRecentSearchRemove = {},
+            onUserClick = {},
+            onNavigateBack = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun SearchPeopleContentPreview_Empty() {
+    ThipTheme {
+        SearchPeopleContent(
+            uiState = SearchPeopleUiState(
+                searchText = "없는사용자",
+                isSearched = true,
+                searchResults = emptyList()
+            ),
+            onSearchTextChanged = {},
+            onFinalSearch = {},
+            onRecentSearchClick = {},
+            onRecentSearchRemove = {},
+            onUserClick = {},
+            onNavigateBack = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/screen/SubscriptionListScreen.kt b/app/src/main/java/com/texthip/thip/ui/feed/screen/SubscriptionListScreen.kt
new file mode 100644
index 00000000..76d355a4
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/screen/SubscriptionListScreen.kt
@@ -0,0 +1,176 @@
+package com.texthip.thip.ui.feed.screen
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.feed.component.MySubscriptionList
+import com.texthip.thip.ui.feed.mock.MySubscriptionData
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun SubscriptionScreen(
+    navController: NavController? = null,
+    titleText: String = stringResource(R.string.thip_list)
+) {
+    val initialmembers = listOf(
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 100
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thipthip",
+            role = "공식 인플루언서",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 50
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 0
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thip01",
+            role = "작가",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 1000
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 500
+        ),
+
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thipthip",
+            role = "공식 인플루언서",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 105
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 8
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thip01",
+            role = "작가",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 100
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 88
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thipthip",
+            role = "공식 인플루언서",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 50
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "Thiper",
+            role = "칭호칭호",
+            roleColor = colors.Yellow,
+            subscriberCount = 100
+        ),
+        MySubscriptionData(
+            profileImageUrl = null,
+            nickname = "thip01",
+            role = "작가",
+            roleColor = colors.NeonGreen,
+            subscriberCount = 1
+        ),
+    )
+
+    var members by remember { mutableStateOf(initialmembers) }
+
+    Column(
+        Modifier
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            onLeftClick = {},
+            title = titleText
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+
+        ) {
+            Spacer(modifier = Modifier.height(40.dp))
+            Text(
+                text = stringResource(R.string.whole_num, members.size),
+                style = typography.menu_m500_s14_h24,
+                color = colors.Grey,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(start = 20.dp, bottom = 4.dp)
+            )
+            HorizontalDivider(
+                modifier = Modifier.padding(horizontal = 20.dp),
+                color = colors.DarkGrey02,
+                thickness = 1.dp
+            )
+            LazyColumn(
+                modifier = Modifier
+                    .fillMaxSize()
+            ) {
+                item {
+                    MySubscriptionList(
+                        members = members,
+                        isMine = false,
+                        onUnsubscribe = {  }
+                    )
+                }
+            }
+        }
+    }
+
+}
+
+@Preview
+@Composable
+private fun SubscriptionListScreenPrev() {
+    ThipTheme {
+        SubscriptionScreen()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/usecase/ChangeFeedLikeUseCase.kt b/app/src/main/java/com/texthip/thip/ui/feed/usecase/ChangeFeedLikeUseCase.kt
new file mode 100644
index 00000000..019bce3e
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/usecase/ChangeFeedLikeUseCase.kt
@@ -0,0 +1,18 @@
+package com.texthip.thip.ui.feed.usecase
+
+import com.texthip.thip.data.repository.FeedRepository
+import javax.inject.Inject
+
+class ChangeFeedLikeUseCase @Inject constructor(
+    private val feedRepository: FeedRepository
+) {
+    suspend operator fun invoke(
+        feedId: Long, newLikeStatus: Boolean, currentLikeCount: Int,
+        currentIsSaved: Boolean
+    ) =
+        feedRepository.changeFeedLike(
+            feedId, newLikeStatus,
+            currentLikeCount,
+            currentIsSaved
+        )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/usecase/ChangeFeedSaveUseCase.kt b/app/src/main/java/com/texthip/thip/ui/feed/usecase/ChangeFeedSaveUseCase.kt
new file mode 100644
index 00000000..e763f643
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/usecase/ChangeFeedSaveUseCase.kt
@@ -0,0 +1,19 @@
+package com.texthip.thip.ui.feed.usecase
+
+import com.texthip.thip.data.repository.FeedRepository
+import javax.inject.Inject
+
+class ChangeFeedSaveUseCase @Inject constructor(
+    private val feedRepository: FeedRepository
+) {
+    suspend operator fun invoke(
+        feedId: Long, newSaveStatus: Boolean, currentIsLiked: Boolean,
+        currentLikeCount: Int
+    ) =
+        feedRepository.changeFeedSave(
+            feedId,
+            newSaveStatus,
+            currentIsLiked,
+            currentLikeCount
+        )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/usecase/DeleteFeedUseCase.kt b/app/src/main/java/com/texthip/thip/ui/feed/usecase/DeleteFeedUseCase.kt
new file mode 100644
index 00000000..d8f30be6
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/usecase/DeleteFeedUseCase.kt
@@ -0,0 +1,13 @@
+package com.texthip.thip.ui.feed.usecase
+
+import com.texthip.thip.data.repository.FeedRepository
+import javax.inject.Inject
+
+//피드 삭제 기능만 담당하는 usecase
+class DeleteFeedUseCase @Inject constructor(
+    private val feedRepository: FeedRepository
+) {
+    suspend operator fun invoke(feedId: Long): Result<String?> {
+        return feedRepository.deleteFeed(feedId)
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/FeedDetailViewModel.kt b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/FeedDetailViewModel.kt
new file mode 100644
index 00000000..651177ee
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/FeedDetailViewModel.kt
@@ -0,0 +1,151 @@
+package com.texthip.thip.ui.feed.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.model.feed.response.FeedDetailResponse
+import com.texthip.thip.data.repository.FeedRepository
+import com.texthip.thip.ui.feed.usecase.ChangeFeedLikeUseCase
+import com.texthip.thip.ui.feed.usecase.ChangeFeedSaveUseCase
+import com.texthip.thip.ui.feed.usecase.DeleteFeedUseCase
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class FeedDetailUiState(
+    val isLoading: Boolean = false,
+    val feedDetail: FeedDetailResponse? = null,
+    val error: String? = null,
+    val isDeleting: Boolean = false,
+    val deleteSuccess: Boolean = false
+)
+
+@HiltViewModel
+class FeedDetailViewModel @Inject constructor(
+    private val feedRepository: FeedRepository,
+    private val deleteFeedUseCase: DeleteFeedUseCase,
+    private val changeFeedLikeUseCase: ChangeFeedLikeUseCase,
+    private val changeFeedSaveUseCase: ChangeFeedSaveUseCase
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(FeedDetailUiState())
+    val uiState: StateFlow<FeedDetailUiState> = _uiState.asStateFlow()
+
+    init {
+        observeFeedUpdates()
+    }
+
+    private fun updateState(update: (FeedDetailUiState) -> FeedDetailUiState) {
+        _uiState.value = update(_uiState.value)
+    }
+    private fun observeFeedUpdates() {
+        viewModelScope.launch {
+            feedRepository.feedStateUpdateResult.collect { update ->
+                val currentFeed = _uiState.value.feedDetail
+                if (currentFeed != null && currentFeed.feedId.toLong() == update.feedId) {
+                    updateState {
+                        it.copy(
+                            feedDetail = currentFeed.copy(
+                                isLiked = update.isLiked,
+                                likeCount = update.likeCount,
+                                isSaved = update.isSaved
+                            )
+                        )
+                    }
+                }
+            }
+        }
+    }
+
+    fun loadFeedDetail(feedId: Long) {
+        viewModelScope.launch {
+            updateState { it.copy(isLoading = true, error = null) }
+
+            feedRepository.getFeedDetail(feedId)
+                .onSuccess { response ->
+                    updateState {
+                        it.copy(
+                            isLoading = false,
+                            feedDetail = response,
+                            error = null
+                        )
+                    }
+                }
+                .onFailure { exception ->
+                    updateState {
+                        it.copy(
+                            isLoading = false,
+                            feedDetail = null,
+                            error = exception.message ?: "알 수 없는 오류가 발생했습니다."
+                        )
+                    }
+                }
+        }
+    }
+    fun deleteFeed(feedId: Long) {
+        viewModelScope.launch {
+            updateState { it.copy(isDeleting = true, error = null) }
+
+            deleteFeedUseCase(feedId) // UseCase 호출
+                .onSuccess {
+                    updateState { it.copy(isDeleting = false, deleteSuccess = true) }
+                }
+                .onFailure { exception ->
+                    updateState {
+                        it.copy(
+                            isDeleting = false,
+                            error = exception.message ?: "피드 삭제 중 오류가 발생했습니다."
+                        )
+                    }
+                }
+        }
+    }
+    fun changeFeedLike() {
+        viewModelScope.launch {
+            val originalFeed = _uiState.value.feedDetail ?: return@launch
+
+            val updatedFeed = originalFeed.copy(
+                isLiked = !originalFeed.isLiked,
+                likeCount = if (originalFeed.isLiked) originalFeed.likeCount - 1 else originalFeed.likeCount + 1
+            )
+            updateState { it.copy(feedDetail = updatedFeed) }
+
+            val newLikeStatus = !originalFeed.isLiked
+            changeFeedLikeUseCase(
+                feedId = originalFeed.feedId.toLong(),
+                newLikeStatus = newLikeStatus,
+                currentLikeCount = originalFeed.likeCount,
+                currentIsSaved = originalFeed.isSaved
+            ).onFailure {
+                updateState { it.copy(feedDetail = originalFeed) }
+            }
+        }
+    }
+
+    fun changeFeedSave() {
+        viewModelScope.launch {
+            val originalFeed = _uiState.value.feedDetail ?: return@launch
+
+            val updatedFeed = originalFeed.copy(
+                isSaved = !originalFeed.isSaved
+            )
+            updateState { it.copy(feedDetail = updatedFeed) }
+
+            val newSaveStatus = !originalFeed.isSaved
+            changeFeedSaveUseCase(
+                feedId = originalFeed.feedId.toLong(),
+                newSaveStatus = newSaveStatus,
+                currentIsLiked = originalFeed.isLiked,
+                currentLikeCount = originalFeed.likeCount
+            ).onFailure {
+                updateState { it.copy(feedDetail = originalFeed) }
+            }
+        }
+    }
+
+    fun clearError() {
+        updateState { it.copy(error = null) }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/FeedOthersViewModel.kt b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/FeedOthersViewModel.kt
new file mode 100644
index 00000000..695712ac
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/FeedOthersViewModel.kt
@@ -0,0 +1,173 @@
+package com.texthip.thip.ui.feed.viewmodel
+
+import androidx.lifecycle.SavedStateHandle
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.model.feed.response.FeedList
+import com.texthip.thip.data.model.feed.response.FeedUsersInfoResponse
+import com.texthip.thip.data.repository.FeedRepository
+import com.texthip.thip.data.repository.UserRepository
+import com.texthip.thip.ui.feed.usecase.ChangeFeedLikeUseCase
+import com.texthip.thip.ui.feed.usecase.ChangeFeedSaveUseCase
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.async
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class FeedOthersUiState(
+    val isLoading: Boolean = true,
+    val userInfo: FeedUsersInfoResponse? = null,
+    val feeds: List<FeedList> = emptyList(),
+    val errorMessage: String? = null,
+    val showToast: Boolean = false,
+    val toastMessage: String = ""
+)
+
+@HiltViewModel
+class FeedOthersViewModel @Inject constructor(
+    private val feedRepository: FeedRepository,
+    private val changeFeedLikeUseCase: ChangeFeedLikeUseCase,
+    private val changeFeedSaveUseCase: ChangeFeedSaveUseCase,
+    private val userRepository: UserRepository,
+    savedStateHandle: SavedStateHandle
+) : ViewModel() {
+    private val userId: Long = requireNotNull(savedStateHandle["userId"])
+
+    private val _uiState = MutableStateFlow(FeedOthersUiState())
+    val uiState = _uiState.asStateFlow()
+
+    init {
+        fetchData()
+        observeFeedUpdates()
+    }
+    private fun observeFeedUpdates() {
+        viewModelScope.launch {
+            feedRepository.feedStateUpdateResult.collect { update ->
+                val updatedFeeds = _uiState.value.feeds.map { feed ->
+                    if (feed.feedId == update.feedId) {
+                        feed.copy(
+                            isLiked = update.isLiked,
+                            likeCount = update.likeCount,
+                            isSaved = update.isSaved
+                        )
+                    } else {
+                        feed
+                    }
+                }
+                _uiState.update { it.copy(feeds = updatedFeeds) }
+            }
+        }
+    }
+
+
+    fun fetchData() {
+        viewModelScope.launch {
+            _uiState.update { it.copy(isLoading = true) }
+
+            val userInfoDeferred = async { feedRepository.getFeedUsersInfo(userId) }
+            val feedsDeferred = async { feedRepository.getFeedUsers(userId) }
+
+            val userInfoResult = userInfoDeferred.await()
+            val feedsResult = feedsDeferred.await()
+
+            val fetchedFeeds = feedsResult.getOrNull()?.feedList ?: emptyList()
+
+            _uiState.update {
+                it.copy(
+                    isLoading = false,
+                    userInfo = userInfoResult.getOrNull(),
+                    feeds = fetchedFeeds,
+                    errorMessage = userInfoResult.exceptionOrNull()?.message
+                        ?: feedsResult.exceptionOrNull()?.message
+                )
+            }
+        }
+    }
+
+    fun changeFeedLike(feedId: Long) {
+        viewModelScope.launch {
+            val currentFeeds = _uiState.value.feeds
+            val feedToUpdate = currentFeeds.find { it.feedId == feedId } ?: return@launch
+
+            //ui 먼저 변경 ( 낙관적 업데이트 )
+            val newFeeds = currentFeeds.map {
+                if (it.feedId == feedId) {
+                    it.copy(
+                        isLiked = !it.isLiked,
+                        likeCount = if (it.isLiked) it.likeCount - 1 else it.likeCount + 1
+                    )
+                } else {
+                    it
+                }
+            }
+            _uiState.update { it.copy(feeds = newFeeds) }
+
+            //api 호출
+            val newLikeStatus = !feedToUpdate.isLiked
+            changeFeedLikeUseCase(
+                feedId = feedId,
+                newLikeStatus = newLikeStatus,
+                currentLikeCount = feedToUpdate.likeCount,
+                currentIsSaved = feedToUpdate.isSaved
+            ).onFailure {
+                _uiState.update { it.copy(feeds = currentFeeds) }
+            }
+        }
+    }
+    fun changeFeedSave(feedId: Long) {
+        viewModelScope.launch {
+            val currentFeeds = _uiState.value.feeds
+            val feedToUpdate = currentFeeds.find { it.feedId == feedId } ?: return@launch
+
+            //ui 먼저 변경 ( 낙관적 업데이트 )
+            val newFeeds = currentFeeds.map {
+                if (it.feedId == feedId) {
+                    it.copy(isSaved = !it.isSaved) // isSaved 상태 반전
+                } else {
+                    it
+                }
+            }
+            _uiState.update { it.copy(feeds = newFeeds) }
+
+            //api 호출
+            val newSaveStatus = !feedToUpdate.isSaved
+            changeFeedSaveUseCase(
+                feedId = feedId,
+                newSaveStatus = newSaveStatus,
+                currentIsLiked = feedToUpdate.isLiked,
+                currentLikeCount = feedToUpdate.likeCount
+            ).onFailure {
+                _uiState.update { it.copy(feeds = currentFeeds) }
+            }
+        }
+    }
+    fun toggleFollow(followedMessage: String, unfollowedMessage: String) {
+        val currentUserInfo = _uiState.value.userInfo ?: return
+        val currentIsFollowing = currentUserInfo.isFollowing
+
+        //UI 즉시 변경 (낙관적 업데이트)
+        val optimisticUserInfo = currentUserInfo.copy(isFollowing = !currentIsFollowing)
+        _uiState.update {
+            it.copy(
+                userInfo = optimisticUserInfo,
+                showToast = true,
+                toastMessage = if (!currentIsFollowing) followedMessage else unfollowedMessage
+            )
+        }
+
+        //API 요청
+        viewModelScope.launch {
+            userRepository.toggleFollow(followingUserId = userId, isFollowing = !currentIsFollowing)
+                .onFailure {
+                    _uiState.update { it.copy(userInfo = currentUserInfo) }
+                }
+        }
+    }
+
+    fun hideToast() {
+        _uiState.update { it.copy(showToast = false) }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/FeedViewModel.kt b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/FeedViewModel.kt
new file mode 100644
index 00000000..901569f3
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/FeedViewModel.kt
@@ -0,0 +1,542 @@
+package com.texthip.thip.ui.feed.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.model.feed.response.AllFeedItem
+import com.texthip.thip.data.model.feed.response.FeedMineInfoResponse
+import com.texthip.thip.data.model.feed.response.MyFeedItem
+import com.texthip.thip.data.model.users.response.RecentWriterList
+import com.texthip.thip.data.repository.FeedRepository
+import com.texthip.thip.data.repository.UserRepository
+import com.texthip.thip.ui.feed.mock.FeedStateUpdateResult
+import com.texthip.thip.ui.feed.usecase.ChangeFeedLikeUseCase
+import com.texthip.thip.ui.feed.usecase.ChangeFeedSaveUseCase
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class FeedUiState(
+    val selectedTabIndex: Int = 0,
+    val allFeeds: List<AllFeedItem> = emptyList(),
+    val myFeeds: List<MyFeedItem> = emptyList(),
+    val recentWriters: List<RecentWriterList> = emptyList(),
+    val myFeedInfo: FeedMineInfoResponse? = null,
+    val isLoading: Boolean = false,
+    val isRefreshing: Boolean = false, // 탭 전환용 로딩
+    val isPullToRefreshing: Boolean = false, // Pull to refresh용 로딩
+    val isLoadingMore: Boolean = false,
+    val isLastPageAllFeeds: Boolean = false,
+    val isLastPageMyFeeds: Boolean = false,
+    val error: String? = null
+) {
+    val canLoadMoreAllFeeds: Boolean get() = !isLoading && !isLoadingMore && !isRefreshing && !isPullToRefreshing && !isLastPageAllFeeds
+    val canLoadMoreMyFeeds: Boolean get() = !isLoading && !isLoadingMore && !isRefreshing && !isPullToRefreshing && !isLastPageMyFeeds
+    val currentTabFeeds: List<Any>
+        get() = when (selectedTabIndex) {
+            0 -> allFeeds
+            1 -> myFeeds
+            else -> emptyList()
+        }
+    val canLoadMoreCurrentTab: Boolean
+        get() = when (selectedTabIndex) {
+            0 -> canLoadMoreAllFeeds
+            1 -> canLoadMoreMyFeeds
+            else -> false
+        }
+}
+
+@HiltViewModel
+class FeedViewModel @Inject constructor(
+    private val feedRepository: FeedRepository,
+    private val userRepository: UserRepository,
+    private val changeFeedLikeUseCase: ChangeFeedLikeUseCase,
+    private val changeFeedSaveUseCase: ChangeFeedSaveUseCase
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(FeedUiState())
+    val uiState = _uiState.asStateFlow()
+
+    private var allFeedsNextCursor: String? = null
+    private var myFeedsNextCursor: String? = null
+    private var isLoadingAllFeeds = false
+    private var isLoadingMyFeeds = false
+
+    init {
+        loadAllFeeds()
+        fetchRecentWriters()
+        fetchMyFeedInfo()
+        observeFeedUpdates()
+    }
+
+    private fun updateState(update: (FeedUiState) -> FeedUiState) {
+        _uiState.value = update(_uiState.value)
+    }
+
+    private fun observeFeedUpdates() {
+        viewModelScope.launch {
+            feedRepository.feedStateUpdateResult.collect { update ->
+                val updatedAllFeeds = _uiState.value.allFeeds.map { feed ->
+                    if (feed.feedId.toLong() == update.feedId) {
+                        feed.copy(
+                            isLiked = update.isLiked,
+                            likeCount = update.likeCount,
+                            isSaved = update.isSaved,
+                            commentCount = update.commentCount
+                        )
+                    } else {
+                        feed
+                    }
+                }
+
+                val updatedMyFeeds = _uiState.value.myFeeds.map { feed ->
+                    if (feed.feedId.toLong() == update.feedId) {
+                        feed.copy(
+                            isLiked = update.isLiked,
+                            likeCount = update.likeCount,
+                            isSaved = update.isSaved,
+                            commentCount = update.commentCount
+                        )
+                    } else {
+                        feed
+                    }
+                }
+
+                _uiState.update { 
+                    it.copy(
+                        allFeeds = updatedAllFeeds, 
+                        myFeeds = updatedMyFeeds
+                    ) 
+                }
+            }
+        }
+    }
+
+    fun onTabSelected(index: Int) {
+        val isCurrentTab = _uiState.value.selectedTabIndex == index
+        updateState { it.copy(selectedTabIndex = index) }
+
+        when (index) {
+            0 -> {
+                if (isCurrentTab) {
+                    // 같은 탭 다시 클릭 시: 전체 새로고침 + 스크롤 상단
+                    refreshDataAndScrollToTop()
+                } else {
+                    // 다른 탭에서 이동: 기존처럼 현재 탭만 새로고침
+                    refreshCurrentTab()
+                }
+            }
+
+            1 -> {
+                if (isCurrentTab) {
+                    // 같은 탭 다시 클릭 시: 전체 새로고침 + 스크롤 상단
+                    refreshDataAndScrollToTop()
+                } else {
+                    // 다른 탭에서 이동: 기존처럼 현재 탭만 새로고침
+                    refreshCurrentTab()
+                    if (_uiState.value.myFeedInfo == null) {
+                        fetchMyFeedInfo()
+                    }
+                }
+            }
+        }
+    }
+    
+    fun refreshDataAndScrollToTop() {
+        refreshData()
+        // 스크롤 상단 이동은 Screen에서 처리
+    }
+    
+    fun refreshOnBottomNavReselect() {
+        // 바텀 네비게이션에서 같은 탭 다시 클릭 시 (스크롤은 Screen에서 처리)
+        refreshData()
+    }
+
+    private fun loadAllFeeds(isInitial: Boolean = true) {
+        if (isLoadingAllFeeds && !isInitial) return
+        if (_uiState.value.isLastPageAllFeeds && !isInitial) return
+
+        viewModelScope.launch {
+            try {
+                isLoadingAllFeeds = true
+
+                if (isInitial) {
+                    updateState {
+                        it.copy(
+                            isLoading = true,
+                            allFeeds = emptyList(),
+                            isLastPageAllFeeds = false
+                        )
+                    }
+                    allFeedsNextCursor = null
+                } else {
+                    updateState { it.copy(isLoadingMore = true) }
+                }
+
+                val cursor = if (isInitial) null else allFeedsNextCursor
+
+                feedRepository.getAllFeeds(cursor).onSuccess { response ->
+                    if (response != null) {
+                        val currentList = if (isInitial) emptyList() else _uiState.value.allFeeds
+                        updateState {
+                            it.copy(
+                                allFeeds = currentList + response.feedList,
+                                error = null,
+                                isLastPageAllFeeds = response.isLast
+                            )
+                        }
+                        allFeedsNextCursor = response.nextCursor
+                    } else {
+                        updateState { it.copy(isLastPageAllFeeds = true) }
+                    }
+                }.onFailure { exception ->
+                    updateState { it.copy(error = exception.message) }
+                }
+            } finally {
+                isLoadingAllFeeds = false
+                updateState { it.copy(isLoading = false, isLoadingMore = false) }
+            }
+        }
+    }
+
+    private fun loadMyFeeds(isInitial: Boolean = true) {
+        if (isLoadingMyFeeds && !isInitial) return
+        if (_uiState.value.isLastPageMyFeeds && !isInitial) return
+
+        viewModelScope.launch {
+            try {
+                isLoadingMyFeeds = true
+
+                if (isInitial) {
+                    updateState {
+                        it.copy(
+                            isLoading = true,
+                            myFeeds = emptyList(),
+                            isLastPageMyFeeds = false
+                        )
+                    }
+                    myFeedsNextCursor = null
+                } else {
+                    updateState { it.copy(isLoadingMore = true) }
+                }
+
+                val cursor = if (isInitial) null else myFeedsNextCursor
+
+                feedRepository.getMyFeeds(cursor).onSuccess { response ->
+                    if (response != null) {
+                        val currentList = if (isInitial) emptyList() else _uiState.value.myFeeds
+                        updateState {
+                            it.copy(
+                                myFeeds = currentList + response.feedList,
+                                error = null,
+                                isLastPageMyFeeds = response.isLast
+                            )
+                        }
+                        myFeedsNextCursor = response.nextCursor
+                    } else {
+                        updateState { it.copy(isLastPageMyFeeds = true) }
+                    }
+                }.onFailure { exception ->
+                    updateState { it.copy(error = exception.message) }
+                }
+            } finally {
+                isLoadingMyFeeds = false
+                updateState { it.copy(isLoading = false, isLoadingMore = false) }
+            }
+        }
+    }
+
+    fun refreshCurrentTab() {
+        viewModelScope.launch {
+            updateState { it.copy(isRefreshing = true) }
+
+            when (_uiState.value.selectedTabIndex) {
+                0 -> refreshAllFeeds()
+                1 -> refreshMyFeeds()
+            }
+            updateState { it.copy(isRefreshing = false) }
+        }
+    }
+
+    fun pullToRefresh() {
+        viewModelScope.launch {
+            updateState { it.copy(isPullToRefreshing = true) }
+            fetchRecentWriters()
+            when (_uiState.value.selectedTabIndex) {
+                0 -> refreshAllFeeds()
+                1 -> refreshMyFeeds()
+            }
+            updateState { it.copy(isPullToRefreshing = false) }
+        }
+    }
+
+    private suspend fun refreshAllFeeds() {
+        allFeedsNextCursor = null
+
+        feedRepository.getAllFeeds().onSuccess { response ->
+            if (response != null) {
+                allFeedsNextCursor = response.nextCursor
+                updateState {
+                    it.copy(
+                        allFeeds = response.feedList,
+                        isLastPageAllFeeds = response.isLast,
+                        error = null
+                    )
+                }
+            } else {
+                updateState {
+                    it.copy(
+                        allFeeds = emptyList(),
+                        isLastPageAllFeeds = true
+                    )
+                }
+            }
+        }.onFailure { exception ->
+            updateState {
+                it.copy(
+                    error = exception.message
+                )
+            }
+        }
+    }
+
+    private suspend fun refreshMyFeeds() {
+        myFeedsNextCursor = null
+
+        feedRepository.getMyFeeds().onSuccess { response ->
+            if (response != null) {
+                myFeedsNextCursor = response.nextCursor
+                updateState {
+                    it.copy(
+                        myFeeds = response.feedList,
+                        isLastPageMyFeeds = response.isLast,
+                        error = null
+                    )
+                }
+            } else {
+                updateState {
+                    it.copy(
+                        myFeeds = emptyList(),
+                        isLastPageMyFeeds = true
+                    )
+                }
+            }
+        }.onFailure { exception ->
+            updateState {
+                it.copy(
+                    error = exception.message
+                )
+            }
+        }
+    }
+
+    fun loadMoreFeeds() {
+        if (!_uiState.value.canLoadMoreCurrentTab || _uiState.value.isRefreshing) return
+
+        when (_uiState.value.selectedTabIndex) {
+            0 -> loadAllFeeds(isInitial = false)
+            1 -> loadMyFeeds(isInitial = false)
+        }
+    }
+
+    fun refreshData() {
+        viewModelScope.launch {
+            refreshAllFeeds()
+            refreshMyFeeds()
+            fetchRecentWriters()
+        }
+    }
+
+    fun fetchRecentWriters() {
+        viewModelScope.launch {
+            updateState { it.copy(isLoading = true) }
+            userRepository.getMyFollowingsRecentFeeds()
+                .onSuccess { data ->
+                    val writers = data?.myFollowingUsers ?: emptyList()
+                    updateState {
+                        it.copy(
+                            isLoading = false,
+                            recentWriters = writers
+                        )
+                    }
+                }
+                .onFailure { exception ->
+                    updateState {
+                        it.copy(
+                            isLoading = false,
+                            error = exception.message
+                        )
+                    }
+                }
+        }
+    }
+
+    fun fetchMyFeedInfo() {
+        viewModelScope.launch {
+            feedRepository.getMyFeedInfo()
+                .onSuccess { data ->
+                    updateState {
+                        it.copy(myFeedInfo = data)
+                    }
+                }
+                .onFailure { exception ->
+                    updateState {
+                        it.copy(error = exception.message)
+                    }
+                }
+        }
+    }
+
+    fun changeFeedLike(feedId: Long) {
+        viewModelScope.launch {
+            val currentAllFeeds = _uiState.value.allFeeds
+            val currentMyFeeds = _uiState.value.myFeeds
+
+            val allFeedToUpdate = currentAllFeeds.find { it.feedId.toLong() == feedId }
+            val myFeedToUpdate = currentMyFeeds.find { it.feedId.toLong() == feedId }
+
+            if (allFeedToUpdate == null && myFeedToUpdate == null) return@launch
+
+            //ui 먼저 변경 ( 낙관적 업데이트 )
+            val newAllFeeds = currentAllFeeds.map {
+                if (it.feedId.toLong() == feedId) {
+                    it.copy(
+                        isLiked = !it.isLiked,
+                        likeCount = if (it.isLiked) it.likeCount - 1 else it.likeCount + 1
+                    )
+                } else {
+                    it
+                }
+            }
+
+            val newMyFeeds = currentMyFeeds.map {
+                if (it.feedId.toLong() == feedId) {
+                    it.copy(
+                        isLiked = !it.isLiked,
+                        likeCount = if (it.isLiked) it.likeCount - 1 else it.likeCount + 1
+                    )
+                } else {
+                    it
+                }
+            }
+
+            _uiState.update { it.copy(allFeeds = newAllFeeds, myFeeds = newMyFeeds) }
+
+            //api 호출
+            val newLikeStatus = if (allFeedToUpdate != null) {
+                !allFeedToUpdate.isLiked
+            } else {
+                !myFeedToUpdate!!.isLiked
+            }
+
+            val currentLikeCount = allFeedToUpdate?.likeCount ?: myFeedToUpdate!!.likeCount
+            val currentIsSaved = allFeedToUpdate?.isSaved ?: myFeedToUpdate!!.isSaved
+
+            changeFeedLikeUseCase(
+                feedId, newLikeStatus, currentLikeCount, currentIsSaved
+            )
+                .onFailure {
+                    _uiState.update {
+                        it.copy(
+                            allFeeds = currentAllFeeds,
+                            myFeeds = currentMyFeeds
+                        )
+                    }
+                }
+        }
+    }
+
+    fun changeFeedSave(feedId: Long) {
+        viewModelScope.launch {
+            val currentAllFeeds = _uiState.value.allFeeds
+            val currentMyFeeds = _uiState.value.myFeeds
+
+            val allFeedToUpdate = currentAllFeeds.find { it.feedId.toLong() == feedId }
+            val myFeedToUpdate = currentMyFeeds.find { it.feedId.toLong() == feedId }
+
+            if (allFeedToUpdate == null && myFeedToUpdate == null) return@launch
+
+            // (낙관적 업데이트) UI 즉시 변경
+            val newAllFeeds = currentAllFeeds.map {
+                if (it.feedId.toLong() == feedId) {
+                    it.copy(isSaved = !it.isSaved)
+                } else {
+                    it
+                }
+            }
+
+            val newMyFeeds = currentMyFeeds.map {
+                if (it.feedId.toLong() == feedId) {
+                    it.copy(isSaved = !it.isSaved)
+                } else {
+                    it
+                }
+            }
+
+            updateState { it.copy(allFeeds = newAllFeeds, myFeeds = newMyFeeds) }
+
+            // API 호출
+            val newSaveStatus = if (allFeedToUpdate != null) {
+                !allFeedToUpdate.isSaved
+            } else {
+                !myFeedToUpdate!!.isSaved
+            }
+
+            val currentIsLiked = allFeedToUpdate?.isLiked ?: myFeedToUpdate!!.isLiked
+            val currentLikeCount = allFeedToUpdate?.likeCount ?: myFeedToUpdate!!.likeCount
+
+            changeFeedSaveUseCase(
+                feedId = feedId,
+                newSaveStatus = newSaveStatus,
+                currentIsLiked = currentIsLiked,
+                currentLikeCount = currentLikeCount
+            ).onFailure {
+                _uiState.update { it.copy(allFeeds = currentAllFeeds, myFeeds = currentMyFeeds) }
+            }
+        }
+    }
+
+    fun updateFeedStateFromResult(result: FeedStateUpdateResult) {
+        val updatedAllFeeds = _uiState.value.allFeeds.map { feed ->
+            if (feed.feedId.toLong() == result.feedId) {
+                feed.copy(
+                    isLiked = result.isLiked,
+                    likeCount = result.likeCount,
+                    isSaved = result.isSaved,
+                    commentCount = result.commentCount
+                )
+            } else {
+                feed
+            }
+        }
+
+        val updatedMyFeeds = _uiState.value.myFeeds.map { feed ->
+            if (feed.feedId.toLong() == result.feedId) {
+                feed.copy(
+                    isLiked = result.isLiked,
+                    likeCount = result.likeCount,
+                    isSaved = result.isSaved,
+                    commentCount = result.commentCount
+                )
+            } else {
+                feed
+            }
+        }
+
+        _uiState.update { it.copy(allFeeds = updatedAllFeeds, myFeeds = updatedMyFeeds) }
+    }
+
+    fun removeDeletedFeed(feedId: Long) {
+        val currentAllFeeds = _uiState.value.allFeeds.filterNot { it.feedId.toLong() == feedId }
+        val currentMyFeeds = _uiState.value.myFeeds.filterNot { it.feedId.toLong() == feedId }
+
+        updateState {
+            it.copy(
+                allFeeds = currentAllFeeds,
+                myFeeds = currentMyFeeds
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/FeedWriteUiState.kt b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/FeedWriteUiState.kt
new file mode 100644
index 00000000..0564c924
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/FeedWriteUiState.kt
@@ -0,0 +1,77 @@
+package com.texthip.thip.ui.feed.viewmodel
+
+import android.net.Uri
+import com.texthip.thip.data.model.feed.response.FeedCategory
+import com.texthip.thip.ui.group.makeroom.mock.BookData
+
+data class FeedWriteUiState(
+    val selectedBook: BookData? = null,
+    val showBookSearchSheet: Boolean = false,
+    val feedContent: String = "",
+    val imageUris: List<Uri> = emptyList(),
+    val existingImageUrls: List<String> = emptyList(), // 기존 피드 이미지 URL들
+    val isPrivate: Boolean = false,
+    val selectedCategoryIndex: Int = -1,
+    val selectedTags: List<String> = emptyList(),
+    val isLoading: Boolean = false,
+    val errorMessage: String? = null,
+    val savedBooks: List<BookData> = emptyList(),
+    val groupBooks: List<BookData> = emptyList(),
+    val isLoadingBooks: Boolean = false,
+    val isLoadingMoreSavedBooks: Boolean = false,
+    val isLoadingMoreGroupBooks: Boolean = false,
+    val isLastSavedBooks: Boolean = false,
+    val isLastGroupBooks: Boolean = false,
+    val searchResults: List<BookData> = emptyList(),
+    val isSearching: Boolean = false,
+    val isLoadingMoreSearchResults: Boolean = false,
+    val searchPage: Int = 1,
+    val isLastSearchPage: Boolean = false,
+    val currentSearchQuery: String = "",
+    val categories: List<FeedCategory> = emptyList(),
+    val isBookPreselected: Boolean = false,
+    val isLoadingCategories: Boolean = false,
+    val isEditMode: Boolean = false,
+    val editingFeedId: Long? = null
+) {
+    // 유효성 검사 로직
+    val isContentValid: Boolean
+        get() = feedContent.isNotBlank() && feedContent.length <= 2000
+
+    // 현재 모드에 따른 이미지 개수
+    val currentImageCount: Int
+        get() = if (isEditMode) existingImageUrls.size else imageUris.size
+
+    val isImageCountValid: Boolean
+        get() = currentImageCount <= 3
+
+    val isFormValid: Boolean
+        get() = selectedBook != null &&
+                isContentValid &&
+                isImageCountValid &&
+                selectedTags.size <= 5  // 태그는 최대 5개까지만
+
+    // 태그 개수 제한 (최대 5개)
+    val canAddMoreTags: Boolean
+        get() = selectedTags.size < 5
+
+    // 이미지 추가 가능 여부
+    val canAddMoreImages: Boolean
+        get() = !isEditMode && imageUris.size < 3
+
+    // 현재 선택된 카테고리의 태그 목록
+    val availableTags: List<String>
+        get() = if (selectedCategoryIndex >= 0 && selectedCategoryIndex < categories.size) {
+            categories[selectedCategoryIndex].tagList
+        } else {
+            categories.flatMap { it.tagList }.distinct()
+        }
+
+    // 현재 선택된 카테고리 이름
+    val selectedCategoryName: String?
+        get() = if (selectedCategoryIndex >= 0 && selectedCategoryIndex < categories.size) {
+            categories[selectedCategoryIndex].category
+        } else {
+            null
+        }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/FeedWriteViewModel.kt b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/FeedWriteViewModel.kt
new file mode 100644
index 00000000..5844f7a5
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/FeedWriteViewModel.kt
@@ -0,0 +1,662 @@
+package com.texthip.thip.ui.feed.viewmodel
+
+import android.net.Uri
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.R
+import com.texthip.thip.data.model.book.response.BookSavedResponse
+import com.texthip.thip.data.model.book.response.BookSearchItem
+import com.texthip.thip.data.model.book.response.BookUserSaveList
+import com.texthip.thip.data.provider.StringResourceProvider
+import com.texthip.thip.data.repository.BookRepository
+import com.texthip.thip.data.repository.FeedRepository
+import com.texthip.thip.ui.group.makeroom.mock.BookData
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+import kotlin.onFailure
+
+@HiltViewModel
+class FeedWriteViewModel @Inject constructor(
+    private val feedRepository: FeedRepository,
+    private val bookRepository: BookRepository,
+    private val stringResourceProvider: StringResourceProvider
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(FeedWriteUiState())
+    val uiState: StateFlow<FeedWriteUiState> = _uiState.asStateFlow()
+
+    private var searchJob: Job? = null
+    private var loadMoreSearchJob: Job? = null
+    private var savedBooksCursor: String? = null
+    private var groupBooksCursor: String? = null
+    private var isLoadingSavedBooks = false
+    private var isLoadingGroupBooks = false
+
+    private fun updateState(update: (FeedWriteUiState) -> FeedWriteUiState) {
+        _uiState.value = update(_uiState.value)
+    }
+
+    init {
+        loadFeedWriteInfo()
+    }
+
+    fun setPinnedRecord(
+        isbn: String,
+        bookTitle: String,
+        bookAuthor: String,
+        bookImageUrl: String,
+        recordContent: String
+    ) {
+        val pinnedBook = BookData(
+            title = bookTitle,
+            imageUrl = bookImageUrl,
+            author = bookAuthor,
+            isbn = isbn
+        )
+        updateState {
+            it.copy(
+                selectedBook = pinnedBook,
+                isBookPreselected = true,
+                feedContent = recordContent
+            )
+        }
+    }
+
+    fun loadFeedForEdit(feedId: Long) {
+        viewModelScope.launch {
+            updateState { it.copy(isLoading = true) }
+
+            feedRepository.getFeedDetail(feedId)
+                .onSuccess { feedDetail ->
+                    if (feedDetail != null) {
+                        // 선택된 카테고리 인덱스 찾기
+                        val categoryIndex = _uiState.value.categories.indexOfFirst { category ->
+                            feedDetail.tagList.any { tag ->
+                                category.tagList.contains(tag)
+                            }
+                        }.let { if (it == -1) 0 else it }
+
+                        val selectedBook = BookData(
+                            title = feedDetail.bookTitle,
+                            imageUrl = feedDetail.bookImageUrl ?: "", // 새로 추가된 필드 사용
+                            author = feedDetail.bookAuthor,
+                            isbn = feedDetail.isbn
+                        )
+
+                        updateState { currentState ->
+                            currentState.copy(
+                                selectedBook = selectedBook,
+                                isBookPreselected = true,
+                                feedContent = feedDetail.contentBody,
+                                isPrivate = !(feedDetail.isPublic ?: true), // 새로 추가된 필드 사용, 기본값은 공개
+                                selectedCategoryIndex = categoryIndex,
+                                selectedTags = feedDetail.tagList,
+                                existingImageUrls = feedDetail.contentUrls, // 기존 이미지 URL 저장
+                                isLoading = false,
+                                isEditMode = true,
+                                editingFeedId = feedId
+                            )
+                        }
+                    } else {
+                        updateState {
+                            it.copy(
+                                isLoading = false,
+                                errorMessage = "피드 정보를 불러올 수 없습니다."
+                            )
+                        }
+                    }
+                }
+                .onFailure { exception ->
+                    updateState {
+                        it.copy(
+                            isLoading = false,
+                            errorMessage = exception.message ?: "네트워크 오류가 발생했습니다."
+                        )
+                    }
+                }
+        }
+    }
+
+    fun setEditData(
+        feedId: Long,
+        isbn: String,
+        bookTitle: String,
+        bookAuthor: String,
+        bookImageUrl: String,
+        contentBody: String,
+        isPublic: Boolean,
+        tagList: List<String>
+    ) {
+        // 선택된 카테고리 인덱스 찾기
+        val categoryIndex = _uiState.value.categories.indexOfFirst { category ->
+            tagList.any { tag ->
+                category.tagList.contains(tag)
+            }
+        }.let { if (it == -1) 0 else it }
+
+        val selectedBook = BookData(
+            title = bookTitle,
+            imageUrl = bookImageUrl,
+            author = bookAuthor,
+            isbn = isbn
+        )
+
+        updateState { currentState ->
+            currentState.copy(
+                selectedBook = selectedBook,
+                isBookPreselected = true,
+                feedContent = contentBody,
+                isPrivate = !isPublic,
+                selectedCategoryIndex = categoryIndex,
+                selectedTags = tagList,
+                isEditMode = true,
+                editingFeedId = feedId
+            )
+        }
+    }
+
+    private fun loadFeedWriteInfo() {
+        viewModelScope.launch {
+            updateState { it.copy(isLoadingCategories = true) }
+            feedRepository.getFeedWriteInfo()
+                .onSuccess { response ->
+                    updateState {
+                        it.copy(
+                            categories = response?.categoryList ?: emptyList(),
+                            isLoadingCategories = false
+                        )
+                    }
+                }
+                .onFailure {
+                    updateState {
+                        it.copy(
+                            categories = emptyList(),
+                            isLoadingCategories = false,
+                            errorMessage = stringResourceProvider.getString(R.string.error_network_error)
+                        )
+                    }
+                }
+        }
+    }
+
+    fun selectBook(book: BookData) {
+        updateState { it.copy(selectedBook = book) }
+    }
+
+    fun setPreselectedBookForFeed(isbn: String, bookTitle: String, bookAuthor: String, bookImageUrl: String) {
+        val preselectedBook = BookData(
+            title = bookTitle,
+            imageUrl = bookImageUrl,
+            author = bookAuthor,
+            isbn = isbn
+        )
+        updateState {
+            it.copy(
+                selectedBook = preselectedBook,
+                isBookPreselected = true
+            )
+        }
+    }
+
+    fun toggleBookSearchSheet(show: Boolean) {
+        updateState { it.copy(showBookSearchSheet = show) }
+        if (show) {
+            loadBooks()
+        }
+    }
+
+    private fun loadBooks() {
+        updateState { it.copy(isLoadingBooks = true) }
+        loadSavedBooks(isInitial = true)
+        loadGroupBooks(isInitial = true)
+    }
+
+    fun loadSavedBooks(isInitial: Boolean = false) {
+        if (isLoadingSavedBooks) return
+        if (!isInitial && _uiState.value.isLastSavedBooks) return
+
+        viewModelScope.launch {
+            try {
+                isLoadingSavedBooks = true
+                
+                if (isInitial) {
+                    updateState { it.copy(savedBooks = emptyList(), isLastSavedBooks = false) }
+                    savedBooksCursor = null
+                } else {
+                    updateState { it.copy(isLoadingMoreSavedBooks = true) }
+                }
+
+                val cursor = if (isInitial) null else savedBooksCursor
+
+                bookRepository.getBooks("SAVED", cursor)
+                    .onSuccess { response ->
+                        if (response != null) {
+                            val currentList = if (isInitial) emptyList() else _uiState.value.savedBooks
+                            val newBooks = response.bookList.map { it.toBookData() }
+                            updateState {
+                                it.copy(
+                                    savedBooks = currentList + newBooks,
+                                    isLastSavedBooks = response.isLast
+                                )
+                            }
+                            savedBooksCursor = response.nextCursor
+                        } else {
+                            updateState { it.copy(isLastSavedBooks = true) }
+                        }
+                    }
+                    .onFailure { exception ->
+                        if (isInitial) {
+                            updateState { it.copy(savedBooks = emptyList()) }
+                        }
+                    }
+            } finally {
+                isLoadingSavedBooks = false
+                updateState { 
+                    it.copy(
+                        isLoadingBooks = if (isInitial && !isLoadingGroupBooks) false else it.isLoadingBooks,
+                        isLoadingMoreSavedBooks = false
+                    ) 
+                }
+            }
+        }
+    }
+
+    fun loadGroupBooks(isInitial: Boolean = false) {
+        if (isLoadingGroupBooks) return
+        if (!isInitial && _uiState.value.isLastGroupBooks) return
+
+        viewModelScope.launch {
+            try {
+                isLoadingGroupBooks = true
+                
+                if (isInitial) {
+                    updateState { it.copy(groupBooks = emptyList(), isLastGroupBooks = false) }
+                    groupBooksCursor = null
+                } else {
+                    updateState { it.copy(isLoadingMoreGroupBooks = true) }
+                }
+
+                val cursor = if (isInitial) null else groupBooksCursor
+
+                bookRepository.getBooks("JOINING", cursor)
+                    .onSuccess { response ->
+                        if (response != null) {
+                            val currentList = if (isInitial) emptyList() else _uiState.value.groupBooks
+                            val newBooks = response.bookList.map { it.toBookData() }
+                            updateState {
+                                it.copy(
+                                    groupBooks = currentList + newBooks,
+                                    isLastGroupBooks = response.isLast
+                                )
+                            }
+                            groupBooksCursor = response.nextCursor
+                        } else {
+                            updateState { it.copy(isLastGroupBooks = true) }
+                        }
+                    }
+                    .onFailure { exception ->
+                        if (isInitial) {
+                            updateState { it.copy(groupBooks = emptyList()) }
+                        }
+                    }
+            } finally {
+                isLoadingGroupBooks = false
+                updateState { 
+                    it.copy(
+                        isLoadingBooks = if (isInitial && !isLoadingSavedBooks) false else it.isLoadingBooks,
+                        isLoadingMoreGroupBooks = false
+                    ) 
+                }
+            }
+        }
+    }
+
+    fun loadMoreSavedBooks() {
+        loadSavedBooks(isInitial = false)
+    }
+
+    fun loadMoreGroupBooks() {
+        loadGroupBooks(isInitial = false)
+    }
+
+    private fun BookSavedResponse.toBookData(): BookData {
+        return BookData(
+            title = this.bookTitle,
+            imageUrl = this.bookImageUrl,
+            author = this.authorName,
+            isbn = this.isbn
+        )
+    }
+
+    private fun BookUserSaveList.toBookDataFromSaved(): BookData {
+        return BookData(
+            title = this.bookTitle,
+            imageUrl = this.bookImageUrl,
+            author = this.authorName,
+            isbn = this.isbn
+        )
+    }
+
+    private fun BookSearchItem.toBookData(): BookData {
+        return BookData(
+            title = this.title,
+            imageUrl = this.imageUrl,
+            author = this.authorName,
+            isbn = this.isbn
+        )
+    }
+
+    fun searchBooks(query: String) {
+        searchJob?.cancel()
+        loadMoreSearchJob?.cancel()
+
+        if (query.isBlank()) {
+            updateState { 
+                it.copy(
+                    searchResults = emptyList(), 
+                    isSearching = false,
+                    searchPage = 1,
+                    isLastSearchPage = false,
+                    currentSearchQuery = ""
+                ) 
+            }
+            return
+        }
+
+        searchJob = viewModelScope.launch {
+            delay(300) // 디바운싱
+            updateState { 
+                it.copy(
+                    isSearching = true,
+                    searchResults = emptyList(),
+                    searchPage = 1,
+                    isLastSearchPage = false,
+                    currentSearchQuery = query
+                ) 
+            }
+
+            try {
+                val result = bookRepository.searchBooks(query, page = 1, isFinalized = false)
+                result.onSuccess { response ->
+                    if (response != null) {
+                        val searchResults = response.searchResult.map { it.toBookData() }
+                        updateState {
+                            it.copy(
+                                searchResults = searchResults,
+                                searchPage = response.page,
+                                isLastSearchPage = response.last,
+                                isSearching = false
+                            )
+                        }
+                    } else {
+                        updateState {
+                            it.copy(
+                                searchResults = emptyList(),
+                                isSearching = false,
+                                isLastSearchPage = true
+                            )
+                        }
+                    }
+                }.onFailure {
+                    updateState {
+                        it.copy(
+                            searchResults = emptyList(),
+                            isSearching = false
+                        )
+                    }
+                }
+            } catch (e: Exception) {
+                updateState {
+                    it.copy(
+                        searchResults = emptyList(),
+                        isSearching = false
+                    )
+                }
+            }
+        }
+    }
+
+    fun loadMoreSearchResults() {
+        val currentState = _uiState.value
+        if (currentState.isLoadingMoreSearchResults || 
+            currentState.isSearching ||
+            currentState.isLastSearchPage || 
+            currentState.searchResults.isEmpty() ||
+            currentState.currentSearchQuery.isBlank()) {
+            return
+        }
+
+        loadMoreSearchJob?.cancel()
+        loadMoreSearchJob = viewModelScope.launch {
+            updateState { it.copy(isLoadingMoreSearchResults = true) }
+            
+            try {
+                val nextPage = currentState.searchPage + 1
+                val result = bookRepository.searchBooks(
+                    currentState.currentSearchQuery,
+                    page = nextPage, 
+                    isFinalized = false
+                )
+                result.onSuccess { response ->
+                    if (response != null) {
+                        val newResults = response.searchResult.map { it.toBookData() }
+                        updateState {
+                            it.copy(
+                                searchResults = currentState.searchResults + newResults,
+                                searchPage = response.page,
+                                isLastSearchPage = response.last,
+                                isLoadingMoreSearchResults = false
+                            )
+                        }
+                    } else {
+                        updateState {
+                            it.copy(
+                                isLoadingMoreSearchResults = false,
+                                isLastSearchPage = true
+                            )
+                        }
+                    }
+                }.onFailure {
+                    updateState {
+                        it.copy(isLoadingMoreSearchResults = false)
+                    }
+                }
+            } catch (e: Exception) {
+                updateState {
+                    it.copy(isLoadingMoreSearchResults = false)
+                }
+            }
+        }
+    }
+
+    fun updateFeedContent(content: String) {
+        if (content.length <= 2000) {
+            updateState { it.copy(feedContent = content) }
+        }
+    }
+
+    fun addImages(newImageUris: List<Uri>) {
+        val currentState = _uiState.value
+
+        // 수정 모드에서는 새 이미지 추가 불가
+        if (currentState.isEditMode) return
+
+        val availableSlots = 3 - currentState.imageUris.size
+        val imagesToAdd = newImageUris.take(availableSlots)
+
+        updateState {
+            it.copy(imageUris = currentState.imageUris + imagesToAdd)
+        }
+    }
+
+    fun removeImage(index: Int) {
+        val currentImages = _uiState.value.imageUris.toMutableList()
+        if (index in currentImages.indices) {
+            currentImages.removeAt(index)
+            updateState { it.copy(imageUris = currentImages) }
+        }
+    }
+
+    fun removeExistingImage(index: Int) {
+        val currentExistingImages = _uiState.value.existingImageUrls.toMutableList()
+        if (index in currentExistingImages.indices) {
+            currentExistingImages.removeAt(index)
+            updateState { it.copy(existingImageUrls = currentExistingImages) }
+        }
+    }
+
+    fun togglePrivate(isPrivate: Boolean) {
+        updateState { it.copy(isPrivate = isPrivate) }
+    }
+
+    fun selectCategory(index: Int) {
+        updateState {
+            it.copy(
+                selectedCategoryIndex = index
+            )
+        }
+    }
+
+    fun toggleTag(tag: String) {
+        val currentState = _uiState.value
+        val newSelectedTags = if (currentState.selectedTags.contains(tag)) {
+            currentState.selectedTags - tag
+        } else {
+            if (currentState.canAddMoreTags) {
+                currentState.selectedTags + tag
+            } else {
+                currentState.selectedTags
+            }
+        }
+        updateState { it.copy(selectedTags = newSelectedTags) }
+    }
+
+    fun removeTag(tag: String) {
+        val currentTags = _uiState.value.selectedTags
+        updateState {
+            it.copy(selectedTags = currentTags - tag)
+        }
+    }
+
+    fun createOrUpdateFeed(onSuccess: (Long) -> Unit, onError: (String) -> Unit) {
+        val currentState = _uiState.value
+
+        if (currentState.isEditMode && currentState.editingFeedId != null) {
+            updateFeed(currentState.editingFeedId, onSuccess, onError)
+        } else {
+            createFeed(onSuccess, onError)
+        }
+    }
+
+    fun createFeed(onSuccess: (Long) -> Unit, onError: (String) -> Unit) {
+        val currentState = _uiState.value
+
+        if (!currentState.isFormValid) {
+            onError(stringResourceProvider.getString(R.string.error_form_validation))
+            return
+        }
+
+        val selectedBook = currentState.selectedBook
+        if (selectedBook?.isbn == null) {
+            onError(stringResourceProvider.getString(R.string.error_book_info_invalid))
+            return
+        }
+
+        viewModelScope.launch {
+            try {
+                updateState { it.copy(isLoading = true, errorMessage = null) }
+
+                val result = feedRepository.createFeed(
+                    isbn = selectedBook.isbn,
+                    contentBody = currentState.feedContent.trim(),
+                    isPublic = !currentState.isPrivate,
+                    tagList = currentState.selectedTags,
+                    imageUris = currentState.imageUris
+                )
+
+                result.onSuccess { response ->
+                    val feedId = response?.feedId
+                    if (feedId != null) {
+                        onSuccess(feedId.toLong())
+                    } else {
+                        onError(stringResourceProvider.getString(R.string.error_feed_id_not_returned))
+                    }
+                }.onFailure { exception ->
+                    onError(
+                        exception.message
+                            ?: stringResourceProvider.getString(R.string.error_network_error)
+                    )
+                }
+
+            } catch (e: Exception) {
+                onError(
+                    stringResourceProvider.getString(
+                        R.string.error_network_error,
+                        e.message ?: ""
+                    )
+                )
+            } finally {
+                updateState { it.copy(isLoading = false) }
+            }
+        }
+    }
+
+    private fun updateFeed(feedId: Long, onSuccess: (Long) -> Unit, onError: (String) -> Unit) {
+        val currentState = _uiState.value
+
+        if (!currentState.isFormValid) {
+            onError(stringResourceProvider.getString(R.string.error_form_validation))
+            return
+        }
+
+        viewModelScope.launch {
+            try {
+                updateState { it.copy(isLoading = true, errorMessage = null) }
+
+                val result = feedRepository.updateFeed(
+                    feedId = feedId,
+                    contentBody = currentState.feedContent.trim(),
+                    isPublic = !currentState.isPrivate,
+                    tagList = currentState.selectedTags,
+                    remainImageUrls = currentState.existingImageUrls
+                )
+
+                result.onSuccess { response ->
+                    val updatedFeedId = response?.feedId ?: feedId
+                    onSuccess(updatedFeedId.toLong())
+                }.onFailure { exception ->
+                    onError(
+                        exception.message
+                            ?: stringResourceProvider.getString(R.string.error_network_error)
+                    )
+                }
+
+            } catch (e: Exception) {
+                onError(
+                    stringResourceProvider.getString(
+                        R.string.error_network_error,
+                        e.message ?: ""
+                    )
+                )
+            } finally {
+                updateState { it.copy(isLoading = false) }
+            }
+        }
+    }
+
+    fun clearError() {
+        updateState { it.copy(errorMessage = null) }
+    }
+
+    override fun onCleared() {
+        super.onCleared()
+        searchJob?.cancel()
+        loadMoreSearchJob?.cancel()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/MySubscriptionViewModel.kt b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/MySubscriptionViewModel.kt
new file mode 100644
index 00000000..3fe21831
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/MySubscriptionViewModel.kt
@@ -0,0 +1,126 @@
+package com.texthip.thip.ui.feed.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.model.users.response.FollowingList
+import com.texthip.thip.data.repository.UserRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class MySubscriptionUiState(
+    val isLoading: Boolean = false,
+    val followings: List<FollowingList> = emptyList(),
+    val totalCount: Int = 0,
+    val isLastPage: Boolean = false,
+    val errorMessage: String? = null,
+    val showToast: Boolean = false,
+    val toastMessage: String = ""
+)
+
+@HiltViewModel
+class MySubscriptionViewModel @Inject constructor(
+    private val userRepository: UserRepository
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(MySubscriptionUiState())
+    val uiState = _uiState.asStateFlow()
+
+    private var nextCursor: String? = null
+
+    init {
+        fetchMyFollowings(isInitial = true)
+    }
+
+    fun fetchMyFollowings(isInitial: Boolean = false) {
+        if (_uiState.value.isLoading || (!isInitial && _uiState.value.isLastPage)) {
+            return
+        }
+
+        viewModelScope.launch {
+            _uiState.update { it.copy(isLoading = true) }
+            val cursorToFetch = if (isInitial) null else nextCursor
+
+            val result = userRepository.getMyFollowings(cursor = cursorToFetch)
+
+            result.onSuccess { data ->
+                data?.let {
+                    val newFollowings = it.followings
+                    nextCursor = it.nextCursor
+
+                    _uiState.update { currentState ->
+                        currentState.copy(
+                            isLoading = false,
+                            followings = if (isInitial) newFollowings else currentState.followings + newFollowings,
+                            totalCount = it.totalFollowingCount,
+                            isLastPage = it.isLast
+                        )
+                    }
+                } ?: _uiState.update {
+                    it.copy(isLoading = false, errorMessage = "응답 데이터가 비어있습니다.")
+                }
+            }.onFailure { exception ->
+                _uiState.update {
+                    it.copy(isLoading = false, errorMessage = exception.message)
+                }
+            }
+        }
+    }
+
+
+    fun toggleFollow(userId: Long, followedMessage: String, unfollowedMessage: String) {
+        val currentState = _uiState.value
+        val userToUpdate = currentState.followings.find { it.userId == userId } ?: return
+        val currentIsFollowing = userToUpdate.isFollowing
+        //낙관적 업데이트 -> ui 먼저 변경
+        val newOptimisticList = currentState.followings.map { user ->
+            if (user.userId == userId) {
+                user.copy(isFollowing = !currentIsFollowing)
+            } else {
+                user
+            }
+        }
+
+        _uiState.update {
+            it.copy(
+                followings = newOptimisticList,
+                showToast = true,
+                toastMessage = if (!currentIsFollowing) followedMessage else unfollowedMessage
+            )
+        }
+        viewModelScope.launch {
+            val requestType = !currentIsFollowing
+
+            userRepository.toggleFollow(followingUserId = userId, isFollowing = requestType)
+                .onSuccess { response ->
+                    val serverState = response?.isFollowing ?: requestType
+                    _uiState.update { state ->
+                        state.copy(followings = state.followings.map { user ->
+                            if (user.userId == userId) {
+                                user.copy(isFollowing = serverState)
+                            } else {
+                                user
+                            }
+                        })
+                    }
+                }
+                .onFailure {
+                    _uiState.update { state ->
+                        state.copy(followings = state.followings.map { user ->
+                            if (user.userId == userId) {
+                                user.copy(isFollowing = currentIsFollowing) // 원래 상태로 복원
+                            } else {
+                                user
+                            }
+                        })
+                    }
+                }
+        }
+    }
+    fun hideToast() {
+        _uiState.update { it.copy(showToast = false) }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/OthersSubscriptionViewModel.kt b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/OthersSubscriptionViewModel.kt
new file mode 100644
index 00000000..ae6bc2f7
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/OthersSubscriptionViewModel.kt
@@ -0,0 +1,68 @@
+package com.texthip.thip.ui.feed.viewmodel
+
+import androidx.lifecycle.SavedStateHandle
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.model.users.response.FollowerList
+import com.texthip.thip.data.repository.UserRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class OthersSubscriptionUiState(
+    val isLoading: Boolean = false,
+    val followers: List<FollowerList> = emptyList(),
+    val totalCount: Int = 0,
+    val isLastPage: Boolean = false,
+    val errorMessage: String? = null
+)
+
+@HiltViewModel
+class OthersSubscriptionViewModel @Inject constructor(
+    private val userRepository: UserRepository,
+    savedStateHandle: SavedStateHandle
+) : ViewModel() {
+    private val userId: Long = requireNotNull(savedStateHandle["userId"])
+    private val _uiState = MutableStateFlow(OthersSubscriptionUiState())
+    val uiState = _uiState.asStateFlow()
+
+    private var nextCursor: String? = null
+
+    init {
+        fetchOthersFollowers(isInitial = true)
+    }
+
+    fun fetchOthersFollowers(isInitial: Boolean = false) {
+        if (_uiState.value.isLoading || (!isInitial && _uiState.value.isLastPage)) {
+            return
+        }
+
+        viewModelScope.launch {
+            _uiState.update { it.copy(isLoading = true) }
+            val cursorToFetch = if (isInitial) null else nextCursor
+
+            val result = userRepository.getOthersFollowers(userId = userId, cursor = cursorToFetch)
+
+            result.onSuccess { data ->
+                data?.let {
+                    _uiState.update { currentState ->
+                        currentState.copy(
+                            isLoading = false,
+                            followers = if (isInitial) it.followers else currentState.followers + currentState.followers,
+                            totalCount = it.totalFollowerCount,
+                            isLastPage = it.isLast
+                        )
+                    }
+                    nextCursor = it.nextCursor
+                }
+            }.onFailure { exception ->
+                _uiState.update {
+                    it.copy(isLoading = false, errorMessage = exception.message)
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/SearchPeopleViewModel.kt b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/SearchPeopleViewModel.kt
new file mode 100644
index 00000000..1430aeb0
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/feed/viewmodel/SearchPeopleViewModel.kt
@@ -0,0 +1,132 @@
+package com.texthip.thip.ui.feed.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.repository.RecentSearchRepository
+import com.texthip.thip.data.repository.UserRepository
+import com.texthip.thip.ui.feed.mock.MySubscriptionData
+import com.texthip.thip.ui.feed.mock.toMySubscriptionData
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+import kotlin.onSuccess
+
+data class RecentSearchUiItem(
+    val id: Long,
+    val term: String
+)
+data class SearchPeopleUiState(
+    val searchText: String = "",
+    val isSearched: Boolean = false, // 최종 검색 완료 여부
+    val searchResults: List<MySubscriptionData> = emptyList(),
+    val recentSearches: List<RecentSearchUiItem> = emptyList(),
+    val isLoading: Boolean = false,
+    val errorMessage: String? = null
+)
+
+@HiltViewModel
+class SearchPeopleViewModel @Inject constructor(
+    private val userRepository: UserRepository,
+    private val recentSearchRepository: RecentSearchRepository
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(SearchPeopleUiState())
+    val uiState = _uiState.asStateFlow()
+
+    private var searchJob: Job? = null
+
+    //최근 검색어
+    fun fetchRecentSearches() {
+        viewModelScope.launch {
+            recentSearchRepository.getRecentSearches("USER")
+                .onSuccess { response ->
+                    val searchItems = response?.recentSearchList?.map {
+                        RecentSearchUiItem(id = it.recentSearchId.toLong(), term = it.searchTerm)
+                    } ?: emptyList()
+                    _uiState.update { it.copy(recentSearches = searchItems) }
+                }
+                .onFailure { exception ->
+                    _uiState.update { it.copy(errorMessage = exception.message) }
+                }
+        }
+    }
+    //최근 검색어 삭제
+    fun removeRecentSearch(searchId: Long) {
+        viewModelScope.launch {
+            // UI에서 먼저 즉시 삭제
+            val currentSearches = _uiState.value.recentSearches
+            val updatedSearches = currentSearches.filterNot { it.id == searchId }
+            _uiState.update { it.copy(recentSearches = updatedSearches) }
+
+            // 서버에 삭제 요청
+            recentSearchRepository.deleteRecentSearch(searchId.toInt())
+                .onFailure {
+                    // 실패 시 UI를 원래대로 복구
+                    _uiState.update { it.copy(recentSearches = currentSearches) }
+                }
+        }
+    }
+
+    // 사용자가 텍스트를 입력할 때 호출
+    fun onSearchTextChanged(text: String) {
+        _uiState.update { it.copy(searchText = text, isSearched = false) }
+
+        // 이전 검색 요청이 있다면 취소
+        searchJob?.cancel()
+
+        if (text.isNotBlank()) {
+            searchJob = viewModelScope.launch {
+                delay(500L)
+                searchUsers(keyword = text, isFinalized = false)
+            }
+        } else {
+            // 입력창이 비워지면 검색 결과도 비움
+            _uiState.update { it.copy(searchResults = emptyList()) }
+        }
+    }
+
+    // 키보드의 '검색' 버튼이나 아이콘을 눌렀을 때 호출
+    fun onFinalSearch(query: String) {
+        searchJob?.cancel()
+        _uiState.update { it.copy(isSearched = true) }
+
+        if (query.isNotBlank()) {
+            addRecentSearch(query)
+            searchUsers(keyword = query, isFinalized = true)
+        } else {
+            _uiState.update { it.copy(searchResults = emptyList()) }
+        }
+    }
+
+    // 실제 API를 호출하는 private 함수
+    private fun searchUsers(keyword: String, isFinalized: Boolean) {
+        viewModelScope.launch {
+            _uiState.update { it.copy(isLoading = true) }
+            userRepository.searchUsers(keyword, isFinalized)
+                .onSuccess { response ->
+                    val userList =
+                        response?.userList?.map { it.toMySubscriptionData() } ?: emptyList()
+                    _uiState.update { it.copy(isLoading = false, searchResults = userList) }
+                }
+                .onFailure { exception ->
+                    _uiState.update { it.copy(isLoading = false, errorMessage = exception.message) }
+                }
+        }
+    }
+
+    // 최근 검색어 관련 로직
+    fun addRecentSearch(keyword: String) {
+        _uiState.update { currentState ->
+            val newItem = RecentSearchUiItem(id = -1L, term = keyword)
+            val updatedSearches = (listOf(newItem) + currentState.recentSearches)
+                .distinctBy { it.term }
+                .take(5)
+            currentState.copy(recentSearches = updatedSearches)
+        }
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/done/mock/MyRoomCardData.kt b/app/src/main/java/com/texthip/thip/ui/group/done/mock/MyRoomCardData.kt
new file mode 100644
index 00000000..c42f61be
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/done/mock/MyRoomCardData.kt
@@ -0,0 +1,39 @@
+package com.texthip.thip.ui.group.done.mock
+
+import com.texthip.thip.ui.group.myroom.mock.RoomType
+
+data class MyRoomCardData(
+    val roomId: Int,
+    val bookImageUrl: String?,
+    val roomName: String,
+    val recruitCount: Int,
+    val memberCount: Int,
+    val endDate: String,
+    val type: String
+)
+
+data class MyRoomsPaginationResult(
+    val data: List<MyRoomCardData>,
+    val nextCursor: String?,
+    val isLast: Boolean
+)
+
+// 타입 기반 모집 상태 확인 함수
+fun MyRoomCardData.isRecruitingByType(): Boolean {
+    return when (type) {
+        RoomType.RECRUITING.value -> true
+        RoomType.PLAYING_AND_RECRUITING.value -> false
+        RoomType.PLAYING.value -> false
+        RoomType.EXPIRED.value -> false
+        else -> false
+    }
+}
+
+fun MyRoomCardData.getEndDateInDays(): Int {
+    return when {
+        endDate.contains("일 뒤") -> {
+            endDate.replace("일 뒤", "").trim().toIntOrNull() ?: 0
+        }
+        else -> 0
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/done/screen/GroupDoneScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/done/screen/GroupDoneScreen.kt
new file mode 100644
index 00000000..25ff4f69
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/done/screen/GroupDoneScreen.kt
@@ -0,0 +1,196 @@
+package com.texthip.thip.ui.group.done.screen
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Text
+import androidx.compose.material3.pulltorefresh.PullToRefreshBox
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.texthip.thip.R
+import com.texthip.thip.data.model.rooms.response.MyRoomResponse
+import com.texthip.thip.ui.common.cards.CardItemRoom
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.group.done.viewmodel.GroupDoneUiState
+import com.texthip.thip.ui.group.done.viewmodel.GroupDoneViewModel
+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.utils.rooms.RoomUtils
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun GroupDoneScreen(
+    onNavigateBack: () -> Unit = {},
+    viewModel: GroupDoneViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsState()
+
+    GroupDoneContent(
+        uiState = uiState,
+        onNavigateBack = onNavigateBack,
+        onRefresh = { viewModel.refreshData() },
+        onLoadMore = { viewModel.loadMoreExpiredRooms() }
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun GroupDoneContent(
+    uiState: GroupDoneUiState,
+    onNavigateBack: () -> Unit = {},
+    onRefresh: () -> Unit = {},
+    onLoadMore: () -> Unit = {}
+) {
+    val listState = rememberLazyListState()
+
+    // 무한 스크롤을 위한 로직
+    val shouldLoadMore by remember(uiState.canLoadMore, uiState.isLoadingMore) {
+        derivedStateOf {
+            val lastVisibleIndex = listState.layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0
+            val totalItems = listState.layoutInfo.totalItemsCount
+            uiState.canLoadMore && !uiState.isLoadingMore && totalItems > 0 && lastVisibleIndex >= totalItems - 3
+        }
+    }
+
+    LaunchedEffect(shouldLoadMore) {
+        if (shouldLoadMore) {
+            onLoadMore()
+        }
+    }
+
+    Column(
+        Modifier.fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            title = stringResource(R.string.group_done_title),
+            onLeftClick = onNavigateBack,
+        )
+        
+        PullToRefreshBox(
+            isRefreshing = uiState.isLoading,
+            onRefresh = onRefresh,
+            modifier = Modifier.fillMaxSize()
+        ) {
+            Column(
+                Modifier
+                    .background(colors.Black)
+                    .fillMaxSize()
+                    .padding(horizontal = 20.dp)
+            ) {
+                LazyColumn(
+                    state = listState,
+                    verticalArrangement = Arrangement.spacedBy(20.dp),
+                    contentPadding = PaddingValues(bottom = 20.dp),
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .padding(top = 16.dp)
+                ) {
+                    item {
+                        Text(
+                            text = stringResource(R.string.group_done_user_comment, uiState.userName),
+                            color = colors.White,
+                            style = typography.menu_r400_s14_h24
+                        )
+                    }
+
+                    items(uiState.expiredRooms) { room ->
+                        CardItemRoom(
+                            title = room.roomName,
+                            imageUrl = room.bookImageUrl,
+                            participants = room.memberCount,
+                            maxParticipants = room.recruitCount, // 모집 인원 수 사용
+                            isRecruiting = RoomUtils.isRecruitingByType(room.type),
+                            isSecret = !room.isPublic,
+                            onClick = { /* 완료된 모임방은 클릭 불가 */ }
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@Preview
+@Composable
+fun GroupDoneScreenPreview() {
+    ThipTheme {
+        GroupDoneContent(
+            uiState = GroupDoneUiState(
+                userName = "김독서",
+                expiredRooms = listOf(
+                    MyRoomResponse(
+                        roomId = 1,
+                        roomName = "🌙 미드나이트 라이브러리 함께읽기",
+                        bookImageUrl = "https://picsum.photos/300/400?1",
+                        memberCount = 18,
+                        recruitCount = 20,
+                        endDate = "2025-01-31",
+                        type = "EXPIRED",
+                        isPublic = true
+                    ),
+                    MyRoomResponse(
+                        roomId = 2,
+                        roomName = "📚 현대문학 깊이읽기 모임",
+                        bookImageUrl = "https://picsum.photos/300/400?2",
+                        memberCount = 12,
+                        recruitCount = 15,
+                        endDate = "2024-12-28",
+                        type = "EXPIRED",
+                        isPublic = false
+                    ),
+                    MyRoomResponse(
+                        roomId = 3,
+                        roomName = "🔬 과학책으로 세상보기",
+                        bookImageUrl = "https://picsum.photos/300/400?3",
+                        memberCount = 25,
+                        recruitCount = 30,
+                        endDate = "2024-12-15",
+                        type = "EXPIRED",
+                        isPublic = true
+                    ),
+                    MyRoomResponse(
+                        roomId = 4,
+                        roomName = "✨ 철학 고전 탐구하기",
+                        bookImageUrl = "https://picsum.photos/300/400?4",
+                        memberCount = 10,
+                        recruitCount = 12,
+                        endDate = "2024-11-20",
+                        type = "EXPIRED",
+                        isPublic = true
+                    ),
+                    MyRoomResponse(
+                        roomId = 5,
+                        roomName = "🎨 예술과 문학의 만남",
+                        bookImageUrl = "https://picsum.photos/300/400?5",
+                        memberCount = 16,
+                        recruitCount = 20,
+                        endDate = "2024-10-31",
+                        type = "EXPIRED",
+                        isPublic = false
+                    )
+                ),
+                isLoading = false,
+                hasMore = true
+            )
+        )
+    }
+}
+
diff --git a/app/src/main/java/com/texthip/thip/ui/group/done/viewmodel/GroupDoneUiState.kt b/app/src/main/java/com/texthip/thip/ui/group/done/viewmodel/GroupDoneUiState.kt
new file mode 100644
index 00000000..df299ec1
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/done/viewmodel/GroupDoneUiState.kt
@@ -0,0 +1,15 @@
+package com.texthip.thip.ui.group.done.viewmodel
+
+import com.texthip.thip.data.model.rooms.response.MyRoomResponse
+
+data class GroupDoneUiState(
+    val expiredRooms: List<MyRoomResponse> = emptyList(),
+    val isLoading: Boolean = false,
+    val isLoadingMore: Boolean = false,
+    val hasMore: Boolean = true,
+    val userName: String = "",
+    val error: String? = null
+) {
+    val hasContent: Boolean get() = expiredRooms.isNotEmpty()
+    val canLoadMore: Boolean get() = !isLoading && !isLoadingMore && hasMore
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/done/viewmodel/GroupDoneViewModel.kt b/app/src/main/java/com/texthip/thip/ui/group/done/viewmodel/GroupDoneViewModel.kt
new file mode 100644
index 00000000..f6cc44ac
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/done/viewmodel/GroupDoneViewModel.kt
@@ -0,0 +1,109 @@
+package com.texthip.thip.ui.group.done.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.repository.RoomsRepository
+import com.texthip.thip.ui.group.myroom.mock.RoomType
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class GroupDoneViewModel @Inject constructor(
+    private val repository: RoomsRepository
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(GroupDoneUiState())
+    val uiState: StateFlow<GroupDoneUiState> = _uiState.asStateFlow()
+    
+    private var nextCursor: String? = null
+    private var isLastPage = false
+    private var isLoadingMore = false
+    private var isInitialLoading = false
+    
+    private fun updateState(update: (GroupDoneUiState) -> GroupDoneUiState) {
+        _uiState.value = update(_uiState.value)
+    }
+
+    init {
+        loadInitialData()
+    }
+
+    private fun loadInitialData() {
+        loadUserName()
+        loadExpiredRooms(reset = true)
+    }
+    
+    private fun loadUserName() {
+        viewModelScope.launch {
+            repository.getUserName()
+                .onSuccess { name ->
+                    updateState { it.copy(userName = name) }
+                }
+        }
+    }
+
+    fun loadExpiredRooms(reset: Boolean = false) {
+        // 중복 호출 방지
+        if (reset) {
+            if (isInitialLoading) return
+            isInitialLoading = true
+        } else {
+            if (isLoadingMore || isLastPage) return
+            isLoadingMore = true
+        }
+        
+        viewModelScope.launch {
+            try {
+                if (reset) {
+                    updateState { it.copy(isLoading = true, expiredRooms = emptyList(), hasMore = true) }
+                    nextCursor = null
+                    isLastPage = false
+                }
+
+                repository.getMyRoomsByType(RoomType.EXPIRED.value, nextCursor)
+                    .onSuccess { myRoomListResponse ->
+                        myRoomListResponse?.let { response ->
+                            val currentList = if (reset) emptyList() else uiState.value.expiredRooms
+                            updateState { 
+                                it.copy(
+                                    expiredRooms = currentList + response.roomList,
+                                    error = null,
+                                    isLoadingMore = false,
+                                    hasMore = !response.isLast
+                                )
+                            }
+                            nextCursor = response.nextCursor
+                            isLastPage = response.isLast
+                        } ?: run {
+                            // null 응답 시 더 이상 로드할 수 없음을 명시
+                            updateState { it.copy(hasMore = false, isLoadingMore = false) }
+                            isLastPage = true
+                        }
+                    }
+                    .onFailure { exception ->
+                        updateState { it.copy(error = exception.message) }
+                    }
+            } finally {
+                if (reset) {
+                    updateState { it.copy(isLoading = false) }
+                    isInitialLoading = false
+                } else {
+                    updateState { it.copy(isLoadingMore = false) }
+                    isLoadingMore = false
+                }
+            }
+        }
+    }
+    
+    fun loadMoreExpiredRooms() {
+        loadExpiredRooms(reset = false)
+    }
+    
+    fun refreshData() {
+        loadExpiredRooms(reset = true)
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupBookListWithScrollbar.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupBookListWithScrollbar.kt
new file mode 100644
index 00000000..bcf37098
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupBookListWithScrollbar.kt
@@ -0,0 +1,106 @@
+package com.texthip.thip.ui.group.makeroom.component
+
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.ui.common.cards.CardBookSearch
+import com.texthip.thip.ui.common.modal.drawVerticalScrollbar
+import com.texthip.thip.ui.group.makeroom.mock.BookData
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+
+
+@Composable
+fun GroupBookListWithScrollbar(
+    books: List<BookData>,
+    onBookClick: (BookData) -> Unit,
+    isLoadingMore: Boolean = false,
+    hasMore: Boolean = true,
+    onLoadMore: () -> Unit = {}
+) {
+    val listState = rememberLazyListState()
+    
+    val shouldLoadMore = remember {
+        derivedStateOf {
+            val layoutInfo = listState.layoutInfo
+            val totalItemsNumber = layoutInfo.totalItemsCount
+            val lastVisibleItemIndex = (layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0) + 1
+
+            totalItemsNumber > 0 && lastVisibleItemIndex >= (totalItemsNumber - 3)
+        }
+    }
+
+    LaunchedEffect(shouldLoadMore.value, hasMore, isLoadingMore) {
+        if (shouldLoadMore.value && hasMore && !isLoadingMore && books.isNotEmpty()) {
+            onLoadMore()
+        }
+    }
+
+    LazyColumn(
+        state = listState,
+        modifier = Modifier
+            .fillMaxWidth()
+            .drawVerticalScrollbar(rememberScrollState())
+    ) {
+        items(books) { book ->
+            CardBookSearch(
+                title = book.title,
+                imageUrl = book.imageUrl,
+                onClick = { onBookClick(book) }
+            )
+            Spacer(modifier = Modifier.height(12.dp))
+            Spacer(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(end = 6.dp)
+                    .height(1.dp)
+                    .background(color = colors.Grey02)
+            )
+            Spacer(modifier = Modifier.height(12.dp))
+        }
+        
+        if (isLoadingMore) {
+            item {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(16.dp),
+                    contentAlignment = Alignment.Center
+                ) {
+                    CircularProgressIndicator()
+                }
+            }
+        }
+    }
+}
+
+@Preview()
+@Composable
+fun PreviewBookListWithScrollbar() {
+    ThipTheme {
+        Column {
+            GroupBookListWithScrollbar(
+                books = List(20) { BookData("Book $it", null) },
+                onBookClick = {}
+            )
+        }
+    }
+}
+
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupBookSearchBottomSheet.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupBookSearchBottomSheet.kt
new file mode 100644
index 00000000..730951e9
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupBookSearchBottomSheet.kt
@@ -0,0 +1,195 @@
+package com.texthip.thip.ui.group.makeroom.component
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.CircularProgressIndicator
+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.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+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.bottomsheet.CustomBottomSheet
+import com.texthip.thip.ui.common.forms.SearchBookTextField
+import com.texthip.thip.ui.common.header.HeaderMenuBarTab
+import com.texthip.thip.ui.group.makeroom.mock.BookData
+import com.texthip.thip.ui.group.makeroom.mock.dummyGroupBooks
+import com.texthip.thip.ui.group.makeroom.mock.dummySavedBooks
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.utils.rooms.advancedImePadding
+
+@Composable
+fun GroupBookSearchBottomSheet(
+    onDismiss: () -> Unit,
+    onBookSelect: (BookData) -> Unit,
+    onRequestBook: () -> Unit,
+    savedBooks: List<BookData>,
+    groupBooks: List<BookData>,
+    searchResults: List<BookData> = emptyList(),
+    isLoading: Boolean = false,
+    isSearching: Boolean = false,
+    isLoadingMoreSaved: Boolean = false,
+    isLoadingMoreGroup: Boolean = false,
+    isLoadingMoreSearch: Boolean = false,
+    hasMoreSaved: Boolean = true,
+    hasMoreGroup: Boolean = true,
+    hasMoreSearch: Boolean = true,
+    onSearch: (String) -> Unit = {},
+    onLoadMoreSaved: () -> Unit = {},
+    onLoadMoreGroup: () -> Unit = {},
+    onLoadMoreSearch: () -> Unit = {}
+) {
+    var selectedTab by rememberSaveable { mutableIntStateOf(0) }
+    val tabs = listOf(
+        stringResource(R.string.group_saved_book), stringResource(R.string.group_book)
+    )
+
+    var searchText by rememberSaveable { mutableStateOf("") }
+
+    val currentBooks = if (selectedTab == 0) savedBooks else groupBooks
+
+    // 검색어가 있으면 검색 결과 사용, 없으면 탭별 도서 목록 사용
+    val displayBooks = if (searchText.isNotEmpty()) {
+        searchResults
+    } else {
+        currentBooks
+    }
+
+    val showNoSearchResultsError = searchText.isNotEmpty() && displayBooks.isEmpty() && !isSearching
+
+    CustomBottomSheet(
+        onDismiss = onDismiss
+    ) {
+        Column(
+            Modifier
+                .fillMaxWidth()
+                .fillMaxHeight(0.8f)
+                .advancedImePadding()
+        ) {
+            Column(Modifier.padding(start = 20.dp, end = 20.dp, top = 20.dp)) {
+                SearchBookTextField(
+                    hint = stringResource(R.string.group_book_search_hint),
+                    text = searchText,
+                    onValueChange = {
+                        searchText = it
+                        onSearch(it)
+                    },
+                    onSearch = { onSearch(searchText) },
+                )
+                Spacer(Modifier.height(20.dp))
+            }
+
+            if (showNoSearchResultsError) {
+                EmptyBookSheetContent(onRequestBook)
+            } else {
+                // 검색어가 없을 때만 탭 표시
+                if (searchText.isEmpty()) {
+                    HeaderMenuBarTab(
+                        titles = tabs,
+                        selectedTabIndex = selectedTab,
+                        onTabSelected = { selectedTab = it },
+                        indicatorColor = ThipTheme.colors.White,
+                        modifier = Modifier.fillMaxWidth()
+                    )
+                    Spacer(Modifier.height(20.dp))
+                }
+
+                when {
+                    isLoading -> {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .align(Alignment.CenterHorizontally),
+                            contentAlignment = Alignment.Center
+                        ) {
+                            CircularProgressIndicator()
+                        }
+                    }
+
+                    else -> {
+                        Column(Modifier.padding(horizontal = 20.dp)) {
+                            when {
+                                searchText.isNotEmpty() -> {
+                                    GroupBookListWithScrollbar(
+                                        books = displayBooks,
+                                        onBookClick = onBookSelect,
+                                        isLoadingMore = isLoadingMoreSearch,
+                                        hasMore = hasMoreSearch,
+                                        onLoadMore = onLoadMoreSearch
+                                    )
+                                }
+                                selectedTab == 0 -> {
+                                    GroupBookListWithScrollbar(
+                                        books = displayBooks,
+                                        onBookClick = onBookSelect,
+                                        isLoadingMore = isLoadingMoreSaved,
+                                        hasMore = hasMoreSaved,
+                                        onLoadMore = onLoadMoreSaved
+                                    )
+                                }
+                                else -> {
+                                    GroupBookListWithScrollbar(
+                                        books = displayBooks,
+                                        onBookClick = onBookSelect,
+                                        isLoadingMore = isLoadingMoreGroup,
+                                        hasMore = hasMoreGroup,
+                                        onLoadMore = onLoadMoreGroup
+                                    )
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewBookSearchBottomSheet_HasBooks() {
+    ThipTheme {
+        var showSheet by remember { mutableStateOf(true) }
+        if (showSheet) {
+            GroupBookSearchBottomSheet(
+                onDismiss = { showSheet = false },
+                onBookSelect = {},
+                onRequestBook = {},
+                savedBooks = dummySavedBooks,
+                groupBooks = dummyGroupBooks,
+                isLoading = false
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewBookSearchBottomSheet_Empty() {
+    ThipTheme {
+        var showSheet by remember { mutableStateOf(true) }
+        if (showSheet) {
+            GroupBookSearchBottomSheet(
+                onDismiss = { showSheet = false },
+                onBookSelect = {},
+                onRequestBook = {},
+                savedBooks = emptyList(),
+                groupBooks = emptyList(),
+                isLoading = false
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupDatePicker.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupDatePicker.kt
new file mode 100644
index 00000000..dae96fa1
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupDatePicker.kt
@@ -0,0 +1,172 @@
+package com.texthip.thip.ui.group.makeroom.component
+
+import androidx.compose.foundation.background
+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.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+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.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+import java.time.LocalDate
+
+@Composable
+fun GroupDatePicker(
+    modifier: Modifier = Modifier,
+    selectedDate: LocalDate,
+    minDate: LocalDate,
+    maxDate: LocalDate,
+    onDateSelected: (LocalDate) -> Unit
+) {
+    // 선택된 날짜에서 년/월/일 추출
+    val year = selectedDate.year
+    val month = selectedDate.monthValue
+    val day = selectedDate.dayOfMonth
+
+    // 유효한 범위 계산 - 날짜 변경 시 안정성을 위해 remember 사용
+    val years = remember(minDate.year, maxDate.year) { 
+        (minDate.year..maxDate.year).toList() 
+    }
+    val months = remember { (1..12).toList() }
+    val days = remember(year, month) { 
+        (1..LocalDate.of(year, month, 1).lengthOfMonth()).toList() 
+    }
+
+    Row(
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            GroupWheelPicker(
+                modifier = modifier.width(48.dp),
+                items = years,
+                selectedItem = year,
+                onItemSelected = { newYear ->
+                    val newDate = try {
+                        LocalDate.of(newYear, month, day)
+                    } catch (e: Exception) {
+                        LocalDate.of(newYear, month, 1)
+                    }
+                    onDateSelected(newDate)
+                },
+                displayText = { it.toString() }
+            )
+            Spacer(modifier = Modifier.width(2.dp))
+            Text(
+                modifier = Modifier.padding(end = 8.dp),
+                text = stringResource(R.string.group_year),
+                style = typography.info_r400_s12,
+                color = colors.White
+            )
+        }
+
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            GroupWheelPicker(
+                modifier = Modifier.width(32.dp),
+                items = months,
+                selectedItem = month,
+                onItemSelected = { newMonth ->
+                    val newDate = try {
+                        LocalDate.of(year, newMonth, day)
+                    } catch (e: Exception) {
+                        LocalDate.of(year, newMonth, 1)
+                    }
+                    onDateSelected(newDate)
+                },
+                displayText = { it.toString() }
+            )
+            Spacer(modifier = Modifier.width(2.dp))
+            Text(
+                modifier = Modifier.padding(end = 8.dp),
+                text = stringResource(R.string.group_month),
+                style = typography.info_r400_s12,
+                color = colors.White
+            )
+        }
+
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            GroupWheelPicker(
+                modifier = Modifier.width(32.dp),
+                items = days,
+                selectedItem = day.coerceAtMost(days.max()),
+                onItemSelected = { newDay ->
+                    val newDate = LocalDate.of(year, month, newDay)
+                    onDateSelected(newDate)
+                },
+                displayText = { it.toString() }
+            )
+            Spacer(modifier = Modifier.width(2.dp))
+            Text(
+                text = stringResource(R.string.group_day),
+                style = typography.info_r400_s12,
+                color = colors.White
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun DatePickerGroupPreview() {
+    ThipTheme {
+        val today = LocalDate.now()
+        val tomorrow = today.plusDays(1)
+        val maxDate = today.plusMonths(12)
+
+        var startDate by remember { mutableStateOf(today) }
+        var endDate by remember { mutableStateOf(tomorrow) }
+
+        Box(
+            modifier = Modifier
+                .background(colors.Black)
+                .padding(16.dp)
+        ) {
+            Column(
+                verticalArrangement = Arrangement.spacedBy(24.dp)
+            ) {
+                // 시작 날짜
+                Text("시작 날짜", color = colors.White)
+                GroupDatePicker(
+                    selectedDate = startDate,
+                    minDate = today,
+                    maxDate = maxDate,
+                    onDateSelected = { newDate ->
+                        startDate = newDate
+                    }
+                )
+
+                // 끝 날짜
+                Text("끝 날짜", color = colors.White)
+                GroupDatePicker(
+                    selectedDate = endDate,
+                    minDate = today,
+                    maxDate = maxDate,
+                    onDateSelected = { newDate ->
+                        endDate = newDate
+                    }
+                )
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupEmptyBookSheetContent.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupEmptyBookSheetContent.kt
new file mode 100644
index 00000000..835fe44a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupEmptyBookSheetContent.kt
@@ -0,0 +1,65 @@
+package com.texthip.thip.ui.group.makeroom.component
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+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.buttons.ActionMediumButton
+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 EmptyBookSheetContent(
+    onRequestBook: () -> Unit
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 20.dp, bottom = 30.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(
+            text = stringResource(R.string.group_register_book_comment_1),
+            color = colors.Grey,
+            style = typography.copy_m500_s14_h20
+        )
+
+        Text(
+            text = stringResource(R.string.group_register_book_comment_2),
+            color = colors.Grey,
+            style = typography.copy_m500_s14_h20
+        )
+        Spacer(Modifier.height(24.dp))
+
+        ActionMediumButton(
+            text = stringResource(R.string.group_register_book),
+            contentColor = colors.White,
+            backgroundColor = colors.Purple,
+            modifier = Modifier
+                .width(97.dp)
+                .height(44.dp),
+            onClick = { onRequestBook() },
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun EmptyBookSheetContentPreview() {
+    ThipTheme {
+        EmptyBookSheetContent(
+            onRequestBook = {}
+        )
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupInputField.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupInputField.kt
new file mode 100644
index 00000000..2e4a589e
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupInputField.kt
@@ -0,0 +1,104 @@
+package com.texthip.thip.ui.group.makeroom.component
+
+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.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.SolidColor
+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.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun GroupInputField(
+    title: String,
+    hint: String,
+    value: String,
+    onValueChange: (String) -> Unit,
+    maxLength: Int = 75
+) {
+    val isOverflow = value.length >= maxLength
+
+    Column(
+        Modifier.fillMaxWidth()
+    ) {
+        Text(
+            text = title,
+            style = typography.smalltitle_sb600_s18_h24,
+            color = colors.White
+        )
+
+        Box(modifier = Modifier.fillMaxWidth()) {
+            BasicTextField(
+                value = value,
+                onValueChange = { new ->
+                    if (new.length <= maxLength) onValueChange(new)
+                },
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 12.dp, bottom = 12.dp),
+                textStyle = typography.menu_r400_s14_h24.copy(color = colors.White),
+                cursorBrush = SolidColor(colors.NeonGreen),
+                decorationBox = { innerTextField ->
+                    Box(
+                        Modifier.fillMaxWidth()
+                    ) {
+                        if (value.isEmpty()) {
+                            Text(
+                                hint,
+                                style = typography.menu_r400_s14_h24,
+                                color = colors.Grey02
+                            )
+                        }
+                        innerTextField()
+                    }
+                }
+            )
+        }
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.End
+        ) {
+            Text(
+                text = stringResource(R.string.group_input_count, value.length, maxLength),
+                style = typography.info_r400_s12,
+                color = if (isOverflow) colors.Red else colors.NeonGreen
+            )
+        }
+    }
+}
+
+
+@Preview()
+@Composable
+fun PreviewRoomTitleInputField() {
+    var text by remember { mutableStateOf("") }
+
+    ThipTheme {
+        Column(
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            GroupInputField(
+                title = "방 제목",
+                hint = "방 제목을 입력해주세요",
+                value = text,
+                onValueChange = { text = it },
+                maxLength = 15
+            )
+        }
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupMemberLimitPicker.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupMemberLimitPicker.kt
new file mode 100644
index 00000000..7b6437c8
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupMemberLimitPicker.kt
@@ -0,0 +1,82 @@
+package com.texthip.thip.ui.group.makeroom.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+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 GroupMemberLimitPicker(
+    modifier: Modifier = Modifier,
+    selectedCount: Int = 30,
+    onCountSelected: (Int) -> Unit = { }
+) {
+    val memberCounts = remember { (1..30).toList() }
+
+    Column(
+        modifier = modifier.fillMaxWidth()
+    ) {
+        // 제목
+        Text(
+            text = stringResource(R.string.group_room_member_limit_title),
+            style = typography.smalltitle_sb600_s18_h24,
+            color = colors.White
+        )
+
+        // 인원 선택기
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 12.dp),
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            // 숫자 선택기
+            GroupWheelPicker(
+                modifier = Modifier.width(32.dp),
+                items = memberCounts,
+                selectedItem = selectedCount,
+                onItemSelected = onCountSelected,
+                displayText = { it.toString() }
+            )
+
+            // 단위 텍스트
+            Text(
+                text = stringResource(R.string.group_room_limit),
+                style = typography.info_r400_s12,
+                color = colors.White,
+                modifier = Modifier.padding(start = 8.dp)
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun MemberLimitPickerPreview() {
+    ThipTheme {
+        var selectedCount by remember { mutableIntStateOf(30) }
+
+        GroupMemberLimitPicker(
+            selectedCount = selectedCount,
+            onCountSelected = { selectedCount = it }
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupRoomDurationPicker.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupRoomDurationPicker.kt
new file mode 100644
index 00000000..ff2b2376
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupRoomDurationPicker.kt
@@ -0,0 +1,198 @@
+package com.texthip.thip.ui.group.makeroom.component
+
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+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.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+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
+import java.time.LocalDate
+import java.time.temporal.ChronoUnit
+
+@Composable
+fun GroupRoomDurationPicker(
+    modifier: Modifier = Modifier,
+    onDateRangeSelected: (LocalDate, LocalDate) -> Unit = { _, _ -> }
+) {
+    val today = LocalDate.now()
+    val tomorrow = today.plusDays(1)
+    val maxDate = today.plusMonths(12)
+    var isInitialized by rememberSaveable { mutableStateOf(false) }
+
+    var startDate by rememberSaveable { mutableStateOf(tomorrow) }
+    var endDate by rememberSaveable { mutableStateOf(tomorrow.plusDays(1)) }
+    var isPickerTouched by rememberSaveable { mutableStateOf(false) }
+
+    // 첫 시작 시에만 모든 날짜를 내일 기준으로 초기화
+    LaunchedEffect(Unit) {
+        if (!isInitialized) {
+            startDate = tomorrow
+            endDate = tomorrow.plusDays(1)
+            isInitialized = true
+        }
+    }
+
+    // 날짜 범위 계산
+    val daysBetween = ChronoUnit.DAYS.between(startDate, endDate)
+    val isOverLimit = daysBetween > 91
+
+    // 날짜 선택 콜백
+    LaunchedEffect(startDate, endDate) {
+        if (endDate.isAfter(startDate)) {
+            onDateRangeSelected(startDate, endDate)
+        }
+    }
+
+    // 날짜 유효성 검사 및 자동 조정
+    LaunchedEffect(startDate) {
+        val adjustedStartDate = when {
+            startDate.isBefore(tomorrow) -> tomorrow
+            startDate.isAfter(maxDate) -> maxDate
+            else -> startDate
+        }
+
+        if (adjustedStartDate != startDate) {
+            startDate = adjustedStartDate
+        }
+
+        // 끝 날짜가 시작 날짜보다 빠르면 조정
+        if (endDate.isBefore(startDate.plusDays(1))) {
+            endDate = startDate.plusDays(1)
+        }
+    }
+
+    LaunchedEffect(endDate) {
+        val adjustedEndDate = when {
+            endDate.isAfter(maxDate) -> maxDate
+            endDate.isBefore(startDate.plusDays(1)) -> startDate.plusDays(1)
+            else -> endDate
+        }
+
+        if (adjustedEndDate != endDate) {
+            endDate = adjustedEndDate
+        }
+    }
+
+    Column(modifier = modifier.fillMaxWidth()) {
+        Text(
+            text = stringResource(R.string.group_room_duration_title),
+            style = typography.smalltitle_sb600_s18_h24,
+            color = colors.White
+        )
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 12.dp),
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            // 시작 날짜 Picker
+            GroupDatePicker(
+                selectedDate = startDate,
+                minDate = tomorrow,
+                maxDate = maxDate,
+                onDateSelected = { newDate ->
+                    startDate = newDate
+                },
+                modifier = Modifier
+                    .pointerInput(Unit) {
+                        detectTapGestures(
+                            onPress = { isPickerTouched = true }
+                        )
+                    }
+            )
+
+            // 구분자
+            Text(
+                text = "~",
+                style = typography.info_r400_s12,
+                color = colors.White,
+                modifier = Modifier.padding(horizontal = 4.dp)
+            )
+
+            // 끝 날짜 Picker
+            GroupDatePicker(
+                selectedDate = endDate,
+                minDate = tomorrow,
+                maxDate = maxDate,
+                onDateSelected = { newDate ->
+                    endDate = newDate
+                },
+                modifier = Modifier
+                    .pointerInput(Unit) {
+                        detectTapGestures(
+                            onPress = { isPickerTouched = true }
+                        )
+                    }
+            )
+        }
+
+        // 안내/에러 메시지
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.End
+        ) {
+            when {
+                isOverLimit -> {
+                    Text(
+                        text = stringResource(R.string.group_room_duration_comment),
+                        style = typography.info_r400_s12,
+                        color = colors.Red,
+                        textAlign = TextAlign.End,
+                        modifier = Modifier.padding(top = 12.dp)
+                    )
+                }
+                !isPickerTouched -> {
+                    Text(
+                        text = stringResource(R.string.group_room_duration_initial_comment),
+                        style = typography.info_r400_s12,
+                        color = colors.NeonGreen,
+                        textAlign = TextAlign.End,
+                        modifier = Modifier.padding(top = 12.dp)
+                    )
+                }
+                else -> {
+                    Text(
+                        text = stringResource(
+                            R.string.group_room_duration_active_comment,
+                            startDate.monthValue,
+                            startDate.dayOfMonth
+                        ),
+                        style = typography.info_r400_s12,
+                        color = colors.NeonGreen,
+                        textAlign = TextAlign.End,
+                        modifier = Modifier.padding(top = 12.dp)
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun MeetingDurationPickerPreview() {
+    ThipTheme {
+        GroupRoomDurationPicker { startDate, endDate ->
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupSelectBook.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupSelectBook.kt
new file mode 100644
index 00000000..8e914a88
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupSelectBook.kt
@@ -0,0 +1,132 @@
+package com.texthip.thip.ui.group.makeroom.component
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+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.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.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.cards.CardInputBook
+import com.texthip.thip.ui.group.makeroom.mock.BookData
+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 GroupSelectBook(
+    selectedBook: BookData?,
+    onChangeBookClick: () -> Unit,
+    onSelectBookClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    isBookPreselected: Boolean = false
+) {
+    Column(
+        modifier = modifier.fillMaxWidth(),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(
+            text = stringResource(R.string.group_select_book_title),
+            style = typography.smalltitle_sb600_s18_h24,
+            color = colors.White,
+            modifier = Modifier.align(Alignment.Start)
+        )
+        Spacer(modifier = Modifier.height(20.dp))
+
+        if (selectedBook == null) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.Center,
+                modifier = Modifier
+                    .clickable { onSelectBookClick() }
+                    .fillMaxWidth()
+                    .height(44.dp)
+                    .border(
+                        BorderStroke(1.dp, colors.Grey02),
+                        shape = RoundedCornerShape(12.dp)
+                    )
+                    .padding(vertical = 10.dp)
+            ) {
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_search),
+                    contentDescription = "검색 아이콘",
+                    tint = colors.Grey01
+                )
+                Spacer(modifier = Modifier.width(8.dp))
+                Text(
+                    text = stringResource(R.string.group_book_search),
+                    style = typography.menu_m500_s16_h24,
+                    color = colors.Grey
+                )
+            }
+        } else {
+            CardInputBook(
+                title = selectedBook.title,
+                author = selectedBook.author ?: "",
+                imageUrl = selectedBook.imageUrl,
+                imageRes = R.drawable.img_book_cover_sample,
+                showChangeButton = !isBookPreselected, // 사전 선택된 책인 경우 변경 버튼 숨김
+                onChangeClick = onChangeBookClick
+            )
+        }
+    }
+}
+
+
+private val dummyBook = BookData(
+    title = "호르몬 체인지",
+    imageUrl = null,
+    author = "최정화"
+)
+
+@Preview(showBackground = true)
+@Composable
+fun GroupSelectBookPreview_Unselected() {
+    ThipTheme {
+        GroupSelectBook(
+            selectedBook = null,
+            onChangeBookClick = {},
+            onSelectBookClick = {}
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun GroupSelectBookPreview_Selected() {
+    ThipTheme {
+        GroupSelectBook(
+            selectedBook = dummyBook,
+            onChangeBookClick = {},
+            onSelectBookClick = {}
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun GroupSelectBookPreview_Preselected() {
+    ThipTheme {
+        GroupSelectBook(
+            selectedBook = dummyBook,
+            onChangeBookClick = {},
+            onSelectBookClick = {},
+            isBookPreselected = true
+        )
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupWheelPicker.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupWheelPicker.kt
new file mode 100644
index 00000000..fdf71339
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/GroupWheelPicker.kt
@@ -0,0 +1,296 @@
+package com.texthip.thip.ui.group.makeroom.component
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.exponentialDecay
+import androidx.compose.animation.core.spring
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectDragGestures
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.ui.group.makeroom.util.WheelPickerUtils
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+import kotlinx.coroutines.launch
+import kotlin.math.abs
+import kotlin.math.roundToInt
+
+@Composable
+fun <T> GroupWheelPicker(
+    modifier: Modifier = Modifier,
+    items: List<T>,
+    selectedItem: T,
+    onItemSelected: (T) -> Unit,
+    displayText: (T) -> String = { it.toString() },
+    selectedBackgroundColor: Color = colors.DarkGrey,
+    itemHeight: Int = 20,
+    isCircular: Boolean = true
+) {
+    if (items.isEmpty()) return
+
+    val isScrollEnabled = items.size > 1
+    val circular = isCircular && items.size > 2
+
+    val selectedIndex = remember(items, selectedItem) { items.indexOf(selectedItem) }
+    val animatableOffset = remember { Animatable(0f) }
+    val coroutineScope = rememberCoroutineScope()
+    var isDragging by remember { mutableStateOf(false) }
+    var velocity by remember { mutableFloatStateOf(0f) }
+
+    val density = LocalDensity.current
+    val itemHeightPx = remember(density, itemHeight) { with(density) { itemHeight.dp.toPx() } }
+    val spacingPx = remember(density) { with(density) { 9.dp.toPx() } }
+    val itemSpacing = remember(itemHeightPx, spacingPx) { itemHeightPx + spacingPx }
+
+    val getCircularIndex = remember(items.size) { { index: Int ->
+        WheelPickerUtils.getCircularIndex(index, items.size)
+    } }
+
+    val normalizeOffset = remember(itemSpacing, items.size, circular) { { offset: Float ->
+        WheelPickerUtils.normalizeOffset(offset, itemSpacing, items.size, circular)
+    } }
+
+    val offsetToIndex = remember(itemSpacing, items.size, circular) { { offset: Float ->
+        WheelPickerUtils.offsetToIndex(offset, itemSpacing, items.size, circular)
+    } }
+
+    // 선택 아이템이 바뀌면 중앙에 오도록 offset 이동
+    LaunchedEffect(selectedItem) {
+        if (!isDragging && isScrollEnabled) {
+            val targetOffset = -selectedIndex * itemSpacing
+            animatableOffset.animateTo(
+                if (circular) normalizeOffset(targetOffset) else targetOffset,
+                animationSpec = spring()
+            )
+        }
+    }
+
+    // 드래그 상태가 변경될 때만 선택 아이템 업데이트
+    LaunchedEffect(isDragging) {
+        if (!isDragging && isScrollEnabled) {
+            // 드래그가 끝났을 때만 최종 값 업데이트
+            val newSelectedIndex = offsetToIndex(animatableOffset.value)
+            if (newSelectedIndex in items.indices && items[newSelectedIndex] != selectedItem) {
+                onItemSelected(items[newSelectedIndex])
+            }
+        }
+    }
+
+    val containerHeight = remember(itemHeight) { (itemHeight * 3 + 36).dp }
+    val textStyle = typography.info_r400_s12
+    
+    Box(
+        modifier = modifier.height(containerHeight)
+    ) {
+        // 중앙 고정 박스
+        Box(
+            modifier = Modifier
+                .align(Alignment.Center)
+                .background(
+                    selectedBackgroundColor,
+                    RoundedCornerShape(4.dp)
+                )
+                .padding(horizontal = 8.dp, vertical = 9.dp)
+        ) {
+            Text(
+                text = displayText(selectedItem),
+                style = textStyle,
+                color = Color.Transparent,
+                textAlign = TextAlign.Center
+            )
+        }
+
+        // 아이템들
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .then(
+                    if (isScrollEnabled) {
+                        Modifier.pointerInput(Unit) {
+                            detectDragGestures(
+                                onDragStart = {
+                                    isDragging = true
+                                    velocity = 0f
+                                },
+                                onDragEnd = {
+                                    isDragging = false
+                                    coroutineScope.launch {
+                                        // 관성 스크롤
+                                        if (abs(velocity) > 100f) {
+                                            animatableOffset.animateDecay(
+                                                initialVelocity = velocity,
+                                                animationSpec = exponentialDecay(
+                                                    frictionMultiplier = 0.9f,
+                                                    absVelocityThreshold = 0.1f
+                                                )
+                                            )
+                                        }
+
+                                        // offset 스냅
+                                        val currOffset = animatableOffset.value
+                                        val normalized =
+                                            if (circular) normalizeOffset(currOffset) else currOffset
+                                        val snapIndex = (-normalized / itemSpacing).roundToInt()
+                                        val snapOffset = -snapIndex * itemSpacing
+                                        animatableOffset.animateTo(
+                                            if (circular) normalizeOffset(snapOffset) else snapOffset,
+                                            animationSpec = spring(
+                                                dampingRatio = 0.8f,
+                                                stiffness = 400f
+                                            )
+                                        )
+                                    }
+                                }
+                            ) { _, dragAmount ->
+                                velocity = dragAmount.y
+                                coroutineScope.launch {
+                                    val newOffset = animatableOffset.value + dragAmount.y
+                                    if (circular) {
+                                        animatableOffset.snapTo(normalizeOffset(newOffset))
+                                    } else {
+                                        val maxOffset = itemSpacing + spacingPx
+                                        val minOffset =
+                                            -(items.size - 1) * itemSpacing - itemSpacing - spacingPx
+                                        animatableOffset.snapTo(
+                                            newOffset.coerceIn(
+                                                minOffset,
+                                                maxOffset
+                                            )
+                                        )
+                                    }
+                                }
+                            }
+                        }
+                    } else {
+                        Modifier
+                    }
+                )
+        ) {
+            val currOffset by remember {
+                derivedStateOf {
+                    if (circular && isScrollEnabled) normalizeOffset(animatableOffset.value) else animatableOffset.value
+                }
+            }
+            val centerIndex by remember {
+                derivedStateOf {
+                    if (isScrollEnabled) (-currOffset / itemSpacing).roundToInt() else 0
+                }
+            }
+
+            // 중앙 + 위 아래 한 개만 보이도록!
+            val visibleRange = remember(isScrollEnabled) { if (isScrollEnabled) -1..1 else 0..0 }
+
+            visibleRange.forEach { relIdx ->
+                val displayIndex = centerIndex + relIdx
+                val actualIndex =
+                    if (circular && isScrollEnabled) getCircularIndex(displayIndex) else {
+                        if (displayIndex in 0 until items.size) displayIndex else return@forEach
+                    }
+                val item = items[actualIndex]
+                val itemOffset =
+                    if (isScrollEnabled) currOffset + (displayIndex * itemSpacing) else 0f
+                val itemY = itemOffset + itemSpacing + spacingPx
+
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(itemHeight.dp)
+                        .offset { IntOffset(0, itemY.roundToInt()) },
+                    contentAlignment = Alignment.Center
+                ) {
+                    Text(
+                        text = displayText(item),
+                        style = textStyle,
+                        color = colors.White,
+                        textAlign = TextAlign.Center
+                    )
+                }
+            }
+        }
+
+        // 그라데이션 오버레이 (아이템이 여러 개일 때만 표시)
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(
+                    brush = Brush.verticalGradient(
+                        colors = listOf(
+                            colors.Black.copy(alpha = 0.8f),
+                            Color.Transparent,
+                            Color.Transparent,
+                            colors.Black.copy(alpha = 0.8f)
+                        ),
+                        startY = 0f,
+                        endY = Float.POSITIVE_INFINITY
+                    )
+                )
+        )
+    }
+}
+
+
+@Preview(showBackground = true)
+@Composable
+fun WheelPickerPreview() {
+    var selectedYear by remember { mutableStateOf(2025) }
+    val years = (2020..2030).toList() // 11개
+
+    var selectedSingleItem by remember { mutableStateOf("Only Item") }
+    val singleItemList = listOf("Only Item") // 1개
+
+    Box(
+        modifier = Modifier
+            .background(colors.Black),
+        contentAlignment = Alignment.Center
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            // 순환식 년 선택기 (4개 이상이므로 순환)
+            GroupWheelPicker(
+                modifier = Modifier.width(60.dp),
+                items = years,
+                selectedItem = selectedYear,
+                onItemSelected = { selectedYear = it },
+                displayText = { it.toString() },
+                isCircular = true
+            )
+
+            // 단일 아이템 선택기 (스크롤 비활성화)
+            GroupWheelPicker(
+                modifier = Modifier.width(60.dp),
+                items = singleItemList,
+                selectedItem = selectedSingleItem,
+                onItemSelected = { selectedSingleItem = it },
+                displayText = { it },
+                isCircular = false
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/SectionDivider.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/SectionDivider.kt
new file mode 100644
index 00000000..8643e413
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/component/SectionDivider.kt
@@ -0,0 +1,23 @@
+package com.texthip.thip.ui.group.makeroom.component
+
+import androidx.compose.foundation.background
+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.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.ui.theme.ThipTheme.colors
+
+@Composable
+fun SectionDivider() {
+    Spacer(modifier = Modifier.padding(top = 32.dp))
+    Spacer(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(1.dp)
+            .background(colors.DarkGrey02)
+    )
+    Spacer(modifier = Modifier.padding(top = 32.dp))
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/mock/GroupBookData.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/mock/GroupBookData.kt
new file mode 100644
index 00000000..4367ed9a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/mock/GroupBookData.kt
@@ -0,0 +1,29 @@
+package com.texthip.thip.ui.group.makeroom.mock
+
+data class BookData(
+    val title: String,
+    val imageUrl: String? = null, // 이미지 URL
+    val author: String? = null,
+    val isbn: String? = null // 방 생성 시 필요한 ISBN
+)
+
+val dummySavedBooks = listOf(
+    BookData("토마토 컬러면", null, "최정화"),
+    BookData("사슴", null, "최정화"),
+    BookData("토마토 컬러면", null, "최정화"),
+    BookData("사슴", null, "최정화"),
+    BookData("토마토 컬러면", null, "최정화"),
+    BookData("사슴", null, "최정화"),
+    BookData("토마토 컬러면", null, "최정화"),
+    BookData("사슴", null, "최정화")
+)
+val dummyGroupBooks = listOf(
+    BookData("명작 읽기방", null),
+    BookData("또 다른 방", null),
+    BookData("명작 읽기방", null),
+    BookData("또 다른 방", null),
+    BookData("명작 읽기방", null),
+    BookData("또 다른 방", null),
+    BookData("명작 읽기방", null),
+    BookData("또 다른 방", null)
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/mock/GroupMakeRoomRequest.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/mock/GroupMakeRoomRequest.kt
new file mode 100644
index 00000000..b41d0b8b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/mock/GroupMakeRoomRequest.kt
@@ -0,0 +1,15 @@
+package com.texthip.thip.ui.group.makeroom.mock
+
+import java.time.LocalDate
+
+data class GroupMakeRoomRequest(
+    val selectedBook: BookData?,
+    val genreIndex: Int,
+    val roomTitle: String,
+    val roomDescription: String,
+    val meetingStartDate: LocalDate,
+    val meetingEndDate: LocalDate,
+    val memberLimit: Int,
+    val isPrivate: Boolean,
+    val password: String = ""
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/screen/GroupMakeRoomScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/screen/GroupMakeRoomScreen.kt
new file mode 100644
index 00000000..60202284
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/screen/GroupMakeRoomScreen.kt
@@ -0,0 +1,333 @@
+package com.texthip.thip.ui.group.makeroom.screen
+
+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.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+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 androidx.hilt.navigation.compose.hiltViewModel
+import com.texthip.thip.R
+import com.texthip.thip.data.manager.Genre
+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.GroupMemberLimitPicker
+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.SectionDivider
+import com.texthip.thip.ui.group.makeroom.mock.BookData
+import com.texthip.thip.ui.group.makeroom.viewmodel.GroupMakeRoomUiState
+import com.texthip.thip.ui.group.makeroom.viewmodel.GroupMakeRoomViewModel
+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.utils.rooms.advancedImePadding
+import com.texthip.thip.utils.rooms.toDisplayStrings
+
+
+@Composable
+fun GroupMakeRoomScreen(
+    onNavigateBack: () -> Unit,
+    onGroupCreated: (Int) -> Unit, // roomId 전달
+    modifier: Modifier = Modifier,
+    viewModel: GroupMakeRoomViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsState()
+
+    // 에러 메시지 표시
+    LaunchedEffect(uiState.errorMessage) {
+        uiState.errorMessage?.let { message ->
+            viewModel.clearError()
+        }
+    }
+
+    GroupMakeRoomContent(
+        uiState = uiState,
+        onNavigateBack = onNavigateBack,
+        onCreateGroup = { 
+            viewModel.createGroup(
+                onSuccess = { roomId ->
+                    onGroupCreated(roomId)
+                },
+                onError = { }
+            )
+        },
+        onSelectBook = viewModel::selectBook,
+        onToggleBookSearchSheet = viewModel::toggleBookSearchSheet,
+        onSelectGenre = viewModel::selectGenre,
+        onUpdateRoomTitle = viewModel::updateRoomTitle,
+        onUpdateRoomDescription = viewModel::updateRoomDescription,
+        onSetDateRange = viewModel::setDateRange,
+        onSetMemberLimit = viewModel::setMemberLimit,
+        onTogglePrivate = viewModel::togglePrivate,
+        onUpdatePassword = viewModel::updatePassword,
+        onSearchBooks = viewModel::searchBooks,
+        onLoadMoreSavedBooks = viewModel::loadMoreSavedBooks,
+        onLoadMoreGroupBooks = viewModel::loadMoreGroupBooks,
+        onLoadMoreSearchResults = viewModel::loadMoreSearchResults,
+        modifier = modifier
+    )
+}
+
+@Composable
+fun GroupMakeRoomContent(
+    modifier: Modifier = Modifier,
+    uiState: GroupMakeRoomUiState,
+    onNavigateBack: () -> Unit = {},
+    onCreateGroup: () -> Unit = {},
+    onSelectBook: (BookData) -> Unit = {},
+    onToggleBookSearchSheet: (Boolean) -> Unit = {},
+    onSelectGenre: (Int) -> Unit = {},
+    onUpdateRoomTitle: (String) -> Unit = {},
+    onUpdateRoomDescription: (String) -> Unit = {},
+    onSetDateRange: (java.time.LocalDate, java.time.LocalDate) -> Unit = { _, _ -> },
+    onSetMemberLimit: (Int) -> Unit = {},
+    onTogglePrivate: (Boolean) -> Unit = {},
+    onUpdatePassword: (String) -> Unit = {},
+    onSearchBooks: (String) -> Unit = {},
+    onLoadMoreSavedBooks: () -> Unit = {},
+    onLoadMoreGroupBooks: () -> Unit = {},
+    onLoadMoreSearchResults: () -> Unit = {}
+) {
+    val scrollState = rememberScrollState()
+
+    Box(modifier = Modifier.advancedImePadding()) {
+        Column(
+            modifier = modifier
+                .fillMaxSize()
+                .then(if (uiState.showBookSearchSheet) Modifier.blur(5.dp) else Modifier),
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            InputTopAppBar(
+                title = stringResource(R.string.group_making_group),
+                isRightButtonEnabled = uiState.isFormValid && !uiState.isLoading,
+                onLeftClick = onNavigateBack,
+                onRightClick = onCreateGroup
+            )
+
+            Column(
+                modifier = Modifier
+                    .verticalScroll(scrollState)
+                    .fillMaxSize()
+                    .padding(horizontal = 20.dp),
+                verticalArrangement = Arrangement.Top,
+            ) {
+                Spacer(modifier = Modifier.padding(top = 20.dp))
+
+                GroupSelectBook(
+                    selectedBook = uiState.selectedBook,
+                    onChangeBookClick = { onToggleBookSearchSheet(true) },
+                    onSelectBookClick = { onToggleBookSearchSheet(true) },
+                    isBookPreselected = uiState.isBookPreselected
+                )
+
+                SectionDivider()
+
+                Text(
+                    text = stringResource(R.string.group_book_genre),
+                    style = typography.smalltitle_sb600_s18_h24,
+                    color = colors.White,
+                )
+                Spacer(modifier = Modifier.padding(top = 12.dp))
+                GenreChipRow(
+                    modifier = Modifier.width(12.dp),
+                    genres = uiState.genres.toDisplayStrings(),
+                    selectedIndex = uiState.selectedGenreIndex,
+                    onSelect = onSelectGenre,
+                    horizontalArrangement = Arrangement.Start
+                )
+                Spacer(modifier = Modifier.height(12.dp))
+
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.End
+                ) {
+                    Text(
+                        text = stringResource(R.string.group_genre_select_comment),
+                        style = typography.info_r400_s12,
+                        color = colors.NeonGreen
+                    )
+                }
+
+                SectionDivider()
+
+                GroupInputField(
+                    title = stringResource(R.string.group_room_title),
+                    hint = stringResource(R.string.group_room_title_hint),
+                    value = uiState.roomTitle,
+                    maxLength = 15,
+                    onValueChange = onUpdateRoomTitle
+                )
+
+                SectionDivider()
+
+                GroupInputField(
+                    title = stringResource(R.string.group_room_explain),
+                    hint = stringResource(R.string.group_room_explain_hint),
+                    value = uiState.roomDescription,
+                    onValueChange = onUpdateRoomDescription
+                )
+
+                SectionDivider()
+
+                GroupRoomDurationPicker(
+                    onDateRangeSelected = onSetDateRange
+                )
+
+                SectionDivider()
+
+                GroupMemberLimitPicker(
+                    selectedCount = uiState.memberLimit,
+                    onCountSelected = onSetMemberLimit
+                )
+
+                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.group_private_comment),
+                        style = typography.menu_r400_s14_h24,
+                        color = colors.White
+                    )
+                    ToggleSwitchButton(
+                        isChecked = uiState.isPrivate,
+                        onToggleChange = onTogglePrivate
+                    )
+                }
+
+                if (uiState.isPrivate) {
+                    Spacer(modifier = Modifier.height(12.dp))
+                    WarningTextField(
+                        value = uiState.password,
+                        onValueChange = onUpdatePassword,
+                        hint = stringResource(R.string.group_password_hint),
+                        showWarning = uiState.password.isNotEmpty() && uiState.password.length < 4,
+                        warningMessage = stringResource(R.string.group_private_warning_message),
+                        maxLength = 4,
+                        isNumberOnly = true,
+                        keyboardType = KeyboardType.NumberPassword,
+                        showIcon = true,
+                        showLimit = false,
+                        containerColor = colors.DarkGrey02
+                    )
+                }
+
+                Spacer(modifier = Modifier.padding(top = 134.dp))
+            }
+        }
+
+        if (uiState.showBookSearchSheet) {
+            GroupBookSearchBottomSheet(
+                onDismiss = { onToggleBookSearchSheet(false) },
+                onBookSelect = { book: BookData ->
+                    onSelectBook(book)
+                    onToggleBookSearchSheet(false)
+                },
+                onRequestBook = {
+                    onToggleBookSearchSheet(false)
+                },
+                savedBooks = uiState.savedBooks,
+                groupBooks = uiState.groupBooks,
+                searchResults = uiState.searchResults,
+                isLoading = uiState.isLoadingBooks,
+                isSearching = uiState.isSearching,
+                isLoadingMoreSaved = uiState.isLoadingMoreSavedBooks,
+                isLoadingMoreGroup = uiState.isLoadingMoreGroupBooks,
+                isLoadingMoreSearch = uiState.isLoadingMoreSearchResults,
+                hasMoreSaved = !uiState.isLastSavedBooks,
+                hasMoreGroup = !uiState.isLastGroupBooks,
+                hasMoreSearch = !uiState.isLastSearchPage,
+                onSearch = onSearchBooks,
+                onLoadMoreSaved = onLoadMoreSavedBooks,
+                onLoadMoreGroup = onLoadMoreGroupBooks,
+                onLoadMoreSearch = onLoadMoreSearchResults
+            )
+        }
+    }
+}
+
+
+@Preview
+@Composable
+private fun GroupMakeRoomScreenPreview() {
+    ThipTheme {
+        GroupMakeRoomContent(
+            uiState = GroupMakeRoomUiState(
+                selectedBook = BookData(
+                    title = "미드나이트 라이브러리",
+                    imageUrl = "https://picsum.photos/300/400?1",
+                    author = "매트 헤이그",
+                    isbn = "9788937477263"
+                ),
+                selectedGenreIndex = 2,
+                roomTitle = "인생에 대해 고민하는 독서모임",
+                roomDescription = "매트 헤이그의 미드나이트 라이브러리를 함께 읽으며 인생의 가능성과 선택에 대해 이야기해요. 따뜻한 마음으로 서로의 이야기를 들어주실 분들과 함께하고 싶어요.",
+                memberLimit = 12,
+                isPrivate = true,
+                password = "1234",
+                genres = Genre.entries.toList(),
+                savedBooks = listOf(
+                    BookData(
+                        title = "코스모스",
+                        imageUrl = "https://picsum.photos/300/400?2",
+                        author = "칼 세이건",
+                        isbn = "9788983711892"
+                    ),
+                    BookData(
+                        title = "사피엔스",
+                        imageUrl = "https://picsum.photos/300/400?3",
+                        author = "유발 하라리",
+                        isbn = "9788934972464"
+                    )
+                ),
+                groupBooks = listOf(
+                    BookData(
+                        title = "1984",
+                        imageUrl = "https://picsum.photos/300/400?4",
+                        author = "조지 오웰",
+                        isbn = "9788937460777"
+                    ),
+                    BookData(
+                        title = "어린왕자",
+                        imageUrl = "https://picsum.photos/300/400?5",
+                        author = "생텍쥐페리",
+                        isbn = "9788932917245"
+                    )
+                )
+            )
+        )
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/util/WheelPickerDisplayUtils.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/util/WheelPickerDisplayUtils.kt
new file mode 100644
index 00000000..9a355d52
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/util/WheelPickerDisplayUtils.kt
@@ -0,0 +1,30 @@
+package com.texthip.thip.ui.group.makeroom.util
+
+import kotlin.math.roundToInt
+
+object WheelPickerUtils {
+    @JvmStatic
+    fun getCircularIndex(index: Int, size: Int): Int {
+        return ((index % size) + size) % size
+    }
+
+    @JvmStatic
+    fun normalizeOffset(offset: Float, itemSpacing: Float, size: Int, circular: Boolean): Float {
+        if (!circular) return offset
+        val total = size * itemSpacing
+        return ((offset % total) + total) % total
+    }
+
+    @JvmStatic
+    fun offsetToIndex(
+        offset: Float,
+        itemSpacing: Float,
+        size: Int,
+        circular: Boolean
+    ): Int {
+        val normalized = if (circular) normalizeOffset(offset, itemSpacing, size, circular) else offset
+        val centerIndex = (-normalized / itemSpacing).roundToInt()
+        return if (circular) getCircularIndex(centerIndex, size)
+        else centerIndex.coerceIn(0, size - 1)
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/viewmodel/GroupMakeRoomUiState.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/viewmodel/GroupMakeRoomUiState.kt
new file mode 100644
index 00000000..f3fa81a9
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/viewmodel/GroupMakeRoomUiState.kt
@@ -0,0 +1,74 @@
+package com.texthip.thip.ui.group.makeroom.viewmodel
+
+import com.texthip.thip.data.manager.Genre
+import com.texthip.thip.ui.group.makeroom.mock.BookData
+import com.texthip.thip.ui.group.makeroom.mock.GroupMakeRoomRequest
+import java.time.LocalDate
+import java.time.temporal.ChronoUnit
+
+data class GroupMakeRoomUiState(
+    val selectedBook: BookData? = null,
+    val showBookSearchSheet: Boolean = false,
+    val selectedGenreIndex: Int = -1,
+    val roomTitle: String = "",
+    val roomDescription: String = "",
+    val meetingStartDate: LocalDate = LocalDate.now(),
+    val meetingEndDate: LocalDate = LocalDate.now().plusDays(1),
+    val memberLimit: Int = 30,
+    val isPrivate: Boolean = false,
+    val password: String = "",
+    val isLoading: Boolean = false,
+    val errorMessage: String? = null,
+    val savedBooks: List<BookData> = emptyList(),
+    val groupBooks: List<BookData> = emptyList(),
+    val isLoadingBooks: Boolean = false,
+    val isLoadingMoreSavedBooks: Boolean = false,
+    val isLoadingMoreGroupBooks: Boolean = false,
+    val isLastSavedBooks: Boolean = false,
+    val isLastGroupBooks: Boolean = false,
+    val searchResults: List<BookData> = emptyList(),
+    val isSearching: Boolean = false,
+    val isLoadingMoreSearchResults: Boolean = false,
+    val searchPage: Int = 1,
+    val isLastSearchPage: Boolean = false,
+    val currentSearchQuery: String = "",
+    val genres: List<Genre> = emptyList(),
+    val isBookPreselected: Boolean = false
+) {
+    // 유효성 검사 로직
+    val isDurationValid: Boolean
+        get() {
+            val daysBetween = ChronoUnit.DAYS.between(meetingStartDate, meetingEndDate)
+            return daysBetween in 1..90
+        }
+
+    val isCountValid: Boolean
+        get() = memberLimit in 2..30
+
+    val isPasswordValid: Boolean
+        get() = !isPrivate || password.length == 4
+
+    val isFormValid: Boolean
+        get() = selectedBook != null &&
+                selectedGenreIndex >= 0 &&
+                roomTitle.isNotBlank() &&
+                roomDescription.isNotBlank() &&
+                isDurationValid &&
+                isCountValid &&
+                isPasswordValid
+
+    // 서버 전송용 데이터로 변환
+    fun toRequest(): GroupMakeRoomRequest {
+        return GroupMakeRoomRequest(
+            selectedBook = selectedBook,
+            genreIndex = selectedGenreIndex,
+            roomTitle = roomTitle.trim(),
+            roomDescription = roomDescription.trim(),
+            meetingStartDate = meetingStartDate,
+            meetingEndDate = meetingEndDate,
+            memberLimit = memberLimit,
+            isPrivate = isPrivate,
+            password = if (isPrivate) password else ""
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/makeroom/viewmodel/GroupMakeRoomViewModel.kt b/app/src/main/java/com/texthip/thip/ui/group/makeroom/viewmodel/GroupMakeRoomViewModel.kt
new file mode 100644
index 00000000..9c1320e4
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/makeroom/viewmodel/GroupMakeRoomViewModel.kt
@@ -0,0 +1,455 @@
+package com.texthip.thip.ui.group.makeroom.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.R
+import com.texthip.thip.data.model.book.response.BookSavedResponse
+import com.texthip.thip.data.model.book.response.BookSearchItem
+import com.texthip.thip.data.model.book.response.BookUserSaveList
+import com.texthip.thip.data.model.rooms.request.CreateRoomRequest
+import com.texthip.thip.data.manager.Genre
+import com.texthip.thip.data.provider.StringResourceProvider
+import com.texthip.thip.data.repository.BookRepository
+import com.texthip.thip.data.repository.RoomsRepository
+import com.texthip.thip.ui.group.makeroom.mock.BookData
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import java.time.LocalDate
+import java.time.format.DateTimeFormatter
+import javax.inject.Inject
+
+@HiltViewModel
+class GroupMakeRoomViewModel @Inject constructor(
+    private val roomsRepository: RoomsRepository,
+    private val bookRepository: BookRepository,
+    private val stringResourceProvider: StringResourceProvider
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(GroupMakeRoomUiState())
+    val uiState: StateFlow<GroupMakeRoomUiState> = _uiState.asStateFlow()
+
+    private var searchJob: Job? = null
+    private var loadMoreSearchJob: Job? = null
+    private var savedBooksCursor: String? = null
+    private var groupBooksCursor: String? = null
+    private var isLoadingSavedBooks = false
+    private var isLoadingGroupBooks = false
+
+    companion object {
+        private val DATE_FORMATTER = DateTimeFormatter.ofPattern("yyyy.MM.dd")
+    }
+
+    private fun updateState(update: (GroupMakeRoomUiState) -> GroupMakeRoomUiState) {
+        _uiState.value = update(_uiState.value)
+    }
+
+    init {
+        loadGenres()
+    }
+
+    private fun loadGenres() {
+        viewModelScope.launch {
+            roomsRepository.getGenres()
+                .onSuccess { genresList ->
+                    updateState { it.copy(genres = genresList) }
+                }
+        }
+    }
+
+    fun selectBook(book: BookData) {
+        updateState { it.copy(selectedBook = book) }
+    }
+
+    fun setPreselectedBook(isbn: String, title: String, imageUrl: String, author: String) {
+        val preselectedBook = BookData(
+            title = title,
+            imageUrl = imageUrl,
+            author = author,
+            isbn = isbn
+        )
+        updateState {
+            it.copy(
+                selectedBook = preselectedBook,
+                isBookPreselected = true
+            )
+        }
+    }
+
+    fun toggleBookSearchSheet(show: Boolean) {
+        updateState { it.copy(showBookSearchSheet = show) }
+        if (show) {
+            loadBooks()
+        }
+    }
+
+    private fun loadBooks() {
+        updateState { it.copy(isLoadingBooks = true) }
+        loadSavedBooks(isInitial = true)
+        loadGroupBooks(isInitial = true)
+    }
+
+    fun loadSavedBooks(isInitial: Boolean = false) {
+        if (isLoadingSavedBooks) return
+        if (!isInitial && _uiState.value.isLastSavedBooks) return
+
+        viewModelScope.launch {
+            try {
+                isLoadingSavedBooks = true
+                
+                if (isInitial) {
+                    updateState { it.copy(savedBooks = emptyList(), isLastSavedBooks = false) }
+                    savedBooksCursor = null
+                } else {
+                    updateState { it.copy(isLoadingMoreSavedBooks = true) }
+                }
+
+                val cursor = if (isInitial) null else savedBooksCursor
+
+                bookRepository.getBooks("SAVED", cursor)
+                    .onSuccess { response ->
+                        if (response != null) {
+                            val currentList = if (isInitial) emptyList() else _uiState.value.savedBooks
+                            val newBooks = response.bookList.map { it.toBookData() }
+                            updateState {
+                                it.copy(
+                                    savedBooks = currentList + newBooks,
+                                    isLastSavedBooks = response.isLast
+                                )
+                            }
+                            savedBooksCursor = response.nextCursor
+                        } else {
+                            updateState { it.copy(isLastSavedBooks = true) }
+                        }
+                    }
+                    .onFailure { exception ->
+                        if (isInitial) {
+                            updateState { it.copy(savedBooks = emptyList()) }
+                        }
+                    }
+            } finally {
+                isLoadingSavedBooks = false
+                updateState { 
+                    it.copy(
+                        isLoadingBooks = if (isInitial && !isLoadingGroupBooks) false else it.isLoadingBooks,
+                        isLoadingMoreSavedBooks = false
+                    ) 
+                }
+            }
+        }
+    }
+
+    fun loadGroupBooks(isInitial: Boolean = false) {
+        if (isLoadingGroupBooks) return
+        if (!isInitial && _uiState.value.isLastGroupBooks) return
+
+        viewModelScope.launch {
+            try {
+                isLoadingGroupBooks = true
+                
+                if (isInitial) {
+                    updateState { it.copy(groupBooks = emptyList(), isLastGroupBooks = false) }
+                    groupBooksCursor = null
+                } else {
+                    updateState { it.copy(isLoadingMoreGroupBooks = true) }
+                }
+
+                val cursor = if (isInitial) null else groupBooksCursor
+
+                bookRepository.getBooks("JOINING", cursor)
+                    .onSuccess { response ->
+                        if (response != null) {
+                            val currentList = if (isInitial) emptyList() else _uiState.value.groupBooks
+                            val newBooks = response.bookList.map { it.toBookData() }
+                            updateState {
+                                it.copy(
+                                    groupBooks = currentList + newBooks,
+                                    isLastGroupBooks = response.isLast
+                                )
+                            }
+                            groupBooksCursor = response.nextCursor
+                        } else {
+                            updateState { it.copy(isLastGroupBooks = true) }
+                        }
+                    }
+                    .onFailure { exception ->
+                        if (isInitial) {
+                            updateState { it.copy(groupBooks = emptyList()) }
+                        }
+                    }
+            } finally {
+                isLoadingGroupBooks = false
+                updateState { 
+                    it.copy(
+                        isLoadingBooks = if (isInitial && !isLoadingSavedBooks) false else it.isLoadingBooks,
+                        isLoadingMoreGroupBooks = false
+                    ) 
+                }
+            }
+        }
+    }
+
+    fun loadMoreSavedBooks() {
+        loadSavedBooks(isInitial = false)
+    }
+
+    fun loadMoreGroupBooks() {
+        loadGroupBooks(isInitial = false)
+    }
+
+    private fun BookSavedResponse.toBookData(): BookData {
+        return BookData(
+            title = this.bookTitle,
+            imageUrl = this.bookImageUrl,
+            author = this.authorName,
+            isbn = this.isbn
+        )
+    }
+
+    private fun BookSearchItem.toBookData(): BookData {
+        return BookData(
+            title = this.title,
+            imageUrl = this.imageUrl,
+            author = this.authorName,
+            isbn = this.isbn
+        )
+    }
+
+    fun searchBooks(query: String) {
+        searchJob?.cancel()
+        loadMoreSearchJob?.cancel()
+
+        if (query.isBlank()) {
+            updateState { 
+                it.copy(
+                    searchResults = emptyList(), 
+                    isSearching = false,
+                    searchPage = 1,
+                    isLastSearchPage = false,
+                    currentSearchQuery = ""
+                ) 
+            }
+            return
+        }
+
+        searchJob = viewModelScope.launch {
+            delay(300) // 디바운싱
+            updateState { 
+                it.copy(
+                    isSearching = true,
+                    searchResults = emptyList(),
+                    searchPage = 1,
+                    isLastSearchPage = false,
+                    currentSearchQuery = query
+                ) 
+            }
+
+            try {
+                val result = bookRepository.searchBooks(query, page = 1, isFinalized = false)
+                result.onSuccess { response ->
+                    if (response != null) {
+                        val searchResults = response.searchResult.map { it.toBookData() }
+                        updateState {
+                            it.copy(
+                                searchResults = searchResults,
+                                searchPage = response.page,
+                                isLastSearchPage = response.last,
+                                isSearching = false
+                            )
+                        }
+                    } else {
+                        updateState {
+                            it.copy(
+                                searchResults = emptyList(),
+                                isSearching = false,
+                                isLastSearchPage = true
+                            )
+                        }
+                    }
+                }.onFailure {
+                    updateState {
+                        it.copy(
+                            searchResults = emptyList(),
+                            isSearching = false
+                        )
+                    }
+                }
+            } catch (e: Exception) {
+                updateState {
+                    it.copy(
+                        searchResults = emptyList(),
+                        isSearching = false
+                    )
+                }
+            }
+        }
+    }
+
+    fun loadMoreSearchResults() {
+        val currentState = _uiState.value
+        if (currentState.isLoadingMoreSearchResults || 
+            currentState.isSearching ||
+            currentState.isLastSearchPage || 
+            currentState.searchResults.isEmpty() ||
+            currentState.currentSearchQuery.isBlank()) {
+            return
+        }
+
+        loadMoreSearchJob?.cancel()
+        loadMoreSearchJob = viewModelScope.launch {
+            updateState { it.copy(isLoadingMoreSearchResults = true) }
+            
+            try {
+                val nextPage = currentState.searchPage + 1
+                val result = bookRepository.searchBooks(
+                    currentState.currentSearchQuery,
+                    page = nextPage, 
+                    isFinalized = false
+                )
+                result.onSuccess { response ->
+                    if (response != null) {
+                        val newResults = response.searchResult.map { it.toBookData() }
+                        updateState {
+                            it.copy(
+                                searchResults = currentState.searchResults + newResults,
+                                searchPage = response.page,
+                                isLastSearchPage = response.last,
+                                isLoadingMoreSearchResults = false
+                            )
+                        }
+                    } else {
+                        updateState {
+                            it.copy(
+                                isLoadingMoreSearchResults = false,
+                                isLastSearchPage = true
+                            )
+                        }
+                    }
+                }.onFailure {
+                    updateState {
+                        it.copy(isLoadingMoreSearchResults = false)
+                    }
+                }
+            } catch (e: Exception) {
+                updateState {
+                    it.copy(isLoadingMoreSearchResults = false)
+                }
+            }
+        }
+    }
+
+    fun selectGenre(index: Int) {
+        updateState { it.copy(selectedGenreIndex = index) }
+    }
+
+    fun updateRoomTitle(title: String) {
+        updateState { it.copy(roomTitle = title) }
+    }
+
+    fun updateRoomDescription(description: String) {
+        updateState { it.copy(roomDescription = description) }
+    }
+
+    fun setDateRange(startDate: LocalDate, endDate: LocalDate) {
+        updateState {
+            it.copy(
+                meetingStartDate = startDate,
+                meetingEndDate = endDate
+            )
+        }
+    }
+
+    fun setMemberLimit(count: Int) {
+        updateState { it.copy(memberLimit = count) }
+    }
+
+    fun togglePrivate(isPrivate: Boolean) {
+        updateState {
+            it.copy(
+                isPrivate = isPrivate,
+                password = if (!isPrivate) "" else it.password
+            )
+        }
+    }
+
+    fun updatePassword(password: String) {
+        updateState { it.copy(password = password) }
+    }
+
+    fun createGroup(onSuccess: (Int) -> Unit, onError: (String) -> Unit) {
+        val currentState = _uiState.value
+
+        if (!currentState.isFormValid) {
+            onError(stringResourceProvider.getString(R.string.error_form_validation))
+            return
+        }
+
+        val selectedBook = currentState.selectedBook
+        if (selectedBook?.isbn == null) {
+            onError(stringResourceProvider.getString(R.string.error_book_info_invalid))
+            return
+        }
+
+        viewModelScope.launch {
+            try {
+                updateState { it.copy(isLoading = true, errorMessage = null) }
+
+                val request = CreateRoomRequest(
+                    isbn = selectedBook.isbn,
+                    category = getApiCategoryName(currentState.selectedGenreIndex),
+                    roomName = currentState.roomTitle.trim(),
+                    description = currentState.roomDescription.trim(),
+                    progressStartDate = currentState.meetingStartDate.format(DATE_FORMATTER),
+                    progressEndDate = currentState.meetingEndDate.format(DATE_FORMATTER),
+                    recruitCount = currentState.memberLimit,
+                    password = if (currentState.isPrivate) currentState.password else null,
+                    isPublic = !currentState.isPrivate
+                )
+
+                val result = roomsRepository.createRoom(request)
+                result.onSuccess { roomId ->
+                    onSuccess(roomId)
+                }.onFailure { exception ->
+                    onError(
+                        stringResourceProvider.getString(
+                            R.string.error_room_creation_failed,
+                            exception.message ?: ""
+                        )
+                    )
+                }
+            } catch (e: Exception) {
+                onError(
+                    stringResourceProvider.getString(
+                        R.string.error_network_error,
+                        e.message ?: ""
+                    )
+                )
+            } finally {
+                updateState { it.copy(isLoading = false) }
+            }
+        }
+    }
+
+    private fun getApiCategoryName(genreIndex: Int): String {
+        val currentGenres = uiState.value.genres
+        if (genreIndex >= 0 && genreIndex < currentGenres.size) {
+            val genre = currentGenres[genreIndex]
+            return genre.networkApiCategory
+        }
+        return Genre.getDefault().networkApiCategory
+    }
+
+    fun clearError() {
+        updateState { it.copy(errorMessage = null) }
+    }
+
+    override fun onCleared() {
+        super.onCleared()
+        searchJob?.cancel()
+        loadMoreSearchJob?.cancel()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupDeadlineRoomSection.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupDeadlineRoomSection.kt
new file mode 100644
index 00000000..26d46fea
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupDeadlineRoomSection.kt
@@ -0,0 +1,307 @@
+package com.texthip.thip.ui.group.myroom.component
+
+import android.annotation.SuppressLint
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+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.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+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.graphics.Brush
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.data.manager.Genre
+import com.texthip.thip.data.model.rooms.response.RoomMainList
+import com.texthip.thip.data.model.rooms.response.RoomMainResponse
+import com.texthip.thip.ui.common.buttons.GenreChipRow
+import com.texthip.thip.ui.common.cards.CardItemRoom
+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.utils.rooms.toDisplayStrings
+
+@SuppressLint("UnusedBoxWithConstraintsScope")
+@Composable
+fun GroupRoomDeadlineSection(
+    roomMainList: RoomMainList?,
+    selectedGenreIndex: Int,
+    errorMessage: String? = null,
+    onGenreSelect: (Int) -> Unit,
+    onRoomClick: (RoomMainResponse) -> Unit
+) {
+    val sideMargin = 30.dp
+
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = Modifier
+            .fillMaxWidth()
+    ) {
+        BoxWithConstraints(
+            modifier = Modifier
+                .fillMaxWidth(),
+            contentAlignment = Alignment.Center
+        ) {
+            val horizontalPadding = sideMargin
+            val cardWidth = maxWidth - (horizontalPadding * 2)
+            val scale = 0.94f
+            val desiredGap = 12.dp
+
+            val pageSpacing = (-(cardWidth - (cardWidth * scale)) / 2) + desiredGap
+
+            // Genre enum을 현지화된 문자열로 변환
+            val genreStrings = Genre.entries.toDisplayStrings()
+
+            // 마감 임박 방 목록과 인기 방 목록을 섹션으로 구성
+            val roomSections = listOf(
+                Pair(
+                    stringResource(R.string.room_section_deadline),
+                    roomMainList?.deadlineRoomList ?: emptyList()
+                ),
+                Pair(
+                    stringResource(R.string.room_section_popular),
+                    roomMainList?.popularRoomList ?: emptyList()
+                )
+            )
+
+            val effectivePagerState = rememberPagerState(
+                initialPage = 0,
+                pageCount = { roomSections.size }
+            )
+
+            HorizontalPager(
+                state = effectivePagerState,
+                contentPadding = PaddingValues(horizontal = 30.dp),
+                pageSpacing = pageSpacing,
+                modifier = Modifier.fillMaxWidth()
+            ) { page ->
+                val (sectionTitle, rooms) = roomSections[page]
+
+                val isCurrent = effectivePagerState.currentPage == page
+                val scale = if (isCurrent) 1f else 0.94f
+
+                Box(
+                    modifier = Modifier
+                        .width(cardWidth)
+                        .graphicsLayer {
+                            scaleX = scale
+                            scaleY = scale
+                        }
+                        .fillMaxHeight()
+                        .background(
+                            brush = Brush.verticalGradient(
+                                colors = listOf(
+                                    colors.White.copy(0.25f),
+                                    colors.Black.copy(0.2f)
+                                )
+                            ),
+                            shape = RoundedCornerShape(14.dp)
+                        )
+                        .padding(vertical = 20.dp)
+                ) {
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        Text(
+                            text = sectionTitle,
+                            style = typography.title_b700_s20_h24,
+                            color = colors.White,
+                            modifier = Modifier.padding(horizontal = 20.dp)
+                        )
+                        Spacer(Modifier.height(40.dp))
+
+                        GenreChipRow(
+                            genres = genreStrings,
+                            selectedIndex = selectedGenreIndex,
+                            onSelect = onGenreSelect
+                        )
+                        Spacer(Modifier.height(20.dp))
+
+                        Column(
+                            verticalArrangement = Arrangement.spacedBy(20.dp),
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .height(584.dp)
+                                .padding(horizontal = 20.dp)
+                        ) {
+                            when {
+                                // 에러 상태
+                                errorMessage != null -> {
+                                    Column(
+                                        modifier = Modifier
+                                            .padding(top = 30.dp)
+                                            .fillMaxWidth(),
+                                        horizontalAlignment = Alignment.CenterHorizontally
+                                    ) {
+                                        Text(
+                                            text = stringResource(R.string.error_data_load_failed),
+                                            style = typography.smalltitle_sb600_s16_h20,
+                                            color = colors.White,
+                                            textAlign = TextAlign.Center
+                                        )
+                                        Spacer(Modifier.height(8.dp))
+                                        Text(
+                                            text = errorMessage,
+                                            style = typography.copy_r400_s14,
+                                            color = colors.Grey,
+                                            textAlign = TextAlign.Center
+                                        )
+                                    }
+                                }
+                                // 데이터 없음 상태
+                                rooms.isEmpty() -> {
+                                    Column(
+                                        modifier = Modifier
+                                            .padding(top = 30.dp)
+                                            .fillMaxWidth(),
+                                        horizontalAlignment = Alignment.CenterHorizontally
+                                    ) {
+                                        Text(
+                                            text = stringResource(R.string.group_no_room_exist),
+                                            style = typography.smalltitle_sb600_s16_h20,
+                                            color = colors.White,
+                                            textAlign = TextAlign.Center
+                                        )
+                                        Spacer(Modifier.height(8.dp))
+                                        Text(
+                                            text = stringResource(R.string.group_no_room_error_comment),
+                                            style = typography.copy_r400_s14,
+                                            color = colors.Grey,
+                                            textAlign = TextAlign.Center
+                                        )
+                                    }
+                                }
+                                // 정상 데이터 표시
+                                else -> {
+                                    Column(
+                                        verticalArrangement = Arrangement.spacedBy(20.dp),
+                                        modifier = Modifier.fillMaxWidth()
+                                    ) {
+                                        rooms.forEach { room ->
+                                            // RoomMainResponse를 CardItemRoom에 맞게 변환
+                                            CardItemRoom(
+                                                title = room.roomName,
+                                                participants = room.memberCount,
+                                                maxParticipants = room.recruitCount,
+                                                isRecruiting = true, // RoomMainResponse에는 모집중인 방만 있음
+                                                endDate = room.deadlineDate,
+                                                imageUrl = room.bookImageUrl,
+                                                onClick = { onRoomClick(room) },
+                                                hasBorder = true,
+                                            )
+                                        }
+                                    }
+
+                                    if (rooms.size < 4) {
+                                        Spacer(
+                                            modifier = Modifier
+                                                .weight(1f, fill = true)
+                                                .fillMaxWidth()
+                                        )
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@Preview
+@Composable
+fun PreviewGroupRoomPagerSection() {
+    ThipTheme {
+        // RoomMainResponse 형태의 더미 데이터
+        val deadlineRooms = listOf(
+            RoomMainResponse(
+                roomId = 1,
+                roomName = "시집만 읽는 사람들 3월",
+                memberCount = 22,
+                recruitCount = 30,
+                deadlineDate = "3일 뒤",
+                bookImageUrl = "https://picsum.photos/300/200?1"
+            ),
+            RoomMainResponse(
+                roomId = 2,
+                roomName = "일본 소설 좋아하는 사람들",
+                memberCount = 15,
+                recruitCount = 20,
+                deadlineDate = "2일 뒤",
+                bookImageUrl = "https://picsum.photos/300/200?2"
+            )
+        )
+
+        val popularRooms = listOf(
+            RoomMainResponse(
+                roomId = 6,
+                roomName = "베스트셀러 토론방",
+                memberCount = 28,
+                recruitCount = 30,
+                deadlineDate = "7일 뒤",
+                bookImageUrl = "https://picsum.photos/300/200?6"
+            )
+        )
+
+        val roomMainList = RoomMainList(
+            deadlineRoomList = deadlineRooms,
+            popularRoomList = emptyList()
+        )
+
+        GroupRoomDeadlineSection(
+            roomMainList = roomMainList,
+            selectedGenreIndex = 0,
+            errorMessage = null,
+            onGenreSelect = {},
+            onRoomClick = {}
+        )
+    }
+}
+
+@Preview(name = "Empty Genre Data")
+@Composable
+fun PreviewGroupRoomPagerSectionEmptyGenre() {
+    ThipTheme {
+        val deadlineRooms = listOf(
+            RoomMainResponse(
+                roomId = 12,
+                roomName = "시집만 읽는 사람들 3월",
+                memberCount = 22,
+                recruitCount = 30,
+                deadlineDate = "3일 뒤",
+                bookImageUrl = "https://picsum.photos/300/200?12"
+            )
+        )
+
+        val roomMainList = RoomMainList(
+            deadlineRoomList = deadlineRooms,
+            popularRoomList = emptyList()
+        )
+
+        GroupRoomDeadlineSection(
+            roomMainList = roomMainList,
+            selectedGenreIndex = 0,
+            errorMessage = null,
+            onGenreSelect = {},
+            onRoomClick = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupEmptyCard.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupEmptyCard.kt
new file mode 100644
index 00000000..05d398e4
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupEmptyCard.kt
@@ -0,0 +1,106 @@
+package com.texthip.thip.ui.group.myroom.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+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.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+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
+import androidx.compose.ui.unit.dp
+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 GroupEmptyCard(
+    modifier: Modifier = Modifier,
+    backgroundColor: Color = colors.White,
+    onClick: () -> Unit = {}
+) {
+    // 그라데이션
+    val gradient = Brush.linearGradient(
+        colors = listOf(
+            colors.White,
+            colors.Grey01
+        ),
+        start = Offset(0f, 0f),
+        end = Offset(1000f, 1000f)
+    )
+
+    Card(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(176.dp)
+            .clickable { onClick() },
+        shape = RoundedCornerShape(18.dp),
+        colors = CardDefaults.cardColors(containerColor = backgroundColor),
+        elevation = CardDefaults.cardElevation(defaultElevation = 0.dp)
+    ) {
+        Box(
+            Modifier
+                .fillMaxSize()
+                .background(brush = gradient)
+        ) {
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(top = 34.dp),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.SpaceBetween // 위, 아래 끝에 배치
+            ) {
+                Column (
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    Text(
+                        text = stringResource(R.string.group_empty_card_title),
+                        style = typography.smalltitle_sb600_s18_h24,
+                        color = colors.Black
+                    )
+                    Spacer(modifier = Modifier.height(4.dp))
+
+                    Text(
+                        text = stringResource(R.string.group_empty_card_description),
+                        style = typography.copy_r400_s14,
+                        color = colors.Grey02
+                    )
+                }
+
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_thip_empty_room),
+                    contentDescription = "Empty Group Icon",
+                    tint = Color.Unspecified
+                )
+            }
+        }
+    }
+}
+
+
+@Preview()
+@Composable
+fun GroupEmptyCardPreview() {
+    ThipTheme {
+        GroupEmptyCard(
+            onClick = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupMainCard.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupMainCard.kt
new file mode 100644
index 00000000..35924a31
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupMainCard.kt
@@ -0,0 +1,183 @@
+package com.texthip.thip.ui.group.myroom.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+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.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+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.AsyncImage
+import com.texthip.thip.R
+import com.texthip.thip.data.model.rooms.response.JoinedRoomResponse
+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 GroupMainCard(
+    data: JoinedRoomResponse,
+    userName: String = "",
+    backgroundColor: Color = Color.White,
+    onClick: () -> Unit = {}
+) {
+    // 그라데이션
+    val gradient = Brush.linearGradient(
+        colors = listOf(
+            colors.White,
+            colors.Grey01
+        ),
+        start = Offset(0f, 0f),
+        end = Offset(1000f, 1000f)
+    )
+
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(176.dp)
+            .clickable { onClick() },
+        shape = RoundedCornerShape(18.dp),
+        colors = CardDefaults.cardColors(containerColor = backgroundColor),
+        elevation = CardDefaults.cardElevation(defaultElevation = 0.dp)
+    ) {
+        Box(
+            Modifier
+                .fillMaxSize()
+                .background(brush = gradient)
+        ) {
+            Row(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(start = 12.dp, end = 12.dp, top = 34.dp, bottom = 34.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                // 책 이미지
+                AsyncImage(
+                    model = data.bookImageUrl ?: R.drawable.img_book_cover_sample,
+                    contentDescription = "책 이미지",
+                    modifier = Modifier
+                        .size(width = 80.dp, height = 107.dp),
+                    contentScale = ContentScale.Crop
+                )
+                Spacer(Modifier.width(12.dp))
+
+                Column(
+                    verticalArrangement = Arrangement.Center
+                ) {
+                    Spacer(Modifier.height(2.dp))
+                    // 제목
+                    Text(
+                        text = data.roomTitle,
+                        style = typography.smalltitle_sb600_s18_h24,
+                        color = colors.Black,
+                        maxLines = 1
+                    )
+                    Spacer(Modifier.height(4.dp))
+                    // 인원
+                    Row(verticalAlignment = Alignment.CenterVertically) {
+                        Image(
+                            painter = painterResource(id = R.drawable.ic_group),
+                            contentDescription = null,
+                            modifier = Modifier.size(20.dp)
+                        )
+                        Spacer(Modifier.width(2.dp))
+
+                        Row (
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            Text(
+                                text = stringResource(R.string.group_participant, data.memberCount),
+                                color = colors.Grey02,
+                                style = typography.menu_sb600_s12,
+                            )
+                            Text(
+                                text = stringResource(R.string.group_participant_string),
+                                color = colors.Grey02,
+                                style = typography.info_m500_s12,
+                            )
+                        }
+                    }
+                    Spacer(Modifier.height(16.dp))
+                    // 닉네임 + 진행도
+                    Row(verticalAlignment = Alignment.Bottom) {
+                        Text(
+                            text = stringResource(R.string.group_progress, userName),
+                            color = colors.Grey02,
+                            style = typography.view_m500_s14
+                        )
+                        Spacer(Modifier.width(4.dp))
+                        Text(
+                            text = "${data.userPercentage}",
+                            color = colors.Purple,
+                            style = typography.smalltitle_sb600_s16_h20
+                        )
+                        Text(
+                            text = "%",
+                            color = colors.Purple,
+                            style = typography.menu_sb600_s12,
+                        )
+                    }
+                    Spacer(Modifier.height(10.dp))
+
+                    val percentage = data.userPercentage.toFloat()
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .height(8.dp)
+                            .background(color = colors.Grey02, shape = RoundedCornerShape(12.dp))
+                    ) {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth(fraction = percentage / 100f)
+                                .fillMaxHeight()
+                                .background(color = colors.Purple, shape = RoundedCornerShape(12.dp))
+                        )
+                    }
+                    Spacer(Modifier.height(2.dp))
+                }
+            }
+        }
+    }
+}
+
+
+@Preview()
+@Composable
+fun PreviewMyGroupMainCard() {
+    ThipTheme {
+        GroupMainCard(
+            data = JoinedRoomResponse(
+                roomId = 1,
+                roomTitle = "호르몬 체인지 완독하는 방",
+                memberCount = 22,
+                bookImageUrl = "https://picsum.photos/300/200?1",
+                userPercentage = 40
+            ),
+            userName = "uibowl1님",
+            onClick = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupMyRoomFilterRow.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupMyRoomFilterRow.kt
new file mode 100644
index 00000000..33166c67
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupMyRoomFilterRow.kt
@@ -0,0 +1,56 @@
+package com.texthip.thip.ui.group.myroom.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.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.OptionChipButton
+import com.texthip.thip.ui.theme.ThipTheme
+
+@Composable
+fun GroupMyRoomFilterRow(
+    selectedStates: BooleanArray,
+    onToggle: (Int) -> Unit
+) {
+    Row(
+        horizontalArrangement = Arrangement.spacedBy(12.dp)
+    ) {
+        OptionChipButton(
+            text = stringResource(R.string.on_going),
+            isFilled = true,
+            isSelected = selectedStates[0],
+            onClick = { onToggle(0) }
+        )
+        OptionChipButton(
+            text = stringResource(R.string.recruiting),
+            isFilled = true,
+            isSelected = selectedStates[1],
+            onClick = { onToggle(1) }
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun GroupMyRoomFilterRowPreview() {
+    ThipTheme {
+        var selectedStates by remember { mutableStateOf(booleanArrayOf(true, false)) }
+        
+        GroupMyRoomFilterRow(
+            selectedStates = selectedStates,
+            onToggle = { index ->
+                selectedStates = selectedStates.copyOf().apply {
+                    this[index] = !this[index]
+                }
+            }
+        )
+    }
+}
+
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupMySectionHeader.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupMySectionHeader.kt
new file mode 100644
index 00000000..1b35730d
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupMySectionHeader.kt
@@ -0,0 +1,50 @@
+package com.texthip.thip.ui.group.myroom.component
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+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.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.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun GroupMySectionHeader(onClick: (() -> Unit)? = null) {
+    Row(
+        Modifier
+            .fillMaxWidth()
+            .clickable(enabled = onClick != null) { onClick?.invoke() }
+            .padding(horizontal = 20.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Text(
+            text = stringResource(R.string.my_group_room),
+            style = typography.title_b700_s20_h24,
+            color = colors.White
+        )
+        Spacer(Modifier.weight(1f))
+        if (onClick != null) {
+            Icon(
+                painter = painterResource(id = R.drawable.ic_chevron_right),
+                contentDescription = null,
+                tint = colors.White
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFF000000, widthDp = 360)
+@Composable
+fun PreviewMainSectionHeader() {
+    GroupMySectionHeader(){}
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupPager.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupPager.kt
new file mode 100644
index 00000000..1ea642b1
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupPager.kt
@@ -0,0 +1,193 @@
+package com.texthip.thip.ui.group.myroom.component
+
+import android.annotation.SuppressLint
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.data.model.rooms.response.JoinedRoomResponse
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+
+@SuppressLint("UnusedBoxWithConstraintsScope")
+@Composable
+fun GroupPager(
+    groupCards: List<JoinedRoomResponse>,
+    userName: String = "",
+    onCardClick: (JoinedRoomResponse) -> Unit,
+    onCardVisible: ((Int) -> Unit)? = null
+) {
+    val scale = 0.86f
+    val desiredGap = 10.dp
+
+    BoxWithConstraints(
+        modifier = Modifier
+            .fillMaxWidth()
+    ) {
+        val horizontalPadding = 30.dp
+        val cardWidth = maxWidth - (horizontalPadding * 2)
+
+        val pageSpacing = with(this) {
+            (-(cardWidth - (cardWidth * scale)) / 2f) + desiredGap
+        }
+
+        // 데이터가 없는 경우 Empty State 표시
+        if (groupCards.isEmpty()) {
+            GroupEmptyCard(
+                modifier = Modifier.padding(horizontal = horizontalPadding)
+            )
+        } else if (groupCards.size == 1) {
+            // 데이터가 하나일 때는 스크롤 없이 고정 카드 표시
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = horizontalPadding),
+                contentAlignment = Alignment.Center
+            ) {
+                GroupMainCard(
+                    data = groupCards[0],
+                    userName = userName,
+                    onClick = { onCardClick(groupCards[0]) },
+                    backgroundColor = colors.White
+                )
+            }
+        } else {
+            // 여러 데이터일 때는 무한 스크롤 적용
+            val infinitePageCount = Int.MAX_VALUE
+            val startPage = infinitePageCount / 2
+
+            val pagerState = rememberPagerState(
+                initialPage = startPage,
+                pageCount = { infinitePageCount }
+            )
+
+            // 초기 로딩 시에만 시작 페이지로 이동
+            LaunchedEffect(Unit) {
+                if (pagerState.currentPage == 0) {
+                    pagerState.scrollToPage(startPage)
+                }
+            }
+            
+            // 현재 보이는 카드 인덱스를 ViewModel에 알림
+            LaunchedEffect(pagerState.currentPage) {
+                val currentPageIndex = ((pagerState.currentPage - startPage) % groupCards.size + groupCards.size) % groupCards.size
+                onCardVisible?.invoke(currentPageIndex)
+            }
+
+            HorizontalPager(
+                state = pagerState,
+                contentPadding = PaddingValues(start = horizontalPadding, end = horizontalPadding),
+                pageSpacing = pageSpacing,
+                modifier = Modifier.fillMaxWidth()
+            ) { page ->
+                val actualIndex = ((page - startPage) % groupCards.size + groupCards.size) % groupCards.size
+                val currentPageIndex = ((pagerState.currentPage - startPage) % groupCards.size + groupCards.size) % groupCards.size
+
+                val isCurrent = actualIndex == currentPageIndex
+                val scale = if (isCurrent) 1f else 0.86f
+
+                // 현재 카드와 양옆 카드의 색상 설정
+                val bgColor = when {
+                    isCurrent -> colors.White
+                    else -> colors.DarkGrey
+                }
+
+                Box(
+                    modifier = Modifier
+                        .width(cardWidth)
+                        .graphicsLayer {
+                            scaleX = scale
+                            scaleY = scale
+                            alpha = if (isCurrent) 1f else 0.7f
+                        }
+                ) {
+                    GroupMainCard(
+                        data = groupCards[actualIndex],
+                        userName = userName,
+                        onClick = { onCardClick(groupCards[actualIndex]) },
+                        backgroundColor = bgColor
+                    )
+                }
+            }
+
+            // 페이지 인디케이터 였던 것 (혹시 몰라 남겨둡니다)
+            /*val currentPageIndex = ((pagerState.currentPage - startPage) % groupCards.size + groupCards.size) % groupCards.size
+
+            SimplePagerIndicator(
+                pageCount = groupCards.size,
+                currentPage = currentPageIndex,
+                modifier = Modifier
+                    .align(Alignment.BottomCenter)
+                    .padding(top = 12.dp)
+            )*/
+        }
+    }
+}
+
+
+@Preview
+@Composable
+fun PreviewMyGroupPager() {
+    ThipTheme {
+        val list = listOf(
+            JoinedRoomResponse(
+                roomId = 1,
+                roomTitle = "호르몬 체인지 완독하는 방",
+                memberCount = 22,
+                bookImageUrl = "https://picsum.photos/300/200?1",
+                userPercentage = 40
+            ),
+            JoinedRoomResponse(
+                roomId = 2,
+                roomTitle = "명작 읽기방",
+                memberCount = 10,
+                bookImageUrl = "https://picsum.photos/300/200?2",
+                userPercentage = 70
+            ),
+            JoinedRoomResponse(
+                roomId = 3,
+                roomTitle = "또 다른 방",
+                memberCount = 13,
+                bookImageUrl = "https://picsum.photos/300/200?3",
+                userPercentage = 10
+            )
+        )
+        GroupPager(groupCards = list, onCardClick = {})
+    }
+}
+
+@Preview
+@Composable
+fun PreviewSingleGroupPager() {
+    ThipTheme {
+        val single = listOf(
+            JoinedRoomResponse(
+                roomId = 4,
+                roomTitle = "단일 그룹",
+                memberCount = 15,
+                bookImageUrl = "https://picsum.photos/300/200?4",
+                userPercentage = 60
+            )
+        )
+        GroupPager(groupCards = single, onCardClick = {}, userName = "규빈")
+    }
+}
+
+@Preview
+@Composable
+fun PreviewEmptyGroupPager() {
+    ThipTheme {
+        GroupPager(groupCards = emptyList(), onCardClick = {})
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupSearchTextField.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupSearchTextField.kt
new file mode 100644
index 00000000..e2a644f6
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupSearchTextField.kt
@@ -0,0 +1,76 @@
+package com.texthip.thip.ui.group.myroom.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+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.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun GroupSearchTextField(
+    modifier: Modifier = Modifier,
+    placeholder: String = stringResource(R.string.group_search_placeholder),
+    onClick: () -> Unit
+) {
+    val shape = RoundedCornerShape(12.dp)
+    val backgroundColor = colors.DarkGrey
+
+    Box(
+        modifier
+            .padding(horizontal = 20.dp)
+            .fillMaxWidth()
+            .height(40.dp)
+            .clip(shape)
+            .background(backgroundColor)
+            .clickable { onClick() },
+        contentAlignment = Alignment.CenterStart
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = 12.dp)
+        ) {
+            Text(
+                text = placeholder,
+                color = colors.Grey02,
+                style = typography.menu_r400_s14_h24.copy(
+                    fontSize = 14.sp,
+                    lineHeight = 16.sp
+                ),
+                modifier = Modifier.weight(1f)
+            )
+            Icon(
+                painter = painterResource(id = R.drawable.ic_search),
+                contentDescription = "검색",
+                tint = colors.White
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFF000000, widthDp = 360)
+@Composable
+fun PreviewGroupSearchTextField() {
+    GroupSearchTextField(
+        onClick = { }
+    )
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/component/SimplePagerIndicator.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/SimplePagerIndicator.kt
new file mode 100644
index 00000000..5589d37d
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/SimplePagerIndicator.kt
@@ -0,0 +1,57 @@
+package com.texthip.thip.ui.group.myroom.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+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
+import com.texthip.thip.ui.theme.ThipTheme.colors
+
+@Composable
+fun SimplePagerIndicator(
+    modifier: Modifier = Modifier,
+    pageCount: Int,
+    currentPage: Int
+) {
+    Row(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.Center,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        repeat(pageCount) { index ->
+            Box(
+                modifier = Modifier
+                    .padding(horizontal = 6.dp)
+                    .size(4.dp)
+                    .background(
+                        color = if (currentPage == index) colors.White else colors.Grey02,
+                        shape = RoundedCornerShape(50)
+                    )
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SimplePagerIndicatorPreview() {
+    ThipTheme {
+        Box(
+            modifier = Modifier
+                .padding(16.dp)
+        ) {
+            SimplePagerIndicator(
+                pageCount = 5,
+                currentPage = 2
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupBookData.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupBookData.kt
new file mode 100644
index 00000000..17136442
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupBookData.kt
@@ -0,0 +1,11 @@
+package com.texthip.thip.ui.group.myroom.mock
+
+import com.texthip.thip.R
+
+data class GroupBookData(
+    val title: String,
+    val author: String,
+    val publisher: String,
+    val description: String,
+    val imageUrl: String? = null // API에서 받은 이미지 URL
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupBottomButtonType.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupBottomButtonType.kt
new file mode 100644
index 00000000..90ca8e0f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupBottomButtonType.kt
@@ -0,0 +1,3 @@
+package com.texthip.thip.ui.group.myroom.mock
+
+enum class GroupBottomButtonType { JOIN, CANCEL, CLOSE }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupCardData.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupCardData.kt
new file mode 100644
index 00000000..cbb6f718
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupCardData.kt
@@ -0,0 +1,12 @@
+package com.texthip.thip.ui.group.myroom.mock
+
+import com.texthip.thip.R
+
+data class GroupCardData(
+    val id: Int,
+    val title: String,
+    val members: Int,
+    val imageUrl: String?,       // API에서 받은 이미지 URL
+    val progress: Int,           // 0~100
+    val nickname: String
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupCardItemRoomData.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupCardItemRoomData.kt
new file mode 100644
index 00000000..a282151e
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupCardItemRoomData.kt
@@ -0,0 +1,12 @@
+package com.texthip.thip.ui.group.myroom.mock
+
+data class GroupCardItemRoomData(
+    val id: Int,
+    val title: String,
+    val participants: Int,
+    val maxParticipants: Int,
+    val isRecruiting: Boolean,
+    val endDate: String? = null, // 마감 시간 텍스트 (예: "8시간 뒤")
+    val imageUrl: String? = null, // API에서 받은 이미지 URL
+    val isSecret: Boolean = false
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupRoomData.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupRoomData.kt
new file mode 100644
index 00000000..42bec61f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupRoomData.kt
@@ -0,0 +1,19 @@
+package com.texthip.thip.ui.group.myroom.mock
+
+data class GroupRoomData(
+    val id: Int,
+    val title: String,
+    val isSecret: Boolean,
+    val description: String,
+    val startDate: String,
+    val endDate: String,
+    val members: Int,
+    val maxMembers: Int,
+    val daysLeft: Int,
+    val genre: String,
+    val bookData: GroupBookData,
+    val recommendations: List<GroupCardItemRoomData>,
+    val buttonType: GroupBottomButtonType? = null, // API에서 결정된 버튼 타입
+    val roomImageUrl: String? = null, // 방 대표 이미지 URL
+    val bookImageUrl: String? = null  // 책 이미지 URL
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupRoomSectionData.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupRoomSectionData.kt
new file mode 100644
index 00000000..756f33b7
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/GroupRoomSectionData.kt
@@ -0,0 +1,7 @@
+package com.texthip.thip.ui.group.myroom.mock
+
+data class GroupRoomSectionData(
+    val title: String,
+    val rooms: List<GroupCardItemRoomData>,
+    val genres: List<String>
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/RoomType.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/RoomType.kt
new file mode 100644
index 00000000..fe71e4f1
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/mock/RoomType.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.ui.group.myroom.mock
+
+enum class RoomType(val value: String) {
+    PLAYING_AND_RECRUITING("playingAndRecruiting"),
+    RECRUITING("recruiting"),
+    PLAYING("playing"),
+    EXPIRED("expired")
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupMyScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupMyScreen.kt
new file mode 100644
index 00000000..26022136
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupMyScreen.kt
@@ -0,0 +1,274 @@
+package com.texthip.thip.ui.group.myroom.screen
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+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.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Text
+import androidx.compose.material3.pulltorefresh.PullToRefreshBox
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.texthip.thip.R
+import com.texthip.thip.data.model.rooms.response.MyRoomResponse
+import com.texthip.thip.ui.common.cards.CardItemRoom
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.group.myroom.component.GroupMyRoomFilterRow
+import com.texthip.thip.ui.group.myroom.mock.RoomType
+import com.texthip.thip.ui.group.myroom.viewmodel.GroupMyUiState
+import com.texthip.thip.ui.group.myroom.viewmodel.GroupMyViewModel
+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.utils.rooms.RoomUtils
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun GroupMyScreen(
+    onCardClick: (MyRoomResponse) -> Unit = {},
+    onNavigateBack: () -> Unit = {},
+    viewModel: GroupMyViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsState()
+
+    LaunchedEffect(key1 = Unit) {
+        viewModel.refreshData()
+    }
+
+    GroupMyContent(
+        uiState = uiState,
+        onCardClick = onCardClick,
+        onNavigateBack = onNavigateBack,
+        onRefresh = { viewModel.refreshData() },
+        onLoadMore = { viewModel.loadMoreMyRooms() },
+        onChangeRoomType = { viewModel.changeRoomType(it) }
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun GroupMyContent(
+    uiState: GroupMyUiState,
+    onCardClick: (MyRoomResponse) -> Unit = {},
+    onNavigateBack: () -> Unit = {},
+    onRefresh: () -> Unit = {},
+    onLoadMore: () -> Unit = {},
+    onChangeRoomType: (RoomType) -> Unit = {}
+) {
+    val listState = rememberLazyListState()
+
+    // 무한 스크롤 로직
+    val shouldLoadMore by remember(uiState.canLoadMore, uiState.isLoadingMore) {
+        derivedStateOf {
+            val lastVisibleIndex = listState.layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0
+            val totalItems = listState.layoutInfo.totalItemsCount
+            uiState.canLoadMore && !uiState.isLoadingMore && totalItems > 0 && lastVisibleIndex >= totalItems - 3
+        }
+    }
+
+    LaunchedEffect(shouldLoadMore) {
+        if (shouldLoadMore) {
+            onLoadMore()
+        }
+    }
+
+    // Filter 상태를 
+    val selectedStates = remember(uiState.currentRoomType) {
+        when (uiState.currentRoomType) {
+            RoomType.PLAYING -> booleanArrayOf(true, false)
+            RoomType.RECRUITING -> booleanArrayOf(false, true)
+            else -> booleanArrayOf(false, false) // playingAndRecruiting
+        }
+    }
+
+    Column(
+        Modifier
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            title = stringResource(R.string.my_group_room),
+            onLeftClick = onNavigateBack,
+        )
+
+        PullToRefreshBox(
+            isRefreshing = uiState.isLoading,
+            onRefresh = onRefresh,
+            modifier = Modifier.fillMaxSize()
+        ) {
+            Column(
+                Modifier
+                    .background(colors.Black)
+                    .fillMaxSize()
+                    .padding(horizontal = 20.dp)
+            ) {
+                Spacer(modifier = Modifier.height(20.dp))
+
+                GroupMyRoomFilterRow(
+                    selectedStates = selectedStates,
+                    onToggle = { idx ->
+                        val newRoomType = when {
+                            // 진행중 버튼을 눌렀을 때
+                            idx == 0 -> {
+                                if (selectedStates[0]) {
+                                    // 이미 선택된 상태면 전체로 변경
+                                    RoomType.PLAYING_AND_RECRUITING
+                                } else {
+                                    // 선택되지 않은 상태면 진행중만
+                                    RoomType.PLAYING
+                                }
+                            }
+                            // 모집중 버튼을 눌렀을 때  
+                            idx == 1 -> {
+                                if (selectedStates[1]) {
+                                    RoomType.PLAYING_AND_RECRUITING
+                                } else {
+                                    RoomType.RECRUITING
+                                }
+                            }
+
+                            else -> RoomType.PLAYING_AND_RECRUITING
+                        }
+                        onChangeRoomType(newRoomType)
+                    }
+                )
+
+                Spacer(modifier = Modifier.height(20.dp))
+
+                if (uiState.myRooms.isNotEmpty()) {
+                    LazyColumn(
+                        state = listState,
+                        verticalArrangement = Arrangement.spacedBy(20.dp),
+                        contentPadding = PaddingValues(bottom = 20.dp),
+                        modifier = Modifier.fillMaxSize()
+                    ) {
+                        items(uiState.myRooms) { room ->
+                            CardItemRoom(
+                                title = room.roomName,
+                                participants = room.memberCount,
+                                maxParticipants = room.recruitCount,
+                                isRecruiting = RoomUtils.isRecruitingByType(room.type),
+                                endDate = room.endDate,
+                                imageUrl = room.bookImageUrl,
+                                isSecret = !room.isPublic,
+                                onClick = { onCardClick(room) }
+                            )
+                        }
+                    }
+                } else if (!uiState.isLoading) {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxSize(),
+                        verticalArrangement = Arrangement.Center,
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        Text(
+                            text = stringResource(R.string.group_myroom_error_comment1),
+                            color = colors.White,
+                            style = typography.smalltitle_sb600_s18_h24
+                        )
+                        Spacer(modifier = Modifier.height(8.dp))
+
+                        Text(
+                            text = stringResource(R.string.group_myroom_error_comment2),
+                            color = colors.Grey,
+                            style = typography.copy_r400_s14
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun GroupMyScreenPreview() {
+    ThipTheme {
+        GroupMyContent(
+            uiState = GroupMyUiState(
+                myRooms = listOf(
+                    MyRoomResponse(
+                        roomId = 1,
+                        roomName = "🌙 미드나이트 라이브러리 함께읽기",
+                        bookImageUrl = "https://picsum.photos/300/400?1",
+                        memberCount = 18,
+                        recruitCount = 20,
+                        type = "RECRUITING",
+                        endDate = "2025-02-15",
+                        isPublic = true
+                    ),
+                    MyRoomResponse(
+                        roomId = 2,
+                        roomName = "📚 현대문학 깊이 탐구하기",
+                        bookImageUrl = "https://picsum.photos/300/400?2",
+                        memberCount = 12,
+                        recruitCount = 15,
+                        type = "PLAYING",
+                        endDate = "2025-01-28",
+                        isPublic = false
+                    ),
+                    MyRoomResponse(
+                        roomId = 3,
+                        roomName = "🔬 과학책으로 세상 이해하기",
+                        bookImageUrl = "https://picsum.photos/300/400?3",
+                        memberCount = 25,
+                        recruitCount = 30,
+                        type = "RECRUITING",
+                        endDate = "2025-03-01",
+                        isPublic = true
+                    ),
+                    MyRoomResponse(
+                        roomId = 4,
+                        roomName = "✨ 철학 고전 함께 읽기",
+                        bookImageUrl = "https://picsum.photos/300/400?4",
+                        memberCount = 8,
+                        recruitCount = 12,
+                        type = "PLAYING",
+                        endDate = "2025-02-10",
+                        isPublic = false
+                    ),
+                    MyRoomResponse(
+                        roomId = 5,
+                        roomName = "🎨 예술과 문학의 아름다운 만남",
+                        bookImageUrl = "https://picsum.photos/300/400?5",
+                        memberCount = 6,
+                        recruitCount = 10,
+                        type = "RECRUITING",
+                        endDate = "2025-02-20",
+                        isPublic = true
+                    ),
+                    MyRoomResponse(
+                        roomId = 6,
+                        roomName = "💭 심리학 도서 탐험대",
+                        bookImageUrl = "https://picsum.photos/300/400?6",
+                        memberCount = 14,
+                        recruitCount = 18,
+                        type = "PLAYING",
+                        endDate = "2025-01-30",
+                        isPublic = false
+                    )
+                ),
+                currentRoomType = RoomType.PLAYING_AND_RECRUITING,
+                isLoading = false,
+                hasMore = true
+            )
+        )
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/viewmodel/GroupMyUiState.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/viewmodel/GroupMyUiState.kt
new file mode 100644
index 00000000..d48e308f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/viewmodel/GroupMyUiState.kt
@@ -0,0 +1,16 @@
+package com.texthip.thip.ui.group.myroom.viewmodel
+
+import com.texthip.thip.data.model.rooms.response.MyRoomResponse
+import com.texthip.thip.ui.group.myroom.mock.RoomType
+
+data class GroupMyUiState(
+    val myRooms: List<MyRoomResponse> = emptyList(),
+    val currentRoomType: RoomType = RoomType.PLAYING_AND_RECRUITING,
+    val isLoading: Boolean = false,
+    val isLoadingMore: Boolean = false,
+    val hasMore: Boolean = true,
+    val error: String? = null
+) {
+    val hasContent: Boolean get() = myRooms.isNotEmpty()
+    val canLoadMore: Boolean get() = !isLoading && !isLoadingMore && hasMore
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/viewmodel/GroupMyViewModel.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/viewmodel/GroupMyViewModel.kt
new file mode 100644
index 00000000..2de4c248
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/viewmodel/GroupMyViewModel.kt
@@ -0,0 +1,93 @@
+package com.texthip.thip.ui.group.myroom.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.repository.RoomsRepository
+import com.texthip.thip.ui.group.myroom.mock.RoomType
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class GroupMyViewModel @Inject constructor(
+    private val repository: RoomsRepository
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(GroupMyUiState())
+    val uiState: StateFlow<GroupMyUiState> = _uiState.asStateFlow()
+    
+    private var nextCursor: String? = null
+    private var isLastPage = false
+    private var isLoadingData = false
+    
+    private fun updateState(update: (GroupMyUiState) -> GroupMyUiState) {
+        _uiState.value = update(_uiState.value)
+    }
+
+    init {
+        loadMyRooms(reset = true)
+    }
+
+    fun loadMyRooms(reset: Boolean = false) {
+        if (isLoadingData && !reset) return
+        if (isLastPage && !reset) return
+        
+        viewModelScope.launch {
+            try {
+                isLoadingData = true
+                
+                if (reset) {
+                    updateState { it.copy(isLoading = true, myRooms = emptyList(), hasMore = true) }
+                    nextCursor = null
+                    isLastPage = false
+                } else {
+                    updateState { it.copy(isLoadingMore = true) }
+                }
+
+                repository.getMyRoomsByType(uiState.value.currentRoomType.value, nextCursor)
+                    .onSuccess { myRoomListResponse ->
+                        myRoomListResponse?.let { response ->
+                            val currentList = if (reset) emptyList() else uiState.value.myRooms
+                            updateState { 
+                                it.copy(
+                                    myRooms = currentList + response.roomList,
+                                    error = null,
+                                    hasMore = !response.isLast
+                                ) 
+                            }
+                            nextCursor = response.nextCursor
+                            isLastPage = response.isLast
+                        } ?: run {
+                            // null 응답 시 더 이상 로드할 수 없음을 명시
+                            updateState { it.copy(hasMore = false) }
+                            isLastPage = true
+                        }
+                    }
+                    .onFailure { exception ->
+                        updateState { it.copy(error = exception.message) }
+                    }
+            } finally {
+                isLoadingData = false
+                updateState { it.copy(isLoading = false, isLoadingMore = false) }
+            }
+        }
+    }
+    
+    fun loadMoreMyRooms() {
+        loadMyRooms(reset = false)
+    }
+    
+    fun refreshData() {
+        loadMyRooms(reset = true)
+    }
+    
+    fun changeRoomType(roomType: RoomType) {
+        if (roomType != uiState.value.currentRoomType) {
+            updateState { it.copy(currentRoomType = roomType) }
+            loadMyRooms(reset = true)
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentBottomSheet.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentBottomSheet.kt
new file mode 100644
index 00000000..9a2659b1
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentBottomSheet.kt
@@ -0,0 +1,346 @@
+package com.texthip.thip.ui.group.note.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.ime
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.blur
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.texthip.thip.R
+import com.texthip.thip.data.model.comments.response.CommentList
+import com.texthip.thip.data.model.comments.response.ReplyList
+import com.texthip.thip.ui.common.bottomsheet.CustomBottomSheet
+import com.texthip.thip.ui.common.bottomsheet.MenuBottomSheet
+import com.texthip.thip.ui.common.forms.CommentTextField
+import com.texthip.thip.ui.group.note.viewmodel.CommentsEvent
+import com.texthip.thip.ui.group.note.viewmodel.CommentsUiState
+import com.texthip.thip.ui.group.note.viewmodel.CommentsViewModel
+import com.texthip.thip.ui.group.room.mock.MenuBottomSheetItem
+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.utils.rooms.advancedImePadding
+
+@Composable
+fun CommentBottomSheet(
+    uiState: CommentsUiState,
+    onDismiss: () -> Unit,
+    onProfileClick: (userId: Long) -> Unit = {},
+    onShowToast: (String) -> Unit = {},
+    viewModel: CommentsViewModel = hiltViewModel(),
+) {
+    var inputText by remember { mutableStateOf("") }
+    var replyingToCommentId by remember { mutableStateOf<Int?>(null) }
+    var replyingToNickname by remember { mutableStateOf<String?>(null) }
+
+    var selectedCommentForMenu by remember { mutableStateOf<CommentList?>(null) }
+    var selectedReplyForMenu by remember { mutableStateOf<ReplyList?>(null) }
+
+    val isOverlayVisible = selectedCommentForMenu != null || selectedReplyForMenu != null
+
+    val focusRequester = remember { FocusRequester() }
+    val listState = rememberLazyListState()
+
+    val focusManager = LocalFocusManager.current
+
+    val isKeyboardVisible = WindowInsets.ime.getBottom(LocalDensity.current) > 0
+
+    LaunchedEffect(isKeyboardVisible) {
+        if (!isKeyboardVisible) {
+            replyingToCommentId = null
+            replyingToNickname = null
+            focusManager.clearFocus()
+        }
+    }
+
+    Box(
+        if (isOverlayVisible) {
+            Modifier
+                .fillMaxSize()
+                .blur(5.dp)
+        } else {
+            Modifier.fillMaxSize()
+        }
+    ) {
+        CustomBottomSheet(onDismiss = onDismiss) {
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .fillMaxHeight(0.8f)
+                    .advancedImePadding()
+            ) {
+                Column(
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxHeight(0.8f)
+                ) {
+                    Text(
+                        text = stringResource(R.string.comments),
+                        style = typography.title_b700_s20_h24,
+                        color = colors.White,
+                        modifier = Modifier.padding(start = 20.dp, top = 20.dp, end = 20.dp)
+                    )
+
+                    Box(modifier = Modifier.weight(1f)) {
+                        if (uiState.isLoading) {
+                            Column(
+                                modifier = Modifier.fillMaxSize(),
+                                verticalArrangement = Arrangement.Center,
+                                horizontalAlignment = Alignment.CenterHorizontally
+                            ) {
+                                CircularProgressIndicator()
+                            }
+                        } else if (uiState.comments.isEmpty()) {
+                            EmptyCommentView()
+                        } else {
+                            CommentLazyList(
+                                listState = listState,
+                                commentList = uiState.comments,
+                                isLoadingMore = uiState.isLoadingMore,
+                                isLastPage = uiState.isLast,
+                                onLoadMore = { viewModel.onEvent(CommentsEvent.LoadMoreComments) },
+                                onReplyClick = { commentId, nickname ->
+                                    replyingToCommentId = commentId
+                                    replyingToNickname = nickname
+
+                                    focusRequester.requestFocus()
+                                },
+                                onEvent = viewModel::onEvent,
+                                onCommentLongPress = { comment ->
+                                    selectedCommentForMenu = comment
+                                },
+                                onReplyLongPress = { reply -> selectedReplyForMenu = reply },
+                                onProfileClick = onProfileClick
+                            )
+                        }
+                    }
+                }
+
+                CommentTextField(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .focusRequester(focusRequester),
+                    hint = stringResource(R.string.reply_to),
+                    input = inputText,
+                    onInputChange = { inputText = it },
+                    onSendClick = {
+                        viewModel.onEvent(
+                            CommentsEvent.CreateComment(
+                                content = inputText,
+                                parentId = replyingToCommentId
+                            )
+                        )
+                        inputText = ""
+                        replyingToCommentId = null
+                        replyingToNickname = null
+                        focusManager.clearFocus()
+                    },
+                    replyTo = replyingToNickname,
+                    onCancelReply = {
+                        replyingToCommentId = null
+                        replyingToNickname = null
+                    }
+                )
+            }
+        }
+    }
+
+    val itemForMenu = selectedCommentForMenu ?: selectedReplyForMenu
+    if (itemForMenu != null) {
+        val isWriter = when (itemForMenu) {
+            is CommentList -> itemForMenu.isWriter
+            is ReplyList -> itemForMenu.isWriter
+            else -> false
+        }
+
+        MenuBottomSheet(
+            items = if (isWriter) {
+                listOf(
+                    MenuBottomSheetItem(
+                        text = stringResource(R.string.delete),
+                        color = colors.Red,
+                        onClick = {
+                            val commentId = when (val item = itemForMenu) {
+                                is CommentList -> item.commentId
+                                is ReplyList -> item.commentId
+                                else -> null
+                            }
+                            commentId?.let { viewModel.onEvent(CommentsEvent.DeleteComment(it)) }
+                            onShowToast("댓글 삭제를 완료했습니다.")
+
+                            selectedCommentForMenu = null
+                            selectedReplyForMenu = null
+                        }
+                    )
+                )
+            } else {
+                listOf(
+                    MenuBottomSheetItem(
+                        text = stringResource(R.string.report),
+                        color = colors.Red,
+                        onClick = {
+                            onShowToast("댓글 신고를 완료했습니다.")
+                            selectedCommentForMenu = null
+                            selectedReplyForMenu = null
+                        }
+                    )
+                )
+            },
+            onDismiss = {
+                selectedCommentForMenu = null
+                selectedReplyForMenu = null
+            }
+        )
+    }
+}
+
+@Composable
+private fun CommentLazyList(
+    listState: LazyListState,
+    commentList: List<CommentList>,
+    isLoadingMore: Boolean,
+    isLastPage: Boolean,
+    onLoadMore: () -> Unit,
+    onReplyClick: (commentId: Int, nickname: String?) -> Unit,
+    onEvent: (CommentsEvent) -> Unit,
+    onCommentLongPress: (CommentList) -> Unit,
+    onReplyLongPress: (ReplyList) -> Unit,
+    onProfileClick: (userId: Long) -> Unit
+) {
+    val isScrolledToEnd by remember {
+        derivedStateOf {
+            val layoutInfo = listState.layoutInfo
+            if (layoutInfo.totalItemsCount == 0) return@derivedStateOf false
+            val lastVisibleItemIndex = layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0
+            lastVisibleItemIndex >= layoutInfo.totalItemsCount - 1
+        }
+    }
+
+    LaunchedEffect(isScrolledToEnd) {
+        if (isScrolledToEnd && !isLoadingMore && !isLastPage) {
+            onLoadMore()
+        }
+    }
+
+    LazyColumn(state = listState) {
+        items(
+            items = commentList,
+            key = { comment ->
+                // commentId가 있으면 사용
+                comment.commentId
+                // 없다면(삭제된 댓글), replyList의 첫 번째 항목 ID를 사용
+                    ?: comment.replyList.firstOrNull()?.commentId
+                    // 그것마저 없다면(마지막 답글까지 삭제된 경우), 객체 자체의 hashCode를 사용
+                    ?: comment.hashCode()
+            }
+        ) { comment ->
+            CommentSection(
+                commentItem = comment,
+                onReplyClick = onReplyClick,
+                onEvent = onEvent,
+                onCommentLongPress = onCommentLongPress,
+                onReplyLongPress = onReplyLongPress,
+                onProfileClick = onProfileClick
+            )
+        }
+
+        if (isLoadingMore) {
+            item {
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(vertical = 16.dp),
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    CircularProgressIndicator()
+                }
+            }
+        }
+    }
+}
+
+
+@Composable
+private fun EmptyCommentView() {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(bottom = 60.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        Text(
+            text = stringResource(R.string.no_comments_yet),
+            style = typography.smalltitle_sb600_s18_h24,
+            color = colors.White
+        )
+        Text(
+            text = stringResource(R.string.no_comment_subtext),
+            style = typography.copy_r400_s14,
+            color = colors.Grey,
+            modifier = Modifier.padding(top = 4.dp)
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun CommentBottomSheetPreview() {
+    ThipTheme {
+        var showSheet by remember { mutableStateOf(true) }
+        if (showSheet) {
+            CommentBottomSheet(
+                uiState = CommentsUiState(
+                    comments = listOf(
+                        CommentList(
+                            commentId = 1,
+                            creatorId = 1,
+                            creatorNickname = "User1",
+                            content = "This is a comment.",
+                            postDate = "2023-10-01",
+                            likeCount = 5,
+                            creatorProfileImageUrl = "https://example.com/image1.jpg",
+                            aliasName = "칭호칭호",
+                            aliasColor = "#A0F8E8",
+                            isDeleted = false,
+                            isLike = false,
+                            isWriter = false,
+                            replyList = emptyList()
+                        )
+                    ),
+                    isLoading = false,
+                    isLoadingMore = false,
+                    isLast = false
+                ),
+                onDismiss = { showSheet = false },
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentItem.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentItem.kt
new file mode 100644
index 00000000..75619137
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentItem.kt
@@ -0,0 +1,173 @@
+package com.texthip.thip.ui.group.note.component
+
+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
+import androidx.compose.foundation.layout.Row
+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.input.pointer.pointerInput
+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.data.model.comments.response.CommentList
+import com.texthip.thip.ui.common.header.ProfileBarFeed
+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.utils.color.hexToColor
+
+@Composable
+fun CommentItem(
+    modifier: Modifier = Modifier,
+    data: CommentList,
+    onReplyClick: (String?) -> Unit = { },
+    onLikeClick: () -> Unit = {},
+    onLongPress: () -> Unit = {},
+    onProfileClick: () -> Unit = {}
+) {
+    Box {
+        if (data.isDeleted) {
+            Text(
+                text = stringResource(R.string.comment_deleted),
+                style = typography.feedcopy_r400_s14_h20,
+                color = colors.Grey02,
+            )
+        } else {
+            Column(
+                modifier = modifier.pointerInput(Unit) {
+                    detectTapGestures(onLongPress = { onLongPress() })
+                },
+                verticalArrangement = Arrangement.spacedBy(12.dp)
+            ) {
+                data
+                ProfileBarFeed(
+                    profileImage = data.creatorProfileImageUrl,
+                    nickname = data.creatorNickname ?: "",
+                    genreName = data.aliasName ?: "",
+                    genreColor = hexToColor(data.aliasColor ?: "#FFFFFF"),
+                    date = data.postDate ?: "",
+                    onClick = onProfileClick
+                )
+
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(20.dp)
+                ) {
+                    Column(
+                        modifier = Modifier
+                            .weight(1f),
+                        verticalArrangement = Arrangement.spacedBy(12.dp)
+                    ) {
+                        data.content?.let {
+                            Text(
+                                text = it,
+                                color = colors.Grey,
+                                style = typography.feedcopy_r400_s14_h20,
+                            )
+                        }
+                        Text(
+                            modifier = Modifier.clickable(onClick = { onReplyClick(data.creatorNickname) }),
+                            text = stringResource(R.string.write_reply),
+                            style = typography.menu_sb600_s12,
+                            color = colors.Grey02,
+                        )
+                    }
+
+                    Column(
+                        modifier = Modifier.clickable(onClick = onLikeClick),
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        verticalArrangement = Arrangement.spacedBy(2.dp),
+                    ) {
+                        Icon(
+                            painter = painterResource(if (data.isLike) R.drawable.ic_heart_center_filled else R.drawable.ic_heart_center),
+                            contentDescription = null,
+                            tint = Color.Unspecified
+                        )
+                        Text(
+                            text = data.likeCount.toString(),
+                            style = typography.navi_m500_s10,
+                            color = colors.White,
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@Preview
+@Composable
+private fun CommentItemPreview() {
+    ThipTheme {
+        Column(
+            modifier = Modifier
+                .clickable { /* TODO: Handle click */ }
+                .padding(16.dp),
+            verticalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            CommentItem(
+                data = CommentList(
+                    commentId = 1,
+                    creatorId = 1,
+                    creatorNickname = "User1",
+                    creatorProfileImageUrl = "https://example.com/image1.jpg",
+                    aliasName = "칭호칭호",
+                    aliasColor = "#FF5733",
+                    content = "This is a comment.",
+                    postDate = "2023-10-01T12:00:00Z",
+                    isLike = false,
+                    likeCount = 10,
+                    isDeleted = false,
+                    isWriter = false,
+                    replyList = emptyList()
+                ),
+            )
+
+            CommentItem(
+                data = CommentList(
+                    commentId = 1,
+                    creatorId = 1,
+                    creatorNickname = "User1",
+                    creatorProfileImageUrl = "https://example.com/image1.jpg",
+                    aliasName = "칭호칭호",
+                    aliasColor = "#FF5733",
+                    content = "This is a comment.",
+                    postDate = "2023-10-01T12:00:00Z",
+                    isLike = false,
+                    likeCount = 10,
+                    isDeleted = false,
+                    isWriter = false,
+                    replyList = emptyList()
+                ),
+            )
+
+            CommentItem(
+                data = CommentList(
+                    commentId = 1,
+                    creatorId = 1,
+                    creatorNickname = "User1",
+                    creatorProfileImageUrl = "https://example.com/image1.jpg",
+                    aliasName = "칭호칭호",
+                    aliasColor = "#FF5733",
+                    content = "This is a comment.",
+                    postDate = "2023-10-01T12:00:00Z",
+                    isLike = false,
+                    likeCount = 10,
+                    isDeleted = false,
+                    isWriter = false,
+                    replyList = emptyList()
+                ),
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentSection.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentSection.kt
new file mode 100644
index 00000000..12a38e08
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/CommentSection.kt
@@ -0,0 +1,105 @@
+package com.texthip.thip.ui.group.note.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.data.model.comments.response.CommentList
+import com.texthip.thip.data.model.comments.response.ReplyList
+import com.texthip.thip.ui.group.note.viewmodel.CommentsEvent
+import com.texthip.thip.ui.theme.ThipTheme
+
+@Composable
+fun CommentSection(
+    commentItem: CommentList,
+    onReplyClick: (commentId: Int, nickname: String?) -> Unit,
+    onEvent: (CommentsEvent) -> Unit = { _ -> },
+    onCommentLongPress: (CommentList) -> Unit = { _ -> },
+    onReplyLongPress: (ReplyList) -> Unit = { _ -> },
+    onProfileClick: (userId: Long) -> Unit = {},
+) {
+    Box {
+        Column(
+            modifier = Modifier
+                .fillMaxHeight()
+                .padding(20.dp),
+            verticalArrangement = Arrangement.spacedBy(20.dp),
+            horizontalAlignment = Alignment.Start
+        ) {
+            CommentItem(
+                data = commentItem,
+                onReplyClick = {
+                    // commentId가 null이 아닐 때만 답글 달기 가능
+                    // todo: 수정 가능
+                    commentItem.commentId?.let { id ->
+                        onReplyClick(id, commentItem.creatorNickname)
+                    }
+                },
+                onLikeClick = {
+                    // commentId가 null이 아닐 때만 좋아요 가능
+                    // todo: 수정 가능
+                    commentItem.commentId?.let { id ->
+                        onEvent(CommentsEvent.LikeComment(id))
+                    }
+                },
+                onLongPress = { onCommentLongPress(commentItem) },
+
+                onProfileClick = {
+                    commentItem.creatorId?.let { id -> onProfileClick(id) }
+                }
+            )
+
+            commentItem.replyList.forEach { reply ->
+                ReplyItem(
+                    data = reply,
+                    onReplyClick = {
+                        commentItem.commentId?.let { parentId ->
+                            onReplyClick(parentId, reply.creatorNickname)
+                        }
+                    },
+                    onLikeClick = {
+                        onEvent(CommentsEvent.LikeReply(reply.commentId))
+                    },
+                    onLongPress = { onReplyLongPress(reply) },
+                    onProfileClick = { onProfileClick(reply.creatorId) }
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun CommentSectionPreview() {
+    ThipTheme {
+        Column {
+            CommentSection(
+                commentItem =
+                    CommentList(
+                        commentId = 1,
+                        creatorId = 1,
+                        creatorNickname = "User1",
+                        creatorProfileImageUrl = "https://example.com/image1.jpg",
+                        aliasName = "칭호칭호",
+                        aliasColor = "#A0F8E8",
+                        content = "This is a comment.",
+                        postDate = "2023-10-01",
+                        isLike = false,
+                        likeCount = 10,
+                        isDeleted = false,
+                        replyList = emptyList(),
+                        isWriter = false
+                    ),
+                onReplyClick = { commentId, nickname ->
+                    // Handle reply click
+                },
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/FilterHeaderSection.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/FilterHeaderSection.kt
new file mode 100644
index 00000000..5a6b0c56
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/FilterHeaderSection.kt
@@ -0,0 +1,116 @@
+package com.texthip.thip.ui.group.note.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+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.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.FilterChipButton
+import com.texthip.thip.ui.common.buttons.FormButton
+import com.texthip.thip.ui.common.buttons.OptionChipButton
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun FilterHeaderSection(
+    modifier: Modifier = Modifier,
+    firstPage: String,
+    lastPage: String,
+    isTotalSelected: Boolean,
+    totalEnabled: Boolean = true,
+    onFirstPageChange: (String) -> Unit,
+    onLastPageChange: (String) -> Unit,
+    onTotalToggle: () -> Unit,
+    onDisabledClick: () -> Unit = { },
+    onApplyPageFilter: () -> Unit
+) {
+    var isPageInputVisible by rememberSaveable { mutableStateOf(false) }
+    val isPageFiltered = firstPage.isNotBlank() || lastPage.isNotBlank()
+
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 20.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        Row(
+            modifier = Modifier.align(Alignment.CenterStart),
+            horizontalArrangement = Arrangement.spacedBy(16.dp)
+        ) {
+            FilterChipButton(
+                text = stringResource(R.string.view_by_page),
+                isSelected = isPageFiltered,
+                onClick = {
+                    if (!isPageInputVisible) {
+                        isPageInputVisible = true
+                    }
+                },
+                onCloseClick = {
+                    isPageInputVisible = true
+                }
+            )
+
+            OptionChipButton(
+                modifier = Modifier.height(36.dp),
+                text = stringResource(R.string.view_by_all),
+                isFilled = true,
+                isSelected = isTotalSelected,
+                enabled = totalEnabled,
+                textStyle = typography.menu_r400_s14_h24,
+                onClick = {
+                    if (!isPageInputVisible) {
+                        onTotalToggle()
+                    }
+                },
+                onDisabledClick = {
+                    if (!isPageInputVisible) {
+                        onDisabledClick()
+                    }
+                },
+            )
+        }
+
+        if (isPageInputVisible) {
+            FormButton(
+                firstPage = firstPage,
+                onFirstPageChange = onFirstPageChange,
+                lastPage = lastPage,
+                onLastPageChange = onLastPageChange,
+                onFinishClick = {
+                    onApplyPageFilter()
+                    isPageInputVisible = false
+                }
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun FilterHeaderSectionPreview() {
+    var firstPage by rememberSaveable { mutableStateOf("") }
+    var lastPage by rememberSaveable { mutableStateOf("") }
+    var isTotalSelected by rememberSaveable { mutableStateOf(false) }
+
+    FilterHeaderSection(
+        firstPage = firstPage,
+        lastPage = lastPage,
+        isTotalSelected = isTotalSelected,
+        onFirstPageChange = { firstPage = it },
+        onLastPageChange = { lastPage = it },
+        onTotalToggle = { isTotalSelected = !isTotalSelected },
+        totalEnabled = true,
+        onApplyPageFilter = {},
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/OpinionInputSection.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/OpinionInputSection.kt
new file mode 100644
index 00000000..f6ac4950
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/OpinionInputSection.kt
@@ -0,0 +1,103 @@
+package com.texthip.thip.ui.group.note.component
+
+import androidx.compose.foundation.background
+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.fillMaxWidth
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun OpinionInputSection(
+    title: String = stringResource(R.string.my_opinion_title),
+    textFieldValue: TextFieldValue,
+    onTextChange: (TextFieldValue) -> Unit,
+    hint: String = stringResource(R.string.my_opinion_placeholder),
+    maxLength: Int = 500,
+    focusRequester: FocusRequester = remember { FocusRequester() }
+) {
+    val text = textFieldValue.text
+
+    Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
+        Text(
+            text = title,
+            style = typography.smalltitle_sb600_s18_h24,
+            color = colors.White
+        )
+
+        Box(
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            BasicTextField(
+                value = textFieldValue,
+                onValueChange = { newTextFieldValue ->
+                    if (newTextFieldValue.text.length <= maxLength) {
+                        onTextChange(newTextFieldValue)
+                    }
+                },
+                textStyle = typography.menu_r400_s14_h24.copy(color = colors.White),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .focusRequester(focusRequester),
+                cursorBrush = SolidColor(colors.NeonGreen),
+                decorationBox = { innerTextField ->
+                    Box(
+                        modifier = Modifier.background(color = colors.Black)
+                    ) {
+                        if (text.isEmpty()) {
+                            Text(
+                                text = hint,
+                                color = colors.Grey02,
+                                style = typography.menu_r400_s14_h24
+                            )
+                        }
+                        innerTextField()
+                    }
+                }
+            )
+        }
+
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.End
+        ) {
+            Text(
+                text = stringResource(R.string.group_input_count, text.length, maxLength),
+                color = colors.NeonGreen,
+                style = typography.info_r400_s12
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun OpinionInputSectionPreview() {
+    var value by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+        mutableStateOf(TextFieldValue(""))
+    }
+
+    OpinionInputSection(
+        textFieldValue = value,
+        onTextChange = { value = it }
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/PageInputSection.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/PageInputSection.kt
new file mode 100644
index 00000000..a77b9233
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/PageInputSection.kt
@@ -0,0 +1,143 @@
+package com.texthip.thip.ui.group.note.component
+
+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.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.LayoutCoordinates
+import androidx.compose.ui.layout.onGloballyPositioned
+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.ToggleSwitchButton
+import com.texthip.thip.ui.common.forms.BookPageTextField
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun PageInputSection(
+    title: String = stringResource(R.string.page_to_record),
+    pageText: String,
+    onPageTextChange: (String) -> Unit,
+    isGeneralReview: Boolean,
+    onGeneralReviewToggle: (Boolean) -> Unit,
+    bookTotalPage: Int,
+    isEligible: Boolean,
+    onInfoClick: () -> Unit,
+    onInfoPositionCaptured: (LayoutCoordinates) -> Unit,
+    isEnabled: Boolean = true
+) {
+    val allRangeText = stringResource(R.string.all_range)
+    val isError = remember(pageText, bookTotalPage, isGeneralReview) {
+        if (isGeneralReview) {
+            false
+        } else {
+            pageText.toIntOrNull()?.let { it > bookTotalPage } ?: false
+        }
+    }
+
+    Column(
+        modifier = Modifier,
+        verticalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+        Text(
+            text = title,
+            style = typography.smalltitle_sb600_s18_h24,
+            color = colors.White
+        )
+
+        Box(
+            modifier = Modifier.height(90.dp),
+        ) {
+            BookPageTextField(
+                modifier = Modifier.fillMaxWidth(),
+                bookTotalPage = bookTotalPage,
+                text = if (isGeneralReview) allRangeText else pageText,
+                onValueChange = {
+                    if (!isGeneralReview) onPageTextChange(it)
+                },
+                enabled = !isGeneralReview && isEnabled,
+                readOnly = !isEnabled,
+                isError = isError,
+                showClearButton = !isGeneralReview,
+                showTotalPage = !isGeneralReview
+            )
+
+            if (isEnabled) {
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .align(Alignment.BottomEnd),
+                    horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.End),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Row(
+                        horizontalArrangement = Arrangement.spacedBy(4.dp),
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Icon(
+                            painter = painterResource(R.drawable.ic_information),
+                            contentDescription = null,
+                            modifier = Modifier
+                                .size(20.dp)
+                                .onGloballyPositioned { coordinates ->
+                                    onInfoPositionCaptured(coordinates)
+                                }
+                                .clickable { onInfoClick() },
+                            tint = colors.Grey02
+                        )
+
+                        Text(
+                            text = stringResource(R.string.general_review),
+                            style = typography.info_r400_s12,
+                            color = colors.Grey
+                        )
+                    }
+
+                    ToggleSwitchButton(
+                        isChecked = isGeneralReview,
+                        onToggleChange = { checked ->
+                            onGeneralReviewToggle(checked)
+                            onPageTextChange(if (checked) allRangeText else "")
+                        },
+                        enabled = isEligible
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun PageInputSectionPreview() {
+    var pageText by rememberSaveable { mutableStateOf("") }
+    var isGeneralReview by rememberSaveable { mutableStateOf(false) }
+
+    PageInputSection(
+        pageText = pageText,
+        onPageTextChange = { pageText = it },
+        isGeneralReview = isGeneralReview,
+        onGeneralReviewToggle = { isGeneralReview = it },
+        bookTotalPage = 500,
+        isEligible = true,
+        onInfoClick = {},
+        onInfoPositionCaptured = {}
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/ReplyItem.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/ReplyItem.kt
new file mode 100644
index 00000000..16cc0e1c
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/ReplyItem.kt
@@ -0,0 +1,148 @@
+package com.texthip.thip.ui.group.note.component
+
+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
+import androidx.compose.foundation.layout.Row
+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.input.pointer.pointerInput
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.data.model.comments.response.ReplyList
+import com.texthip.thip.ui.common.header.ProfileBarFeed
+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.utils.color.hexToColor
+
+@Composable
+fun ReplyItem(
+    modifier: Modifier = Modifier,
+    data: ReplyList,
+    onReplyClick: () -> Unit = { },
+    onLikeClick: () -> Unit = {},
+    onLongPress: () -> Unit = {},
+    onProfileClick: () -> Unit = {}
+) {
+    Box {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
+            Icon(
+                painter = painterResource(R.drawable.ic_reply),
+                contentDescription = null,
+                tint = colors.White
+            )
+
+            Column(
+                modifier = modifier.pointerInput(Unit) {
+                    detectTapGestures(onLongPress = { onLongPress() })
+                },
+                verticalArrangement = Arrangement.spacedBy(12.dp)
+            ) {
+                ProfileBarFeed(
+                    profileImage = data.creatorProfileImageUrl,
+                    nickname = data.creatorNickname,
+                    genreName = data.aliasName,
+                    genreColor = hexToColor(data.aliasColor),
+                    date = data.postDate,
+                    onClick = onProfileClick
+                )
+
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(20.dp)
+                ) {
+                    Column(
+                        modifier = Modifier
+                            .weight(1f),
+                        verticalArrangement = Arrangement.spacedBy(12.dp)
+                    ) {
+                        Text(
+                            text = buildAnnotatedString {
+                                withStyle(
+                                    style = typography.copy_m500_s14_h20.copy(color = colors.White)
+                                        .toSpanStyle()
+                                ) {
+                                    append(
+                                        stringResource(R.string.annotation) + data.parentCommentCreatorNickname + stringResource(
+                                            R.string.space_bar
+                                        )
+                                    )
+                                }
+                                append(data.content)
+                            },
+                            color = colors.Grey,
+                            style = typography.feedcopy_r400_s14_h20,
+                        )
+                        Text(
+                            modifier = Modifier.clickable(onClick = onReplyClick),
+                            text = stringResource(R.string.write_reply),
+                            style = typography.menu_sb600_s12,
+                            color = colors.Grey02,
+                        )
+                    }
+
+                    Column(
+                        modifier = Modifier.clickable(onClick = onLikeClick),
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        verticalArrangement = Arrangement.spacedBy(2.dp),
+                    ) {
+                        Icon(
+                            painter = painterResource(if (data.isLike) R.drawable.ic_heart_center_filled else R.drawable.ic_heart_center),
+                            contentDescription = null,
+                            tint = Color.Unspecified
+                        )
+                        Text(
+                            text = data.likeCount.toString(),
+                            style = typography.navi_m500_s10,
+                            color = colors.White,
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun ReplyItemPreview() {
+    ThipTheme {
+        Column(
+            modifier = Modifier
+                .clickable { /* TODO: Handle click */ }
+                .padding(16.dp),
+            verticalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            ReplyItem(
+                data = ReplyList(
+                    commentId = 1,
+                    parentCommentCreatorNickname = "User1",
+                    creatorId = 2,
+                    creatorNickname = "User1",
+                    aliasName = "칭호칭호",
+                    aliasColor = "#FF5733",
+                    creatorProfileImageUrl = "https://example.com/image2.jpg",
+                    content = "This is a reply.",
+                    postDate = "2023-10-01T12:05:00Z",
+                    isLike = false,
+                    isWriter = false,
+                    likeCount = 5
+                ),
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/TextCommentCard.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/TextCommentCard.kt
new file mode 100644
index 00000000..a6269de5
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/TextCommentCard.kt
@@ -0,0 +1,109 @@
+package com.texthip.thip.ui.group.note.component
+
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.blur
+import androidx.compose.ui.input.pointer.pointerInput
+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.data.model.rooms.response.PostList
+import com.texthip.thip.ui.common.buttons.ActionBarButton
+import com.texthip.thip.ui.common.header.ProfileBar
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun TextCommentCard(
+    modifier: Modifier = Modifier,
+    data: PostList,
+    onLikeClick: (postId: Int, postType: String) -> Unit = { _, _ -> },
+    onCommentClick: () -> Unit = {},
+    onLongPress: () -> Unit = {},
+    onPinClick: () -> Unit = {},
+    onProfileClick: () -> Unit = {}
+) {
+    val isLocked = data.isLocked
+    val isWriter = data.isWriter
+
+    val pageText = if (data.isOverview) {
+        stringResource(id = R.string.general_review)
+    } else {
+        data.page.toString() + stringResource(R.string.page)
+    }
+
+    Column(
+        modifier = modifier
+            .blur(if (isLocked) 5.dp else 0.dp)
+            .pointerInput(Unit) {
+                if (!isLocked) {
+                    detectTapGestures(onLongPress = { onLongPress() })
+                }
+            }
+            .padding(start = 20.dp, end = 20.dp, top = 40.dp),
+        verticalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        ProfileBar(
+            modifier = Modifier.padding(0.dp),
+            profileImage = data.profileImageUrl,
+            topText = data.nickName,
+            bottomText = pageText,
+            bottomTextColor = colors.Purple,
+            showSubscriberInfo = false,
+            hoursAgo = data.postDate,
+            onClick = onProfileClick
+        )
+
+        Text(
+            text = data.content,
+            style = typography.feedcopy_r400_s14_h20,
+            color = colors.Grey,
+        )
+
+        ActionBarButton(
+            isLiked = data.isLiked,
+            likeCount = data.likeCount,
+            commentCount = data.commentCount,
+            isPinVisible = isWriter,
+            onLikeClick = {
+                if (!isLocked) onLikeClick(data.postId, data.postType)
+            },
+            onCommentClick = {
+                if (!isLocked) onCommentClick()
+            },
+            onPinClick = {
+                if (!isLocked) onPinClick()
+            }
+        )
+    }
+}
+
+@Preview
+@Composable
+fun TextCommentCardPreview() {
+    TextCommentCard(
+        data = PostList(
+            postId = 1,
+            postType = "group",
+            page = 132,
+            postDate = "12시간 전",
+            userId = 1,
+            nickName = "user.01",
+            profileImageUrl = "https://example.com/profile.jpg",
+            content = "내 생각에 이 부분이 가장 어려운 것 같다. 비유도 난해하고 잘 이해가 가지 않는데 다른 메이트들은 어떻게 읽었나요?",
+            likeCount = 123,
+            commentCount = 123,
+            isLiked = true,
+            isWriter = false,
+            isLocked = false,
+            isOverview = false,
+            voteItems = emptyList()
+        )
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/VoteCommentCard.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/VoteCommentCard.kt
new file mode 100644
index 00000000..8f072d34
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/VoteCommentCard.kt
@@ -0,0 +1,128 @@
+package com.texthip.thip.ui.group.note.component
+
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.blur
+import androidx.compose.ui.input.pointer.pointerInput
+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.data.model.rooms.response.PostList
+import com.texthip.thip.ui.common.buttons.ActionBarButton
+import com.texthip.thip.ui.common.buttons.GroupVoteButton
+import com.texthip.thip.ui.common.header.ProfileBar
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun VoteCommentCard(
+    modifier: Modifier = Modifier,
+    data: PostList,
+    onLikeClick: (postId: Int, postType: String) -> Unit = { _, _ -> },
+    onVote: (postId: Int, voteItemId: Int, type: Boolean) -> Unit = { _, _, _ -> },
+    onCommentClick: () -> Unit = {},
+    onLongPress: () -> Unit = {},
+    onProfileClick: () -> Unit = {}
+) {
+    val selectedIndex = data.voteItems.indexOfFirst { it.isVoted }.takeIf { it != -1 }
+    val hasVoted = selectedIndex != null
+
+    val isLocked = data.isLocked
+
+    val pageText = if (data.isOverview) {
+        stringResource(id = R.string.general_review)
+    } else {
+        data.page.toString() + stringResource(R.string.page)
+    }
+
+    Column(
+        modifier = modifier
+            .blur(if (isLocked) 5.dp else 0.dp)
+            .pointerInput(Unit) {
+                if (!isLocked) {
+                    detectTapGestures(onLongPress = { onLongPress() })
+                }
+            }
+            .padding(start = 20.dp, end = 20.dp, top = 40.dp),
+        verticalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        ProfileBar(
+            profileImage = data.profileImageUrl,
+            topText = data.nickName,
+            bottomText = pageText,
+            bottomTextColor = colors.Purple,
+            showSubscriberInfo = false,
+            hoursAgo = data.postDate,
+            onClick = onProfileClick
+        )
+
+        Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            Text(
+                text = data.content,
+                style = typography.feedcopy_r400_s14_h20,
+                color = colors.White,
+            )
+
+            GroupVoteButton(
+                voteItems = data.voteItems,
+                selectedIndex = selectedIndex,
+                hasVoted = hasVoted,
+                onOptionSelected = { index ->
+                    if (!isLocked) {
+                        if (index == null) {
+                            selectedIndex?.let {
+                                val votedItemId = data.voteItems[it].voteItemId
+                                onVote(data.postId, votedItemId, false) // type: false (취소)
+                            }
+                        } else {
+                            val votedItemId = data.voteItems[index].voteItemId
+                            onVote(data.postId, votedItemId, true) // type: true (투표)
+                        }
+                    }
+                }
+            )
+        }
+
+        ActionBarButton(
+            isLiked = data.isLiked,
+            likeCount = data.likeCount,
+            commentCount = data.commentCount,
+            onLikeClick = {
+                if (!isLocked) onLikeClick(data.postId, data.postType)
+            },
+            onCommentClick = {
+                if (!isLocked) onCommentClick()
+            }
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun VoteCommentCardPreview() {
+    VoteCommentCard(
+        data = PostList(
+            postId = 1,
+            postType = "group",
+            page = 132,
+            postDate = "12시간 전",
+            userId = 1,
+            nickName = "user.01",
+            profileImageUrl = "https://example.com/profile.jpg",
+            content = "내 생각에 이 부분이 가장 어려운 것 같다. 비유도 난해하고 잘 이해가 가지 않는데 다른 메이트들은 어떻게 읽었나요?",
+            likeCount = 123,
+            commentCount = 123,
+            isLiked = true,
+            isWriter = false,
+            isLocked = false,
+            isOverview = false,
+            voteItems = emptyList()
+        )
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/component/VoteInputSection.kt b/app/src/main/java/com/texthip/thip/ui/group/note/component/VoteInputSection.kt
new file mode 100644
index 00000000..7e58bf78
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/component/VoteInputSection.kt
@@ -0,0 +1,144 @@
+package com.texthip.thip.ui.group.note.component
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.TextFieldValue
+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.BorderedTextField
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun VoteInputSection(
+    titleValue: TextFieldValue,
+    onTitleChange: (TextFieldValue) -> Unit,
+    options: List<String>,
+    onOptionChange: (index: Int, newText: String) -> Unit,
+    onAddOption: () -> Unit,
+    onRemoveOption: (index: Int) -> Unit,
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = true,
+    maxOptionLength: Int = 20,
+    maxOptions: Int = 5,
+    focusRequester: FocusRequester = remember { FocusRequester() },
+) {
+    val focusManager = LocalFocusManager.current
+
+    Column(
+        modifier = modifier
+            .clickable(
+                enabled = isEnabled,
+                indication = null,
+                interactionSource = remember { MutableInteractionSource() }
+            ) {
+                focusManager.clearFocus() // 바깥 클릭 시 포커스 해제
+            },
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        BasicTextField(
+            value = titleValue,
+            onValueChange = { if (it.text.length <= maxOptionLength) onTitleChange(it) },
+            textStyle = typography.smalltitle_m500_s18_h24.copy(color = colors.White),
+            modifier = Modifier
+                .fillMaxWidth()
+                .focusRequester(focusRequester),
+            cursorBrush = SolidColor(colors.NeonGreen),
+            decorationBox = { innerTextField ->
+                if (titleValue.text.isEmpty()) {
+                    Text(
+                        text = stringResource(R.string.vote_title_placeholder),
+                        color = colors.Grey02,
+                        style = typography.smalltitle_m500_s18_h24
+                    )
+                }
+                innerTextField()
+            }
+        )
+
+        options.forEachIndexed { index, option ->
+            val canRemove = index >= 2 // 3번째 항목부터 삭제 가능
+            BorderedTextField(
+                text = option,
+                onTextChange = {
+                    if (it.length <= maxOptionLength) onOptionChange(index, it)
+                },
+                onDelete = { onOptionChange(index, "") }, // x 버튼 클릭 시 내용 삭제
+                onRemoveField = { if (canRemove) onRemoveOption(index) }, // 쓰레기통 클릭 시 항목 제거
+                canRemove = canRemove,
+                isEnabled = isEnabled,
+                hint = stringResource(R.string.vote_content_placeholder)
+            )
+        }
+
+        if (options.size < maxOptions && isEnabled) {
+            Button(
+                onClick = {
+                    focusManager.clearFocus() // 항목 추가 시 포커스 해제
+                    onAddOption()
+                },
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(44.dp),
+                shape = RoundedCornerShape(12.dp),
+                colors = ButtonDefaults.buttonColors(
+                    containerColor = colors.White,
+                ),
+            ) {
+                Text(
+                    text = stringResource(R.string.add_content),
+                    style = typography.smalltitle_sb600_s16_h24,
+                    color = colors.Black
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun VoteInputSectionPreview() {
+    var value by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+        mutableStateOf(TextFieldValue(""))
+    }
+    var options by rememberSaveable { mutableStateOf(mutableListOf("", "")) }
+
+    VoteInputSection(
+        titleValue = value,
+        onTitleChange = { value = it },
+        options = options,
+        onOptionChange = { index, newText ->
+            options = options.toMutableList().also { it[index] = newText }
+        },
+        onAddOption = {
+            if (options.size < 5) {
+                options = options.toMutableList().also { it.add("") }
+            }
+        },
+        onRemoveOption = { index ->
+            options = options.toMutableList().also { it.removeAt(index) }
+        }
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupNoteCreateScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupNoteCreateScreen.kt
new file mode 100644
index 00000000..267f86eb
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupNoteCreateScreen.kt
@@ -0,0 +1,185 @@
+package com.texthip.thip.ui.group.note.screen
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.absoluteOffset
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+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.focus.FocusRequester
+import androidx.compose.ui.layout.LayoutCoordinates
+import androidx.compose.ui.layout.positionInRoot
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.modal.ArrowPosition
+import com.texthip.thip.ui.common.modal.PopupModal
+import com.texthip.thip.ui.common.topappbar.InputTopAppBar
+import com.texthip.thip.ui.group.note.component.OpinionInputSection
+import com.texthip.thip.ui.group.note.component.PageInputSection
+import com.texthip.thip.ui.group.note.viewmodel.GroupNoteCreateEvent
+import com.texthip.thip.ui.group.note.viewmodel.GroupNoteCreateUiState
+import com.texthip.thip.ui.group.note.viewmodel.GroupNoteCreateViewModel
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.utils.rooms.advancedImePadding
+import kotlinx.coroutines.delay
+
+@Composable
+fun GroupNoteCreateScreen(
+    roomId: Int,
+    recentPage: Int,
+    totalPage: Int,
+    isOverviewPossible: Boolean,
+    postId: Int?,
+    page: Int?,
+    content: String?,
+    isOverview: Boolean?,
+    onBackClick: () -> Unit,
+    onNavigateBackWithResult: () -> Unit,
+    viewModel: GroupNoteCreateViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+
+    LaunchedEffect(key1 = Unit) {
+        viewModel.initialize(
+            roomId, recentPage, totalPage, isOverviewPossible,
+            postId, page, content, isOverview
+        )
+    }
+
+    LaunchedEffect(key1 = uiState.isSuccess) {
+        if (uiState.isSuccess) {
+            onNavigateBackWithResult()
+        }
+    }
+
+    GroupNoteCreateContent(
+        uiState = uiState,
+        onEvent = viewModel::onEvent,
+        onBackClick = onBackClick
+    )
+}
+
+@Composable
+fun GroupNoteCreateContent(
+    uiState: GroupNoteCreateUiState,
+    onEvent: (GroupNoteCreateEvent) -> Unit,
+    onBackClick: () -> Unit
+) {
+    val density = LocalDensity.current
+    var showTooltip by rememberSaveable { mutableStateOf(false) }
+
+    // Tooltip 위치 측정용 state
+    val iconCoordinates = remember { mutableStateOf<LayoutCoordinates?>(null) }
+
+    val focusRequester = remember { FocusRequester() }
+
+    LaunchedEffect(uiState.isEditMode) {
+        if (uiState.isEditMode) {
+            delay(100)
+            focusRequester.requestFocus()
+        }
+    }
+
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .advancedImePadding()
+    ) {
+        Column {
+            InputTopAppBar(
+                title = if (uiState.isEditMode) {
+                    stringResource(R.string.edit_record)
+                } else {
+                    stringResource(R.string.write_record)
+                },
+                isRightButtonEnabled = uiState.isFormFilled,
+                onLeftClick = onBackClick,
+                onRightClick = { onEvent(GroupNoteCreateEvent.CreateRecordClicked) }
+            )
+
+            Column(
+                modifier = Modifier
+                    .weight(1f)
+                    .verticalScroll(rememberScrollState())
+                    .padding(vertical = 32.dp, horizontal = 20.dp),
+                verticalArrangement = Arrangement.spacedBy(32.dp),
+            ) {
+                PageInputSection(
+                    pageText = uiState.pageText,
+                    onPageTextChange = { onEvent(GroupNoteCreateEvent.PageChanged(it)) },
+                    isGeneralReview = uiState.isGeneralReview,
+                    onGeneralReviewToggle = { onEvent(GroupNoteCreateEvent.GeneralReviewToggled(it)) },
+                    isEligible = uiState.isOverviewPossible,
+                    bookTotalPage = uiState.totalPage,
+                    onInfoClick = { showTooltip = true },
+                    onInfoPositionCaptured = { iconCoordinates.value = it },
+                    isEnabled = !uiState.isEditMode
+                )
+
+                OpinionInputSection(
+                    textFieldValue = uiState.opinionTextFieldValue,
+                    onTextChange = { onEvent(GroupNoteCreateEvent.OpinionChanged(it)) },
+                    focusRequester = focusRequester
+                )
+            }
+        }
+        if (showTooltip && iconCoordinates.value != null) {
+            val yOffsetDp = with(density) {
+                iconCoordinates.value!!.positionInRoot().y.toDp()
+            }
+
+            Box(
+                modifier = Modifier
+                    .absoluteOffset(y = yOffsetDp)
+                    .padding(horizontal = 20.dp)
+                    .zIndex(1f)
+            ) {
+                PopupModal(
+                    text = stringResource(R.string.condition_of_general_review),
+                    arrowPosition = ArrowPosition.RIGHT,
+                    isEligible = uiState.isOverviewPossible,
+                    onClose = { showTooltip = false }
+                )
+            }
+        }
+
+        if (uiState.isLoading) {
+            Box(
+                modifier = Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                CircularProgressIndicator()
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun GroupNoteCreateScreenPreview() {
+    ThipTheme {
+        GroupNoteCreateContent(
+            uiState = GroupNoteCreateUiState(),
+            onEvent = {},
+            onBackClick = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupNoteScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupNoteScreen.kt
new file mode 100644
index 00000000..20440fa1
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupNoteScreen.kt
@@ -0,0 +1,677 @@
+package com.texthip.thip.ui.group.note.screen
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.foundation.background
+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.fillMaxHeight
+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.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+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.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.blur
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.platform.LocalContext
+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.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.texthip.thip.R
+import com.texthip.thip.data.model.rooms.response.PostList
+import com.texthip.thip.data.model.rooms.response.RoomsRecordsPinResponse
+import com.texthip.thip.ui.common.bottomsheet.MenuBottomSheet
+import com.texthip.thip.ui.common.buttons.ExpandableFloatingButton
+import com.texthip.thip.ui.common.buttons.FabMenuItem
+import com.texthip.thip.ui.common.buttons.FilterButton
+import com.texthip.thip.ui.common.header.HeaderMenuBarTab
+import com.texthip.thip.ui.common.modal.DialogPopup
+import com.texthip.thip.ui.common.modal.ToastWithDate
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.group.note.component.CommentBottomSheet
+import com.texthip.thip.ui.group.note.component.FilterHeaderSection
+import com.texthip.thip.ui.group.note.component.TextCommentCard
+import com.texthip.thip.ui.group.note.component.VoteCommentCard
+import com.texthip.thip.ui.group.note.viewmodel.CommentsViewModel
+import com.texthip.thip.ui.group.note.viewmodel.GroupNoteEvent
+import com.texthip.thip.ui.group.note.viewmodel.GroupNoteSideEffect
+import com.texthip.thip.ui.group.note.viewmodel.GroupNoteUiState
+import com.texthip.thip.ui.group.note.viewmodel.GroupNoteViewModel
+import com.texthip.thip.ui.group.room.mock.MenuBottomSheetItem
+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.utils.type.SortType
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+
+@Composable
+fun GroupNoteScreen(
+    roomId: Int,
+    onBackClick: () -> Unit = {},
+    onCreateNoteClick: (recentPage: Int, totalPage: Int, isOverviewPossible: Boolean) -> Unit,
+    onCreateVoteClick: (recentPage: Int, totalPage: Int, isOverviewPossible: Boolean) -> Unit,
+    onNavigateToFeedWrite: (pinInfo: RoomsRecordsPinResponse, recordContent: String) -> Unit,
+    onEditNoteClick: (post: PostList) -> Unit = {},
+    onEditVoteClick: (post: PostList) -> Unit = {},
+    onNavigateToUserProfile: (userId: Long) -> Unit = {},
+    resultTabIndex: Int? = null,
+    onResultConsumed: () -> Unit = {},
+    initialPage: Int? = null,
+    initialIsOverview: Boolean? = null,
+    viewModel: GroupNoteViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+    val scope = rememberCoroutineScope()
+
+    var showProgressBar by remember { mutableStateOf(false) }
+    val progress = remember { Animatable(0f) }
+    var progressJob by remember { mutableStateOf<Job?>(null) }
+
+    LaunchedEffect(resultTabIndex) {
+        if (resultTabIndex != null) {
+            viewModel.onEvent(GroupNoteEvent.OnTabSelected(resultTabIndex))
+            onResultConsumed()
+
+            showProgressBar = true
+            progress.snapTo(0f)
+            progressJob = scope.launch {
+                progress.animateTo(
+                    targetValue = 1f,
+                    animationSpec = tween(durationMillis = 3000, easing = LinearEasing)
+                )
+                delay(500)
+                if (showProgressBar) {
+                    showProgressBar = false
+                }
+            }
+        }
+    }
+
+    LaunchedEffect(uiState.isLoading) {
+        // 로딩이 끝났고, 프로그레스 바가 보이는 중이라면
+        if (!uiState.isLoading && showProgressBar) {
+            progressJob?.cancel() // 진행 중인 3초 애니메이션 취소
+            progress.snapTo(1f) // 즉시 100%로 변경
+            delay(500) // 100% 상태를 잠시 보여줌
+            showProgressBar = false // 프로그레스 바 숨기기
+        }
+    }
+
+    LaunchedEffect(key1 = roomId) {
+        // 기록 생성 후 돌아온 경우가 아닐 때 (처음 진입 시) 초기화
+        if (resultTabIndex == null) {
+            viewModel.initialize(roomId, initialPage, initialIsOverview)
+        }
+    }
+
+    LaunchedEffect(viewModel.sideEffect) {
+        viewModel.sideEffect.collect { effect ->
+            when (effect) {
+                is GroupNoteSideEffect.NavigateToFeedWrite -> {
+                    onNavigateToFeedWrite(effect.pinInfo, effect.recordContent)
+                }
+            }
+        }
+    }
+
+    GroupNoteContent(
+        uiState = uiState,
+        onEvent = viewModel::onEvent,
+        onBackClick = onBackClick,
+        onCreateNoteClick = {
+            uiState.let { s ->
+                onCreateNoteClick(s.recentBookPage, s.totalBookPage, s.isOverviewPossible)
+            }
+        },
+        onCreateVoteClick = {
+            uiState.let { s ->
+                onCreateVoteClick(s.recentBookPage, s.totalBookPage, s.isOverviewPossible)
+            }
+        },
+        onEditNoteClick = onEditNoteClick,
+        onEditVoteClick = onEditVoteClick,
+        onNavigateToUserProfile = onNavigateToUserProfile,
+        showProgressBar = showProgressBar,
+        progress = progress.value
+    )
+}
+
+@Composable
+fun GroupNoteContent(
+    uiState: GroupNoteUiState,
+    onEvent: (GroupNoteEvent) -> Unit,
+    onBackClick: () -> Unit,
+    onCreateNoteClick: () -> Unit,
+    onCreateVoteClick: () -> Unit,
+    onEditNoteClick: (post: PostList) -> Unit,
+    onEditVoteClick: (post: PostList) -> Unit,
+    onNavigateToUserProfile: (userId: Long) -> Unit,
+    showProgressBar: Boolean,
+    progress: Float
+) {
+    var isCommentBottomSheetVisible by remember { mutableStateOf(false) }
+    var selectedPostForComment by remember { mutableStateOf<PostList?>(null) }
+    var selectedPostForMenu by remember { mutableStateOf<PostList?>(null) }
+    var showDeleteDialog by remember { mutableStateOf(false) }
+    var isPinDialogVisible by remember { mutableStateOf(false) }
+    var postToPin by remember { mutableStateOf<PostList?>(null) }
+    var showToast by remember { mutableStateOf(false) }
+    val isOverlayVisible =
+        isCommentBottomSheetVisible || selectedPostForMenu != null || isPinDialogVisible || showDeleteDialog
+    var postToDelete by remember { mutableStateOf<PostList?>(null) }
+
+    var toastMessage by remember { mutableStateOf("") }
+    var isErrorToast by remember { mutableStateOf(false) }
+    val context = LocalContext.current
+
+    val commentsViewModel: CommentsViewModel = hiltViewModel()
+    val commentsUiState by commentsViewModel.uiState.collectAsStateWithLifecycle()
+
+    LaunchedEffect(showToast) {
+        if (showToast) {
+            delay(3000)
+            showToast = false
+        }
+    }
+
+    val tabs = listOf(stringResource(R.string.group_record), stringResource(R.string.my_record))
+    val sortDisplayStrings = remember { SortType.entries.map { it.displayNameRes } }
+        .map { stringResource(it) }
+
+    val listState = rememberLazyListState()
+
+    LaunchedEffect(uiState.selectedTabIndex) {
+        listState.scrollToItem(0)
+    }
+
+    val isScrolledToEnd by remember {
+        derivedStateOf {
+            val lastVisibleItem = listState.layoutInfo.visibleItemsInfo.lastOrNull()
+            // 마지막 아이템이 보이고, 전체 아이템 수와 일치하며, 마지막 페이지가 아닐 때
+            lastVisibleItem != null && lastVisibleItem.index == listState.layoutInfo.totalItemsCount - 1 && !uiState.isLastPage
+        }
+    }
+
+    LaunchedEffect(isScrolledToEnd) {
+        if (isScrolledToEnd) {
+            onEvent(GroupNoteEvent.LoadMorePosts)
+        }
+    }
+
+    Box(
+        if (isOverlayVisible) {
+            Modifier
+                .fillMaxSize()
+                .blur(5.dp)
+        } else {
+            Modifier.fillMaxSize()
+        }
+    ) {
+        Box {
+            Column(modifier = Modifier.fillMaxSize()) {
+                DefaultTopAppBar(
+                    title = stringResource(R.string.record_book),
+                    onLeftClick = onBackClick
+                )
+
+                HeaderMenuBarTab(
+                    titles = tabs,
+                    selectedTabIndex = uiState.selectedTabIndex,
+                    onTabSelected = { onEvent(GroupNoteEvent.OnTabSelected(it)) },
+                    modifier = Modifier
+                        .fillMaxWidth()
+                )
+
+                if (uiState.isLoading) {
+                    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+                        CircularProgressIndicator()
+                    }
+                } else if (uiState.posts.isEmpty()) {
+                    val noRecordTextTitle = if (uiState.isOverview) {
+                        stringResource(R.string.no_overviews_yet)
+                    } else {
+                        stringResource(R.string.no_records_yet)
+                    }
+                    val noRecordTextContent = when (uiState.selectedTabIndex) {
+                        0 -> if (uiState.isOverview) {
+                            stringResource(R.string.no_overview_subtext)
+                        } else {
+                            stringResource(R.string.no_group_record_subtext)
+                        }
+
+                        1 -> stringResource(R.string.no_my_record_subtext)
+                        else -> ""
+                    }
+                    // 기록이 없을 때 중앙에 메시지
+                    Column(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .padding(bottom = 102.dp),
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        verticalArrangement = Arrangement.spacedBy(
+                            8.dp,
+                            alignment = Alignment.CenterVertically
+                        )
+                    ) {
+                        Text(
+                            text = noRecordTextTitle,
+                            style = typography.smalltitle_sb600_s18_h24,
+                            color = colors.White
+                        )
+                        Text(
+                            text = noRecordTextContent,
+                            style = typography.copy_r400_s14,
+                            color = colors.Grey
+                        )
+                    }
+                } else {
+                    // 피드 리스트 영역
+                    LazyColumn(state = listState, modifier = Modifier.weight(1f)) {
+                        if (uiState.selectedTabIndex == 0) {
+                            item {
+                                Row(
+                                    modifier = Modifier.padding(
+                                        top = 76.dp,
+                                        start = 20.dp,
+                                        end = 20.dp
+                                    ),
+                                    verticalAlignment = Alignment.CenterVertically,
+                                    horizontalArrangement = Arrangement.spacedBy(4.dp),
+                                ) {
+                                    Icon(
+                                        painterResource(R.drawable.ic_information),
+                                        contentDescription = null,
+                                        tint = colors.White,
+                                    )
+                                    Text(
+                                        text = stringResource(R.string.group_note_info),
+                                        modifier = Modifier.padding(start = 8.dp),
+                                        color = colors.Grey01,
+                                        style = typography.info_r400_s12
+                                    )
+                                }
+                            }
+                        }
+                        item {
+                            AnimatedVisibility(visible = showProgressBar) {
+                                Column(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .padding(start = 20.dp, end = 20.dp, top = 32.dp),
+                                ) {
+                                    Text(
+                                        modifier = Modifier.padding(bottom = 12.dp),
+                                        text = if (progress < 1.0f) {
+                                            stringResource(R.string.posting_in_progress)
+                                        } else {
+                                            stringResource(R.string.posting_complete)
+                                        },
+                                        style = typography.view_m500_s14,
+                                        color = colors.NeonGreen
+                                    )
+
+                                    Box(
+                                        modifier = Modifier
+                                            .fillMaxWidth()
+                                            .height(8.dp)
+                                            .clip(RoundedCornerShape(12.dp))
+                                            .background(color = colors.Grey02) // 트랙(배경) 색상
+                                    ) {
+                                        Box(
+                                            modifier = Modifier
+                                                .fillMaxWidth(fraction = progress)
+                                                .fillMaxHeight()
+                                                .background(
+                                                    color = colors.NeonGreen,
+                                                    shape = RoundedCornerShape(12.dp)
+                                                )
+                                        )
+                                    }
+                                }
+                            }
+                        }
+                        itemsIndexed(
+                            uiState.posts,
+                            key = { _, post -> post.postId }) { index, post ->
+                            val itemModifier = if (index == uiState.posts.lastIndex) {
+                                Modifier.padding(bottom = 20.dp)
+                            } else {
+                                Modifier
+                            }
+
+                            when (post.postType) {
+                                "RECORD" -> TextCommentCard(
+                                    data = post,
+                                    modifier = itemModifier,
+                                    onCommentClick = {
+                                        selectedPostForComment = post
+                                        isCommentBottomSheetVisible = true
+                                    },
+                                    onLongPress = { selectedPostForMenu = post },
+                                    onPinClick = {
+                                        postToPin = post
+                                        isPinDialogVisible = true
+                                    },
+                                    onLikeClick = { postId, postType ->
+                                        onEvent(GroupNoteEvent.OnLikeRecord(postId, postType))
+                                    },
+                                    onProfileClick = { onNavigateToUserProfile(post.userId) }
+                                )
+
+                                "VOTE" -> VoteCommentCard(
+                                    data = post,
+                                    modifier = itemModifier,
+                                    onCommentClick = {
+                                        selectedPostForComment = post
+                                        isCommentBottomSheetVisible = true
+                                    },
+                                    onLongPress = { selectedPostForMenu = post },
+                                    onVote = { postId, voteItemId, type ->
+                                        onEvent(GroupNoteEvent.OnVote(postId, voteItemId, type))
+                                    },
+                                    onLikeClick = { postId, postType ->
+                                        onEvent(GroupNoteEvent.OnLikeRecord(postId, postType))
+                                    },
+                                    onProfileClick = { onNavigateToUserProfile(post.userId) }
+                                )
+                            }
+                        }
+
+                        if (uiState.isLoadingMore) {
+                            item {
+                                Box(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .padding(16.dp),
+                                    contentAlignment = Alignment.Center
+                                ) {
+                                    CircularProgressIndicator()
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            if (uiState.selectedTabIndex == 0) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = 98.dp)
+                ) {
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .height(76.dp)
+                            .background(color = colors.Black)
+                    )
+
+                    FilterButton(
+                        modifier = Modifier
+                            .align(Alignment.CenterEnd)
+                            .padding(top = 20.dp, end = 20.dp, bottom = 20.dp),
+                        selectedOption = stringResource(uiState.selectedSort.displayNameRes),
+                        options = sortDisplayStrings,
+                        onOptionSelected = { selectedString ->
+                            val selectedIndex = sortDisplayStrings.indexOf(selectedString)
+                            if (selectedIndex != -1) {
+                                val selectedSortType = SortType.entries[selectedIndex]
+                                onEvent(GroupNoteEvent.OnSortSelected(selectedSortType))
+                            }
+                        }
+                    )
+
+                    FilterHeaderSection(
+                        modifier = Modifier.padding(top = 20.dp),
+                        firstPage = uiState.pageStart,
+                        lastPage = uiState.pageEnd,
+                        isTotalSelected = uiState.isOverview,
+                        totalEnabled = uiState.totalEnabled,
+                        onFirstPageChange = { onEvent(GroupNoteEvent.OnPageStartChanged(it)) },
+                        onLastPageChange = { onEvent(GroupNoteEvent.OnPageEndChanged(it)) },
+                        onTotalToggle = { onEvent(GroupNoteEvent.OnOverviewToggled(!uiState.isOverview)) },
+                        onDisabledClick = {
+                            toastMessage =
+                                context.getString(R.string.condition_of_view_general_review)
+                            isErrorToast = true
+                            showToast = true
+                        },
+                        onApplyPageFilter = { onEvent(GroupNoteEvent.ApplyPageFilter) }
+                    )
+                }
+            }
+
+            ExpandableFloatingButton(
+                menuItems = listOf(
+                    FabMenuItem(
+                        icon = painterResource(R.drawable.ic_write),
+                        text = stringResource(R.string.write_record),
+                        onClick = onCreateNoteClick
+                    ),
+                    FabMenuItem(
+                        icon = painterResource(R.drawable.ic_vote),
+                        text = stringResource(R.string.create_vote),
+                        onClick = onCreateVoteClick
+                    )
+                )
+            )
+        }
+    }
+
+    if (isCommentBottomSheetVisible && selectedPostForComment != null) {
+        LaunchedEffect(selectedPostForComment?.postId) {
+            selectedPostForComment?.let { post ->
+                commentsViewModel.initialize(
+                    postId = post.postId.toLong(),
+                    postType = post.postType
+                )
+            }
+        }
+
+        CommentBottomSheet(
+            viewModel = commentsViewModel,
+            uiState = commentsUiState,
+            onDismiss = {
+                isCommentBottomSheetVisible = false
+                selectedPostForComment = null
+                onEvent(GroupNoteEvent.RefreshPosts)
+            },
+            onProfileClick = onNavigateToUserProfile,
+            onShowToast = { message ->
+                toastMessage = message
+                isErrorToast = false
+                showToast = true
+            }
+        )
+    }
+
+    if (selectedPostForMenu != null) {
+        val post = selectedPostForMenu!!
+        val menuItems = if (post.isWriter) {
+            listOf(
+                MenuBottomSheetItem(
+                    text = stringResource(R.string.modify),
+                    color = colors.White,
+                    onClick = {
+                        when (post.postType) {
+                            "RECORD" -> onEditNoteClick(post)
+                            "VOTE" -> onEditVoteClick(post)
+                        }
+                        selectedPostForMenu = null
+                    }
+                ),
+                MenuBottomSheetItem(
+                    text = stringResource(R.string.delete),
+                    color = colors.Red,
+                    onClick = {
+                        postToDelete = post // 삭제할 포스트 정보를 기억
+                        showDeleteDialog = true
+                        selectedPostForMenu = null
+                    }
+                )
+            )
+        } else {
+            listOf(
+                MenuBottomSheetItem(
+                    text = stringResource(R.string.report),
+                    color = colors.Red,
+                    onClick = {
+                        // TODO: 신고 처리
+                        selectedPostForMenu = null
+                    }
+                )
+            )
+        }
+
+        MenuBottomSheet(
+            items = menuItems,
+            onDismiss = { selectedPostForMenu = null }
+        )
+    }
+
+    if (showDeleteDialog) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            DialogPopup(
+                title = stringResource(R.string.delete_post_title),
+                description = stringResource(R.string.delete_post_content),
+                onConfirm = {
+                    postToDelete?.let {
+                        onEvent(GroupNoteEvent.OnDeleteRecord(it.postId, it.postType))
+                    }
+                    showDeleteDialog = false
+                    postToDelete = null
+                },
+                onCancel = {
+                    showDeleteDialog = false
+                    postToDelete = null
+                }
+            )
+        }
+    }
+
+    if (isPinDialogVisible) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            DialogPopup(
+                title = stringResource(R.string.pin_modal_title),
+                description = stringResource(R.string.pin_modal_content),
+                onConfirm = {
+                    postToPin?.let { post ->
+                        onEvent(
+                            GroupNoteEvent.OnPinRecord(
+                                recordId = post.postId,
+                                content = post.content
+                            )
+                        )
+                    }
+                    isPinDialogVisible = false
+                    postToPin = null
+                },
+                onCancel = {
+                    isPinDialogVisible = false
+                    postToPin = null
+                }
+            )
+        }
+    }
+
+    AnimatedVisibility(
+        modifier = Modifier
+            .padding(horizontal = 20.dp, vertical = 16.dp),
+        visible = showToast,
+        enter = slideInVertically(
+            initialOffsetY = { -it },
+            animationSpec = tween(durationMillis = 1000)
+        ),
+        exit = slideOutVertically(
+            targetOffsetY = { -it },
+            animationSpec = tween(durationMillis = 1000)
+        )
+    ) {
+        ToastWithDate(
+            message = toastMessage,
+            color = if (isErrorToast) colors.Red else colors.DarkGrey
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun GroupNoteScreenPreview() {
+    ThipTheme {
+        GroupNoteContent(
+            uiState = GroupNoteUiState(
+                posts = listOf(
+                    PostList(
+                        userId = 1,
+                        profileImageUrl = "https://example.com/profile.jpg",
+                        voteItems = emptyList(),
+                        postId = 1,
+                        postType = "RECORD",
+                        page = 1,
+                        postDate = "12시간 전",
+                        nickName = "사용자1",
+                        content = "첫 번째 기록입니다.",
+                        isLiked = false,
+                        likeCount = 10,
+                        commentCount = 2,
+                        isLocked = false,
+                        isWriter = true,
+                        isOverview = false
+                    )
+                ),
+                selectedTabIndex = 0,
+                selectedSort = SortType.LATEST,
+                isLoading = false,
+                isLoadingMore = false,
+                pageStart = "1",
+                pageEnd = "10",
+                isOverview = false,
+                totalEnabled = true
+            ),
+            onEvent = {},
+            onBackClick = {},
+            onCreateNoteClick = {},
+            onCreateVoteClick = {},
+            showProgressBar = true,
+            progress = 0.5f,
+            onNavigateToUserProfile = {},
+            onEditNoteClick = {},
+            onEditVoteClick = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupVoteCreateScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupVoteCreateScreen.kt
new file mode 100644
index 00000000..b1db644e
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/screen/GroupVoteCreateScreen.kt
@@ -0,0 +1,198 @@
+package com.texthip.thip.ui.group.note.screen
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.absoluteOffset
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+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.focus.FocusRequester
+import androidx.compose.ui.layout.LayoutCoordinates
+import androidx.compose.ui.layout.positionInRoot
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.modal.ArrowPosition
+import com.texthip.thip.ui.common.modal.PopupModal
+import com.texthip.thip.ui.common.topappbar.InputTopAppBar
+import com.texthip.thip.ui.group.note.component.PageInputSection
+import com.texthip.thip.ui.group.note.component.VoteInputSection
+import com.texthip.thip.ui.group.note.viewmodel.GroupVoteCreateEvent
+import com.texthip.thip.ui.group.note.viewmodel.GroupVoteCreateUiState
+import com.texthip.thip.ui.group.note.viewmodel.GroupVoteCreateViewModel
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.utils.rooms.advancedImePadding
+import kotlinx.coroutines.delay
+
+@Composable
+fun GroupVoteCreateScreen(
+    roomId: Int,
+    recentPage: Int,
+    totalPage: Int,
+    isOverviewPossible: Boolean,
+    postId: Int?,
+    page: Int?,
+    isOverview: Boolean?,
+    title: String?,
+    options: List<String>?,
+    onBackClick: () -> Unit,
+    onNavigateBackWithResult: () -> Unit,
+    viewModel: GroupVoteCreateViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+
+    LaunchedEffect(Unit) {
+        viewModel.initialize(
+            roomId, recentPage, totalPage, isOverviewPossible,
+            postId, page, isOverview, title, options
+        )
+    }
+
+    LaunchedEffect(uiState.isSuccess) {
+        if (uiState.isSuccess) {
+            onNavigateBackWithResult()
+        }
+    }
+
+    GroupVoteCreateContent(
+        uiState = uiState,
+        onEvent = viewModel::onEvent,
+        onBackClick = onBackClick
+    )
+}
+
+@Composable
+fun GroupVoteCreateContent(
+    uiState: GroupVoteCreateUiState,
+    onEvent: (GroupVoteCreateEvent) -> Unit,
+    onBackClick: () -> Unit,
+) {
+    val density = LocalDensity.current
+    var showTooltip by rememberSaveable { mutableStateOf(false) }
+    val iconCoordinates = remember { mutableStateOf<LayoutCoordinates?>(null) }
+
+    val focusRequester = remember { FocusRequester() }
+
+    LaunchedEffect(uiState.isEditMode) {
+        if (uiState.isEditMode) {
+            delay(100)
+            focusRequester.requestFocus()
+        }
+    }
+
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .advancedImePadding()
+    ) {
+        Column {
+            InputTopAppBar(
+                title = if (uiState.isEditMode) stringResource(R.string.edit_vote)
+                else stringResource(R.string.create_vote),
+                isRightButtonEnabled = uiState.isFormFilled,
+                onLeftClick = onBackClick,
+                onRightClick = { onEvent(GroupVoteCreateEvent.CreateVoteClicked) }
+            )
+
+            Column(
+                modifier = Modifier
+                    .weight(1f)
+                    .verticalScroll(rememberScrollState())
+                    .padding(vertical = 32.dp, horizontal = 20.dp),
+                verticalArrangement = Arrangement.spacedBy(32.dp),
+            ) {
+                PageInputSection(
+                    pageText = uiState.pageText,
+                    onPageTextChange = { onEvent(GroupVoteCreateEvent.PageChanged(it)) },
+                    isGeneralReview = uiState.isGeneralReview,
+                    onGeneralReviewToggle = { onEvent(GroupVoteCreateEvent.GeneralReviewToggled(it)) },
+                    isEligible = uiState.isGeneralReviewEnabled,
+                    bookTotalPage = uiState.bookTotalPage,
+                    onInfoClick = { showTooltip = true },
+                    onInfoPositionCaptured = { iconCoordinates.value = it },
+                    isEnabled = !uiState.isEditMode
+                )
+
+                VoteInputSection(
+                    titleValue = uiState.titleValue,
+                    onTitleChange = { onEvent(GroupVoteCreateEvent.TitleChanged(it)) },
+                    options = uiState.options,
+                    onOptionChange = { index, newText ->
+                        onEvent(GroupVoteCreateEvent.OptionChanged(index, newText))
+                    },
+                    onAddOption = { onEvent(GroupVoteCreateEvent.AddOptionClicked) },
+                    onRemoveOption = { index ->
+                        onEvent(GroupVoteCreateEvent.RemoveOptionClicked(index))
+                    },
+                    isEnabled = !uiState.isEditMode,
+                    focusRequester = focusRequester
+                )
+            }
+        }
+
+        if (uiState.isLoading) {
+            Box(
+                modifier = Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                CircularProgressIndicator()
+            }
+        }
+
+        if (showTooltip && iconCoordinates.value != null) {
+            val yOffsetDp = with(density) {
+                iconCoordinates.value!!.positionInRoot().y.toDp()
+            }
+
+            Box(
+                modifier = Modifier
+                    .absoluteOffset(y = yOffsetDp)
+                    .padding(horizontal = 20.dp)
+                    .zIndex(1f)
+            ) {
+                PopupModal(
+                    text = stringResource(R.string.condition_of_general_review),
+                    arrowPosition = ArrowPosition.RIGHT,
+                    isEligible = uiState.isGeneralReviewEnabled,
+                    onClose = { showTooltip = false }
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun GroupVoteCreateScreenPreview() {
+    ThipTheme {
+        GroupVoteCreateContent(
+            uiState = GroupVoteCreateUiState(
+                pageText = "123",
+                titleValue = TextFieldValue("이번 모임의 장소는 어디가 좋을까요?"),
+                options = listOf("1연 1행", "2연 3행", ""),
+                bookTotalPage = 600,
+                isGeneralReviewEnabled = true
+            ),
+            onEvent = {},
+            onBackClick = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/viewmodel/CommentsViewModel.kt b/app/src/main/java/com/texthip/thip/ui/group/note/viewmodel/CommentsViewModel.kt
new file mode 100644
index 00000000..3aa1aac3
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/viewmodel/CommentsViewModel.kt
@@ -0,0 +1,299 @@
+package com.texthip.thip.ui.group.note.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.model.comments.response.CommentList
+import com.texthip.thip.data.model.comments.response.ReplyList
+import com.texthip.thip.data.repository.CommentsRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asSharedFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class CommentsUiState(
+    val isLoading: Boolean = false,
+    val isLoadingMore: Boolean = false,
+    val error: String? = null,
+    val isLast: Boolean = false,
+    val comments: List<CommentList> = emptyList(),
+    val isCommentCreated: Boolean = false
+)
+
+sealed interface CommentSideEffect {
+    data class ScrollToItem(val parentCommentId: Int?) : CommentSideEffect
+}
+
+sealed interface CommentsEvent {
+    data object LoadMoreComments : CommentsEvent
+    data class LikeComment(val commentId: Int) : CommentsEvent // 댓글 좋아요 이벤트
+    data class LikeReply(val replyId: Int) : CommentsEvent // 답글 좋아요 이벤트
+    data class CreateComment(val content: String, val parentId: Int?) : CommentsEvent
+    data class DeleteComment(val commentId: Int) : CommentsEvent
+}
+
+@HiltViewModel
+class CommentsViewModel @Inject constructor(
+    private val commentsRepository: CommentsRepository
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(CommentsUiState())
+    val uiState = _uiState.asStateFlow()
+
+    private val _sideEffect = MutableSharedFlow<CommentSideEffect>()
+    val sideEffect = _sideEffect.asSharedFlow()
+
+    private var nextCursor: String? = null
+    private var currentPostId: Long = -1L
+    private var currentPostType: String = "RECORD"
+
+    fun initialize(postId: Long, postType: String) {
+        this.currentPostId = postId
+        this.currentPostType = postType
+        fetchComments(isRefresh = true)
+    }
+
+    fun onEvent(event: CommentsEvent) {
+        when (event) {
+            is CommentsEvent.LoadMoreComments -> fetchComments(isRefresh = false)
+            is CommentsEvent.LikeComment -> toggleCommentLike(event.commentId)
+            is CommentsEvent.LikeReply -> toggleReplyLike(event.replyId)
+            is CommentsEvent.CreateComment -> createComment(
+                content = event.content,
+                parentId = event.parentId
+            )
+
+            is CommentsEvent.DeleteComment -> deleteComment(event.commentId)
+        }
+    }
+
+    private fun deleteComment(commentId: Int) {
+        val originalComments = _uiState.value.comments
+
+        // 삭제하려는 대상이 부모 댓글인지 먼저 확인
+        val parentCommentToDelete = originalComments.firstOrNull { it.commentId == commentId }
+
+        val newComments = if (parentCommentToDelete != null) {
+            // 부모 댓글을 삭제하는 경우
+            if (parentCommentToDelete.replyList.isEmpty()) {
+                // 답글이 없으면 목록에서 완전히 제거
+                originalComments.filterNot { it.commentId == commentId }
+            } else {
+                // 답글이 있으면 "삭제됨" 상태로 변경
+                originalComments.map {
+                    if (it.commentId == commentId) it.copy(isDeleted = true) else it
+                }
+            }
+        } else {
+            // 답글을 삭제하는 경우
+            // 모든 부모 댓글을 순회하며, 해당하는 답글만 목록에서 제거
+            originalComments.map { parentComment ->
+                parentComment.copy(
+                    replyList = parentComment.replyList.filterNot { reply -> reply.commentId == commentId }
+                )
+            }
+        }
+
+        _uiState.update { it.copy(comments = newComments) }
+
+        viewModelScope.launch {
+            commentsRepository.deleteComment(commentId.toLong())
+                .onSuccess { response ->
+                    // 성공 시 별도 처리 필요 없음
+                }
+                .onFailure {
+                    _uiState.update { it.copy(comments = originalComments, error = "삭제 실패") }
+                }
+        }
+    }
+
+    private fun createComment(content: String, parentId: Int?) {
+        if (content.isBlank()) return
+
+        viewModelScope.launch {
+            val isReply = parentId != null
+
+            commentsRepository.createComment(
+                postId = currentPostId,
+                content = content,
+                isReplyRequest = isReply,
+                parentId = parentId,
+                postType = currentPostType
+            ).onSuccess { response ->
+                response?.let { res ->
+                    _uiState.update { currentState ->
+                        if (parentId == null) {
+                            val newComment = CommentList(
+                                commentId = res.commentId,
+                                creatorId = res.creatorId,
+                                creatorProfileImageUrl = res.creatorProfileImageUrl,
+                                creatorNickname = res.creatorNickname,
+                                aliasName = res.aliasName,
+                                aliasColor = res.aliasColor,
+                                postDate = res.postDate,
+                                content = res.content,
+                                likeCount = res.likeCount,
+                                isDeleted = res.isDeleted,
+                                isWriter = res.isWriter,
+                                isLike = res.isLike,
+                                replyList = res.replyList
+                            )
+                            currentState.copy(
+                                comments = listOf(newComment) + currentState.comments,
+                                isCommentCreated = true
+                            )
+                        } else {
+                            val parentCommentIndex =
+                                currentState.comments.indexOfFirst { it.commentId == parentId }
+
+                            if (parentCommentIndex != -1) {
+                                val originalParentComment =
+                                    currentState.comments[parentCommentIndex]
+
+                                val updatedParentComment = originalParentComment.copy(
+                                    replyList = originalParentComment.replyList + res.replyList
+                                )
+
+                                val newCommentsList = currentState.comments.toMutableList().apply {
+                                    this[parentCommentIndex] = updatedParentComment
+                                }
+                                currentState.copy(
+                                    comments = newCommentsList,
+                                    isCommentCreated = true
+                                )
+                            } else {
+                                currentState
+                            }
+                        }
+                    }
+
+                    _sideEffect.emit(CommentSideEffect.ScrollToItem(parentId))
+                }
+            }.onFailure { throwable ->
+                _uiState.update { it.copy(error = "댓글 작성 실패: ${throwable.message}") }
+            }
+        }
+    }
+
+    private fun toggleCommentLike(commentId: Int) {
+        // 클릭한 댓글 찾기
+        val comments = _uiState.value.comments
+        val commentIndex = comments.indexOfFirst { it.commentId == commentId }
+        if (commentIndex == -1) return
+
+        val comment = comments[commentIndex]
+        val currentIsLiked = comment.isLike
+        val newLikeCount = if (currentIsLiked) comment.likeCount - 1 else comment.likeCount + 1
+
+        // 즉시 UI 업데이트
+        val updatedComment = comment.copy(isLike = !currentIsLiked, likeCount = newLikeCount)
+        val newComments = comments.toMutableList().apply { set(commentIndex, updatedComment) }
+        _uiState.update { it.copy(comments = newComments) }
+
+        viewModelScope.launch {
+            commentsRepository.likeComment(commentId.toLong(), !currentIsLiked)
+                .onFailure {
+                    _uiState.update {
+                        val originalComments = it.comments.toMutableList()
+                        originalComments[commentIndex] = comment
+                        it.copy(comments = originalComments)
+                    }
+                }
+        }
+    }
+
+    private fun toggleReplyLike(replyId: Int) {
+        val comments = _uiState.value.comments
+        var parentComment: CommentList? = null
+        var reply: ReplyList? = null
+        var parentCommentIndex = -1
+        var replyIndex = -1
+
+        // 전체 댓글 목록을 돌면서 좋아요 누른 답글과 그 부모를 찾기
+        for ((pIndex, pComment) in comments.withIndex()) {
+            val rIndex = pComment.replyList.indexOfFirst { it.commentId == replyId }
+            if (rIndex != -1) {
+                parentComment = pComment
+                reply = pComment.replyList[rIndex]
+                parentCommentIndex = pIndex
+                replyIndex = rIndex
+                break // 찾았으면 루프 종료
+            }
+        }
+
+        // 답글이나 부모를 못 찾으면 함수 종료
+        if (parentComment == null || reply == null || parentCommentIndex == -1 || replyIndex == -1) return
+
+        val currentIsLiked = reply.isLike
+        val newLikeCount = if (currentIsLiked) reply.likeCount - 1 else reply.likeCount + 1
+
+        // 즉시 UI 업데이트
+        val updatedReply = reply.copy(isLike = !currentIsLiked, likeCount = newLikeCount)
+        val newReplyList =
+            parentComment.replyList.toMutableList().apply { set(replyIndex, updatedReply) }
+        val updatedParentComment = parentComment.copy(replyList = newReplyList)
+        val newComments =
+            comments.toMutableList().apply { set(parentCommentIndex, updatedParentComment) }
+        _uiState.update { it.copy(comments = newComments) }
+
+        viewModelScope.launch {
+            commentsRepository.likeComment(replyId.toLong(), !currentIsLiked)
+                .onFailure {
+                    _uiState.update {
+                        // 실패 시 롤백 로직 (기존과 동일)
+                        val originalComments = it.comments.toMutableList()
+                        originalComments[parentCommentIndex] = parentComment
+                        it.copy(comments = originalComments)
+                    }
+                }
+        }
+    }
+
+    private fun fetchComments(isRefresh: Boolean) {
+        val currentState = _uiState.value
+        if (currentState.isLoading || currentState.isLoadingMore || (currentState.isLast && !isRefresh)) {
+            return
+        }
+
+        viewModelScope.launch {
+            _uiState.update {
+                if (isRefresh) it.copy(isLoading = true, comments = emptyList(), isLast = false)
+                else it.copy(isLoadingMore = true)
+            }
+
+            val cursorToFetch = if (isRefresh) null else nextCursor
+
+            commentsRepository.getComments(
+                postId = currentPostId,
+                postType = currentPostType,
+                cursor = cursorToFetch
+            )
+                .onSuccess { response ->
+                    if (response != null) {
+                        nextCursor = response.nextCursor
+                        _uiState.update {
+                            it.copy(
+                                isLoading = false,
+                                isLoadingMore = false,
+                                // isRefresh일 경우 새 목록으로, 아닐 경우 기존 목록에 추가
+                                comments = if (isRefresh) response.commentList else it.comments + response.commentList,
+                                isLast = response.isLast
+                            )
+                        }
+                    }
+                }
+                .onFailure { throwable ->
+                    _uiState.update {
+                        it.copy(isLoading = false, isLoadingMore = false, error = throwable.message)
+                    }
+                }
+        }
+    }
+
+    fun resetCommentCreatedState() {
+        _uiState.update { it.copy(isCommentCreated = false) }
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/viewmodel/GroupNoteCreateViewModel.kt b/app/src/main/java/com/texthip/thip/ui/group/note/viewmodel/GroupNoteCreateViewModel.kt
new file mode 100644
index 00000000..0d2011f2
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/viewmodel/GroupNoteCreateViewModel.kt
@@ -0,0 +1,161 @@
+package com.texthip.thip.ui.group.note.viewmodel
+
+import androidx.compose.ui.text.TextRange
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.repository.RoomsRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class GroupNoteCreateUiState(
+    val pageText: String = "",
+    val opinionTextFieldValue: TextFieldValue = TextFieldValue(""),
+    val isEditMode: Boolean = false,
+    val isGeneralReview: Boolean = false,
+    val isLoading: Boolean = false,
+    val isSuccess: Boolean = false,
+    val error: String? = null,
+    val totalPage: Int = 0,
+    val isOverviewPossible: Boolean = false
+) {
+    // 입력 폼이 모두 채워졌는지 확인
+    val isFormFilled: Boolean
+        get() = (pageText.isNotBlank() || isGeneralReview) && opinionTextFieldValue.text.isNotBlank()
+}
+
+sealed interface GroupNoteCreateEvent {
+    data class PageChanged(val text: String) : GroupNoteCreateEvent
+    data class OpinionChanged(val newTextFieldValue: TextFieldValue) : GroupNoteCreateEvent
+    data class GeneralReviewToggled(val isChecked: Boolean) : GroupNoteCreateEvent
+    data object CreateRecordClicked : GroupNoteCreateEvent
+}
+
+@HiltViewModel
+class GroupNoteCreateViewModel @Inject constructor(
+    private val roomsRepository: RoomsRepository
+) : ViewModel() {
+    private val _uiState = MutableStateFlow(GroupNoteCreateUiState())
+    val uiState = _uiState.asStateFlow()
+
+    private var roomId: Int = -1
+    private var postIdToEdit: Int? = null // 수정할 포스트 ID 저장
+
+    fun initialize(
+        roomId: Int,
+        recentPage: Int,
+        totalPage: Int,
+        isOverviewPossible: Boolean,
+        postId: Int?,
+        page: Int?,
+        content: String?,
+        isOverview: Boolean?
+    ) {
+        this.roomId = roomId
+        _uiState.update {
+            it.copy(
+                pageText = recentPage.toString(),
+                totalPage = totalPage,
+                isOverviewPossible = isOverviewPossible
+            )
+        }
+
+        // postId가 null이 아니면 수정 모드로 진입
+        if (postId != null && page != null && content != null && isOverview != null) {
+            this.postIdToEdit = postId
+            _uiState.update {
+                it.copy(
+                    isEditMode = true,
+                    pageText = page.toString(),
+                    isGeneralReview = isOverview,
+                    opinionTextFieldValue = TextFieldValue(
+                        text = content,
+                        selection = TextRange(content.length)
+                    )
+                )
+            }
+        }
+    }
+
+    fun onEvent(event: GroupNoteCreateEvent) {
+        when (event) {
+            is GroupNoteCreateEvent.PageChanged -> {
+                if (!_uiState.value.isGeneralReview) {
+                    _uiState.update { it.copy(pageText = event.text) }
+                }
+            }
+
+            is GroupNoteCreateEvent.OpinionChanged -> {
+                _uiState.update { it.copy(opinionTextFieldValue = event.newTextFieldValue) }
+            }
+
+            is GroupNoteCreateEvent.GeneralReviewToggled -> {
+                _uiState.update {
+                    val newPageText = if (event.isChecked) "" else it.pageText
+                    it.copy(isGeneralReview = event.isChecked, pageText = newPageText)
+                }
+            }
+
+            GroupNoteCreateEvent.CreateRecordClicked -> {
+                if (_uiState.value.isEditMode) {
+                    updateRecord()
+                } else {
+                    createRecord()
+                }
+            }
+        }
+    }
+
+    private fun createRecord() {
+        val currentState = _uiState.value
+        val pageNumber = if (currentState.isGeneralReview) {
+            currentState.totalPage
+        } else {
+            currentState.pageText.toIntOrNull()
+        }
+        if (pageNumber == null || !currentState.isFormFilled) {
+            _uiState.update { it.copy(error = "페이지 번호를 정확히 입력해주세요.") }
+            return
+        }
+
+        viewModelScope.launch {
+            _uiState.update { it.copy(isLoading = true) }
+            val content = _uiState.value.opinionTextFieldValue.text
+
+            roomsRepository.postRoomsRecord(
+                roomId = roomId,
+                content = content,
+                isOverview = currentState.isGeneralReview,
+                page = pageNumber
+            ).onSuccess {
+                _uiState.update { it.copy(isLoading = false, isSuccess = true) }
+            }.onFailure { throwable ->
+                _uiState.update {
+                    it.copy(isLoading = false, error = throwable.message)
+                }
+            }
+        }
+    }
+
+    private fun updateRecord() {
+        viewModelScope.launch {
+            _uiState.update { it.copy(isLoading = true) }
+            val content = _uiState.value.opinionTextFieldValue.text
+            val postId = postIdToEdit ?: return@launch
+
+            roomsRepository.patchRoomsRecord(
+                roomId = roomId,
+                recordId = postId,
+                content = content
+            ).onSuccess {
+                _uiState.update { it.copy(isLoading = false, isSuccess = true) }
+            }.onFailure { throwable ->
+                _uiState.update { it.copy(isLoading = false, error = throwable.message) }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/viewmodel/GroupNoteViewModel.kt b/app/src/main/java/com/texthip/thip/ui/group/note/viewmodel/GroupNoteViewModel.kt
new file mode 100644
index 00000000..bf2cc03a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/viewmodel/GroupNoteViewModel.kt
@@ -0,0 +1,359 @@
+package com.texthip.thip.ui.group.note.viewmodel
+
+import android.util.Log
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.model.rooms.request.RoomsPostsRequestParams
+import com.texthip.thip.data.model.rooms.response.PostList
+import com.texthip.thip.data.model.rooms.response.RoomsRecordsPinResponse
+import com.texthip.thip.data.repository.RoomsRepository
+import com.texthip.thip.utils.type.SortType
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.async
+import kotlinx.coroutines.awaitAll
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asSharedFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class GroupNoteUiState(
+    // 데이터 로딩 상태
+    val isLoading: Boolean = false,
+    val isLoadingMore: Boolean = false,
+    val error: String? = null,
+    val isLastPage: Boolean = false,
+
+    // 화면 데이터
+    val posts: List<PostList> = emptyList(),
+    val recentBookPage: Int = 0,
+    val totalBookPage: Int = 0,
+    val isOverviewPossible: Boolean = false,
+
+    // 필터 및 탭 상태
+    val selectedTabIndex: Int = 0,
+    val selectedSort: SortType = SortType.LATEST,
+    val pageStart: String = "",
+    val pageEnd: String = "",
+    val isOverview: Boolean = false,
+    val isPageFilter: Boolean = false,
+    val totalEnabled: Boolean = false
+)
+
+sealed interface GroupNoteSideEffect {
+    data class NavigateToFeedWrite(
+        val pinInfo: RoomsRecordsPinResponse,
+        val recordContent: String
+    ) : GroupNoteSideEffect
+}
+
+sealed interface GroupNoteEvent {
+    data class OnTabSelected(val index: Int) : GroupNoteEvent
+    data class OnSortSelected(val sortType: SortType) : GroupNoteEvent
+    data class OnPageStartChanged(val page: String) : GroupNoteEvent
+    data class OnPageEndChanged(val page: String) : GroupNoteEvent
+    data class OnOverviewToggled(val isSelected: Boolean) : GroupNoteEvent
+    data object ApplyPageFilter : GroupNoteEvent
+    data object LoadMorePosts : GroupNoteEvent
+    data class OnVote(val postId: Int, val voteItemId: Int, val type: Boolean) : GroupNoteEvent
+    data class OnDeleteRecord(val postId: Int, val postType: String) : GroupNoteEvent
+    data class OnLikeRecord(val postId: Int, val postType: String) : GroupNoteEvent
+    data class OnPinRecord(val recordId: Int, val content: String) : GroupNoteEvent
+    data object RefreshPosts : GroupNoteEvent
+}
+
+
+@HiltViewModel
+class GroupNoteViewModel @Inject constructor(
+    private val roomsRepository: RoomsRepository
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(GroupNoteUiState())
+    val uiState = _uiState.asStateFlow()
+
+    private val _sideEffect = MutableSharedFlow<GroupNoteSideEffect>()
+    val sideEffect = _sideEffect.asSharedFlow()
+
+    private var nextCursor: String? = null
+    private var roomId: Int = -1
+
+    fun initialize(
+        roomId: Int,
+        initialPage: Int? = null,
+        initialIsOverview: Boolean? = null
+    ) {
+        this.roomId = roomId
+
+        if (initialPage != null || initialIsOverview != null) {
+            _uiState.update {
+                it.copy(
+                    pageStart = initialPage?.toString() ?: "",
+                    pageEnd = initialPage?.toString() ?: "",
+                    isOverview = initialIsOverview ?: false,
+                    isPageFilter = initialPage != null
+                )
+            }
+        }
+
+        refreshAllData()
+    }
+
+    private fun loadBookPageInfo() {
+        viewModelScope.launch {
+            roomsRepository.getRoomsBookPage(roomId)
+                .onSuccess { response ->
+                    if (response != null) {
+                        _uiState.update {
+                            it.copy(
+                                recentBookPage = response.recentBookPage,
+                                totalBookPage = response.totalBookPage,
+                                isOverviewPossible = response.isOverviewPossible
+                            )
+                        }
+                    }
+                }
+                .onFailure { throwable ->
+                    _uiState.update { it.copy(error = throwable.message) }
+                }
+        }
+    }
+
+    private fun refreshAllData() {
+        viewModelScope.launch {
+            val postsJob = async { loadPosts(isRefresh = true) }
+            val bookPageJob = async { loadBookPageInfo() }
+            awaitAll(postsJob, bookPageJob)
+        }
+    }
+
+    fun onEvent(event: GroupNoteEvent) {
+        when (event) {
+            is GroupNoteEvent.OnTabSelected -> {
+                _uiState.update { it.copy(selectedTabIndex = event.index) }
+                loadPosts(isRefresh = true)
+            }
+
+            is GroupNoteEvent.OnSortSelected -> {
+                _uiState.update { it.copy(selectedSort = event.sortType) }
+                loadPosts(isRefresh = true)
+            }
+
+            is GroupNoteEvent.OnPageStartChanged -> _uiState.update { it.copy(pageStart = event.page) }
+            is GroupNoteEvent.OnPageEndChanged -> _uiState.update { it.copy(pageEnd = event.page) }
+            is GroupNoteEvent.OnOverviewToggled -> {
+                _uiState.update { it.copy(isOverview = event.isSelected) }
+                loadPosts(isRefresh = true)
+            }
+
+            GroupNoteEvent.ApplyPageFilter -> {
+                val currentState = _uiState.value
+                val isFilterActive =
+                    currentState.pageStart.isNotBlank() || currentState.pageEnd.isNotBlank()
+
+                _uiState.update { it.copy(isPageFilter = isFilterActive) }
+                loadPosts(isRefresh = true)
+            }
+
+            GroupNoteEvent.LoadMorePosts -> loadPosts(isRefresh = false)
+
+            is GroupNoteEvent.OnVote -> vote(
+                postId = event.postId,
+                voteItemId = event.voteItemId,
+                type = event.type
+            )
+
+            is GroupNoteEvent.OnDeleteRecord -> deletePost(event.postId, event.postType)
+            is GroupNoteEvent.OnLikeRecord -> likeRecord(event.postId, event.postType)
+            is GroupNoteEvent.RefreshPosts -> loadPosts(isRefresh = true)
+            is GroupNoteEvent.OnPinRecord -> pinRecord(event.recordId, event.content)
+            else -> {
+                Log.w("GroupNoteViewModel", "Unhandled event received: $event")
+            }
+        }
+    }
+
+    private fun pinRecord(recordId: Int, content: String) {
+        viewModelScope.launch {
+            roomsRepository.getRoomsRecordsPin(roomId = roomId, recordId = recordId)
+                .onSuccess { pinInfo ->
+                    if (pinInfo != null) {
+                        _sideEffect.emit(
+                            GroupNoteSideEffect.NavigateToFeedWrite(
+                                pinInfo = pinInfo,
+                                recordContent = content
+                            )
+                        )
+                    }
+                }
+                .onFailure {
+                }
+        }
+    }
+
+    private fun likeRecord(postId: Int, postType: String) {
+        val currentPosts = _uiState.value.posts
+        val postIndex = currentPosts.indexOfFirst { it.postId == postId }
+        if (postIndex == -1) return
+
+        val oldPost = currentPosts[postIndex]
+
+        val newIsLiked = !oldPost.isLiked
+        val newLikeCount = if (newIsLiked) oldPost.likeCount + 1 else oldPost.likeCount - 1
+
+        val optimisticPost = oldPost.copy(
+            isLiked = newIsLiked,
+            likeCount = newLikeCount.coerceAtLeast(0)
+        )
+
+        val newPosts = currentPosts.toMutableList().apply { this[postIndex] = optimisticPost }
+        _uiState.update { it.copy(posts = newPosts) }
+
+        viewModelScope.launch {
+            roomsRepository.postRoomsPostsLikes(
+                postId = postId,
+                type = newIsLiked,
+                roomPostType = postType
+            )
+                .onFailure {
+                    val rollbackPosts = currentPosts.toMutableList().apply { this[postIndex] = oldPost }
+                    _uiState.update { it.copy(posts = rollbackPosts) }
+                }
+        }
+    }
+
+    private fun deletePost(postId: Int, postType: String) {
+        viewModelScope.launch {
+            val result = when (postType) {
+                "RECORD" -> roomsRepository.deleteRoomsRecord(roomId = roomId, recordId = postId)
+                "VOTE" -> roomsRepository.deleteRoomsVote(roomId = roomId, voteId = postId)
+                else -> Result.failure(IllegalArgumentException("Unknown post type for deletion: $postType"))
+            }
+
+            result.onSuccess {
+                val updatedPosts = _uiState.value.posts.filter { it.postId != postId }
+                _uiState.update { it.copy(posts = updatedPosts) }
+            }.onFailure { throwable ->
+                _uiState.update { it.copy(error = throwable.message) }
+            }
+        }
+    }
+
+    private fun vote(postId: Int, voteItemId: Int, type: Boolean) {
+        val originalPosts = _uiState.value.posts
+        val postIndex = originalPosts.indexOfFirst { it.postId == postId }
+        if (postIndex == -1) return
+        val postToUpdate = originalPosts[postIndex]
+
+        val optimisticVoteItems = postToUpdate.voteItems.map { voteItem ->
+            voteItem.copy(isVoted = if (voteItem.voteItemId == voteItemId) type else false)
+        }
+
+        val optimisticPosts = originalPosts.toMutableList().apply {
+            this[postIndex] = postToUpdate.copy(voteItems = optimisticVoteItems)
+        }
+
+        _uiState.update { it.copy(posts = optimisticPosts) }
+
+        viewModelScope.launch {
+            roomsRepository.postRoomsVote(
+                roomId = roomId,
+                voteId = postId,
+                voteItemId = voteItemId,
+                type = type
+            ).onSuccess { voteResponse ->
+                if (voteResponse != null) {
+                    val serverVoteItems = voteResponse.voteItems
+
+                    // 현재 UI가 가지고 있는 포스트 목록을 가져오기
+                    val currentPosts = _uiState.value.posts
+                    val postIndex = currentPosts.indexOfFirst { it.postId == postId }
+                    if (postIndex == -1) return@onSuccess
+
+                    val postToUpdate = currentPosts[postIndex]
+
+                    // 기존 순서는 유지하고 내용만 업데이트
+                    val updatedVoteItems = postToUpdate.voteItems.map { originalItem ->
+                        val newItem = serverVoteItems.find { it.voteItemId == originalItem.voteItemId }
+                        newItem ?: originalItem
+                    }
+
+                    // 순서가 유지된 목록으로 최종 업데이트
+                    val finalPosts = currentPosts.toMutableList().apply {
+                        this[postIndex] = postToUpdate.copy(voteItems = updatedVoteItems)
+                    }
+                    _uiState.update { it.copy(posts = finalPosts) }
+                } else {
+                    loadPosts(isRefresh = true)
+                }
+            }.onFailure {
+                _uiState.update { it.copy(posts = originalPosts) }
+            }
+        }
+    }
+
+    private fun loadPosts(isRefresh: Boolean = false) {
+        val currentState = _uiState.value
+        if (currentState.isLoading || currentState.isLoadingMore || (currentState.isLastPage && !isRefresh)) return
+
+        viewModelScope.launch {
+            _uiState.update {
+                if (isRefresh) it.copy(
+                    isLoading = true,
+                    posts = emptyList(),
+                    error = null,
+                    isLastPage = false
+                )
+                else it.copy(isLoadingMore = true, error = null)
+            }
+
+            val cursor = if (isRefresh) null else nextCursor
+            val type = if (currentState.selectedTabIndex == 0) "group" else "mine"
+
+            val params = if (type == "mine") {
+                // "mine" 탭일 경우 필수 파라미터만 채워 넣음
+                RoomsPostsRequestParams(type = type, cursor = cursor)
+            } else {
+                // "group" 탭일 경우 모든 필터 파라미터 포함
+                RoomsPostsRequestParams(
+                    type = type,
+                    sort = currentState.selectedSort.apiKey,
+                    pageStart = currentState.pageStart.toIntOrNull(),
+                    pageEnd = currentState.pageEnd.toIntOrNull(),
+                    isOverview = currentState.isOverview,
+                    isPageFilter = currentState.isPageFilter,
+                    cursor = cursor
+                )
+            }
+
+            roomsRepository.getRoomsPosts(
+                roomId = roomId,
+                type = params.type,
+                sort = params.sort,
+                pageStart = params.pageStart,
+                pageEnd = params.pageEnd,
+                isOverview = params.isOverview,
+                isPageFilter = params.isPageFilter,
+                cursor = params.cursor
+            ).onSuccess { response ->
+                if (response != null) {
+                    nextCursor = response.nextCursor
+                    _uiState.update {
+                        it.copy(
+                            isLoading = false,
+                            isLoadingMore = false,
+                            posts = if (isRefresh) response.postList else it.posts + response.postList,
+                            isLastPage = response.isLast,
+                            totalEnabled = response.isOverviewEnabled
+                        )
+                    }
+                }
+            }.onFailure { throwable ->
+                _uiState.update {
+                    it.copy(isLoading = false, isLoadingMore = false, error = throwable.message)
+                }
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/note/viewmodel/GroupVoteCreateViewModel.kt b/app/src/main/java/com/texthip/thip/ui/group/note/viewmodel/GroupVoteCreateViewModel.kt
new file mode 100644
index 00000000..8ffeda7b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/note/viewmodel/GroupVoteCreateViewModel.kt
@@ -0,0 +1,202 @@
+package com.texthip.thip.ui.group.note.viewmodel
+
+import androidx.compose.ui.text.TextRange
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.model.rooms.request.VoteItem
+import com.texthip.thip.data.repository.RoomsRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class GroupVoteCreateUiState(
+    // 입력 값
+    val pageText: String = "",
+    val titleValue: TextFieldValue = TextFieldValue(""),
+    val options: List<String> = listOf("", ""), // 옵션은 최소 2개로 시작
+    val isGeneralReview: Boolean = false,
+    val isEditMode: Boolean = false,
+    val postId: Int? = null,
+
+    // 상태 값
+    val isLoading: Boolean = false,
+    val isSuccess: Boolean = false,
+    val error: String? = null,
+
+    // 초기 설정 값
+    val bookTotalPage: Int = 0,
+    val isGeneralReviewEnabled: Boolean = false,
+
+    // 내부 관리용
+    internal val savedPageText: String = ""
+) {
+    // 완료 버튼 활성화 조건
+    val isFormFilled: Boolean
+        get() {
+            val filledOptionsCount = options.count { it.isNotBlank() }
+            return (isGeneralReview || pageText.isNotBlank()) &&
+                    titleValue.text.isNotBlank() &&
+                    filledOptionsCount >= 2
+        }
+}
+
+sealed interface GroupVoteCreateEvent {
+    data class PageChanged(val text: String) : GroupVoteCreateEvent
+    data class TitleChanged(val newValue: TextFieldValue) : GroupVoteCreateEvent
+    data class OptionChanged(val index: Int, val text: String) : GroupVoteCreateEvent
+    data class GeneralReviewToggled(val isChecked: Boolean) : GroupVoteCreateEvent
+    data object AddOptionClicked : GroupVoteCreateEvent
+    data class RemoveOptionClicked(val index: Int) : GroupVoteCreateEvent
+    data object CreateVoteClicked : GroupVoteCreateEvent
+}
+
+@HiltViewModel
+class GroupVoteCreateViewModel @Inject constructor(
+    private val roomsRepository: RoomsRepository
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(GroupVoteCreateUiState())
+    val uiState = _uiState.asStateFlow()
+
+    private var roomId: Int = -1
+
+    fun initialize(
+        roomId: Int,
+        recentPage: Int,
+        totalPage: Int,
+        isOverviewPossible: Boolean,
+        postId: Int?,
+        page: Int?,
+        isOverview: Boolean?,
+        title: String?,
+        options: List<String>?
+    ) {
+        this.roomId = roomId
+
+        // 수정 모드인 경우
+        if (postId != null && page != null && isOverview != null && title != null && options != null) {
+            _uiState.update {
+                it.copy(
+                    isEditMode = true,
+                    postId = postId,
+                    pageText = page.toString(),
+                    isGeneralReview = isOverview,
+                    titleValue = TextFieldValue(
+                        text = title,
+                        selection = TextRange(title.length)
+                    ),
+                    options = options,
+                    bookTotalPage = totalPage,
+                    isGeneralReviewEnabled = isOverviewPossible
+                )
+            }
+        } else { // 생성 모드인 경우
+            _uiState.update {
+                it.copy(
+                    pageText = recentPage.toString(),
+                    bookTotalPage = totalPage,
+                    isGeneralReviewEnabled = isOverviewPossible
+                )
+            }
+        }
+    }
+
+    fun onEvent(event: GroupVoteCreateEvent) {
+        when (event) {
+            is GroupVoteCreateEvent.PageChanged -> if (!_uiState.value.isGeneralReview) {
+                _uiState.update { it.copy(pageText = event.text) }
+            }
+
+            is GroupVoteCreateEvent.TitleChanged -> _uiState.update { it.copy(titleValue = event.newValue) }
+            is GroupVoteCreateEvent.OptionChanged -> _uiState.update {
+                val newOptions = it.options.toMutableList()
+                newOptions[event.index] = event.text
+                it.copy(options = newOptions)
+            }
+
+            is GroupVoteCreateEvent.GeneralReviewToggled -> _uiState.update {
+                if (event.isChecked) {
+                    it.copy(isGeneralReview = true, savedPageText = it.pageText, pageText = "")
+                } else {
+                    it.copy(isGeneralReview = false, pageText = it.savedPageText)
+                }
+            }
+
+            GroupVoteCreateEvent.AddOptionClicked -> if (_uiState.value.options.size < 5) {
+                _uiState.update { it.copy(options = it.options + "") }
+            }
+
+            is GroupVoteCreateEvent.RemoveOptionClicked -> if (_uiState.value.options.size > 2) {
+                _uiState.update {
+                    val newOptions = it.options.toMutableList()
+                    newOptions.removeAt(event.index)
+                    it.copy(options = newOptions)
+                }
+            }
+
+            GroupVoteCreateEvent.CreateVoteClicked -> {
+                if (_uiState.value.isEditMode) {
+                    updateVote()
+                } else {
+                    createVote()
+                }
+            }
+        }
+    }
+
+    private fun updateVote() {
+        val currentState = _uiState.value
+        val postId = currentState.postId ?: return
+
+        viewModelScope.launch {
+            _uiState.update { it.copy(isLoading = true) }
+            roomsRepository.patchRoomsVote(
+                roomId = roomId,
+                voteId = postId,
+                content = currentState.titleValue.text
+            ).onSuccess {
+                _uiState.update { it.copy(isLoading = false, isSuccess = true) }
+            }.onFailure { throwable ->
+                _uiState.update { it.copy(isLoading = false, error = throwable.message) }
+            }
+        }
+    }
+
+    private fun createVote() {
+        val currentState = _uiState.value
+        if (!currentState.isFormFilled) return
+        val pageNumber = if (currentState.isGeneralReview) {
+            currentState.bookTotalPage
+        } else {
+            currentState.pageText.toIntOrNull()
+        }
+        if (pageNumber == null) {
+            _uiState.update { it.copy(error = "페이지 번호를 정확히 입력해주세요.") }
+            return
+        }
+
+        viewModelScope.launch {
+            _uiState.update { it.copy(isLoading = true) }
+
+            val voteItems = currentState.options
+                .filter { it.isNotBlank() }
+                .map { VoteItem(itemName = it) }
+
+            roomsRepository.postRoomsCreateVote(
+                roomId = roomId,
+                page = pageNumber,
+                isOverview = currentState.isGeneralReview,
+                content = currentState.titleValue.text,
+                voteItemList = voteItems
+            ).onSuccess {
+                _uiState.update { it.copy(isLoading = false, isSuccess = true) }
+            }.onFailure { throwable ->
+                _uiState.update { it.copy(isLoading = false, error = throwable.message) }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/component/GroupRoomBody.kt b/app/src/main/java/com/texthip/thip/ui/group/room/component/GroupRoomBody.kt
new file mode 100644
index 00000000..d0f6651e
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/component/GroupRoomBody.kt
@@ -0,0 +1,97 @@
+package com.texthip.thip.ui.group.room.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+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.data.model.rooms.response.CurrentVote
+import com.texthip.thip.data.model.rooms.response.VoteItem
+import com.texthip.thip.ui.common.buttons.ActionBookButton
+import com.texthip.thip.ui.common.cards.CardChat
+import com.texthip.thip.ui.common.cards.CardNote
+import com.texthip.thip.ui.common.cards.CardVote
+import kotlin.math.roundToInt
+
+@Composable
+fun GroupRoomBody(
+    modifier: Modifier = Modifier,
+    bookTitle: String,
+    authorName: String,
+    isbn: String,
+    currentPage: Int,
+    userPercentage: Int,
+    currentVotes: List<CurrentVote>,
+    onNavigateToBookDetail: (isbn: String) -> Unit = {},
+    onNavigateToNote: () -> Unit = {},
+    onNavigateToChat: () -> Unit = {},
+    onVoteClick: (CurrentVote) -> Unit = {}
+) {
+    Column(
+        modifier = modifier.padding(horizontal = 20.dp),
+        verticalArrangement = Arrangement.spacedBy(20.dp)
+    ) {
+        ActionBookButton(
+            bookTitle = bookTitle,
+            bookAuthor = authorName
+        ) {
+            onNavigateToBookDetail(isbn)
+        }
+
+        CardNote(
+            currentPage = currentPage,
+            percentage = userPercentage,
+        ) {
+            onNavigateToNote()
+        }
+
+        CardChat(
+            title = stringResource(R.string.group_room_chat),
+            subtitle = stringResource(R.string.group_room_chat_description)
+        ) {
+            onNavigateToChat()
+        }
+
+        CardVote(
+            voteData = currentVotes,
+            onVoteClick = onVoteClick
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun GroupRoomBodyPreview() {
+    GroupRoomBody(
+        bookTitle = "책 제목",
+        authorName = "저자 이름",
+        isbn = "1234567890",
+        currentPage = 100,
+        userPercentage = 50,
+        currentVotes = listOf(
+            CurrentVote(
+                content = "3연에 나오는 심장은 무엇을 의미하는 걸까요?",
+                page = 12,
+                isOverview = false,
+                voteItems = listOf(
+                    VoteItem("사랑"),
+                    VoteItem("희생"),
+                    VoteItem("고통"),
+                )
+            ),
+            CurrentVote(
+                content = "가장 인상 깊었던 구절은 무엇인가요?",
+                page = 25,
+                isOverview = false,
+                voteItems = listOf(
+                    VoteItem("1연 1행"),
+                    VoteItem("2연 3행"),
+                )
+            )
+        )
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/component/GroupRoomHeader.kt b/app/src/main/java/com/texthip/thip/ui/group/room/component/GroupRoomHeader.kt
new file mode 100644
index 00000000..b132c44a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/component/GroupRoomHeader.kt
@@ -0,0 +1,195 @@
+package com.texthip.thip.ui.group.room.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+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.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+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.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.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+import com.texthip.thip.utils.color.hexToColor
+
+@Composable
+fun GroupRoomHeader(
+    roomName: String,
+    roomDescription: String,
+    isPublic: Boolean,
+    progressStartDate: String,
+    progressEndDate: String,
+    memberCount: Int,
+    category: String,
+    categoryColor: String = "#A0F8E8",
+    onNavigateToMates: () -> Unit = { }
+) {
+    Column(
+        modifier = Modifier.padding(horizontal = 20.dp)
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(2.dp, Alignment.Start),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Text(
+                text = roomName,
+                style = typography.bigtitle_b700_s22_h24,
+                color = colors.White
+            )
+
+            if (!isPublic) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_lock),
+                    contentDescription = "Lock Icon",
+                    tint = Color.Unspecified
+                )
+            }
+        }
+
+        Spacer(Modifier.height(40.dp))
+
+        Column {
+            Text(
+                text = stringResource(R.string.introduction_content),
+                style = typography.menu_sb600_s14_h24,
+                color = colors.White
+            )
+
+            Spacer(Modifier.height(4.dp))
+
+            Text(
+                text = roomDescription,
+                style = typography.copy_r400_s12_h20,
+                color = colors.White
+            )
+        }
+
+        Spacer(Modifier.height(20.dp))
+
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(40.dp, Alignment.Start),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Column(
+                modifier = Modifier.widthIn(max = 180.dp)
+            ) {
+                Row {
+                    Icon(
+                        painter = painterResource(R.drawable.ic_calendar),
+                        contentDescription = "Calendar Icon",
+                        tint = Color.Unspecified,
+                        modifier = Modifier.size(20.dp)
+                    )
+                    Spacer(Modifier.width(2.dp))
+                    Text(
+                        text = stringResource(R.string.group_active_period),
+                        style = typography.view_m500_s12_h20,
+                        color = colors.White
+                    )
+                }
+                Spacer(Modifier.height(12.dp))
+                Text(
+                    text = stringResource(
+                        R.string.group_room_period,
+                        progressStartDate,
+                        progressEndDate
+                    ),
+                    style = typography.timedate_r400_s11,
+                    color = colors.White
+                )
+            }
+
+            Column(
+                modifier = Modifier
+                    .widthIn(max = 180.dp)
+                    .clickable { onNavigateToMates() }
+            ) {
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.SpaceBetween,
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Row {
+                        Icon(
+                            painter = painterResource(R.drawable.ic_group),
+                            contentDescription = "Group Icon",
+                            tint = colors.White,
+                            modifier = Modifier.size(20.dp)
+                        )
+                        Spacer(Modifier.width(2.dp))
+                        Text(
+                            text = stringResource(R.string.book_mate),
+                            style = typography.view_m500_s12_h20,
+                            color = colors.White
+                        )
+                    }
+
+                    Icon(
+                        painter = painterResource(R.drawable.ic_chevron),
+                        contentDescription = "Participant Icon",
+                        tint = colors.White
+                    )
+                }
+                Spacer(Modifier.height(12.dp))
+                Text(
+                    text = stringResource(R.string.participate_num, memberCount),
+                    style = typography.menu_sb600_s12,
+                    color = colors.White
+                )
+            }
+        }
+
+        Spacer(Modifier.height(20.dp))
+
+        Row(
+            modifier = Modifier
+                .background(color = colors.Grey03, shape = RoundedCornerShape(40.dp))
+                .padding(vertical = 8.dp, horizontal = 12.dp)
+        ) {
+            Row {
+                Text(
+                    text = stringResource(R.string.genre),
+                    style = typography.info_m500_s12,
+                    color = colors.White,
+                    modifier = Modifier.padding(end = 4.dp)
+                )
+                Text(
+                    text = category,
+                    style = typography.info_m500_s12,
+                    color = hexToColor(categoryColor)
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun GroupRoomHeaderPreview() {
+    GroupRoomHeader(
+        roomName = "호르몬 체인지 완독하는 방",
+        roomDescription = "‘시집만 읽는 사람들’ 3월 모임입니다. 이번 달 모임방은 심장보다 단단한 토마토 한 알 완독합니다.",
+        isPublic = true,
+        progressStartDate = "2023.10.01",
+        progressEndDate = "2023.10.31",
+        memberCount = 22,
+        category = "문학"
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/component/GroupRoomMatesList.kt b/app/src/main/java/com/texthip/thip/ui/group/room/component/GroupRoomMatesList.kt
new file mode 100644
index 00000000..9307aaec
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/component/GroupRoomMatesList.kt
@@ -0,0 +1,76 @@
+package com.texthip.thip.ui.group.room.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.data.model.rooms.response.RoomsUsersResponse
+import com.texthip.thip.data.model.rooms.response.UserList
+import com.texthip.thip.ui.common.header.ProfileBar
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.utils.color.hexToColor
+
+@Composable
+fun GroupRoomMatesList(
+    members: RoomsUsersResponse,
+    onUserClick: (Long) -> Unit = {}
+) {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(20.dp)
+    ) {
+        val userList = members.userList
+        userList.forEachIndexed { index, member ->
+            ProfileBar(
+                profileImage = member.imageUrl,
+                topText = member.nickname,
+                bottomText = member.aliasName,
+                bottomTextColor = hexToColor(member.aliasColor),
+                showSubscriberInfo = true,
+                subscriberCount = member.followerCount
+            ) { onUserClick(member.userId) }
+
+            if (index != userList.lastIndex) {
+                HorizontalDivider(
+                    color = colors.DarkGrey02,
+                    thickness = 1.dp
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun GroupRoomMatesListPreview() {
+    GroupRoomMatesList(
+        members =
+            RoomsUsersResponse(
+                listOf(
+                    UserList(
+                        userId = 1,
+                        nickname = "김희용",
+                        aliasName = "문학가",
+                        aliasColor= "#A0F8E8",
+                        imageUrl = "https://example.com/image1.jpg",
+                        followerCount = 100
+                    ),
+                    UserList(
+                        userId = 2,
+                        nickname = "노성준",
+                        aliasName = "문학가",
+                        aliasColor= "#A0F8E8",
+                        imageUrl = "https://example.com/image1.jpg",
+                        followerCount = 100
+                    ),
+                )
+            )
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/mock/MenuBottomSheetItem.kt b/app/src/main/java/com/texthip/thip/ui/group/room/mock/MenuBottomSheetItem.kt
new file mode 100644
index 00000000..59c61c41
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/mock/MenuBottomSheetItem.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.ui.group.room.mock
+
+import androidx.compose.ui.graphics.Color
+
+data class MenuBottomSheetItem(
+    val text: String,
+    val color: Color = Color.White,
+    val onClick: () -> Unit,
+)
+
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/mock/RoomAction.kt b/app/src/main/java/com/texthip/thip/ui/group/room/mock/RoomAction.kt
new file mode 100644
index 00000000..a7a8861b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/mock/RoomAction.kt
@@ -0,0 +1,6 @@
+package com.texthip.thip.ui.group.room.mock
+
+enum class RoomAction(val value: String) {
+    JOIN("join"),
+    CANCEL("cancel")
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomChatScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomChatScreen.kt
new file mode 100644
index 00000000..bca30a8c
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomChatScreen.kt
@@ -0,0 +1,369 @@
+package com.texthip.thip.ui.group.room.screen
+
+import android.widget.Toast
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.blur
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.texthip.thip.R
+import com.texthip.thip.data.model.rooms.response.TodayCommentList
+import com.texthip.thip.ui.common.bottomsheet.MenuBottomSheet
+import com.texthip.thip.ui.common.cards.CardCommentGroup
+import com.texthip.thip.ui.common.forms.CommentTextField
+import com.texthip.thip.ui.common.modal.ToastWithDate
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.common.view.CountingBar
+import com.texthip.thip.ui.group.room.mock.MenuBottomSheetItem
+import com.texthip.thip.ui.group.room.viewmodel.GroupRoomChatEvent
+import com.texthip.thip.ui.group.room.viewmodel.GroupRoomChatUiState
+import com.texthip.thip.ui.group.room.viewmodel.GroupRoomChatViewModel
+import com.texthip.thip.ui.group.room.viewmodel.ToastType
+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.utils.rooms.advancedImePadding
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.collectLatest
+
+@Composable
+fun GroupRoomChatScreen(
+    onBackClick: () -> Unit,
+    viewModel: GroupRoomChatViewModel = hiltViewModel()
+) {
+    var inputText by remember { mutableStateOf("") }
+    val uiState by viewModel.uiState.collectAsState()
+    val context = LocalContext.current
+
+    var showToast by remember { mutableStateOf(false) }
+    var toastMessage by remember { mutableStateOf("") }
+    val colorWhite = colors.White
+    val colorRed = colors.Red
+    var toastColor by remember { mutableStateOf(colorWhite) }
+
+    val dailyGreetingLimitMessage = stringResource(R.string.group_room_chat_max)
+    val deleteSuccessMessage = stringResource(R.string.group_room_chat_delete_success)
+
+    LaunchedEffect(key1 = Unit) {
+        viewModel.eventFlow.collectLatest { event ->
+            when (event) {
+                is GroupRoomChatEvent.ShowToast -> {
+                    when (event.type) {
+                        ToastType.DAILY_GREETING_LIMIT -> {
+                            toastMessage = dailyGreetingLimitMessage
+                            toastColor = colorRed
+                        }
+                        ToastType.FIRST_WRITE -> {
+                            toastMessage = dailyGreetingLimitMessage
+                            toastColor = colorWhite
+                        }
+                        ToastType.DELETE_GREETING_SUCCESS -> {
+                            toastMessage = deleteSuccessMessage
+                            toastColor = colorWhite
+                        }
+                    }
+                    showToast = true
+                }
+                is GroupRoomChatEvent.ShowErrorToast -> {
+                    Toast.makeText(context, event.message, Toast.LENGTH_SHORT).show()
+                }
+                else -> Unit
+            }
+        }
+    }
+
+    LaunchedEffect(showToast) {
+        if (showToast) {
+            delay(3000)
+            showToast = false
+        }
+    }
+
+    GroupRoomChatContent(
+        uiState = uiState,
+        onEvent = viewModel::onEvent,
+        inputText = inputText,
+        onInputTextChanged = { newText -> inputText = newText },
+        onSendClick = {
+            viewModel.postDailyGreeting(inputText)
+            inputText = ""
+        },
+        onNavigateBack = onBackClick,
+        showToast = showToast,
+        toastMessage = toastMessage,
+        toastColor = toastColor
+    )
+}
+
+@Composable
+fun GroupRoomChatContent(
+    uiState: GroupRoomChatUiState,
+    onEvent: (GroupRoomChatEvent) -> Unit,
+    inputText: String,
+    onInputTextChanged: (String) -> Unit,
+    onSendClick: () -> Unit,
+    onNavigateBack: () -> Unit,
+    showToast: Boolean,
+    toastMessage: String,
+    toastColor: Color,
+) {
+    var isBottomSheetVisible by remember { mutableStateOf(false) }
+    var selectedMessage by remember { mutableStateOf<TodayCommentList?>(null) }
+    val lazyListState = rememberLazyListState()
+
+    LaunchedEffect(key1 = uiState.greetings) {
+        if (uiState.greetings.isNotEmpty()) {
+            lazyListState.animateScrollToItem(index = 0)
+        }
+    }
+
+    val isScrolledToTop by remember {
+        derivedStateOf {
+            lazyListState.firstVisibleItemIndex == 0 && lazyListState.firstVisibleItemScrollOffset == 0
+        }
+    }
+
+    LaunchedEffect(isScrolledToTop) {
+        if (isScrolledToTop && !uiState.isLoadingMore && !uiState.isLastPage) {
+            onEvent(GroupRoomChatEvent.LoadMore)
+        }
+    }
+
+    Box(
+        if (isBottomSheetVisible) {
+            Modifier
+                .fillMaxSize()
+                .blur(5.dp)
+        } else {
+            Modifier.fillMaxSize()
+        }
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .advancedImePadding()
+        ) {
+            DefaultTopAppBar(
+                title = stringResource(R.string.group_room_chat),
+                onLeftClick = onNavigateBack,
+            )
+
+            if (uiState.isLoading) {
+                Box(
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxSize(),
+                    contentAlignment = Alignment.Center
+                ) {
+                    CircularProgressIndicator(color = colors.White)
+                }
+            } else if (uiState.greetings.isEmpty()) {
+                Box(
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxSize(),
+                    contentAlignment = Alignment.Center
+                ) {
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        verticalArrangement = Arrangement.spacedBy(8.dp)
+                    ) {
+                        Text(
+                            text = stringResource(R.string.group_room_no_chat_title),
+                            style = typography.smalltitle_sb600_s18_h24,
+                            color = colors.White
+                        )
+                        Text(
+                            text = stringResource(R.string.group_room_no_chat_content),
+                            style = typography.copy_r400_s14,
+                            color = colors.Grey
+                        )
+                    }
+                }
+            } else {
+                LazyColumn(
+                    state = lazyListState,
+                    reverseLayout = true,
+                    modifier = Modifier.weight(1f),
+                    verticalArrangement = Arrangement.spacedBy(20.dp, Alignment.Bottom)
+                ) {
+                    if (uiState.isLoadingMore) {
+                        item {
+                            Box(
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .padding(vertical = 16.dp),
+                                contentAlignment = Alignment.Center
+                            ) {
+                                CircularProgressIndicator(modifier = Modifier.size(24.dp))
+                            }
+                        }
+                    }
+
+                    itemsIndexed(
+                        uiState.greetings,
+                        key = { _, item -> item.attendanceCheckId }) { index, message ->
+                        val isNewDate = when {
+                            index == uiState.greetings.lastIndex -> true
+                            uiState.greetings[index + 1].date != message.date -> true
+                            else -> false
+                        }
+                        val isBottomItem = index == 0
+
+                        Column(
+                            verticalArrangement = Arrangement.spacedBy(20.dp),
+                            modifier = if (isBottomItem) Modifier.padding(bottom = 20.dp) else Modifier
+                        ) {
+                            if (isNewDate) {
+                                HorizontalDivider(
+                                    color = colors.DarkGrey03,
+                                    thickness = 10.dp
+                                )
+                                CountingBar(
+                                    modifier = Modifier.align(Alignment.CenterHorizontally),
+                                    content = message.date
+                                )
+                            }
+
+                            CardCommentGroup(
+                                data = message,
+                                onMenuClick = {
+                                    selectedMessage = message
+                                    isBottomSheetVisible = true
+                                }
+                            )
+                        }
+                    }
+                }
+            }
+
+            CommentTextField(
+                input = inputText,
+                hint = stringResource(R.string.group_room_chat_hint),
+                onInputChange = onInputTextChanged,
+                onSendClick = onSendClick
+            )
+        }
+
+        AnimatedVisibility(
+            // visible 조건을 showToast로 변경
+            visible = showToast,
+            enter = slideInVertically(
+                initialOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            exit = slideOutVertically(
+                targetOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .padding(horizontal = 20.dp, vertical = 16.dp)
+                .zIndex(3f)
+        ) {
+            ToastWithDate(
+                message = toastMessage,
+                color = toastColor
+            )
+        }
+    }
+
+    if (isBottomSheetVisible && selectedMessage != null) {
+        val menuItems = if (selectedMessage!!.isWriter) {
+            listOf(
+                MenuBottomSheetItem(
+                    text = stringResource(R.string.delete),
+                    color = colors.Red,
+                    onClick = {
+                        selectedMessage?.let { message ->
+                            onEvent(GroupRoomChatEvent.DeleteGreeting(message.attendanceCheckId))
+                        }
+                        isBottomSheetVisible = false
+                    }
+                )
+            )
+        } else {
+            listOf(
+                MenuBottomSheetItem(
+                    text = stringResource(R.string.report),
+                    color = colors.Red,
+                    onClick = {
+                        // TODO: 신고 처리
+                        isBottomSheetVisible = false
+                    }
+                )
+            )
+        }
+
+        MenuBottomSheet(
+            items = menuItems,
+            onDismiss = {
+                isBottomSheetVisible = false
+                selectedMessage = null
+            }
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun GroupRoomChatScreenPreview() {
+    ThipTheme {
+        var inputText by remember { mutableStateOf("") }
+        GroupRoomChatContent(
+            uiState = GroupRoomChatUiState(
+                isLoading = false,
+                greetings = listOf(
+                    TodayCommentList(
+                        attendanceCheckId = 3,
+                        creatorId = 3,
+                        creatorProfileImageUrl = "",
+                        creatorNickname = "user.03",
+                        todayComment = "세 번째 메시지입니다. 오늘 날씨가 좋네요.",
+                        postDate = "10분 전",
+                        date = "2025년 8월 18일",
+                        isWriter = false
+                    ),
+                )
+            ),
+            onEvent = {},
+            inputText = inputText,
+            onInputTextChanged = { newText -> inputText = newText },
+            onSendClick = {},
+            onNavigateBack = {},
+            showToast = false,
+            toastMessage = "",
+            toastColor = colors.White
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomMatesScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomMatesScreen.kt
new file mode 100644
index 00000000..2b7487fc
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomMatesScreen.kt
@@ -0,0 +1,125 @@
+package com.texthip.thip.ui.group.room.screen
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.texthip.thip.R
+import com.texthip.thip.data.model.rooms.response.RoomsUsersResponse
+import com.texthip.thip.data.model.rooms.response.UserList
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.group.room.component.GroupRoomMatesList
+import com.texthip.thip.ui.group.room.viewmodel.GroupRoomMatesUiState
+import com.texthip.thip.ui.group.room.viewmodel.GroupRoomMatesViewModel
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+
+@Composable
+fun GroupRoomMatesScreen(
+    roomId: Int,
+    onBackClick: () -> Unit = {},
+    onUserClick: (Long) -> Unit = {},
+    viewModel: GroupRoomMatesViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+
+    // 화면이 처음 그려질 때 데이터 로딩 실행
+    LaunchedEffect(key1 = Unit) {
+        viewModel.fetchUsers(roomId)
+    }
+
+    // UI 상태에 따라 다른 화면을 보여줌
+    when (val state = uiState) {
+        is GroupRoomMatesUiState.Loading -> {
+            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+                CircularProgressIndicator()
+            }
+        }
+
+        is GroupRoomMatesUiState.Success -> {
+            // 성공 시, 실제 데이터를 화면에 표시
+            GroupRoomMatesContent(
+                data = state.users,
+                onBackClick = onBackClick,
+                onUserClick = onUserClick
+            )
+        }
+
+        is GroupRoomMatesUiState.Error -> {
+            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+                Text(text = state.message, color = colors.White) // TODO: 에러 메시지 스타일링
+            }
+        }
+    }
+}
+
+@Composable
+fun GroupRoomMatesContent(
+    data: RoomsUsersResponse,
+    onBackClick: () -> Unit = {},
+    onUserClick: (Long) -> Unit = {},
+) {
+    val scrollState = rememberScrollState()
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            title = stringResource(R.string.group_room_mates),
+            onLeftClick = onBackClick,
+        )
+        Column(
+            modifier = Modifier
+                .verticalScroll(scrollState)
+        ) {
+            GroupRoomMatesList(
+                members = data,
+                onUserClick = onUserClick,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun GroupRoomMatesScreenPreview() {
+    ThipTheme {
+        GroupRoomMatesContent(
+            data = RoomsUsersResponse(
+                listOf(
+                    UserList(
+                        userId = 1,
+                        nickname = "김희용",
+                        aliasName = "문학가",
+                        aliasColor = "#A0F8E8",
+                        imageUrl = "https://example.com/image1.jpg",
+                        followerCount = 100
+                    ),
+                    UserList(
+                        userId = 2,
+                        nickname = "노성준",
+                        aliasName = "문학가",
+                        aliasColor = "#A0F8E8",
+                        imageUrl = "https://example.com/image1.jpg",
+                        followerCount = 100
+                    ),
+                )
+            ),
+            onBackClick = {},
+            onUserClick = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomRecruitScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomRecruitScreen.kt
new file mode 100644
index 00000000..2517bafa
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomRecruitScreen.kt
@@ -0,0 +1,588 @@
+package com.texthip.thip.ui.group.room.screen
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.foundation.background
+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.lazy.items
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import androidx.hilt.navigation.compose.hiltViewModel
+import coil.compose.AsyncImage
+import com.texthip.thip.R
+import com.texthip.thip.data.model.rooms.response.RecommendRoomResponse
+import com.texthip.thip.data.model.rooms.response.RoomRecruitingResponse
+import com.texthip.thip.ui.common.cards.CardItemRoomSmall
+import com.texthip.thip.ui.common.cards.CardRoomBook
+import com.texthip.thip.ui.common.modal.DialogPopup
+import com.texthip.thip.ui.common.modal.ToastWithDate
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.group.myroom.mock.GroupBottomButtonType
+import com.texthip.thip.ui.group.room.viewmodel.GroupRoomRecruitUiState
+import com.texthip.thip.ui.group.room.viewmodel.GroupRoomRecruitViewModel
+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.utils.color.hexToColor
+import kotlinx.coroutines.delay
+
+@Composable
+fun GroupRoomRecruitScreen(
+    roomId: Int,
+    onRecommendationClick: (RecommendRoomResponse) -> Unit = {},
+    onNavigateToGroupScreen: (String) -> Unit = {}, // GroupScreen으로 네비게이션 + 토스트 메시지
+    onBackClick: () -> Unit = {}, // 뒤로가기
+    onBookDetailClick: (String) -> Unit = {}, // 책 상세 화면으로 이동
+    onNavigateToPasswordScreen: (Int) -> Unit = {}, // 비밀번호 입력 화면으로 이동
+    onNavigateToRoomPlayingScreen: (Int) -> Unit = {}, // 기록장 화면으로 이동
+    viewModel: GroupRoomRecruitViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsState()
+
+    // 데이터 로딩
+    LaunchedEffect(roomId) {
+        viewModel.loadRoomDetail(roomId)
+    }
+
+    // GroupScreen으로 네비게이션
+    LaunchedEffect(uiState.shouldNavigateToGroupScreen, uiState.toastMessage) {
+        if (uiState.shouldNavigateToGroupScreen) {
+            onNavigateToGroupScreen(uiState.toastMessage)
+            viewModel.onNavigatedToGroupScreen()
+        }
+    }
+
+    // 기록장 화면으로 네비게이션
+    LaunchedEffect(uiState.shouldNavigateToRoomPlayingScreen, uiState.roomId) {
+        if (uiState.shouldNavigateToRoomPlayingScreen) {
+            val roomIdValue = uiState.roomId
+            if (roomIdValue != null) {
+                onNavigateToRoomPlayingScreen(roomIdValue)
+                viewModel.onNavigatedToRoomPlayingScreen()
+            }
+        }
+    }
+
+    GroupRoomRecruitContent(
+        uiState = uiState,
+        onRecommendationClick = onRecommendationClick,
+        onBackClick = onBackClick,
+        onBookDetailClick = onBookDetailClick,
+        onParticipationClick = {
+            // 비밀방이면 비밀번호 화면으로, 공개방이면 바로 참여
+            val detail = uiState.roomDetail
+            if (detail != null && !detail.isPublic) {
+                onNavigateToPasswordScreen(detail.roomId)
+            } else {
+                viewModel.onParticipationClick()
+            }
+        },
+        onCancelParticipationClick = { title, description ->
+            viewModel.onCancelParticipationClick(
+                title,
+                description
+            )
+        },
+        onCloseRecruitmentClick = { title, description ->
+            viewModel.onCloseRecruitmentClick(
+                title,
+                description
+            )
+        },
+        onDialogConfirm = { viewModel.onDialogConfirm() },
+        onDialogCancel = { viewModel.onDialogCancel() },
+        onHideToast = { viewModel.hideToast() }
+    )
+}
+
+@Composable
+fun GroupRoomRecruitContent(
+    uiState: GroupRoomRecruitUiState,
+    onRecommendationClick: (RecommendRoomResponse) -> Unit = {},
+    onBackClick: () -> Unit = {},
+    onBookDetailClick: (String) -> Unit = {},
+    onParticipationClick: () -> Unit = {},
+    onCancelParticipationClick: (String, String) -> Unit = { _, _ -> },
+    onCloseRecruitmentClick: (String, String) -> Unit = { _, _ -> },
+    onDialogConfirm: () -> Unit = {},
+    onDialogCancel: () -> Unit = {},
+    onHideToast: () -> Unit = {}
+) {
+    val context = LocalContext.current
+    val scrollState = rememberScrollState()
+
+    Box(Modifier.fillMaxSize()) {
+        // 로딩 상태
+        if (uiState.isLoading) {
+            Box(
+                modifier = Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                CircularProgressIndicator(color = colors.White)
+            }
+            return@Box
+        }
+
+        // 데이터가 없는 경우
+        val detail = uiState.roomDetail ?: return@Box
+
+        AsyncImage(
+            model = detail.roomImageUrl,
+            contentDescription = "모임방 배경 이미지",
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .fillMaxWidth(),
+            contentScale = ContentScale.Crop
+        )
+
+        // 그라데이션 페이드 오버레이 (상단과 하단이 더 어두움)
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(
+                    Brush.verticalGradient(
+                        colors = listOf(
+                            colors.Black.copy(alpha = 1f),
+                            colors.Black.copy(alpha = 0.3f),
+                            colors.Black.copy(alpha = 1f),
+                            colors.Black.copy(alpha = 1f),
+                            colors.Black.copy(alpha = 1f),
+                            colors.Black.copy(alpha = 1f)
+                        ),
+                        startY = 0f,
+                        endY = Float.POSITIVE_INFINITY
+                    )
+                )
+        )
+
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+        ) {
+            Column {
+                DefaultTopAppBar(
+                    isRightIconVisible = false,
+                    isTitleVisible = false,
+                    onLeftClick = onBackClick,
+                )
+
+                Column(
+                    Modifier
+                        .fillMaxSize()
+                        .verticalScroll(scrollState),
+                ) {
+                    Row(
+                        modifier = Modifier.padding(horizontal = 20.dp).padding(top = 20.dp),
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Text(
+                            text = detail.roomName,
+                            style = typography.bigtitle_b700_s22_h24,
+                            color = colors.White
+                        )
+                        if (!detail.isPublic) {
+                            Spacer(Modifier.width(2.dp))
+                            Icon(
+                                painter = painterResource(id = R.drawable.ic_lock),
+                                contentDescription = "비밀방",
+                                tint = colors.White
+                            )
+                        } else {
+                            Spacer(Modifier.width(2.dp))
+                            Icon(
+                                painter = painterResource(id = R.drawable.ic_unlock),
+                                contentDescription = "오픈방",
+                                tint = colors.White
+                            )
+                        }
+                    }
+
+                    Text(
+                        modifier = Modifier
+                            .padding(horizontal = 20.dp)
+                            .padding(top = 40.dp),
+                        text = stringResource(R.string.group_room_desc),
+                        style = typography.menu_sb600_s14_h24,
+                        color = colors.White,
+                    )
+
+                    Text(
+                        text = detail.roomDescription,
+                        style = typography.copy_r400_s12_h20,
+                        color = colors.Grey,
+                        modifier = Modifier
+                            .padding(horizontal = 20.dp)
+                            .padding(top = 5.dp, bottom = 20.dp)
+                    )
+
+                    Row(
+                        Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 20.dp),
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        //모집 기간
+                        Column {
+                            Row(
+                                verticalAlignment = Alignment.CenterVertically
+                            ) {
+                                Icon(
+                                    painter = painterResource(id = R.drawable.ic_calendar),
+                                    contentDescription = "모임 활동기간",
+                                    tint = colors.White
+                                )
+                                Spacer(Modifier.width(2.dp))
+                                Text(
+                                    text = stringResource(R.string.group_period),
+                                    style = typography.view_m500_s12_h20,
+                                    color = colors.White
+                                )
+                            }
+
+                            Text(
+                                modifier = Modifier.padding(top = 12.dp),
+                                text = stringResource(
+                                    R.string.group_room_period,
+                                    detail.progressStartDate,
+                                    detail.progressEndDate
+                                ),
+                                style = typography.timedate_r400_s11,
+                                color = colors.Grey
+                            )
+                        }
+
+                        //참여 인원
+                        Column(
+                            verticalArrangement = Arrangement.Center,
+                            modifier = Modifier.padding(start = 50.dp)
+                        ) {
+                            Row(
+                                verticalAlignment = Alignment.CenterVertically
+                            ) {
+                                Icon(
+                                    painter = painterResource(id = R.drawable.ic_group),
+                                    contentDescription = "참여 중인 독서 메이트",
+                                    tint = colors.White
+                                )
+                                Spacer(Modifier.width(2.dp))
+                                Text(
+                                    text = stringResource(R.string.group_mate),
+                                    style = typography.view_m500_s12_h20,
+                                    color = colors.White
+                                )
+                            }
+                            Row(
+                                modifier = Modifier
+                                    .padding(top = 12.dp),
+                                verticalAlignment = Alignment.CenterVertically
+                            ) {
+                                Text(
+                                    text = stringResource(
+                                        R.string.group_room_screen_participant_count,
+                                        detail.memberCount
+                                    ),
+                                    style = typography.menu_sb600_s12,
+                                    color = colors.White
+                                )
+                                Spacer(Modifier.width(2.dp))
+                                Text(
+                                    text = stringResource(
+                                        R.string.group_room_screen_participant_count_max,
+                                        detail.recruitCount
+                                    ),
+                                    style = typography.info_m500_s12,
+                                    color = colors.Grey
+                                )
+                            }
+                        }
+                    }
+
+                    Row(
+                        Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 20.dp)
+                            .padding(top = 22.dp, bottom = 30.dp),
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Box(
+                            Modifier
+                                .background(colors.Grey03, shape = RoundedCornerShape(14.dp))
+                                .padding(horizontal = 12.dp, vertical = 8.dp)
+                        ) {
+                            Row {
+                                Text(
+                                    text = stringResource(R.string.group_recruiting),
+                                    style = typography.info_m500_s12,
+                                    color = colors.White
+                                )
+                                Spacer(Modifier.width(4.dp))
+                                Text(
+                                    text = detail.recruitEndDate,
+                                    style = typography.info_m500_s12,
+                                    color = colors.NeonGreen
+                                )
+                            }
+                        }
+                        Spacer(Modifier.width(12.dp))
+                        Box(
+                            Modifier
+                                .background(colors.Grey03, shape = RoundedCornerShape(14.dp))
+                                .padding(horizontal = 12.dp, vertical = 8.dp)
+                        ) {
+                            Row {
+                                Text(
+                                    text = stringResource(R.string.group_genre),
+                                    style = typography.info_m500_s12,
+                                    color = colors.White
+                                )
+                                Spacer(Modifier.width(4.dp))
+                                Text(
+                                    text = detail.category,
+                                    style = typography.info_m500_s12,
+                                    color = hexToColor(detail.categoryColor)
+                                )
+                            }
+                        }
+                    }
+
+                    //읽을 책 정보
+                    CardRoomBook(
+                        modifier = Modifier.padding(horizontal = 20.dp),
+                        title = detail.bookTitle,
+                        author = detail.authorName,
+                        publisher = detail.publisher,
+                        description = detail.bookDescription,
+                        imageUrl = detail.bookImageUrl,
+                        onClick = { onBookDetailClick(detail.isbn) }
+                    )
+
+                    // 추천 모임방이 있을 때만 표시
+                    if (detail.recommendRooms.isNotEmpty()) {
+                        Text(
+                            modifier = Modifier.padding(top = 40.dp, start = 20.dp),
+                            text = stringResource(R.string.group_recommend),
+                            style = typography.smalltitle_sb600_s18_h24,
+                            color = colors.White
+                        )
+
+                        //추천 모임방
+                        LazyRow(
+                            modifier = Modifier
+                                .padding(top = 24.dp, start = 20.dp)
+                                .fillMaxWidth(),
+                            horizontalArrangement = Arrangement.spacedBy(20.dp)
+                        ) {
+                            items(detail.recommendRooms) { rec ->
+                                CardItemRoomSmall(
+                                    title = rec.roomName,
+                                    participants = rec.memberCount,
+                                    maxParticipants = rec.recruitCount,
+                                    endDate = rec.recruitEndDate,
+                                    imageUrl = rec.bookImageUrl,
+                                    onClick = { onRecommendationClick(rec) }
+                                )
+                            }
+                        }
+                    }
+
+                    Spacer(Modifier.height(70.dp))
+                }
+            }
+        }
+
+        // 하단 버튼
+        val buttonType = uiState.currentButtonType
+        if (buttonType != null) {
+            val buttonText = when (buttonType) {
+                GroupBottomButtonType.JOIN -> stringResource(R.string.group_room_screen_participant)
+                GroupBottomButtonType.CANCEL -> stringResource(R.string.group_room_screen_cancel)
+                GroupBottomButtonType.CLOSE -> stringResource(R.string.group_room_screen_end)
+            }
+
+            Button(
+                onClick = {
+                    when (buttonType) {
+                        GroupBottomButtonType.JOIN -> {
+                            onParticipationClick()
+                        }
+
+                        GroupBottomButtonType.CANCEL -> {
+                            onCancelParticipationClick(
+                                context.getString(R.string.group_participant_cancel_popup),
+                                context.getString(R.string.group_participant_cancel_comment)
+                            )
+                        }
+
+                        GroupBottomButtonType.CLOSE -> {
+                            onCloseRecruitmentClick(
+                                context.getString(R.string.group_participant_close_popup),
+                                context.getString(R.string.group_participant_close_comment)
+                            )
+                        }
+                    }
+                },
+                enabled = buttonType != GroupBottomButtonType.JOIN || uiState.isJoinButtonEnabled,
+                colors = ButtonDefaults.buttonColors(
+                    containerColor = if (uiState.isJoinButtonEnabled || buttonType != GroupBottomButtonType.JOIN) colors.Purple else colors.Grey02,
+                    disabledContainerColor = colors.Grey02
+                ),
+                modifier = Modifier
+                    .align(Alignment.BottomCenter)
+                    .fillMaxWidth()
+                    .height(50.dp),
+                shape = RoundedCornerShape(0.dp)
+            ) {
+                Text(
+                    text = buttonText,
+                    style = typography.smalltitle_sb600_s18_h24,
+                    color = colors.White
+                )
+            }
+        }
+
+        // 토스트 팝업
+        AnimatedVisibility(
+            visible = uiState.showToast && !uiState.shouldNavigateToGroupScreen,
+            enter = slideInVertically(
+                initialOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            exit = slideOutVertically(
+                targetOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .padding(horizontal = 20.dp, vertical = 16.dp)
+                .zIndex(2f)
+        ) {
+            ToastWithDate(
+                message = uiState.toastMessage
+            )
+        }
+
+        if (uiState.showDialog) {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .background(colors.Black.copy(alpha = 0.5f))
+                    .zIndex(3f),
+                contentAlignment = Alignment.Center
+            ) {
+                DialogPopup(
+                    title = uiState.dialogTitle,
+                    description = uiState.dialogDescription,
+                    onConfirm = onDialogConfirm,
+                    onCancel = onDialogCancel
+                )
+            }
+        }
+    }
+
+    // 토스트 3초 후 자동 숨김 (GroupScreen으로 네비게이션 시에는 GroupScreen에서 관리)
+    LaunchedEffect(uiState.showToast, uiState.shouldNavigateToGroupScreen) {
+        if (uiState.showToast && !uiState.shouldNavigateToGroupScreen) {
+            delay(3000)
+            onHideToast()
+        }
+    }
+}
+
+@Preview(name = "참여 버튼 상태")
+@Composable
+fun GroupRoomRecruitScreenPreview() {
+    ThipTheme {
+        GroupRoomRecruitContent(
+            uiState = GroupRoomRecruitUiState(
+                isLoading = false,
+                roomDetail = RoomRecruitingResponse(
+                    isHost = false,
+                    isJoining = false,
+                    roomId = 1,
+                    roomName = "🌙 미드나이트 라이브러리 함께읽기",
+                    roomImageUrl = "https://picsum.photos/400/600?1",
+                    isPublic = false,
+                    progressStartDate = "2025.02.01",
+                    progressEndDate = "2025.02.28",
+                    recruitEndDate = "D-5",
+                    category = "문학",
+                    categoryColor = "#8B7CF6",
+                    roomDescription = "매트 헤이그의 미드나이트 라이브러리를 함께 읽으며 인생의 가능성과 선택에 대해 이야기해요. 각자의 삶에서 후회했던 순간들을 공유하고, 서로 위로하며 성장하는 시간을 가져보아요. 따뜻한 마음으로 서로의 이야기를 들어주실 분들과 함께하고 싶습니다.",
+                    memberCount = 18,
+                    recruitCount = 20,
+                    isbn = "9788937477263",
+                    bookImageUrl = "https://picsum.photos/300/400?book1",
+                    bookTitle = "미드나이트 라이브러리",
+                    authorName = "매트 헤이그",
+                    bookDescription = "삶과 죽음 사이, 후회와 가능성 사이에서 펼쳐지는 놀라운 이야기. 인생의 무한한 가능성을 탐험하는 감동적인 소설",
+                    publisher = "인플루엔셜",
+                    recommendRooms = listOf(
+                        RecommendRoomResponse(
+                            roomId = 2,
+                            bookImageUrl = "https://picsum.photos/300/400?rec1",
+                            roomName = "📚 현대문학 깊이 탐구하기",
+                            memberCount = 12,
+                            recruitCount = 15,
+                            recruitEndDate = "D-3"
+                        ),
+                        RecommendRoomResponse(
+                            roomId = 3,
+                            bookImageUrl = "https://picsum.photos/300/400?rec2",
+                            roomName = "✨ 철학 소설로 삶을 되돌아보기",
+                            memberCount = 8,
+                            recruitCount = 12,
+                            recruitEndDate = "D-7"
+                        ),
+                        RecommendRoomResponse(
+                            roomId = 4,
+                            bookImageUrl = "https://picsum.photos/300/400?rec3",
+                            roomName = "🎭 인간 심리를 다룬 소설 읽기",
+                            memberCount = 15,
+                            recruitCount = 18,
+                            recruitEndDate = "D-2"
+                        )
+                    )
+                ),
+                currentButtonType = GroupBottomButtonType.JOIN,
+                showDialog = false,
+                showToast = false,
+                toastMessage = "",
+                dialogTitle = "",
+                dialogDescription = "",
+                shouldNavigateToGroupScreen = false
+            )
+        )
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomScreen.kt
new file mode 100644
index 00000000..bbeb0d64
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomScreen.kt
@@ -0,0 +1,379 @@
+package com.texthip.thip.ui.group.room.screen
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.blur
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import coil.compose.AsyncImage
+import com.texthip.thip.R
+import com.texthip.thip.data.model.rooms.response.CurrentVote
+import com.texthip.thip.data.model.rooms.response.RoomsPlayingResponse
+import com.texthip.thip.ui.common.bottomsheet.MenuBottomSheet
+import com.texthip.thip.ui.common.modal.DialogPopup
+import com.texthip.thip.ui.common.modal.ToastWithDate
+import com.texthip.thip.ui.common.topappbar.GradationTopAppBar
+import com.texthip.thip.ui.group.room.component.GroupRoomBody
+import com.texthip.thip.ui.group.room.component.GroupRoomHeader
+import com.texthip.thip.ui.group.room.mock.MenuBottomSheetItem
+import com.texthip.thip.ui.group.room.viewmodel.GroupRoomEvent
+import com.texthip.thip.ui.group.room.viewmodel.GroupRoomToastType
+import com.texthip.thip.ui.group.room.viewmodel.GroupRoomUiState
+import com.texthip.thip.ui.group.room.viewmodel.GroupRoomViewModel
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.utils.type.GenreBackgroundImage
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.collectLatest
+
+@Composable
+fun GroupRoomScreen(
+    roomId: Int,
+    onBackClick: () -> Unit = {},
+    onNavigateToMates: () -> Unit = {},
+    onNavigateToChat: () -> Unit = {},
+    onNavigateToNote: (page: Int?, isOverview: Boolean?) -> Unit = { _, _ -> },
+    onNavigateToBookDetail: (isbn: String) -> Unit = {},
+    viewModel: GroupRoomViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+    var activeToast by remember { mutableStateOf<GroupRoomToastType?>(null) }
+
+    // 화면이 처음 그려질 때 데이터 로딩 실행
+    LaunchedEffect(key1 = Unit) {
+        viewModel.fetchRoomsPlaying(roomId)
+    }
+
+    LaunchedEffect(key1 = viewModel.eventFlow) {
+        viewModel.eventFlow.collectLatest { event ->
+            when (event) {
+                is GroupRoomEvent.ShowToast -> {
+                    activeToast = event.type
+                }
+            }
+        }
+    }
+
+    // UI 상태에 따라 다른 화면을 보여줌
+    when (val state = uiState) {
+        is GroupRoomUiState.Loading -> {
+            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+                CircularProgressIndicator()
+            }
+        }
+
+        is GroupRoomUiState.Success -> {
+            // 성공 시, 실제 데이터를 화면에 표시
+            GroupRoomContent(
+                roomDetails = state.roomsPlaying,
+                onBackClick = onBackClick,
+                onNavigateToMates = onNavigateToMates,
+                onNavigateToChat = onNavigateToChat,
+                onNavigateToNote = onNavigateToNote,
+                onNavigateToBookDetail = onNavigateToBookDetail,
+                onLeaveRoomConfirm = { viewModel.leaveRoom(roomId) },
+                activeToast = activeToast,
+                onDismissToast = { activeToast = null }
+            )
+        }
+
+        is GroupRoomUiState.Error -> {
+            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+                Text(text = state.message, color = colors.White) // TODO: 에러 메시지 스타일링
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun GroupRoomContent(
+    roomDetails: RoomsPlayingResponse,
+    onBackClick: () -> Unit = {},
+    onNavigateToMates: () -> Unit = {},
+    onNavigateToChat: () -> Unit = {},
+    onNavigateToNote: (page: Int?, isOverview: Boolean?) -> Unit = { _, _ -> },
+    onNavigateToBookDetail: (isbn: String) -> Unit = {},
+    onLeaveRoomConfirm: () -> Unit = {},
+    activeToast: GroupRoomToastType?,
+    onDismissToast: () -> Unit = {}
+) {
+    val scrollState = rememberScrollState()
+
+    var isBottomSheetVisible by remember { mutableStateOf(false) }
+    var isLeaveDialogVisible by remember { mutableStateOf(false) }
+    var isDeleteDialogVisible by remember { mutableStateOf(false) }
+
+    val isOwner = roomDetails.isHost
+
+    val imageModel = remember(roomDetails.roomImageUrl) {
+        // 서버에서 받은 문자열이 "_image"로 끝나면 Enum에서 로컬 리소스를 찾음
+        if (roomDetails.roomImageUrl.endsWith("_image")) {
+            GenreBackgroundImage.fromServerValue(roomDetails.roomImageUrl).imageResId
+        }
+        // 그렇지 않으면 URL로 그대로 사용
+        else {
+            roomDetails.roomImageUrl
+        }
+    }
+
+    Box(
+        if (isBottomSheetVisible || isLeaveDialogVisible || isDeleteDialogVisible) {
+            Modifier
+                .fillMaxSize()
+                .blur(5.dp)
+        } else {
+            Modifier.fillMaxSize()
+        }
+    ) {
+        Box(modifier = Modifier.verticalScroll(scrollState)) {
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(336.dp)
+            ) {
+                AsyncImage(
+                    model = imageModel,
+                    contentDescription = null,
+                    contentScale = ContentScale.Crop,
+                    modifier = Modifier.fillMaxSize()
+                )
+
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(
+                            brush = Brush.verticalGradient(
+                                colorStops = arrayOf(
+                                    0.0594f to Color.Transparent,
+                                    0.94f to colors.Black
+                                )
+                            )
+                        )
+                )
+            }
+
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 70.dp, bottom = 20.dp)
+            ) {
+                GroupRoomHeader(
+                    roomName = roomDetails.roomName,
+                    roomDescription = roomDetails.roomDescription,
+                    isPublic = roomDetails.isPublic,
+                    progressStartDate = roomDetails.progressStartDate,
+                    progressEndDate = roomDetails.progressEndDate,
+                    memberCount = roomDetails.memberCount,
+                    category = roomDetails.category,
+                    categoryColor = roomDetails.categoryColor,
+                ) {
+                    onNavigateToMates()
+                }
+
+                Spacer(Modifier.height(30.dp))
+
+                GroupRoomBody(
+                    bookTitle = roomDetails.bookTitle,
+                    authorName = roomDetails.authorName,
+                    isbn = roomDetails.isbn,
+                    currentPage = roomDetails.currentPage,
+                    userPercentage = roomDetails.userPercentage,
+                    currentVotes = roomDetails.currentVotes,
+                    onNavigateToBookDetail = onNavigateToBookDetail,
+                    // 일반 노트 카드 클릭 시 필터 없이 이동
+                    onNavigateToNote = { onNavigateToNote(null, null) },
+                    onNavigateToChat = onNavigateToChat,
+                    // 투표 카드 클릭 시 필터 값과 함께 이동
+                    onVoteClick = { vote: CurrentVote ->
+                        if (vote.isOverview) {
+                            onNavigateToNote(null, true)
+                        } else {
+                            onNavigateToNote(vote.page, false)
+                        }
+                    }
+                )
+            }
+        }
+
+        GradationTopAppBar(
+            onLeftClick = onBackClick,
+            isRightIconVisible = true,
+            onRightClick = { isBottomSheetVisible = true },
+        )
+
+        AnimatedVisibility(
+            visible = activeToast != null,
+            enter = slideInVertically(
+                initialOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            exit = slideOutVertically(
+                targetOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .padding(horizontal = 20.dp, vertical = 16.dp)
+                .zIndex(3f)
+        ) {
+            LaunchedEffect(activeToast) {
+                if (activeToast != null) {
+                    delay(3000L)
+                    if (activeToast == GroupRoomToastType.LEAVE_ROOM_SUCCESS) {
+                        onBackClick()
+                    }
+                    onDismissToast()
+                }
+            }
+
+            when (activeToast) {
+                GroupRoomToastType.LEAVE_ROOM_SUCCESS -> {
+                    ToastWithDate(message = stringResource(R.string.leave_room_toast))
+                }
+
+                GroupRoomToastType.ACTION_FAILURE -> {
+                    ToastWithDate(
+                        message = stringResource(R.string.leave_room_fail_toast),
+                        color = colors.Red
+                    )
+                }
+
+                null -> {}
+            }
+        }
+    }
+
+    if (isBottomSheetVisible) {
+        val menuItems = if (isOwner) {
+            // 방 주인일 때
+            listOf(
+                MenuBottomSheetItem(
+                    text = stringResource(R.string.delete_room),
+                    color = colors.Red,
+                    onClick = { isDeleteDialogVisible = true }
+                )
+            )
+        } else {
+            // 방 참여자일 때
+            listOf(
+                MenuBottomSheetItem(
+                    text = stringResource(R.string.leave_room),
+                    color = colors.White,
+                    onClick = { isLeaveDialogVisible = true }
+                ),
+                MenuBottomSheetItem(
+                    text = stringResource(R.string.report_room),
+                    color = colors.Red,
+                    onClick = { /* 신고 로직 */ }
+                )
+            )
+        }
+
+        MenuBottomSheet(
+            items = menuItems,
+            onDismiss = { isBottomSheetVisible = false }
+        )
+    }
+
+    if (isLeaveDialogVisible) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            DialogPopup(
+                title = stringResource(R.string.leave_room_modal_title),
+                description = stringResource(R.string.leave_room_modal_content),
+                onConfirm = {
+                    onLeaveRoomConfirm()
+                    isLeaveDialogVisible = false
+                },
+                onCancel = {
+                    isLeaveDialogVisible = false
+                }
+            )
+        }
+    }
+
+    if (isDeleteDialogVisible) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            DialogPopup(
+                title = stringResource(R.string.delete_room_modal_title),
+                description = stringResource(R.string.delete_room_modal_content),
+                onConfirm = {
+                    // 방 삭제하기 로직
+                    isDeleteDialogVisible = false
+                },
+                onCancel = {
+                    isDeleteDialogVisible = false
+                }
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun GroupRoomScreenPreview() {
+    ThipTheme {
+        GroupRoomContent(
+            roomDetails = RoomsPlayingResponse(
+                isHost = true,
+                roomId = 1,
+                roomName = "호르몬 체인지 완독하는 방",
+                roomImageUrl = "문학_image",
+                isPublic = false,
+                progressStartDate = "2023.10.01",
+                progressEndDate = "2023.10.31",
+                category = "문학",
+                categoryColor = "#A0F8E8",
+                roomDescription = "‘시집만 읽는 사람들’ 3월 모임입니다.",
+                memberCount = 22,
+                recruitCount = 30,
+                isbn = "12345",
+                bookTitle = "호르몬 체인지",
+                authorName = "최정화",
+                currentPage = 100,
+                userPercentage = 5,
+                currentVotes = emptyList()
+            ),
+            onBackClick = {},
+            activeToast = null
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomUnlockScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomUnlockScreen.kt
new file mode 100644
index 00000000..19557ce5
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/screen/GroupRoomUnlockScreen.kt
@@ -0,0 +1,216 @@
+package com.texthip.thip.ui.group.room.screen
+
+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.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.forms.SingleDigitBox
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.group.room.viewmodel.GroupRoomUnlockViewModel
+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.utils.rooms.advancedImePadding
+import kotlinx.coroutines.delay
+
+@Composable
+fun GroupRoomUnlockScreen(
+    roomId: Int = 0,
+    viewModel: GroupRoomUnlockViewModel = hiltViewModel(),
+    onBackClick: () -> Unit = {},
+    onSuccessNavigation: () -> Unit = {}
+) {
+    val uiState by viewModel.uiState.collectAsState()
+    var password by remember { mutableStateOf(arrayOf("", "", "", "")) }
+    var showError by remember { mutableStateOf(false) }
+    val focusRequesters = remember { List(4) { FocusRequester() } }
+    val keyboardController = LocalSoftwareKeyboardController.current
+
+    LaunchedEffect(password.toList()) {
+        val fullPassword = password.joinToString("")
+        if (!uiState.isLoading && fullPassword.length == 4 && password.all { it.length == 1 }) {
+            viewModel.checkPassword(roomId, fullPassword)
+        }
+    }
+
+    LaunchedEffect(uiState.passwordMatched) {
+        when (uiState.passwordMatched) {
+            true -> {
+                // 비밀번호 일치: 성공 콜백 호출하여 네비게이션 처리
+                keyboardController?.hide()
+                viewModel.resetPasswordState()
+                onSuccessNavigation()
+            }
+
+            false -> {
+                showError = true
+                delay(1000) // 사용자에게 에러 메시지를 보여줄 시간
+                password = arrayOf("", "", "", "")
+                showError = false
+                focusRequesters[0].requestFocus()
+                viewModel.resetPasswordState() // ViewModel 상태 초기화
+            }
+
+            null -> {}
+        }
+    }
+
+    // 화면 진입 시 상태 초기화 및 키보드 자동 표시
+    LaunchedEffect(Unit) {
+        viewModel.initializeState() // 상태 완전 초기화
+        delay(300) // 화면 전환 애니메이션 후 키보드 표시
+        focusRequesters[0].requestFocus()
+        keyboardController?.show()
+    }
+
+    // 화면 종료 시 리소스 정리
+    DisposableEffect(Unit) {
+        onDispose {
+            // 키보드 숨기기
+            keyboardController?.hide()
+        }
+    }
+
+    GroupRoomUnlockContent(
+        password = password,
+        showError = showError,
+        focusRequesters = focusRequesters,
+        onBackClick = onBackClick,
+        onPasswordChange = { index, input ->
+            if (input.length <= 1 && input.all { it.isDigit() }) {
+                val newPassword = password.copyOf()
+                val wasEmpty = password[index].isEmpty()
+                newPassword[index] = input
+                password = newPassword
+
+                // 숫자가 입력되면 다음 칸으로 이동
+                if (input.isNotEmpty() && index < 3) {
+                    focusRequesters[index + 1].requestFocus()
+                } else if (input.isEmpty() && !wasEmpty && index > 0) {
+                    focusRequesters[index - 1].requestFocus()
+                }
+            }
+        },
+        onBackspace = { index ->
+            // 빈 박스에서 백스페이스 → 이전 박스로 이동
+            if (index > 0) {
+                val prevIndex = index - 1
+                focusRequesters[prevIndex].requestFocus()
+            }
+        }
+    )
+}
+
+@Composable
+private fun GroupRoomUnlockContent(
+    password: Array<String>,
+    showError: Boolean,
+    focusRequesters: List<FocusRequester>,
+    onBackClick: () -> Unit,
+    onPasswordChange: (Int, String) -> Unit,
+    onBackspace: (Int) -> Unit
+) {
+
+    Box(modifier = Modifier.fillMaxSize().advancedImePadding()) {
+        Column(
+            modifier = Modifier.fillMaxSize()
+        ) {
+            DefaultTopAppBar(
+                isRightIconVisible = false,
+                isTitleVisible = false,
+                onLeftClick = onBackClick,
+            )
+
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(horizontal = 20.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Spacer(modifier = Modifier.height(160.dp))
+
+                Text(
+                    modifier = Modifier.padding(bottom = 32.dp),
+                    text = stringResource(R.string.group_secret_screen_comment),
+                    style = typography.smalltitle_sb600_s18_h24,
+                    color = colors.White,
+                    textAlign = TextAlign.Center
+                )
+
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(16.dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    repeat(4) { index ->
+                        SingleDigitBox(
+                            value = password[index],
+                            onValueChange = { input -> onPasswordChange(index, input) },
+                            onBackspace = { onBackspace(index) },
+                            borderColor = if (showError) colors.Red else Color.Transparent,
+                            modifier = Modifier
+                                .size(44.dp)
+                                .focusRequester(focusRequesters[index])
+                        )
+                    }
+                }
+
+                Spacer(modifier = Modifier.height(12.dp))
+
+                // 에러 메시지
+                if (showError) {
+                    Text(
+                        text = stringResource(R.string.group_secret_screen_error_comment),
+                        style = typography.menu_r400_s14_h24,
+                        color = colors.Red,
+                        textAlign = TextAlign.Center
+                    )
+                } else {
+                    Spacer(modifier = Modifier.height(20.dp))
+                }
+
+                Spacer(modifier = Modifier.weight(1f))
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun GroupRoomUnlockContentPreview() {
+    ThipTheme {
+        GroupRoomUnlockContent(
+            password = arrayOf("", "", "", ""),
+            showError = false,
+            focusRequesters = List(4) { FocusRequester() },
+            onBackClick = {},
+            onPasswordChange = { _, _ -> },
+            onBackspace = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomChatViewModel.kt b/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomChatViewModel.kt
new file mode 100644
index 00000000..6df70275
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomChatViewModel.kt
@@ -0,0 +1,143 @@
+package com.texthip.thip.ui.group.room.viewmodel
+
+import androidx.lifecycle.SavedStateHandle
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.model.rooms.response.TodayCommentList
+import com.texthip.thip.data.repository.RoomsRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asSharedFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class GroupRoomChatUiState(
+    val greetings: List<TodayCommentList> = emptyList(),
+    val isLoading: Boolean = false,
+    val isLoadingMore: Boolean = false,
+    val isLastPage: Boolean = false,
+    val error: String? = null
+)
+
+enum class ToastType {
+    DAILY_GREETING_LIMIT,
+    FIRST_WRITE,
+    DELETE_GREETING_SUCCESS
+}
+
+sealed interface GroupRoomChatEvent {
+    data object LoadMore : GroupRoomChatEvent
+    data class ShowToast(val type: ToastType) : GroupRoomChatEvent
+    data class ShowErrorToast(val message: String) : GroupRoomChatEvent
+    data class DeleteGreeting(val attendanceCheckId: Int) : GroupRoomChatEvent
+}
+
+@HiltViewModel
+class GroupRoomChatViewModel @Inject constructor(
+    private val roomsRepository: RoomsRepository,
+    savedStateHandle: SavedStateHandle
+) : ViewModel() {
+    private val roomId: Int = requireNotNull(savedStateHandle["roomId"])
+
+    private val _uiState = MutableStateFlow(GroupRoomChatUiState())
+    val uiState = _uiState.asStateFlow()
+
+    private val _eventFlow = MutableSharedFlow<GroupRoomChatEvent>()
+    val eventFlow = _eventFlow.asSharedFlow()
+
+    private var nextCursor: String? = null
+
+    init {
+        fetchDailyGreetings(isRefresh = true)
+    }
+
+    fun onEvent(event: GroupRoomChatEvent) {
+        when (event) {
+            is GroupRoomChatEvent.LoadMore -> fetchDailyGreetings()
+            is GroupRoomChatEvent.DeleteGreeting -> deleteDailyGreeting(event.attendanceCheckId)
+            else -> Unit
+        }
+    }
+
+    private fun deleteDailyGreeting(attendanceCheckId: Int) {
+        viewModelScope.launch {
+            roomsRepository.deleteRoomsDailyGreeting(
+                roomId = roomId,
+                attendanceCheckId = attendanceCheckId
+            ).onSuccess {
+                _eventFlow.emit(GroupRoomChatEvent.ShowToast(ToastType.DELETE_GREETING_SUCCESS))
+                fetchDailyGreetings(isRefresh = true)
+            }.onFailure { throwable ->
+                _eventFlow.emit(GroupRoomChatEvent.ShowErrorToast(throwable.message ?: "삭제에 실패했습니다."))
+            }
+        }
+    }
+
+    private fun fetchDailyGreetings(isRefresh: Boolean = false) {
+        val currentState = _uiState.value
+        if (currentState.isLoading || currentState.isLoadingMore || (currentState.isLastPage && !isRefresh)) return
+
+        viewModelScope.launch {
+            if (isRefresh) {
+                _uiState.update {
+                    it.copy(
+                        isLoading = true,
+                        greetings = emptyList(),
+                        isLastPage = false
+                    )
+                }
+                nextCursor = null
+            } else {
+                _uiState.update { it.copy(isLoadingMore = true) }
+            }
+
+            roomsRepository.getRoomsDailyGreeting(
+                roomId = roomId,
+                cursor = nextCursor
+            ).onSuccess { response ->
+                response?.let { data ->
+                    _uiState.update {
+                        it.copy(
+                            isLoading = false,
+                            isLoadingMore = false,
+                            greetings = if (isRefresh) data.todayCommentList else it.greetings + data.todayCommentList,
+                            isLastPage = data.isLast
+                        )
+                    }
+                    nextCursor = data.nextCursor
+                }
+            }.onFailure { throwable ->
+                _uiState.update {
+                    it.copy(
+                        isLoading = false,
+                        isLoadingMore = false,
+                        error = throwable.message
+                    )
+                }
+            }
+        }
+    }
+
+    fun postDailyGreeting(content: String) {
+        if (content.isBlank()) return
+
+        viewModelScope.launch {
+            roomsRepository.postRoomsDailyGreeting(
+                roomId = roomId,
+                content = content
+            ).onSuccess { response ->
+                if (response != null) {
+                    if (response.isFirstWrite) {
+                        _eventFlow.emit(GroupRoomChatEvent.ShowToast(ToastType.FIRST_WRITE))
+                    }
+                    fetchDailyGreetings(isRefresh = true)
+                }
+            }.onFailure { throwable ->
+                _eventFlow.emit(GroupRoomChatEvent.ShowToast(ToastType.DAILY_GREETING_LIMIT))
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomMatesViewModel.kt b/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomMatesViewModel.kt
new file mode 100644
index 00000000..77e4179a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomMatesViewModel.kt
@@ -0,0 +1,44 @@
+package com.texthip.thip.ui.group.room.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.model.rooms.response.RoomsUsersResponse
+import com.texthip.thip.data.repository.RoomsRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+sealed interface GroupRoomMatesUiState {
+    data object Loading : GroupRoomMatesUiState
+    data class Success(val users: RoomsUsersResponse) : GroupRoomMatesUiState
+    data class Error(val message: String) : GroupRoomMatesUiState
+}
+
+@HiltViewModel
+class GroupRoomMatesViewModel @Inject constructor(
+    private val roomsRepository: RoomsRepository
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow<GroupRoomMatesUiState>(GroupRoomMatesUiState.Loading)
+    val uiState = _uiState.asStateFlow()
+
+    fun fetchUsers(roomId: Int) {
+        viewModelScope.launch {
+            _uiState.value = GroupRoomMatesUiState.Loading
+
+            roomsRepository.getRoomsUsers(roomId = roomId)
+                .onSuccess { users ->
+                    if (users != null) {
+                        _uiState.value = GroupRoomMatesUiState.Success(users)
+                    }
+                }
+                .onFailure { throwable ->
+                    _uiState.value = GroupRoomMatesUiState.Error(
+                        throwable.message ?: "알 수 없는 오류가 발생했습니다."
+                    )
+                }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomRecruitUiState.kt b/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomRecruitUiState.kt
new file mode 100644
index 00000000..b94bda6a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomRecruitUiState.kt
@@ -0,0 +1,22 @@
+package com.texthip.thip.ui.group.room.viewmodel
+
+import com.texthip.thip.ui.group.myroom.mock.GroupBottomButtonType
+import com.texthip.thip.data.model.rooms.response.RoomRecruitingResponse
+
+data class GroupRoomRecruitUiState(
+    val roomDetail: RoomRecruitingResponse? = null,
+    val isLoading: Boolean = false,
+    val currentButtonType: GroupBottomButtonType? = null,
+    val showToast: Boolean = false,
+    val toastMessage: String = "",
+    val showDialog: Boolean = false,
+    val dialogTitle: String = "",
+    val dialogDescription: String = "",
+    val shouldNavigateToGroupScreen: Boolean = false,
+    val shouldNavigateToRoomPlayingScreen: Boolean = false,
+    val roomId: Int? = null
+) {
+    val hasRoomDetail: Boolean get() = roomDetail != null
+    val isRoomFull: Boolean get() = roomDetail?.let { it.memberCount >= it.recruitCount } ?: false
+    val isJoinButtonEnabled: Boolean get() = currentButtonType == GroupBottomButtonType.JOIN && !isRoomFull
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomRecruitViewModel.kt b/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomRecruitViewModel.kt
new file mode 100644
index 00000000..fcef2674
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomRecruitViewModel.kt
@@ -0,0 +1,192 @@
+package com.texthip.thip.ui.group.room.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.R
+import com.texthip.thip.data.provider.StringResourceProvider
+import com.texthip.thip.data.repository.RoomsRepository
+import com.texthip.thip.ui.group.myroom.mock.GroupBottomButtonType
+import com.texthip.thip.ui.group.room.mock.RoomAction
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class GroupRoomRecruitViewModel @Inject constructor(
+    private val repository: RoomsRepository,
+    private val stringResourceProvider: StringResourceProvider
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(GroupRoomRecruitUiState())
+    val uiState: StateFlow<GroupRoomRecruitUiState> = _uiState.asStateFlow()
+    
+    private var pendingAction: (() -> Unit)? = null
+    
+    private fun updateState(update: (GroupRoomRecruitUiState) -> GroupRoomRecruitUiState) {
+        _uiState.value = update(_uiState.value)
+    }
+
+    fun loadRoomDetail(roomId: Int) {
+        viewModelScope.launch {
+            updateState { it.copy(isLoading = true) }
+            
+            repository.getRoomRecruiting(roomId)
+                .onSuccess { data ->
+                    if (data != null) {
+                        val buttonType = when {
+                            data.isHost -> GroupBottomButtonType.CLOSE
+                            data.isJoining -> GroupBottomButtonType.CANCEL
+                            else -> GroupBottomButtonType.JOIN
+                        }
+                        updateState { 
+                            it.copy(
+                                roomDetail = data,
+                                currentButtonType = buttonType,
+                                isLoading = false
+                            )
+                        }
+                    } else {
+                        updateState { 
+                            it.copy(
+                                isLoading = false
+                            )
+                        }
+                    }
+                }
+                .onFailure { error ->
+                    updateState { it.copy(isLoading = false) }
+                }
+        }
+    }
+    
+    fun onParticipationClick() {
+        val currentState = uiState.value
+        val roomDetail = currentState.roomDetail ?: return
+        
+        // 인원이 가득 찬 경우 메시지 표시
+        if (roomDetail.memberCount >= roomDetail.recruitCount) {
+            showToastMessage(stringResourceProvider.getString(R.string.error_max_participate))
+            return
+        }
+        
+        viewModelScope.launch {
+            repository.joinOrCancelRoom(roomDetail.roomId, RoomAction.JOIN.value)
+                .onSuccess {
+                    updateState { it.copy(currentButtonType = GroupBottomButtonType.CANCEL) }
+                    showToastMessage(stringResourceProvider.getString(R.string.success_participation_complete))
+                }
+                .onFailure { error ->
+                    showToastMessage(stringResourceProvider.getString(R.string.error_participation_failed, error.message ?: ""))
+                }
+        }
+    }
+    
+    fun onCancelParticipationClick(dialogTitle: String, dialogDescription: String) {
+        updateState { 
+            it.copy(
+                dialogTitle = dialogTitle,
+                dialogDescription = dialogDescription,
+                showDialog = true
+            )
+        }
+        pendingAction = {
+            viewModelScope.launch {
+                val roomId = uiState.value.roomDetail?.roomId ?: return@launch
+                
+                repository.joinOrCancelRoom(roomId, RoomAction.CANCEL.value)
+                    .onSuccess {
+                        updateState { 
+                            it.copy(
+                                currentButtonType = GroupBottomButtonType.JOIN,
+                                toastMessage = stringResourceProvider.getString(R.string.success_participation_cancelled),
+                                showToast = true,
+                                shouldNavigateToGroupScreen = true
+                            )
+                        }
+                    }
+                    .onFailure { error ->
+                        showToastMessage(stringResourceProvider.getString(R.string.error_participation_cancel_failed))
+                    }
+            }
+        }
+    }
+    
+    fun onCloseRecruitmentClick(dialogTitle: String, dialogDescription: String) {
+        updateState { 
+            it.copy(
+                dialogTitle = dialogTitle,
+                dialogDescription = dialogDescription,
+                showDialog = true
+            )
+        }
+        pendingAction = {
+            viewModelScope.launch {
+                val currentRoomId = _uiState.value.roomDetail?.roomId
+                if (currentRoomId != null) {
+                    repository.closeRoom(currentRoomId)
+                        .onSuccess { response ->
+                            showToastMessage(stringResourceProvider.getString(R.string.success_recruitment_closed))
+                            // 마감 성공 시 기록장 화면으로 이동
+                            updateState { 
+                                it.copy(
+                                    shouldNavigateToRoomPlayingScreen = true,
+                                    roomId = response.roomId
+                                ) 
+                            }
+                        }
+                        .onFailure { throwable ->
+                            // 에러 처리
+                            val errorMessage = when {
+                                throwable.message?.contains("140008") == true -> stringResourceProvider.getString(R.string.error_room_close_permission)
+                                throwable.message?.contains("100004") == true -> stringResourceProvider.getString(R.string.error_room_expired)
+                                else -> throwable.message ?: stringResourceProvider.getString(R.string.error_room_close_failed)
+                            }
+                            showToastMessage(errorMessage)
+                        }
+                } else {
+                    showToastMessage(stringResourceProvider.getString(R.string.error_room_info_not_found))
+                }
+            }
+        }
+    }
+    
+    fun onDialogConfirm() {
+        updateState { it.copy(showDialog = false) }
+        pendingAction?.invoke()
+        pendingAction = null
+    }
+    
+    fun onDialogCancel() {
+        updateState { it.copy(showDialog = false) }
+        pendingAction = null
+    }
+    
+    fun hideToast() {
+        updateState { it.copy(showToast = false) }
+    }
+    
+    fun onNavigatedToGroupScreen() {
+        updateState { it.copy(shouldNavigateToGroupScreen = false) }
+    }
+    
+    fun onNavigatedToRoomPlayingScreen() {
+        updateState { 
+            it.copy(
+                shouldNavigateToRoomPlayingScreen = false,
+                roomId = null
+            ) 
+        }
+    }
+    
+    private fun showToastMessage(message: String) {
+        updateState { 
+            it.copy(
+                toastMessage = message,
+                showToast = true
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomUnlockViewModel.kt b/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomUnlockViewModel.kt
new file mode 100644
index 00000000..b8c04ba3
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomUnlockViewModel.kt
@@ -0,0 +1,85 @@
+package com.texthip.thip.ui.group.room.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.repository.RoomsRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class GroupRoomUnlockUiState(
+    val isLoading: Boolean = false,
+    val passwordMatched: Boolean? = null,
+    val errorMessage: String? = null
+)
+
+@HiltViewModel
+class GroupRoomUnlockViewModel @Inject constructor(
+    private val roomsRepository: RoomsRepository
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(GroupRoomUnlockUiState())
+    val uiState = _uiState.asStateFlow()
+    
+    private var passwordCheckJob: Job? = null
+
+    fun checkPassword(roomId: Int, password: String) {
+        // 이전 요청이 있다면 취소
+        passwordCheckJob?.cancel()
+        
+        // job 취소 후 isLoading 상태 리셋 
+        if (_uiState.value.isLoading) {
+            _uiState.update { it.copy(isLoading = false) }
+        }
+
+        passwordCheckJob = viewModelScope.launch {
+            _uiState.update { it.copy(isLoading = true) }
+
+            roomsRepository.postParticipateSecretRoom(roomId, password)
+                .onSuccess { response ->
+                    // API 호출은 성공했고, 응답 바디의 matched 값으로 상태 업데이트
+                    _uiState.update {
+                        it.copy(
+                            isLoading = false,
+                            passwordMatched = response.matched
+                        )
+                    }
+                }
+                .onFailure { throwable ->
+                    // API 호출 자체 실패 (네트워크 오류 등)
+                    _uiState.update {
+                        it.copy(
+                            isLoading = false,
+                            passwordMatched = false, // 실패 시 불일치로 간주
+                            errorMessage = throwable.message ?: "알 수 없는 오류가 발생했습니다."
+                        )
+                    }
+                }
+        }
+    }
+
+    fun resetPasswordState() {
+        _uiState.update { it.copy(passwordMatched = null, errorMessage = null) }
+    }
+    
+    /**
+     * 화면 진입 시 상태 완전 초기화
+     * Screen에서 LaunchedEffect로 호출
+     */
+    fun initializeState() {
+        passwordCheckJob?.cancel()
+        passwordCheckJob = null
+        _uiState.value = GroupRoomUnlockUiState()
+    }
+    
+    override fun onCleared() {
+        super.onCleared()
+        // 진행 중인 작업 취소 및 리소스 정리
+        passwordCheckJob?.cancel()
+        passwordCheckJob = null
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomViewModel.kt b/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomViewModel.kt
new file mode 100644
index 00000000..2d1b2bcf
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/room/viewmodel/GroupRoomViewModel.kt
@@ -0,0 +1,70 @@
+package com.texthip.thip.ui.group.room.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.model.rooms.response.RoomsPlayingResponse
+import com.texthip.thip.data.repository.RoomsRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asSharedFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+sealed interface GroupRoomUiState {
+    data object Loading : GroupRoomUiState // 로딩 중
+    data class Success(val roomsPlaying: RoomsPlayingResponse) : GroupRoomUiState // 성공
+    data class Error(val message: String) : GroupRoomUiState // 실패
+}
+
+enum class GroupRoomToastType {
+    LEAVE_ROOM_SUCCESS,
+    ACTION_FAILURE // 방 나가기/삭제 등 실패 시 공통으로 사용
+}
+
+sealed interface GroupRoomEvent {
+    data class ShowToast(val type: GroupRoomToastType) : GroupRoomEvent
+}
+
+@HiltViewModel
+class GroupRoomViewModel @Inject constructor(
+    private val roomsRepository: RoomsRepository
+) : ViewModel() {
+    private val _uiState = MutableStateFlow<GroupRoomUiState>(GroupRoomUiState.Loading)
+    val uiState = _uiState.asStateFlow()
+
+    private val _eventFlow = MutableSharedFlow<GroupRoomEvent>()
+    val eventFlow = _eventFlow.asSharedFlow()
+
+    fun fetchRoomsPlaying(roomId: Int) {
+        // ViewModel의 생명주기와 연결된 코루틴 스코프에서 실행
+        viewModelScope.launch {
+            _uiState.value = GroupRoomUiState.Loading
+
+            roomsRepository.getRoomsPlaying(roomId = roomId)
+                .onSuccess { roomsPlaying ->
+                    if (roomsPlaying != null) {
+                        _uiState.value = GroupRoomUiState.Success(roomsPlaying)
+                    }
+                }
+                .onFailure { throwable ->
+                    _uiState.value = GroupRoomUiState.Error(
+                        throwable.message ?: "알 수 없는 오류가 발생했습니다."
+                    )
+                }
+        }
+    }
+
+    fun leaveRoom(roomId: Int) {
+        viewModelScope.launch {
+            roomsRepository.leaveRoom(roomId = roomId)
+                .onSuccess {
+                    _eventFlow.emit(GroupRoomEvent.ShowToast(GroupRoomToastType.LEAVE_ROOM_SUCCESS))
+                }
+                .onFailure { throwable ->
+                    _eventFlow.emit(GroupRoomEvent.ShowToast(GroupRoomToastType.ACTION_FAILURE))
+                }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/screen/GroupScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/screen/GroupScreen.kt
index e33da902..307074b7 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/screen/GroupScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/screen/GroupScreen.kt
@@ -1,19 +1,302 @@
 package com.texthip.thip.ui.group.screen
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+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.material3.Text
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.pulltorefresh.PullToRefreshBox
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.navigation.NavController
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.texthip.thip.R
+import com.texthip.thip.data.model.rooms.response.JoinedRoomResponse
+import com.texthip.thip.data.model.rooms.response.RoomMainList
+import com.texthip.thip.data.model.rooms.response.RoomMainResponse
+import com.texthip.thip.ui.common.buttons.FloatingButton
+import com.texthip.thip.ui.common.modal.ToastWithDate
+import com.texthip.thip.ui.common.topappbar.LogoTopAppBar
+import com.texthip.thip.ui.group.myroom.component.GroupMySectionHeader
+import com.texthip.thip.ui.group.myroom.component.GroupPager
+import com.texthip.thip.ui.group.myroom.component.GroupRoomDeadlineSection
+import com.texthip.thip.ui.group.myroom.component.GroupSearchTextField
+import com.texthip.thip.ui.group.viewmodel.GroupUiState
+import com.texthip.thip.ui.group.viewmodel.GroupViewModel
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import kotlinx.coroutines.delay
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun GroupScreen(navController: NavController) {
+fun GroupScreen(
+    onNavigateToMakeRoom: () -> Unit = {},
+    onNavigateToGroupDone: () -> Unit = {}, // 완료된 화면으로 이동
+    onNavigateToAlarm: () -> Unit = {}, // 알림 화면으로 이동
+    onNavigateToGroupSearch: () -> Unit = {},   // 검색 화면으로 이동
+    onNavigateToGroupMy: () -> Unit = {},   // 내 모임방 화면으로 이동
+    onNavigateToGroupRecruit: (Int) -> Unit = {},   // 모집 중인 모임방 화면으로 이동
+    onNavigateToGroupRoom: (Int) -> Unit = {},  // 기록장 화면으로 이동
+    viewModel: GroupViewModel = hiltViewModel()
+) {
+    // 화면 재진입 시 데이터 새로고침
+    LaunchedEffect(Unit) {
+        viewModel.resetToInitialState()
+    }
+    val uiState by viewModel.uiState.collectAsState()
+
+    GroupContent(
+        uiState = uiState,
+        onNavigateToMakeRoom = onNavigateToMakeRoom,
+        onNavigateToGroupDone = onNavigateToGroupDone,
+        onNavigateToAlarm = onNavigateToAlarm,
+        onNavigateToGroupSearch = onNavigateToGroupSearch,
+        onNavigateToGroupMy = onNavigateToGroupMy,
+        onNavigateToGroupRecruit = onNavigateToGroupRecruit,
+        onNavigateToGroupRoom = onNavigateToGroupRoom,
+        onRefreshGroupData = { viewModel.refreshGroupData() },
+        onCardVisible = { cardIndex -> viewModel.loadMoreGroups() },
+        onSelectGenre = { genreIndex -> viewModel.selectGenre(genreIndex) },
+        onHideToast = { viewModel.hideToast() }
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun GroupContent(
+    uiState: GroupUiState,
+    onNavigateToMakeRoom: () -> Unit = {},
+    onNavigateToGroupDone: () -> Unit = {},
+    onNavigateToAlarm: () -> Unit = {},
+    onNavigateToGroupSearch: () -> Unit = {},
+    onNavigateToGroupMy: () -> Unit = {},
+    onNavigateToGroupRecruit: (Int) -> Unit = {},
+    onNavigateToGroupRoom: (Int) -> Unit = {},
+    onRefreshGroupData: () -> Unit = {},
+    onCardVisible: (Int) -> Unit = {},
+    onSelectGenre: (Int) -> Unit = {},
+    onHideToast: () -> Unit = {}
+) {
+    val scrollState = rememberScrollState()
+    
+    // 탭 전환 시 스크롤을 맨 위로 초기화
+    LaunchedEffect(Unit) {
+        scrollState.scrollTo(0)
+    }
+
     Box(
-        modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.Center
+        modifier = Modifier.fillMaxSize()
     ) {
-        Text(text = "Group Screen")
+        PullToRefreshBox(
+            isRefreshing = uiState.isRefreshing,
+            onRefresh = onRefreshGroupData,
+            modifier = Modifier.fillMaxSize()
+        ) {
+            Column(
+                Modifier
+                    .fillMaxSize()
+                    .verticalScroll(scrollState)
+            ) {
+
+                // 검색창
+                GroupSearchTextField(
+                    modifier = Modifier.padding(top = 72.dp, bottom = 32.dp),
+                    onClick = onNavigateToGroupSearch
+                )
+
+                // 내 모임방 헤더 + 카드
+                GroupMySectionHeader(
+                    onClick = onNavigateToGroupMy
+                )
+                Spacer(Modifier.height(20.dp))
+
+                GroupPager(
+                    groupCards = uiState.myJoinedRooms,
+                    userName = uiState.userName,
+                    onCardClick = { joinedRoom ->
+                        onNavigateToGroupRoom(joinedRoom.roomId)
+                    },
+                    onCardVisible = onCardVisible
+                )
+                Spacer(Modifier.height(32.dp))
+
+                Spacer(
+                    Modifier
+                        .padding(bottom = 32.dp)
+                        .height(10.dp)
+                        .fillMaxWidth()
+                        .background(color = colors.DarkGrey02)
+                )
+
+                // 마감 임박한 독서 모임방
+                GroupRoomDeadlineSection(
+                    roomMainList = uiState.roomMainList,
+                    selectedGenreIndex = uiState.selectedGenreIndex,
+                    errorMessage = uiState.roomSectionsError,
+                    onGenreSelect = onSelectGenre,
+                    onRoomClick = { room ->
+                        onNavigateToGroupRecruit(room.roomId)
+                    }
+                )
+                Spacer(Modifier.height(102.dp))
+            }
+        }
+
+        // 상단바
+        LogoTopAppBar(
+            leftIcon = painterResource(R.drawable.ic_done),
+            hasNotification = false,
+            onLeftClick = onNavigateToGroupDone,
+            onRightClick = onNavigateToAlarm
+        )
+
+        // 오른쪽 하단 FAB
+        FloatingButton(
+            icon = painterResource(id = R.drawable.ic_makegroup),
+            onClick = onNavigateToMakeRoom
+        )
+
+        // 토스트 팝업
+        AnimatedVisibility(
+            visible = uiState.showToast,
+            enter = slideInVertically(
+                initialOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            exit = slideOutVertically(
+                targetOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .padding(horizontal = 20.dp, vertical = 16.dp)
+                .zIndex(2f)
+        ) {
+            ToastWithDate(
+                message = uiState.toastMessage
+            )
+        }
+    }
+
+    // 토스트 3초 후 자동 숨김 - showToast가 true가 된 시점부터 카운트
+    LaunchedEffect(uiState.showToast) {
+        if (uiState.showToast) {
+            delay(3000L)
+            onHideToast()
+        }
+    }
+}
+
+
+@Preview
+@Composable
+fun PreviewGroupScreen() {
+    ThipTheme {
+        GroupContent(
+            uiState = GroupUiState(
+                userName = "김독서",
+                myJoinedRooms = listOf(
+                    JoinedRoomResponse(
+                        roomId = 1,
+                        bookImageUrl = "https://picsum.photos/300/400?joined1",
+                        roomTitle = "미드나이트 라이브러리",
+                        memberCount = 18,
+                        userPercentage = 75
+                    ),
+                    JoinedRoomResponse(
+                        roomId = 2,
+                        bookImageUrl = "https://picsum.photos/300/400?joined2",
+                        roomTitle = "코스모스",
+                        memberCount = 25,
+                        userPercentage = 42
+                    ),
+                    JoinedRoomResponse(
+                        roomId = 3,
+                        bookImageUrl = "https://picsum.photos/300/400?joined3",
+                        roomTitle = "사피엔스",
+                        memberCount = 15,
+                        userPercentage = 88
+                    )
+                ),
+                roomMainList = RoomMainList(
+                    deadlineRoomList = listOf(
+                        RoomMainResponse(
+                            roomId = 4,
+                            bookImageUrl = "https://picsum.photos/300/400?deadline1",
+                            roomName = "🌙 미드나이트 라이브러리 함께읽기",
+                            recruitCount = 20,
+                            memberCount = 18,
+                            deadlineDate = "D-2"
+                        ),
+                        RoomMainResponse(
+                            roomId = 5,
+                            bookImageUrl = "https://picsum.photos/300/400?deadline2",
+                            roomName = "📚 현대문학 깊이 탐구하기",
+                            recruitCount = 15,
+                            memberCount = 12,
+                            deadlineDate = "D-3"
+                        ),
+                        RoomMainResponse(
+                            roomId = 6,
+                            bookImageUrl = "https://picsum.photos/300/400?deadline3",
+                            roomName = "🔬 과학책으로 세상 이해하기",
+                            recruitCount = 30,
+                            memberCount = 25,
+                            deadlineDate = "D-5"
+                        )
+                    ),
+                    popularRoomList = listOf(
+                        RoomMainResponse(
+                            roomId = 7,
+                            bookImageUrl = "https://picsum.photos/300/400?popular1",
+                            roomName = "✨ 철학 고전 함께 읽기",
+                            recruitCount = 12,
+                            memberCount = 10,
+                            deadlineDate = "D-7"
+                        ),
+                        RoomMainResponse(
+                            roomId = 8,
+                            bookImageUrl = "https://picsum.photos/300/400?popular2",
+                            roomName = "🎨 예술과 문학의 만남",
+                            recruitCount = 20,
+                            memberCount = 16,
+                            deadlineDate = "D-10"
+                        ),
+                        RoomMainResponse(
+                            roomId = 9,
+                            bookImageUrl = "https://picsum.photos/300/400?popular3",
+                            roomName = "💭 심리학 도서 탐험대",
+                            recruitCount = 18,
+                            memberCount = 14,
+                            deadlineDate = "D-12"
+                        )
+                    )
+                ),
+                selectedGenreIndex = 2,
+                isRefreshing = false,
+                hasMoreMyGroups = true,
+                isLoadingMoreMyGroups = false,
+                roomSectionsError = null,
+                showToast = false,
+                toastMessage = ""
+            )
+        )
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/search/component/GroupEmptyResult.kt b/app/src/main/java/com/texthip/thip/ui/group/search/component/GroupEmptyResult.kt
new file mode 100644
index 00000000..09ab53ba
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/search/component/GroupEmptyResult.kt
@@ -0,0 +1,56 @@
+package com.texthip.thip.ui.group.search.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+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
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun GroupEmptyResult(
+    mainText: String,
+    subText: String
+) {
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(
+            text = mainText,
+            color = colors.White,
+            style = typography.smalltitle_sb600_s18_h24
+        )
+        Text(
+            text = subText,
+            modifier = Modifier.padding(top = 8.dp),
+            color = colors.Grey,
+            style = typography.copy_r400_s14
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun GroupEmptyResultPreview() {
+    ThipTheme {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+        ) {
+            GroupEmptyResult(
+                mainText = "검색 결과가 없습니다",
+                subText = "다른 키워드로 검색해보세요"
+            )
+        }
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/search/component/GroupFilteredSearchResult.kt b/app/src/main/java/com/texthip/thip/ui/group/search/component/GroupFilteredSearchResult.kt
new file mode 100644
index 00000000..ae35bbe6
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/search/component/GroupFilteredSearchResult.kt
@@ -0,0 +1,199 @@
+package com.texthip.thip.ui.group.search.component
+
+import androidx.compose.foundation.background
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.data.model.rooms.response.SearchRoomItem
+import com.texthip.thip.ui.common.buttons.GenreChipRow
+import com.texthip.thip.ui.common.cards.CardItemRoomSmall
+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 GroupFilteredSearchResult(
+    genres: List<String>,
+    selectedGenreIndex: Int,
+    onGenreSelect: (Int) -> Unit,
+    resultCount: Int,
+    roomList: List<SearchRoomItem>,
+    onRoomClick: (SearchRoomItem) -> Unit = {},
+    canLoadMore: Boolean = false,
+    isLoadingMore: Boolean = false,
+    onLoadMore: () -> Unit = {}
+) {
+    Column {
+        GenreChipRow(
+            modifier = Modifier.width(12.dp),
+            genres = genres,
+            selectedIndex = selectedGenreIndex,
+            onSelect = onGenreSelect
+        )
+        Spacer(modifier = Modifier.height(20.dp))
+
+        Row(
+            modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically
+        ) {
+            Text(
+                text = stringResource(R.string.group_searched_room_size, resultCount),
+                color = colors.Grey,
+                style = typography.menu_m500_s14_h24
+            )
+        }
+        Spacer(
+            modifier = Modifier
+                .padding(top = 4.dp, bottom = 8.dp)
+                .fillMaxWidth()
+                .height(1.dp)
+                .background(colors.DarkGrey02)
+        )
+
+        if (roomList.isEmpty()) {
+            GroupEmptyResult(
+                mainText = stringResource(R.string.group_no_search_result1),
+                subText = stringResource(R.string.group_no_search_result2)
+            )
+        } else {
+            val listState = rememberLazyListState()
+
+            // 무한 스크롤 트리거 감지
+            val shouldLoadMore by remember {
+                derivedStateOf {
+                    val lastVisibleItem = listState.layoutInfo.visibleItemsInfo.lastOrNull()
+                    lastVisibleItem != null && lastVisibleItem.index >= roomList.size - 3 && canLoadMore
+                }
+            }
+
+            LaunchedEffect(shouldLoadMore) {
+                if (shouldLoadMore) {
+                    onLoadMore()
+                }
+            }
+
+            LazyColumn(state = listState, contentPadding = PaddingValues(bottom = 20.dp)) {
+                itemsIndexed(roomList) { index, room ->
+                    CardItemRoomSmall(
+                        title = room.roomName,
+                        participants = room.memberCount,
+                        maxParticipants = room.recruitCount,
+                        endDate = room.deadlineDate,
+                        imageUrl = room.bookImageUrl,
+                        isWide = true,
+                        isSecret = !room.isPublic,
+                        onClick = { onRoomClick(room) }
+                    )
+                    if (index < roomList.size - 1) {
+                        Spacer(
+                            modifier = Modifier
+                                .padding(top = 12.dp, bottom = 12.dp)
+                                .fillMaxWidth()
+                                .height(1.dp)
+                                .background(colors.DarkGrey02)
+                        )
+                    }
+                }
+
+                // 로딩 인디케이터
+                if (isLoadingMore) {
+                    item {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(16.dp),
+                            contentAlignment = Alignment.Center
+                        ) {
+                            CircularProgressIndicator(color = colors.White)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun GroupFilteredSearchResultPreview() {
+    ThipTheme {
+        Box(
+            modifier = Modifier
+                .padding(16.dp)
+        ) {
+            var selectedGenre by remember { mutableIntStateOf(0) }
+
+            GroupFilteredSearchResult(
+                genres = listOf("문학", "과학•IT", "사회과학", "인문학", "예술"),
+                selectedGenreIndex = selectedGenre,
+                onGenreSelect = { selectedGenre = it },
+                resultCount = 3,
+                roomList = listOf(
+                    SearchRoomItem(
+                        roomId = 1,
+                        roomName = "해리포터 독서모임",
+                        memberCount = 5,
+                        recruitCount = 10,
+                        deadlineDate = "7일 뒤",
+                        bookImageUrl = null,
+                        isPublic = true
+                    ), SearchRoomItem(
+                        roomId = 2,
+                        roomName = "소설 읽기 모임",
+                        memberCount = 8,
+                        recruitCount = 12,
+                        deadlineDate = "3일 뒤",
+                        bookImageUrl = null,
+                        isPublic = false
+                    )
+                )
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun GroupFilteredSearchResultEmptyPreview() {
+    ThipTheme {
+        Box(
+            modifier = Modifier
+                .background(colors.Black)
+                .padding(16.dp)
+        ) {
+            var selectedGenre by remember { mutableIntStateOf(0) }
+
+            GroupFilteredSearchResult(
+                genres = listOf("전체", "소설", "에세이", "자기계발", "경제/경영", "과학"),
+                selectedGenreIndex = selectedGenre,
+                onGenreSelect = { selectedGenre = it },
+                resultCount = 0,
+                roomList = emptyList()
+            )
+        }
+    }
+}
+
diff --git a/app/src/main/java/com/texthip/thip/ui/group/search/component/GroupLiveSearchResult.kt b/app/src/main/java/com/texthip/thip/ui/group/search/component/GroupLiveSearchResult.kt
new file mode 100644
index 00000000..8217727a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/search/component/GroupLiveSearchResult.kt
@@ -0,0 +1,132 @@
+package com.texthip.thip.ui.group.search.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+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.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.data.model.rooms.response.SearchRoomItem
+import com.texthip.thip.ui.common.cards.CardItemRoomSmall
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+
+@Composable
+fun GroupLiveSearchResult(
+    roomList: List<SearchRoomItem>,
+    onRoomClick: (SearchRoomItem) -> Unit = {},
+    canLoadMore: Boolean = false,
+    isLoadingMore: Boolean = false,
+    onLoadMore: () -> Unit = {}
+) {
+    val listState = rememberLazyListState()
+
+    // 무한 스크롤 트리거 감지
+    val shouldLoadMore by remember {
+        derivedStateOf {
+            val lastVisibleItem = listState.layoutInfo.visibleItemsInfo.lastOrNull()
+            lastVisibleItem != null && lastVisibleItem.index >= roomList.size - 3 && canLoadMore
+        }
+    }
+
+    LaunchedEffect(shouldLoadMore) {
+        if (shouldLoadMore) {
+            onLoadMore()
+        }
+    }
+
+    LazyColumn(state = listState, contentPadding = PaddingValues(bottom = 20.dp)) {
+        itemsIndexed(roomList) { index, room ->
+            CardItemRoomSmall(
+                title = room.roomName,
+                participants = room.memberCount,
+                maxParticipants = room.recruitCount,
+                endDate = room.deadlineDate,
+                imageUrl = room.bookImageUrl,
+                isWide = true,
+                isSecret = !room.isPublic,
+                onClick = { onRoomClick(room) }
+            )
+            if (index < roomList.size - 1) {
+                Spacer(
+                    modifier = Modifier
+                        .padding(top = 12.dp, bottom = 12.dp)
+                        .fillMaxWidth()
+                        .height(1.dp)
+                        .background(colors.DarkGrey02)
+                )
+            }
+        }
+
+        // 로딩 인디케이터
+        if (isLoadingMore) {
+            item {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(16.dp),
+                    contentAlignment = Alignment.Center
+                ) {
+                    CircularProgressIndicator(color = colors.White)
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun GroupLiveSearchResultPreview() {
+    ThipTheme {
+        Box(
+            modifier = Modifier
+                .padding(16.dp)
+        ) {
+            GroupLiveSearchResult(
+                roomList = listOf(
+                    SearchRoomItem(
+                        roomId = 1,
+                        roomName = "해리포터 독서모임",
+                        memberCount = 5,
+                        recruitCount = 10,
+                        deadlineDate = "7일 뒤",
+                        bookImageUrl = null,
+                        isPublic = true
+                    ),
+                    SearchRoomItem(
+                        roomId = 2,
+                        roomName = "소설 읽기 모임",
+                        memberCount = 8,
+                        recruitCount = 12,
+                        deadlineDate = "3일 뒤",
+                        bookImageUrl = null,
+                        isPublic = false
+                    ),
+                    SearchRoomItem(
+                        roomId = 3,
+                        roomName = "비즈니스 서적 스터디",
+                        memberCount = 3,
+                        recruitCount = 8,
+                        deadlineDate = "모집 중",
+                        bookImageUrl = null,
+                        isPublic = true
+                    )
+                )
+            )
+        }
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/search/component/GroupRecentSearch.kt b/app/src/main/java/com/texthip/thip/ui/group/search/component/GroupRecentSearch.kt
new file mode 100644
index 00000000..d23b3c46
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/search/component/GroupRecentSearch.kt
@@ -0,0 +1,105 @@
+package com.texthip.thip.ui.group.search.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.GenreChipButton
+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 GroupRecentSearch(
+    recentSearches: List<String>,
+    onSearchClick: (String) -> Unit,
+    onRemove: (String) -> Unit
+) {
+    Column {
+        Text(
+            text = stringResource(R.string.group_recent_search),
+            color = colors.White,
+            style = typography.smalltitle_sb600_s18_h24
+        )
+        Spacer(modifier = Modifier.height(16.dp))
+        if (recentSearches.isEmpty()) {
+            Text(
+                text = stringResource(R.string.group_no_recent_search),
+                color = colors.Grey01,
+                style = typography.menu_r400_s14_h24
+            )
+        } else {
+            FlowRow(
+                verticalArrangement = Arrangement.spacedBy(12.dp),
+                horizontalArrangement = Arrangement.spacedBy(16.dp),
+                maxLines = 2,
+            ) {
+                recentSearches.take(9).forEach { keyword ->
+                    GenreChipButton(
+                        text = keyword,
+                        onClick = { onSearchClick(keyword) },
+                        onCloseClick = { onRemove(keyword) }
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun GroupRecentSearchPreview() {
+    ThipTheme {
+        Box(
+            modifier = Modifier
+                .padding(16.dp)
+        ) {
+            var searches by remember {
+                mutableStateOf(listOf("해리포터", "소설", "추리소설", "로맨스", "SF", "판타지"))
+            }
+
+            GroupRecentSearch(
+                recentSearches = searches,
+                onSearchClick = { keyword ->
+                    // 검색 동작 시뮬레이션
+                },
+                onRemove = { keyword ->
+                    searches = searches.filter { it != keyword }
+                }
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun GroupRecentSearchEmptyPreview() {
+    ThipTheme {
+        Box(
+            modifier = Modifier
+                .background(colors.Black)
+                .padding(16.dp)
+        ) {
+            GroupRecentSearch(
+                recentSearches = emptyList(),
+                onSearchClick = { },
+                onRemove = { }
+            )
+        }
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/search/screen/GroupSearchScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/search/screen/GroupSearchScreen.kt
new file mode 100644
index 00000000..1822d574
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/search/screen/GroupSearchScreen.kt
@@ -0,0 +1,260 @@
+package com.texthip.thip.ui.group.search.screen
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.texthip.thip.R
+import com.texthip.thip.data.manager.Genre
+import com.texthip.thip.data.model.book.response.RecentSearchItem
+import com.texthip.thip.data.model.rooms.response.SearchRoomItem
+import com.texthip.thip.ui.common.buttons.FilterButton
+import com.texthip.thip.ui.common.forms.SearchBookTextField
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.group.search.component.GroupRecentSearch
+import com.texthip.thip.ui.group.search.component.GroupEmptyResult
+import com.texthip.thip.ui.group.search.component.GroupFilteredSearchResult
+import com.texthip.thip.ui.group.search.component.GroupLiveSearchResult
+import com.texthip.thip.ui.group.search.viewmodel.GroupSearchUiState
+import com.texthip.thip.ui.group.search.viewmodel.GroupSearchViewModel
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.utils.rooms.toDisplayStrings
+
+@Composable
+fun GroupSearchScreen(
+    modifier: Modifier = Modifier,
+    onNavigateBack: () -> Unit = {},
+    onRoomClick: (Int) -> Unit = {},
+    viewModel: GroupSearchViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsState()
+
+    GroupSearchContent(
+        modifier = modifier,
+        uiState = uiState,
+        onNavigateBack = onNavigateBack,
+        onRoomClick = onRoomClick,
+        onUpdateSearchQuery = viewModel::updateSearchQuery,
+        onSearchButtonClick = viewModel::onSearchButtonClick,
+        onDeleteRecentSearch = viewModel::deleteRecentSearchByKeyword,
+        onLoadMoreRooms = viewModel::loadMoreRooms,
+        onUpdateSelectedGenre = viewModel::updateSelectedGenre,
+        onUpdateSortType = viewModel::updateSortType
+    )
+}
+
+@Composable
+private fun GroupSearchContent(
+    modifier: Modifier = Modifier,
+    uiState: GroupSearchUiState,
+    onNavigateBack: () -> Unit = {},
+    onRoomClick: (Int) -> Unit = {},
+    onUpdateSearchQuery: (String) -> Unit = {},
+    onSearchButtonClick: () -> Unit = {},
+    onDeleteRecentSearch: (String) -> Unit = {},
+    onLoadMoreRooms: () -> Unit = {},
+    onUpdateSelectedGenre: (Genre?) -> Unit = {},
+    onUpdateSortType: (String) -> Unit = {}
+) {
+    val focusRequester = remember { FocusRequester() }
+    val focusManager = LocalFocusManager.current
+
+    val genreDisplayNames = uiState.genres.toDisplayStrings()
+
+    val sortOptions = listOf(
+        stringResource(R.string.group_filter_deadline),
+        stringResource(R.string.group_filter_popular)
+    )
+
+    val selectedGenreIndex = if (uiState.selectedGenre != null) {
+        uiState.genres.indexOf(uiState.selectedGenre)
+    } else -1
+
+    val selectedSortOptionIndex = when (uiState.selectedSort) {
+        "deadline" -> 0
+        "memberCount" -> 1
+        else -> 0
+    }
+
+    LaunchedEffect(uiState.isCompleteSearching) {
+        if (uiState.isCompleteSearching) {
+            focusManager.clearFocus()
+        }
+    }
+
+    Box(
+        modifier = modifier.fillMaxSize()
+    ) {
+        Column(
+            modifier = Modifier.fillMaxSize()
+        ) {
+            DefaultTopAppBar(
+                title = stringResource(R.string.group_room_search_topappbar),
+                onLeftClick = onNavigateBack,
+            )
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(horizontal = 20.dp)
+            ) {
+                Spacer(modifier = Modifier.height(16.dp))
+
+                SearchBookTextField(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .focusRequester(focusRequester),
+                    hint = stringResource(R.string.group_room_search_hint),
+                    text = uiState.searchQuery,
+                    onValueChange = onUpdateSearchQuery,
+                    onSearch = { _ -> onSearchButtonClick() }
+                )
+                Spacer(modifier = Modifier.height(16.dp))
+
+                when {
+                    uiState.isInitial -> {
+                        if (uiState.recentSearches.isEmpty()) {
+                            GroupRecentSearch(
+                                recentSearches = emptyList(),
+                                onSearchClick = { _ -> },
+                                onRemove = { _ -> }
+                            )
+                        } else {
+                            GroupRecentSearch(
+                                recentSearches = uiState.recentSearches.map { it.searchTerm },
+                                onSearchClick = { keyword ->
+                                    onUpdateSearchQuery(keyword)
+                                    onSearchButtonClick()
+                                },
+                                onRemove = onDeleteRecentSearch
+                            )
+                        }
+                    }
+
+                    uiState.isLiveSearching -> {
+                        if (uiState.showEmptyState) {
+                            GroupEmptyResult(
+                                mainText = stringResource(R.string.group_no_search_result1),
+                                subText = stringResource(R.string.group_no_search_result2)
+                            )
+                        } else if (uiState.hasResults) {
+                            GroupLiveSearchResult(
+                                roomList = uiState.searchResults,
+                                onRoomClick = { room -> onRoomClick(room.roomId) },
+                                canLoadMore = uiState.canLoadMore,
+                                isLoadingMore = uiState.isLoadingMore,
+                                onLoadMore = onLoadMoreRooms
+                            )
+                        }
+                    }
+
+                    uiState.isCompleteSearching -> {
+                        GroupFilteredSearchResult(
+                            genres = genreDisplayNames,
+                            selectedGenreIndex = selectedGenreIndex,
+                            onGenreSelect = { index ->
+                                val currentSelectedIndex = if (uiState.selectedGenre != null) {
+                                    uiState.genres.indexOf(uiState.selectedGenre)
+                                } else -1
+
+                                val selectedGenre = if (index == currentSelectedIndex) {
+                                    // 같은 장르를 다시 터치하면 선택 해제
+                                    null
+                                } else if (index >= 0 && index < uiState.genres.size) {
+                                    // 새로운 장르 선택
+                                    uiState.genres[index]
+                                } else {
+                                    null
+                                }
+                                onUpdateSelectedGenre(selectedGenre)
+                            },
+                            resultCount = uiState.searchResults.size,
+                            roomList = uiState.searchResults,
+                            onRoomClick = { room -> onRoomClick(room.roomId) },
+                            canLoadMore = uiState.canLoadMore,
+                            isLoadingMore = uiState.isLoadingMore,
+                            onLoadMore = onLoadMoreRooms
+                        )
+                    }
+                }
+            }
+        }
+
+        if (uiState.isCompleteSearching) {
+            FilterButton(
+                modifier = Modifier
+                    .align(Alignment.TopEnd)
+                    .padding(top = 196.dp, end = 20.dp),
+                selectedOption = sortOptions[selectedSortOptionIndex],
+                options = sortOptions,
+                onOptionSelected = { selected ->
+                    val sortType = when (sortOptions.indexOf(selected)) {
+                        0 -> "deadline"
+                        1 -> "memberCount"
+                        else -> "deadline"
+                    }
+                    onUpdateSortType(sortType)
+                }
+            )
+        }
+    }
+}
+
+
+@Preview
+@Composable
+private fun GroupSearchContentPreview() {
+    ThipTheme {
+        GroupSearchContent(
+            uiState = GroupSearchUiState(
+                searchQuery = "코스모스",
+                isCompleteSearching = true,
+                searchResults = listOf(
+                    SearchRoomItem(
+                        roomId = 1,
+                        bookImageUrl = "",
+                        roomName = "코스모스 독서 모임",
+                        memberCount = 8,
+                        recruitCount = 12,
+                        deadlineDate = "2024-12-31",
+                        isPublic = true
+                    )
+                ),
+                recentSearches = listOf(
+                    RecentSearchItem(
+                        recentSearchId = 1,
+                        searchTerm = "해리포터"
+                    ),
+                    RecentSearchItem(
+                        recentSearchId = 2,
+                        searchTerm = "1984"
+                    )
+                ),
+                genres = listOf(
+                    Genre.LITERATURE,
+                    Genre.SCIENCE_IT,
+                    Genre.SOCIAL_SCIENCE,
+                    Genre.HUMANITIES,
+                    Genre.ART
+                ),
+                selectedGenre = Genre.SCIENCE_IT
+            )
+        )
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/group/search/viewmodel/GroupSearchViewModel.kt b/app/src/main/java/com/texthip/thip/ui/group/search/viewmodel/GroupSearchViewModel.kt
new file mode 100644
index 00000000..95966920
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/search/viewmodel/GroupSearchViewModel.kt
@@ -0,0 +1,355 @@
+package com.texthip.thip.ui.group.search.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.manager.Genre
+import com.texthip.thip.data.model.book.response.RecentSearchItem
+import com.texthip.thip.data.model.rooms.response.SearchRoomItem
+import com.texthip.thip.data.repository.RecentSearchRepository
+import com.texthip.thip.data.repository.RoomsRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class GroupSearchUiState(
+    val searchQuery: String = "",
+
+    // 상태 관리 단순화 - boolean 필드 사용
+    val isInitial: Boolean = true,
+    val isLiveSearching: Boolean = false,
+    val isCompleteSearching: Boolean = false,
+
+    // 검색 결과 및 데이터
+    val searchResults: List<SearchRoomItem> = emptyList(),
+    val recentSearches: List<RecentSearchItem> = emptyList(),
+    val genres: List<Genre> = emptyList(),
+
+    // 필터링 상태
+    val selectedGenre: Genre? = null,
+    val selectedSort: String = "deadline", // "deadline" 또는 "memberCount"
+
+    // 로딩 상태
+    val isSearching: Boolean = false,
+    val isLoadingMore: Boolean = false,
+
+    // 페이징 정보
+    val nextCursor: String? = null,
+    val hasMore: Boolean = true,
+
+    // 에러/토스트
+    val error: String? = null,
+    val showToast: Boolean = false,
+    val toastMessage: String = ""
+) {
+    val hasResults: Boolean get() = searchResults.isNotEmpty()
+    val canLoadMore: Boolean get() = hasMore && !isSearching && !isLoadingMore
+    val showEmptyState: Boolean get() = searchQuery.isNotBlank() && searchResults.isEmpty() && !isSearching
+}
+
+@HiltViewModel
+class GroupSearchViewModel @Inject constructor(
+    private val roomsRepository: RoomsRepository,
+    private val recentSearchRepository: RecentSearchRepository
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(GroupSearchUiState())
+    val uiState: StateFlow<GroupSearchUiState> = _uiState.asStateFlow()
+
+    private var searchJob: Job? = null
+    private var loadMoreJob: Job? = null
+
+    // Map 기반 빠른 최근 검색어 관리
+    private val recentSearchMap = mutableMapOf<String, RecentSearchItem>()
+
+    init {
+        loadInitialData()
+    }
+
+    private fun updateState(update: (GroupSearchUiState) -> GroupSearchUiState) {
+        _uiState.update(update)
+    }
+
+    private fun loadInitialData() {
+        loadGenres()
+        loadRecentSearches()
+    }
+
+    private fun loadGenres() {
+        viewModelScope.launch {
+            roomsRepository.getGenres()
+                .onSuccess { genres ->
+                    updateState {
+                        it.copy(
+                            genres = genres,
+                            selectedGenre = null  // 기본적으로 아무 장르도 선택하지 않음
+                        )
+                    }
+                }
+                .onFailure {
+                    // 장르 로딩 실패는 조용히 처리
+                }
+        }
+    }
+
+    fun updateSearchQuery(query: String) {
+        updateState { it.copy(searchQuery = query) }
+        searchJob?.cancel()
+        loadMoreJob?.cancel()
+
+        // 공백도 검색 가능하도록 수정 (빈 문자열만 제외)
+        if (query.isNotEmpty()) {
+            updateState {
+                it.copy(
+                    isInitial = false,
+                    isLiveSearching = true,
+                    isCompleteSearching = false
+                )
+            }
+            searchJob = viewModelScope.launch {
+                delay(300)
+                performSearch(query, isLiveSearch = true)
+            }
+        } else {
+            clearSearchResults()
+        }
+    }
+
+    fun onSearchButtonClick() {
+        val query = uiState.value.searchQuery
+        if (query.isNotEmpty()) {  // 공백도 검색 가능 (빈 문자열만 제외)
+            searchJob?.cancel()
+            loadMoreJob?.cancel()
+
+            updateState {
+                it.copy(
+                    isInitial = false,
+                    isLiveSearching = false,
+                    isCompleteSearching = true
+                )
+            }
+            viewModelScope.launch {
+                performSearch(query, isLiveSearch = false)
+                loadRecentSearches()
+            }
+        }
+    }
+
+    fun updateSelectedGenre(genre: Genre?) {
+        updateState { it.copy(selectedGenre = genre) }
+        // 필터 변경 시 새로운 검색 수행 (공백도 허용)
+        if (uiState.value.searchQuery.isNotEmpty() && !uiState.value.isInitial) {
+            performSearchWithCurrentQuery()
+        }
+    }
+
+    fun updateSortType(sort: String) {
+        updateState { it.copy(selectedSort = sort) }
+        // 정렬 변경 시 새로운 검색 수행 (공백도 허용)
+        if (uiState.value.searchQuery.isNotEmpty() && !uiState.value.isInitial) {
+            performSearchWithCurrentQuery()
+        }
+    }
+
+    private fun performSearchWithCurrentQuery() {
+        val currentState = uiState.value
+        if (currentState.searchQuery.isNotEmpty()) {  // 공백도 허용
+            searchJob?.cancel()
+            loadMoreJob?.cancel()
+
+            searchJob = viewModelScope.launch {
+                performSearch(currentState.searchQuery, isLiveSearch = currentState.isLiveSearching)
+            }
+        }
+    }
+
+    fun loadMoreRooms() {
+        val currentState = uiState.value
+        if (currentState.canLoadMore && currentState.searchQuery.isNotEmpty()) {  // 공백도 허용
+            loadMoreJob?.cancel()
+            loadMoreJob = viewModelScope.launch {
+                performLoadMore()
+            }
+        }
+    }
+
+    private suspend fun performSearch(query: String, isLiveSearch: Boolean) {
+        val currentState = uiState.value
+        updateState {
+            it.copy(
+                isInitial = false,
+                isLiveSearching = isLiveSearch,
+                isCompleteSearching = !isLiveSearch,
+                isSearching = true,
+                error = null,
+                searchResults = emptyList(),
+                nextCursor = null,
+                hasMore = true
+            )
+        }
+
+        val category = currentState.selectedGenre?.apiCategory ?: ""
+        roomsRepository.searchRooms(
+            keyword = query,
+            category = category,
+            sort = currentState.selectedSort,
+            isFinalized = !isLiveSearch,
+            cursor = null
+        )
+            .onSuccess { response ->
+                response?.let { searchResponse ->
+                    updateState {
+                        it.copy(
+                            searchResults = searchResponse.roomList,
+                            nextCursor = searchResponse.nextCursor,
+                            hasMore = !searchResponse.isLast,
+                            isSearching = false,
+                            error = null
+                        )
+                    }
+                } ?: run {
+                    updateState {
+                        it.copy(
+                            searchResults = emptyList(),
+                            isSearching = false,
+                            isLiveSearching = isLiveSearch,
+                            isCompleteSearching = !isLiveSearch,
+                            hasMore = false,
+                            error = if (isLiveSearch) null else "검색 결과를 불러올 수 없습니다."
+                        )
+                    }
+                }
+            }
+            .onFailure { throwable ->
+                updateState {
+                    it.copy(
+                        searchResults = emptyList(),
+                        isSearching = false,
+                        isLiveSearching = isLiveSearch,
+                        isCompleteSearching = !isLiveSearch,
+                        error = if (isLiveSearch) null else (throwable.message
+                            ?: "검색 중 오류가 발생했습니다.")
+                    )
+                }
+            }
+    }
+
+    private suspend fun performLoadMore() {
+        val currentState = uiState.value
+
+        updateState { it.copy(isLoadingMore = true) }
+
+        val category = currentState.selectedGenre?.apiCategory ?: ""
+        roomsRepository.searchRooms(
+            keyword = currentState.searchQuery,
+            category = category,
+            sort = currentState.selectedSort,
+            isFinalized = true,
+            cursor = currentState.nextCursor
+        )
+            .onSuccess { response ->
+                response?.let { searchResponse ->
+                    updateState {
+                        it.copy(
+                            searchResults = it.searchResults + searchResponse.roomList,
+                            nextCursor = searchResponse.nextCursor,
+                            hasMore = !searchResponse.isLast,
+                            isLoadingMore = false,
+                            error = null
+                        )
+                    }
+                } ?: run {
+                    updateState {
+                        it.copy(
+                            isLoadingMore = false,
+                            hasMore = false,
+                            error = "추가 결과를 불러올 수 없습니다."
+                        )
+                    }
+                }
+            }
+            .onFailure { throwable ->
+                updateState {
+                    it.copy(
+                        isLoadingMore = false,
+                        error = throwable.message ?: "추가 결과를 불러오는 중 오류가 발생했습니다."
+                    )
+                }
+            }
+    }
+
+    fun loadRecentSearches() {
+        viewModelScope.launch {
+            recentSearchRepository.getRecentSearches("ROOM")
+                .onSuccess { response ->
+                    response?.let { recentSearchResponse ->
+                        // Map에 최근 검색어 저장 (빠른 검색을 위해)
+                        recentSearchMap.clear()
+                        recentSearchResponse.recentSearchList.forEach { item ->
+                            recentSearchMap[item.searchTerm] = item
+                        }
+
+                        updateState {
+                            it.copy(recentSearches = recentSearchResponse.recentSearchList)
+                        }
+                    }
+                }
+                .onFailure {
+                    // 최근 검색어 로딩 실패는 조용히 처리
+                }
+        }
+    }
+
+    fun deleteRecentSearch(recentSearchId: Int) {
+        viewModelScope.launch {
+            recentSearchRepository.deleteRecentSearch(recentSearchId)
+                .onSuccess {
+                    loadRecentSearches() // 삭제 성공 시 목록 새로고침
+                }
+                .onFailure {
+                    // 삭제 실패는 조용히 처리
+                }
+        }
+    }
+
+    /** 키워드로 빠른 최근 검색어 삭제 (Map 기반) */
+    fun deleteRecentSearchByKeyword(keyword: String) {
+        recentSearchMap[keyword]?.let { recentSearchItem ->
+            deleteRecentSearch(recentSearchItem.recentSearchId)
+        }
+    }
+
+    private fun clearSearchResults() {
+        searchJob?.cancel()
+        loadMoreJob?.cancel()
+        updateState {
+            it.copy(
+                searchQuery = "",
+                isInitial = true,
+                isLiveSearching = false,
+                isCompleteSearching = false,
+                searchResults = emptyList(),
+                nextCursor = null,
+                hasMore = true,
+                isSearching = false,
+                isLoadingMore = false,
+                error = null
+            )
+        }
+    }
+
+    fun refreshData() {
+        loadInitialData()
+    }
+
+    override fun onCleared() {
+        super.onCleared()
+        searchJob?.cancel()
+        loadMoreJob?.cancel()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/viewmodel/GroupUiState.kt b/app/src/main/java/com/texthip/thip/ui/group/viewmodel/GroupUiState.kt
new file mode 100644
index 00000000..ba99fd8a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/viewmodel/GroupUiState.kt
@@ -0,0 +1,22 @@
+package com.texthip.thip.ui.group.viewmodel
+
+import com.texthip.thip.data.model.rooms.response.JoinedRoomResponse
+import com.texthip.thip.data.model.rooms.response.RoomMainList
+
+data class GroupUiState(
+    val myJoinedRooms: List<JoinedRoomResponse> = emptyList(),
+    val hasMoreMyGroups: Boolean = true,
+    val isRefreshing: Boolean = false,
+    val isLoadingMoreMyGroups: Boolean = false,
+    val roomMainList: RoomMainList? = null,
+    val roomSectionsError: String? = null,
+    val userName: String = "",
+    val selectedGenreIndex: Int = 0,
+    val showToast: Boolean = false,
+    val toastMessage: String = "",
+    val isLast: Boolean = false,
+    val error: String? = null
+) {
+    val hasContent: Boolean get() = myJoinedRooms.isNotEmpty() || (roomMainList != null)
+    val canLoadMore: Boolean get() = hasMoreMyGroups && !isRefreshing && !isLoadingMoreMyGroups
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/group/viewmodel/GroupViewModel.kt b/app/src/main/java/com/texthip/thip/ui/group/viewmodel/GroupViewModel.kt
new file mode 100644
index 00000000..381a28a2
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/group/viewmodel/GroupViewModel.kt
@@ -0,0 +1,215 @@
+package com.texthip.thip.ui.group.viewmodel
+
+import android.content.Context
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.manager.Genre
+import com.texthip.thip.data.repository.RoomsRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import dagger.hilt.android.qualifiers.ApplicationContext
+import kotlinx.coroutines.async
+import kotlinx.coroutines.awaitAll
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class GroupViewModel @Inject constructor(
+    private val repository: RoomsRepository,
+    @param:ApplicationContext private val context: Context
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(GroupUiState())
+    val uiState: StateFlow<GroupUiState> = _uiState.asStateFlow()
+    
+    private var nextCursor: String? = null
+    private var isLoadingMyGroups = false
+    
+    private fun updateState(update: (GroupUiState) -> GroupUiState) {
+        _uiState.value = update(_uiState.value)
+    }
+    
+    init {
+        loadInitialData()
+    }
+
+    private fun loadInitialData() {
+        loadUserName()
+        loadMyGroups()
+        loadRoomSections()
+    }
+
+    private fun loadUserName() {
+        viewModelScope.launch {
+            repository.getUserName()
+                .onSuccess { userName ->
+                    updateState { it.copy(userName = userName) }
+                }
+        }
+    }
+
+    fun loadMyGroups(reset: Boolean = false) = viewModelScope.launch {
+        if (reset) {
+            resetMyGroupsData()
+            updateState { it.copy(isRefreshing = true) }
+        }
+        try {
+            loadMyGroupsSuspend(isInitial = reset)
+        } finally {
+            updateState { it.copy(isRefreshing = false) }
+        }
+    }
+
+    private suspend fun loadMyGroupsSuspend(isInitial: Boolean = false) {
+        if (isLoadingMyGroups) return
+        if (!isInitial && _uiState.value.isLast) return
+
+        try {
+            isLoadingMyGroups = true
+            
+            if (isInitial) {
+                updateState { it.copy(isLoadingMoreMyGroups = false) }
+            } else {
+                updateState { it.copy(isLoadingMoreMyGroups = true) }
+            }
+
+            val cursor = if (isInitial) null else nextCursor
+
+            repository.getMyJoinedRooms(cursor)
+                .onSuccess { joinedRoomsResponse ->
+                    if (joinedRoomsResponse != null) {
+                        val currentList = if (isInitial) emptyList() else _uiState.value.myJoinedRooms
+                        updateState { 
+                            it.copy(
+                                myJoinedRooms = currentList + joinedRoomsResponse.roomList,
+                                hasMoreMyGroups = !joinedRoomsResponse.isLast,
+                                isLast = joinedRoomsResponse.isLast
+                            )
+                        }
+                        nextCursor = joinedRoomsResponse.nextCursor
+                    } else {
+                        updateState { it.copy(hasMoreMyGroups = false, isLast = true) }
+                    }
+                }
+                .onFailure { exception ->
+                    updateState { it.copy(error = exception.message) }
+                }
+        } finally {
+            isLoadingMyGroups = false
+            updateState { it.copy(isLoadingMoreMyGroups = false) }
+        }
+    }
+
+    fun loadMoreGroups() {
+        if (_uiState.value.hasMoreMyGroups && !isLoadingMyGroups) {
+            viewModelScope.launch {
+                loadMyGroupsSuspend(isInitial = false)
+            }
+        }
+    }
+
+    private fun loadRoomSections() {
+        viewModelScope.launch {
+            updateState { it.copy(roomSectionsError = null) }
+
+            val genresResult = repository.getGenres()
+            val selectedIndex = uiState.value.selectedGenreIndex
+            val selectedGenre = if (genresResult.isSuccess) {
+                val genres = genresResult.getOrThrow()
+                if (selectedIndex >= 0 && selectedIndex < genres.size) {
+                    genres[selectedIndex]
+                } else {
+                    genres.firstOrNull() ?: Genre.getDefault()
+                }
+            } else {
+                Genre.getDefault()
+            }
+
+            repository.getRoomSections(selectedGenre)
+                .onSuccess { roomMainList ->
+                    updateState { it.copy(roomMainList = roomMainList) }
+                }
+                .onFailure { error ->
+                    updateState { it.copy(roomSectionsError = error.message) }
+                }
+        }
+    }
+
+    fun selectGenre(genreIndex: Int) {
+        val genresResult = repository.getGenres()
+        if (genresResult.isSuccess) {
+            val genres = genresResult.getOrThrow()
+            if (genreIndex >= 0 && genreIndex < genres.size && genreIndex != uiState.value.selectedGenreIndex) {
+                updateState { it.copy(selectedGenreIndex = genreIndex) }
+                loadRoomSections()
+            }
+        }
+    }
+
+
+
+    fun refreshGroupData() {
+        viewModelScope.launch {
+            updateState { it.copy(isRefreshing = true) }
+            try {
+                val jobs = listOf(
+                    async { loadUserName() },
+                    async {
+                        resetMyGroupsData()
+                        loadMyGroupsSuspend(isInitial = true)
+                    },
+                    async { loadRoomSections() },
+                )
+
+                jobs.awaitAll()
+            } finally {
+                updateState { it.copy(isRefreshing = false) }
+            }
+        }
+    }
+
+    private fun resetMyGroupsData() {
+        nextCursor = null
+        updateState { 
+            it.copy(
+                myJoinedRooms = emptyList(),
+                hasMoreMyGroups = true,
+                isLast = false
+            )
+        }
+    }
+
+    fun showToastMessage(message: String) {
+        updateState { 
+            it.copy(
+                toastMessage = message,
+                showToast = true
+            )
+        }
+    }
+
+    fun hideToast() {
+        updateState { it.copy(showToast = false) }
+    }
+
+    fun refreshDataOnScreenEnter() {
+        refreshGroupData()
+    }
+
+    fun resetToInitialState() {
+        // 장르 선택을 초기화하고 모든 데이터를 새로고침
+        updateState { 
+            it.copy(
+                selectedGenreIndex = 0,
+                roomMainList = it.roomMainList?.copy(
+                    deadlineRoomList = emptyList(),
+                    popularRoomList = emptyList()
+                )
+            )
+        }
+        refreshGroupData()
+    }
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/myPage/screen/MyPageScreen.kt b/app/src/main/java/com/texthip/thip/ui/myPage/screen/MyPageScreen.kt
deleted file mode 100644
index 9195747e..00000000
--- a/app/src/main/java/com/texthip/thip/ui/myPage/screen/MyPageScreen.kt
+++ /dev/null
@@ -1,19 +0,0 @@
-package com.texthip.thip.ui.myPage.screen
-
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.navigation.NavController
-
-@Composable
-fun MyPageScreen(navController: NavController) {
-    Box(
-        modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.Center
-    ) {
-        Text(text = "MyPage Screen")
-    }
-}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/component/BookContent.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/BookContent.kt
new file mode 100644
index 00000000..f7024906
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/component/BookContent.kt
@@ -0,0 +1,111 @@
+package com.texthip.thip.ui.mypage.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+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.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.cards.CardBookList
+import com.texthip.thip.ui.mypage.mock.BookItem
+import com.texthip.thip.ui.mypage.viewmodel.SavedBookViewModel
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun BookContent(
+    bookList: List<BookItem>,
+    viewModel: SavedBookViewModel,
+    onBookClick: (isbn: String) -> Unit
+) {
+    if (bookList.isEmpty()) {
+        EmptyBookContent()
+    } else {
+        val listState = rememberLazyListState()
+        val shouldLoadMore = remember {
+            derivedStateOf {
+                val layoutInfo = listState.layoutInfo
+                val totalItemsNumber = layoutInfo.totalItemsCount
+                val lastVisibleItemIndex = (layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0) + 1
+
+                totalItemsNumber > 0 && lastVisibleItemIndex >= totalItemsNumber - 3
+            }
+        }
+
+        LaunchedEffect(shouldLoadMore.value) {
+            if (shouldLoadMore.value) {
+                viewModel.loadMoreBooks()
+            }
+        }
+
+        LazyColumn(
+            state = listState,
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = 20.dp),
+            contentPadding = PaddingValues(bottom = 20.dp)
+        ) {
+            itemsIndexed(bookList, key = { _, book -> book.id }) { index, book ->
+                if (index == 0) {
+                    Spacer(Modifier.height(32.dp))
+                }
+
+                CardBookList(
+                    title = book.title,
+                    author = book.author,
+                    imageUrl = book.imageUrl,
+                    publisher = book.publisher,
+                    showBookmark = true,
+                    isBookmarked = book.isSaved,
+                    onBookmarkClick = { viewModel.toggleBookmark(book.isbn) },
+                    onClick = { onBookClick(book.isbn) }
+                )
+
+                if (index != bookList.lastIndex) {
+                    Spacer(Modifier.height(20.dp))
+                    HorizontalDivider(
+                        color = colors.DarkGrey02,
+                        thickness = 1.dp
+                    )
+                    Spacer(Modifier.height(20.dp))
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun EmptyBookContent() {
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        Text(
+            text = stringResource(R.string.no_saved_book),
+            style = typography.smalltitle_sb600_s18_h24,
+            color = colors.White
+        )
+        Text(
+            text = stringResource(R.string.do_thip_book),
+            style = typography.feedcopy_r400_s14_h20,
+            color = colors.Grey,
+            modifier = Modifier.padding(top = 8.dp)
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/component/FeedContent.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/FeedContent.kt
new file mode 100644
index 00000000..24839bff
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/component/FeedContent.kt
@@ -0,0 +1,84 @@
+package com.texthip.thip.ui.mypage.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+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.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.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.mypage.mock.FeedItem
+import com.texthip.thip.ui.mypage.viewmodel.SavedFeedViewModel
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun FeedContent(
+    feedList: List<FeedItem>,
+    viewModel: SavedFeedViewModel,
+    onFeedClick: (feedId: Long) -> Unit
+
+) {
+    if (feedList.isEmpty()) {
+        EmptyFeedContent()
+    } else {
+        LazyColumn(
+            modifier = Modifier
+                .fillMaxSize(),
+            contentPadding = PaddingValues(bottom = 20.dp)
+        ) {
+            itemsIndexed(feedList, key = { _, feed -> feed.id }) { index, feed ->
+                if (index == 0) {
+                    Spacer(Modifier.height(32.dp))
+                }
+
+                SavedFeedCard(
+                    feedItem = feed,
+                    onBookmarkClick = { viewModel.toggleBookmark(feed.id) },
+                    onLikeClick = { viewModel.toggleLike(feed.id) },
+                    onContentClick = { onFeedClick(feed.id) }
+                )
+
+                if (index != feedList.lastIndex) {
+                    Spacer(Modifier.height(40.dp))
+                    HorizontalDivider(
+                        color = colors.DarkGrey03,
+                        thickness = 6.dp
+                    )
+                    Spacer(Modifier.height(40.dp))
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun EmptyFeedContent() {
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        Text(
+            text = stringResource(R.string.no_saved_feed),
+            style = typography.smalltitle_sb600_s18_h24,
+            color = colors.White
+        )
+        Text(
+            text = stringResource(R.string.do_thip_feed),
+            style = typography.feedcopy_r400_s14_h20,
+            color = colors.Grey,
+            modifier = Modifier.padding(top = 8.dp)
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/component/MypageSaveBook.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/MypageSaveBook.kt
new file mode 100644
index 00000000..e69de29b
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/component/RoleCard.kt b/app/src/main/java/com/texthip/thip/ui/mypage/component/RoleCard.kt
new file mode 100644
index 00000000..58772100
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/component/RoleCard.kt
@@ -0,0 +1,123 @@
+package com.texthip.thip.ui.mypage.component
+
+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
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+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.layout.ContentScale
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import com.texthip.thip.ui.theme.DarkGrey
+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.theme.White
+import com.texthip.thip.utils.color.hexToColor
+
+@Composable
+fun RoleCard(
+    modifier: Modifier = Modifier,
+    genre: String,
+    role: String,
+    imageUrl: String,
+    roleColor: String,
+    selected: Boolean,
+    onClick: () -> Unit
+) {
+    val borderColor = if (selected) White else DarkGrey
+    val bgAlpha = if (selected) 1f else 0.3f
+    val backgroundBrush = if (selected) {
+        colors.Black800
+    } else {
+        colors.Black700
+    }
+    val actualGenreColor = if (selected) colors.White else colors.Grey01
+    Box(
+        modifier = modifier
+            .width(162.dp)
+            .height(100.dp)
+            .clip(RoundedCornerShape(12.dp))
+            .background(color = backgroundBrush, shape = RoundedCornerShape(12.dp))
+            .border(
+                width = 1.dp,
+                color = borderColor,
+                shape = RoundedCornerShape(12.dp)
+            )
+            .clickable { onClick() }
+    ) {
+        AsyncImage(
+            model = imageUrl,
+            contentDescription = null,
+            modifier = Modifier
+                .align(Alignment.BottomStart),
+            contentScale = ContentScale.Fit,
+            alpha = bgAlpha
+        )
+        Column(
+            modifier = Modifier
+                .align(Alignment.TopEnd)
+                .padding(20.dp),
+            horizontalAlignment = Alignment.End
+        ) {
+            Text(
+                text = genre,
+                style = typography.smalltitle_m500_s18_h24,
+                color = actualGenreColor
+            )
+            Text(
+                text = role,
+                style = typography.info_r400_s12,
+                color = hexToColor(roleColor)
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun RoleCardPreview() {
+    var selected1 by rememberSaveable { mutableStateOf(true) }
+    var selected2 by rememberSaveable { mutableStateOf(false) }
+
+    ThipTheme {
+        Row(
+            modifier = Modifier.padding(20.dp),
+            horizontalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            RoleCard(
+                genre = "문학",
+                role = "문학가",
+                imageUrl = "https://picsum.photos/200",
+                roleColor = "#A0E931",
+                selected = selected1,
+                onClick = { selected1 = !selected1 }
+            )
+
+            RoleCard(
+                genre = "예술",
+                role = "예술가",
+                imageUrl = "https://picsum.photos/200",
+                roleColor = "#A00000",
+                selected = selected2,
+                onClick = { selected2 = !selected2 }
+            )
+        }
+    }
+}
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
new file mode 100644
index 00000000..88e1a283
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/component/SavedFeedCard.kt
@@ -0,0 +1,218 @@
+package com.texthip.thip.ui.mypage.component
+
+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.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.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.AsyncImage
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.ActionBarButton
+import com.texthip.thip.ui.common.buttons.ActionBookButton
+import com.texthip.thip.ui.common.header.ProfileBar
+import com.texthip.thip.ui.mypage.mock.FeedItem
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun SavedFeedCard(
+    modifier: Modifier = Modifier,
+    feedItem: FeedItem,
+    bottomTextColor: Color = colors.NeonGreen,
+    onBookmarkClick: () -> Unit = {},
+    onLikeClick: () -> Unit = {},
+    onContentClick: () -> Unit = {},
+    onCommentClick: () -> Unit = {},
+    onBookClick: () -> Unit = {},
+    onProfileClick: () -> Unit = {}
+) {
+    val hasImages = feedItem.imageUrls.isNotEmpty()
+    val maxTextLines = if (hasImages) 3 else 8
+    
+    // 실제 텍스트 줄 수를 기준으로 표시할 텍스트 계산
+    val processedText = remember(feedItem.content, hasImages) {
+        val lines = feedItem.content.split("\n")
+        val nonEmptyLines = mutableListOf<Int>() // 실제 텍스트가 있는 줄의 인덱스
+        
+        lines.forEachIndexed { index, line ->
+            if (line.trim().isNotEmpty()) {
+                nonEmptyLines.add(index)
+            }
+        }
+        
+        if (nonEmptyLines.size <= maxTextLines) {
+            // 실제 텍스트 줄이 제한보다 적으면 전체 표시
+            feedItem.content
+        } else {
+            // 실제 텍스트 줄이 제한을 초과하면, maxTextLines 번째 텍스트 줄까지만 표시
+            val lastAllowedLineIndex = nonEmptyLines[maxTextLines - 1]
+            lines.take(lastAllowedLineIndex + 1).joinToString("\n")
+        }
+    }
+    
+    // 잘림 여부는 파생 값으로 계산
+    val isTextTruncated = processedText != feedItem.content
+
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 20.dp)
+    ) {
+        ProfileBar(
+            profileImage = feedItem.userProfileImage ?: "https://example.com/image1.jpg",
+            topText = feedItem.userName,
+            bottomText = feedItem.userRole,
+            bottomTextColor = bottomTextColor,
+            showSubscriberInfo = false,
+            hoursAgo = feedItem.timeAgo,
+            onClick = onProfileClick
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(vertical = 16.dp)
+        ) {
+            ActionBookButton(
+                bookTitle = feedItem.bookTitle,
+                bookAuthor = feedItem.authName,
+                onClick = onBookClick
+            )
+        }
+
+        Column(
+            modifier = Modifier
+                .clickable { onContentClick() }, // 전체 영역 클릭 유지
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Box {
+                Text(
+                    text = processedText,
+                    style = typography.feedcopy_r400_s14_h20,
+                    color = colors.White,
+                    modifier = Modifier.fillMaxWidth(),
+                )
+                
+                // 텍스트가 잘린 경우에만 "...더보기" 표시
+                if (isTextTruncated) {
+                    Image(
+                        painter = painterResource(id = R.drawable.ic_text_more),
+                        contentDescription = null,
+                        modifier = Modifier.align(Alignment.BottomEnd)
+                    )
+                }
+            }
+
+            if (hasImages) {
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = 16.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    feedItem.imageUrls.take(3).forEach { imageUrl ->
+                        AsyncImage(
+                            model = imageUrl,
+                            contentDescription = null,
+                            modifier = Modifier
+                                .padding(end = 10.dp)
+                                .size(100.dp),
+                            contentScale = ContentScale.Crop
+                        )
+                    }
+                }
+            }
+        }
+
+        ActionBarButton(
+            modifier = Modifier.padding(top = 16.dp),
+            isLiked = feedItem.isLiked,
+            likeCount = feedItem.likeCount,
+            commentCount = feedItem.commentCount,
+            isSaveVisible = true,
+            isSaved = feedItem.isSaved,
+            isLockIcon = feedItem.isLocked,
+            onLikeClick = onLikeClick,
+            onCommentClick = onCommentClick,
+            onBookmarkClick = onBookmarkClick
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun SavedFeedCardPrev() {
+    val feed1 = FeedItem(
+        id = 1L,
+        userProfileImage = "https://example.com/profile1.jpg",
+        userName = "user.01",
+        userRole = stringResource(R.string.influencer),
+        bookTitle = "책 제목",
+        authName = "한강",
+        timeAgo = "3시간 전",
+        content = "무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷무한대로입력가능합니닷",
+        likeCount = 10,
+        commentCount = 5,
+        isLiked = false,
+        isSaved = true,
+        imageUrls = emptyList()
+    )
+
+    val feed2 = FeedItem(
+        id = 2L,
+        userProfileImage = "https://example.com/profile2.jpg",
+        userName = "user.01",
+        userRole = stringResource(R.string.influencer),
+        bookTitle = "책 제목",
+        authName = "한강",
+        timeAgo = "3시간 전",
+        content = "한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 " +
+                "한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능한줄만 입력 가능",
+        likeCount = 10,
+        commentCount = 5,
+        isLiked = false,
+        isSaved = true,
+        imageUrls = listOf(
+            "https://example.com/image1.jpg",
+            "https://example.com/image2.jpg",
+            "https://example.com/image3.jpg"
+        )
+    )
+    val scrollState = rememberScrollState()
+
+    ThipTheme {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .verticalScroll(scrollState)
+        ) {
+            SavedFeedCard(
+                feedItem = feed1
+            )
+            SavedFeedCard(
+                feedItem = feed2
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/mock/BookItem.kt b/app/src/main/java/com/texthip/thip/ui/mypage/mock/BookItem.kt
new file mode 100644
index 00000000..75992fd9
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/mock/BookItem.kt
@@ -0,0 +1,11 @@
+package com.texthip.thip.ui.mypage.mock
+
+data class BookItem(
+    val id: Int,
+    val title: String,
+    val author: String,
+    val publisher: String,
+    val imageUrl: String? = null,
+    val isbn: String = "",
+    val isSaved: Boolean
+)
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
new file mode 100644
index 00000000..0b28b534
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/mock/FeedItem.kt
@@ -0,0 +1,20 @@
+package com.texthip.thip.ui.mypage.mock
+
+data class FeedItem(
+    val id: Long,
+    val userProfileImage: String? = null,
+    val userName: String,
+    val userRole: String,
+    val bookTitle: String,
+    val authName: String,
+    val timeAgo: String,
+    val content: String,
+    val likeCount: Int,
+    val commentCount: Int,
+    val isLiked: Boolean,
+    val isSaved: Boolean,
+    val isLocked: Boolean = false,
+    val tags: List<String> = emptyList(),
+    val imageUrls: List<String> = emptyList()
+)
+
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/mock/ReactionItem.kt b/app/src/main/java/com/texthip/thip/ui/mypage/mock/ReactionItem.kt
new file mode 100644
index 00000000..fd93cc35
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/mock/ReactionItem.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.ui.mypage.mock
+
+data class ReactionItem(
+    val title: String,
+    val message: String,
+    val type: String,
+    val timeAgo: String
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/mock/RoleItem.kt b/app/src/main/java/com/texthip/thip/ui/mypage/mock/RoleItem.kt
new file mode 100644
index 00000000..3801187b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/mock/RoleItem.kt
@@ -0,0 +1,8 @@
+package com.texthip.thip.ui.mypage.mock
+
+data class RoleItem(
+    val genre: String,
+    val role: String,
+    val imageUrl: String,
+    val roleColor: String
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageCustomerServiceScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageCustomerServiceScreen.kt
new file mode 100644
index 00000000..e01ada44
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageCustomerServiceScreen.kt
@@ -0,0 +1,71 @@
+package com.texthip.thip.ui.mypage.screen
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+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.topappbar.DefaultTopAppBar
+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 MypageCustomerServiceScreen(
+    modifier: Modifier = Modifier,
+    onNavigateBack: () -> Unit = {}
+) {
+    Column(
+        modifier = modifier
+            .fillMaxSize(),
+        verticalArrangement = Arrangement.Top,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        DefaultTopAppBar(
+            title = stringResource(R.string.customer_service),
+            onLeftClick = onNavigateBack,
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxSize(),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Text(
+                text = stringResource(R.string.customer_center_email),
+                style = typography.smalltitle_sb600_s18_h24,
+                color = colors.White
+            )
+            Spacer(modifier = Modifier.padding(top = 8.dp))
+
+            Text(
+                text = stringResource(R.string.customer_center_description),
+                style = typography.copy_r400_s14,
+                color = colors.White
+            )
+            Text(
+                text = stringResource(R.string.customer_center_description_2),
+                style = typography.copy_r400_s14,
+                color = colors.White
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun MypageCustomerServiceScreenPrev() {
+    ThipTheme {
+        MypageCustomerServiceScreen(
+            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
new file mode 100644
index 00000000..e6929d0e
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageEditScreen.kt
@@ -0,0 +1,213 @@
+package com.texthip.thip.ui.mypage.screen
+
+
+import android.widget.Toast
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.itemsIndexed
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.forms.WarningTextField
+import com.texthip.thip.ui.common.modal.ToastWithDate
+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.mypage.viewmodel.EditProfileUiState
+import com.texthip.thip.ui.mypage.viewmodel.EditProfileViewModel
+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
+
+@Composable
+fun EditProfileScreen(
+    onNavigateBack: () -> Unit,
+    viewModel: EditProfileViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+    val context = LocalContext.current
+
+    LaunchedEffect(uiState.isSaveSuccess) {
+        if (uiState.isSaveSuccess) {
+            delay(2500L)
+            onNavigateBack()
+            viewModel.onSaveComplete()
+        }
+    }
+
+
+    EditProfileContent(
+        uiState = uiState,
+        onNicknameChange = viewModel::onNicknameChange,
+        onCardSelected = viewModel::selectCard,
+        onSaveClick = viewModel::saveProfile,
+        onNavigateBack = onNavigateBack
+    )
+}
+
+
+@Composable
+fun EditProfileContent(
+    uiState: EditProfileUiState,
+    onNicknameChange: (String) -> Unit,
+    onCardSelected: (Int) -> Unit,
+    onSaveClick: () -> Unit,
+    onNavigateBack: () -> Unit
+) {
+    val isChanged =
+        uiState.nickname != uiState.initialNickname || uiState.selectedIndex != uiState.initialSelectedIndex
+    val isRightButtonEnabled = isChanged && uiState.nickname.isNotBlank() && !uiState.isLoading
+
+    Box(
+        Modifier
+            .fillMaxSize()
+    ) {
+        Column(
+            Modifier
+                .fillMaxSize()
+        ) {
+            InputTopAppBar(
+                title = stringResource(R.string.edit_profile),
+                isRightButtonEnabled = isRightButtonEnabled,
+                onLeftClick = onNavigateBack,
+                onRightClick = onSaveClick
+            )
+            Column(
+                modifier = Modifier
+                    .padding(horizontal = 20.dp)
+                    .fillMaxWidth(),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Spacer(modifier = Modifier.height(40.dp))
+                Text(
+                    text = stringResource(R.string.change_nickname),
+                    style = typography.smalltitle_sb600_s18_h24,
+                    color = colors.White,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(bottom = 12.dp)
+                )
+                WarningTextField(
+                    containerColor = colors.DarkGrey02,
+                    value = uiState.nickname,
+                    onValueChange = { newNickname -> onNicknameChange(newNickname.lowercase()) },
+                    hint = stringResource(R.string.nickname_condition),
+                    showWarning = uiState.nicknameWarningMessageResId != null,
+                    showIcon = false,
+                    showLimit = true,
+                    maxLength = 10,
+                    warningMessage = uiState.nicknameWarningMessageResId?.let { stringResource(it) }
+                        ?: "",
+                    preventUppercase = true
+                )
+                Spacer(modifier = Modifier.height(40.dp))
+                Text(
+                    text = stringResource(R.string.edit_role),
+                    style = typography.smalltitle_sb600_s18_h24,
+                    color = colors.White,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(bottom = 8.dp)
+                )
+                Text(
+                    text = stringResource(R.string.role_description),
+                    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,
+                ) {
+                    itemsIndexed(uiState.roleCards) { index, roleItem ->
+                        RoleCard(
+                            genre = roleItem.genre,
+                            role = roleItem.role,
+                            imageUrl = roleItem.imageUrl,
+                            roleColor = roleItem.roleColor,
+                            selected = uiState.selectedIndex == index,
+                            onClick = { onCardSelected(index) }
+                        )
+                    }
+                }
+
+            }
+        }
+        AnimatedVisibility(
+            visible = uiState.isSaveSuccess,
+            enter = slideInVertically(
+                initialOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            exit = slideOutVertically(
+                targetOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .padding(horizontal = 20.dp, vertical = 16.dp)
+                .zIndex(3f)
+        ) {
+            ToastWithDate(
+                message = stringResource(R.string.profile_edit_completely)
+            )
+        }
+    }
+}
+
+
+@Preview
+@Composable
+private fun EditProfileScreenPrev() {
+    val previewRoleCards = listOf(
+        RoleItem("문학", "문학가", "", "#FFFFFF"),
+        RoleItem("과학/IT", "과학자", "", "#FFFFFF")
+    )
+    val previewUiState = EditProfileUiState(
+        isLoading = false,
+        roleCards = previewRoleCards,
+        selectedIndex = 0,
+        nickname = "기존닉네임"
+    )
+    ThipTheme {
+        EditProfileContent(
+            uiState = previewUiState,
+            onNicknameChange = {},
+            onCardSelected = {},
+            onSaveClick = {},
+            onNavigateBack = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageLeavethipCompleteScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageLeavethipCompleteScreen.kt
new file mode 100644
index 00000000..38a013c3
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageLeavethipCompleteScreen.kt
@@ -0,0 +1,103 @@
+package com.texthip.thip.ui.mypage.screen
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+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.size
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+
+@Composable
+fun DeleteAccountCompleteScreen() {
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            isRightIconVisible = false,
+            isTitleVisible = false,
+            onLeftClick = {},
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxSize(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            Text(
+                text = stringResource(R.string.delete_account_complete),
+                style = typography.title_b700_s20_h24,
+                color = colors.White,
+                textAlign = TextAlign.Center,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 12.dp)
+            )
+            Text(
+                text = stringResource(R.string.see_you_again),
+                style = typography.menu_m500_s16_h24,
+                color = colors.White,
+                textAlign = TextAlign.Center,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 12.dp)
+            )
+            Spacer(modifier = Modifier.height(40.dp))
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+                Image(
+                    painter = painterResource(R.drawable.character_humanities),
+                    contentDescription = null,
+                    modifier = Modifier
+                        .size(80.dp)
+                )
+                Image(
+                    painter = painterResource(R.drawable.character_art),
+                    contentDescription = null,
+                    modifier = Modifier
+                        .size(80.dp)
+                )
+                Image(
+                    painter = painterResource(R.drawable.character_science),
+                    contentDescription = null,
+                    modifier = Modifier
+                        .size(80.dp)
+                )
+                Image(
+                    painter = painterResource(R.drawable.character_literature),
+                    contentDescription = null,
+                    modifier = Modifier
+                        .size(80.dp)
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun DeleteAccountCompleteScreenPrev() {
+    DeleteAccountCompleteScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageLeavethipScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageLeavethipScreen.kt
new file mode 100644
index 00000000..e5d621c2
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageLeavethipScreen.kt
@@ -0,0 +1,214 @@
+package com.texthip.thip.ui.mypage.screen
+
+import android.widget.Toast
+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.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.shape.RoundedCornerShape
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+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.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.CheckboxButton
+import com.texthip.thip.ui.common.modal.DialogPopup
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.mypage.viewmodel.DeleteAccountViewModel
+import com.texthip.thip.ui.theme.DarkGrey02
+import com.texthip.thip.ui.theme.Red
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun DeleteAccountScreen(
+    onNavigateBack: () -> Unit,
+    onNavigateToLogin: () -> Unit,
+    viewModel: DeleteAccountViewModel = hiltViewModel()
+) {
+    val context = LocalContext.current
+    val uiState = viewModel.uiState.collectAsStateWithLifecycle().value
+    
+    var isChecked by rememberSaveable { mutableStateOf(false) }
+    val backgroundColor = if (isChecked) colors.Purple else colors.Grey02
+    var isDialogVisible by rememberSaveable { mutableStateOf(false) }
+    
+    // 회원탈퇴 완료 시 로그인 화면으로 이동
+    LaunchedEffect(uiState.isDeleteCompleted) {
+        if (uiState.isDeleteCompleted) {
+            onNavigateToLogin()
+        }
+    }
+    
+    // 에러 메시지 표시
+    LaunchedEffect(uiState.errorMessage) {
+        uiState.errorMessage?.let { message ->
+            Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
+        }
+    }
+
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            title = stringResource(R.string.delete_account),
+            onLeftClick = onNavigateBack,
+        )
+        Spacer(modifier = Modifier.height(40.dp))
+        Column(
+            modifier = Modifier
+                .weight(1f)
+                .padding(horizontal = 20.dp),
+        ) {
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(1f)
+                    .background(DarkGrey02, shape = RoundedCornerShape(12.dp))
+                    .padding(20.dp)
+            ) {
+                Column {
+                    Text(
+                        text = stringResource(R.string.leave_thip_notice_title),
+                        style = typography.menu_m500_s16_h24,
+                        color = colors.White
+                    )
+                    Spacer(modifier = Modifier.height(40.dp))
+                    Text(
+                        text = buildAnnotatedString {
+                            append(stringResource(R.string.leave_thip_notice_1) + " ")
+                            withStyle(style = SpanStyle(color = Red)) {
+                                append(stringResource(R.string.leave_thip_notice_2))
+                            }
+                            append(" ")
+                            append(stringResource(R.string.leave_thip_notice_3))
+                        },
+                        style = typography.copy_r400_s14,
+                        color = colors.White
+                    )
+                    Spacer(modifier = Modifier.height(20.dp))
+                    Text(
+                        text = stringResource(R.string.leave_thip_notice_4),
+                        style = typography.copy_r400_s14,
+                        color = colors.White
+                    )
+                    Spacer(modifier = Modifier.height(20.dp))
+                    Text(
+                        text = stringResource(R.string.leave_thip_notice_5),
+                        style = typography.copy_r400_s14,
+                        color = colors.White
+                    )
+                }
+            }
+            Spacer(modifier = Modifier.height(29.dp))
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Text(
+                    text = stringResource(R.string.leave_thip_agree),
+                    style = typography.copy_r400_s14,
+                    color = colors.White,
+                    modifier = Modifier.weight(1f)
+                )
+                CheckboxButton(
+                    isChecked = isChecked,
+                    onCheckedChange = {
+                        isChecked = it
+
+                    }
+                )
+            }
+        }
+        Spacer(modifier = Modifier.height(55.dp))
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(50.dp)
+                .background(backgroundColor)
+                .clickable(
+                    enabled = isChecked,
+                    onClick = {
+                        isDialogVisible = true
+                    }),
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Icon(
+                painter = painterResource(R.drawable.ic_bye),
+                contentDescription = null,
+                tint = colors.White
+            )
+            Text(
+                text = stringResource(R.string.leave_thip),
+                color = colors.White,
+                style = typography.smalltitle_sb600_s18_h24,
+                modifier = Modifier.padding(horizontal = 8.dp)
+            )
+        }
+        if (isDialogVisible) {
+            Dialog(onDismissRequest = { isDialogVisible = false }) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize(),
+                    contentAlignment = Alignment.Center
+                ) {
+                    DialogPopup(
+                        modifier = Modifier
+                            .fillMaxWidth(),
+                        title = stringResource(R.string.ask_account_deletion),
+                        description = stringResource(R.string.delete_account_description),
+                        onCancel = { isDialogVisible = false },
+                        onConfirm = {
+                            isDialogVisible = false
+                            viewModel.deleteAccount(context)
+                        }
+                    )
+                }
+            }
+        }
+        
+        // 로딩 중일 때 전체 화면에 로딩 인디케이터 표시
+        if (uiState.isLoading) {
+            Box(
+                modifier = Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                CircularProgressIndicator()
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun DeleteAccountScreenPrev() {
+    DeleteAccountScreen(
+        onNavigateBack = {},
+        onNavigateToLogin = {}
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageNotificationEditScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageNotificationEditScreen.kt
new file mode 100644
index 00000000..10a75645
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageNotificationEditScreen.kt
@@ -0,0 +1,133 @@
+package com.texthip.thip.ui.mypage.screen
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.foundation.background
+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.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+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.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.ToggleSwitchButton
+import com.texthip.thip.ui.common.modal.ToastWithDate
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.common.topappbar.InputTopAppBar
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+import kotlinx.coroutines.delay
+
+@Composable
+fun NotificationScreen(
+    onNavigateBack: () -> Unit
+) {
+    var isChecked by rememberSaveable { mutableStateOf(true) }
+    var toastMessage by rememberSaveable { mutableStateOf<String?>(null) }
+
+    LaunchedEffect(toastMessage) {
+        if (toastMessage != null) {
+            delay(3000)
+            toastMessage = null
+        }
+    }
+    Box(modifier = Modifier.fillMaxSize()) {
+        AnimatedVisibility(
+            visible = toastMessage != null,
+            enter = slideInVertically(
+                initialOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            exit = slideOutVertically(
+                targetOffsetY = { -it },
+                animationSpec = tween(durationMillis = 2000)
+            ),
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .padding(horizontal = 15.dp, vertical = 15.dp)
+                .zIndex(1f)
+        ) {
+            toastMessage?.let { message ->
+                ToastWithDate(
+                    message = stringResource(
+                        if (message == "push_on") R.string.push_on else R.string.push_off
+                    ),
+                    date = "2025년 6월 29일 22시 30분",
+                    modifier = Modifier.fillMaxWidth()
+                )
+            }
+        }
+        Column(
+            Modifier
+                .background(colors.Black)
+                .fillMaxSize()
+        ) {
+            DefaultTopAppBar(
+                title = stringResource(R.string.notification_settings),
+                onLeftClick = onNavigateBack,
+            )
+            Spacer(modifier = Modifier.height(40.dp))
+            Column(
+                modifier = Modifier
+                    .padding(horizontal = 20.dp)
+                    .fillMaxSize(),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Text(
+                    text = stringResource(R.string.push_notification),
+                    style = typography.smalltitle_sb600_s18_h24,
+                    color = colors.White,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(bottom = 12.dp)
+                )
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    Text(
+                        text = stringResource(R.string.notification_description),
+                        style = typography.menu_r400_s14_h24,
+                        color = colors.White,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(bottom = 8.dp)
+                            .weight(1f)
+                    )
+                    ToggleSwitchButton(
+                        isChecked = isChecked,
+                        onToggleChange = {
+                            isChecked = it
+                            toastMessage = if (it) "push_on" else "push_off"
+                        }
+                    )
+                }
+
+            }
+
+
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun NotificationScreenPrev() {
+    NotificationScreen(
+        onNavigateBack = {}
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageReactionScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageReactionScreen.kt
new file mode 100644
index 00000000..d41a5d88
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageReactionScreen.kt
@@ -0,0 +1,233 @@
+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.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.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.OptionChipButton
+import com.texthip.thip.ui.common.alarmpage.component.CardAlarm
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.mypage.mock.ReactionItem
+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 ReactionsScreen() {
+    //추후 뷰모델로 수정 예정
+    val reactions = listOf(
+        ReactionItem("@user 1님의 피드 글","어쩌구 저쩌구 콘텐츠 내용입니다.어쩌구 저쩌구 콘텐츠 내용입니다.어쩌구 저쩌구 콘텐츠 내용입니다.","좋아요", "2"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글","7"),
+        ReactionItem("@user 3님의 기록", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글", "17"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "좋아요", "25"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글", "7"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글", "7"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "좋아요", "7"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글", "7"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글", "7"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "좋아요", "7"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글", "7"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "좋아요", "7")
+    )
+    var isLikesSelected by remember { mutableStateOf(false) }
+    var isCommentsSelected by remember { mutableStateOf(false) }
+    val filteredReactions = reactions.filter { item ->
+        when {
+            isLikesSelected && isCommentsSelected -> true
+            isLikesSelected -> item.type == stringResource(R.string.likes)
+            isCommentsSelected -> item.type == stringResource(R.string.comments)
+            else -> true
+        }
+    }
+
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            title = stringResource(R.string.reactions),
+            onLeftClick = {},
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+        ) {
+            Row(modifier = Modifier.padding(start = 20.dp, top = 20.dp, bottom = 20.dp)) {
+                OptionChipButton(
+                    text = stringResource(R.string.likes),
+                    isFilled = true,
+                    onClick = {isLikesSelected = !isLikesSelected}
+                )
+                Spacer(modifier = Modifier.width(12.dp))
+                OptionChipButton(
+                    text = stringResource(R.string.comments),
+                    isFilled = true,
+                    onClick = {isCommentsSelected = !isCommentsSelected}
+                )
+
+            }
+            LazyColumn(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(horizontal = 20.dp),
+                verticalArrangement = Arrangement.spacedBy(20.dp)
+            ) {
+                itemsIndexed (filteredReactions) { index, item ->
+                    val isLastItem = index == filteredReactions.lastIndex
+                    CardAlarm(
+                        title = item.title,
+                        message = item.message,
+                        timeAgo = item.timeAgo,
+                        isRead = true,
+                        badgeText = item.type,
+                        onClick = {},
+                        modifier = if (isLastItem) {
+                            Modifier.padding(bottom = 20.dp)
+                        } else {
+                            Modifier
+                        }
+                    )
+                }
+            }
+        }
+    }
+}*/
+@Composable
+fun ReactionsScreen(
+    reactions : List<ReactionItem>
+) {
+    var isLikesSelected by remember { mutableStateOf(false) }
+    var isCommentsSelected by remember { mutableStateOf(false) }
+
+    val filteredReactions = remember(isLikesSelected, isCommentsSelected, reactions) {
+        val showAll = (isLikesSelected && isCommentsSelected) || (!isLikesSelected && !isCommentsSelected)
+        if (showAll) {
+            reactions
+        } else {
+            reactions.filter { item ->
+                if (isLikesSelected) item.type == "좋아요" else item.type == "댓글"
+            }
+        }
+    }
+
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            title = stringResource(R.string.reactions),
+            onLeftClick = {},
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+        ) {
+            Row(modifier = Modifier.padding(start = 20.dp, top = 20.dp, bottom = 20.dp)) {
+                OptionChipButton(
+                    text = stringResource(R.string.likes),
+                    isFilled = true,
+                    onClick = { isLikesSelected = !isLikesSelected }
+                )
+                Spacer(modifier = Modifier.width(12.dp))
+                OptionChipButton(
+                    text = stringResource(R.string.comments),
+                    isFilled = true,
+                    onClick = { isCommentsSelected = !isCommentsSelected }
+                )
+            }
+            if (filteredReactions.isEmpty()) {
+                Column(
+                    modifier = Modifier.fillMaxSize(),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.Center
+                ) {
+                    Text(
+                        text = stringResource(R.string.no_saved_reaction),
+                        style = typography.smalltitle_sb600_s18_h24,
+                        color = colors.White
+                    )
+                    Text(
+                        text = stringResource(R.string.save_first_reaction),
+                        style = typography.feedcopy_r400_s14_h20,
+                        color = colors.Grey,
+                        modifier = Modifier.padding(top = 8.dp)
+                    )
+                }
+            } else {
+                LazyColumn(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .padding(horizontal = 20.dp),
+                    verticalArrangement = Arrangement.spacedBy(20.dp)
+                ) {
+                    itemsIndexed (filteredReactions) { index, item ->
+                        val isLastItem = index == filteredReactions.lastIndex
+                        CardAlarm(
+                            title = item.title,
+                            message = item.message,
+                            timeAgo = item.timeAgo,
+                            isRead = true,
+                            badgeText = item.type,
+                            onClick = {},
+                            modifier = if (isLastItem) {
+                                Modifier.padding(bottom = 20.dp)
+                            } else {
+                                Modifier
+                            }
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun ReactionsScreenPrev() {
+    val mockReactions = listOf(
+        ReactionItem("@user 1님의 피드 글","어쩌구 저쩌구 콘텐츠 내용입니다.","좋아요", "2"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글","7"),
+        ReactionItem("@user 3님의 기록", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글", "17"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "좋아요", "25"),
+        ReactionItem("@user 1님의 피드 글","어쩌구 저쩌구 콘텐츠 내용입니다.","좋아요", "2"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글","7"),
+        ReactionItem("@user 3님의 기록", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글", "17"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "좋아요", "25"),
+        ReactionItem("@user 1님의 피드 글","어쩌구 저쩌구 콘텐츠 내용입니다.","좋아요", "2"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글","7"),
+        ReactionItem("@user 3님의 기록", "어쩌구 저쩌구 콘텐츠 내용입니다.","댓글", "17"),
+        ReactionItem("@user 1님의 글", "어쩌구 저쩌구 콘텐츠 내용입니다.", "좋아요", "25")
+    )
+    ThipTheme {
+        ReactionsScreen(reactions = mockReactions)
+    }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFF000000)
+@Composable
+private fun ReactionsScreenEmptyPrev() {
+    ThipTheme {
+        ReactionsScreen(reactions = emptyList())
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageSaveScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageSaveScreen.kt
new file mode 100644
index 00000000..ff0eab58
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageSaveScreen.kt
@@ -0,0 +1,256 @@
+package com.texthip.thip.ui.mypage.screen
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+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.shape.RoundedCornerShape
+import androidx.compose.material3.Tab
+import androidx.compose.material3.TabRow
+import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+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.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.mypage.component.BookContent
+import com.texthip.thip.ui.mypage.component.FeedContent
+import com.texthip.thip.ui.mypage.mock.BookItem
+import com.texthip.thip.ui.mypage.mock.FeedItem
+import com.texthip.thip.ui.mypage.viewmodel.SavedBookViewModel
+import com.texthip.thip.ui.mypage.viewmodel.SavedFeedViewModel
+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.theme.White
+
+@Composable
+fun MypageSaveScreen(
+    onNavigateBack: () -> Unit,
+    onBookClick: (isbn: String) -> Unit = {},
+    onFeedClick: (feedId: Long) -> Unit = {},
+    feedViewModel: SavedFeedViewModel = hiltViewModel(),
+    bookViewModel: SavedBookViewModel = hiltViewModel()
+) {
+    val tabs = listOf(stringResource(R.string.feed), stringResource(R.string.book))
+    var selectedTabIndex by rememberSaveable { mutableStateOf(0) }
+    val feedList by feedViewModel.feeds.collectAsState()
+    val bookUiState by bookViewModel.uiState.collectAsState()
+    val bookList = bookUiState.books
+
+    LaunchedEffect(selectedTabIndex) {
+        when (selectedTabIndex) {
+            0 -> feedViewModel.loadSavedFeeds()
+            1 -> bookViewModel.loadSavedBooks(isInitial = true)
+        }
+    }
+
+    MypageSaveContent(
+        selectedTabIndex = selectedTabIndex,
+        onTabSelected = { selectedTabIndex = it },
+        feedList = feedList,
+        bookList = bookList,
+        onNavigateBack = onNavigateBack,
+        onBookClick = onBookClick,
+        onFeedClick = onFeedClick,
+        feedViewModel = feedViewModel,
+        bookViewModel = bookViewModel
+    )
+}
+
+@Composable
+private fun MypageSaveContent(
+    selectedTabIndex: Int,
+    onTabSelected: (Int) -> Unit,
+    feedList: List<FeedItem>,
+    bookList: List<BookItem>,
+    onNavigateBack: () -> Unit,
+    onBookClick: (isbn: String) -> Unit,
+    onFeedClick: (feedId: Long) -> Unit,
+    feedViewModel: SavedFeedViewModel?,
+    bookViewModel: SavedBookViewModel?
+) {
+    val tabs = listOf(stringResource(R.string.feed), stringResource(R.string.book))
+    
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            title = stringResource(R.string.saved),
+            onLeftClick = onNavigateBack,
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+        ) {
+            Box(
+                modifier = Modifier
+                    .width(160.dp)
+                    .padding(start = 20.dp)
+            ) {
+                TabRow(
+                    selectedTabIndex = selectedTabIndex,
+                    containerColor = Color.Transparent,
+                    contentColor = colors.White,
+                    indicator = { tabPositions ->
+                        val tabPosition = tabPositions[selectedTabIndex]
+
+                        Box(
+                            modifier = Modifier
+                                .tabIndicatorOffset(tabPosition)
+                                .width(48.dp)
+                                .height(2.dp)
+                                .align(Alignment.BottomCenter)
+                                .clip(RoundedCornerShape(1.5.dp))
+                                .background(White)
+                        )
+                    },
+                    divider = {}) {
+
+                    tabs.forEachIndexed { index, title ->
+                        val selected = selectedTabIndex == index
+                        Tab(
+                            modifier = Modifier.width(60.dp),
+                            selected = selected,
+                            onClick = { onTabSelected(index) },
+                            selectedContentColor = colors.White,
+                            unselectedContentColor = colors.Grey02,
+                            text = {
+                                Text(
+                                    textAlign = TextAlign.Center,
+                                    text = title,
+                                    style = typography.smalltitle_sb600_s18_h24
+                                )
+                            }
+                        )
+                    }
+                }
+            }
+            Box(
+                modifier = Modifier
+                    .weight(1f)
+                    .fillMaxWidth()
+            ) {
+                when (selectedTabIndex) {
+                    0 -> feedViewModel?.let {
+                        FeedContent(
+                            feedList = feedList,
+                            onFeedClick = onFeedClick,
+                            viewModel = it
+                        )
+                    }
+
+                    1 -> bookViewModel?.let {
+                        BookContent(
+                            bookList = bookList,
+                            onBookClick = onBookClick,
+                            viewModel = it
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@Preview
+@Composable
+private fun MypageSaveContentPreview() {
+    ThipTheme {
+        MypageSaveContent(
+            selectedTabIndex = 0,
+            onTabSelected = {},
+            feedList = listOf(
+                FeedItem(
+                    id = 1L,
+                    userProfileImage = "",
+                    userName = "책벌레",
+                    userRole = "소설 마니아",
+                    bookTitle = "노르웨이의 숲",
+                    authName = "무라카미 하루키",
+                    timeAgo = "3시간 전",
+                    content = "무라카미 하루키의 대표작 중 하나입니다. 청춘의 아픔과 사랑을 섬세하게 그려낸 작품이에요. 특히 와타나베의 내면 묘사가 인상깊었습니다.",
+                    likeCount = 35,
+                    commentCount = 12,
+                    isLiked = true,
+                    isSaved = true,
+                    isLocked = false,
+                    tags = listOf("일본문학", "청춘", "사랑"),
+                    imageUrls = listOf("https://example.com/book1.jpg")
+                ),
+                FeedItem(
+                    id = 2L,
+                    userProfileImage = "",
+                    userName = "역사애호가",
+                    userRole = "한국사 전문가",
+                    bookTitle = "총, 균, 쇠",
+                    authName = "재레드 다이아몬드",
+                    timeAgo = "1일 전",
+                    content = "인류 문명의 발전을 지리학적 관점에서 분석한 놀라운 책입니다. 왜 어떤 대륙이 다른 대륙을 정복했는지에 대한 답을 찾을 수 있어요.",
+                    likeCount = 67,
+                    commentCount = 24,
+                    isLiked = false,
+                    isSaved = true,
+                    isLocked = false,
+                    tags = listOf("역사", "문명", "지리학"),
+                    imageUrls = emptyList()
+                )
+            ),
+            bookList = listOf(
+                BookItem(
+                    id = 1,
+                    title = "1984",
+                    author = "조지 오웰",
+                    publisher = "민음사",
+                    imageUrl = "",
+                    isbn = "9788937460777",
+                    isSaved = true
+                ),
+                BookItem(
+                    id = 2,
+                    title = "사피엔스",
+                    author = "유발 하라리",
+                    publisher = "김영사",
+                    imageUrl = "",
+                    isbn = "9788934972464",
+                    isSaved = true
+                ),
+                BookItem(
+                    id = 3,
+                    title = "코스모스",
+                    author = "칼 세이건",
+                    publisher = "사이언스북스",
+                    imageUrl = "",
+                    isbn = "9788983711892",
+                    isSaved = true
+                )
+            ),
+            onNavigateBack = {},
+            onBookClick = {},
+            onFeedClick = {},
+            feedViewModel = null,
+            bookViewModel = null
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageScreen.kt b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageScreen.kt
new file mode 100644
index 00000000..b60692a3
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/screen/MypageScreen.kt
@@ -0,0 +1,317 @@
+package com.texthip.thip.ui.mypage.screen
+
+import android.content.Context
+import android.content.Intent
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import androidx.core.net.toUri
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.navigation.NavController
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.MenuItemButton
+import com.texthip.thip.ui.common.header.AuthorHeader
+import com.texthip.thip.ui.common.modal.DialogPopup
+import com.texthip.thip.ui.common.topappbar.LeftNameTopAppBar
+import com.texthip.thip.ui.mypage.viewmodel.MyPageUiState
+import com.texthip.thip.ui.mypage.viewmodel.MyPageViewModel
+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.utils.color.hexToColor
+
+private const val URL_CUSTOMER_SERVICE = "https://slashpage.com/thip/dk58wg2e6yy3zmnqevxz"
+private const val URL_NOTICE = "https://slashpage.com/thip/7vgjr4m1nynpy2dwpy86"
+private const val URL_TERMS_OF_USE = "https://slashpage.com/thip/7916x82r8y74n24kpyg3"
+private const val URL_GUIDE = "https://slashpage.com/thip/ywk9j72989p6rmgpqvnd"
+private const val URL_VERSION = "https://slashpage.com/thip/1q3vdn2p9w93pmxy49pr"
+
+@Composable
+fun MyPageScreen(
+    navController: NavController,
+    viewModel: MyPageViewModel = hiltViewModel(),
+    onNavigateToEditProfile: () -> Unit,
+    onNavigateToSavedFeeds: () -> Unit,
+    onCustomerService: () -> Unit,
+    onNavigateToNotificationSettings: () -> Unit,
+    onDeleteAccount: () -> Unit,
+    onNavigateToLogin: () -> Unit
+) {
+    val context = LocalContext.current
+    val uiState by viewModel.uiState.collectAsState()
+    LaunchedEffect(Unit) {
+        viewModel.fetchMyPageInfo()
+    }
+    LaunchedEffect(uiState.isLogoutCompleted) {
+        if (uiState.isLogoutCompleted) {
+            onNavigateToLogin()
+        }
+    }
+    MyPageContent(
+        uiState = uiState,
+        onEditProfileClick = onNavigateToEditProfile,
+        onSavedFeedsClick = onNavigateToSavedFeeds,
+        onNotificationSettingsClick = onNavigateToNotificationSettings,
+        onCustomerServiceClick = onCustomerService,
+        onLogoutClick = { viewModel.onLogoutClick() },
+        onDismissLogoutDialog = { viewModel.onDismissLogoutDialog() },
+        onConfirmLogout = { viewModel.confirmLogout(
+            context = context
+        ) },
+        onDeleteAccount = onDeleteAccount
+    )
+}
+@Composable
+fun MyPageContent(
+    uiState: MyPageUiState,
+    onEditProfileClick: () -> Unit,
+    onSavedFeedsClick: () -> Unit,
+    onNotificationSettingsClick: () -> Unit,
+    onCustomerServiceClick: () -> Unit,
+    onLogoutClick: () -> Unit,
+    onDismissLogoutDialog: () -> Unit,
+    onConfirmLogout: () -> Unit,
+    onDeleteAccount: () -> Unit
+) {
+    val context = LocalContext.current
+    val listState = rememberLazyListState()
+    
+    // 탭 전환 시 스크롤을 맨 위로 초기화
+    LaunchedEffect(Unit) {
+        listState.scrollToItem(0)
+    }
+
+    Box(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        Column(
+            Modifier
+                .background(colors.Black)
+                .fillMaxSize()
+        ) {
+            LeftNameTopAppBar(
+                title = stringResource(R.string.my_page),
+                leftIcon = painterResource(R.drawable.ic_search),
+                rightIcon = painterResource(R.drawable.ic_plus)
+            )
+            LazyColumn(
+                state = listState,
+                modifier = Modifier.weight(1f),
+                verticalArrangement = Arrangement.spacedBy(0.dp)
+            ) {
+                item {
+                    Spacer(modifier = Modifier.height(20.dp))
+                    AuthorHeader(
+                        profileImage = uiState.profileImageUrl,
+                        nickname = uiState.nickname,
+                        badgeText = uiState.aliasName,
+                        badgeTextColor = hexToColor(uiState.aliasColor),
+                        buttonText = stringResource(R.string.edit),
+                        onButtonClick = onEditProfileClick
+                    )
+                    Spacer(modifier = Modifier.height(40.dp))
+                }
+                item {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 20.dp)
+                    ) {
+                        Text(
+                            text = stringResource(R.string.my_activity),
+                            style = typography.smalltitle_sb600_s18_h24,
+                            color = colors.White,
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(bottom = 12.dp)
+                        )
+                        MenuItemButton(
+                            text = stringResource(R.string.saved),
+                            icon = painterResource(R.drawable.ic_save),
+                            contentColor = colors.White,
+                            backgroundColor = colors.DarkGrey02,
+                            hasRightIcon = true,
+                            modifier = Modifier.fillMaxWidth(),
+                            onClick = onSavedFeedsClick
+                        )
+                    }
+                    Spacer(modifier = Modifier.height(40.dp))
+                }
+                item {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 20.dp)
+                    ) {
+                        Text(
+                            text = stringResource(R.string.etc),
+                            style = typography.smalltitle_sb600_s18_h24,
+                            color = colors.White,
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(bottom = 12.dp)
+                        )
+                        MenuItemButton(
+                            text = stringResource(R.string.notification_settings),
+                            icon = painterResource(R.drawable.ic_notice),
+                            contentColor = colors.White,
+                            backgroundColor = colors.DarkGrey02,
+                            hasRightIcon = true,
+                            modifier = Modifier.fillMaxWidth(),
+                            onClick = onNotificationSettingsClick
+                        )
+                        Spacer(modifier = Modifier.height(16.dp))
+                        MenuItemButton(
+                            text = stringResource(R.string.customer_service),
+                            icon = painterResource(R.drawable.ic_center),
+                            contentColor = colors.White,
+                            backgroundColor = colors.DarkGrey02,
+                            hasRightIcon = true,
+                            modifier = Modifier.fillMaxWidth(),
+                            onClick = {
+                                val intent =
+                                    Intent(Intent.ACTION_VIEW, URL_CUSTOMER_SERVICE.toUri())
+                                context.startActivity(intent)
+                            }
+                        )
+                        Spacer(modifier = Modifier.height(16.dp))
+                        MenuItemButton(
+                            text = stringResource(R.string.notice),
+                            icon = painterResource(R.drawable.ic_notice),
+                            contentColor = colors.White,
+                            backgroundColor = colors.DarkGrey02,
+                            hasRightIcon = true,
+                            modifier = Modifier.fillMaxWidth(),
+                            onClick = {
+                                val intent =
+                                    Intent(Intent.ACTION_VIEW, URL_NOTICE.toUri())
+                                context.startActivity(intent)
+                            }
+                        )
+                        Spacer(modifier = Modifier.height(16.dp))
+                        MenuItemButton(
+                            text = stringResource(R.string.terms_of_use),
+                            icon = painterResource(R.drawable.ic_doc),
+                            contentColor = colors.White,
+                            backgroundColor = colors.DarkGrey02,
+                            hasRightIcon = true,
+                            modifier = Modifier.fillMaxWidth(),
+                            onClick = {
+                                val intent = Intent(Intent.ACTION_VIEW, URL_TERMS_OF_USE.toUri())
+                                context.startActivity(intent)
+                            }
+                        )
+                        Spacer(modifier = Modifier.height(16.dp))
+                        MenuItemButton(
+                            text = stringResource(R.string.guide),
+                            icon = painterResource(R.drawable.ic_guide),
+                            contentColor = colors.White,
+                            backgroundColor = colors.DarkGrey02,
+                            hasRightIcon = true,
+                            modifier = Modifier.fillMaxWidth(),
+                            onClick = {
+                                val intent = Intent(Intent.ACTION_VIEW, URL_GUIDE.toUri())
+                                context.startActivity(intent)
+                            }
+                        )
+                        Spacer(modifier = Modifier.height(16.dp))
+                        MenuItemButton(
+                            text = stringResource(R.string.version),
+                            icon = painterResource(R.drawable.ic_version),
+                            contentColor = colors.White,
+                            backgroundColor = colors.DarkGrey02,
+                            hasRightIcon = true,
+                            modifier = Modifier.fillMaxWidth(),
+                            onClick = {
+                                val intent = Intent(Intent.ACTION_VIEW, URL_VERSION.toUri())
+                                context.startActivity(intent)
+                            }
+                        )
+                    }
+                    Spacer(modifier = Modifier.height(184.dp))
+                }
+                item {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(bottom = 40.dp),
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        Text(
+                            text = stringResource(R.string.log_out),
+                            style = typography.feedcopy_r400_s14_h20,
+                            color = colors.Grey01,
+                            modifier = Modifier.clickable { onLogoutClick() }
+                        )
+                        Spacer(modifier = Modifier.height(24.dp))
+                        Text(
+                            text = stringResource(R.string.delete_account),
+                            style = typography.feedcopy_r400_s14_h20,
+                            color = colors.Grey01,
+                            modifier = Modifier.clickable { onDeleteAccount() }
+                        )
+                    }
+                }
+            }
+        }
+        if (uiState.showLogoutDialog) {
+            Dialog(onDismissRequest = { onDismissLogoutDialog() }) {
+                DialogPopup(
+                    modifier = Modifier.fillMaxWidth(),
+                    title = stringResource(R.string.log_out),
+                    description = stringResource(R.string.logout_description),
+                    onCancel = { onDismissLogoutDialog() },
+                    onConfirm = { onConfirmLogout() }
+                )
+            }
+        }
+    }
+}
+
+
+@Preview
+@Composable
+private fun MyPagePrev() {
+    ThipTheme {
+        MyPageContent(
+            uiState = MyPageUiState(
+                isLoading = false,
+                nickname = "ThipUser01",
+                aliasName = "문학가",
+                aliasColor = "#FFFFFF"
+            ),
+            onLogoutClick = {},
+            onEditProfileClick = {},
+            onSavedFeedsClick = {},
+            onNotificationSettingsClick = {},
+            onCustomerServiceClick = {},
+            onDismissLogoutDialog = {},
+            onConfirmLogout = {},
+            onDeleteAccount = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/DeleteAccountViewModel.kt b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/DeleteAccountViewModel.kt
new file mode 100644
index 00000000..ca342618
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/DeleteAccountViewModel.kt
@@ -0,0 +1,70 @@
+package com.texthip.thip.ui.mypage.viewmodel
+
+import android.content.Context
+import android.util.Log
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.google.android.gms.auth.api.signin.GoogleSignIn
+import com.google.android.gms.auth.api.signin.GoogleSignInOptions
+import com.kakao.sdk.user.UserApiClient
+import com.texthip.thip.data.manager.TokenManager
+import com.texthip.thip.data.repository.UserRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class DeleteAccountUiState(
+    val isLoading: Boolean = false,
+    val isDeleteCompleted: Boolean = false,
+    val errorMessage: String? = null
+)
+
+@HiltViewModel
+class DeleteAccountViewModel @Inject constructor(
+    private val userRepository: UserRepository,
+    private val tokenManager: TokenManager
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(DeleteAccountUiState())
+    val uiState = _uiState.asStateFlow()
+
+    fun deleteAccount(context: Context) {
+        viewModelScope.launch {
+            _uiState.update { it.copy(isLoading = true, errorMessage = null) }
+            
+            // 1. 서버에 회원탈퇴 요청
+            userRepository.deleteAccount()
+                .onSuccess {
+                    // 2. 서버 요청 성공 후 토큰 삭제
+                    tokenManager.clearTokens()
+                    
+                    // 3. 카카오 SDK에서 연결 끊기
+                    UserApiClient.instance.unlink { error ->
+                        if (error != null) {
+                            Log.e("DeleteAccountViewModel", "카카오 연결 끊기 실패", error)
+                        } else {
+                            Log.d("DeleteAccountViewModel", "카카오 연결 끊기 성공")
+                        }
+                    }
+                    
+                    // 4. 구글 SDK에서 로그아웃
+                    val gso = GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN).build()
+                    GoogleSignIn.getClient(context, gso).signOut()
+                    
+                    _uiState.update { it.copy(isLoading = false, isDeleteCompleted = true) }
+                }
+                .onFailure { exception ->
+                    Log.e("DeleteAccountViewModel", "회원탈퇴 실패", exception)
+                    _uiState.update { 
+                        it.copy(
+                            isLoading = false, 
+                            errorMessage = exception.message ?: "회원탈퇴에 실패했습니다."
+                        ) 
+                    }
+                }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/MyPageEditViewModel.kt b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/MyPageEditViewModel.kt
new file mode 100644
index 00000000..7cb0777e
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/MyPageEditViewModel.kt
@@ -0,0 +1,145 @@
+package com.texthip.thip.ui.mypage.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.R
+import com.texthip.thip.data.model.base.ThipApiFailureException
+import com.texthip.thip.data.model.users.request.ProfileUpdateRequest
+import com.texthip.thip.data.repository.UserRepository
+import com.texthip.thip.ui.mypage.mock.RoleItem
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.async
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class EditProfileUiState(
+    val isLoading: Boolean = true,
+    val nickname: String = "",
+    val roleCards: List<RoleItem> = emptyList(),
+    val selectedIndex: Int = -1,
+    val initialNickname: String = "",
+    val initialSelectedIndex: Int = -1,
+    val nicknameWarningMessageResId: Int? = null,
+    val errorMessage: String? = null,
+    val isSaveSuccess: Boolean = false
+)
+
+@HiltViewModel
+class EditProfileViewModel @Inject constructor(
+    private val userRepository: UserRepository
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(EditProfileUiState())
+    val uiState = _uiState.asStateFlow()
+
+    init {
+        loadInitialProfile()
+    }
+
+    private fun loadInitialProfile() {
+        viewModelScope.launch {
+            val profileDeferred = async { userRepository.getMyPageInfo() }
+            val aliasDeferred = async { userRepository.getAliasChoices() }
+
+            val profileResult = profileDeferred.await()
+            val aliasResult = aliasDeferred.await()
+
+            if (profileResult.isSuccess && aliasResult.isSuccess) {
+                val profileData = profileResult.getOrNull()
+                val aliasResponse = aliasResult.getOrNull()
+
+                val roleCards = aliasResponse?.aliasChoices?.map {
+                    RoleItem(it.aliasName, it.categoryName, it.imageUrl, it.aliasColor)
+                } ?: emptyList()
+
+                // 서버에서 받아온 현재 닉네임과 역할을 설정
+                val currentNickname = profileData?.nickname ?: ""
+                val currentAliasName = profileData?.aliasName ?: ""
+                val currentSelectedIndex = roleCards.indexOfFirst { it.genre == currentAliasName }
+
+                _uiState.update {
+                    it.copy(
+                        isLoading = false,
+                        nickname = currentNickname,
+                        roleCards = roleCards,
+                        selectedIndex = currentSelectedIndex,
+                        initialNickname = currentNickname,
+                        initialSelectedIndex = currentSelectedIndex
+                    )
+                }
+            } else {
+                // 둘 중 하나라도 실패하면 에러 메시지 표시
+                val error = profileResult.exceptionOrNull() ?: aliasResult.exceptionOrNull()
+                _uiState.update { it.copy(isLoading = false, errorMessage = error?.message) }
+            }
+        }
+    }
+
+    fun onNicknameChange(newNickname: String) {
+        _uiState.update {
+            it.copy(
+                nickname = newNickname,
+                nicknameWarningMessageResId = null
+            )
+        }
+    }
+
+    fun selectCard(index: Int) {
+        _uiState.update { it.copy(selectedIndex = index) }
+    }
+
+    fun saveProfile() {
+        viewModelScope.launch {
+            val currentState = _uiState.value
+
+            val selectedRole = currentState.roleCards.getOrNull(currentState.selectedIndex)
+            if (selectedRole == null) {
+                _uiState.update { it.copy(errorMessage = "역할을 선택해주세요.") }
+                return@launch
+            }
+
+            val nicknameToSend: String? =
+                if (currentState.nickname != currentState.initialNickname) {
+                    currentState.nickname
+                } else {
+                    null
+                }
+
+            val request = ProfileUpdateRequest(
+                nickname = nicknameToSend,
+                aliasName = selectedRole.genre
+            )
+
+            userRepository.updateProfile(request)
+                .onSuccess {
+                    _uiState.update { it.copy(isSaveSuccess = true) }
+                }
+                .onFailure { exception ->
+                    if (exception is ThipApiFailureException) {
+                        when (exception.code) {
+                            70004, 70005, 70006 -> {
+                                val messageResId = when (exception.code) {
+                                    70004 -> R.string.nickname_error_same
+                                    70005 -> R.string.nickname_error_cooldown
+                                    else -> R.string.nickname_error_duplicate
+                                }
+                                _uiState.update { it.copy(nicknameWarningMessageResId = messageResId) }
+                            }
+
+                            else -> {
+                                _uiState.update { it.copy(errorMessage = exception.message) }
+                            }
+                        }
+                    } else {
+                        _uiState.update { it.copy(errorMessage = "네트워크 오류가 발생했습니다.") }
+                    }
+                }
+        }
+    }
+    fun onSaveComplete() {
+        _uiState.update { it.copy(isSaveSuccess = false) }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/MyPageViewModel.kt b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/MyPageViewModel.kt
new file mode 100644
index 00000000..84bcf07a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/MyPageViewModel.kt
@@ -0,0 +1,89 @@
+package com.texthip.thip.ui.mypage.viewmodel
+
+import android.content.Context
+import android.util.Log
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.google.android.gms.auth.api.signin.GoogleSignIn
+import com.google.android.gms.auth.api.signin.GoogleSignInOptions
+import com.kakao.sdk.user.UserApiClient
+import com.texthip.thip.data.manager.TokenManager
+import com.texthip.thip.data.repository.UserRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class MyPageUiState(
+    val isLoading: Boolean = true,
+    val profileImageUrl: String? = null,
+    val nickname: String = "",
+    val aliasName: String = "",
+    val aliasColor: String = "#0XFFFFFF",
+    val errorMessage: String? = null,
+    val showLogoutDialog: Boolean = false,
+    val isLogoutCompleted: Boolean = false
+)
+@HiltViewModel
+class MyPageViewModel @Inject constructor(
+    private val userRepository: UserRepository,
+    private val tokenManager: TokenManager
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(MyPageUiState())
+    val uiState = _uiState.asStateFlow()
+
+
+    fun fetchMyPageInfo() {
+        viewModelScope.launch {
+            _uiState.update { it.copy(isLoading = true) }
+            userRepository.getMyPageInfo()
+                .onSuccess { data ->
+                    data?.let {
+                        _uiState.update {
+                            it.copy(
+                                isLoading = false,
+                                profileImageUrl = data.profileImageUrl,
+                                nickname = data.nickname,
+                                aliasName = data.aliasName,
+                                aliasColor = data.aliasColor
+                            )
+                        }
+                    }
+                }
+                .onFailure { exception ->
+                    _uiState.update { it.copy(isLoading = false, errorMessage = exception.message) }
+                }
+        }
+    }
+
+    fun onLogoutClick() {
+        _uiState.update { it.copy(showLogoutDialog = true) }
+    }
+
+    fun onDismissLogoutDialog() {
+        _uiState.update { it.copy(showLogoutDialog = false) }
+    }
+
+    fun confirmLogout(context: Context) {
+        viewModelScope.launch {
+            tokenManager.clearTokens()
+            // 2. 카카오 SDK에서 로그아웃
+            UserApiClient.instance.logout { error ->
+                if (error != null) {
+                    Log.e("MyPageViewModel", "카카오 로그아웃 실패", error)
+                } else {
+                    Log.d("MyPageViewModel", "카카오 로그아웃 성공")
+                }
+            }
+
+            // 3. 구글 SDK에서 로그아웃
+            val gso = GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN).build()
+            GoogleSignIn.getClient(context, gso).signOut()
+
+            _uiState.update { it.copy(showLogoutDialog = false, isLogoutCompleted = true) }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedBookViewModel.kt b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedBookViewModel.kt
new file mode 100644
index 00000000..1ad985e3
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedBookViewModel.kt
@@ -0,0 +1,110 @@
+package com.texthip.thip.ui.mypage.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.model.book.response.BookUserSaveList
+import com.texthip.thip.data.repository.BookRepository
+import com.texthip.thip.ui.mypage.mock.BookItem
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class SavedBookUiState(
+    val books: List<BookItem> = emptyList(),
+    val isLoading: Boolean = false,
+    val isLoadingMore: Boolean = false,
+    val isLast: Boolean = false,
+    val error: String? = null
+) {
+    val canLoadMore: Boolean get() = !isLoading && !isLoadingMore && !isLast
+}
+
+@HiltViewModel
+class SavedBookViewModel @Inject constructor(
+    private val bookRepository: BookRepository
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(SavedBookUiState())
+    val uiState = _uiState.asStateFlow()
+    
+    private var nextCursor: String? = null
+    private var isLoadingBooks = false
+
+    private fun updateState(update: (SavedBookUiState) -> SavedBookUiState) {
+        _uiState.value = update(_uiState.value)
+    }
+
+    fun loadSavedBooks(isInitial: Boolean = true) {
+        if (isLoadingBooks && !isInitial) return
+        if (_uiState.value.isLast && !isInitial) return
+
+        viewModelScope.launch {
+            try {
+                isLoadingBooks = true
+                
+                if (isInitial) {
+                    updateState { it.copy(isLoading = true, books = emptyList(), isLast = false) }
+                    nextCursor = null
+                } else {
+                    updateState { it.copy(isLoadingMore = true) }
+                }
+
+                val cursor = if (isInitial) null else nextCursor
+
+                bookRepository.getSavedBooks(cursor)
+                    .onSuccess { response ->
+                        if (response != null) {
+                            val currentList = if (isInitial) emptyList() else _uiState.value.books
+                            val newBooks = response.bookList.map { it.toBookItem() }
+                            updateState {
+                                it.copy(
+                                    books = currentList + newBooks,
+                                    error = null,
+                                    isLast = response.isLast
+                                )
+                            }
+                            nextCursor = response.nextCursor
+                        } else {
+                            updateState { it.copy(isLast = true) }
+                        }
+                    }
+                    .onFailure { exception ->
+                        updateState { it.copy(error = exception.message) }
+                        exception.printStackTrace()
+                    }
+            } finally {
+                isLoadingBooks = false
+                updateState { it.copy(isLoading = false, isLoadingMore = false) }
+            }
+        }
+    }
+
+    fun loadMoreBooks() {
+        if (_uiState.value.canLoadMore) {
+            loadSavedBooks(isInitial = false)
+        }
+    }
+
+    fun toggleBookmark(isbn: String) {
+        viewModelScope.launch {
+            bookRepository.saveBook(isbn, type = false)
+                .onSuccess {
+                    loadSavedBooks()
+                }
+        }
+    }
+}
+
+private fun BookUserSaveList.toBookItem(): BookItem {
+    return BookItem(
+        id = this.bookId,
+        title = this.bookTitle,
+        author = this.authorName,
+        publisher = this.publisher,
+        imageUrl = this.bookImageUrl,
+        isSaved = this.isSaved,
+        isbn = this.isbn,
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedFeedViewModel.kt b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedFeedViewModel.kt
new file mode 100644
index 00000000..ae125241
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/mypage/viewmodel/SavedFeedViewModel.kt
@@ -0,0 +1,100 @@
+package com.texthip.thip.ui.mypage.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.model.feed.response.AllFeedItem
+import com.texthip.thip.data.repository.FeedRepository
+import com.texthip.thip.ui.mypage.mock.FeedItem
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class SavedFeedViewModel @Inject constructor(
+    private val feedRepository: FeedRepository
+) : ViewModel() {
+
+    private val _feeds = MutableStateFlow<List<FeedItem>>(emptyList())
+    val feeds = _feeds.asStateFlow()
+
+    init {
+        viewModelScope.launch {
+            feedRepository.feedStateUpdateResult.collect { update ->
+                _feeds.value = _feeds.value.map { feedItem ->
+                    if (feedItem.id == update.feedId) {
+                        feedItem.copy(
+                            isLiked = update.isLiked,
+                            likeCount = update.likeCount,
+                            isSaved = update.isSaved
+                        )
+                    } else {
+                        feedItem
+                    }
+                }
+            }
+        }
+    }
+
+    fun loadSavedFeeds() {
+        viewModelScope.launch {
+            feedRepository.getSavedFeeds()
+                .onSuccess { response ->
+                    _feeds.value = response?.feedList?.map { it.toFeedItem() } ?: emptyList()
+                }
+                .onFailure {
+                    it.printStackTrace()
+                }
+        }
+    }
+
+    fun toggleLike(feedId: Long) {
+        viewModelScope.launch {
+            val feed = _feeds.value.find { it.id == feedId } ?: return@launch
+            feedRepository.changeFeedLike(
+                feedId = feed.id,
+                newLikeStatus = !feed.isLiked,
+                currentLikeCount = feed.likeCount,
+                currentIsSaved = feed.isSaved
+            )
+        }
+    }
+
+    fun toggleBookmark(feedId: Long) {
+        viewModelScope.launch {
+            val feed = _feeds.value.find { it.id == feedId } ?: return@launch
+            feedRepository.changeFeedSave(
+                feedId = feed.id,
+                newSaveStatus = !feed.isSaved,
+                currentIsLiked = feed.isLiked,
+                currentLikeCount = feed.likeCount
+            ).onSuccess {
+                it?.isSaved?.let { it1 ->
+                    if (!it1) {
+                        _feeds.value = _feeds.value.filter { feedItem -> feedItem.id != feedId }
+                    }
+                }
+            }
+        }
+    }
+}
+
+private fun AllFeedItem.toFeedItem(): FeedItem {
+    return FeedItem(
+        id = this.feedId.toLong(),
+        userProfileImage = this.creatorProfileImageUrl,
+        userName = this.creatorNickname,
+        userRole = this.aliasName,
+        bookTitle = this.bookTitle,
+        authName = this.bookAuthor,
+        timeAgo = this.postDate,
+        content = this.contentBody,
+        likeCount = this.likeCount,
+        commentCount = this.commentCount,
+        isLiked = this.isLiked,
+        isSaved = this.isSaved,
+        isLocked = false,
+        imageUrls = this.contentUrls
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/BarItem.kt b/app/src/main/java/com/texthip/thip/ui/navigator/BarItem.kt
deleted file mode 100644
index 4a7f730b..00000000
--- a/app/src/main/java/com/texthip/thip/ui/navigator/BarItem.kt
+++ /dev/null
@@ -1,10 +0,0 @@
-package com.texthip.thip.ui.navigator
-
-import androidx.annotation.DrawableRes
-
-data class BarItem(
-    val title: String,
-    val route: String,
-    @DrawableRes val IconRes: Int,
-    @DrawableRes val SelectedIconRes: Int
-)
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/BottomNavigationBar.kt b/app/src/main/java/com/texthip/thip/ui/navigator/BottomNavigationBar.kt
index 515cef2b..4a6ea0c0 100644
--- a/app/src/main/java/com/texthip/thip/ui/navigator/BottomNavigationBar.kt
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/BottomNavigationBar.kt
@@ -7,6 +7,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
@@ -17,21 +18,36 @@ 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.draw.drawBehind
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.drawscope.Stroke
 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 androidx.navigation.NavHostController
 import androidx.navigation.compose.currentBackStackEntryAsState
+import androidx.navigation.compose.rememberNavController
+import com.texthip.thip.ui.navigator.data.NavBarItems
+import com.texthip.thip.ui.navigator.extensions.isRoute
+import com.texthip.thip.ui.navigator.extensions.navigateToTab
+import com.texthip.thip.ui.navigator.routes.MainTabRoutes
 import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 
 @Composable
-fun BottomNavigationBar(navController: NavController) {
-    val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
+fun BottomNavigationBar(
+    navController: NavHostController,
+    onTabReselected: ((MainTabRoutes) -> Unit)? = null
+) {
+    val currentDestination = navController.currentBackStackEntryAsState().value?.destination
+    val greyColor = colors.Grey02
 
     Box(
         modifier = Modifier
             .fillMaxWidth()
+            .navigationBarsPadding()
             .height(73.dp)
             .clip(
                 RoundedCornerShape(
@@ -41,53 +57,96 @@ fun BottomNavigationBar(navController: NavController) {
                     bottomEnd = 0.dp
                 )
             )
-            .background(colors.Black),
+            .background(colors.Black)
+            .drawBehind {
+                val cornerRadius = 12.dp.toPx()
+                val strokeWidth = 2.dp.toPx()
+
+                val path = Path().apply {
+                    // 좌상단 모서리부터 시작
+                    moveTo(0f, cornerRadius)
+                    arcTo(
+                        rect = androidx.compose.ui.geometry.Rect(
+                            left = 0f,
+                            top = 0f,
+                            right = cornerRadius * 2,
+                            bottom = cornerRadius * 2
+                        ),
+                        startAngleDegrees = 180f,
+                        sweepAngleDegrees = 90f,
+                        forceMoveTo = false
+                    )
+                    lineTo(size.width - cornerRadius, 0f)
+                    arcTo(
+                        rect = androidx.compose.ui.geometry.Rect(
+                            left = size.width - cornerRadius * 2,
+                            top = 0f,
+                            right = size.width,
+                            bottom = cornerRadius * 2
+                        ),
+                        startAngleDegrees = 270f,
+                        sweepAngleDegrees = 90f,
+                        forceMoveTo = false
+                    )
+                }
+
+                drawPath(
+                    path = path,
+                    color = greyColor,
+                    style = Stroke(width = strokeWidth)
+                )
+            },
         contentAlignment = Alignment.Center
     ) {
+
         Row(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(horizontal = 32.dp),
+                .padding(horizontal = 20.dp),
             horizontalArrangement = Arrangement.SpaceBetween,
             verticalAlignment = Alignment.CenterVertically
         ) {
             NavBarItems.BarItems.forEach { item ->
-                val isSelected = currentRoute == item.route
+                val isSelected = currentDestination?.isRoute(item.route) == true
                 NavigationBarItem(
                     icon = {
                         Icon(
-                            painter = painterResource(id = if (isSelected) item.SelectedIconRes else item.IconRes),
-                            contentDescription = item.title,
+                            painter = painterResource(id = if (isSelected) item.selectedIconRes else item.iconRes),
+                            contentDescription = stringResource(item.titleRes),
                         )
                     },
                     label = {
                         Text(
-                            text = item.title,
+                            text = stringResource(item.titleRes),
                             style = typography.navi_m500_s10
                         )
                     },
                     selected = isSelected,
                     onClick = {
-                        if (!isSelected) {
-                            navController.navigate(item.route) {
-                                popUpTo(navController.graph.startDestinationId) {
-                                    saveState = true
-                                }
-                                launchSingleTop = true
-                                restoreState = true
-                            }
+                        if (isSelected) {
+                            onTabReselected?.invoke(item.route)
+                        } else {
+                            navController.navigateToTab(item.route)
                         }
                     },
-
                     colors = NavigationBarItemDefaults.colors(
                         indicatorColor = Color.Transparent,
                         selectedIconColor = colors.Purple,
-                        unselectedIconColor = Color.Unspecified,
+                        unselectedIconColor = colors.Grey02,
                         selectedTextColor = colors.Purple,
-                        unselectedTextColor = Color.Unspecified
+                        unselectedTextColor = colors.Grey02
                     )
                 )
             }
         }
     }
+}
+
+@Preview
+@Composable
+private fun BottomNavigationBarPreview() {
+    val navController = rememberNavController()
+    BottomNavigationBar(
+        navController = navController
+    )
 }
\ No newline at end of file
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 16787c3f..b06889ac 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
@@ -1,20 +1,43 @@
 package com.texthip.thip.ui.navigator
 
-import androidx.navigation.compose.NavHost
-import androidx.navigation.compose.composable
 import androidx.compose.runtime.Composable
 import androidx.navigation.NavHostController
-import com.texthip.thip.ui.bookSearch.screen.BookSearchScreen
-import com.texthip.thip.ui.feed.screen.FeedScreen
-import com.texthip.thip.ui.group.screen.GroupScreen
-import com.texthip.thip.ui.myPage.screen.MyPageScreen
+import androidx.navigation.compose.NavHost
+import com.texthip.thip.ui.navigator.navigations.commonNavigation
+import com.texthip.thip.ui.navigator.navigations.feedNavigation
+import com.texthip.thip.ui.navigator.navigations.groupNavigation
+import com.texthip.thip.ui.navigator.navigations.myPageNavigation
+import com.texthip.thip.ui.navigator.navigations.searchNavigation
+import com.texthip.thip.ui.navigator.routes.MainTabRoutes
 
+// 메인 네비게이션
 @Composable
-fun MainNavHost(navController: NavHostController) {
-    NavHost(navController = navController, startDestination = Routes.Feed.route) {
-        composable(Routes.Feed.route) { FeedScreen(navController) }
-        composable(Routes.Group.route) { GroupScreen(navController) }
-        composable(Routes.BookSearch.route) { BookSearchScreen(navController) }
-        composable(Routes.MyPage.route) { MyPageScreen(navController) }
+fun MainNavHost(
+    navController: NavHostController,
+    onNavigateToLogin: () -> Unit,
+    onFeedTabReselected: Int = 0
+) {
+    NavHost(
+        navController = navController,
+        startDestination = MainTabRoutes.Feed
+    ) {
+        feedNavigation(
+            navController = navController,
+            navigateBack = navController::popBackStack,
+            onFeedTabReselected = onFeedTabReselected
+        )
+        groupNavigation(
+            navController = navController,
+            navigateBack = navController::popBackStack
+        )
+        searchNavigation(navController)
+        myPageNavigation(
+            navController = navController,
+            onNavigateToLogin = onNavigateToLogin
+        )
+        commonNavigation(
+            navController = navController,
+            navigateBack = navController::popBackStack
+        )
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/NavBarItems.kt b/app/src/main/java/com/texthip/thip/ui/navigator/NavBarItems.kt
deleted file mode 100644
index faf8ce59..00000000
--- a/app/src/main/java/com/texthip/thip/ui/navigator/NavBarItems.kt
+++ /dev/null
@@ -1,32 +0,0 @@
-package com.texthip.thip.ui.navigator
-
-import com.texthip.thip.R
-
-object NavBarItems {
-    val BarItems = listOf(
-        BarItem(
-            title = "피드",
-            route = Routes.Feed.route,
-            IconRes = R.drawable.ic_feed,
-            SelectedIconRes = R.drawable.ic_feed_selected
-        ),
-        BarItem(
-            title = "모임",
-            route = Routes.Group.route,
-            IconRes = R.drawable.ic_group,
-            SelectedIconRes = R.drawable.ic_group_selected
-        ),
-        BarItem(
-            title = "검색",
-            route = Routes.BookSearch.route,
-            IconRes = R.drawable.ic_booksearch,
-            SelectedIconRes = R.drawable.ic_booksearch_selected
-        ),
-        BarItem(
-            title = "내 정보",
-            route = Routes.MyPage.route,
-            IconRes = R.drawable.ic_mypage,
-            SelectedIconRes = R.drawable.ic_mypage_selected
-        )
-    )
-}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/Routes.kt b/app/src/main/java/com/texthip/thip/ui/navigator/Routes.kt
deleted file mode 100644
index d27920da..00000000
--- a/app/src/main/java/com/texthip/thip/ui/navigator/Routes.kt
+++ /dev/null
@@ -1,9 +0,0 @@
-package com.texthip.thip.ui.navigator
-
-
-sealed class Routes(val route: String) {
-    object Feed : Routes("Feed")
-    object Group : Routes("Group")
-    object BookSearch : Routes("BookSearch")
-    object MyPage : Routes("MyPage")
-}
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/data/BarItem.kt b/app/src/main/java/com/texthip/thip/ui/navigator/data/BarItem.kt
new file mode 100644
index 00000000..64b38d78
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/data/BarItem.kt
@@ -0,0 +1,12 @@
+package com.texthip.thip.ui.navigator.data
+
+import androidx.annotation.DrawableRes
+import androidx.annotation.StringRes
+import com.texthip.thip.ui.navigator.routes.MainTabRoutes
+
+data class BarItem(
+    @StringRes val titleRes: Int,
+    val route: MainTabRoutes,
+    @DrawableRes val iconRes: Int,
+    @DrawableRes val selectedIconRes: Int
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/data/NavBarItems.kt b/app/src/main/java/com/texthip/thip/ui/navigator/data/NavBarItems.kt
new file mode 100644
index 00000000..004421da
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/data/NavBarItems.kt
@@ -0,0 +1,33 @@
+package com.texthip.thip.ui.navigator.data
+
+import com.texthip.thip.R
+import com.texthip.thip.ui.navigator.routes.MainTabRoutes
+
+object NavBarItems {
+    val BarItems = listOf(
+        BarItem(
+            titleRes = R.string.nav_feed,
+            route = MainTabRoutes.Feed,
+            iconRes = R.drawable.ic_feed,
+            selectedIconRes = R.drawable.ic_feed_selected
+        ),
+        BarItem(
+            titleRes = R.string.nav_group,
+            route = MainTabRoutes.Group,
+            iconRes = R.drawable.ic_group,
+            selectedIconRes = R.drawable.ic_group_selected
+        ),
+        BarItem(
+            titleRes = R.string.nav_search,
+            route = MainTabRoutes.Search,
+            iconRes = R.drawable.ic_booksearch,
+            selectedIconRes = R.drawable.ic_booksearch_selected
+        ),
+        BarItem(
+            titleRes = R.string.nav_mypage,
+            route = MainTabRoutes.MyPage,
+            iconRes = R.drawable.ic_mypage,
+            selectedIconRes = R.drawable.ic_mypage_selected
+        )
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/extensions/AuthNavigationExtensions.kt b/app/src/main/java/com/texthip/thip/ui/navigator/extensions/AuthNavigationExtensions.kt
new file mode 100644
index 00000000..93c51d51
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/extensions/AuthNavigationExtensions.kt
@@ -0,0 +1,40 @@
+package com.texthip.thip.ui.navigator.extensions
+
+import androidx.navigation.NavHostController
+import com.texthip.thip.ui.navigator.routes.CommonRoutes
+
+/**
+ * 스플래시 화면을 지우고 로그인 화면으로 이동
+ */
+fun NavHostController.navigateToLogin() {
+    navigate(CommonRoutes.Login) {
+        popUpTo(CommonRoutes.Splash) { inclusive = true }
+    }
+}
+
+/**
+ * 닉네임 설정(회원가입) 화면으로 이동
+ */
+fun NavHostController.navigateToSignup() {
+    navigate(CommonRoutes.SignupFlow)
+}
+
+/**
+ * 장르 선택(회원가입) 화면으로 이동
+ */
+fun NavHostController.navigateToSignupGenre() {
+    navigate(CommonRoutes.SignupScreenRoutes.Genre)
+}
+
+
+/**
+ * 회원가입 성공 후, 인증 과정을 모두 지우고 메인 화면으로 이동
+ */
+fun NavHostController.navigateToMainAfterSignup() {
+    navigate(CommonRoutes.Main) {
+        // 인증과 관련된 모든 화면을 백스택에서 제거
+        popUpTo(CommonRoutes.Login) {
+            inclusive = true
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/extensions/CommonNavigationExtensions.kt b/app/src/main/java/com/texthip/thip/ui/navigator/extensions/CommonNavigationExtensions.kt
new file mode 100644
index 00000000..e5fa7e4f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/extensions/CommonNavigationExtensions.kt
@@ -0,0 +1,43 @@
+package com.texthip.thip.ui.navigator.extensions
+
+import androidx.navigation.NavDestination
+import androidx.navigation.NavHostController
+import com.texthip.thip.ui.navigator.routes.CommonRoutes
+import com.texthip.thip.ui.navigator.routes.MainTabRoutes
+
+
+// 공통 네비게이션 확장 함수들
+
+
+// Bottom Navigation용 Tab 이동 (메인 탭에만 사용)
+fun NavHostController.navigateToTab(route: MainTabRoutes) {
+    navigate(route) {
+        popUpTo(graph.startDestinationId) {
+            saveState = true
+        }
+        launchSingleTop = true
+        restoreState = true
+    }
+}
+
+// 메인 루트 헬퍼 함수들
+fun NavDestination.isMainTabRoute(): Boolean {
+    return when (route) {
+        MainTabRoutes.Feed::class.qualifiedName,
+        MainTabRoutes.Group::class.qualifiedName,
+        MainTabRoutes.Search::class.qualifiedName,
+        MainTabRoutes.MyPage::class.qualifiedName -> true
+        else -> false
+    }
+}
+
+// 매인 루트인지 확인
+fun NavDestination.isRoute(targetRoute: MainTabRoutes): Boolean {
+    return route == targetRoute::class.qualifiedName
+}
+
+// 공통 화면 네비게이션
+fun NavHostController.navigateToRegisterBook() {
+    navigate(CommonRoutes.RegisterBook)
+}
+
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/extensions/FeedNavigationExtensions.kt b/app/src/main/java/com/texthip/thip/ui/navigator/extensions/FeedNavigationExtensions.kt
new file mode 100644
index 00000000..55cd6683
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/extensions/FeedNavigationExtensions.kt
@@ -0,0 +1,56 @@
+package com.texthip.thip.ui.navigator.extensions
+
+import androidx.navigation.NavHostController
+import com.texthip.thip.ui.navigator.routes.FeedRoutes
+import com.texthip.thip.ui.navigator.routes.MainTabRoutes
+
+// Feed 확장 함수
+fun NavHostController.navigateToFeed() {
+    navigate(MainTabRoutes.Feed)
+}
+
+// 내 띱 목록으로
+fun NavHostController.navigateToMySubscription() {
+    navigate(FeedRoutes.MySubscription)
+}
+
+// 피드 작성으로
+fun NavHostController.navigateToFeedWrite() {
+    navigate(FeedRoutes.Write())
+}
+
+// 피드 댓글으로
+fun NavHostController.navigateToFeedComment(feedId: Long) {
+    navigate(FeedRoutes.Comment(feedId))
+}
+
+fun NavHostController.navigateToFeedWrite(
+    isbn: String? = null,
+    bookTitle: String? = null,
+    bookAuthor: String? = null,
+    bookImageUrl: String? = null,
+    recordContent: String? = null
+) {
+    navigate(FeedRoutes.Write(
+        isbn = isbn,
+        bookTitle = bookTitle,
+        bookAuthor = bookAuthor,
+        bookImageUrl = bookImageUrl,
+        recordContent = recordContent
+    ))
+}
+
+// 유저 프로필(피드)로
+fun NavHostController.navigateToUserProfile(userId: Long) {
+    navigate(FeedRoutes.Others(userId))
+}
+
+//사용자 찾기 화면으로
+fun NavHostController.navigateToSearchPeople() {
+    navigate(FeedRoutes.SearchPeople)
+}
+
+// 띱 목록으로 이동
+fun NavHostController.navigateToOthersSubscription(userId: Long) {
+    navigate(FeedRoutes.OthersSubscription(userId))
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/extensions/GroupNavigationExtensions.kt b/app/src/main/java/com/texthip/thip/ui/navigator/extensions/GroupNavigationExtensions.kt
new file mode 100644
index 00000000..7b764299
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/extensions/GroupNavigationExtensions.kt
@@ -0,0 +1,147 @@
+package com.texthip.thip.ui.navigator.extensions
+
+import androidx.navigation.NavHostController
+import com.texthip.thip.ui.navigator.routes.CommonRoutes
+import com.texthip.thip.ui.navigator.routes.GroupRoutes
+import com.texthip.thip.ui.navigator.routes.MainTabRoutes
+
+
+// Group 관련 네비게이션 확장 함수들
+fun NavHostController.navigateToGroup() {
+    navigate(MainTabRoutes.Group)
+}
+
+// 모임방 만들기 화면으로 이동
+fun NavHostController.navigateToGroupMakeRoom() {
+    navigate(GroupRoutes.MakeRoom)
+}
+
+// 책 정보가 미리 선택된 모임방 만들기 화면으로 이동
+fun NavHostController.navigateToGroupMakeRoomWithBook(
+    isbn: String,
+    title: String,
+    imageUrl: String,
+    author: String
+) {
+    navigate(GroupRoutes.MakeRoomWithBook(
+        isbn = isbn,
+        title = title,
+        imageUrl = imageUrl,
+        author = author
+    ))
+}
+
+// 완료된 모임방 목록으로 이동
+fun NavHostController.navigateToGroupDone() {
+    navigate(GroupRoutes.Done)
+}
+
+// 모임방 검색 화면으로 이동
+fun NavHostController.navigateToGroupSearch() {
+    navigate(GroupRoutes.Search)
+}
+
+// 내 모임방 화면으로 이동
+fun NavHostController.navigateToGroupMy() {
+    navigate(GroupRoutes.My)
+}
+
+// 알람 화면으로 이동
+fun NavHostController.navigateToAlarm() {
+    navigate(CommonRoutes.Alarm)
+}
+
+// 모집중인 모임방 상세 화면으로 이동
+fun NavHostController.navigateToGroupRecruit(roomId: Int) {
+    navigate(GroupRoutes.Recruit(roomId))
+}
+
+// 비밀번호 입력 화면으로 이동
+fun NavHostController.navigateToGroupRoomUnlock(roomId: Int) {
+    navigate(GroupRoutes.RoomUnlock(roomId))
+}
+
+// 추천 모임방으로 이동 (현재 화면을 대체)
+fun NavHostController.navigateToRecommendedGroupRecruit(roomId: Int) {
+    navigate(GroupRoutes.Recruit(roomId)) {
+        popUpTo(currentDestination?.route ?: return@navigate) {
+            inclusive = true
+        }
+    }
+}
+
+// 진행중인 모임방 화면으로 이동
+fun NavHostController.navigateToGroupRoom(roomId: Int) {
+    navigate(GroupRoutes.Room(roomId))
+}
+
+// 독서메이트 화면으로 이동
+fun NavHostController.navigateToGroupRoomMates(roomId: Int) {
+    navigate(GroupRoutes.RoomMates(roomId))
+}
+
+// 오늘의 한마디 회면으로 이동
+fun NavHostController.navigateToGroupRoomChat(roomId: Int) {
+    navigate(GroupRoutes.RoomChat(roomId))
+}
+
+// 기록장 화면으로 이동
+fun NavHostController.navigateToGroupNote(
+    roomId: Int,
+    page: Int? = null,
+    isOverview: Boolean? = null
+) {
+    navigate(GroupRoutes.Note(roomId = roomId, page = page, isOverview = isOverview))
+}
+
+// 기록 생성 화면으로 이동
+fun NavHostController.navigateToGroupNoteCreate(
+    roomId: Int,
+    recentBookPage: Int,
+    totalBookPage: Int,
+    isOverviewPossible: Boolean,
+    postId: Int? = null,
+    page: Int? = null,
+    content: String? = null,
+    isOverview: Boolean? = null
+) {
+    navigate(
+        GroupRoutes.NoteCreate(
+            roomId = roomId,
+            recentBookPage = recentBookPage,
+            totalBookPage = totalBookPage,
+            isOverviewPossible = isOverviewPossible,
+            postId = postId,
+            page = page,
+            content = content,
+            isOverview = isOverview
+        )
+    )
+}
+
+// 투표 생성 화면으로 이동
+fun NavHostController.navigateToGroupVoteCreate(
+    roomId: Int,
+    recentPage: Int,
+    totalPage: Int,
+    isOverviewPossible: Boolean,
+    postId: Int? = null,
+    page: Int? = null,
+    isOverview: Boolean? = null,
+    title: String? = null,
+    options: List<String>? = null
+) {
+    navigate(
+        GroupRoutes.VoteCreate(
+            roomId = roomId,
+            recentPage = recentPage,
+            totalPage = totalPage,
+            isOverviewPossible = isOverviewPossible,
+            postId = postId,
+            page = page,
+            isOverview = isOverview,
+            title = title,
+            options = options
+        )
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/extensions/MyPageNavigationExtensions.kt b/app/src/main/java/com/texthip/thip/ui/navigator/extensions/MyPageNavigationExtensions.kt
new file mode 100644
index 00000000..e02c3928
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/extensions/MyPageNavigationExtensions.kt
@@ -0,0 +1,31 @@
+package com.texthip.thip.ui.navigator.extensions
+
+import androidx.navigation.NavHostController
+import com.texthip.thip.ui.navigator.routes.MainTabRoutes
+import com.texthip.thip.ui.navigator.routes.MyPageRoutes
+
+
+// MyPage 관련 네비게이션 확장 함수들
+
+fun NavHostController.navigateToMyPage() {
+    navigate(MainTabRoutes.MyPage)
+}
+fun NavHostController.navigateToEditProfile() {
+    navigate(MyPageRoutes.Edit)
+}
+
+fun NavHostController.navigateToSavedFeeds() {
+    navigate(MyPageRoutes.Save)
+}
+
+fun NavHostController.navigateToNotificationSettings() {
+    navigate(MyPageRoutes.NotificationEdit)
+}
+
+fun NavHostController.navigateToLeaveThipScreen() {
+    navigate(MyPageRoutes.LeaveThip)
+}
+
+fun NavHostController.navigateToCustomerService() {
+    navigate(MyPageRoutes.CustomerService)
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/extensions/SearchNavigationExtensions.kt b/app/src/main/java/com/texthip/thip/ui/navigator/extensions/SearchNavigationExtensions.kt
new file mode 100644
index 00000000..1770dbf8
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/extensions/SearchNavigationExtensions.kt
@@ -0,0 +1,19 @@
+package com.texthip.thip.ui.navigator.extensions
+
+import androidx.navigation.NavHostController
+import com.texthip.thip.ui.navigator.routes.MainTabRoutes
+import com.texthip.thip.ui.navigator.routes.SearchRoutes
+
+
+// Search 관련 네비게이션 확장 함수들
+fun NavHostController.navigateToSearch() {
+    navigate(MainTabRoutes.Search)
+}
+
+fun NavHostController.navigateToBookDetail(isbn: String) {
+    navigate(SearchRoutes.BookDetail(isbn = isbn))
+}
+
+fun NavHostController.navigateToBookGroup(isbn: String) {
+    navigate(SearchRoutes.BookGroup(isbn = isbn))
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/navigations/AuthNavigation.kt b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/AuthNavigation.kt
new file mode 100644
index 00000000..4cd4f12d
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/AuthNavigation.kt
@@ -0,0 +1,101 @@
+package com.texthip.thip.ui.navigator.navigations
+
+import com.texthip.thip.ui.signin.screen.SplashScreen
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.composable
+import androidx.navigation.navigation
+import com.texthip.thip.ui.navigator.extensions.navigateToMainAfterSignup
+import com.texthip.thip.ui.navigator.routes.CommonRoutes
+import com.texthip.thip.ui.signin.mock.SignupUserInfo
+import com.texthip.thip.ui.signin.screen.LoginScreen
+import com.texthip.thip.ui.signin.screen.SignupDoneScreen
+import com.texthip.thip.ui.signin.screen.SignupGenreScreen
+import com.texthip.thip.ui.signin.screen.SignupNicknameScreen
+import com.texthip.thip.ui.signin.screen.TutorialScreen
+import com.texthip.thip.ui.signin.viewmodel.SignupViewModel
+
+fun NavGraphBuilder.authNavigation(
+    navController: NavHostController,
+    onNavigateToLogin: () -> Unit,
+    onNavigateToHome: () -> Unit,
+    onNavigateToSignup: () -> Unit,
+    onNavigateToMainAfterSignup: () -> Unit
+) {
+    composable<CommonRoutes.Splash> {
+        SplashScreen(
+            onNavigateToLogin = onNavigateToLogin,
+            onNavigateToHome = onNavigateToHome
+        )
+    }
+    composable<CommonRoutes.Login> {
+        LoginScreen(
+            onNavigateToSignup = onNavigateToSignup,
+            onLoginSuccess = onNavigateToMainAfterSignup
+        )
+    }
+    navigation<CommonRoutes.SignupFlow>(
+        startDestination = CommonRoutes.SignupScreenRoutes.Nickname
+    ) {
+        composable<CommonRoutes.SignupScreenRoutes.Nickname> { backStackEntry ->
+            val parentEntry = remember(backStackEntry) {
+                navController.getBackStackEntry<CommonRoutes.SignupFlow>()
+            }
+            val signupViewModel = hiltViewModel<SignupViewModel>(parentEntry)
+
+            SignupNicknameScreen(
+                viewModel = signupViewModel,
+                onNavigateToGenre = {
+                    navController.navigate(CommonRoutes.SignupScreenRoutes.Genre)
+                }
+            )
+        }
+        composable<CommonRoutes.SignupScreenRoutes.Genre> { backStackEntry ->
+            val parentEntry = remember(backStackEntry) {
+                navController.getBackStackEntry<CommonRoutes.SignupFlow>()
+            }
+            val signupViewModel = hiltViewModel<SignupViewModel>(parentEntry)
+
+            SignupGenreScreen(
+                viewModel = signupViewModel,
+                onSignupSuccess = {
+                    navController.navigate(CommonRoutes.SignupScreenRoutes.Tutorial)
+                }
+            )
+        }
+        composable<CommonRoutes.SignupScreenRoutes.Tutorial> {
+            TutorialScreen(
+                onFinish = {
+                    navController.navigate(CommonRoutes.SignupScreenRoutes.Done) {
+                        popUpTo<CommonRoutes.SignupScreenRoutes.Tutorial> { inclusive = true }
+                    }                }
+            )
+        }
+        composable<CommonRoutes.SignupScreenRoutes.Done> { backStackEntry ->
+            val parentEntry = remember(backStackEntry) {
+                navController.getBackStackEntry<CommonRoutes.SignupFlow>()
+            }
+            val signupViewModel = hiltViewModel<SignupViewModel>(parentEntry)
+            val uiState by signupViewModel.uiState.collectAsStateWithLifecycle()
+
+            val selectedRole = uiState.roleCards.getOrNull(uiState.selectedIndex)
+
+            val userInfo = SignupUserInfo(
+                nickname = uiState.nickname,
+                profileImage = selectedRole?.imageUrl,
+                role = selectedRole?.role ?: ""
+            )
+
+            SignupDoneScreen(
+                userInfo = userInfo,
+                onNavigateToMain = {
+                    navController.navigateToMainAfterSignup()
+                }
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/navigations/CommonNavigation.kt b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/CommonNavigation.kt
new file mode 100644
index 00000000..734373c7
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/CommonNavigation.kt
@@ -0,0 +1,37 @@
+package com.texthip.thip.ui.navigator.navigations
+
+import androidx.lifecycle.viewmodel.compose.viewModel
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import com.texthip.thip.ui.common.alarmpage.screen.AlarmScreen
+import com.texthip.thip.ui.common.alarmpage.viewmodel.AlarmViewModel
+import com.texthip.thip.ui.common.screen.RegisterBookScreen
+import com.texthip.thip.ui.navigator.routes.CommonRoutes
+
+// Common 관련 네비게이션
+fun NavGraphBuilder.commonNavigation(
+    navController: NavHostController,
+    navigateBack: () -> Unit
+) {
+    // Alarm 화면
+    composable<CommonRoutes.Alarm> {
+        val alarmViewModel: AlarmViewModel = viewModel()
+        val alarmItems by alarmViewModel.alarmItems.collectAsState()
+        
+        AlarmScreen(
+            alarmItems = alarmItems,
+            onCardClick = { alarmViewModel.onCardClick(it) },
+            onNavigateBack = navigateBack
+        )
+    }
+    
+    // 책 요청 화면
+    composable<CommonRoutes.RegisterBook> {
+        RegisterBookScreen(
+            onLeftClick = navigateBack
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/navigations/FeedNavigation.kt b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/FeedNavigation.kt
new file mode 100644
index 00000000..c5a2964f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/FeedNavigation.kt
@@ -0,0 +1,251 @@
+package com.texthip.thip.ui.navigator.navigations
+
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.composable
+import androidx.navigation.toRoute
+import com.texthip.thip.ui.feed.screen.FeedCommentScreen
+import com.texthip.thip.ui.feed.screen.FeedMyScreen
+import com.texthip.thip.ui.feed.screen.FeedOthersScreen
+import com.texthip.thip.ui.feed.screen.FeedScreen
+import com.texthip.thip.ui.feed.screen.FeedWriteScreen
+import com.texthip.thip.ui.feed.screen.MySubscriptionScreen
+import com.texthip.thip.ui.feed.screen.OthersSubscriptionListScreen
+import com.texthip.thip.ui.feed.screen.SearchPeopleScreen
+import com.texthip.thip.ui.feed.viewmodel.FeedViewModel
+import com.texthip.thip.ui.feed.viewmodel.FeedWriteViewModel
+import com.texthip.thip.ui.navigator.extensions.navigateToAlarm
+import com.texthip.thip.ui.navigator.extensions.navigateToBookDetail
+import com.texthip.thip.ui.navigator.extensions.navigateToFeedComment
+import com.texthip.thip.ui.navigator.extensions.navigateToFeedWrite
+import com.texthip.thip.ui.navigator.extensions.navigateToMySubscription
+import com.texthip.thip.ui.navigator.extensions.navigateToOthersSubscription
+import com.texthip.thip.ui.navigator.extensions.navigateToSearchPeople
+import com.texthip.thip.ui.navigator.extensions.navigateToUserProfile
+import com.texthip.thip.ui.navigator.routes.FeedRoutes
+import com.texthip.thip.ui.navigator.routes.MainTabRoutes
+
+// Feed
+fun NavGraphBuilder.feedNavigation(
+    navController: NavHostController, 
+    navigateBack: () -> Unit,
+    onFeedTabReselected: Int = 0
+) {
+    composable<MainTabRoutes.Feed> { backStackEntry ->
+        val feedViewModel: FeedViewModel = hiltViewModel(backStackEntry)
+        val uiState by feedViewModel.uiState.collectAsState()
+        val myUserId = uiState.myFeedInfo?.creatorId
+
+        val onNavigateToUserProfile: (Long) -> Unit = { clickedUserId ->
+            if (myUserId != null && myUserId == clickedUserId) {
+                // 내 프로필일 경우 FeedMyScreen으로 이동
+                navController.navigate(FeedRoutes.My)
+            } else {
+                // 다른 사람 프로필일 경우 FeedOthersScreen으로 이동
+                navController.navigate(FeedRoutes.Others(clickedUserId))
+            }
+        }
+
+        val resultFeedId = backStackEntry.savedStateHandle.get<Long>("feedId")
+        val refreshFeed = backStackEntry.savedStateHandle.get<Boolean>("refreshFeed")
+
+        FeedScreen(
+            feedViewModel = feedViewModel,
+            navController = navController,
+            resultFeedId = resultFeedId,
+            refreshFeed = refreshFeed,
+            onFeedTabReselected = onFeedTabReselected,
+            onResultConsumed = {
+                backStackEntry.savedStateHandle.remove<Long>("feedId")
+            },
+            onRefreshConsumed = {
+                backStackEntry.savedStateHandle.remove<Boolean>("refreshFeed")
+            },
+            onNavigateToMySubscription = {
+                navController.navigateToMySubscription()
+            },
+            onNavigateToFeedWrite = {
+                navController.navigateToFeedWrite()
+            },
+            onNavigateToFeedComment = { feedId ->
+                navController.navigateToFeedComment(feedId)
+            },
+            onNavigateToBookDetail = { isbn ->
+                navController.navigateToBookDetail(isbn)
+            },
+            onNavigateToUserProfile = onNavigateToUserProfile,
+            onNavigateToSearchPeople = {
+                navController.navigateToSearchPeople()
+            },
+            onNavigateToNotification = {
+                navController.navigateToAlarm()
+            },
+            onNavigateToOthersSubscription = { userId ->
+                navController.navigateToOthersSubscription(userId)
+            }
+        )
+    }
+    composable<FeedRoutes.MySubscription> {
+        val feedViewModel: FeedViewModel = hiltViewModel(navController.getBackStackEntry(MainTabRoutes.Feed))
+        val uiState by feedViewModel.uiState.collectAsState()
+        val myUserId = uiState.myFeedInfo?.creatorId
+
+        MySubscriptionScreen(
+            onNavigateBack = {
+                navigateBack()
+            },
+            onNavigateToUserProfile = { userId ->
+                if (myUserId != null && myUserId == userId) {
+                    navController.navigate(FeedRoutes.My)
+                } else {
+                    navController.navigate(FeedRoutes.Others(userId))
+                }
+            }
+        )
+    }
+    composable<FeedRoutes.Write> { backStackEntry ->
+        val route = backStackEntry.toRoute<FeedRoutes.Write>()
+        val viewModel: FeedWriteViewModel = hiltViewModel()
+
+        LaunchedEffect(route) {
+            if (
+                route.feedId != null &&
+                route.editContentBody != null &&
+                route.isbn != null &&
+                route.bookTitle != null &&
+                route.bookAuthor != null
+            ) {
+                viewModel.setEditData(
+                    feedId = route.feedId.toLong(),
+                    isbn = route.isbn,
+                    bookTitle = route.bookTitle,
+                    bookAuthor = route.bookAuthor,
+                    bookImageUrl = route.bookImageUrl ?: "",
+                    contentBody = route.editContentBody,
+                    isPublic = route.editIsPublic ?: true,
+                    tagList = route.editTagList ?: emptyList()
+                )
+            } else if (route.feedId != null) {
+                // 수정 모드: 기존 방식 (API 호출)
+                viewModel.loadFeedForEdit(route.feedId.toLong())
+            } else if (route.isbn != null &&
+                route.bookTitle != null &&
+                route.bookAuthor != null &&
+                route.bookImageUrl != null &&
+                route.recordContent != null
+            ) {
+                // 새 글 작성 모드: 기록장에서 온 데이터 설정
+                viewModel.setPinnedRecord(
+                    isbn = route.isbn,
+                    bookTitle = route.bookTitle,
+                    bookAuthor = route.bookAuthor,
+                    bookImageUrl = route.bookImageUrl,
+                    recordContent = route.recordContent
+                )
+            } else if (route.isbn != null &&
+                route.bookTitle != null &&
+                route.bookAuthor != null
+            ) {
+                // 새 글 작성 모드: 책 정보만 있는 경우 (책 상세 페이지에서 온 경우)
+                viewModel.setPreselectedBookForFeed(
+                    isbn = route.isbn,
+                    bookTitle = route.bookTitle,
+                    bookAuthor = route.bookAuthor,
+                    bookImageUrl = route.bookImageUrl ?: ""
+                )
+            }
+        }
+
+        FeedWriteScreen(
+            viewModel = viewModel,
+            onNavigateBack = { navigateBack() },
+            onFeedCreated = { feedId ->
+                // 피드 생성 성공 시 결과를 저장하고 피드 목록으로 돌아가기
+                navController.getBackStackEntry(MainTabRoutes.Feed)
+                    .savedStateHandle["feedId"] = feedId
+                navController.getBackStackEntry(MainTabRoutes.Feed)
+                    .savedStateHandle["refreshFeed"] = true
+                navController.popBackStack(MainTabRoutes.Feed, inclusive = false)
+            }
+        )
+    }
+    composable<FeedRoutes.My> {
+        val feedViewModel: FeedViewModel = hiltViewModel(navController.getBackStackEntry(MainTabRoutes.Feed))
+        FeedMyScreen(
+            viewModel = feedViewModel,
+            onNavigateBack = navigateBack,
+            onNavigateToSubscriptionList = { userId ->
+                navController.navigateToOthersSubscription(userId)
+            },
+            onNavigateToFeedComment = { feedId ->
+                navController.navigateToFeedComment(feedId)
+            }
+        )
+    }
+    composable<FeedRoutes.Others> { backStackEntry ->
+        // 다른 유저의 피드 화면
+        FeedOthersScreen(
+            onNavigateBack = {
+                navigateBack()
+            },
+            onNavigateToSubscriptionList = { userId ->
+                navController.navigateToOthersSubscription(userId)
+            },
+            onNavigateToFeedComment = { feedId ->
+                navController.navigateToFeedComment(feedId)
+            }
+        )
+    }
+    composable<FeedRoutes.Comment> { backStackEntry ->
+        val route = backStackEntry.toRoute<FeedRoutes.Comment>()
+        val feedViewModel: FeedViewModel = hiltViewModel(navController.getBackStackEntry(MainTabRoutes.Feed))
+        val uiState by feedViewModel.uiState.collectAsState()
+        val myUserId = uiState.myFeedInfo?.creatorId
+
+        FeedCommentScreen(
+            feedId = route.feedId,
+            navController = navController,
+            onNavigateBack = {
+                navController.popBackStack()
+            },
+            onNavigateToFeedEdit = { feedId ->
+                navController.navigate(FeedRoutes.Write(feedId = feedId))
+            },
+            onNavigateToUserProfile = { userId ->
+                if (myUserId != null && myUserId == userId) {
+                    navController.navigate(FeedRoutes.My)
+                } else {
+                    navController.navigate(FeedRoutes.Others(userId))
+                }
+            },
+            onNavigateToBookDetail = { isbn ->
+                navController.navigateToBookDetail(isbn)
+            }
+        )
+    }
+
+    composable<FeedRoutes.OthersSubscription> {
+        OthersSubscriptionListScreen(
+            onNavigateBack = navigateBack,
+            onProfileClick = { userId, isMyself ->
+                if (isMyself) {
+                    navController.navigate(FeedRoutes.My)
+                } else {
+                    navController.navigate(FeedRoutes.Others(userId))
+                }
+            }
+        )
+    }
+    composable<FeedRoutes.SearchPeople> {
+        SearchPeopleScreen(
+            onNavigateBack = navigateBack,
+            onUserClick = { userId ->
+                navController.navigateToUserProfile(userId)
+            }
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/navigations/GroupNavigation.kt b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/GroupNavigation.kt
new file mode 100644
index 00000000..70e30efb
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/GroupNavigation.kt
@@ -0,0 +1,460 @@
+package com.texthip.thip.ui.navigator.navigations
+
+import android.annotation.SuppressLint
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.composable
+import androidx.navigation.toRoute
+import com.texthip.thip.ui.feed.viewmodel.FeedViewModel
+import com.texthip.thip.ui.group.done.screen.GroupDoneScreen
+import com.texthip.thip.ui.group.makeroom.screen.GroupMakeRoomScreen
+import com.texthip.thip.ui.group.makeroom.viewmodel.GroupMakeRoomViewModel
+import com.texthip.thip.ui.group.myroom.mock.RoomType
+import com.texthip.thip.ui.group.myroom.screen.GroupMyScreen
+import com.texthip.thip.ui.group.myroom.viewmodel.GroupMyViewModel
+import com.texthip.thip.ui.group.note.screen.GroupNoteCreateScreen
+import com.texthip.thip.ui.group.note.screen.GroupNoteScreen
+import com.texthip.thip.ui.group.note.screen.GroupVoteCreateScreen
+import com.texthip.thip.ui.group.note.viewmodel.GroupNoteViewModel
+import com.texthip.thip.ui.group.room.screen.GroupRoomChatScreen
+import com.texthip.thip.ui.group.room.screen.GroupRoomMatesScreen
+import com.texthip.thip.ui.group.room.screen.GroupRoomRecruitScreen
+import com.texthip.thip.ui.group.room.screen.GroupRoomScreen
+import com.texthip.thip.ui.group.room.screen.GroupRoomUnlockScreen
+import com.texthip.thip.ui.group.room.viewmodel.GroupRoomRecruitViewModel
+import com.texthip.thip.ui.group.screen.GroupScreen
+import com.texthip.thip.ui.group.search.screen.GroupSearchScreen
+import com.texthip.thip.ui.group.viewmodel.GroupViewModel
+import com.texthip.thip.ui.navigator.extensions.navigateToAlarm
+import com.texthip.thip.ui.navigator.extensions.navigateToBookDetail
+import com.texthip.thip.ui.navigator.extensions.navigateToFeedWrite
+import com.texthip.thip.ui.navigator.extensions.navigateToGroupDone
+import com.texthip.thip.ui.navigator.extensions.navigateToGroupMakeRoom
+import com.texthip.thip.ui.navigator.extensions.navigateToGroupMy
+import com.texthip.thip.ui.navigator.extensions.navigateToGroupNote
+import com.texthip.thip.ui.navigator.extensions.navigateToGroupNoteCreate
+import com.texthip.thip.ui.navigator.extensions.navigateToGroupRecruit
+import com.texthip.thip.ui.navigator.extensions.navigateToGroupRoom
+import com.texthip.thip.ui.navigator.extensions.navigateToGroupRoomChat
+import com.texthip.thip.ui.navigator.extensions.navigateToGroupRoomMates
+import com.texthip.thip.ui.navigator.extensions.navigateToGroupRoomUnlock
+import com.texthip.thip.ui.navigator.extensions.navigateToGroupSearch
+import com.texthip.thip.ui.navigator.extensions.navigateToGroupVoteCreate
+import com.texthip.thip.ui.navigator.extensions.navigateToRecommendedGroupRecruit
+import com.texthip.thip.ui.navigator.routes.FeedRoutes
+import com.texthip.thip.ui.navigator.routes.GroupRoutes
+import com.texthip.thip.ui.navigator.routes.MainTabRoutes
+
+private const val PARTICIPATION_APPROVED_KEY = "participation_approved_key"
+
+@SuppressLint("UnrememberedGetBackStackEntry")
+fun NavGraphBuilder.groupNavigation(
+    navController: NavHostController,
+    navigateBack: () -> Unit
+) {
+    // 메인 Group 화면
+    composable<MainTabRoutes.Group> { backStackEntry ->
+        val groupViewModel: GroupViewModel = hiltViewModel()
+
+        // 네비게이션 파라미터로 전달된 토스트 메시지가 있는지 확인
+        LaunchedEffect(backStackEntry) {
+            val toastMessage = backStackEntry.savedStateHandle.get<String>("toast_message")
+
+            toastMessage?.let { message ->
+                backStackEntry.savedStateHandle.remove<String>("toast_message")
+                groupViewModel.showToastMessage(message)
+            }
+        }
+
+        GroupScreen(
+            viewModel = groupViewModel,
+            onNavigateToMakeRoom = {
+                navController.navigateToGroupMakeRoom()
+            },
+            onNavigateToGroupDone = {
+                navController.navigateToGroupDone()
+            },
+            onNavigateToAlarm = {
+                navController.navigateToAlarm()
+            },
+            onNavigateToGroupSearch = {
+                navController.navigateToGroupSearch()
+            },
+            onNavigateToGroupMy = {
+                navController.navigateToGroupMy()
+            },
+            onNavigateToGroupRecruit = { roomId ->
+                navController.navigateToGroupRecruit(roomId)
+            },
+            onNavigateToGroupRoom = { roomId ->
+                navController.navigateToGroupRoom(roomId)
+            }
+        )
+    }
+
+    // Group MakeRoom 화면
+    composable<GroupRoutes.MakeRoom> {
+        val viewModel: GroupMakeRoomViewModel = hiltViewModel()
+        GroupMakeRoomScreen(
+            viewModel = viewModel,
+            onNavigateBack = {
+                navigateBack()
+            },
+            onGroupCreated = { roomId ->
+                navController.navigate(GroupRoutes.Recruit(roomId)) {
+                    popUpTo<GroupRoutes.MakeRoom> { inclusive = true }
+                }
+            }
+        )
+    }
+
+    // Group MakeRoom 화면 (책 정보 미리 선택됨)
+    composable<GroupRoutes.MakeRoomWithBook> { backStackEntry ->
+        val route = backStackEntry.toRoute<GroupRoutes.MakeRoomWithBook>()
+        val viewModel: GroupMakeRoomViewModel = hiltViewModel()
+
+        // 책 정보를 ViewModel에 미리 설정
+        LaunchedEffect(route) {
+            viewModel.setPreselectedBook(
+                isbn = route.isbn,
+                title = route.title,
+                imageUrl = route.imageUrl,
+                author = route.author
+            )
+        }
+
+        GroupMakeRoomScreen(
+            viewModel = viewModel,
+            onNavigateBack = {
+                navigateBack()
+            },
+            onGroupCreated = { roomId ->
+                // 생성된 방의 모집 화면으로 이동하고 백스택 제거
+                navController.navigateToGroupRecruit(roomId)
+                // 백스택에서 MakeRoomWithBook 화면 제거
+                navController.popBackStack<GroupRoutes.MakeRoomWithBook>(inclusive = true)
+            }
+        )
+    }
+
+    // Group Done 화면
+    composable<GroupRoutes.Done> {
+        GroupDoneScreen(
+            onNavigateBack = {
+                navigateBack()
+            }
+        )
+    }
+
+    // Group My 화면
+    composable<GroupRoutes.My> {
+        val groupMyViewModel: GroupMyViewModel = hiltViewModel()
+
+        GroupMyScreen(
+            viewModel = groupMyViewModel,
+            onCardClick = { room ->
+                val isRecruiting = room.type == RoomType.RECRUITING.value
+                if (isRecruiting) {
+                    navController.navigateToGroupRecruit(room.roomId)
+                } else {
+                    navController.navigateToGroupRoom(room.roomId)
+                }
+            },
+            onNavigateBack = {
+                navigateBack()
+            }
+        )
+    }
+
+    // Group Search 화면
+    composable<GroupRoutes.Search> {
+        GroupSearchScreen(
+            onNavigateBack = {
+                navigateBack()
+            },
+            onRoomClick = { roomId ->
+                navController.navigateToGroupRecruit(roomId)
+            }
+        )
+    }
+
+    // Group Recruit 화면
+    composable<GroupRoutes.Recruit> { backStackEntry ->
+        val route = backStackEntry.toRoute<GroupRoutes.Recruit>()
+        val roomId = route.roomId
+        val viewModel: GroupRoomRecruitViewModel = hiltViewModel()
+
+        val participationApproved by backStackEntry.savedStateHandle
+            .getStateFlow(PARTICIPATION_APPROVED_KEY, false)
+            .collectAsState()
+
+        LaunchedEffect(participationApproved) {
+            if (participationApproved) {
+                viewModel.onParticipationClick()
+                backStackEntry.savedStateHandle[PARTICIPATION_APPROVED_KEY] = false
+            }
+        }
+
+        GroupRoomRecruitScreen(
+            roomId = roomId,
+            onRecommendationClick = { recommendation ->
+                navController.navigateToRecommendedGroupRecruit(recommendation.roomId)
+            },
+            onNavigateToGroupScreen = { toastMessage ->
+                // GroupScreen에 토스트 메시지 전달
+                val groupEntry = navController.getBackStackEntry(MainTabRoutes.Group)
+                groupEntry.savedStateHandle["toast_message"] = toastMessage
+                navController.popBackStack(MainTabRoutes.Group, false)
+            },
+            onBackClick = {
+                // MakeRoom에서 바로 온 경우를 확인하여 Group 홈으로 이동
+                val canGoBack = navController.previousBackStackEntry != null
+                if (canGoBack) {
+                    navigateBack()
+                } else {
+                    // 백스택이 비어있으면 Group 홈으로 이동 (방금 생성된 방의 경우)
+                    navController.popBackStack(MainTabRoutes.Group, false)
+                }
+            },
+            onBookDetailClick = { isbn ->
+                navController.navigateToBookDetail(isbn)
+            },
+            onNavigateToPasswordScreen = { roomId ->
+                navController.navigateToGroupRoomUnlock(roomId)
+            },
+            onNavigateToRoomPlayingScreen = { roomId ->
+                navController.navigateToGroupRoom(roomId)
+            }
+        )
+    }
+
+    // Group Room Unlock 화면 (비밀번호 입력)
+    composable<GroupRoutes.RoomUnlock> { backStackEntry ->
+        val route = backStackEntry.toRoute<GroupRoutes.RoomUnlock>()
+        val roomId = route.roomId
+
+        GroupRoomUnlockScreen(
+            roomId = roomId,
+            onBackClick = {
+                navigateBack()
+            },
+            onSuccessNavigation = {
+                // 비밀번호가 맞았다는 '신호'만 이전 화면에 전달
+                navController.previousBackStackEntry
+                    ?.savedStateHandle
+                    ?.set(PARTICIPATION_APPROVED_KEY, true)
+                navigateBack()
+            }
+        )
+    }
+
+    // Group Room 화면
+    composable<GroupRoutes.Room> { backStackEntry ->
+        val route = backStackEntry.toRoute<GroupRoutes.Room>()
+        val roomId = route.roomId
+
+        GroupRoomScreen(
+            roomId = roomId,
+            onBackClick = {
+                navigateBack()
+            },
+            onNavigateToMates = {
+                navController.navigateToGroupRoomMates(roomId)
+            },
+            onNavigateToChat = {
+                navController.navigateToGroupRoomChat(roomId)
+            },
+            onNavigateToNote = { page, isOverview ->
+                navController.navigateToGroupNote(roomId, page, isOverview)
+            },
+            onNavigateToBookDetail = { isbn ->
+                navController.navigateToBookDetail(isbn)
+            }
+        )
+    }
+
+    // Group Room Mates 화면
+    composable<GroupRoutes.RoomMates> { backStackEntry ->
+        val route = backStackEntry.toRoute<GroupRoutes.RoomMates>()
+        val roomId = route.roomId
+
+        val feedViewModel: FeedViewModel = hiltViewModel(navController.getBackStackEntry(MainTabRoutes.Group))
+        val feedUiState by feedViewModel.uiState.collectAsState()
+        val myUserId = feedUiState.myFeedInfo?.creatorId
+
+        LaunchedEffect(Unit) {
+            if (feedUiState.myFeedInfo == null) {
+                feedViewModel.onTabSelected(1)
+            }
+        }
+
+        GroupRoomMatesScreen(
+            roomId = roomId,
+            onBackClick = {
+                navigateBack()
+            },
+            onUserClick = { userId ->
+                if (myUserId != null && myUserId == userId) {
+                    navController.navigate(FeedRoutes.My)
+                } else {
+                    navController.navigate(FeedRoutes.Others(userId))
+                }
+            }
+        )
+    }
+
+    composable<GroupRoutes.RoomChat> {
+        GroupRoomChatScreen(
+            onBackClick = { navigateBack() },
+        )
+    }
+
+    // Group Note 화면
+    composable<GroupRoutes.Note> { backStackEntry ->
+        val route = backStackEntry.toRoute<GroupRoutes.Note>()
+        val roomId = route.roomId
+        val page = route.page
+        val isOverview = route.isOverview
+
+        val result = backStackEntry.savedStateHandle.get<Int>("selected_tab_index")
+
+        val viewModel: GroupNoteViewModel = hiltViewModel(backStackEntry)
+
+        val feedViewModel: FeedViewModel = hiltViewModel(navController.getBackStackEntry(MainTabRoutes.Group))
+        val feedUiState by feedViewModel.uiState.collectAsState()
+        val myUserId = feedUiState.myFeedInfo?.creatorId
+
+        LaunchedEffect(Unit) {
+            if (feedUiState.myFeedInfo == null) {
+                feedViewModel.onTabSelected(1)
+            }
+        }
+
+        GroupNoteScreen(
+            roomId = roomId,
+            resultTabIndex = result,
+            initialPage = page,
+            initialIsOverview = isOverview,
+            onResultConsumed = {
+                backStackEntry.savedStateHandle.remove<Int>("selected_tab_index")
+            },
+            onBackClick = { navigateBack() },
+            onCreateNoteClick = { recentPage, totalPage, isOverviewPossible ->
+                navController.navigateToGroupNoteCreate(
+                    roomId = roomId,
+                    recentBookPage = recentPage,
+                    totalBookPage = totalPage,
+                    isOverviewPossible = isOverviewPossible
+                )
+            },
+            onEditNoteClick = { post ->
+                val currentState = viewModel.uiState.value
+                navController.navigateToGroupNoteCreate(
+                    roomId = roomId,
+                    recentBookPage = currentState.recentBookPage,
+                    totalBookPage = currentState.totalBookPage,
+                    isOverviewPossible = currentState.isOverviewPossible,
+                    postId = post.postId,
+                    page = post.page,
+                    content = post.content,
+                    isOverview = post.isOverview
+                )
+            },
+            onEditVoteClick = { post ->
+                val currentState = viewModel.uiState.value
+                navController.navigateToGroupVoteCreate(
+                    roomId = roomId,
+                    recentPage = currentState.recentBookPage,
+                    totalPage = currentState.totalBookPage,
+                    isOverviewPossible = currentState.isOverviewPossible,
+                    // 투표 수정 데이터 전달
+                    postId = post.postId,
+                    page = post.page,
+                    isOverview = post.isOverview,
+                    title = post.content,
+                    options = post.voteItems.map { it.itemName }
+                )
+            },
+            onCreateVoteClick = { recentPage, totalPage, isOverviewPossible ->
+                navController.navigateToGroupVoteCreate(
+                    roomId = roomId,
+                    recentPage = recentPage,
+                    totalPage = totalPage,
+                    isOverviewPossible = isOverviewPossible
+                )
+            },
+            onNavigateToFeedWrite = { pinInfo, recordContent ->
+                navController.navigateToFeedWrite(
+                    isbn = pinInfo.isbn,
+                    bookTitle = pinInfo.bookTitle,
+                    bookAuthor = pinInfo.authorName,
+                    bookImageUrl = pinInfo.bookImageUrl,
+                    recordContent = recordContent
+                )
+            },
+            onNavigateToUserProfile = { userId ->
+                if (myUserId != null && myUserId == userId) {
+                    navController.navigate(FeedRoutes.My)
+                } else {
+                    navController.navigate(FeedRoutes.Others(userId))
+                }
+            },
+            viewModel = viewModel
+        )
+    }
+
+    // Group Note Create 화면
+    composable<GroupRoutes.NoteCreate> { backStackEntry ->
+        val route = backStackEntry.toRoute<GroupRoutes.NoteCreate>()
+        val roomId = route.roomId
+
+        GroupNoteCreateScreen(
+            roomId = roomId,
+            recentPage = route.recentBookPage,
+            totalPage = route.totalBookPage,
+            isOverviewPossible = route.isOverviewPossible,
+            postId = route.postId,
+            page = route.page,
+            content = route.content,
+            isOverview = route.isOverview,
+            onBackClick = {
+                navigateBack()
+            },
+            onNavigateBackWithResult = {
+                navController.previousBackStackEntry
+                    ?.savedStateHandle
+                    ?.set("selected_tab_index", 1)
+                navigateBack()
+            }
+        )
+    }
+
+    composable<GroupRoutes.VoteCreate> { backStackEntry ->
+        val route = backStackEntry.toRoute<GroupRoutes.VoteCreate>()
+        val roomId = route.roomId
+
+        GroupVoteCreateScreen(
+            roomId = roomId,
+            recentPage = route.recentPage,
+            totalPage = route.totalPage,
+            isOverviewPossible = route.isOverviewPossible,
+            postId = route.postId,
+            page = route.page,
+            isOverview = route.isOverview,
+            title = route.title,
+            options = route.options,
+            onBackClick = { navigateBack() },
+            onNavigateBackWithResult = {
+                // 투표 생성 후 '내 기록' 탭으로 이동
+                navController.previousBackStackEntry
+                    ?.savedStateHandle
+                    ?.set("selected_tab_index", 1)
+                navigateBack()
+            }
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/navigations/MyPageNavigation.kt b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/MyPageNavigation.kt
new file mode 100644
index 00000000..879b9505
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/MyPageNavigation.kt
@@ -0,0 +1,71 @@
+package com.texthip.thip.ui.navigator.navigations
+
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.composable
+import com.texthip.thip.ui.mypage.screen.DeleteAccountScreen
+import com.texthip.thip.ui.mypage.screen.EditProfileScreen
+import com.texthip.thip.ui.mypage.screen.MyPageScreen
+import com.texthip.thip.ui.mypage.screen.MypageCustomerServiceScreen
+import com.texthip.thip.ui.mypage.screen.MypageSaveScreen
+import com.texthip.thip.ui.mypage.screen.NotificationScreen
+import com.texthip.thip.ui.navigator.extensions.navigateToBookDetail
+import com.texthip.thip.ui.navigator.extensions.navigateToCustomerService
+import com.texthip.thip.ui.navigator.extensions.navigateToEditProfile
+import com.texthip.thip.ui.navigator.extensions.navigateToFeedComment
+import com.texthip.thip.ui.navigator.extensions.navigateToLeaveThipScreen
+import com.texthip.thip.ui.navigator.extensions.navigateToNotificationSettings
+import com.texthip.thip.ui.navigator.extensions.navigateToSavedFeeds
+import com.texthip.thip.ui.navigator.routes.MainTabRoutes
+import com.texthip.thip.ui.navigator.routes.MyPageRoutes
+
+// MyPage
+fun NavGraphBuilder.myPageNavigation(
+    navController: NavHostController,
+    onNavigateToLogin: () -> Unit
+) {
+    composable<MainTabRoutes.MyPage> {
+        MyPageScreen(
+            navController = navController,
+            onNavigateToEditProfile = { navController.navigateToEditProfile() },
+            onNavigateToSavedFeeds = { navController.navigateToSavedFeeds() },
+            onNavigateToNotificationSettings = { navController.navigateToNotificationSettings() },
+            onCustomerService = {navController.navigateToCustomerService()},
+            onDeleteAccount = { navController.navigateToLeaveThipScreen() },
+            onNavigateToLogin = onNavigateToLogin
+        )
+    }
+
+    composable<MyPageRoutes.Edit> {
+        EditProfileScreen(
+            onNavigateBack = { navController.popBackStack() }
+        )
+    }
+    composable<MyPageRoutes.Save> {
+        MypageSaveScreen(
+            onNavigateBack = { navController.popBackStack() },
+            onBookClick = { isbn ->
+                navController.navigateToBookDetail(isbn)
+            },
+            onFeedClick = { feedId ->
+                navController.navigateToFeedComment(feedId)
+            }
+        )
+    }
+    composable<MyPageRoutes.NotificationEdit> {
+        NotificationScreen(
+            onNavigateBack = { navController.popBackStack() }
+        )
+    }
+    composable<MyPageRoutes.LeaveThip> {
+        DeleteAccountScreen(
+            onNavigateBack = { navController.popBackStack() },
+            onNavigateToLogin = onNavigateToLogin
+        )
+    }
+    composable<MyPageRoutes.CustomerService> {
+        MypageCustomerServiceScreen (
+            onNavigateBack = { navController.popBackStack() }
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/navigations/SearchNavigation.kt b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/SearchNavigation.kt
new file mode 100644
index 00000000..6469c7cf
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/navigations/SearchNavigation.kt
@@ -0,0 +1,80 @@
+package com.texthip.thip.ui.navigator.navigations
+
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.composable
+import androidx.navigation.toRoute
+import com.texthip.thip.ui.navigator.extensions.navigateToBookDetail
+import com.texthip.thip.ui.navigator.extensions.navigateToBookGroup
+import com.texthip.thip.ui.navigator.extensions.navigateToFeedComment
+import com.texthip.thip.ui.navigator.extensions.navigateToFeedWrite
+import com.texthip.thip.ui.navigator.extensions.navigateToGroupMakeRoomWithBook
+import com.texthip.thip.ui.navigator.extensions.navigateToGroupRecruit
+import com.texthip.thip.ui.navigator.extensions.navigateToRegisterBook
+import com.texthip.thip.ui.navigator.routes.MainTabRoutes
+import com.texthip.thip.ui.navigator.routes.SearchRoutes
+import com.texthip.thip.ui.search.screen.SearchBookScreen
+import com.texthip.thip.ui.search.screen.SearchBookDetailScreen
+import com.texthip.thip.ui.search.screen.SearchBookGroupScreen
+
+fun NavGraphBuilder.searchNavigation(navController: NavHostController) {
+    composable<MainTabRoutes.Search> {
+        SearchBookScreen(
+            onBookClick = { isbn ->
+                navController.navigateToBookDetail(isbn)
+            },
+            onRequestBook = {
+                navController.navigateToRegisterBook()
+            }
+        )
+    }
+    
+    composable<SearchRoutes.BookDetail> { backStackEntry ->
+        val route = backStackEntry.toRoute<SearchRoutes.BookDetail>()
+        val isbn = route.isbn
+        
+        SearchBookDetailScreen(
+            isbn = isbn,
+            onLeftClick = {
+                navController.popBackStack()
+            },
+            onRecruitingGroupClick = {
+                navController.navigateToBookGroup(isbn)
+            },
+            onWriteFeedClick = { bookDetail ->
+                navController.navigateToFeedWrite(
+                    isbn = bookDetail.isbn,
+                    bookTitle = bookDetail.title,
+                    bookAuthor = bookDetail.authorName,
+                    bookImageUrl = bookDetail.imageUrl
+                )
+            },
+            onFeedClick = { feedId ->
+                navController.navigateToFeedComment(feedId)
+            }
+        )
+    }
+    
+    composable<SearchRoutes.BookGroup> { backStackEntry ->
+        val route = backStackEntry.toRoute<SearchRoutes.BookGroup>()
+        val isbn = route.isbn
+        
+        SearchBookGroupScreen(
+            isbn = isbn,
+            onLeftClick = {
+                navController.popBackStack()
+            },
+            onCardClick = { roomId ->
+                navController.navigateToGroupRecruit(roomId)
+            },
+            onCreateRoomClick = { isbn, title, imageUrl, author ->
+                navController.navigateToGroupMakeRoomWithBook(
+                    isbn = isbn,
+                    title = title,
+                    imageUrl = imageUrl,
+                    author = author
+                )
+            }
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/routes/CommonRoutes.kt b/app/src/main/java/com/texthip/thip/ui/navigator/routes/CommonRoutes.kt
new file mode 100644
index 00000000..0b19505d
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/routes/CommonRoutes.kt
@@ -0,0 +1,39 @@
+package com.texthip.thip.ui.navigator.routes
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+sealed class CommonRoutes : Routes() {
+    @Serializable
+    data object Alarm : CommonRoutes()
+
+    @Serializable
+    data object Splash : CommonRoutes()
+
+    @Serializable
+    data object Login : CommonRoutes()
+
+    @Serializable
+    data object SignupFlow : CommonRoutes()
+
+    @Serializable
+    sealed interface SignupScreenRoutes {
+        @Serializable
+        data object Nickname : SignupScreenRoutes
+
+        @Serializable
+        data object Genre : SignupScreenRoutes
+
+        @Serializable
+        data object Tutorial : SignupScreenRoutes
+
+        @Serializable
+        data object Done : SignupScreenRoutes
+    }
+
+    @Serializable
+    data object Main : CommonRoutes()
+    
+    @Serializable
+    data object RegisterBook : CommonRoutes()
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/routes/FeedRoutes.kt b/app/src/main/java/com/texthip/thip/ui/navigator/routes/FeedRoutes.kt
new file mode 100644
index 00000000..0bb5e5fe
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/routes/FeedRoutes.kt
@@ -0,0 +1,36 @@
+package com.texthip.thip.ui.navigator.routes
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+sealed class FeedRoutes : Routes() {
+  
+    @Serializable data object MySubscription : FeedRoutes()
+    
+    @Serializable data class Comment(val feedId: Long) : FeedRoutes()
+
+    @Serializable
+    data class Write(
+        val feedId: Int? = null,  // 수정 모드용 피드 ID
+        val isbn: String? = null,
+        val bookTitle: String? = null,
+        val bookAuthor: String? = null,
+        val bookImageUrl: String? = null,
+        val recordContent: String? = null,
+        // 수정 모드용 추가 필드들
+        val editContentBody: String? = null,
+        val editIsPublic: Boolean? = null,
+        val editTagList: List<String>? = null,
+        val editContentUrls: List<String>? = null
+    ) : FeedRoutes()
+
+    @Serializable data class Others(val userId: Long) : FeedRoutes()
+
+    @Serializable data object SearchPeople : FeedRoutes()
+
+    @Serializable
+    data class OthersSubscription(val userId: Long) : FeedRoutes()
+
+    @Serializable
+    data object My : FeedRoutes()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/routes/GroupRoutes.kt b/app/src/main/java/com/texthip/thip/ui/navigator/routes/GroupRoutes.kt
new file mode 100644
index 00000000..100d84e3
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/routes/GroupRoutes.kt
@@ -0,0 +1,70 @@
+package com.texthip.thip.ui.navigator.routes
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+sealed class GroupRoutes : Routes() {
+    @Serializable
+    data object MakeRoom : GroupRoutes()
+
+    @Serializable
+    data class MakeRoomWithBook(
+        val isbn: String,
+        val title: String,
+        val imageUrl: String,
+        val author: String
+    ) : GroupRoutes()
+    
+    @Serializable
+    data object Done : GroupRoutes()
+
+    @Serializable
+    data object Search : GroupRoutes()
+
+    @Serializable
+    data object My : GroupRoutes()
+
+    @Serializable
+    data class Recruit(val roomId: Int) : GroupRoutes()
+
+    @Serializable
+    data class RoomUnlock(val roomId: Int) : GroupRoutes()
+
+    @Serializable
+    data class Room(val roomId: Int) : GroupRoutes()
+
+    @Serializable
+    data class RoomMates(val roomId: Int) : GroupRoutes()
+
+    @Serializable
+    data class RoomChat(val roomId: Int) : GroupRoutes()
+
+    @Serializable
+    data class Note(val roomId: Int, val page: Int? = null, val isOverview: Boolean? = null) :
+        GroupRoutes()
+
+    @Serializable
+    data class NoteCreate(
+        val roomId: Int,
+        val recentBookPage: Int,
+        val totalBookPage: Int,
+        val isOverviewPossible: Boolean,
+        val postId: Int? = null,
+        val page: Int? = null,
+        val content: String? = null,
+        val isOverview: Boolean? = null
+    )
+
+    @Serializable
+    data class VoteCreate(
+        val roomId: Int,
+        val recentPage: Int,
+        val totalPage: Int,
+        val isOverviewPossible: Boolean,
+        val postId: Int? = null,
+        val page: Int? = null,
+        val isOverview: Boolean? = null,
+        val title: String? = null,
+        val options: List<String>? = null
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/routes/MyPageRoutes.kt b/app/src/main/java/com/texthip/thip/ui/navigator/routes/MyPageRoutes.kt
new file mode 100644
index 00000000..37959f5c
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/routes/MyPageRoutes.kt
@@ -0,0 +1,13 @@
+package com.texthip.thip.ui.navigator.routes
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+sealed class MyPageRoutes : Routes() {
+    @Serializable data object Edit : MyPageRoutes()
+    @Serializable data object Save : MyPageRoutes()
+    @Serializable data object Reaction : MyPageRoutes()
+    @Serializable data object NotificationEdit : MyPageRoutes()
+    @Serializable data object LeaveThip : MyPageRoutes()
+    @Serializable data object CustomerService : MyPageRoutes()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/routes/Routes.kt b/app/src/main/java/com/texthip/thip/ui/navigator/routes/Routes.kt
new file mode 100644
index 00000000..8f503427
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/routes/Routes.kt
@@ -0,0 +1,21 @@
+package com.texthip.thip.ui.navigator.routes
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+sealed class Routes
+
+@Serializable
+sealed class MainTabRoutes : Routes() {
+    @Serializable
+    data object Feed : MainTabRoutes()
+    
+    @Serializable
+    data object Group : MainTabRoutes()
+    
+    @Serializable
+    data object Search : MainTabRoutes()
+    
+    @Serializable
+    data object MyPage : MainTabRoutes()
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/routes/SearchRoutes.kt b/app/src/main/java/com/texthip/thip/ui/navigator/routes/SearchRoutes.kt
new file mode 100644
index 00000000..21eb2524
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/navigator/routes/SearchRoutes.kt
@@ -0,0 +1,12 @@
+package com.texthip.thip.ui.navigator.routes
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+sealed class SearchRoutes : Routes() {
+    @Serializable
+    data class BookDetail(val isbn: String) : SearchRoutes()
+    
+    @Serializable
+    data class BookGroup(val isbn: String) : SearchRoutes()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/search/component/SearchActiveField.kt b/app/src/main/java/com/texthip/thip/ui/search/component/SearchActiveField.kt
new file mode 100644
index 00000000..d0af5f89
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/search/component/SearchActiveField.kt
@@ -0,0 +1,98 @@
+package com.texthip.thip.ui.search.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.ui.search.mock.BookData
+import com.texthip.thip.ui.common.cards.CardBookList
+import com.texthip.thip.ui.theme.ThipTheme.colors
+
+@Composable
+fun SearchActiveField(
+    bookList: List<BookData>,
+    isLoading: Boolean = false,
+    hasMore: Boolean = true,
+    onLoadMore: () -> Unit = {},
+    onBookClick: (BookData) -> Unit = {}
+) {
+    val listState = rememberLazyListState()
+    
+    // 무한 스크롤을 위한 로직
+    val shouldLoadMore by remember(hasMore, isLoading) {
+        derivedStateOf {
+            val layoutInfo = listState.layoutInfo
+            val totalItemsCount = layoutInfo.totalItemsCount
+            val lastVisibleItemIndex = (layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0) + 1
+
+            hasMore && !isLoading && totalItemsCount > 0 && lastVisibleItemIndex >= totalItemsCount - 3
+        }
+    }
+
+    LaunchedEffect(shouldLoadMore) {
+        if (shouldLoadMore) {
+            onLoadMore()
+        }
+    }
+    
+    LazyColumn(
+        state = listState,
+        verticalArrangement = Arrangement.spacedBy(12.dp)
+    ) {
+        itemsIndexed(bookList) { index, book ->
+            Column {
+                CardBookList(
+                    title = book.title,
+                    author = book.author,
+                    publisher = book.publisher,
+                    imageUrl = book.imageUrl,
+                    onClick = { onBookClick(book) }
+                )
+                if (index < bookList.size - 1) {
+                    Spacer(
+                        modifier = Modifier
+                            .padding(top = 12.dp)
+                            .fillMaxWidth()
+                            .height(1.dp)
+                            .background(colors.DarkGrey02)
+                    )
+                }
+            }
+        }
+        
+        // 로딩 인디케이터
+        if (isLoading) {
+            item {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(16.dp),
+                    contentAlignment = Alignment.Center
+                ) {
+                    CircularProgressIndicator(
+                        modifier = Modifier.size(24.dp),
+                        color = colors.White
+                    )
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/search/component/SearchBookFilteredResult.kt b/app/src/main/java/com/texthip/thip/ui/search/component/SearchBookFilteredResult.kt
new file mode 100644
index 00000000..c8a99cfa
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/search/component/SearchBookFilteredResult.kt
@@ -0,0 +1,164 @@
+package com.texthip.thip.ui.search.component
+
+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.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.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+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.cards.CardBookList
+import com.texthip.thip.ui.search.mock.BookData
+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 SearchBookFilteredResult(
+    resultCount: Int,
+    bookList: List<BookData>,
+    isLoading: Boolean = false,
+    hasMore: Boolean = true,
+    onLoadMore: () -> Unit = {},
+    onBookClick: (BookData) -> Unit = {}
+) {
+    val listState = rememberLazyListState()
+    
+    // 무한 스크롤을 위한 로직
+    val shouldLoadMore by remember(hasMore, isLoading) {
+        derivedStateOf {
+            val layoutInfo = listState.layoutInfo
+            val totalItemsCount = layoutInfo.totalItemsCount
+            val lastVisibleItemIndex = (layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0) + 1
+
+            hasMore && !isLoading && totalItemsCount > 0 && lastVisibleItemIndex >= totalItemsCount - 3
+        }
+    }
+
+    LaunchedEffect(shouldLoadMore) {
+        if (shouldLoadMore) {
+            onLoadMore()
+        }
+    }
+    
+    Column {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Text(
+                text = stringResource(R.string.group_searched_room_size, resultCount),
+                color = colors.Grey,
+                style = typography.menu_m500_s14_h24
+            )
+        }
+        Spacer(
+            modifier = Modifier
+                .padding(top = 4.dp, bottom = 20.dp)
+                .fillMaxWidth()
+                .height(1.dp)
+                .background(colors.DarkGrey02)
+        )
+
+        LazyColumn(
+            state = listState,
+            verticalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+                itemsIndexed(bookList) { index, book ->
+                    Column {
+                        CardBookList(
+                            title = book.title,
+                            author = book.author,
+                            publisher = book.publisher,
+                            imageUrl = book.imageUrl,
+                            onClick = { onBookClick(book) }
+                        )
+                        if (index < bookList.size - 1) {
+                            Spacer(
+                                modifier = Modifier
+                                    .padding(top = 12.dp)
+                                    .fillMaxWidth()
+                                    .height(1.dp)
+                                    .background(colors.DarkGrey02)
+                            )
+                        }
+                    }
+                }
+                
+                // 로딩 인디케이터
+                if (isLoading) {
+                    item {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(16.dp),
+                            contentAlignment = Alignment.Center
+                        ) {
+                            CircularProgressIndicator(
+                                modifier = Modifier.size(24.dp),
+                                color = colors.White
+                            )
+                        }
+                    }
+                }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewBookFilteredSearchResult() {
+    ThipTheme {
+        SearchBookFilteredResult(
+            resultCount = 3,
+            bookList = listOf(
+                BookData(
+                    title = "이기적 유전자",
+                    author = "리처드 도킨스",
+                    publisher = "을유문화사"
+                ),
+                BookData(
+                    title = "총, 균, 쇠",
+                    author = "재레드 다이아몬드",
+                    publisher = "문학사상사"
+                ),
+                BookData(
+                    title = "코스모스",
+                    author = "칼 세이건",
+                    publisher = "사이언스북스"
+                )
+            )
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewBookFilteredSearchResultEmpty() {
+    ThipTheme {
+        SearchBookFilteredResult(
+            resultCount = 0,
+            bookList = emptyList()
+        )
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/search/component/SearchEmptyResult.kt b/app/src/main/java/com/texthip/thip/ui/search/component/SearchEmptyResult.kt
new file mode 100644
index 00000000..4687d6dd
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/search/component/SearchEmptyResult.kt
@@ -0,0 +1,55 @@
+package com.texthip.thip.ui.search.component
+
+import androidx.compose.foundation.layout.Arrangement
+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.foundation.layout.width
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.ActionMediumButton
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun SearchEmptyResult(
+    mainText: String,
+    subText: String,
+    onRequestBook: () -> Unit
+) {
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(
+            text = mainText,
+            color = colors.White,
+            style = typography.smalltitle_sb600_s18_h24
+        )
+        Text(
+            text = subText,
+            modifier = Modifier.padding(top = 8.dp),
+            color = colors.Grey,
+            style = typography.copy_r400_s14
+        )
+        Spacer(Modifier.height(20.dp))
+
+        ActionMediumButton(
+            text = stringResource(R.string.group_register_book),
+            contentColor = colors.White,
+            backgroundColor = colors.Purple,
+            modifier = Modifier
+                .width(97.dp)
+                .height(44.dp),
+            onClick = { onRequestBook() },
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/search/component/SearchFilterButton.kt b/app/src/main/java/com/texthip/thip/ui/search/component/SearchFilterButton.kt
new file mode 100644
index 00000000..f23752da
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/search/component/SearchFilterButton.kt
@@ -0,0 +1,142 @@
+package com.texthip.thip.ui.search.component
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+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.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.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+// 단순 FilterButton 컴포넌트 (드롭다운 제거)
+@Composable
+fun SearchFilterButton(
+    modifier: Modifier = Modifier,
+    selectedOption: String,
+    isExpanded: Boolean = false,
+    onClick: () -> Unit
+) {
+    Box(
+        modifier = modifier.fillMaxWidth(),
+        contentAlignment = Alignment.TopEnd
+    ) {
+        Row(
+            modifier = Modifier
+                .height(36.dp)
+                .clickable(
+                    interactionSource = remember { MutableInteractionSource() },
+                    indication = null
+                ) { onClick() },
+            horizontalArrangement = Arrangement.End,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Text(
+                text = selectedOption,
+                color = colors.Grey01,
+                style = typography.menu_m500_s14_h24
+            )
+            Icon(
+                painter = painterResource(
+                    id = if (isExpanded) R.drawable.ic_upmore else R.drawable.ic_downmore
+                ),
+                contentDescription = "Dropdown",
+                tint = colors.Grey02,
+                modifier = Modifier.size(24.dp)
+            )
+        }
+    }
+}
+
+// Screen 레벨 드롭다운 오버레이
+@Composable
+fun SearchFilterDropdownOverlay(
+    modifier: Modifier = Modifier,
+    isVisible: Boolean,
+    options: List<String>,
+    selectedOption: String,
+    filterButtonPosition: IntOffset,
+    density: Density,
+    onOptionSelected: (String) -> Unit,
+    onDismiss: () -> Unit
+) {
+    if (isVisible) {
+        Box(
+            modifier = modifier
+                .fillMaxSize()
+                .background(Color.Transparent)
+                .clickable(
+                    interactionSource = remember { MutableInteractionSource() },
+                    indication = null
+                ) { onDismiss() }
+        )
+    }
+
+    AnimatedVisibility(
+        visible = isVisible,
+        enter = fadeIn(),
+        exit = fadeOut()
+    ) {
+        Box(
+            modifier = Modifier.fillMaxSize(),
+            contentAlignment = Alignment.TopEnd
+        ) {
+            Column(
+                modifier = Modifier
+                    .padding(
+                        top = with(density) { (filterButtonPosition.y - 36).toDp() },
+                        end = 20.dp // 기존 FilterButton과 동일하게 화면 오른쪽에서 20dp
+                    )
+                    .width(144.dp)
+                    .border(
+                        width = 1.dp,
+                        color = colors.Grey01,
+                        shape = RoundedCornerShape(16.dp)
+                    )
+                    .background(color = colors.Black, shape = RoundedCornerShape(16.dp))
+                    .padding(vertical = 20.dp, horizontal = 12.dp),
+                verticalArrangement = Arrangement.spacedBy(16.dp)
+            ) {
+                options.forEach { option ->
+                    val isSelected = option == selectedOption
+                    Text(
+                        text = option,
+                        color = if (isSelected) colors.White else colors.Grey02,
+                        style = typography.feedcopy_r400_s14_h20,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .clickable {
+                                onOptionSelected(option)
+                                onDismiss()
+                            }
+                    )
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/search/component/SearchRecentBook.kt b/app/src/main/java/com/texthip/thip/ui/search/component/SearchRecentBook.kt
new file mode 100644
index 00000000..a65133dd
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/search/component/SearchRecentBook.kt
@@ -0,0 +1,194 @@
+package com.texthip.thip.ui.search.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.FlowRow
+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.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+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.search.mock.BookData
+import com.texthip.thip.ui.common.buttons.GenreChipButton
+import com.texthip.thip.ui.common.cards.CardBookSearch
+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 SearchRecentBook(
+    recentSearches: List<String>,
+    popularBooks: List<BookData>,
+    popularBookDate: String,
+    onSearchClick: (String) -> Unit,
+    onRemove: (String) -> Unit,
+    onBookClick: (BookData) -> Unit
+) {
+    Column(modifier = Modifier.fillMaxSize()) {
+        Text(
+            text = stringResource(R.string.group_recent_search),
+            color = colors.White,
+            style = typography.smalltitle_sb600_s18_h24
+        )
+        Spacer(modifier = Modifier.height(16.dp))
+
+        if (recentSearches.isEmpty()) {
+            Text(
+                text = stringResource(R.string.group_no_recent_search),
+                color = colors.Grey01,
+                style = typography.menu_r400_s14_h24
+            )
+        } else {
+            FlowRow(
+                verticalArrangement = Arrangement.spacedBy(12.dp),
+                horizontalArrangement = Arrangement.spacedBy(16.dp),
+                maxLines = 2,
+            ) {
+                recentSearches.take(9).forEach { keyword ->
+                    GenreChipButton(
+                        text = keyword,
+                        onClick = { onSearchClick(keyword) },
+                        onCloseClick = { onRemove(keyword) }
+                    )
+                }
+            }
+        }
+
+        Row(
+            modifier = Modifier
+                .padding(top = 32.dp)
+                .fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Text(
+                text = stringResource(R.string.book_popular_search),
+                color = colors.White,
+                style = typography.smalltitle_sb600_s18_h24
+            )
+            Text(
+                text = stringResource(R.string.book_search_date, popularBookDate),
+                color = colors.Grey02,
+                style = typography.timedate_r400_s11
+            )
+        }
+        Spacer(modifier = Modifier.height(16.dp))
+
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .weight(1f)
+        ) {
+            if (popularBooks.isEmpty()) {
+                Column(
+                    modifier = Modifier
+                        .fillMaxSize(),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.Center
+                ) {
+                    Text(
+                        text = stringResource(R.string.book_no_most_search_result_comment_1),
+                        style = typography.smalltitle_sb600_s18_h24,
+                        color = colors.White
+                    )
+                    Spacer(modifier = Modifier.height(8.dp))
+                    Text(
+                        text = stringResource(R.string.book_no_most_search_result_comment_2),
+                        style = typography.copy_r400_s14,
+                        color = colors.Grey
+                    )
+                }
+            } else {
+                LazyColumn(
+                    modifier = Modifier.fillMaxSize()
+                ) {
+                    items(popularBooks.size) { index ->
+                        val book = popularBooks[index]
+                        CardBookSearch(
+                            number = index + 1,
+                            title = book.title,
+                            imageUrl = book.imageUrl,
+                            onClick = { onBookClick(book) }
+                        )
+                        if (index < popularBooks.size - 1) {
+                            Spacer(
+                                modifier = Modifier
+                                    .padding(top = 12.dp, bottom = 12.dp)
+                                    .fillMaxWidth()
+                                    .height(1.dp)
+                                    .background(colors.DarkGrey02)
+                            )
+                        } else {
+                            Spacer(
+                                modifier = Modifier
+                                    .padding(bottom = 20.dp)
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@Preview
+@Composable
+fun PreviewBookRecentSearch() {
+    ThipTheme {
+        SearchRecentBook(
+            recentSearches = listOf("소설", "심리학", "철학", "역사", "과학", "에세이"),
+            popularBooks = listOf(
+                BookData(
+                    title = "이기적 유전자",
+                    author = "리처드 도킨스",
+                    publisher = "을유문화사",
+                    imageUrl = null
+                ),
+                BookData(
+                    title = "코스모스",
+                    author = "칼 세이건",
+                    publisher = "사이언스북스",
+                    imageUrl = null
+                ),
+                BookData(
+                    title = "총, 균, 쇠",
+                    author = "재레드 다이아몬드",
+                    publisher = "문학사상사",
+                    imageUrl = null
+                )
+            ),
+            popularBookDate = "01.12",
+            onSearchClick = {},
+            onRemove = {},
+            onBookClick = {}
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewBookRecentSearch_EmptyPopular() {
+    ThipTheme {
+        SearchRecentBook(
+            recentSearches = emptyList(),
+            popularBooks = emptyList(),
+            popularBookDate = "01.12",
+            onSearchClick = {},
+            onRemove = {},
+            onBookClick = {}
+        )
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/search/mock/BookData.kt b/app/src/main/java/com/texthip/thip/ui/search/mock/BookData.kt
new file mode 100644
index 00000000..8d132998
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/search/mock/BookData.kt
@@ -0,0 +1,11 @@
+package com.texthip.thip.ui.search.mock
+
+import com.texthip.thip.R
+
+data class BookData(
+    val title: String,
+    val author: String = "",
+    val publisher: String = "",
+    val imageUrl: String? = null,
+    val isbn: String = ""
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/search/mock/DetailBookData.kt b/app/src/main/java/com/texthip/thip/ui/search/mock/DetailBookData.kt
new file mode 100644
index 00000000..dee82adb
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/search/mock/DetailBookData.kt
@@ -0,0 +1,13 @@
+package com.texthip.thip.ui.search.mock
+
+import com.texthip.thip.R
+
+data class DetailBookData(
+    val title: String,
+    val author: String,
+    val publisher: String,
+    val description: String,
+    val coverImageRes: Int? = R.drawable.img_book_cover_sample,
+    val participantsCount: Int = 0,
+    val recruitingRoomCount: Int = 0
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/search/screen/SearchBookDetailScreen.kt b/app/src/main/java/com/texthip/thip/ui/search/screen/SearchBookDetailScreen.kt
new file mode 100644
index 00000000..334792e6
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/search/screen/SearchBookDetailScreen.kt
@@ -0,0 +1,679 @@
+package com.texthip.thip.ui.search.screen
+
+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
+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.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.blur
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.layout.positionInRoot
+import androidx.compose.ui.platform.LocalConfiguration
+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.IntOffset
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import coil.compose.AsyncImage
+import com.texthip.thip.R
+import com.texthip.thip.data.model.book.response.BookDetailResponse
+import com.texthip.thip.ui.common.buttons.ActionMediumButton
+import com.texthip.thip.ui.common.modal.InfoPopup
+import com.texthip.thip.ui.common.topappbar.GradationTopAppBar
+import com.texthip.thip.ui.mypage.component.SavedFeedCard
+import com.texthip.thip.ui.mypage.mock.FeedItem
+import com.texthip.thip.ui.search.component.SearchFilterButton
+import com.texthip.thip.ui.search.component.SearchFilterDropdownOverlay
+import com.texthip.thip.ui.search.viewmodel.BookDetailUiState
+import com.texthip.thip.ui.search.viewmodel.BookDetailViewModel
+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.utils.color.hexToColor
+
+
+@Composable
+fun SearchBookDetailScreen(
+    modifier: Modifier = Modifier,
+    isbn: String,
+    onLeftClick: () -> Unit = {},
+    onRecruitingGroupClick: () -> Unit = {},
+    onWriteFeedClick: (BookDetailResponse) -> Unit = {},
+    onFeedClick: (Long) -> Unit = {},
+    onBookmarkClick: (String, Boolean) -> Unit = { _, _ -> },
+    viewModel: BookDetailViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsState()
+
+    // ISBN으로 책 상세 정보 로드
+    LaunchedEffect(isbn) {
+        viewModel.loadBookDetail(isbn)
+    }
+
+    SearchBookDetailScreenContent(
+        modifier = modifier,
+        isLoading = uiState.isLoading,
+        error = uiState.error,
+        bookDetail = uiState.bookDetail,
+        uiState = uiState,
+        onLeftClick = onLeftClick,
+        onRecruitingGroupClick = onRecruitingGroupClick,
+        onWriteFeedClick = onWriteFeedClick,
+        onFeedClick = onFeedClick,
+        onBookmarkClick = { isbnParam, newState ->
+            viewModel.saveBook(isbnParam, newState)
+            onBookmarkClick(isbnParam, newState)
+        },
+        onSortChange = { sortType ->
+            val apiSortType = if (sortType == "인기순") "like" else "latest"
+            viewModel.changeSortOrder(isbn, apiSortType)
+        },
+        onLoadMore = {
+            viewModel.loadMoreFeeds(isbn)
+        }
+    )
+}
+
+@Composable
+private fun SearchBookDetailScreenContent(
+    modifier: Modifier = Modifier,
+    isLoading: Boolean = false,
+    error: String? = null,
+    bookDetail: BookDetailResponse? = null,
+    uiState: BookDetailUiState? = null,
+    onLeftClick: () -> Unit = {},
+    onRecruitingGroupClick: () -> Unit = {},
+    onWriteFeedClick: (BookDetailResponse) -> Unit = {},
+    onFeedClick: (Long) -> Unit = {},
+    onBookmarkClick: (String, Boolean) -> Unit = { _, _ -> },
+    onSortChange: (String) -> Unit = {},
+    onLoadMore: () -> Unit = {}
+) {
+    var isIntroductionPopupVisible by remember { mutableStateOf(false) }
+    var isBookmarked by remember { mutableStateOf(bookDetail?.isSaved ?: false) }
+    var isFilterDropdownVisible by remember { mutableStateOf(false) }
+    var filterButtonPosition by remember { mutableStateOf(IntOffset.Zero) }
+    val density = LocalDensity.current
+    val configuration = LocalConfiguration.current
+    
+    // 화면 크기에 따른 최대 높이 설정 (태블릿 대응)
+    val maxImageHeight = remember(configuration.screenHeightDp) {
+        (configuration.screenHeightDp * 0.6f).dp.coerceAtMost(620.dp)
+    }
+    val filterOptions = listOf(
+        stringResource(R.string.sort_like),
+        stringResource(R.string.sort_latest)
+    )
+
+    // UI 상태를 ViewModel의 currentSort와 동기화
+    val currentSortFromViewModel = uiState?.currentSort ?: "like"
+    val selectedFilterOption = if (currentSortFromViewModel == "like") 0 else 1
+
+    val lazyListState = rememberLazyListState()
+    val shouldLoadMore by remember {
+        derivedStateOf {
+            val layoutInfo = lazyListState.layoutInfo
+            val totalItemsNumber = layoutInfo.totalItemsCount
+            val lastVisibleItemIndex = (layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0) + 1
+
+            lastVisibleItemIndex > (totalItemsNumber - 3)
+        }
+    }
+
+    // 무한 스크롤 로직
+    LaunchedEffect(shouldLoadMore) {
+        if (shouldLoadMore && uiState?.isLoadingMore == false && !uiState.isLast) {
+            onLoadMore()
+        }
+    }
+
+
+    // 북마크 상태 동기화
+    LaunchedEffect(bookDetail?.isSaved) {
+        bookDetail?.let {
+            isBookmarked = it.isSaved
+        }
+    }
+
+    when {
+        isLoading -> {
+            Box(
+                modifier = modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                CircularProgressIndicator(
+                    color = colors.White
+                )
+            }
+        }
+
+        error != null -> {
+            Box(
+                modifier = modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                Text(
+                    text = error,
+                    color = colors.White,
+                    style = typography.smalltitle_sb600_s16_h20
+                )
+            }
+        }
+
+        bookDetail != null -> {
+            Box(modifier = modifier.fillMaxSize()) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(colors.Black)
+                        .then(
+                            if (isIntroductionPopupVisible) {
+                                Modifier.blur(4.dp)
+                            } else {
+                                Modifier
+                            }
+                        )
+                ) {
+                    // 전체 스크롤 가능한 컨텐츠
+                    LazyColumn(
+                        state = lazyListState,
+                        modifier = Modifier.fillMaxSize()
+                    ) {
+                        // 상단 책 이미지 배경 영역
+                        item {
+                            Box(
+                                modifier = Modifier.fillMaxWidth()
+                            ) {
+                                AsyncImage(
+                                    model = bookDetail.imageUrl,
+                                    contentDescription = bookDetail.title,
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .heightIn(min = 420.dp, max = maxImageHeight)
+                                        .blur(4.dp),
+                                    contentScale = ContentScale.Crop,
+                                    fallback = painterResource(R.drawable.img_book_cover_sample),
+                                    error = painterResource(R.drawable.img_book_cover_sample)
+                                )
+                                Box(
+                                    modifier = Modifier
+                                        .matchParentSize()
+                                        .background(
+                                            brush = Brush.verticalGradient(
+                                                colors = listOf(
+                                                    Color.Transparent,
+                                                    colors.Black.copy(alpha = 0.2f),
+                                                    colors.Black.copy(alpha = 0.5f),
+                                                    colors.Black.copy(alpha = 0.8f),
+                                                    colors.Black.copy(alpha = 0.95f),
+                                                    colors.Black
+                                                ),
+                                                startY = 0f,
+                                                endY = Float.POSITIVE_INFINITY
+                                            )
+                                        )
+                                )
+
+                                // 책 정보 컨텐츠를 이미지 위에 배치
+                                Column(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .padding(horizontal = 20.dp)
+                                ) {
+                                    Spacer(modifier = Modifier.height(96.dp)) // TopAppBar 공간
+
+                                    Text(
+                                        modifier = Modifier.padding(top = 40.dp),
+                                        text = bookDetail.title,
+                                        color = colors.White,
+                                        style = typography.bigtitle_b700_s22
+                                    )
+                                    Spacer(modifier = Modifier.height(8.dp))
+
+                                    Text(
+                                        text = stringResource(
+                                            R.string.search_book_author,
+                                            bookDetail.authorName,
+                                            bookDetail.publisher
+                                        ),
+                                        color = colors.Grey,
+                                        style = typography.menu_sb600_s12_h20
+                                    )
+
+                                    Column(
+                                        modifier = Modifier
+                                            .padding(top = 33.dp)
+                                            .fillMaxWidth()
+                                            .clickable { isIntroductionPopupVisible = true }
+                                    ) {
+                                        Text(
+                                            text = stringResource(R.string.search_book_comment),
+                                            color = colors.White,
+                                            style = typography.menu_sb600_s14_h24,
+                                        )
+                                        Spacer(modifier = Modifier.height(5.dp))
+
+                                        Text(
+                                            text = bookDetail.description,
+                                            color = colors.Grey,
+                                            style = typography.copy_r400_s12_h20,
+                                            maxLines = 2,
+                                            overflow = TextOverflow.Ellipsis
+                                        )
+                                    }
+
+                                    Spacer(modifier = Modifier.height(40.dp))
+                                    Column(
+                                        modifier = Modifier.fillMaxWidth(),
+                                        verticalArrangement = Arrangement.spacedBy(12.dp)
+                                    ) {
+                                        ActionMediumButton(
+                                            text = stringResource(
+                                                R.string.search_recruiting_group_count,
+                                                bookDetail.recruitingRoomCount
+                                            ),
+                                            contentColor = colors.Grey,
+                                            backgroundColor = Color.Transparent,
+                                            hasRightIcon = true,
+                                            modifier = Modifier
+                                                .fillMaxWidth()
+                                                .border(
+                                                    width = 1.dp,
+                                                    color = colors.Grey,
+                                                    shape = RoundedCornerShape(12.dp)
+                                                ),
+                                            onClick = onRecruitingGroupClick,
+                                        )
+                                        Row {
+                                            ActionMediumButton(
+                                                text = stringResource(R.string.search_write_feed_comment),
+                                                contentColor = colors.White,
+                                                backgroundColor = colors.Purple,
+                                                hasRightIcon = true,
+                                                hasRightPlusIcon = true,
+                                                modifier = Modifier.weight(1f),
+                                                onClick = { onWriteFeedClick(bookDetail) }
+                                            )
+                                            Box(
+                                                modifier = Modifier
+                                                    .padding(start = 12.dp)
+                                                    .size(44.dp)
+                                                    .border(
+                                                        width = 1.dp,
+                                                        color = colors.Grey02,
+                                                        shape = RoundedCornerShape(12.dp)
+                                                    )
+                                                    .background(
+                                                        color = Color.Transparent,
+                                                        shape = RoundedCornerShape(12.dp)
+                                                    )
+                                                    .clickable {
+                                                        val newBookmarkState = !isBookmarked
+                                                        isBookmarked = newBookmarkState
+                                                        onBookmarkClick(bookDetail.isbn, newBookmarkState)
+                                                    },
+                                                contentAlignment = Alignment.Center,
+                                            ) {
+                                                Icon(
+                                                    painter = painterResource(
+                                                        if (isBookmarked)
+                                                            R.drawable.ic_save_filled
+                                                        else
+                                                            R.drawable.ic_save
+                                                    ),
+                                                    contentDescription = null,
+                                                    tint = Color.Unspecified,
+                                                    modifier = Modifier.size(24.dp)
+                                                )
+                                            }
+                                        }
+                                    }
+                                    Spacer(modifier = Modifier.height(44.dp))
+
+                                    Text(
+                                        text = stringResource(R.string.search_watch_feed),
+                                        color = colors.Grey,
+                                        style = typography.smalltitle_sb600_s18_h24,
+                                        modifier = Modifier.padding(bottom = 8.dp)
+                                    )
+
+                                    SearchFilterButton(
+                                        modifier = Modifier
+                                            .onGloballyPositioned { coordinates ->
+                                                filterButtonPosition = IntOffset(
+                                                    coordinates.positionInRoot().x.toInt(),
+                                                    coordinates.positionInRoot().y.toInt()
+                                                )
+                                            },
+                                        selectedOption = filterOptions[selectedFilterOption],
+                                        isExpanded = isFilterDropdownVisible,
+                                        onClick = {
+                                            isFilterDropdownVisible = !isFilterDropdownVisible
+                                        }
+                                    )
+                                    // 구분선
+                                    Spacer(
+                                        modifier = Modifier
+                                            .fillMaxWidth()
+                                            .height(1.dp)
+                                            .background(colors.DarkGrey02)
+                                    )
+                                }
+                            }
+                        }
+
+                        // 피드 섹션 전환을 위한 추가 그라데이션
+                        item {
+                            Box(
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .height(40.dp)
+                                    .background(
+                                        brush = Brush.verticalGradient(
+                                            colors = listOf(
+                                                colors.Black,
+                                                colors.Black.copy(alpha = 0.95f),
+                                                colors.Black.copy(alpha = 0.9f)
+                                            )
+                                        )
+                                    )
+                            )
+                        }
+
+                        // 피드 목록 (ViewModel에서 변환된 데이터 사용)
+                        val feedItems = uiState?.feedItems ?: emptyList()
+
+                        if (feedItems.isEmpty() && uiState?.isLoadingFeeds != true) {
+                            item {
+                                Box(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .height(250.dp),
+                                    contentAlignment = Alignment.Center
+                                ) {
+                                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                                        Text(
+                                            text = stringResource(R.string.search_no_feed_comment_1),
+                                            color = colors.White,
+                                            style = typography.smalltitle_sb600_s18_h24
+                                        )
+                                        Spacer(modifier = Modifier.height(6.dp))
+                                        Text(
+                                            text = stringResource(R.string.search_no_feed_comment_2),
+                                            color = colors.Grey01,
+                                            style = typography.feedcopy_r400_s14_h20
+                                        )
+                                    }
+                                }
+                            }
+                        }
+
+                        if (uiState?.isLoadingFeeds == true && feedItems.isEmpty()) {
+                            item {
+                                Box(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .height(200.dp),
+                                    contentAlignment = Alignment.Center
+                                ) {
+                                    CircularProgressIndicator(color = colors.White)
+                                }
+                            }
+                        }
+
+                        // 피드 아이템들
+                        itemsIndexed(
+                            items = feedItems,
+                            key = { _, feedItem -> feedItem.id }
+                        ) { index, feedItem ->
+                            val relatedFeedItem = uiState?.relatedFeeds?.getOrNull(index)
+
+                            Spacer(modifier = Modifier.height(if (index == 0) 0.dp else 40.dp))
+
+                            SavedFeedCard(
+                                feedItem = feedItem,
+                                bottomTextColor = relatedFeedItem?.aliasColor?.let { hexToColor(it) } ?: colors.NeonGreen,
+                                onContentClick = { onFeedClick(feedItem.id) },
+                                onBookClick = { /* TODO: Book navigation */ }
+                            )
+
+                            Spacer(modifier = Modifier.height(40.dp))
+
+                            if (index != feedItems.lastIndex) {
+                                Spacer(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .height(6.dp)
+                                        .background(colors.DarkGrey02)
+                                )
+                            }
+                        }
+
+                        // 무한 스크롤 로딩 인디케이터
+                        if (uiState?.isLoadingMore == true) {
+                            item {
+                                Box(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .padding(16.dp),
+                                    contentAlignment = Alignment.Center
+                                ) {
+                                    CircularProgressIndicator(
+                                        color = colors.White
+                                    )
+                                }
+                            }
+                        }
+                    }
+                }
+
+                // TopAppBar 오버레이 (고정)
+                GradationTopAppBar(
+                    count = bookDetail.readCount,
+                    autoHideCount = true,
+                    countDisplayDurationMs = 5000L,
+                    onLeftClick = onLeftClick,
+                    onRightClick = {}
+                )
+
+                if (isIntroductionPopupVisible) {
+                    Box(
+                        modifier = Modifier
+                            .align(Alignment.Center)
+                            .padding(horizontal = 20.dp)
+                    ) {
+                        InfoPopup(
+                            title = stringResource(R.string.introduction),
+                            content = bookDetail.description,
+                            onDismiss = { isIntroductionPopupVisible = false }
+                        )
+                    }
+                }
+
+                // FilterDropdown 오버레이
+                SearchFilterDropdownOverlay(
+                    isVisible = isFilterDropdownVisible,
+                    options = filterOptions,
+                    selectedOption = filterOptions[selectedFilterOption],
+                    filterButtonPosition = filterButtonPosition,
+                    density = density,
+                    onOptionSelected = { option ->
+                        onSortChange(option)
+                    },
+                    onDismiss = { isFilterDropdownVisible = false }
+                )
+            }
+        }
+        else -> {}
+    }
+}
+
+// Preview용 Mock 데이터
+private val mockBookDetail = BookDetailResponse(
+    title = "데미안",
+    imageUrl = "https://example.com/demian.jpg",
+    authorName = "헤르만 헤세",
+    publisher = "민음사",
+    isbn = "9788954682152",
+    description = "한 소년의 성장 이야기를 통해 인간의 내면 세계를 탐구한 헤르만 헤세의 대표작. 주인공 싱클레어가 겪는 정신적 성장과 자아 발견의 과정을 그린 소설로, 청소년기의 혼란과 성인으로의 성장을 섬세하게 그려낸다. 선악의 이분법을 넘어서서 인간 내면의 복잡성을 인정하고 받아들이는 과정을 통해 진정한 자아를 찾아가는 이야기다.",
+    recruitingRoomCount = 8,
+    readCount = 1250,
+    isSaved = false
+)
+
+private val mockBookDetailSaved = mockBookDetail.copy(isSaved = true)
+
+@Preview(showBackground = true)
+@Composable
+fun SearchBookDetailScreenContentPreview() {
+    ThipTheme {
+        SearchBookDetailScreenContent(
+            bookDetail = mockBookDetail
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SearchBookDetailScreenContentSavedPreview() {
+    ThipTheme {
+        SearchBookDetailScreenContent(
+            bookDetail = mockBookDetailSaved
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SearchBookDetailScreenContentWithFeedsPreview() {
+    val mockFeedItems = listOf(
+        FeedItem(
+            id = 1L,
+            userProfileImage = "https://example.com/profile1.jpg",
+            userName = "책읽는사람",
+            userRole = "문학 애호가",
+            bookTitle = "데미안",
+            authName = "헤르만 헤세",
+            timeAgo = "2시간 전",
+            content = "이 책을 읽으면서 진정한 자아를 찾아가는 과정에 대해 많은 생각을 하게 되었습니다. 싱클레어의 성장 과정이 현재의 나와 많이 닮아있다고 느꼈어요.",
+            likeCount = 24,
+            commentCount = 8,
+            isLiked = true,
+            isSaved = false,
+            imageUrls = listOf("https://example.com/image1.jpg")
+        ),
+        FeedItem(
+            id = 2L,
+            userProfileImage = "https://example.com/profile2.jpg",
+            userName = "철학독서가",
+            userRole = "인문학 탐구자",
+            bookTitle = "데미안",
+            authName = "헤르만 헤세",
+            timeAgo = "5시간 전",
+            content = "헤세의 작품 중에서도 가장 깊이 있는 성찰을 담고 있는 작품이라고 생각합니다. 선악을 넘어선 인간 내면의 복잡성을 이해하는 데 큰 도움이 되었습니다.",
+            likeCount = 18,
+            commentCount = 12,
+            isLiked = false,
+            isSaved = true,
+            imageUrls = emptyList()
+        ),
+        FeedItem(
+            id = 3L,
+            userProfileImage = "https://example.com/profile3.jpg",
+            userName = "문학소녀",
+            userRole = "소설 리뷰어",
+            bookTitle = "데미안",
+            authName = "헤르만 헤세",
+            timeAgo = "1일 전",
+            content = "청소년기에 읽었을 때와 성인이 되어 다시 읽었을 때의 감상이 완전히 달랐습니다. 나이가 들수록 더 깊이 이해되는 작품이네요.\n\n특히 데미안이라는 인물이 주는 메시지가 인상 깊었어요.",
+            likeCount = 31,
+            commentCount = 15,
+            isLiked = true,
+            isSaved = true,
+            imageUrls = listOf(
+                "https://example.com/image2.jpg",
+                "https://example.com/image3.jpg"
+            )
+        )
+    )
+
+    val mockUiState = BookDetailUiState(
+        bookDetail = mockBookDetail,
+        relatedFeeds = emptyList(), // feedItems로 변환되므로 빈 리스트
+        isLoadingFeeds = false,
+        isLoadingMore = false,
+        currentSort = "like"
+    ).copy(
+        // feedItems를 직접 설정하기 위해 relatedFeeds를 임시로 설정
+        relatedFeeds = mockFeedItems.map { feedItem ->
+            com.texthip.thip.data.model.feed.response.RelatedFeedItem(
+                feedId = feedItem.id.toInt(),
+                creatorId = feedItem.id.toInt(),
+                creatorNickname = feedItem.userName,
+                creatorProfileImageUrl = feedItem.userProfileImage,
+                aliasName = feedItem.userRole,
+                aliasColor = "#FF6B9D",
+                postDate = feedItem.timeAgo,
+                isbn = mockBookDetail.isbn,
+                bookTitle = feedItem.bookTitle,
+                bookAuthor = feedItem.authName,
+                contentBody = feedItem.content,
+                contentUrls = feedItem.imageUrls,
+                likeCount = feedItem.likeCount,
+                commentCount = feedItem.commentCount,
+                isSaved = feedItem.isSaved,
+                isLiked = feedItem.isLiked,
+                isWriter = false
+            )
+        }
+    )
+
+    ThipTheme {
+        SearchBookDetailScreenContent(
+            bookDetail = mockBookDetail,
+            uiState = mockUiState
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SearchBookDetailScreenContentErrorPreview() {
+    ThipTheme {
+        SearchBookDetailScreenContent(
+            error = "책 정보를 불러오는데 실패했습니다."
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/search/screen/SearchBookGroupScreen.kt b/app/src/main/java/com/texthip/thip/ui/search/screen/SearchBookGroupScreen.kt
new file mode 100644
index 00000000..7dc6a485
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/search/screen/SearchBookGroupScreen.kt
@@ -0,0 +1,348 @@
+package com.texthip.thip.ui.search.screen
+
+import androidx.compose.foundation.background
+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.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.cards.CardItemRoom
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.data.model.book.response.RecruitingRoomItem
+import com.texthip.thip.ui.search.viewmodel.SearchBookGroupViewModel
+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 SearchBookGroupScreen(
+    isbn: String,
+    onLeftClick: () -> Unit = {},
+    onCardClick: (Int) -> Unit = {},
+    onCreateRoomClick: (isbn: String, title: String, imageUrl: String, author: String) -> Unit = { _, _, _, _ -> },
+    viewModel: SearchBookGroupViewModel = hiltViewModel()
+) {
+    val uiState by viewModel.uiState.collectAsState()
+
+    LaunchedEffect(isbn) {
+        viewModel.loadRecruitingRooms(isbn)
+    }
+
+
+    SearchBookGroupScreenContent(
+        isLoading = uiState.isLoading,
+        error = uiState.error,
+        recruitingList = uiState.recruitingRooms,
+        totalCount = uiState.totalCount,
+        isLoadingMore = uiState.isLoadingMore,
+        canLoadMore = uiState.canLoadMore,
+        isbn = isbn,
+        bookTitle = uiState.bookDetail?.title ?: "",
+        bookImageUrl = uiState.bookDetail?.imageUrl ?: "",
+        bookAuthor = uiState.bookDetail?.authorName ?: "",
+        onLeftClick = onLeftClick,
+        onCardClick = onCardClick,
+        onCreateRoomClick = onCreateRoomClick,
+        onLoadMore = {
+            viewModel.loadMoreRooms()
+        }
+    )
+}
+
+@Composable
+private fun SearchBookGroupScreenContent(
+    modifier: Modifier = Modifier,
+    isLoading: Boolean = false,
+    error: String? = null,
+    recruitingList: List<RecruitingRoomItem> = emptyList(),
+    totalCount: Int = 0,
+    isLoadingMore: Boolean = false,
+    canLoadMore: Boolean = true,
+    isbn: String = "",
+    bookTitle: String = "",
+    bookImageUrl: String = "",
+    bookAuthor: String = "",
+    onLeftClick: () -> Unit = {},
+    onCardClick: (Int) -> Unit = {},
+    onCreateRoomClick: (isbn: String, title: String, imageUrl: String, author: String) -> Unit = { _, _, _, _ -> },
+    onLoadMore: () -> Unit = {}
+) {
+    when {
+        isLoading -> {
+            Box(
+                modifier = modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                CircularProgressIndicator(
+                    color = colors.White
+                )
+            }
+        }
+
+        error != null -> {
+            Box(
+                modifier = modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                Text(
+                    text = error,
+                    color = colors.White,
+                    style = typography.smalltitle_sb600_s16_h20
+                )
+            }
+        }
+
+        else -> {
+            Box(
+                modifier = modifier.fillMaxSize()
+            ) {
+                // 기존 콘텐츠 Column
+                Column(
+                    Modifier.fillMaxSize()
+                ) {
+                    DefaultTopAppBar(
+                        title = stringResource(R.string.group_recruiting_title),
+                        onLeftClick = onLeftClick,
+                    )
+
+                    Column(
+                        Modifier
+                            .fillMaxSize()
+                            .padding(horizontal = 20.dp)
+                            .padding(top = 16.dp)
+                    ) {
+                        Row(
+                            modifier = Modifier.fillMaxWidth(),
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            Text(
+                                text = stringResource(
+                                    R.string.group_searched_room_size,
+                                    totalCount
+                                ),
+                                color = colors.Grey,
+                                style = typography.menu_m500_s14_h24
+                            )
+                        }
+                        Spacer(
+                            modifier = Modifier
+                                .padding(top = 4.dp, bottom = 20.dp)
+                                .fillMaxWidth()
+                                .height(1.dp)
+                                .background(colors.DarkGrey02)
+                        )
+
+                        if (recruitingList.isEmpty()) {
+                            Column(
+                                modifier = Modifier
+                                    .fillMaxSize()
+                                    .padding(bottom = 50.dp),
+                                horizontalAlignment = Alignment.CenterHorizontally,
+                                verticalArrangement = Arrangement.Center
+                            ) {
+                                Text(
+                                    text = stringResource(R.string.book_recruiting_empty_message),
+                                    color = colors.White,
+                                    style = typography.smalltitle_sb600_s18_h24,
+                                    textAlign = TextAlign.Center
+                                )
+                                Text(
+                                    text = stringResource(R.string.book_recruiting_empty_sub_message),
+                                    color = colors.Grey,
+                                    style = typography.feedcopy_r400_s14_h20,
+                                    textAlign = TextAlign.Center,
+                                    modifier = Modifier.padding(top = 8.dp)
+                                )
+                            }
+                        } else {
+                            val listState = rememberLazyListState()
+
+                            // 무한 스크롤 로직
+                            LaunchedEffect(listState, canLoadMore, isLoadingMore) {
+                                snapshotFlow { listState.layoutInfo.visibleItemsInfo.lastOrNull()?.index }
+                                    .collect { lastVisibleIndex ->
+                                        if (lastVisibleIndex != null &&
+                                            recruitingList.isNotEmpty() &&
+                                            !isLoadingMore &&
+                                            lastVisibleIndex >= recruitingList.size - 3 &&
+                                            canLoadMore
+                                        ) {
+                                            onLoadMore()
+                                        }
+                                    }
+                            }
+
+                            LazyColumn(
+                                state = listState,
+                                verticalArrangement = Arrangement.spacedBy(20.dp),
+                                contentPadding = PaddingValues(bottom = 80.dp),
+                                modifier = Modifier.fillMaxSize()
+                            ) {
+                                items(recruitingList) { item ->
+                                    CardItemRoom(
+                                        title = item.roomName,
+                                        participants = item.memberCount,
+                                        maxParticipants = item.recruitCount,
+                                        isRecruiting = true,
+                                        endDate = item.deadlineEndDate,
+                                        imageUrl = item.bookImageUrl,
+                                        isSecret = !item.isPublic,
+                                        onClick = { onCardClick(item.roomId) }
+                                    )
+                                }
+
+                                // 로딩 인디케이터
+                                if (isLoadingMore) {
+                                    item {
+                                        Box(
+                                            modifier = Modifier
+                                                .fillMaxWidth()
+                                                .padding(16.dp),
+                                            contentAlignment = Alignment.Center
+                                        ) {
+                                            CircularProgressIndicator(
+                                                color = colors.White
+                                            )
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                Button(
+                    colors = ButtonDefaults.buttonColors(
+                        containerColor = colors.Purple
+                    ),
+                    modifier = Modifier
+                        .align(Alignment.BottomCenter) // Box의 하단 중앙에 정렬
+                        .fillMaxWidth()
+                        .height(50.dp),
+                    shape = RoundedCornerShape(0.dp),
+                    onClick = {
+                        onCreateRoomClick(isbn, bookTitle, bookImageUrl, bookAuthor)
+                    }
+                ) {
+                    Text(
+                        text = stringResource(R.string.group_recruiting_create_button),
+                        style = typography.smalltitle_sb600_s18_h24,
+                        color = colors.White
+                    )
+                }
+            }
+        }
+    }
+}
+
+// Preview용 Mock 데이터
+private val mockRecruitingList = listOf(
+    RecruitingRoomItem(
+        roomId = 1,
+        roomName = "데미안 함께 읽기 📚",
+        memberCount = 8,
+        recruitCount = 12,
+        deadlineEndDate = "3일 뒤",
+        bookImageUrl = "https://example.com/demian.jpg",
+        isPublic = true
+    ),
+    RecruitingRoomItem(
+        roomId = 2,
+        roomName = "헤르만 헤세 작품 토론방",
+        memberCount = 15,
+        recruitCount = 20,
+        deadlineEndDate = "7일 뒤",
+        bookImageUrl = "https://example.com/demian.jpg",
+        isPublic = false
+    ),
+    RecruitingRoomItem(
+        roomId = 3,
+        roomName = "클래식 문학 읽기 모임",
+        memberCount = 5,
+        recruitCount = 10,
+        deadlineEndDate = "1일 뒤",
+        bookImageUrl = "https://example.com/demian.jpg",
+        isPublic = true
+    )
+)
+
+@Preview(showBackground = true)
+@Composable
+fun SearchBookGroupScreenContentPreview() {
+    ThipTheme {
+        SearchBookGroupScreenContent(
+            recruitingList = mockRecruitingList,
+            totalCount = 8
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SearchBookGroupScreenContentEmptyPreview() {
+    ThipTheme {
+        SearchBookGroupScreenContent(
+            recruitingList = emptyList(),
+            totalCount = 0
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SearchBookGroupScreenContentLoadingMorePreview() {
+    ThipTheme {
+        SearchBookGroupScreenContent(
+            recruitingList = mockRecruitingList,
+            totalCount = 15,
+            isLoadingMore = true,
+            canLoadMore = true
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SearchBookGroupScreenContentLoadingPreview() {
+    ThipTheme {
+        SearchBookGroupScreenContent(
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SearchBookGroupScreenContentErrorPreview() {
+    ThipTheme {
+        SearchBookGroupScreenContent(
+            error = "모집 중인 그룹을 불러오는데 실패했습니다."
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/search/screen/SearchBookScreen.kt b/app/src/main/java/com/texthip/thip/ui/search/screen/SearchBookScreen.kt
new file mode 100644
index 00000000..36e83c4a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/search/screen/SearchBookScreen.kt
@@ -0,0 +1,349 @@
+package com.texthip.thip.ui.search.screen
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.Lifecycle
+import androidx.lifecycle.LifecycleEventObserver
+import androidx.lifecycle.compose.LocalLifecycleOwner
+import java.text.SimpleDateFormat
+import java.util.Date
+import java.util.Locale
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.forms.SearchBookTextField
+import com.texthip.thip.ui.common.topappbar.LeftNameTopAppBar
+import com.texthip.thip.ui.search.component.SearchActiveField
+import com.texthip.thip.ui.search.component.SearchBookFilteredResult
+import com.texthip.thip.ui.search.component.SearchEmptyResult
+import com.texthip.thip.ui.search.component.SearchRecentBook
+import com.texthip.thip.ui.search.mock.BookData
+import com.texthip.thip.ui.search.viewmodel.SearchBookViewModel
+import com.texthip.thip.ui.theme.ThipTheme
+
+@Composable
+fun SearchBookScreen(
+    modifier: Modifier = Modifier,
+    viewModel: SearchBookViewModel = hiltViewModel(),
+    onBookClick: (String) -> Unit = {},
+    onRequestBook: () -> Unit = {}
+) {
+    val uiState by viewModel.uiState.collectAsState()
+    val lifecycleOwner = LocalLifecycleOwner.current
+
+    DisposableEffect(lifecycleOwner) {
+        val observer = LifecycleEventObserver { _, event ->
+            if (event == Lifecycle.Event.ON_RESUME) {
+                viewModel.refreshData()
+            }
+        }
+        
+        lifecycleOwner.lifecycle.addObserver(observer)
+        
+        onDispose {
+            lifecycleOwner.lifecycle.removeObserver(observer)
+        }
+    }
+
+    SearchBookScreenContent(
+        modifier = modifier,
+        searchQuery = uiState.searchQuery,
+        isInitial = uiState.isInitial,
+        isLiveSearching = uiState.isLiveSearching,
+        isCompleteSearching = uiState.isCompleteSearching,
+        searchResults = uiState.searchResults.map { item ->
+            BookData(
+                title = item.title,
+                author = item.authorName,
+                publisher = item.publisher,
+                imageUrl = item.imageUrl,
+                isbn = item.isbn
+            )
+        },
+        popularBooks = uiState.popularBooks.map { item ->
+            BookData(
+                title = item.title,
+                author = "",
+                publisher = "",
+                imageUrl = item.imageUrl,
+                isbn = item.isbn
+            )
+        },
+        recentSearches = uiState.recentSearches.map { it.searchTerm },
+        totalElements = uiState.totalElements,
+        isSearching = uiState.isSearching,
+        isLoadingMore = uiState.isLoadingMore,
+        canLoadMore = uiState.canLoadMore,
+        hasResults = uiState.hasResults,
+        showEmptyState = uiState.showEmptyState,
+        onSearchQueryChange = { query ->
+            viewModel.updateSearchQuery(query)
+        },
+        onSearchClick = {
+            viewModel.onSearchButtonClick()
+        },
+        onRecentSearchClick = { keyword ->
+            viewModel.updateSearchQuery(keyword)
+            viewModel.onSearchButtonClick()
+        },
+        onRemoveRecentSearch = { keyword ->
+            viewModel.deleteRecentSearchByKeyword(keyword)
+        },
+        onBookClick = { book ->
+            onBookClick(book.isbn)
+        },
+        onLoadMore = {
+            viewModel.loadMoreBooks()
+        },
+        onRequestBook = onRequestBook
+    )
+}
+
+@Composable
+private fun SearchBookScreenContent(
+    modifier: Modifier = Modifier,
+    searchQuery: String = "",
+    isInitial: Boolean = true,
+    isLiveSearching: Boolean = false,
+    isCompleteSearching: Boolean = false,
+    searchResults: List<BookData> = emptyList(),
+    popularBooks: List<BookData> = emptyList(),
+    recentSearches: List<String> = emptyList(),
+    totalElements: Int = 0,
+    isSearching: Boolean = false,
+    isLoadingMore: Boolean = false,
+    canLoadMore: Boolean = true,
+    hasResults: Boolean = false,
+    showEmptyState: Boolean = false,
+    onSearchQueryChange: (String) -> Unit = {},
+    onSearchClick: () -> Unit = {},
+    onRecentSearchClick: (String) -> Unit = {},
+    onRemoveRecentSearch: (String) -> Unit = {},
+    onBookClick: (BookData) -> Unit = {},
+    onLoadMore: () -> Unit = {},
+    onRequestBook: () -> Unit = {}
+) {
+    val focusRequester = remember { FocusRequester() }
+    val focusManager = LocalFocusManager.current
+
+    Box(
+        modifier = modifier.fillMaxSize()
+    ) {
+        Column(
+            modifier = Modifier.fillMaxSize()
+        ) {
+            LeftNameTopAppBar(
+                title = stringResource(R.string.book_search_topappbar)
+            )
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(horizontal = 20.dp)
+            ) {
+                Spacer(modifier = Modifier.height(16.dp))
+
+                SearchBookTextField(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .focusRequester(focusRequester),
+                    hint = stringResource(R.string.book_search_hint),
+                    text = searchQuery,
+                    onValueChange = onSearchQueryChange,
+                    onSearch = { 
+                        onSearchClick()
+                        focusManager.clearFocus()
+                    }
+                )
+                Spacer(modifier = Modifier.height(16.dp))
+
+                if (isInitial) {
+                    SearchRecentBook(
+                        recentSearches = recentSearches,
+                        popularBooks = popularBooks,
+                        popularBookDate = SimpleDateFormat("MM.dd", Locale.getDefault()).format(Date()),
+                        onSearchClick = onRecentSearchClick,
+                        onRemove = onRemoveRecentSearch,
+                        onBookClick = onBookClick
+                    )
+                } else if (isLiveSearching) {
+                    if (hasResults) {
+                        SearchActiveField(
+                            bookList = searchResults,
+                            isLoading = isSearching || isLoadingMore,
+                            hasMore = canLoadMore,
+                            onLoadMore = onLoadMore,
+                            onBookClick = onBookClick
+                        )
+                    } else if (showEmptyState) {
+                        SearchEmptyResult(
+                            mainText = stringResource(R.string.book_no_search_result1),
+                            subText = stringResource(R.string.book_no_search_result2),
+                            onRequestBook = onRequestBook
+                        )
+                    }
+                } else if (isCompleteSearching) {
+                    if (hasResults) {
+                        SearchBookFilteredResult(
+                            resultCount = totalElements,
+                            bookList = searchResults,
+                            isLoading = isSearching || isLoadingMore,
+                            hasMore = canLoadMore,
+                            onLoadMore = onLoadMore,
+                            onBookClick = onBookClick
+                        )
+                    } else if (showEmptyState) {
+                        SearchEmptyResult(
+                            mainText = stringResource(R.string.book_no_search_result1),
+                            subText = stringResource(R.string.book_no_search_result2),
+                            onRequestBook = onRequestBook
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+// Preview용 Mock 데이터
+private val mockPopularBooks = listOf(
+    BookData(
+        title = "데미안",
+        author = "헤르만 헤세",
+        publisher = "민음사",
+        imageUrl = "https://example.com/demian.jpg",
+        isbn = "9788954682152"
+    ),
+    BookData(
+        title = "1984",
+        author = "조지 오웰", 
+        publisher = "민음사",
+        imageUrl = "https://example.com/1984.jpg",
+        isbn = "9788954682153"
+    ),
+    BookData(
+        title = "어린왕자",
+        author = "생텍쥐페리",
+        publisher = "문예출판사",
+        imageUrl = "https://example.com/prince.jpg",
+        isbn = "9788954682154"
+    )
+)
+
+private val mockSearchResults = listOf(
+    BookData(
+        title = "데미안",
+        author = "헤르만 헤세",
+        publisher = "민음사",
+        imageUrl = "https://example.com/demian.jpg",
+        isbn = "9788954682152"
+    ),
+    BookData(
+        title = "데미안 읽기의 즐거움",
+        author = "김철수",
+        publisher = "문학동네",
+        imageUrl = "https://example.com/demian2.jpg",
+        isbn = "9788954682155"
+    ),
+    BookData(
+        title = "헤르만 헤세의 데미안 해설서",
+        author = "이영희",
+        publisher = "해냄출판사",
+        imageUrl = "https://example.com/demian3.jpg",
+        isbn = "9788954682156"
+    )
+)
+
+private val mockRecentSearches = listOf("데미안", "1984", "어린왕자", "카프카", "괴테")
+
+@Preview(showBackground = true)
+@Composable
+fun SearchBookScreenContentInitialPreview() {
+    ThipTheme {
+        SearchBookScreenContent(
+            isInitial = true,
+            popularBooks = mockPopularBooks,
+            recentSearches = mockRecentSearches
+        )
+    }
+}
+
+@Preview(showBackground = true) 
+@Composable
+fun SearchBookScreenContentLiveSearchPreview() {
+    ThipTheme {
+        SearchBookScreenContent(
+            searchQuery = "데미안",
+            isInitial = false,
+            isLiveSearching = true,
+            searchResults = mockSearchResults,
+            hasResults = true,
+            isSearching = false
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SearchBookScreenContentCompleteSearchPreview() {
+    ThipTheme {
+        SearchBookScreenContent(
+            searchQuery = "데미안",
+            isInitial = false,
+            isCompleteSearching = true,
+            searchResults = mockSearchResults,
+            totalElements = 15,
+            hasResults = true,
+            isSearching = false
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SearchBookScreenContentEmptyPreview() {
+    ThipTheme {
+        SearchBookScreenContent(
+            searchQuery = "없는책제목",
+            isInitial = false,
+            isCompleteSearching = true,
+            searchResults = emptyList(),
+            hasResults = false,
+            showEmptyState = true
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun SearchBookScreenContentLoadingPreview() {
+    ThipTheme {
+        SearchBookScreenContent(
+            searchQuery = "데미안",
+            isInitial = false,
+            isCompleteSearching = true,
+            searchResults = mockSearchResults.take(2),
+            totalElements = 15,
+            hasResults = true,
+            isSearching = false,
+            isLoadingMore = true,
+            canLoadMore = true
+        )
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/search/viewmodel/BookDetailViewModel.kt b/app/src/main/java/com/texthip/thip/ui/search/viewmodel/BookDetailViewModel.kt
new file mode 100644
index 00000000..9984747c
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/search/viewmodel/BookDetailViewModel.kt
@@ -0,0 +1,195 @@
+package com.texthip.thip.ui.search.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.R
+import com.texthip.thip.data.model.book.response.BookDetailResponse
+import com.texthip.thip.data.model.feed.response.RelatedFeedItem
+import com.texthip.thip.data.provider.StringResourceProvider
+import com.texthip.thip.ui.mypage.mock.FeedItem
+import com.texthip.thip.data.repository.BookRepository
+import com.texthip.thip.data.repository.FeedRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+
+data class BookDetailUiState(
+    val bookDetail: BookDetailResponse? = null,
+    val isLoading: Boolean = false,
+    val isSaving: Boolean = false,
+    val error: String? = null,
+    val relatedFeeds: List<RelatedFeedItem> = emptyList(),
+    val isLoadingFeeds: Boolean = false,
+    val isLoadingMore: Boolean = false,
+    val nextCursor: String? = null,
+    val isLast: Boolean = false,
+    val currentSort: String = "like",
+    val feedError: String? = null
+) {
+    val feedItems: List<FeedItem>
+        get() = relatedFeeds.map { it.toFeedItem() }
+}
+
+@HiltViewModel
+class BookDetailViewModel @Inject constructor(
+    private val bookRepository: BookRepository,
+    private val feedRepository: FeedRepository,
+    private val stringResourceProvider: StringResourceProvider
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(BookDetailUiState())
+    val uiState: StateFlow<BookDetailUiState> = _uiState.asStateFlow()
+
+    private fun updateState(update: (BookDetailUiState) -> BookDetailUiState) {
+        _uiState.value = update(_uiState.value)
+    }
+
+    fun loadBookDetail(isbn: String) {
+        viewModelScope.launch {
+            updateState { it.copy(isLoading = true, error = null) }
+
+            bookRepository.getBookDetail(isbn)
+                .onSuccess { bookDetail ->
+                    updateState {
+                        it.copy(
+                            bookDetail = bookDetail,
+                            isLoading = false,
+                            error = null
+                        )
+                    }
+                    // 책 상세 정보 로드 후 관련 피드도 로드
+                    loadRelatedFeeds(isbn, "like")
+                }
+                .onFailure { exception ->
+                    updateState {
+                        it.copy(
+                            isLoading = false,
+                            error = exception.message
+                                ?: stringResourceProvider.getString(R.string.error_book_detail_load_failed)
+                        )
+                    }
+                }
+        }
+    }
+
+    fun loadRelatedFeeds(isbn: String, sort: String = "like") {
+        viewModelScope.launch {
+            updateState { it.copy(isLoadingFeeds = true) }
+
+            feedRepository.getRelatedBookFeeds(isbn, sort, null)
+                .onSuccess { response ->
+                    updateState {
+                        it.copy(
+                            relatedFeeds = response?.feeds ?: emptyList(),
+                            nextCursor = response?.nextCursor,
+                            isLast = response?.isLast ?: true,
+                            isLoadingFeeds = false,
+                            currentSort = sort
+                        )
+                    }
+                }
+                .onFailure { exception ->
+                    updateState {
+                        it.copy(
+                            isLoadingFeeds = false,
+                            feedError = exception.message
+                        )
+                    }
+                }
+        }
+    }
+
+    fun loadMoreFeeds(isbn: String) {
+        val currentState = _uiState.value
+        if (currentState.isLoadingMore || currentState.isLast || currentState.nextCursor == null) return
+
+        viewModelScope.launch {
+            updateState { it.copy(isLoadingMore = true) }
+
+            feedRepository.getRelatedBookFeeds(
+                isbn,
+                currentState.currentSort,
+                currentState.nextCursor
+            )
+                .onSuccess { response ->
+                    updateState { state ->
+                        state.copy(
+                            relatedFeeds = currentState.relatedFeeds + (response?.feeds
+                                ?: emptyList()),
+                            nextCursor = response?.nextCursor,
+                            isLast = response?.isLast ?: true,
+                            isLoadingMore = false
+                        )
+                    }
+                }
+                .onFailure { exception ->
+                    updateState { state ->
+                        state.copy(
+                            isLoadingMore = false,
+                            feedError = exception.message
+                        )
+                    }
+                }
+        }
+    }
+
+    fun changeSortOrder(isbn: String, sort: String) {
+        if (_uiState.value.currentSort != sort) {
+            loadRelatedFeeds(isbn, sort)
+        }
+    }
+
+    fun saveBook(isbn: String, type: Boolean) {
+        viewModelScope.launch {
+            updateState { it.copy(isSaving = true, error = null) }
+
+            bookRepository.saveBook(isbn, type)
+                .onSuccess { saveResponse ->
+                    saveResponse?.let { it ->
+                        // 책 상세 정보의 isSaved 상태 업데이트
+                        val updatedBookDetail =
+                            _uiState.value.bookDetail?.copy(isSaved = it.isSaved)
+                        updateState {
+                            it.copy(
+                                bookDetail = updatedBookDetail,
+                                isSaving = false,
+                                error = null
+                            )
+                        }
+                    }
+                }
+                .onFailure { exception ->
+                    updateState {
+                        it.copy(
+                            isSaving = false,
+                            error = exception.message
+                                ?: stringResourceProvider.getString(R.string.error_book_save_failed)
+                        )
+                    }
+                }
+        }
+    }
+}
+
+// RelatedFeedItem을 FeedItem으로 변환하는 확장 함수
+private fun RelatedFeedItem.toFeedItem(): FeedItem {
+    return FeedItem(
+        id = this.feedId.toLong(),
+        userProfileImage = this.creatorProfileImageUrl,
+        userName = this.creatorNickname,
+        userRole = this.aliasName,
+        bookTitle = this.bookTitle,
+        authName = this.bookAuthor,
+        timeAgo = this.postDate,
+        content = this.contentBody,
+        likeCount = this.likeCount,
+        commentCount = this.commentCount,
+        isLiked = this.isLiked,
+        isSaved = this.isSaved,
+        imageUrls = this.contentUrls
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/search/viewmodel/SearchBookGroupViewModel.kt b/app/src/main/java/com/texthip/thip/ui/search/viewmodel/SearchBookGroupViewModel.kt
new file mode 100644
index 00000000..5cc6ba34
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/search/viewmodel/SearchBookGroupViewModel.kt
@@ -0,0 +1,118 @@
+package com.texthip.thip.ui.search.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.R
+import com.texthip.thip.data.model.book.response.BookDetailResponse
+import com.texthip.thip.data.model.book.response.RecruitingRoomItem
+import com.texthip.thip.data.provider.StringResourceProvider
+import com.texthip.thip.data.repository.BookRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class SearchBookGroupViewModel @Inject constructor(
+    private val bookRepository: BookRepository,
+    private val stringResourceProvider: StringResourceProvider
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(SearchBookGroupUiState())
+    val uiState: StateFlow<SearchBookGroupUiState> = _uiState.asStateFlow()
+    
+    private var loadMoreJob: Job? = null
+    private var currentIsbn: String = ""
+
+    fun loadRecruitingRooms(isbn: String) {
+        loadMoreJob?.cancel() // 신규 검색 시 이전 로드 작업 취소
+        currentIsbn = isbn
+        viewModelScope.launch {
+            _uiState.value = _uiState.value.copy(
+                isLoading = true, 
+                error = null,
+                recruitingRooms = emptyList(),
+                nextCursor = null,
+                hasMore = true,
+                totalCount = 0,
+                bookDetail = null
+            )
+            
+            // 책 정보와 모집중인 방 정보 동시 로드
+            loadBookDetail(isbn)
+            loadRooms(isbn, null)
+        }
+    }
+
+    private suspend fun loadBookDetail(isbn: String) {
+        bookRepository.getBookDetail(isbn)
+            .onSuccess { bookDetail ->
+                _uiState.value = _uiState.value.copy(bookDetail = bookDetail)
+            }
+            .onFailure { }
+    }
+
+    fun loadMoreRooms() {
+        val currentState = _uiState.value
+        if (currentState.hasMore && !currentState.isLoading && !currentState.isLoadingMore && currentIsbn.isNotBlank()) {
+            loadMoreJob?.cancel()
+            loadMoreJob = viewModelScope.launch {
+                _uiState.value = _uiState.value.copy(isLoadingMore = true)
+                loadRooms(currentIsbn, currentState.nextCursor)
+            }
+        }
+    }
+
+    private suspend fun loadRooms(isbn: String, cursor: String?) {
+        bookRepository.getRecruitingRooms(isbn, cursor)
+            .onSuccess { response ->
+                response?.let { recruitingRoomsResponse ->
+                    val currentRooms = if (cursor == null) emptyList() else _uiState.value.recruitingRooms
+                    _uiState.value = _uiState.value.copy(
+                        recruitingRooms = currentRooms + recruitingRoomsResponse.recruitingRoomList,
+                        totalCount = recruitingRoomsResponse.totalRoomCount,
+                        nextCursor = recruitingRoomsResponse.nextCursor,
+                        hasMore = !recruitingRoomsResponse.isLast,
+                        isLoading = false,
+                        isLoadingMore = false,
+                        error = null
+                    )
+                } ?: run {
+                    _uiState.value = _uiState.value.copy(
+                        isLoading = false,
+                        isLoadingMore = false,
+                        hasMore = false, // null 응답 시 더 이상 로드할 수 없음을 명시
+                        error = if (cursor == null) stringResourceProvider.getString(R.string.error_recruiting_rooms_not_found) else null
+                    )
+                }
+            }
+            .onFailure { exception ->
+                _uiState.value = _uiState.value.copy(
+                    isLoading = false,
+                    isLoadingMore = false,
+                    error = exception.message ?: stringResourceProvider.getString(R.string.error_recruiting_rooms_load_failed)
+                )
+            }
+    }
+
+    override fun onCleared() {
+        super.onCleared()
+        loadMoreJob?.cancel()
+    }
+}
+
+data class SearchBookGroupUiState(
+    val recruitingRooms: List<RecruitingRoomItem> = emptyList(),
+    val totalCount: Int = 0,
+    val nextCursor: String? = null,
+    val hasMore: Boolean = true,
+    val isLoading: Boolean = false,
+    val isLoadingMore: Boolean = false,
+    val error: String? = null,
+    val bookDetail: BookDetailResponse? = null
+) {
+    val canLoadMore: Boolean get() = hasMore && !isLoading && !isLoadingMore
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/search/viewmodel/SearchBookUiState.kt b/app/src/main/java/com/texthip/thip/ui/search/viewmodel/SearchBookUiState.kt
new file mode 100644
index 00000000..5dd3278a
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/search/viewmodel/SearchBookUiState.kt
@@ -0,0 +1,37 @@
+package com.texthip.thip.ui.search.viewmodel
+
+import com.texthip.thip.data.model.book.response.BookSearchItem
+import com.texthip.thip.data.model.book.response.PopularBookItem
+import com.texthip.thip.data.model.book.response.RecentSearchItem
+
+data class SearchBookUiState(
+    val searchQuery: String = "",
+    
+    // 상태 관리 단순화 - boolean 필드 사용
+    val isInitial: Boolean = true,
+    val isLiveSearching: Boolean = false,
+    val isCompleteSearching: Boolean = false,
+    
+    // 통합된 검색 결과 (Live/Complete 구분 없이)
+    val searchResults: List<BookSearchItem> = emptyList(),
+    val popularBooks: List<PopularBookItem> = emptyList(),
+    val recentSearches: List<RecentSearchItem> = emptyList(),
+    
+    // 로딩 상태
+    val isSearching: Boolean = false,
+    val isLoadingMore: Boolean = false,
+    
+    // 페이징 정보
+    val currentPage: Int = 1,
+    val totalElements: Int = 0,
+    val hasMorePages: Boolean = true,
+    
+    // 에러/토스트
+    val error: String? = null,
+    val showToast: Boolean = false,
+    val toastMessage: String = ""
+) {
+    val hasResults: Boolean get() = searchResults.isNotEmpty()
+    val canLoadMore: Boolean get() = hasMorePages && !isSearching && !isLoadingMore
+    val showEmptyState: Boolean get() = searchQuery.isNotBlank() && searchResults.isEmpty() && !isSearching
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/search/viewmodel/SearchBookViewModel.kt b/app/src/main/java/com/texthip/thip/ui/search/viewmodel/SearchBookViewModel.kt
new file mode 100644
index 00000000..4a0445c3
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/search/viewmodel/SearchBookViewModel.kt
@@ -0,0 +1,271 @@
+package com.texthip.thip.ui.search.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.model.book.response.RecentSearchItem
+import com.texthip.thip.data.repository.BookRepository
+import com.texthip.thip.data.repository.RecentSearchRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class SearchBookViewModel @Inject constructor(
+    private val bookRepository: BookRepository,
+    private val recentSearchRepository: RecentSearchRepository
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(SearchBookUiState())
+    val uiState: StateFlow<SearchBookUiState> = _uiState.asStateFlow()
+    
+    private var searchJob: Job? = null
+    private var loadMoreJob: Job? = null
+    
+    // Map 기반 빠른 최근 검색어 관리
+    private val recentSearchMap = mutableMapOf<String, RecentSearchItem>()
+
+    init {
+        loadInitialData()
+    }
+    
+    private fun updateState(update: (SearchBookUiState) -> SearchBookUiState) {
+        _uiState.update(update)
+    }
+
+    fun updateSearchQuery(query: String) {
+        updateState { it.copy(searchQuery = query) }
+        searchJob?.cancel()
+        loadMoreJob?.cancel()
+
+        if (query.isNotBlank()) {
+            updateState { 
+                it.copy(
+                    isInitial = false,
+                    isLiveSearching = true,
+                    isCompleteSearching = false
+                ) 
+            }
+            searchJob = viewModelScope.launch {
+                delay(300)
+                performSearch(query, isLiveSearch = true)
+            }
+        } else {
+            clearSearchResults()
+        }
+    }
+
+    fun onSearchButtonClick() {
+        val query = uiState.value.searchQuery.trim()
+        if (query.isNotBlank()) {
+            searchJob?.cancel()
+            loadMoreJob?.cancel()
+
+            updateState { 
+                it.copy(
+                    isInitial = false,
+                    isLiveSearching = false,
+                    isCompleteSearching = true
+                ) 
+            }
+            viewModelScope.launch {
+                performSearch(query, isLiveSearch = false)
+                loadRecentSearches()
+            }
+        }
+    }
+
+    fun loadMoreBooks() {
+        val currentState = uiState.value
+        if (currentState.canLoadMore && currentState.searchQuery.isNotBlank()) {
+            loadMoreJob?.cancel()
+            loadMoreJob = viewModelScope.launch {
+                performLoadMore()
+            }
+        }
+    }
+
+    private suspend fun performSearch(query: String, isLiveSearch: Boolean) {
+        updateState { 
+            it.copy(
+                isSearching = true,
+                error = null,
+                searchResults = emptyList(),
+                currentPage = 1
+            ) 
+        }
+
+        bookRepository.searchBooks(query, 1, isFinalized = !isLiveSearch)
+            .onSuccess { response ->
+                response?.let { searchResponse ->
+                    updateState {
+                        it.copy(
+                            searchResults = searchResponse.searchResult,
+                            currentPage = searchResponse.page,
+                            totalElements = searchResponse.totalElements,
+                            hasMorePages = !searchResponse.last,
+                            isSearching = false,
+                            error = null
+                        )
+                    }
+                } ?: run {
+                    updateState {
+                        it.copy(
+                            searchResults = emptyList(),
+                            isSearching = false,
+                            isLiveSearching = false,
+                            isCompleteSearching = false,
+                            hasMorePages = false,
+                            error = if (isLiveSearch) null else "검색 결과를 불러올 수 없습니다."
+                        )
+                    }
+                }
+            }
+            .onFailure { throwable ->
+                updateState {
+                    it.copy(
+                        searchResults = emptyList(),
+                        isSearching = false,
+                        isLiveSearching = false,
+                        isCompleteSearching = false,
+                        error = if (isLiveSearch) null else (throwable.message ?: "검색 중 오류가 발생했습니다.")
+                    )
+                }
+            }
+    }
+
+    private suspend fun performLoadMore() {
+        val currentState = uiState.value
+        val nextPage = currentState.currentPage + 1
+        
+        updateState { it.copy(isLoadingMore = true) }
+
+        bookRepository.searchBooks(currentState.searchQuery, nextPage, isFinalized = true)
+            .onSuccess { response ->
+                response?.let { searchResponse ->
+                    updateState {
+                        it.copy(
+                            searchResults = it.searchResults + searchResponse.searchResult,
+                            currentPage = searchResponse.page,
+                            totalElements = searchResponse.totalElements,
+                            hasMorePages = !searchResponse.last,
+                            isLoadingMore = false,
+                            error = null
+                        )
+                    }
+                } ?: run {
+                    updateState {
+                        it.copy(
+                            isLoadingMore = false,
+                            hasMorePages = false, // null 응답 시 더 이상 페이지가 없음을 명시
+                            error = "추가 결과를 불러올 수 없습니다."
+                        )
+                    }
+                }
+            }
+            .onFailure { throwable ->
+                updateState {
+                    it.copy(
+                        isLoadingMore = false,
+                        error = throwable.message ?: "추가 결과를 불러오는 중 오류가 발생했습니다."
+                    )
+                }
+            }
+    }
+
+    private fun loadInitialData() {
+        loadPopularBooks()
+        loadRecentSearches()
+    }
+
+    private fun loadPopularBooks() {
+        viewModelScope.launch {
+            bookRepository.getMostSearchedBooks()
+                .onSuccess { response ->
+                    response?.let { mostSearchedBooks ->
+                        updateState {
+                            it.copy(popularBooks = mostSearchedBooks.bookList)
+                        }
+                    }
+                }
+                .onFailure {
+                    // 인기 책 로딩 실패는 조용히 처리
+                }
+        }
+    }
+
+    private fun loadRecentSearches() {
+        viewModelScope.launch {
+            recentSearchRepository.getRecentSearches("BOOK")
+                .onSuccess { response ->
+                    response?.let { recentSearchResponse ->
+                        // Map에 최근 검색어 저장 (빠른 검색을 위해)
+                        recentSearchMap.clear()
+                        recentSearchResponse.recentSearchList.forEach { item ->
+                            recentSearchMap[item.searchTerm] = item
+                        }
+                        
+                        updateState {
+                            it.copy(recentSearches = recentSearchResponse.recentSearchList)
+                        }
+                    }
+                }
+                .onFailure {
+                    // 최근 검색어 로딩 실패는 조용히 처리
+                }
+        }
+    }
+
+    fun deleteRecentSearch(recentSearchId: Int) {
+        viewModelScope.launch {
+            recentSearchRepository.deleteRecentSearch(recentSearchId)
+                .onSuccess {
+                    loadRecentSearches() // 삭제 성공 시 목록 새로고침
+                }
+                .onFailure {
+                    // 삭제 실패는 조용히 처리
+                }
+        }
+    }
+    
+    /** 키워드로 빠른 최근 검색어 삭제 (Map 기반) */
+    fun deleteRecentSearchByKeyword(keyword: String) {
+        recentSearchMap[keyword]?.let { recentSearchItem ->
+            deleteRecentSearch(recentSearchItem.recentSearchId)
+        }
+    }
+
+    private fun clearSearchResults() {
+        searchJob?.cancel()
+        loadMoreJob?.cancel()
+        updateState {
+            it.copy(
+                searchQuery = "",
+                isInitial = true,
+                isLiveSearching = false,
+                isCompleteSearching = false,
+                searchResults = emptyList(),
+                currentPage = 1,
+                hasMorePages = true,
+                isSearching = false,
+                isLoadingMore = false,
+                error = null
+            )
+        }
+    }
+
+    fun refreshData() {
+        loadInitialData()
+    }
+
+    override fun onCleared() {
+        super.onCleared()
+        searchJob?.cancel()
+        loadMoreJob?.cancel()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/signin/mock/SignupUserInfo.kt b/app/src/main/java/com/texthip/thip/ui/signin/mock/SignupUserInfo.kt
new file mode 100644
index 00000000..5cf10465
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/mock/SignupUserInfo.kt
@@ -0,0 +1,7 @@
+package com.texthip.thip.ui.signin.mock
+
+data class SignupUserInfo(
+    val nickname: String,
+    val profileImage: String?,
+    val role: String
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/signin/screen/LoginScreen.kt b/app/src/main/java/com/texthip/thip/ui/signin/screen/LoginScreen.kt
new file mode 100644
index 00000000..a8c7df42
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/screen/LoginScreen.kt
@@ -0,0 +1,180 @@
+package com.texthip.thip.ui.signin.screen
+
+import android.app.Activity
+import android.widget.Toast
+import androidx.activity.compose.rememberLauncherForActivityResult
+import androidx.activity.result.contract.ActivityResultContracts
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color.Companion.Unspecified
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.google.android.gms.auth.api.signin.GoogleSignIn
+import com.google.android.gms.auth.api.signin.GoogleSignInOptions
+import com.google.android.gms.common.api.ApiException
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.ActionMediumButton
+import com.texthip.thip.ui.signin.viewmodel.LoginUiState
+import com.texthip.thip.ui.signin.viewmodel.LoginViewModel
+import com.texthip.thip.ui.theme.Purple
+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 LoginScreen(
+    onNavigateToSignup: () -> Unit,
+    onLoginSuccess: () -> Unit,
+    viewModel: LoginViewModel = hiltViewModel()
+) {
+    val context = LocalContext.current
+    val uiState = viewModel.uiState.collectAsStateWithLifecycle().value //by 오류로 인해 변경함
+
+    val googleSignInLauncher = rememberLauncherForActivityResult(
+        contract = ActivityResultContracts.StartActivityForResult(),
+        onResult = { result ->
+            if (result.resultCode == Activity.RESULT_OK) {
+                val task = GoogleSignIn.getSignedInAccountFromIntent(result.data)
+                try {
+                    // 성공 시, ID 토큰을 ViewModel으로 전달
+                    val account = task.getResult(ApiException::class.java)!!
+                    val idToken = account.idToken!!
+                    viewModel.googleLogin(idToken)
+                } catch (e: ApiException) {
+                    // 실패 시 에러 처리
+                    Toast.makeText(context, "구글 로그인에 실패했습니다.", Toast.LENGTH_SHORT).show()
+                }
+            }
+        }
+    )
+
+    //구글 로그인 클라이언트
+    val googleSignInClient = remember {
+        val gso = GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
+            .requestIdToken(context.getString(R.string.default_web_client_id))
+            .requestEmail()
+            .build()
+        GoogleSignIn.getClient(context, gso)
+    }
+
+    // uiState가 바뀔 때마다 실행되어 화면 이동이나 토스트 메시지 등을 처리
+    LaunchedEffect(key1 = uiState) {
+        when (val state = uiState) {
+            is LoginUiState.Success -> {
+                if (state.response.isNewUser) {
+                    onNavigateToSignup()
+                } else {
+                    onLoginSuccess()
+                }
+                viewModel.clearLoginState() // 상태 초기화
+            }
+
+            is LoginUiState.Error -> {
+                Toast.makeText(context, state.message, Toast.LENGTH_SHORT).show()
+                viewModel.clearLoginState() // 상태 초기화
+            }
+            else -> {}
+        }
+    }
+
+    Box(modifier = Modifier.fillMaxSize()) {
+        LoginContent(
+            onKakaoLoginClick = { viewModel.kakaoLogin(context) },
+            onGoogleLoginClick = { googleSignInLauncher.launch(googleSignInClient.signInIntent)}
+        )
+
+        // 로딩 중일 때 화면 전체에 로딩 인디케이터 표시
+        if (uiState is LoginUiState.Loading) {
+            Box(
+                contentAlignment = Alignment.Center,
+                modifier = Modifier.fillMaxSize()
+            ) {
+                CircularProgressIndicator()
+            }
+        }
+    }
+}
+@Composable
+fun LoginContent(
+    onKakaoLoginClick: () -> Unit,
+    onGoogleLoginClick: () -> Unit
+) {
+    Column(
+        Modifier
+            .background(colors.Black)
+            .padding(horizontal = 20.dp)
+            .fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Spacer(modifier = Modifier.height(300.dp))
+        Icon(
+            painter = painterResource(R.drawable.ic_logo),
+            contentDescription = null,
+            tint = Unspecified,
+        )
+        Spacer(modifier = Modifier.height(24.dp))
+        Text(
+            text = buildAnnotatedString {
+                withStyle(style = SpanStyle(color = Purple)) {
+                    append(stringResource(R.string.splash_thip))
+                }
+                append(stringResource(R.string.splash_ment))
+            },
+            style = typography.smalltitle_sb600_s18_h24,
+            color = colors.White
+        )
+        Spacer(modifier = Modifier.height(140.dp))
+        ActionMediumButton(
+            text = stringResource(R.string.kakao_login),
+            icon = painterResource(R.drawable.ic_kakaotalk),
+            iconSize = 21,
+            contentColor = colors.Black,
+            backgroundColor = colors.KakaoYellow,
+            hasRightIcon = false,
+            modifier = Modifier.fillMaxWidth(),
+            onClick = onKakaoLoginClick,
+        )
+        Spacer(modifier = Modifier.height(20.dp))
+        ActionMediumButton(
+            text = stringResource(R.string.google_login),
+            icon = painterResource(R.drawable.ic_google),
+            iconSize = 21,
+            contentColor = colors.Black,
+            backgroundColor = colors.White,
+            hasRightIcon = false,
+            modifier = Modifier.fillMaxWidth(),
+            onClick = onGoogleLoginClick,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun LoginContentPreview() {
+    ThipTheme {
+        LoginContent(onKakaoLoginClick = {}, onGoogleLoginClick = {})
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupDoneScreen.kt b/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupDoneScreen.kt
new file mode 100644
index 00000000..06202822
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupDoneScreen.kt
@@ -0,0 +1,151 @@
+package com.texthip.thip.ui.signin.screen
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.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.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.AsyncImage
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.ActionMediumButton
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.signin.mock.SignupUserInfo
+import com.texthip.thip.ui.theme.Grey
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+
+@Composable
+fun SignupDoneScreen(
+    userInfo: SignupUserInfo,
+    onNavigateToMain: () -> Unit
+) {
+    val nickname = userInfo.nickname
+    val profileImage = userInfo.profileImage
+    val role = userInfo.role
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            isRightIconVisible = false,
+            isTitleVisible = false,
+            onLeftClick = {},
+        )
+        Spacer(modifier = Modifier.height(40.dp))
+        Column(
+            modifier = Modifier
+                .padding(horizontal = 20.dp)
+                .fillMaxWidth()
+        ) {
+            Text(
+                text = stringResource(R.string.hello_user, nickname),
+                style = typography.smalltitle_sb600_s18_h24,
+                color = colors.White,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 8.dp)
+            )
+            Spacer(modifier = Modifier.height(8.dp))
+            Text(
+                text = stringResource(R.string.signin_done),
+                style = typography.copy_m500_s14_h20,
+                color = colors.Grey,
+                modifier = Modifier
+                    .fillMaxWidth()
+            )
+            Spacer(modifier = Modifier.height(100.dp))
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth(),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                if (profileImage != null) {
+                    Box(
+                        modifier = Modifier
+                            .size(54.dp)
+                            .clip(CircleShape)
+                            .border(width = 1.dp, color = colors.White, shape = CircleShape)
+                            .background(colors.Black),
+                        contentAlignment = Alignment.BottomCenter
+                    ) {
+                        AsyncImage(
+                            model = userInfo.profileImage,
+                            contentDescription = null,
+                            contentScale = ContentScale.Fit,
+                            modifier = Modifier
+                                .size(45.dp)
+                                .offset(y = 2.dp)
+                        )
+                    }
+                } else {
+                    Box(
+                        modifier = Modifier
+                            .size(54.dp)
+                            .clip(CircleShape)
+                            .border(width = 0.5.dp, color = colors.Grey01, shape = CircleShape)
+                            .background(Grey)
+                    )
+                }
+                Spacer(modifier = Modifier.height(8.dp))
+                Text(
+                    text = nickname,
+                    style = typography.smalltitle_sb600_s18_h24,
+                    color = colors.White,
+                    modifier = Modifier
+                        .padding(bottom = 4.dp)
+                )
+                //TODO role color는  role과 매핑되도록 수정 필요
+                Text(
+                    text = role,
+                    style = typography.copy_r400_s14,
+                    color = colors.White,
+                    modifier = Modifier
+                )
+                Spacer(modifier = Modifier.height(76.dp))
+                ActionMediumButton(
+                    text = stringResource(R.string.start_thip),
+                    contentColor = colors.White,
+                    backgroundColor = colors.Purple,
+                    modifier = Modifier.width(180.dp),
+                    onClick = onNavigateToMain,
+                )
+            }
+
+        }
+
+    }
+}
+
+@Preview
+@Composable
+private fun SignupDoneScreenPrev() {
+    SignupDoneScreen(
+        userInfo = SignupUserInfo(
+            nickname = "JJUYAA",
+            profileImage = "",
+            role = "칭호칭호"
+        ),
+        onNavigateToMain = {}
+    )
+}
\ No newline at end of file
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..52cb3f18
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupGenreScreen.kt
@@ -0,0 +1,147 @@
+package com.texthip.thip.ui.signin.screen
+
+import androidx.compose.foundation.layout.Arrangement
+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.layout.statusBarsPadding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.itemsIndexed
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.texthip.thip.R
+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.signin.viewmodel.SignupUiState
+import com.texthip.thip.ui.signin.viewmodel.SignupViewModel
+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 SignupGenreScreen(
+    viewModel: SignupViewModel = hiltViewModel(),
+    onSignupSuccess: () -> Unit
+) {
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+
+    LaunchedEffect(Unit) {
+        viewModel.fetchAliasChoices()
+    }
+    LaunchedEffect(uiState.isSignupSuccess) {
+        if (uiState.isSignupSuccess) {
+            onSignupSuccess()
+        }
+    }
+
+    SignupGenreContent(
+        uiState = uiState,
+        onCardSelected = viewModel::selectCard,
+        onNextClick = viewModel::signup
+    )
+}
+@Composable
+fun SignupGenreContent(
+    uiState: SignupUiState,
+    onCardSelected: (Int) -> Unit,
+    onNextClick: () -> Unit
+) {
+    val isRightButtonEnabled = uiState.selectedIndex != -1 && !uiState.isLoading
+
+    Column(
+        Modifier
+            .fillMaxSize()
+            .statusBarsPadding()
+    ) {
+        InputTopAppBar(
+            title = stringResource(R.string.settings_2),
+            isRightButtonEnabled = isRightButtonEnabled,
+            rightButtonName = stringResource(R.string.next),
+            isLeftIconVisible = false,
+            onLeftClick = {},
+            onRightClick = onNextClick
+        )
+
+        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,
+            ) {
+                itemsIndexed(uiState.roleCards) { index, roleItem ->
+                    RoleCard(
+                        genre = roleItem.genre,
+                        role = roleItem.role,
+                        imageUrl = roleItem.imageUrl,
+                        roleColor = roleItem.roleColor,
+                        selected = uiState.selectedIndex == index,
+                        onClick = { onCardSelected(index) }
+                    )
+                }
+            }
+        }
+    }
+}
+
+
+@Preview
+@Composable
+private fun SignupGenreScreenPrev() {
+    val previewRoleCards = listOf(
+        RoleItem("문학", "문학가", "", "#FFFFFF"),
+        RoleItem("과학/IT", "과학자", "", "#FFFFFF"),
+        RoleItem("사회", "사회학자", "", "#FFFFFF"),
+        RoleItem("예술", "예술가", "", "#FFFFFF"),
+        RoleItem("인문", "철학자", "", "#FFFFFF")
+    )
+    val previewUiState = SignupUiState(
+        roleCards = previewRoleCards,
+        selectedIndex = 1 // 1번 아이템이 선택된 상태로 프리뷰
+    )
+
+    ThipTheme {
+        SignupGenreContent(
+            uiState = previewUiState,
+            onCardSelected = {},
+            onNextClick = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupNicknameScreen.kt b/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupNicknameScreen.kt
new file mode 100644
index 00000000..c40627ed
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/screen/SignupNicknameScreen.kt
@@ -0,0 +1,148 @@
+package com.texthip.thip.ui.signin.screen
+
+import android.widget.Toast
+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.layout.statusBarsPadding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+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.signin.viewmodel.SignupViewModel
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun SignupNicknameScreen(
+    viewModel: SignupViewModel = hiltViewModel(),
+    onNavigateToGenre: () -> Unit = {}
+) {
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+    val context = LocalContext.current
+    LaunchedEffect(uiState.navigateToGenreScreen) {
+        if (uiState.navigateToGenreScreen) {
+            onNavigateToGenre()
+            viewModel.onNavigatedToGenre()
+        }
+    }
+
+    LaunchedEffect(uiState.errorMessage) {
+        uiState.errorMessage?.let { message ->
+            Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
+        }
+    }
+
+    SignupNicknameContent(
+        nickname = uiState.nickname,
+        onNicknameChange = viewModel::onNicknameChange,
+        onNextClick = viewModel::checkNickname,
+        isLoading = uiState.isLoading,
+        warningMessageResId = uiState.nicknameWarningMessageResId
+    )
+}
+
+@Composable
+fun SignupNicknameContent(
+    nickname: String,
+    onNicknameChange: (String) -> Unit,
+    onNextClick: () -> Unit,
+    isLoading: Boolean,
+    warningMessageResId: Int?
+) {
+    val isRightButtonEnabled = nickname.isNotBlank() && !isLoading // 닉네임 공백 아닐때 버튼 활성화
+
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize()
+            .statusBarsPadding()
+    ) {
+        InputTopAppBar(
+            title = stringResource(R.string.settings_1),
+            isRightButtonEnabled = isRightButtonEnabled,
+            rightButtonName = stringResource(R.string.next),
+            isLeftIconVisible = false,
+            onLeftClick = {},
+            onRightClick = onNextClick
+        )
+        Spacer(modifier = Modifier.height(40.dp))
+        Column(
+            modifier = Modifier
+                .padding(horizontal = 20.dp)
+                .fillMaxWidth()
+        ) {
+            Text(
+                text = stringResource(R.string.nickname),
+                style = typography.smalltitle_sb600_s18_h24,
+                color = colors.White,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 12.dp)
+            )
+            WarningTextField(
+                containerColor = colors.DarkGrey02,
+                value = nickname,
+                onValueChange = { newNickname -> onNicknameChange(newNickname.lowercase()) },//소문자로 즉시 변경
+                hint = stringResource(R.string.nickname_condition),
+                showWarning = warningMessageResId != null,
+                showIcon = false,
+                showLimit = true,
+                maxLength = 10,
+                warningMessage = warningMessageResId?.let { stringResource(it) } ?: "",
+                preventUppercase = true
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun SignupNicknameContentPrev() {
+    SignupNicknameContent(
+        nickname = "중복된닉네임",
+        onNicknameChange = {},
+        onNextClick = {},
+        isLoading = false,
+        warningMessageResId = R.string.nickname_warning
+    )
+}
+
+@Preview(name = "일반 상태 (비어있음)", showBackground = true)
+@Composable
+private fun SignupNicknameContentPreview_Normal() {
+    var nickname by remember { mutableStateOf("") }
+    var warningMessageResId by remember { mutableStateOf<Int?>(null) }
+
+    SignupNicknameContent(
+        nickname = nickname,
+        onNicknameChange = {
+            nickname = it
+            warningMessageResId = null
+        },
+        onNextClick = {
+            if (nickname == "test") {
+                warningMessageResId = R.string.nickname_warning
+            }
+        },
+        isLoading = false,
+        warningMessageResId = warningMessageResId
+    )
+}
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
new file mode 100644
index 00000000..8ab7f7b6
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/screen/SplashScreen.kt
@@ -0,0 +1,87 @@
+package com.texthip.thip.ui.signin.screen
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+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.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color.Companion.Unspecified
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.texthip.thip.R
+import com.texthip.thip.ui.signin.viewmodel.SplashDestination
+import com.texthip.thip.ui.signin.viewmodel.SplashViewModel
+import com.texthip.thip.ui.theme.Purple
+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 SplashScreen(
+    viewModel: SplashViewModel = hiltViewModel(),
+    onNavigateToLogin: () -> Unit = {},
+    onNavigateToHome: () -> Unit = {}
+) {
+    val destination by viewModel.destination.collectAsStateWithLifecycle()
+
+    LaunchedEffect(destination) {
+        when (destination) {
+            SplashDestination.NavigateToLogin -> onNavigateToLogin()
+            SplashDestination.NavigateToHome -> onNavigateToHome()
+            else -> {}
+        }
+    }
+
+    SplashContent()
+}
+
+@Composable
+private fun SplashContent() {
+    Column(
+        Modifier
+            .background(colors.Black)
+            .fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.ic_logo),
+            contentDescription = null,
+            tint = Unspecified,
+        )
+        Spacer(modifier = Modifier.height(24.dp))
+        Text(
+            text = buildAnnotatedString {
+                withStyle(style = SpanStyle(color = Purple)) {
+                    append(stringResource(R.string.splash_thip))
+                }
+                append(stringResource(R.string.splash_ment))
+            },
+            style = typography.smalltitle_sb600_s18_h24,
+            color = colors.White
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun SplashContentPreview() {
+    ThipTheme {
+        SplashContent()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/signin/screen/TutorialScreen.kt b/app/src/main/java/com/texthip/thip/ui/signin/screen/TutorialScreen.kt
new file mode 100644
index 00000000..7ae5d777
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/screen/TutorialScreen.kt
@@ -0,0 +1,173 @@
+package com.texthip.thip.ui.signin.screen
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+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.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+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.launch
+
+// 튜토리얼 각 페이지에 표시될 데이터 클래스
+private data class TutorialPage(
+    val title: Int,
+    val subtitle: Int,
+    val imageRes: Int
+)
+
+// 튜토리얼 6개 화면에 대한 데이터
+private val tutorialPages = listOf(
+    TutorialPage(R.string.feed, R.string.tutorial_1, R.drawable.img_tutorial_1),
+    TutorialPage(R.string.feed, R.string.tutorial_2, R.drawable.img_tutorial_2),
+    TutorialPage(R.string.nav_group, R.string.tutorial_3, R.drawable.img_tutorial_3),
+    TutorialPage(R.string.nav_group, R.string.tutorial_4, R.drawable.img_tutorial_4),
+    TutorialPage(R.string.thip_plus, R.string.tutorial_5, R.drawable.img_tutorial_5),
+    TutorialPage(R.string.thip_plus, R.string.tutorial_6, R.drawable.img_tutorial_6)
+)
+
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun TutorialScreen(
+    onFinish: () -> Unit
+) {
+    val pagerState = rememberPagerState(pageCount = { tutorialPages.size })
+    val scope = rememberCoroutineScope()
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .statusBarsPadding()
+    ) {
+        InputTopAppBar(
+            title = "",
+            rightButtonName = stringResource(R.string.next),
+            isLeftIconVisible = false,
+            isRightButtonEnabled = true,
+            onRightClick = {
+                scope.launch {
+                    if (pagerState.currentPage < tutorialPages.lastIndex) {
+                        pagerState.animateScrollToPage(pagerState.currentPage + 1)
+                    } else {
+                        onFinish()
+                    }
+                }
+            }
+        )
+
+        // 화면 콘텐츠 영역
+        Column(
+            modifier = Modifier
+                .fillMaxSize(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ) {
+            HorizontalPager(
+                state = pagerState,
+                modifier = Modifier.padding(top = 10.dp).weight(1f)// 남은 공간을 모두 차지하도록 weight 설정
+            ) { pageIndex ->
+                TutorialPageContent(page = tutorialPages[pageIndex])
+            }
+            Spacer(modifier = Modifier.height(24.dp))
+            PageIndicator(
+                pageCount = tutorialPages.size,
+                currentPage = pagerState.currentPage
+            )
+
+            Spacer(modifier = Modifier.height(20.dp))
+
+            Text(
+                text = stringResource(R.string.skip),
+                style = typography.info_r400_s12,
+                color = colors.Grey01,
+                modifier = Modifier
+                    .padding(bottom = 62.dp)
+                    .clickable { onFinish() }
+            )
+        }
+    }
+}
+
+@Composable
+private fun TutorialPageContent(page: TutorialPage) {
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        Text(
+            text = stringResource(id = page.title),
+            style = typography.title_b700_s20_h24,
+            color = colors.White
+        )
+        Spacer(modifier = Modifier.height(20.dp))
+        Text(
+            text = stringResource(id = page.subtitle),
+            style = typography.smalltitle_sb600_s16_h24,
+            color = colors.Grey,
+            textAlign = TextAlign.Center
+        )
+        Spacer(modifier = Modifier.height(40.dp))
+        Image(
+            painter = painterResource(id = page.imageRes),
+            contentDescription = null,
+            contentScale = ContentScale.Fit,
+            modifier = Modifier.fillMaxWidth()
+        )
+    }
+}
+
+@Composable
+private fun PageIndicator(pageCount: Int, currentPage: Int) {
+    Row(
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        repeat(pageCount) { index ->
+            val color = if (currentPage == index) colors.White else colors.Grey02
+            Box(
+                modifier = Modifier
+                    .size(4.dp)
+                    .clip(CircleShape)
+                    .background(color)
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun TutorialScreenPreview() {
+    ThipTheme {
+        TutorialScreen(onFinish = {})
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/signin/viewmodel/LoginViewModel.kt b/app/src/main/java/com/texthip/thip/ui/signin/viewmodel/LoginViewModel.kt
new file mode 100644
index 00000000..ff33d531
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/viewmodel/LoginViewModel.kt
@@ -0,0 +1,91 @@
+package com.texthip.thip.ui.signin.viewmodel
+
+import android.content.Context
+import android.util.Log
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.manager.TokenManager
+import com.texthip.thip.data.model.auth.response.AuthResponse
+import com.texthip.thip.data.repository.AuthRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+sealed interface LoginUiState {
+    data object Idle : LoginUiState
+    data object Loading : LoginUiState
+    data class Success(val response: AuthResponse) : LoginUiState
+    data class Error(val message: String) : LoginUiState
+}
+
+@HiltViewModel
+class LoginViewModel @Inject constructor(
+    private val authRepository: AuthRepository,
+    private val tokenManager: TokenManager
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow<LoginUiState>(LoginUiState.Idle)
+    val uiState = _uiState.asStateFlow()
+
+    fun kakaoLogin(context: Context) {
+        viewModelScope.launch {
+            _uiState.update { LoginUiState.Loading }
+
+            //카카오 로그인부터 서버 통신까지
+            authRepository.loginWithKakao(context)
+                .onSuccess { response ->
+                    if (response != null) {
+                        if (response.isNewUser) {
+                            tokenManager.saveTempToken(response.token) // 신규 유저는 임시 토큰으로 저장
+                        } else {
+                            tokenManager.saveToken(response.token) // 기존 유저는 정식 토큰으로 저장
+                        }
+                        _uiState.update { LoginUiState.Success(response) }
+                    } else {
+                        _uiState.update { LoginUiState.Error("서버로부터 응답을 받지 못했습니다.") }
+                    }
+                }
+                .onFailure { throwable ->
+                    Log.e("LoginViewModel", "Login failed: ${throwable.message}", throwable)
+                    _uiState.update {
+                        LoginUiState.Error(throwable.message ?: "알 수 없는 통신 오류가 발생했습니다.")
+                    }
+                }
+        }
+    }
+
+    fun googleLogin(idToken: String) {
+        viewModelScope.launch {
+            _uiState.update { LoginUiState.Loading }
+
+            //구글 로그인부터 서버 통신까지
+            authRepository.loginWithGoogle(idToken)
+                .onSuccess { response ->
+                    if (response != null) {
+                        if (response.isNewUser) {
+                            tokenManager.saveTempToken(response.token) // 신규 유저는 임시 토큰으로 저장
+                        } else {
+                            tokenManager.saveToken(response.token) // 기존 유저는 정식 토큰으로 저장
+                        }
+                        _uiState.update { LoginUiState.Success(response) }
+                    } else {
+                        _uiState.update { LoginUiState.Error("서버로부터 응답을 받지 못했습니다.") }
+                    }
+                }
+                .onFailure { throwable ->
+                    Log.e("LoginViewModel", "Login failed: ${throwable.message}", throwable)
+                    _uiState.update {
+                        LoginUiState.Error(throwable.message ?: "알 수 없는 통신 오류가 발생했습니다.")
+                    }
+                }
+        }
+    }
+
+    //상태를 다시 초기화-> 이벤트 중복 실행 방지
+    fun clearLoginState() {
+        _uiState.update { LoginUiState.Idle }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/signin/viewmodel/SignupViewModel.kt b/app/src/main/java/com/texthip/thip/ui/signin/viewmodel/SignupViewModel.kt
new file mode 100644
index 00000000..a89243fc
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/viewmodel/SignupViewModel.kt
@@ -0,0 +1,154 @@
+package com.texthip.thip.ui.signin.viewmodel
+
+import android.util.Log
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.R
+import com.texthip.thip.data.manager.TokenManager
+import com.texthip.thip.data.model.base.ThipApiFailureException
+import com.texthip.thip.data.model.users.request.SignupRequest
+import com.texthip.thip.data.repository.UserRepository
+import com.texthip.thip.ui.mypage.mock.RoleItem
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+data class SignupUiState(
+    val isLoading: Boolean = false,
+    val nickname: String = "",
+    val isNicknameVerified: Boolean = false,
+    val nicknameWarningMessageResId: Int? = null,
+    val roleCards: List<RoleItem> = emptyList(),
+    val selectedIndex: Int = -1,
+    val errorMessage: String? = null,
+    val navigateToGenreScreen: Boolean = false,
+    val isSignupSuccess: Boolean = false
+)
+
+@HiltViewModel
+class SignupViewModel @Inject constructor(
+    private val userRepository: UserRepository,
+    private val tokenManager: TokenManager
+) : ViewModel() {
+
+    private val _uiState = MutableStateFlow(SignupUiState())
+    val uiState = _uiState.asStateFlow()
+
+    fun onNicknameChange(nickname: String) {
+        _uiState.update {
+            it.copy(
+                nickname = nickname,
+                isNicknameVerified = false, // 닉네임이 바뀌면 인증 상태 초기화
+                nicknameWarningMessageResId = null,
+                navigateToGenreScreen = false
+            )
+        }
+    }
+
+    fun checkNickname() {
+        if (_uiState.value.isLoading || _uiState.value.nickname.isBlank()) return
+
+        viewModelScope.launch {
+            _uiState.update { it.copy(isLoading = true, nicknameWarningMessageResId = null) }
+            userRepository.checkNickname(_uiState.value.nickname)
+                .onSuccess { response ->
+                    if (response?.isVerified == true) {
+                        _uiState.update {
+                            it.copy(
+                                isLoading = false,
+                                isNicknameVerified = true,
+                                navigateToGenreScreen = true
+                            )
+                        }
+                    } else {
+                        _uiState.update {
+                            it.copy(
+                                isLoading = false,
+                                nicknameWarningMessageResId = R.string.nickname_warning
+                            )
+                        }
+                    }
+                }
+                .onFailure {
+                    _uiState.update {
+                        it.copy(
+                            isLoading = false,
+                            nicknameWarningMessageResId = R.string.error_unknown
+                        )
+                    }
+                }
+        }
+    }
+
+    fun onNavigatedToGenre() {
+        _uiState.update { it.copy(navigateToGenreScreen = false) }
+    }
+
+    fun fetchAliasChoices() {
+        viewModelScope.launch {
+            _uiState.update { it.copy(isLoading = true) }
+            userRepository.getAliasChoices()
+                .onSuccess { response ->
+                    val roleCards = response?.aliasChoices?.map {
+                        RoleItem(
+                            it.aliasName,
+                            it.categoryName,
+                            it.imageUrl,
+                            it.aliasColor
+                        )
+                    } ?: emptyList()
+                    _uiState.update { it.copy(isLoading = false, roleCards = roleCards) }
+                }
+                .onFailure { exception ->
+                    _uiState.update {
+                        it.copy(
+                            isLoading = false,
+                            errorMessage = exception.message
+                        )
+                    }
+                }
+        }
+    }
+
+    fun selectCard(index: Int) {
+        _uiState.update { it.copy(selectedIndex = index) }
+    }
+
+    fun signup() {
+        viewModelScope.launch {
+            val currentState = _uiState.value
+            val selectedRole = currentState.roleCards.getOrNull(currentState.selectedIndex)
+
+            if (selectedRole == null || currentState.nickname.isBlank() || !currentState.isNicknameVerified) {
+                _uiState.update { it.copy(errorMessage = "닉네임과 역할을 모두 선택해주세요.") }
+                return@launch
+            }
+
+            val request = SignupRequest(
+                nickname = currentState.nickname,
+                aliasName = selectedRole.genre
+            )
+
+            _uiState.update { it.copy(isLoading = true) }
+            userRepository.signup(request)
+                .onSuccess { signupResponse ->
+                    if (signupResponse != null) {
+                        tokenManager.saveToken(signupResponse.accessToken)
+                        tokenManager.deleteTempToken()
+
+                        _uiState.update { it.copy(isLoading = false, isSignupSuccess = true) }
+                    }
+                }
+                .onFailure { exception ->
+                    Log.e("SignupDebug", "Signup 실패: ", exception)
+
+                    val errorMsg =
+                        if (exception is ThipApiFailureException) exception.message else "회원가입에 실패했습니다."
+                    _uiState.update { it.copy(isLoading = false, errorMessage = errorMsg) }
+                }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/signin/viewmodel/SplashViewModel.kt b/app/src/main/java/com/texthip/thip/ui/signin/viewmodel/SplashViewModel.kt
new file mode 100644
index 00000000..d0abc258
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/signin/viewmodel/SplashViewModel.kt
@@ -0,0 +1,44 @@
+package com.texthip.thip.ui.signin.viewmodel
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.texthip.thip.data.manager.TokenManager
+import dagger.hilt.android.lifecycle.HiltViewModel
+import jakarta.inject.Inject
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+
+sealed interface SplashDestination {
+    data object Loading : SplashDestination
+    data object NavigateToLogin : SplashDestination
+    data object NavigateToHome : SplashDestination
+}
+
+@HiltViewModel
+class SplashViewModel @Inject constructor(
+    private val tokenManager: TokenManager
+) : ViewModel() {
+
+    private val _destination = MutableStateFlow<SplashDestination>(SplashDestination.Loading)
+    val destination = _destination.asStateFlow()
+
+    init {
+        checkLoginStatus()
+    }
+
+    private fun checkLoginStatus() {
+        viewModelScope.launch {
+            delay(2000L) // 스플래시 최소 노출 시간
+
+            val token = tokenManager.getTokenOnce()
+
+            if (token.isNullOrBlank()) {
+                _destination.value = SplashDestination.NavigateToLogin
+            } else {
+                _destination.value = SplashDestination.NavigateToHome
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/theme/Color.kt b/app/src/main/java/com/texthip/thip/ui/theme/Color.kt
index 3bbcdba8..8101479c 100644
--- a/app/src/main/java/com/texthip/thip/ui/theme/Color.kt
+++ b/app/src/main/java/com/texthip/thip/ui/theme/Color.kt
@@ -13,14 +13,18 @@ val NeonGreen50 = Color(0x80A7FFB4)
 
 val Red = Color(0xFFFF9496)
 
-val Mint = Color(0xFFA0F8E8)
-val MintSub = Color(0xFF4FD9C0)
-val Orange = Color(0xFFFDB770)
-val OrangeSub = Color(0xFFFF8B17)
-val Skyblue = Color(0xFFA1D5FF)
-val SkyblueSub = Color(0xFF6DB5EE)
-val Lavendar = Color(0xFFC8A5FF)
-val LavendaSub = Color(0xFFA76FFF)
+val Literature = Color(0xFFA0F8E8)
+val LiteratureSub = Color(0xFF4FD9C0)
+val SocialScience = Color(0xFFFDB770)
+val SocialScienceSub = Color(0xFFFF8B17)
+val Humanities = Color(0xFFA1D5FF)
+val HumanitiesSub = Color(0xFF6DB5EE)
+val Art = Color(0xFFFF8BAC)
+val ArtSub = Color(0xFFFB5A88)
+val ScienceIt = Color(0xFFC8A5FF)
+val ScienceItSub = Color(0xFFA76FFF)
+val Yellow = Color(0xFFFFECA7)
+val KakaoYellow = Color(0xFFFEE500)
 
 val PureWhite = Color(0xFFFFFFFF)
 val White = Color(0xFFFEFEFE)
@@ -32,13 +36,19 @@ val Grey02 = Color(0xFF888888)
 val Grey03 = Color(0xFF525252)
 val DarkGrey = Color(0xFF3D3D3D)
 val DarkGrey50 = Color(0x803D3D3D)
+val DarkGrey03 = Color(0xFF1D1D1D)
 val DarkGrey02 = Color(0xFF282828)
 val DarkGrey01 = Color(0x4B4B4B4B)
-
 val Black = Color(0xFF121212)
+val Black80 = Color(0xCC121212)
 val Black50 = Color(0x80121212)
+val Black30 = Color(0x4D121212)
 val Black10 = Color(0x1A121212)
 val Black00 = Color(0x00121212)
+val Black700 = Color(0xFF090909)
+val Black800 = Color(0xFF040404)
+
+
 
 @Immutable
 data class ThipColors(
@@ -48,14 +58,18 @@ data class ThipColors(
     val NeonGreen: Color,
     val NeonGreen50: Color,
     val Red: Color,
-    val Mint: Color,
-    val MintSub: Color,
-    val Orange: Color,
-    val OrangeSub: Color,
-    val Skyblue: Color,
-    val SkyblueSub: Color,
-    val Lavendar: Color,
-    val LavendaSub: Color,
+    val Literature: Color,
+    val LiteratureSub: Color,
+    val SocialScience: Color,
+    val SocialScienceSub: Color,
+    val Humanities: Color,
+    val HumanitiesSub: Color,
+    val Art: Color,
+    val ArtSub: Color,
+    val ScienceIt: Color,
+    val ScienceItSub: Color,
+    val Yellow: Color,
+    val KakaoYellow: Color,
     val PureWhite: Color,
     val White: Color,
     val Grey50: Color,
@@ -66,11 +80,16 @@ data class ThipColors(
     val DarkGrey: Color,
     val darkGray01: Color,
     val DarkGrey50: Color,
+    val DarkGrey03: Color,
     val DarkGrey02: Color,
     val Black: Color,
+    val Black80: Color,
     val Black50: Color,
+    val Black30: Color,
     val Black10: Color,
     val Black00: Color,
+    val Black800: Color,
+    val Black700: Color
 )
 
 val defaultThipColors = ThipColors(
@@ -80,14 +99,18 @@ val defaultThipColors = ThipColors(
     NeonGreen = NeonGreen,
     NeonGreen50 = NeonGreen50,
     Red = Red,
-    Mint = Mint,
-    MintSub = MintSub,
-    Orange = Orange,
-    OrangeSub = OrangeSub,
-    Skyblue = Skyblue,
-    SkyblueSub = SkyblueSub,
-    Lavendar = Lavendar,
-    LavendaSub = LavendaSub,
+    Literature = Literature,
+    LiteratureSub = LiteratureSub,
+    SocialScience = SocialScience,
+    SocialScienceSub = SocialScienceSub,
+    Humanities = Humanities,
+    HumanitiesSub = HumanitiesSub,
+    Art = Art,
+    ArtSub = ArtSub,
+    ScienceIt = ScienceIt,
+    ScienceItSub = ScienceItSub,
+    Yellow = Yellow,
+    KakaoYellow = KakaoYellow,
     PureWhite = PureWhite,
     White = White,
     Grey50 = Grey50,
@@ -98,11 +121,16 @@ val defaultThipColors = ThipColors(
     DarkGrey = DarkGrey,
     darkGray01 = DarkGrey01,
     DarkGrey50 = DarkGrey50,
+    DarkGrey03 = DarkGrey03,
     DarkGrey02 = DarkGrey02,
     Black = Black,
     Black50 = Black50,
+    Black80 = Black80,
+    Black30 = Black30,
     Black10 = Black10,
-    Black00 = Black00
+    Black00 = Black00,
+    Black700 = Black700,
+    Black800 = Black800
 )
 
 val LocalThipColorsProvider = staticCompositionLocalOf { defaultThipColors }
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/utils/auth/AuthInterceptor.kt b/app/src/main/java/com/texthip/thip/utils/auth/AuthInterceptor.kt
new file mode 100644
index 00000000..8d5865e4
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/utils/auth/AuthInterceptor.kt
@@ -0,0 +1,42 @@
+package com.texthip.thip.utils.auth
+
+import com.texthip.thip.data.manager.AuthStateManager
+import com.texthip.thip.data.manager.TokenManager
+import kotlinx.coroutines.runBlocking
+import okhttp3.Interceptor
+import okhttp3.Response
+import javax.inject.Inject
+
+class AuthInterceptor @Inject constructor(
+    private val tokenManager: TokenManager,
+    private val authStateManager: AuthStateManager
+) : Interceptor {
+    override fun intercept(chain: Interceptor.Chain): Response {
+        val original = chain.request()
+
+        if (original.header("Authorization") != null) {
+            return chain.proceed(original)
+        }
+
+        val token = runBlocking { tokenManager.getTokenOnce() }
+        val tempToken = runBlocking { tokenManager.getTempTokenOnce() }
+
+        val tokenToSend = token ?: tempToken
+
+        val newRequest = original.newBuilder().apply {
+            tokenToSend?.let { addHeader("Authorization", "Bearer $it") }
+        }.build()
+
+        val response = chain.proceed(newRequest)
+        
+        // 401 응답 처리
+        if (response.code == 401) {
+            runBlocking {
+                tokenManager.clearTokens()
+                authStateManager.triggerTokenExpired()
+            }
+        }
+
+        return response
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/utils/auth/getKakaoKeyHash.kt b/app/src/main/java/com/texthip/thip/utils/auth/getKakaoKeyHash.kt
new file mode 100644
index 00000000..a3c437c9
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/utils/auth/getKakaoKeyHash.kt
@@ -0,0 +1,24 @@
+package com.texthip.thip.utils.auth
+
+import android.content.Context
+import android.content.pm.PackageManager
+import android.util.Base64
+import android.util.Log
+import java.security.MessageDigest
+
+fun getKakaoKeyHash(context: Context) {
+    try {
+        val info = context.packageManager.getPackageInfo(
+            context.packageName,
+            PackageManager.GET_SIGNATURES
+        )
+        for (signature in info.signatures!!) {
+            val md = MessageDigest.getInstance("SHA")
+            md.update(signature.toByteArray())
+            val keyHash = Base64.encodeToString(md.digest(), Base64.NO_WRAP)
+            Log.d("KeyHash", keyHash)
+        }
+    } catch (e: Exception) {
+        Log.e("KeyHash", "Exception", e)
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/utils/color/HexToColor.kt b/app/src/main/java/com/texthip/thip/utils/color/HexToColor.kt
new file mode 100644
index 00000000..aa005a48
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/utils/color/HexToColor.kt
@@ -0,0 +1,13 @@
+package com.texthip.thip.utils.color
+
+import androidx.compose.ui.graphics.Color
+import androidx.core.graphics.toColorInt
+
+fun hexToColor(hex: String): Color {
+    return try {
+        Color(hex.toColorInt())
+    } catch (e: IllegalArgumentException) {
+        //잘못된 형식이면 기본 색
+        Color.White
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/utils/image/ImageUploadHelper.kt b/app/src/main/java/com/texthip/thip/utils/image/ImageUploadHelper.kt
new file mode 100644
index 00000000..f763cb06
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/utils/image/ImageUploadHelper.kt
@@ -0,0 +1,117 @@
+package com.texthip.thip.utils.image
+
+import android.content.Context
+import android.database.Cursor
+import android.net.Uri
+import android.provider.OpenableColumns
+import com.texthip.thip.BuildConfig
+import com.texthip.thip.data.model.feed.request.ImageMetadata
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+import okhttp3.MediaType.Companion.toMediaType
+import okhttp3.OkHttpClient
+import okhttp3.Request
+import okhttp3.RequestBody.Companion.toRequestBody
+import okhttp3.logging.HttpLoggingInterceptor
+import java.io.File
+import java.io.FileOutputStream
+import javax.inject.Inject
+import javax.inject.Singleton
+
+@Singleton
+class ImageUploadHelper @Inject constructor(
+    private val context: Context
+) {
+    
+    private val s3Client = OkHttpClient.Builder()
+        .connectTimeout(10, java.util.concurrent.TimeUnit.SECONDS)
+        .writeTimeout(10, java.util.concurrent.TimeUnit.SECONDS)
+        .readTimeout(10, java.util.concurrent.TimeUnit.SECONDS)
+        .apply {
+            if (BuildConfig.DEBUG) {
+                addInterceptor(
+                    HttpLoggingInterceptor().apply {
+                        level = HttpLoggingInterceptor.Level.BASIC
+                    }
+                )
+            }
+        }
+        .build()
+    
+    suspend fun uploadImageToS3(
+        uri: Uri,
+        presignedUrl: String
+    ): Result<Unit> = withContext(Dispatchers.IO) {
+        runCatching {
+            val mimeType = context.contentResolver.getType(uri) ?: "image/jpeg"
+            val tempFile = File(context.cacheDir, "temp_image_${System.currentTimeMillis()}")
+            
+            try {
+                context.contentResolver.openInputStream(uri)?.use { inputStream ->
+                    FileOutputStream(tempFile).use { outputStream ->
+                        inputStream.copyTo(outputStream)
+                    }
+                } ?: throw IllegalStateException("Failed to open input stream for URI: $uri")
+
+                val requestBody = tempFile.readBytes().toRequestBody(mimeType.toMediaType())
+                val request = Request.Builder()
+                    .url(presignedUrl)
+                    .put(requestBody)
+                    .build()
+
+                val response = s3Client.newCall(request).execute()
+                
+                if (!response.isSuccessful) {
+                    throw Exception("S3 upload failed: ${response.code} ${response.message}")
+                }
+            } finally {
+                if (tempFile.exists()) {
+                    tempFile.delete()
+                }
+            }
+        }
+    }
+    
+    suspend fun getImageMetadata(uri: Uri): ImageMetadata? = withContext(Dispatchers.IO) {
+        runCatching {
+            val mimeType = context.contentResolver.getType(uri) ?: return@withContext null
+            val extension = when (mimeType) {
+                "image/png" -> "png"
+                "image/jpeg", "image/jpg" -> "jpg"
+                "image/gif" -> "gif"
+                else -> return@withContext null
+            }
+            
+            // 성능 최적화된 파일 크기 계산
+            val size = getFileSize(uri) ?: return@withContext null
+            
+            ImageMetadata(
+                extension = extension,
+                size = size
+            )
+        }.getOrNull()
+    }
+    
+    private fun getFileSize(uri: Uri): Long? {
+        return try {
+            context.contentResolver.query(uri, arrayOf(OpenableColumns.SIZE), null, null, null)?.use { cursor ->
+                if (cursor.moveToFirst()) {
+                    val sizeIndex = cursor.getColumnIndex(OpenableColumns.SIZE)
+                    if (sizeIndex >= 0) {
+                        val size = cursor.getLong(sizeIndex)
+                        if (size > 0) return size
+                    }
+                }
+            }
+
+            context.contentResolver.openFileDescriptor(uri, "r")?.use { pfd ->
+                val size = pfd.statSize
+                if (size > 0) return size
+            }
+            
+            null
+        } catch (e: Exception) {
+            null
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/utils/rooms/AdvancedImePadding.kt b/app/src/main/java/com/texthip/thip/utils/rooms/AdvancedImePadding.kt
new file mode 100644
index 00000000..9e963723
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/utils/rooms/AdvancedImePadding.kt
@@ -0,0 +1,28 @@
+package com.texthip.thip.utils.rooms
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.consumeWindowInsets
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.layout.findRootCoordinates
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.layout.positionInWindow
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.dp
+
+fun Modifier.advancedImePadding() = composed {
+    var consumePadding by remember { mutableStateOf(0) }
+    onGloballyPositioned { coordinates ->
+        val rootCoordinate = coordinates.findRootCoordinates()
+        val bottom = coordinates.positionInWindow().y + coordinates.size.height
+
+        consumePadding = (rootCoordinate.size.height - bottom).toInt().coerceAtLeast(0)
+    }
+        .consumeWindowInsets(PaddingValues(bottom = (consumePadding / LocalDensity.current.density).dp))
+        .imePadding()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/utils/rooms/GenreExtensions.kt b/app/src/main/java/com/texthip/thip/utils/rooms/GenreExtensions.kt
new file mode 100644
index 00000000..bd6f2ccb
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/utils/rooms/GenreExtensions.kt
@@ -0,0 +1,26 @@
+package com.texthip.thip.utils.rooms
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import com.texthip.thip.R
+import com.texthip.thip.data.manager.Genre
+
+/**
+ * Genre enum을 UI에서 사용하기 위한 확장 함수들
+ */
+
+@Composable
+fun Genre.toDisplayString(): String {
+    return when (this) {
+        Genre.LITERATURE -> stringResource(R.string.literature)
+        Genre.SCIENCE_IT -> stringResource(R.string.science_it)
+        Genre.SOCIAL_SCIENCE -> stringResource(R.string.social_science)
+        Genre.HUMANITIES -> stringResource(R.string.humanities)
+        Genre.ART -> stringResource(R.string.art)
+    }
+}
+
+@Composable
+fun List<Genre>.toDisplayStrings(): List<String> {
+    return this.map { it.toDisplayString() }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/utils/rooms/RoomUtils.kt b/app/src/main/java/com/texthip/thip/utils/rooms/RoomUtils.kt
new file mode 100644
index 00000000..a0729419
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/utils/rooms/RoomUtils.kt
@@ -0,0 +1,14 @@
+package com.texthip.thip.utils.rooms
+
+
+object RoomUtils {
+    fun isRecruitingByType(type: String): Boolean {
+        return when (type) {
+            "recruiting" -> true
+            "playingAndRecruiting" -> false
+            "playing" -> false
+            "expired" -> false
+            else -> false
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/utils/type/GenreBackgroundImage.kt b/app/src/main/java/com/texthip/thip/utils/type/GenreBackgroundImage.kt
new file mode 100644
index 00000000..2ffc9501
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/utils/type/GenreBackgroundImage.kt
@@ -0,0 +1,22 @@
+package com.texthip.thip.utils.type
+
+import androidx.annotation.DrawableRes
+import com.texthip.thip.R
+
+enum class GenreBackgroundImage(
+    val genreName: String,
+    @DrawableRes val imageResId: Int
+) {
+    LITERATURE("문학", R.drawable.img_literature),
+    HUMANITIES("인문학", R.drawable.img_humanities),
+    SCIENCE("과학•IT", R.drawable.img_science_it),
+    SOCIAL_SCIENCE("사회과학", R.drawable.img_social_science),
+    ART("예술", R.drawable.img_art);
+
+    companion object {
+        fun fromServerValue(serverValue: String?): GenreBackgroundImage {
+            val genreNameFromServer = serverValue?.substringBefore("_") ?: return GenreBackgroundImage.LITERATURE
+            return entries.find { it.genreName == genreNameFromServer } ?: GenreBackgroundImage.LITERATURE
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/utils/type/GenreColor.kt b/app/src/main/java/com/texthip/thip/utils/type/GenreColor.kt
new file mode 100644
index 00000000..fa97df0e
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/utils/type/GenreColor.kt
@@ -0,0 +1,23 @@
+package com.texthip.thip.utils.type
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import com.texthip.thip.ui.theme.ThipTheme.colors
+
+enum class GenreColor(
+    val colorProvider: @Composable () -> Color
+) {
+    RED({ colors.Art }),
+    BLUE({ colors.Humanities }),
+    GREEN({ colors.Literature }),
+    YELLOW({ colors.SocialScience }),
+    PURPLE({ colors.ScienceIt });
+
+
+    companion object {
+        fun fromString(colorString: String?): GenreColor {
+            return entries.find { it.name.equals(colorString, ignoreCase = true) }
+                ?: RED
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/utils/type/SortType.kt b/app/src/main/java/com/texthip/thip/utils/type/SortType.kt
new file mode 100644
index 00000000..3b12aeb6
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/utils/type/SortType.kt
@@ -0,0 +1,19 @@
+package com.texthip.thip.utils.type
+
+import androidx.annotation.StringRes
+import com.texthip.thip.R
+
+enum class SortType (
+    @StringRes val displayNameRes: Int,
+    val apiKey: String
+) {
+    LATEST(R.string.sort_latest, "latest"),
+    LIKE(R.string.sort_like, "like"),
+    COMMENT(R.string.sort_comment, "comment");
+
+    companion object {
+        fun fromApiKey(key: String?): SortType {
+            return entries.find { it.apiKey == key } ?: LATEST
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/res/drawable/bookcover_sample_small.png b/app/src/main/res/drawable/bookcover_sample_small.png
new file mode 100644
index 00000000..a59438f8
Binary files /dev/null and b/app/src/main/res/drawable/bookcover_sample_small.png differ
diff --git a/app/src/main/res/drawable/character_art.png b/app/src/main/res/drawable/character_art.png
new file mode 100644
index 00000000..eacd810e
Binary files /dev/null and b/app/src/main/res/drawable/character_art.png differ
diff --git a/app/src/main/res/drawable/character_humanities.png b/app/src/main/res/drawable/character_humanities.png
new file mode 100644
index 00000000..e3a9d221
Binary files /dev/null and b/app/src/main/res/drawable/character_humanities.png differ
diff --git a/app/src/main/res/drawable/character_literature.png b/app/src/main/res/drawable/character_literature.png
new file mode 100644
index 00000000..57037f33
Binary files /dev/null and b/app/src/main/res/drawable/character_literature.png differ
diff --git a/app/src/main/res/drawable/character_science.png b/app/src/main/res/drawable/character_science.png
new file mode 100644
index 00000000..03a25583
Binary files /dev/null and b/app/src/main/res/drawable/character_science.png differ
diff --git a/app/src/main/res/drawable/character_sociology.png b/app/src/main/res/drawable/character_sociology.png
new file mode 100644
index 00000000..8913147a
Binary files /dev/null and b/app/src/main/res/drawable/character_sociology.png differ
diff --git a/app/src/main/res/drawable/group_room_recruiting.png b/app/src/main/res/drawable/group_room_recruiting.png
new file mode 100644
index 00000000..bf8347eb
Binary files /dev/null and b/app/src/main/res/drawable/group_room_recruiting.png differ
diff --git a/app/src/main/res/drawable/ic_doc.xml b/app/src/main/res/drawable/ic_doc.xml
new file mode 100644
index 00000000..32879e60
--- /dev/null
+++ b/app/src/main/res/drawable/ic_doc.xml
@@ -0,0 +1,41 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M13.75,3.25L6.75,3.25C6.286,3.25 5.841,3.434 5.513,3.763C5.184,4.091 5,4.536 5,5L5,19C5,19.464 5.184,19.909 5.513,20.237C5.841,20.566 6.286,20.75 6.75,20.75H17.25C17.714,20.75 18.159,20.566 18.487,20.237C18.816,19.909 19,19.464 19,19V8.5L13.75,3.25Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M13.75,3.25V8.5H19"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M15.5,12.875H8.5"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M15.5,16.375H8.5"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M10.25,9.375H9.375H8.5"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_heart.xml b/app/src/main/res/drawable/ic_heart.xml
index 09411a02..46b5002b 100644
--- a/app/src/main/res/drawable/ic_heart.xml
+++ b/app/src/main/res/drawable/ic_heart.xml
@@ -1,10 +1,10 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="25dp"
+    android:width="24dp"
     android:height="24dp"
-    android:viewportWidth="25"
+    android:viewportWidth="24"
     android:viewportHeight="24">
   <path
-      android:pathData="M17.666,3.75C20.159,3.75 22.22,5.84 22.22,8.481C22.22,11.054 21.005,13.315 18.755,15.559L18.291,16.008C17.096,17.131 15.668,18.22 14.528,19.034C13.961,19.44 13.469,19.774 13.12,20.006C13.066,20.042 13.013,20.075 12.966,20.107C12.915,20.073 12.859,20.038 12.8,19.999C12.442,19.764 11.941,19.427 11.367,19.02C10.214,18.201 8.791,17.115 7.657,16.016C5.364,13.792 3.72,11.204 3.72,8.481C3.72,5.848 5.781,3.75 8.273,3.75C10.012,3.75 11.531,4.768 12.301,6.282C12.429,6.534 12.687,6.693 12.97,6.693C13.252,6.693 13.511,6.534 13.639,6.282C14.408,4.768 15.927,3.75 17.666,3.75Z"
+      android:pathData="M14.696,3.75C17.189,3.75 19.25,5.84 19.25,8.481C19.25,11.225 17.868,13.615 15.321,16.008C14.126,17.131 12.698,18.22 11.559,19.034C10.991,19.44 10.5,19.774 10.15,20.006C10.096,20.042 10.043,20.075 9.996,20.106C9.945,20.073 9.889,20.038 9.83,19.999C9.473,19.764 8.971,19.427 8.397,19.02C7.244,18.201 5.821,17.115 4.688,16.016C2.395,13.792 0.75,11.204 0.75,8.481C0.75,5.848 2.811,3.75 5.304,3.75C7.043,3.75 8.561,4.768 9.331,6.282C9.459,6.534 9.718,6.693 10,6.693C10.282,6.693 10.541,6.534 10.669,6.282C11.439,4.768 12.957,3.75 14.696,3.75Z"
       android:strokeLineJoin="round"
       android:strokeWidth="1.5"
       android:fillColor="#00000000"
diff --git a/app/src/main/res/drawable/ic_heart_center.xml b/app/src/main/res/drawable/ic_heart_center.xml
new file mode 100644
index 00000000..ed8d7c47
--- /dev/null
+++ b/app/src/main/res/drawable/ic_heart_center.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="24dp"
+    android:viewportWidth="25"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M17.284,3.75C19.777,3.75 21.838,5.84 21.838,8.481C21.838,11.225 20.456,13.615 17.909,16.008C16.714,17.131 15.286,18.22 14.146,19.034C13.579,19.44 13.087,19.774 12.738,20.006C12.684,20.042 12.631,20.075 12.584,20.107C12.533,20.073 12.477,20.038 12.418,19.999C12.06,19.764 11.559,19.427 10.985,19.02C9.832,18.201 8.409,17.115 7.275,16.016C4.983,13.792 3.338,11.204 3.338,8.481C3.338,5.848 5.399,3.75 7.892,3.75C9.631,3.75 11.149,4.768 11.919,6.282C12.047,6.534 12.306,6.693 12.588,6.693C12.87,6.693 13.129,6.534 13.257,6.282C14.026,4.768 15.545,3.75 17.284,3.75Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_heart_center_filled.xml b/app/src/main/res/drawable/ic_heart_center_filled.xml
new file mode 100644
index 00000000..6cad574d
--- /dev/null
+++ b/app/src/main/res/drawable/ic_heart_center_filled.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="24dp"
+    android:viewportWidth="25"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M17.284,3C15.24,3 13.475,4.197 12.588,5.943C11.701,4.197 9.936,3 7.892,3C4.962,3 2.588,5.457 2.588,8.481C2.588,11.505 4.405,14.277 6.753,16.554C9.101,18.831 12.588,21 12.588,21C12.588,21 15.962,18.867 18.423,16.554C21.048,14.088 22.588,11.514 22.588,8.481C22.588,5.448 20.214,3 17.284,3Z"
+      android:fillColor="#6868FF"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_heart_filled.xml b/app/src/main/res/drawable/ic_heart_filled.xml
new file mode 100644
index 00000000..cfb9ba1e
--- /dev/null
+++ b/app/src/main/res/drawable/ic_heart_filled.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M14.696,3C12.652,3 10.887,4.197 10,5.943C9.113,4.197 7.348,3 5.304,3C2.374,3 0,5.457 0,8.481C0,11.505 1.817,14.277 4.165,16.554C6.513,18.831 10,21 10,21C10,21 13.374,18.867 15.835,16.554C18.46,14.088 20,11.514 20,8.481C20,5.448 17.626,3 14.696,3Z"
+      android:fillColor="#6868FF"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_information.xml b/app/src/main/res/drawable/ic_information.xml
new file mode 100644
index 00000000..15fd3ffd
--- /dev/null
+++ b/app/src/main/res/drawable/ic_information.xml
@@ -0,0 +1,27 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M10,18C14.418,18 18,14.418 18,10C18,5.582 14.418,2 10,2C5.582,2 2,5.582 2,10C2,14.418 5.582,18 10,18Z"
+      android:strokeLineJoin="round"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M10,7V11"
+      android:strokeLineJoin="round"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M10,13.333H10.008"
+      android:strokeLineJoin="round"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_launcher_background.xml b/app/src/main/res/drawable/ic_launcher_background.xml
index 07d5da9c..ca3826a4 100644
--- a/app/src/main/res/drawable/ic_launcher_background.xml
+++ b/app/src/main/res/drawable/ic_launcher_background.xml
@@ -1,170 +1,74 @@
 <?xml version="1.0" encoding="utf-8"?>
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="108dp"
+<vector
     android:height="108dp"
+    android:width="108dp"
+    android:viewportHeight="108"
     android:viewportWidth="108"
-    android:viewportHeight="108">
-    <path
-        android:fillColor="#3DDC84"
-        android:pathData="M0,0h108v108h-108z" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M9,0L9,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,0L19,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M29,0L29,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M39,0L39,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M49,0L49,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M59,0L59,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M69,0L69,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M79,0L79,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M89,0L89,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M99,0L99,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,9L108,9"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,19L108,19"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,29L108,29"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,39L108,39"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,49L108,49"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,59L108,59"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,69L108,69"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,79L108,79"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,89L108,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,99L108,99"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,29L89,29"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,39L89,39"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,49L89,49"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,59L89,59"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,69L89,69"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,79L89,79"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M29,19L29,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M39,19L39,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M49,19L49,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M59,19L59,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M69,19L69,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M79,19L79,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#3DDC84"
+          android:pathData="M0,0h108v108h-108z"/>
+    <path android:fillColor="#00000000" android:pathData="M9,0L9,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,0L19,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M29,0L29,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M39,0L39,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M49,0L49,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M59,0L59,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M69,0L69,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M79,0L79,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M89,0L89,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M99,0L99,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,9L108,9"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,19L108,19"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,29L108,29"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,39L108,39"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,49L108,49"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,59L108,59"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,69L108,69"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,79L108,79"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,89L108,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,99L108,99"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,29L89,29"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,39L89,39"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,49L89,49"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,59L89,59"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,69L89,69"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,79L89,79"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M29,19L29,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M39,19L39,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M49,19L49,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M59,19L59,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M69,19L69,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M79,19L79,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
 </vector>
diff --git a/app/src/main/res/drawable/ic_notice.xml b/app/src/main/res/drawable/ic_notice.xml
index 4cec80dd..3c895132 100644
--- a/app/src/main/res/drawable/ic_notice.xml
+++ b/app/src/main/res/drawable/ic_notice.xml
@@ -1,17 +1,23 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="25dp"
-    android:height="24dp"
-    android:viewportWidth="25"
-    android:viewportHeight="24">
+    android:width="22dp"
+    android:height="20dp"
+    android:viewportWidth="22"
+    android:viewportHeight="20">
   <path
-      android:pathData="M19.844,14.98C19.545,14.503 19.387,13.952 19.387,13.39V9.226C19.387,7.508 18.704,5.861 17.49,4.646C16.275,3.431 14.628,2.749 12.91,2.749C11.192,2.749 9.545,3.431 8.33,4.646C7.115,5.861 6.433,7.508 6.433,9.226V13.388C6.433,13.951 6.275,14.503 5.976,14.98L4.888,16.72C4.793,16.871 4.741,17.045 4.736,17.224C4.732,17.402 4.775,17.579 4.861,17.735C4.948,17.891 5.074,18.021 5.228,18.112C5.382,18.202 5.557,18.25 5.736,18.25H20.084C20.262,18.25 20.438,18.202 20.591,18.112C20.745,18.021 20.872,17.891 20.958,17.735C21.045,17.579 21.088,17.402 21.083,17.224C21.079,17.045 21.026,16.871 20.932,16.72L19.844,14.98Z"
+      android:pathData="M11,1.553L11,18.448C7.714,18.448 5.274,14.149 5.274,14.149H2.552C2.303,14.149 2.064,14.05 1.888,13.874C1.712,13.698 1.613,13.46 1.613,13.211L1.613,6.72C1.613,6.471 1.712,6.232 1.888,6.056C2.064,5.88 2.303,5.781 2.552,5.781L5.274,5.781C5.274,5.781 7.714,1.553 11,1.553Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"/>
+  <path
+      android:pathData="M14.754,5.777C15.047,6.04 15.312,6.332 15.544,6.65C16.254,7.623 16.634,8.797 16.631,10.001C16.631,11.247 16.234,12.398 15.562,13.329C15.326,13.656 15.055,13.956 14.754,14.225"
       android:strokeLineJoin="round"
       android:strokeWidth="1.5"
       android:fillColor="#00000000"
       android:strokeColor="#FEFEFE"
       android:strokeLineCap="round"/>
   <path
-      android:pathData="M10.912,21.25H14.912"
+      android:pathData="M15.804,18.065C18.548,16.427 20.386,13.428 20.386,10C20.386,6.624 18.605,3.666 15.931,2.012"
       android:strokeWidth="1.5"
       android:fillColor="#00000000"
       android:strokeColor="#FEFEFE"
diff --git a/app/src/main/res/drawable/ic_notice_no.xml b/app/src/main/res/drawable/ic_notice_no.xml
new file mode 100644
index 00000000..b1f88d20
--- /dev/null
+++ b/app/src/main/res/drawable/ic_notice_no.xml
@@ -0,0 +1,19 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="18dp"
+    android:height="20dp"
+    android:viewportWidth="18"
+    android:viewportHeight="20">
+  <path
+      android:pathData="M15.932,12.98C15.634,12.503 15.476,11.952 15.475,11.39V7.226C15.475,5.508 14.793,3.861 13.578,2.646C12.363,1.431 10.716,0.749 8.998,0.749C7.28,0.749 5.633,1.431 4.418,2.646C3.204,3.861 2.521,5.508 2.521,7.226L2.521,11.388C2.521,11.951 2.363,12.503 2.064,12.98L0.976,14.72C0.882,14.871 0.829,15.045 0.825,15.224C0.82,15.402 0.863,15.579 0.95,15.735C1.036,15.891 1.163,16.021 1.317,16.112C1.47,16.202 1.646,16.25 1.824,16.25H16.172C16.351,16.25 16.526,16.202 16.68,16.112C16.834,16.021 16.96,15.891 17.047,15.735C17.133,15.579 17.177,15.402 17.172,15.224C17.167,15.045 17.115,14.871 17.02,14.72L15.932,12.98Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M7,19.25H11"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_notification.xml b/app/src/main/res/drawable/ic_notification.xml
new file mode 100644
index 00000000..42aaeff8
--- /dev/null
+++ b/app/src/main/res/drawable/ic_notification.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="51dp"
+    android:height="51dp"
+    android:viewportWidth="51"
+    android:viewportHeight="51">
+  <path
+      android:pathData="M25.5,2.5C38.202,2.5 48.5,12.797 48.5,25.5C48.5,38.202 38.202,48.5 25.5,48.5C12.797,48.5 2.5,38.202 2.5,25.5C2.5,12.797 12.797,2.5 25.5,2.5ZM25.5,32.5C24.395,32.5 23.5,33.395 23.5,34.5C23.5,35.605 24.395,36.5 25.5,36.5C26.605,36.5 27.5,35.605 27.5,34.5C27.5,33.395 26.605,32.5 25.5,32.5ZM25.5,15C24.672,15 24,15.672 24,16.5V28.5C24,29.328 24.672,30 25.5,30C26.328,30 27,29.328 27,28.5V16.5C27,15.672 26.328,15 25.5,15Z"
+      android:fillColor="#888888"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_search_character.xml b/app/src/main/res/drawable/ic_search_character.xml
new file mode 100644
index 00000000..2485534e
--- /dev/null
+++ b/app/src/main/res/drawable/ic_search_character.xml
@@ -0,0 +1,22 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="42dp"
+    android:viewportWidth="32"
+    android:viewportHeight="42">
+  <path
+      android:pathData="M0,42C0,42 2.979,32.859 1.561,25.517C0.756,21.348 2.037,16.671 4.123,14.451C6.325,12.108 8.312,10.867 10.384,10.546C14.097,9.971 15.665,10.092 20,11.333C23.556,13.111 25.971,15.148 27.111,17.111C28.288,19.135 27.913,24.036 27.111,27.333C26.222,29.556 23.556,36.222 28.889,32.222C30.592,30.945 29.949,34.25 29.333,35.333C27.556,38.889 32.062,40.565 31.999,42H0Z"
+      android:fillColor="#6868FF"/>
+  <path
+      android:pathData="M14.315,25.096C13.927,26.371 12.59,27.403 11.086,27.048C10.219,26.843 9.721,25.997 9.887,25.096C9.972,24.816 10.139,24.632 10.42,24.571C11.334,24.375 11.983,24.147 12.281,23.474C12.637,22.301 11.921,21.399 10.026,20.597L10.423,19.6C13.591,20.44 15.066,22.623 14.315,25.096Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M8.726,25.096C8.338,26.371 7.002,27.403 5.498,27.048C4.63,26.843 4.132,25.997 4.299,25.096C4.384,24.816 4.551,24.632 4.831,24.571C5.746,24.375 6.395,24.147 6.692,23.474C7.048,22.301 6.332,21.399 4.438,20.597L4.835,19.6C8.002,20.44 9.477,22.623 8.726,25.096Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M26,30.222L28.223,32.444M27.111,26.889C27.111,24.434 25.122,22.444 22.667,22.444C20.212,22.444 18.223,24.434 18.223,26.889C18.223,29.343 20.212,31.333 22.667,31.333C25.122,31.333 27.111,29.343 27.111,26.889Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_secret_cover.xml b/app/src/main/res/drawable/ic_secret_cover.xml
new file mode 100644
index 00000000..3c30cad1
--- /dev/null
+++ b/app/src/main/res/drawable/ic_secret_cover.xml
@@ -0,0 +1,23 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="60dp"
+    android:height="80dp"
+    android:viewportWidth="60"
+    android:viewportHeight="80">
+  <group>
+    <clip-path
+        android:pathData="M0,0h60v80h-60z"/>
+    <path
+        android:pathData="M59.5,0.5H0.5V79.5H59.5V0.5Z"
+        android:fillColor="#121212"
+        android:fillAlpha="0.3"/>
+    <path
+        android:strokeWidth="1"
+        android:pathData="M59.5,0.5H0.5V79.5H59.5V0.5Z"
+        android:fillColor="#00000000"
+        android:strokeColor="#888888"/>
+    <path
+        android:pathData="M18.8,32.64C18.8,29.712 19.98,26.904 22.081,24.834C24.181,22.763 27.03,21.6 30,21.6C32.971,21.6 35.819,22.763 37.92,24.834C40.02,26.904 41.2,29.712 41.2,32.64H43.067C44.057,32.64 45.007,33.028 45.707,33.718C46.407,34.408 46.8,35.344 46.8,36.32V54.72C46.8,55.696 46.407,56.632 45.707,57.322C45.007,58.012 44.057,58.4 43.067,58.4H16.934C15.943,58.4 14.994,58.012 14.294,57.322C13.594,56.632 13.2,55.696 13.2,54.72V36.32C13.2,35.344 13.594,34.408 14.294,33.718C14.994,33.028 15.943,32.64 16.934,32.64H18.8ZM30,25.28C31.98,25.28 33.88,26.056 35.28,27.436C36.68,28.816 37.467,30.688 37.467,32.64H22.534C22.534,30.688 23.32,28.816 24.721,27.436C26.121,26.056 28.02,25.28 30,25.28ZM33.734,43.68C33.734,44.326 33.561,44.961 33.233,45.52C32.906,46.079 32.434,46.544 31.867,46.867V49.2C31.867,49.688 31.67,50.156 31.32,50.501C30.97,50.846 30.495,51.04 30,51.04C29.505,51.04 29.03,50.846 28.68,50.501C28.33,50.156 28.133,49.688 28.133,49.2V46.867C27.422,46.462 26.866,45.837 26.551,45.088C26.237,44.34 26.181,43.51 26.394,42.728C26.607,41.945 27.076,41.254 27.728,40.761C28.38,40.268 29.178,40 30,40C30.99,40 31.94,40.388 32.64,41.078C33.34,41.768 33.734,42.704 33.734,43.68Z"
+        android:fillColor="#FEFEFE"
+        android:fillType="evenOdd"/>
+  </group>
+</vector>
diff --git a/app/src/main/res/drawable/ic_text_more.xml b/app/src/main/res/drawable/ic_text_more.xml
new file mode 100644
index 00000000..f5bb2b9e
--- /dev/null
+++ b/app/src/main/res/drawable/ic_text_more.xml
@@ -0,0 +1,24 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="80dp"
+    android:height="24dp"
+    android:viewportWidth="80"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M0,0h80v24h-80z">
+    <aapt:attr name="android:fillColor">
+      <gradient 
+          android:startX="5.618"
+          android:startY="12"
+          android:endX="36.118"
+          android:endY="12"
+          android:type="linear">
+        <item android:offset="0" android:color="#00121212"/>
+        <item android:offset="1" android:color="#FF121212"/>
+      </gradient>
+    </aapt:attr>
+  </path>
+  <path
+      android:pathData="M34.172,19.109C33.98,19.109 33.803,19.062 33.639,18.966C33.475,18.866 33.345,18.736 33.249,18.576C33.158,18.412 33.112,18.234 33.112,18.043C33.112,17.856 33.158,17.683 33.249,17.523C33.345,17.359 33.475,17.232 33.639,17.141C33.803,17.045 33.98,16.997 34.172,16.997C34.354,16.997 34.527,17.045 34.691,17.141C34.855,17.232 34.985,17.359 35.081,17.523C35.177,17.683 35.225,17.856 35.225,18.043C35.225,18.234 35.177,18.412 35.081,18.576C34.985,18.736 34.855,18.866 34.691,18.966C34.527,19.062 34.354,19.109 34.172,19.109ZM37.986,19.109C37.795,19.109 37.617,19.062 37.453,18.966C37.289,18.866 37.159,18.736 37.063,18.576C36.972,18.412 36.927,18.234 36.927,18.043C36.927,17.856 36.972,17.683 37.063,17.523C37.159,17.359 37.289,17.232 37.453,17.141C37.617,17.045 37.795,16.997 37.986,16.997C38.169,16.997 38.342,17.045 38.506,17.141C38.67,17.232 38.8,17.359 38.896,17.523C38.991,17.683 39.039,17.856 39.039,18.043C39.039,18.234 38.991,18.412 38.896,18.576C38.8,18.736 38.67,18.866 38.506,18.966C38.342,19.062 38.169,19.109 37.986,19.109ZM41.801,19.109C41.609,19.109 41.432,19.062 41.268,18.966C41.104,18.866 40.974,18.736 40.878,18.576C40.787,18.412 40.741,18.234 40.741,18.043C40.741,17.856 40.787,17.683 40.878,17.523C40.974,17.359 41.104,17.232 41.268,17.141C41.432,17.045 41.609,16.997 41.801,16.997C41.983,16.997 42.156,17.045 42.32,17.141C42.484,17.232 42.614,17.359 42.71,17.523C42.806,17.683 42.854,17.856 42.854,18.043C42.854,18.234 42.806,18.412 42.71,18.576C42.614,18.736 42.484,18.866 42.32,18.966C42.156,19.062 41.983,19.109 41.801,19.109ZM45.697,15.972C46.887,15.972 47.88,15.947 48.678,15.896C49.475,15.842 50.273,15.741 51.07,15.596L51.234,16.826C50.41,16.986 49.587,17.095 48.767,17.154C47.951,17.209 46.928,17.234 45.697,17.229H44.713V15.972H45.697ZM50.353,10.223H46.237V16.443H44.713V8.979H50.353V10.223ZM54.481,20.237H52.964V7.857H54.481V20.237ZM53.606,13.449H49.703V12.205H53.606V13.449ZM67.511,18.727H56.218V17.482H67.511V18.727ZM62.582,17.81H61.085V14.707H62.582V17.81ZM58.979,10.701H64.701V8.678H66.212V15.069H57.455V8.678H58.979V10.701ZM64.701,13.852V11.911H58.979V13.852H64.701ZM78.633,20.203H77.095V7.857H78.633V20.203ZM74.948,9.17C74.948,10.46 74.761,11.642 74.388,12.718C74.019,13.789 73.41,14.775 72.563,15.678C71.715,16.576 70.591,17.357 69.192,18.022L68.386,16.806C69.575,16.241 70.541,15.598 71.284,14.878C72.027,14.158 72.572,13.349 72.918,12.451C73.264,11.553 73.438,10.546 73.438,9.43V9.17H74.948ZM74.121,10.373H69.015V9.17H74.121V10.373Z"
+      android:fillColor="#888888"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_thip_empty_room.xml b/app/src/main/res/drawable/ic_thip_empty_room.xml
new file mode 100644
index 00000000..25b6bfb0
--- /dev/null
+++ b/app/src/main/res/drawable/ic_thip_empty_room.xml
@@ -0,0 +1,22 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="76dp"
+    android:height="75dp"
+    android:viewportWidth="76"
+    android:viewportHeight="75">
+  <path
+      android:pathData="M0.65,75.175C0.65,75.175 7.605,53.837 4.294,36.699C2.415,26.966 5.404,16.05 10.276,10.867C15.415,5.398 20.053,2.5 24.89,1.752C33.558,0.408 37.217,0.691 47.337,3.589C55.637,7.739 61.275,12.494 63.937,17.076C66.683,21.801 65.809,33.241 63.937,40.938C61.862,46.126 55.637,61.688 68.087,52.351C72.062,49.369 70.562,57.084 69.124,59.613C64.974,67.913 75.494,71.825 75.347,75.175H0.65Z"
+      android:fillColor="#6868FF"/>
+  <path
+      android:pathData="M34.065,35.715C33.161,38.692 30.041,41.102 26.53,40.271C24.504,39.793 23.342,37.818 23.73,35.715C23.929,35.061 24.319,34.631 24.973,34.489C27.109,34.031 28.623,33.501 29.317,31.93C30.149,29.192 28.477,27.085 24.055,25.214L24.981,22.886C32.376,24.847 35.819,29.942 34.065,35.715Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M21.02,35.715C20.115,38.692 16.995,41.102 13.484,40.271C11.458,39.793 10.297,37.818 10.685,35.715C10.884,35.061 11.273,34.631 11.928,34.489C14.063,34.031 15.578,33.501 16.272,31.93C17.103,29.192 15.432,27.085 11.009,25.214L11.936,22.886C19.331,24.847 22.774,29.942 21.02,35.715Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M61.344,47.682L66.532,52.869M63.938,39.901C63.938,34.171 59.293,29.526 53.563,29.526C47.833,29.526 43.188,34.171 43.188,39.901C43.188,45.631 47.833,50.276 53.563,50.276C59.293,50.276 63.938,45.631 63.938,39.901Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="3"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_version.xml b/app/src/main/res/drawable/ic_version.xml
new file mode 100644
index 00000000..717d60f2
--- /dev/null
+++ b/app/src/main/res/drawable/ic_version.xml
@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M5.25,2.848L14.755,2.848C15.148,2.848 15.518,3.033 15.754,3.347L19.75,8.668C19.912,8.884 20,9.148 20,9.419L20,19.9C20,20.591 19.44,21.15 18.75,21.15L5.25,21.15C4.56,21.15 4,20.591 4,19.9L4,4.098C4,3.407 4.56,2.848 5.25,2.848Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"/>
+  <path
+      android:pathData="M14.002,8.544C13.098,8.149 12.088,8.068 11.131,8.311C10.175,8.555 9.326,9.11 8.72,9.889C8.29,10.443 8.001,11.087 7.869,11.766L7.278,10.939C7.037,10.602 6.568,10.523 6.231,10.763C5.894,11.004 5.816,11.472 6.056,11.809L7.488,13.815L7.575,13.916C7.795,14.131 8.131,14.193 8.418,14.057L10.646,13.004L10.713,12.967C11.039,12.77 11.169,12.356 11.003,12.005C10.826,11.63 10.379,11.471 10.004,11.648L9.364,11.951C9.459,11.538 9.642,11.148 9.905,10.809C10.306,10.293 10.868,9.926 11.501,9.764C12.135,9.603 12.804,9.657 13.403,9.919C14.002,10.18 14.496,10.634 14.809,11.208C15.122,11.782 15.235,12.444 15.129,13.089C15.024,13.734 14.706,14.326 14.227,14.77C13.748,15.215 13.134,15.487 12.483,15.544C11.832,15.601 11.18,15.439 10.631,15.085L10.565,15.047C10.226,14.874 9.805,14.981 9.594,15.307C9.37,15.655 9.47,16.12 9.818,16.344C10.647,16.88 11.631,17.124 12.614,17.038C13.597,16.952 14.524,16.541 15.248,15.87C15.971,15.199 16.45,14.305 16.609,13.331C16.768,12.357 16.598,11.357 16.126,10.49C15.654,9.624 14.907,8.938 14.002,8.544Z"
+      android:fillColor="#FEFEFE"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_x_circle_darkgrey.xml b/app/src/main/res/drawable/ic_x_circle_darkgrey.xml
new file mode 100644
index 00000000..01013a94
--- /dev/null
+++ b/app/src/main/res/drawable/ic_x_circle_darkgrey.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="24dp"
+    android:viewportWidth="25"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M22.206,12C22.206,6.477 17.729,2 12.206,2C6.683,2 2.206,6.477 2.206,12C2.206,17.523 6.683,22 12.206,22C17.729,22 22.206,17.523 22.206,12Z"
+      android:fillColor="#525252"/>
+  <path
+      android:pathData="M15.205,15L9.206,9M9.207,15L15.206,9"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#121212"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_x_circle_grey.xml b/app/src/main/res/drawable/ic_x_circle_grey.xml
new file mode 100644
index 00000000..b30ba54b
--- /dev/null
+++ b/app/src/main/res/drawable/ic_x_circle_grey.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M21.706,12C21.706,6.477 17.229,2 11.706,2C6.183,2 1.706,6.477 1.706,12C1.706,17.523 6.183,22 11.706,22C17.229,22 21.706,17.523 21.706,12Z"
+      android:fillColor="#888888"/>
+  <path
+      android:pathData="M14.705,15L8.706,9M8.707,15L14.706,9"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#3D3D3D"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_x_circle_grey02.xml b/app/src/main/res/drawable/ic_x_circle_grey02.xml
new file mode 100644
index 00000000..173c712d
--- /dev/null
+++ b/app/src/main/res/drawable/ic_x_circle_grey02.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="25dp"
+    android:viewportWidth="25"
+    android:viewportHeight="25">
+  <path
+      android:pathData="M22.456,12.5C22.456,6.977 17.979,2.5 12.456,2.5C6.933,2.5 2.456,6.977 2.456,12.5C2.456,18.023 6.933,22.5 12.456,22.5C17.979,22.5 22.456,18.023 22.456,12.5Z"
+      android:fillColor="#888888"/>
+  <path
+      android:pathData="M15.455,15.5L9.456,9.5M9.457,15.5L15.456,9.5"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#FEFEFE"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/app/src/main/res/drawable/img_art.png b/app/src/main/res/drawable/img_art.png
new file mode 100644
index 00000000..0a800ce2
Binary files /dev/null and b/app/src/main/res/drawable/img_art.png differ
diff --git a/app/src/main/res/drawable/bookcover_sample.png b/app/src/main/res/drawable/img_book_cover_sample.png
similarity index 100%
rename from app/src/main/res/drawable/bookcover_sample.png
rename to app/src/main/res/drawable/img_book_cover_sample.png
diff --git a/app/src/main/res/drawable/img_group_room.png b/app/src/main/res/drawable/img_group_room.png
new file mode 100644
index 00000000..c83fd486
Binary files /dev/null and b/app/src/main/res/drawable/img_group_room.png differ
diff --git a/app/src/main/res/drawable/img_humanities.png b/app/src/main/res/drawable/img_humanities.png
new file mode 100644
index 00000000..a05474b7
Binary files /dev/null and b/app/src/main/res/drawable/img_humanities.png differ
diff --git a/app/src/main/res/drawable/img_literature.png b/app/src/main/res/drawable/img_literature.png
new file mode 100644
index 00000000..93f18ebe
Binary files /dev/null and b/app/src/main/res/drawable/img_literature.png differ
diff --git a/app/src/main/res/drawable/img_science_it.png b/app/src/main/res/drawable/img_science_it.png
new file mode 100644
index 00000000..611822f0
Binary files /dev/null and b/app/src/main/res/drawable/img_science_it.png differ
diff --git a/app/src/main/res/drawable/img_social_science.png b/app/src/main/res/drawable/img_social_science.png
new file mode 100644
index 00000000..1608038d
Binary files /dev/null and b/app/src/main/res/drawable/img_social_science.png differ
diff --git a/app/src/main/res/drawable/img_tutorial_1.png b/app/src/main/res/drawable/img_tutorial_1.png
new file mode 100644
index 00000000..e93b9376
Binary files /dev/null and b/app/src/main/res/drawable/img_tutorial_1.png differ
diff --git a/app/src/main/res/drawable/img_tutorial_2.png b/app/src/main/res/drawable/img_tutorial_2.png
new file mode 100644
index 00000000..e6de05da
Binary files /dev/null and b/app/src/main/res/drawable/img_tutorial_2.png differ
diff --git a/app/src/main/res/drawable/img_tutorial_3.png b/app/src/main/res/drawable/img_tutorial_3.png
new file mode 100644
index 00000000..69ca3db7
Binary files /dev/null and b/app/src/main/res/drawable/img_tutorial_3.png differ
diff --git a/app/src/main/res/drawable/img_tutorial_4.png b/app/src/main/res/drawable/img_tutorial_4.png
new file mode 100644
index 00000000..9a726d95
Binary files /dev/null and b/app/src/main/res/drawable/img_tutorial_4.png differ
diff --git a/app/src/main/res/drawable/img_tutorial_5.png b/app/src/main/res/drawable/img_tutorial_5.png
new file mode 100644
index 00000000..4cefa4b2
Binary files /dev/null and b/app/src/main/res/drawable/img_tutorial_5.png differ
diff --git a/app/src/main/res/drawable/img_tutorial_6.png b/app/src/main/res/drawable/img_tutorial_6.png
new file mode 100644
index 00000000..1d7dd54b
Binary files /dev/null and b/app/src/main/res/drawable/img_tutorial_6.png differ
diff --git a/app/src/main/res/mipmap-anydpi/ic_launcher.xml b/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
similarity index 56%
rename from app/src/main/res/mipmap-anydpi/ic_launcher.xml
rename to app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
index 6f3b755b..c4a603d4 100644
--- a/app/src/main/res/mipmap-anydpi/ic_launcher.xml
+++ b/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@drawable/ic_launcher_background" />
-    <foreground android:drawable="@drawable/ic_launcher_foreground" />
-    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
+    <background android:drawable="@drawable/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
 </adaptive-icon>
\ No newline at end of file
diff --git a/app/src/main/res/mipmap-anydpi/ic_launcher_round.xml b/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
similarity index 56%
rename from app/src/main/res/mipmap-anydpi/ic_launcher_round.xml
rename to app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
index 6f3b755b..c4a603d4 100644
--- a/app/src/main/res/mipmap-anydpi/ic_launcher_round.xml
+++ b/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@drawable/ic_launcher_background" />
-    <foreground android:drawable="@drawable/ic_launcher_foreground" />
-    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
+    <background android:drawable="@drawable/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
 </adaptive-icon>
\ No newline at end of file
diff --git a/app/src/main/res/mipmap-hdpi/ic_launcher.webp b/app/src/main/res/mipmap-hdpi/ic_launcher.webp
index c209e78e..52323eb5 100644
Binary files a/app/src/main/res/mipmap-hdpi/ic_launcher.webp and b/app/src/main/res/mipmap-hdpi/ic_launcher.webp differ
diff --git a/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.webp b/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.webp
new file mode 100644
index 00000000..38e2f4cc
Binary files /dev/null and b/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.webp differ
diff --git a/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp b/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp
index b2dfe3d1..95e5d1e9 100644
Binary files a/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp and b/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp differ
diff --git a/app/src/main/res/mipmap-mdpi/ic_launcher.webp b/app/src/main/res/mipmap-mdpi/ic_launcher.webp
index 4f0f1d64..f5ecfd18 100644
Binary files a/app/src/main/res/mipmap-mdpi/ic_launcher.webp and b/app/src/main/res/mipmap-mdpi/ic_launcher.webp differ
diff --git a/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.webp b/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.webp
new file mode 100644
index 00000000..c04927ff
Binary files /dev/null and b/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.webp differ
diff --git a/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp b/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp
index 62b611da..0c1ec6a1 100644
Binary files a/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp and b/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp differ
diff --git a/app/src/main/res/mipmap-xhdpi/ic_launcher.webp b/app/src/main/res/mipmap-xhdpi/ic_launcher.webp
index 948a3070..a6eef5ec 100644
Binary files a/app/src/main/res/mipmap-xhdpi/ic_launcher.webp and b/app/src/main/res/mipmap-xhdpi/ic_launcher.webp differ
diff --git a/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.webp b/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.webp
new file mode 100644
index 00000000..320763b6
Binary files /dev/null and b/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.webp differ
diff --git a/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp b/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp
index 1b9a6956..dd8083cf 100644
Binary files a/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp and b/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp differ
diff --git a/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp b/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp
index 28d4b77f..738c680f 100644
Binary files a/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp and b/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp differ
diff --git a/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.webp b/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.webp
new file mode 100644
index 00000000..997c1a82
Binary files /dev/null and b/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.webp differ
diff --git a/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp b/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp
index 9287f508..3db28c64 100644
Binary files a/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp and b/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp differ
diff --git a/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp b/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp
index aa7d6427..aa75ed64 100644
Binary files a/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp and b/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp differ
diff --git a/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.webp b/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.webp
new file mode 100644
index 00000000..12ed5206
Binary files /dev/null and b/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.webp differ
diff --git a/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp b/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp
index 9126ae37..d5507d6a 100644
Binary files a/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp and b/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp differ
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 2e461e44..45d294a7 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -1,17 +1,23 @@
 <resources>
-    <string name="app_name">Thip</string>
+    <string name="app_name">THIP</string>
+
+    <!--    navigation    -->
+    <string name="nav_feed">피드</string>
+    <string name="nav_group">모임</string>
+    <string name="nav_search">검색</string>
+    <string name="nav_mypage">내 정보</string>
 
     <!--   view 컴포넌트    -->
     <string name="reading_user_num">🔥 %d명이 읽기에 참여중이에요! 🔥</string>
 
     <!--   header 컴포넌트    -->
     <string name="subscribe">구독</string>
-    <string name="subscriber_num">%02d명이 구독중</string>
+    <string name="subscriber_num">명이 구독중</string>
     <string name="influencer">공식 인플루언서</string>
     <string name="hours_ago">%d시간 전</string>
 
     <!--   modal 컴포넌트    -->
-    <string name="condition_of_general_review">독서진행도 %d%%부터 총평을 작성할 수 있습니다.</string>
+    <string name="condition_of_general_review">독서 진행도 80%를 달성해야 총평을 작성할 수 있어요.</string>
     <string name="complete_comment">댓글 작성이 완료되었습니다.</string>
     <string name="action_view_comment">보러가기</string>
     <string name="introduction">소개</string>
@@ -21,7 +27,7 @@
     <string name="book_author">한한강한강한강한ㅇㅇㄴㄴㅁ강</string>
 
     <!--    버튼 컴포넌트    -->
-    <string name="author">저</string>
+    <string name="author">" 저"</string>
     <string name="add_to_my_feed">내 피드에 추가</string>
     <string name="yes">예</string>
     <string name="no">아니오</string>
@@ -35,17 +41,415 @@
     <string name="character_relationship">인물관계도 보기</string>
     <string name="write_record">기록 작성</string>
     <string name="create_vote">투표 생성</string>
+    <string name="edit_record">기록 수정</string>
+    <string name="edit_vote">투표 수정</string>
 
     <!--    카드 컴포넌트    -->
     <string name="time_ago">시간 전</string>
-    <string name="group">모임</string>
     <string name="change">변경</string>
-
-    <!--    TextField 컴포넌트    -->
-    <string name="error_page_over">해당 도서는 %1$dp까지만 있습니다.</string>
+    <string name="card_item_end_date">"%1$s일 뒤 "</string>
+    <string name="card_item_end">" 모집 마감"</string>
+    <string name="time_remaining_after">뒤</string>
+    <string name="time_remaining_left">남음</string>
+    <string name="card_item_finish">" 종료"</string>
+    <string name="card_item_participating_count">%1$s명</string>
+    <string name="card_item_participant_string">참여</string>
+    <string name="card_item_participant_count">%1$s</string>
+    <string name="card_item_participant_count_max"> / %1$s명</string>
+    <string name="card_book_explain">도서 소개</string>
+    <string name="card_author">%1$s 저</string>
+    <string name="record_book">기록장</string>
+    <string name="vote_title">모임방의 뜨거운 감자</string>
+    <string name="no_vote">모임방에 생성된 투표가 없어요</string>
 
     <!--    top app bar 컴포넌트    -->
     <string name="subscriber">님의 구독자</string>
     <string name="next">다음</string>
     <string name="page_name">페이지명</string>
+
+    <!--    myPage Screen    -->
+    <string name="my_page">내 정보</string>
+    <string name="etc">기타</string>
+    <string name="edit">편집</string>
+    <string name="my_activity">내 활동</string>
+    <string name="saved">저장</string>
+    <string name="reactions">반응</string>
+    <string name="notification_settings">알림설정</string>
+    <string name="guide">가이드</string>
+    <string name="version">버전 1.0.0</string>
+    <string name="terms_of_use">개인정보처리방침  이용약관</string>
+    <string name="customer_service">고객센터</string>
+    <string name="notice">공지사항</string>
+    <string name="delete_account">회원탈퇴</string>
+    <string name="log_out">로그아웃</string>
+    <string name="menu">메뉴</string>
+    <string name="likes">좋아요</string>
+    <string name="comments">댓글</string>
+    <string name="feed">피드</string>
+    <string name="book">책</string>
+    <string name="edit_profile">프로필 편집</string>
+    <string name="change_nickname">닉네임 변경</string>
+    <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>
+    <string name="scientist">과학자</string>
+    <string name="social_science">사회과학</string>
+    <string name="sociologist">사회학자</string>
+    <string name="art">예술</string>
+    <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>
+    <string name="leave_thip_notice_2">복구 불가능</string>
+    <string name="leave_thip_notice_3">하며 90일 이후 재가입이 가능합니다.</string>
+    <string name="leave_thip_notice_4">-을 사유로 개인정보를 -개월 간 보존합니다.</string>
+    <string name="leave_thip_notice_5">등록된 기록 및 게시물은 자동으로 삭제되지 않습니다.(or 삭제됩니다.)</string>
+    <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">이메일로 닉네임과 문의사항을 보내주시면</string>
+    <string name="customer_center_description_2">빠른 시일 내로 해결해 드릴게요!</string>
+
+    <string name="no_saved_book">아직 저장한 책이 없어요</string>
+    <string name="no_saved_feed">아직 저장한 피드가 없어요</string>
+    <string name="do_thip_book">마음에 드는 책을 THIP 해보세요!</string>
+    <string name="do_thip_feed">마음에 드는 피드를 THIP 해보세요!</string>
+
+    <string name="no_saved_reaction">아직 저장한 반응이 없어요</string>
+    <string name="save_first_reaction">첫 번째 반응을 저장해 보세요!</string>
+
+    <string name="nickname_error_cooldown">닉네임은 6개월에 한 번 변경할 수 있어요</string>
+    <string name="nickname_error_duplicate">중복된 닉네임이에요</string>
+    <string name="nickname_error_same">현재 닉네임과 같아요</string>
+    <string name="error_unknown">알 수 없는 오류가 발생했어요</string>
+
+    <string name="profile_edit_completely">프로필 설정을 성공적으로 변경했어요.</string>
+
+
+    <!--    my room 컴포넌트    -->
+    <string name="on_going">진행중</string>
+    <string name="recruiting">모집중</string>
+    <string name="my_group_room">내 모임방</string>
+    <string name="group_room_desc">소개글</string>
+    <string name="group_period">모임 활동 기간</string>
+    <string name="group_mate">참여 중인 독서 메이트</string>
+    <string name="group_recommend">이런 모임방은 어때요?</string>
+    <string name="group_recruiting">"모집"</string>
+    <string name="group_genre">"장르"</string>
+    <string name="deadline_string">마감 임박한 독서 모임방</string>
+    <string name="group_participant">%1$s명</string>
+    <string name="group_participant_string">참여</string>
+    <string name="group_progress">"%1$s님의 진행도 "</string>
+    <string name="group_search_placeholder">모임방 참여할 사람!</string>
+    <string name="group_room_screen_participant_count_max"> / %1$s명</string>
+    <string name="group_room_screen_participant_count">%1$s</string>
+    <string name="group_room_screen_end_date">%1$s일 남음</string>
+    <string name="group_room_screen_participant">참여하기</string>
+    <string name="group_room_screen_cancel">참여 취소하기</string>
+    <string name="group_room_screen_end">모집 마감하기</string>
+    <string name="group_room_period">%1$s ~ %2$s</string>
+    <string name="card_input_author">%1$s 저</string>
+    <string name="current_page">현재 페이지 %d</string>
+    <string name="percent">%</string>
+    <string name="leave_room_toast">모임 나가기를 완료했어요.</string>
+    <string name="leave_room_fail_toast">모임 나가기를 실패했어요.</string>
+
+    <!--    group room    -->
+    <string name="introduction_content">소개글</string>
+    <string name="group_active_period">모임 활동기간</string>
+    <string name="book_mate">독서메이트</string>
+    <string name="participate_num">%d명이 참여 중</string>
+    <string name="genre">장르</string>
+    <string name="group_room_chat">오늘의 한마디</string>
+    <string name="group_room_chat_description">모임방 멤버들과 간단한 인사를 나눠보세요!</string>
+    <string name="group_room_mates">독서메이트</string>
+    <string name="comment_to">님에게 답글 작성</string>
+    <string name="group_room_chat_hint">메이트들과 간단한 인사를 나눠보세요!</string>
+    <string name="leave_room">방 나가기</string>
+    <string name="leave_room_modal_title">모임방을 나가시겠어요?</string>
+    <string name="leave_room_modal_content">방을 나가시게 되면\n독서메이트들과의 추억이 사라집니다.</string>
+    <string name="report_room">방 신고하기</string>
+    <string name="delete_room">방 삭제하기</string>
+    <string name="delete_room_modal_title">모임방을 삭제하시겠어요?</string>
+    <string name="delete_room_modal_content">방을 삭제하게 되면\n독서메이트들과의 추억이 사라집니다.</string>
+    <string name="delete">삭제하기</string>
+    <string name="modify">수정하기</string>
+    <string name="report">신고하기</string>
+    <string name="group_room_no_chat_title">아직 대화가 없어요</string>
+    <string name="group_room_no_chat_content">첫번째 한마디를 남겨보세요!</string>
+    <string name="group_room_chat_max">오늘의 한마디는 하루에 다섯번까지 작성할 수 있어요</string>
+    <string name="group_room_chat_delete_success">오늘의 한마디 삭제를 완료했어요.</string>
+    <string name="numbering" formatted="false">%d. %s</string>
+
+    <!--    group note    -->
+    <string name="tilde">~</string>
+    <string name="page">p</string>
+    <string name="group_record">그룹 기록</string>
+    <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>
+    <string name="page_to_record">기록할 페이지</string>
+    <string name="general_review">총평</string>
+    <string name="all_range">전체범위</string>
+    <string name="error_page_over">전체페이지를 초과할 수 없어요.</string>
+    <string name="my_opinion_title">지금 읽은 그 부분, 어땠나요?</string>
+    <string name="my_opinion_placeholder">...한 생각이 들었어요.🤔</string>
+    <string name="vote_title_placeholder">투표 내용을 20자 이내로 입력하세요.</string>
+    <string name="vote_content_placeholder">항목을 20자 이내로 입력</string>
+    <string name="add_content">항목 추가</string>
+    <string name="condition_of_view_general_review">독서 진행도 80% 이상부터 총평을 볼 수 있어요.</string>
+    <string name="no_records_yet">아직 기록이 없어요.</string>
+    <string name="no_overviews_yet">아직 총평이 없어요.</string>
+    <string name="no_group_record_subtext">우리 모임의 첫번째 기록을 남겨보세요</string>
+    <string name="no_my_record_subtext">나의 첫번째 기록을 남겨보세요</string>
+    <string name="no_overview_subtext">책을 끝까지 읽고 든 생각을 남겨보세요</string>
+    <string name="no_comments_yet">아직 댓글이 없어요.</string>
+    <string name="no_comment_subtext">첫번째 댓글을 남겨보세요</string>
+    <string name="pin_modal_title">이 기록을 피드에 핀할까요?</string>
+    <string name="pin_modal_content">핀하면 내 피드에 글을 옮길 수 있어요.</string>
+    <string name="delete_post_title">이 기록을 삭제하시겠어요?</string>
+    <string name="delete_post_content">삭제 후에는 되돌릴 수 없어요.</string>
+    <string name="sort_comment">댓글 많은 순</string>
+    <string name="posting_in_progress">기록을 게시 중입니다...</string>
+    <string name="posting_complete">기록이 게시되었습니다!</string>
+    <string name="delete_comment_title">이 댓글을 삭제하시겠어요?</string>
+    <string name="comment_deleted">삭제된 댓글이에요.</string>
+
+    <!--    alarm    -->
+    <string name="alarm_feed">피드</string>
+    <string name="alarm_group">모임</string>
+    <string name="alarm_string">알림</string>
+    <string name="alarm_notification_comment">새로운 알림이 없어요</string>
+
+    <!--    group makeroom    -->
+    <string name="group_making_group">모임 만들기</string>
+    <string name="group_saved_book">저장한 책</string>
+    <string name="group_book">모임 책</string>
+    <string name="group_book_search_hint"> 책 제목을 검색해보세요.</string>
+    <string name="group_register_book">책 신청하기</string>
+    <string name="group_register_book_comment_1">현재 등록된 책이 아닙니다.</string>
+    <string name="group_register_book_comment_2">원하시는 책을 신청해주세요.</string>
+    <string name="group_request_book">책 신청</string>
+    <string name="group_request_book_comment_1">이메일로 책 제목, 출판사를 보내주시면</string>
+    <string name="group_request_book_comment_2">빠른 시일내로 책을 추가해드릴게요!</string>
+    <string name="group_select_book_title">책 선택</string>
+    <string name="group_book_genre">책 장르</string>
+    <string name="group_genre_select_comment">책을 가장 잘 설명하는 장르를 하나 골라주세요</string>
+    <string name="group_room_title">방 제목</string>
+    <string name="group_room_title_hint">방 제목을 입력해주세요</string>
+    <string name="group_room_explain">한 줄 소개</string>
+    <string name="group_room_explain_hint">방에 대한 짧은 소개글을 작성해주세요</string>
+    <string name="group_room_duration_title">모임 활동기간</string>
+    <string name="group_room_duration_comment">모임 활동 기간은 최대 3개월까지 설정 가능합니다.</string>
+    <string name="group_room_duration_error">(선택된 기간: %1$d일)</string>
+    <string name="group_room_member_limit_title">인원 제한</string>
+    <string name="group_room_member_limit_comment">모집 인원은 최대 30명까지 입력할 수 있습니다.</string>
+    <string name="group_room_limit">명의 독서 메이트를 모집합니다</string>
+    <string name="group_genre_selected_comment">1개만 선택 가능합니다.</string>
+    <string name="group_selected_book_author">%1$s 저</string>
+    <string name="group_password_hint">4자리 숫자로 입장 비밀번호를 설정</string>
+    <string name="group_year">년</string>
+    <string name="group_month">월</string>
+    <string name="group_day">일</string>
+    <string name="group_private_option">공개 설정</string>
+    <string name="group_private_comment">비공개로 설정하기</string>
+    <string name="group_private_warning_message">4자리 숫자를 입력해주세요.</string>
+    <string name="group_room_duration_active_comment">%1$d월 %2$d일 자정에 자동으로 모집 마감되고 활동이 가능합니다.</string>
+    <string name="group_book_search">검색해서 찾기</string>
+    <string name="group_room_duration_initial_comment">모임방 활동이 시작되면, 독서메이트 모집이 자동으로 종료돼요.</string>
+    <string name="group_input_count">%1$d / %2$d</string>
+
+    <!--    splash screen   -->
+    <string name="splash_thip">띱!</string>
+    <string name="splash_ment">하고 떠오른 그 문장을 나눠요</string>
+
+    <!--    tutorial screen   -->
+    <string name="tutorial_1">피드에서 책과 독서에 대한 생각을\n자유롭게 나누어 보세요!</string>
+    <string name="tutorial_2">칭호를 통해 내 독서 취향을 드러내고,\n마음에 드는 유저를 \'띱\'하고 감상을 공유해 보세요!</string>
+    <string name="tutorial_3">모임방에서는 글은 물론 투표 기능을 통해\n감상과 의견을 나눌 수 있어요.</string>
+    <string name="tutorial_4">읽고 싶은 책으로 나만의 독서 모임을 만들고,\n독서메이트와 함께 기록을 나눌 수 있어요.</string>
+    <string name="tutorial_5">기록은 자유롭게, 감상은 방해 없이.\n읽지 않은 페이지에 대한 기록은 블라인드 되어\n스포일러 걱정 없이 몰입할 수 있어요</string>
+    <string name="tutorial_6">모임방의 인상깊은 기록을\n\'핀하기\'로 피드에 다시 공유해 보세요.</string>
+    <string name="thip_plus">Thip+</string>
+
+
+    <!--    signin   -->
+    <string name="kakao_login">카카오계정 로그인</string>
+    <string name="google_login">구글계정 로그인</string>
+    <string name="settings_1">설정 1/2</string>
+    <string name="settings_2">설정 2/2</string>
+    <string name="nickname">닉네임 (필수)</string>
+    <string name="nickname_warning">이미 사용중인 닉네임입니다.</string>
+    <string name="nickname_condition">한글/영문소문자/숫자로 구성</string>
+    <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>
+    <string name="skip">건너뛰기</string>
+
+    <!--    feed   -->
+    <string name="my_thip_list">내 띱 목록</string>
+    <string name="thip_list">띱 목록</string>
+    <string name="whole_num">전체 %d</string>
+    <string name="toast_thip">%1$s 님을 띱 했어요</string>
+    <string name="toast_thip_cancel">%1$s 님을 띱 취소했어요</string>
+    <string name="thip">띱 하기</string>
+    <string name="thip_cancel">띱 취소</string>
+    <string name="thip_num">%1$d명</string>
+    <string name="thip_ing">이 띱 하는 중</string>
+    <string name="create_feed">피드에 글을 작성해보세요</string>
+    <string name="empty_feed">피드에 작성된 글이 없어요</string>
+    <string name="find_thip_mate">관심있는 독서메이트를 찾아보세요!</string>
+    <string name="my_feed">내 피드</string>
+
+    <string name="group_participant_close_popup">모집을 마감하시겠습니까?</string>
+    <string name="group_participant_close_comment">독서메이트 모집을 마감하면\n지금 바로 모임방 활동을 바로 시작할 수 있어요.</string>
+    <string name="group_participant_close_alarm">독서메이트 모집을 성공적으로 마감했어요.</string>
+    <string name="group_no_room_exist">모임방이 아직 없어요</string>
+    <string name="group_no_room_error_comment">해당 장르의 모임방이 생기면 보여줄게요!</string>
+    <string name="group_empty_card_title">참여 중인 모임방이 없어요</string>
+    <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>
+    <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="edit_feed_title">글 수정</string>
+    <string name="delete_feed">삭제하기</string>
+    <string name="delete_feed_dialog_title">이 피드를 삭제하시겠어요?</string>
+    <string name="delete_feed_dialog_description">삭제 후에는 되돌릴 수 없어요.</string>
+    <string name="no_user_you_look_for">찾는 사용자가 없어요</string>
+    <string name="search_user">사용자 찾기</string>
+    <string name="search_user_you_look_for">내가 찾는 사용자를 검색해보세요.</string>
+    <string name="posting_in_progress_feed">글을 작성중이에요...</string>
+    <string name="posting_complete_feed">새 글 작성을 완료했어요!</string>
+    <string name="report_complete_feed">게시글 신고를 완료했어요.</string>
+
+
+    <!--    book search   -->
+    <string name="book_popular_search">가장 많이 검색된 책</string>
+    <string name="book_search_topappbar">검색</string>
+    <string name="book_search_hint">책 제목, 작가명을 검색해보세요.</string>
+    <string name="book_no_search_result1">현재 등록된 책이 없어요.</string>
+    <string name="book_no_search_result2">원하는 책을 신청해주세요!</string>
+    <string name="book_search_date">%1$s. 기준</string>
+    <string name="book_no_most_search_result_comment_1">아직 순위가 집계되지 않았어요.</string>
+    <string name="book_no_most_search_result_comment_2">조금만 기다려주세요!</string>
+    <string name="search_recruiting_group_count">모집중인 모임방 %1$d개</string>
+    <string name="search_write_feed_comment">피드에 글 쓰기</string>
+    <string name="search_watch_feed">피드 글 둘러보기</string>
+    <string name="search_no_feed_comment_1">이 책으로 작성된 피드가 없어요.</string>
+    <string name="search_no_feed_comment_2">첫번째 피드를 작성해보세요!</string>
+    <string name="sort_like">인기순</string>
+    <string name="sort_latest">최신순</string>
+    <string name="search_book_comment">소개</string>
+    <string name="search_book_author">%1$s 저 · %2$s</string>
+    <string name="group_filter_popular">인기순</string>
+    <string name="group_filter_deadline">마감임박순</string>
+    <string name="group_recruiting_title">모집중인 모임방</string>
+    <string name="book_recruiting_empty_message">이 책으로 모집중인 모임방이 없어요.</string>
+    <string name="book_recruiting_empty_sub_message">직접 모임방을 만들어보세요!</string>
+    <string name="group_recruiting_create_button">모임방 만들기</string>
+
+    <!--    group repository sections    -->
+    <string name="room_section_deadline">마감 임박한 독서 모임방</string>
+    <string name="room_section_popular">인기 있는 독서 모임방</string>
+    <string name="room_section_influencer">인플루언서·작가 독서 모임방</string>
+    
+    <!--    error states    -->
+    <string name="error_data_load_failed">데이터를 불러올 수 없습니다</string>
+    <string name="error_network_connection">네트워크 연결을 확인해주세요</string>
+
+    <!--    group viewmodel messages    -->
+    <!-- GroupMakeRoomViewModel -->
+    <string name="error_form_validation">입력 정보를 확인해주세요</string>
+    <string name="error_book_info_invalid">책 정보가 올바르지 않습니다</string>
+    <string name="error_room_creation_failed">모임방 생성에 실패했습니다: %1$s</string>
+    <string name="error_network_error">네트워크 오류가 발생했습니다: %1$s</string>
+    
+    <!-- GroupRoomRecruitViewModel -->
+    <string name="success_participation_complete">모임방 참여가 완료되었어요! 모집 마감 후 활동이 시작돼요.</string>
+    <string name="error_participation_failed">참여 처리 중 오류가 발생했습니다: %1$s</string>
+    <string name="success_participation_cancelled">모임방 참여가 취소되었어요! 다른 방을 찾아보세요.</string>
+    <string name="error_participation_cancel_failed">참여 취소 중 오류가 발생했습니다: %1$s</string>
+    <string name="success_recruitment_closed">독서메이트 모집을 성공적으로 마감했어요.</string>
+    <string name="error_room_close_permission">방 모집 마감 권한이 없습니다.</string>
+    <string name="error_room_expired">이미 모집기간이 만료된 방입니다.</string>
+    <string name="error_room_close_failed">모집 마감 중 오류가 발생했습니다.</string>
+    <string name="error_room_info_not_found">방 정보를 찾을 수 없습니다.</string>
+    <string name="error_max_participate">모임방 인원이 다 찼어요.</string>
+
+    <!-- SearchBookGroupViewModel -->
+    <string name="error_recruiting_rooms_not_found">모집중인 방 정보를 찾을 수 없습니다.</string>
+    <string name="error_recruiting_rooms_load_failed">모집중인 방을 불러오는데 실패했습니다.</string>
+    
+    <!-- BookDetailViewModel -->
+    <string name="error_book_detail_load_failed">책 정보를 불러오는데 실패했습니다.</string>
+    <string name="error_book_save_failed">책 저장에 실패했습니다.</string>
+    
+    <!-- FeedWriteViewModel -->
+    <string name="error_feed_id_not_returned">서버 feedId 반환 오류</string>
+
+    <!-- API constants -->
+    <string name="api_sort_like" translatable="false">like</string>
+    <string name="api_sort_latest" translatable="false">latest</string>
+    
+    <!-- GenreManager API constants -->
+    <string name="api_genre_science_it" translatable="false">과학/IT</string>
+
+    <!-- Google login constants -->
+    <string name="default_web_client_id" translatable="false">211189590640-a2ul4bnsvislm12ov7k8eu61mtketl8d.apps.googleusercontent.com</string>
+
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 7a737375..8fc4a58c 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-    <style name="Theme.Thip" parent="android:Theme.Material.Light.NoActionBar" />
+    <style name="Base.Theme.Thip" parent="android:Theme.Material.Light.NoActionBar" />
+
+    <style name="Theme.Thip" parent="Base.Theme.Thip">
+        <item name="android:windowIsTranslucent">true</item>
+    </style>
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/xml/network_security_config.xml b/app/src/main/res/xml/network_security_config.xml
new file mode 100644
index 00000000..5c6aa7b9
--- /dev/null
+++ b/app/src/main/res/xml/network_security_config.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<network-security-config>
+    <domain-config cleartextTrafficPermitted="true">
+        <domain includeSubdomains="true">3.37.87.117</domain>
+    </domain-config>
+</network-security-config>
diff --git a/build.gradle.kts b/build.gradle.kts
index 952b9306..49f69867 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -3,4 +3,6 @@ plugins {
     alias(libs.plugins.android.application) apply false
     alias(libs.plugins.kotlin.android) apply false
     alias(libs.plugins.kotlin.compose) apply false
+    id("com.google.dagger.hilt.android") version "2.57" apply false
+    id("com.google.gms.google-services") version "4.4.3" apply false
 }
\ No newline at end of file
diff --git a/gradle.properties b/gradle.properties
index 20e2a015..3caa6cc3 100644
--- a/gradle.properties
+++ b/gradle.properties
@@ -20,4 +20,5 @@ kotlin.code.style=official
 # Enables namespacing of each library's R class so that its R class includes only the
 # resources declared in the library itself and none from the library's dependencies,
 # thereby reducing the size of the R class for that library
-android.nonTransitiveRClass=true
\ No newline at end of file
+android.nonTransitiveRClass=true
+android.defaults.buildfeatures.buildconfig=true
\ No newline at end of file
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 261b2b00..a14d89d1 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -1,6 +1,9 @@
 [versions]
-agp = "8.9.1"
-kotlin = "2.0.21"
+agp = "8.9.3"
+converterGson = "3.0.0"
+hiltAndroid = "2.57"
+hiltNavigationCompose = "1.2.0"
+kotlin = "2.2.0"
 coreKtx = "1.16.0"
 junit = "4.13.2"
 junitVersion = "1.2.1"
@@ -8,10 +11,29 @@ espressoCore = "3.6.1"
 lifecycleRuntimeKtx = "2.8.7"
 activityCompose = "1.10.1"
 composeBom = "2024.09.00"
-navigationCompose = "2.9.0"
+loggingInterceptor = "5.1.0"
+navigationCompose = "2.9.2"
+foundation = "1.9.0-beta01"
+lifecycleViewmodelCompose = "2.9.1"
+navigationRuntimeAndroid = "2.9.0"
+accompanistPager = "0.36.0"
+accompanistPagerIndicators = "0.36.0"
+coilCompose = "2.7.0"
+kotlinxSerializationJson = "1.9.0"
+foundationVersion = "1.9.0-rc01"
+okhttp = "5.1.0"
+retrofit = "3.0.0"
+retrofitKotlinSerializationConverter = "1.0.0"
+androidxComposeNavigation = "2.8.2"
+lifecycleRuntimeCompose = "2.10.0-alpha01"
+datastorePreferences = "1.1.7"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
+androidx-hilt-navigation-compose = { module = "androidx.hilt:hilt-navigation-compose", version.ref = "hiltNavigationCompose" }
+converter-gson = { module = "com.squareup.retrofit2:converter-gson", version.ref = "converterGson" }
+hilt-android = { module = "com.google.dagger:hilt-android", version.ref = "hiltAndroid" }
+hilt-android-compiler = { module = "com.google.dagger:hilt-android-compiler", version.ref = "hiltAndroid" }
 junit = { group = "junit", name = "junit", version.ref = "junit" }
 androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
 androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
@@ -26,9 +48,22 @@ androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-man
 androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
 androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
 androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigationCompose" }
-
+androidx-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "foundation" }
+androidx-lifecycle-viewmodel-compose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "lifecycleViewmodelCompose" }
+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" }
+kotlinx-serialization-json = { group = "org.jetbrains.kotlinx", name = "kotlinx-serialization-json", version.ref = "kotlinxSerializationJson" }
+foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "foundationVersion" }
+logging-interceptor = { module = "com.squareup.okhttp3:logging-interceptor", version.ref = "loggingInterceptor" }
+okhttp = { module = "com.squareup.okhttp3:okhttp", version.ref = "okhttp" }
+retrofit = { module = "com.squareup.retrofit2:retrofit", version.ref = "retrofit" }
+retrofit-kotlin-serialization-converter = { group = "com.jakewharton.retrofit", name = "retrofit2-kotlinx-serialization-converter", version.ref = "retrofitKotlinSerializationConverter" }
+androidx-lifecycle-runtime-compose = { group = "androidx.lifecycle", name = "lifecycle-runtime-compose", version.ref = "lifecycleRuntimeCompose" }
+androidx-datastore-preferences = { group = "androidx.datastore", name = "datastore-preferences", version.ref = "datastorePreferences" }
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }
 kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
 kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
-
+kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }
\ No newline at end of file
diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties
index c686c423..bc55b151 100644
--- a/gradle/wrapper/gradle-wrapper.properties
+++ b/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
 #Mon Apr 28 18:50:30 KST 2025
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.11.1-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
diff --git a/settings.gradle.kts b/settings.gradle.kts
index fc4268bb..309d5459 100644
--- a/settings.gradle.kts
+++ b/settings.gradle.kts
@@ -16,6 +16,7 @@ dependencyResolutionManagement {
     repositories {
         google()
         mavenCentral()
+        maven(url = "https://devrepo.kakao.com/nexus/content/groups/public/")
     }
 }