[UI] #82 링크 수정 2차 기획 반영

core/ui/build.gradle.kts

@@ -45,6 +45,7 @@ dependencies {
     implementation(libs.androidx.ui.graphics)
     implementation(libs.androidx.ui.tooling.preview)
     implementation(libs.androidx.material3)
+    implementation(libs.coil.compose)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)

core/ui/src/main/java/pokitmons/pokit/core/ui/components/atom/input/PokitInput.kt

@@ -80,7 +80,11 @@ fun PokitInput(
                 }
 
                 if (icon?.position == PokitInputIconPosition.LEFT) {
-                    PokitInputIcon(state = state, resourceId = icon.resourceId, onClick = onClickIcon)
+                    PokitInputIcon(
+                        state = state,
+                        resourceId = icon.resourceId,
+                        onClick = onClickIcon
+                    )
                     Box(modifier = Modifier.width(8.dp))
                 }
 
@@ -93,7 +97,11 @@ fun PokitInput(
                 }
 
                 if (icon?.position == PokitInputIconPosition.RIGHT) {
-                    PokitInputIcon(state = state, resourceId = icon.resourceId, onClick = onClickIcon)
+                    PokitInputIcon(
+                        state = state,
+                        resourceId = icon.resourceId,
+                        onClick = onClickIcon
+                    )
                 }
             }
         }

core/ui/src/main/java/pokitmons/pokit/core/ui/components/atom/input/subcomponents/icon/PokitInputIcon.kt

@@ -38,9 +38,7 @@ internal fun PokitInputIcon(
 }
 
 @Composable
-private fun getColor(
-    state: PokitInputState,
-): Color {
+private fun getColor(state: PokitInputState): Color {
     return when (state) {
         PokitInputState.DEFAULT -> PokitTheme.colors.iconSecondary
 

core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/labeledinput/LabeledInput.kt

@@ -22,6 +22,8 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import pokitmons.pokit.core.ui.R
 import pokitmons.pokit.core.ui.components.atom.input.PokitInput
+import pokitmons.pokit.core.ui.components.atom.input.attributes.PokitInputIcon
+import pokitmons.pokit.core.ui.components.atom.input.attributes.PokitInputIconPosition
 import pokitmons.pokit.core.ui.components.atom.input.attributes.PokitInputState
 import pokitmons.pokit.core.ui.theme.PokitTheme
 
@@ -37,8 +39,10 @@ fun LabeledInput(
     readOnly: Boolean = false,
     enable: Boolean = true,
     isError: Boolean = false,
+    onClickRemove: () -> Unit = {},
 ) {
     var focused by remember { mutableStateOf(false) }
+
     val state = remember(focused, isError, readOnly, enable) {
         getState(
             enabled = enable,
@@ -67,7 +71,19 @@ fun LabeledInput(
             text = inputText,
             hintText = hintText,
             onChangeText = onChangeText,
-            icon = null,
+            icon = if (inputText.isNotEmpty()) {
+                PokitInputIcon(
+                    position = PokitInputIconPosition.RIGHT,
+                    resourceId = R.drawable.icon_24_xs
+                )
+            } else {
+                null
+            },
+            onClickIcon = remember {
+                {
+                    onClickRemove()
+                }
+            },
             isError = isError,
             enable = enable,
             readOnly = readOnly

core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/pokitlist/PokitListVer2.kt

@@ -0,0 +1,97 @@
+package pokitmons.pokit.core.ui.components.block.pokitlist
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import pokitmons.pokit.core.ui.components.block.pokitlist.attributes.PokitListState
+import pokitmons.pokit.core.ui.theme.PokitTheme
+
+@Composable
+fun <T> PokitListVer2(
+    item: T,
+    title: String,
+    sub: String,
+    imageUrl: String,
+    onClickItem: (T) -> Unit,
+    modifier: Modifier = Modifier,
+    state: PokitListState = PokitListState.DEFAULT,
+) {
+    val titleTextColor = getTitleTextColor(state = state)
+    val subTextColor = getSubTextColor(state = state)
+
+    Row(
+        modifier = modifier
+            .clickable(
+                enabled = state != PokitListState.DISABLE,
+                onClick = { onClickItem(item) },
+                indication = null,
+                interactionSource = remember { MutableInteractionSource() }
+            )
+            .padding(horizontal = 20.dp, vertical = 12.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        AsyncImage(
+            model = imageUrl,
+            contentDescription = null,
+            contentScale = ContentScale.Crop,
+            modifier = Modifier.size(60.dp)
+        )
+
+        Spacer(modifier = Modifier.width(12.dp))
+
+        Column(
+            modifier = Modifier.weight(1f)
+        ) {
+            Text(
+                text = title,
+                style = PokitTheme.typography.body1Bold.copy(color = titleTextColor),
+                overflow = TextOverflow.Ellipsis
+            )
+
+            Spacer(modifier = Modifier.height(4.dp))
+
+            Text(
+                text = sub,
+                style = PokitTheme.typography.detail1.copy(color = subTextColor)
+            )
+        }
+    }
+}
+
+@Composable
+private fun getTitleTextColor(
+    state: PokitListState,
+): Color {
+    return when (state) {
+        PokitListState.DEFAULT -> PokitTheme.colors.textPrimary
+        PokitListState.ACTIVE -> PokitTheme.colors.textPrimary
+        PokitListState.DISABLE -> PokitTheme.colors.textDisable
+    }
+}
+
+@Composable
+private fun getSubTextColor(
+    state: PokitListState,
+): Color {
+    return when (state) {
+        PokitListState.DEFAULT -> PokitTheme.colors.textTertiary
+        PokitListState.ACTIVE -> PokitTheme.colors.textTertiary
+        PokitListState.DISABLE -> PokitTheme.colors.textDisable
+    }
+}

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

@@ -0,0 +1,10 @@
+<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.564,6.563C6.915,6.212 7.485,6.212 7.836,6.563L12,10.727L16.164,6.563C16.515,6.212 17.085,6.212 17.436,6.563C17.788,6.915 17.788,7.485 17.436,7.836L13.273,12L17.436,16.163C17.788,16.515 17.788,17.085 17.436,17.436C17.085,17.788 16.515,17.788 16.164,17.436L12,13.273L7.836,17.436C7.485,17.788 6.915,17.788 6.564,17.436C6.212,17.085 6.212,16.515 6.564,16.163L10.727,12L6.564,7.836C6.212,7.485 6.212,6.915 6.564,6.563Z"
+      android:fillColor="#9D9D9D"
+      android:fillType="evenOdd"/>
+</vector>

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

@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:viewportWidth="40"
+    android:viewportHeight="40">
+  <path
+      android:pathData="M0.5,20C0.5,9.23 9.23,0.5 20,0.5C30.77,0.5 39.5,9.23 39.5,20C39.5,30.77 30.77,39.5 20,39.5C9.23,39.5 0.5,30.77 0.5,20Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:strokeWidth="1"
+      android:pathData="M0.5,20C0.5,9.23 9.23,0.5 20,0.5C30.77,0.5 39.5,9.23 39.5,20C39.5,30.77 30.77,39.5 20,39.5C9.23,39.5 0.5,30.77 0.5,20Z"
+      android:fillColor="#00000000"
+      android:strokeColor="#D9D9D9"/>
+  <path
+      android:pathData="M20,12.5C20.46,12.5 20.833,12.873 20.833,13.333V19.167H26.667C27.127,19.167 27.5,19.54 27.5,20C27.5,20.46 27.127,20.833 26.667,20.833H20.833V26.667C20.833,27.127 20.46,27.5 20,27.5C19.54,27.5 19.167,27.127 19.167,26.667V20.833H13.333C12.873,20.833 12.5,20.46 12.5,20C12.5,19.54 12.873,19.167 13.333,19.167H19.167V13.333C19.167,12.873 19.54,12.5 20,12.5Z"
+      android:fillColor="#D9D9D9"
+      android:fillType="evenOdd"/>
+</vector>