Merge pull request #191 from Project-Unifest/design/calender-add

[design] 축제 개수별 색 변경

core/designsystem/src/main/res/drawable/ic_calender_left.xml

@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="14.997778dp" android:viewportHeight="17" android:viewportWidth="9" android:width="7.94dp">
+
+    <path android:fillColor="#00000000" android:pathData="M8,1L1.191,8.295C1.083,8.411 1.083,8.589 1.191,8.705L8,16" android:strokeColor="#767676" android:strokeLineCap="round" android:strokeWidth="1.5"/>
+
+</vector>

core/designsystem/src/main/res/drawable/ic_calender_right.xml

@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="15dp" android:viewportHeight="17" android:viewportWidth="9" android:width="7.9411764dp">
+
+    <path android:fillColor="#00000000" android:pathData="M1,16L7.809,8.705C7.917,8.589 7.917,8.411 7.809,8.295L1,1" android:strokeColor="#767676" android:strokeLineCap="round" android:strokeWidth="1.5"/>
+
+</vector>

feature/home/src/main/kotlin/com/unifest/android/feature/home/Calendar.kt

@@ -4,17 +4,18 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+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.aspectRatio
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredHeight
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
@@ -36,6 +37,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.kizitonwose.calendar.compose.CalendarState
@@ -55,8 +57,8 @@ import com.unifest.android.core.common.utils.toLocalDate
 import com.unifest.android.core.designsystem.R
 import com.unifest.android.core.designsystem.theme.BoothTitle0
 import com.unifest.android.core.designsystem.theme.Content6
-import com.unifest.android.core.designsystem.theme.MainColor
 import com.unifest.android.core.designsystem.theme.Title5
+import com.unifest.android.core.designsystem.theme.MainColor
 import com.unifest.android.core.designsystem.theme.UnifestTheme
 import com.unifest.android.core.model.FestivalModel
 import kotlinx.collections.immutable.ImmutableList
@@ -187,15 +189,17 @@ private fun CalendarNavigationIcon(
     onClick: () -> Unit,
 ) = Box(
     modifier = Modifier
-        .fillMaxHeight()
-        .aspectRatio(1f)
-        .clip(shape = CircleShape)
-        .clickable(role = Role.Button, onClick = onClick),
+        .size(20.dp)
+        .clip(CircleShape)
+        .clickable(
+            role = Role.Button,
+            onClick = onClick,
+        ),
 ) {
     Icon(
         modifier = Modifier
-            .fillMaxSize()
-            .padding(4.dp)
+            .height(15.dp)
+            .width(8.dp)
             .align(Alignment.Center),
         imageVector = icon,
         contentDescription = contentDescription,
@@ -211,12 +215,14 @@ fun MonthAndWeekCalendarTitle(
 ) {
     val visibleMonth = rememberFirstVisibleMonthAfterScroll(monthState)
     val currentMonth = visibleMonth.yearMonth.month
+    val currentYear = visibleMonth.yearMonth.year
 
     val coroutineScope = rememberCoroutineScope()
     if (!isWeekMode) {
         SimpleCalendarTitle(
-            modifier = Modifier.padding(20.dp),
+            modifier = Modifier.padding(start = 18.dp, end = 7.dp, top = 20.dp, bottom = 20.dp),
             currentMonth = currentMonth,
+            currentYear = currentYear,
             goToPrevious = {
                 coroutineScope.launch {
                     if (isWeekMode) {
@@ -247,33 +253,70 @@ fun MonthAndWeekCalendarTitle(
 fun SimpleCalendarTitle(
     // 실제로 달력의 상단에 현재 월을 표시하고, 이전/다음 월로 이동할 수 있는 화살표 아이콘을 제공하는 UI 컴포넌트
     currentMonth: Month,
+    currentYear: Int,
     goToPrevious: () -> Unit,
     goToNext: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     Row(
-        modifier = modifier.height(40.dp),
+        modifier = modifier
+            .height(40.dp)
+            .fillMaxWidth(),
         verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween,
     ) {
-        Text(
+        Row(
             modifier = Modifier.weight(1f),
-            text = currentMonth.displayText(),
-            style = BoothTitle0,
-            textAlign = TextAlign.Start,
-        )
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Text(
+                text = "${currentYear}년 ${currentMonth.displayText()}",
+                style = BoothTitle0,
+                textAlign = TextAlign.Start,
+            )
+            Spacer(modifier = Modifier.width(6.dp))
+            ColorCircleWithText(color = Color(0xFF1FC0BA), text = "1개")
+            Spacer(modifier = Modifier.width(4.dp))
+            ColorCircleWithText(color = Color(0xFFFF8A1F), text = "2개")
+            Spacer(modifier = Modifier.width(4.dp))
+            ColorCircleWithText(color = Color(0xFFFF3939), text = "3개 이상")
+        }
         CalendarNavigationIcon(
-            icon = ImageVector.vectorResource(id = R.drawable.ic_chevron_left),
+            icon = ImageVector.vectorResource(id = R.drawable.ic_calender_left),
             contentDescription = "Previous",
             onClick = goToPrevious,
         )
+        Spacer(modifier = Modifier.width(10.dp))
         CalendarNavigationIcon(
-            icon = ImageVector.vectorResource(id = R.drawable.ic_chevron_right),
+            icon = ImageVector.vectorResource(id = R.drawable.ic_calender_right),
             contentDescription = "Next",
             onClick = goToNext,
         )
     }
 }
 
+@Composable
+fun ColorCircleWithText(color: Color, text: String) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = Modifier.padding(horizontal = 4.dp),
+    ) {
+        Box(
+            modifier = Modifier
+                .size(7.dp)
+                .clip(CircleShape)
+                .background(color),
+        )
+        Spacer(modifier = Modifier.width(4.dp))
+        Text(
+            text = text,
+            style = Content6,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+        )
+    }
+}
+
 @Composable
 fun CalendarHeader(daysOfWeek: ImmutableList<DayOfWeek>) {
     Row(
@@ -302,7 +345,7 @@ fun Day(
 ) {
     val currentDate = LocalDate.now()
     val isToday = day == currentDate
-    val showFestivalDot = allFestivals.any { festival ->
+    val festivalCount = allFestivals.count { festival ->
         val beginDate = festival.beginDate.toLocalDate()
         val endDate = festival.endDate.toLocalDate()
         !(day.isBefore(beginDate) || day.isAfter(endDate))
@@ -341,12 +384,17 @@ fun Day(
                 style = Title5,
             )
         }
-        if (showFestivalDot) {
+        if (festivalCount > 0) {
+            val festivalDotColor = when (festivalCount) {
+                1 -> Color(0xFF1FC0BA)
+                2 -> Color(0xFFFF8A1F)
+                else -> Color(0xFFFF3939)
+            }
             Box(
                 modifier = Modifier
                     .size(9.dp)
                     .clip(CircleShape)
-                    .background(Color(0xFF1FC0BA))
+                    .background(festivalDotColor)
                     .align(Alignment.BottomCenter),
             )
         }

gradle/libs.versions.toml

@@ -3,8 +3,8 @@
 minSdk = "26"
 targetSdk = "34"
 compileSdk = "34"
-versionCode = "14"
-versionName = "1.0.4"
+versionCode = "15"
+versionName = "1.0.5"
 packageName = "com.unifest.android"
 
 android-gradle-plugin = "8.2.2"