[TNT-175] 캘린더 컴포넌트 구현

core/designsystem/build.gradle.kts

@@ -11,4 +11,5 @@ android {
 
 dependencies {
     implementation(libs.androidx.appcompat)
+    implementation(libs.calendar.compose)
 }

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/calendar/CalendarSelector.kt

@@ -0,0 +1,66 @@
+package co.kr.tnt.designsystem.component.calendar
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+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.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import co.kr.tnt.core.designsystem.R
+import co.kr.tnt.designsystem.theme.TnTTheme
+import java.time.YearMonth
+import java.time.format.DateTimeFormatter
+
+@Composable
+fun TnTCalendarSelector(
+    onClickPrevious: () -> Unit,
+    onClickNext: () -> Unit,
+    modifier: Modifier = Modifier,
+    yearMonth: YearMonth = YearMonth.now(),
+) {
+    val context = LocalContext.current
+    val dateFormatter = remember {
+        DateTimeFormatter.ofPattern(context.getString(R.string.year_month_format))
+    }
+
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        IconButton(onClick = onClickPrevious) {
+            Icon(
+                painter = painterResource(id = R.drawable.ic_bold_arrow_left),
+                contentDescription = "arrow left",
+                tint = TnTTheme.colors.neutralColors.Neutral300,
+            )
+        }
+        Text(
+            dateFormatter.format(yearMonth),
+            style = TnTTheme.typography.h3,
+            color = TnTTheme.colors.neutralColors.Neutral900,
+        )
+        IconButton(onClick = onClickNext) {
+            Icon(
+                painter = painterResource(id = R.drawable.ic_bold_arrow_right),
+                contentDescription = "arrow right",
+                tint = TnTTheme.colors.neutralColors.Neutral300,
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun TnTCalendarSelectorPreview() {
+    TnTTheme {
+        TnTCalendarSelector(
+            onClickPrevious = { },
+            onClickNext = { },
+        )
+    }
+}

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/calendar/MonthCalendar.kt

@@ -0,0 +1,127 @@
+package co.kr.tnt.designsystem.component.calendar
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import co.kr.tnt.designsystem.component.calendar.composable.CalendarCell
+import co.kr.tnt.designsystem.component.calendar.composable.CalendarCellWithIndicator
+import co.kr.tnt.designsystem.component.calendar.composable.WeekLabels
+import co.kr.tnt.designsystem.component.calendar.model.DayIndicatorState
+import co.kr.tnt.designsystem.component.calendar.model.DayState
+import co.kr.tnt.designsystem.theme.TnTTheme
+import com.kizitonwose.calendar.compose.CalendarState
+import com.kizitonwose.calendar.compose.HorizontalCalendar
+import com.kizitonwose.calendar.compose.rememberCalendarState
+import com.kizitonwose.calendar.core.DayPosition
+import com.kizitonwose.calendar.core.daysOfWeek
+import com.kizitonwose.calendar.core.yearMonth
+import java.time.LocalDate
+
+@Composable
+fun TnTMonthCalendar(
+    modifier: Modifier = Modifier,
+    state: CalendarState = rememberCalendarState(),
+    dayState: (day: LocalDate) -> DayState = { DayState() },
+    onClickDay: ((day: LocalDate) -> Unit)? = null,
+) {
+    val daysOfWeek = remember { daysOfWeek(state.firstDayOfWeek) }
+
+    HorizontalCalendar(
+        modifier = modifier,
+        state = state,
+        monthHeader = {
+            WeekLabels(daysOfWeek = daysOfWeek)
+        },
+        dayContent = { day ->
+            if (day.position == DayPosition.MonthDate) {
+                CalendarCell(
+                    date = day.date,
+                    state = dayState(day.date),
+                    onClick = { onClickDay?.invoke(day.date) },
+                )
+            }
+        },
+    )
+}
+
+@Composable
+fun TnTIndicatorMonthCalendar(
+    modifier: Modifier = Modifier,
+    state: CalendarState = rememberCalendarState(),
+    dayState: (day: LocalDate) -> DayState = { DayState() },
+    indicatorState: (day: LocalDate) -> DayIndicatorState = { DayIndicatorState() },
+    onClickDay: ((day: LocalDate) -> Unit)? = null,
+) {
+    val daysOfWeek = remember { daysOfWeek(state.firstDayOfWeek) }
+
+    HorizontalCalendar(
+        modifier = modifier,
+        state = state,
+        monthHeader = {
+            WeekLabels(daysOfWeek = daysOfWeek)
+        },
+        dayContent = { day ->
+            if (day.position == DayPosition.MonthDate) {
+                CalendarCellWithIndicator(
+                    date = day.date,
+                    dayState = dayState(day.date),
+                    indicatorState = indicatorState(day.date),
+                    onClick = { onClickDay?.invoke(day.date) },
+                )
+            }
+        },
+    )
+}
+
+@Preview(showBackground = true)
+@Preview(showBackground = true, widthDp = 500)
+@Composable
+private fun TnTMonthCalendarPreview() {
+    val now = LocalDate.now()
+
+    TnTTheme {
+        TnTMonthCalendar(
+            state = rememberCalendarState(
+                startMonth = now.yearMonth.minusMonths(12),
+                endMonth = now.yearMonth.plusMonths(12),
+                firstVisibleMonth = now.yearMonth,
+            ),
+            dayState = { date ->
+                DayState(isSelected = date == now)
+            },
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Preview(showBackground = true, widthDp = 500)
+@Composable
+private fun TnTIndicatorMonthCalendarPreview() {
+    val now = LocalDate.now()
+
+    TnTTheme {
+        TnTIndicatorMonthCalendar(
+            state = rememberCalendarState(
+                startMonth = now.yearMonth.minusMonths(12),
+                endMonth = now.yearMonth.plusMonths(12),
+                firstVisibleMonth = now.yearMonth,
+            ),
+            dayState = { date ->
+                DayState(isSelected = date == now)
+            },
+            indicatorState = indicator@{ date ->
+                if (date.dayOfMonth % 2 == 0) {
+                    return@indicator DayIndicatorState(
+                        count = 10,
+                        showText = true,
+                    )
+                }
+
+                DayIndicatorState(
+                    showIcon = true,
+                )
+            },
+        )
+    }
+}

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/calendar/WeekCalendar.kt

@@ -0,0 +1,121 @@
+package co.kr.tnt.designsystem.component.calendar
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import co.kr.tnt.designsystem.component.calendar.composable.CalendarCell
+import co.kr.tnt.designsystem.component.calendar.composable.CalendarCellWithIndicator
+import co.kr.tnt.designsystem.component.calendar.composable.WeekLabels
+import co.kr.tnt.designsystem.component.calendar.model.DayIndicatorState
+import co.kr.tnt.designsystem.component.calendar.model.DayState
+import co.kr.tnt.designsystem.theme.TnTTheme
+import com.kizitonwose.calendar.compose.WeekCalendar
+import com.kizitonwose.calendar.compose.weekcalendar.WeekCalendarState
+import com.kizitonwose.calendar.compose.weekcalendar.rememberWeekCalendarState
+import com.kizitonwose.calendar.core.daysOfWeek
+import java.time.LocalDate
+
+@Composable
+fun TnTWeekCalendar(
+    modifier: Modifier = Modifier,
+    state: WeekCalendarState = rememberWeekCalendarState(),
+    dayState: (day: LocalDate) -> DayState = { DayState() },
+    onClickDay: ((day: LocalDate) -> Unit)? = null,
+) {
+    val daysOfWeek = remember { daysOfWeek(state.firstDayOfWeek) }
+
+    WeekCalendar(
+        modifier = modifier,
+        state = state,
+        weekHeader = {
+            WeekLabels(daysOfWeek = daysOfWeek)
+        },
+        dayContent = { day ->
+            CalendarCell(
+                date = day.date,
+                state = dayState(day.date),
+                onClick = { onClickDay?.invoke(day.date) },
+            )
+        },
+    )
+}
+
+@Composable
+fun TnTIndicatorWeekCalendar(
+    modifier: Modifier = Modifier,
+    state: WeekCalendarState = rememberWeekCalendarState(),
+    dayState: (day: LocalDate) -> DayState = { DayState() },
+    indicatorState: (day: LocalDate) -> DayIndicatorState = { DayIndicatorState() },
+    onClickDay: ((day: LocalDate) -> Unit)? = null,
+) {
+    val daysOfWeek = remember { daysOfWeek(state.firstDayOfWeek) }
+
+    WeekCalendar(
+        modifier = modifier,
+        state = state,
+        weekHeader = {
+            WeekLabels(daysOfWeek = daysOfWeek)
+        },
+        dayContent = { day ->
+            CalendarCellWithIndicator(
+                date = day.date,
+                dayState = dayState(day.date),
+                indicatorState = indicatorState(day.date),
+                onClick = { onClickDay?.invoke(day.date) },
+            )
+        },
+    )
+}
+
+@Preview(showBackground = true)
+@Preview(showBackground = true, widthDp = 500)
+@Composable
+private fun TnTWeekCalendarPreview() {
+    val now = LocalDate.now()
+
+    TnTTheme {
+        TnTWeekCalendar(
+            state = rememberWeekCalendarState(
+                startDate = now.minusMonths(6),
+                endDate = now.plusMonths(6),
+                firstVisibleWeekDate = now,
+            ),
+            dayState = { date ->
+                DayState(isSelected = date == now)
+            },
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Preview(showBackground = true, widthDp = 500)
+@Composable
+private fun TnTIndicatorWeekCalendarPreview() {
+    val now = LocalDate.now()
+
+    TnTTheme {
+        TnTIndicatorWeekCalendar(
+            state = rememberWeekCalendarState(
+                startDate = now.minusMonths(6),
+                endDate = now.plusMonths(6),
+                firstVisibleWeekDate = now,
+            ),
+            dayState = { date ->
+                DayState(isSelected = date == now)
+            },
+            indicatorState = indicator@{ date ->
+                if (date.dayOfMonth % 2 == 0) {
+                    return@indicator DayIndicatorState(
+                        count = 10,
+                        showText = true,
+                    )
+                }
+
+                DayIndicatorState(
+                    showIcon = true,
+                )
+            },
+        )
+    }
+}