통계 상세 화면 기본 세팅

app/build.gradle.kts

@@ -65,6 +65,7 @@ dependencies {
     implementation(projects.feature.goalEditor)
     implementation(projects.feature.goalManage)
     implementation(projects.feature.settings)
+    implementation(projects.feature.stats.detail)
     implementation(projects.core.notification)
     implementation(projects.core.navigationContract)
 

app/src/main/java/com/yapp/twix/di/FeatureModules.kt

@@ -7,6 +7,7 @@ import com.twix.login.di.loginModule
 import com.twix.main.di.mainModule
 import com.twix.onboarding.di.onBoardingModule
 import com.twix.settings.di.settingsModule
+import com.twix.stats.detail.di.statsDetailModule
 import com.twix.stats.di.statsModule
 import com.twix.task_certification.di.taskCertificationModule
 import org.koin.core.module.Module
@@ -22,4 +23,5 @@ val featureModules: List<Module> =
         settingsModule,
         onBoardingModule,
         statsModule,
+        statsDetailModule,
     )

core/design-system/src/main/java/com/twix/designsystem/components/calendar/CalendarNavigator.kt

@@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -26,6 +27,8 @@ fun CalendarNavigator(
     onNextMonth: () -> Unit,
     onPreviousMonth: () -> Unit,
     modifier: Modifier = Modifier,
+    hasPrevious: Boolean = true,
+    hasNext: Boolean = true,
 ) {
     Row(
         modifier =
@@ -39,9 +42,10 @@ fun CalendarNavigator(
             contentDescription = "previous month",
             modifier =
                 Modifier
-                    .noRippleClickable(onClick = onPreviousMonth)
+                    .noRippleClickable(enabled = hasPrevious, onClick = onPreviousMonth)
                     .padding(6.dp)
                     .size(24.dp),
+            colorFilter = ColorFilter.tint(if (hasPrevious) GrayColor.C500 else GrayColor.C200),
         )
 
         AppText(
@@ -56,21 +60,24 @@ fun CalendarNavigator(
             contentDescription = "next month",
             modifier =
                 Modifier
-                    .noRippleClickable(onClick = onNextMonth)
+                    .noRippleClickable(enabled = hasNext, onClick = onNextMonth)
                     .padding(6.dp)
                     .size(24.dp),
+            colorFilter = ColorFilter.tint(if (hasNext) GrayColor.C500 else GrayColor.C200),
         )
     }
 }
 
-@Preview
+@Preview(showBackground = true)
 @Composable
 fun CalendarNavigatorPreview() {
     TwixTheme {
         CalendarNavigator(
             currentDate = LocalDate.now(),
             onNextMonth = {},
             onPreviousMonth = {},
+            hasPrevious = false,
+            hasNext = true,
         )
     }
 }

core/design-system/src/main/java/com/twix/designsystem/components/stats/PictureDayCell.kt

@@ -0,0 +1,113 @@
+package com.twix.designsystem.components.stats
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImage
+import coil3.request.ImageRequest
+import coil3.request.crossfade
+import com.twix.designsystem.components.text.AppText
+import com.twix.designsystem.theme.CommonColor
+import com.twix.designsystem.theme.DimmedColor
+import com.twix.designsystem.theme.GrayColor
+import com.twix.domain.model.enums.AppTextStyle
+import com.twix.domain.model.stats.detail.CompletedDate
+import com.twix.ui.extension.noRippleClickable
+import java.time.LocalDate
+
+@Composable
+fun PictureDayCell(
+    date: LocalDate,
+    completed: CompletedDate?,
+    onDateSelected: (LocalDate) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val showBackgroundCard = completed?.myImageUrl != null && completed.partnerImageUrl != null
+    val hasImage = completed?.partnerImageUrl != null || completed?.myImageUrl != null
+
+    val textColor = if (hasImage) CommonColor.White else GrayColor.C500
+    val borderColor = if (showBackgroundCard) CommonColor.White else GrayColor.C400
+    val cornerShape = RoundedCornerShape(7.dp)
+    val context = LocalContext.current
+
+    Box(
+        modifier =
+            modifier
+                .aspectRatio(1f)
+                .noRippleClickable { onDateSelected(date) },
+        contentAlignment = Alignment.Center,
+    ) {
+        if (showBackgroundCard) {
+            Box(
+                modifier =
+                    Modifier
+                        .size(36.dp)
+                        .rotate(-16f)
+                        .border(1.dp, GrayColor.C400, cornerShape)
+                        .background(CommonColor.White, cornerShape),
+            )
+        }
+
+        Box(
+            modifier =
+                Modifier
+                    .size(36.dp)
+                    .clip(cornerShape)
+                    .then(
+                        if (showBackgroundCard) {
+                            Modifier.border(1.dp, borderColor, cornerShape)
+                        } else {
+                            Modifier
+                        },
+                    ),
+            contentAlignment = Alignment.Center,
+        ) {
+            val displayImageUrl = completed?.partnerImageUrl ?: completed?.myImageUrl
+            if (displayImageUrl != null) {
+                val imageRequest =
+                    remember(displayImageUrl, context) {
+                        ImageRequest
+                            .Builder(context)
+                            .data(displayImageUrl)
+                            .crossfade(true)
+                            .build()
+                    }
+
+                AsyncImage(
+                    model = imageRequest,
+                    contentDescription = null,
+                    contentScale = ContentScale.Crop,
+                    modifier = Modifier.fillMaxSize(),
+                )
+
+                Box(
+                    modifier =
+                        Modifier
+                            .fillMaxSize()
+                            .background(DimmedColor.D020),
+                )
+            }
+
+            AppText(
+                text = date.dayOfMonth.toString(),
+                style = AppTextStyle.B1,
+                color = textColor,
+                textAlign = TextAlign.Center,
+            )
+        }
+    }
+}

core/design-system/src/main/java/com/twix/designsystem/components/stats/StatsCalendar.kt

@@ -0,0 +1,124 @@
+package com.twix.designsystem.components.stats
+
+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.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.twix.designsystem.R
+import com.twix.designsystem.components.stats.model.StatsCalendarUiModel
+import com.twix.designsystem.components.text.AppText
+import com.twix.designsystem.theme.GrayColor
+import com.twix.designsystem.theme.TwixTheme
+import com.twix.domain.model.enums.AppTextStyle
+import com.twix.domain.model.stats.detail.CompletedDate
+import java.time.LocalDate
+
+@Composable
+fun StatsCalendar(
+    uiModel: StatsCalendarUiModel,
+    onSelectedDate: (LocalDate) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(modifier = modifier.fillMaxWidth()) {
+        DayOfWeekHeader()
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        Column(
+            modifier = Modifier.fillMaxWidth(),
+            verticalArrangement = Arrangement.spacedBy(20.dp),
+        ) {
+            uiModel.weeks.forEach { week ->
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                ) {
+                    week.forEach { date ->
+                        if (date == null) {
+                            Box(modifier = Modifier.weight(1f))
+                        } else {
+                            PictureDayCell(
+                                date = date,
+                                completed = uiModel.completedDateMap[date],
+                                onDateSelected = onSelectedDate,
+                                modifier = Modifier.weight(1f),
+                            )
+                        }
+                    }
+
+                    if (week.size < 7) {
+                        repeat(7 - week.size) {
+                            Box(modifier = Modifier.weight(1f))
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun DayOfWeekHeader() {
+    val days =
+        listOf(
+            stringResource(R.string.word_sunday),
+            stringResource(R.string.word_monday),
+            stringResource(R.string.word_tuesday),
+            stringResource(R.string.word_wednesday),
+            stringResource(R.string.word_thursday),
+            stringResource(R.string.word_friday),
+            stringResource(R.string.word_saturday),
+        )
+    Row(
+        modifier = Modifier.fillMaxWidth(),
+    ) {
+        days.forEach { day ->
+            AppText(
+                text = day,
+                style = AppTextStyle.B2,
+                color = GrayColor.C300,
+                modifier =
+                    Modifier
+                        .weight(1f)
+                        .height(24.dp),
+                textAlign = TextAlign.Center,
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun StatsCalendarPreview() {
+    TwixTheme {
+        StatsCalendar(
+            uiModel =
+                StatsCalendarUiModel.create(
+                    currentDate = LocalDate.of(2026, 2, 1),
+                    completedDate =
+                        listOf(
+                            CompletedDate(
+                                LocalDate.of(2026, 2, 1),
+                                "https://picsum.photos/100",
+                                "https://picsum.photos/100",
+                            ),
+                            CompletedDate(
+                                LocalDate.of(2026, 2, 3),
+                                "https://picsum.photos/101",
+                                null,
+                            ),
+                        ),
+                ),
+            onSelectedDate = { },
+        )
+    }
+}

core/design-system/src/main/java/com/twix/designsystem/components/stats/model/StatsCalendarUiModel.kt

@@ -0,0 +1,37 @@
+package com.twix.designsystem.components.stats.model
+
+import androidx.compose.runtime.Immutable
+import com.twix.domain.model.stats.detail.CompletedDate
+import java.time.LocalDate
+
+@Immutable
+data class StatsCalendarUiModel(
+    val currentDate: LocalDate = LocalDate.now(),
+    val completedDateMap: Map<LocalDate, CompletedDate> = emptyMap(),
+    val weeks: List<List<LocalDate?>> = emptyList(),
+) {
+    companion object {
+        private const val WEEK_LENGTH = 7
+
+        fun create(
+            currentDate: LocalDate,
+            completedDate: List<CompletedDate>,
+        ): StatsCalendarUiModel {
+            val firstDayOfMonth = currentDate.withDayOfMonth(1)
+            val lastDay = currentDate.lengthOfMonth()
+            val emptyCellsBefore = firstDayOfMonth.dayOfWeek.value % WEEK_LENGTH
+
+            val calendarItems = mutableListOf<LocalDate?>()
+            repeat(emptyCellsBefore) { calendarItems.add(null) }
+            for (i in 1..lastDay) {
+                calendarItems.add(currentDate.withDayOfMonth(i))
+            }
+
+            return StatsCalendarUiModel(
+                currentDate = currentDate,
+                completedDateMap = completedDate.associateBy { it.date },
+                weeks = calendarItems.chunked(WEEK_LENGTH),
+            )
+        }
+    }
+}

core/navigation/src/main/java/com/twix/navigation/NavRoutes.kt

@@ -122,4 +122,23 @@ sealed class NavRoutes(
     object SettingsAccountRoute : NavRoutes("settings/account")
 
     object SettingsAboutRoute : NavRoutes("settings/about")
+
+    /**
+     * StatsGraph
+     * */
+    object StatsDetailGraph : NavRoutes("stats_detail_graph")
+
+    object StatsDetailRoute : NavRoutes("stats_detail_graph/{goalId}?date={date}") {
+        const val ARG_GOAL_ID = "goalId"
+        const val ARG_DATE = "date"
+
+        fun createRoute(
+            goalId: Long,
+            date: LocalDate?,
+        ): String {
+            val baseRoute = "stats_detail_graph/$goalId"
+            if (date != null) return "$baseRoute?date=$date"
+            return baseRoute
+        }
+    }
 }