[BOOK-188] feat: 내 기록 모음이 존재하지 않을 때 EmptyView 추가

Author: easyhooon

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

@@ -225,7 +225,13 @@ internal fun BookDetailContent(
                 modifier = Modifier.weight(2.34f),
             )
         }
-        CollectedSeed(state = state)
+
+        if (state.recordCollections.isEmpty()) {
+            Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing10))
+        } else {
+            CollectedSeed(state = state)
+        }
+
         ReedDivider()
         RecordsCollection(state = state)
     }

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

@@ -2,19 +2,26 @@ package com.ninecraft.booket.feature.detail.book.component
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.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.text.style.TextAlign
 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.feature.detail.book.BookDetailUiEvent
 import com.ninecraft.booket.feature.detail.book.BookDetailUiState
+import kotlinx.collections.immutable.persistentListOf
 import kotlinx.collections.immutable.toImmutableList
 
 @Composable
@@ -26,8 +33,14 @@ internal fun RecordsCollection(
         modifier = modifier
             .fillMaxWidth()
             .padding(horizontal = ReedTheme.spacing.spacing5)
-            // contentPadding + Header + (RecordItem + padding) * size
-            .height(36.dp + 40.dp + (192 * state.recordCollections.size).dp),
+            .then(
+                if (state.recordCollections.isEmpty()) {
+                    Modifier.height(400.dp)
+                } else {
+                    // contentPadding + Header + (RecordItem + padding) * size
+                    Modifier.height(36.dp + 40.dp + (192 * state.recordCollections.size).dp)
+                },
+            ),
         contentPadding = PaddingValues(
             top = ReedTheme.spacing.spacing6,
             bottom = ReedTheme.spacing.spacing3,
@@ -39,24 +52,56 @@ internal fun RecordsCollection(
             RecordsCollectionHeader(state = state)
             Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing1))
         }
-        items(
-            count = state.recordCollections.size,
-            key = { index -> state.recordCollections[index].id },
-        ) { index ->
-            val record = state.recordCollections[index]
-            RecordItem(
-                quote = record.quote,
-                emotionTags = record.emotionTags.toImmutableList(),
-                pageNumber = record.pageNumber,
-                createdAt = record.createdAt,
-                modifier = Modifier.clickable {
-                    state.eventSink(BookDetailUiEvent.OnRecordItemClick(record.id))
-                },
-            )
+
+        if (state.recordCollections.isEmpty()) {
+            item {
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(324.dp), // 400.dp - (contentPadding + Header)
+                    contentAlignment = Alignment.Center,
+                ) {
+                    Text(
+                        text = stringResource(R.string.records_collection_empty),
+                        color = ReedTheme.colors.contentSecondary,
+                        textAlign = TextAlign.Center,
+                        style = ReedTheme.typography.body1Medium,
+                    )
+                }
+            }
+        } else {
+            items(
+                count = state.recordCollections.size,
+                key = { index -> state.recordCollections[index].id },
+            ) { index ->
+                val record = state.recordCollections[index]
+                RecordItem(
+                    quote = record.quote,
+                    emotionTags = record.emotionTags.toImmutableList(),
+                    pageNumber = record.pageNumber,
+                    createdAt = record.createdAt,
+                    modifier = Modifier.clickable {
+                        state.eventSink(BookDetailUiEvent.OnRecordItemClick(record.id))
+                    },
+                )
+            }
         }
     }
 }
 
+@ComponentPreview
+@Composable
+private fun RecordsCollectionEmptyPreview() {
+    ReedTheme {
+        RecordsCollection(
+            state = BookDetailUiState(
+                recordCollections = persistentListOf(),
+                eventSink = {},
+            ),
+        )
+    }
+}
+
 @ComponentPreview
 @Composable
 private fun RecordsCollectionPreview() {

feature/detail/src/main/res/values/strings.xml

@@ -8,4 +8,5 @@
     <string name="record_sort_title">정렬</string>
     <string name="record_collection">내 기록 모음</string>
     <string name="collected_seed_title">내가 모은 씨앗</string>
+    <string name="records_collection_empty">첫 기록을 남겨 보세요!\n나만의 아카이브를 만들 수 있어요.</string>
 </resources>