Merge pull request #39 from YAPP-Github/feature/NDGL-122/fix-ui-issue

[NDGL-122] 여행 도구 탭 UI 이슈 수정 및 홈 화면 닉네임 연결

Author: jihee-dev

core/ui/src/main/res/drawable/ic_24_change.xml

@@ -0,0 +1,9 @@
+<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.53,16.47C6.388,16.337 6.2,16.265 6.005,16.269C5.811,16.272 5.626,16.351 5.488,16.488C5.351,16.626 5.272,16.811 5.269,17.005C5.265,17.2 5.337,17.388 5.47,17.53L7.47,19.53C7.61,19.67 7.801,19.749 8,19.749C8.199,19.749 8.389,19.67 8.53,19.53L10.53,17.53C10.604,17.461 10.663,17.378 10.704,17.287C10.745,17.194 10.767,17.095 10.768,16.994C10.77,16.894 10.752,16.794 10.714,16.7C10.676,16.607 10.62,16.522 10.549,16.451C10.478,16.38 10.393,16.323 10.299,16.286C10.206,16.248 10.106,16.23 10.005,16.231C9.905,16.233 9.805,16.255 9.713,16.296C9.621,16.337 9.539,16.396 9.47,16.47L8.75,17.19V7C8.75,6.801 8.671,6.61 8.53,6.47C8.39,6.329 8.199,6.25 8,6.25C7.801,6.25 7.61,6.329 7.47,6.47C7.329,6.61 7.25,6.801 7.25,7V17.19L6.53,16.47ZM13.47,7.53C13.611,7.67 13.801,7.749 14,7.749C14.199,7.749 14.389,7.67 14.53,7.53L15.25,6.81V17C15.25,17.199 15.329,17.39 15.469,17.53C15.61,17.671 15.801,17.75 16,17.75C16.199,17.75 16.389,17.671 16.53,17.53C16.671,17.39 16.75,17.199 16.75,17V6.81L17.47,7.53C17.538,7.604 17.621,7.663 17.713,7.704C17.805,7.745 17.905,7.767 18.005,7.769C18.106,7.77 18.206,7.752 18.299,7.714C18.393,7.676 18.478,7.62 18.549,7.549C18.62,7.478 18.676,7.393 18.714,7.3C18.752,7.206 18.77,7.106 18.768,7.005C18.767,6.905 18.745,6.805 18.704,6.713C18.663,6.621 18.604,6.539 18.53,6.47L16.53,4.47C16.389,4.329 16.199,4.251 16,4.251C15.801,4.251 15.611,4.329 15.47,4.47L13.47,6.47C13.329,6.611 13.25,6.801 13.25,7C13.25,7.199 13.329,7.389 13.47,7.53Z"
+      android:fillColor="#000000"/>
+</vector>

data/auth/src/main/java/com/yapp/ndgl/data/auth/local/LocalAuthDataSource.kt

@@ -45,15 +45,28 @@ class LocalAuthDataSource @Inject constructor(
         }
     }
 
+    suspend fun getNickname(): String = dataStore.data
+        .handleException()
+        .map { preferences -> preferences[NICKNAME_KEY] ?: "" }
+        .first()
+
+    suspend fun setNickname(nickname: String) {
+        dataStore.edit { preferences ->
+            preferences[NICKNAME_KEY] = nickname
+        }
+    }
+
     suspend fun clearSession() {
         dataStore.edit { preferences ->
             preferences.remove(ACCESS_TOKEN_KEY)
             preferences.remove(UUID_KEY)
+            preferences.remove(NICKNAME_KEY)
         }
     }
 
     private companion object {
         private val ACCESS_TOKEN_KEY = stringPreferencesKey("access_token")
         private val UUID_KEY = stringPreferencesKey("uuid")
+        private val NICKNAME_KEY = stringPreferencesKey("nickname")
     }
 }

data/auth/src/main/java/com/yapp/ndgl/data/auth/repository/AuthRepository.kt

@@ -39,6 +39,7 @@ class AuthRepository @Inject constructor(
 
         localAuthDataSource.setAccessToken(response.accessToken)
         localAuthDataSource.setUuid(response.uuid)
+        localAuthDataSource.setNickname(response.nickname)
         return isFirstUser
     }
 
@@ -66,5 +67,7 @@ class AuthRepository @Inject constructor(
         }
     }
 
+    suspend fun getNickname(): String = localAuthDataSource.getNickname()
+
     suspend fun getIdentifierCode(): String = localAuthDataSource.getUuid()
 }

feature/home/src/main/java/com/yapp/ndgl/feature/home/main/HomeViewModel.kt

@@ -3,6 +3,7 @@ package com.yapp.ndgl.feature.home.main
 import androidx.lifecycle.viewModelScope
 import com.yapp.ndgl.core.base.BaseViewModel
 import com.yapp.ndgl.core.util.suspendRunCatching
+import com.yapp.ndgl.data.auth.repository.AuthRepository
 import com.yapp.ndgl.data.travel.model.TravelProgram
 import com.yapp.ndgl.data.travel.model.TravelTemplateSummary
 import com.yapp.ndgl.data.travel.repository.TravelProgramRepository
@@ -21,17 +22,26 @@ import javax.inject.Inject
 
 @HiltViewModel
 class HomeViewModel @Inject constructor(
+    private val authRepository: AuthRepository,
     private val travelProgramRepository: TravelProgramRepository,
     private val travelTemplateRepository: TravelTemplateRepository,
     private val userTravelRepository: UserTravelRepository,
 ) : BaseViewModel<HomeState, HomeIntent, HomeSideEffect>(
     initialState = HomeState(),
 ) {
     init {
+        loadUserName()
         loadHomeContents()
         subscribeToTravelCreatedEvent()
     }
 
+    private fun loadUserName() {
+        viewModelScope.launch {
+            val nickname = authRepository.getNickname()
+            reduce { copy(userName = nickname) }
+        }
+    }
+
     private fun loadHomeContents() {
         loadMyTravel()
         loadPopularTemplates()

feature/travel-helper/src/main/java/com/yapp/ndgl/feature/travelhelper/main/CurrencyCalculatorSection.kt

@@ -41,6 +41,7 @@ import androidx.compose.ui.text.input.TransformedText
 import androidx.compose.ui.text.input.VisualTransformation
 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.yapp.ndgl.core.ui.theme.NDGLTheme
 import com.yapp.ndgl.feature.travelhelper.R
@@ -113,7 +114,7 @@ internal fun CurrencyCalculatorSection(
                         contentAlignment = Alignment.Center,
                     ) {
                         Icon(
-                            imageVector = ImageVector.vectorResource(R.drawable.ic_24_updown),
+                            imageVector = ImageVector.vectorResource(CoreR.drawable.ic_24_change),
                             contentDescription = null,
                             modifier = Modifier.size(24.dp),
                             tint = NDGLTheme.colors.black900,
@@ -173,7 +174,7 @@ private fun CurrencyCard(
     ) {
         ForeignCurrencyLeft(
             modifier = Modifier.wrapContentWidth(),
-            showCurrencySelector = isEditable,
+            isEditable = isEditable,
             flagEmoji = flagEmoji,
             currencyName = currencyName,
             currencyCode = currencyCode,
@@ -194,7 +195,7 @@ private fun CurrencyCard(
 @Composable
 private fun ForeignCurrencyLeft(
     modifier: Modifier,
-    showCurrencySelector: Boolean,
+    isEditable: Boolean,
     flagEmoji: String,
     currencyName: String,
     currencyCode: String,
@@ -211,7 +212,7 @@ private fun ForeignCurrencyLeft(
                 shape = RoundedCornerShape(topStart = 4.dp, bottomStart = 4.dp),
             )
             .then(
-                if (showCurrencySelector) {
+                if (isEditable) {
                     Modifier.clickable(
                         interactionSource = null,
                         indication = ripple(),
@@ -241,20 +242,20 @@ private fun ForeignCurrencyLeft(
                 Text(
                     text = currencyName,
                     modifier = Modifier.fillMaxWidth(),
-                    color = NDGLTheme.colors.black800,
+                    color = if (isEditable) NDGLTheme.colors.black800 else NDGLTheme.colors.black500,
                     overflow = TextOverflow.Ellipsis,
                     maxLines = 1,
                     style = NDGLTheme.typography.bodyLgSemiBold,
                 )
                 Text(
                     text = currencyCode,
                     modifier = Modifier.fillMaxWidth(),
-                    color = NDGLTheme.colors.black400,
+                    color = if (isEditable) NDGLTheme.colors.black400 else NDGLTheme.colors.black300,
                     style = NDGLTheme.typography.bodyMdMedium,
                 )
             }
         }
-        if (showCurrencySelector) {
+        if (isEditable) {
             Icon(
                 imageVector = ImageVector.vectorResource(CoreR.drawable.ic_24_chevron_down),
                 contentDescription = null,
@@ -265,7 +266,7 @@ private fun ForeignCurrencyLeft(
             Box(modifier = Modifier.size(24.dp))
         }
     }
-    if (showCurrencySelector) {
+    if (isEditable) {
         DropdownMenu(
             expanded = expanded,
             onDismissRequest = { expanded = false },
@@ -352,10 +353,17 @@ private fun ForeignCurrencyRight(
             onValueChange = onInputChange,
             modifier = Modifier.fillMaxWidth(),
             readOnly = isEditable.not(),
-            textStyle = NDGLTheme.typography.bodyLgSemiBold.copy(
-                color = NDGLTheme.colors.black800,
-                textAlign = TextAlign.End,
-            ),
+            textStyle = if (isEditable) {
+                NDGLTheme.typography.bodyLgSemiBold.copy(
+                    color = NDGLTheme.colors.green500,
+                    textAlign = TextAlign.End,
+                )
+            } else {
+                NDGLTheme.typography.bodyLgMedium.copy(
+                    color = NDGLTheme.colors.black500,
+                    textAlign = TextAlign.End,
+                )
+            },
             keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Decimal),
             singleLine = true,
             cursorBrush = SolidColor(NDGLTheme.colors.green500),
@@ -389,7 +397,7 @@ private fun ForeignCurrencyRight(
         Text(
             text = "$displayInput $currencyLabel",
             modifier = Modifier.fillMaxWidth(),
-            color = NDGLTheme.colors.black400,
+            color = if (isEditable) NDGLTheme.colors.black400 else NDGLTheme.colors.black300,
             textAlign = TextAlign.End,
             overflow = TextOverflow.Ellipsis,
             maxLines = 1,
@@ -437,3 +445,37 @@ private class ThousandSeparatorTransformation : VisualTransformation {
         return TransformedText(AnnotatedString(formatted), offsetMapping)
     }
 }
+
+@Preview(showBackground = true)
+@Composable
+private fun CurrencyCalculatorSectionPreview() {
+    NDGLTheme {
+        CurrencyCalculatorSection(
+            exchangeRateInfo = ExchangeRateInfo(
+                topCurrency = TravelHelperState.CurrencyInfo(
+                    currencyCode = "JPY",
+                    currencyLabel = "엔",
+                    countryName = "일본",
+                    flagEmoji = "\uD83C\uDDEF\uD83C\uDDF5",
+                ),
+                bottomCurrency = TravelHelperState.CurrencyInfo(
+                    currencyCode = "KRW",
+                    currencyLabel = "원",
+                    countryName = "대한민국",
+                    flagEmoji = "\uD83C\uDDF0\uD83C\uDDF7",
+                ),
+                rate = 9.5,
+                rateDate = java.time.LocalDate.of(2025, 1, 1),
+            ),
+            currencyInput = "1000",
+            convertedAmount = 9500.0,
+            availableCurrencies = persistentListOf(
+                CurrencyOption(currencyCode = "JPY", countryName = "일본"),
+                CurrencyOption(currencyCode = "KRW", countryName = "대한민국"),
+            ),
+            onInputChange = {},
+            onSwap = {},
+            onCurrencySelect = {},
+        )
+    }
+}