[BOOK-244] fix: BookItem 디자인 디테일 수정

Author: seoyoon513

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

@@ -1,12 +1,15 @@
 package com.ninecraft.booket.feature.detail.book.component
 
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 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.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.material3.VerticalDivider
@@ -18,6 +21,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import com.ninecraft.booket.core.common.extensions.formatPublishYear
+import com.ninecraft.booket.core.designsystem.ComponentPreview
 import com.ninecraft.booket.core.designsystem.component.NetworkImage
 import com.ninecraft.booket.core.designsystem.theme.ReedTheme
 import com.ninecraft.booket.core.model.BookDetailModel
@@ -41,7 +45,12 @@ internal fun BookItem(
                 .padding(end = ReedTheme.spacing.spacing4)
                 .width(70.dp)
                 .height(99.dp)
-                .clip(RoundedCornerShape(size = ReedTheme.radius.xs)),
+                .clip(RoundedCornerShape(size = ReedTheme.radius.xs))
+                .border(
+                    width = 1.dp,
+                    color = ReedTheme.colors.borderPrimary,
+                    shape = RoundedCornerShape(ReedTheme.radius.xs),
+                ),
             placeholder = painterResource(designR.drawable.ic_placeholder),
         )
         Column(modifier = Modifier.weight(1f)) {
@@ -53,35 +62,38 @@ internal fun BookItem(
                 style = ReedTheme.typography.headline1SemiBold,
             )
             Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing2))
-            Row(
-                modifier = Modifier.fillMaxWidth(),
-                verticalAlignment = Alignment.CenterVertically,
-            ) {
-                Text(
-                    text = bookDetail.author,
-                    color = ReedTheme.colors.contentTertiary,
-                    overflow = TextOverflow.Ellipsis,
-                    maxLines = 1,
-                    style = ReedTheme.typography.label2Regular,
-                    modifier = Modifier.weight(0.7f, fill = false),
-                )
-                Spacer(Modifier.width(ReedTheme.spacing.spacing1))
-                VerticalDivider(
-                    modifier = Modifier.height(14.dp),
-                    thickness = 1.dp,
-                    color = ReedTheme.colors.contentTertiary,
-                )
-                Spacer(Modifier.width(ReedTheme.spacing.spacing1))
-                Text(
-                    text = bookDetail.publisher,
-                    color = ReedTheme.colors.contentTertiary,
-                    overflow = TextOverflow.Ellipsis,
-                    maxLines = 1,
-                    style = ReedTheme.typography.label2Regular,
-                    modifier = Modifier.weight(0.3f, fill = false),
-                )
+            BoxWithConstraints {
+                val authorMaxWidth = maxWidth * 0.7f
+
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Text(
+                        text = bookDetail.author,
+                        color = ReedTheme.colors.contentTertiary,
+                        overflow = TextOverflow.Ellipsis,
+                        maxLines = 1,
+                        style = ReedTheme.typography.label2Regular,
+                        modifier = Modifier.widthIn(max = authorMaxWidth),
+                    )
+                    Spacer(Modifier.width(ReedTheme.spacing.spacing1))
+                    VerticalDivider(
+                        modifier = Modifier.height(14.dp),
+                        thickness = 1.dp,
+                        color = ReedTheme.colors.contentTertiary,
+                    )
+                    Spacer(Modifier.width(ReedTheme.spacing.spacing1))
+                    Text(
+                        text = bookDetail.publisher,
+                        color = ReedTheme.colors.contentTertiary,
+                        overflow = TextOverflow.Ellipsis,
+                        maxLines = 1,
+                        style = ReedTheme.typography.label2Regular,
+                        modifier = Modifier.weight(1f, fill = false),
+                    )
+                }
             }
-            Spacer(Modifier.width(ReedTheme.spacing.spacing05))
             Text(
                 text = bookDetail.pubDate.formatPublishYear(),
                 color = ReedTheme.colors.contentTertiary,
@@ -92,3 +104,19 @@ internal fun BookItem(
         }
     }
 }
+
+@ComponentPreview
+@Composable
+private fun BookItemPreview() {
+    ReedTheme {
+        BookItem(
+            bookDetail = BookDetailModel(
+                title = "데미안",
+                author = "헤르만 헤세",
+                publisher = "민음사",
+                pubDate = "2023-01-01",
+                coverImageUrl = ""
+            )
+        )
+    }
+}