Merge pull request #24 from 6QuizOnTheBlock/and/feat/#6_appbar

And/feat/#6 appbar

android/core/designsystem/src/main/java/com/sixkids/designsystem/component/appbar/AppBarScreenPreview.kt

@@ -0,0 +1,159 @@
+package com.sixkids.designsystem.component.appbar
+
+import android.util.Log
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.sixkids.designsystem.R
+import com.sixkids.designsystem.theme.Orange
+import com.sixkids.designsystem.theme.UlbanTheme
+
+@Composable
+fun RelayDefaultAppBarPreview() {
+    val listState = rememberLazyListState()
+    val isScrolled by remember {
+        derivedStateOf {
+            listState.firstVisibleItemIndex > 0 || listState.firstVisibleItemScrollOffset > 100
+        }
+    }
+    Column(modifier = Modifier.fillMaxSize()) {
+        UlbanDefaultAppBar(
+            modifier = Modifier
+                .fillMaxWidth(),
+            leftIcon = R.drawable.relay,
+            title = "이어 달리기",
+            content = "새로운\n이어 달리기\n만들기",
+            color = Orange,
+            onclick = { Log.d("확인", "클릭된 ") },
+            expanded = !isScrolled
+        )
+
+        LazyColumn(
+            state = listState, modifier = Modifier
+                .weight(1f)
+        ) {
+            items(100) { index ->
+                Text(
+                    "Item $index", modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(16.dp)
+                )
+            }
+        }
+
+    }
+}
+
+@Composable
+fun RelayDetailAppBarPreview() {
+    val listState = rememberLazyListState()
+    val isScrolled by remember {
+        derivedStateOf {
+            listState.firstVisibleItemIndex > 0 || listState.firstVisibleItemScrollOffset > 100
+        }
+    }
+    Column(modifier = Modifier.fillMaxSize()) {
+        UlbanDetailAppBar(
+            modifier = Modifier
+                .fillMaxWidth(),
+            leftIcon = R.drawable.relay,
+            title = "이어 달리기",
+            content = "이어 달리기가\n진행 중입니다!",
+            topDescription = "04.17 15:00~",
+            bottomDescription = "현재 주자는 오하빈 학생입니다.",
+            color = Orange,
+            onclick = { Log.d("확인", "클릭된 ") },
+            expanded = !isScrolled
+        )
+
+        LazyColumn(
+            state = listState, modifier = Modifier
+                .weight(1f)
+        ) {
+            items(100) { index ->
+                Text(
+                    "Item $index", modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(16.dp)
+                )
+            }
+        }
+
+    }
+}
+
+
+@Composable
+fun RelayDetailWithProgressAppBarPreview() {
+    val listState = rememberLazyListState()
+    val isScrolled by remember {
+        derivedStateOf {
+            listState.firstVisibleItemIndex > 0 || listState.firstVisibleItemScrollOffset > 100
+        }
+    }
+    Column(modifier = Modifier.fillMaxSize()) {
+        UlbanDetailWithProgressAppBar(
+            modifier = Modifier
+                .fillMaxWidth(),
+            leftIcon = R.drawable.relay,
+            title = "이어 달리기",
+            content = "이어 달리기가\n진행 중입니다!",
+            topDescription = "04.17 15:00~",
+            bottomDescription = "현재 주자는 오하빈 학생입니다.",
+            totalCnt = 20,
+            successCnt = 10,
+            color = Orange,
+            onclick = { Log.d("확인", "클릭된 ") },
+            expanded = !isScrolled
+        )
+
+        LazyColumn(
+            state = listState, modifier = Modifier
+                .weight(1f)
+        ) {
+            items(100) { index ->
+                Text(
+                    "Item $index", modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(16.dp)
+                )
+            }
+        }
+
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun DefaultAppBarPreview() {
+    UlbanTheme {
+        RelayDefaultAppBarPreview()
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun DetailAppBarPreview() {
+    UlbanTheme {
+        RelayDetailAppBarPreview()
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun DetailWithProgressAppBarPreview() {
+    UlbanTheme {
+        RelayDetailWithProgressAppBarPreview()
+    }
+}

android/core/designsystem/src/main/java/com/sixkids/designsystem/component/appbar/BasicAppBar.kt

@@ -0,0 +1,135 @@
+package com.sixkids.designsystem.component.appbar
+
+import androidx.annotation.DrawableRes
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.TweenSpec
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+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.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.sixkids.designsystem.theme.AppBarTypography
+
+@Composable
+fun BasicAppBar(
+    modifier: Modifier = Modifier,
+    @DrawableRes leftIcon: Int,
+    title: String,
+    content: @Composable () -> Unit,
+    color: Color,
+    expanded: Boolean = true,
+    onclick: () -> Unit
+) {
+    val cornerRadius by animateDpAsState(
+        targetValue = if (expanded) 60.dp else 0.dp,
+        animationSpec = TweenSpec(durationMillis = 300),
+        label = "앱바 코너"
+    )
+
+    val animatedHeight by animateDpAsState(
+        targetValue = if (expanded) 180.dp else 60.dp,
+        animationSpec = TweenSpec(durationMillis = 300),
+        label = "앱바 크기"
+    )
+
+    Card(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(animatedHeight),
+        elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
+        colors = CardDefaults.cardColors(containerColor = color),
+        shape = RoundedCornerShape(bottomEnd = cornerRadius)
+
+    ) {
+        AnimatedVisibility(
+            visible = expanded,
+            enter = fadeIn() + slideInVertically(
+                initialOffsetY = {
+                    -it
+                }
+            ), exit = fadeOut() + slideOutVertically(
+                targetOffsetY = {
+                    -it
+                }
+            )
+        ) {
+            Row(
+                modifier = modifier
+                    .fillMaxWidth()
+                    .fillMaxHeight()
+                    .clickable { if (expanded) onclick() },
+                horizontalArrangement = Arrangement.Center,
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Icon(
+                    modifier = Modifier
+                        .fillMaxHeight()
+                        .padding(vertical = 16.dp)
+                        .aspectRatio(1f),
+                    painter = painterResource(id = leftIcon),
+                    contentDescription = "로고",
+                    tint = Color.Unspecified
+                )
+                content()
+            }
+        }
+
+        AnimatedVisibility(
+            visible = expanded.not(),
+            enter = fadeIn() + slideInVertically(
+                initialOffsetY = {
+                    -it
+                }
+            ), exit = fadeOut() + slideOutVertically(
+                targetOffsetY = {
+                    -it
+                }
+            )
+        ) {
+            Column(
+                modifier = modifier.fillMaxSize(),
+                verticalArrangement = Arrangement.Center,
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Spacer(
+                    modifier = modifier
+                        .weight(1f)
+                )
+                Text(
+                    modifier = modifier,
+                    textAlign = TextAlign.Center,
+                    text = title,
+                    style = AppBarTypography.titleSmall
+                )
+                Spacer(
+                    modifier = modifier
+                        .weight(1f)
+                )
+            }
+        }
+    }
+}

android/core/designsystem/src/main/java/com/sixkids/designsystem/component/appbar/UlbanDefaultAppBar.kt

@@ -0,0 +1,40 @@
+package com.sixkids.designsystem.component.appbar
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import com.sixkids.designsystem.theme.AppBarTypography
+
+@Composable
+fun UlbanDefaultAppBar(
+    modifier: Modifier = Modifier,
+    @DrawableRes leftIcon: Int,
+    title: String,
+    content: String,
+    color: Color,
+    expanded: Boolean = true,
+    onclick: () -> Unit,
+) {
+    BasicAppBar(
+        modifier = modifier,
+        leftIcon = leftIcon,
+        title = title,
+        content = {
+            Row(modifier = Modifier.fillMaxWidth()) {
+                Spacer(modifier = Modifier.weight(1f))
+                Text(
+                    text = content, style = AppBarTypography.titleLarge,
+                )
+                Spacer(modifier = Modifier.weight(3f))
+            }
+        },
+        color = color,
+        expanded = expanded,
+        onclick = onclick
+    )
+}