UI/#18 form, card

app/src/main/java/com/texthip/thip/ui/common/cards/CardAlarm.kt

@@ -0,0 +1,168 @@
+package com.texthip.thip.ui.common.cards
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+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.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+
+@Composable
+fun NotificationCard(
+    modifier: Modifier = Modifier,
+    title: String,
+    message: String,
+    timeAgo: String,
+    isRead: Boolean = false,
+    onClick: () -> Unit = {}
+) {
+    Card(
+        modifier = modifier
+            .fillMaxWidth()
+            .clickable { onClick() },
+        colors = CardDefaults.cardColors(
+            containerColor = if (isRead) colors.DarkGrey else colors.DarkGrey02
+        ),
+        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
+        shape = RoundedCornerShape(12.dp)
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp)
+        ) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth(),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                // 뱃지
+                Box(
+                    modifier = Modifier
+                        .size(width = 40.dp, height = 24.dp)
+                        .clip(RoundedCornerShape(13.dp))
+                        .border(
+                            width = 1.dp,
+                            color = if (isRead) colors.Grey02 else colors.Grey01,
+                            shape = RoundedCornerShape(13.dp)
+                        ),
+                    contentAlignment = Alignment.Center
+                ) {
+                    Text(
+                        text = stringResource(R.string.group),
+                        color = if (isRead) colors.Grey01 else colors.Grey,
+                        style = typography.menu_sb600_s12_h20
+                    )
+                }
+
+                Spacer(modifier = Modifier.width(12.dp))
+
+                // 내용 (제목, 빨간 점, 시간, 메시지)
+                Column(
+                    modifier = Modifier.weight(1f)
+                ) {
+                    Row(
+                        modifier = Modifier.fillMaxWidth(),
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Text(
+                            text = title,
+                            style = typography.menu_sb600_s14_h24,
+                            color = if (isRead) colors.Grey01 else colors.White,
+                            modifier = Modifier.weight(1f),
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis
+                        )
+
+                        Column(
+                            horizontalAlignment = Alignment.End
+                        ) {
+                            // 안읽음 상태일 때만 빨간 점
+                            if (!isRead) {
+                                Spacer(modifier = Modifier.width(8.dp))
+                                Box(
+                                    modifier = Modifier
+                                        .size(6.dp)
+                                        .clip(RoundedCornerShape(3.dp))
+                                        .background(color = colors.Red)
+                                )
+                            }
+
+                            Text(
+                                text = timeAgo + stringResource(R.string.time_ago),
+                                style = typography.view_m500_s12_h20,
+                                color = if (isRead) colors.Grey02 else colors.Grey01,
+                            )
+                        }
+                    }
+                }
+            }
+
+            Spacer(modifier = Modifier.width(12.dp))
+
+            Text(
+                text = message,
+                style = typography.copy_r400_s12_h20,
+                color = if (isRead) colors.Grey02 else colors.Grey01,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun PreviewNotificationCards() {
+    var isRead by remember { mutableStateOf(false) }
+
+    Column(
+        modifier = Modifier.padding(16.dp),
+        verticalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        // 안읽은 알림
+        NotificationCard(
+            title = "같이 읽기를 시작했어요!",
+            message = "한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다.",
+            timeAgo = "12",
+            isRead = isRead
+        ) {
+            isRead = true
+        }
+
+        // 읽은 알림
+        NotificationCard(
+            title = "같이 읽기를 시작했어요!",
+            message = "한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다. 한줄만 입력이 가능합니다.",
+            timeAgo = "12",
+            isRead = true
+        )
+    }
+
+}

app/src/main/java/com/texthip/thip/ui/common/cards/CardBookList.kt

@@ -0,0 +1,124 @@
+package com.texthip.thip.ui.common.cards
+
+import androidx.compose.foundation.Image
+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.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.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun CardBookList(
+    modifier: Modifier = Modifier,
+    title: String,
+    author: String,
+    publisher: String,
+    imageRes: Int? = R.drawable.bookcover_sample, // 기본 이미지 리소스
+    isBookmarked: Boolean = false,
+    onBookmarkClick: () -> Unit = {}
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(Color.Transparent),
+    ) {
+        // 책 이미지
+        Box(
+            modifier = Modifier
+                .size(width = 80.dp, height = 108.dp)
+        ) {
+
+            imageRes?.let {
+                Image(
+                    painter = painterResource(id = it),
+                    contentDescription = null,
+                    modifier = Modifier.fillMaxSize(),
+                    contentScale = ContentScale.Crop
+                )
+            }
+        }
+
+        Spacer(modifier = Modifier.width(12.dp))
+
+        // 텍스트 정보
+        Column(
+            modifier = Modifier.weight(1f),
+            verticalArrangement = Arrangement.Top
+        ) {
+            Text(
+                text = title,
+                style = typography.smalltitle_sb600_s16_h20,
+                maxLines = 2,
+                overflow = TextOverflow.Ellipsis,
+                color = colors.White
+            )
+            Spacer(modifier = Modifier.height(8.dp))
+            Text(
+                text = "$author 저 · $publisher",
+                style = typography.view_m500_s12_h20,
+                color = colors.Grey01
+            )
+        }
+
+        Spacer(modifier = Modifier.width(12.dp))
+
+        IconButton(
+            onClick = onBookmarkClick,
+            modifier = Modifier.size(24.dp)
+        ) {
+            Icon(
+                imageVector = if (isBookmarked) ImageVector.vectorResource(R.drawable.ic_save_filled) else ImageVector.vectorResource(R.drawable.ic_save),
+                contentDescription = "북마크",
+                tint = if (isBookmarked) colors.Purple else colors.Grey01
+            )
+        }
+    }
+}
+
+// 프리뷰들
+@Preview
+@Composable
+fun PreviewBookTitleCard() {
+    var isBookmarked by remember { mutableStateOf(false) }
+
+    Column(
+        modifier = Modifier.padding(16.dp),
+        verticalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        CardBookList(
+            title = "책제목입니다.책제목입니다.책제목입니다.책제목입니다.책제목입니다.책제목입니다.",
+            author = "리처드 도킨스",
+            publisher = "을유문화사",
+            isBookmarked = isBookmarked,
+            onBookmarkClick = { isBookmarked = !isBookmarked }
+        )
+    }
+
+}