Merge pull request #95 from ku-ring/2.0/notice_storage_components

kuring-129 공지 보관함 화면에서 사용될 컴포넌트 추가
ku-ring · Feb 27, 2024 · 2769d12 · 2769d12
2 parents 097dff7 + 85ee251
commit 2769d12
Show file tree

Hide file tree

Showing 10 changed files with 271 additions and 242 deletions.
diff --git a/...gnsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/CenterTitleTopBar.kt b/...gnsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/CenterTitleTopBar.kt
@@ -26,7 +26,6 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.ku_stacks.ku_ring.designsystem.R
-import com.ku_stacks.ku_ring.designsystem.theme.CaptionGray1
 import com.ku_stacks.ku_ring.designsystem.theme.CaptionGray2
 import com.ku_stacks.ku_ring.designsystem.theme.KuringTheme
 import com.ku_stacks.ku_ring.designsystem.theme.Pretendard
@@ -40,6 +39,7 @@ import com.ku_stacks.ku_ring.designsystem.theme.Pretendard
  * @param navigation 텍스트 왼쪽에 표시할 navigation indicator. 주로 뒤로 가기 아이콘이 사용되나, `취소` 등의 텍스트를 사용할 수도 있다.
  * @param onNavigationClick 내비게이션 컴포넌트를 클릭할 때 실행할 콜백.
  * @param navigationClickLabel 내비게이션 클릭 콜백을 설명하는 텍스트. 콜백이 null이 아니라면 접근성을 위해 제공하는 것이 좋다.
+ * @param navigationContentColor 내비게이션 컴포넌트의 content color. [LocalContentColor]에 전달된다.
  * @param action 텍스트 오른쪽에 표시될 작업 텍스트. `완료`, `전송` 등의 텍스트가 사용될 수 있다.
  * @param onActionClick 액션 텍스트를 클릭할 때 실행할 콜백.
  * @param actionClickLabel 액션 클릭 콜백을 설명하는 텍스트. 콜백이 null이 아니라면 접근성을 위해 제공하는 것이 좋다.
@@ -51,6 +51,9 @@ fun CenterTitleTopBar(
     navigation: @Composable () -> Unit = {},
     onNavigationClick: (() -> Unit)? = null,
     navigationClickLabel: String? = null,
+    // 현재 디자인된 Gray600 색깔은 다크 모드에서 거의 보이지 않음
+    // 따라서 임시로 onSurface를 사용하고, 다크 모드 디자인이 나오면 다시 수정
+    navigationContentColor: Color = MaterialTheme.colors.onSurface,
     action: String = "",
     onActionClick: (() -> Unit)? = null,
     actionClickLabel: String? = null,
@@ -60,6 +63,7 @@ fun CenterTitleTopBar(
         navigation = navigation,
         onNavigationClick = onNavigationClick,
         navigationClickLabel = navigationClickLabel,
+        navigationContentColor = navigationContentColor,
         action = {
             Text(
                 text = action,
@@ -87,6 +91,7 @@ fun CenterTitleTopBar(
  * @param navigation 텍스트 왼쪽에 표시할 navigation indicator. 주로 뒤로 가기 아이콘이 사용되나, `취소` 등의 텍스트를 사용할 수도 있다.
  * @param onNavigationClick 내비게이션 컴포넌트를 클릭할 때 실행할 콜백.
  * @param navigationClickLabel 내비게이션 클릭 콜백을 설명하는 텍스트. 콜백이 null이 아니라면 접근성을 위해 제공하는 것이 좋다.
+ * @param navigationContentColor 내비게이션 컴포넌트의 content color. [LocalContentColor]에 전달된다.
  * @param action 텍스트 오른쪽에 표시될 작업. [Icon] 등을 넣을 수 있다.
  * @param onActionClick 액션 텍스트를 클릭할 때 실행할 콜백.
  * @param actionClickLabel 액션 클릭 콜백을 설명하는 텍스트. 콜백이 null이 아니라면 접근성을 위해 제공하는 것이 좋다.
@@ -98,12 +103,15 @@ fun CenterTitleTopBar(
     navigation: @Composable () -> Unit = {},
     onNavigationClick: (() -> Unit)? = null,
     navigationClickLabel: String? = null,
+    // 현재 디자인된 Gray600 색깔은 다크 모드에서 거의 보이지 않음
+    // 따라서 임시로 onSurface를 사용하고, 다크 모드 디자인이 나오면 다시 수정
+    navigationContentColor: Color = MaterialTheme.colors.onSurface,
     action: @Composable () -> Unit = {},
     onActionClick: (() -> Unit)? = null,
     actionClickLabel: String? = null,
 ) {
     val backgroundColor = MaterialTheme.colors.surface
-    val contentPadding = PaddingValues(13.dp)
+    val contentPadding = PaddingValues(horizontal = 20.dp, vertical = 16.dp)
     Box(
         modifier = modifier
             .background(backgroundColor)
@@ -112,6 +120,7 @@ fun CenterTitleTopBar(
     ) {
         Navigation(
             navigationIcon = navigation,
+            navigationContentColor = navigationContentColor,
             onNavigationClick = onNavigationClick,
             navigationClickLabel = navigationClickLabel,
             contentPadding = contentPadding,
@@ -180,12 +189,13 @@ private fun TopBarTitle(
 @Composable
 private fun Navigation(
     navigationIcon: @Composable () -> Unit,
+    navigationContentColor: Color,
     modifier: Modifier = Modifier,
     onNavigationClick: (() -> Unit)? = null,
     navigationClickLabel: String? = null,
     contentPadding: PaddingValues = PaddingValues(0.dp),
 ) {
-    CompositionLocalProvider(LocalContentColor provides CaptionGray1) {
+    CompositionLocalProvider(LocalContentColor provides navigationContentColor) {
         LazyColumn(
             modifier = modifier.clickable(
                 onClick = { onNavigationClick?.invoke() },

diff --git a/...signsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/DepartmentItems.kt b/...signsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/DepartmentItems.kt
@@ -2,6 +2,7 @@ package com.ku_stacks.ku_ring.designsystem.components
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -16,20 +17,26 @@ import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.material.contentColorFor
+import androidx.compose.material.minimumInteractiveComponentSize
 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.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.ku_stacks.ku_ring.designsystem.R
+import com.ku_stacks.ku_ring.designsystem.theme.Gray300
 import com.ku_stacks.ku_ring.designsystem.theme.KuringTheme
+import com.ku_stacks.ku_ring.designsystem.theme.MainPrimarySelected
 import com.ku_stacks.ku_ring.designsystem.theme.Pretendard
+import com.ku_stacks.ku_ring.designsystem.theme.TextCaption1
 import com.ku_stacks.ku_ring.domain.Department
 
 @Composable
@@ -38,15 +45,15 @@ fun DepartmentWithDeleteIcon(
     onDeleteDepartment: (Department) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Department(
+    BaseDepartment(
         department = department,
         modifier = modifier,
     ) {
         if (department.isSelected) {
             SelectedDepartmentMark()
         }
         Spacer(modifier = Modifier.weight(1f))
-        DeleteIconButton(onClick = { onDeleteDepartment(department) })
+        DeleteButton(onClick = { onDeleteDepartment(department) })
     }
 }
 
@@ -56,7 +63,7 @@ fun DepartmentWithAddIcon(
     onAddDepartment: (Department) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Department(
+    BaseDepartment(
         department = department,
         modifier = modifier,
     ) {
@@ -71,7 +78,7 @@ fun DepartmentWithCheckIcon(
     onClickDepartment: (Department) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Department(
+    BaseDepartment(
         department = department,
         modifier = modifier,
     ) {
@@ -88,15 +95,15 @@ private fun SelectedDepartmentMark(
     Box(
         modifier = modifier
             .clip(shape)
-            .background(MaterialTheme.colors.surface, shape)
+            .background(MainPrimarySelected, shape)
             .border(0.5.dp, MaterialTheme.colors.primary, shape)
-            .padding(horizontal = 8.dp),
+            .padding(horizontal = 8.dp, vertical = 2.dp),
     ) {
         Text(
             text = stringResource(id = R.string.selected_department),
             style = TextStyle(
-                fontSize = 11.sp,
-                lineHeight = 17.93.sp,
+                fontSize = 12.sp,
+                lineHeight = 19.56.sp,
                 fontFamily = Pretendard,
                 fontWeight = FontWeight(600),
                 color = MaterialTheme.colors.primary,
@@ -106,21 +113,25 @@ private fun SelectedDepartmentMark(
 }
 
 @Composable
-private fun DeleteIconButton(
+private fun DeleteButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
-    contentDescription: String? = null,
 ) {
-    IconButton(
-        onClick = onClick,
-        modifier = modifier,
-    ) {
-        Icon(
-            painter = painterResource(id = R.drawable.ic_trashcan),
-            contentDescription = contentDescription,
-            tint = contentColorFor(backgroundColor = MaterialTheme.colors.surface),
-        )
-    }
+    Text(
+        text = stringResource(id = R.string.notice_item_delete_button),
+        style = TextStyle(
+            fontSize = 16.sp,
+            lineHeight = 24.sp,
+            fontFamily = Pretendard,
+            fontWeight = FontWeight(500),
+            color = TextCaption1,
+            textAlign = TextAlign.End,
+        ),
+        modifier = modifier
+            .clip(RoundedCornerShape(50))
+            .clickable(onClick = onClick, role = Role.Button)
+            .minimumInteractiveComponentSize(),
+    )
 }
 
 @Composable
@@ -136,7 +147,7 @@ private fun AddIconButton(
         Icon(
             painter = painterResource(id = R.drawable.ic_add),
             contentDescription = contentDescription,
-            tint = contentColorFor(backgroundColor = MaterialTheme.colors.surface),
+            tint = Gray300,
         )
     }
 }
@@ -160,7 +171,7 @@ private fun CheckIconButton(
 }
 
 @Composable
-private fun Department(
+private fun BaseDepartment(
     department: Department,
     modifier: Modifier = Modifier,
     contents: @Composable RowScope.() -> Unit = {},
@@ -169,9 +180,9 @@ private fun Department(
     Row(
         modifier = modifier
             .background(backgroundColor)
-            .padding(start = 24.dp, end = 12.dp),
+            .padding(horizontal = 24.dp),
         verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
     ) {
         DepartmentTitle(
             departmentName = department.koreanName,

diff --git a/...gnsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringAlertDialog.kt b/...gnsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringAlertDialog.kt
@@ -169,7 +169,7 @@ private fun KuringAlertDialogButton(
             ),
             modifier = Modifier
                 .align(Alignment.Center)
-                .padding(vertical = 16.dp),
+                .padding(vertical = 20.dp),
         )
     }
 }
@@ -179,7 +179,7 @@ private fun KuringAlertDialogButton(
 private fun KuringAlertDialogPreview() {
     KuringTheme {
         KuringAlertDialog(
-            text = "스마트ICT융합공학과를\n삭제하시겠습니까?",
+            text = "스마트ICT융합공학과를\n내 학과 목록에 추가할까요?",
             onConfirm = {},
             onDismiss = {},
             modifier = Modifier.padding(16.dp),