diff --git a/.idea/misc.xml b/.idea/misc.xml
index 5e471df0..38860e7c 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -4,5 +4,5 @@
     <option name="optimizeImportsOnTheFly" value="true" />
   </component>
   <component name="ExternalStorageConfigurationManager" enabled="true" />
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_21" project-jdk-name="jbr-21" project-jdk-type="JavaSDK" />
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="jbr-21" project-jdk-type="JavaSDK" />
 </project>
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/booksearch/component/BookEmptyResult.kt b/app/src/main/java/com/texthip/thip/ui/booksearch/component/BookEmptyResult.kt
new file mode 100644
index 00000000..4d65d476
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/booksearch/component/BookEmptyResult.kt
@@ -0,0 +1,55 @@
+package com.texthip.thip.ui.booksearch.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 BookEmptyResult(
+    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/booksearch/component/BookFilteredSearchResult.kt b/app/src/main/java/com/texthip/thip/ui/booksearch/component/BookFilteredSearchResult.kt
new file mode 100644
index 00000000..da4743ef
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/booksearch/component/BookFilteredSearchResult.kt
@@ -0,0 +1,102 @@
+package com.texthip.thip.ui.booksearch.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+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.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.booksearch.mock.BookData
+import com.texthip.thip.ui.common.cards.CardBookList
+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 BookFilteredSearchResult(
+    resultCount: Int,
+    bookList: List<BookData>
+) {
+    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)
+        )
+
+        if (bookList.isEmpty()) {
+            BookEmptyResult(
+                mainText = stringResource(R.string.book_no_search_result1),
+                subText = stringResource(R.string.book_no_search_result2),
+                onRequestBook = { /*책 요청 처리*/ }
+            )
+        } else {
+            LazyColumn(
+                verticalArrangement = Arrangement.Center
+            ) {
+                itemsIndexed(bookList) { index, book ->
+                    CardBookList(
+                        title = book.title,
+                        author = book.author,
+                        publisher = book.publisher,
+                        imageRes = book.imageRes
+                    )
+                    if (index < bookList.size - 1) {
+                        Spacer(
+                            modifier = Modifier
+                                .padding(top = 12.dp, bottom = 12.dp)
+                                .fillMaxWidth()
+                                .height(1.dp)
+                                .background(colors.DarkGrey02)
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun PreviewBookFilteredSearchResult() {
+    ThipTheme {
+        BookFilteredSearchResult(
+            resultCount = 3,
+            bookList = listOf(
+                BookData(
+                    title = "이기적 유전자",
+                    author = "리처드 도킨스",
+                    publisher = "을유문화사"
+                ),
+                BookData(
+                    title = "총, 균, 쇠",
+                    author = "재레드 다이아몬드",
+                    publisher = "문학사상사"
+                ),
+                BookData(
+                    title = "코스모스",
+                    author = "칼 세이건",
+                    publisher = "사이언스북스"
+                )
+            )
+        )
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/booksearch/component/BookLiveSearchResult.kt b/app/src/main/java/com/texthip/thip/ui/booksearch/component/BookLiveSearchResult.kt
new file mode 100644
index 00000000..06213f48
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/booksearch/component/BookLiveSearchResult.kt
@@ -0,0 +1,43 @@
+package com.texthip.thip.ui.booksearch.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+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.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.ui.booksearch.mock.BookData
+import com.texthip.thip.ui.common.cards.CardBookList
+import com.texthip.thip.ui.theme.ThipTheme.colors
+
+@Composable
+fun BookLiveSearchResult(
+    bookList: List<BookData>
+) {
+    LazyColumn(
+        verticalArrangement = Arrangement.Center
+    ) {
+        itemsIndexed(bookList) { index, book ->
+            CardBookList(
+                title = book.title,
+                author = book.author,
+                publisher = book.publisher,
+                imageRes = book.imageRes
+            )
+            if (index < bookList.size - 1) {
+                Spacer(
+                    modifier = Modifier
+                        .padding(top = 12.dp, bottom = 12.dp)
+                        .fillMaxWidth()
+                        .height(1.dp)
+                        .background(colors.DarkGrey02)
+                )
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/booksearch/component/BookRecentSearch.kt b/app/src/main/java/com/texthip/thip/ui/booksearch/component/BookRecentSearch.kt
new file mode 100644
index 00000000..27743bc9
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/booksearch/component/BookRecentSearch.kt
@@ -0,0 +1,187 @@
+package com.texthip.thip.ui.booksearch.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.booksearch.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 BookRecentSearch(
+    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.menu_r400_s14_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) }
+                    )
+                }
+            }
+        }
+        Spacer(modifier = Modifier.height(32.dp))
+
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Text(
+                text = stringResource(R.string.book_popular_search),
+                color = colors.White,
+                style = typography.menu_r400_s14_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, fill = true)
+        ) {
+            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,
+                            imageRes = book.imageRes,
+                            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)
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@Preview
+@Composable
+fun PreviewBookRecentSearch() {
+    ThipTheme {
+        BookRecentSearch(
+            recentSearches = listOf("소설", "심리학", "철학", "역사", "과학", "에세이"),
+            popularBooks = listOf(
+                BookData(
+                    title = "이기적 유전자",
+                    author = "리처드 도킨스",
+                    publisher = "을유문화사",
+                    imageRes = R.drawable.bookcover_sample
+                ),
+                BookData(
+                    title = "코스모스",
+                    author = "칼 세이건",
+                    publisher = "사이언스북스",
+                    imageRes = R.drawable.bookcover_sample
+                ),
+                BookData(
+                    title = "총, 균, 쇠",
+                    author = "재레드 다이아몬드",
+                    publisher = "문학사상사",
+                    imageRes = R.drawable.bookcover_sample
+                )
+            ),
+            popularBookDate = "01.12",
+            onSearchClick = {},
+            onRemove = {},
+            onBookClick = {}
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewBookRecentSearch_EmptyPopular() {
+    ThipTheme {
+        BookRecentSearch(
+            recentSearches = emptyList(),
+            popularBooks = emptyList(),
+            popularBookDate = "01.12.",
+            onSearchClick = {},
+            onRemove = {},
+            onBookClick = {}
+        )
+    }
+}
diff --git a/app/src/main/java/com/texthip/thip/ui/booksearch/mock/BookData.kt b/app/src/main/java/com/texthip/thip/ui/booksearch/mock/BookData.kt
new file mode 100644
index 00000000..ae839da1
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/booksearch/mock/BookData.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.ui.booksearch.mock
+
+import com.texthip.thip.R
+
+data class BookData(
+    val title: String,
+    val author: String = "",
+    val publisher: String = "",
+    val imageRes: Int = R.drawable.bookcover_sample
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/booksearch/mock/DetailBookData.kt b/app/src/main/java/com/texthip/thip/ui/booksearch/mock/DetailBookData.kt
new file mode 100644
index 00000000..1de6ad7b
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/booksearch/mock/DetailBookData.kt
@@ -0,0 +1,13 @@
+package com.texthip.thip.ui.booksearch.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.bookcover_sample,
+    val participantsCount: Int = 0,
+    val recruitingRoomCount: Int = 0
+)
diff --git a/app/src/main/java/com/texthip/thip/ui/booksearch/screen/BookDetailScreen.kt b/app/src/main/java/com/texthip/thip/ui/booksearch/screen/BookDetailScreen.kt
new file mode 100644
index 00000000..142c447c
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/booksearch/screen/BookDetailScreen.kt
@@ -0,0 +1,345 @@
+package com.texthip.thip.ui.booksearch.screen
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+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.shape.RoundedCornerShape
+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.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.blur
+import androidx.compose.ui.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.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.booksearch.mock.DetailBookData
+import com.texthip.thip.ui.common.buttons.ActionMediumButton
+import com.texthip.thip.ui.common.buttons.FilterButton
+import com.texthip.thip.ui.common.modal.InfoPopup
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.common.topappbar.GradationTopAppBar
+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 BookDetailScreen(
+    modifier: Modifier = Modifier,
+    book: DetailBookData,
+    feedList: List<String> = emptyList(),
+    onLeftClick: () -> Unit = {},
+    onRightClick: () -> Unit = {},
+    onRecruitingGroupClick: () -> Unit = {},
+    onBookMarkClick: (Boolean) -> Unit = {},
+    onWriteFeedClick: () -> Unit = {}
+) {
+    var isAlarmVisible by remember { mutableStateOf(true) }
+    var isIntroductionPopupVisible by remember { mutableStateOf(false) }
+    var isBookmarked by remember { mutableStateOf(false) }
+    var selectedFilterOption by remember { mutableIntStateOf(0) }
+
+    val filterOptions = listOf(
+        stringResource(R.string.search_filter_popular),
+        stringResource(R.string.search_filter_latest)
+    )
+
+    // 알림 5초간 노출
+    LaunchedEffect(Unit) {
+        isAlarmVisible = true
+        delay(5000)
+        isAlarmVisible = false
+    }
+
+    Box(modifier = modifier.fillMaxSize()) {
+        // 메인 컨텐츠
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .then(
+                    if (isIntroductionPopupVisible) {
+                        Modifier.blur(4.dp)
+                    } else {
+                        Modifier
+                    }
+                )
+        ) {
+            if (book.coverImageRes != null) {
+                Box(modifier = Modifier
+                    .height(420.dp)
+                    .fillMaxWidth()) {
+                    Image(
+                        painter = painterResource(book.coverImageRes),
+                        contentDescription = null,
+                        modifier = Modifier
+                            .matchParentSize()
+                            .blur(4.dp),
+                        contentScale = ContentScale.Crop
+                    )
+                    Box(
+                        modifier = Modifier
+                            .matchParentSize()
+                            .background(
+                                brush = Brush.verticalGradient(
+                                    colors = listOf(
+                                        Color.Transparent,
+                                        colors.Black.copy(alpha = 0.3f),
+                                        colors.Black.copy(alpha = 0.6f),
+                                        colors.Black.copy(alpha = 0.9f),
+                                        colors.Black
+                                    ),
+                                    startY = 0f,
+                                    endY = Float.POSITIVE_INFINITY
+                                )
+                            )
+                    )
+                }
+            }
+
+            Column(modifier = Modifier.fillMaxSize()) {
+                AnimatedVisibility(visible = isAlarmVisible) {
+                    GradationTopAppBar(
+                        isImageVisible = true,
+                        count = book.participantsCount,
+                        onLeftClick = {},
+                        onRightClick = {}
+                    )
+                }
+                AnimatedVisibility(visible = !isAlarmVisible) {
+                    DefaultTopAppBar(
+                        isRightIconVisible = true,
+                        isTitleVisible = false,
+                        onLeftClick = onLeftClick,
+                        onRightClick = onRightClick
+                    )
+                }
+
+                Spacer(modifier = Modifier.height(8.dp))
+
+                // 상세 정보 영역
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 20.dp)
+                ) {
+                    Text(
+                        modifier = Modifier.padding(top = 40.dp),
+                        text = book.title,
+                        color = colors.White,
+                        style = typography.bigtitle_b700_s22
+                    )
+                    Spacer(modifier = Modifier.height(8.dp))
+
+                    Text(
+                        text = stringResource(
+                            R.string.search_book_author,
+                            book.author,
+                            book.publisher
+                        ),
+                        color = colors.Grey,
+                        style = typography.copy_r400_s12_h20
+                    )
+                    Spacer(modifier = Modifier.height(32.dp))
+
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .clickable { isIntroductionPopupVisible = true }
+                    ) {
+                        Text(
+                            text = stringResource(R.string.search_book_comment),
+                            color = colors.White,
+                            style = typography.menu_r400_s14_h24,
+                        )
+                        Spacer(modifier = Modifier.height(4.dp))
+
+                        Text(
+                            text = book.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,
+                                book.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
+                            )
+                            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 {
+                                        isBookmarked = !isBookmarked
+                                        onBookMarkClick(isBookmarked)
+                                    },
+                                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 = 33.dp)
+                    )
+
+                    // 피드 리스트
+                    Spacer(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .height(1.dp)
+                            .background(colors.DarkGrey02)
+                    )
+                    if (feedList.isEmpty()) {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .weight(1f),
+                            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
+                                )
+                            }
+                        }
+                    } else {
+                        // TODO: 피드 UI 구현 되면 수정
+                    }
+                }
+            }
+
+            FilterButton(
+                modifier = Modifier
+                    .align(Alignment.TopEnd)
+                    .padding(top = 462.dp, start = 20.dp, end = 20.dp),
+                selectedOption = filterOptions[selectedFilterOption],
+                options = filterOptions,
+                onOptionSelected = { option ->
+                    selectedFilterOption = filterOptions.indexOf(option)
+                }
+            )
+        }
+
+        if (isIntroductionPopupVisible) {
+            Box(
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .padding(horizontal = 20.dp)
+            ) {
+                InfoPopup(
+                    title = stringResource(R.string.introduction),
+                    content = book.description,
+                    onDismiss = { isIntroductionPopupVisible = false }
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun PreviewBookDetailScreen() {
+    ThipTheme {
+        BookDetailScreen(
+            book = DetailBookData(
+                title = "채식주의자",
+                author = "한강",
+                publisher = "창비",
+                description =
+                    "인터내셔널 북커상, 산클레멘테 문학상 수상작. 전세계가 주목한 인간의 역작을 다시 만나다.2016년 인터내셔널 북커상을 수상하며 한국문학의 입지를 한단계 확장시킨 한강의 명단소설 『채식주의자』. 15년 만에 새로운 장정과 판형으로 출간된다. 식물화로 건설해온 극단적이며 실재적인 상상력의 강렬한 결실로 고통과 구속의 피안에 존재하는 인간의 본성에 다가간 작품." +
+                            "인터내셔널 북커상, 산클레멘테 문학상 수상작. 전세계가 주목한 인간의 역작을 다시 만나다. \n\n2016년 인터내셔널 북커상을 수상하며 한국문학의 입지를 한단계 확장시킨 한강의 명단소설 『채식주의자』. 15년 만에 새로운 장정과 판형으로 출간된다. 식물화로 건설해온 극단적이며 실재적인 상상력의 강렬한 결실로 고통과 구속의 피안에 존재하는 인간의 본성에 다가간 작품.",
+                coverImageRes = R.drawable.bookcover_sample,
+                participantsCount = 210,
+                recruitingRoomCount = 4
+            ),
+            feedList = emptyList()
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/booksearch/screen/BookRecruitingScreen.kt b/app/src/main/java/com/texthip/thip/ui/booksearch/screen/BookRecruitingScreen.kt
new file mode 100644
index 00000000..9a2afca7
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/booksearch/screen/BookRecruitingScreen.kt
@@ -0,0 +1,227 @@
+package com.texthip.thip.ui.booksearch.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.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.runtime.remember
+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 com.texthip.thip.R
+import com.texthip.thip.ui.common.cards.CardItemRoom
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.group.myroom.mock.GroupCardItemRoomData
+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 BookRecruitingScreen(
+    recruitingList: List<GroupCardItemRoomData>,
+    onCardClick: (GroupCardItemRoomData) -> Unit = {},
+    onCreateRoomClick: () -> Unit = {}
+) {
+    Box(
+        modifier = Modifier.fillMaxSize()
+    ) {
+        Column(
+            Modifier.fillMaxSize()
+        ) {
+            DefaultTopAppBar(
+                title = stringResource(R.string.group_recruiting_title),
+                onLeftClick = {},
+            )
+
+            Column(
+                Modifier
+                    .background(colors.Black)
+                    .fillMaxSize()
+                    .padding(horizontal = 20.dp)
+            ) {
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Text(
+                        text = stringResource(R.string.group_searched_room_size, recruitingList.size),
+                        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 {
+                    LazyColumn(
+                        verticalArrangement = Arrangement.spacedBy(20.dp),
+                        contentPadding = PaddingValues(bottom = 70.dp),
+                        modifier = Modifier.fillMaxSize()
+                    ) {
+                        items(recruitingList) { item ->
+                            CardItemRoom(
+                                title = item.title,
+                                participants = item.participants,
+                                maxParticipants = item.maxParticipants,
+                                isRecruiting = item.isRecruiting,
+                                endDate = item.endDate,
+                                imageRes = item.imageRes,
+                                onClick = { onCardClick(item) }
+                            )
+                        }
+                    }
+                }
+            }
+        }
+
+        // 하단 버튼
+        Button(
+            colors = ButtonDefaults.buttonColors(
+                containerColor = colors.Purple
+            ),
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .fillMaxWidth()
+                .height(50.dp),
+            shape = RoundedCornerShape(0.dp),
+            onClick = onCreateRoomClick
+        ) {
+            Text(
+                text = stringResource(R.string.group_recruiting_create_button),
+                style = typography.smalltitle_sb600_s18_h24,
+                color = colors.White
+            )
+        }
+    }
+}
+
+@Preview()
+@Composable
+fun GroupRecruitingScreenPreview() {
+    ThipTheme {
+        val dataList = listOf(
+            GroupCardItemRoomData(
+                title = "모임방 이름입니다. 모임방...",
+                participants = 22,
+                maxParticipants = 30,
+                endDate = 3,
+                isRecruiting = true,
+                genreIndex = 0
+            ),
+            GroupCardItemRoomData(
+                title = "모임방 이름입니다. 모임방...",
+                participants = 22,
+                maxParticipants = 30,
+                endDate = 3,
+                isRecruiting = true,
+                genreIndex = 0
+            ),
+            GroupCardItemRoomData(
+                title = "모임방 이름입니다. 모임방...",
+                participants = 22,
+                maxParticipants = 30,
+                endDate = 3,
+                isRecruiting = true,
+                genreIndex = 0
+            ),
+            GroupCardItemRoomData(
+                title = "모임방 이름입니다. 모임방...",
+                participants = 22,
+                maxParticipants = 30,
+                endDate = 3,
+                isRecruiting = true,
+                genreIndex = 0
+            ),
+            GroupCardItemRoomData(
+                title = "모임방 이름입니다. 모임방...",
+                participants = 22,
+                maxParticipants = 30,
+                endDate = 3,
+                isRecruiting = true,
+                genreIndex = 0
+            ),
+            GroupCardItemRoomData(
+                title = "모임방 이름입니다. 모임방...",
+                participants = 22,
+                maxParticipants = 30,
+                endDate = 3,
+                isRecruiting = true,
+                genreIndex = 0
+            ),
+            GroupCardItemRoomData(
+                title = "모임방 이름입니다. 모임방...",
+                participants = 22,
+                maxParticipants = 30,
+                endDate = 3,
+                isRecruiting = true,
+                genreIndex = 0
+            ),
+            GroupCardItemRoomData(
+                title = "모임방 이름입니다. 모임방...",
+                participants = 22,
+                maxParticipants = 30,
+                endDate = 3,
+                isRecruiting = true,
+                genreIndex = 0
+            )
+        )
+
+        BookRecruitingScreen(
+            recruitingList = dataList
+        )
+    }
+}
+
+@Preview()
+@Composable
+fun GroupRecruitingScreenEmptyPreview() {
+    ThipTheme {
+        BookRecruitingScreen(
+            recruitingList = emptyList()
+        )
+    }
+}
\ 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
index 9411645c..80923550 100644
--- 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
@@ -1,19 +1,205 @@
 package com.texthip.thip.ui.booksearch.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.material3.Text
+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.Alignment
+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.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.navigation.NavController
+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.navigation.NavHostController
+import com.texthip.thip.R
+import com.texthip.thip.ui.booksearch.component.BookEmptyResult
+import com.texthip.thip.ui.booksearch.component.BookFilteredSearchResult
+import com.texthip.thip.ui.booksearch.component.BookLiveSearchResult
+import com.texthip.thip.ui.booksearch.component.BookRecentSearch
+import com.texthip.thip.ui.booksearch.mock.BookData
+import com.texthip.thip.ui.common.forms.SearchBookTextField
+import com.texthip.thip.ui.common.topappbar.LeftNameTopAppBar
+import com.texthip.thip.ui.theme.ThipTheme
 
 @Composable
-fun BookSearchScreen(navController: NavController) {
+fun BookSearchScreen(
+    modifier: Modifier = Modifier,
+    navController: NavHostController? = null,
+    bookList: List<BookData> = emptyList(),
+    popularBooks: List<BookData> = emptyList()
+) {
+    var recentSearches by rememberSaveable {
+        mutableStateOf(listOf("asd", "qwe", "xcv", "dfggfd", "asdasd", "gfhjghj"))
+    }
+    var searchText by rememberSaveable { mutableStateOf("") }
+    var isSearched by rememberSaveable { mutableStateOf(false) }
+    val focusRequester = remember { FocusRequester() }
+    val focusManager = LocalFocusManager.current
+
+    val liveFilteredBookList by remember(searchText) {
+        derivedStateOf {
+            if (searchText.isBlank()) emptyList() else
+                bookList.filter { book ->
+                    book.title.contains(searchText, ignoreCase = true) ||
+                            book.author.contains(searchText, ignoreCase = true) ||
+                            book.publisher.contains(searchText, ignoreCase = true)
+                }
+        }
+    }
+
+    val filteredBookList by remember(searchText, isSearched) {
+        derivedStateOf {
+            if (!isSearched) emptyList()
+            else {
+                bookList.filter { book ->
+                    searchText.isBlank() ||
+                            book.title.contains(searchText, ignoreCase = true) ||
+                            book.author.contains(searchText, ignoreCase = true) ||
+                            book.publisher.contains(searchText, ignoreCase = true)
+                }
+            }
+        }
+    }
+
+    LaunchedEffect(isSearched) {
+        if (isSearched) {
+            focusManager.clearFocus()
+        }
+    }
+
     Box(
-        modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.Center
+        modifier = modifier.fillMaxSize()
     ) {
-        Text(text = "Book Search Screen")
+        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 = searchText,
+                    onValueChange = {
+                        searchText = it
+                        isSearched = false
+                    },
+                    onSearch = { query ->
+                        if (query.isNotBlank() && !recentSearches.contains(query)) {
+                            recentSearches = listOf(query) + recentSearches
+                        }
+                        isSearched = true
+                    }
+                )
+                Spacer(modifier = Modifier.height(16.dp))
+
+                when {
+                    searchText.isBlank() && !isSearched -> {
+                        BookRecentSearch(
+                            recentSearches = recentSearches,
+                            popularBooks = popularBooks,
+                            popularBookDate = "01.12", // TODO: 서버로 날짜를 받아 오게 수정
+                            onSearchClick = { keyword ->
+                                searchText = keyword
+                                isSearched = true
+                            },
+                            onRemove = { keyword ->
+                                recentSearches = recentSearches.filterNot { it == keyword }
+                            },
+                            onBookClick = { book ->
+                                // 책 클릭 시 처리
+                            }
+                        )
+                    }
+
+                    searchText.isNotBlank() && !isSearched -> {
+                        if (liveFilteredBookList.isEmpty()) {
+                            BookEmptyResult(
+                                mainText = stringResource(R.string.book_no_search_result1),
+                                subText = stringResource(R.string.book_no_search_result2),
+                                onRequestBook = { /*책 요청 처리*/ }
+                            )
+                        } else {
+                            BookLiveSearchResult(
+                                bookList = liveFilteredBookList
+                            )
+                        }
+                    }
+
+                    isSearched -> {
+                        BookFilteredSearchResult(
+                            resultCount = filteredBookList.size,
+                            bookList = filteredBookList,
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewBookSearchScreen_Default() {
+    ThipTheme {
+        BookSearchScreen(
+            bookList = listOf(
+                BookData("aaa", "리처드 도킨스", "을유문화사", R.drawable.bookcover_sample),
+                BookData("abc", "마틴 셀리그만", "물푸레", R.drawable.bookcover_sample),
+                BookData("abcd", "빅터 프랭클", "청림출판", R.drawable.bookcover_sample),
+                BookData("abcde", "칼 융", "문학과지성사", R.drawable.bookcover_sample),
+                BookData("abcdef", "에릭 프롬", "까치글방", R.drawable.bookcover_sample),
+                BookData("abcedfg", "알베르 카뮈", "민음사", R.drawable.bookcover_sample),
+                BookData("abcdefgh", "장 폴 사르트르", "문학동네", R.drawable.bookcover_sample),
+            ),
+            popularBooks = listOf(
+                BookData("단 한번의 삶", "리처드 도킨스", "을유문화사", R.drawable.bookcover_sample),
+                BookData("사랑", "마틴 셀리그만", "물푸레", R.drawable.bookcover_sample),
+                BookData("호모 사피엔스", "빅터 프랭클", "청림출판", R.drawable.bookcover_sample),
+                BookData("코스모스 실버", "칼 융", "문학과지성사", R.drawable.bookcover_sample),
+                BookData("오만과 편견", "에릭 프롬", "까치글방", R.drawable.bookcover_sample),
+            )
+        )
+    }
+}
+
+@Preview
+@Composable
+fun PreviewBookSearchScreen_EmptyPopular() {
+    ThipTheme {
+        BookSearchScreen(
+            bookList = listOf(
+                BookData("aaa", "리처드 도킨스", "을유문화사", R.drawable.bookcover_sample),
+                BookData("abc", "마틴 셀리그만", "물푸레", R.drawable.bookcover_sample),
+                BookData("abcd", "빅터 프랭클", "청림출판", R.drawable.bookcover_sample),
+                BookData("abcde", "칼 융", "문학과지성사", R.drawable.bookcover_sample),
+                BookData("abcdef", "에릭 프롬", "까치글방", R.drawable.bookcover_sample),
+                BookData("abcedfg", "알베르 카뮈", "민음사", R.drawable.bookcover_sample),
+                BookData("abcdefgh", "장 폴 사르트르", "문학동네", R.drawable.bookcover_sample),
+            ),
+            popularBooks = emptyList()
+        )
     }
-}
\ No newline at end of file
+}
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 2ca68de2..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
@@ -37,6 +37,7 @@ fun ActionMediumButton(
     contentColor: Color,
     backgroundColor: Color,
     hasRightIcon: Boolean = false,
+    hasRightPlusIcon: Boolean = false,
     modifier: Modifier = Modifier,
     onClick: () -> Unit = {},
 ) {
@@ -70,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/cards/CardBookList.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardBookList.kt
index 544a6555..864ca8ef 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
@@ -89,7 +89,8 @@ fun CardBookList(
 
         Spacer(modifier = Modifier.width(12.dp))
 
-        IconButton(
+        // 북마크 아이콘 제거(쓰는 화면이 안보임)
+        /*IconButton(
             onClick = onBookmarkClick,
             modifier = Modifier.size(24.dp)
         ) {
@@ -98,7 +99,7 @@ fun CardBookList(
                 contentDescription = "북마크",
                 tint = if (isBookmarked) colors.Purple else colors.Grey01
             )
-        }
+        }*/
     }
 }
 
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 e9cdb408..3f66b388 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
@@ -28,6 +28,7 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 @Composable
 fun CardBookSearch(
     modifier: Modifier = Modifier,
+    number: Int? = null,
     title: String,
     imageRes: Int? = R.drawable.bookcover_sample, // 기본 이미지 리소스
     onClick: () -> Unit = {}
@@ -38,6 +39,15 @@ fun CardBookSearch(
             .clickable { onClick() },
         verticalAlignment = Alignment.CenterVertically
     ) {
+        number?.let {
+            Text(
+                text = "$it. ",
+                style = typography.menu_m500_s16_h24,
+                color = colors.White,
+                modifier = Modifier.padding(end = 4.dp)
+            )
+        }
+
         // 이미지
         Box(
             modifier = Modifier
@@ -74,6 +84,7 @@ fun CardBookSearchPreview() {
         verticalArrangement = Arrangement.spacedBy(8.dp)
     ) {
         CardBookSearch(
+            number = 1,
             title = "단 한번의 삶"
         )
     }
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/group/makeroom/screen/GroupRegisterBookScreen.kt b/app/src/main/java/com/texthip/thip/ui/common/screen/RegisterBookScreen.kt
similarity index 93%
rename from app/src/main/java/com/texthip/thip/ui/group/makeroom/screen/GroupRegisterBookScreen.kt
rename to app/src/main/java/com/texthip/thip/ui/common/screen/RegisterBookScreen.kt
index f9ec8805..819328e2 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/makeroom/screen/GroupRegisterBookScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/screen/RegisterBookScreen.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.group.makeroom.screen
+package com.texthip.thip.ui.common.screen
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -19,7 +19,7 @@ import com.texthip.thip.ui.theme.ThipTheme.colors
 import com.texthip.thip.ui.theme.ThipTheme.typography
 
 @Composable
-fun GroupRegisterBookScreen(modifier: Modifier = Modifier) {
+fun RegisterBookScreen(modifier: Modifier = Modifier) {
     Column(
         modifier = modifier
             .fillMaxSize(),
@@ -61,6 +61,6 @@ fun GroupRegisterBookScreen(modifier: Modifier = Modifier) {
 @Composable
 private fun GroupRegisterBookPreview() {
     ThipTheme {
-        GroupRegisterBookScreen()
+        RegisterBookScreen()
     }
 }
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupEmptyResultScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupEmptyResult.kt
similarity index 83%
rename from app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupEmptyResultScreen.kt
rename to app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupEmptyResult.kt
index 0cf28824..52fbb14f 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupEmptyResultScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupEmptyResult.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.group.myroom.screen
+package com.texthip.thip.ui.group.myroom.component
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -10,14 +10,14 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 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 GroupEmptyResultScreen(
+fun GroupEmptyResult(
     mainText: String,
     subText: String
 ) {
-    val colors = ThipTheme.colors
-    val typography = ThipTheme.typography
     Column(
         modifier = Modifier.fillMaxSize(),
         verticalArrangement = Arrangement.Center,
@@ -25,7 +25,6 @@ fun GroupEmptyResultScreen(
     ) {
         Text(
             text = mainText,
-            modifier = Modifier.padding(top = 20.dp),
             color = colors.White,
             style = typography.smalltitle_sb600_s18_h24
         )
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupFilteredSearchResultScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupFilteredSearchResult.kt
similarity index 72%
rename from app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupFilteredSearchResultScreen.kt
rename to app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupFilteredSearchResult.kt
index f18ac4c3..27eec17a 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupFilteredSearchResultScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupFilteredSearchResult.kt
@@ -1,15 +1,9 @@
-package com.texthip.thip.ui.group.myroom.screen
+package com.texthip.thip.ui.group.myroom.component
 
 import androidx.compose.foundation.background
-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.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -21,17 +15,17 @@ import com.texthip.thip.ui.common.buttons.GenreChipRow
 import com.texthip.thip.ui.common.cards.CardItemRoomSmall
 import com.texthip.thip.ui.group.myroom.mock.GroupCardItemRoomData
 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 GroupFilteredSearchResultScreen(
+fun GroupFilteredSearchResult(
     genres: List<String>,
     selectedGenreIndex: Int,
     onGenreSelect: (Int) -> Unit,
     resultCount: Int,
     roomList: List<GroupCardItemRoomData>
 ) {
-    val colors = ThipTheme.colors
-    val typography = ThipTheme.typography
     GenreChipRow(
         modifier = Modifier.width(20.dp),
         genres = genres,
@@ -57,8 +51,9 @@ fun GroupFilteredSearchResultScreen(
             .height(1.dp)
             .background(colors.DarkGrey02)
     )
+
     if (roomList.isEmpty()) {
-        GroupEmptyResultScreen(
+        GroupEmptyResult(
             mainText = stringResource(R.string.group_no_search_result1),
             subText = stringResource(R.string.group_no_search_result2)
         )
@@ -66,7 +61,7 @@ fun GroupFilteredSearchResultScreen(
         LazyColumn(
             verticalArrangement = Arrangement.spacedBy(16.dp)
         ) {
-            items(roomList) { room ->
+            itemsIndexed(roomList) { index, room ->
                 CardItemRoomSmall(
                     title = room.title,
                     participants = room.participants,
@@ -76,13 +71,16 @@ fun GroupFilteredSearchResultScreen(
                     isWide = true,
                     isSecret = room.isSecret
                 )
-                Spacer(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .height(1.dp)
-                        .background(colors.DarkGrey02)
-                )
+                if (index < roomList.size - 1) {
+                    Spacer(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .height(1.dp)
+                            .background(colors.DarkGrey02)
+                    )
+                }
             }
         }
     }
 }
+
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupLiveSearchResultScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupLiveSearchResult.kt
similarity index 70%
rename from app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupLiveSearchResultScreen.kt
rename to app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupLiveSearchResult.kt
index abf2ea50..33a56139 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupLiveSearchResultScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupLiveSearchResult.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.group.myroom.screen
+package com.texthip.thip.ui.group.myroom.component
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
@@ -6,7 +6,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
@@ -15,13 +15,13 @@ import com.texthip.thip.ui.group.myroom.mock.GroupCardItemRoomData
 import com.texthip.thip.ui.theme.ThipTheme.colors
 
 @Composable
-fun GroupLiveSearchResultScreen(
+fun GroupLiveSearchResult(
     roomList: List<GroupCardItemRoomData>
 ) {
     LazyColumn(
         verticalArrangement = Arrangement.spacedBy(16.dp)
     ) {
-        items(roomList) { room ->
+        itemsIndexed(roomList) { index, room ->
             CardItemRoomSmall(
                 title = room.title,
                 participants = room.participants,
@@ -31,12 +31,14 @@ fun GroupLiveSearchResultScreen(
                 isWide = true,
                 isSecret = room.isSecret
             )
-            Spacer(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .height(1.dp)
-                    .background(colors.DarkGrey02)
-            )
+            if (index < roomList.size - 1) {
+                Spacer(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(1.dp)
+                        .background(colors.DarkGrey02)
+                )
+            }
         }
     }
 }
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupRecentSearchScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupRecentSearch.kt
similarity index 89%
rename from app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupRecentSearchScreen.kt
rename to app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupRecentSearch.kt
index 1958776f..373e868a 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupRecentSearchScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/component/GroupRecentSearch.kt
@@ -1,4 +1,4 @@
-package com.texthip.thip.ui.group.myroom.screen
+package com.texthip.thip.ui.group.myroom.component
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.material3.Text
@@ -12,15 +12,15 @@ import com.texthip.thip.ui.theme.ThipTheme
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
 
 @Composable
-fun GroupRecentSearchScreen(
+fun GroupRecentSearch(
     recentSearches: List<String>,
     onSearchClick: (String) -> Unit,
     onRemove: (String) -> Unit
 ) {
-    val colors = ThipTheme.colors
-    val typography = ThipTheme.typography
     Text(
         text = stringResource(R.string.group_recent_search),
         color = colors.White,
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupRoomScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupRoomScreen.kt
index 269577eb..c80d9329 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupRoomScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupRoomScreen.kt
@@ -331,11 +331,6 @@ fun GroupRoomScreen(
             GroupBottomButtonType.CANCEL -> stringResource(R.string.group_room_screen_cancel)
             GroupBottomButtonType.CLOSE -> stringResource(R.string.group_room_screen_end)
         }
-        val buttonColor = when (currentButtonType) {
-            GroupBottomButtonType.JOIN -> colors.Purple
-            GroupBottomButtonType.CANCEL -> colors.Purple
-            GroupBottomButtonType.CLOSE -> colors.Purple
-        }
 
         Button(
             onClick = {
@@ -375,7 +370,7 @@ fun GroupRoomScreen(
                 }
             },
             colors = ButtonDefaults.buttonColors(
-                containerColor = buttonColor
+                containerColor = colors.Purple
             ),
             modifier = Modifier
                 .align(Alignment.BottomCenter)
@@ -401,7 +396,6 @@ fun GroupRoomScreen(
             )
         }
 
-        // 다이얼로그 팝업
         if (showDialog) {
             Box(
                 modifier = Modifier
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupRoomSecretScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupRoomSecretScreen.kt
index 3cd62a38..b96caccb 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupRoomSecretScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupRoomSecretScreen.kt
@@ -44,7 +44,6 @@ fun GroupRoomSecretScreen(
     val focusRequesters = remember { List(4) { FocusRequester() } }
     val keyboardController = LocalSoftwareKeyboardController.current
 
-    // 비밀번호가 4자리 완성되면 자동으로 검증
     LaunchedEffect(password.toList()) {
         val fullPassword = password.joinToString("")
         if (fullPassword.length == 4 && password.all { it.length == 1 }) {
@@ -63,7 +62,6 @@ fun GroupRoomSecretScreen(
         }
     }
 
-    // 화면 진입 시 키보드 자동 포커스
     LaunchedEffect(Unit) {
         focusRequesters[0].requestFocus()
         keyboardController?.show()
@@ -76,7 +74,6 @@ fun GroupRoomSecretScreen(
         Column(
             modifier = Modifier.fillMaxSize()
         ) {
-            // 상단 앱바
             DefaultTopAppBar(
                 isRightIconVisible = false,
                 isTitleVisible = false,
diff --git a/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupSearchScreen.kt b/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupSearchScreen.kt
index 43ec959c..7e7d88dd 100644
--- a/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupSearchScreen.kt
+++ b/app/src/main/java/com/texthip/thip/ui/group/myroom/screen/GroupSearchScreen.kt
@@ -28,12 +28,17 @@ import com.texthip.thip.R
 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.myroom.component.GroupEmptyResult
+import com.texthip.thip.ui.group.myroom.component.GroupFilteredSearchResult
+import com.texthip.thip.ui.group.myroom.component.GroupLiveSearchResult
+import com.texthip.thip.ui.group.myroom.component.GroupRecentSearch
 import com.texthip.thip.ui.group.myroom.mock.GroupCardItemRoomData
 import com.texthip.thip.ui.theme.ThipTheme
 
 @Composable
 fun GroupSearchScreen(
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    roomList: List<GroupCardItemRoomData>
 ) {
     var recentSearches by rememberSaveable {
         mutableStateOf(listOf("user.02", "ㅇㅇ", "훽후ㅣㅣ", "검색4", "검색5", "검색6"))
@@ -41,23 +46,20 @@ fun GroupSearchScreen(
     var searchText by rememberSaveable { mutableStateOf("") }
     var isSearched by rememberSaveable { mutableStateOf(false) }
     var selectedGenreIndex by rememberSaveable { mutableIntStateOf(-1) }
-    var selectedSortOption by rememberSaveable { mutableStateOf("마감임박순") }
+    var selectedSortOptionIndex by rememberSaveable { mutableIntStateOf(0) }
     val focusRequester = remember { FocusRequester() }
     val focusManager = LocalFocusManager.current
 
-    // 샘플 장르, 정렬 옵션
-    val genres = listOf("문학", "과학·IT", "사회과학", "인문학", "예술")
-    val sortOptions = listOf("마감임박순", "최신순", "참여많은순")
-
-    // 샘플 모임방 리스트
-    val roomList = listOf(
-        GroupCardItemRoomData("aaa", 22, 30, true, 3, R.drawable.bookcover_sample, 0),
-        GroupCardItemRoomData("bbb", 15, 20, true, 7, R.drawable.bookcover_sample, 1, true),
-        GroupCardItemRoomData("ccc", 10, 15, true, 5, R.drawable.bookcover_sample, 2, true),
-        GroupCardItemRoomData("ddd", 8, 12, false, 2, R.drawable.bookcover_sample, 3, true),
-        GroupCardItemRoomData("eee", 18, 25, true, 4, R.drawable.bookcover_sample, 4),
-        GroupCardItemRoomData("fff", 12, 20, true, 1, R.drawable.bookcover_sample, 0),
-        GroupCardItemRoomData("ggg", 10, 14, true, 6, R.drawable.bookcover_sample, 1),
+    val genres = listOf(
+        stringResource(R.string.literature),
+        stringResource(R.string.science_it),
+        stringResource(R.string.social_science),
+        stringResource(R.string.humanities),
+        stringResource(R.string.art)
+    )
+    val sortOptions = listOf(
+        stringResource(R.string.group_filter_deadline),
+        stringResource(R.string.group_filter_popular)
     )
 
     val liveFilteredRoomList by remember(searchText) {
@@ -69,7 +71,12 @@ fun GroupSearchScreen(
         }
     }
 
-    val filteredRoomList by remember(searchText, selectedGenreIndex, selectedSortOption, isSearched) {
+    val filteredRoomList by remember(
+        searchText,
+        selectedGenreIndex,
+        selectedSortOptionIndex,
+        isSearched
+    ) {
         derivedStateOf {
             if (!isSearched) emptyList()
             else {
@@ -77,10 +84,9 @@ fun GroupSearchScreen(
                     (searchText.isBlank() || room.title.contains(searchText, ignoreCase = true)) &&
                             (selectedGenreIndex == -1 || room.genreIndex == selectedGenreIndex)
                 }
-                when (selectedSortOption) {
-                    "마감임박순" -> filtered.sortedBy { it.endDate }
-                    "최신순" -> filtered // TODO: 생성일 기준 정렬 필요
-                    "참여많은순" -> filtered.sortedByDescending { it.participants }
+                when (selectedSortOptionIndex) {
+                    0 -> filtered.sortedBy { it.endDate }             // 마감임박순
+                    1 -> filtered.sortedByDescending { it.participants } // 인기순
                     else -> filtered
                 }
             }
@@ -132,14 +138,15 @@ fun GroupSearchScreen(
 
                 when {
                     searchText.isBlank() && !isSearched && recentSearches.isEmpty() -> {
-                        GroupRecentSearchScreen(
+                        GroupRecentSearch(
                             recentSearches = emptyList(),
                             onSearchClick = {},
                             onRemove = {}
                         )
                     }
+
                     searchText.isBlank() && !isSearched && recentSearches.isNotEmpty() -> {
-                        GroupRecentSearchScreen(
+                        GroupRecentSearch(
                             recentSearches = recentSearches,
                             onSearchClick = { keyword ->
                                 searchText = keyword
@@ -150,20 +157,22 @@ fun GroupSearchScreen(
                             }
                         )
                     }
+
                     searchText.isNotBlank() && !isSearched -> {
                         if (liveFilteredRoomList.isEmpty()) {
-                            GroupEmptyResultScreen(
+                            GroupEmptyResult(
                                 mainText = stringResource(R.string.group_no_search_result1),
                                 subText = stringResource(R.string.group_no_search_result2)
                             )
                         } else {
-                            GroupLiveSearchResultScreen(
+                            GroupLiveSearchResult(
                                 roomList = liveFilteredRoomList
                             )
                         }
                     }
+
                     isSearched -> {
-                        GroupFilteredSearchResultScreen(
+                        GroupFilteredSearchResult(
                             genres = genres,
                             selectedGenreIndex = selectedGenreIndex,
                             onGenreSelect = { selectedGenreIndex = it },
@@ -180,18 +189,31 @@ fun GroupSearchScreen(
                 modifier = Modifier
                     .align(Alignment.TopEnd)
                     .padding(top = 176.dp, end = 20.dp),
-                selectedOption = selectedSortOption,
+                selectedOption = sortOptions[selectedSortOptionIndex],
                 options = sortOptions,
-                onOptionSelected = { selectedSortOption = it }
+                onOptionSelected = { selected ->
+                    selectedSortOptionIndex = sortOptions.indexOf(selected)
+                }
             )
         }
     }
 }
 
+
 @Preview
 @Composable
 fun PreviewGroupSearchScreen() {
     ThipTheme {
-        GroupSearchScreen()
+        GroupSearchScreen(
+            roomList = listOf(
+                GroupCardItemRoomData("aaa", 22, 30, true, 3, R.drawable.bookcover_sample, 0),
+                GroupCardItemRoomData("abc", 15, 20, true, 7, R.drawable.bookcover_sample, 1, true),
+                GroupCardItemRoomData("abcd", 10, 15, true, 5, R.drawable.bookcover_sample, 2, true),
+                GroupCardItemRoomData("abcde", 8, 12, false, 2, R.drawable.bookcover_sample, 3, true),
+                GroupCardItemRoomData("abcdef", 18, 25, true, 4, R.drawable.bookcover_sample, 4),
+                GroupCardItemRoomData("abcdefg", 12, 20, true, 1, R.drawable.bookcover_sample, 0),
+                GroupCardItemRoomData("abcdefgh", 10, 14, true, 6, R.drawable.bookcover_sample, 1)
+            )
+        )
     }
 }
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 ca393b6e..a7a97c9f 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,14 +1,12 @@
 package com.texthip.thip.ui.group.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.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.runtime.Composable
@@ -34,7 +32,6 @@ import com.texthip.thip.ui.group.myroom.mock.GroupViewModel
 import com.texthip.thip.ui.theme.ThipTheme
 import com.texthip.thip.ui.theme.ThipTheme.colors
 
-
 @Composable
 fun GroupScreen(
     navController: NavHostController? = null,
diff --git a/app/src/main/java/com/texthip/thip/ui/navigator/MainNavHost.kt b/app/src/main/java/com/texthip/thip/ui/navigator/MainNavHost.kt
index c3b8701d..c2eed097 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
@@ -14,7 +14,7 @@ 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.BookSearch.route) { BookSearchScreen(navController = navController) }
         composable(Routes.MyPage.route) {
             MyPageScreen(
                 navController,
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index e61783ec..85a66303 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -255,4 +255,29 @@
     <string name="group_myroom_error_comment1">참여 중인 모임방이 없어요</string>
     <string name="group_myroom_error_comment2">첫번째 모임방에 참여해보세요</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="search_filter_popular">인기순</string>
+    <string name="search_filter_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>
+
 </resources>
\ No newline at end of file