[Feat] 주간 통계 화면 UI 수정사항 반영 #131

app/src/main/java/com/konkuk/medicarecall/ui/feature/statistics/component/WeekRangeLabel.kt

@@ -0,0 +1,73 @@
+package com.konkuk.medicarecall.ui.feature.statistics.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.konkuk.medicarecall.ui.theme.MediCareCallTheme
+import java.time.LocalDate
+import java.time.format.DateTimeFormatter
+import java.util.Locale
+
+@Composable
+fun WeekRangeLabel(
+    startDate: LocalDate,
+    endDate: LocalDate,
+    isThisWeek: Boolean,
+    modifier: Modifier = Modifier,
+) {
+    val formatter = remember { DateTimeFormatter.ofPattern("M월 d일", Locale.KOREAN) }
+    val textStyle = MediCareCallTheme.typography.M_20
+    val textColor = MediCareCallTheme.colors.gray8
+
+    Box(modifier = modifier, contentAlignment = Alignment.Center) {
+        if (isThisWeek) {
+            Text(text = "이번주", style = textStyle, color = textColor)
+        } else {
+            Row(
+                horizontalArrangement = Arrangement.Center,
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                //시작 날짜 (예: 월요일)
+                Text(startDate.format(formatter), style = textStyle, color = textColor)
+                Spacer(Modifier.width(8.dp))
+                Text("-", style = textStyle, color = textColor)
+                Spacer(Modifier.width(8.dp))
+                //종료 날짜 (예: 일요일)
+                Text(endDate.format(formatter), style = textStyle, color = textColor)
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true, name = "이번주 표시")
+@Composable
+fun PreviewWeekRangeLabel_ThisWeek() {
+    MediCareCallTheme {
+        WeekRangeLabel(
+            startDate = LocalDate.now(),
+            endDate = LocalDate.now(),
+            isThisWeek = true,
+        )
+    }
+}
+
+@Preview(showBackground = true, name = "날짜 범위 표시 (10월 6일 ~ 10월 12일)")
+@Composable
+fun PreviewWeekRangeLabel_WithRange() {
+    MediCareCallTheme {
+        WeekRangeLabel(
+            startDate = LocalDate.of(2025, 10, 6),
+            endDate = LocalDate.of(2025, 10, 12),
+            isThisWeek = false,
+        )
+    }
+}

app/src/main/java/com/konkuk/medicarecall/ui/feature/statistics/component/WeekendBar.kt

@@ -2,24 +2,23 @@ package com.konkuk.medicarecall.ui.feature.statistics.component
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+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.width
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.konkuk.medicarecall.R
 import com.konkuk.medicarecall.ui.theme.MediCareCallTheme
 import java.time.LocalDate
-import java.time.format.DateTimeFormatter
-import java.util.Locale
 
 @Composable
 fun WeekendBar(
@@ -28,59 +27,76 @@ fun WeekendBar(
     isLatestWeek: Boolean,
     isEarliestWeek: Boolean,
     onPreviousWeek: () -> Unit,
-    onNextWeek: () -> Unit
+    onNextWeek: () -> Unit,
 ) {
-    Row(
-        modifier = modifier
-            .fillMaxWidth(),
-        horizontalArrangement = Arrangement.SpaceBetween,
-    ) {
-        // 왼쪽 화살표 (이전 주로 이동)
-        Icon(
-            modifier = Modifier.clickable { onPreviousWeek() },
-            painter = painterResource(id = R.drawable.ic_arrow_big_back),
-            contentDescription = "previous week",
-            tint = MediCareCallTheme.colors.gray3
-        )
-
-        // 날짜 텍스트 ('이번주' 또는 날짜 범위 표시)
-        Text(
-            modifier = Modifier.weight(1f),
-            text = if (isLatestWeek) {
-                "이번주"
-            } else {
-                val formatter = DateTimeFormatter.ofPattern("M월 d일", Locale.KOREAN)
-                "${currentWeek.first.format(formatter)} - ${currentWeek.second.format(formatter)}"
-            },
-            style = MediCareCallTheme.typography.M_20,
-            color = Color(0xFF444444),
-            textAlign = TextAlign.Center
-        )
+    Column(modifier = modifier) {
+        Row(
+            modifier = Modifier
+                .padding(15.dp, 14.dp)
+                .fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
 
-        // 오른쪽 화살표 ('이번주'가 아닐 때만 표시)
-        if (!isLatestWeek) {
             Icon(
-                modifier = Modifier.clickable { onNextWeek() },
-                painter = painterResource(id = R.drawable.ic_arrow_big_forward),
-                contentDescription = "next week",
-                tint = MediCareCallTheme.colors.gray3
+                modifier = Modifier.clickable(enabled = !isEarliestWeek) { onPreviousWeek() },
+                painter = painterResource(id = R.drawable.ic_arrow_big_back),
+                contentDescription = "previous week",
+                tint = MediCareCallTheme.colors.gray3,
             )
-        } else {
 
-            Spacer(modifier = Modifier.width(24.dp))
+            // 날짜 표시 영역
+            WeekRangeLabel(
+                startDate = currentWeek.first,
+                endDate = currentWeek.second,
+                isThisWeek = isLatestWeek,
+                modifier = Modifier.weight(1f),
+            )
+
+            if (!isLatestWeek) {
+                Icon(
+                    modifier = Modifier.clickable { onNextWeek() },
+                    painter = painterResource(id = R.drawable.ic_arrow_big_forward),
+                    contentDescription = "next week",
+                    tint = MediCareCallTheme.colors.gray3,
+                )
+            } else {
+                Spacer(modifier = Modifier.width(24.dp))
+            }
         }
+
+        HorizontalDivider(
+            modifier = Modifier.fillMaxWidth(),
+            color = MediCareCallTheme.colors.gray2,
+            thickness = 1.dp,
+        )
     }
 }
 
+@Preview(showBackground = true, name = "WeekendBar - 이번주")
+@Composable
+fun PreviewWeekendBar_ThisWeek() {
+    MediCareCallTheme {
+        WeekendBar(
+            currentWeek = Pair(LocalDate.now(), LocalDate.now()),
+            isLatestWeek = true,
+            isEarliestWeek = false,
+            onPreviousWeek = {},
+            onNextWeek = {},
+        )
+    }
+}
 
-@Preview(showBackground = true)
+@Preview(showBackground = true, name = "WeekendBar - 날짜 범위")
 @Composable
-fun PreviewWeekendBar() {
-    WeekendBar(
-        currentWeek = Pair(LocalDate.now(), LocalDate.now()),
-        isLatestWeek = true,
-        isEarliestWeek = true,
-        onPreviousWeek = {},
-        onNextWeek = {}
-    )
+fun PreviewWeekendBar_WithDateRange() {
+    MediCareCallTheme {
+        WeekendBar(
+            currentWeek = Pair(LocalDate.of(2025, 10, 6), LocalDate.of(2025, 10, 12)),
+            isLatestWeek = false,
+            isEarliestWeek = false,
+            onPreviousWeek = {},
+            onNextWeek = {},
+        )
+    }
 }

app/src/main/java/com/konkuk/medicarecall/ui/feature/statistics/component/WeeklyGlucoseStatusChip.kt

@@ -18,7 +18,7 @@ import com.konkuk.medicarecall.ui.theme.MediCareCallTheme
 
 @Composable
 fun WeeklyGlucoseStatusChip(
-    statusText: String
+    statusText: String,
 ) {
 
 
@@ -32,7 +32,7 @@ fun WeeklyGlucoseStatusChip(
     Card(
         modifier = Modifier
             .height(25.dp),
-        shape = RoundedCornerShape(10.dp),
+        shape = RoundedCornerShape(8.dp),
         colors = CardDefaults.cardColors(containerColor = statusColor),
 
         ) {
@@ -45,8 +45,8 @@ fun WeeklyGlucoseStatusChip(
             ) {
             Text(
                 text = statusText,
-                style = MediCareCallTheme.typography.R_16,
-                color = Color.White
+                style = MediCareCallTheme.typography.R_14,
+                color = Color.White,
             )
         }
     }