feat: Create Empty Component

Team-B1ND · Oct 10, 2024 · 3ef9b77 · 3ef9b77
1 parent 8c661dd
commit 3ef9b77
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 1 deletion.
diff --git a/dodam-design-system/src/commonMain/composeResources/drawable/ic_full_moon_face.xml b/dodam-design-system/src/commonMain/composeResources/drawable/ic_full_moon_face.xml
@@ -0,0 +1,27 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M22.499,11.974C22.499,17.773 17.798,22.474 12,22.474C6.201,22.474 1.5,17.773 1.5,11.974C1.5,6.175 6.201,1.475 12,1.475C17.798,1.475 22.499,6.175 22.499,11.974Z"
+      android:fillColor="#FCD53F"/>
+  <path
+      android:pathData="M1.516,11.382C1.781,11.296 2.064,11.25 2.357,11.25C3.87,11.25 5.096,12.476 5.096,13.988C5.096,15.409 4.013,16.578 2.628,16.714C1.907,15.29 1.5,13.679 1.5,11.974C1.5,11.775 1.506,11.578 1.516,11.382ZM19.618,19.199C18.358,20.528 16.755,21.526 14.95,22.054C14.736,21.663 14.614,21.215 14.614,20.738C14.614,19.226 15.84,18 17.352,18C18.294,18 19.125,18.476 19.618,19.199ZM22.466,12.818C22.364,14.104 22.029,15.325 21.506,16.439C20.693,16.235 20.091,15.499 20.091,14.623C20.091,13.588 20.929,12.75 21.963,12.75C22.138,12.75 22.306,12.774 22.466,12.818ZM11.619,6C12.654,6 13.492,5.162 13.492,4.127C13.492,3.093 12.654,2.255 11.619,2.255C10.585,2.255 9.747,3.093 9.747,4.127C9.747,5.162 10.585,6 11.619,6ZM11.092,16.961C11.88,17.578 12.095,18.62 11.572,19.288C11.049,19.955 9.986,19.997 9.198,19.38C8.41,18.763 8.196,17.722 8.719,17.054C9.242,16.386 10.304,16.344 11.092,16.961Z"
+      android:fillColor="#F9C23C"/>
+  <path
+      android:pathData="M8.002,6.03C6.979,6.03 6.142,6.86 6.142,7.89C6.142,8.097 5.975,8.265 5.767,8.265C5.56,8.265 5.392,8.097 5.392,7.89C5.392,6.445 6.566,5.28 8.002,5.28C8.21,5.28 8.377,5.448 8.377,5.655C8.377,5.862 8.21,6.03 8.002,6.03Z"
+      android:fillColor="#321B41"/>
+  <path
+      android:pathData="M15.413,5.655C15.413,5.448 15.58,5.28 15.788,5.28C17.224,5.28 18.397,6.445 18.397,7.89C18.397,8.097 18.23,8.265 18.022,8.265C17.815,8.265 17.647,8.097 17.647,7.89C17.647,6.86 16.811,6.03 15.788,6.03C15.58,6.03 15.413,5.862 15.413,5.655Z"
+      android:fillColor="#321B41"/>
+  <path
+      android:pathData="M7.731,9.288C7.88,8.908 8.252,8.64 8.692,8.64C9.148,8.64 9.537,8.936 9.673,9.349C9.77,9.644 10.088,9.804 10.383,9.707C10.679,9.61 10.839,9.292 10.742,8.997C10.458,8.134 9.647,7.515 8.692,7.515C7.783,7.515 7,8.072 6.684,8.877C6.57,9.166 6.713,9.493 7.002,9.606C7.291,9.72 7.618,9.577 7.731,9.288Z"
+      android:fillColor="#321B41"/>
+  <path
+      android:pathData="M15.158,8.64C14.717,8.64 14.345,8.908 14.196,9.288C14.083,9.577 13.756,9.72 13.467,9.606C13.178,9.493 13.035,9.166 13.149,8.877C13.465,8.072 14.248,7.515 15.158,7.515C16.112,7.515 16.923,8.134 17.207,8.997C17.304,9.292 17.143,9.61 16.848,9.707C16.553,9.804 16.235,9.644 16.138,9.349C16.002,8.936 15.613,8.64 15.158,8.64Z"
+      android:fillColor="#321B41"/>
+  <path
+      android:pathData="M8.978,12.435C8.758,12.215 8.402,12.215 8.182,12.435C7.963,12.654 7.963,13.011 8.182,13.23C10.239,15.287 13.573,15.287 15.63,13.23C15.85,13.011 15.85,12.654 15.63,12.435C15.41,12.215 15.054,12.215 14.835,12.435C13.217,14.053 10.595,14.053 8.978,12.435Z"
+      android:fillColor="#321B41"/>
+</vector>
diff --git a/...m-design-system/src/commonMain/kotlin/com/b1nd/dodam/designsystem/component/DodamEmpty.kt b/...m-design-system/src/commonMain/kotlin/com/b1nd/dodam/designsystem/component/DodamEmpty.kt
@@ -0,0 +1,60 @@
+package com.b1nd.dodam.designsystem.component
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+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.layout.size
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.b1nd.dodam.designsystem.DodamTheme
+import com.b1nd.dodam.designsystem.foundation.DodamIcons
+
+@Composable
+fun DodamEmpty(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+    title: String,
+    buttonText: String,
+    border: BorderStroke? = null
+) {
+    Surface(
+        modifier = modifier,
+        color = DodamTheme.colors.backgroundNormal,
+        shape = DodamTheme.shapes.large,
+        border = border
+    ) {
+        Column(
+            modifier = Modifier.padding(16.dp),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Image(
+                modifier = Modifier.size(36.dp),
+                imageVector = DodamIcons.FullMoonFace.value,
+                contentDescription = "달이 웃는 표정"
+            )
+            Spacer(modifier = Modifier.height(12.dp))
+            Text(
+                text = title,
+                style = DodamTheme.typography.labelMedium(),
+                color = DodamTheme.colors.labelAlternative.copy(alpha = 0.5f),
+            )
+            Spacer(modifier = Modifier.height(24.dp))
+            DodamButton(
+                modifier = Modifier.fillMaxWidth(),
+                onClick = onClick,
+                text = buttonText,
+                buttonSize = ButtonSize.Large,
+                buttonRole = ButtonRole.Assistive
+            )
+        }
+    }
+}
diff --git a/...-design-system/src/commonMain/kotlin/com/b1nd/dodam/designsystem/foundation/DodamIcons.kt b/...-design-system/src/commonMain/kotlin/com/b1nd/dodam/designsystem/foundation/DodamIcons.kt
@@ -19,6 +19,7 @@ import com.b1nd.dodam.designsystem.resources.ic_exclamationmark_circle
 import com.b1nd.dodam.designsystem.resources.ic_eye
 import com.b1nd.dodam.designsystem.resources.ic_eye_slash
 import com.b1nd.dodam.designsystem.resources.ic_fork_and_knife
+import com.b1nd.dodam.designsystem.resources.ic_full_moon_face
 import com.b1nd.dodam.designsystem.resources.ic_gear
 import com.b1nd.dodam.designsystem.resources.ic_home
 import com.b1nd.dodam.designsystem.resources.ic_magnifyingglass
@@ -59,7 +60,8 @@ enum class DodamIcons {
     Gear,
     Person,
     Dev,
-    Close;
+    Close,
+    FullMoonFace;
 
     val value: ImageVector
         @Composable
@@ -92,5 +94,6 @@ enum class DodamIcons {
             Person -> vectorResource(Res.drawable.ic_person)
             Dev -> vectorResource(Res.drawable.ic_dev)
             Close -> vectorResource(Res.drawable.ic_close_line)
+            FullMoonFace -> vectorResource(Res.drawable.ic_full_moon_face)
         }
 }
diff --git a/dodam-design-system/src/main/java/com/b1nd/dodam/designsystem/previews/DodamEmptyPreview.kt b/dodam-design-system/src/main/java/com/b1nd/dodam/designsystem/previews/DodamEmptyPreview.kt
@@ -0,0 +1,49 @@
+package com.b1nd.dodam.designsystem.previews
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.b1nd.dodam.designsystem.DodamTheme
+import com.b1nd.dodam.designsystem.component.DodamEmpty
+
+@Composable
+@Preview
+fun DodamEmptyPreview(
+
+){
+    DodamTheme {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(DodamTheme.colors.backgroundNormal)
+        ) {
+            DodamEmpty(
+                modifier = Modifier
+                    .padding(16.dp)
+                    .fillMaxWidth(),
+                onClick = { },
+                title = "외출/외박 승인 명단을 불러올 수 없어요",
+                buttonText = "다시 불러오기"
+            )
+            DodamEmpty(
+                modifier = Modifier
+                    .padding(16.dp)
+                    .fillMaxWidth(),
+                onClick = { },
+                title = "외출/외박 승인 명단을 불러올 수 없어요",
+                buttonText = "다시 불러오기",
+                border = BorderStroke(
+                    width = 1.dp,
+                    color = DodamTheme.colors.lineAlternative
+                )
+            )
+        }
+    }
+}