목표 생성, 편집 화면 구현

app/build.gradle.kts

@@ -36,6 +36,7 @@ dependencies {
     implementation(projects.feature.login)
     implementation(projects.feature.main)
     implementation(projects.feature.taskCertification)
+    implementation(projects.feature.goalEditor)
 
     // Firebase
     implementation(platform(libs.google.firebase.bom))

app/src/main/java/com/yapp/twix/di/FeatureModules.kt

@@ -1,5 +1,6 @@
 package com.yapp.twix.di
 
+import com.twix.goal_editor.di.goalEditorModule
 import com.twix.home.di.homeModule
 import com.twix.login.di.loginModule
 import com.twix.main.di.mainModule
@@ -12,4 +13,5 @@ val featureModules: List<Module> =
         mainModule,
         homeModule,
         taskCertificationModule,
+        goalEditorModule,
     )

core/design-system/src/main/java/com/twix/designsystem/components/bottomsheet/CommonBottomSheet.kt

@@ -77,7 +77,7 @@ fun CommonBottomSheet(
 
     if (!rendering) return
 
-    BackHandler { onDismissRequest() }
+    BackHandler(enabled = internalVisible) { onDismissRequest() }
 
     BoxWithConstraints(
         modifier =

core/design-system/src/main/java/com/twix/designsystem/components/common/CommonSwitch.kt

@@ -0,0 +1,61 @@
+package com.twix.designsystem.components.common
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import com.twix.designsystem.theme.CommonColor
+import com.twix.designsystem.theme.GrayColor
+import kotlin.math.roundToInt
+
+@Composable
+fun CommonSwitch(
+    modifier: Modifier = Modifier,
+    checked: Boolean,
+    onClick: (Boolean) -> Unit,
+) {
+    val density = LocalDensity.current
+    val minBound = with(density) { 0.dp.toPx() }
+    val maxBound = with(density) { 18.dp.toPx() }
+    val state by animateFloatAsState(
+        targetValue = if (checked) maxBound else minBound,
+        animationSpec = tween(durationMillis = 500),
+        label = "common switch",
+    )
+
+    Box(
+        modifier =
+            modifier
+                .size(width = 48.dp, height = 30.dp)
+                .clip(RoundedCornerShape(999.dp))
+                .background(if (checked) GrayColor.C500 else CommonColor.White)
+                .border(1.dp, GrayColor.C500, RoundedCornerShape(999.dp))
+                .clickable(onClick = { onClick(!checked) }),
+        contentAlignment = Alignment.CenterStart,
+    ) {
+        Box(
+            modifier =
+                Modifier
+                    .offset { IntOffset(state.roundToInt(), 0) }
+                    .padding(4.dp)
+                    .size(22.dp)
+                    .clip(CircleShape)
+                    .background(if (checked) CommonColor.White else GrayColor.C500),
+        )
+    }
+}

core/design-system/src/main/java/com/twix/designsystem/components/dialog/CommonDialog.kt

@@ -0,0 +1,187 @@
+package com.twix.designsystem.components.dialog
+
+import androidx.activity.compose.BackHandler
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+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.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.twix.designsystem.components.button.AppButton
+import com.twix.designsystem.components.text.AppText
+import com.twix.designsystem.theme.CommonColor
+import com.twix.designsystem.theme.DimmedColor
+import com.twix.designsystem.theme.GrayColor
+import com.twix.designsystem.theme.TwixTheme
+import com.twix.domain.model.enums.AppTextStyle
+import com.twix.ui.extension.noRippleClickable
+
+@Composable
+fun CommonDialog(
+    modifier: Modifier = Modifier,
+    visible: Boolean,
+    confirmText: String,
+    dismissText: String? = null,
+    onDismissRequest: () -> Unit,
+    content: @Composable ColumnScope.() -> Unit,
+    onConfirm: () -> Unit,
+    onDismiss: (() -> Unit)? = null,
+) {
+    BackHandler(enabled = visible) { onDismissRequest() }
+
+    Box(
+        modifier =
+            Modifier
+                .fillMaxSize()
+                .then(modifier),
+        contentAlignment = Alignment.Center,
+    ) {
+        DialogScrim(visible = visible, onDismissRequest = onDismissRequest)
+
+        DialogContent(
+            modifier =
+                Modifier
+                    .padding(horizontal = 20.dp)
+                    .fillMaxWidth(),
+            visible = visible,
+            confirmText = confirmText,
+            dismissText = dismissText,
+            content = content,
+            onConfirm = onConfirm,
+            onDismiss = onDismiss,
+        )
+    }
+}
+
+@Composable
+private fun DialogScrim(
+    visible: Boolean,
+    onDismissRequest: () -> Unit,
+) {
+    val fadeDuration = 160
+
+    AnimatedVisibility(
+        visible = visible,
+        enter = fadeIn(animationSpec = tween(fadeDuration)),
+        exit = fadeOut(animationSpec = tween(fadeDuration)),
+        modifier = Modifier.fillMaxSize(),
+    ) {
+        Box(
+            modifier =
+                Modifier
+                    .fillMaxSize()
+                    .background(DimmedColor.D070)
+                    .noRippleClickable(onClick = onDismissRequest),
+        )
+    }
+}
+
+@Composable
+private fun DialogContent(
+    modifier: Modifier,
+    visible: Boolean,
+    confirmText: String,
+    dismissText: String? = null,
+    content: @Composable ColumnScope.() -> Unit,
+    onConfirm: () -> Unit,
+    onDismiss: (() -> Unit)? = null,
+) {
+    val fadeDuration = 160
+
+    AnimatedVisibility(
+        visible = visible,
+        enter = fadeIn(animationSpec = tween(fadeDuration)),
+        exit = fadeOut(animationSpec = tween(fadeDuration)),
+    ) {
+        Surface(
+            shape = RoundedCornerShape(20.dp),
+            color = CommonColor.White,
+            modifier = modifier,
+        ) {
+            Column(
+                modifier =
+                    Modifier
+                        .padding(horizontal = 20.dp)
+                        .padding(top = 24.dp, bottom = 20.dp),
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                content()
+
+                Spacer(Modifier.height(24.dp))
+
+                Row(
+                    modifier =
+                        Modifier
+                            .fillMaxWidth()
+                            .padding(vertical = 8.dp),
+                ) {
+                    if (dismissText != null && onDismiss != null) {
+                        AppButton(
+                            modifier = Modifier.weight(1f),
+                            text = dismissText,
+                            textColor = GrayColor.C500,
+                            backgroundColor = CommonColor.White,
+                            border = BorderStroke(1.dp, GrayColor.C500),
+                            onClick = onDismiss,
+                        )
+
+                        Spacer(Modifier.width(8.dp))
+                    }
+
+                    AppButton(
+                        modifier = Modifier.weight(1f),
+                        text = confirmText,
+                        onClick = onConfirm,
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true, showSystemUi = true)
+@Composable
+private fun Preview() {
+    TwixTheme {
+        CommonDialog(
+            visible = true,
+            confirmText = "확인",
+            dismissText = "취소",
+            onDismissRequest = {},
+            onConfirm = {},
+            onDismiss = {},
+            content = {
+                AppText(
+                    text = "타이틀 텍스트",
+                    style = AppTextStyle.T1,
+                    color = GrayColor.C500,
+                )
+
+                Spacer(Modifier.height(8.dp))
+
+                AppText(
+                    text = "내용 텍스트",
+                    style = AppTextStyle.B2,
+                    color = GrayColor.C400,
+                )
+            },
+        )
+    }
+}

core/design-system/src/main/java/com/twix/designsystem/components/text_field/UnderlineTextField.kt

@@ -0,0 +1,106 @@
+package com.twix.designsystem.components.text_field
+
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.twix.designsystem.components.text.AppText
+import com.twix.designsystem.theme.GrayColor
+import com.twix.designsystem.theme.LocalAppTypography
+import com.twix.designsystem.theme.toTextStyle
+import com.twix.domain.model.enums.AppTextStyle
+
+@Composable
+fun UnderlineTextField(
+    modifier: Modifier = Modifier,
+    value: String,
+    placeHolder: String = "",
+    textStyle: AppTextStyle = AppTextStyle.T2,
+    enabled: Boolean = true,
+    readOnly: Boolean = false,
+    singleLine: Boolean = true,
+    showTrailing: Boolean = false,
+    maxLines: Int = 1,
+    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
+    keyboardActions: KeyboardActions = KeyboardActions.Default,
+    trailing: (@Composable () -> Unit)? = null,
+    onValueChange: (String) -> Unit,
+) {
+    val typo = LocalAppTypography.current
+
+    Column(
+        modifier =
+            Modifier
+                .height(52.dp),
+        horizontalAlignment = Alignment.Start,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Spacer(Modifier.height(4.dp))
+
+        Box(
+            modifier =
+                modifier
+                    .padding(horizontal = 8.dp, vertical = 10.dp),
+            contentAlignment = Alignment.CenterStart,
+        ) {
+            val shouldShowTrailing = trailing != null && showTrailing && value.isNotBlank()
+
+            if (value.isBlank()) {
+                AppText(
+                    text = placeHolder,
+                    style = textStyle,
+                    color = GrayColor.C200,
+                    modifier =
+                        Modifier
+                            .align(Alignment.CenterStart),
+                )
+            }
+
+            Row(
+                modifier =
+                    Modifier
+                        .fillMaxWidth(),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                BasicTextField(
+                    value = value,
+                    textStyle = textStyle.toTextStyle(typo).copy(color = GrayColor.C500),
+                    onValueChange = onValueChange,
+                    enabled = enabled,
+                    readOnly = readOnly,
+                    singleLine = singleLine,
+                    maxLines = maxLines,
+                    keyboardOptions = keyboardOptions,
+                    keyboardActions = keyboardActions,
+                )
+
+                if (shouldShowTrailing) {
+                    Box(
+                        modifier =
+                            Modifier
+                                .padding(start = 10.dp),
+                        contentAlignment = Alignment.Center,
+                    ) {
+                        trailing.invoke()
+                    }
+                }
+            }
+        }
+
+        Spacer(Modifier.height(4.dp))
+
+        HorizontalDivider(thickness = 1.dp, color = GrayColor.C500, modifier = modifier)
+    }
+}