[TNT-190] feat: TnTCheckTogglePopupDialog 구현

- 트레이너 연결 팝업 다이얼로그로 사용 예정
YAPP-Github · Jan 29, 2025 · d1cdff6 · d1cdff6
1 parent 80ebff5
commit d1cdff6
Show file tree

Hide file tree

Showing 4 changed files with 215 additions and 0 deletions.
diff --git a/core/designsystem/src/main/java/co/kr/tnt/designsystem/component/Toggle.kt b/core/designsystem/src/main/java/co/kr/tnt/designsystem/component/Toggle.kt
@@ -0,0 +1,53 @@
+package co.kr.tnt.designsystem.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import co.kr.tnt.core.designsystem.R
+import co.kr.tnt.designsystem.theme.TnTTheme
+
+@Composable
+fun TnTCheckToggle(
+    isChecked: Boolean = false,
+    onCheckClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val icon = if (isChecked) {
+        R.drawable.ic_check_true
+    } else {
+        R.drawable.ic_check_false
+    }
+
+    Image(
+        painter = painterResource(icon),
+        contentDescription = null,
+        modifier = modifier
+            .size(24.dp)
+            .clip(CircleShape)
+            .clickable(onClick = onCheckClick),
+    )
+}
+
+@Preview
+@Composable
+private fun TnTCheckTogglePreview() {
+    TnTTheme {
+        var isChecked by remember { mutableStateOf(false) }
+
+        TnTCheckToggle(
+            isChecked = isChecked,
+            onCheckClick = { isChecked = !isChecked },
+        )
+    }
+}
diff --git a/core/designsystem/src/main/res/drawable/ic_check_false.xml b/core/designsystem/src/main/res/drawable/ic_check_false.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="28dp"
+    android:height="28dp"
+    android:viewportWidth="28"
+    android:viewportHeight="28">
+  <group>
+    <clip-path
+        android:pathData="M2,2h24v24h-24z"/>
+    <path
+        android:pathData="M12.028,17.867L20.666,9.228C20.815,9.079 20.989,9.003 21.188,9C21.388,8.997 21.565,9.073 21.72,9.228C21.875,9.383 21.953,9.561 21.953,9.763C21.953,9.964 21.875,10.142 21.72,10.297L12.66,19.372C12.48,19.553 12.269,19.643 12.028,19.643C11.787,19.643 11.576,19.553 11.395,19.372L7.22,15.197C7.071,15.049 6.998,14.872 7,14.667C7.002,14.463 7.08,14.283 7.236,14.128C7.391,13.973 7.569,13.895 7.77,13.895C7.971,13.895 8.15,13.973 8.305,14.128L12.028,17.867Z"
+        android:fillColor="#D4D4D4"/>
+  </group>
+</vector>
diff --git a/core/designsystem/src/main/res/drawable/ic_check_true.xml b/core/designsystem/src/main/res/drawable/ic_check_true.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="28dp"
+    android:height="28dp"
+    android:viewportWidth="28"
+    android:viewportHeight="28">
+  <group>
+    <clip-path
+        android:pathData="M2,2h24v24h-24z"/>
+    <path
+        android:pathData="M12.028,17.867L20.666,9.228C20.815,9.079 20.989,9.003 21.188,9C21.388,8.997 21.565,9.073 21.72,9.228C21.875,9.383 21.953,9.561 21.953,9.763C21.953,9.964 21.875,10.142 21.72,10.297L12.66,19.372C12.48,19.553 12.269,19.643 12.028,19.643C11.787,19.643 11.576,19.553 11.395,19.372L7.22,15.197C7.071,15.049 6.998,14.872 7,14.667C7.002,14.463 7.08,14.283 7.236,14.128C7.391,13.973 7.569,13.895 7.77,13.895C7.971,13.895 8.15,13.973 8.305,14.128L12.028,17.867Z"
+        android:fillColor="#FF472F"/>
+  </group>
+</vector>
diff --git a/core/ui/src/main/java/co/kr/tnt/ui/component/TnTCheckToggleDialog.kt b/core/ui/src/main/java/co/kr/tnt/ui/component/TnTCheckToggleDialog.kt
@@ -0,0 +1,136 @@
+package co.kr.tnt.ui.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults.cardColors
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import androidx.compose.ui.window.DialogProperties
+import co.kr.tnt.designsystem.component.TnTCheckToggle
+import co.kr.tnt.designsystem.component.button.TnTTextButton
+import co.kr.tnt.designsystem.component.button.model.ButtonSize
+import co.kr.tnt.designsystem.component.button.model.ButtonType
+import co.kr.tnt.designsystem.theme.TnTTheme
+
+@Composable
+fun TnTCheckToggleDialog(
+    title: String,
+    content: String,
+    isChecked: Boolean,
+    checkToggleText: String,
+    leftButtonText: String,
+    rightButtonText: String,
+    modifier: Modifier = Modifier,
+    onLeftButtonClick: () -> Unit,
+    onRightButtonClick: () -> Unit,
+    onCheckClick: () -> Unit,
+    onDismiss: () -> Unit,
+) {
+    Dialog(
+        onDismissRequest = { onDismiss() },
+        properties = DialogProperties(usePlatformDefaultWidth = false),
+    ) {
+        Card(
+            shape = RoundedCornerShape(16.dp),
+            colors = cardColors().copy(TnTTheme.colors.commonColors.Common0),
+            modifier = modifier
+                .fillMaxWidth()
+                .wrapContentHeight()
+                .padding(horizontal = 20.dp),
+        ) {
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally,
+                modifier = Modifier.padding(20.dp),
+            ) {
+                Text(
+                    text = title,
+                    style = TnTTheme.typography.h3.copy(
+                        textAlign = TextAlign.Center,
+                    ),
+                    color = TnTTheme.colors.neutralColors.Neutral900,
+                    modifier = Modifier.padding(top = 20.dp),
+                )
+                Text(
+                    text = content,
+                    style = TnTTheme.typography.body2Medium.copy(
+                        textAlign = TextAlign.Center,
+                    ),
+                    color = TnTTheme.colors.neutralColors.Neutral500,
+                    modifier = Modifier.padding(top = 10.dp),
+                )
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 5.dp, vertical = 20.dp),
+                ) {
+                    TnTCheckToggle(
+                        isChecked = isChecked,
+                        onCheckClick = onCheckClick,
+                    )
+                    Text(
+                        text = checkToggleText,
+                        style = TnTTheme.typography.body2Medium,
+                        color = TnTTheme.colors.neutralColors.Neutral500,
+                        modifier = Modifier.padding(start = 4.dp),
+                    )
+                }
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                ) {
+                    TnTTextButton(
+                        size = ButtonSize.Medium,
+                        type = ButtonType.Gray,
+                        text = leftButtonText,
+                        onClick = onLeftButtonClick,
+                        modifier = Modifier.weight(1f),
+                    )
+                    TnTTextButton(
+                        size = ButtonSize.Medium,
+                        type = ButtonType.Primary,
+                        text = rightButtonText,
+                        onClick = onRightButtonClick,
+                        modifier = Modifier.weight(1f),
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun TnTCheckToggleDialogPreview() {
+    TnTTheme {
+        var isChecked by remember { mutableStateOf(false) }
+
+        TnTCheckToggleDialog(
+            title = "트레이너를 연결해 주세요",
+            content = "연결하지 않을 경우 일부 기능이 제한돼요\n초대 코드를 입력해 연결해주시겠어요?",
+            checkToggleText = "3일 동안 보지 않기",
+            isChecked = isChecked,
+            onLeftButtonClick = {},
+            onRightButtonClick = {},
+            onCheckClick = { isChecked = !isChecked },
+            leftButtonText = "다음에",
+            rightButtonText = "연결하기",
+            onDismiss = {},
+        )
+    }
+}