책 검색 화면 UI, 검색 결과 출력 및 아이템 선택 동작 구현

app/src/main/java/com/boostcamp/and03/And03Application.kt

@@ -1,6 +1,5 @@
 package com.boostcamp.and03
 
-
 import android.app.Application
 import dagger.hilt.android.HiltAndroidApp
 

app/src/main/java/com/boostcamp/and03/data/di/BookRepositoryModule.kt

@@ -0,0 +1,20 @@
+package com.boostcamp.and03.data.di
+
+import com.boostcamp.and03.data.repository.book.BookRepository
+import com.boostcamp.and03.data.repository.book.BookRepositoryImpl
+import dagger.Binds
+import dagger.Module
+import dagger.hilt.InstallIn
+import dagger.hilt.components.SingletonComponent
+import javax.inject.Singleton
+
+@Module
+@InstallIn(SingletonComponent::class)
+abstract class BookRepositoryModule {
+
+    @Binds
+    @Singleton
+    abstract fun bindBookRepository(
+        impl: BookRepositoryImpl
+    ): BookRepository
+}

app/src/main/java/com/boostcamp/and03/data/model/response/NaverBookItem.kt

@@ -1,11 +1,13 @@
 package com.boostcamp.and03.data.model.response
 
+import kotlinx.serialization.SerialName
 import kotlinx.serialization.Serializable
 
 @Serializable
 data class NaverBookItem(
-    val title: String,
-    val image: String,
-    val author: String,
-    val publisher: String,
+    @SerialName("title") val title: String,
+    @SerialName("image") val thumbnail: String,
+    @SerialName("author") val author: String,
+    @SerialName("publisher") val publisher: String,
+    @SerialName("isbn") val isbn: String
 )

app/src/main/java/com/boostcamp/and03/data/repository/book/NaverBookItemMapper.kt

@@ -0,0 +1,13 @@
+package com.boostcamp.and03.data.repository.book
+
+import com.boostcamp.and03.data.model.response.NaverBookItem
+import com.boostcamp.and03.ui.screen.booklist.model.BookUIModel
+import kotlinx.collections.immutable.toImmutableList
+
+fun NaverBookItem.toUiModel() = BookUIModel(
+    title = title,
+    authors = author.split("^").toImmutableList(),
+    publisher = publisher,
+    thumbnail = thumbnail,
+    isbn = isbn
+)

app/src/main/java/com/boostcamp/and03/ui/component/SearchResultItem.kt

@@ -23,6 +23,8 @@ import coil.compose.AsyncImage
 import com.boostcamp.and03.ui.theme.And03Padding
 import com.boostcamp.and03.ui.theme.And03Spacing
 import com.boostcamp.and03.ui.theme.And03Theme
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.persistentListOf
 
 private object SearchResultItemValues {
     val borderWidth = 2.dp
@@ -36,7 +38,7 @@ private object SearchResultItemValues {
 fun SearchResultItem(
     thumbnail: String,
     title: String,
-    authors: String,
+    authors: ImmutableList<String>,
     publisher: String,
     isSelected: Boolean,
     modifier: Modifier = Modifier,
@@ -66,7 +68,8 @@ fun SearchResultItem(
     ) {
         Row(
             modifier = Modifier.fillMaxWidth(),
-            verticalAlignment = Alignment.CenterVertically
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(And03Spacing.SPACE_M)
         ) {
             AsyncImage(
                 model = thumbnail,
@@ -77,9 +80,7 @@ fun SearchResultItem(
             )
 
             Column(
-                modifier = Modifier
-                    .fillMaxHeight()
-                    .padding(start = And03Padding.PADDING_M),
+                modifier = Modifier.fillMaxHeight(),
                 verticalArrangement = Arrangement.SpaceEvenly
             ) {
                 Text(
@@ -90,7 +91,7 @@ fun SearchResultItem(
                 )
 
                 Text(
-                    text = authors,
+                    text = authors.joinToString(", "),
                     style = And03Theme.typography.bodyMedium,
                     color = And03Theme.colors.onSurfaceVariant,
                     maxLines = SearchResultItemValues.AUTHOR_PUBLISHER_MAX_LINES,
@@ -119,7 +120,7 @@ private fun SearchResultItemPreview() {
         SearchResultItem(
             thumbnail = "",
             title = "책 제목",
-            authors = "책 저자",
+            authors = persistentListOf("김김김", "앤앤앤", "장장장"),
             publisher = "책 출판사",
             isSelected = false,
             onClick = {}
@@ -130,7 +131,7 @@ private fun SearchResultItemPreview() {
             title = """
                 선택된 책 제목. 테두리 색이 바뀌었습니다. 그런데 여기서 개행을 해야 한다면...........????????????
             """.trimIndent(),
-            authors = "선택된 책 저자",
+            authors = persistentListOf("패트", "매트"),
             publisher = "선택된 책 출판사",
             isSelected = true,
             onClick = {}

app/src/main/java/com/boostcamp/and03/ui/component/SearchTopBar.kt

@@ -0,0 +1,63 @@
+package com.boostcamp.and03.ui.component
+
+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.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.tooling.preview.Preview
+import com.boostcamp.and03.R
+import com.boostcamp.and03.ui.theme.And03Theme
+
+// 임시로 사용할 탑 바
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SearchTopBar(
+    title: String,
+    onBackClick: () -> Unit,
+    onSaveClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    isSaveEnabled: Boolean = false
+) {
+    CenterAlignedTopAppBar(
+        title = { Text(text = title) },
+        navigationIcon = {
+            IconButton(
+                onClick = onBackClick
+            ) {
+                Icon(
+                    imageVector = ImageVector.vectorResource(R.drawable.ic_keyboard_arrow_left_filled),
+                    contentDescription = stringResource(R.string.content_description_go_back)
+                )
+            }
+        },
+        actions = {
+            IconButton(
+                onClick = onSaveClick,
+                enabled = isSaveEnabled
+            ) {
+                Icon(
+                    imageVector = ImageVector.vectorResource(R.drawable.ic_check_filled),
+                    contentDescription = stringResource(R.string.content_description_save_button)
+                )
+            }
+        }
+    )
+}
+
+@Preview
+@Composable
+private fun SearchTopBarPreview() {
+    And03Theme {
+        SearchTopBar(
+            title = "책 검색",
+            onBackClick = {},
+            onSaveClick = {}
+        )
+    }
+}

app/src/main/java/com/boostcamp/and03/ui/navigation/MainNavHost.kt

@@ -7,6 +7,7 @@ import androidx.compose.ui.Modifier
 import androidx.navigation.compose.NavHost
 import com.boostcamp.and03.ui.screen.addbook.addBookNavGraph
 import com.boostcamp.and03.ui.screen.booklist.booklistNavGraph
+import com.boostcamp.and03.ui.screen.booksearch.bookSearchNavGraph
 import com.boostcamp.and03.ui.screen.mypage.myPageNavGraph
 import com.boostcamp.and03.ui.screen.prototype.screen.SnackBarEvent
 
@@ -26,6 +27,11 @@ fun MainNavHost(
             onShowSnackBar = onShowSnackBar
         )
 
+        bookSearchNavGraph(
+            navigator = navigator,
+            modifier = modifier.padding(paddingValues)
+        )
+
         addBookNavGraph(modifier = modifier.padding(paddingValues))
 
         myPageNavGraph(modifier = modifier.padding(paddingValues))

app/src/main/java/com/boostcamp/and03/ui/navigation/MainNavigator.kt

@@ -68,7 +68,6 @@ class MainNavigator(
     }
 
     fun navigatePopBackStack() = navController.popBackStack()
-
 }
 
 @SuppressLint("ComposableNaming")

app/src/main/java/com/boostcamp/and03/ui/navigation/Route.kt

@@ -6,6 +6,9 @@ sealed interface Route {
     @Serializable
     data object Booklist : Route
 
+    @Serializable
+    data object BookSearch : Route
+
     @Serializable
     data object AddBook : Route
 

app/src/main/java/com/boostcamp/and03/ui/screen/booksearch/BookSearchNavGraph.kt

@@ -0,0 +1,19 @@
+package com.boostcamp.and03.ui.screen.booksearch
+
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavController
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.compose.composable
+import com.boostcamp.and03.ui.navigation.MainNavigator
+import com.boostcamp.and03.ui.navigation.Route
+
+fun NavGraphBuilder.bookSearchNavGraph(
+    navigator: MainNavigator,
+    modifier: Modifier = Modifier
+) {
+    composable<Route.BookSearch> {
+        BookSearchRoute(
+            onBackClick = navigator::navigatePopBackStack
+        )
+    }
+}