feat: UI/UX 개선 - 키워드 카드 디자인 통일 및 Pull to Refresh 개선 (v1.7.0)

- 키워드 카드 디자인을 DealItem과 동일한 스타일로 통일
- 활성화된 키워드 카드에 옅은 빨간색 배경 적용
- Pull to Refresh 인디케이터 z-index 높여서 잘림 문제 해결
- Top 버튼 위치 조정으로 메뉴키 가림 문제 해결
- Pull to Refresh 감도 향상 (threshold 120dp → 60dp)

app/build.gradle.kts

@@ -24,7 +24,8 @@ android {
  applicationId = "com.hotdeal.alarm"
  minSdk = 31
  targetSdk = 35
-        versionCode = 12
+        versionCode = 13
+        versionName = "1.7.0"
         versionName = "1.6.0"
 
  testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
@@ -67,7 +68,8 @@ android {
         freeCompilerArgs += listOf(
             "-opt-in=androidx.compose.material3.ExperimentalMaterial3Api",
             "-opt-in=kotlinx.coroutines.ExperimentalCoroutinesApi",
-            "-opt-in=kotlinx.coroutines.FlowPreview"
+            "-opt-in=kotlinx.coroutines.FlowPreview",
+            "-opt-in=androidx.compose.foundation.ExperimentalFoundationApi"
         )
     }
 

app/src/main/java/com/hotdeal/alarm/presentation/components/DealItem.kt

@@ -48,10 +48,10 @@ fun DealItem(
 
     val siteColor = getSiteColor(deal.siteType)
 
-    // 키워드 매칭 강조
+    // 키워드 매칭 강조 - 옅은 빨간색 배경으로 단순화
     val cardColors = if (deal.isKeywordMatch) {
         CardDefaults.elevatedCardColors(
-            containerColor = MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f)
+            containerColor = Color(0xFFFFEBEE) // 옅은 빨간색 배경 (Material Red 50)
         )
     } else {
         CardDefaults.elevatedCardColors(
@@ -64,50 +64,14 @@ fun DealItem(
         shape = RoundedCornerShape(20.dp),
         colors = cardColors,
         elevation = CardDefaults.elevatedCardElevation(
-            defaultElevation = if (deal.isKeywordMatch) 6.dp else 2.dp
+            defaultElevation = 2.dp
         ),
         onClick = onClick
     ) {
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .then(
-                    if (deal.isKeywordMatch) {
-                        Modifier.background(
-                            brush = Brush.horizontalGradient(
-                                colors = listOf(
-                                    MaterialTheme.colorScheme.primary.copy(alpha = 0.1f),
-                                    MaterialTheme.colorScheme.primary.copy(alpha = 0.05f)
-                                )
-                            )
-                        )
-                    } else {
-                        Modifier
-                    }
-                )
-        ) {
-            // 키워드 매칭 인디케이터 (왼쪽)
-            if (deal.isKeywordMatch) {
-                Box(
-                    modifier = Modifier
-                        .align(Alignment.CenterStart)
-                        .width(4.dp)
-                        .fillMaxHeight()
-                        .background(MaterialTheme.colorScheme.primary)
-                )
-            }
-
         Column(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(16.dp)
-                    .then(
-                        if (deal.isKeywordMatch) {
-                            Modifier.padding(start = 8.dp)
-                        } else {
-                            Modifier
-                        }
-                    )
         ) {
             // 상단: 사이트 뱃지 + 게시판 + 액션
             Row(
@@ -157,11 +121,11 @@ fun DealItem(
 
                 Spacer(modifier = Modifier.weight(1f))
 
-                    // 키워드 매칭 배지
+                // 키워드 매칭 배지 - 빨간색으로 변경
                 if (deal.isKeywordMatch) {
                     Surface(
                         shape = RoundedCornerShape(8.dp),
-                            color = MaterialTheme.colorScheme.primary,
+                        color = Color(0xFFE53935), // 빨간색
                         modifier = Modifier.height(24.dp)
                     ) {
                         Row(
@@ -276,7 +240,6 @@ fun DealItem(
         }
     }
 }
-}
 
 private fun formatTime(timestamp: Long): String {
     val now = System.currentTimeMillis()

app/src/main/java/com/hotdeal/alarm/presentation/deallist/DealListScreen.kt

@@ -9,6 +9,7 @@ import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -27,12 +28,14 @@ import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.hotdeal.alarm.domain.model.SiteType
 import com.hotdeal.alarm.presentation.components.*
 import com.hotdeal.alarm.presentation.main.MainUiState
 import com.hotdeal.alarm.presentation.main.MainViewModel
 import com.hotdeal.alarm.ui.theme.getSiteColor
+import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -43,10 +46,19 @@ fun DealListScreen(
     val uiState by viewModel.uiState.collectAsStateWithLifecycle()
     val context = LocalContext.current
 
-    // Pull to Refresh 상태
+    // Pull to Refresh 상태 - 감도 증가를 위해 threshold 값 감소
-    val pullToRefreshState = rememberPullToRefreshState()
+    val pullToRefreshState = rememberPullToRefreshState(
+        positionalThreshold = 60.dp  // 기본값(120.dp)의 절반으로 설정하여 더 쉽게 새로고침
+    )
     var isRefreshing by remember { mutableStateOf(false) }
     
+    // List state for scroll detection
+    val listState = rememberLazyListState()
+    val scope = rememberCoroutineScope()
+    val showScrollToTop by remember {
+        derivedStateOf { listState.firstVisibleItemIndex > 3 }
+    }
+
     // 새로고침 완료 감지
     LaunchedEffect(uiState) {
         if (uiState !is MainUiState.Loading) {
@@ -123,6 +135,28 @@ fun DealListScreen(
                 )
             )
         },
+        floatingActionButton = {
+            AnimatedVisibility(
+                visible = showScrollToTop,
+                enter = fadeIn() + scaleIn(),
+                exit = fadeOut() + scaleOut()
+            ) {
+                FloatingActionButton(
+                    onClick = {
+                        scope.launch { listState.animateScrollToItem(0) }
+                    },
+                    containerColor = MaterialTheme.colorScheme.primary,
+                    contentColor = MaterialTheme.colorScheme.onPrimary,
+                    shape = CircleShape,
+                    modifier = Modifier.padding(bottom = 80.dp) // 메뉴키에 가려지지 않도록 상단으로 이동
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.KeyboardArrowUp,
+                        contentDescription = "맨 위로"
+                    )
+                }
+            }
+        },
         contentWindowInsets = WindowInsets(0, 0, 0, 0)
     ) { paddingValues ->
         Box(
@@ -332,6 +366,7 @@ fun DealListScreen(
 
                             LazyColumn(
                                 modifier = Modifier.fillMaxSize(),
+                                state = listState,
                                 contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
                                 verticalArrangement = Arrangement.spacedBy(12.dp)
                             ) {
@@ -378,10 +413,12 @@ fun DealListScreen(
                 }
             }
 
-            // Pull to Refresh 인디케이터
+            // Pull to Refresh 인디케이터 - z-index 높여서 잘림 방지
             PullToRefreshContainer(
                 state = pullToRefreshState,
-                modifier = Modifier.align(Alignment.TopCenter),
+                modifier = Modifier
+                    .align(Alignment.TopCenter)
+                    .zIndex(999f), // 최상위 레이어로 설정
                 containerColor = MaterialTheme.colorScheme.primaryContainer,
                 contentColor = MaterialTheme.colorScheme.onPrimaryContainer
             )

app/src/main/java/com/hotdeal/alarm/presentation/settings/SettingsScreen.kt

@@ -736,13 +736,20 @@ private fun EnhancedKeywordCard(
     onToggle: () -> Unit,
     onDelete: () -> Unit
 ) {
-    Card(
+    val isEnabled = keyword.isEnabled
+
+    ElevatedCard(
         modifier = Modifier.fillMaxWidth(),
-        shape = RoundedCornerShape(12.dp),
+        shape = RoundedCornerShape(20.dp),
-        colors = CardDefaults.cardColors(
+        colors = CardDefaults.elevatedCardColors(
-            containerColor = MaterialTheme.colorScheme.surface
+            containerColor = if (isEnabled) 
+                Color(0xFFFFEBEE)  // 옅은 빨간색 배경 (Material Red 50)
+            else 
+                MaterialTheme.colorScheme.surface
         ),
-        elevation = CardDefaults.cardElevation(defaultElevation = 1.dp)
+        elevation = CardDefaults.elevatedCardElevation(
+            defaultElevation = 2.dp
+        )
     ) {
         Row(
             modifier = Modifier
@@ -751,20 +758,34 @@ private fun EnhancedKeywordCard(
             verticalAlignment = Alignment.CenterVertically
         ) {
             // 키워드 아이콘
- Box(
+            Surface(
- modifier = Modifier.size(40.dp)
+                shape = RoundedCornerShape(10.dp),
- .background(
+                color = if (isEnabled) 
- Color(0xFFFFCDD2), // 옅은 붉은색 (Light Red)
+                    Color(0xFFE53935).copy(alpha = 0.12f)  // 빨간색
- CircleShape
+                else 
- ),
+                    MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f),
- contentAlignment = Alignment.Center
+                modifier = Modifier.height(36.dp)
             ) {
- Icon(
+                Row(
- imageVector = Icons.Filled.Tag,
+                    verticalAlignment = Alignment.CenterVertically,
- contentDescription = null,
+                    horizontalArrangement = Arrangement.spacedBy(6.dp),
- tint = Color(0xFFD32F2F), // 붉은색 아이콘
+                    modifier = Modifier.padding(horizontal = 10.dp)
- modifier = Modifier.size(20.dp)
+                ) {
+                    Box(
+                        modifier = Modifier
+                            .size(8.dp)
+                            .background(
+                                if (isEnabled) Color(0xFFE53935) else MaterialTheme.colorScheme.outline,
+                                CircleShape
                             )
+                    )
+                    Text(
+                        text = "키워드",
+                        style = MaterialTheme.typography.labelMedium,
+                        fontWeight = FontWeight.Medium,
+                        color = if (isEnabled) Color(0xFFE53935) else MaterialTheme.colorScheme.outline
+                    )
+                }
             }
 
             Spacer(modifier = Modifier.width(12.dp))
@@ -774,46 +795,55 @@ private fun EnhancedKeywordCard(
                 Text(
                     text = keyword.keyword,
                     style = MaterialTheme.typography.titleMedium,
-                    fontWeight = FontWeight.Medium,
+                    fontWeight = if (isEnabled) FontWeight.Bold else FontWeight.Medium,
                     color = MaterialTheme.colorScheme.onSurface
                 )
                 Text(
-                    text = if (keyword.isEnabled) "알림 활성화" else "알림 비활성화",
+                    text = if (isEnabled) "알림 활성화" else "알림 비활성화",
                     style = MaterialTheme.typography.bodySmall,
-                    color = if (keyword.isEnabled) 
+                    color = if (isEnabled) 
-                        MaterialTheme.colorScheme.primary 
+                        Color(0xFFE53935)  // 빨간색
                     else 
                         MaterialTheme.colorScheme.onSurfaceVariant
                 )
             }
 
-            // 토글 스위치
+            // 액션 버튼들
-            Switch(
+            Row(
-                checked = keyword.isEnabled,
+                horizontalArrangement = Arrangement.spacedBy(2.dp)
-                onCheckedChange = { onToggle() },
+            ) {
-                colors = SwitchDefaults.colors(
+                // 토글 버튼
-                    checkedThumbColor = MaterialTheme.colorScheme.primary,
+                IconButton(
-                    checkedTrackColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.5f)
+                    onClick = onToggle,
+                    modifier = Modifier.size(36.dp)
+                ) {
+                    Icon(
+                        imageVector = if (isEnabled) Icons.Filled.Notifications else Icons.Outlined.NotificationsNone,
+                        contentDescription = if (isEnabled) "알림 끄기" else "알림 켜기",
+                        tint = if (isEnabled) 
+                            Color(0xFFE53935)  // 빨간색
+                        else 
+                            MaterialTheme.colorScheme.onSurfaceVariant,
+                        modifier = Modifier.size(18.dp)
                     )
-            )
+                }
-
-            Spacer(modifier = Modifier.width(4.dp))
 
                 // 삭제 버튼
                 IconButton(
                     onClick = onDelete,
-                modifier = Modifier.size(40.dp)
+                    modifier = Modifier.size(36.dp)
                 ) {
                     Icon(
                         imageVector = Icons.Outlined.Delete,
                         contentDescription = "삭제",
                         tint = MaterialTheme.colorScheme.error,
-                    modifier = Modifier.size(20.dp)
+                        modifier = Modifier.size(18.dp)
                     )
                 }
             }
         }
     }
+}
 
 @Composable
 private fun VersionCard(