UI 가이드 확정 & 구현 [#133]

presenter/src/main/java/com/foke/together/presenter/component/Basic.kt

@@ -15,6 +15,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Remove
 import androidx.compose.material.icons.filled.Start
+import androidx.compose.material3.BottomAppBar
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonColors
 import androidx.compose.material3.Card
@@ -288,12 +289,16 @@ fun AppTopBar(
     when(alignment){
         Alignment.CenterHorizontally -> {
             CenterAlignedTopAppBar(
+                modifier = Modifier.fillMaxWidth().wrapContentSize().padding(
+                    start = AppTheme.size.layoutPadding,
+                    end = AppTheme.size.layoutPadding
+                ),
                 title = {
                     Text(
                         text = title,
                         style = titleStyle,
                         textAlign = TextAlign.Center,
-                        color = AppTheme.colorScheme.border
+                        color = AppTheme.colorScheme.top
                     )
                 },
                 colors = TopAppBarDefaults.topAppBarColors(
@@ -309,6 +314,10 @@ fun AppTopBar(
         }
         Alignment.Start -> {
             TopAppBar(
+                modifier = Modifier.fillMaxWidth().wrapContentSize().padding(
+                    start = AppTheme.size.layoutPadding,
+                    end = AppTheme.size.layoutPadding
+                ),
                 title = {
                     Text(
                         text = title,
@@ -431,4 +440,26 @@ fun AppTextField(
         ),
         enabled = enabled
     )
+}
+
+@Composable
+fun AppBottomBar(
+    content: @Composable (RowScope.() -> Unit)
+){
+    BottomAppBar(
+        modifier = Modifier.fillMaxWidth().padding(
+            start = AppTheme.size.layoutPadding,
+            end = AppTheme.size.layoutPadding,
+            bottom = AppTheme.size.layoutPadding
+        ),
+        containerColor = AppTheme.colorScheme.bottom,
+        contentColor = AppTheme.colorScheme.top,
+    ){
+        Row(
+            modifier = Modifier.fillMaxWidth().wrapContentHeight(),
+            horizontalArrangement = Arrangement.SpaceEvenly,
+            verticalAlignment = Alignment.CenterVertically,
+            content = content
+        )
+    }
 }

presenter/src/main/java/com/foke/together/presenter/navigation/NavGraph.kt

@@ -70,7 +70,7 @@ private fun addSelectFrameScreen(
     navGraphBuilder.composable(route = NavRoute.SelectFrame.path) {
         SelectFrameScreen(
             navigateToMethod = {
-                navController.navigate(NavRoute.SelectMethod.path)
+                navController.navigate(NavRoute.InternalCamera.path)
             },
             popBackStack = {
                 navController.popBackStack(NavRoute.Home.path, inclusive = false)

presenter/src/main/java/com/foke/together/presenter/screen/HomeScreen.kt

@@ -22,8 +22,11 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
@@ -97,12 +100,13 @@ fun HomeScreenContent(
             verticalArrangement = Arrangement.SpaceEvenly,
             horizontalAlignment = Alignment.CenterHorizontally
         ){
-            Image(
-                painter = painterResource(
-                    id = R.drawable.fourcut_together
+            Icon(
+                imageVector = ImageVector.vectorResource(
+                    id = R.drawable.fourcut_together,
                 ),
                 contentDescription = "FourCuts Together",
                 modifier = Modifier.wrapContentSize(),
+                tint = AppTheme.colorScheme.top
             )
             AppButton(
                 onClick = { navigationSelectFrame() },

presenter/src/main/java/com/foke/together/presenter/screen/InternalCameraScreen.kt

@@ -2,6 +2,12 @@ package com.foke.together.presenter.screen
 
 import android.content.Context
 import androidx.camera.view.PreviewView
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -11,6 +17,7 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.BottomAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Text
@@ -20,12 +27,16 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.hilt.navigation.compose.hiltViewModel
@@ -34,9 +45,11 @@ import androidx.lifecycle.compose.LifecycleEventEffect
 import androidx.lifecycle.compose.LocalLifecycleOwner
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.foke.together.presenter.R
+import com.foke.together.presenter.component.AppBottomBar
 import com.foke.together.presenter.component.AppTopBar
 import com.foke.together.presenter.component.BasicScaffold
 import com.foke.together.presenter.screen.state.InternalCameraState
+import com.foke.together.presenter.theme.AppTheme
 import com.foke.together.presenter.theme.FourCutTogetherTheme
 import com.foke.together.presenter.viewmodel.InternelCameraViewModel
 import com.foke.together.util.AppLog
@@ -55,6 +68,8 @@ fun InternalCameraScreenRoot(
     val context = LocalContext.current
     val captureCount by viewModel.captureCount.collectAsStateWithLifecycle()
     val progress by viewModel.progressState.collectAsStateWithLifecycle()
+    val isFlashAnimationVisible by viewModel.flashAnimationState.collectAsStateWithLifecycle()
+    val countdownSeconds by viewModel.countdownSeconds.collectAsStateWithLifecycle()
     LifecycleEventEffect(Lifecycle.Event.ON_START) {
         viewModel.setCaptureTimer(context) { navigateToGenerateImage() }
         AppLog.d(TAG, "LifecycleEventEffect. ON_START", "")
@@ -71,6 +86,8 @@ fun InternalCameraScreenRoot(
         state = state,
         captureCount = captureCount,
         progress = progress,
+        isFlashAnimationVisible = isFlashAnimationVisible,
+        countdownSeconds = countdownSeconds,
         initialPreview = { context, previewView ->
             viewModel.initial(context, lifecycleOwner, previewView)
         },
@@ -86,9 +103,16 @@ fun InternalCameraScreen(
     state : InternalCameraState,
     captureCount : Int,
     progress: Float,
+    isFlashAnimationVisible: Boolean,
+    countdownSeconds: Int,
     initialPreview : (Context, PreviewView) -> Unit,
     releasePreview : (Context) -> Unit,
 ){
+    val previewAlpha by animateFloatAsState(
+        targetValue = if (isFlashAnimationVisible) 0.0f else 1.0f,
+        animationSpec = tween(durationMillis = if (isFlashAnimationVisible) 50 else 150),
+        label = "preview_alpha"
+    )
     BasicScaffold(
         modifier = Modifier.fillMaxSize(),
         topBar = {
@@ -98,7 +122,14 @@ fun InternalCameraScreen(
             )
         },
         bottomBar = {
-            BottomAppBar {  }
+            AppBottomBar{
+                Text(
+                    modifier = Modifier.fillMaxWidth().wrapContentHeight(),
+                    text = stringResource(id = R.string.camera_exclamation_text),
+                    style = AppTheme.typography.title,
+                    textAlign = TextAlign.Center
+                )
+            }
         }
     ){ paddingValues ->
         Column(
@@ -111,28 +142,50 @@ fun InternalCameraScreen(
             verticalArrangement = Arrangement.SpaceEvenly,
             horizontalAlignment = Alignment.CenterHorizontally,
         ){
-            Text(
-                modifier = Modifier.fillMaxWidth().wrapContentHeight(),
-                text = stringResource(id = R.string.camera_exclamation_text),
-                fontWeight = FontWeight.Bold,
-                fontSize = 24.sp,
-                textAlign = TextAlign.Center
-            )
             Box(
-                modifier = Modifier.aspectRatio(1.5f).fillMaxHeight()
+                modifier = Modifier.aspectRatio(1.5f).fillMaxHeight(0.8f),
             ) {
                 AndroidView(
-                    modifier = Modifier.align(Alignment.Center).fillMaxSize(),
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .fillMaxSize()
+                        .clip(RoundedCornerShape(AppTheme.size.icon))
+                        .alpha(previewAlpha)
+                        .background(
+                            color = AppTheme.colorScheme.bottom
+                        ),
                     factory = { context ->
                         PreviewView(context).also { preview ->
                             initialPreview(context, preview)
+
                         }
                     },
                     onRelease = { previewView ->
                         releasePreview(previewView.context)
                     }
-
                 )
+
+                // Countdown overlay
+                this@Column.AnimatedVisibility(
+                    visible = countdownSeconds > 0,
+                    enter = scaleIn(),
+                    exit = scaleOut(),
+                    modifier = Modifier.align(Alignment.Center)
+                ) {
+                    Text(
+                        text = countdownSeconds.toString(),
+                        fontSize = 80.sp,
+                        fontWeight = FontWeight.Bold,
+                        color = Color.White,
+                        modifier = Modifier
+                            .background(
+                                Color.Black.copy(alpha = 0.5f),
+                                shape = AppTheme.shapes.container
+                            )
+                            .padding(24.dp)
+                    )
+                }
+
             }
         }
     }
@@ -147,11 +200,15 @@ fun InternalScreenPreview(){
     val state by remember { mutableStateOf(InternalCameraState()) }
     val captureCount by remember{ mutableStateOf(1) }
     val progress by remember{ mutableStateOf(1f)}
+    val isFlashAnimationVisible by remember{ mutableStateOf(false)}
+    val countdownSeconds by remember{ mutableStateOf(3)}
     FourCutTogetherTheme() {
         InternalCameraScreen(
             state = state,
             captureCount = captureCount,
             progress = progress,
+            isFlashAnimationVisible = isFlashAnimationVisible,
+            countdownSeconds = countdownSeconds,
             initialPreview = { context, previewView ->
 
             },