[Feat] AttendanceIssueDialog 구현

YAPP-admin · Nov 22, 2023 · 84e4d67 · 84e4d67
1 parent 8cf1787
commit 84e4d67
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 7 deletions.
diff --git a/common/src/main/java/com/yapp/common/util/Spacer.kt b/common/src/main/java/com/yapp/common/util/Spacer.kt
@@ -0,0 +1,12 @@
+package com.yapp.common.util
+
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+
+@Composable
+fun ColumnScope.Spacer(space: Dp) {
+    androidx.compose.foundation.layout.Spacer(modifier = Modifier.padding(top = space))
+}
diff --git a/common/src/main/java/com/yapp/common/yds/YDSButtons.kt b/common/src/main/java/com/yapp/common/yds/YDSButtons.kt
@@ -105,7 +105,7 @@ fun YDSButtonMedium(
 fun YDSButtonRegular(
     text: String,
     state: YdsButtonState,
-    modifier: Modifier,
+    modifier: Modifier = Modifier,
     onClick: () -> Unit
 ) {
     Button(

diff --git a/.../presentation/ui/admin/management/components/attendanceTypeButton/AttendanceTypeButton.kt b/.../presentation/ui/admin/management/components/attendanceTypeButton/AttendanceTypeButton.kt
@@ -6,8 +6,6 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -23,7 +21,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.yapp.common.R
@@ -57,12 +54,17 @@ private fun AttendanceTypeButtonPreview() {
 internal fun AttendanceTypeButton(
     modifier: Modifier = Modifier,
     state: AttendanceTypeButtonState,
-    onClick: () -> Unit
+    selected: Boolean = false,
+    onClick: () -> Unit,
 ) {
+    val (backgroundColor, textColor) = when (selected) {
+        true -> AttendanceTheme.colors.etcColors.EtcYellow to AttendanceTheme.colors.grayScale.Gray1200
+        false -> AttendanceTheme.colors.grayScale.Gray200 to AttendanceTheme.colors.grayScale.Gray800
+    }
     Row(
         modifier = modifier
             .clip(RoundedCornerShape(8.dp))
-            .background(AttendanceTheme.colors.grayScale.Gray200)
+            .background(backgroundColor)
             .clickable(onClick = onClick)
             .padding(start = 8.dp, end = 12.dp, top = 8.dp, bottom = 8.dp),
         verticalAlignment = Alignment.CenterVertically,
@@ -84,7 +86,7 @@ internal fun AttendanceTypeButton(
             Text(
                 text = it,
                 style = AttendanceTypography.subtitle2,
-                color = AttendanceTheme.colors.grayScale.Gray800,
+                color = textColor,
             )
         }
     }

diff --git a/...java/com/yapp/presentation/ui/admin/management/components/dialog/AttendanceIssueDialog.kt b/...java/com/yapp/presentation/ui/admin/management/components/dialog/AttendanceIssueDialog.kt
@@ -0,0 +1,124 @@
+package com.yapp.presentation.ui.admin.management.components.dialog
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+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 com.yapp.common.theme.AttendanceTheme
+import com.yapp.common.theme.AttendanceTypography
+import com.yapp.common.util.Spacer
+import com.yapp.common.yds.YDSButtonMedium
+import com.yapp.common.yds.YdsButtonState
+import com.yapp.presentation.R
+import com.yapp.presentation.ui.admin.management.components.attendanceTypeButton.AttendanceTypeButton
+import com.yapp.presentation.ui.admin.management.components.attendanceTypeButton.AttendanceTypeButtonState
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.toImmutableList
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+internal fun AttendanceIssueDialog(
+    modifier: Modifier = Modifier,
+    title: String,
+    content: String,
+    attendanceTypes: ImmutableList<AttendanceTypeButtonState>,
+    onClickAttendanceType: (Int) -> Unit,
+    selectedIndex: Int,
+    onDismiss: () -> Unit,
+    onClickCompleteButton: () -> Unit,
+) {
+    Dialog(
+        onDismissRequest = { onDismiss() },
+        properties = DialogProperties(
+            usePlatformDefaultWidth = false
+        )
+    ) {
+        Surface(
+            modifier = modifier
+                .fillMaxWidth()
+                .padding(horizontal = 24.dp)
+                .clip(RoundedCornerShape(10.dp))
+                .background(Color.White),
+            shape = RoundedCornerShape(10.dp),
+            color = AttendanceTheme.colors.backgroundColors.backgroundElevated
+        ) {
+            Column(
+                modifier = modifier
+                    .fillMaxWidth()
+                    .padding(all = 24.dp),
+            ) {
+                Text(
+                    text = title,
+                    style = AttendanceTypography.h3,
+                    color = AttendanceTheme.colors.grayScale.Gray1200
+                )
+                Spacer(space = 8.dp)
+                Text(
+                    text = content,
+                    style = AttendanceTypography.subtitle1,
+                    color = AttendanceTheme.colors.grayScale.Gray800
+                )
+                FlowRow(
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                ) {
+                    attendanceTypes.forEachIndexed { index, attendanceType ->
+                        AttendanceTypeButton(
+                            modifier = Modifier.padding(top = 8.dp),
+                            state = attendanceType,
+                            selected = index == selectedIndex
+                        ) {
+                            onClickAttendanceType(index)
+                        }
+                    }
+                }
+                Spacer(space = 20.dp)
+                YDSButtonMedium(
+                    modifier = Modifier.fillMaxWidth(),
+                    text = stringResource(id = R.string.complete),
+                    state = YdsButtonState.ENABLED,
+                    onClick = onClickCompleteButton,
+                )
+            }
+        }
+    }
+}
+
+@Composable
+@Preview
+private fun AttendanceIssueDialogPreview() {
+    val attendanceTypes = AttendanceTypeButtonState.IconType.values().map {
+        AttendanceTypeButtonState(
+            label = "출결",
+            iconType = it
+        )
+    }.toList().toImmutableList()
+    val selectedIndex = remember { mutableStateOf(0) }
+    AttendanceIssueDialog(
+        title = "박예령님의 출결이 보고와 다른가요?",
+        content = "실제 출결 상태로 수정해주세요.",
+        attendanceTypes = attendanceTypes,
+        onClickAttendanceType = {
+            selectedIndex.value = it
+        },
+        selectedIndex = selectedIndex.value,
+        onDismiss = {},
+        onClickCompleteButton = {}
+    )
+}
diff --git a/presentation/src/main/res/values/strings.xml b/presentation/src/main/res/values/strings.xml
@@ -8,6 +8,7 @@
     <string name="Cancel">취소</string>
     <string name="Ok">확인</string>
     <string name="Exit">종료</string>
+    <string name="complete">완료</string>
 
     <string name="required_update_title">업데이트가 필요해요!</string>
     <string name="required_update_content">더 멋진 기능을 사용하기 위해\n지금 바로 업데이트를 진행해 주세요</string>