[BOOK-166] feat: Home Ui 구성 및 이벤트 연결

Author: seoyoon513

feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomePresenter.kt

@@ -2,9 +2,11 @@ package com.ninecraft.booket.feature.home
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
+import com.ninecraft.booket.feature.screens.BookDetailScreen
 import com.ninecraft.booket.feature.screens.HomeScreen
 import com.ninecraft.booket.feature.screens.RecordScreen
 import com.ninecraft.booket.feature.screens.SearchScreen
+import com.ninecraft.booket.feature.screens.SettingsScreen
 import com.slack.circuit.codegen.annotations.CircuitInject
 import com.slack.circuit.runtime.Navigator
 import com.slack.circuit.runtime.presenter.Presenter
@@ -24,12 +26,21 @@ class HomePresenter @AssistedInject constructor(
 
         fun handleEvent(event: HomeUiEvent) {
             when (event) {
-                is HomeUiEvent.OnButtonClick -> {
+                is HomeUiEvent.OnSettingsClick -> {
+                    navigator.goTo(SettingsScreen)
+                }
+
+                is HomeUiEvent.OnBookRegisterClick -> {
                     navigator.goTo(SearchScreen)
                 }
+
                 is HomeUiEvent.OnRecordButtonClick -> {
                     navigator.goTo(RecordScreen)
                 }
+
+                is HomeUiEvent.OnBookDetailClick -> {
+                    navigator.goTo(BookDetailScreen(""))
+                }
             }
         }
 

feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUi.kt

@@ -1,18 +1,31 @@
 package com.ninecraft.booket.feature.home
 
+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.material3.Button
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.ninecraft.booket.core.designsystem.DevicePreview
 import com.ninecraft.booket.core.designsystem.theme.ReedTheme
+import com.ninecraft.booket.feature.home.component.BookCard
+import com.ninecraft.booket.feature.home.component.HomeBanner
+import com.ninecraft.booket.feature.home.component.HomeHeader
 import com.ninecraft.booket.feature.screens.HomeScreen
 import com.slack.circuit.codegen.annotations.CircuitInject
 import dagger.hilt.android.components.ActivityRetainedComponent
@@ -25,8 +38,6 @@ internal fun HomeUi(
 ) {
     Column(
         modifier = modifier.fillMaxSize(),
-        horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.Center,
     ) {
         HomeContent(
             state = state,
@@ -35,28 +46,75 @@ internal fun HomeUi(
     }
 }
 
-@Suppress("unused")
 @Composable
 internal fun HomeContent(
     state: HomeUiState,
     modifier: Modifier = Modifier,
 ) {
-    Text(text = "홈")
-    Spacer(modifier = Modifier.height(16.dp))
-    Button(
-        onClick = {
-            state.eventSink(HomeUiEvent.OnButtonClick)
+    val dummyBooks = listOf(
+        Book("여름은 오래 그곳에 남아", "마쓰이에 마사시", "비채", "https://example.com/sample-book-cover.jpg", 3),
+        Book("여름은 오래 그곳에 남아", "마쓰이에 마사시", "비채", "https://example.com/sample-book-cover.jpg", 3),
+        Book("여름은 오래 그곳에 남아", "마쓰이에 마사시", "비채", "https://example.com/sample-book-cover.jpg", 3)
+    )
+
+    HomeHeader(
+        onSettingsClick = {
+            state.eventSink(HomeUiEvent.OnSettingsClick)
         },
-    ) {
-        Text(text = "도서 검색 이동")
-    }
-    Spacer(modifier = Modifier.height(16.dp))
-    Button(
-        onClick = {
-            state.eventSink(HomeUiEvent.OnRecordButtonClick)
+        modifier = modifier,
+    )
+    HomeBanner(
+        onBookRegisterClick = {
+            state.eventSink(HomeUiEvent.OnBookRegisterClick)
         },
+        modifier = modifier,
+    )
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(ReedTheme.colors.baseSecondary),
     ) {
-        Text(text = "독서 기록 작성")
+        Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing6))
+        Text(
+            text = stringResource(R.string.home_content_label_reading_now),
+            modifier = Modifier.padding(start = ReedTheme.spacing.spacing5),
+            color = ReedTheme.colors.contentSecondary,
+            style = ReedTheme.typography.headline2Medium,
+        )
+        Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing3))
+        val pagerState = rememberPagerState(pageCount = { dummyBooks.size })
+        HorizontalPager(
+            state = pagerState,
+            modifier = Modifier.fillMaxWidth(),
+            contentPadding = PaddingValues(horizontal = ReedTheme.spacing.spacing5),
+            pageSpacing = ReedTheme.spacing.spacing5,
+        ) { page ->
+            BookCard(
+                bookInfo = dummyBooks[page],
+                onBookDetailClick = {
+                    state.eventSink(HomeUiEvent.OnBookDetailClick)
+                },
+                onRecordButtonClick = {
+                    state.eventSink(HomeUiEvent.OnRecordButtonClick)
+                }
+            )
+        }
+        Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing5))
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.Center,
+        ) {
+            repeat(pagerState.pageCount) { iteration ->
+                val color = if (pagerState.currentPage == iteration) ReedTheme.colors.bgPrimary else ReedTheme.colors.bgSecondaryPressed
+                Box(
+                    modifier = Modifier
+                        .size(12.dp)
+                        .padding(3.dp)
+                        .clip(CircleShape)
+                        .background(color)
+                )
+            }
+        }
     }
 }
 

feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/HomeUiState.kt

@@ -8,6 +8,16 @@ data class HomeUiState(
 ) : CircuitUiState
 
 sealed interface HomeUiEvent : CircuitUiEvent {
-    data object OnButtonClick : HomeUiEvent
+    data object OnSettingsClick : HomeUiEvent
+    data object OnBookRegisterClick : HomeUiEvent
     data object OnRecordButtonClick : HomeUiEvent
+    data object OnBookDetailClick: HomeUiEvent
 }
+
+data class Book(
+    val title: String = "",
+    val author: String = "",
+    val publisher: String = "",
+    val imageUrl: String = "",
+    val reviewCount: Int = 0,
+)

feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/BookCard.kt

@@ -24,20 +24,32 @@ import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.dp
+import com.ninecraft.booket.core.common.extensions.clickableSingle
 import com.ninecraft.booket.core.designsystem.ComponentPreview
 import com.ninecraft.booket.core.designsystem.component.NetworkImage
 import com.ninecraft.booket.core.designsystem.component.button.ReedButton
 import com.ninecraft.booket.core.designsystem.component.button.ReedButtonColorStyle
 import com.ninecraft.booket.core.designsystem.component.button.largeButtonStyle
 import com.ninecraft.booket.core.designsystem.theme.ReedTheme
 import com.ninecraft.booket.core.designsystem.theme.White
+import com.ninecraft.booket.feature.home.Book
+import com.ninecraft.booket.feature.home.R
 import com.ninecraft.booket.core.designsystem.R as designR
 
 @Composable
-fun BookCard(modifier: Modifier = Modifier) {
+fun BookCard(
+    bookInfo: Book,
+    onBookDetailClick: () -> Unit,
+    onRecordButtonClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
     Column(
         modifier = modifier
             .fillMaxWidth()
@@ -51,6 +63,10 @@ fun BookCard(modifier: Modifier = Modifier) {
                 color = ReedTheme.colors.basePrimary,
                 shape = RoundedCornerShape(ReedTheme.radius.sm),
             )
+            .clip(shape = RoundedCornerShape(ReedTheme.radius.sm))
+            .clickableSingle {
+                onBookDetailClick()
+            }
             .border(
                 width = 1.dp,
                 color = ReedTheme.colors.borderSecondary,
@@ -66,7 +82,7 @@ fun BookCard(modifier: Modifier = Modifier) {
     ) {
         Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing5))
         NetworkImage(
-            imageUrl = "",
+            imageUrl = bookInfo.imageUrl,
             contentDescription = "Book CoverImage",
             modifier = Modifier
                 .width(86.dp)
@@ -81,7 +97,7 @@ fun BookCard(modifier: Modifier = Modifier) {
         )
         Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing5))
         Text(
-            text = "여름은 오래 그곳에 남아",
+            text = bookInfo.title,
             color = ReedTheme.colors.contentPrimary,
             style = ReedTheme.typography.headline1SemiBold,
         )
@@ -92,7 +108,7 @@ fun BookCard(modifier: Modifier = Modifier) {
             horizontalArrangement = Arrangement.Center,
         ) {
             Text(
-                text = "마쓰이에 마사시",
+                text = bookInfo.author,
                 color = ReedTheme.colors.contentTertiary,
                 overflow = TextOverflow.Ellipsis,
                 maxLines = 1,
@@ -107,7 +123,7 @@ fun BookCard(modifier: Modifier = Modifier) {
             )
             Spacer(Modifier.width(ReedTheme.spacing.spacing1))
             Text(
-                text = "비채",
+                text = bookInfo.publisher,
                 color = ReedTheme.colors.contentTertiary,
                 overflow = TextOverflow.Ellipsis,
                 maxLines = 1,
@@ -123,6 +139,10 @@ fun BookCard(modifier: Modifier = Modifier) {
                         color = ReedTheme.colors.baseSecondary,
                         shape = RoundedCornerShape(ReedTheme.radius.sm),
                     )
+                    .clip(shape = RoundedCornerShape(ReedTheme.radius.sm))
+                    .clickableSingle {
+                        onBookDetailClick()
+                    }
                     .padding(
                         horizontal = ReedTheme.spacing.spacing3,
                         vertical = ReedTheme.spacing.spacing2,
@@ -136,18 +156,26 @@ fun BookCard(modifier: Modifier = Modifier) {
                 )
                 Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing1))
                 Text(
-                    text = "3개",
+                    text = buildAnnotatedString {
+                        append("${bookInfo.reviewCount}")
+                        withStyle(style = SpanStyle(color = ReedTheme.colors.contentSecondary)) {
+                            append("개")
+                        }
+                    },
+                    color = ReedTheme.colors.contentBrand,
                     style = ReedTheme.typography.label1SemiBold,
                 )
 
             }
             Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing2))
             ReedButton(
-                onClick = { /*TODO*/ },
+                onClick = {
+                    onRecordButtonClick()
+                },
                 sizeStyle = largeButtonStyle,
                 colorStyle = ReedButtonColorStyle.PRIMARY,
                 modifier = Modifier.weight(1f),
-                text = "기록하기",
+                text = stringResource(R.string.book_card_record),
                 leadingIcon = {
                     Icon(
                         imageVector = ImageVector.vectorResource(designR.drawable.ic_edit_3),
@@ -198,13 +226,13 @@ fun EmptyBookCard(
         )
         Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing5))
         Text(
-            text = "아직 등록된 책이 없어요",
+            text = stringResource(R.string.empty_book_card_title),
             color = ReedTheme.colors.contentPrimary,
             style = ReedTheme.typography.headline1SemiBold,
         )
         Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing1))
         Text(
-            text = "등록 후 나만의 독서 기록을 남겨 보세요.",
+            text = stringResource(R.string.empty_book_card_description),
             color = ReedTheme.colors.contentTertiary,
             style = ReedTheme.typography.label1Medium,
         )
@@ -216,7 +244,7 @@ fun EmptyBookCard(
             sizeStyle = largeButtonStyle,
             colorStyle = ReedButtonColorStyle.PRIMARY,
             modifier = Modifier.fillMaxWidth(),
-            text = "등록하기",
+            text = stringResource(R.string.empty_book_card_register),
         )
     }
 }
@@ -225,7 +253,11 @@ fun EmptyBookCard(
 @Composable
 private fun BookCardPreview() {
     ReedTheme {
-        BookCard()
+        BookCard(
+            bookInfo = Book(),
+            onBookDetailClick = {},
+            onRecordButtonClick = {},
+        )
     }
 }
 

feature/home/src/main/kotlin/com/ninecraft/booket/feature/home/component/HomeBanner.kt

@@ -14,20 +14,23 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 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.unit.dp
 import com.ninecraft.booket.core.common.extensions.clickableSingle
 import com.ninecraft.booket.core.designsystem.ComponentPreview
-import com.ninecraft.booket.core.designsystem.R
+import com.ninecraft.booket.core.designsystem.R as designR
 import com.ninecraft.booket.core.designsystem.theme.HomeBg
 import com.ninecraft.booket.core.designsystem.theme.ReedTheme
+import com.ninecraft.booket.feature.home.R
 
 @Composable
 fun HomeBanner(
     onBookRegisterClick: () -> Unit,
+    modifier: Modifier = Modifier,
 ) {
     Box(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxWidth()
             .height(160.dp)
             .background(HomeBg)
@@ -39,7 +42,7 @@ fun HomeBanner(
     ) {
         Column {
             Text(
-                text = "문장 기록하고\n씨앗을 모아볼까요?",
+                text = stringResource(R.string.home_banner_title),
                 color = ReedTheme.colors.contentPrimary,
                 style = ReedTheme.typography.heading1Bold,
             )
@@ -51,12 +54,12 @@ fun HomeBanner(
                 verticalAlignment = Alignment.CenterVertically,
             ) {
                 Text(
-                    text = "책 등록하기",
+                    text = stringResource(R.string.home_banner_book_register),
                     color = ReedTheme.colors.contentBrand,
                     style = ReedTheme.typography.body2Medium,
                 )
                 Icon(
-                    imageVector = ImageVector.vectorResource(id = R.drawable.ic_chevron_right),
+                    imageVector = ImageVector.vectorResource(id = designR.drawable.ic_chevron_right),
                     contentDescription = "Chevron Right Icon",
                     tint = ReedTheme.colors.contentBrand,
                 )