#27 TopAppBar Pull, Merge

app/src/main/java/com/texthip/thip/ui/common/buttons/HeaderButton.kt

@@ -10,10 +10,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 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.res.stringResource
@@ -27,19 +23,17 @@ import com.texthip.thip.ui.theme.ThipTheme.typography
 fun HeaderButton(
     modifier: Modifier = Modifier,
     text: String,
+    enabled: Boolean = false,
     onClick: () -> Unit = {},
 ) {
-    var isClicked by remember { mutableStateOf(false) }
-
     Box(
         modifier = modifier
             .background(
-                color = if (isClicked) colors.Purple else colors.Grey02,
+                color = if (enabled) colors.Purple else colors.Grey02,
                 shape = RoundedCornerShape(20.dp)
             )
-            .clickable {
-                isClicked = !isClicked
-                onClick()
+            .let {
+                if (enabled) it.clickable(onClick = onClick) else it
             }
             .padding(vertical = 4.dp, horizontal = 12.dp),
         contentAlignment = Alignment.Center,
@@ -60,8 +54,17 @@ private fun HeaderButtonPreview() {
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center
     ) {
+        // 비활성 상태
+        HeaderButton(
+            text = stringResource(R.string.finish),
+            enabled = false
+        )
+
+        // 활성 상태
         HeaderButton(
             text = stringResource(R.string.finish),
+            enabled = true,
+            onClick = { }
         )
     }
 }

app/src/main/java/com/texthip/thip/ui/common/topappbar/BookTopAppBar.kt

@@ -0,0 +1,63 @@
+package com.texthip.thip.ui.common.topappbar
+
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.view.CountingBar
+import com.texthip.thip.ui.theme.ThipTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun BookTopAppBar(
+    count: Int = 0,
+    onLeftClick: () -> Unit,
+    onRightClick: () -> Unit,
+) {
+    TopAppBar(
+        navigationIcon = {
+            IconButton(onClick = onLeftClick) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_arrow_back),
+                    contentDescription = "Back Button",
+                    tint = Color.Unspecified
+                )
+            }
+        },
+        title = {
+            CountingBar(
+                count = count,
+            )
+        },
+        actions = {
+            IconButton(onClick = onRightClick) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_more),
+                    contentDescription = "More Options",
+                    tint = Color.Unspecified
+                )
+            }
+        },
+        colors = TopAppBarDefaults.topAppBarColors(
+            containerColor = Color.Transparent,
+        ),
+    )
+}
+
+@Preview(showBackground = false)
+@Composable
+private fun BookTopAppBarPreview() {
+    ThipTheme {
+        BookTopAppBar(
+            onLeftClick = { },
+            onRightClick = { },
+            count = 210
+        )
+    }
+}

app/src/main/java/com/texthip/thip/ui/common/topappbar/DefaultTopAppBar.kt

@@ -0,0 +1,88 @@
+package com.texthip.thip.ui.common.topappbar
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun DefaultTopAppBar(
+    title: String = stringResource(R.string.page_name),
+    isTitleVisible: Boolean = true,
+    isRightIconVisible: Boolean = false,
+    onLeftClick: () -> Unit,
+    onRightClick: () -> Unit = {},
+) {
+    CenterAlignedTopAppBar(
+        navigationIcon = {
+            IconButton(onClick = onLeftClick) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_arrow_back),
+                    contentDescription = "Back Button",
+                    tint = Color.Unspecified
+                )
+            }
+        },
+        title = {
+            if (isTitleVisible) {
+                Text(
+                    text = title,
+                    color = colors.White,
+                    style = typography.bigtitle_b700_s22_h24
+                )
+            }
+        },
+        actions = {
+            if (isRightIconVisible) {
+                IconButton(onClick = onRightClick) {
+                    Icon(
+                        painter = painterResource(R.drawable.ic_more),
+                        contentDescription = "More Options",
+                        tint = Color.Unspecified
+                    )
+                }
+            }
+        },
+        colors = TopAppBarDefaults.topAppBarColors(
+            containerColor = Color.Transparent,
+        ),
+    )
+}
+
+@Preview
+@Composable
+private fun DefaultTopAppBarPreview() {
+    Column {
+        DefaultTopAppBar(
+            onLeftClick = {},
+        )
+        DefaultTopAppBar(
+            isRightIconVisible = true,
+            onLeftClick = {},
+            onRightClick = {},
+        )
+        DefaultTopAppBar(
+            isRightIconVisible = true,
+            isTitleVisible = false,
+            onLeftClick = {},
+            onRightClick = {},
+        )
+        DefaultTopAppBar(
+            isRightIconVisible = false,
+            isTitleVisible = false,
+            onLeftClick = {},
+        )
+    }
+}

app/src/main/java/com/texthip/thip/ui/common/topappbar/FeedListTopAppBar.kt

@@ -0,0 +1,90 @@
+package com.texthip.thip.ui.common.topappbar
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun FeedListTopAppBar(
+    nickname: String = "ThipUser 01ThipUser 01",
+    isRightIconVisible: Boolean = false,
+    onLeftClick: () -> Unit,
+    onRightClick: () -> Unit = {},
+) {
+    CenterAlignedTopAppBar(
+        navigationIcon = {
+            IconButton(onClick = onLeftClick) {
+                Icon(
+                    painter = painterResource(R.drawable.ic_arrow_back),
+                    contentDescription = "Back Button",
+                    tint = Color.Unspecified
+                )
+            }
+        },
+        title = {
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+                Text(
+                    text = nickname,
+                    color = colors.White,
+                    style = typography.bigtitle_b700_s22_h24,
+                    modifier = Modifier.width(100.dp),
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                )
+                Text(
+                    text = stringResource(R.string.subscriber),
+                    color = colors.White,
+                    style = typography.bigtitle_b700_s22_h24,
+                    modifier = Modifier.width(100.dp),
+                    maxLines = 1
+                )
+            }
+        },
+        actions = {
+            if (isRightIconVisible) {
+                IconButton(onClick = {
+                    onRightClick()
+                }) {
+                    Icon(
+                        painter = painterResource(R.drawable.ic_more),
+                        contentDescription = "More Options",
+                        tint = Color.Unspecified
+                    )
+                }
+            }
+        },
+        colors = TopAppBarDefaults.topAppBarColors(
+            containerColor = Color.Transparent,
+        ),
+    )
+}
+
+@Preview
+@Composable
+private fun FeedListTopAppBarPreview() {
+    FeedListTopAppBar(
+        isRightIconVisible = true,
+        onLeftClick = {},
+        onRightClick = {}
+    )
+}

app/src/main/java/com/texthip/thip/ui/common/topappbar/InputTopAppBar.kt

@@ -0,0 +1,88 @@
+package com.texthip.thip.ui.common.topappbar
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.HeaderButton
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun InputTopAppBar(
+    title: String = stringResource(R.string.page_name),
+    isRightButtonEnabled: Boolean = false,
+    rightButtonName: String = stringResource(R.string.finish),
+    isLeftIconVisible: Boolean = true,
+    onLeftClick: () -> Unit = {},
+    onRightClick: () -> Unit = {},
+) {
+    CenterAlignedTopAppBar(
+        navigationIcon = {
+            if (isLeftIconVisible) {
+                IconButton(onClick = onLeftClick) {
+                    Icon(
+                        painter = painterResource(R.drawable.ic_arrow_back),
+                        contentDescription = "Back Button",
+                        tint = Color.Unspecified
+                    )
+                }
+            }
+        },
+        title = {
+            Text(
+                text = title,
+                color = colors.White,
+                style = typography.bigtitle_b700_s22_h24
+            )
+        },
+        actions = {
+            HeaderButton(
+                text = rightButtonName,
+                enabled = isRightButtonEnabled,
+                onClick = {
+                    onRightClick()
+                },
+                modifier = Modifier.padding(
+                    end = 18.dp
+                )
+            )
+        },
+        colors = TopAppBarDefaults.topAppBarColors(
+            containerColor = Color.Transparent,
+        ),
+    )
+}
+
+@Preview
+@Composable
+private fun InputTopAppBarPreview() {
+    Column {
+        InputTopAppBar(
+            isRightButtonEnabled = true,
+            onLeftClick = {},
+            onRightClick = {}
+        )
+        InputTopAppBar(
+            title = "설정 1/2",
+            isRightButtonEnabled = false,
+            rightButtonName = stringResource(R.string.next),
+            isLeftIconVisible = false,
+            onLeftClick = {},
+            onRightClick = {}
+        )
+    }
+}