Boolti-337 feat: 공연 등록 툴바 및 프로그레스바 추가

presentation/src/main/java/com/nexters/boolti/presentation/component/BtWebView.kt

@@ -8,6 +8,8 @@ import android.webkit.ValueCallback
 import android.webkit.WebChromeClient
 import android.webkit.WebView
 import android.webkit.WebViewClient
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
 
 class BtWebView @JvmOverloads constructor(
     context: Context,
@@ -16,6 +18,9 @@ class BtWebView @JvmOverloads constructor(
     defStyleRes: Int = 0,
 ) : WebView(context, attrs, defStyleAttr, defStyleRes) {
 
+    private val _progress = MutableStateFlow(0)
+    val progress = _progress.asStateFlow()
+
     init {
         setupSettings()
         setupWebViewClient()
@@ -39,7 +44,11 @@ class BtWebView @JvmOverloads constructor(
         launchActivity: () -> Unit,
         setFilePathCallback: (ValueCallback<Array<Uri>>) -> Unit,
     ) {
-        webChromeClient = BtWebChromeClient(launchActivity, setFilePathCallback)
+        webChromeClient = BtWebChromeClient(
+            launchActivity = launchActivity,
+            setFilePathCallback = setFilePathCallback,
+            onProgressChanged = { _progress.value = it },
+        )
     }
 }
 
@@ -48,7 +57,13 @@ class BtWebViewClient : WebViewClient()
 class BtWebChromeClient(
     private val launchActivity: () -> Unit,
     private val setFilePathCallback: (ValueCallback<Array<Uri>>) -> Unit,
+    private val onProgressChanged: (Int) -> Unit = {},
 ) : WebChromeClient() {
+    override fun onProgressChanged(view: WebView?, newProgress: Int) {
+        super.onProgressChanged(view, newProgress)
+        onProgressChanged(newProgress)
+    }
+
     override fun onShowFileChooser(
         webView: WebView,
         filePathCallback: ValueCallback<Array<Uri>>?,

presentation/src/main/java/com/nexters/boolti/presentation/screen/Main.kt

@@ -43,10 +43,10 @@ import com.nexters.boolti.presentation.screen.reservations.ReservationsScreen
 import com.nexters.boolti.presentation.screen.showdetail.ShowDetailContentScreen
 import com.nexters.boolti.presentation.screen.showdetail.ShowDetailScreen
 import com.nexters.boolti.presentation.screen.showdetail.ShowImagesScreen
+import com.nexters.boolti.presentation.screen.showregistration.addShowRegistration
 import com.nexters.boolti.presentation.screen.signout.SignoutScreen
 import com.nexters.boolti.presentation.screen.ticket.detail.TicketDetailScreen
 import com.nexters.boolti.presentation.screen.ticketing.TicketingScreen
-import com.nexters.boolti.presentation.screen.showregistration.addShowRegistration
 import com.nexters.boolti.presentation.theme.BooltiTheme
 import com.nexters.boolti.presentation.util.SnackbarController
 import com.nexters.boolti.presentation.util.rememberNavControllerWithLog
@@ -254,7 +254,10 @@ fun MainNavigation(modifier: Modifier, onClickQrScan: (showId: String, showName:
             )
         }
 
-        addShowRegistration()
+        addShowRegistration(
+            modifier = modifier,
+            popBackStack = navController::popBackStack,
+        )
     }
 }
 

presentation/src/main/java/com/nexters/boolti/presentation/screen/showregistration/ShowRegistrationNavigation.kt

@@ -7,12 +7,14 @@ import com.nexters.boolti.presentation.screen.MainDestination
 
 fun NavGraphBuilder.addShowRegistration(
     modifier: Modifier = Modifier,
+    popBackStack: () -> Unit,
 ) {
     composable(
         route = MainDestination.ShowRegistration.route,
     ) {
         ShowRegistrationScreen(
             modifier = modifier,
+            onClickBack = popBackStack,
         )
     }
 }

presentation/src/main/java/com/nexters/boolti/presentation/screen/showregistration/ShowRegistrationScreen.kt

@@ -2,31 +2,46 @@ package com.nexters.boolti.presentation.screen.showregistration
 
 import android.annotation.SuppressLint
 import android.net.Uri
-import android.view.ViewGroup
 import android.webkit.CookieManager
 import android.webkit.ValueCallback
 import android.webkit.WebStorage
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.nexters.boolti.presentation.BuildConfig
+import com.nexters.boolti.presentation.R
+import com.nexters.boolti.presentation.component.BtBackAppBar
+import com.nexters.boolti.presentation.component.BtCircularProgressIndicator
 import com.nexters.boolti.presentation.component.BtWebView
 import kotlinx.coroutines.flow.filter
 import kotlinx.coroutines.flow.filterNotNull
+import kotlinx.coroutines.launch
 import timber.log.Timber
 
 @SuppressLint("SetJavaScriptEnabled")
 @Composable
 fun ShowRegistrationScreen(
     modifier: Modifier = Modifier,
+    onClickBack: () -> Unit,
     viewModel: ShowRegistrationViewModel = hiltViewModel(),
 ) {
     var filePathCallback: ValueCallback<Array<Uri>>? by remember { mutableStateOf(null) }
@@ -38,6 +53,10 @@ fun ShowRegistrationScreen(
     val domain = BuildConfig.DOMAIN
     val url = "https://${domain}/show/add"
 
+    val scope = rememberCoroutineScope()
+    var webviewProgress by remember { mutableIntStateOf(0) }
+    val loading by remember { derivedStateOf { webviewProgress < 100 } }
+
     LaunchedEffect(Unit) {
         CookieManager.getInstance().removeAllCookies(null)
         WebStorage.getInstance().deleteAllData()
@@ -54,22 +73,44 @@ fun ShowRegistrationScreen(
             }
     }
 
-    AndroidView(
+    Scaffold(
         modifier = modifier,
-        factory = { context ->
-            BtWebView(context).apply {
-                layoutParams = ViewGroup.LayoutParams(
-                    ViewGroup.LayoutParams.MATCH_PARENT,
-                    ViewGroup.LayoutParams.MATCH_PARENT,
-                )
-                setWebChromeClient(
-                    launchActivity = { launcher.launch(arrayOf("image/*")) },
-                    setFilePathCallback = { callback -> filePathCallback = callback },
-                )
-                loadUrl(url)
+        topBar = {
+            BtBackAppBar(
+                title = stringResource(R.string.my_register_show),
+                onClickBack = onClickBack,
+            )
+        },
+    ) { innerPadding ->
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(innerPadding),
+        ) {
+            AndroidView(
+                factory = { context ->
+                    BtWebView(context).apply {
+                        setWebChromeClient(
+                            launchActivity = { launcher.launch(arrayOf("image/*")) },
+                            setFilePathCallback = { callback -> filePathCallback = callback },
+                        )
+                        Timber.d("내가 만든 쿠키 : ${CookieManager.getInstance().getCookie(url)}")
+
+                        scope.launch {
+                            progress.collect { webviewProgress = it }
+                        }
+                    }
+                },
+                update = { webView -> webView.loadUrl(url) },
+            )
 
-                Timber.d("내가 만든 쿠키 : ${CookieManager.getInstance().getCookie(url)}")
+            AnimatedVisibility(
+                visible = loading,
+                modifier = Modifier.align(Alignment.Center),
+                exit = fadeOut(),
+            ) {
+                BtCircularProgressIndicator()
             }
         }
-    )
+    }
 }