From 4196e27a2d7d1ea34f6cb063982b6ed7e2dc9489 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Wed, 14 May 2025 12:34:43 +0900 Subject: [PATCH 01/22] =?UTF-8?q?[UI]:=20action=20book=20button=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#1?= =?UTF-8?q?7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/common/buttons/ActionBookButton.kt | 77 +++++++++++++++++++ app/src/main/res/drawable/ic_chevron.xml | 13 ++++ app/src/main/res/values/strings.xml | 7 ++ 3 files changed, 97 insertions(+) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBookButton.kt create mode 100644 app/src/main/res/drawable/ic_chevron.xml diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBookButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBookButton.kt new file mode 100644 index 00000000..b95e43ee --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBookButton.kt @@ -0,0 +1,77 @@ +package com.texthip.thip.ui.common.buttons + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +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 com.texthip.thip.R +import com.texthip.thip.ui.theme.ThipTheme.colors +import com.texthip.thip.ui.theme.ThipTheme.typography + +@Composable +fun ActionBookButton( + bookTitle: String = stringResource(R.string.book_title), + bookAuthor: String = stringResource(R.string.book_author), +) { + Box( + modifier = Modifier + .background(color = colors.DarkGrey, shape = RoundedCornerShape(12.dp)) + .padding(top = 16.dp, bottom = 16.dp, start = 12.dp, end = 4.dp) + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + ) { + Text( + text = bookTitle, + style = typography.smalltitle_sb600_s16_h24, + color = colors.White, + modifier = Modifier.weight(1f), + overflow = TextOverflow.Ellipsis, + maxLines = 1 + ) + + Text( + text = bookAuthor + stringResource(R.string.author), + style = typography.info_r400_s12_h24, + color = colors.Grey, + modifier = Modifier.width(100.dp), + textAlign = TextAlign.Right, + overflow = TextOverflow.Ellipsis, + maxLines = 1 + ) + + Icon( + painter = painterResource(R.drawable.ic_chevron), + contentDescription = null, + tint = colors.Grey, + ) + } + } +} + +@Preview +@Composable +private fun ActionBookButtonPreview() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(30.dp) + ) { + ActionBookButton() + } +} \ No newline at end of file diff --git a/app/src/main/res/drawable/ic_chevron.xml b/app/src/main/res/drawable/ic_chevron.xml new file mode 100644 index 00000000..b0df5e9e --- /dev/null +++ b/app/src/main/res/drawable/ic_chevron.xml @@ -0,0 +1,13 @@ + + + diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index d96e3164..11bc1fa4 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -1,3 +1,10 @@ Thip + + + 책이름을입력해주세요책이름을 + 한한강한강한강한ㅇㅇㄴㄴㅁ강 + + + 저 \ No newline at end of file From 8c611e178728f6e42c75b0703c06ad46303e6c45 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Sat, 17 May 2025 01:19:02 +0900 Subject: [PATCH 02/22] =?UTF-8?q?[refactor]:=20clickable=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20(#17)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../com/texthip/thip/ui/common/buttons/ActionBookButton.kt | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBookButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBookButton.kt index b95e43ee..fd5ebe2f 100644 --- a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBookButton.kt +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBookButton.kt @@ -1,6 +1,7 @@ package com.texthip.thip.ui.common.buttons import androidx.compose.foundation.background +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row @@ -27,11 +28,16 @@ import com.texthip.thip.ui.theme.ThipTheme.typography fun ActionBookButton( bookTitle: String = stringResource(R.string.book_title), bookAuthor: String = stringResource(R.string.book_author), + onClick: () -> Unit = {} ) { Box( modifier = Modifier .background(color = colors.DarkGrey, shape = RoundedCornerShape(12.dp)) + .clickable { + onClick() + } .padding(top = 16.dp, bottom = 16.dp, start = 12.dp, end = 4.dp) + ) { Row( verticalAlignment = Alignment.CenterVertically, From adc4b1b0923ac9dc4e9526a7a49d276849b565e3 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Sat, 17 May 2025 01:27:31 +0900 Subject: [PATCH 03/22] =?UTF-8?q?[init]:=20Color=20=EB=B3=80=EC=88=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=98=EC=98=81=20(#17)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../java/com/texthip/thip/ui/theme/Color.kt | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/app/src/main/java/com/texthip/thip/ui/theme/Color.kt b/app/src/main/java/com/texthip/thip/ui/theme/Color.kt index d1a9f263..4ecc11e6 100644 --- a/app/src/main/java/com/texthip/thip/ui/theme/Color.kt +++ b/app/src/main/java/com/texthip/thip/ui/theme/Color.kt @@ -13,6 +13,15 @@ val NeonGreen50 = Color(0x80A7FFB4) val Red = Color(0xFFFF9496) +val Mint = Color(0xFFA0F8E8) +val MintSub = Color(0xFF4FD9C0) +val Orange = Color(0xFFFDB770) +val OrangeSub = Color(0xFFFF8B17) +val Skyblue = Color(0xFFA1D5FF) +val SkyblueSub = Color(0xFF6DB5EE) +val Lavendar = Color(0xFFC8A5FF) +val LavendaSub = Color(0xFFA76FFF) + val PureWhite = Color(0xFFFFFFFF) val White = Color(0xFFFEFEFE) @@ -38,6 +47,14 @@ data class ThipColors( val NeonGreen: Color, val NeonGreen50: Color, val Red: Color, + val Mint: Color, + val MintSub: Color, + val Orange: Color, + val OrangeSub: Color, + val Skyblue: Color, + val SkyblueSub: Color, + val Lavendar: Color, + val LavendaSub: Color, val PureWhite: Color, val White: Color, val Grey50: Color, @@ -61,6 +78,14 @@ val defaultThipColors = ThipColors( NeonGreen = NeonGreen, NeonGreen50 = NeonGreen50, Red = Red, + Mint = Mint, + MintSub = MintSub, + Orange = Orange, + OrangeSub = OrangeSub, + Skyblue = Skyblue, + SkyblueSub = SkyblueSub, + Lavendar = Lavendar, + LavendaSub = LavendaSub, PureWhite = PureWhite, White = White, Grey50 = Grey50, From e274b5aa5097a944d85e80ae8c6bbc554902da28 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Sat, 17 May 2025 01:45:41 +0900 Subject: [PATCH 04/22] =?UTF-8?q?[UI]:=20action=20medium=20button=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#1?= =?UTF-8?q?7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/common/buttons/ActionMediumButton.kt | 118 ++++++++++++++++++ app/src/main/res/values/strings.xml | 1 + 2 files changed, 119 insertions(+) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt new file mode 100644 index 00000000..e1fe24b1 --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt @@ -0,0 +1,118 @@ +package com.texthip.thip.ui.common.buttons + +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.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +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.width +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon +import androidx.compose.material3.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.graphics.painter.Painter +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.texthip.thip.R +import com.texthip.thip.ui.theme.ThipTheme.colors +import com.texthip.thip.ui.theme.ThipTheme.typography + +@Composable +fun ActionMediumButton( + text: String, + icon: Painter, + contentColor: Color, + backgroundColor: Color, + modifier: Modifier = Modifier, + onClick: () -> Unit = {}, +) { + Row( + modifier = modifier + .fillMaxWidth() + .height(44.dp) + .background(color = backgroundColor, shape = RoundedCornerShape(12.dp)) + .clickable { + onClick() + }, + horizontalArrangement = Arrangement.Center, + verticalAlignment = Alignment.CenterVertically, + ) { + + Icon( + painter = icon, + contentDescription = null, + tint = contentColor, + ) + + Spacer(modifier = Modifier.width(8.dp)) + + Text( + text = text, + color = contentColor, + style = typography.smalltitle_sb600_s16_h24, + ) + + Spacer(modifier = Modifier.width(8.dp)) + + Icon( + painter = painterResource(R.drawable.ic_chevron), + contentDescription = null, + tint = contentColor, + ) + + + } +} + +@Preview +@Composable +private fun ActionMediumButtonPreview() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(30.dp) + ) { + ActionMediumButton( + text = stringResource(R.string.add_to_my_feed), + icon = painterResource(R.drawable.ic_search), + contentColor = colors.White, + backgroundColor = colors.Grey02, + modifier = Modifier.width(180.dp), + onClick = {}, + ) + + Spacer(modifier = Modifier.height(16.dp)) + + ActionMediumButton( + text = stringResource(R.string.add_to_my_feed), + icon = painterResource(R.drawable.ic_plus), + contentColor = colors.White, + backgroundColor = colors.Purple, + modifier = Modifier.width(180.dp), + onClick = {}, + ) + + Spacer(modifier = Modifier.height(16.dp)) + + ActionMediumButton( + text = stringResource(R.string.add_to_my_feed), + icon = painterResource(R.drawable.ic_search), + contentColor = colors.Grey, + backgroundColor = Color.Transparent, + modifier = Modifier.width(180.dp) + .border(width = 1.dp, color = colors.Grey02, shape = RoundedCornerShape(12.dp)), + onClick = {}, + ) + } +} \ No newline at end of file diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 11bc1fa4..a9c3038b 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -7,4 +7,5 @@ 저 + 내 피드에 추가 \ No newline at end of file From ac4bf49a37ea320c56fb10e1a678fba3ea962b94 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Sat, 17 May 2025 01:54:50 +0900 Subject: [PATCH 05/22] =?UTF-8?q?[UI]:=20action=20fill=20button=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#1?= =?UTF-8?q?7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/common/buttons/ActionFillButton.kt | 82 +++++++++++++++++++ .../ui/common/buttons/ActionMediumButton.kt | 9 +- app/src/main/res/values/strings.xml | 1 + 3 files changed, 84 insertions(+), 8 deletions(-) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/buttons/ActionFillButton.kt diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionFillButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionFillButton.kt new file mode 100644 index 00000000..925a58c0 --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionFillButton.kt @@ -0,0 +1,82 @@ +package com.texthip.thip.ui.common.buttons + +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.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.Icon +import androidx.compose.material3.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.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.texthip.thip.R +import com.texthip.thip.ui.theme.ThipTheme.colors +import com.texthip.thip.ui.theme.ThipTheme.typography + +@Composable +fun ActionFillButton( + text: String, + backgroundColor: Color, + onClick: () -> Unit, +) { + Row( + modifier = Modifier + .fillMaxWidth() + .height(50.dp) + .background(backgroundColor) + .clickable(onClick = onClick), + horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally), + verticalAlignment = Alignment.CenterVertically + ) { + Icon( + painter = painterResource(R.drawable.ic_write), + contentDescription = null, + tint = colors.White, + ) + + Text( + text = text, + color = colors.White, + style = typography.smalltitle_sb600_s18_h24, + ) + + Icon( + painter = painterResource(R.drawable.ic_send), + contentDescription = null, + tint = colors.White, + ) + } +} + +@Preview +@Composable +private fun ActionFillButtonPreview() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(30.dp), + verticalArrangement = Arrangement.spacedBy(30.dp, Alignment.CenterVertically), + ) { + ActionFillButton( + text = stringResource(R.string.post), + backgroundColor = colors.Purple, + onClick = {} + ) + + ActionFillButton( + text = stringResource(R.string.post), + backgroundColor = colors.Grey02, + onClick = {} + ) + } +} \ No newline at end of file diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt index e1fe24b1..fd61f9e9 100644 --- a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt @@ -45,33 +45,26 @@ fun ActionMediumButton( .clickable { onClick() }, - horizontalArrangement = Arrangement.Center, + horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally), verticalAlignment = Alignment.CenterVertically, ) { - Icon( painter = icon, contentDescription = null, tint = contentColor, ) - Spacer(modifier = Modifier.width(8.dp)) - Text( text = text, color = contentColor, style = typography.smalltitle_sb600_s16_h24, ) - Spacer(modifier = Modifier.width(8.dp)) - Icon( painter = painterResource(R.drawable.ic_chevron), contentDescription = null, tint = contentColor, ) - - } } diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index a9c3038b..101fda96 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -8,4 +8,5 @@ 저 내 피드에 추가 + 글 등록 \ No newline at end of file From 37d65ff5fc7a2a34a85ff3c46a34c856d58d6f09 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Sat, 17 May 2025 02:29:13 +0900 Subject: [PATCH 06/22] =?UTF-8?q?[UI]:=20toggle=20switch=20button=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#1?= =?UTF-8?q?7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/common/buttons/ToggleSwitchButton.kt | 59 +++++++++++++++++++ app/src/main/res/drawable/ic_circle.xml | 9 +++ 2 files changed, 68 insertions(+) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/buttons/ToggleSwitchButton.kt create mode 100644 app/src/main/res/drawable/ic_circle.xml diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/ToggleSwitchButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ToggleSwitchButton.kt new file mode 100644 index 00000000..e1515bea --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/ToggleSwitchButton.kt @@ -0,0 +1,59 @@ +package com.texthip.thip.ui.common.buttons + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.Icon +import androidx.compose.material3.Switch +import androidx.compose.material3.SwitchDefaults +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.graphics.Color +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.texthip.thip.R +import com.texthip.thip.ui.theme.ThipTheme.colors + +@Composable +fun ToggleSwitchButton() { + var checked by remember { mutableStateOf(true) } + + Switch( + modifier = Modifier.padding(4.dp), + checked = checked, + onCheckedChange = { + checked = it + }, + colors = SwitchDefaults.colors( + checkedThumbColor = colors.White, + checkedTrackColor = colors.Purple, + uncheckedThumbColor = colors.White, + uncheckedTrackColor = colors.DarkGrey, + uncheckedBorderColor = Color.Transparent, + ), + thumbContent = { + Icon( + painter = painterResource(R.drawable.ic_circle), + contentDescription = null, + tint = Color.Unspecified, + ) + } + ) +} + +@Preview +@Composable +private fun ToggleSwitchButtonPreview() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(30.dp) + ) { + ToggleSwitchButton() + } +} diff --git a/app/src/main/res/drawable/ic_circle.xml b/app/src/main/res/drawable/ic_circle.xml new file mode 100644 index 00000000..6a5e956b --- /dev/null +++ b/app/src/main/res/drawable/ic_circle.xml @@ -0,0 +1,9 @@ + + + From 56a64ccfdd4df6003eccd0c3eacc5ec7d7f4a009 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Sat, 17 May 2025 18:48:40 +0900 Subject: [PATCH 07/22] =?UTF-8?q?[UI]:=20checkbox=20button=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#17)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../thip/ui/common/buttons/CheckboxButton.kt | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/buttons/CheckboxButton.kt diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/CheckboxButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/CheckboxButton.kt new file mode 100644 index 00000000..69386852 --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/CheckboxButton.kt @@ -0,0 +1,49 @@ +package com.texthip.thip.ui.common.buttons + +import androidx.compose.foundation.border +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Checkbox +import androidx.compose.material3.CheckboxDefaults +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.saveable.rememberSaveable +import androidx.compose.runtime.setValue +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.texthip.thip.ui.theme.ThipTheme.colors + +@Composable +fun CheckboxButton( + isChecked: Boolean, + onCheckedChange: (Boolean) -> Unit, +) { + Checkbox( + checked = isChecked, + onCheckedChange = onCheckedChange, + modifier = + Modifier + .border(1.dp, colors.Grey01, RoundedCornerShape(8.dp)) + .size(30.dp), + colors = + CheckboxDefaults.colors( + checkmarkColor = colors.NeonGreen, + checkedColor = Color.Transparent, + uncheckedColor = Color.Transparent, + ), + ) +} + +@Preview +@Composable +private fun CheckboxButtonPreview() { + var isChecked by rememberSaveable { mutableStateOf(false) } + + CheckboxButton( + isChecked = isChecked, + onCheckedChange = { isChecked = it } + ) +} \ No newline at end of file From 61e4358ab915d1a69b6f9e901bb1dbdfcdeb5571 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Fri, 23 May 2025 23:50:15 +0900 Subject: [PATCH 08/22] =?UTF-8?q?[UI]:=20outlined=20button=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#17)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../thip/ui/common/buttons/OutlinedButton.kt | 99 +++++++++++++++++++ app/src/main/res/drawable/ic_reset_20.xml | 9 ++ app/src/main/res/values/strings.xml | 2 + 3 files changed, 110 insertions(+) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/buttons/OutlinedButton.kt create mode 100644 app/src/main/res/drawable/ic_reset_20.xml diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/OutlinedButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/OutlinedButton.kt new file mode 100644 index 00000000..4ee3b4cc --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/OutlinedButton.kt @@ -0,0 +1,99 @@ +package com.texthip.thip.ui.common.buttons + +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.Row +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon +import androidx.compose.material3.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.graphics.painter.Painter +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.texthip.thip.R +import com.texthip.thip.ui.theme.ThipTheme.colors +import com.texthip.thip.ui.theme.ThipTheme.typography + +@Composable +fun OutlinedButton( + modifier: Modifier = Modifier, + text: String, + icon: Painter? = null, + textStyle: TextStyle = typography.menu_sb600_s12_h20, + onClick: () -> Unit = {}, +) { + val hasIcon = icon != null + + Box( + modifier = modifier + .border( + width = 1.dp, + color = colors.Grey02, + shape = RoundedCornerShape(20.dp) + ) + .background(color = Color.Transparent, shape = RoundedCornerShape(12.dp)) + .clickable { + onClick() + }, + contentAlignment = Alignment.Center, + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + ) { + if (hasIcon) { + Icon( + painter = icon, + contentDescription = null, + tint = Color.Unspecified, + modifier = Modifier + .size(20.dp) + ) + } + Text( + text = text, + color = colors.Grey, + style = textStyle + ) + } + } +} + +@Preview +@Composable +private fun OutlinedButtonPreview() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(30.dp), + verticalArrangement = Arrangement.spacedBy(30.dp, Alignment.CenterVertically), + ) { + OutlinedButton( + modifier = Modifier + .size(width = 68.dp, height = 28.dp), + text = stringResource(R.string.follow), + icon = painterResource(id = R.drawable.ic_reset_20), + onClick = {} + ) + + OutlinedButton( + modifier = Modifier + .size(width = 64.dp, height = 32.dp), + text = stringResource(R.string.change_book), + textStyle = typography.view_m500_s14, + onClick = {} + ) + } +} \ No newline at end of file diff --git a/app/src/main/res/drawable/ic_reset_20.xml b/app/src/main/res/drawable/ic_reset_20.xml new file mode 100644 index 00000000..b6e2066b --- /dev/null +++ b/app/src/main/res/drawable/ic_reset_20.xml @@ -0,0 +1,9 @@ + + + diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 101fda96..86d6eace 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -9,4 +9,6 @@ 저 내 피드에 추가 글 등록 + 팔로우 + 책 변경 \ No newline at end of file From f840e263325f94a55598313ec8272284fa47f8ee Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Sun, 25 May 2025 16:55:03 +0900 Subject: [PATCH 09/22] =?UTF-8?q?[UI]:=20group=20vote=20button=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#17)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../thip/ui/common/buttons/GroupVoteButton.kt | 125 ++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt new file mode 100644 index 00000000..b65f4d39 --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt @@ -0,0 +1,125 @@ +package com.texthip.thip.ui.common.buttons + +import androidx.compose.foundation.background +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.Row +import androidx.compose.foundation.layout.fillMaxHeight +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.shape.RoundedCornerShape +import androidx.compose.material3.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.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.texthip.thip.ui.theme.ThipTheme.colors +import com.texthip.thip.ui.theme.ThipTheme.typography + + +@Composable +fun GroupVoteButton( + options: List, + voteResults: List +) { + var selectedIndex by remember { mutableStateOf(null) } + + Column( + modifier = Modifier + .fillMaxWidth(), + verticalArrangement = Arrangement.spacedBy(12.dp) + ) { + options.forEachIndexed { index, option -> + val hasVoted = selectedIndex != null + val isSelected = selectedIndex == index + val votePercent = voteResults.getOrNull(index) ?: 0 + + val backgroundColor = when { + isSelected -> colors.PurpleDark + else -> colors.DarkGrey + } + + val percentBarColor = when { + isSelected -> colors.Purple + else -> colors.Grey02 + } + + val textColor = when { + isSelected -> colors.NeonGreen + else -> colors.White + } + + val fontStyle = when { + !hasVoted -> typography.feedcopy_r400_s14_h20 + else -> typography.menu_sb600_s14_h24 + } + + Box( + modifier = Modifier + .fillMaxWidth() + .background(color = backgroundColor, shape = RoundedCornerShape(12.dp)) + .height(44.dp) + .clickable(enabled = !hasVoted) { selectedIndex = index } + ) { + // 퍼센트 채우기 + if (hasVoted) { + Box( + modifier = Modifier + .fillMaxHeight() + .fillMaxWidth(votePercent / 100f) + .background( + color = percentBarColor, + shape = RoundedCornerShape(topStart = 12.dp, bottomStart = 12.dp) + ) + ) + } + + Row( + modifier = Modifier + .fillMaxSize() + .padding(horizontal = 12.dp), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween + ) { + Text( + text = "${index + 1}. $option", + color = textColor, + style = fontStyle + ) + if (hasVoted) { + Text( + text = "$votePercent%", + color = textColor, + style = fontStyle + ) + } + } + } + } + } +} + +@Preview +@Composable +private fun GroupVoteButtonPreview() { + val options = listOf("밥", "국수", "고기") + val results = listOf(20, 30, 50) + + Column( + modifier = Modifier.fillMaxSize() + ) { + GroupVoteButton( + options = options, + voteResults = results + ) + } +} \ No newline at end of file From 4251f1f55312ab3cc345e81d9f48edbe4ce16d2d Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Sun, 25 May 2025 17:36:34 +0900 Subject: [PATCH 10/22] =?UTF-8?q?[UI]:=20filter=20button=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#17)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../thip/ui/common/buttons/FilterButton.kt | 112 ++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt new file mode 100644 index 00000000..f7d9767d --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt @@ -0,0 +1,112 @@ +package com.texthip.thip.ui.common.buttons + +import androidx.compose.animation.AnimatedVisibility +import androidx.compose.animation.fadeIn +import androidx.compose.animation.fadeOut +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.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon +import androidx.compose.material3.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.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.texthip.thip.R +import com.texthip.thip.ui.theme.ThipTheme.colors +import com.texthip.thip.ui.theme.ThipTheme.typography + +@Composable +fun FilterButton( + modifier: Modifier = Modifier, + selectedOption: String, + options: List, + onOptionSelected: (String) -> Unit +) { + var expanded by remember { mutableStateOf(false) } + + Column(modifier = modifier) { + Row( + modifier = Modifier + .clickable { expanded = !expanded }, + verticalAlignment = Alignment.CenterVertically + ) { + Text( + text = selectedOption, + color = colors.Grey01, + style = typography.menu_m500_s14_h24 + ) + Icon( + painter = painterResource(id = R.drawable.ic_downmore), + contentDescription = "Dropdown", + tint = colors.Grey02, + modifier = Modifier.size(24.dp) + ) + + } + + // 드롭다운 애니메이션 박스 + AnimatedVisibility( + visible = expanded, + enter = fadeIn(), + exit = fadeOut() + ) { + Column( + modifier = Modifier + .padding(top = 8.dp) + .width(144.dp) + .border(width = 1.dp, color = colors.Grey01, shape = RoundedCornerShape(16.dp)) + .background(color = colors.Black, shape = RoundedCornerShape(16.dp)) + .padding(vertical = 20.dp, horizontal = 12.dp), + verticalArrangement = Arrangement.spacedBy(16.dp) + ) { + options.forEach { option -> + val isSelected = option == selectedOption + Text( + text = option, + color = if (isSelected) colors.White else colors.Grey02, + style = typography.feedcopy_r400_s14_h20, + modifier = Modifier + .fillMaxWidth() + .clickable { + onOptionSelected(option) + expanded = false + } + ) + } + } + } + } +} + +@Preview +@Composable +private fun FilterButtonPreview() { + var selected by remember { mutableStateOf("인기순") } + val options = listOf("인기순", "정확도순") + + Column( + modifier = Modifier.fillMaxSize() + ) { + FilterButton( + selectedOption = selected, + options = options, + onOptionSelected = { selected = it } + ) + } +} \ No newline at end of file From acec82368d89d518079083ff08b926c54a0ba336 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Wed, 28 May 2025 16:36:28 +0900 Subject: [PATCH 11/22] =?UTF-8?q?[refactor]:=20group=20vote=20button=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20toggle=EA=B0=80=EB=8A=A5?= =?UTF-8?q?=ED=95=98=EA=B2=8C=20=EC=88=98=EC=A0=95=20(#17)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../com/texthip/thip/ui/common/buttons/GroupVoteButton.kt | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt index b65f4d39..cd682cdc 100644 --- a/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt @@ -39,8 +39,8 @@ fun GroupVoteButton( verticalArrangement = Arrangement.spacedBy(12.dp) ) { options.forEachIndexed { index, option -> - val hasVoted = selectedIndex != null val isSelected = selectedIndex == index + val hasVoted = selectedIndex != null val votePercent = voteResults.getOrNull(index) ?: 0 val backgroundColor = when { @@ -68,7 +68,9 @@ fun GroupVoteButton( .fillMaxWidth() .background(color = backgroundColor, shape = RoundedCornerShape(12.dp)) .height(44.dp) - .clickable(enabled = !hasVoted) { selectedIndex = index } + .clickable { + selectedIndex = if (isSelected) null else index + } ) { // 퍼센트 채우기 if (hasVoted) { From dd79f980cfad435473c1b83ef7d5356ab55ae8f9 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Wed, 28 May 2025 16:42:57 +0900 Subject: [PATCH 12/22] =?UTF-8?q?[refactor]:=20filter=20button=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9C=84=EC=B9=98,=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=88=98=EC=A0=95=20(#17)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../thip/ui/common/buttons/FilterButton.kt | 64 ++++++++++++------- 1 file changed, 41 insertions(+), 23 deletions(-) diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt index f7d9767d..af36e038 100644 --- a/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt @@ -6,7 +6,9 @@ import androidx.compose.animation.fadeOut import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize @@ -43,7 +45,12 @@ fun FilterButton( Column(modifier = modifier) { Row( modifier = Modifier - .clickable { expanded = !expanded }, + .fillMaxWidth() + .clickable( + interactionSource = remember { MutableInteractionSource() }, + indication = null // 클릭 효과 제거 + ) { expanded = !expanded }, + horizontalArrangement = Arrangement.End, verticalAlignment = Alignment.CenterVertically ) { Text( @@ -52,7 +59,9 @@ fun FilterButton( style = typography.menu_m500_s14_h24 ) Icon( - painter = painterResource(id = R.drawable.ic_downmore), + painter = painterResource( + id = if (expanded) R.drawable.ic_upmore else R.drawable.ic_downmore + ), contentDescription = "Dropdown", tint = colors.Grey02, modifier = Modifier.size(24.dp) @@ -66,28 +75,37 @@ fun FilterButton( enter = fadeIn(), exit = fadeOut() ) { - Column( - modifier = Modifier - .padding(top = 8.dp) - .width(144.dp) - .border(width = 1.dp, color = colors.Grey01, shape = RoundedCornerShape(16.dp)) - .background(color = colors.Black, shape = RoundedCornerShape(16.dp)) - .padding(vertical = 20.dp, horizontal = 12.dp), - verticalArrangement = Arrangement.spacedBy(16.dp) + Box( + modifier = Modifier.fillMaxWidth(), + contentAlignment = Alignment.TopEnd ) { - options.forEach { option -> - val isSelected = option == selectedOption - Text( - text = option, - color = if (isSelected) colors.White else colors.Grey02, - style = typography.feedcopy_r400_s14_h20, - modifier = Modifier - .fillMaxWidth() - .clickable { - onOptionSelected(option) - expanded = false - } - ) + Column( + modifier = Modifier + .padding(top = 8.dp) + .width(144.dp) + .border( + width = 1.dp, + color = colors.Grey01, + shape = RoundedCornerShape(16.dp) + ) + .background(color = colors.Black, shape = RoundedCornerShape(16.dp)) + .padding(vertical = 20.dp, horizontal = 12.dp), + verticalArrangement = Arrangement.spacedBy(16.dp) + ) { + options.forEach { option -> + val isSelected = option == selectedOption + Text( + text = option, + color = if (isSelected) colors.White else colors.Grey02, + style = typography.feedcopy_r400_s14_h20, + modifier = Modifier + .fillMaxWidth() + .clickable { + onOptionSelected(option) + expanded = false + } + ) + } } } } From e32baa80759f362562b7a8e991e1c28ef787e45d Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Wed, 28 May 2025 16:59:20 +0900 Subject: [PATCH 13/22] =?UTF-8?q?[refactor]:=20action=20medium=20button=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=99=95=EC=9E=A5?= =?UTF-8?q?=EC=84=B1=20=EB=84=93=EA=B2=8C=20=EC=88=98=EC=A0=95=20(#17)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/common/buttons/ActionMediumButton.kt | 64 +++++++++++++------ app/src/main/res/values/strings.xml | 2 + 2 files changed, 48 insertions(+), 18 deletions(-) diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt index fd61f9e9..33a0f0ec 100644 --- a/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt @@ -6,7 +6,6 @@ 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.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height @@ -31,12 +30,15 @@ import com.texthip.thip.ui.theme.ThipTheme.typography @Composable fun ActionMediumButton( text: String, - icon: Painter, + icon: Painter? = null, contentColor: Color, backgroundColor: Color, + hasRightIcon: Boolean = false, modifier: Modifier = Modifier, onClick: () -> Unit = {}, ) { + val hasLeftIcon = icon != null + Row( modifier = modifier .fillMaxWidth() @@ -48,11 +50,13 @@ fun ActionMediumButton( horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally), verticalAlignment = Alignment.CenterVertically, ) { - Icon( - painter = icon, - contentDescription = null, - tint = contentColor, - ) + if (hasLeftIcon) { + Icon( + painter = icon, + contentDescription = null, + tint = contentColor, + ) + } Text( text = text, @@ -60,11 +64,13 @@ fun ActionMediumButton( style = typography.smalltitle_sb600_s16_h24, ) - Icon( - painter = painterResource(R.drawable.ic_chevron), - contentDescription = null, - tint = contentColor, - ) + if (hasRightIcon) { + Icon( + painter = painterResource(R.drawable.ic_chevron), + contentDescription = null, + tint = contentColor, + ) + } } } @@ -74,38 +80,60 @@ private fun ActionMediumButtonPreview() { Column( modifier = Modifier .fillMaxSize() - .padding(30.dp) + .padding(30.dp), + verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically), ) { ActionMediumButton( text = stringResource(R.string.add_to_my_feed), icon = painterResource(R.drawable.ic_search), contentColor = colors.White, backgroundColor = colors.Grey02, + hasRightIcon = true, modifier = Modifier.width(180.dp), onClick = {}, ) - Spacer(modifier = Modifier.height(16.dp)) - ActionMediumButton( text = stringResource(R.string.add_to_my_feed), icon = painterResource(R.drawable.ic_plus), contentColor = colors.White, backgroundColor = colors.Purple, + hasRightIcon = true, modifier = Modifier.width(180.dp), onClick = {}, ) - Spacer(modifier = Modifier.height(16.dp)) - ActionMediumButton( text = stringResource(R.string.add_to_my_feed), icon = painterResource(R.drawable.ic_search), contentColor = colors.Grey, backgroundColor = Color.Transparent, - modifier = Modifier.width(180.dp) + hasRightIcon = true, + modifier = Modifier + .width(180.dp) .border(width = 1.dp, color = colors.Grey02, shape = RoundedCornerShape(12.dp)), onClick = {}, ) + + Row( + horizontalArrangement = Arrangement.spacedBy(20.dp, Alignment.CenterHorizontally), + ) { + + ActionMediumButton( + text = stringResource(R.string.yes), + contentColor = colors.White, + backgroundColor = colors.Purple, + modifier = Modifier.weight(1f), + onClick = {}, + ) + + ActionMediumButton( + text = stringResource(R.string.no), + contentColor = colors.White, + backgroundColor = colors.Grey02, + modifier = Modifier.weight(1f), + onClick = {}, + ) + } } } \ No newline at end of file diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 86d6eace..e57aa221 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -8,6 +8,8 @@ 저 내 피드에 추가 + 예 + 아니오 글 등록 팔로우 책 변경 From 4507a30733df2e9c1a6865f393687ec396f51cd3 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Wed, 28 May 2025 17:08:27 +0900 Subject: [PATCH 14/22] =?UTF-8?q?[refactor]:=20header=20button=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#17)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../thip/ui/common/buttons/HeaderButton.kt | 68 +++++++++++++++++++ app/src/main/res/values/strings.xml | 1 + 2 files changed, 69 insertions(+) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/buttons/HeaderButton.kt diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/HeaderButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/HeaderButton.kt new file mode 100644 index 00000000..2b8995ee --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/HeaderButton.kt @@ -0,0 +1,68 @@ +package com.texthip.thip.ui.common.buttons + +import androidx.compose.foundation.background +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.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.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.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.texthip.thip.R +import com.texthip.thip.ui.theme.ThipTheme.colors +import com.texthip.thip.ui.theme.ThipTheme.typography + +@Composable +fun HeaderButton( + modifier: Modifier = Modifier, + text: String, + onClick: () -> Unit = {}, +) { + var clicked by remember { mutableStateOf(false) } + + Box( + modifier = modifier + .background( + color = if (clicked) colors.Purple else colors.Grey02, + shape = RoundedCornerShape(20.dp) + ) + .clickable { + clicked = !clicked + onClick() + } + .padding(vertical = 4.dp, horizontal = 12.dp), + contentAlignment = Alignment.Center, + ) { + Text( + text = text, + style = typography.menu_sb600_s14_h24, + color = colors.White + ) + } +} + +@Preview +@Composable +private fun HeaderButtonPreview() { + Column( + modifier = Modifier.fillMaxSize(), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center + ) { + + HeaderButton( + text = stringResource(R.string.finish), + ) + } +} \ No newline at end of file diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index e57aa221..d4572122 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -13,4 +13,5 @@ 글 등록 팔로우 책 변경 + 완료 \ No newline at end of file From 897585c27f8ee81077b4b6cfb65564741142fa0a Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Wed, 28 May 2025 17:23:10 +0900 Subject: [PATCH 15/22] =?UTF-8?q?[chore]:=20=EB=B3=80=EC=88=98=20=EB=AA=85?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=20(#17)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../java/com/texthip/thip/ui/common/buttons/HeaderButton.kt | 6 +++--- .../texthip/thip/ui/common/buttons/ToggleSwitchButton.kt | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/HeaderButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/HeaderButton.kt index 2b8995ee..ecae44e6 100644 --- a/app/src/main/java/com/texthip/thip/ui/common/buttons/HeaderButton.kt +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/HeaderButton.kt @@ -29,16 +29,16 @@ fun HeaderButton( text: String, onClick: () -> Unit = {}, ) { - var clicked by remember { mutableStateOf(false) } + var isClicked by remember { mutableStateOf(false) } Box( modifier = modifier .background( - color = if (clicked) colors.Purple else colors.Grey02, + color = if (isClicked) colors.Purple else colors.Grey02, shape = RoundedCornerShape(20.dp) ) .clickable { - clicked = !clicked + isClicked = !isClicked onClick() } .padding(vertical = 4.dp, horizontal = 12.dp), diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/ToggleSwitchButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ToggleSwitchButton.kt index e1515bea..97e4854b 100644 --- a/app/src/main/java/com/texthip/thip/ui/common/buttons/ToggleSwitchButton.kt +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/ToggleSwitchButton.kt @@ -21,13 +21,13 @@ import com.texthip.thip.ui.theme.ThipTheme.colors @Composable fun ToggleSwitchButton() { - var checked by remember { mutableStateOf(true) } + var isChecked by remember { mutableStateOf(true) } Switch( modifier = Modifier.padding(4.dp), - checked = checked, + checked = isChecked, onCheckedChange = { - checked = it + isChecked = it }, colors = SwitchDefaults.colors( checkedThumbColor = colors.White, From 1a6a1056884cb9d08a1c99de1114816f1f041db2 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Wed, 28 May 2025 17:40:47 +0900 Subject: [PATCH 16/22] =?UTF-8?q?[UI]:=20option=20chip=20button=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#1?= =?UTF-8?q?7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../thip/ui/common/buttons/HeaderButton.kt | 7 +- .../ui/common/buttons/OptionChipButton.kt | 99 +++++++++++++++++++ app/src/main/res/values/strings.xml | 1 + 3 files changed, 103 insertions(+), 4 deletions(-) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/buttons/OptionChipButton.kt diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/HeaderButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/HeaderButton.kt index ecae44e6..cdff5839 100644 --- a/app/src/main/java/com/texthip/thip/ui/common/buttons/HeaderButton.kt +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/HeaderButton.kt @@ -60,9 +60,8 @@ private fun HeaderButtonPreview() { horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { - - HeaderButton( - text = stringResource(R.string.finish), - ) + HeaderButton( + text = stringResource(R.string.finish), + ) } } \ No newline at end of file diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/OptionChipButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/OptionChipButton.kt new file mode 100644 index 00000000..22069b2e --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/OptionChipButton.kt @@ -0,0 +1,99 @@ +package com.texthip.thip.ui.common.buttons + +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.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.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.Alignment +import androidx.compose.ui.Modifier +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 com.texthip.thip.R +import com.texthip.thip.ui.theme.ThipTheme.colors +import com.texthip.thip.ui.theme.ThipTheme.typography + +@Composable +fun OptionChipButton( + modifier: Modifier = Modifier, + text: String, + isFilled: Boolean = false, + onClick: () -> Unit, +) { + var isClicked by remember { mutableStateOf(false) } + + val textColor = when { + isFilled -> colors.White + isClicked -> colors.Purple + else -> colors.Grey01 + } + val backgroundColor = when { + isFilled && isClicked -> colors.Purple + isFilled -> colors.DarkGrey + else -> Color.Transparent + } + val borderColor = when { + !isFilled && isClicked -> colors.Purple + !isFilled -> colors.Grey02 + else -> Color.Transparent + } + + Box( + modifier = modifier + .background( + color = backgroundColor, + shape = RoundedCornerShape(20.dp) + ) + .border( + width = 1.dp, + color = borderColor, + shape = RoundedCornerShape(20.dp) + ) + .clickable { + isClicked = !isClicked + onClick() + } + .padding(vertical = 8.dp, horizontal = 12.dp), + contentAlignment = Alignment.Center, + ) { + Text( + text = text, + style = typography.info_r400_s12, + color = textColor + ) + } + +} + +@Preview +@Composable +private fun OptionChipButtonPreview() { + Column( + modifier = Modifier.fillMaxSize(), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically), + ) { + OptionChipButton( + text = stringResource(R.string.essay), + onClick = {} + ) + + OptionChipButton( + text = stringResource(R.string.essay), + isFilled = true, + onClick = {} + ) + } +} \ No newline at end of file diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index d4572122..baff2e07 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -14,4 +14,5 @@ 팔로우 책 변경 완료 + 에세이•자기계발 \ No newline at end of file From e57937f6ccd46673967d72a096d7241dba85c4b0 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Wed, 28 May 2025 18:27:23 +0900 Subject: [PATCH 17/22] =?UTF-8?q?[UI]:=20genre=20chip=20button=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#17)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../thip/ui/common/buttons/GenreChipButton.kt | 81 +++++++++++++++++++ app/src/main/res/drawable/ic_x_20.xml | 13 +++ 2 files changed, 94 insertions(+) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/buttons/GenreChipButton.kt create mode 100644 app/src/main/res/drawable/ic_x_20.xml diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/GenreChipButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/GenreChipButton.kt new file mode 100644 index 00000000..6cd73363 --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/GenreChipButton.kt @@ -0,0 +1,81 @@ +package com.texthip.thip.ui.common.buttons + +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.Row +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon +import androidx.compose.material3.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.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.texthip.thip.R +import com.texthip.thip.ui.theme.ThipTheme.colors +import com.texthip.thip.ui.theme.ThipTheme.typography + +@Composable +fun GenreChipButton( + modifier: Modifier = Modifier, + text: String, + onClick: () -> Unit = { } +) { + Box( + modifier = modifier + .border( + width = 1.dp, + color = colors.White, + shape = RoundedCornerShape(20.dp) + ) + .background(color = Color.Transparent, shape = RoundedCornerShape(12.dp)) + .padding(top = 4.dp, bottom = 4.dp, end = 8.dp, start = 12.dp) + .clickable { + onClick() + }, + contentAlignment = Alignment.Center, + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(2.dp), + ) { + Text( + text = text, + color = colors.White, + style = typography.info_r400_s12, + ) + Icon( + painter = painterResource(R.drawable.ic_x_20), + contentDescription = null, + tint = Color.Unspecified, + modifier = Modifier + .size(20.dp) + ) + } + } +} + +@Preview +@Composable +private fun GenreChipButtonPreview() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(30.dp), + verticalArrangement = Arrangement.spacedBy(30.dp, Alignment.CenterVertically), + ) { + GenreChipButton( + text = stringResource(R.string.essay), + ) + } +} \ No newline at end of file diff --git a/app/src/main/res/drawable/ic_x_20.xml b/app/src/main/res/drawable/ic_x_20.xml new file mode 100644 index 00000000..4dc19579 --- /dev/null +++ b/app/src/main/res/drawable/ic_x_20.xml @@ -0,0 +1,13 @@ + + + From 243190c54a86474f1c45ca95416c6f18a9b5019b Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Wed, 28 May 2025 18:32:49 +0900 Subject: [PATCH 18/22] =?UTF-8?q?[UI]:=20recent=20search=20button=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#1?= =?UTF-8?q?7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/common/buttons/RecentSearchButton.kt | 78 +++++++++++++++++++ app/src/main/res/values/strings.xml | 1 + 2 files changed, 79 insertions(+) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/buttons/RecentSearchButton.kt diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/RecentSearchButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/RecentSearchButton.kt new file mode 100644 index 00000000..fc76e4f6 --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/RecentSearchButton.kt @@ -0,0 +1,78 @@ +package com.texthip.thip.ui.common.buttons + +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.Row +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.texthip.thip.R +import com.texthip.thip.ui.theme.ThipTheme.colors +import com.texthip.thip.ui.theme.ThipTheme.typography + +@Composable +fun RecentSearchButton( + modifier: Modifier = Modifier, + text: String, + onClick: () -> Unit = { } +) { + Box( + modifier = modifier + .border( + width = 1.dp, + color = colors.Grey02, + shape = RoundedCornerShape(20.dp) + ) + .padding(top = 6.dp, bottom = 6.dp, end = 8.dp, start = 12.dp) + .clickable { + onClick() + }, + contentAlignment = Alignment.Center, + ) { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(4.dp), + ) { + Text( + text = text, + color = colors.White, + style = typography.menu_r400_s14_h24, + ) + Icon( + painter = painterResource(R.drawable.ic_x), + contentDescription = null, + tint = colors.Grey01, + modifier = Modifier + .size(24.dp) + ) + } + } +} + +@Preview +@Composable +private fun RecentSearchButtonPreview() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(30.dp), + verticalArrangement = Arrangement.spacedBy(30.dp, Alignment.CenterVertically), + ) { + RecentSearchButton( + text = stringResource(R.string.recent_search), + ) + } +} \ No newline at end of file diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index baff2e07..b56a92c0 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -15,4 +15,5 @@ 책 변경 완료 에세이•자기계발 + 최근 검색어 \ No newline at end of file From ef98a300f04a22ce68de5d92c7e2d07f158440db Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Thu, 29 May 2025 16:58:26 +0900 Subject: [PATCH 19/22] =?UTF-8?q?[UI]:=20expandable=20floating=20button=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#1?= =?UTF-8?q?7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .idea/deploymentTargetSelector.xml | 3 + .idea/misc.xml | 2 +- .../buttons/ExpandableFloatingButton.kt | 161 ++++++++++++++++++ app/src/main/res/values/strings.xml | 4 + 4 files changed, 169 insertions(+), 1 deletion(-) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/buttons/ExpandableFloatingButton.kt diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml index b268ef36..db5ab89b 100644 --- a/.idea/deploymentTargetSelector.xml +++ b/.idea/deploymentTargetSelector.xml @@ -5,6 +5,9 @@ + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml index 2aa690e7..503be042 100644 --- a/.idea/misc.xml +++ b/.idea/misc.xml @@ -3,5 +3,5 @@ - + \ No newline at end of file diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/ExpandableFloatingButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/ExpandableFloatingButton.kt new file mode 100644 index 00000000..763d2010 --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/ExpandableFloatingButton.kt @@ -0,0 +1,161 @@ +package com.texthip.thip.ui.common.buttons + +import androidx.compose.animation.AnimatedVisibility +import androidx.compose.animation.fadeIn +import androidx.compose.animation.fadeOut +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.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.FloatingActionButton +import androidx.compose.material3.Icon +import androidx.compose.material3.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.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.painter.Painter +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.texthip.thip.R +import com.texthip.thip.ui.theme.ThipTheme.colors +import com.texthip.thip.ui.theme.ThipTheme.typography + +data class FabMenuItem( + val icon: Painter, + val text: String, + val onClick: () -> Unit +) + +@Composable +fun ExpandableFloatingButton( + menuItems: List +) { + var expanded by remember { mutableStateOf(false) } + + Box( + modifier = Modifier + .fillMaxSize() + .padding(16.dp), // TODO: 화면에서 버튼 위치 조정 + contentAlignment = Alignment.BottomEnd + ) { + Column( + horizontalAlignment = Alignment.End + ) { + // 펼쳐진 메뉴 + AnimatedVisibility( + visible = expanded, + enter = fadeIn(), + exit = fadeOut(), + ) { + Column( + modifier = Modifier + .padding(bottom = 80.dp, end = 16.dp) // TODO: 화면에서 버튼 위치 조정 + .width(184.dp) + .background( + color = colors.Black, + shape = RoundedCornerShape(16.dp) + ) + .border( + width = 1.dp, + color = colors.NeonGreen, + shape = RoundedCornerShape(16.dp) + ) + .padding(vertical = 24.dp, horizontal = 12.dp), + verticalArrangement = Arrangement.spacedBy(16.dp) + ) { + menuItems.forEachIndexed { index, item -> +// if (index > 0) Spacer(modifier = Modifier.height(16.dp)) + MenuItem( + icon = item.icon, + text = item.text, + onClick = { + expanded = false + item.onClick() + } + ) + } + } + } + } + + // 플로팅 버튼 + FloatingActionButton( + onClick = { expanded = !expanded }, + containerColor = if (expanded) colors.Purple else colors.DarkGrey, + contentColor = colors.NeonGreen, + shape = CircleShape, + modifier = Modifier + .padding(16.dp) + .size(56.dp) + .border(width = 2.dp, color = colors.NeonGreen50, shape = CircleShape) + ) { + Icon( + painter = if (expanded) painterResource(R.drawable.ic_x) else painterResource(R.drawable.ic_plus), + modifier = Modifier.size(24.dp), + tint = colors.NeonGreen, + contentDescription = null + ) + } + } +} + +@Composable +fun MenuItem( + icon: Painter, + text: String, + onClick: () -> Unit +) { + Row( + verticalAlignment = Alignment.CenterVertically, + modifier = Modifier + .clickable { onClick() } + ) { + Icon( + painter = icon, + contentDescription = null, + tint = colors.White, + modifier = Modifier.size(24.dp) + ) + Spacer(modifier = Modifier.width(8.dp)) + Text( + text = text, + color = colors.White, + style = typography.menu_m500_s16_h24 + ) + } +} + +@Preview +@Composable +private fun ExpandableFabPreview() { + ExpandableFloatingButton( + menuItems = listOf( + FabMenuItem( + icon = painterResource(R.drawable.ic_write), + text = stringResource(R.string.write_record), + onClick = { } + ), + FabMenuItem( + icon = painterResource(R.drawable.ic_vote), + text = stringResource(R.string.create_vote), + onClick = { } + ) + ) + ) +} \ No newline at end of file diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index b56a92c0..60af47c3 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -16,4 +16,8 @@ 완료 에세이•자기계발 최근 검색어 + 리스트 추가하기 + 인물관계도 보기 + 기록 작성 + 투표 생성 \ No newline at end of file From 6a487cb7ee9ece61942402dd0ced638f433db684 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Thu, 29 May 2025 17:01:29 +0900 Subject: [PATCH 20/22] =?UTF-8?q?[UI]:=20floating=20button=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#17)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../thip/ui/common/buttons/FloatingButton.kt | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt new file mode 100644 index 00000000..a572751f --- /dev/null +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt @@ -0,0 +1,68 @@ +package com.texthip.thip.ui.common.buttons + +import androidx.compose.foundation.border +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material3.FloatingActionButton +import androidx.compose.material3.Icon +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.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.painter.Painter +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.texthip.thip.R +import com.texthip.thip.ui.theme.ThipTheme.colors + +@Composable +fun FloatingButton( + icon: Painter, + onClick: () -> Unit = { } +) { + var expanded by remember { mutableStateOf(false) } + + Box( + modifier = Modifier + .fillMaxSize() + .padding(16.dp), // TODO: 화면에서 버튼 위치 조정 + contentAlignment = Alignment.BottomEnd + ) { + // 플로팅 버튼 + FloatingActionButton( + onClick = { + expanded = !expanded + onClick() + }, + containerColor = colors.DarkGrey, + contentColor = colors.NeonGreen, + shape = CircleShape, + modifier = Modifier + .padding(16.dp) + .size(56.dp) + .border(width = 2.dp, color = colors.NeonGreen50, shape = CircleShape) + ) { + Icon( + painter = icon, + modifier = Modifier.size(24.dp), + tint = colors.NeonGreen, + contentDescription = null + ) + } + } +} + +@Preview +@Composable +private fun FloatingButtonPreview() { + FloatingButton( + icon = painterResource(id = R.drawable.ic_write), + ) +} \ No newline at end of file From 49db2f4b09f789a2ef6b555e71fd80dc3f1384d7 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Mon, 23 Jun 2025 14:15:24 +0900 Subject: [PATCH 21/22] =?UTF-8?q?[UI]:=20floating=20button=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EC=83=81=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=20(#17)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../java/com/texthip/thip/ui/common/buttons/FloatingButton.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt index a572751f..976ae34d 100644 --- a/app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt @@ -32,7 +32,7 @@ fun FloatingButton( Box( modifier = Modifier .fillMaxSize() - .padding(16.dp), // TODO: 화면에서 버튼 위치 조정 + .padding(end = 20.dp, bottom = 32.dp), contentAlignment = Alignment.BottomEnd ) { // 플로팅 버튼 From 3eadbf6bc68484659f6aa7ea60467fa63381aca3 Mon Sep 17 00:00:00 2001 From: Naeun Kim <102296721+Nico1eKim@users.noreply.github.com> Date: Mon, 23 Jun 2025 22:41:31 +0900 Subject: [PATCH 22/22] =?UTF-8?q?[UI]:=20Group=20Vote=20Button=EC=97=90=20?= =?UTF-8?q?=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=ED=9A=A8?= =?UTF-8?q?=EA=B3=BC=20=EC=B6=94=EA=B0=80=20(#17)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../thip/ui/common/buttons/GroupVoteButton.kt | 41 ++++++++++--------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt b/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt index cd682cdc..f30320b7 100644 --- a/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt +++ b/app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt @@ -1,5 +1,8 @@ package com.texthip.thip.ui.common.buttons +import androidx.compose.animation.animateColorAsState +import androidx.compose.animation.core.animateFloatAsState +import androidx.compose.animation.core.tween import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement @@ -41,27 +44,27 @@ fun GroupVoteButton( options.forEachIndexed { index, option -> val isSelected = selectedIndex == index val hasVoted = selectedIndex != null - val votePercent = voteResults.getOrNull(index) ?: 0 + val votePercent = if (hasVoted) voteResults.getOrNull(index)?.coerceIn(0, 100) ?: 0 else 0 - val backgroundColor = when { - isSelected -> colors.PurpleDark - else -> colors.DarkGrey - } + val animatedPercent by animateFloatAsState( + targetValue = votePercent / 100f, + animationSpec = tween(durationMillis = 500) + ) - val percentBarColor = when { - isSelected -> colors.Purple - else -> colors.Grey02 - } + val backgroundColor by animateColorAsState( + targetValue = if (isSelected) colors.PurpleDark else colors.DarkGrey + ) - val textColor = when { - isSelected -> colors.NeonGreen - else -> colors.White - } + val percentBarColor by animateColorAsState( + targetValue = if (isSelected) colors.Purple else colors.Grey02 + ) - val fontStyle = when { - !hasVoted -> typography.feedcopy_r400_s14_h20 - else -> typography.menu_sb600_s14_h24 - } + val textColor by animateColorAsState( + targetValue = if (isSelected) colors.NeonGreen else colors.White + ) + + val fontStyle = if (!hasVoted) typography.feedcopy_r400_s14_h20 + else typography.menu_sb600_s14_h24 Box( modifier = Modifier @@ -77,7 +80,7 @@ fun GroupVoteButton( Box( modifier = Modifier .fillMaxHeight() - .fillMaxWidth(votePercent / 100f) + .fillMaxWidth(animatedPercent) .background( color = percentBarColor, shape = RoundedCornerShape(topStart = 12.dp, bottomStart = 12.dp) @@ -99,7 +102,7 @@ fun GroupVoteButton( ) if (hasVoted) { Text( - text = "$votePercent%", + text = "${votePercent}%", color = textColor, style = fontStyle )