-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
29 changed files
with
1,196 additions
and
64 deletions.
There are no files selected for viewing
37 changes: 37 additions & 0 deletions
37
core/designsystem/src/main/java/com/susu/core/designsystem/component/appbar/BasicAppBar.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
package com.susu.core.designsystem.component.appbar | ||
|
||
import androidx.compose.foundation.layout.Box | ||
import androidx.compose.foundation.layout.Row | ||
import androidx.compose.foundation.layout.Spacer | ||
import androidx.compose.foundation.layout.fillMaxWidth | ||
import androidx.compose.foundation.layout.height | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.ui.Alignment | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.unit.Dp | ||
import androidx.compose.ui.unit.dp | ||
|
||
@Composable | ||
fun BasicAppBar( | ||
modifier: Modifier = Modifier, | ||
containerHeight: Dp = 44.dp, | ||
leftIcon: @Composable () -> Unit, | ||
title: @Composable () -> Unit, | ||
actions: @Composable () -> Unit = {}, | ||
) { | ||
Box( | ||
modifier = modifier | ||
.fillMaxWidth() | ||
.height(containerHeight), | ||
contentAlignment = Alignment.Center, | ||
) { | ||
Row( | ||
verticalAlignment = Alignment.CenterVertically, | ||
) { | ||
leftIcon() | ||
Spacer(modifier = modifier.weight(1f)) | ||
actions() | ||
} | ||
title() | ||
} | ||
} |
24 changes: 24 additions & 0 deletions
24
...esignsystem/src/main/java/com/susu/core/designsystem/component/appbar/ProgressBarStyle.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
package com.susu.core.designsystem.component.appbar | ||
|
||
import androidx.compose.ui.graphics.Color | ||
import androidx.compose.ui.graphics.StrokeCap | ||
import androidx.compose.ui.unit.Dp | ||
import androidx.compose.ui.unit.dp | ||
import com.susu.core.designsystem.theme.Orange30 | ||
import com.susu.core.designsystem.theme.Orange60 | ||
|
||
enum class ProgressBarStyle( | ||
val progressBarColor: Color, | ||
val progressBarTrackColor: Color, | ||
val progressBarWidth: Dp, | ||
val progressBarHeight: Dp, | ||
val progressBarStrokeCap: StrokeCap, | ||
) { | ||
SusuProgressBar( | ||
progressBarColor = Orange60, | ||
progressBarTrackColor = Orange30, | ||
progressBarWidth = 72.dp, | ||
progressBarHeight = 4.dp, | ||
progressBarStrokeCap = StrokeCap.Round, | ||
), | ||
} |
169 changes: 169 additions & 0 deletions
169
...signsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuDefaultAppBar.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,169 @@ | ||
package com.susu.core.designsystem.component.appbar | ||
|
||
import android.util.Log | ||
import androidx.compose.foundation.Image | ||
import androidx.compose.foundation.layout.Arrangement | ||
import androidx.compose.foundation.layout.Column | ||
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.Modifier | ||
import androidx.compose.ui.res.painterResource | ||
import androidx.compose.ui.text.style.TextAlign | ||
import androidx.compose.ui.tooling.preview.Preview | ||
import androidx.compose.ui.unit.Dp | ||
import androidx.compose.ui.unit.dp | ||
import com.susu.core.designsystem.R | ||
import com.susu.core.designsystem.theme.Gray100 | ||
import com.susu.core.designsystem.theme.SusuTheme | ||
import com.susu.core.ui.extension.susuClickable | ||
|
||
@Composable | ||
fun SusuDefaultAppBar( | ||
modifier: Modifier = Modifier, | ||
leftIcon: @Composable () -> Unit = {}, | ||
title: String? = null, | ||
actions: @Composable () -> Unit = {}, | ||
) { | ||
BasicAppBar( | ||
modifier = modifier, | ||
leftIcon = leftIcon, | ||
title = { | ||
title?.let { | ||
Text( | ||
text = title, | ||
style = SusuTheme.typography.title_xs, | ||
color = Gray100, | ||
textAlign = TextAlign.Center, | ||
) | ||
} | ||
}, | ||
actions = actions, | ||
) | ||
} | ||
|
||
/** | ||
* SusuDefaultAppBar의 경우의 수 | ||
* 1. 왼쪽 로고 + 타이틀 + 오른쪽 아이콘 2개 | ||
* 2. 왼쪽 로고 + 오른쪽 아이콘 2개 | ||
* 3. 왼쪽 뒤로가기 + 타이틀 + 오른쪽 아이콘 2개 | ||
* 4. 왼쪽 뒤로가기 + 타이틀 + 오른쪽 아이콘 1개 | ||
* 5. 왼쪽 뒤로가기 + 타이틀 + 오른쪽 텍스트 2개 | ||
* 6. 왼쪽 뒤로가기 + 타이틀 + 오른족 텍스트 1개 | ||
* 7. 왼쪽 뒤로가기 + 타이틀 | ||
* 8. 왼쪽 뒤로가기 + 오른쪽 텍스트 2개 | ||
* 9. 왼쪽 뒤로가기 | ||
* */ | ||
|
||
@Preview(showBackground = true, backgroundColor = 0xFFFFFFFF) | ||
@Composable | ||
fun SusuDefaultAppBarPreview() { | ||
SusuTheme { | ||
Column( | ||
verticalArrangement = Arrangement.spacedBy(20.dp), | ||
) { | ||
// 1. 왼쪽 로고 + 타이틀 + 오른쪽 아이콘 2개 | ||
LogoWithTwoIconsPreview() | ||
|
||
// 5. 왼쪽 뒤로가기 + 타이틀 + 오른쪽 텍스트 2개 | ||
BackBtnWithTwoTextPreview() | ||
} | ||
} | ||
} | ||
|
||
@Composable | ||
private fun LogoWithTwoIconsPreview( | ||
modifier: Modifier = Modifier, | ||
clickPadding: Dp = 10.dp, | ||
) { | ||
SusuDefaultAppBar( | ||
leftIcon = { | ||
Image( | ||
painter = painterResource(id = R.drawable.ic_arrow_left), | ||
contentDescription = "로고", | ||
modifier = modifier.padding(clickPadding), | ||
) | ||
}, | ||
title = "타이틀", | ||
actions = { | ||
Icon( | ||
painter = painterResource(id = R.drawable.ic_arrow_left), | ||
contentDescription = null, | ||
modifier = modifier | ||
.susuClickable( | ||
rippleEnabled = true, // 클릭 영역 확인을 위해 true로 설정 | ||
onClick = { | ||
Log.d("확인", "오른쪽 버튼1 클릭") | ||
}, | ||
) | ||
.padding(clickPadding), | ||
) | ||
Icon( | ||
painter = painterResource(id = R.drawable.ic_arrow_left), | ||
contentDescription = null, | ||
modifier = modifier | ||
.susuClickable( | ||
rippleEnabled = true, // 클릭 영역 확인을 위해 true로 설정 | ||
onClick = { | ||
Log.d("확인", "오른쪽 버튼2 클릭") | ||
}, | ||
) | ||
.padding(clickPadding), | ||
) | ||
}, | ||
) | ||
} | ||
|
||
@Composable | ||
private fun BackBtnWithTwoTextPreview( | ||
modifier: Modifier = Modifier, | ||
clickPadding: Dp = 10.dp, | ||
textPadding: Dp = 16.dp, | ||
) { | ||
SusuDefaultAppBar( | ||
leftIcon = { | ||
Icon( | ||
painter = painterResource(id = R.drawable.ic_arrow_left), | ||
contentDescription = "뒤로가기", | ||
modifier = modifier | ||
.susuClickable( | ||
rippleEnabled = true, | ||
onClick = { | ||
Log.d("확인", "왼쪽 뒤로가기 클릭") | ||
}, | ||
) | ||
.padding(clickPadding), | ||
) | ||
}, | ||
title = "타이틀", | ||
actions = { | ||
Text( | ||
text = "편집", | ||
style = SusuTheme.typography.title_xxs, | ||
color = Gray100, | ||
modifier = modifier | ||
.padding(end = textPadding) | ||
.susuClickable( | ||
rippleEnabled = true, | ||
onClick = { | ||
Log.d("확인", "오른쪽 텍스트1 클릭") | ||
}, | ||
), | ||
) | ||
Text( | ||
text = "삭제", | ||
style = SusuTheme.typography.title_xxs, | ||
color = Gray100, | ||
modifier = modifier | ||
.padding(end = textPadding) | ||
.susuClickable( | ||
rippleEnabled = true, | ||
onClick = { | ||
Log.d("확인", "오른쪽 텍스트2 클릭") | ||
}, | ||
), | ||
) | ||
}, | ||
) | ||
} |
98 changes: 98 additions & 0 deletions
98
...ignsystem/src/main/java/com/susu/core/designsystem/component/appbar/SusuProgressAppBar.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
package com.susu.core.designsystem.component.appbar | ||
|
||
import android.util.Log | ||
import androidx.annotation.DrawableRes | ||
import androidx.compose.foundation.layout.Arrangement | ||
import androidx.compose.foundation.layout.Column | ||
import androidx.compose.foundation.layout.padding | ||
import androidx.compose.foundation.layout.size | ||
import androidx.compose.material3.Button | ||
import androidx.compose.material3.Icon | ||
import androidx.compose.material3.LinearProgressIndicator | ||
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.Modifier | ||
import androidx.compose.ui.res.painterResource | ||
import androidx.compose.ui.tooling.preview.Preview | ||
import androidx.compose.ui.unit.Dp | ||
import androidx.compose.ui.unit.dp | ||
import com.susu.core.designsystem.R | ||
import com.susu.core.designsystem.theme.SusuTheme | ||
import com.susu.core.ui.extension.susuClickable | ||
|
||
@Composable | ||
fun SusuProgressAppBar( | ||
modifier: Modifier = Modifier, | ||
@DrawableRes leftIcon: Int? = null, | ||
leftIconContentDescription: String? = null, | ||
leftIconPadding: Dp = SusuTheme.spacing.spacing_xs, | ||
currentStep: Int, | ||
entireStep: Int, | ||
progressBar: ProgressBarStyle = ProgressBarStyle.SusuProgressBar, | ||
onClickBackButton: () -> Unit, | ||
) { | ||
BasicAppBar( | ||
modifier = modifier, | ||
leftIcon = { | ||
leftIcon?.let { | ||
Icon( | ||
painter = painterResource(id = leftIcon), | ||
contentDescription = leftIconContentDescription, | ||
modifier = Modifier | ||
.susuClickable( | ||
rippleEnabled = true, | ||
onClick = onClickBackButton, | ||
) | ||
.padding(leftIconPadding), | ||
) | ||
} | ||
}, | ||
title = { | ||
LinearProgressIndicator( | ||
progress = { currentStep / entireStep.toFloat() }, | ||
color = progressBar.progressBarColor, | ||
trackColor = progressBar.progressBarTrackColor, | ||
modifier = modifier | ||
.size( | ||
width = progressBar.progressBarWidth, | ||
height = progressBar.progressBarHeight, | ||
), | ||
strokeCap = progressBar.progressBarStrokeCap, | ||
) | ||
}, | ||
) | ||
} | ||
|
||
@Preview(showBackground = true, backgroundColor = 0xFFFFFFFF) | ||
@Composable | ||
fun SusuProgressAppBarPreview() { | ||
val entireStep = 6 | ||
var currentStep by remember { mutableStateOf(1) } | ||
|
||
SusuTheme { | ||
Column( | ||
verticalArrangement = Arrangement.spacedBy(20.dp), | ||
) { | ||
SusuProgressAppBar( | ||
leftIcon = R.drawable.ic_arrow_left, | ||
leftIconContentDescription = "뒤로가기", | ||
currentStep = currentStep, | ||
entireStep = entireStep, | ||
onClickBackButton = { | ||
Log.d("확인", "왼쪽 뒤로가기 클릭") | ||
}, | ||
) | ||
Button( | ||
onClick = { | ||
currentStep += 1 | ||
}, | ||
) { | ||
Text(text = "다음") | ||
} | ||
} | ||
} | ||
} |
Oops, something went wrong.