[NDGL-122] fix: 여행 도구 환율 계산기 아이콘 변경 및 편집 활성, 비활성 영역 구분

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>

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 = {},
+        )
+    }
+}