갤러리 사진 선택 & 재촬영 기능 구현

core/design-system/src/main/java/com/twix/designsystem/components/button/AppRoundButton.kt

@@ -0,0 +1,108 @@
+package com.twix.designsystem.components.button
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.twix.designsystem.components.text.AppText
+import com.twix.designsystem.theme.CommonColor
+import com.twix.designsystem.theme.GrayColor
+import com.twix.designsystem.theme.TwixTheme
+import com.twix.domain.model.enums.AppTextStyle
+
+@Composable
+fun AppRoundButton(
+    text: String,
+    textColor: Color,
+    modifier: Modifier = Modifier,
+    textStyle: AppTextStyle = AppTextStyle.T2,
+    backgroundColor: Color,
+    borderColor: Color = GrayColor.C500,
+    hasBorder: Boolean = true,
+) {
+    Box(
+        modifier = modifier,
+    ) {
+        if (hasBorder) {
+            Box(
+                modifier =
+                    Modifier
+                        .fillMaxSize()
+                        .offset(y = 4.dp)
+                        .background(
+                            color = borderColor,
+                            shape = RoundedCornerShape(100),
+                        ),
+            )
+        }
+
+        Box(
+            modifier =
+                Modifier
+                    .fillMaxSize()
+                    .background(
+                        color = backgroundColor,
+                        shape = RoundedCornerShape(100),
+                    ).then(
+                        if (hasBorder) {
+                            Modifier.border(
+                                width = 1.6.dp,
+                                color = borderColor,
+                                shape = RoundedCornerShape(100),
+                            )
+                        } else {
+                            Modifier
+                        },
+                    ),
+            contentAlignment = Alignment.Center,
+        ) {
+            AppText(
+                style = textStyle,
+                color = textColor,
+                text = text,
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun AppRoundButtonPreview() {
+    TwixTheme {
+        Column {
+            AppRoundButton(
+                modifier =
+                    Modifier
+                        .width(330.dp)
+                        .height(68.dp),
+                text = "버튼임니다",
+                textColor = GrayColor.C500,
+                backgroundColor = CommonColor.White,
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+            AppRoundButton(
+                modifier =
+                    Modifier
+                        .width(330.dp)
+                        .height(68.dp),
+                text = "버튼임니다",
+                textColor = CommonColor.White,
+                backgroundColor = GrayColor.C500,
+                hasBorder = false,
+            )
+            Spacer(modifier = Modifier.height(10.dp))
+        }
+    }
+}

core/ui/src/main/java/com/twix/ui/base/ObserveAsEvents.kt

@@ -0,0 +1,33 @@
+package com.twix.ui.base
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.lifecycle.Lifecycle
+import androidx.lifecycle.compose.LocalLifecycleOwner
+import androidx.lifecycle.repeatOnLifecycle
+import kotlinx.coroutines.flow.Flow
+
+/**
+ * [Flow]를 통해 전달되는 일회성 이벤트(Side Effect)를 Lifecycle에 안전하게 관찰하기 위한 Composable 함수입니다.
+ * * 주로 ViewModel의 Channel이나 SharedFlow를 통해 전달되는 네비게이션, 스낵바 표시 등의
+ * UI 이벤트를 처리할 때 사용됩니다.
+ *
+ * @param T 이벤트의 타입.
+ * @param flow 관찰할 [Flow] 인스턴스 (예: ViewModel의 events).
+ * @param onEvent 이벤트가 발생했을 때 실행할 suspend 콜백 함수.
+ *
+ */
+@Composable
+fun <T> ObserveAsEvents(
+    event: Flow<T>,
+    onEvent: suspend (T) -> Unit,
+) {
+    val lifecycleOwner = LocalLifecycleOwner.current
+    LaunchedEffect(event, lifecycleOwner) {
+        // lifecycleOwner가 STARTED 상태일 때만 수집을 시작
+        // STOPPED 상태가 되면 수집 코루틴을 자동으로 취소
+        lifecycleOwner.repeatOnLifecycle(Lifecycle.State.STARTED) {
+            event.collect(onEvent)
+        }
+    }
+}

feature/task-certification/src/main/java/com/twix/task_certification/TaskCertificationScreen.kt

@@ -3,6 +3,7 @@ package com.twix.task_certification
 import android.Manifest
 import android.content.pm.PackageManager
 import androidx.activity.compose.rememberLauncherForActivityResult
+import androidx.activity.result.PickVisualMediaRequest
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
@@ -26,6 +27,9 @@ import androidx.core.content.ContextCompat
 import androidx.lifecycle.compose.LocalLifecycleOwner
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.twix.designsystem.components.text.AppText
+import com.twix.designsystem.components.toast.ToastManager
+import com.twix.designsystem.components.toast.model.ToastData
+import com.twix.designsystem.components.toast.model.ToastType
 import com.twix.designsystem.theme.GrayColor
 import com.twix.designsystem.theme.TwixTheme
 import com.twix.domain.model.enums.AppTextStyle
@@ -35,13 +39,16 @@ import com.twix.task_certification.component.CameraPreviewBox
 import com.twix.task_certification.component.TaskCertificationTopBar
 import com.twix.task_certification.model.CameraPreview
 import com.twix.task_certification.model.TaskCertificationIntent
+import com.twix.task_certification.model.TaskCertificationSideEffect
 import com.twix.task_certification.model.TaskCertificationUiState
+import com.twix.ui.base.ObserveAsEvents
 import kotlinx.coroutines.launch
 import org.koin.androidx.compose.koinViewModel
 import org.koin.compose.koinInject
 
 @Composable
 fun TaskCertificationRoute(
+    toastManager: ToastManager = koinInject(),
     camera: Camera = koinInject(),
     viewModel: TaskCertificationViewModel = koinViewModel(),
     navigateToBack: () -> Unit,
@@ -69,6 +76,11 @@ fun TaskCertificationRoute(
             hasPermission = granted
         }
 
+    val pickMedia =
+        rememberLauncherForActivityResult(ActivityResultContracts.PickVisualMedia()) { uri ->
+            viewModel.dispatch(TaskCertificationIntent.PickPicture(uri))
+        }
+
     LaunchedEffect(Unit) {
         if (!hasPermission) {
             permissionLauncher.launch(Manifest.permission.CAMERA)
@@ -93,6 +105,20 @@ fun TaskCertificationRoute(
         }
     }
 
+    val imageCaptureFailMessage = stringResource(R.string.task_certification_image_capture_fail)
+    ObserveAsEvents(viewModel.sideEffect) { event ->
+        when (event) {
+            TaskCertificationSideEffect.ShowImageCaptureFailToast -> {
+                toastManager.tryShow(
+                    ToastData(
+                        message = imageCaptureFailMessage,
+                        type = ToastType.ERROR,
+                    ),
+                )
+            }
+        }
+    }
+
     TaskCertificationScreen(
         uiState = uiState,
         cameraPreview = cameraPreview,
@@ -105,6 +131,8 @@ fun TaskCertificationRoute(
                     .takePicture()
                     .onSuccess {
                         viewModel.dispatch(TaskCertificationIntent.TakePicture(it))
+                    }.onFailure {
+                        viewModel.dispatch(TaskCertificationIntent.TakePicture(null))
                     }
             }
         },
@@ -114,6 +142,13 @@ fun TaskCertificationRoute(
         onClickFlash = {
             viewModel.dispatch(TaskCertificationIntent.ToggleTorch)
         },
+        onClickGallery = {
+            pickMedia.launch(PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly))
+        },
+        onClickRefresh = {
+            viewModel.dispatch(TaskCertificationIntent.RetakePicture)
+        },
+        onClickUpload = { },
     )
 }
 
@@ -125,6 +160,9 @@ private fun TaskCertificationScreen(
     onCaptureClick: () -> Unit,
     onToggleCameraClick: () -> Unit,
     onClickFlash: () -> Unit,
+    onClickGallery: () -> Unit,
+    onClickRefresh: () -> Unit,
+    onClickUpload: () -> Unit,
 ) {
     Column(
         Modifier
@@ -157,8 +195,12 @@ private fun TaskCertificationScreen(
         Spacer(modifier = Modifier.height(52.dp))
 
         CameraControlBar(
+            capture = uiState.capture,
             onCaptureClick = onCaptureClick,
             onToggleCameraClick = onToggleCameraClick,
+            onClickGallery = onClickGallery,
+            onClickRefresh = onClickRefresh,
+            onClickUpload = onClickUpload,
         )
     }
 }
@@ -174,6 +216,9 @@ fun TaskCertificationScreenPreview() {
             onCaptureClick = {},
             onToggleCameraClick = {},
             onClickFlash = {},
+            onClickGallery = {},
+            onClickRefresh = {},
+            onClickUpload = {},
         )
     }
 }

feature/task-certification/src/main/java/com/twix/task_certification/TaskCertificationViewModel.kt

@@ -18,13 +18,21 @@ class TaskCertificationViewModel :
                 reducePicture(intent.uri)
             }
 
+            is TaskCertificationIntent.PickPicture -> {
+                reducePicture(intent.uri)
+            }
+
             is TaskCertificationIntent.ToggleLens -> {
                 reduceLens()
             }
 
             is TaskCertificationIntent.ToggleTorch -> {
                 reduceTorch()
             }
+
+            is TaskCertificationIntent.RetakePicture -> {
+                setupRetake()
+            }
         }
     }
 
@@ -47,4 +55,8 @@ class TaskCertificationViewModel :
     private fun reduceTorch() {
         reduce { toggleTorch() }
     }
+
+    private fun setupRetake() {
+        reduce { removePicture() }
+    }
 }