Merge pull request #251 from Nexters/feature/250

Feature/250 링크 하이라이팅

presentation/src/main/java/com/nexters/boolti/presentation/screen/showdetail/ShowDetailContentScreen.kt

@@ -2,13 +2,14 @@ package com.nexters.boolti.presentation.screen.showdetail
 
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.text.ClickableText
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
@@ -17,15 +18,19 @@ import com.nexters.boolti.presentation.R
 import com.nexters.boolti.presentation.component.BtBackAppBar
 import com.nexters.boolti.presentation.theme.Grey30
 import com.nexters.boolti.presentation.theme.marginHorizontal
+import com.nexters.boolti.presentation.util.UrlParser
 
 @Composable
 fun ShowDetailContentScreen(
     onBackPressed: () -> Unit,
     modifier: Modifier = Modifier,
     viewModel: ShowDetailViewModel = hiltViewModel(),
 ) {
-    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+    val uriHandler = LocalUriHandler.current
     val scrollState = rememberScrollState()
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+    val notice = uiState.showDetail.notice
+    val urlParser = UrlParser(notice)
 
     Scaffold(
         modifier = modifier,
@@ -36,14 +41,21 @@ fun ShowDetailContentScreen(
             )
         },
     ) { innerPadding ->
-        Text(
+        ClickableText(
             modifier = Modifier
                 .verticalScroll(state = scrollState)
                 .padding(innerPadding)
                 .padding(horizontal = marginHorizontal)
                 .padding(top = 20.dp),
-            text = uiState.showDetail.notice,
+            text = urlParser.annotatedString,
             style = MaterialTheme.typography.bodyLarge.copy(color = Grey30),
-        )
+        ) { offset ->
+            val urlOffset = urlParser.urlOffsets.find { (start, end) -> offset in start..<end }
+            if (urlOffset == null) return@ClickableText
+            val (start, end) = urlOffset
+            val url = notice.substring(start, end)
+
+            uriHandler.openUri(url)
+        }
     }
 }

presentation/src/main/java/com/nexters/boolti/presentation/screen/showdetail/ShowDetailScreen.kt

@@ -21,6 +21,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.ClickableText
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Divider
 import androidx.compose.material3.DropdownMenu
@@ -44,6 +45,8 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalUriHandler
+import androidx.compose.ui.platform.UriHandler
 import androidx.compose.ui.res.stringArrayResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
@@ -74,6 +77,7 @@ import com.nexters.boolti.presentation.theme.Grey80
 import com.nexters.boolti.presentation.theme.Grey85
 import com.nexters.boolti.presentation.theme.marginHorizontal
 import com.nexters.boolti.presentation.theme.point3
+import com.nexters.boolti.presentation.util.UrlParser
 import kotlinx.coroutines.launch
 import timber.log.Timber
 import java.time.format.DateTimeFormatter
@@ -473,13 +477,23 @@ private fun SectionContent(
     maxLines: Int = Int.MAX_VALUE,
     overflow: TextOverflow = TextOverflow.Clip,
 ) {
-    Text(
+    val uriHandler = LocalUriHandler.current
+    val urlParser = UrlParser(text)
+
+    ClickableText(
         modifier = modifier.heightIn(0.dp, 246.dp),
-        text = text,
+        text = urlParser.annotatedString,
         style = MaterialTheme.typography.bodyLarge.copy(color = Grey30),
         maxLines = maxLines,
         overflow = overflow,
-    )
+    ) { offset ->
+        val urlOffset = urlParser.urlOffsets.find { (start, end) -> offset in start..<end }
+        if (urlOffset == null) return@ClickableText
+        val (start, end) = urlOffset
+        val url = text.substring(start, end)
+
+        uriHandler.openUri(url)
+    }
 }
 
 @Composable

presentation/src/main/java/com/nexters/boolti/presentation/util/UrlParser.kt

@@ -0,0 +1,44 @@
+package com.nexters.boolti.presentation.util
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.style.TextDecoration
+
+class UrlParser(
+    url: String,
+    urlRegex: Regex = "(https?://\\S+\\b)".toRegex(),
+) {
+    val annotatedString: AnnotatedString
+
+    private val _urlOffsets = mutableListOf<UrlOffset>()
+    val urlOffsets get() = _urlOffsets.toList()
+
+    init {
+        val linkMatch = urlRegex.toPattern().matcher(url)
+
+        while (linkMatch.find()) {
+            _urlOffsets.add(UrlOffset(linkMatch.start(), linkMatch.end()))
+        }
+
+        annotatedString = buildAnnotatedString {
+            append(url)
+            _urlOffsets.forEach { (start, end) ->
+                addStyle(
+                    SpanStyle(
+                        textDecoration = TextDecoration.Underline,
+                        color = Color(0xFF46A6FF)
+                    ),
+                    start,
+                    end,
+                )
+            }
+        }
+    }
+}
+
+data class UrlOffset(
+    val start: Int,
+    val end: Int
+)

presentation/src/test/java/com/nexters/boolti/presentation/util/UrlParserTest.kt

@@ -0,0 +1,24 @@
+package com.nexters.boolti.presentation.util
+
+import io.kotest.core.spec.style.BehaviorSpec
+import io.kotest.matchers.shouldBe
+
+class UrlParserTest : BehaviorSpec() {
+    init {
+        given("url이 포함된 문자열이 주어지고") {
+            val targetString = "https://www.naver.com 적당한https://www.naver.com 문자열 http://www.naver.com"
+
+            `when`("이 문자열을 파싱하면") {
+                val urlParser = UrlParser(targetString)
+                val urlOffsets = urlParser.urlOffsets
+
+                then("문자열 내 url의 start, end offset을 확인할 수 있다") {
+                    urlOffsets.size shouldBe 3
+                    urlOffsets[0] shouldBe UrlOffset(0, 21)
+                    urlOffsets[1] shouldBe UrlOffset(25, 46)
+                    urlOffsets[2] shouldBe UrlOffset(51, 71)
+                }
+            }
+        }
+    }
+}