Merge pull request #49 from Nexters/feature/add-gathering-name-in-proposal

만남 초대장 화면 디자인을 적용합니다.

Author: eshc123

app/src/main/AndroidManifest.xml

@@ -19,6 +19,7 @@
             android:exported="true"
             android:label="@string/app_name"
             android:theme="@style/Theme.Tuk"
+            android:screenOrientation="portrait"
             android:windowSoftInputMode="adjustResize">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

feature/proposal-create/src/main/java/com/plottwist/feature/proposal_create/CreateProposalScreen.kt

@@ -27,11 +27,13 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.BlurredEdgeTreatment
 import androidx.compose.ui.draw.blur
+import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.graphics.drawscope.clipRect
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
@@ -154,8 +156,9 @@ private fun CreateProposalScreen(
         postCardAnimated2 = true
     }
     Box(
-        modifier = modifier.fillMaxSize().background(color = Gray000)
+        modifier = modifier.fillMaxSize().background(color = Gray000).clipToBounds()
     ) {
+        CreateProposalGradientBackgroundImage()
         Column(
             modifier = Modifier.fillMaxSize()
         ) {
@@ -201,19 +204,40 @@ private fun CreateProposalScreen(
                     onCloseSelectedGatheringClick = onCloseSelectedGatheringClick
                 )
 
-
-                StableImage(
-                    modifier = Modifier
+                Box(
+                    Modifier
                         .fillMaxWidth()
-                        .offset(y=  animatedOffset2.value + animatedOffset.value)
-                        .aspectRatio(260f/364f),
-                    drawableResId = R.drawable.image_post_cover,
-                    contentScale = ContentScale.FillWidth
-                )
+                        .offset(y= (10f * screenHeight / 812f).dp + animatedOffset2.value + animatedOffset.value)
+                ) {
+                    StableImage(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .aspectRatio(260f/364f),
+                        drawableResId = R.drawable.image_post_cover,
+                        contentScale = ContentScale.FillWidth
+                    )
+
+                    Text(
+                        modifier = Modifier.align(Alignment.BottomCenter).padding(
+                            bottom = (140f * screenHeight / 812f).dp
+                        ),
+                        text = selectedGatheringName + "\n친구들에게",
+                        style = TukSerifTypography.body16M,
+                        textAlign = TextAlign.Center
+                    )
+                }
+
             }
 
             Column (
-                modifier = Modifier.fillMaxWidth().background(Gray000)
+                modifier = Modifier.fillMaxWidth()
+                    .then(
+                        if(postCardAnimated2) {
+                            Modifier.background(Gray000)
+                        } else {
+                            Modifier
+                        }
+                    )
             ){
                 AnimatedVisibility(postCardAnimated2) {
                     HorizontalDivider(
@@ -256,7 +280,7 @@ fun CreateProposalGradientBackgroundImage(
                 localConfiguration.screenWidthDp.dp * GRADIENT_BACKGROUND_IMAGE_SCALE
             ),
         contentScale = ContentScale.Crop,
-        drawableResId = R.drawable.image_proposal_gradient
+        drawableResId = R.drawable.image_home_gradient
     )
 }
 
@@ -285,6 +309,8 @@ fun CreateProposalTitle(
 }
 
 
+
+
 private const val GRADIENT_BACKGROUND_IMAGE_SCALE = 3
 
 @Preview
@@ -296,7 +322,7 @@ private fun CreateProposalScreenPreview() {
         whereLabel = "where",
         whenLabel = "when",
         whatLabel = "what",
-        selectedGatheringName = "",
+        selectedGatheringName = "다음 만남은 계획대로 되지 않아",
         isGatheringSelected = false,
         onBackClicked = {},
         onSelectGatheringClick = {},

feature/proposal-create/src/main/java/com/plottwist/feature/proposal_create/navigation/CreateProposalNavigation.kt

@@ -6,7 +6,9 @@ import androidx.navigation.NavOptions
 import androidx.navigation.compose.composable
 import com.plottwist.core.ui.extension.popSlideInVertically
 import com.plottwist.core.ui.extension.popSlideOutVertically
+import com.plottwist.core.ui.extension.slideIn
 import com.plottwist.core.ui.extension.slideInVertically
+import com.plottwist.core.ui.extension.slideOut
 import com.plottwist.core.ui.extension.slideOutVertically
 import com.plottwist.core.ui.navigation.Route
 import com.plottwist.feature.proposal_create.CreateProposalScreen
@@ -32,10 +34,12 @@ fun NavGraphBuilder.createProposalNavGraph(
     navigateToCompleteProposeScreen: (String) -> Unit,
 ) {
     composable<Route.CreateProposal> (
-        enterTransition = { slideInVertically() },
-        exitTransition = { null },
-        popEnterTransition = { null },
-        popExitTransition = { popSlideOutVertically() }
+        enterTransition = {
+            slideIn()
+        },
+        exitTransition = {
+            slideOut()
+        }
     ) { backStackEntry ->
         CreateProposalScreen(
             onBack = onBack,

feature/proposal-create/src/main/java/com/plottwist/feature/proposal_create/navigation/SelectGatheringNavigation.kt

@@ -29,6 +29,9 @@ fun NavGraphBuilder.selectGatheringNavGraph(
 ) {
     composable<Route.SelectGathering> (
         enterTransition = { slideIn() },
+        popEnterTransition = {
+            null
+        },
         popExitTransition = { slideOut() }
     ) {
         SelectGatheringScreen(