[#23] EncourageFragment 생성하기 버튼, Toolbar를 Compose로 마이그레이션

feature/encourage/src/main/java/com/sdhong/jonbeowin/feature/encourage/component/EncourageContent.kt

@@ -1,55 +1,87 @@
 package com.sdhong.jonbeowin.feature.encourage.component
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 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.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import com.sdhong.jonbeowin.feature.encourage.R
 import com.sdhong.jonbeowin.feature.encourage.uistate.EncourageUiState
 
 @Composable
 internal fun EncourageContent(
     uiState: EncourageUiState,
-    onEncourageItemClick: (Int) -> Unit
+    onEncourageItemClick: (Int) -> Unit,
+    onGenerateButtonClick: () -> Unit,
+    toggleEditMode: () -> Unit
 ) {
-    when (uiState) {
-        EncourageUiState.Idle -> Unit
-
-        EncourageUiState.Empty -> {
-            Box(
-                modifier = Modifier.fillMaxSize(),
-                contentAlignment = Alignment.Center
-            ) {
-                Text(
-                    text = stringResource(R.string.encourage_list_empty_message),
-                    color = colorResource(R.color.dusk_gray)
+    Column {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(colorResource(R.color.light_blue))
+                .height(64.dp)
+                .padding(start = 16.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Text(text = stringResource(R.string.title_encouraging_word), fontSize = 22.sp)
+            if (uiState is EncourageUiState.Success) {
+                EncourageTopAppBarActionButton(
+                    isEditMode = uiState.isEditMode,
+                    onClick = toggleEditMode
                 )
             }
         }
+        Box(
+            modifier = Modifier.fillMaxSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            when (uiState) {
+                EncourageUiState.Idle -> Unit
 
-        is EncourageUiState.Success -> {
-            EncourageList(
-                items = uiState.encourageItemList,
-                isEditMode = uiState.isEditMode,
-                onEncourageItemClick = onEncourageItemClick
-            )
-        }
+                EncourageUiState.Empty -> {
+                    Text(
+                        text = stringResource(R.string.encourage_list_empty_message),
+                        color = colorResource(R.color.dusk_gray)
+                    )
+                }
 
-        EncourageUiState.Error -> {
-            Box(
-                modifier = Modifier.fillMaxSize(),
-                contentAlignment = Alignment.Center
-            ) {
-                Text(
-                    text = stringResource(R.string.encourage_list_error_message),
-                    color = colorResource(R.color.red)
-                )
+                is EncourageUiState.Success -> {
+                    EncourageList(
+                        items = uiState.encourageItemList,
+                        isEditMode = uiState.isEditMode,
+                        onEncourageItemClick = onEncourageItemClick
+                    )
+                }
+
+                EncourageUiState.Error -> {
+                    Text(
+                        text = stringResource(R.string.encourage_list_error_message),
+                        color = colorResource(R.color.red)
+                    )
+                }
             }
+
+            GenerateEncourageButton(
+                modifier = Modifier
+                    .align(Alignment.BottomEnd)
+                    .padding(bottom = 16.dp, end = 16.dp),
+                onClick = onGenerateButtonClick
+            )
         }
     }
 }
@@ -59,6 +91,8 @@ internal fun EncourageContent(
 private fun EncourageContentPreview() {
     EncourageContent(
         uiState = EncourageUiState.Error,
-        onEncourageItemClick = {}
+        onEncourageItemClick = {},
+        onGenerateButtonClick = {},
+        toggleEditMode = {}
     )
 }

feature/encourage/src/main/java/com/sdhong/jonbeowin/feature/encourage/component/EncourageTopAppBarActionButton.kt

@@ -0,0 +1,55 @@
+package com.sdhong.jonbeowin.feature.encourage.component
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.minimumInteractiveComponentSize
+import androidx.compose.material3.ripple
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.sdhong.jonbeowin.feature.encourage.R
+
+@Composable
+internal fun EncourageTopAppBarActionButton(
+    isEditMode: Boolean,
+    onClick: () -> Unit
+) {
+    Box(
+        modifier = Modifier.minimumInteractiveComponentSize()
+            .size(40.dp)
+            .clip(CircleShape)
+            .clickable(
+                interactionSource = null,
+                onClick = onClick,
+                indication = ripple()
+            ),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(
+            text = stringResource(
+                if (isEditMode) R.string.remove
+                else R.string.edit
+            ),
+            color = colorResource(R.color.blue),
+            style = MaterialTheme.typography.labelLarge
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun EncourageTopAppBarActionButtonPreview() {
+    EncourageTopAppBarActionButton(
+        isEditMode = false,
+        onClick = {}
+    )
+}

feature/encourage/src/main/java/com/sdhong/jonbeowin/feature/encourage/component/GenerateEncourageButton.kt

@@ -0,0 +1,57 @@
+package com.sdhong.jonbeowin.feature.encourage.component
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+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.vector.ImageVector
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.sdhong.jonbeowin.feature.encourage.R
+
+@Composable
+internal fun GenerateEncourageButton(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit
+) {
+    Button(
+        modifier = modifier.padding(vertical = 3.dp),
+        onClick = onClick,
+        elevation = ButtonDefaults.buttonElevation(8.dp),
+        contentPadding = PaddingValues(16.dp),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = colorResource(R.color.blue)
+        )
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Icon(
+                modifier = Modifier.size(18.dp),
+                imageVector = ImageVector.vectorResource(R.drawable.ic_add),
+                contentDescription = null
+            )
+            Spacer(Modifier.size(2.dp))
+            Text(
+                text = stringResource(R.string.generate)
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun GenerateEncourageButtonPreview() {
+    GenerateEncourageButton(onClick = {})
+}

feature/encourage/src/main/java/com/sdhong/jonbeowin/feature/encourage/view/EncourageFragment.kt

@@ -7,12 +7,10 @@ import androidx.fragment.app.viewModels
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.sdhong.jonbeowin.core.common.base.BaseFragment
 import com.sdhong.jonbeowin.core.common.extension.collectFlow
-import com.sdhong.jonbeowin.core.common.extension.collectLatestFlow
-import com.sdhong.jonbeowin.feature.encourage.R
 import com.sdhong.jonbeowin.feature.encourage.component.EncourageContent
 import com.sdhong.jonbeowin.feature.encourage.databinding.FragmentEncourageBinding
-import com.sdhong.jonbeowin.feature.encourage.uistate.EncourageUiState
 import com.sdhong.jonbeowin.feature.encourage.viewmodel.EncourageViewModel
+import com.sdhong.jonbeowin.feature.encourage.viewmodel.EncourageViewModel.EncourageEvent
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
@@ -29,55 +27,25 @@ class EncourageFragment : BaseFragment<FragmentEncourageBinding>(
     }
 
     private fun setUpView() {
-        binding.toolbarEncourage.setOnMenuItemClickListener { item ->
-            when (item.itemId) {
-                R.id.menuEditAsset -> {
-                    viewModel.toggleEditMode()
-                    true
-                }
-
-                else -> false
-            }
-        }
         binding.composeView.setContent {
             val uiState by viewModel.uiState.collectAsStateWithLifecycle()
             EncourageContent(
                 uiState = uiState,
-                onEncourageItemClick = viewModel::onEncourageItemClick
+                onEncourageItemClick = viewModel::onEncourageItemClick,
+                onGenerateButtonClick = viewModel::eventShowEncourageDialog,
+                toggleEditMode = viewModel::toggleEditMode
             )
         }
-
-        binding.buttonGenerate.setOnClickListener {
-            viewModel.eventShowEncourageDialog()
-        }
     }
 
     private fun setCollectors() {
-        viewLifecycleOwner.collectLatestFlow(viewModel.uiState) { uiState ->
-            handleUiState(uiState)
-        }
-
         viewLifecycleOwner.collectFlow(viewModel.eventFlow) { event ->
-            handleEvent(event)
-        }
-    }
-
-    private fun handleUiState(uiState: EncourageUiState) {
-        when (uiState) {
-            is EncourageUiState.Success -> {
-                val title = if (uiState.isEditMode) R.string.remove else R.string.edit
-                binding.toolbarEncourage.menu.findItem(R.id.menuEditAsset).title = getString(title)
+            when (event) {
+                is EncourageEvent.ShowEncourageDialog -> {
+                    EncourageDialogFragment().show(childFragmentManager, null)
+                }
             }
-
-            else -> Unit
         }
     }
 
-    private fun handleEvent(event: EncourageViewModel.EncourageEvent) {
-        when (event) {
-            is EncourageViewModel.EncourageEvent.ShowEncourageDialog -> {
-                EncourageDialogFragment().show(childFragmentManager, null)
-            }
-        }
-    }
 }

feature/encourage/src/main/res/layout/fragment_encourage.xml

@@ -1,47 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
+<androidx.compose.ui.platform.ComposeView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/composeView"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    tools:context="com.sdhong.jonbeowin.feature.encourage.view.EncourageFragment">
-
-    <androidx.appcompat.widget.Toolbar
-        android:id="@+id/toolbarEncourage"
-        android:layout_width="match_parent"
-        android:layout_height="?attr/actionBarSize"
-        app:layout_constraintBottom_toTopOf="@id/composeView"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        app:menu="@menu/app_bar_encourage"
-        app:title="@string/title_encouraging_word"
-        tools:background="@color/light_blue" />
-
-    <androidx.compose.ui.platform.ComposeView
-        android:id="@+id/composeView"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/toolbarEncourage" />
-
-    <Button
-        android:id="@+id/buttonGenerate"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginEnd="16dp"
-        android:layout_marginBottom="16dp"
-        android:backgroundTint="@color/blue"
-        android:elevation="8dp"
-        android:padding="16dp"
-        android:stateListAnimator="@null"
-        android:text="@string/generate"
-        app:icon="@drawable/ic_add"
-        app:iconGravity="textStart"
-        app:iconPadding="2dp"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent" />
-
-</androidx.constraintlayout.widget.ConstraintLayout>
+    tools:context="com.sdhong.jonbeowin.feature.encourage.view.EncourageFragment" />