feat: 투표 추가 ui

YAPP-Github · Jan 24, 2024 · 7641e4e · 7641e4e
1 parent 4ef4f3b
commit 7641e4e
Show file tree

Hide file tree

Showing 8 changed files with 228 additions and 2 deletions.
diff --git a/...signsystem/src/main/java/com/susu/core/designsystem/component/appbar/icon/RegisterText.kt b/...signsystem/src/main/java/com/susu/core/designsystem/component/appbar/icon/RegisterText.kt
@@ -0,0 +1,33 @@
+package com.susu.core.designsystem.component.appbar.icon
+
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import com.susu.core.designsystem.R
+import com.susu.core.designsystem.theme.SusuTheme
+import com.susu.core.ui.extension.susuClickable
+
+@Composable
+fun RegisterText(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit = {},
+) {
+    Text(
+        modifier = modifier.susuClickable(
+            rippleEnabled = false,
+            onClick = onClick,
+        ),
+        text = stringResource(com.susu.core.ui.R.string.word_register),
+        style = SusuTheme.typography.title_xxs,
+    )
+}
+
+@Preview
+@Composable
+fun RegisterTextPreview() {
+    SusuTheme {
+        RegisterText()
+    }
+}
diff --git a/core/ui/src/main/res/values/strings.xml b/core/ui/src/main/res/values/strings.xml
@@ -41,4 +41,5 @@
     <string name="word_no">아니요</string>
     <string name="word_phone_number">연락처</string>
     <string name="word_memo">메모</string>
+    <string name="word_register">등록</string>
 </resources>
diff --git a/feature/community/src/main/java/com/susu/feature/community/CommunityScreen.kt b/feature/community/src/main/java/com/susu/feature/community/CommunityScreen.kt
@@ -7,15 +7,32 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import com.susu.core.designsystem.theme.SusuTheme
+import com.susu.core.ui.extension.susuClickable
+
+@Composable
+fun CommunityRoute(
+    padding: PaddingValues,
+    navigateVoteAdd: () -> Unit,
+) {
+    CommunityScreen(
+        padding = padding,
+        navigateVoteAdd = navigateVoteAdd,
+    )
+}
 
 @Composable
 fun CommunityScreen(
     padding: PaddingValues,
+    navigateVoteAdd: () -> Unit = {},
 ) {
     Text(
-        modifier = Modifier.padding(padding),
+        modifier = Modifier
+            .padding(padding)
+            .susuClickable(onClick = navigateVoteAdd),
         text = "투표",
+        fontSize = 48.sp,
     )
 }
 

diff --git a/feature/community/src/main/java/com/susu/feature/community/navigation/CommunityNavigation.kt b/feature/community/src/main/java/com/susu/feature/community/navigation/CommunityNavigation.kt
@@ -5,20 +5,40 @@ import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavOptions
 import androidx.navigation.compose.composable
+import com.susu.core.ui.DialogToken
+import com.susu.core.ui.SnackbarToken
 import com.susu.feature.community.CommunityScreen
+import com.susu.feature.community.voteadd.VoteAddRoute
+
+fun NavController.navigateVoteAdd() {
+    navigate(CommunityRoute.voteAddRoute)
+}
 
 fun NavController.navigateCommunity(navOptions: NavOptions) {
     navigate(CommunityRoute.route, navOptions)
 }
 
 fun NavGraphBuilder.communityNavGraph(
     padding: PaddingValues,
+    navigateVoteAdd: () -> Unit,
+    popBackStack: () -> Unit,
+    onShowSnackbar: (SnackbarToken) -> Unit,
+    onShowDialog: (DialogToken) -> Unit,
+    handleException: (Throwable, () -> Unit) -> Unit,
 ) {
     composable(route = CommunityRoute.route) {
-        CommunityScreen(padding)
+        CommunityScreen(
+            padding = padding,
+            navigateVoteAdd = navigateVoteAdd,
+        )
+    }
+
+    composable(route = CommunityRoute.voteAddRoute) {
+        VoteAddRoute()
     }
 }
 
 object CommunityRoute {
     const val route = "community"
+    const val voteAddRoute = "vote-add"
 }
diff --git a/feature/community/src/main/java/com/susu/feature/community/voteadd/VoteAddScreen.kt b/feature/community/src/main/java/com/susu/feature/community/voteadd/VoteAddScreen.kt
@@ -0,0 +1,136 @@
+package com.susu.feature.community.voteadd
+
+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.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.susu.core.designsystem.component.appbar.SusuDefaultAppBar
+import com.susu.core.designsystem.component.appbar.icon.BackIcon
+import com.susu.core.designsystem.component.appbar.icon.DeleteText
+import com.susu.core.designsystem.component.appbar.icon.EditText
+import com.susu.core.designsystem.component.appbar.icon.RegisterText
+import com.susu.core.designsystem.component.button.FilledButtonColor
+import com.susu.core.designsystem.component.button.SusuFilledButton
+import com.susu.core.designsystem.component.button.XSmallButtonStyle
+import com.susu.core.designsystem.component.textfield.SusuBasicTextField
+import com.susu.core.designsystem.component.textfieldbutton.SusuTextFieldFillMaxButton
+import com.susu.core.designsystem.component.textfieldbutton.TextFieldButtonColor
+import com.susu.core.designsystem.component.textfieldbutton.style.MediumTextFieldButtonStyle
+import com.susu.core.designsystem.component.textfieldbutton.style.TextFieldButtonStyle
+import com.susu.core.designsystem.theme.Gray10
+import com.susu.core.designsystem.theme.Orange60
+import com.susu.core.designsystem.theme.SusuTheme
+import com.susu.feature.community.R
+
+@Composable
+fun VoteAddRoute() {
+    VoteAddScreen()
+}
+
+@Composable
+fun VoteAddScreen(
+    onClickBack: () -> Unit = {},
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(SusuTheme.colorScheme.background10),
+    ) {
+        SusuDefaultAppBar(
+            leftIcon = {
+                BackIcon(
+                    onClick = onClickBack,
+                )
+            },
+            title = stringResource(R.string.vote_add_screen_title),
+            actions = {
+                RegisterText(
+                    modifier = Modifier.padding(end = SusuTheme.spacing.spacing_m),
+                )
+            },
+        )
+
+        Column(
+            modifier = Modifier
+                .padding(SusuTheme.spacing.spacing_m)
+                .weight(1f, fill = false)
+                .verticalScroll(rememberScrollState()),
+        ) {
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxxxs)
+            ) {
+                listOf("결혼식", "장례식", "돌잔치", "생일 기념일", "자유").forEach {
+                    SusuFilledButton(
+                        color = FilledButtonColor.Black,
+                        style = XSmallButtonStyle.height28,
+                        text = it,
+                    )
+                }
+            }
+
+            Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_m))
+
+            SusuBasicTextField(
+                text = "",
+                textStyle = SusuTheme.typography.text_xxs,
+                maxLines = 10,
+                placeholder = stringResource(R.string.vote_add_screen_textfield_placeholder),
+            )
+
+            Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xl))
+
+            Column(
+                verticalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxs)
+            ) {
+                repeat(5) {
+                    SusuTextFieldFillMaxButton(
+                        style = MediumTextFieldButtonStyle.height52,
+                        color = TextFieldButtonColor.Gray,
+                        placeholder = stringResource(R.string.vote_add_screen_textfield_button_placeholder),
+                    )
+                }
+            }
+        }
+
+        Icon(
+            modifier = Modifier
+                .imePadding()
+                .clip(CircleShape)
+                .background(Orange60)
+                .padding(SusuTheme.spacing.spacing_xxxxs)
+                .align(Alignment.CenterHorizontally),
+            painter = painterResource(id = com.susu.core.designsystem.R.drawable.ic_floating_button_add),
+            contentDescription = stringResource(R.string.vote_add_screen_content_description_vote_add_button),
+            tint = Gray10,
+        )
+    }
+}
+
+@Preview
+@Composable
+fun VoteAddScreenPreview() {
+    SusuTheme {
+        VoteAddScreen()
+    }
+}
diff --git a/feature/community/src/main/res/values/strings.xml b/feature/community/src/main/res/values/strings.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="vote_add_screen_title">새 투표 작성</string>
+    <string name="vote_add_screen_textfield_placeholder">투표 내용을 작성해주세요</string>
+    <string name="vote_add_screen_textfield_button_placeholder">선택지를 입력하세요</string>
+    <string name="vote_add_screen_content_description_vote_add_button">투표 추가 버튼</string>
+</resources>
diff --git a/feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigator.kt b/feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigator.kt
@@ -10,7 +10,9 @@ import androidx.navigation.compose.rememberNavController
 import androidx.navigation.navOptions
 import com.susu.core.designsystem.theme.SusuTheme
 import com.susu.core.model.Ledger
+import com.susu.feature.community.navigation.CommunityRoute
 import com.susu.feature.community.navigation.navigateCommunity
+import com.susu.feature.community.navigation.navigateVoteAdd
 import com.susu.feature.loginsignup.navigation.LoginSignupRoute
 import com.susu.feature.mypage.navigation.navigateMyPage
 import com.susu.feature.mypage.navigation.navigateMyPageInfo
@@ -58,6 +60,7 @@ internal class MainNavigator(
                 SentRoute.sentEnvelopeRoute,
                 SentRoute.sentEnvelopeDetailRoute,
                 SentRoute.sentEnvelopeEditRoute,
+                CommunityRoute.voteAddRoute,
             ),
             -> SusuTheme.colorScheme.background10
 
@@ -162,6 +165,10 @@ internal class MainNavigator(
         navController.navigateReceivedEnvelopeEdit()
     }
 
+    fun navigateVoteAdd() {
+        navController.navigateVoteAdd()
+    }
+
     fun popBackStackIfNotHome() {
         if (!isSameCurrentDestination(SentRoute.route)) {
             navController.popBackStack()

diff --git a/feature/navigator/src/main/java/com/susu/feature/navigator/MainScreen.kt b/feature/navigator/src/main/java/com/susu/feature/navigator/MainScreen.kt
@@ -127,6 +127,11 @@ internal fun MainScreen(
 
                 communityNavGraph(
                     padding = innerPadding,
+                    navigateVoteAdd = navigator::navigateVoteAdd,
+                    popBackStack = navigator::popBackStackIfNotHome,
+                    onShowSnackbar = viewModel::onShowSnackbar,
+                    onShowDialog = viewModel::onShowDialog,
+                    handleException = viewModel::handleException,
                 )
 
                 myPageNavGraph(