implement OnboardingScreen

Nexters · Aug 1, 2024 · d5961cb · d5961cb
1 parent 70b65ee
commit d5961cb
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 4 deletions.
diff --git a/feature/main/src/main/java/com/goalpanzi/mission_mate/core/main/component/MainNavHost.kt b/feature/main/src/main/java/com/goalpanzi/mission_mate/core/main/component/MainNavHost.kt
@@ -32,8 +32,9 @@ internal fun MainNavHost(
                 onBackClick = { navigator.popBackStack() }
             )
             onboardingNavGraph(
-                onClickBoardSetup = { navigator.navigationToBoardSetup() },
-                onClickInvitationCode = { navigator.navigationToInvitationCode() }
+                onClickBoardSetup = {  },
+                onClickInvitationCode = {  },
+                onClickSetting = {  }
             )
             boardSetupNavGraph()
             invitationCodeNavGraph()

diff --git a/...rding/src/main/java/com/goalpanzi/mission_mate/feature/onboarding/OnboardingNavigation.kt b/...rding/src/main/java/com/goalpanzi/mission_mate/feature/onboarding/OnboardingNavigation.kt
@@ -20,10 +20,15 @@ fun NavController.navigateToInvitationCode() {
 
 fun NavGraphBuilder.onboardingNavGraph(
     onClickBoardSetup : () -> Unit,
-    onClickInvitationCode : () -> Unit
+    onClickInvitationCode : () -> Unit,
+    onClickSetting : () -> Unit
 ) {
     composable<RouteModel.Onboarding> {
-
+        OnboardingRoute(
+            onClickBoardSetup = onClickBoardSetup,
+            onClickInvitationCode = onClickInvitationCode,
+            onClickSetting = onClickSetting
+        )
     }
 }
 

diff --git a/...nboarding/src/main/java/com/goalpanzi/mission_mate/feature/onboarding/OnboardingScreen.kt b/...nboarding/src/main/java/com/goalpanzi/mission_mate/feature/onboarding/OnboardingScreen.kt
@@ -0,0 +1,124 @@
+package com.goalpanzi.mission_mate.feature.onboarding
+
+import androidx.compose.foundation.Image
+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.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+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.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.goalpanzi.mission_mate.core.designsystem.theme.ColorGray1_FF404249
+import com.goalpanzi.mission_mate.core.designsystem.theme.ColorWhite_FFFFFFFF
+import com.goalpanzi.mission_mate.core.designsystem.theme.MissionMateTypography
+import com.goalpanzi.mission_mate.feature.onboarding.component.OnboardingNavigationButton
+import com.goalpanzi.mission_mate.feature.onboarding.component.OutlinedTextBox
+import com.goalpanzi.mission_mate.core.designsystem.R as designSystemResource
+
+@Composable
+fun OnboardingRoute(
+    modifier: Modifier = Modifier,
+    onClickBoardSetup : () -> Unit,
+    onClickInvitationCode : () -> Unit,
+    onClickSetting : () -> Unit
+) {
+    OnboardingScreen(
+        modifier = modifier.fillMaxSize(),
+        onClickBoardSetup = onClickBoardSetup,
+        onClickInvitationCode = onClickInvitationCode,
+        onClickSetting = onClickSetting
+    )
+}
+
+@Composable
+fun OnboardingScreen(
+    modifier: Modifier = Modifier,
+    onClickBoardSetup : () -> Unit,
+    onClickInvitationCode : () -> Unit,
+    onClickSetting : () -> Unit
+) {
+    Box(
+        modifier = modifier.background(ColorWhite_FFFFFFFF)
+    ) {
+        Image(
+            modifier = Modifier
+                .fillMaxWidth()
+                .wrapContentHeight(),
+            painter = painterResource(id = designSystemResource.drawable.background_jeju),
+            contentDescription = null,
+            contentScale = ContentScale.FillWidth
+        )
+        Column(
+            modifier = modifier,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            IconButton(
+                modifier = Modifier
+                    .padding(end = 10.dp, top = 24.dp)
+                    .align(Alignment.End),
+                onClick = onClickSetting
+            ) {
+                Icon(
+                    painter = painterResource(id = designSystemResource.drawable.ic_setting),
+                    contentDescription = null
+                )
+            }
+            Text(
+                modifier = Modifier.padding(bottom = 52.dp),
+                text = stringResource(id = R.string.onboarding_ready_title),
+                textAlign = TextAlign.Center,
+                style = MissionMateTypography.heading_sm_regular,
+                color = ColorGray1_FF404249
+            )
+            OutlinedTextBox(
+                text = stringResource(id = R.string.onboarding_level_1), 
+                modifier = Modifier.padding(bottom = 23.dp)
+            )
+            Image(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 7.dp)
+                    .wrapContentHeight(),
+                painter = painterResource(id = designSystemResource.drawable.image_onboarding_jeju),
+                contentDescription = null,
+                contentScale = ContentScale.FillWidth
+            )
+            Row(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(horizontal = 24.dp),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(18.dp)
+            ) {
+                OnboardingNavigationButton(
+                    modifier = Modifier.weight(1f),
+                    titleId = R.string.onboarding_crating_board_title,
+                    descriptionId = R.string.onboarding_crating_board_desription,
+                    imageId = designSystemResource.drawable.ic_creating_board,
+                    onClick = onClickBoardSetup
+                )
+                OnboardingNavigationButton(
+                    modifier = Modifier.weight(1f),
+                    titleId = R.string.onboarding_code_title,
+                    descriptionId = R.string.onboarding_code_desription,
+                    imageId = designSystemResource.drawable.ic_invitation_friend,
+                    onClick = onClickInvitationCode
+                )
+            }
+        }
+    }
+
+}
diff --git a/feature/onboarding/src/main/res/values/strings.xml b/feature/onboarding/src/main/res/values/strings.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="onboarding_ready_title">미션 완수를 위해\n경쟁할 준비가 되었나요?</string>
+    <string name="onboarding_crating_board_title">미션보드\n생성하기</string>
+    <string name="onboarding_crating_board_desription">내 목표는 내가~</string>
+    <string name="onboarding_code_title">초대코드\n입력하기</string>
+    <string name="onboarding_code_desription">초대받고 왔지~</string>
+
+    <string name="onboarding_level_1">LV1. 제주도</string>
+</resources>