From 977c8fad8db2c6e18c79be623e6535b508ad48fc Mon Sep 17 00:00:00 2001 From: soyeonLee <109227292+soyeonLee126@users.noreply.github.com> Date: Wed, 2 Sep 2026 17:09:12 +0900 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20=EC=A2=81=EC=9D=80=20=EA=B8=B0?= =?UTF-8?q?=EA=B8=B0=EC=97=90=EC=84=9C=20=EC=B9=B4=EB=93=9C=20=EC=95=84?= =?UTF-8?q?=EB=9E=98=20=EC=9A=94=EC=86=8C=EA=B0=80=20=EB=B0=96=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=B0=80=EB=A6=AC=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 카드 높이만 폭에 비례해 줄고 안쪽 여백과 캐릭터는 고정 dp 여서 360dp 기기에서 버튼이 종이 밖으로 밀림. 본문 3줄 기준으로 대응. --- .../core/designsystem/card/GamssImageCard.kt | 211 +++++++++++------- .../archive/component/CardDetailDialog.kt | 2 +- .../feature/chat/component/CardFoldOverlay.kt | 22 +- 3 files changed, 149 insertions(+), 86 deletions(-) diff --git a/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt b/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt index a9e05b61..11bf736d 100644 --- a/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt +++ b/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt @@ -6,6 +6,7 @@ import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.BoxScope +import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.PaddingValues @@ -25,7 +26,6 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.alpha import androidx.compose.ui.draw.clip import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.PathEffect @@ -36,6 +36,7 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.gamss.android.core.designsystem.R @@ -44,64 +45,88 @@ import com.gamss.android.core.designsystem.component.chat.ChatSender import com.gamss.android.core.designsystem.component.chat.GamssChatBubbleDefaults import com.gamss.android.core.designsystem.component.chat.GamssReceivedChatBubble import com.gamss.android.core.designsystem.component.chat.GamssSentChatBubble -import com.gamss.android.core.designsystem.modifier.noRippleClickableIfNotNull +import com.gamss.android.core.designsystem.modifier.noRippleClickable import com.gamss.android.core.designsystem.theme.GamssTheme import com.gamss.android.core.designsystem.theme.LightGamssColors import com.gamss.android.core.designsystem.theme.LocalGamssColors +/** + * 손그림 종이 카드입니다. + * + * 카드 높이는 폭에 비례해 줄어들므로 안쪽 여백과 그림도 같은 배율([cardScale])로 줄여야 합니다. + * 고정 dp 로 두면 좁은 기기에서 아래쪽 요소가 카드 밖으로 밀립니다. 그래서 [content] 에도 배율을 + * 넘깁니다. 글자 크기에는 배율을 적용하지 않습니다. + */ @Composable fun GamssImageCard( date: String, modifier: Modifier = Modifier, shape: Shape = RectangleShape, topEndAction: @Composable BoxScope.() -> Unit = {}, - content: @Composable ColumnScope.() -> Unit, + content: @Composable ColumnScope.(scale: Float) -> Unit, ) { CompositionLocalProvider(LocalGamssColors provides LightGamssColors) { - Box( + BoxWithConstraints( modifier = modifier .widthIn(max = CardWidth) - .fillMaxWidth() - .aspectRatio(CardAspectRatio) - .clip(shape), + .fillMaxWidth(), ) { - Image( - painter = painterResource(R.drawable.bg_card), - contentDescription = null, - contentScale = ContentScale.Crop, - modifier = Modifier.fillMaxSize(), - ) - - Column( + val scale = cardScale(maxWidth) + Box( modifier = Modifier - .fillMaxSize() - .padding( - start = GamssTheme.spacing.spacing800, - end = GamssTheme.spacing.spacing800, - top = GamssTheme.spacing.spacing700, - ), + .fillMaxWidth() + .aspectRatio(CardAspectRatio) + .clip(shape), ) { - Text( - text = date, - modifier = Modifier.fillMaxWidth(), - style = GamssTheme.typography.subtitle3, - color = GamssTheme.colors.gray900, - textAlign = TextAlign.Center, + Image( + painter = painterResource(R.drawable.bg_card), + contentDescription = null, + contentScale = ContentScale.Crop, + modifier = Modifier.fillMaxSize(), ) - content() - } - Box( - modifier = Modifier - .align(Alignment.TopEnd) - .padding(top = GamssTheme.spacing.spacing550, end = GamssTheme.spacing.spacing550), - ) { - topEndAction() + Column( + modifier = Modifier + .fillMaxSize() + .padding( + start = GamssTheme.spacing.spacing800 * scale, + end = GamssTheme.spacing.spacing800 * scale, + top = GamssTheme.spacing.spacing700 * scale, + ), + ) { + Text( + text = date, + modifier = Modifier.fillMaxWidth(), + style = GamssTheme.typography.subtitle3, + color = GamssTheme.colors.gray900, + textAlign = TextAlign.Center, + ) + content(scale) + } + + Box( + modifier = Modifier + .align(Alignment.TopEnd) + .padding( + top = GamssTheme.spacing.spacing550 * scale, + end = GamssTheme.spacing.spacing550 * scale, + ), + ) { + topEndAction() + } } } } } +/** + * 카드가 시안 폭보다 좁아진 비율입니다. + * + * 화면 폭을 쓰는 [com.gamss.android.core.designsystem.theme.designScale] 과 기준이 다릅니다. 카드는 + * 화면 좌우 여백을 뺀 자리에 놓여, 시안에서도 화면(402)보다 좁은 [CardWidth] 위에서 값이 정해졌습니다. + */ +private fun cardScale(cardWidth: Dp): Float = (cardWidth / CardWidth).coerceAtMost(1f) + @Preview(name = "Emotion - Light", showBackground = true) @Suppress("UnusedPrivateMember") @Composable @@ -129,13 +154,38 @@ private fun GamssImageCardEmotionDarkPreview() { } } +/** + * 카드가 좁아지는 기기에서 본문 3줄이 들어가는지 보는 프리뷰입니다. 366 폭 프리뷰만 두면 좁은 + * 기기에서 버튼이 종이 밖으로 밀리는 것을 못 잡습니다. + * + * 공유 줄은 화면과 같이 끕니다(`isShareVisible = false`). 켜 두면 이 프리뷰만 30dp 를 더 써서 + * 화면에서는 나지 않는 잘림이 보입니다. + */ +@Preview(name = "Emotion - 360dp", showBackground = true, widthDp = 360, heightDp = 520) +@Preview(name = "Emotion - 320dp", showBackground = true, widthDp = 320, heightDp = 470) +@Suppress("UnusedPrivateMember") +@Composable +private fun GamssImageCardEmotionNarrowPreview() { + GamssTheme(darkTheme = false) { + Box(modifier = Modifier.padding(GamssTheme.spacing.spacing300)) { + EmotionCardPreviewContent( + description = "설느닛람햄을 긱에자네에 신손 겅투히오의 흐랸비의 수매해으는 하어이 " + + "머츠니가 도랴흐로 뎌슨하다", + isShareVisible = false, + ) + } + } +} + /** * 감정 캐릭터와 대화 요약을 보여 주는 이미지 카드 퍼사드. * * 카드의 고정 구조와 감정별 캐릭터 선택은 이 컴포넌트가 맡고, 문구와 사용자 동작만 호출부가 제공한다. * 따라서 화면마다 [GamssImageCard]의 간격과 텍스트 스타일을 다시 조합할 필요가 없다. * - * @param isShareVisible 공유 줄을 보일지. 끄면 자리만 남기고 투명하게 두어 카드 안 간격이 바뀌지 않는다. + * @param isShareVisible 공유 줄을 보일지 정합니다. 공유 줄은 카드 맨 아래라 끄고 그리지 않아도 + * 위쪽 간격은 그대로입니다. 반대로 자리를 남겨 두면 좁은 기기에서 그 높이만큼 버튼이 카드 밖으로 + * 밀립니다. */ @Composable @Suppress("LongParameterList") @@ -160,8 +210,8 @@ fun GamssEmotionCard( modifier = modifier, shape = shape, topEndAction = topEndAction, - ) { - GamssEmotionCardContent(character = character, showDivider = true) { + ) { scale -> + GamssEmotionCardContent(character = character, scale = scale, showDivider = true) { Text( text = title, modifier = Modifier.fillMaxWidth(), @@ -169,7 +219,7 @@ fun GamssEmotionCard( color = GamssTheme.colors.gray950, textAlign = TextAlign.Center, ) - Spacer(modifier = Modifier.height(GamssTheme.spacing.spacing200)) + Spacer(modifier = Modifier.height(GamssTheme.spacing.spacing200 * scale)) Text( text = description, modifier = Modifier.fillMaxWidth(), @@ -180,46 +230,48 @@ fun GamssEmotionCard( maxLines = DESCRIPTION_MAX_LINES, overflow = TextOverflow.Ellipsis, ) - Spacer(modifier = Modifier.height(DividerToContentGap)) + Spacer(modifier = Modifier.height(DividerToContentGap * scale)) GamssCardDashedDivider() - Spacer(modifier = Modifier.height(DividerToContentGap)) + Spacer(modifier = Modifier.height(DividerToContentGap * scale)) Row( modifier = Modifier.fillMaxWidth(), - horizontalArrangement = Arrangement.spacedBy(GamssTheme.spacing.spacing100), + horizontalArrangement = Arrangement.spacedBy(GamssTheme.spacing.spacing100 * scale), ) { CardOutlinedButton( text = primaryActionLabel, onClick = onPrimaryActionClick, + scale = scale, modifier = Modifier.weight(1f), ) CardOutlinedButton( text = secondaryActionLabel, onClick = onSecondaryActionClick, + scale = scale, modifier = Modifier.weight(1f), ) } - Spacer(modifier = Modifier.height(GamssTheme.spacing.spacing200)) - // 숨겨도 자리는 남긴다. 빼 버리면 카드 안 다른 요소가 아래로 밀려 시안과 어긋난다. - Row( - modifier = Modifier - .fillMaxWidth() - .alpha(if (isShareVisible) 1f else 0f) - .noRippleClickableIfNotNull(onShareClick.takeIf { isShareVisible }), - horizontalArrangement = Arrangement.Center, - verticalAlignment = Alignment.CenterVertically, - ) { - Text( - text = shareActionLabel, - style = GamssTheme.typography.body5Medium, - color = GamssTheme.colors.gray600, - ) - Spacer(modifier = Modifier.width(GamssTheme.spacing.spacing025)) - Icon( - painter = painterResource(GamssIcons.RightChevron), - contentDescription = null, - tint = GamssTheme.colors.gray600, - modifier = Modifier.size(GamssTheme.spacing.spacing300), - ) + if (isShareVisible) { + Spacer(modifier = Modifier.height(GamssTheme.spacing.spacing200 * scale)) + Row( + modifier = Modifier + .fillMaxWidth() + .noRippleClickable(onClick = onShareClick), + horizontalArrangement = Arrangement.Center, + verticalAlignment = Alignment.CenterVertically, + ) { + Text( + text = shareActionLabel, + style = GamssTheme.typography.body5Medium, + color = GamssTheme.colors.gray600, + ) + Spacer(modifier = Modifier.width(GamssTheme.spacing.spacing025 * scale)) + Icon( + painter = painterResource(GamssIcons.RightChevron), + contentDescription = null, + tint = GamssTheme.colors.gray600, + modifier = Modifier.size(GamssTheme.spacing.spacing300 * scale), + ) + } } } } @@ -230,27 +282,31 @@ fun GamssEmotionCard( * * [showDivider] 를 켜면 캐릭터와 콘텐츠 사이에 점선을 넣는다. 카드 목록처럼 점선이 없는 * 시안도 같은 캐릭터 영역을 쓰므로 기본값은 꺼짐이다. + * + * @param scale [GamssImageCard] 가 넘겨 준 카드 배율입니다. 캐릭터 그림과 간격이 카드와 함께 + * 줄어야 합니다. */ @Composable fun ColumnScope.GamssEmotionCardContent( character: GamssEmotionCardCharacter, + scale: Float, showDivider: Boolean = false, content: @Composable ColumnScope.() -> Unit, ) { - Spacer(modifier = Modifier.height(DateToCharacterGap)) + Spacer(modifier = Modifier.height(DateToCharacterGap * scale)) Box( modifier = Modifier .fillMaxWidth() - .height(CharacterImageHeight), + .height(CharacterImageHeight * scale), ) { GamssEmotionCardCharacterImage(character = character) } if (showDivider) { - Spacer(modifier = Modifier.height(CharacterToDividerGap)) + Spacer(modifier = Modifier.height(CharacterToDividerGap * scale)) GamssCardDashedDivider() - Spacer(modifier = Modifier.height(DividerToContentGap)) + Spacer(modifier = Modifier.height(DividerToContentGap * scale)) } else { - Spacer(modifier = Modifier.height(CharacterToTitleGap)) + Spacer(modifier = Modifier.height(CharacterToTitleGap * scale)) } content() } @@ -297,30 +353,34 @@ fun GamssChattingCard( modifier = modifier, shape = shape, topEndAction = topEndAction, - ) { - Spacer(modifier = Modifier.height(DateToChattingGap)) + ) { scale -> + Spacer(modifier = Modifier.height(DateToChattingGap * scale)) Column( modifier = Modifier .weight(1f) - .padding(bottom = GamssTheme.spacing.spacing700), + .padding(bottom = GamssTheme.spacing.spacing700 * scale), content = content, ) } } @Composable -private fun EmotionCardPreviewContent() { +private fun EmotionCardPreviewContent( + description: String = "설느닛람햄을 긱에자네에 신손 겅투히오의 흐랸비의 수매해으는 하어이", + isShareVisible: Boolean = true, +) { GamssEmotionCard( date = "26.08.03", character = GamssEmotionCardCharacter.ANGER, title = "오늘 화~나네", - description = "설느닛람햄을 긱에자네에 신손 겅투히오의 흐랸비의 수매해으는 하어이", + description = description, primaryActionLabel = "기록 버리기", secondaryActionLabel = "대화보기", shareActionLabel = "공유하기", onPrimaryActionClick = {}, onSecondaryActionClick = {}, onShareClick = {}, + isShareVisible = isShareVisible, topEndAction = { CloseIconPlaceholder() }, ) } @@ -341,13 +401,14 @@ private fun CloseIconPlaceholder(modifier: Modifier = Modifier) { private fun CardOutlinedButton( text: String, onClick: () -> Unit, + scale: Float, modifier: Modifier = Modifier, ) { GamssOutlinedCard( modifier = modifier, onClick = onClick, borderColor = GamssTheme.colors.gray900, - contentPadding = PaddingValues(vertical = GamssTheme.spacing.spacing200), + contentPadding = PaddingValues(vertical = GamssTheme.spacing.spacing200 * scale), ) { Text( text = text, diff --git a/feature/archive/src/main/java/com/gamss/android/feature/archive/component/CardDetailDialog.kt b/feature/archive/src/main/java/com/gamss/android/feature/archive/component/CardDetailDialog.kt index 00199b8d..edbd5f64 100644 --- a/feature/archive/src/main/java/com/gamss/android/feature/archive/component/CardDetailDialog.kt +++ b/feature/archive/src/main/java/com/gamss/android/feature/archive/component/CardDetailDialog.kt @@ -33,7 +33,7 @@ internal fun CardDetailDialog( onPrimaryActionClick = onDiscardClick, onSecondaryActionClick = onViewConversationClick, onShareClick = onShareClick, - // 공유가 아직 동작하지 않아 자리만 남기고 숨긴다. + // 공유가 아직 동작하지 않아 줄 자체를 숨깁니다. isShareVisible = false, topEndAction = { CardCloseButton(onClick = onDismiss) }, ) diff --git a/feature/chat/src/main/java/com/gamss/android/feature/chat/component/CardFoldOverlay.kt b/feature/chat/src/main/java/com/gamss/android/feature/chat/component/CardFoldOverlay.kt index 42ac4cf7..c61ac206 100644 --- a/feature/chat/src/main/java/com/gamss/android/feature/chat/component/CardFoldOverlay.kt +++ b/feature/chat/src/main/java/com/gamss/android/feature/chat/component/CardFoldOverlay.kt @@ -175,9 +175,10 @@ private fun UnfoldedPaper(card: Card, onSkip: () -> Unit) { GamssImageCard( date = formatCardDate(card.date), topEndAction = { FoldSkipButton(onClick = onSkip) }, - ) { + ) { scale -> GamssEmotionCardContent( character = card.character.toGamssEmotionCardCharacter(), + scale = scale, showDivider = true, ) { Text( @@ -187,16 +188,17 @@ private fun UnfoldedPaper(card: Card, onSkip: () -> Unit) { color = GamssTheme.colors.gray950, textAlign = TextAlign.Center, ) - Spacer(modifier = Modifier.height(GamssTheme.spacing.spacing200)) + Spacer(modifier = Modifier.height(GamssTheme.spacing.spacing200 * scale)) CardSummaryText(summary = card.summary, modifier = Modifier.weight(1f, fill = false)) - FoldPromptFooter() + FoldPromptFooter(scale = scale) } } } /** - * 카드 높이는 폭에 비례해 줄어드는데 안쪽 여백과 캐릭터 그림은 절대 dp 라, 좁은 기기에서 세 줄을 - * 다 쓰면 아래 점선과 안내가 카드 밖으로 밀려 잘린다. 밀리는 쪽이 아니라 요약이 양보해야 한다. + * 요약은 카드 안에서 마지막으로 자리를 받습니다. 안쪽 여백과 캐릭터 그림이 카드 배율로 함께 + * 줄어들어도, 글자 크기는 배율을 타지 않아 폰트 확대 설정에서는 세 줄이 남는 높이를 넘을 수 + * 있습니다. 그때 밀려 잘리는 쪽은 아래 점선과 안내가 아니라 요약이어야 합니다. */ @Composable private fun CardSummaryText(summary: String, modifier: Modifier = Modifier) { @@ -213,10 +215,10 @@ private fun CardSummaryText(summary: String, modifier: Modifier = Modifier) { /** 카드 밑에 겹쳐 놓지 않고 흐름에 넣어야 본문 길이가 달라져도 시안의 간격이 유지된다. */ @Composable -private fun ColumnScope.FoldPromptFooter() { - Spacer(modifier = Modifier.height(CardFoldSummaryToDividerGap)) +private fun ColumnScope.FoldPromptFooter(scale: Float) { + Spacer(modifier = Modifier.height(CardFoldSummaryToDividerGap * scale)) GamssCardDashedDivider() - Spacer(modifier = Modifier.height(CardFoldDividerToQuestionGap)) + Spacer(modifier = Modifier.height(CardFoldDividerToQuestionGap * scale)) Text( text = stringResource(R.string.chat_room_card_fold_discard_question), modifier = Modifier.fillMaxWidth(), @@ -226,13 +228,13 @@ private fun ColumnScope.FoldPromptFooter() { color = GamssTheme.colors.gray800, textAlign = TextAlign.Center, ) - Spacer(modifier = Modifier.height(CardFoldQuestionToTapGuideGap)) + Spacer(modifier = Modifier.height(CardFoldQuestionToTapGuideGap * scale)) Image( painter = painterResource(DesignSystemR.drawable.img_paper_fold_guide), contentDescription = stringResource(R.string.chat_room_card_fold_guide), modifier = Modifier .align(Alignment.CenterHorizontally) - .size(CardFoldTapGuideSize), + .size(CardFoldTapGuideSize * scale), ) } From 61d27942988044170d79ca0fcb78ce50c93f408a Mon Sep 17 00:00:00 2001 From: soyeonLee <109227292+soyeonLee126@users.noreply.github.com> Date: Tue, 8 Sep 2026 14:28:21 +0900 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=ED=8F=B0=ED=8A=B8=20=ED=99=95?= =?UTF-8?q?=EB=8C=80=20=EC=8B=9C=20=EC=B9=B4=EB=93=9C=20=EC=9A=94=EC=86=8C?= =?UTF-8?q?=EA=B0=80=20=EC=A2=85=EC=9D=B4=20=EB=B0=96=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B0=80=EB=A6=AC=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 카드는 늘거나 스크롤할 수 없어 폰트 확대분이 그대로 세로 예산을 먹음. 카드 안 폰트 배율에 상한을 두고 아래쪽 테두리 여백을 확보. --- .../core/designsystem/card/GamssImageCard.kt | 149 +++++++++++------- .../feature/chat/component/CardFoldOverlay.kt | 16 +- 2 files changed, 100 insertions(+), 65 deletions(-) diff --git a/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt b/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt index 11bf736d..c7df8b19 100644 --- a/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt +++ b/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt @@ -24,6 +24,7 @@ import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider +import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip @@ -32,10 +33,12 @@ import androidx.compose.ui.graphics.PathEffect import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.graphics.Shape import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Density import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp @@ -53,15 +56,17 @@ import com.gamss.android.core.designsystem.theme.LocalGamssColors /** * 손그림 종이 카드입니다. * - * 카드 높이는 폭에 비례해 줄어들므로 안쪽 여백과 그림도 같은 배율([cardScale])로 줄여야 합니다. - * 고정 dp 로 두면 좁은 기기에서 아래쪽 요소가 카드 밖으로 밀립니다. 그래서 [content] 에도 배율을 - * 넘깁니다. 글자 크기에는 배율을 적용하지 않습니다. + * 종이 비율이 고정이라 늘거나 스크롤할 수 없습니다. 그래서 안쪽 여백과 그림은 카드 배율([cardScale])로 + * 함께 줄이고, 폰트 확대는 [cardFontScale] 상한까지만 반영합니다. + * + * @param capFontScale 내용이 카드 안에서 스크롤되는 카드는 넘칠 일이 없어 상한을 끕니다. */ @Composable fun GamssImageCard( date: String, modifier: Modifier = Modifier, shape: Shape = RectangleShape, + capFontScale: Boolean = true, topEndAction: @Composable BoxScope.() -> Unit = {}, content: @Composable ColumnScope.(scale: Float) -> Unit, ) { @@ -72,60 +77,73 @@ fun GamssImageCard( .fillMaxWidth(), ) { val scale = cardScale(maxWidth) - Box( - modifier = Modifier - .fillMaxWidth() - .aspectRatio(CardAspectRatio) - .clip(shape), - ) { - Image( - painter = painterResource(R.drawable.bg_card), - contentDescription = null, - contentScale = ContentScale.Crop, - modifier = Modifier.fillMaxSize(), - ) - - Column( - modifier = Modifier - .fillMaxSize() - .padding( - start = GamssTheme.spacing.spacing800 * scale, - end = GamssTheme.spacing.spacing800 * scale, - top = GamssTheme.spacing.spacing700 * scale, - ), - ) { - Text( - text = date, - modifier = Modifier.fillMaxWidth(), - style = GamssTheme.typography.subtitle3, - color = GamssTheme.colors.gray900, - textAlign = TextAlign.Center, - ) - content(scale) + val density = LocalDensity.current + val cardDensity = remember(density, scale, capFontScale) { + if (capFontScale) { + Density(density.density, cardFontScale(density.fontScale, scale)) + } else { + density } - + } + CompositionLocalProvider(LocalDensity provides cardDensity) { Box( modifier = Modifier - .align(Alignment.TopEnd) - .padding( - top = GamssTheme.spacing.spacing550 * scale, - end = GamssTheme.spacing.spacing550 * scale, - ), + .fillMaxWidth() + .aspectRatio(CardAspectRatio) + .clip(shape), ) { - topEndAction() + Image( + painter = painterResource(R.drawable.bg_card), + contentDescription = null, + contentScale = ContentScale.Crop, + modifier = Modifier.fillMaxSize(), + ) + + Column( + modifier = Modifier + .fillMaxSize() + .padding( + start = GamssTheme.spacing.spacing800 * scale, + end = GamssTheme.spacing.spacing800 * scale, + top = GamssTheme.spacing.spacing700 * scale, + bottom = CardBorderInset * scale, + ), + ) { + Text( + text = date, + modifier = Modifier.fillMaxWidth(), + style = GamssTheme.typography.subtitle3, + color = GamssTheme.colors.gray900, + textAlign = TextAlign.Center, + ) + content(scale) + } + + Box( + modifier = Modifier + .align(Alignment.TopEnd) + .padding( + top = GamssTheme.spacing.spacing550 * scale, + end = GamssTheme.spacing.spacing550 * scale, + ), + ) { + topEndAction() + } } } } } } +/** 카드가 [CardWidth] 보다 좁아진 비율입니다. 화면 폭을 쓰는 `designScale` 과 기준이 다릅니다. */ +private fun cardScale(cardWidth: Dp): Float = (cardWidth / CardWidth).coerceAtMost(1f) + /** - * 카드가 시안 폭보다 좁아진 비율입니다. - * - * 화면 폭을 쓰는 [com.gamss.android.core.designsystem.theme.designScale] 과 기준이 다릅니다. 카드는 - * 화면 좌우 여백을 뺀 자리에 놓여, 시안에서도 화면(402)보다 좁은 [CardWidth] 위에서 값이 정해졌습니다. + * 상한이 카드 배율을 함께 타는 이유는 카드가 작아진 만큼 글자가 커질 폭도 좁아지기 때문입니다. + * 상한은 1 아래로 내려가지 않습니다. 그 아래는 상한이 아니라 축소입니다. */ -private fun cardScale(cardWidth: Dp): Float = (cardWidth / CardWidth).coerceAtMost(1f) +private fun cardFontScale(systemFontScale: Float, scale: Float): Float = + systemFontScale.coerceAtMost((MaxFontScaleAtDesignWidth * scale).coerceAtLeast(1f)) @Preview(name = "Emotion - Light", showBackground = true) @Suppress("UnusedPrivateMember") @@ -154,15 +172,23 @@ private fun GamssImageCardEmotionDarkPreview() { } } -/** - * 카드가 좁아지는 기기에서 본문 3줄이 들어가는지 보는 프리뷰입니다. 366 폭 프리뷰만 두면 좁은 - * 기기에서 버튼이 종이 밖으로 밀리는 것을 못 잡습니다. - * - * 공유 줄은 화면과 같이 끕니다(`isShareVisible = false`). 켜 두면 이 프리뷰만 30dp 를 더 써서 - * 화면에서는 나지 않는 잘림이 보입니다. - */ +/** 좁은 폭과 폰트 확대가 각각 세로 예산을 깎으므로 둘 다 둡니다. 공유 줄은 화면과 같이 끕니다. */ @Preview(name = "Emotion - 360dp", showBackground = true, widthDp = 360, heightDp = 520) @Preview(name = "Emotion - 320dp", showBackground = true, widthDp = 320, heightDp = 470) +@Preview( + name = "Emotion - 폰트 2.0", + showBackground = true, + widthDp = 412, + heightDp = 580, + fontScale = 2f, +) +@Preview( + name = "Emotion - 360dp + 폰트 2.0", + showBackground = true, + widthDp = 360, + heightDp = 520, + fontScale = 2f, +) @Suppress("UnusedPrivateMember") @Composable private fun GamssImageCardEmotionNarrowPreview() { @@ -183,9 +209,7 @@ private fun GamssImageCardEmotionNarrowPreview() { * 카드의 고정 구조와 감정별 캐릭터 선택은 이 컴포넌트가 맡고, 문구와 사용자 동작만 호출부가 제공한다. * 따라서 화면마다 [GamssImageCard]의 간격과 텍스트 스타일을 다시 조합할 필요가 없다. * - * @param isShareVisible 공유 줄을 보일지 정합니다. 공유 줄은 카드 맨 아래라 끄고 그리지 않아도 - * 위쪽 간격은 그대로입니다. 반대로 자리를 남겨 두면 좁은 기기에서 그 높이만큼 버튼이 카드 밖으로 - * 밀립니다. + * @param isShareVisible 공유 줄을 보일지 정합니다. 끄면 자리까지 비웁니다. */ @Composable @Suppress("LongParameterList") @@ -282,9 +306,6 @@ fun GamssEmotionCard( * * [showDivider] 를 켜면 캐릭터와 콘텐츠 사이에 점선을 넣는다. 카드 목록처럼 점선이 없는 * 시안도 같은 캐릭터 영역을 쓰므로 기본값은 꺼짐이다. - * - * @param scale [GamssImageCard] 가 넘겨 준 카드 배율입니다. 캐릭터 그림과 간격이 카드와 함께 - * 줄어야 합니다. */ @Composable fun ColumnScope.GamssEmotionCardContent( @@ -339,6 +360,8 @@ fun GamssCardDashedDivider(modifier: Modifier = Modifier) { /** * 이미지 카드 안에 대화 로그를 배치하는 카드 퍼사드. 카드가 고정 크기라 [content] 에 날짜 아래 남은 * 높이를 모두 넘긴다. 호출부는 그 안에서 스크롤만 붙이면 된다. + * + * 대화 로그는 카드 안에서 스크롤되어 넘칠 일이 없으므로 폰트 확대 상한을 두지 않습니다. */ @Composable fun GamssChattingCard( @@ -352,13 +375,15 @@ fun GamssChattingCard( date = date, modifier = modifier, shape = shape, + capFontScale = false, topEndAction = topEndAction, ) { scale -> Spacer(modifier = Modifier.height(DateToChattingGap * scale)) Column( modifier = Modifier .weight(1f) - .padding(bottom = GamssTheme.spacing.spacing700 * scale), + // 카드가 아래쪽 테두리 여백을 이미 두므로 시안 40 에서 그만큼 뺍니다. + .padding(bottom = (GamssTheme.spacing.spacing700 - CardBorderInset) * scale), content = content, ) } @@ -480,6 +505,12 @@ private val CardWidth = 366.dp private val CardHeight = 528.dp private val CardAspectRatio = CardWidth.value / CardHeight.value +/** 세로가 가장 빡빡한 채팅 접기 화면이 정한 값입니다. 공유 줄을 켜면 다시 재야 합니다. */ +private const val MaxFontScaleAtDesignWidth = 1.3f + +/** 손그림 테두리가 카드 박스 안쪽 약 13dp 에 그려져 있어 아래쪽은 이만큼 비웁니다. */ +private val CardBorderInset = 13.dp + private val DateToCharacterGap = 18.dp /** Figma Card_Chatting 가이드(3264:7548)의 Date - chat 간격. */ diff --git a/feature/chat/src/main/java/com/gamss/android/feature/chat/component/CardFoldOverlay.kt b/feature/chat/src/main/java/com/gamss/android/feature/chat/component/CardFoldOverlay.kt index c61ac206..946757ad 100644 --- a/feature/chat/src/main/java/com/gamss/android/feature/chat/component/CardFoldOverlay.kt +++ b/feature/chat/src/main/java/com/gamss/android/feature/chat/component/CardFoldOverlay.kt @@ -195,11 +195,7 @@ private fun UnfoldedPaper(card: Card, onSkip: () -> Unit) { } } -/** - * 요약은 카드 안에서 마지막으로 자리를 받습니다. 안쪽 여백과 캐릭터 그림이 카드 배율로 함께 - * 줄어들어도, 글자 크기는 배율을 타지 않아 폰트 확대 설정에서는 세 줄이 남는 높이를 넘을 수 - * 있습니다. 그때 밀려 잘리는 쪽은 아래 점선과 안내가 아니라 요약이어야 합니다. - */ +/** 세로가 모자랄 때 밀리는 쪽은 아래 점선과 안내가 아니라 요약이어야 합니다. */ @Composable private fun CardSummaryText(summary: String, modifier: Modifier = Modifier) { Text( @@ -335,7 +331,14 @@ private val Opaque: () -> Float = { 1f } @Preview(showBackground = true, widthDp = 402, heightDp = 874) private annotation class CardFoldFramePreview +/** 펼친 종이가 세로로 가장 빡빡합니다. 좁은 폭과 폰트 확대를 각각 눌러 봅니다. */ +@Preview(name = "좁은 폭", showBackground = true, widthDp = 360, heightDp = 800) +@Preview(name = "폰트 2.0", showBackground = true, widthDp = 402, heightDp = 874, fontScale = 2f) +@Preview(name = "좁은 폭 + 폰트 2.0", showBackground = true, widthDp = 360, heightDp = 800, fontScale = 2f) +private annotation class CardFoldUnfoldedTightPreview + @CardFoldFramePreview +@CardFoldUnfoldedTightPreview @Suppress("UnusedPrivateMember") @Composable private fun CardFoldUnfoldedPreview() = CardFoldPreview(CardFoldStage.Unfolded) @@ -374,7 +377,8 @@ private val PreviewCard = Card( conversationId = 1L, character = EmotionCharacter.ANGER, emotionLabel = "분노", - summary = "오늘은 유난히 화가 많이 났던 하루였어요.", + // 짧게 두면 세로가 빡빡한 조건이 프리뷰에서 안 보입니다. + summary = "오늘은 유난히 화가 많이 났던 하루였어요. 별일 아닌 걸로 자꾸 짜증이 났고 마음이 가라앉지 않았어요.", message = "그럴 수 있어요.", date = LocalDate.of(2026, 8, 19), ) From 755a82a070fd29f48c23e48bfc82a441e9005ade Mon Sep 17 00:00:00 2001 From: soyeonLee <109227292+soyeonLee126@users.noreply.github.com> Date: Mon, 14 Sep 2026 13:44:01 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20detekt=20=EC=83=81=EC=88=98=20?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EA=B7=9C=EC=B9=99=20=EC=9C=84?= =?UTF-8?q?=EB=B0=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../gamss/android/core/designsystem/card/GamssImageCard.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt b/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt index c7df8b19..231de1e0 100644 --- a/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt +++ b/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt @@ -143,7 +143,7 @@ private fun cardScale(cardWidth: Dp): Float = (cardWidth / CardWidth).coerceAtMo * 상한은 1 아래로 내려가지 않습니다. 그 아래는 상한이 아니라 축소입니다. */ private fun cardFontScale(systemFontScale: Float, scale: Float): Float = - systemFontScale.coerceAtMost((MaxFontScaleAtDesignWidth * scale).coerceAtLeast(1f)) + systemFontScale.coerceAtMost((MAX_FONT_SCALE_AT_DESIGN_WIDTH * scale).coerceAtLeast(1f)) @Preview(name = "Emotion - Light", showBackground = true) @Suppress("UnusedPrivateMember") @@ -506,7 +506,7 @@ private val CardHeight = 528.dp private val CardAspectRatio = CardWidth.value / CardHeight.value /** 세로가 가장 빡빡한 채팅 접기 화면이 정한 값입니다. 공유 줄을 켜면 다시 재야 합니다. */ -private const val MaxFontScaleAtDesignWidth = 1.3f +private const val MAX_FONT_SCALE_AT_DESIGN_WIDTH = 1.3f /** 손그림 테두리가 카드 박스 안쪽 약 13dp 에 그려져 있어 아래쪽은 이만큼 비웁니다. */ private val CardBorderInset = 13.dp From 15a2127f283a134969814bd6835625c85f4625d7 Mon Sep 17 00:00:00 2001 From: soyeonLee <109227292+soyeonLee126@users.noreply.github.com> Date: Mon, 14 Sep 2026 15:01:35 +0900 Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=EC=B9=B4=EB=93=9C=20=EC=A3=BD?= =?UTF-8?q?=EC=9D=80=20=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=EC=99=80=20=EC=B9=98=EC=88=98=20=EC=83=81=EC=88=98=20?= =?UTF-8?q?=EA=B3=B5=EC=9C=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 쓰이지 않던 showDivider 와 공유 줄 기본값 제거. 카드 치수와 본문 줄 상한을 GamssCardDefaults 로 모음. --- .../core/designsystem/card/GamssImageCard.kt | 73 ++++++++++--------- .../android/feature/chat/CardFoldSpec.kt | 6 +- .../feature/chat/component/CardFoldOverlay.kt | 5 +- 3 files changed, 43 insertions(+), 41 deletions(-) diff --git a/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt b/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt index 231de1e0..e61698c2 100644 --- a/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt +++ b/core/designsystem/src/main/java/com/gamss/android/core/designsystem/card/GamssImageCard.kt @@ -73,17 +73,16 @@ fun GamssImageCard( CompositionLocalProvider(LocalGamssColors provides LightGamssColors) { BoxWithConstraints( modifier = modifier - .widthIn(max = CardWidth) + .widthIn(max = GamssCardDefaults.Width) .fillMaxWidth(), ) { val scale = cardScale(maxWidth) val density = LocalDensity.current - val cardDensity = remember(density, scale, capFontScale) { - if (capFontScale) { - Density(density.density, cardFontScale(density.fontScale, scale)) - } else { - density - } + val fontScale = + if (capFontScale) cardFontScale(density.fontScale, scale) else density.fontScale + // 상한이 걸리지 않으면 원본을 그대로 넘깁니다. 새 Density 는 폰트 변환 캐시를 잃습니다. + val cardDensity = remember(density, fontScale) { + if (fontScale == density.fontScale) density else Density(density.density, fontScale) } CompositionLocalProvider(LocalDensity provides cardDensity) { Box( @@ -135,8 +134,18 @@ fun GamssImageCard( } } -/** 카드가 [CardWidth] 보다 좁아진 비율입니다. 화면 폭을 쓰는 `designScale` 과 기준이 다릅니다. */ -private fun cardScale(cardWidth: Dp): Float = (cardWidth / CardWidth).coerceAtMost(1f) +/** 채팅의 접기 연출이 펼친 종이 칸을 이 크기로 잡습니다. 어긋나면 종이 비율이 깨집니다. */ +object GamssCardDefaults { + val Width: Dp = 366.dp + val Height: Dp = 528.dp + + /** Figma Description 은 높이 60 / lineHeight 20 으로 3줄까지 담습니다. */ + const val DescriptionMaxLines = 3 +} + +/** 기준이 화면 폭인 `designScale` 과 다릅니다. 카드는 화면보다 좁은 자리에 놓입니다. */ +private fun cardScale(cardWidth: Dp): Float = + (cardWidth / GamssCardDefaults.Width).coerceAtMost(1f) /** * 상한이 카드 배율을 함께 타는 이유는 카드가 작아진 만큼 글자가 커질 폭도 좁아지기 때문입니다. @@ -172,7 +181,19 @@ private fun GamssImageCardEmotionDarkPreview() { } } -/** 좁은 폭과 폰트 확대가 각각 세로 예산을 깎으므로 둘 다 둡니다. 공유 줄은 화면과 같이 끕니다. */ +/** 공유 줄은 아직 화면에서 꺼져 있어, 되살릴 때 쓸 배치를 프리뷰로만 남깁니다. */ +@Preview(name = "Emotion - 공유 켬", showBackground = true) +@Suppress("UnusedPrivateMember") +@Composable +private fun GamssImageCardEmotionShareVisiblePreview() { + GamssTheme(darkTheme = false) { + Box(modifier = Modifier.padding(GamssTheme.spacing.spacing300)) { + EmotionCardPreviewContent(isShareVisible = true) + } + } +} + +/** 좁은 폭과 폰트 확대가 각각 세로 예산을 깎으므로 둘 다 둡니다. */ @Preview(name = "Emotion - 360dp", showBackground = true, widthDp = 360, heightDp = 520) @Preview(name = "Emotion - 320dp", showBackground = true, widthDp = 320, heightDp = 470) @Preview( @@ -226,7 +247,7 @@ fun GamssEmotionCard( onShareClick: () -> Unit, modifier: Modifier = Modifier, shape: Shape = RectangleShape, - isShareVisible: Boolean = true, + isShareVisible: Boolean = false, topEndAction: @Composable BoxScope.() -> Unit = {}, ) { GamssImageCard( @@ -235,7 +256,7 @@ fun GamssEmotionCard( shape = shape, topEndAction = topEndAction, ) { scale -> - GamssEmotionCardContent(character = character, scale = scale, showDivider = true) { + GamssEmotionCardContent(character = character, scale = scale) { Text( text = title, modifier = Modifier.fillMaxWidth(), @@ -250,8 +271,7 @@ fun GamssEmotionCard( style = GamssTheme.typography.body4Regular, color = GamssTheme.colors.gray800, textAlign = TextAlign.Center, - // Figma Description 은 높이 60 / lineHeight 20 으로 3줄까지 담는다. - maxLines = DESCRIPTION_MAX_LINES, + maxLines = GamssCardDefaults.DescriptionMaxLines, overflow = TextOverflow.Ellipsis, ) Spacer(modifier = Modifier.height(DividerToContentGap * scale)) @@ -301,17 +321,10 @@ fun GamssEmotionCard( } } -/** - * 감정 카드의 캐릭터 영역과 그 아래 콘텐츠 간격을 재사용한다. - * - * [showDivider] 를 켜면 캐릭터와 콘텐츠 사이에 점선을 넣는다. 카드 목록처럼 점선이 없는 - * 시안도 같은 캐릭터 영역을 쓰므로 기본값은 꺼짐이다. - */ @Composable fun ColumnScope.GamssEmotionCardContent( character: GamssEmotionCardCharacter, scale: Float, - showDivider: Boolean = false, content: @Composable ColumnScope.() -> Unit, ) { Spacer(modifier = Modifier.height(DateToCharacterGap * scale)) @@ -322,13 +335,9 @@ fun ColumnScope.GamssEmotionCardContent( ) { GamssEmotionCardCharacterImage(character = character) } - if (showDivider) { - Spacer(modifier = Modifier.height(CharacterToDividerGap * scale)) - GamssCardDashedDivider() - Spacer(modifier = Modifier.height(DividerToContentGap * scale)) - } else { - Spacer(modifier = Modifier.height(CharacterToTitleGap * scale)) - } + Spacer(modifier = Modifier.height(CharacterToDividerGap * scale)) + GamssCardDashedDivider() + Spacer(modifier = Modifier.height(DividerToContentGap * scale)) content() } @@ -392,7 +401,7 @@ fun GamssChattingCard( @Composable private fun EmotionCardPreviewContent( description: String = "설느닛람햄을 긱에자네에 신손 겅투히오의 흐랸비의 수매해으는 하어이", - isShareVisible: Boolean = true, + isShareVisible: Boolean = false, ) { GamssEmotionCard( date = "26.08.03", @@ -501,9 +510,7 @@ private fun ChattingCardPreviewContent() { } } -private val CardWidth = 366.dp -private val CardHeight = 528.dp -private val CardAspectRatio = CardWidth.value / CardHeight.value +private val CardAspectRatio = GamssCardDefaults.Width / GamssCardDefaults.Height /** 세로가 가장 빡빡한 채팅 접기 화면이 정한 값입니다. 공유 줄을 켜면 다시 재야 합니다. */ private const val MAX_FONT_SCALE_AT_DESIGN_WIDTH = 1.3f @@ -516,7 +523,6 @@ private val DateToCharacterGap = 18.dp /** Figma Card_Chatting 가이드(3264:7548)의 Date - chat 간격. */ private val DateToChattingGap = 24.dp private val CharacterImageHeight = 156.dp -private val CharacterToTitleGap = 42.dp // 점선 관련 값은 Figma Card(3557:5286)의 Divider 기준이다. 점선은 콘텐츠 열 전체 폭(270)을 // 쓰고 위아래 22 씩 띄우며, 캐릭터 이미지와는 16 만 띄운다. @@ -525,4 +531,3 @@ private val DividerToContentGap = 22.dp private val CardDividerThickness = 1.3.dp private val CardDividerDashLength = 6.dp private val CardDividerDashGap = 4.dp -private const val DESCRIPTION_MAX_LINES = 3 diff --git a/feature/chat/src/main/java/com/gamss/android/feature/chat/CardFoldSpec.kt b/feature/chat/src/main/java/com/gamss/android/feature/chat/CardFoldSpec.kt index dd1dfd00..ea578cb5 100644 --- a/feature/chat/src/main/java/com/gamss/android/feature/chat/CardFoldSpec.kt +++ b/feature/chat/src/main/java/com/gamss/android/feature/chat/CardFoldSpec.kt @@ -7,6 +7,7 @@ import androidx.compose.animation.core.spring import androidx.compose.animation.core.tween import androidx.compose.ui.unit.DpSize import androidx.compose.ui.unit.dp +import com.gamss.android.core.designsystem.card.GamssCardDefaults internal const val CARD_FOLD_DISCARD_SINK_MS = 200 @@ -53,7 +54,7 @@ internal const val CARD_FOLD_DISCARD_HOLD_MS = 60L */ internal val CardFoldStage.paperSize: DpSize get() = when (this) { - CardFoldStage.Unfolded -> DpSize(366.dp, 528.dp) + CardFoldStage.Unfolded -> DpSize(GamssCardDefaults.Width, GamssCardDefaults.Height) CardFoldStage.FoldedOnce -> DpSize(366.dp, 268.dp) CardFoldStage.FoldedTwice -> DpSize(255.dp, 268.dp) } @@ -100,9 +101,6 @@ internal val CardFoldSinkSpec: AnimationSpec = internal val CardFoldReturnSpec: AnimationSpec = spring(dampingRatio = Spring.DampingRatioNoBouncy, stiffness = Spring.StiffnessMedium) -/** [com.gamss.android.core.designsystem.card.GamssEmotionCard] 의 본문 상한과 같은 값이다. */ -internal const val CARD_FOLD_SUMMARY_MAX_LINES = 3 - /** * 카드가 액션 슬롯을 Figma 값(우상단 28dp)에 맞춰 두므로 아이콘은 슬롯 좌상단에 딱 붙어야 한다. * 그런데 터치 영역을 아이콘보다 크게 잡으면 그 차이만큼 아이콘이 안쪽으로 밀리므로, diff --git a/feature/chat/src/main/java/com/gamss/android/feature/chat/component/CardFoldOverlay.kt b/feature/chat/src/main/java/com/gamss/android/feature/chat/component/CardFoldOverlay.kt index 946757ad..5e0a9194 100644 --- a/feature/chat/src/main/java/com/gamss/android/feature/chat/component/CardFoldOverlay.kt +++ b/feature/chat/src/main/java/com/gamss/android/feature/chat/component/CardFoldOverlay.kt @@ -34,6 +34,7 @@ import androidx.compose.ui.window.Dialog import androidx.compose.ui.window.DialogProperties import com.gamss.android.core.common.util.formatCardDate import com.gamss.android.core.designsystem.card.GamssCardDashedDivider +import com.gamss.android.core.designsystem.card.GamssCardDefaults import com.gamss.android.core.designsystem.card.GamssEmotionCardContent import com.gamss.android.core.designsystem.card.GamssImageCard import com.gamss.android.core.designsystem.component.GamssIcons @@ -46,7 +47,6 @@ import com.gamss.android.domain.emotion.EmotionCharacter import com.gamss.android.feature.chat.CARD_FOLD_ARROW_DELAY_MS import com.gamss.android.feature.chat.CARD_FOLD_BIN_DELAY_MS import com.gamss.android.feature.chat.CARD_FOLD_GUIDE_DELAY_MS -import com.gamss.android.feature.chat.CARD_FOLD_SUMMARY_MAX_LINES import com.gamss.android.feature.chat.CardFoldArrowBinGap import com.gamss.android.feature.chat.CardFoldArrowSize import com.gamss.android.feature.chat.CardFoldDividerToQuestionGap @@ -179,7 +179,6 @@ private fun UnfoldedPaper(card: Card, onSkip: () -> Unit) { GamssEmotionCardContent( character = card.character.toGamssEmotionCardCharacter(), scale = scale, - showDivider = true, ) { Text( text = stringResource(card.character.cardTitleRes()), @@ -204,7 +203,7 @@ private fun CardSummaryText(summary: String, modifier: Modifier = Modifier) { style = GamssTheme.typography.body4Regular, color = GamssTheme.colors.gray800, textAlign = TextAlign.Center, - maxLines = CARD_FOLD_SUMMARY_MAX_LINES, + maxLines = GamssCardDefaults.DescriptionMaxLines, overflow = TextOverflow.Ellipsis, ) }