sanjeok77/hotdeal_alarm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

v0.2.6: Maximize Main Screen Content Density & In-AppBar Expandable Search

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