Merge pull request #79 from snuhcs-course/refactor/top-bar

Use `MyAppTopBar`
snuhcs-course · Dec 6, 2023 · e8e78a4 · e8e78a4
2 parents d22bb56 + 97988c0
commit e8e78a4
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 139 deletions.
diff --git a/frontend/app/src/main/java/com/example/frontend/MeetupListUI.kt b/frontend/app/src/main/java/com/example/frontend/MeetupListUI.kt
@@ -5,25 +5,37 @@ import android.content.Intent
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
-import androidx.compose.ui.Modifier
-import com.example.frontend.ui.theme.FrontendTheme
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.*
+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.fillMaxSize
+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.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material3.*
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Person
-import androidx.compose.material.icons.filled.Place
 import androidx.compose.material.icons.filled.DateRange
 import androidx.compose.material.icons.filled.Menu
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.material.icons.filled.Place
 import androidx.compose.material.icons.outlined.KeyboardArrowLeft
-import androidx.compose.runtime.*
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.TextStyle
@@ -34,6 +46,8 @@ import androidx.compose.ui.unit.sp
 import com.example.frontend.data.defaultMeetups
 import com.example.frontend.model.MeetupModel
 import com.example.frontend.ui.component.LoadingIndicator
+import com.example.frontend.ui.component.MyTopAppBar
+import com.example.frontend.ui.theme.FrontendTheme
 import com.example.frontend.usecase.ListMeetUpUseCase
 
 
@@ -58,39 +72,8 @@ class MeetupListUI : ComponentActivity() {
                         .fillMaxWidth()
                         .background(color = Color(0xFFF3EDF7))
                 )
-                Row(
-                    modifier = Modifier
-                        .height(54.dp)
-                        .fillMaxWidth(),
-                    verticalAlignment = Alignment.CenterVertically
-                ) {
-                    Icon(
-                        imageVector = Icons.Outlined.KeyboardArrowLeft,
-                        contentDescription = null,
-                        modifier = Modifier
-                            .size(46.dp)
-                            .clickable {
-                                val nextIntent = Intent(context, MapActivity::class.java)
-                                context.startActivity(nextIntent)
-                                // finish current activity
-                                if (context is Activity) {
-                                    context.finish()
-                                }
-                            }
-                    )
-                    Spacer(modifier = Modifier.width(8.dp))
-
-                    Text(
-                        modifier = Modifier,
-                        text = "약속 목록",
-                        style = TextStyle(
-                            fontSize = 22.sp,
-                            lineHeight = 28.sp,
-                            fontWeight = FontWeight(400),
-                            color = Color(0xFF1D1B20)
-                        )
-                    )
-                }
+                MyTopAppBar(title = "약속 목록")
+
                 // A surface container using the 'background' color from the theme
                 Surface(
                     modifier = Modifier.padding(top = 54.dp),

diff --git a/frontend/app/src/main/java/com/example/frontend/MissionActivity.kt b/frontend/app/src/main/java/com/example/frontend/MissionActivity.kt
@@ -1,8 +1,6 @@
 package com.example.frontend
 
 
-import android.app.Activity
-import android.content.Intent
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
@@ -21,7 +19,6 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.CheckCircle
-import androidx.compose.material.icons.outlined.KeyboardArrowLeft
 import androidx.compose.material3.Button
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
@@ -47,6 +44,7 @@ import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.Dialog
 import com.example.frontend.data.defaultMissions
 import com.example.frontend.model.MissionModel
+import com.example.frontend.ui.component.MyTopAppBar
 import com.example.frontend.ui.theme.FrontendTheme
 import com.example.frontend.ui.theme.Purple40
 import com.example.frontend.usecase.ListMissionUseCase
@@ -85,38 +83,8 @@ fun ShowMissionUI(missions: List<MissionModel>, onSwitchToRegister: () -> Unit)
                 .fillMaxWidth()
                 .background(color = Color(0xFFF3EDF7))
         )
-        Row(
-            modifier = Modifier
-                .height(54.dp)
-                .fillMaxWidth(),
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            Icon(
-                imageVector = Icons.Outlined.KeyboardArrowLeft,
-                contentDescription = null,
-                modifier = Modifier
-                    .size(46.dp)
-                    .clickable {
-                        val nextIntent = Intent(context, MapActivity::class.java)
-                        context.startActivity(nextIntent)
-                        if (context is Activity) {
-                            context.finish()
-                        }
-                    }
-            )
-            Spacer(modifier = Modifier.width(8.dp))
+        MyTopAppBar(title = "달성 목록")
 
-            Text(
-                modifier = Modifier,
-                text = "달성 목록",
-                style = TextStyle(
-                    fontSize = 22.sp,
-                    lineHeight = 28.sp,
-                    fontWeight = FontWeight(400),
-                    color = Color(0xFF1D1B20)
-                )
-            )
-        }
         if (missions.isEmpty()) {
             Spacer(modifier = Modifier.height(16.dp))
             CircularProgressIndicator(
@@ -336,4 +304,4 @@ fun GridItems(
             Spacer(modifier = Modifier.height(16.dp))
         }
     }
-}
+}
diff --git a/frontend/app/src/main/java/com/example/frontend/ui/component/MyTopAppBar.kt b/frontend/app/src/main/java/com/example/frontend/ui/component/MyTopAppBar.kt
@@ -1,9 +1,10 @@
 package com.example.frontend.ui.component
 
 import android.app.Activity
-import android.content.Intent
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material.icons.filled.Menu
 import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
@@ -15,12 +16,15 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.style.TextOverflow
-import com.example.frontend.MapActivity
+import androidx.compose.ui.tooling.preview.Preview
 import com.example.frontend.ui.theme.LightPurple
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun MyTopAppBar(title: String) {
+fun MyTopAppBar(
+    title: String,
+    actions: @Composable RowScope.() -> Unit = {},
+) {
     val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
     val context = LocalContext.current
 
@@ -38,8 +42,6 @@ fun MyTopAppBar(title: String) {
         },
         navigationIcon = {
             IconButton(onClick = {
-                val nextIntent = Intent(context, MapActivity::class.java)
-                context.startActivity(nextIntent)
                 if (context is Activity) {
                     context.finish()
                 }
@@ -51,6 +53,22 @@ fun MyTopAppBar(title: String) {
             }
         },
         scrollBehavior = scrollBehavior,
+        actions = actions,
     )
+}
 
-}
+@Preview
+@Composable
+private fun PreviewMyTopAppBar() {
+    MyTopAppBar(
+        title = "Meetup",
+        actions = {
+            IconButton(onClick = {}) {
+                Icon(
+                    imageVector = Icons.Filled.Menu,
+                    contentDescription = "Localized description"
+                )
+            }
+        }
+    )
+}
diff --git a/frontend/app/src/main/java/com/example/frontend/ui/settings/UserInfoActivity.kt b/frontend/app/src/main/java/com/example/frontend/ui/settings/UserInfoActivity.kt
@@ -24,11 +24,11 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.AccountCircle
 import androidx.compose.material.icons.outlined.AddCircle
-import androidx.compose.material.icons.outlined.KeyboardArrowLeft
 import androidx.compose.material.icons.outlined.Settings
 import androidx.compose.material3.Button
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
@@ -50,11 +50,11 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.Dialog
-import com.example.frontend.MapActivity
 import com.example.frontend.MissionActivity
 import com.example.frontend.data.predefinedImages
 import com.example.frontend.repository.UserContextRepository
 import com.example.frontend.ui.component.CustomButton
+import com.example.frontend.ui.component.MyTopAppBar
 import com.example.frontend.ui.login.LoginActivity
 import com.example.frontend.ui.settings.component.MissionCard
 import com.example.frontend.ui.theme.FrontendTheme
@@ -81,7 +81,7 @@ class UserInfoActivity : ComponentActivity() {
 fun UserInfoUI(name: String, modifier: Modifier = Modifier) {
     var context = LocalContext.current
     var selectedPredefinedImage by rememberSaveable { mutableStateOf(0) }
-    selectedPredefinedImage = UserContextRepository.ofContext(context).getSelectedPredefinedImage()?:0
+    selectedPredefinedImage = UserContextRepository.ofContext(context).getSelectedPredefinedImage() ?: 0
     var showDialog by rememberSaveable { mutableStateOf(false) }
 
     val currentUserName = UserContextRepository.ofContext(context).getUserName() ?: "DefaultName"
@@ -114,60 +114,20 @@ fun UserInfoUI(name: String, modifier: Modifier = Modifier) {
             .fillMaxSize()
 
     ) {
-        Spacer(
-            modifier = Modifier
-                .fillMaxWidth()
-                .height(60.dp)
-                .background(color = Color(0xFFF3EDF7))
-
+        MyTopAppBar(
+            title = "내 정보",
+            actions = {
+                IconButton(onClick = { showDialog = true }) {
+                    Icon(
+                        imageVector = Icons.Outlined.Settings,
+                        contentDescription = null,
+                    )
+                }
+            }
         )
-        Row(
-            modifier = Modifier
-                .height(54.dp)
-                .fillMaxWidth(),
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            Icon(
-                imageVector = Icons.Outlined.KeyboardArrowLeft,
-                contentDescription = null,
-                modifier = Modifier
-                    .size(46.dp)
-                    .clickable {
-                        val nextIntent = Intent(context, MapActivity::class.java)
-                        context.startActivity(nextIntent)
-                        // finish current activity
-                        if (context is Activity) {
-                            context.finish()
-                        }
-                    }
-            )
-            Spacer(modifier = Modifier.width(8.dp))
-
-
-            Text(
-                modifier = Modifier,
-
-                text = "내 정보",
-                style = TextStyle(
-                    fontSize = 22.sp,
-                    lineHeight = 28.sp,
-                    fontWeight = FontWeight(400),
-                    color = Color(0xFF1D1B20)
-                )
-            )
-            Spacer(modifier = Modifier.weight(0.4f))
-            Icon(
-                imageVector = Icons.Outlined.Settings,
-                contentDescription = null,
-                modifier = Modifier
-                    .size(40.dp)
-                    .clickable {
-                        showDialog = true
-                    }
-            )
-        }
 
         Spacer(modifier = Modifier.height(20.dp))
+
         Column(
             modifier = Modifier
                 .fillMaxSize()
@@ -176,7 +136,6 @@ fun UserInfoUI(name: String, modifier: Modifier = Modifier) {
                 .padding(end = 30.dp)
 
         ) {
-
             if (selectedPredefinedImage != 0) {
                 selectedPredefinedImage.let { image ->
                     Image(