[UI] #79 세부 UI 수정

app/build.gradle.kts

@@ -82,6 +82,7 @@ dependencies {
     implementation(project(":feature:search"))
     implementation(project(":feature:settings"))
     implementation(project(":feature:home"))
+    implementation(project(":feature:linklist"))
 
     // hilt
     implementation(libs.hilt)

app/src/main/java/pokitmons/pokit/navigation/RootDestination.kt

@@ -33,7 +33,9 @@ object AddLink {
     val route: String = "addLink"
     val linkIdArg = "link_id"
     val linkUrl = "link_url"
-    val routeWithArgs = "$route?$linkIdArg={$linkIdArg}&$linkUrl={$linkUrl}"
+    val pokitId = "pokit_id"
+    val pokitName = "pokit_name"
+    val routeWithArgs = "$route?$linkIdArg={$linkIdArg}&$linkUrl={$linkUrl}&$pokitId={$pokitId}&$pokitName={$pokitName}"
     var arguments = listOf(
         navArgument(linkIdArg) {
             nullable = true
@@ -42,6 +44,14 @@ object AddLink {
         navArgument(linkUrl) {
             nullable = true
             type = NavType.StringType
+        },
+        navArgument(pokitId) {
+            nullable = true
+            type = NavType.StringType
+        },
+        navArgument(pokitName) {
+            nullable = true
+            type = NavType.StringType
         }
     )
 }
@@ -87,3 +97,12 @@ object EditNickname {
 object Alarm {
     val route: String = "alarm"
 }
+
+object LinkList {
+    val route: String = "linklist"
+    val linkListTypeArg = "type"
+    val routeWithArgs = "$route/{$linkListTypeArg}"
+    var arguments = listOf(
+        navArgument(linkListTypeArg) { defaultValue = "bookmark" }
+    )
+}

app/src/main/java/pokitmons/pokit/navigation/RootNavHost.kt

@@ -20,6 +20,8 @@ import pokitmons.pokit.alarm.AlarmViewModel
 import pokitmons.pokit.home.HomeScreen
 import pokitmons.pokit.home.pokit.PokitViewModel
 import pokitmons.pokit.keyword.KeywordScreen
+import pokitmons.pokit.linklist.LinkListScreenContainer
+import pokitmons.pokit.linklist.LinkListViewModel
 import pokitmons.pokit.login.LoginScreen
 import pokitmons.pokit.nickname.InputNicknameScreen
 import pokitmons.pokit.search.SearchScreenContainer
@@ -129,6 +131,9 @@ fun RootNavHost(
                 },
                 onNavigateToPokitModify = { pokitId ->
                     navHostController.navigate("${AddPokit.route}?${AddPokit.pokitIdArg}=$pokitId")
+                },
+                onNavigateToAddLink = { pokitId, pokitName ->
+                    navHostController.navigate("${AddLink.route}?${AddLink.pokitId}=$pokitId&${AddLink.pokitName}=$pokitName")
                 }
             )
         }
@@ -185,7 +190,9 @@ fun RootNavHost(
                 onNavigateAddPokit = { navHostController.navigate(AddPokit.route) },
                 onNavigateToLinkModify = { navHostController.navigate("${AddLink.route}?${AddLink.linkIdArg}=$it") },
                 onNavigateToPokitModify = { navHostController.navigate("${AddPokit.route}?${AddPokit.pokitIdArg}=$it") },
-                onNavigateToAlarm = { navHostController.navigate(Alarm.route) }
+                onNavigateToAlarm = { navHostController.navigate(Alarm.route) },
+                onNavigateToUnreadLinkList = { navHostController.navigate("${LinkList.route}/unread") },
+                onNavigateToBookmarkLinkList = { navHostController.navigate("${LinkList.route}/bookmark") }
             )
         }
 
@@ -199,5 +206,19 @@ fun RootNavHost(
                 }
             )
         }
+
+        composable(
+            route = LinkList.routeWithArgs,
+            arguments = LinkList.arguments
+        ) {
+            val viewModel: LinkListViewModel = hiltViewModel()
+            LinkListScreenContainer(
+                viewModel = viewModel,
+                onBackPressed = navHostController::popBackStack,
+                onNavigateToLinkModify = { linkId ->
+                    navHostController.navigate("${AddLink.route}?${AddLink.linkIdArg}=$linkId")
+                }
+            )
+        }
     }
 }

core/feature/build.gradle.kts

@@ -41,6 +41,13 @@ android {
     composeOptions {
         kotlinCompilerExtensionVersion = "1.5.1"
     }
+    packaging {
+        resources {
+            excludes += "/META-INF/{AL2.0,LGPL2.1}"
+            excludes += "META-INF/LICENSE.md"
+            excludes += "META-INF/LICENSE-notice.md"
+        }
+    }
 }
 
 dependencies {

core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/linkurlcard/LinkUrlCard.kt

@@ -2,6 +2,7 @@ package pokitmons.pokit.core.ui.components.block.linkurlcard
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
@@ -21,7 +22,9 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.unit.dp
 import pokitmons.pokit.core.ui.theme.PokitTheme
+import pokitmons.pokit.core.ui.utils.conditional
 import pokitmons.pokit.core.ui.utils.noRippleClickable
+import pokitmons.pokit.core.ui.utils.shimmerEffect
 
 @Composable
 fun LinkUrlCard(
@@ -30,6 +33,7 @@ fun LinkUrlCard(
     url: String,
     title: String,
     openWebBrowserByClick: Boolean,
+    isLoading: Boolean = false,
 ) {
     val uriHandler = LocalUriHandler.current
 
@@ -39,7 +43,7 @@ fun LinkUrlCard(
             .clip(RoundedCornerShape(12.dp))
             .height(IntrinsicSize.Min)
             .noRippleClickable {
-                if (openWebBrowserByClick) {
+                if (openWebBrowserByClick && !isLoading) {
                     uriHandler.openUri(url)
                 }
             }
@@ -49,20 +53,24 @@ fun LinkUrlCard(
                 shape = RoundedCornerShape(12.dp)
             )
     ) {
-        Image(
-            painter = thumbnailPainter,
-            contentDescription = null,
-            contentScale = ContentScale.Crop,
-            modifier = Modifier.width(124.dp).fillMaxHeight()
-        )
+        if (isLoading) {
+            Box(modifier = Modifier.width(124.dp).fillMaxHeight().shimmerEffect())
+        } else {
+            Image(
+                painter = thumbnailPainter,
+                contentDescription = null,
+                contentScale = ContentScale.Crop,
+                modifier = Modifier.width(124.dp).fillMaxHeight()
+            )
+        }
 
         Column(
             modifier = Modifier
                 .padding(start = 16.dp, end = 20.dp, top = 16.dp, bottom = 16.dp)
                 .weight(1f)
         ) {
             Text(
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier.fillMaxWidth().conditional(isLoading) { shimmerEffect() },
                 text = title,
                 maxLines = 2,
                 style = PokitTheme.typography.body3Medium.copy(color = PokitTheme.colors.textSecondary)
@@ -71,7 +79,7 @@ fun LinkUrlCard(
             Spacer(modifier = Modifier.height(8.dp))
 
             Text(
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier.fillMaxWidth().conditional(isLoading) { shimmerEffect() },
                 text = url,
                 maxLines = 2,
                 style = PokitTheme.typography.detail2.copy(color = PokitTheme.colors.textTertiary)

core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/linkurlcard/Preview.kt

@@ -36,6 +36,15 @@ private fun LinkUrlCardPreview() {
                     title = "네이버",
                     openWebBrowserByClick = false
                 )
+
+                LinkUrlCard(
+                    modifier = Modifier.padding(20.dp),
+                    thumbnailPainter = painterResource(id = R.drawable.icon_24_google),
+                    url = "",
+                    title = "",
+                    openWebBrowserByClick = false,
+                    isLoading = true
+                )
             }
         }
     }

core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/pokittoast/PokitToast.kt

@@ -19,6 +19,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import pokitmons.pokit.core.ui.R
+import pokitmons.pokit.core.ui.components.block.pokittoast.attributes.PokitToastType
 import pokitmons.pokit.core.ui.theme.PokitTheme
 
 @Composable
@@ -27,25 +28,38 @@ fun PokitToast(
     text: String,
     onClick: (() -> Unit)? = null,
     onClickClose: () -> Unit = {},
+    type: PokitToastType = PokitToastType.Normal,
 ) {
     Row(
         modifier = modifier
             .clip(RoundedCornerShape(9999.dp))
-            .background(PokitTheme.colors.backgroundTertiary)
+            .background(type.color)
             .clickable(
                 enabled = onClick != null,
                 onClick = onClick ?: {}
             )
             .padding(start = 20.dp, end = 14.dp, top = 12.dp, bottom = 12.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
-        Text(
-            text = text,
-            style = PokitTheme.typography.body3Medium.copy(color = PokitTheme.colors.inverseWh),
-            maxLines = 2,
-            overflow = TextOverflow.Ellipsis,
-            modifier = Modifier.weight(1f)
-        )
+        Row(
+            modifier = Modifier.weight(1f),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Text(
+                text = text,
+                style = PokitTheme.typography.body3Medium.copy(color = PokitTheme.colors.inverseWh),
+                maxLines = 2,
+                overflow = TextOverflow.Ellipsis
+            )
+            type.iconResourceId?.let { resourceId ->
+                Spacer(modifier = Modifier.width(8.dp))
+                Icon(
+                    painter = painterResource(id = resourceId),
+                    contentDescription = null,
+                    tint = PokitTheme.colors.inverseWh
+                )
+            }
+        }
 
         Spacer(modifier = Modifier.width(12.dp))
 

core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/pokittoast/Preview.kt

@@ -8,6 +8,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import pokitmons.pokit.core.ui.components.block.pokittoast.attributes.PokitToastType
 import pokitmons.pokit.core.ui.theme.PokitTheme
 
 @Preview(showBackground = true)
@@ -23,6 +24,24 @@ private fun Preview() {
                 text = "최대 30개의 포킷을 생성할 수 있습니다.\n포킷을 삭제한 뒤에 추가해주세요.",
                 onClick = {}
             )
+            PokitToast(
+                modifier = Modifier.padding(20.dp),
+                text = "링크 저장 완료",
+                onClick = {},
+                type = PokitToastType.Success
+            )
+            PokitToast(
+                modifier = Modifier.padding(20.dp),
+                text = "링크 저장 실패",
+                onClick = {},
+                type = PokitToastType.Error
+            )
+            PokitToast(
+                modifier = Modifier.padding(20.dp),
+                text = "저장 공간 부족",
+                onClick = {},
+                type = PokitToastType.Warning
+            )
         }
     }
 }

core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/pokittoast/attributes/PokitToastType.kt

@@ -0,0 +1,19 @@
+package pokitmons.pokit.core.ui.components.block.pokittoast.attributes
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import pokitmons.pokit.core.ui.R
+import pokitmons.pokit.core.ui.theme.PokitTheme
+
+enum class PokitToastType(
+    private val getColor: @Composable () -> Color,
+    val iconResourceId: Int? = null,
+) {
+    Normal(getColor = { PokitTheme.colors.backgroundTertiary }),
+    Success(getColor = { PokitTheme.colors.success }, iconResourceId = R.drawable.icon_24_check),
+    Error(getColor = { PokitTheme.colors.error }),
+    Warning(getColor = { PokitTheme.colors.warning }),
+    ;
+
+    val color: Color @Composable get() = getColor()
+}

core/ui/src/main/java/pokitmons/pokit/core/ui/components/block/toolbar/Toolbar.kt

@@ -0,0 +1,54 @@
+package pokitmons.pokit.core.ui.components.block.toolbar
+
+import androidx.compose.foundation.layout.Arrangement
+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.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import pokitmons.pokit.core.ui.R
+import pokitmons.pokit.core.ui.theme.PokitTheme
+
+@Composable
+fun Toolbar(
+    onClickBack: () -> Unit,
+    title: String,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier
+            .height(56.dp)
+            .padding(horizontal = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.Center
+    ) {
+        IconButton(
+            modifier = Modifier.size(48.dp),
+            onClick = onClickBack
+        ) {
+            Icon(
+                painter = painterResource(id = R.drawable.icon_24_arrow_left),
+                contentDescription = "back button"
+            )
+        }
+
+        Text(
+            modifier = Modifier.weight(1f),
+            text = title,
+            style = PokitTheme.typography.title3.copy(color = PokitTheme.colors.textPrimary),
+            textAlign = TextAlign.Center
+        )
+
+        Spacer(modifier = Modifier.width(48.dp))
+    }
+}