diff --git a/app/src/main/java/com/flint/presentation/onboarding/component/FlintGenreChip.kt b/app/src/main/java/com/flint/presentation/onboarding/component/FlintGenreChip.kt new file mode 100644 index 00000000..b6b52ad4 --- /dev/null +++ b/app/src/main/java/com/flint/presentation/onboarding/component/FlintGenreChip.kt @@ -0,0 +1,132 @@ +package com.flint.presentation.onboarding.component + +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.horizontalScroll +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.shape.CircleShape +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.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.flint.core.common.extension.noRippleClickable +import com.flint.core.designsystem.theme.FlintTheme + +@Composable +fun FlintGenreChip( + text: String, + isSelected: Boolean, + onClick: () -> Unit, + modifier: Modifier = Modifier, + contentPadding: PaddingValues = PaddingValues(horizontal = 12.dp, vertical = 9.dp), +) { + val shape = CircleShape + + val backgroundColor = + if (isSelected) FlintTheme.colors.primary400 else FlintTheme.colors.gray800 + + val border: BorderStroke? = + if (isSelected) null else BorderStroke(1.dp, FlintTheme.colors.gray300) + + val contentColor = FlintTheme.colors.white + + Text( + text = text, + color = contentColor, + style = FlintTheme.typography.body2M14, + modifier = + modifier + .clip(shape) + .run { + if (border != null) + border(border = border, shape = shape) + else + this + } + .background(color = backgroundColor, shape = shape) + .noRippleClickable(onClick = onClick) + .padding(contentPadding), + ) +} + +@Preview +@Composable +private fun FlintGenreChipPreview() { + FlintTheme { + Box( + modifier = + Modifier + .background(FlintTheme.colors.background) + .fillMaxWidth() + .padding(20.dp), + ) { + Row( + horizontalArrangement = Arrangement.spacedBy(16.dp), + verticalAlignment = Alignment.CenterVertically, + ) { + FlintGenreChip( + text = "액션", + isSelected = false, + onClick = {}, + ) + + FlintGenreChip( + text = "액션", + isSelected = true, + onClick = {}, + ) + } + } + } +} + +@Preview +@Composable +private fun FlintGenreChipInteractivePreview() { + FlintTheme { + val genres = listOf("액션", "코미디", "로맨스", "스릴러", "드라마", "SF", "공포", "다큐") + var selected by remember { mutableStateOf(setOf("액션", "로맨스")) } + + Box( + modifier = + Modifier + .background(FlintTheme.colors.background) + .fillMaxWidth() + .padding(20.dp), + ) { + Row( + modifier = Modifier.horizontalScroll(rememberScrollState()), + horizontalArrangement = Arrangement.spacedBy(8.dp), + ) { + genres.forEach { genre -> + FlintGenreChip( + text = genre, + isSelected = genre in selected, + onClick = { + selected = + if (genre in selected) { + selected - genre + } else { + selected + genre + } + }, + ) + } + } + } + } +} \ No newline at end of file diff --git a/app/src/main/java/com/flint/presentation/profile/component/CollectionCreateContentBookmark.kt b/app/src/main/java/com/flint/presentation/profile/component/CollectionCreateContentBookmark.kt new file mode 100644 index 00000000..d3affeca --- /dev/null +++ b/app/src/main/java/com/flint/presentation/profile/component/CollectionCreateContentBookmark.kt @@ -0,0 +1,239 @@ +package com.flint.presentation.profile.component + +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +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.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.material3.Icon +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.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.res.vectorResource +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.flint.R +import com.flint.core.designsystem.component.image.NetworkImage +import com.flint.core.designsystem.component.listView.OttHorizontalList +import com.flint.core.designsystem.theme.FlintTheme +import com.flint.domain.type.OttType + +@Composable +fun CollectionCreateContentBookmark( + onBookmarkClick: () -> Unit, + onMoreClick: () -> Unit, + isBookmarked: Boolean, + bookmarkCount: Int, + imageUrl: String, + title: String, + director: String, + createdYear: Int, + ottList: List, + modifier: Modifier = Modifier, +) { + Row( + modifier = + modifier + .fillMaxWidth() + .background(color = Color.Transparent) + .padding(horizontal = 16.dp, vertical = 12.dp), + verticalAlignment = Alignment.Top, + ) { + CollectionCreateContentBookmarkImage( + imageUrl = imageUrl, + ottList = ottList, + modifier = + Modifier + .height(150.dp) + .width(100.dp), + ) + + Spacer(modifier = Modifier.width(12.dp)) + + CollectionCreateContentBookmarkInfo( + title = title, + director = director, + createdYear = createdYear, + onMoreClick = onMoreClick, + modifier = + Modifier + .weight(1f) + .height(150.dp), + ) + + Spacer(modifier = Modifier.width(8.dp)) + + CollectionCreateContentBookmarkTag( + isBookmarked = isBookmarked, + bookmarkCount = bookmarkCount, + onClick = onBookmarkClick, + ) + } +} + +@Composable +private fun CollectionCreateContentBookmarkImage( + imageUrl: String, + ottList: List, + modifier: Modifier = Modifier, +) { + Box( + modifier = modifier, + ) { + NetworkImage( + imageUrl = imageUrl, + modifier = Modifier.fillMaxWidth().height(150.dp), + ) + + OttHorizontalList( + ottList = ottList, + modifier = + Modifier + .padding(top = 10.dp, start = 8.dp), + ) + } +} + +@Composable +private fun CollectionCreateContentBookmarkInfo( + title: String, + director: String, + createdYear: Int, + onMoreClick: () -> Unit, + modifier: Modifier = Modifier, +) { + Column( + modifier = modifier, + ) { + Text( + text = title, + modifier = Modifier.fillMaxWidth(), + color = FlintTheme.colors.white, + overflow = TextOverflow.Ellipsis, + maxLines = 2, + style = FlintTheme.typography.body1M16, + ) + + Spacer(modifier = Modifier.height(12.dp)) + + Text( + text = director, + modifier = Modifier.fillMaxWidth(), + color = FlintTheme.colors.gray300, + style = FlintTheme.typography.caption1M12, + ) + + Text( + text = createdYear.toString(), + modifier = Modifier.fillMaxWidth(), + color = FlintTheme.colors.gray300, + style = FlintTheme.typography.body1R16, + ) + + Spacer(modifier = Modifier.weight(1f)) + + CollectionCreateContentBookmarkMore( + onClick = onMoreClick, + ) + } +} + +@Composable +private fun CollectionCreateContentBookmarkTag( + isBookmarked: Boolean, + bookmarkCount: Int, + onClick: () -> Unit, + modifier: Modifier = Modifier, +) { + Column( + modifier = modifier, + horizontalAlignment = Alignment.CenterHorizontally, + ) { + Icon( + imageVector = + ImageVector.vectorResource( + if (isBookmarked) R.drawable.ic_bookmark_fill else R.drawable.ic_bookmark_empty, + ), + contentDescription = null, + tint = Color.Unspecified, + modifier = + Modifier + .size(24.dp) + .clickable(onClick = onClick), + ) + + Spacer(modifier = Modifier.height(2.dp)) + + Text( + text = bookmarkCount.toString(), + color = FlintTheme.colors.white, + style = FlintTheme.typography.caption1M12, + ) + } +} + +@Composable +private fun CollectionCreateContentBookmarkMore( + onClick: () -> Unit, + modifier: Modifier = Modifier, +) { + Row( + modifier = modifier.clickable(onClick = onClick), + verticalAlignment = Alignment.CenterVertically, + ) { + Text( + text = "작품 보러가기", + color = FlintTheme.colors.white, + style = FlintTheme.typography.body2R14, + ) + + Icon( + imageVector = ImageVector.vectorResource(R.drawable.ic_more), + contentDescription = null, + tint = Color.Unspecified, + modifier = Modifier.size(16.dp), + ) + } +} + + + + +@Preview +@Composable +private fun CollectionCreateContentBookmarkPreview() { + FlintTheme { + var isBookmarked by remember { mutableStateOf(true) } + CollectionCreateContentBookmark( + onBookmarkClick = { isBookmarked = !isBookmarked }, + onMoreClick = {}, + isBookmarked = isBookmarked, + bookmarkCount = 413, + imageUrl = "https://buly.kr/DEaVFRZ", + title = "어바웃 타임", + director = "스파이더맨", + createdYear = 2001, + ottList = + listOf( + OttType.Netflix, + OttType.Disney, + OttType.Tving, + OttType.CoupangPlay, + ), + ) + } +} diff --git a/app/src/main/res/drawable/ic_background_photo.xml b/app/src/main/res/drawable/ic_background_photo.xml index 0e7091d4..602e85c7 100644 --- a/app/src/main/res/drawable/ic_background_photo.xml +++ b/app/src/main/res/drawable/ic_background_photo.xml @@ -1,10 +1,10 @@ + android:width="30dp" + android:height="30dp" + android:viewportWidth="30" + android:viewportHeight="30">