feat: 필터 ui 구현

core/designsystem/src/main/java/com/susu/core/designsystem/component/container/SusuRecentSearchContainer.kt

@@ -59,7 +59,7 @@ fun SusuRecentSearchContainer(
                     .clip(CircleShape)
                     .susuClickable(onClick = onClickCloseIcon),
                 painter = painterResource(id = R.drawable.ic_recent_search_close),
-                contentDescription = stringResource(R.string.content_description_close_icon),
+                contentDescription = stringResource(com.susu.core.ui.R.string.content_description_close_icon),
             )
         }
     }

core/designsystem/src/main/java/com/susu/core/designsystem/component/textfieldbutton/SusuTextFieldButton.kt

@@ -333,7 +333,7 @@ private fun InnerButtons(
                 .clip(CircleShape)
                 .size(closeIconSize)
                 .susuClickable(onClick = onClickCloseIcon),
-            painter = painterResource(id = R.drawable.ic_close),
+            painter = painterResource(id = com.susu.core.ui.R.drawable.ic_close),
             contentDescription = "",
         )
     }

core/designsystem/src/main/java/com/susu/core/designsystem/theme/Spacing.kt

@@ -19,6 +19,7 @@ internal val Spacing = SusuSpacing(
     spacing_xxl = 32.dp,
     spacing_xxxl = 36.dp,
     spacing_xxxxl = 40.dp,
+    spacing_xxxxxxl = 48.dp,
 )
 
 @Suppress("ConstructorParameterNaming")
@@ -37,6 +38,7 @@ data class SusuSpacing(
     val spacing_xxl: Dp,
     val spacing_xxxl: Dp,
     val spacing_xxxxl: Dp,
+    val spacing_xxxxxxl: Dp,
 )
 
 val LocalSpacing = staticCompositionLocalOf {
@@ -54,5 +56,6 @@ val LocalSpacing = staticCompositionLocalOf {
         spacing_xxl = Dp.Unspecified,
         spacing_xxxl = Dp.Unspecified,
         spacing_xxxxl = Dp.Unspecified,
+        spacing_xxxxxxl = Dp.Unspecified,
     )
 }

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

@@ -8,7 +8,6 @@
     <string name="money_unit">원</string>
     <string name="money_unit_format">%s원</string>
     <string name="content_description_search_icon">검색 아이콘</string>
-    <string name="content_description_close_icon">닫기 아이콘</string>
     <string name="content_description_back_icon">뒤로가기 아이콘</string>
     <string name="content_description_logo_image">로고 이미지</string>
     <string name="content_description_notification_icon">알림 아이콘</string>

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

@@ -18,9 +18,11 @@
     <string name="word_category">카테고리</string>
     <string name="word_date">날짜</string>
     <string name="content_description_add_button">더하기 버튼</string>
+    <string name="content_description_close_icon">닫기 아이콘</string>
     <string name="word_male">남성</string>
     <string name="word_female">여성</string>
     <string name="word_birth">출생년도</string>
     <string name="word_next">다음</string>
     <string name="word_done">완료</string>
+    <string name="word_apply_filter">필터 적용하기</string>
 </resources>

feature/navigator/src/main/java/com/susu/feature/navigator/MainNavigator.kt

@@ -39,7 +39,7 @@ internal class MainNavigator(
     val statusBarColor: Color
         @Composable
         get() = when (currentDestination?.route) {
-            in listOf(ReceivedRoute.ledgerSearchRoute) -> SusuTheme.colorScheme.background10
+            in listOf(ReceivedRoute.ledgerSearchRoute, ReceivedRoute.ledgerFilterRoute) -> SusuTheme.colorScheme.background10
             else -> SusuTheme.colorScheme.background15
         }
 

feature/received/src/main/java/com/susu/feature/received/ledgerfilter/LedgerFilterScreen.kt

@@ -1,30 +1,178 @@
 package com.susu.feature.received.ledgerfilter
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Arrangement
+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.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+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.button.FilledButtonColor
+import com.susu.core.designsystem.component.button.LinedButtonColor
+import com.susu.core.designsystem.component.button.RefreshButton
+import com.susu.core.designsystem.component.button.SmallButtonStyle
+import com.susu.core.designsystem.component.button.SusuFilledButton
+import com.susu.core.designsystem.component.button.SusuLinedButton
+import com.susu.core.designsystem.component.button.XSmallButtonStyle
+import com.susu.core.designsystem.theme.Gray10
 import com.susu.core.designsystem.theme.SusuTheme
+import com.susu.core.ui.extension.susuClickable
+import com.susu.feature.received.R
+import com.susu.feature.received.ledgerfilter.component.DateText
 
 @Composable
 fun LedgerFilterRoute(
     @Suppress("unused")
     popBackStack: () -> Unit,
 ) {
-    LedgerFilterScreen()
+    LedgerFilterScreen(
+        onClickBackIcon = popBackStack,
+    )
 }
 
 @Composable
-fun LedgerFilterScreen() {
-    Box(
+fun LedgerFilterScreen(
+    onClickBackIcon: () -> Unit = {},
+) {
+    Column(
         modifier = Modifier
-            .background(SusuTheme.colorScheme.background15)
+            .background(SusuTheme.colorScheme.background10)
             .fillMaxSize(),
     ) {
-        Text(text = "장부 필터")
+        SusuDefaultAppBar(
+            leftIcon = {
+                BackIcon(onClickBackIcon)
+            },
+            title = stringResource(id = com.susu.core.ui.R.string.word_filter),
+        )
+
+        Column(
+            modifier = Modifier.padding(
+                top = SusuTheme.spacing.spacing_xl,
+                start = SusuTheme.spacing.spacing_m,
+                end = SusuTheme.spacing.spacing_m,
+                bottom = SusuTheme.spacing.spacing_xxs,
+            ),
+        ) {
+            Text(text = stringResource(R.string.ledger_filter_screen_event_category), style = SusuTheme.typography.title_xs)
+            Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_m))
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxs),
+            ) {
+                SusuLinedButton(
+                    color = LinedButtonColor.Black,
+                    style = XSmallButtonStyle.height28,
+                    isActive = false,
+                    text = "결혼식",
+                )
+
+                SusuLinedButton(
+                    color = LinedButtonColor.Black,
+                    style = XSmallButtonStyle.height28,
+                    isActive = false,
+                    text = "돌잔치",
+                )
+
+                SusuLinedButton(
+                    color = LinedButtonColor.Black,
+                    style = XSmallButtonStyle.height28,
+                    isActive = false,
+                    text = "장례식",
+                )
+
+                SusuLinedButton(
+                    color = LinedButtonColor.Black,
+                    style = XSmallButtonStyle.height28,
+                    isActive = true,
+                    text = "생일 기념일",
+                )
+            }
+
+            Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xxxxxxl))
+            Text(
+                text = stringResource(id = com.susu.core.ui.R.string.word_date),
+                style = SusuTheme.typography.title_xs,
+            )
+            Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_m))
+
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                DateText()
+
+                Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xxxxs))
+
+                Text(
+                    text = stringResource(R.string.ledger_filter_screen_from),
+                    style = SusuTheme.typography.title_xxs,
+                )
+
+                Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_m))
+
+                DateText()
+
+                Spacer(modifier = Modifier.size(SusuTheme.spacing.spacing_xxxxs))
+
+                Text(
+                    text = stringResource(R.string.ledger_filter_screen_until),
+                    style = SusuTheme.typography.title_xxs,
+                )
+            }
+
+            Spacer(modifier = Modifier.weight(1f))
+
+            Column(
+                verticalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxs)
+            ) {
+                SusuFilledButton(
+                    color = FilledButtonColor.Orange,
+                    style = XSmallButtonStyle.height28,
+                    text = "결혼식",
+                    isClickable = false,
+                    rightIcon = {
+                        Icon(
+                            modifier = Modifier
+                                .clip(CircleShape)
+                                .size(12.dp)
+                                .susuClickable { /* TODO */ },
+                            painter = painterResource(id = com.susu.core.ui.R.drawable.ic_close),
+                            contentDescription = stringResource(id = com.susu.core.ui.R.string.content_description_close_icon),
+                            tint = Gray10,
+                        )
+                    },
+                )
+
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_m)
+                ) {
+                    RefreshButton()
+
+                    SusuFilledButton(
+                        modifier = Modifier.fillMaxWidth(),
+                        color = FilledButtonColor.Black,
+                        style = SmallButtonStyle.height48,
+                        isActive = true,
+                        text = stringResource(com.susu.core.ui.R.string.word_apply_filter),
+                    )
+                }
+            }
+        }
     }
 }
 

feature/received/src/main/java/com/susu/feature/received/ledgerfilter/component/DateText.kt

@@ -0,0 +1,45 @@
+package com.susu.feature.received.ledgerfilter.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.susu.core.designsystem.theme.Gray15
+import com.susu.core.designsystem.theme.Gray40
+import com.susu.core.designsystem.theme.SusuTheme
+import com.susu.core.ui.extension.susuClickable
+import com.susu.core.ui.util.currentDate
+import com.susu.core.ui.util.to_yyyy_dot_MM_dot_dd
+
+@Composable
+fun DateText(
+    text: String? = null,
+    onClick: () -> Unit = {},
+) {
+    Text(
+        modifier = Modifier
+            .clip(RoundedCornerShape(4.dp))
+            .background(Gray15)
+            .padding(
+                horizontal = SusuTheme.spacing.spacing_m,
+                vertical = SusuTheme.spacing.spacing_xxxxs,
+            )
+            .susuClickable(rippleEnabled = false, onClick = onClick),
+        text = text ?: currentDate.to_yyyy_dot_MM_dot_dd(),
+        style = SusuTheme.typography.title_xs,
+        color = Gray40,
+    )
+}
+
+@Preview
+@Composable
+fun DateTextPreview() {
+    SusuTheme {
+        DateText()
+    }
+}

feature/received/src/main/res/values/strings.xml

@@ -15,4 +15,7 @@
     <string name="ledger_edit_screen_month">월</string>
     <string name="ledger_edit_screen_from_day">일 부터</string>
     <string name="ledger_edit_screen_until_day">일 까지</string>
+    <string name="ledger_filter_screen_from">부터</string>
+    <string name="ledger_filter_screen_until">까지</string>
+    <string name="ledger_filter_screen_event_category">경조사 카테고리</string>
 </resources>