[Feat] 장르칩, 저장된 컬렉션 리스트 컴포넌트 구현 및 아이콘 추가

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

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<OttType>,
+    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<OttType>,
+    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,
+                ),
+        )
+    }
+}

app/src/main/res/drawable/ic_background_photo.xml

@@ -1,10 +1,10 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="48dp"
-    android:height="48dp"
-    android:viewportWidth="48"
-    android:viewportHeight="48">
+    android:width="30dp"
+    android:height="30dp"
+    android:viewportWidth="30"
+    android:viewportHeight="30">
   <path
-      android:pathData="M29,31.455L23.688,26L12,38M34,10V18M30,14H38M12.111,19H26.889C28.055,19 29,19.945 29,21.111V35.889C29,37.055 28.055,38 26.889,38H12.111C10.945,38 10,37.055 10,35.889V21.111C10,19.945 10.945,19 12.111,19ZM17,24.5C17,25.328 16.328,26 15.5,26C14.672,26 14,25.328 14,24.5C14,23.672 14.672,23 15.5,23C16.328,23 17,23.672 17,24.5Z"
+      android:pathData="M20,22.455L14.688,17L3,29M25,1V9M21,5H29M3.111,10H17.889C19.055,10 20,10.945 20,12.111V26.889C20,28.055 19.055,29 17.889,29H3.111C1.945,29 1,28.055 1,26.889V12.111C1,10.945 1.945,10 3.111,10ZM8,15.5C8,16.328 7.328,17 6.5,17C5.672,17 5,16.328 5,15.5C5,14.672 5.672,14 6.5,14C7.328,14 8,14.672 8,15.5Z"
       android:strokeLineJoin="round"
       android:strokeWidth="2"
       android:fillColor="#00000000"