From d2ea9954b4a66ed7c08d4c0013027d864a05b714 Mon Sep 17 00:00:00 2001 From: Wooyoung Myung Date: Thu, 8 Feb 2024 19:47:22 +0900 Subject: [PATCH 01/10] =?UTF-8?q?kuring-129=20[=EC=A0=9C=EA=B1=B0]=20?= =?UTF-8?q?=EA=B8=B0=EC=A1=B4=20=EA=B3=B5=EC=A7=80=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=ED=85=9C=20=EA=B5=AC=ED=98=84=20=EC=BD=94=EB=93=9C=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../designsystem/components/NoticeItem.kt | 225 +----------------- 1 file changed, 6 insertions(+), 219 deletions(-) diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt index a442dc424..fb9b6414b 100644 --- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt +++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt @@ -1,34 +1,12 @@ package com.ku_stacks.ku_ring.designsystem.components -import androidx.compose.foundation.Image import androidx.compose.foundation.background -import androidx.compose.foundation.clickable -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.shape.RoundedCornerShape -import androidx.compose.material.Text +import androidx.compose.material.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.alpha -import androidx.compose.ui.draw.clip -import androidx.compose.ui.graphics.ColorFilter -import androidx.compose.ui.graphics.asImageBitmap -import androidx.compose.ui.platform.LocalContext -import androidx.compose.ui.platform.LocalDensity -import androidx.compose.ui.res.colorResource -import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp -import androidx.constraintlayout.compose.ConstraintLayout -import androidx.constraintlayout.compose.Dimension -import androidx.core.content.res.ResourcesCompat -import androidx.core.graphics.drawable.toBitmap -import com.ku_stacks.ku_ring.designsystem.R import com.ku_stacks.ku_ring.designsystem.theme.KuringTheme -import com.ku_stacks.ku_ring.designsystem.theme.SfProDisplay import com.ku_stacks.ku_ring.domain.Notice @Composable @@ -37,202 +15,7 @@ fun NoticeItem( modifier: Modifier = Modifier, onClick: (Notice) -> Unit = {}, ) { - ConstraintLayout( - modifier = modifier - .clickable { onClick(notice) } - .fillMaxWidth() - ) { - val (point, subjectText, postedDateText, tags) = createRefs() - NoticeItemPoint( - isNew = notice.isNew, - isRead = notice.isRead, - isSubscribing = notice.isSubscribing, - isSaved = notice.isSaved, - modifier = Modifier.constrainAs(point) { - start.linkTo(parent.start, margin = 20.dp) - top.linkTo(parent.top, margin = 26.dp) - bottom.linkTo(parent.bottom, margin = 34.dp) - } - ) - NoticeItemSubject( - subject = notice.subject, - isRead = notice.isRead, - modifier = Modifier - .constrainAs(subjectText) { - start.linkTo(point.end, margin = 12.dp) - end.linkTo(parent.end, margin = 22.dp) - top.linkTo(parent.top, 7.dp) - width = Dimension.fillToConstraints - } - ) - NoticeItemPostedDate( - postedDate = notice.postedDate, - isRead = notice.isRead, - modifier = Modifier.constrainAs(postedDateText) { - start.linkTo(subjectText.start) - top.linkTo(subjectText.bottom, margin = 6.dp) - bottom.linkTo(parent.bottom, margin = 20.dp) - }, - ) - NoticeItemTags( - tags = notice.tag, - modifier = Modifier.constrainAs(tags) { - start.linkTo(postedDateText.end, margin = 8.dp) - top.linkTo(postedDateText.top) - } - ) - } -} - -@Composable -private fun NoticeItemPoint( - isNew: Boolean, - isRead: Boolean, - isSubscribing: Boolean, - isSaved: Boolean, - modifier: Modifier = Modifier, -) { - val pointColorId = when { - isSaved -> R.color.kus_green// green - isSubscribing -> R.color.kus_pink //pink - else -> R.color.kus_secondary_gray// gray - } - val pointColor = colorResource(id = pointColorId) - - // visibility 대용 - val alpha = when { - isSaved -> 1f - isRead -> 0f - isNew -> 1f - else -> 0f - } - - val pointDrawable = ResourcesCompat.getDrawable( - LocalContext.current.resources, - R.drawable.point_primary_gray, - null - ) ?: return - val size = with(LocalDensity.current) { 8.dp.roundToPx() } - Image( - bitmap = pointDrawable.toBitmap(size, size).asImageBitmap(), - contentDescription = null, - colorFilter = ColorFilter.tint(pointColor), - modifier = modifier.alpha(alpha) - ) -} - -@Composable -private fun NoticeItemSubject( - subject: String, - isRead: Boolean, - modifier: Modifier = Modifier, -) { - Text( - text = subject, - modifier = modifier, - fontFamily = SfProDisplay, - fontWeight = FontWeight.Normal, - fontSize = 15.sp, - color = colorResource(id = if (isRead) R.color.kus_secondary_label else R.color.kus_label) - ) -} -@Composable -private fun NoticeItemPostedDate( - postedDate: String, - isRead: Boolean, - modifier: Modifier = Modifier, -) { - val dottedPostedDate = if (postedDate.length == 8) { - "${postedDate.substring(0..3)}.${postedDate.substring(4..5)}.${postedDate.substring(6..7)}" - } else { - postedDate - } - Text( - text = dottedPostedDate, - modifier = modifier, - fontFamily = SfProDisplay, - fontWeight = FontWeight.Normal, - fontSize = 14.sp, - color = colorResource(id = if (isRead) R.color.kus_secondary_label else R.color.kus_label) - ) -} - -@Composable -private fun NoticeItemTags( - tags: List, - modifier: Modifier = Modifier -) { - Row( - modifier = modifier, - horizontalArrangement = Arrangement.spacedBy(5.dp), - ) { - tags.forEach { tag -> - NoticeItemTag( - tag = tag, - modifier = Modifier - .clip(RoundedCornerShape(11.dp)) - .background(colorResource(R.color.kus_secondary_gray)) - ) - } - } -} - -@Composable -private fun NoticeItemTag( - tag: String, - modifier: Modifier = Modifier -) { - Text( - text = tag, - modifier = modifier.padding(horizontal = 4.dp, vertical = 0.5.dp), - fontFamily = SfProDisplay, - fontWeight = FontWeight.Medium, - fontSize = 12.sp, - color = colorResource(R.color.kus_background) - ) -} - -@LightAndDarkPreview -@Composable -private fun NoticeItemSubjectPreview() { - val subject = "2021-2학기 중간고사 이후 수업 운영 가이드라인" - KuringTheme { - Column(modifier = Modifier.padding(10.dp)) { - NoticeItemSubject( - subject = subject, - isRead = false, - ) - NoticeItemSubject( - subject = subject, - isRead = true, - ) - } - } -} - -@LightAndDarkPreview -@Composable -private fun NoticeItemPostedDatePreview() { - KuringTheme { - NoticeItemPostedDate( - postedDate = "2021.10.01", - isRead = false, - modifier = Modifier.padding(10.dp), - ) - } -} - -@LightAndDarkPreview -@Composable -private fun NoticeItemTagsPreview() { - val tags = listOf("지급", "학사", "한국교육과정평가원") - KuringTheme { - NoticeItemTags( - tags = tags, - modifier = Modifier.padding(10.dp), - ) - } } @LightAndDarkPreview @@ -253,7 +36,11 @@ private fun NoticeItemPreview() { tag = listOf("지급"), ) KuringTheme { - Column(modifier = Modifier.fillMaxWidth()) { + Column( + modifier = Modifier + .fillMaxWidth() + .background(MaterialTheme.colors.surface), + ) { NoticeItem(notice = notice) NoticeItem(notice = notice.copy(isRead = true)) NoticeItem(notice = notice.copy(isNew = true)) From dd0bb4de1f9a3f06ceccc3eb6e98d77b6b50f627 Mon Sep 17 00:00:00 2001 From: Wooyoung Myung Date: Thu, 8 Feb 2024 21:28:41 +0900 Subject: [PATCH 02/10] =?UTF-8?q?kuring-129=20[=EC=B6=94=EA=B0=80]=202.0?= =?UTF-8?q?=20=EA=B3=B5=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../designsystem/components/NoticeItem.kt | 186 ++++++++++++++++-- .../src/main/res/values/strings.xml | 3 + 2 files changed, 173 insertions(+), 16 deletions(-) diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt index fb9b6414b..8a5c09e1b 100644 --- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt +++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt @@ -1,40 +1,196 @@ 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 +import androidx.compose.foundation.layout.IntrinsicSize +import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.heightIn +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.Icon import androidx.compose.material.MaterialTheme +import androidx.compose.material.Text import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextOverflow +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.KuringTheme +import com.ku_stacks.ku_ring.designsystem.theme.Pretendard import com.ku_stacks.ku_ring.domain.Notice +/** + * 공지를 보여주는 컴포넌트이다. + * + * @param notice 보여줄 공지 객체 + * @param modifier 적용할 [Modifier] + * @param onClick 공지를 클릭했을 때의 콜백 + * @param content 컴포넌트 오른쪽에 보여줄 slot이다. [content]가 주어지면 북마크 아이콘이 보이지 않는다. + */ @Composable fun NoticeItem( notice: Notice, modifier: Modifier = Modifier, onClick: (Notice) -> Unit = {}, + content: @Composable (() -> Unit)? = null, ) { + // TODO: 중요 공지일 경우 배경색을 초록색으로 바꾸고, [중요] 태그 보여주기 + Row( + modifier = modifier + .clickable { onClick(notice) } + .fillMaxWidth() + .background(MaterialTheme.colors.surface), + horizontalArrangement = Arrangement.spacedBy(12.dp), + ) { + NoticeItemContent( + notice = notice, + modifier = Modifier + .padding(start = 20.dp, top = 16.dp, bottom = 16.dp) + .weight(1f), + ) + if (content == null) { + NoticeItemBookmarkIcon( + isVisible = notice.isSaved, + modifier = Modifier + .height(IntrinsicSize.Min) + .padding(end = 16.dp) + .align(Alignment.Top), + ) + } else { + content() + } + } +} + +@Composable +private fun NoticeItemContent( + notice: Notice, + modifier: Modifier = Modifier, +) { + Box(modifier = modifier.heightIn(min = 64.dp)) { + Column( + modifier = Modifier.align(Alignment.CenterStart), + verticalArrangement = Arrangement.spacedBy(4.dp), + ) { + NoticeItemTitle( + title = notice.subject, + isRead = notice.isRead, + ) + NoticeItemDate( + date = notice.postedDate, + isRead = notice.isRead, + ) + } + } +} + +@Composable +private fun NoticeItemImportantTag(modifier: Modifier = Modifier) { + val shape = RoundedCornerShape(50) + Text( + text = stringResource(id = R.string.notice_item_important_tag), + style = TextStyle( + fontSize = 11.sp, + lineHeight = 17.93.sp, + fontFamily = Pretendard, + fontWeight = FontWeight(600), + color = MaterialTheme.colors.primary, + ), + modifier = modifier + .background(color = Color.White, shape = shape) + .border(width = 0.5.dp, color = MaterialTheme.colors.primary, shape = shape) + .padding(horizontal = 8.dp, vertical = 3.dp), + ) +} +@Composable +private fun NoticeItemTitle( + title: String, + isRead: Boolean, + modifier: Modifier = Modifier, +) { + val color = if (isRead) Color(0xFF8E8E8E) else MaterialTheme.colors.onSurface + Text( + text = title, + style = TextStyle( + fontFamily = Pretendard, + fontSize = 16.sp, + lineHeight = 24.sp, + fontWeight = FontWeight(500), + color = color, + ), + maxLines = 2, + overflow = TextOverflow.Ellipsis, + modifier = modifier, + ) +} + +@Composable +private fun NoticeItemDate( + date: String, + isRead: Boolean, + modifier: Modifier = Modifier, +) { + // 현재 디자인된 색깔은 다크 모드에서 너무 안 보임 + // 임시로 onSurface(alpha=0.8) 색을 사용 + val color = if (isRead) Color(0xFF8E8E8E) else MaterialTheme.colors.onSurface.copy(alpha = 0.8f) + Text( + text = date, + style = TextStyle( + fontFamily = Pretendard, + fontSize = 14.sp, + lineHeight = 22.82.sp, + fontWeight = FontWeight(500), + color = color, + ), + modifier = modifier, + ) } +@Composable +private fun NoticeItemBookmarkIcon( + isVisible: Boolean, + modifier: Modifier = Modifier, +) { + Icon( + painter = painterResource(id = R.drawable.ic_bookmark), + contentDescription = null, + modifier = modifier, + tint = if (isVisible) MaterialTheme.colors.primary else Color.Transparent, + ) +} + +private val notice = Notice( + postedDate = "2023.05.13", + subject = "코로나-19 재확산에 따른 방역 수칙 및 자발적 거리두기 중요 내용 안내", + category = "department", + department = "cse", + url = "", + articleId = "", + isNew = false, + isRead = false, + isSubscribing = false, + isSaved = false, + isReadOnStorage = false, + tag = listOf("지급"), +) + @LightAndDarkPreview @Composable private fun NoticeItemPreview() { - val notice = Notice( - postedDate = "2023.05.13", - subject = "2023학년도 1학기 2차 교직 응급처치 및 심폐소생술 실습 안내", - category = "department", - department = "cse", - url = "", - articleId = "", - isNew = false, - isRead = false, - isSubscribing = false, - isSaved = false, - isReadOnStorage = false, - tag = listOf("지급"), - ) KuringTheme { Column( modifier = Modifier @@ -43,8 +199,6 @@ private fun NoticeItemPreview() { ) { NoticeItem(notice = notice) NoticeItem(notice = notice.copy(isRead = true)) - NoticeItem(notice = notice.copy(isNew = true)) - NoticeItem(notice = notice.copy(isNew = true, isSubscribing = true)) NoticeItem(notice = notice.copy(isSaved = true)) } } diff --git a/common/designsystem/src/main/res/values/strings.xml b/common/designsystem/src/main/res/values/strings.xml index c467efd50..dc4713f38 100644 --- a/common/designsystem/src/main/res/values/strings.xml +++ b/common/designsystem/src/main/res/values/strings.xml @@ -11,6 +11,9 @@ 대표 + + 중요 + ver. %1$s © 2021 KU Ring. All rights reserved. From c5be0009d5a3e8250a461c898c33401e2982cca6 Mon Sep 17 00:00:00 2001 From: Wooyoung Myung Date: Sat, 24 Feb 2024 19:30:04 +0900 Subject: [PATCH 03/10] =?UTF-8?q?kuring-129=20[=EC=88=98=EC=A0=95]=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=EB=90=9C=20KuringCTA=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/KuringCallToAction.kt | 91 +++++++++++++++---- .../ku_ring/designsystem/theme/Color.kt | 6 ++ .../compose/Subscriptions.kt | 3 +- 3 files changed, 81 insertions(+), 19 deletions(-) diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringCallToAction.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringCallToAction.kt index 73b4fe6b7..597ede064 100644 --- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringCallToAction.kt +++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringCallToAction.kt @@ -2,6 +2,7 @@ package com.ku_stacks.ku_ring.designsystem.components import androidx.compose.animation.animateColorAsState import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding @@ -12,28 +13,33 @@ import androidx.compose.material.MaterialTheme import androidx.compose.material.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.Modifier +import androidx.compose.ui.draw.drawBehind +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.geometry.Size +import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import com.ku_stacks.ku_ring.designsystem.theme.Gray200 +import com.ku_stacks.ku_ring.designsystem.theme.Gray300 import com.ku_stacks.ku_ring.designsystem.theme.KuringSub 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 /** * 쿠링 앱에서 사용될 CTA 버튼이다. - * 주로 화면 하단에 위치하며, 사용자가 수행할 메인 작업을 표현한다. + * 화면 하단에 위치하며, 사용자가 수행할 메인 작업을 표현한다. * * @param text CTA에 보여줄 텍스트 * @param onClick CTA를 클릭했을 때 실행할 콜백 * @param modifier CTA에 적용될 [Modifier] * @param enabled CTA 버튼이 활성화되었는지를 나타낸다. true라면 배경색이 [MaterialTheme.colors.primary]로 설정되며, * false라면 배경색이 [KuringSub]로 설정된다. 컨텐츠 색깔은 둘 중 배경색으로 사용되지 않은 나머지 색으로 설정된다. + * @param blur 버튼 위에 블러 효과를 적용할 지 결정한다. 블러는 버튼 위에 버튼 높이의 1/4만큼 그려진다. */ @Composable fun KuringCallToAction( @@ -41,13 +47,19 @@ fun KuringCallToAction( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, + blur: Boolean = false, ) { - KuringCallToAction(onClick = onClick, enabled = enabled, modifier = modifier) { + KuringCallToAction( + onClick = onClick, + enabled = enabled, + modifier = modifier, + blur = blur, + ) { Text( text = text, style = TextStyle( fontSize = 16.sp, - lineHeight = 26.08.sp, + lineHeight = 24.sp, fontFamily = Pretendard, fontWeight = FontWeight(600), ), @@ -57,24 +69,27 @@ fun KuringCallToAction( /** * 쿠링 앱에서 사용될 CTA 버튼이다. - * 주로 화면 하단에 위치하며, 사용자가 수행할 메인 작업을 표현한다. + * 화면 하단에 위치하며, 사용자가 수행할 메인 작업을 표현한다. * * @param onClick CTA를 클릭했을 때 실행할 콜백 * @param modifier CTA에 적용될 [Modifier] * @param enabled CTA 버튼이 활성화되었는지를 나타낸다. true라면 배경색이 [MaterialTheme.colors.primary]로 설정되며, * false라면 배경색이 [KuringSub]로 설정된다. 컨텐츠 색깔은 둘 중 배경색으로 사용되지 않은 나머지 색으로 설정된다. + * @param blur 버튼 위에 블러 효과를 적용할 지 결정한다. 블러는 버튼 위에 버튼 높이의 1/4만큼 그려진다. */ @Composable fun KuringCallToAction( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, + blur: Boolean = false, contents: @Composable () -> Unit, ) { KuringCallToActionBase( onClick = onClick, paddingValues = PaddingValues(horizontal = 50.dp, vertical = 16.dp), enabled = enabled, + blur = blur, modifier = modifier, contents = contents, ) @@ -85,18 +100,38 @@ private fun KuringCallToActionBase( onClick: () -> Unit, paddingValues: PaddingValues, enabled: Boolean, + blur: Boolean, modifier: Modifier = Modifier, contents: @Composable () -> Unit, ) { val backgroundColor by animateColorAsState( - targetValue = if (enabled) MaterialTheme.colors.primary else KuringSub, + targetValue = if (enabled) MaterialTheme.colors.primary else Gray200, label = "background color", ) val contentColor by animateColorAsState( - targetValue = if (enabled) KuringSub else MaterialTheme.colors.primary, + targetValue = if (enabled) MainPrimarySelected else Gray300, label = "content color", ) + val blurModifier = if (blur) { + val surfaceColor = MaterialTheme.colors.surface + Modifier.drawBehind { + val gradientHeight = size.height * 0.3f + val gradientBrush = Brush.verticalGradient( + colors = listOf(Color.Transparent, surfaceColor), + startY = -gradientHeight, + endY = 0f, + ) + drawRect( + brush = gradientBrush, + topLeft = Offset(x = 0f, y = -gradientHeight), + size = Size(width = size.width, height = gradientHeight), + ) + } + } else { + Modifier + } + Button( onClick = onClick, colors = ButtonDefaults.textButtonColors( @@ -106,7 +141,9 @@ private fun KuringCallToActionBase( shape = RoundedCornerShape(50), elevation = null, contentPadding = paddingValues, - modifier = modifier, + modifier = modifier + .then(blurModifier) + .padding(horizontal = 20.dp, vertical = 16.dp), ) { contents() } @@ -114,18 +151,38 @@ private fun KuringCallToActionBase( @LightAndDarkPreview @Composable -private fun KuringCallToActionPreview() { - var isEnabled by remember { mutableStateOf(false) } - +private fun KuringCallToActionPreview_Enabled() { KuringTheme { KuringCallToAction( text = "완료", - enabled = isEnabled, - onClick = { isEnabled = !isEnabled }, + enabled = true, + onClick = { }, modifier = Modifier - .background(Color.Gray) - .padding(16.dp) + .background(MaterialTheme.colors.surface) .fillMaxWidth(), ) } +} + +@LightAndDarkPreview +@Composable +private fun KuringCallToActionPreview_Enabled_Blur() { + KuringTheme { + Box( + modifier = Modifier + .fillMaxWidth() + .background(Color.Gray) + .padding(top = 30.dp), + ) { + KuringCallToAction( + text = "완료", + enabled = true, + blur = true, + onClick = { }, + modifier = Modifier + .background(MaterialTheme.colors.surface) + .fillMaxWidth(), + ) + } + } } \ No newline at end of file diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt index 7e7b0fedd..e1a6063c5 100644 --- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt +++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt @@ -14,6 +14,8 @@ val KuringGreen50: Color @Composable get() = colorResource(R.color.kus_green_50) val KuringSecondaryGreen: Color @Composable get() = colorResource(R.color.kus_secondary_green) +val MainPrimarySelected: Color + @Composable get() = Color(0xFFE2F5EC) val KuringSub: Color @Composable get() = Color(0xFFECF9F3) val CaptionGray1: Color @@ -22,6 +24,10 @@ val CaptionGray2: Color @Composable get() = Color(0xFFAEB1B6) val Gray2: Color @Composable get() = Color(0xFF636363) +val Gray200: Color + @Composable get() = Color(0xFFE5E5E5) +val Gray300: Color + @Composable get() = Color(0xFF999999) val BoxBackgroundColor2: Color @Composable get() = Color(0xFFF2F3F5) diff --git a/feature/edit_subscription/src/main/java/com/ku_stacks/ku_ring/edit_subscription/compose/Subscriptions.kt b/feature/edit_subscription/src/main/java/com/ku_stacks/ku_ring/edit_subscription/compose/Subscriptions.kt index b75c0664d..004b71a77 100644 --- a/feature/edit_subscription/src/main/java/com/ku_stacks/ku_ring/edit_subscription/compose/Subscriptions.kt +++ b/feature/edit_subscription/src/main/java/com/ku_stacks/ku_ring/edit_subscription/compose/Subscriptions.kt @@ -313,7 +313,6 @@ private fun DepartmentCategoryEmptyIndicator( text = stringResource(id = R.string.department_subscription_add_department), onClick = onAddDepartmentButtonClick, modifier = Modifier - .padding(26.dp) .fillMaxWidth(), ) } @@ -364,9 +363,9 @@ private fun DepartmentCategoryList( KuringCallToAction( text = stringResource(id = R.string.department_subscription_complete), onClick = onCallToActionClick, + blur = true, modifier = Modifier .background(MaterialTheme.colors.surface) - .padding(26.dp) .fillMaxWidth(), ) } From 51c06facd9da493873c0a6b4989a6ff390af7dde Mon Sep 17 00:00:00 2001 From: Wooyoung Myung Date: Sat, 24 Feb 2024 19:42:04 +0900 Subject: [PATCH 04/10] =?UTF-8?q?kuring-129=20[=EC=88=98=EC=A0=95]=20?= =?UTF-8?q?=ED=94=BC=EB=93=9C=EB=B0=B1=20=ED=99=94=EB=A9=B4=EC=97=90?= =?UTF-8?q?=EC=84=9C=20:common:designsystem=20=EB=AA=A8=EB=93=88=EC=9D=98?= =?UTF-8?q?=20KuringCTA=EB=A5=BC=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ku_ring/feedback/feedback/compose/FeedbackScreen.kt | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/feature/feedback/src/main/java/com/ku_stacks/ku_ring/feedback/feedback/compose/FeedbackScreen.kt b/feature/feedback/src/main/java/com/ku_stacks/ku_ring/feedback/feedback/compose/FeedbackScreen.kt index 12939a2a7..8d05b2e42 100644 --- a/feature/feedback/src/main/java/com/ku_stacks/ku_ring/feedback/feedback/compose/FeedbackScreen.kt +++ b/feature/feedback/src/main/java/com/ku_stacks/ku_ring/feedback/feedback/compose/FeedbackScreen.kt @@ -34,6 +34,7 @@ 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.components.CenterTitleTopBar +import com.ku_stacks.ku_ring.designsystem.components.KuringCallToAction import com.ku_stacks.ku_ring.designsystem.components.LightAndDarkPreview import com.ku_stacks.ku_ring.designsystem.theme.KuringGreen import com.ku_stacks.ku_ring.designsystem.theme.KuringSecondaryGreen @@ -122,9 +123,11 @@ private fun FeedbackScreen( .border(width = 1.5f.dp, color = Color.Gray, shape = RoundedCornerShape(20.dp)), ) - SendFeedbackButton( - textStatus = textStatus, - onClickSendFeedback = onClickSendFeedback, + KuringCallToAction( + text = stringResource(id = R.string.feedback_send_content), + onClick = onClickSendFeedback, + enabled = textStatus == FeedbackTextStatus.NORMAL, + modifier = Modifier.fillMaxWidth(), ) } } From 6217caa45f6453a10ab544d35533d1d2a3893bca Mon Sep 17 00:00:00 2001 From: Wooyoung Myung Date: Sat, 24 Feb 2024 19:59:26 +0900 Subject: [PATCH 05/10] =?UTF-8?q?kuring-129=20[=EC=88=98=EC=A0=95]=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=EB=90=9C=20=EA=B3=B5=EC=A7=80=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=ED=85=9C=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../designsystem/components/NoticeItem.kt | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt index 8a5c09e1b..5f090ee40 100644 --- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt +++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt @@ -1,5 +1,6 @@ package com.ku_stacks.ku_ring.designsystem.components +import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.clickable @@ -13,7 +14,6 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.Icon import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.runtime.Composable @@ -52,25 +52,23 @@ fun NoticeItem( modifier = modifier .clickable { onClick(notice) } .fillMaxWidth() - .background(MaterialTheme.colors.surface), - horizontalArrangement = Arrangement.spacedBy(12.dp), + .background(MaterialTheme.colors.surface) + .padding(horizontal = 20.dp), ) { NoticeItemContent( notice = notice, modifier = Modifier - .padding(start = 20.dp, top = 16.dp, bottom = 16.dp) + .padding(vertical = 12.dp) .weight(1f), ) - if (content == null) { + if (content != null) { + content() + } else if (notice.isSaved) { NoticeItemBookmarkIcon( - isVisible = notice.isSaved, modifier = Modifier .height(IntrinsicSize.Min) - .padding(end = 16.dp) .align(Alignment.Top), ) - } else { - content() } } } @@ -162,14 +160,12 @@ private fun NoticeItemDate( @Composable private fun NoticeItemBookmarkIcon( - isVisible: Boolean, modifier: Modifier = Modifier, ) { - Icon( + Image( painter = painterResource(id = R.drawable.ic_bookmark), contentDescription = null, modifier = modifier, - tint = if (isVisible) MaterialTheme.colors.primary else Color.Transparent, ) } From 96efcc23381a43bc17ae8a9d2de38c835b975582 Mon Sep 17 00:00:00 2001 From: Wooyoung Myung Date: Sat, 24 Feb 2024 20:06:14 +0900 Subject: [PATCH 06/10] =?UTF-8?q?kuring-129=20[=EC=88=98=EC=A0=95]=20Capti?= =?UTF-8?q?onGray1=20=EC=83=89=EA=B9=94=EC=9D=98=20=EC=9D=B4=EB=A6=84?= =?UTF-8?q?=EC=9D=84=20TextCaption1=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ku_ring/designsystem/components/CenterTitleTopBar.kt | 4 ++-- .../ku_ring/designsystem/components/SearchTextField.kt | 4 ++-- .../java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/CenterTitleTopBar.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/CenterTitleTopBar.kt index 26740ef59..cc0298e41 100644 --- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/CenterTitleTopBar.kt +++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/CenterTitleTopBar.kt @@ -26,10 +26,10 @@ 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 +import com.ku_stacks.ku_ring.designsystem.theme.TextCaption1 /** * 제목과 내비게이션 아이콘, 액션 텍스트를 보여주는 최상단 바이다. @@ -185,7 +185,7 @@ private fun Navigation( navigationClickLabel: String? = null, contentPadding: PaddingValues = PaddingValues(0.dp), ) { - CompositionLocalProvider(LocalContentColor provides CaptionGray1) { + CompositionLocalProvider(LocalContentColor provides TextCaption1) { LazyColumn( modifier = modifier.clickable( onClick = { onNavigationClick?.invoke() }, diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/SearchTextField.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/SearchTextField.kt index 6ef4da841..fae6b6b5c 100644 --- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/SearchTextField.kt +++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/SearchTextField.kt @@ -36,9 +36,9 @@ 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.BoxBackgroundColor2 -import com.ku_stacks.ku_ring.designsystem.theme.CaptionGray1 import com.ku_stacks.ku_ring.designsystem.theme.KuringTheme import com.ku_stacks.ku_ring.designsystem.theme.Pretendard +import com.ku_stacks.ku_ring.designsystem.theme.TextCaption1 @OptIn(ExperimentalMaterialApi::class) @Composable @@ -138,7 +138,7 @@ private fun TrailingDeleteIcon( Icon( painter = painterResource(id = R.drawable.ic_close), contentDescription = null, - tint = CaptionGray1, + tint = TextCaption1, modifier = modifier .scale(0.8f) .clickable(onClick = onClear), diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt index e1a6063c5..3b5de4207 100644 --- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt +++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt @@ -18,7 +18,7 @@ val MainPrimarySelected: Color @Composable get() = Color(0xFFE2F5EC) val KuringSub: Color @Composable get() = Color(0xFFECF9F3) -val CaptionGray1: Color +val TextCaption1: Color @Composable get() = Color(0xFF868A92) val CaptionGray2: Color @Composable get() = Color(0xFFAEB1B6) From 294db5f3b64a32da7df1d482927834cdad9624bb Mon Sep 17 00:00:00 2001 From: Wooyoung Myung Date: Sat, 24 Feb 2024 20:19:40 +0900 Subject: [PATCH 07/10] =?UTF-8?q?kuring-129=20[=EC=88=98=EC=A0=95]=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=EB=90=9C=20=ED=95=99=EA=B3=BC=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=ED=85=9C=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/DepartmentItems.kt | 59 +++++++++++-------- .../src/main/res/values/strings.xml | 1 + 2 files changed, 36 insertions(+), 24 deletions(-) diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/DepartmentItems.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/DepartmentItems.kt index b91475bcd..cf6d48f81 100644 --- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/DepartmentItems.kt +++ b/common/designsystem/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,6 +17,7 @@ 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 @@ -23,13 +25,18 @@ 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,7 +45,7 @@ fun DepartmentWithDeleteIcon( onDeleteDepartment: (Department) -> Unit, modifier: Modifier = Modifier, ) { - Department( + BaseDepartment( department = department, modifier = modifier, ) { @@ -46,7 +53,7 @@ fun DepartmentWithDeleteIcon( 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/common/designsystem/src/main/res/values/strings.xml b/common/designsystem/src/main/res/values/strings.xml index dc4713f38..4b26ab842 100644 --- a/common/designsystem/src/main/res/values/strings.xml +++ b/common/designsystem/src/main/res/values/strings.xml @@ -13,6 +13,7 @@ 중요 + 삭제 ver. %1$s From 9aac24c884fddd691e8a73ae99dd512b2adeb7d2 Mon Sep 17 00:00:00 2001 From: Wooyoung Myung Date: Sat, 24 Feb 2024 20:31:49 +0900 Subject: [PATCH 08/10] =?UTF-8?q?kuring-129=20[=EC=88=98=EC=A0=95]=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=EB=90=9C=20KuringAlertDialog=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ku_ring/designsystem/components/KuringAlertDialog.kt | 4 ++-- common/designsystem/src/main/res/values/strings.xml | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringAlertDialog.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringAlertDialog.kt index ff0d12e9c..9a436adbf 100644 --- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringAlertDialog.kt +++ b/common/designsystem/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), diff --git a/common/designsystem/src/main/res/values/strings.xml b/common/designsystem/src/main/res/values/strings.xml index 4b26ab842..e914322d4 100644 --- a/common/designsystem/src/main/res/values/strings.xml +++ b/common/designsystem/src/main/res/values/strings.xml @@ -4,8 +4,8 @@ 네트워크 문제로 연결되지 않았습니다. 다시 시도해주세요 - 취소 - 확인 + 취소하기 + 추가하기 시작하기 완료하기 From e975a07afb2d5d521a320b23fd61ee66dcf940e8 Mon Sep 17 00:00:00 2001 From: Wooyoung Myung Date: Sat, 24 Feb 2024 20:44:13 +0900 Subject: [PATCH 09/10] =?UTF-8?q?kuring-129=20[=EC=88=98=EC=A0=95]=20Searc?= =?UTF-8?q?hTextField=EC=9D=98=20CaptionGray1=EC=9D=84=20TextCaption1?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ku_ring/designsystem/components/SearchTextField.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/SearchTextField.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/SearchTextField.kt index e312fc7b4..a27c33b7d 100644 --- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/SearchTextField.kt +++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/SearchTextField.kt @@ -108,7 +108,7 @@ private fun LeadingSearchIcon(modifier: Modifier = Modifier) { Icon( painter = painterResource(id = R.drawable.ic_search), contentDescription = null, - tint = CaptionGray1, + tint = TextCaption1, modifier = modifier, ) } From 85ee251fb50e2ba82c5a6711f6c05ba8f597449f Mon Sep 17 00:00:00 2001 From: Wooyoung Myung Date: Sat, 24 Feb 2024 21:00:55 +0900 Subject: [PATCH 10/10] =?UTF-8?q?kuring-129=20[=EC=88=98=EC=A0=95]=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=EB=90=9C=20CenterTitleTopBar=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../designsystem/components/CenterTitleTopBar.kt | 16 +++++++++++++--- .../ku_ring/designsystem/theme/Color.kt | 2 ++ 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/CenterTitleTopBar.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/CenterTitleTopBar.kt index cc0298e41..91cc27cb5 100644 --- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/CenterTitleTopBar.kt +++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/CenterTitleTopBar.kt @@ -29,7 +29,6 @@ import com.ku_stacks.ku_ring.designsystem.R 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 -import com.ku_stacks.ku_ring.designsystem.theme.TextCaption1 /** * 제목과 내비게이션 아이콘, 액션 텍스트를 보여주는 최상단 바이다. @@ -40,6 +39,7 @@ import com.ku_stacks.ku_ring.designsystem.theme.TextCaption1 * @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 TextCaption1) { + CompositionLocalProvider(LocalContentColor provides navigationContentColor) { LazyColumn( modifier = modifier.clickable( onClick = { onNavigationClick?.invoke() }, diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt index 3b5de4207..0adbd35a3 100644 --- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt +++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt @@ -28,6 +28,8 @@ val Gray200: Color @Composable get() = Color(0xFFE5E5E5) val Gray300: Color @Composable get() = Color(0xFF999999) +val Gray600: Color + @Composable get() = Color(0xFF262626) val BoxBackgroundColor2: Color @Composable get() = Color(0xFFF2F3F5)