[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

@@ -1,5 +1,7 @@
 package pokitmons.pokit.core.ui.components.atom.input
 
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.width
@@ -16,7 +18,9 @@ import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
+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.attributes.PokitInputIcon
 import pokitmons.pokit.core.ui.components.atom.input.attributes.PokitInputIconPosition
 import pokitmons.pokit.core.ui.components.atom.input.attributes.PokitInputShape
@@ -95,6 +99,12 @@ fun PokitInput(
                 if (icon?.position == PokitInputIconPosition.RIGHT) {
                     PokitInputIcon(state = state, resourceId = icon.resourceId, onClick = onClickIcon)
                 }
+
+                Image(
+                    painter = painterResource(id = R.drawable.icon_24_xs),
+                    contentDescription = "입력된 문자 전체삭제",
+                    Modifier.clickable { }
+                )
             }
         }
     )

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>

feature/addlink/src/main/java/com/strayalpaca/addlink/AddLinkScreen.kt

@@ -1,8 +1,11 @@
 package com.strayalpaca.addlink
 
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.LocalOverscrollConfiguration
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -11,12 +14,13 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -27,6 +31,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
@@ -41,17 +46,13 @@ import org.orbitmvi.orbit.compose.collectAsState
 import org.orbitmvi.orbit.compose.collectSideEffect
 import pokitmons.pokit.core.feature.model.paging.PagingState
 import pokitmons.pokit.core.ui.components.atom.button.PokitButton
-import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitButtonIcon
-import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitButtonIconPosition
 import pokitmons.pokit.core.ui.components.atom.button.attributes.PokitButtonSize
 import pokitmons.pokit.core.ui.components.atom.inputarea.PokitInputArea
 import pokitmons.pokit.core.ui.components.block.labeledinput.LabeledInput
-import pokitmons.pokit.core.ui.components.block.pokitlist.PokitList
+import pokitmons.pokit.core.ui.components.block.pokitlist.PokitListVer2
 import pokitmons.pokit.core.ui.components.block.pokitlist.attributes.PokitListState
 import pokitmons.pokit.core.ui.components.block.pokittoast.PokitToast
 import pokitmons.pokit.core.ui.components.block.select.PokitSelect
-import pokitmons.pokit.core.ui.components.block.switchradio.PokitSwitchRadio
-import pokitmons.pokit.core.ui.components.block.switchradio.attributes.PokitSwitchRadioStyle
 import pokitmons.pokit.core.ui.components.template.bottomsheet.PokitBottomSheet
 import pokitmons.pokit.core.ui.theme.PokitTheme
 
@@ -111,15 +112,47 @@ fun AddLinkScreenContainer(
             }
         }
 
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(84.dp)
+                .clickable(
+                    indication = null,
+                    interactionSource = remember { MutableInteractionSource() },
+                    onClick = viewModel::checkPokitCount
+                ),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Image(
+                modifier = Modifier.padding(start = 30.dp),
+                painter = painterResource(id = pokitmons.pokit.core.ui.R.drawable.image_add_pokit),
+                contentDescription = "포킷 추가 버튼"
+            )
+
+            Spacer(modifier = Modifier.size(20.dp))
+
+            Text(
+                text = "포킷 추가하기",
+                style = PokitTheme.typography.body1Bold
+            )
+        }
+
+        HorizontalDivider(
+            modifier = Modifier.fillMaxWidth(),
+            thickness = 1.dp,
+            color = PokitTheme.colors.borderTertiary
+        )
+
         LazyColumn(
             state = lazyColumnListState
         ) {
             items(
                 items = pokitList
             ) { pokit ->
-                PokitList(
+                PokitListVer2(
                     item = pokit,
                     title = pokit.title,
+                    imageUrl = pokit.image,
                     sub = stringResource(id = R.string.count_format, pokit.count),
                     onClickItem = viewModel::selectPokit,
                     state = PokitListState.ACTIVE
@@ -245,21 +278,10 @@ fun AddLinkScreen(
                             onClick = onClickSelectPokit,
                             enable = enable
                         )
-
-                        Spacer(modifier = Modifier.width(8.dp))
-
-                        PokitButton(
-                            text = null,
-                            icon = PokitButtonIcon(
-                                resourceId = pokitmons.pokit.core.ui.R.drawable.icon_24_plus,
-                                position = PokitButtonIconPosition.LEFT
-                            ),
-                            size = PokitButtonSize.LARGE,
-                            onClick = onClickAddPokit,
-                            enable = enable
-                        )
                     }
 
+                    // onClickAddPokit
+
                     Spacer(modifier = Modifier.height(24.dp))
 
                     Text(
@@ -299,41 +321,6 @@ fun AddLinkScreen(
                         )
                     }
 
-                    Spacer(modifier = Modifier.height(24.dp))
-
-                    Text(
-                        text = stringResource(id = R.string.title_remind),
-                        style = PokitTheme.typography.body2Medium.copy(color = PokitTheme.colors.textSecondary)
-                    )
-
-                    Spacer(modifier = Modifier.height(12.dp))
-
-                    PokitSwitchRadio(
-                        modifier = Modifier.fillMaxWidth(),
-                        itemList = listOf(
-                            Pair(stringResource(id = R.string.reject_remind), false),
-                            Pair(stringResource(id = R.string.accept_remind), true)
-                        ),
-                        style = PokitSwitchRadioStyle.STROKE,
-                        selectedItem = if (state.useRemind) {
-                            Pair(stringResource(id = R.string.accept_remind), true)
-                        } else {
-                            Pair(stringResource(id = R.string.reject_remind), false)
-                        },
-                        onClickItem = {
-                            toggleRemindRadio(it.second)
-                        },
-                        getTitleFromItem = { it.first },
-                        enabled = false
-                    )
-
-                    Spacer(modifier = Modifier.height(8.dp))
-
-                    Text(
-                        text = stringResource(id = R.string.see_you_soon),
-                        style = PokitTheme.typography.detail1.copy(color = PokitTheme.colors.textTertiary)
-                    )
-
                     Spacer(modifier = Modifier.height(32.dp))
                 }
             }

feature/addlink/src/main/java/com/strayalpaca/addlink/model/Pokit.kt

@@ -6,13 +6,15 @@ data class Pokit(
     val title: String,
     val id: String,
     val count: Int,
+    val image: String = "",
 ) {
     companion object {
         fun fromDomainPokit(pokit: DomainPokit): Pokit {
             return Pokit(
                 title = pokit.name,
                 id = pokit.categoryId.toString(),
-                count = pokit.linkCount
+                count = pokit.linkCount,
+                image = pokit.image.url
             )
         }
     }