FEAT: 홈 화면 앱바 구현

Author: eshc123

core/designsystem/build.gradle.kts

@@ -1,16 +1,13 @@
 plugins {
     alias(libs.plugins.tuk.android.library)
+    alias(libs.plugins.tuk.android.library.compose)
 }
 
 android {
     namespace = "com.plottwist.core.designsystem"
 }
 
 dependencies {
-
-    implementation(libs.core.ktx)
-    implementation(libs.appcompat)
-    implementation(libs.material)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.test.ext.junit)
     androidTestImplementation(libs.espresso.core)

core/designsystem/src/main/java/com/plottwist/core/designsystem/.gitkeep

@@ -0,0 +1,29 @@
+package com.plottwist.core.designsystem.component
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+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.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun TukTopAppBar(
+    modifier: Modifier = Modifier,
+    actionButtons: (@Composable RowScope.() -> Unit)? = null,
+) {
+    Row(
+        modifier = modifier
+            .height(64.dp)
+            .fillMaxWidth()
+            .padding(end = if(actionButtons == null) 20.dp else 12.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Spacer(modifier = Modifier.weight(1f))
+        actionButtons?.invoke(this)
+    }
+}

core/designsystem/src/main/java/com/plottwist/core/designsystem/component/TopAppBar.kt

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="32dp"
+    android:viewportWidth="32"
+    android:viewportHeight="32">
+  <path
+      android:pathData="M15.599,13.667C20.347,13.667 24.197,17.517 24.197,22.265V25.533H22.997V22.265C22.997,18.179 19.685,14.867 15.599,14.867C11.512,14.867 8.199,18.179 8.199,22.265V25.533H7V22.265C7,17.516 10.85,13.667 15.599,13.667ZM16.199,10.866H15V7H16.199V10.866Z"
+      android:fillColor="#1F1F1F"/>
+</vector>

core/designsystem/src/main/res/drawable/ic_mypage.xml

@@ -1,14 +1,16 @@
 package com.plottwist.feature.home
 
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.IconButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.plottwist.core.designsystem.R
+import com.plottwist.core.designsystem.component.TukTopAppBar
 import com.plottwist.core.ui.StableImage
 import org.orbitmvi.orbit.compose.collectAsState
 import org.orbitmvi.orbit.compose.collectSideEffect
@@ -44,14 +46,44 @@ private fun HomeScreen(
     onMyPageClicked: () -> Unit,
     modifier: Modifier = Modifier
 ) {
-    Column(
+    Box(
         modifier = modifier
+    ) {
+        Column (
+            modifier = Modifier.fillMaxSize()
+        ) {
+            TukTopAppBar(
+                actionButtons = {
+                    TopAppBarMyPageButton(
+                        onMyPageClicked = onMyPageClicked
+                    )
+                }
+            )
+        }
+    }
+}
+
+@Composable
+fun TopAppBarMyPageButton(
+    onMyPageClicked: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    IconButton(
+        modifier = modifier,
+        onClick = onMyPageClicked
     ) {
         StableImage(
-            modifier = Modifier
-                .align(Alignment.End)
-                .clickable { onMyPageClicked() },
-            drawableResId = R.drawable.ic_user
+            drawableResId = R.drawable.ic_mypage
         )
     }
 }
+
+@Preview
+@Composable
+fun HomeScreenPreview(modifier: Modifier = Modifier) {
+    HomeScreen(
+        modifier = Modifier.fillMaxSize(),
+        isLoggedIn = false,
+        onMyPageClicked = {}
+    )
+}

core/designsystem/src/main/res/drawable/ic_user.xml

@@ -5,14 +5,16 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import com.plottwist.feature.main.ui.component.TukNavHost
 
 @Composable
 fun TukApp(
     modifier: Modifier = Modifier
 ) {
     Scaffold(
-        modifier = modifier.fillMaxSize()
+        modifier = modifier.fillMaxSize(),
+        containerColor = Color.White
     ) { innerPadding ->
         TukNavHost(
             modifier = Modifier.padding(innerPadding)