diff --git a/presentation/src/main/java/com/nexters/boolti/presentation/screen/show/ShowScreen.kt b/presentation/src/main/java/com/nexters/boolti/presentation/screen/show/ShowScreen.kt index d32efedc..0fe5d160 100644 --- a/presentation/src/main/java/com/nexters/boolti/presentation/screen/show/ShowScreen.kt +++ b/presentation/src/main/java/com/nexters/boolti/presentation/screen/show/ShowScreen.kt @@ -1,5 +1,6 @@ package com.nexters.boolti.presentation.screen.show +import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource @@ -38,31 +39,35 @@ import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip import androidx.compose.ui.geometry.Offset -import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.input.nestedscroll.NestedScrollConnection import androidx.compose.ui.input.nestedscroll.NestedScrollSource import androidx.compose.ui.input.nestedscroll.nestedScroll +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.platform.LocalUriHandler import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.input.ImeAction import androidx.compose.ui.text.input.VisualTransformation -import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.nexters.boolti.presentation.R import com.nexters.boolti.presentation.component.BusinessInformation import com.nexters.boolti.presentation.component.ShowFeed import com.nexters.boolti.presentation.extension.toPx +import com.nexters.boolti.presentation.theme.Grey05 import com.nexters.boolti.presentation.theme.Grey15 import com.nexters.boolti.presentation.theme.Grey60 import com.nexters.boolti.presentation.theme.Grey70 import com.nexters.boolti.presentation.theme.Grey85 import com.nexters.boolti.presentation.theme.marginHorizontal +import com.nexters.boolti.presentation.theme.point1 import com.nexters.boolti.presentation.theme.point4 @Composable @@ -125,7 +130,7 @@ fun ShowScreen( contentPadding = PaddingValues(top = 12.dp + appbarHeight), ) { items( - count = uiState.shows.size, + count = uiState.shows.size.coerceAtMost(4), key = { index -> uiState.shows[index].id }) { index -> ShowFeed( show = uiState.shows[index], @@ -134,6 +139,26 @@ fun ShowScreen( ) } + // 4개의 공연 뒤 보이는 배너 + item( + span = { GridItemSpan(2) }, + ) { + Banner( + modifier = Modifier.fillMaxWidth() + ) + } + + // 나머지 공연 목록 + items( + count = (uiState.shows.size - 4).coerceAtLeast(0), + key = { index -> uiState.shows[index + 4].id }) { index -> + ShowFeed( + show = uiState.shows[index + 4], + modifier = Modifier + .clickable { onClickShowItem(uiState.shows[index + 4].id) }, + ) + } + item( span = { GridItemSpan(2) }, ) { @@ -173,8 +198,7 @@ fun ShowAppBar( .background(MaterialTheme.colorScheme.background) .padding(horizontal = marginHorizontal) ) { - Spacer(modifier = Modifier.height(20.dp)) - Spacer(modifier = Modifier.height(20.dp)) + Spacer(modifier = Modifier.height(40.dp)) Text( modifier = Modifier .fillMaxWidth(), @@ -250,27 +274,52 @@ fun SearchBar( @Composable private fun Banner( - navigateToReservations: () -> Unit, modifier: Modifier = Modifier, ) { - Row( + val uriHandler = LocalUriHandler.current + + Box( modifier = modifier - .height(52.dp) - .background( - brush = Brush.horizontalGradient( - colors = listOf(MaterialTheme.colorScheme.primary, Color(0xFFEB955B)) - ), - shape = RoundedCornerShape(4.dp), - ) - .clickable(onClick = navigateToReservations) - .padding(horizontal = 20.dp), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween, + .clickable { + uriHandler.openUri("https://boolti.in/login") + }, ) { - Text( - text = stringResource(R.string.has_pending_ticket), - style = MaterialTheme.typography.bodyLarge, + Image( + modifier = Modifier + .height(80.dp) + .clip(RoundedCornerShape(8.dp)), + painter = painterResource(id = R.drawable.background_banner), + contentDescription = null, + contentScale = ContentScale.Crop, ) - Icon(painter = painterResource(id = R.drawable.ic_arrow_right), contentDescription = null) + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically, + ) { + Column( + modifier = Modifier.padding(start = 24.dp) + ) { + Text( + text = "지금 공연의 불을 지펴보세요!", + style = MaterialTheme.typography.labelMedium.copy(color = Grey05), + ) + Text( + text = "공연 등록하러 가기", + style = point1.copy( + color = Grey05, + lineHeight = 20.sp, + ), + ) + } + Image( + modifier = Modifier + .padding(end = 24.dp) + .size(80.dp), + painter = painterResource(id = R.drawable.fire), + contentDescription = null, + contentScale = ContentScale.Crop, + ) + } } } diff --git a/presentation/src/main/res/drawable/background_banner.jpg b/presentation/src/main/res/drawable/background_banner.jpg new file mode 100644 index 00000000..c055a37e Binary files /dev/null and b/presentation/src/main/res/drawable/background_banner.jpg differ diff --git a/presentation/src/main/res/drawable/fire.png b/presentation/src/main/res/drawable/fire.png new file mode 100644 index 00000000..96125c61 Binary files /dev/null and b/presentation/src/main/res/drawable/fire.png differ