[UI/#48] 온보딩 뷰 / UI 구현

core/build.gradle.kts

@@ -69,4 +69,5 @@ dependencies {
 
     //ThirdPartyDependencies
     implementation(libs.compose.coil)
+    implementation(libs.okhttp)
 }

core/src/main/java/com/terning/core/designsystem/component/button/FilteringButton.kt

@@ -0,0 +1,82 @@
+package com.terning.core.designsystem.component.button
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.ripple.LocalRippleTheme
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.terning.core.designsystem.theme.Grey400
+import com.terning.core.designsystem.theme.TerningMain
+import com.terning.core.designsystem.theme.TerningSub1
+import com.terning.core.designsystem.theme.TerningSub3
+import com.terning.core.designsystem.theme.TerningSub4
+import com.terning.core.designsystem.theme.TerningSub5
+import com.terning.core.designsystem.theme.TerningTheme
+import com.terning.core.designsystem.theme.White
+import com.terning.core.util.NoRippleTheme
+
+@Composable
+fun FilteringButton(
+    isSelected: Boolean,
+    @StringRes text: Int,
+    cornerRadius: Dp,
+    paddingVertical: Dp,
+    onButtonClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val backgroundColor = when {
+        !isSelected && !isPressed -> White
+        !isSelected && isPressed -> TerningSub5
+        isSelected && !isPressed -> TerningSub4
+        else -> TerningSub3
+    }
+    val textColor = when {
+        !isSelected -> Grey400
+        else -> TerningMain
+    }
+    val borderColor = when {
+        !isSelected -> TerningMain
+        else -> TerningSub1
+    }
+
+    CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
+        Button(
+            contentPadding = PaddingValues(paddingVertical),
+            modifier = modifier.fillMaxWidth(),
+            interactionSource = interactionSource,
+            colors = ButtonDefaults.buttonColors(
+                containerColor = backgroundColor,
+                contentColor = textColor,
+            ),
+            border = BorderStroke(
+                width = 1.dp,
+                color = borderColor
+            ),
+            shape = RoundedCornerShape(cornerRadius),
+            onClick = { onButtonClick() }
+        ) {
+            Text(
+                text = stringResource(id = text),
+                style = TerningTheme.typography.button3_a,
+                textAlign = TextAlign.Center
+            )
+        }
+    }
+}

core/src/main/java/com/terning/core/designsystem/component/datepicker/DatePicker.kt

@@ -0,0 +1,151 @@
+package com.terning.core.designsystem.component.datepicker
+
+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.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.terning.core.designsystem.theme.Grey300
+import com.terning.core.designsystem.theme.Grey500
+import com.terning.core.designsystem.theme.TerningMain
+import com.terning.core.designsystem.theme.TerningTheme
+import okhttp3.internal.toImmutableList
+
+private const val START_YEAR = 2023
+private const val END_YEAR = 2025
+private const val START_MONTH = 1
+private const val END_MONTH = 12
+private val years =
+    (listOf("") + (START_YEAR..END_YEAR).map { it.toString() } + listOf("") + listOf("")).toImmutableList()
+private val monthsNumber =
+    (listOf("") + (START_MONTH..END_MONTH).map { it.toString() } + listOf("") + listOf("")).toImmutableList()
+
+@Composable
+fun DatePickerUI(
+    chosenYear: Int,
+    chosenMonth: Int,
+    onYearChosen: (Int) -> Unit = {},
+    onMonthChosen: (Int) -> Unit = {},
+) {
+
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        DateSelectionSection(
+            chosenYear = chosenYear,
+            chosenMonth = chosenMonth,
+            onYearChosen = { onYearChosen(it.toInt()) },
+            onMonthChosen = { onMonthChosen(it.toInt()) },
+        )
+    }
+}
+
+@Composable
+fun DateSelectionSection(
+    chosenYear: Int,
+    chosenMonth: Int,
+    onYearChosen: (String) -> Unit,
+    onMonthChosen: (String) -> Unit,
+) {
+    Row(
+        horizontalArrangement = Arrangement.Center,
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        DateItemsPicker(
+            items = years.toImmutableList(),
+            firstIndex = (chosenYear - START_YEAR),
+            onItemSelected = onYearChosen,
+            isYear = true
+        )
+        Spacer(modifier = Modifier.width(25.dp))
+        DateItemsPicker(
+            items = monthsNumber.toImmutableList(),
+            firstIndex = chosenMonth,
+            onItemSelected = onMonthChosen,
+            isYear = false
+        )
+    }
+}
+
+@Composable
+fun DateItemsPicker(
+    items: List<String>,
+    firstIndex: Int,
+    onItemSelected: (String) -> Unit,
+    modifier: Modifier = Modifier,
+    isYear: Boolean
+) {
+    val listState = rememberLazyListState(firstIndex)
+    val currentValue = remember { mutableStateOf("") }
+
+    LaunchedEffect(!listState.isScrollInProgress) {
+        onItemSelected(currentValue.value)
+        listState.animateScrollToItem(index = listState.firstVisibleItemIndex)
+    }
+
+    Box(
+        modifier = Modifier.height(108.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        Column(
+            modifier = modifier.fillMaxHeight(),
+            verticalArrangement = Arrangement.SpaceEvenly
+        ) {
+            HorizontalDivider(
+                modifier = Modifier.size(height = 1.dp, width = 71.dp),
+                color = TerningMain
+            )
+            HorizontalDivider(
+                modifier = Modifier.size(height = 1.dp, width = 71.dp),
+                color = TerningMain
+            )
+        }
+        LazyColumn(
+            modifier = modifier,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            state = listState,
+        ) {
+            items(items.size) {
+                val index = it % items.size
+                val firstVisibleItemIndex by remember {
+                    derivedStateOf { listState.firstVisibleItemIndex }
+                }
+                if (it == firstVisibleItemIndex + 1) {
+                    currentValue.value = items[index]
+                }
+                Spacer(modifier = Modifier.height(6.dp))
+                Text(
+                    text =
+                    when (isYear) {
+                        true -> if (items[index].isNotEmpty()) "${items[index]}년" else ""
+                        false -> if (items[index].isNotEmpty()) "${items[index]}월" else ""
+                    },
+                    style = TerningTheme.typography.title3,
+                    color = if (it == firstVisibleItemIndex + 1) Grey500 else Grey300,
+                    textAlign = TextAlign.Center
+                )
+                Spacer(modifier = Modifier.height(6.dp))
+            }
+        }
+    }
+}

core/src/main/java/com/terning/core/designsystem/component/image/TerningImage.kt

@@ -0,0 +1,32 @@
+package com.terning.core.designsystem.component.image
+
+import androidx.compose.foundation.Image
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import com.terning.core.R
+import com.terning.core.designsystem.theme.TerningPointTheme
+
+@Composable
+fun TerningImage(
+    painter: Int,
+    modifier: Modifier = Modifier
+) {
+    Image(
+        painter = painterResource(id = painter),
+        contentDescription = stringResource(id = R.string.image_content_descriptin),
+        modifier = modifier
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+fun TerningBasicImagePreview() {
+    TerningPointTheme {
+        TerningImage(
+            painter = R.drawable.ic_back
+        )
+    }
+}

core/src/main/java/com/terning/core/designsystem/component/topappbar/BackButtonTopAppBar.kt

@@ -5,8 +5,8 @@ import androidx.compose.ui.Modifier
 
 @Composable
 fun BackButtonTopAppBar(
-    title: String,
-    modifier: Modifier,
+    modifier: Modifier = Modifier,
+    title: String = "",
     onBackButtonClick: (() -> Unit),
     actions: List<@Composable () -> Unit> = emptyList(),
 ) {

core/src/main/java/com/terning/core/designsystem/component/topappbar/TerningBasicTopAppBar.kt

@@ -30,15 +30,12 @@ fun TerningBasicTopAppBar(
 ) {
     CenterAlignedTopAppBar(
         title = {
-
             Text(
                 text = title,
                 textAlign = TextAlign.Center,
                 style = TerningTheme.typography.title2
             )
-
         },
-        modifier = modifier,
         navigationIcon = {
             if (showBackButton) {
                 IconButton(

core/src/main/java/com/terning/core/designsystem/theme/Type.kt

@@ -39,6 +39,7 @@ class TerningTypography internal constructor(
     button1: TextStyle,
     button2: TextStyle,
     button3: TextStyle,
+    button3_a: TextStyle,
     button4: TextStyle,
     button5: TextStyle,
     button6: TextStyle,
@@ -88,6 +89,8 @@ class TerningTypography internal constructor(
         private set
     var button3: TextStyle by mutableStateOf(button3)
         private set
+    var button3_a: TextStyle by mutableStateOf(button3_a)
+        private set
     var button4: TextStyle by mutableStateOf(button4)
         private set
     var button5: TextStyle by mutableStateOf(button5)
@@ -129,6 +132,7 @@ class TerningTypography internal constructor(
         button1: TextStyle = this.button1,
         button2: TextStyle = this.button2,
         button3: TextStyle = this.button3,
+        button3_a: TextStyle = this.button3_a,
         button4: TextStyle = this.button4,
         button5: TextStyle = this.button5,
         button6: TextStyle = this.button6,
@@ -159,6 +163,7 @@ class TerningTypography internal constructor(
         button1,
         button2,
         button3,
+        button3_a,
         button4,
         button5,
         button6,
@@ -191,6 +196,7 @@ class TerningTypography internal constructor(
         button1 = other.button1
         button2 = other.button2
         button3 = other.button3
+        button3_a = other.button3_a
         button4 = other.button4
         button5 = other.button5
         button6 = other.button6
@@ -340,6 +346,13 @@ fun TerningTypography(): TerningTypography {
             letterSpacing = (0.002).em,
             lineHeight = (15.6).sp,
         ),
+        button3_a = TextStyle(
+            fontFamily = PretendardMedium,
+            fontWeight = FontWeight.Medium,
+            fontSize = 13.sp,
+            letterSpacing = (0.002).em,
+            lineHeight = (19.6).sp,
+        ),
         button4 = TextStyle(
             fontFamily = PretendardMedium,
             fontWeight = FontWeight.Medium,

core/src/main/res/values/strings.xml

@@ -45,4 +45,8 @@
     <string name="intern_info_d_day">서류 마감</string>
     <string name="intern_info_working">근무 기간</string>
     <string name="intern_info_start_date">근무 시작</string>
+
+    <!--image-->
+    <string name="image_content_descriptin">TerningBasicImage</string>
+
 </resources>

feature/src/main/java/com/terning/feature/intern/InternRoute.kt

@@ -61,7 +61,7 @@ fun InternScreen(
                     offsetY = 2.dp
                 ),
                 onBackButtonClick = {},
-                listOf(
+                actions = listOf(
                     {},
                     {
                         IconButton(onClick = {}) {