🔀 :: (#157) 생성 화면 퍼블리싱

app/build.gradle.kts

@@ -7,6 +7,7 @@ plugins {
 
 dependencies {
     implementation(project(":feature:auth"))
+    implementation(project(":feature:create"))
     implementation(project(":core:designsystem"))
     implementation(project(":core:data"))
     implementation(project(":core:navigation"))

app/src/main/java/com/idiotfrogs/memoryseal/MainActivity.kt

@@ -17,6 +17,7 @@ import androidx.navigation.compose.rememberNavController
 import com.idiotfrogs.auth.login.LoginRoute
 import com.idiotfrogs.auth.signup.SignUpRoute
 import com.idiotfrogs.auth.util.LocalLoginManager
+import com.idiotfrogs.create.CreateScreen
 import com.idiotfrogs.data.LoginManager
 import com.idiotfrogs.designsystem.theme.MSTheme
 import com.idiotfrogs.navigation.Routes
@@ -58,6 +59,9 @@ class MainActivity : ComponentActivity() {
                                     navigateToMainScreen = {}
                                 )
                             }
+                            composable<Routes.Create> {
+                                CreateScreen()
+                            }
                         }
                     }
                 }

build-logic/src/main/kotlin/com/idiotfrogs/memoryseal/KotlinAndroid.kt

@@ -12,7 +12,7 @@ internal fun Project.configureKotlinAndroid(commonExtension: CommonExtension<*,
         compileSdk = 35
 
         defaultConfig {
-            minSdk = 24
+            minSdk = 26
             testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
         }
 

common/resource/src/main/res/drawable/ic_calender_after.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="17dp"
+    android:viewportWidth="16"
+    android:viewportHeight="17">
+  <path
+      android:pathData="M5.293,2.46C4.902,2.85 4.902,3.483 5.293,3.874L9.919,8.5L5.293,13.126C4.902,13.517 4.902,14.15 5.293,14.54C5.683,14.931 6.317,14.931 6.707,14.54L12.04,9.207C12.431,8.817 12.431,8.184 12.04,7.793L6.707,2.46C6.317,2.069 5.683,2.069 5.293,2.46Z"
+      android:fillColor="#1A1A1A"
+      android:fillType="evenOdd"/>
+</vector>

common/resource/src/main/res/drawable/ic_calender_before.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="17dp"
+    android:viewportWidth="16"
+    android:viewportHeight="17">
+  <path
+      android:pathData="M10.707,2.46C11.098,2.85 11.098,3.483 10.707,3.874L6.081,8.5L10.707,13.126C11.098,13.517 11.098,14.15 10.707,14.54C10.317,14.931 9.684,14.931 9.293,14.54L3.96,9.207C3.569,8.817 3.569,8.184 3.96,7.793L9.293,2.46C9.684,2.069 10.317,2.069 10.707,2.46Z"
+      android:fillColor="#1A1A1A"
+      android:fillType="evenOdd"/>
+</vector>

common/resource/src/main/res/drawable/ic_photo.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M6,3C4.343,3 3,4.343 3,6V17V18C3,19.657 4.343,21 6,21H18C19.657,21 21,19.657 21,18V17V6C21,4.343 19.657,3 18,3H6ZM5,6C5,5.448 5.448,5 6,5H18C18.552,5 19,5.448 19,6V14L17.1,11.467C16.3,10.4 14.7,10.4 13.9,11.467L10.892,15.478L9.32,13.906C8.617,13.202 7.502,13.123 6.706,13.72L5,15V6ZM11.8,17.6L15.5,12.667L19,17.333V18C19,18.552 18.552,19 18,19H6C5.448,19 5,18.552 5,18V17.5L7.906,15.32L10.293,17.707C10.498,17.912 10.782,18.018 11.071,17.997C11.36,17.977 11.626,17.832 11.8,17.6ZM9.5,10C10.328,10 11,9.328 11,8.5C11,7.672 10.328,7 9.5,7C8.672,7 8,7.672 8,8.5C8,9.328 8.672,10 9.5,10Z"
+      android:fillColor="#1A1A1A"
+      android:fillType="evenOdd"/>
+</vector>

core/designsystem/src/main/java/com/idiotfrogs/designsystem/component/MSCalender.kt

@@ -0,0 +1,193 @@
+package com.idiotfrogs.designsystem.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+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.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.idiotfrogs.designsystem.theme.MSTheme
+import com.idiotfrogs.designsystem.util.noRippleClickable
+import com.idiotfrogs.resource.R
+import java.time.LocalDate
+import java.time.YearMonth
+import kotlin.math.ceil
+
+@Composable
+fun MSCalender(
+    onDateSelected: (LocalDate) -> Unit
+) {
+    val selectedDate = remember { mutableStateOf(LocalDate.now()) }
+    var currentYearMonth by remember { mutableStateOf(YearMonth.now()) }
+
+    val today = LocalDate.now()
+    val currentMonth = YearMonth.from(today)
+    val canGoToPrevMonth = currentYearMonth > currentMonth
+
+    val daysOfWeek = listOf("일", "월", "화", "수", "목", "금", "토")
+
+    val firstDayOfMonth = currentYearMonth.atDay(1)
+    val firstDayOfWeek = firstDayOfMonth.dayOfWeek.value % 7 // 일요일 = 0
+
+    val prevMonth = currentYearMonth.minusMonths(1)
+    val prevMonthLength = prevMonth.lengthOfMonth()
+    val leadingDates = (0 until firstDayOfWeek).map {
+        prevMonth.atDay(prevMonthLength - firstDayOfWeek + it + 1)
+    }
+
+    val currentMonthDates = (1..currentYearMonth.lengthOfMonth()).map {
+        currentYearMonth.atDay(it)
+    }
+
+    val totalCells = leadingDates.size + currentMonthDates.size
+    val rowCount = ceil(totalCells / 7.0).toInt()
+
+    val trailingCount = rowCount * 7 - totalCells
+    val nextMonth = currentYearMonth.plusMonths(1)
+    val trailingDates = (1..trailingCount).map { nextMonth.atDay(it) }
+
+    val dates = leadingDates + currentMonthDates + trailingDates
+
+    Column(
+        modifier = Modifier
+            .border(1.dp, MSTheme.color.greyG2, RoundedCornerShape(12.dp))
+            .padding(12.dp)
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            MSText(
+                text = "${currentYearMonth.year}년 ${currentYearMonth.monthValue}월",
+                fontSize = 14.dp,
+                color = MSTheme.color.greyG5
+            )
+            Spacer(Modifier.weight(1f))
+            Icon(
+                modifier = Modifier.noRippleClickable {
+                    if (canGoToPrevMonth) currentYearMonth = currentYearMonth.minusMonths(1)
+                },
+                painter = painterResource(R.drawable.ic_calender_before),
+                contentDescription = "이전 달",
+                tint = if (canGoToPrevMonth) Color.Unspecified else MSTheme.color.greyG2
+            )
+            Spacer(Modifier.width(8.dp))
+            Icon(
+                modifier = Modifier.noRippleClickable {
+                    currentYearMonth = currentYearMonth.plusMonths(1)
+                },
+                painter = painterResource(R.drawable.ic_calender_after),
+                contentDescription = "다음 달"
+            )
+        }
+
+        Spacer(modifier = Modifier.height(12.dp))
+
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            for (day in daysOfWeek) {
+                MSText(
+                    text = day,
+                    modifier = Modifier.weight(1f),
+                    textAlign = TextAlign.Center,
+                    fontWeight = FontWeight.Medium,
+                    color = MSTheme.color.greyG4,
+                    fontSize = 12.dp
+                )
+            }
+        }
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        LazyVerticalGrid(
+            columns = GridCells.Fixed(7),
+            userScrollEnabled = false,
+            modifier = Modifier
+                .fillMaxWidth()
+                .height((rowCount * 50).dp)
+        ) {
+            items(dates) { date ->
+                val isCurrentMonth = date.month == currentYearMonth.month
+                val isSelected = date == selectedDate.value
+                val isPast = date.isBefore(today)
+
+                Box(
+                    modifier = Modifier
+                        .aspectRatio(1f)
+                        .clip(RoundedCornerShape(8.dp))
+                        .background(
+                            when {
+                                isSelected -> MSTheme.color.primaryNormal
+                                else -> Color.Transparent
+                            }
+                        )
+                        .noRippleClickable {
+                            if (!isPast) {
+                                selectedDate.value = date
+
+                                val selectedMonth = YearMonth.from(date)
+                                if (selectedMonth != currentYearMonth) {
+                                    currentYearMonth = selectedMonth
+                                }
+
+                                onDateSelected(date)
+                            }
+                        },
+                    contentAlignment = Alignment.Center
+                ) {
+                    MSText(
+                        text = date.dayOfMonth.toString(),
+                        color = when {
+                            isSelected -> MSTheme.color.white
+                            isCurrentMonth -> MSTheme.color.greyG5
+                            else -> MSTheme.color.greyG2
+                        }
+                    )
+                }
+            }
+        }
+    }
+}
+
+
+@Preview
+@Composable
+private fun MsCalenderPreview() {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(horizontal = 20.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        MSCalender {}
+    }
+}

core/designsystem/src/main/java/com/idiotfrogs/designsystem/component/MSHeader.kt

@@ -0,0 +1,71 @@
+package com.idiotfrogs.designsystem.component
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.idiotfrogs.designsystem.util.noRippleClickable
+import com.idiotfrogs.resource.R
+
+@Composable
+fun MSDetailHeader(
+    navigateToBack: () -> Unit,
+    modifier: Modifier = Modifier,
+    title: String = "",
+    paddingValues: PaddingValues = PaddingValues(horizontal = 20.dp, vertical = 16.dp),
+    trailingContent: @Composable (() -> Unit)? = null,
+) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(paddingValues),
+    ) {
+        Icon(
+            modifier = Modifier
+                .size(24.dp)
+                .align(Alignment.CenterStart)
+                .noRippleClickable { navigateToBack() },
+            painter = painterResource(R.drawable.ic_chevron_left),
+            contentDescription = "Back"
+        )
+        MSText(
+            modifier = Modifier.align(Alignment.Center),
+            text = title
+        )
+        trailingContent?.let {
+            Box(Modifier.align(Alignment.CenterEnd)) { it() }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun MSDetailHeaderPreview() {
+    Column {
+        MSDetailHeader(
+            title = "타임 티켓 생성하기",
+            navigateToBack = {}
+        )
+        Spacer(Modifier.height(30.dp))
+        MSDetailHeader(
+            title = "맴버 추가",
+            navigateToBack = {}
+        ) {
+            Icon(
+                painter = painterResource(R.drawable.ic_plus),
+                contentDescription = "Back"
+            )
+        }
+    }
+}

core/navigation/src/main/java/com/idiotfrogs/navigation/Routes.kt

@@ -7,4 +7,6 @@ sealed interface Routes {
     data object Login : Routes
     @Serializable
     data object SignUp : Routes
+    @Serializable
+    data object Create : Routes
 }