diff --git a/app/src/main/java/com/flint/core/designsystem/component/modal/FlintBasicModal.kt b/app/src/main/java/com/flint/core/designsystem/component/modal/FlintBasicModal.kt index c70109b3..5805e43c 100644 --- a/app/src/main/java/com/flint/core/designsystem/component/modal/FlintBasicModal.kt +++ b/app/src/main/java/com/flint/core/designsystem/component/modal/FlintBasicModal.kt @@ -49,11 +49,6 @@ fun FlintBasicModal( .background( brush = FlintTheme.colors.gradient700, shape = RoundedCornerShape(12.dp), - ).shadow( - elevation = 4.dp, - shape = RoundedCornerShape(12.dp), - ambientColor = Color.Black.copy(alpha = 0.25f), - spotColor = Color.Black.copy(alpha = 0.25f), ).padding( top = 36.dp, start = 16.dp, @@ -70,14 +65,16 @@ fun FlintBasicModal( @Preview(showBackground = true) @Composable private fun BasicModalPreview() { - FlintBasicModal( - onDismiss = {}, - modifier = Modifier.background(Color.White), - ) { - Text( - text = "기본 모달 컨텐츠", - style = FlintTypography.body1M16, - color = FlintTheme.colors.white, - ) + FlintTheme { + FlintBasicModal( + onDismiss = {}, + modifier = Modifier.background(FlintTheme.colors.white), + ) { + Text( + text = "기본 모달 컨텐츠", + style = FlintTypography.body1M16, + color = FlintTheme.colors.white, + ) + } } } diff --git a/app/src/main/java/com/flint/presentation/onboarding/OnboardingContentScreen.kt b/app/src/main/java/com/flint/presentation/onboarding/OnboardingContentScreen.kt index 4399b802..0ca1d7fd 100644 --- a/app/src/main/java/com/flint/presentation/onboarding/OnboardingContentScreen.kt +++ b/app/src/main/java/com/flint/presentation/onboarding/OnboardingContentScreen.kt @@ -25,18 +25,22 @@ import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.RectangleShape +import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.platform.LocalSoftwareKeyboardController import androidx.compose.ui.text.input.ImeAction import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp +import androidx.compose.ui.zIndex import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.flint.core.common.extension.dropShadow import com.flint.core.common.util.UiState import com.flint.core.designsystem.component.button.FlintBasicButton import com.flint.core.designsystem.component.button.FlintButtonState +import com.flint.core.designsystem.component.button.FlintLargeButton import com.flint.core.designsystem.component.image.SelectedContentItem import com.flint.core.designsystem.component.textfield.FlintSearchTextField import com.flint.core.designsystem.component.topappbar.FlintBackTopAppbar @@ -130,67 +134,82 @@ fun OnboardingContentScreen( // 검색창 - sticky header (상단에 고정) stickyHeader { - Column( - modifier = - Modifier + Box( + modifier = Modifier + .fillMaxWidth() + .zIndex(1f) + ) { + Column( + modifier = Modifier + .fillMaxWidth() .background(FlintTheme.colors.background) .padding(bottom = 16.dp) - .dropShadow( - shape = RectangleShape, - color = Color.Black.copy(alpha = 0.75f), - blur = 12.dp, - offsetY = 12.dp, - offsetX = 0.dp, - spread = 0.dp - ) - ) { - Text( - text = contentUiState.currentStepQuestion, - color = FlintTheme.colors.gray300, - style = FlintTheme.typography.body2R14, - ) + ) { + Text( + text = contentUiState.currentStepQuestion, + color = FlintTheme.colors.gray300, + style = FlintTheme.typography.body2R14, + ) - Spacer(modifier = Modifier.height(24.dp)) - FlintSearchTextField( - placeholder = "작품 이름", - value = contentUiState.searchKeyword, - onValueChanged = onSearchKeywordChanged, - onSearchAction = onSearchAction, - onClearAction = onClearAction, - keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search), - keyboardActions = KeyboardActions( - onSearch = { - keyboardController?.hide() - onSearchAction() - } - ), - ) + Spacer(modifier = Modifier.height(24.dp)) - // 선택된 영화 가로 스크롤 - if (contentUiState.selectedContents.isNotEmpty()) { - val lazyListState = rememberLazyListState() + FlintSearchTextField( + placeholder = "작품 이름", + value = contentUiState.searchKeyword, + onValueChanged = onSearchKeywordChanged, + onSearchAction = onSearchAction, + onClearAction = onClearAction, + keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search), + keyboardActions = KeyboardActions( + onSearch = { + keyboardController?.hide() + onSearchAction() + } + ), + ) - // 새로운 아이템이 추가될 때 왼쪽 자동 스크롤 - LaunchedEffect(contentUiState.selectedContents.size) { - lazyListState.animateScrollToItem(0) - } + // 선택된 영화 가로 스크롤 + if (contentUiState.selectedContents.isNotEmpty()) { + val lazyListState = rememberLazyListState() - Spacer(modifier = Modifier.height(16.dp)) - LazyRow( - state = lazyListState, - horizontalArrangement = Arrangement.spacedBy(0.dp), - ) { - items( - items = contentUiState.selectedContents, - key = { it.id } - ) { content -> - SelectedContentItem( - imageUrl = content.posterUrl, - onRemoveClick = { onRemoveContent(content) }, - ) + // 새로운 아이템이 추가될 때 왼쪽 자동 스크롤 + LaunchedEffect(contentUiState.selectedContents.size) { + lazyListState.animateScrollToItem(0) + } + + Spacer(modifier = Modifier.height(16.dp)) + LazyRow( + state = lazyListState, + horizontalArrangement = Arrangement.spacedBy(0.dp), + ) { + items( + items = contentUiState.selectedContents, + key = { it.id } + ) { content -> + SelectedContentItem( + imageUrl = content.posterUrl, + onRemoveClick = { onRemoveContent(content) }, + ) + } } } } + + Box( + modifier = Modifier + .fillMaxWidth() + .height(12.dp) + .align(Alignment.BottomCenter) + .graphicsLayer { translationY = size.height } + .background( + brush = Brush.verticalGradient( + colors = listOf( + Color.Black.copy(alpha = 0.25f), + Color.Transparent + ) + ) + ) + ) } } @@ -252,16 +271,16 @@ fun OnboardingContentScreen( } } - FlintBasicButton( + FlintLargeButton( text = "다음", state = if (contentUiState.canProceed) FlintButtonState.Able else FlintButtonState.Disable, onClick = { if (contentUiState.canProceed) { onNextClick() } }, - contentPadding = PaddingValues(vertical = 14.dp), - modifier = - Modifier - .fillMaxWidth() - .padding(horizontal = 20.dp, vertical = 20.dp), - ) + enabled = contentUiState.canProceed, + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 16.dp, vertical = 20.dp), + + ) } } diff --git a/app/src/main/java/com/flint/presentation/onboarding/OnboardingDoneScreen.kt b/app/src/main/java/com/flint/presentation/onboarding/OnboardingDoneScreen.kt index be85db32..0c9a00c4 100644 --- a/app/src/main/java/com/flint/presentation/onboarding/OnboardingDoneScreen.kt +++ b/app/src/main/java/com/flint/presentation/onboarding/OnboardingDoneScreen.kt @@ -21,8 +21,8 @@ import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.flint.R -import com.flint.core.designsystem.component.button.FlintBasicButton import com.flint.core.designsystem.component.button.FlintButtonState +import com.flint.core.designsystem.component.button.FlintLargeButton import com.flint.core.designsystem.component.topappbar.FlintBackTopAppbar import com.flint.core.designsystem.theme.FlintTheme @@ -58,19 +58,16 @@ fun OnboardingDoneScreen( modifier: Modifier = Modifier, ) { Column( - modifier = - modifier - .fillMaxSize() - .background(color = FlintTheme.colors.background) + modifier = modifier + .fillMaxSize() + .background(color = FlintTheme.colors.background) ) { FlintBackTopAppbar( onClick = onBackClick, ) Column( - modifier = - Modifier - .weight(1f), + modifier = Modifier.weight(1f), ) { Spacer(modifier = Modifier.height(12.dp)) @@ -78,10 +75,9 @@ fun OnboardingDoneScreen( text = "취향이 보이기 시작했어요", color = FlintTheme.colors.primary200, style = FlintTheme.typography.body1R16, - modifier = - Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp), + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 16.dp), ) Spacer(modifier = Modifier.height(8.dp)) @@ -90,10 +86,9 @@ fun OnboardingDoneScreen( text = "Flint에서 끌리는 콘텐츠를\n만나러 가볼까요?", color = FlintTheme.colors.white, style = FlintTheme.typography.display2M28, - modifier = - Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp), + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 16.dp), ) Spacer(modifier = Modifier.height(40.dp)) @@ -101,23 +96,21 @@ fun OnboardingDoneScreen( Image( painter = painterResource(id = R.drawable.img_onboarding_3d), contentDescription = null, - modifier = - Modifier - .fillMaxWidth(), + modifier = Modifier.fillMaxWidth(), contentScale = ContentScale.Crop, ) } - FlintBasicButton( + FlintLargeButton( text = "시작하기", state = if (isLoading) FlintButtonState.Disable else FlintButtonState.Able, onClick = onStartClick, - contentPadding = PaddingValues(vertical = 14.dp), - modifier = - Modifier - .fillMaxWidth() - .padding(horizontal = 20.dp, vertical = 20.dp), - ) + enabled = !isLoading, + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 16.dp, vertical = 20.dp), + + ) } } diff --git a/app/src/main/java/com/flint/presentation/onboarding/OnboardingOttScreen.kt b/app/src/main/java/com/flint/presentation/onboarding/OnboardingOttScreen.kt index f95bdb6e..cde8b7be 100644 --- a/app/src/main/java/com/flint/presentation/onboarding/OnboardingOttScreen.kt +++ b/app/src/main/java/com/flint/presentation/onboarding/OnboardingOttScreen.kt @@ -20,8 +20,8 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle -import com.flint.core.designsystem.component.button.FlintBasicButton import com.flint.core.designsystem.component.button.FlintButtonState +import com.flint.core.designsystem.component.button.FlintLargeButton import com.flint.core.designsystem.component.topappbar.FlintBackTopAppbar import com.flint.core.designsystem.theme.FlintTheme import com.flint.domain.type.OttType @@ -101,16 +101,16 @@ fun OnboardingOttScreen( } } - FlintBasicButton( + FlintLargeButton( text = "다음", state = if (ottUiState.canProceed) FlintButtonState.Able else FlintButtonState.Disable, onClick = {if (ottUiState.canProceed) onNextClick() }, - contentPadding = PaddingValues(vertical = 14.dp), - modifier = - Modifier - .fillMaxWidth() - .padding(horizontal = 20.dp, vertical = 20.dp), - ) + enabled = ottUiState.canProceed, + modifier = Modifier + .fillMaxWidth() + .padding(horizontal = 16.dp, vertical = 20.dp), + + ) } } diff --git a/app/src/main/java/com/flint/presentation/onboarding/OnboardingProfileScreen.kt b/app/src/main/java/com/flint/presentation/onboarding/OnboardingProfileScreen.kt index a45b5753..d1eae76f 100644 --- a/app/src/main/java/com/flint/presentation/onboarding/OnboardingProfileScreen.kt +++ b/app/src/main/java/com/flint/presentation/onboarding/OnboardingProfileScreen.kt @@ -1,6 +1,7 @@ package com.flint.presentation.onboarding 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 @@ -12,6 +13,7 @@ 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.LaunchedEffect @@ -21,6 +23,7 @@ import androidx.compose.runtime.remember 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.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.platform.LocalSoftwareKeyboardController @@ -30,8 +33,8 @@ import androidx.compose.ui.unit.dp import androidx.hilt.navigation.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.flint.R -import com.flint.core.designsystem.component.button.FlintBasicButton import com.flint.core.designsystem.component.button.FlintButtonState +import com.flint.core.designsystem.component.button.FlintLargeButton import com.flint.core.designsystem.component.image.ProfileImage import com.flint.core.designsystem.component.textfield.FlintBasicTextField import com.flint.core.designsystem.component.toast.ShowToast @@ -162,29 +165,38 @@ fun OnboardingProfileScreen( }, ) - FlintBasicButton( - text = "확인", - state = if (isValid && isFormatValid) FlintButtonState.Able else FlintButtonState.Disable, - onClick = { - keyboardController?.hide() - onCheckNickname() - }, - enabled = isValid && isFormatValid, - contentPadding = PaddingValues(horizontal = 16.dp, vertical = 10.dp), - modifier = Modifier.fillMaxHeight(), - ) + Box( + modifier = Modifier + .fillMaxHeight() + .clip(RoundedCornerShape(8.dp)) + .background( + if (isValid && isFormatValid) FlintTheme.colors.primary400 + else FlintTheme.colors.gray700 + ) + .clickable(enabled = isValid && isFormatValid) { + keyboardController?.hide() + onCheckNickname() + } + .padding(horizontal = 16.dp, vertical = 10.dp), + contentAlignment = Alignment.Center, + ) { + Text( + text = "확인", + color = if (isValid && isFormatValid) FlintTheme.colors.white else FlintTheme.colors.gray400, + style = if (isValid && isFormatValid) FlintTheme.typography.body1Sb16 else FlintTheme.typography.body1M16, + ) + } } } - FlintBasicButton( - text = "시작하기", + FlintLargeButton( + text = "다음", state = if (canProceed) FlintButtonState.Able else FlintButtonState.Disable, onClick = onNextClick, enabled = canProceed, - contentPadding = PaddingValues(12.dp), modifier = Modifier .fillMaxWidth() - .padding(horizontal = 20.dp, vertical = 20.dp), + .padding(horizontal = 16.dp, vertical = 20.dp), ) } diff --git a/app/src/main/java/com/flint/presentation/splash/SplashScreen.kt b/app/src/main/java/com/flint/presentation/splash/SplashScreen.kt index 584f8e8d..cfbf7f8d 100644 --- a/app/src/main/java/com/flint/presentation/splash/SplashScreen.kt +++ b/app/src/main/java/com/flint/presentation/splash/SplashScreen.kt @@ -9,6 +9,7 @@ import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.tooling.preview.Preview import com.airbnb.lottie.compose.LottieAnimation import com.airbnb.lottie.compose.LottieCompositionSpec @@ -30,7 +31,6 @@ fun SplashRoute( onAnimationFinished = navigateToLogin, ) LaunchedEffect(Unit) { - // FIXME navigation test @ckals413 delay(2000) navigateToLogin() } @@ -60,6 +60,7 @@ fun SplashScreen(onAnimationFinished: () -> Unit) { LottieAnimation( composition = composition, modifier = Modifier.fillMaxSize(), + contentScale = ContentScale.Crop, ) } }