From e3f8db2a050bcc7889b2c808c7182b65ef70d739 Mon Sep 17 00:00:00 2001 From: Moony-H <53536205+Moony-H@users.noreply.github.com> Date: Wed, 19 Aug 2026 22:01:39 +0900 Subject: [PATCH 1/4] =?UTF-8?q?SajuCard=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=EA=B0=80=EB=B3=80=20=EB=8C=80=EC=9D=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../kikidan/mypage/ui/component/SajuCard.kt | 68 +++++++++++++------ 1 file changed, 49 insertions(+), 19 deletions(-) diff --git a/feature/mypage/src/main/java/com/kikidan/mypage/ui/component/SajuCard.kt b/feature/mypage/src/main/java/com/kikidan/mypage/ui/component/SajuCard.kt index b37464ac..4bec87bf 100644 --- a/feature/mypage/src/main/java/com/kikidan/mypage/ui/component/SajuCard.kt +++ b/feature/mypage/src/main/java/com/kikidan/mypage/ui/component/SajuCard.kt @@ -2,10 +2,10 @@ package com.kikidan.mypage.ui.component import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.aspectRatio -import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape @@ -18,6 +18,7 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import com.kikidan.designsystem.R import com.kikidan.designsystem.theme.TodakunColor import com.kikidan.designsystem.theme.TodakunTheme @@ -31,32 +32,44 @@ internal fun SajuCard( ohaeng: Ohaeng, modifier: Modifier = Modifier, ) { - Column( + BoxWithConstraints( modifier = modifier - .heightIn(min = SajuCardMinHeight) .aspectRatio(1f) .clip(RoundedCornerShape(12.dp)) - .background(ohaeng.containerColor()) - .padding(horizontal = 6.dp, vertical = 6.dp), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center, + .background(ohaeng.containerColor()), + contentAlignment = Alignment.Center, ) { - Text( - text = hanja, - style = TodakunTypography.body1Bold, - color = TodakunColor.gray975, - ) - Text( - text = stringResource(R.string.saju_card_label_format, reading, ohaeng.hanja), - style = TodakunTypography.caption3Regular, - color = TodakunColor.gray975, - ) + val hanjaFontSize = (maxWidth.value * HANJA_FONT_SIZE_RATIO).sp + val readingFontSize = (maxWidth.value * READING_FONT_SIZE_RATIO).sp + + Column( + modifier = Modifier.padding(horizontal = 6.dp, vertical = 6.dp), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center, + ) { + Text( + text = hanja, + style = + TodakunTypography.body1Bold.copy( + fontSize = hanjaFontSize, + lineHeight = hanjaFontSize * HANJA_LINE_HEIGHT_RATIO, + ), + color = TodakunColor.gray975, + ) + Text( + text = stringResource(R.string.saju_card_label_format, reading, ohaeng.hanja), + style = + TodakunTypography.caption3Regular.copy( + fontSize = readingFontSize, + lineHeight = readingFontSize * READING_LINE_HEIGHT_RATIO, + ), + color = TodakunColor.gray975, + ) + } } } -private val SajuCardMinHeight = 64.dp - private fun Ohaeng.containerColor(): Color = when (this) { Ohaeng.MOK -> TodakunColor.teal200 @@ -66,6 +79,12 @@ private fun Ohaeng.containerColor(): Color = Ohaeng.SU -> TodakunColor.sky200 } +// body1Bold(18sp)/caption3Regular(10sp) 기준 카드 폭(72dp)에서의 비율 — 카드가 좁아지면 두 글자 크기가 이 비율을 유지한 채 같이 줄어든다. +private const val HANJA_FONT_SIZE_RATIO = 18f / 72f +private const val READING_FONT_SIZE_RATIO = 10f / 72f +private const val HANJA_LINE_HEIGHT_RATIO = 26f / 18f +private const val READING_LINE_HEIGHT_RATIO = 13f / 10f + @Preview(showBackground = true) @Composable private fun SajuCardPreview() { @@ -79,3 +98,14 @@ private fun SajuCardPreview() { } } } + +@Preview(showBackground = true) +@Composable +private fun SajuCardNarrowPreview() { + TodakunTheme { + Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) { + SajuCard(hanja = "戊", reading = "무", ohaeng = Ohaeng.TO, modifier = Modifier.width(48.dp)) + SajuCard(hanja = "丙", reading = "병", ohaeng = Ohaeng.HWA, modifier = Modifier.width(48.dp)) + } + } +} From ad576d2636d9bd003d749cbcfdb2275413281326 Mon Sep 17 00:00:00 2001 From: Moony-H <53536205+Moony-H@users.noreply.github.com> Date: Wed, 19 Aug 2026 22:07:46 +0900 Subject: [PATCH 2/4] =?UTF-8?q?SajuCard=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=EB=B0=8F=20=EA=B0=84=EA=B2=A9=20=EB=B9=84?= =?UTF-8?q?=EC=9C=A8=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../kikidan/mypage/ui/component/SajuCard.kt | 41 +++++++++++++++---- 1 file changed, 34 insertions(+), 7 deletions(-) diff --git a/feature/mypage/src/main/java/com/kikidan/mypage/ui/component/SajuCard.kt b/feature/mypage/src/main/java/com/kikidan/mypage/ui/component/SajuCard.kt index 4bec87bf..b93b5fe5 100644 --- a/feature/mypage/src/main/java/com/kikidan/mypage/ui/component/SajuCard.kt +++ b/feature/mypage/src/main/java/com/kikidan/mypage/ui/component/SajuCard.kt @@ -15,6 +15,7 @@ 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.platform.LocalDensity import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp @@ -41,19 +42,26 @@ internal fun SajuCard( contentAlignment = Alignment.Center, ) { val hanjaFontSize = (maxWidth.value * HANJA_FONT_SIZE_RATIO).sp + val hanjaLineHeight = hanjaFontSize * HANJA_LINE_HEIGHT_RATIO val readingFontSize = (maxWidth.value * READING_FONT_SIZE_RATIO).sp + val readingLineHeight = readingFontSize * READING_LINE_HEIGHT_RATIO + + val density = LocalDensity.current + val availableHeight = maxWidth - VerticalPadding * 2 + val contentHeight = with(density) { hanjaLineHeight.toDp() + readingLineHeight.toDp() } + val lineGap = minOf(0.dp, availableHeight - contentHeight) Column( - modifier = Modifier.padding(horizontal = 6.dp, vertical = 6.dp), + modifier = Modifier.padding(horizontal = HorizontalPadding, vertical = VerticalPadding), horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center, + verticalArrangement = Arrangement.spacedBy(lineGap), ) { Text( text = hanja, style = TodakunTypography.body1Bold.copy( fontSize = hanjaFontSize, - lineHeight = hanjaFontSize * HANJA_LINE_HEIGHT_RATIO, + lineHeight = hanjaLineHeight, ), color = TodakunColor.gray975, ) @@ -62,7 +70,7 @@ internal fun SajuCard( style = TodakunTypography.caption3Regular.copy( fontSize = readingFontSize, - lineHeight = readingFontSize * READING_LINE_HEIGHT_RATIO, + lineHeight = readingLineHeight, ), color = TodakunColor.gray975, ) @@ -79,9 +87,13 @@ private fun Ohaeng.containerColor(): Color = Ohaeng.SU -> TodakunColor.sky200 } -// body1Bold(18sp)/caption3Regular(10sp) 기준 카드 폭(72dp)에서의 비율 — 카드가 좁아지면 두 글자 크기가 이 비율을 유지한 채 같이 줄어든다. -private const val HANJA_FONT_SIZE_RATIO = 18f / 72f -private const val READING_FONT_SIZE_RATIO = 10f / 72f +private val HorizontalPadding = 6.dp +private val VerticalPadding = 6.dp + +// Figma 실측 기준(48dp 카드 → hanja 18sp/lineHeight 26, reading 10sp/lineHeight 13)에서의 비율. +// 카드 폭이 달라져도 이 비율대로 두 글자 크기가 같이 커지고 작아진다. +private const val HANJA_FONT_SIZE_RATIO = 18f / 48f +private const val READING_FONT_SIZE_RATIO = 10f / 48f private const val HANJA_LINE_HEIGHT_RATIO = 26f / 18f private const val READING_LINE_HEIGHT_RATIO = 13f / 10f @@ -109,3 +121,18 @@ private fun SajuCardNarrowPreview() { } } } + +@Preview(showBackground = true, widthDp = 400) +@Composable +private fun SajuCardScalingPreview() { + TodakunTheme { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(8.dp), + ) { + listOf(32.dp, 40.dp, 48.dp, 64.dp, 90.dp, 120.dp).forEach { width -> + SajuCard(hanja = "丙", reading = "병", ohaeng = Ohaeng.HWA, modifier = Modifier.width(width)) + } + } + } +} From 36c7f234f4e4b64823ace021e921e0cf9e32b891 Mon Sep 17 00:00:00 2001 From: Moony-H <53536205+Moony-H@users.noreply.github.com> Date: Wed, 19 Aug 2026 22:18:31 +0900 Subject: [PATCH 3/4] =?UTF-8?q?SajuCard=20=EC=B5=9C=EB=8C=80=20=EB=84=88?= =?UTF-8?q?=EB=B9=84=20=EC=A0=9C=ED=95=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../java/com/kikidan/mypage/ui/component/SajuCard.kt | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/feature/mypage/src/main/java/com/kikidan/mypage/ui/component/SajuCard.kt b/feature/mypage/src/main/java/com/kikidan/mypage/ui/component/SajuCard.kt index b93b5fe5..1708d350 100644 --- a/feature/mypage/src/main/java/com/kikidan/mypage/ui/component/SajuCard.kt +++ b/feature/mypage/src/main/java/com/kikidan/mypage/ui/component/SajuCard.kt @@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -36,6 +37,7 @@ internal fun SajuCard( BoxWithConstraints( modifier = modifier + .widthIn(max = SajuCardMaxSize) .aspectRatio(1f) .clip(RoundedCornerShape(12.dp)) .background(ohaeng.containerColor()), @@ -89,6 +91,7 @@ private fun Ohaeng.containerColor(): Color = private val HorizontalPadding = 6.dp private val VerticalPadding = 6.dp +private val SajuCardMaxSize = 96.dp // Figma 실측 기준(48dp 카드 → hanja 18sp/lineHeight 26, reading 10sp/lineHeight 13)에서의 비율. // 카드 폭이 달라져도 이 비율대로 두 글자 크기가 같이 커지고 작아진다. @@ -136,3 +139,12 @@ private fun SajuCardScalingPreview() { } } } + +@Preview(showBackground = true) +@Composable +private fun SajuCardMaxSizePreview() { + TodakunTheme { + // 태블릿 등 넓은 화면에서 weight(1f)로 받은 폭이 커도 SajuCardMaxSize(96dp) 이상 커지지 않는지 확인. + SajuCard(hanja = "丙", reading = "병", ohaeng = Ohaeng.HWA, modifier = Modifier.width(300.dp)) + } +} From 860efe58e4f4e2a8b13684aa02cd9aef24e433d7 Mon Sep 17 00:00:00 2001 From: Moony-H <53536205+Moony-H@users.noreply.github.com> Date: Wed, 19 Aug 2026 22:23:44 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=ED=99=94=EB=A9=B4=20systemBarsPadding=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/java/com/kikidan/mypage/edit/ui/MyPageEditScreen.kt | 4 +++- .../main/java/com/kikidan/mypage/home/ui/MyPageHomeScreen.kt | 4 +++- .../kikidan/mypage/mansaeryeok/ui/MansaeryeokDetailScreen.kt | 4 +++- .../mypage/notification/ui/NotificationSettingScreen.kt | 4 +++- .../kikidan/mypage/partner/form/ui/PartnerSajuFormScreen.kt | 4 +++- .../kikidan/mypage/partner/ui/PartnerSajuManagementScreen.kt | 4 +++- 6 files changed, 18 insertions(+), 6 deletions(-) diff --git a/feature/mypage/src/main/java/com/kikidan/mypage/edit/ui/MyPageEditScreen.kt b/feature/mypage/src/main/java/com/kikidan/mypage/edit/ui/MyPageEditScreen.kt index 4ec3d8f2..62a0b2da 100644 --- a/feature/mypage/src/main/java/com/kikidan/mypage/edit/ui/MyPageEditScreen.kt +++ b/feature/mypage/src/main/java/com/kikidan/mypage/edit/ui/MyPageEditScreen.kt @@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.systemBarsPadding import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape @@ -67,7 +68,8 @@ fun MyPageEditScreen( modifier = modifier .fillMaxSize() - .background(TodakunColor.white), + .background(TodakunColor.white) + .systemBarsPadding(), ) { TodakunSubHeader( title = stringResource(R.string.mypage_edit_title), diff --git a/feature/mypage/src/main/java/com/kikidan/mypage/home/ui/MyPageHomeScreen.kt b/feature/mypage/src/main/java/com/kikidan/mypage/home/ui/MyPageHomeScreen.kt index 623036c4..5f9de56b 100644 --- a/feature/mypage/src/main/java/com/kikidan/mypage/home/ui/MyPageHomeScreen.kt +++ b/feature/mypage/src/main/java/com/kikidan/mypage/home/ui/MyPageHomeScreen.kt @@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.systemBarsPadding import androidx.compose.foundation.layout.width import androidx.compose.material3.CircularProgressIndicator import androidx.compose.material3.Text @@ -57,7 +58,8 @@ fun MyPageHomeScreen( modifier = modifier .fillMaxSize() - .background(TodakunColor.white), + .background(TodakunColor.white) + .systemBarsPadding(), ) { MyPageHomeHeader(modifier = Modifier.fillMaxWidth()) diff --git a/feature/mypage/src/main/java/com/kikidan/mypage/mansaeryeok/ui/MansaeryeokDetailScreen.kt b/feature/mypage/src/main/java/com/kikidan/mypage/mansaeryeok/ui/MansaeryeokDetailScreen.kt index 1e2ae388..e3149439 100644 --- a/feature/mypage/src/main/java/com/kikidan/mypage/mansaeryeok/ui/MansaeryeokDetailScreen.kt +++ b/feature/mypage/src/main/java/com/kikidan/mypage/mansaeryeok/ui/MansaeryeokDetailScreen.kt @@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.systemBarsPadding import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape @@ -69,7 +70,8 @@ fun MansaeryeokDetailScreen( modifier = modifier .fillMaxSize() - .background(TodakunColor.white), + .background(TodakunColor.white) + .systemBarsPadding(), ) { TodakunSubHeader( title = stringResource(R.string.mansaeryeok_detail_title), diff --git a/feature/mypage/src/main/java/com/kikidan/mypage/notification/ui/NotificationSettingScreen.kt b/feature/mypage/src/main/java/com/kikidan/mypage/notification/ui/NotificationSettingScreen.kt index e787f2f9..f7a26bfa 100644 --- a/feature/mypage/src/main/java/com/kikidan/mypage/notification/ui/NotificationSettingScreen.kt +++ b/feature/mypage/src/main/java/com/kikidan/mypage/notification/ui/NotificationSettingScreen.kt @@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.systemBarsPadding import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Icon import androidx.compose.material3.Text @@ -56,7 +57,8 @@ fun NotificationSettingScreen( modifier = modifier .fillMaxSize() - .background(TodakunColor.white), + .background(TodakunColor.white) + .systemBarsPadding(), ) { TodakunSubHeader( title = stringResource(R.string.notification_setting_title), diff --git a/feature/mypage/src/main/java/com/kikidan/mypage/partner/form/ui/PartnerSajuFormScreen.kt b/feature/mypage/src/main/java/com/kikidan/mypage/partner/form/ui/PartnerSajuFormScreen.kt index 6da07e38..50325829 100644 --- a/feature/mypage/src/main/java/com/kikidan/mypage/partner/form/ui/PartnerSajuFormScreen.kt +++ b/feature/mypage/src/main/java/com/kikidan/mypage/partner/form/ui/PartnerSajuFormScreen.kt @@ -10,6 +10,7 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.systemBarsPadding import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape @@ -68,7 +69,8 @@ fun PartnerSajuFormScreen( modifier = modifier .fillMaxSize() - .background(TodakunColor.white), + .background(TodakunColor.white) + .systemBarsPadding(), ) { TodakunSubHeader( title = stringResource(R.string.partner_saju_form_title), diff --git a/feature/mypage/src/main/java/com/kikidan/mypage/partner/ui/PartnerSajuManagementScreen.kt b/feature/mypage/src/main/java/com/kikidan/mypage/partner/ui/PartnerSajuManagementScreen.kt index bf1209e1..af428172 100644 --- a/feature/mypage/src/main/java/com/kikidan/mypage/partner/ui/PartnerSajuManagementScreen.kt +++ b/feature/mypage/src/main/java/com/kikidan/mypage/partner/ui/PartnerSajuManagementScreen.kt @@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.systemBarsPadding import androidx.compose.foundation.layout.width import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.CircleShape @@ -79,7 +80,8 @@ fun PartnerSajuManagementScreen( modifier = modifier .fillMaxSize() - .background(TodakunColor.white), + .background(TodakunColor.white) + .systemBarsPadding(), ) { Column(modifier = Modifier.fillMaxSize()) { TodakunSubHeader(