Skip to content

Commit

Permalink
#9 [ADD] preview 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaeulzzang
gaeulzzang committed Jan 20, 2025
1 parent 7afc40f commit 99bd9fc
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 47 deletions.
3 changes: 2 additions & 1 deletion core/src/main/java/com/sopt/core/designsystem/component/textfield/NoostakTextField.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ fun NoostakTextField(
unfocusedWithInputBorderColor: Color = NoostakTheme.colors.gray700,
unfocusedBorderColor: Color = NoostakTheme.colors.gray500,
maxLength: Int = 30,
maxLengthColor: Color = NoostakTheme.colors.gray800,
modifier: Modifier = Modifier,
visualTransformation: VisualTransformation = VisualTransformation.None,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
Expand Down Expand Up @@ -148,7 +149,7 @@ fun NoostakTextField(
value.length,
maxLength
),
color = NoostakTheme.colors.gray800,
color = maxLengthColor,
style = NoostakTheme.typography.b5Regular,
modifier = modifier.padding(top = 6.dp),
maxLines = 1
Expand Down
69 changes: 36 additions & 33 deletions ...m/sopt/presentation/appointmentCreate/appointmentCreateInfo/AppointmentCreateInfoRoute.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,18 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.sopt.core.designsystem.component.button.NoostakBottomButton
import com.sopt.core.designsystem.component.chip.NoostakCalendarChip
import com.sopt.core.designsystem.component.progressbar.NoostakProgressBar
import com.sopt.core.designsystem.component.text.NoostakHeaderText
import com.sopt.core.designsystem.component.text.NoostakSubHeaderText
import com.sopt.core.designsystem.component.textfield.AppointmentTextField
import com.sopt.core.designsystem.component.textfield.NoostakTextField
import com.sopt.core.designsystem.component.textfield.TimeTextField
import com.sopt.core.designsystem.component.topappbar.NoostakTopAppBar
import com.sopt.core.designsystem.theme.NoostakAndroidTheme
import com.sopt.core.designsystem.theme.NoostakTheme
import com.sopt.core.extension.noRippleClickable
import com.sopt.core.type.TextFieldType
Expand All @@ -59,6 +61,7 @@ fun AppointmentCreateInfoRoute(
sideEffect.appointmentDuration
)
}

is AppointmentCreateInfoSideEffect.NavigateUp -> {
navigateUp()
}
Expand All @@ -84,9 +87,6 @@ fun AppointmentCreateInfoScreen(
var appointmentCategory by remember { mutableStateOf("") }
var appointmentDuration by remember { mutableStateOf("") }

val typography = NoostakTheme.typography
val colors = NoostakTheme.colors

Scaffold(
modifier = Modifier
.statusBarsPadding()
Expand All @@ -106,35 +106,29 @@ fun AppointmentCreateInfoScreen(
.padding(dimensionResource(id = R.dimen.horizontal_padding))
) {
Spacer(modifier = Modifier.height(18.dp))

NoostakProgressBar(progressBar = listOf(true, false, false))

NoostakHeaderText(text = stringResource(R.string.text_calendar_appointment_write))

NoostakSubHeaderText(
stringResource(R.string.text_calendar_appointment_name),
Modifier.padding(top = 22.dp, bottom = 10.dp)
)

AppointmentTextField(
NoostakTextField(
textFieldType = TextFieldType.CALENDAR,
value = appointmentName,
textStyle = typography.b1SemiBold,
cursorColor = colors.gray500,
cursorColor = NoostakTheme.colors.gray500,
shape = RoundedCornerShape(10.dp),
focusedBorderColor = colors.blue300,
unfocusedBorderColor = colors.gray500,
onValueChange = { newValue ->
if (newValue.length <= 20) appointmentName = newValue
},
maxLength = 20
focusedBorderColor = NoostakTheme.colors.blue600,
unfocusedBorderColor = NoostakTheme.colors.gray200,
maxLength = 20,
placeholderColor = NoostakTheme.colors.gray500,
textStyle = NoostakTheme.typography.b1SemiBold,
maxLengthColor = NoostakTheme.colors.gray500,
onValueChange = { appointmentName = it },
value = appointmentName
)

NoostakSubHeaderText(
stringResource(R.string.text_calendar_appointment_category),
Modifier.padding(top = 32.dp)
)

Row(
horizontalArrangement = Arrangement.spacedBy(11.dp),
verticalAlignment = Alignment.CenterVertically,
Expand All @@ -151,22 +145,20 @@ fun AppointmentCreateInfoScreen(
) {
NoostakCalendarChip(
text = category,
textStyle = typography.b4SemiBold,
textColor = if (isSelected) Color.White else colors.gray900,
backgroundColor = if (isSelected) colors.black else Color.White,
borderColor = if (isSelected) Color.Transparent else colors.gray200,
textStyle = NoostakTheme.typography.b4SemiBold,
textColor = if (isSelected) NoostakTheme.colors.white else NoostakTheme.colors.gray900,
backgroundColor = if (isSelected) NoostakTheme.colors.black else NoostakTheme.colors.white,
borderColor = if (isSelected) Color.Transparent else NoostakTheme.colors.gray200,
horizontalPaddingValues = 20.dp,
verticalPaddingValues = 8.dp
)
}
}
}

NoostakSubHeaderText(
stringResource(R.string.text_calendar_appointment_time),
Modifier.padding(top = 41.dp)
)

Box(
modifier = Modifier
.fillMaxWidth()
Expand All @@ -179,29 +171,40 @@ fun AppointmentCreateInfoScreen(
)
Text(
text = stringResource(R.string.text_calendar_appointment_duration),
style = typography.b1SemiBold,
color = colors.gray700,
style = NoostakTheme.typography.b1SemiBold,
color = NoostakTheme.colors.gray700,
modifier = Modifier
.align(Alignment.TopEnd)
.padding(end = 12.dp, top = 15.dp, bottom = 15.dp)
)
}

Spacer(modifier = Modifier.weight(1f))

NoostakBottomButton(
text = stringResource(R.string.text_calendar_appointment_next),
onButtonClick = {
val time = appointmentDuration.toIntOrNull() ?: 0
onButtonClick(groupId, appointmentName, appointmentCategory, time)
},
isEnabled = appointmentName.isNotBlank() &&
appointmentCategory.isNotBlank() &&
appointmentDuration.isNotBlank() &&
(appointmentDuration.toIntOrNull()?.let { it in 1..10 } == true),
appointmentCategory.isNotBlank() &&
appointmentDuration.isNotBlank() &&
(appointmentDuration.toIntOrNull()?.let { it in 1..10 } == true),
deactivateColor = NoostakTheme.colors.gray500,
activateColor = NoostakTheme.colors.gray900
)
}
}
}

@Preview(showBackground = true)
@Composable
fun AppointmentCreateInfoScreenPreview() {
NoostakAndroidTheme {
AppointmentCreateInfoScreen(
groupId = 0,
onButtonClick = { _, _, _, _ -> },
onBackButtonClick = { },
categories = listOf("중요", "일정", "취미", "기타")
)
}
}
41 changes: 35 additions & 6 deletions ...pt/presentation/appointmentCreate/appointmentCreatePeriod/AppointmentCreatePeriodRoute.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.sopt.core.designsystem.component.button.NoostakBottomButton
Expand All @@ -32,6 +33,7 @@ import com.sopt.core.designsystem.component.progressbar.NoostakProgressBar
import com.sopt.core.designsystem.component.text.NoostakHeaderText
import com.sopt.core.designsystem.component.toggle.NoostakSwitch
import com.sopt.core.designsystem.component.topappbar.NoostakTopAppBar
import com.sopt.core.designsystem.theme.NoostakAndroidTheme
import com.sopt.core.designsystem.theme.NoostakTheme
import com.sopt.presentation.R

Expand All @@ -58,6 +60,7 @@ fun AppointmentCreatePeriodRoute(
sideEffect.appointmentDate
)
}

is AppointmentCreatePeriodSideEffect.NavigateUp -> {
navigateUp()
}
Expand Down Expand Up @@ -122,11 +125,8 @@ fun AppointmentCreatePeriodScreen(
.padding(dimensionResource(id = R.dimen.horizontal_padding))
) {
Spacer(modifier = Modifier.height(18.dp))

NoostakProgressBar(progressBar = listOf(false, true, false))

NoostakHeaderText(text = stringResource(R.string.text_calendar_appointment_choose))

Row(
modifier = Modifier
.fillMaxWidth()
Expand Down Expand Up @@ -176,13 +176,18 @@ fun AppointmentCreatePeriodScreen(
},
days = appointmentDate
)

Spacer(modifier = Modifier.weight(1f))

NoostakBottomButton(
text = stringResource(R.string.text_calendar_appointment_next),
onButtonClick = {
onButtonClick(groupId, appointmentName, appointmentCategory, appointmentDuration, isSingleDateMode, dates)
onButtonClick(
groupId,
appointmentName,
appointmentCategory,
appointmentDuration,
isSingleDateMode,
dates
)
},
isEnabled = isButtonEnabled,
deactivateColor = NoostakTheme.colors.gray500,
Expand All @@ -191,3 +196,27 @@ fun AppointmentCreatePeriodScreen(
}
}
}

@Preview(showBackground = true)
@Composable
fun AppointmentCreatePeriodScreenPreview() {
NoostakAndroidTheme {
AppointmentCreatePeriodScreen(
onButtonClick = { _, _, _, _, _, _ -> },
onBackButtonClick = { },
appointmentName = "약속 이름",
appointmentCategory = "약속 카테고리",
appointmentDuration = 1,
appointmentDate = listOf(
"2022-10-01",
"2022-10-02",
"2022-10-03",
"2022-10-04",
"2022-10-05",
"2022-10-06",
"2022-10-07"
),
groupId = 0
)
}
}
26 changes: 19 additions & 7 deletions ...ntation/appointmentCreate/appointmentCreateTimePicker/AppointmentCreateTimePickerRoute.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.dimensionResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.sopt.core.designsystem.component.button.NoostakBottomButton
Expand All @@ -42,6 +43,7 @@ import com.sopt.core.designsystem.component.text.NoostakHeaderText
import com.sopt.core.designsystem.component.text.NoostakSubHeaderText
import com.sopt.core.designsystem.component.timepicker.NoostakTimePicker
import com.sopt.core.designsystem.component.topappbar.NoostakTopAppBar
import com.sopt.core.designsystem.theme.NoostakAndroidTheme
import com.sopt.core.designsystem.theme.NoostakTheme
import com.sopt.core.extension.noRippleClickable
import com.sopt.presentation.R
Expand Down Expand Up @@ -147,11 +149,8 @@ fun AppointmentCreateTimePickerScreen(
.padding(dimensionResource(id = R.dimen.horizontal_padding))
) {
Spacer(modifier = Modifier.height(18.dp))

NoostakProgressBar(progressBar = listOf(false, false, true))

NoostakHeaderText(text = stringResource(R.string.text_calendar_appointment_time_choose))

Row(
modifier = Modifier
.fillMaxWidth()
Expand Down Expand Up @@ -191,7 +190,6 @@ fun AppointmentCreateTimePickerScreen(
}
)
}

Row(
modifier = Modifier
.fillMaxWidth()
Expand All @@ -215,16 +213,13 @@ fun AppointmentCreateTimePickerScreen(
)
}
}

if (showPicker) {
NoostakTimePicker { startHour, endHour ->
selectedStartHour = startHour
selectedEndHour = endHour
}
}

Spacer(modifier = Modifier.weight(1f))

NoostakBottomButton(
text = stringResource(R.string.text_calendar_appointment_next),
onButtonClick = {
Expand Down Expand Up @@ -274,3 +269,20 @@ fun AppointmentCreateTimePickerScreen(
}
}
}

@Preview(showBackground = true)
@Composable
fun AppointmentCreateTimePickerScreenPreview() {
NoostakAndroidTheme {
AppointmentCreateTimePickerScreen(
onButtonClick = { _, _, _, _, _, _, _ -> },
onBackButtonClick = { },
appointmentName = "약속 이름",
appointmentCategory = "약속 카테고리",
appointmentDuration = 1,
isSingleDateMode = false,
appointmentDate = emptyList(),
groupId = 0
)
}
}

0 comments on commit 99bd9fc

Please sign in to comment.