feat: 컬렉션 생성 화면 기본 UI 구현

feature/collection/src/main/java/com/into/websoso/feature/collection/CollectionCreateScreen.kt

@@ -0,0 +1,78 @@
+package com.into.websoso.feature.collection
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.into.websoso.core.designsystem.theme.WebsosoTheme
+import com.into.websoso.core.designsystem.theme.White
+import com.into.websoso.feature.collection.component.CollectionCreateAppBar
+import com.into.websoso.feature.collection.component.CollectionDescriptionInput
+import com.into.websoso.feature.collection.component.CollectionNameInput
+import com.into.websoso.feature.collection.component.CollectionNovelSection
+import com.into.websoso.feature.collection.component.CollectionPrivacySetting
+
+@Composable
+internal fun CollectionCreateScreen(
+    onNavigateBack: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    var isPrivate by rememberSaveable { mutableStateOf(false) }
+    var collectionName by rememberSaveable { mutableStateOf("") }
+    var collectionDescription by rememberSaveable { mutableStateOf("") }
+
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .background(White)
+            .statusBarsPadding(),
+    ) {
+        CollectionCreateAppBar(onNavigateBack = onNavigateBack)
+        CollectionPrivacySetting(
+            isPrivate = isPrivate,
+            onPrivateChange = { isPrivate = it },
+        )
+        CollectionNameInput(
+            value = collectionName,
+            onValueChange = { collectionName = it },
+            modifier = Modifier.padding(
+                start = 20.dp,
+                top = 20.dp,
+                end = 20.dp,
+            ),
+        )
+        CollectionDescriptionInput(
+            value = collectionDescription,
+            onValueChange = { collectionDescription = it },
+            modifier = Modifier.padding(
+                start = 20.dp,
+                top = 30.dp,
+                end = 20.dp,
+            ),
+        )
+        CollectionNovelSection(
+            modifier = Modifier.padding(
+                start = 20.dp,
+                top = 30.dp,
+                end = 20.dp,
+            ),
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun CollectionCreateScreenPreview() {
+    WebsosoTheme {
+        CollectionCreateScreen(onNavigateBack = {})
+    }
+}

feature/collection/src/main/java/com/into/websoso/feature/collection/CollectionNavHost.kt

@@ -7,6 +7,7 @@ import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 
 private const val COLLECTION_ROUTE = "collection"
+private const val COLLECTION_CREATE_ROUTE = "collection/create"
 
 @Composable
 fun CollectionNavHost(
@@ -21,7 +22,17 @@ fun CollectionNavHost(
         modifier = modifier,
     ) {
         composable(route = COLLECTION_ROUTE) {
-            CollectionScreen(onNavigateBack = onNavigateBack)
+            CollectionScreen(
+                onNavigateBack = onNavigateBack,
+                onNavigateToCreate = {
+                    navController.navigate(COLLECTION_CREATE_ROUTE)
+                },
+            )
+        }
+        composable(route = COLLECTION_CREATE_ROUTE) {
+            CollectionCreateScreen(
+                onNavigateBack = navController::popBackStack,
+            )
         }
     }
 }

feature/collection/src/main/java/com/into/websoso/feature/collection/CollectionScreen.kt

@@ -23,6 +23,7 @@ import com.into.websoso.feature.collection.model.CollectionTab
 @Composable
 fun CollectionScreen(
     onNavigateBack: () -> Unit,
+    onNavigateToCreate: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     var selectedTab by rememberSaveable { mutableStateOf(CollectionTab.MY_COLLECTION) }
@@ -39,6 +40,7 @@ fun CollectionScreen(
             onTabSelected = { selectedTab = it },
         )
         CollectionCreateButton(
+            onClick = onNavigateToCreate,
             modifier = Modifier.padding(
                 horizontal = 20.dp,
                 vertical = 16.dp,
@@ -51,6 +53,9 @@ fun CollectionScreen(
 @Composable
 private fun CollectionScreenPreview() {
     WebsosoTheme {
-        CollectionScreen(onNavigateBack = {})
+        CollectionScreen(
+            onNavigateBack = {},
+            onNavigateToCreate = {},
+        )
     }
 }

feature/collection/src/main/java/com/into/websoso/feature/collection/component/CollectionCreateAppBar.kt

@@ -0,0 +1,65 @@
+package com.into.websoso.feature.collection.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+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.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.into.websoso.core.designsystem.theme.Gray100
+import com.into.websoso.core.designsystem.theme.WebsosoTheme
+import com.into.websoso.core.designsystem.theme.White
+import com.into.websoso.core.resource.R.drawable.ic_navigate_left
+
+@Composable
+internal fun CollectionCreateAppBar(
+    onNavigateBack: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(44.dp)
+            .background(White),
+        contentAlignment = Alignment.Center,
+    ) {
+        IconButton(
+            onClick = onNavigateBack,
+            modifier = Modifier
+                .align(Alignment.CenterStart)
+                .padding(start = 6.dp)
+                .size(44.dp),
+        ) {
+            Image(
+                painter = painterResource(id = ic_navigate_left),
+                contentDescription = null,
+                modifier = Modifier.size(24.dp),
+            )
+        }
+        Text(
+            text = "완료",
+            color = Gray100,
+            style = WebsosoTheme.typography.title2,
+            modifier = Modifier
+                .align(Alignment.CenterEnd)
+                .padding(horizontal = 20.dp),
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun CollectionCreateAppBarPreview() {
+    WebsosoTheme {
+        CollectionCreateAppBar(onNavigateBack = {})
+    }
+}

feature/collection/src/main/java/com/into/websoso/feature/collection/component/CollectionCreateButton.kt

@@ -3,6 +3,7 @@ package com.into.websoso.feature.collection.component
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -13,7 +14,9 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.into.websoso.core.designsystem.theme.Gray20
@@ -23,20 +26,27 @@ import com.into.websoso.core.designsystem.theme.WebsosoTheme
 import com.into.websoso.core.resource.R.drawable.ic_collection_create
 
 @Composable
-internal fun CollectionCreateButton(modifier: Modifier = Modifier) {
+internal fun CollectionCreateButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
     val shape = RoundedCornerShape(12.dp)
 
     Row(
         modifier = modifier
             .fillMaxWidth()
             .height(46.dp)
+            .clip(shape)
             .background(
                 color = Gray20,
                 shape = shape,
             ).border(
                 width = 1.dp,
                 color = Primary30,
                 shape = shape,
+            ).clickable(
+                onClick = onClick,
+                role = Role.Button,
             ),
         horizontalArrangement = Arrangement.spacedBy(
             space = 10.dp,
@@ -61,6 +71,6 @@ internal fun CollectionCreateButton(modifier: Modifier = Modifier) {
 @Composable
 private fun CollectionCreateButtonPreview() {
     WebsosoTheme {
-        CollectionCreateButton()
+        CollectionCreateButton(onClick = {})
     }
 }

feature/collection/src/main/java/com/into/websoso/feature/collection/component/CollectionDescriptionInput.kt

@@ -0,0 +1,98 @@
+package com.into.websoso.feature.collection.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+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.foundation.text.BasicTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.into.websoso.core.designsystem.theme.Black
+import com.into.websoso.core.designsystem.theme.Gray100
+import com.into.websoso.core.designsystem.theme.Gray200
+import com.into.websoso.core.designsystem.theme.Gray50
+import com.into.websoso.core.designsystem.theme.Primary100
+import com.into.websoso.core.designsystem.theme.WebsosoTheme
+
+private const val COLLECTION_DESCRIPTION_MAX_LENGTH = 60
+
+@Composable
+internal fun CollectionDescriptionInput(
+    value: String,
+    onValueChange: (String) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier.fillMaxWidth(),
+        verticalArrangement = Arrangement.spacedBy(10.dp),
+    ) {
+        Text(
+            text = "컬렉션 설명",
+            color = Black,
+            style = WebsosoTheme.typography.title2,
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(112.dp)
+                .background(
+                    color = Gray50,
+                    shape = RoundedCornerShape(14.dp),
+                ).padding(
+                    horizontal = 16.dp,
+                    vertical = 18.dp,
+                ),
+        ) {
+            BasicTextField(
+                value = value,
+                onValueChange = { changedValue ->
+                    onValueChange(changedValue.take(COLLECTION_DESCRIPTION_MAX_LENGTH))
+                },
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(1f),
+                textStyle = WebsosoTheme.typography.body2.copy(color = Black),
+                cursorBrush = SolidColor(Primary100),
+                decorationBox = { innerTextField ->
+                    Box {
+                        if (value.isEmpty()) {
+                            Text(
+                                text = "컬렉션에 관련한 설명을 간단하게 작성해주세요",
+                                color = Gray100,
+                                style = WebsosoTheme.typography.body2,
+                            )
+                        }
+                        innerTextField()
+                    }
+                },
+            )
+            Text(
+                text = "(${value.length}/$COLLECTION_DESCRIPTION_MAX_LENGTH)",
+                color = Gray200,
+                style = WebsosoTheme.typography.body2,
+                modifier = Modifier.align(Alignment.End),
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun CollectionDescriptionInputPreview() {
+    WebsosoTheme {
+        CollectionDescriptionInput(
+            value = "",
+            onValueChange = {},
+            modifier = Modifier.padding(20.dp),
+        )
+    }
+}