[UI/YAF-82] 미션 메인 UI를 구현합니다.

core/common/src/main/java/com/yapp/common/navigation/OrbitNavigator.kt

@@ -7,13 +7,13 @@ import androidx.navigation.NavHostController
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import androidx.navigation.navOptions
-import com.yapp.common.navigation.destination.OnboardingDestination
+import com.yapp.common.navigation.destination.MissionDestination
 import com.yapp.common.navigation.destination.TopLevelDestination
 
 class OrbitNavigator(
     val navController: NavHostController,
 ) {
-    val startDestination = OnboardingDestination.Route.route
+    val startDestination = MissionDestination.Route.route
 
     private val currentDestination: NavDestination?
         @Composable get() = navController

core/common/src/main/java/com/yapp/common/navigation/Routes.kt

@@ -24,4 +24,9 @@ object Routes {
         const val ROUTE = "mypage_route"
         const val MYPAGE = "mypage"
     }
+
+    object Mission {
+        const val ROUTE = "mission_route"
+        const val MISSION = "mission"
+    }
 }

core/common/src/main/java/com/yapp/common/navigation/destination/MissionDestination.kt

@@ -0,0 +1,8 @@
+package com.yapp.common.navigation.destination
+
+import com.yapp.common.navigation.Routes
+
+sealed class MissionDestination(val route: String) {
+    data object Route : MissionDestination(Routes.Mission.ROUTE)
+    data object Mission : MissionDestination(Routes.Mission.MISSION)
+}

core/designsystem/src/main/java/com/yapp/designsystem/theme/Theme.kt

@@ -1,16 +1,10 @@
 package com.yapp.designsystem.theme
 
-import android.app.Activity
-import android.graphics.drawable.ColorDrawable
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.ProvideTextStyle
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.SideEffect
 import androidx.compose.runtime.remember
-import androidx.compose.ui.graphics.toArgb
-import androidx.compose.ui.platform.LocalView
-import androidx.core.view.WindowCompat
 
 fun orbitColors() = OrbitColors()
 fun orbitFonts() = OrbitTypography()
@@ -31,15 +25,4 @@ fun OrbitTheme(
     ) {
         ProvideTextStyle(typography.body2Medium, content = content)
     }
-
-    val view = LocalView.current
-
-    if (!view.isInEditMode) {
-        SideEffect {
-            val window = (view.context as Activity).window
-            window.statusBarColor = colors.gray_900.toArgb()
-            window.setBackgroundDrawable(ColorDrawable(colors.gray_900.toArgb()))
-            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
-        }
-    }
 }

feature/mission/.gitignore

@@ -0,0 +1 @@
+/build

feature/mission/build.gradle.kts

@@ -0,0 +1,19 @@
+import com.yapp.convention.setNamespace
+
+plugins {
+    id("orbit.android.feature")
+}
+
+android {
+    setNamespace("feature.mission")
+}
+
+dependencies {
+    implementation(projects.core.ui)
+    implementation(projects.core.common)
+    implementation(libs.orbit.core)
+    implementation(libs.orbit.compose)
+    implementation(libs.orbit.viewmodel)
+    implementation(libs.coil.compose)
+    implementation(libs.coil.gif)
+}

feature/mission/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

feature/mission/src/main/AndroidManifest.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+</manifest>

feature/mission/src/main/java/com/yapp/mission/MissionNavGraph.kt

@@ -0,0 +1,20 @@
+package com.yapp.mission
+
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.compose.composable
+import androidx.navigation.navigation
+import com.yapp.common.navigation.OrbitNavigator
+import com.yapp.common.navigation.destination.MissionDestination
+
+fun NavGraphBuilder.missionNavGraph(
+    navigator: OrbitNavigator,
+) {
+    navigation(
+        route = MissionDestination.Route.route,
+        startDestination = MissionDestination.Mission.route,
+    ) {
+        composable(route = MissionDestination.Mission.route) {
+            MissionRoute()
+        }
+    }
+}

feature/mission/src/main/java/com/yapp/mission/MissionScreen.kt

@@ -0,0 +1,130 @@
+package com.yapp.mission
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+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.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.yapp.designsystem.theme.OrbitTheme
+import com.yapp.ui.component.button.OrbitButton
+import com.yapp.ui.utils.heightForScreenPercentage
+
+@Composable
+fun MissionRoute() {
+    MissionScreen()
+}
+
+@Composable
+fun MissionScreen() {
+    Box(
+        modifier = Modifier.fillMaxSize(),
+    ) {
+        Image(
+            painter = painterResource(id = core.designsystem.R.drawable.img_mission_main_background),
+            contentDescription = null,
+            contentScale = ContentScale.Crop,
+            modifier = Modifier.matchParentSize(),
+        )
+
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = 20.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.SpaceBetween,
+        ) {
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                Spacer(modifier = Modifier.heightForScreenPercentage(0.110f))
+                MissionTag(label = "기상미션")
+                Spacer(modifier = Modifier.heightForScreenPercentage(0.0418f))
+                MissionLabel(label = "10회를 흔들어", style = OrbitTheme.typography.headline2Medium)
+                Spacer(modifier = Modifier.heightForScreenPercentage(0.01f))
+                MissionLabel(label = "부적을 뒤집어줘", style = OrbitTheme.typography.title1Bold)
+            }
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth(),
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                Image(
+                    painter = painterResource(id = core.designsystem.R.drawable.ic_mission_main),
+                    contentDescription = "",
+                    modifier = Modifier.wrapContentSize(),
+                )
+            }
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                OrbitButton(
+                    modifier = Modifier.fillMaxWidth(),
+                    label = "미션 시작",
+                    onClick = {},
+                    enabled = true,
+                )
+                Spacer(modifier = Modifier.heightForScreenPercentage(0.027f))
+                MissionLabel(
+                    label = "미션하지 않기",
+                    style = OrbitTheme.typography.body1SemiBold,
+                    clickable = true,
+                )
+                Spacer(modifier = Modifier.heightForScreenPercentage(0.0714f))
+            }
+        }
+    }
+}
+
+@Composable
+fun MissionTag(label: String) {
+    Box(
+        modifier = Modifier
+            .background(
+                color = OrbitTheme.colors.main.copy(alpha = 0.1f),
+                shape = RoundedCornerShape(30.dp),
+            )
+            .padding(vertical = 4.dp, horizontal = 12.dp),
+    ) {
+        Text(
+            text = label,
+            color = OrbitTheme.colors.main,
+            style = OrbitTheme.typography.body2Medium,
+        )
+    }
+}
+
+@Composable
+fun MissionLabel(
+    label: String,
+    style: TextStyle,
+    clickable: Boolean = false,
+) {
+    Text(
+        text = label,
+        color = OrbitTheme.colors.white,
+        style = style,
+        modifier = if (clickable) Modifier.clickable { } else Modifier,
+    )
+}
+
+@Composable
+@Preview
+fun MissionRoutePreview() {
+    MissionScreen()
+}

feature/navigator/build.gradle.kts

@@ -13,4 +13,5 @@ dependencies {
     implementation(projects.feature.home)
     implementation(projects.feature.mypage)
     implementation(projects.feature.onboarding)
+    implementation(projects.feature.mission)
 }

feature/navigator/src/main/java/com/yapp/navigator/MainActivity.kt

@@ -4,7 +4,9 @@ import android.annotation.SuppressLint
 import android.content.pm.ActivityInfo
 import android.os.Bundle
 import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import com.yapp.designsystem.theme.OrbitTheme
 import dagger.hilt.android.AndroidEntryPoint
 
@@ -14,6 +16,12 @@ class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
+        enableEdgeToEdge(
+            statusBarStyle = SystemBarStyle.light(
+                android.graphics.Color.TRANSPARENT,
+                android.graphics.Color.TRANSPARENT,
+            ),
+        )
         setContent {
             OrbitTheme {
                 OrbitNavHost()

feature/navigator/src/main/java/com/yapp/navigator/OrbitBottomNavigationBar.kt

@@ -25,6 +25,7 @@ import kotlinx.collections.immutable.ImmutableList
 
 @Composable
 internal fun OrbitBottomNavigationBar(
+    modifier: Modifier = Modifier,
     visible: Boolean,
     currentTab: TopLevelDestination?,
     entries: ImmutableList<TopLevelDestination>,

feature/navigator/src/main/java/com/yapp/navigator/OrbitNavHost.kt

@@ -1,6 +1,8 @@
 package com.yapp.navigator
 
-import androidx.compose.foundation.layout.padding
+import android.annotation.SuppressLint
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -11,16 +13,18 @@ import com.yapp.common.navigation.destination.TopLevelDestination
 import com.yapp.common.navigation.rememberOrbitNavigator
 import com.yapp.designsystem.theme.OrbitTheme
 import com.yapp.home.homeNavGraph
+import com.yapp.mission.missionNavGraph
 import com.yapp.mypage.myPageNavGraph
 import kotlinx.collections.immutable.toImmutableList
 
+@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
 @Composable
 internal fun OrbitNavHost(
     modifier: Modifier = Modifier,
     navigator: OrbitNavigator = rememberOrbitNavigator(),
 ) {
     Scaffold(
-        modifier = modifier,
+        modifier = modifier.fillMaxSize(),
         bottomBar = {
             OrbitBottomNavigationBar(
                 visible = false,
@@ -30,11 +34,13 @@ internal fun OrbitNavHost(
             )
         },
         containerColor = OrbitTheme.colors.gray_900,
-    ) { innerPadding ->
+    ) {
         NavHost(
             navController = navigator.navController,
             startDestination = navigator.startDestination,
-            modifier = Modifier.padding(innerPadding),
+            modifier = Modifier
+                .fillMaxSize()
+                .navigationBarsPadding(),
         ) {
             onboardingNavGraph(
                 navigator = navigator,
@@ -46,6 +52,9 @@ internal fun OrbitNavHost(
             myPageNavGraph(
                 navigator = navigator,
             )
+            missionNavGraph(
+                navigator = navigator,
+            )
         }
     }
 }

feature/onboarding/src/main/java/com/kms/onboarding/OnBoardingScreen.kt

@@ -5,8 +5,6 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.imePadding
-import androidx.compose.foundation.layout.navigationBarsPadding
-import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import com.kms.onboarding.component.OnBoardingTopAppBar
@@ -29,8 +27,6 @@ fun OnboardingScreen(
         modifier = Modifier
             .fillMaxSize()
             .background(OrbitTheme.colors.gray_900)
-            .statusBarsPadding()
-            .navigationBarsPadding()
             .imePadding(),
     ) {
         if (showTopAppBar) {

settings.gradle.kts

@@ -39,3 +39,4 @@ include(":feature:home")
 include(":feature:navigator")
 include(":feature:mypage")
 include(":feature:onboarding")
+include(":feature:mission")