feat/#6: 2주차 과제 (통짜 커밋 죄송합니다...)

NOW-SOPT-ANDROID · Apr 16, 2024 · 7902a9f · 7902a9f
1 parent c6afe0d
commit 7902a9f
Show file tree

Hide file tree

Showing 8 changed files with 379 additions and 53 deletions.
diff --git a/app/src/main/java/com/sopt/now/compose/Friend.kt b/app/src/main/java/com/sopt/now/compose/Friend.kt
@@ -0,0 +1,9 @@
+package com.sopt.now.compose
+
+import androidx.compose.ui.graphics.vector.ImageVector
+
+data class Friend(
+    val profileImage: ImageVector,
+    val name: String,
+    val selfDescription: String,
+)
diff --git a/app/src/main/java/com/sopt/now/compose/FriendProfileItem.kt b/app/src/main/java/com/sopt/now/compose/FriendProfileItem.kt
@@ -0,0 +1,50 @@
+package com.sopt.now.compose
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+
+@Composable
+fun FriendProfileItem(friend: Friend) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 10.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Icon(
+            modifier = Modifier.size(50.dp),
+            imageVector = friend.profileImage,
+            contentDescription = null
+        )
+        Spacer(modifier = Modifier.width(10.dp))
+        Text(
+            text = friend.name,
+            fontSize = 14.sp,
+            fontWeight = FontWeight.Bold,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1
+        )
+        Spacer(modifier = Modifier.width(30.dp))
+        Spacer(modifier = Modifier.weight(1f))
+        Text(
+            text = friend.selfDescription,
+            fontSize = 10.sp,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1
+        )
+    }
+}
diff --git a/app/src/main/java/com/sopt/now/compose/HomeUi.kt b/app/src/main/java/com/sopt/now/compose/HomeUi.kt
@@ -0,0 +1,102 @@
+package com.sopt.now.compose
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun HomeUi() {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(horizontal = 10.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        LazyColumn {
+            items(userList) {
+                UserProfileItem(it)
+            }
+            items(friendList) {
+                FriendProfileItem(it)
+            }
+        }
+    }
+}
+val userList = listOf<User>(
+    User(
+        profileImage = Icons.Filled.Person,
+        name = "송혜음",
+        selfDescription = "컴포즈 커피 최고"
+    )
+)
+
+val friendList = listOf<Friend>(
+    Friend(
+        profileImage = Icons.Filled.Person,
+        name = "이의경",
+        selfDescription = "다들 빨리 끝내고 뒤풀이 가고 싶지?"
+    ),
+    Friend(
+        profileImage = Icons.Filled.Person,
+        name = "우상욱",
+        selfDescription = "나보다 안드 잘하는 사람 있으면 나와봐"
+    ),
+    Friend(
+        profileImage = Icons.Filled.Person,
+        name = "배지현",
+        selfDescription = "표정 풀자 ^^"
+    ),
+    Friend(
+        profileImage = Icons.Filled.Person,
+        name = "이의경",
+        selfDescription = "다들 빨리 끝내고 뒤풀이 가고 싶지?"
+    ),
+    Friend(
+        profileImage = Icons.Filled.Person,
+        name = "우상욱",
+        selfDescription = "나보다 안드 잘하는 사람 있으면 나와봐"
+    ),
+    Friend(
+        profileImage = Icons.Filled.Person,
+        name = "배지현",
+        selfDescription = "표정 풀자 ^^"
+    ),
+    Friend(
+        profileImage = Icons.Filled.Person,
+        name = "이의경",
+        selfDescription = "다들 빨리 끝내고 뒤풀이 가고 싶지?"
+    ),
+    Friend(
+        profileImage = Icons.Filled.Person,
+        name = "우상욱",
+        selfDescription = "나보다 안드 잘하는 사람 있으면 나와봐"
+    ),
+    Friend(
+        profileImage = Icons.Filled.Person,
+        name = "배지현",
+        selfDescription = "표정 풀자 ^^"
+    ),
+    Friend(
+        profileImage = Icons.Filled.Person,
+        name = "이의경",
+        selfDescription = "다들 빨리 끝내고 뒤풀이 가고 싶지?"
+    ),
+    Friend(
+        profileImage = Icons.Filled.Person,
+        name = "우상욱",
+        selfDescription = "나보다 안드 잘하는 사람 있으면 나와봐"
+    ),
+    Friend(
+        profileImage = Icons.Filled.Person,
+        name = "배지현",
+        selfDescription = "표정 풀자 ^^"
+    )
+)
diff --git a/app/src/main/java/com/sopt/now/compose/MainActivity.kt b/app/src/main/java/com/sopt/now/compose/MainActivity.kt
@@ -3,20 +3,40 @@ package com.sopt.now.compose
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.foundation.Image
+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.height
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults.topAppBarColors
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+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.painterResource
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -27,75 +47,94 @@ class MainActivity : ComponentActivity() {
         super.onCreate(savedInstanceState)
         setContent {
             NOWSOPTAndroidTheme {
-                // A surface container using the 'background' color from the theme
                 Surface(
                     modifier = Modifier.fillMaxSize(),
                     color = MaterialTheme.colorScheme.background
                 ) {
                     val userId = intent.getStringExtra("userId")
                     val userPw = intent.getStringExtra("userPw")
                     val userNick = intent.getStringExtra("userNick")
-                    MainUI(userId,userPw,userNick)
+                    ScaffoldExample(userId, userPw, userNick)
                 }
             }
         }
     }
 }
-//메인화면
+
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun MainUI(userId: String?="", userPw:String?="", userNick:String?=""){
-    Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .padding(30.dp),
-        horizontalAlignment = Alignment.CenterHorizontally
-    ) {
-        Text(
-            text = stringResource(R.string.app_name),
-            fontSize = 30.sp
-        )
-        Text(
-            text = stringResource(R.string.text_main_title2),
-            fontSize = 20.sp
-        )
-        Spacer(modifier = Modifier.height(50.dp),)
-        Image(
-            painter = painterResource(id = R.drawable.cute),
-            contentDescription = "귀여운 뱁새"
-        )
-        Spacer(modifier = Modifier.height(50.dp),)
-        Text(
-            text = "ID",
-            fontSize = 20.sp
-        )
-        Text(
-            text = "$userId",
-            fontSize = 15.sp
-        )
-        Spacer(modifier = Modifier.height(50.dp),)
-        Text(
-            text = stringResource(R.string.text_pw),
-            fontSize = 20.sp
-        )
-        Text(
-            text = "$userPw",
-            fontSize = 15.sp
-        )
-        Spacer(modifier = Modifier.height(50.dp),)
-        Text(
-            text = stringResource(R.string.text_nick),
-            fontSize = 20.sp
-        )
-        Text(
-            text = "$userNick",
-            fontSize = 15.sp
+fun ScaffoldExample(userId: String? = "", userPw: String? = "", userNick: String? = "") {
+    var selectedItem by remember { mutableIntStateOf(0) }
+    val items = listOf(
+        BottomNavigationItem(
+            icon = Icons.Filled.Home,
+            label = "Home"
+        ),
+        BottomNavigationItem(
+            icon = Icons.Filled.Search,
+            label = "Search"
+        ),
+        BottomNavigationItem(
+            icon = Icons.Filled.Person,
+            label = "Profile"
         )
+    )
+
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                colors = topAppBarColors(
+                    containerColor = MaterialTheme.colorScheme.primaryContainer,
+                    titleContentColor = MaterialTheme.colorScheme.primary,
+                ),
+                title = {
+                    Text(
+                        text = stringResource(R.string.app_name),
+                        fontSize = 30.sp,
+                        fontWeight = FontWeight.Bold
+                    )
+                }
+            )
+        },
+        bottomBar = {
+            NavigationBar {
+                items.forEachIndexed { index, item ->
+                    NavigationBarItem(
+                        icon = { Icon(item.icon, contentDescription = item.label) },
+                        label = { Text(item.label) },
+                        selected = selectedItem == index,
+                        onClick = { selectedItem = index }
+                    )
+                }
+            }
+        },
+    ) { innerPadding ->
+        Column(
+            modifier = Modifier
+                .padding(innerPadding),
+            verticalArrangement = Arrangement.spacedBy(16.dp),
+        ) {
+            when (selectedItem) {
+                0 -> {
+                    HomeUi()
+                }
+
+                1 -> {
+                    Text(text = "Search")
+                }
+
+                2 -> {
+                    ProfileUi(userId, userPw, userNick)
+                }
+            }
+
+        }
     }
 }
 @Preview(showBackground = true)
 @Composable
 fun GreetingPreview() {
     NOWSOPTAndroidTheme {
-        MainUI()
+        ScaffoldExample()
     }
 }
diff --git a/app/src/main/java/com/sopt/now/compose/NavigationData.kt b/app/src/main/java/com/sopt/now/compose/NavigationData.kt
@@ -0,0 +1,8 @@
+package com.sopt.now.compose
+
+import androidx.compose.ui.graphics.vector.ImageVector
+
+data class BottomNavigationItem(
+    val icon: ImageVector,
+    val label: String
+)