[MERGE] #23 -> develop

[FEAT/#23] TopAppBar 컴포넌트 구현

app/src/main/java/com/spoony/spoony/core/designsystem/component/topappbar/CloseTopAppBar.kt

@@ -0,0 +1,59 @@
+package com.spoony.spoony.core.designsystem.component.topappbar
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.spoony.spoony.R
+import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme
+import com.spoony.spoony.core.util.extension.noRippleClickable
+
+@Composable
+fun CloseTopAppBar(
+    title: String,
+    onCloseButtonClick: () -> Unit
+) {
+    SpoonyBasicTopAppBar(
+        actions = {
+            Row {
+                Icon(
+                    imageVector = ImageVector.vectorResource(R.drawable.ic_close_24),
+                    contentDescription = null,
+                    modifier = Modifier
+                        .size(32.dp)
+                        .noRippleClickable(onClick = onCloseButtonClick)
+                        .padding(end = 12.dp),
+                    tint = SpoonyAndroidTheme.colors.gray400
+                )
+            }
+        }
+    ) {
+        Text(
+            text = title,
+            style = SpoonyAndroidTheme.typography.title2b,
+            color = SpoonyAndroidTheme.colors.black,
+            modifier = Modifier
+                .padding(start = 20.dp)
+                .fillMaxWidth()
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun CloseTopAppBarPreview() {
+    SpoonyAndroidTheme {
+        CloseTopAppBar(
+            title = "홍대입구역",
+            onCloseButtonClick = {}
+        )
+    }
+}

app/src/main/java/com/spoony/spoony/core/designsystem/component/topappbar/SpoonyBasicTopAppBar.kt

@@ -0,0 +1,55 @@
+package com.spoony.spoony.core.designsystem.component.topappbar
+
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.spoony.spoony.R
+import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SpoonyBasicTopAppBar(
+    modifier: Modifier = Modifier,
+    showBackButton: Boolean = false,
+    onBackButtonClick: () -> Unit = {},
+    actions: @Composable RowScope.() -> Unit = {},
+    content: @Composable () -> Unit = {}
+) {
+    CenterAlignedTopAppBar(
+        title = content,
+        modifier = modifier,
+        navigationIcon = {
+            if (showBackButton) {
+                IconButton(
+                    onClick = onBackButtonClick
+                ) {
+                    Icon(
+                        imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_left_24),
+                        contentDescription = null,
+                        tint = SpoonyAndroidTheme.colors.gray700,
+                        modifier = Modifier
+                            .size(32.dp)
+                    )
+                }
+            }
+        },
+        actions = actions
+    )
+}
+
+@Preview
+@Composable
+private fun SpoonyBasicTopAppBarPreview() {
+    SpoonyAndroidTheme {
+        SpoonyBasicTopAppBar()
+    }
+}

app/src/main/java/com/spoony/spoony/core/designsystem/component/topappbar/TagTopAppBar.kt

@@ -0,0 +1,51 @@
+package com.spoony.spoony.core.designsystem.component.topappbar
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.spoony.spoony.core.designsystem.component.tag.LogoTag
+import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme
+import com.spoony.spoony.core.designsystem.type.TagSize
+
+@Composable
+fun TagTopAppBar(
+    count: Int,
+    tagSize: TagSize = TagSize.Small,
+    showBackButton: Boolean = false,
+    onBackButtonClick: () -> Unit = {},
+    content: @Composable () -> Unit = {}
+) {
+    SpoonyBasicTopAppBar(
+        showBackButton = showBackButton,
+        onBackButtonClick = onBackButtonClick,
+        actions = {
+            LogoTag(
+                count = count,
+                tagSize = tagSize,
+                modifier = Modifier.padding(end = 20.dp)
+            )
+        },
+        content = content
+    )
+}
+
+@Preview
+@Composable
+private fun TagTopAppBarPreview() {
+    SpoonyAndroidTheme {
+        TagTopAppBar(
+            count = 99,
+            showBackButton = false
+        ) {
+            Text(
+                text = "홍대입구역",
+                modifier = Modifier
+                    .fillMaxWidth()
+            )
+        }
+    }
+}

app/src/main/java/com/spoony/spoony/core/designsystem/component/topappbar/TitleTopAppBar.kt

@@ -0,0 +1,38 @@
+package com.spoony.spoony.core.designsystem.component.topappbar
+
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import com.spoony.spoony.core.designsystem.theme.SpoonyAndroidTheme
+
+@Composable
+fun TitleTopAppBar(
+    title: String,
+    onBackButtonClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    SpoonyBasicTopAppBar(
+        showBackButton = true,
+        onBackButtonClick = onBackButtonClick,
+        content = {
+            Text(
+                text = title,
+                style = SpoonyAndroidTheme.typography.title2b,
+                color = SpoonyAndroidTheme.colors.black
+            )
+        },
+        modifier = modifier
+    )
+}
+
+@Preview
+@Composable
+private fun TitleTopAppBarPreview() {
+    SpoonyAndroidTheme {
+        TitleTopAppBar(
+            title = "신고하기",
+            onBackButtonClick = {}
+        )
+    }
+}