스페이스 추가 화면 Jetpack Compose로 마이그레이션하기

AOS/app/build.gradle.kts

@@ -47,6 +47,7 @@ android {
         viewBinding = true
         dataBinding = true
         buildConfig = true
+        compose = true
     }
     compileOptions {
         sourceCompatibility = JavaVersion.VERSION_17
@@ -55,6 +56,9 @@ android {
     kotlinOptions {
         jvmTarget = "17"
     }
+    composeOptions {
+        kotlinCompilerExtensionVersion = "1.5.7"
+    }
 }
 
 val ktlint by configurations.creating
@@ -99,6 +103,22 @@ dependencies {
     implementation("com.google.android.flexbox:flexbox:3.0.0")
     // lottie
     implementation("com.airbnb.android:lottie:6.2.0")
+
+    // compose
+    val composePlatform = platform("androidx.compose:compose-bom:2023.10.01")
+    implementation(composePlatform)
+    implementation("androidx.compose.material3:material3")
+    implementation("androidx.compose.ui:ui")
+    implementation("androidx.activity:activity-compose:1.8.2")
+    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.2")
+    implementation("androidx.lifecycle:lifecycle-runtime-compose:2.6.2")
+    implementation("androidx.navigation:navigation-compose:2.7.6")
+    implementation("androidx.compose.ui:ui-graphics")
+    implementation("androidx.compose.ui:ui-tooling-preview")
+    implementation("androidx.constraintlayout:constraintlayout-compose:1.0.1")
+    implementation("io.coil-kt:coil-compose:2.5.0")
+    implementation("com.google.accompanist:accompanist-permissions:0.32.0")
+    debugImplementation("androidx.compose.ui:ui-tooling")
 }
 
 val ktlintCheck by tasks.registering(JavaExec::class) {

AOS/app/src/main/java/boostcamp/and07/mindsync/ui/base/BaseActivity.kt

@@ -9,6 +9,7 @@ import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.lifecycleScope
 import androidx.lifecycle.repeatOnLifecycle
 import boostcamp.and07.mindsync.ui.login.LoginActivity
+import com.google.android.material.snackbar.Snackbar
 import kotlinx.coroutines.flow.collectLatest
 import kotlinx.coroutines.launch
 
@@ -52,6 +53,10 @@ abstract class BaseActivity<T : ViewDataBinding>(private val layoutResId: Int) :
         finish()
     }
 
+    fun showMessage(message: String) {
+        Snackbar.make(this.binding.root, message, Snackbar.LENGTH_LONG).show()
+    }
+
     override fun onDestroy() {
         super.onDestroy()
         _binding = null

AOS/app/src/main/java/boostcamp/and07/mindsync/ui/base/BaseComposeActivity.kt

@@ -0,0 +1,19 @@
+package boostcamp.and07.mindsync.ui.base
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.compose.runtime.Composable
+
+abstract class BaseComposeActivity : ComponentActivity() {
+
+    @Composable
+    abstract fun Content()
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+            Content()
+        }
+    }
+}

AOS/app/src/main/java/boostcamp/and07/mindsync/ui/base/BaseComposeFragment.kt

@@ -0,0 +1,28 @@
+package boostcamp.and07.mindsync.ui.base
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.fragment.app.Fragment
+
+abstract class BaseComposeFragment : Fragment() {
+    @Composable
+    abstract fun Screen()
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ): View? {
+        return ComposeView(requireContext()).apply {
+            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+            setContent {
+                Screen()
+            }
+        }
+    }
+}

AOS/app/src/main/java/boostcamp/and07/mindsync/ui/base/BaseFragment.kt

@@ -7,6 +7,8 @@ import android.view.ViewGroup
 import androidx.databinding.DataBindingUtil
 import androidx.databinding.ViewDataBinding
 import androidx.fragment.app.Fragment
+import androidx.navigation.fragment.findNavController
+import com.google.android.material.snackbar.Snackbar
 
 abstract class BaseFragment<T : ViewDataBinding>(private val layoutResId: Int) : Fragment() {
     private var _binding: T? = null
@@ -36,4 +38,12 @@ abstract class BaseFragment<T : ViewDataBinding>(private val layoutResId: Int) :
         super.onDestroyView()
         _binding = null
     }
+
+    fun setupBackStack() {
+        findNavController().popBackStack()
+    }
+
+    fun showMessage(message: String) {
+        Snackbar.make(this.requireView(), message, Snackbar.LENGTH_LONG).show()
+    }
 }

AOS/app/src/main/java/boostcamp/and07/mindsync/ui/boardlist/BoardListFragment.kt

@@ -12,7 +12,6 @@ import boostcamp.and07.mindsync.databinding.FragmentBoardListBinding
 import boostcamp.and07.mindsync.ui.base.BaseFragment
 import boostcamp.and07.mindsync.ui.dialog.CreateBoardDialog
 import boostcamp.and07.mindsync.ui.util.setClickEvent
-import com.google.android.material.snackbar.Snackbar
 import dagger.hilt.android.AndroidEntryPoint
 import kotlinx.coroutines.flow.collectLatest
 import kotlinx.coroutines.launch
@@ -57,17 +56,9 @@ class BoardListFragment :
             repeatOnLifecycle(Lifecycle.State.STARTED) {
                 boardListViewModel.boardUiEvent.collectLatest { boardEvent ->
                     when (boardEvent) {
-                        is BoardUiEvent.Success -> {}
-
-                        is BoardUiEvent.Error -> {
-                            Snackbar.make(
-                                binding.root,
-                                boardEvent.message,
-                                Snackbar.LENGTH_SHORT,
-                            )
-                                .show()
+                        is BoardUiEvent.ShowMessage -> {
+                            showMessage(boardEvent.message)
                         }
-
                         else -> {}
                     }
                 }

AOS/app/src/main/java/boostcamp/and07/mindsync/ui/boardlist/BoardListViewModel.kt

@@ -30,7 +30,7 @@ class BoardListViewModel
         private val coroutineExceptionHandler =
             CoroutineExceptionHandler { _, throwable ->
                 viewModelScope.launch {
-                    _boardUiEvent.emit(BoardUiEvent.Error(throwable.message.toString()))
+                    _boardUiEvent.emit(BoardUiEvent.ShowMessage(throwable.message.toString()))
                 }
             }
 
@@ -55,19 +55,18 @@ class BoardListViewModel
                         val newBoards = boardUiState.boards.toMutableList().apply { add(board) }
                         boardUiState.copy(boards = newBoards)
                     }
-                    _boardUiEvent.emit(BoardUiEvent.Success)
                 }
             }
         }
 
         fun getBoards() {
             viewModelScope.launch(coroutineExceptionHandler) {
-                boardListRepository.getBoard(_boardUiState.value.spaceId, false).collectLatest { boards ->
-                    _boardUiState.update { boardUiState ->
-                        boardUiState.copy(boards = boards)
+                boardListRepository.getBoard(_boardUiState.value.spaceId, false)
+                    .collectLatest { boards ->
+                        _boardUiState.update { boardUiState ->
+                            boardUiState.copy(boards = boards)
+                        }
                     }
-                    _boardUiEvent.emit(BoardUiEvent.Success)
-                }
             }
         }
 

AOS/app/src/main/java/boostcamp/and07/mindsync/ui/boardlist/BoardUiEvent.kt

@@ -1,7 +1,7 @@
 package boostcamp.and07.mindsync.ui.boardlist
 
 sealed class BoardUiEvent {
-    data object Success : BoardUiEvent()
+    data object NavigateToBack : BoardUiEvent()
 
-    data class Error(val message: String) : BoardUiEvent()
+    data class ShowMessage(val message: String) : BoardUiEvent()
 }

AOS/app/src/main/java/boostcamp/and07/mindsync/ui/dialog/NickNameDialog.kt

@@ -0,0 +1,143 @@
+package boostcamp.and07.mindsync.ui.dialog
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextRange
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.window.Dialog
+import boostcamp.and07.mindsync.R
+import boostcamp.and07.mindsync.ui.profile.ProfileUiState
+import boostcamp.and07.mindsync.ui.theme.Black
+import boostcamp.and07.mindsync.ui.theme.Gray4
+import boostcamp.and07.mindsync.ui.theme.MindSyncTheme
+
+@Composable
+fun NickNameDialog(
+    uiState: ProfileUiState,
+    editNickname: (CharSequence) -> Unit,
+    closeDialog: () -> Unit,
+    updateNickname: (CharSequence) -> Unit,
+) {
+    val screenWidth = LocalConfiguration.current.screenWidthDp.dp
+    val dialogWidth = screenWidth * 0.8f
+    var textFieldValue = remember {
+        mutableStateOf(
+            TextFieldValue(
+                text = uiState.nickname,
+                selection = TextRange(uiState.nickname.length),
+            ),
+        )
+    }
+    val focusRequester = remember {
+        FocusRequester()
+    }
+
+    LaunchedEffect(Unit) {
+        focusRequester.requestFocus()
+    }
+
+    Dialog(
+        onDismissRequest = {
+        },
+    ) {
+        Column(
+            modifier = Modifier
+                .background(Color.White, RoundedCornerShape(20.dp))
+                .width(dialogWidth)
+                .padding(start = 10.dp, top = 20.dp, end = 10.dp),
+        ) {
+            Text(
+                text = stringResource(id = R.string.profile_nickname_modify),
+                modifier = Modifier,
+                style = MaterialTheme.typography.displaySmall,
+            )
+
+            OutlinedTextField(
+                value = textFieldValue.value,
+                onValueChange = { textFieldValue.value = it; editNickname(it.text) },
+                modifier = Modifier
+                    .padding(5.dp)
+                    .focusRequester(focusRequester),
+                placeholder = {
+                    Text(text = stringResource(id = R.string.profile_name_limit))
+                },
+                supportingText = {
+                    Text(
+                        text = "${uiState.editingNickname.length}",
+                        modifier = Modifier.fillMaxWidth(),
+                        textAlign = TextAlign.End,
+                    )
+                },
+                textStyle = TextStyle.Default.copy(fontSize = 16.sp),
+            )
+            Row(modifier = Modifier.align(Alignment.End)) {
+                TextButton(
+                    onClick = { closeDialog() },
+                    modifier = Modifier,
+                ) {
+                    Text(
+                        text = stringResource(id = R.string.cancel_message),
+                        color = Black,
+                        fontSize = 14.sp,
+                    )
+                }
+
+                TextButton(
+                    onClick = { updateNickname(uiState.editingNickname); closeDialog() },
+                    modifier = Modifier,
+                    enabled = when (uiState.editingNickname.length) {
+                        in 1..20 -> true
+                        else -> false
+                    },
+                ) {
+                    Text(
+                        text = stringResource(id = R.string.profile_modify),
+                        color = if (uiState.editingNickname.isNotEmpty()) Black else Gray4,
+                        fontSize = 12.sp,
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun NickNameDialogPreview() {
+    MindSyncTheme {
+        Surface {
+            NickNameDialog(
+                uiState = ProfileUiState(),
+                editNickname = { },
+                closeDialog = { /*TODO*/ },
+                updateNickname = { },
+            )
+        }
+    }
+}

AOS/app/src/main/java/boostcamp/and07/mindsync/ui/main/MainActivity.kt

@@ -69,17 +69,13 @@ class MainActivity :
             repeatOnLifecycle(Lifecycle.State.STARTED) {
                 mainViewModel.event.collectLatest { event ->
                     if (event is MainUiEvent.ShowMessage) {
-                        Toast.makeText(this@MainActivity, event.message, Toast.LENGTH_SHORT).show()
+                        showMessage(event.message)
                     }
                     if (event is MainUiEvent.GetUsers) {
                         mainViewModel.getSpaceUsers()
                     }
                     if (event is MainUiEvent.LeaveSpace) {
-                        Toast.makeText(
-                            this@MainActivity,
-                            getString(R.string.space_leave_room_message, event.spaceName),
-                            Toast.LENGTH_SHORT,
-                        ).show()
+                        showMessage(getString(R.string.space_leave_room_message, event.spaceName))
                         navController.navigate(R.id.spaceListFragment)
                     }
                 }

AOS/app/src/main/java/boostcamp/and07/mindsync/ui/main/MainViewModel.kt

@@ -77,7 +77,7 @@ class MainViewModel
             }
             viewModelScope.launch {
                 _event.emit(MainUiEvent.ShowMessage("${space.name}방에 참가했습니다."))
-                _event.emit(MainUiEvent.GetUsers)
+                getSpaceUsers()
             }
         }