[BOOK-188] fix: 도서 상세 화면 전체 화면에 대해 단일 스크롤 방식으로 구조 변경

Author: easyhooon

feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/BookDetailUi.kt

@@ -3,12 +3,15 @@ package com.ninecraft.booket.feature.detail.book
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.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.material3.VerticalDivider
@@ -64,7 +67,11 @@ internal fun BookDetailContent(
     state: BookDetailUiState,
     modifier: Modifier = Modifier,
 ) {
-    Column {
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .verticalScroll(rememberScrollState()),
+    ) {
         Row(
             modifier = modifier
                 .fillMaxWidth()

feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/CollectedSeed.kt

@@ -24,13 +24,13 @@ import com.ninecraft.booket.core.designsystem.theme.ReedTheme
 import com.ninecraft.booket.feature.detail.R
 import com.ninecraft.booket.feature.detail.book.BookDetailUiState
 
-// TODO 필요한 파라미터만 선언하여 사용하기
 @Composable
 internal fun CollectedSeed(
     state: BookDetailUiState,
+    modifier: Modifier = Modifier,
 ) {
     Column(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxWidth()
             .padding(
                 start = ReedTheme.spacing.spacing5,

feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/RecordsCollection.kt

@@ -2,29 +2,19 @@ package com.ninecraft.booket.feature.detail.book.component
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.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.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.designsystem.ComponentPreview
 import com.ninecraft.booket.core.designsystem.theme.ReedTheme
-import com.ninecraft.booket.feature.detail.R
-import com.ninecraft.booket.core.designsystem.R as designR
 import com.ninecraft.booket.feature.detail.book.BookDetailUiState
 import kotlinx.collections.immutable.toImmutableList
 
-// TODO 필요한 파라미터만 선언하여 사용
 @Composable
 internal fun RecordsCollection(
     state: BookDetailUiState,
@@ -33,53 +23,28 @@ internal fun RecordsCollection(
     LazyColumn(
         modifier = modifier
             .fillMaxWidth()
-            .padding(horizontal = ReedTheme.spacing.spacing5),
+            .padding(horizontal = ReedTheme.spacing.spacing5)
+            .height((192 * state.recordCollections.size).dp + 40.dp),
         contentPadding = PaddingValues(vertical = ReedTheme.spacing.spacing6),
         verticalArrangement = Arrangement.spacedBy(ReedTheme.spacing.spacing3),
+        userScrollEnabled = false,
     ) {
         item {
-            Row(
-                modifier = Modifier.fillMaxWidth(),
-                verticalAlignment = Alignment.CenterVertically,
-                horizontalArrangement = Arrangement.SpaceBetween,
-            ) {
-                Row {
-                    Text(
-                        text = stringResource(R.string.record_collection),
-                        color = ReedTheme.colors.contentPrimary,
-                        style = ReedTheme.typography.headline2SemiBold,
-                    )
-                    Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing1))
-                    Text(
-                        text = "${state.recordCollections.size}",
-                        color = ReedTheme.colors.contentPrimary,
-                        style = ReedTheme.typography.headline2SemiBold,
-                    )
-                }
-                Row {
-                    Text(
-                        text = stringResource(state.currentRecordSort.getDisplayNameRes()),
-                        color = ReedTheme.colors.contentSecondary,
-                        style = ReedTheme.typography.label1Medium,
-                    )
-                    Icon(
-                        imageVector = ImageVector.vectorResource(designR.drawable.ic_chevron_down),
-                        contentDescription = "Dropdown Icon",
-                    )
-                }
-            }
+            RecordsCollectionHeader(state = state)
             Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing1))
         }
         items(
             count = state.recordCollections.size,
             key = { index -> state.recordCollections[index].id },
         ) { index ->
-            RecordItem(
-                quote = state.recordCollections[index].quote,
-                emotionTags = state.recordCollections[index].emotionTags.toImmutableList(),
-                pageNumber = state.recordCollections[index].pageNumber,
-                createdAt = state.recordCollections[index].createdAt,
-            )
+            state.recordCollections[index].apply {
+                RecordItem(
+                    quote = quote,
+                    emotionTags = emotionTags.toImmutableList(),
+                    pageNumber = pageNumber,
+                    createdAt = createdAt,
+                )
+            }
         }
     }
 }

feature/detail/src/main/kotlin/com/ninecraft/booket/feature/detail/book/component/RecordsCollectionHeader.kt

@@ -0,0 +1,56 @@
+package com.ninecraft.booket.feature.detail.book.component
+
+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.width
+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.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import com.ninecraft.booket.core.designsystem.R as designR
+import com.ninecraft.booket.core.designsystem.theme.ReedTheme
+import com.ninecraft.booket.feature.detail.R
+import com.ninecraft.booket.feature.detail.book.BookDetailUiState
+
+@Composable
+internal fun RecordsCollectionHeader(
+    state: BookDetailUiState,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween,
+    ) {
+        Row {
+            Text(
+                text = stringResource(R.string.record_collection),
+                color = ReedTheme.colors.contentPrimary,
+                style = ReedTheme.typography.headline2SemiBold,
+            )
+            Spacer(modifier = Modifier.width(ReedTheme.spacing.spacing1))
+            Text(
+                text = "${state.recordCollections.size}",
+                color = ReedTheme.colors.contentBrand,
+                style = ReedTheme.typography.headline2SemiBold,
+            )
+        }
+        Row {
+            Text(
+                text = stringResource(state.currentRecordSort.getDisplayNameRes()),
+                color = ReedTheme.colors.contentSecondary,
+                style = ReedTheme.typography.label1Medium,
+            )
+            Icon(
+                imageVector = ImageVector.vectorResource(designR.drawable.ic_chevron_down),
+                contentDescription = "Dropdown Icon",
+            )
+        }
+    }
+}