[UI/#14] 회원가입 뷰 / UI 구현

feature/src/main/java/com/terning/feature/onboarding/signup/component/SignUpBottomSheet.kt → core/src/main/java/com/terning/core/designsystem/component/bottomsheet/SignUpBottomSheet.kt

@@ -1,4 +1,4 @@
-package com.terning.feature.onboarding.signup.component
+package com.terning.core.designsystem.component.bottomsheet
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
@@ -11,28 +11,33 @@ import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Text
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
-import com.terning.core.designsystem.component.bottomsheet.TerningBasicBottomSheet
+import com.terning.core.R
 import com.terning.core.designsystem.component.button.RoundButton
 import com.terning.core.designsystem.theme.TerningTheme
 import com.terning.core.extension.noRippleClickable
-import com.terning.feature.R
+import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SignUpBottomSheet(
     modifier: Modifier = Modifier,
     onDismiss: () -> Unit,
-    onStartDialog: () -> Unit
+    onSaveClick: () -> Unit
 ) {
+    val scope = rememberCoroutineScope()
+    val sheetState = rememberModalBottomSheetState()
+
     TerningBasicBottomSheet(
         content = {
             Column {
@@ -52,13 +57,21 @@ fun SignUpBottomSheet(
                     paddingVertical = 19.dp,
                     cornerRadius = 10.dp,
                     text = R.string.sign_up_dialog_start,
-                    onButtonClick = { onStartDialog() },
+                    onButtonClick = {
+                        scope.launch { sheetState.hide() }
+                            .invokeOnCompletion {
+                                if (!sheetState.isVisible) {
+                                    onSaveClick()
+                                }
+                            }
+                    },
                     modifier = modifier.padding(horizontal = 24.dp)
                 )
                 Spacer(modifier = modifier.padding(bottom = 15.dp))
             }
         },
-        onDismissRequest = { onDismiss() }
+        onDismissRequest = { onDismiss() },
+        sheetState = sheetState
     )
 }
 

core/src/main/java/com/terning/core/designsystem/component/button/TerningBasicButton.kt

@@ -5,7 +5,6 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material.ripple.LocalRippleTheme
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
@@ -22,8 +21,8 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.terning.core.R
-import com.terning.core.designsystem.theme.Black
 import com.terning.core.designsystem.theme.Grey150
+import com.terning.core.designsystem.theme.Grey350
 import com.terning.core.designsystem.theme.TerningMain
 import com.terning.core.designsystem.theme.TerningMain2
 import com.terning.core.designsystem.theme.TerningPointTheme
@@ -55,7 +54,7 @@ fun TerningBasicButton(
                 containerColor = backgroundColor,
                 contentColor = White,
                 disabledContainerColor = Grey150,
-                disabledContentColor = Black
+                disabledContentColor = Grey350
             ),
             shape = shape,
             onClick = { onButtonClick() }

core/src/main/java/com/terning/core/designsystem/component/textfield/NameTextField.kt

@@ -7,26 +7,25 @@ import androidx.compose.ui.graphics.SolidColor
 import com.terning.core.designsystem.theme.Black
 import com.terning.core.designsystem.theme.Grey300
 import com.terning.core.designsystem.theme.Grey400
-import com.terning.core.designsystem.theme.Grey500
-import com.terning.core.designsystem.theme.TerningMain
 import com.terning.core.designsystem.theme.TerningTheme
 
 @Composable
 fun NameTextField(
-    text: String,
+    value: String,
     onValueChange: (String) -> Unit,
     hint: String,
+    drawLineColor: Color,
     helperMessage: String,
+    helperColor: Color,
     helperIcon: Int? = null,
-    helperColor: Color = TerningMain,
 ) {
     TerningBasicTextField(
-        value = text,
+        value = value,
         onValueChange = onValueChange,
         modifier = Modifier,
         textStyle = TerningTheme.typography.detail1,
         textColor = Black,
-        drawLineColor = Grey500,
+        drawLineColor = drawLineColor,
         cursorBrush = SolidColor(Grey400),
         hint = hint,
         hintColor = Grey300,

core/src/main/java/com/terning/core/designsystem/component/textfield/SearchTextField.kt

@@ -34,6 +34,7 @@ fun SearchTextField(
         leftIconColor = TerningMain,
         enabled = enabled,
         readOnly = readOnly,
-        onDoneAction = onDoneAction
+        onDoneAction = onDoneAction,
+        helperColor = TerningMain
     )
 }

core/src/main/java/com/terning/core/designsystem/component/textfield/TerningBasicTextField.kt

@@ -51,8 +51,8 @@ fun TerningBasicTextField(
     hint: String = "",
     helperMessage: String = "",
     helperIcon: Int? = null,
-    helperColor: Color = TerningMain,
     enabled: Boolean = true,
+    helperColor: Color,
     readOnly: Boolean = false,
     onDoneAction: (() -> Unit)? = null,
 ) {

core/src/main/java/com/terning/core/designsystem/component/topappbar/TerningBasicTopAppBar.kt

@@ -43,7 +43,8 @@ fun TerningBasicTopAppBar(
                 IconButton(
                     onClick = {
                         onBackButtonClick.invoke()
-                    }) {
+                    }
+                ) {
                     Icon(
                         painter = painterResource(id = R.drawable.ic_back),
                         contentDescription = stringResource(id = R.string.ic_back),

core/src/main/res/values/strings.xml

@@ -20,4 +20,9 @@
     <string name="sort_button_description">정렬 기준</string>
     <string name="sort_bottom_sheet_title">공고 정렬 순서</string>
 
+    <!--bottom_sheet-->
+    <string name="sign_up_bottom_sheet_title">프로필 이미지 선택</string>
+    <string name="sign_up_bottom_sheet_description">회원가입 바텀시트</string>
+    <string name="sign_up_dialog_start">저장하기</string>
+
 </resources>

feature/src/main/java/com/terning/feature/main/MainNavigator.kt

@@ -12,7 +12,7 @@ import androidx.navigation.navOptions
 import com.terning.feature.calendar.navigation.navigateCalendar
 import com.terning.feature.home.navigation.navigateHome
 import com.terning.feature.mypage.navigation.navigateMyPage
-import com.terning.feature.search.search.navigation.Search
+import com.terning.feature.onboarding.signin.navigation.SignIn
 import com.terning.feature.search.search.navigation.navigateSearch
 
 class MainNavigator(
@@ -22,7 +22,7 @@ class MainNavigator(
         @Composable get() = navController
             .currentBackStackEntryAsState().value?.destination
 
-    val startDestination = Search
+    val startDestination = SignIn
 
     val currentTab: MainTab?
         @Composable get() = MainTab.find { tab ->

feature/src/main/java/com/terning/feature/main/MainScreen.kt

@@ -23,6 +23,7 @@ import com.terning.core.util.NoRippleInteractionSource
 import com.terning.feature.calendar.navigation.calendarNavGraph
 import com.terning.feature.home.navigation.homeNavGraph
 import com.terning.feature.mypage.navigation.myPageNavGraph
+import com.terning.feature.onboarding.filtering.navigation.filteringNavGraph
 import com.terning.feature.onboarding.signin.navigation.signInNavGraph
 import com.terning.feature.onboarding.signup.navigation.signUpNavGraph
 import com.terning.feature.search.search.navigation.searchNavGraph
@@ -56,7 +57,8 @@ fun MainScreen(
                 searchNavGraph(navHostController = navigator.navController)
                 myPageNavGraph()
                 signInNavGraph(navHostController = navigator.navController)
-                signUpNavGraph()
+                signUpNavGraph(navHostController = navigator.navController)
+                filteringNavGraph(navHostController = navigator.navController)
                 searchProcessNavGraph(navHostController = navigator.navController)
             }
         }

feature/src/main/java/com/terning/feature/onboarding/filtering/FilteringRoute.kt

@@ -1,9 +1,17 @@
 package com.terning.feature.onboarding.filtering
 
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import com.terning.feature.onboarding.filtering.navigation.FilteringNavigation
+import androidx.navigation.NavController
 
 @Composable
-fun FilteringRoute(){
+fun FilteringRoute(
+    navController: NavController
+) {
+    FilteringScreen()
+}
 
-}
+@Composable
+fun FilteringScreen() {
+    Text(text = "filtering")
+}

feature/src/main/java/com/terning/feature/onboarding/filtering/navigation/FilteringNavigation.kt

@@ -1,4 +1,30 @@
 package com.terning.feature.onboarding.filtering.navigation
 
-class FilteringNavigation {
-}
+import androidx.navigation.NavController
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.NavHostController
+import androidx.navigation.NavOptions
+import androidx.navigation.compose.composable
+import com.terning.core.navigation.Route
+import com.terning.feature.onboarding.filtering.FilteringRoute
+import kotlinx.serialization.Serializable
+
+fun NavController.navigateFiltering(navOptions: NavOptions? = null) {
+    navigate(
+        route = Filtering,
+        navOptions = navOptions
+    )
+}
+
+fun NavGraphBuilder.filteringNavGraph(
+    navHostController: NavHostController
+) {
+    composable<Filtering> {
+        FilteringRoute(
+            navController = navHostController
+        )
+    }
+}
+
+@Serializable
+data object Filtering : Route

feature/src/main/java/com/terning/feature/onboarding/signin/SignInRoute.kt

@@ -26,6 +26,7 @@ import com.terning.core.extension.toast
 import com.terning.feature.R
 import com.terning.feature.home.navigation.navigateHome
 import com.terning.feature.onboarding.signin.component.KakaoButton
+import com.terning.feature.onboarding.signup.navigation.navigateSignUp
 
 @Composable
 fun SignInRoute(
@@ -41,7 +42,7 @@ fun SignInRoute(
             .collect { sideEffect ->
                 when (sideEffect) {
                     is SignInSideEffect.ShowToast -> context.toast(sideEffect.message)
-                    is SignInSideEffect.NavigateToHome -> navController.navigateHome()
+                    is SignInSideEffect.NavigateToHome -> navController.navigateSignUp()
                 }
             }
     }
@@ -56,7 +57,6 @@ fun SignInScreen(
     modifier: Modifier = Modifier,
     onSignInClick: () -> Unit = {},
 ) {
-
     Column(
         modifier = modifier
             .wrapContentHeight()

feature/src/main/java/com/terning/feature/onboarding/signin/navigation/SignInNavigation.kt

@@ -5,7 +5,7 @@ import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavHostController
 import androidx.navigation.NavOptions
 import androidx.navigation.compose.composable
-import com.terning.core.navigation.MainTabRoute
+import com.terning.core.navigation.Route
 import com.terning.feature.onboarding.signin.SignInRoute
 import kotlinx.serialization.Serializable
 
@@ -27,4 +27,4 @@ fun NavGraphBuilder.signInNavGraph(
 }
 
 @Serializable
-data object SignIn : MainTabRoute
+data object SignIn : Route