[Feat/#305] 영어버전 국제화를 마무리합니다.

app/src/main/java/com/sopt/clody/presentation/ui/auth/signup/SignUpViewModel.kt

@@ -175,7 +175,7 @@ class SignUpViewModel @AssistedInject constructor(
     private fun validateNickname(nickname: String): Boolean {
         val state = withState(this@SignUpViewModel) { it }
         setState { copy(nicknameMaxLength = languageProvider.getNicknameMaxLength()) }
-        val regex = "^[a-zA-Z가-힣0-9ㄱ-ㅎㅏ-ㅣ가-힣]{2,${state.nicknameMaxLength}$".toRegex()
+        val regex = "^[a-zA-Z가-힣0-9ㄱ-ㅎㅏ-ㅣ가-힣]{2,${state.nicknameMaxLength}}$".toRegex()
         return nickname.matches(regex)
     }
 

app/src/main/java/com/sopt/clody/presentation/ui/component/dialog/ClodyDialog.kt

@@ -77,6 +77,7 @@ fun ClodyDialog(
 
                     Text(
                         text = titleMassage,
+                        textAlign = TextAlign.Center,
                         style = ClodyTheme.typography.body1SemiBold,
                     )
 

app/src/main/java/com/sopt/clody/presentation/ui/component/timepicker/YearMonthPicker.kt

@@ -2,6 +2,8 @@ package com.sopt.clody.presentation.ui.component.timepicker
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectVerticalDragGestures
+import androidx.compose.foundation.gestures.snapping.rememberSnapFlingBehavior
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -14,23 +16,39 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import com.sopt.clody.R
 import com.sopt.clody.presentation.ui.component.button.ClodyButton
 import com.sopt.clody.presentation.utils.extension.YearMonthLabelUtil
 import com.sopt.clody.presentation.utils.extension.toLocalizedMonthLabel
 import com.sopt.clody.presentation.utils.extension.toLocalizedYearLabel
 import com.sopt.clody.ui.theme.ClodyTheme
+import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.flow.map
+import java.util.Locale
 
 @Composable
 fun YearMonthPicker(
@@ -42,6 +60,9 @@ fun YearMonthPicker(
     val yearItems = remember { (YearMonthLabelUtil.MIN_YEAR..YearMonthLabelUtil.MAX_YEAR).toList() }
     val monthItems = remember { (1..12).toList() }
 
+    val yearLabelItems = yearItems.map { it.toLocalizedYearLabel() }
+    val monthLabelItems = monthItems.map { it.toLocalizedMonthLabel() }
+
     val yearPickerState = rememberPickerState()
     val monthPickerState = rememberPickerState()
 
@@ -88,9 +109,6 @@ fun YearMonthPicker(
                 }
             }
 
-            val yearLabelItems = yearItems.map { it.toLocalizedYearLabel() }
-            val monthLabelItems = monthItems.map { it.toLocalizedMonthLabel() }
-
             Box(modifier = Modifier.fillMaxWidth()) {
                 Box(
                     modifier = Modifier
@@ -103,29 +121,52 @@ fun YearMonthPicker(
                     modifier = Modifier.fillMaxWidth(),
                     verticalAlignment = Alignment.CenterVertically,
                 ) {
-                    Spacer(modifier = Modifier.weight(1f))
-                    YearMonthPickerItem(
-                        state = yearPickerState,
-                        items = yearLabelItems,
-                        startIndex = startYearIndex,
-                        visibleItemsCount = 5,
-                        infiniteScroll = false,
-                        modifier = Modifier.weight(1f),
-                        textModifier = Modifier.padding(8.dp),
-                    )
-                    Spacer(modifier = Modifier.width(20.dp))
-                    YearMonthPickerItem(
-                        state = monthPickerState,
-                        items = monthLabelItems,
-                        startIndex = startMonthIndex,
-                        visibleItemsCount = 5,
-                        infiniteScroll = false,
-                        modifier = Modifier.weight(1f),
-                        textModifier = Modifier.padding(8.dp),
-                    )
-                    Spacer(modifier = Modifier.weight(1f))
+                    if (LocalConfiguration.current.locales[0] == Locale.KOREA) {
+                        Spacer(modifier = Modifier.width(20.dp))
+                        YearMonthPickerItem(
+                            state = yearPickerState,
+                            items = yearLabelItems,
+                            startIndex = startYearIndex,
+                            visibleItemsCount = 5,
+                            infiniteScroll = false,
+                            modifier = Modifier.weight(1f),
+                            textModifier = Modifier.padding(8.dp),
+                        )
+                        YearMonthPickerItem(
+                            state = monthPickerState,
+                            items = monthLabelItems,
+                            startIndex = startMonthIndex,
+                            visibleItemsCount = 5,
+                            infiniteScroll = false,
+                            modifier = Modifier.weight(1f),
+                            textModifier = Modifier.padding(8.dp),
+                        )
+                        Spacer(modifier = Modifier.width(20.dp))
+                    } else {
+                        Spacer(modifier = Modifier.width(20.dp))
+                        YearMonthPickerItem(
+                            state = monthPickerState,
+                            items = monthLabelItems,
+                            startIndex = startMonthIndex,
+                            visibleItemsCount = 5,
+                            infiniteScroll = false,
+                            modifier = Modifier.weight(1f),
+                            textModifier = Modifier.padding(8.dp),
+                        )
+                        YearMonthPickerItem(
+                            state = yearPickerState,
+                            items = yearLabelItems,
+                            startIndex = startYearIndex,
+                            visibleItemsCount = 5,
+                            infiniteScroll = false,
+                            modifier = Modifier.weight(1f),
+                            textModifier = Modifier.padding(8.dp),
+                        )
+                        Spacer(modifier = Modifier.width(20.dp))
+                    }
                 }
             }
+
             ClodyButton(
                 onClick = {
                     val year = yearItems[yearLabelItems.indexOf(yearPickerState.selectedItem)]
@@ -142,3 +183,87 @@ fun YearMonthPicker(
         }
     }
 }
+
+@Composable
+fun YearMonthPickerItem(
+    modifier: Modifier = Modifier,
+    items: List<String>,
+    state: PickerState = rememberPickerState(),
+    startIndex: Int = 0,
+    visibleItemsCount: Int,
+    textModifier: Modifier = Modifier,
+    infiniteScroll: Boolean = true,
+) {
+    val visibleItemsMiddle = visibleItemsCount / 2
+    val emptyItems = List(visibleItemsMiddle) { "" }
+    val paddedItems = emptyItems + items + emptyItems
+    val listScrollCount = if (infiniteScroll) Integer.MAX_VALUE else paddedItems.size
+    val listScrollMiddle = listScrollCount / 2
+    val listStartIndex = if (infiniteScroll) {
+        listScrollMiddle - listScrollMiddle % paddedItems.size - visibleItemsMiddle + startIndex
+    } else {
+        startIndex + visibleItemsMiddle
+    }
+
+    fun getItem(index: Int) = paddedItems.getOrNull(index).orEmpty()
+
+    val listState = rememberLazyListState(initialFirstVisibleItemIndex = listStartIndex)
+    val flingBehavior = rememberSnapFlingBehavior(lazyListState = listState)
+
+    val itemHeightPixels = remember { mutableIntStateOf(0) }
+    val itemHeightDp = with(LocalDensity.current) { itemHeightPixels.intValue.toDp() }
+
+    val fadingEdgeGradient = remember {
+        Brush.verticalGradient(
+            0f to Color.White.copy(alpha = 0.9f),
+            0.1f to Color.White.copy(alpha = 0.8f),
+            0.2f to Color.White.copy(alpha = 0.7f),
+            0.3f to Color.White.copy(alpha = 0.6f),
+            0.4f to Color.Transparent,
+            0.5f to Color.Transparent,
+            0.6f to Color.Transparent,
+            0.7f to Color.White.copy(alpha = 0.7f),
+            0.8f to Color.White.copy(alpha = 0.8f),
+            0.9f to Color.White.copy(alpha = 0.9f),
+        )
+    }
+
+    LaunchedEffect(listState) {
+        snapshotFlow { listState.firstVisibleItemIndex }
+            .map { index -> getItem(index + visibleItemsMiddle) }
+            .distinctUntilChanged()
+            .collect { item -> state.selectedItem = item }
+    }
+
+    Box(modifier = modifier) {
+        LazyColumn(
+            state = listState,
+            flingBehavior = flingBehavior,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(itemHeightDp * visibleItemsCount)
+                .pointerInput(Unit) {
+                    detectVerticalDragGestures { change, dragAmount ->
+                        change.consume()
+                    }
+                }
+                .drawWithContent {
+                    drawContent()
+                    drawRect(fadingEdgeGradient, size = size)
+                },
+        ) {
+            items(listScrollCount) { index ->
+                Text(
+                    text = getItem(index),
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    style = ClodyTheme.typography.head3Medium.copy(color = ClodyTheme.colors.gray01),
+                    modifier = Modifier
+                        .onSizeChanged { size -> itemHeightPixels.intValue = size.height }
+                        .then(textModifier),
+                )
+            }
+        }
+    }
+}

app/src/main/java/com/sopt/clody/presentation/ui/diarylist/component/DiaryListTopAppBar.kt

@@ -29,8 +29,8 @@ import com.sopt.clody.ui.theme.ClodyTheme
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun DiaryListTopAppBar(
-    selectedYear: Int,
-    selectedMonth: Int,
+    selectedYear: String,
+    selectedMonth: String,
     showYearMonthPicker: () -> Unit,
     onClickCalendar: () -> Unit,
 ) {