Merge pull request #269 from GSM-MSG/feature/268_create_datepicker

🔀 :: (#268) - Date Picker 제작

Author: khs3994

buildSrc/src/main/java/Dependency.kt

@@ -41,6 +41,7 @@ object Dependency {
         const val OKHTTP_LOGGING_INTERCEPTOR =
             "com.squareup.okhttp3:logging-interceptor:${Versions.OKHTTP}"
         const val COIL = "io.coil-kt:coil-compose:${Versions.COIL}"
+        const val NUMBER_PICKER = "com.chargemap.compose:numberpicker:${Versions.NUMBER_PICKER}"
     }
 
     object Msg {

buildSrc/src/main/java/Versions.kt

@@ -33,4 +33,6 @@ object Versions {
     const val COIL = "2.4.0"
 
     const val LOTTIE_COMPOSE = "6.1.0"
+
+    const val NUMBER_PICKER = "1.0.3"
 }

design-system/build.gradle.kts

@@ -65,4 +65,6 @@ dependencies {
 
     implementation(Dependency.Google.HILT)
     kapt(Dependency.Google.HILT_COMPILER)
+
+    implementation(Dependency.Libraries.NUMBER_PICKER)
 }

design-system/src/main/java/com/msg/sms/design/component/picker/SmsDatePicker.kt

@@ -0,0 +1,102 @@
+package com.msg.sms.design.component.picker
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+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.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.chargemap.compose.numberpicker.NumberPicker
+import com.msg.sms.design.theme.SMSTheme
+
+@Composable
+fun SmsDatePicker(
+    yearValue: Int,
+    monthValue: Int,
+    yearRange: Iterable<Int>,
+    monthRange: Iterable<Int>,
+    onYearValueChange: (Int) -> Unit,
+    onMonthValueChange: (Int) -> Unit
+) {
+    SMSTheme { colors, typography ->
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 20.dp)
+        ) {
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(35.dp)
+                    .clip(RoundedCornerShape(8.dp))
+                    .background(colors.N10)
+                    .align(Alignment.Center)
+            )
+            Row(
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .height(163.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                NumberPicker(
+                    value = yearValue,
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxHeight(),
+                    range = yearRange,
+                    dividersColor = Color.Transparent,
+                    textStyle = TextStyle(
+                        fontFamily = typography.pretendard,
+                        fontSize = 20.sp,
+                        lineHeight = 24.sp,
+                        fontWeight = FontWeight.Bold
+                    ),
+                    onValueChange = onYearValueChange
+                )
+                NumberPicker(
+                    value = monthValue,
+                    modifier = Modifier
+                        .weight(1f)
+                        .fillMaxHeight(),
+                    range = monthRange,
+                    dividersColor = Color.Transparent,
+                    textStyle = TextStyle(
+                        fontFamily = typography.pretendard,
+                        fontSize = 20.sp,
+                        lineHeight = 24.sp,
+                        fontWeight = FontWeight.Bold
+                    ),
+                    onValueChange = onMonthValueChange
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun DatePickerPre() {
+    val month = remember {
+        mutableStateOf(0)
+    }
+    val year = remember {
+        mutableStateOf(0)
+    }
+    SmsDatePicker(
+        monthValue = month.value,
+        yearValue = year.value,
+        monthRange = 0..12,
+        yearRange = 2000..2030,
+        onMonthValueChange = {},
+        onYearValueChange = {}
+    )
+}

design-system/src/main/java/com/msg/sms/design/theme/SMSTypography.kt

@@ -10,7 +10,7 @@ import com.sms.design_system.R
 
 object SMSTypography {
 
-    private val pretendard = FontFamily(
+    internal val pretendard = FontFamily(
         Font(R.font.pretendard_extralight, FontWeight.ExtraLight),
         Font(R.font.pretendard_thin, FontWeight.Thin),
         Font(R.font.pretendard_light, FontWeight.Light),

presentation/src/main/java/com/sms/presentation/main/ui/fill_out_information/screen/ProjectsScreen.kt

@@ -20,6 +20,7 @@ import androidx.navigation.NavController
 import com.msg.sms.design.component.SmsDialog
 import com.msg.sms.design.component.button.ButtonState
 import com.msg.sms.design.component.button.SmsRoundedButton
+import com.msg.sms.design.component.picker.SmsDatePicker
 import com.msg.sms.design.component.toggle.ToggleComponent
 import com.msg.sms.design.modifier.smsClickable
 import com.msg.sms.design.theme.SMSTheme
@@ -115,12 +116,18 @@ fun ProjectsScreen(
 
     bottomSheetContent(
         content = {
-            val month = remember {
+            val year = remember {
                 mutableStateOf(0)
             }
-            val year = remember {
+            val month = remember {
                 mutableStateOf(0)
             }
+            val yearRange = remember {
+                mutableStateOf(2000..2030)
+            }
+            val monthRange = remember {
+                mutableStateOf(1..12)
+            }
 
             SMSTheme { colors, typography ->
                 Box(
@@ -150,15 +157,15 @@ fun ProjectsScreen(
                             }
                     )
                 }
-                Spacer(modifier = Modifier.height(19.dp))
-                Row(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(38.dp),
-                    horizontalArrangement = Arrangement.Center
-                ) {
-                    //TODO (Kimhyunseung) - DatePicker 구현해서 한꺼번에 컴포넌트 분리하기
-                }
+                Spacer(modifier = Modifier.height(16.dp))
+                SmsDatePicker(
+                    yearValue = year.value,
+                    monthValue = month.value,
+                    yearRange = yearRange.value,
+                    monthRange = monthRange.value,
+                    onYearValueChange = { year.value = it },
+                    onMonthValueChange = { month.value = it }
+                )
             }
         }
     )
@@ -206,7 +213,7 @@ fun ProjectsScreen(
                         coroutineScope.launch { bottomSheetState.show() }
                     },
                     onEndDateCalendarClick = {
-                        isProjectStartDate.value = true
+                        isProjectStartDate.value = false
                         coroutineScope.launch { bottomSheetState.show() }
                     },
                     onProgressButtonClick = {