Skip to content

[Fix] 온보딩 QA 반영 #184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nahy-512 merged 7 commits into from
Jan 23, 2026
Merged

[Fix] 온보딩 QA 반영 #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
18ef878
style: QA-모달 그림자 제거
ckals413 Jan 22, 2026
db53880
style: QA-스플레시 테두리 제거
ckals413 Jan 22, 2026
614d2a4
style: QA-모달 그림자 제거
ckals413 Jan 22, 2026
5d973c2
style: QA-확인버튼 색상
ckals413 Jan 22, 2026
494b110
style: QA-하단버튼
ckals413 Jan 22, 2026
f99d51d
style: QA-하단버튼 및 content shadow
ckals413 Jan 23, 2026
560f72c
feat: 버튼 enabled 속성 추가
ckals413 Jan 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 11 additions & 14 deletions app/src/main/java/com/flint/core/designsystem/component/modal/FlintBasicModal.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
)
}
}
}
137 changes: 78 additions & 59 deletions app/src/main/java/com/flint/presentation/onboarding/OnboardingContentScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
)
)
)
)
}
}

Expand Down Expand Up @@ -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),

)
}
}

Expand Down
45 changes: 19 additions & 26 deletions app/src/main/java/com/flint/presentation/onboarding/OnboardingDoneScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -58,30 +58,26 @@ 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))

Text(
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))
Expand All @@ -90,34 +86,31 @@ 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))

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),

)
}
}

Expand Down
16 changes: 8 additions & 8 deletions app/src/main/java/com/flint/presentation/onboarding/OnboardingOttScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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),

)
}
}

Expand Down
Loading