diff --git a/app/src/main/java/com/hotdeal/alarm/presentation/components/DealItem.kt b/app/src/main/java/com/hotdeal/alarm/presentation/components/DealItem.kt index b84727f..555d922 100644 --- a/app/src/main/java/com/hotdeal/alarm/presentation/components/DealItem.kt +++ b/app/src/main/java/com/hotdeal/alarm/presentation/components/DealItem.kt @@ -2,7 +2,6 @@ package com.hotdeal.alarm.presentation.components import androidx.compose.animation.core.* import androidx.compose.foundation.background -import androidx.compose.foundation.border import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.icons.Icons @@ -12,7 +11,6 @@ import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.scale import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext @@ -25,8 +23,8 @@ import com.hotdeal.alarm.ui.theme.* import com.hotdeal.alarm.util.ShareHelper /** - * One UI 9 & Material 3 Expressive Deal Item Card - * Text Spotlight 가독성과 Squircle 앰비언트 깊이감을 적용한 프리미엄 핫딜 카드 + * One UI 9 & Material 3 Expressive Compact Deal Item Card + * 화면 공간 낭비를 없애고 가독성과 정보 밀도를 극대화한 슬림 핫딜 카드 */ @Composable fun DealItem( @@ -38,35 +36,32 @@ fun DealItem( val context = LocalContext.current val siteColor = getSiteColor(deal.siteType) - // 즐겨찾기 하트 펄스 애니메이션 val favoriteScale by animateFloatAsState( - targetValue = if (deal.isFavorite) 1.25f else 1f, + targetValue = if (deal.isFavorite) 1.2f else 1f, animationSpec = spring( dampingRatio = Spring.DampingRatioMediumBouncy, stiffness = Spring.StiffnessMedium ), - label = "favorite_pulse" + label = "fav_scale" ) - // 제목에서 가격 정보 및 쇼핑몰 태그 추출 (Text Spotlight용) val parsedInfo = remember(deal.title) { parseDealTitle(deal.title) } - // 카드 테두리 및 배경 톤 설정 (One UI 9 Squircle Depth) val (cardBorderColor, cardBorderWidth) = when { - deal.isKeywordMatch -> KeywordGold to 1.5.dp - deal.isPopular -> HotDealFlameColor.copy(alpha = 0.8f) to 1.2.dp - else -> MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.4f) to 0.8.dp + deal.isKeywordMatch -> KeywordGold to 1.2.dp + deal.isPopular -> HotDealFlameColor.copy(alpha = 0.75f) to 1.dp + else -> MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.35f) to 0.8.dp } val cardBgColor = when { - deal.isKeywordMatch -> MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.35f) + deal.isKeywordMatch -> MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.3f) else -> MaterialTheme.colorScheme.surface } SquircleCard( - shape = CornerRadius.shapeSquircle, + shape = CornerRadius.shapeNormal, containerColor = cardBgColor, borderColor = cardBorderColor, borderWidth = cardBorderWidth, @@ -77,10 +72,10 @@ fun DealItem( Column( modifier = Modifier .fillMaxWidth() - .padding(horizontal = 16.dp, vertical = 14.dp) + .padding(horizontal = 14.dp, vertical = 9.dp) ) { // ============================================ - // 1. 상단 메타 바: 사이트 뱃지 + 게시판 + 특수 뱃지 + 액션 + // 1. 상단 메타 바: 사이트 뱃지 + 게시판 + 쇼핑몰 + 특수 뱃지 // ============================================ Row( modifier = Modifier.fillMaxWidth(), @@ -88,107 +83,107 @@ fun DealItem( ) { // 사이트 캡슐 뱃지 Surface( - shape = CornerRadius.shapeSmall, + shape = CornerRadius.shapeMicro, color = siteColor.copy(alpha = 0.12f), - modifier = Modifier.height(26.dp) + modifier = Modifier.height(21.dp) ) { Row( verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(5.dp), - modifier = Modifier.padding(horizontal = 8.dp) + horizontalArrangement = Arrangement.spacedBy(4.dp), + modifier = Modifier.padding(horizontal = 6.dp) ) { Box( modifier = Modifier - .size(6.dp) + .size(5.dp) .background(siteColor, CircleShape) ) Text( text = deal.siteType?.displayName ?: deal.siteName, - style = SpotlightTypography.badge, + style = SpotlightTypography.badge.copy(fontSize = 11.sp), color = siteColor ) } } - Spacer(modifier = Modifier.width(6.dp)) + Spacer(modifier = Modifier.width(5.dp)) // 게시판 라벨 Text( text = deal.boardDisplayName, - style = MaterialTheme.typography.labelSmall, - color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.7f), + style = MaterialTheme.typography.labelSmall.copy(fontSize = 11.sp), + color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.65f), maxLines = 1, overflow = TextOverflow.Ellipsis ) - // 쇼핑몰 태그 (추출된 경우) + // 쇼핑몰 태그 if (parsedInfo.storeTag.isNotEmpty()) { - Spacer(modifier = Modifier.width(6.dp)) + Spacer(modifier = Modifier.width(5.dp)) Surface( shape = CornerRadius.shapeMicro, - color = MaterialTheme.colorScheme.secondaryContainer.copy(alpha = 0.7f), - modifier = Modifier.height(20.dp) + color = MaterialTheme.colorScheme.secondaryContainer.copy(alpha = 0.6f), + modifier = Modifier.height(19.dp) ) { Text( text = parsedInfo.storeTag, - style = MaterialTheme.typography.labelSmall.copy(fontSize = 10.5.sp), + style = MaterialTheme.typography.labelSmall.copy(fontSize = 10.sp), color = MaterialTheme.colorScheme.onSecondaryContainer, - modifier = Modifier.padding(horizontal = 6.dp, vertical = 2.dp) + modifier = Modifier.padding(horizontal = 5.dp, vertical = 1.dp) ) } } Spacer(modifier = Modifier.weight(1f)) - // 키워드 매칭 뱃지 (One UI 9 Amber Gold) + // 키워드 매칭 뱃지 if (deal.isKeywordMatch) { Surface( - shape = CornerRadius.shapeSmall, + shape = CornerRadius.shapeMicro, color = KeywordGold, - modifier = Modifier.height(24.dp) + modifier = Modifier.height(20.dp) ) { Row( verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(3.dp), - modifier = Modifier.padding(horizontal = 7.dp) + horizontalArrangement = Arrangement.spacedBy(2.dp), + modifier = Modifier.padding(horizontal = 6.dp) ) { Icon( imageVector = Icons.Filled.Star, contentDescription = null, tint = Color.White, - modifier = Modifier.size(11.dp) + modifier = Modifier.size(10.dp) ) Text( text = "내 키워드", - style = SpotlightTypography.badge.copy(fontSize = 11.sp), + style = SpotlightTypography.badge.copy(fontSize = 10.5.sp), color = Color.White ) } } - Spacer(modifier = Modifier.width(4.dp)) + Spacer(modifier = Modifier.width(3.dp)) } - // 인기 핫딜 뱃지 (One UI 9 Flame Orange) + // 인기 핫딜 뱃지 if (deal.isPopular) { Surface( - shape = CornerRadius.shapeSmall, + shape = CornerRadius.shapeMicro, color = HotDealFlameColor, - modifier = Modifier.height(24.dp) + modifier = Modifier.height(20.dp) ) { Row( verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(3.dp), - modifier = Modifier.padding(horizontal = 7.dp) + horizontalArrangement = Arrangement.spacedBy(2.dp), + modifier = Modifier.padding(horizontal = 6.dp) ) { Icon( imageVector = Icons.Filled.Whatshot, contentDescription = null, tint = Color.White, - modifier = Modifier.size(11.dp) + modifier = Modifier.size(10.dp) ) Text( text = "HOT", - style = SpotlightTypography.badge.copy(fontSize = 11.sp), + style = SpotlightTypography.badge.copy(fontSize = 10.5.sp), color = Color.White ) } @@ -196,84 +191,82 @@ fun DealItem( } } - Spacer(modifier = Modifier.height(10.dp)) + Spacer(modifier = Modifier.height(6.dp)) // ============================================ - // 2. 제목 (Clean Spotlight Typography) + // 2. 본문 제목 (Slim 2-Line Spotlight) // ============================================ Text( text = parsedInfo.cleanTitle, - style = MaterialTheme.typography.titleMedium.copy( + style = MaterialTheme.typography.titleSmall.copy( + fontSize = 14.5.sp, fontWeight = if (deal.isKeywordMatch) FontWeight.Bold else FontWeight.SemiBold, - lineHeight = 22.sp + lineHeight = 19.sp ), maxLines = 2, overflow = TextOverflow.Ellipsis, color = MaterialTheme.colorScheme.onSurface ) - Spacer(modifier = Modifier.height(12.dp)) + Spacer(modifier = Modifier.height(6.dp)) // ============================================ - // 3. 하단 바: 가격(Text Spotlight) + 시간 + 액션 버튼 + // 3. 하단 바: 가격(Spotlight) + 시간 + 액션 아이콘 // ============================================ Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically ) { - // 가격이 추출되었을 경우 볼드 강조, 없을 경우 기본 시간 강조 if (parsedInfo.priceText.isNotEmpty()) { Text( text = parsedInfo.priceText, - style = SpotlightTypography.priceLarge, + style = SpotlightTypography.priceLarge.copy(fontSize = 16.sp), color = MaterialTheme.colorScheme.primary ) - Spacer(modifier = Modifier.width(8.dp)) + Spacer(modifier = Modifier.width(6.dp)) Text( text = "•", style = MaterialTheme.typography.bodySmall, - color = MaterialTheme.colorScheme.outline + color = MaterialTheme.colorScheme.outline.copy(alpha = 0.5f) ) - Spacer(modifier = Modifier.width(8.dp)) + Spacer(modifier = Modifier.width(6.dp)) } - // 작성 상대 시간 Text( text = formatRelativeTime(deal.createdAt), - style = MaterialTheme.typography.labelMedium, - color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.7f) + style = MaterialTheme.typography.labelSmall.copy(fontSize = 11.sp), + color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.65f) ) Spacer(modifier = Modifier.weight(1f)) - // 액션 아이콘들 (공유 & 즐겨찾기) Row( - horizontalArrangement = Arrangement.spacedBy(4.dp), + horizontalArrangement = Arrangement.spacedBy(2.dp), verticalAlignment = Alignment.CenterVertically ) { IconButton( onClick = { ShareHelper.shareDeal(context, deal) }, - modifier = Modifier.size(32.dp) + modifier = Modifier.size(28.dp) ) { Icon( imageVector = Icons.Outlined.Share, contentDescription = "공유", - tint = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.65f), - modifier = Modifier.size(17.dp) + tint = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f), + modifier = Modifier.size(15.dp) ) } IconButton( onClick = { onFavoriteToggle(deal.id) }, modifier = Modifier - .size(32.dp) + .size(28.dp) .scale(favoriteScale) ) { Icon( imageVector = if (deal.isFavorite) Icons.Filled.Favorite else Icons.Outlined.FavoriteBorder, contentDescription = if (deal.isFavorite) "즐겨찾기 제거" else "즐겨찾기 추가", - tint = if (deal.isFavorite) FavoriteColor else MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.65f), - modifier = Modifier.size(18.dp) + tint = if (deal.isFavorite) FavoriteColor else MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f), + modifier = Modifier.size(16.dp) ) } }