Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

웹뷰 요약하기 화면 개발 #235

Merged
merged 8 commits into from
Oct 2, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ import com.dorabangs.feature.navigation.navigateToSaveLinkSelectFolder
import com.dorabangs.feature.navigation.saveLinkNavigation
import com.dorabangs.feature.navigation.saveLinkSelectFolder
import com.mashup.core.navigation.NavigationRoute
import com.mashup.dorabangs.core.model.AISummaryUiModel
import com.mashup.dorabangs.core.summary.aiSummaryNavigation
import com.mashup.dorabangs.core.summary.navigateToAISummary
import com.mashup.dorabangs.core.webview.navigateToWebView
import com.mashup.dorabangs.core.webview.webViewNavigation
import com.mashup.dorabangs.feature.folders.model.FolderManageType
Expand Down Expand Up @@ -63,7 +66,14 @@ fun MainNavHost(
},
navigateToCreateFolder = { appState.navController.navigateToHomeCrateFolder() },
navigateToHomeTutorial = { appState.navController.navigateToHomeTutorial() },
navigateToWebView = { url -> appState.navController.navigateToWebView(url = url) },
navigateToWebView = { cardInfo ->
val summaryUiModel = AISummaryUiModel(
description = cardInfo.content,
url = cardInfo.url,
keywords = cardInfo.keywordList,
)
appState.navController.navigateToWebView(summaryUiModel = summaryUiModel)
},
navigateToUnreadStorageDetail = { folder -> appState.navController.navigateToUnreadStorageDetail(folder) },
)
homeCreateFolderNavigation(
Expand Down Expand Up @@ -163,10 +173,24 @@ fun MainNavHost(
)
appState.navController.popBackStackWithClearFocus()
},
navigateToWebView = { url -> appState.navController.navigateToWebView(url = url) },
navigateToWebView = { cardInfo ->
val summaryUiModel = AISummaryUiModel(
description = cardInfo.content,
url = cardInfo.url,
keywords = cardInfo.keywordList,
)
appState.navController.navigateToWebView(summaryUiModel = summaryUiModel)
},
)
classificationNavigation(
navigateToWebView = { url -> appState.navController.navigateToWebView(url = url) },
navigateToWebView = { cardInfo ->
val summaryUiModel = AISummaryUiModel(
description = cardInfo.content,
url = cardInfo.url,
keywords = cardInfo.keywordList,
)
appState.navController.navigateToWebView(summaryUiModel = summaryUiModel)
},
onClickBackIcon = { appState.navController.popBackStackWithClearFocus() },
navigateToHome = { appState.navController.popBackStackWithClearFocus() },
)
Expand All @@ -193,6 +217,11 @@ fun MainNavHost(
)
webViewNavigation(
navigateToPopBackStack = { appState.navController.popBackStackWithClearFocus() },
navigateToAISummary = { summary -> appState.navController.navigateToAISummary(summaryUiModel = summary) },
)

aiSummaryNavigation(
navigateToPopBackStack = { appState.navController.popBackStackWithClearFocus() },
)
}
}
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
package com.mashup.dorabangs.core.designsystem.component.topbar

import androidx.annotation.DrawableRes
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
Expand All @@ -27,10 +27,9 @@ fun DoraTopAppBar(
title: String,
isTitleCenter: Boolean = false,
isEnableBackNavigation: Boolean = false,
@DrawableRes actionIcon: Int? = null,
actionIcon: @Composable BoxScope.() -> Unit = {},
isShowBottomDivider: Boolean = false,
onClickBackIcon: () -> Unit = {},
onClickActonIcon: () -> Unit = {},
) {
val isHomeAppBar = isTitleCenter && !isEnableBackNavigation
Box(
Expand Down Expand Up @@ -81,16 +80,8 @@ fun DoraTopAppBar(
)
}
}
actionIcon?.let { icon ->
Icon(
modifier = Modifier
.align(Alignment.CenterEnd)
.padding(end = 20.dp)
.clickable { onClickActonIcon() },
painter = painterResource(id = icon),
contentDescription = "action",
)
}
actionIcon()

if (isShowBottomDivider) {
DoraDivider(modifier = Modifier.align(Alignment.BottomCenter))
}
Expand Down Expand Up @@ -124,9 +115,16 @@ fun PreviewBackWithActionIconTopBar() {
DoraTopBar.BackWithActionIconTopBar(
modifier = Modifier.fillMaxWidth(),
title = "Dorabangs",
actionIcon = R.drawable.ic_plus,
actionIcon = {
Icon(
modifier = Modifier
.align(Alignment.CenterEnd)
.padding(end = 20.dp),
painter = painterResource(id = R.drawable.ic_more_gray),
contentDescription = "action",
)
},
onClickBackIcon = {},
onClickActonIcon = {},
isTitleCenter = true,
isShowBottomDivider = true,
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ package com.mashup.dorabangs.core.designsystem.component.topbar
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
Expand Down Expand Up @@ -55,11 +56,10 @@ object DoraTopBar : TopAppBarType {
override fun BackWithActionIconTopBar(
modifier: Modifier,
title: String,
actionIcon: Int,
actionIcon: @Composable BoxScope.() -> Unit,
isTitleCenter: Boolean,
isShowBottomDivider: Boolean,
onClickBackIcon: () -> Unit,
onClickActonIcon: () -> Unit,
) {
DoraTopAppBar(
modifier = modifier.background(DoraColorTokens.White),
Expand All @@ -69,7 +69,6 @@ object DoraTopBar : TopAppBarType {
actionIcon = actionIcon,
isShowBottomDivider = isShowBottomDivider,
onClickBackIcon = onClickBackIcon,
onClickActonIcon = onClickActonIcon,
)
}

Expand Down Expand Up @@ -110,11 +109,10 @@ sealed interface TopAppBarType {
fun BackWithActionIconTopBar(
modifier: Modifier,
title: String,
actionIcon: Int,
actionIcon: @Composable BoxScope.() -> Unit,
isTitleCenter: Boolean,
isShowBottomDivider: Boolean,
onClickBackIcon: () -> Unit,
onClickActonIcon: () -> Unit,
)

@Composable
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,5 @@ sealed class NavigationRoute(val route: String) {
}

object WebViewScreen : NavigationRoute("webView")
object AISummaryScreen : NavigationRoute("summary")
}
2 changes: 2 additions & 0 deletions core/webview/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ plugins {
alias(libs.plugins.org.jetbrains.kotlin.android)
alias(libs.plugins.hilt)
alias(libs.plugins.ksp)
alias(libs.plugins.kotlinx.serialization)
}

android {
Expand Down Expand Up @@ -67,4 +68,5 @@ dependencies {
ksp(libs.hilt.compiler)
implementation(libs.hilt.navigation.compose)
implementation(libs.compose.webview)
implementation(libs.serialization)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
package com.mashup.dorabangs.core.model

import java.io.Serializable

@kotlinx.serialization.Serializable
data class AISummaryUiModel(
val description: String? = "",
val keywords: List<String?>? = listOf(),
val url: String? = "",
) : Serializable
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
package com.mashup.dorabangs.core.summary

import android.net.Uri
import androidx.compose.animation.AnimatedContentTransitionScope
import androidx.compose.animation.core.tween
import androidx.navigation.NavController
import androidx.navigation.NavGraphBuilder
import androidx.navigation.NavOptions
import androidx.navigation.compose.composable
import androidx.navigation.navArgument
import com.mashup.core.navigation.NavigationRoute
import com.mashup.core.navigation.bundleSerializable
import com.mashup.core.navigation.serializableNavType
import com.mashup.dorabangs.core.model.AISummaryUiModel
import kotlinx.serialization.encodeToString
import kotlinx.serialization.json.Json

fun NavController.navigateToAISummary(navOptions: NavOptions? = null, summaryUiModel: AISummaryUiModel) {
val summary = Uri.encode(Json.encodeToString(summaryUiModel))
navigate("${NavigationRoute.AISummaryScreen.route}/summary=$summary", navOptions)
}

fun NavGraphBuilder.aiSummaryNavigation(
navigateToPopBackStack: () -> Unit,
) {
composable(
route = "${NavigationRoute.AISummaryScreen.route}/summary={summary}",
arguments = listOf(
navArgument(name = "summary") {
type = serializableNavType<AISummaryUiModel>()
},
),
enterTransition = {
slideIntoContainer(
towards = AnimatedContentTransitionScope.SlideDirection.Left,
animationSpec = tween(250),
)
},
exitTransition = {
slideOutOfContainer(
towards = AnimatedContentTransitionScope.SlideDirection.Right,
animationSpec = tween(400),
)
},
Comment on lines +33 to +44
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요런것두 있었구만

) { navBackStackEntry ->
val aiSummary = navBackStackEntry.arguments?.bundleSerializable("summary") as AISummaryUiModel?

aiSummary?.let { summary ->
AISummaryRoute(
aiSummaryUiModel = summary,
navigateToPopBackStack = navigateToPopBackStack,
)
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
package com.mashup.dorabangs.core.summary

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
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.size
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.mashup.dorabangs.core.designsystem.R
import com.mashup.dorabangs.core.designsystem.component.buttons.DoraButtons
import com.mashup.dorabangs.core.designsystem.component.card.FeedCardKeyword
import com.mashup.dorabangs.core.designsystem.component.topbar.DoraTopBar
import com.mashup.dorabangs.core.designsystem.theme.DoraColorTokens
import com.mashup.dorabangs.core.designsystem.theme.DoraTypoTokens
import com.mashup.dorabangs.core.model.AISummaryUiModel
import com.mashup.dorabangs.core.webview.R as webViewR

@Composable
fun AISummaryRoute(
aiSummaryUiModel: AISummaryUiModel,
navigateToPopBackStack: () -> Unit,
) {
AISummaryScreen(
aiSummaryUiModel = aiSummaryUiModel,
navigateToPopBackStack = navigateToPopBackStack,
)
}

@Composable
fun AISummaryScreen(
aiSummaryUiModel: AISummaryUiModel,
navigateToPopBackStack: () -> Unit,
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier.fillMaxSize().background(color = DoraColorTokens.White),
) {
DoraTopBar.BackNavigationTopBar(
modifier = Modifier.fillMaxWidth(),
title = "",
isTitleCenter = true,
onClickBackIcon = navigateToPopBackStack,
isShowBottomDivider = true,
)
Spacer(modifier = Modifier.height(30.dp))
AISummaryContent(
aiSummaryUiModel = aiSummaryUiModel,
modifier = Modifier.padding(horizontal = 20.dp),
)
Spacer(modifier = Modifier.weight(1f))
DoraButtons.DoraBtnMaxFull(
modifier = Modifier
.fillMaxWidth()
.padding(20.dp),
enabled = true,
buttonText = "닫기",
onClickButton = navigateToPopBackStack,
)
}
}

@Composable
fun AISummaryContent(
aiSummaryUiModel: AISummaryUiModel,
modifier: Modifier,
) {
Column(
modifier = modifier
.fillMaxWidth()
.wrapContentHeight()
.background(color = DoraColorTokens.White),
) {
Row(
modifier = Modifier,
) {
Icon(
modifier = Modifier.size(14.dp),
tint = Color.Unspecified,
painter = painterResource(id = webViewR.drawable.icon_summary_star),
contentDescription = "summary_icon",
)
Text(
text = stringResource(id = R.string.feed_card_content_title),
modifier = Modifier
.align(Alignment.CenterVertically)
.padding(start = 6.dp),
textAlign = TextAlign.Center,
style = DoraTypoTokens.caption2Bold,
color = DoraColorTokens.G9,
)
}
Spacer(modifier = Modifier.height(10.dp))
Text(
text = aiSummaryUiModel.description.orEmpty(),
style = DoraTypoTokens.caption2Medium,
color = DoraColorTokens.G7,
)
Spacer(modifier = Modifier.height(20.dp))
FeedCardKeyword(keywordList = aiSummaryUiModel.keywords?.take(3))
}
}

@Preview
@Composable
fun PreviewAISummaryScreen() {
AISummaryScreen(
aiSummaryUiModel = AISummaryUiModel(),
modifier = Modifier,
navigateToPopBackStack = {},
)
}
Loading
Loading