Skip to content

Commit

Permalink
Merge pull request #41 from mash-up-kr/feature/link_save_page
Browse files Browse the repository at this point in the history
[#28 refactoring] 링크 짜잘 기능 추가 및 버그 수정
  • Loading branch information
Ahn-seokjoo authored Jun 29, 2024
2 parents 11c74f1 + c53f417 commit b5792d3
Show file tree
Hide file tree
Showing 9 changed files with 276 additions and 116 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
import androidx.compose.ui.graphics.StrokeCap.Companion.Round
import androidx.compose.ui.graphics.StrokeJoin
import androidx.compose.ui.graphics.StrokeJoin.Companion.Miter
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.ImageVector.Builder
Expand All @@ -12,86 +14,62 @@ import androidx.compose.ui.unit.dp

public val DoraIconClose.CloseCircle: ImageVector
get() {
if (_closeCircle != null) {
return _closeCircle!!
if (_icCloseWhite != null) {
return _icCloseWhite!!
}
_closeCircle = Builder(
name = "CloseCircle",
defaultWidth = 26.0.dp,
_icCloseWhite = Builder(
name = "IcCloseWhite",
defaultWidth = 24.0.dp,
defaultHeight =
26.0.dp,
viewportWidth = 26.0f,
viewportHeight = 26.0f,
24.0.dp,
viewportWidth = 24.0f,
viewportHeight = 24.0f,
).apply {
path(
fill = SolidColor(Color(0x00000000)),
stroke = SolidColor(Color(0xFF000000)),
strokeLineWidth = 0.5f,
fill = SolidColor(Color(0xFFADB5BD)),
stroke = null,
strokeLineWidth = 0.0f,
strokeLineCap = Butt,
strokeLineJoin = Miter,
strokeLineMiter = 4.0f,
pathFillType = NonZero,
) {
moveTo(5.0f, 0.75f)
lineTo(21.0f, 0.75f)
arcTo(4.25f, 4.25f, 0.0f, false, true, 25.25f, 5.0f)
lineTo(25.25f, 21.0f)
arcTo(4.25f, 4.25f, 0.0f, false, true, 21.0f, 25.25f)
lineTo(5.0f, 25.25f)
arcTo(4.25f, 4.25f, 0.0f, false, true, 0.75f, 21.0f)
lineTo(0.75f, 5.0f)
arcTo(4.25f, 4.25f, 0.0f, false, true, 5.0f, 0.75f)
moveTo(12.0f, 22.0f)
curveTo(17.5f, 22.0f, 22.0f, 17.5f, 22.0f, 12.0f)
curveTo(22.0f, 6.5f, 17.5f, 2.0f, 12.0f, 2.0f)
curveTo(6.5f, 2.0f, 2.0f, 6.5f, 2.0f, 12.0f)
curveTo(2.0f, 17.5f, 6.5f, 22.0f, 12.0f, 22.0f)
close()
}
path(
fill = SolidColor(Color(0xFFDEE2E6)),
stroke = null,
strokeLineWidth = 0.0f,
strokeLineCap = Butt,
strokeLineJoin = Miter,
fill = SolidColor(Color(0x00000000)),
stroke = SolidColor(Color(0xFFffffff)),
strokeLineWidth = 1.2f,
strokeLineCap = Round,
strokeLineJoin =
StrokeJoin.Companion.Round,
strokeLineMiter = 4.0f,
pathFillType = NonZero,
) {
moveTo(13.0f, 3.25f)
curveTo(7.6239f, 3.25f, 3.25f, 7.6239f, 3.25f, 13.0f)
curveTo(3.25f, 18.3761f, 7.6239f, 22.75f, 13.0f, 22.75f)
curveTo(18.3761f, 22.75f, 22.75f, 18.3761f, 22.75f, 13.0f)
curveTo(22.75f, 7.6239f, 18.3761f, 3.25f, 13.0f, 3.25f)
close()
moveTo(16.5302f, 15.4698f)
curveTo(16.6027f, 15.5388f, 16.6608f, 15.6216f, 16.7008f, 15.7133f)
curveTo(16.7409f, 15.805f, 16.7622f, 15.9039f, 16.7635f, 16.004f)
curveTo(16.7648f, 16.1041f, 16.746f, 16.2034f, 16.7083f, 16.2961f)
curveTo(16.6706f, 16.3889f, 16.6147f, 16.4731f, 16.5439f, 16.5439f)
curveTo(16.4731f, 16.6147f, 16.3889f, 16.6706f, 16.2961f, 16.7083f)
curveTo(16.2034f, 16.746f, 16.1041f, 16.7648f, 16.004f, 16.7635f)
curveTo(15.9039f, 16.7622f, 15.805f, 16.7409f, 15.7133f, 16.7008f)
curveTo(15.6216f, 16.6608f, 15.5388f, 16.6027f, 15.4698f, 16.5302f)
lineTo(13.0f, 14.0608f)
lineTo(10.5302f, 16.5302f)
curveTo(10.3884f, 16.6649f, 10.1995f, 16.7389f, 10.004f, 16.7364f)
curveTo(9.8084f, 16.7339f, 9.6215f, 16.6551f, 9.4832f, 16.5168f)
curveTo(9.3449f, 16.3785f, 9.2661f, 16.1916f, 9.2636f, 15.996f)
curveTo(9.2611f, 15.8005f, 9.3351f, 15.6116f, 9.4698f, 15.4698f)
lineTo(11.9392f, 13.0f)
lineTo(9.4698f, 10.5302f)
curveTo(9.3351f, 10.3884f, 9.2611f, 10.1995f, 9.2636f, 10.004f)
curveTo(9.2661f, 9.8084f, 9.3449f, 9.6215f, 9.4832f, 9.4832f)
curveTo(9.6215f, 9.3449f, 9.8084f, 9.2661f, 10.004f, 9.2636f)
curveTo(10.1995f, 9.2611f, 10.3884f, 9.3351f, 10.5302f, 9.4698f)
lineTo(13.0f, 11.9392f)
lineTo(15.4698f, 9.4698f)
curveTo(15.6116f, 9.3351f, 15.8005f, 9.2611f, 15.996f, 9.2636f)
curveTo(16.1916f, 9.2661f, 16.3785f, 9.3449f, 16.5168f, 9.4832f)
curveTo(16.6551f, 9.6215f, 16.7339f, 9.8084f, 16.7364f, 10.004f)
curveTo(16.7389f, 10.1995f, 16.6649f, 10.3884f, 16.5302f, 10.5302f)
lineTo(14.0608f, 13.0f)
lineTo(16.5302f, 15.4698f)
close()
moveTo(9.0f, 15.0f)
lineTo(15.0f, 9.0f)
}
path(
fill = SolidColor(Color(0x00000000)),
stroke = SolidColor(Color(0xFFffffff)),
strokeLineWidth = 1.2f,
strokeLineCap = Round,
strokeLineJoin =
StrokeJoin.Companion.Round,
strokeLineMiter = 4.0f,
pathFillType = NonZero,
) {
moveTo(15.0f, 15.0f)
lineTo(9.0f, 9.0f)
}
}
.build()
return _closeCircle!!
return _icCloseWhite!!
}

private var _closeCircle: ImageVector? = null
private var _icCloseWhite: ImageVector? = null
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
package com.mashup.dorabangs.core.designsystem.component.textfield

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.mashup.dorabangs.core.designsystem.theme.DoraTypoTokens
import com.mashup.dorabangs.core.designsystem.theme.TextFieldColorTokens

@Composable
fun DoraTextCounter(
counterEnabled: Boolean,
textLength: Int,
modifier: Modifier = Modifier,
) {
if (counterEnabled) {
Text(
modifier = modifier,
text = "$textLength/15",
color = TextFieldColorTokens.TextCounterColor,
style = DoraTypoTokens.SNormal,
)
}
}

@Composable
@Preview
fun DoraTextCounterPreview() {
DoraTextCounter(
counterEnabled = true,
textLength = 3,
)
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package com.mashup.dorabangs.core.designsystem.component.textfield

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
Expand All @@ -13,7 +14,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
Expand All @@ -40,13 +40,24 @@ import com.mashup.dorabangs.core.designsystem.theme.DoraRoundTokens
import com.mashup.dorabangs.core.designsystem.theme.DoraTypoTokens
import com.mashup.dorabangs.core.designsystem.theme.TextFieldColorTokens

/**
* @param text 텍필에 가지고 들어갈 text
* @param hintText 텍필에서 text가 없을 때 보여줄 hint text
* @param labelText 텍필에 가지고 라벨 텍스트, ex) 링크
* @param helperEnabled 헬퍼 텍스트를 보여줄지 말지에 대한 값
* @param counterEnabled text counter를 보여줄지 말지에 대한 값
* @param modifier 알잖아요
* @param helperText 헬퍼텍스트에 대한 값, ex) 유효한 링크를 입력해주세요
*/
@Composable
fun DoraTextField(
text: String,
hintText: String,
labelText: String,
helperEnabled: Boolean,
counterEnabled: Boolean,
modifier: Modifier = Modifier,
errorText: String = "",
helperText: String = "",
) {
var textFieldValue by remember {
mutableStateOf(
Expand All @@ -62,13 +73,13 @@ fun DoraTextField(
}

Column(
modifier = modifier.padding(horizontal = 20.dp),
modifier = modifier.fillMaxWidth(),
) {
DoraTextFieldLabel(labelText = labelText)
Spacer(modifier = Modifier.height(height = 8.dp))
Column(
modifier = Modifier
.size(width = 350.dp, height = 48.dp)
.height(height = 48.dp)
.clip(DoraRoundTokens.Round8)
.background(TextFieldColorTokens.BackGroundColor),
) {
Expand All @@ -81,42 +92,47 @@ fun DoraTextField(
singleLine = true,
textStyle = DoraTypoTokens.caption1Medium,
onValueChange = {
textFieldValue = it
if (counterEnabled) {
if (it.text.length <= 15) textFieldValue = it
} else {
textFieldValue = it
}
},
decorationBox = { innerTextField ->
Box(
modifier = Modifier.width(326.dp),
modifier = Modifier.fillMaxWidth(),
contentAlignment = Alignment.CenterStart,
) {
if (textFieldValue.text.isBlank()) {
Text(
modifier = Modifier.fillMaxWidth(),
text = hintText,
maxLines = 1,
color = TextFieldColorTokens.HintTextColor,
style = DoraTypoTokens.caption1Medium,
textAlign = TextAlign.Start,
)
} else {
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween, // 양끝 배치
Row(
modifier = Modifier
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
) {
Box(
modifier = Modifier.weight(1f),
) {
Box(
modifier = Modifier.weight(1f), // innerTextField가 가로로 확장되지 않도록 설정
) {
innerTextField()
if (textFieldValue.text.isBlank()) {
Text(
modifier = Modifier.fillMaxWidth(),
text = hintText,
maxLines = 1,
color = TextFieldColorTokens.HintTextColor,
style = DoraTypoTokens.caption1Medium,
textAlign = TextAlign.Start,
)
}
Spacer(modifier = Modifier.width(width = 4.dp))
innerTextField()
}
Spacer(modifier = Modifier.width(width = 4.dp))
if (textFieldValue.text.isNotBlank()) {
IconButton(
modifier = Modifier.size(size = 24.dp),
onClick = { textFieldValue = TextFieldValue("") },
) {
Icon(
Image(
imageVector = DoraIconClose.CloseCircle,
contentDescription = stringResource(id = R.string.text_field_url_text_clear),
tint = TextFieldColorTokens.ClearButtonColor,
)
}
}
Expand All @@ -126,8 +142,18 @@ fun DoraTextField(
)
}
Spacer(modifier = Modifier.height(height = 8.dp))
if (errorText.isNotBlank()) {
DoraTextFieldErrorLabel(errorText = errorText)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
) {
DoraTextFieldHelperText(
helperText = helperText,
enabled = helperEnabled,
)
DoraTextCounter(
counterEnabled = counterEnabled,
textLength = textFieldValue.text.length,
)
}
}
}
Expand All @@ -139,7 +165,9 @@ fun DoraTextFieldLongPreview() {
text = "테스트용 이다 어쩔래 ? ? ? asogihasio gasiofhgaioshgioashgaosighoasihg",
hintText = "URL을 입력해주세요.",
labelText = "바보",
errorText = "유효한 링크를 입력해주세요.",
helperText = "유효한 링크를 입력해주세요.",
helperEnabled = true,
counterEnabled = true,
)
}

Expand All @@ -150,7 +178,9 @@ fun DoraTextFieldShortPreview() {
text = "테스트용 이다 어쩔래 ? ? ?",
hintText = "URL을 입력해주세요.",
labelText = "바보",
errorText = "유효한 링크를 입력해주세요.",
helperText = "유효한 링크를 입력해주세요.",
helperEnabled = true,
counterEnabled = true,
)
}

Expand All @@ -161,5 +191,7 @@ fun DoraTextFieldPreviewWithHint() {
text = "",
hintText = "URL을 입력해주세요.",
labelText = "링크",
helperEnabled = false,
counterEnabled = true,
)
}

This file was deleted.

Loading

0 comments on commit b5792d3

Please sign in to comment.