feat: #6 HomeFragment UI 구현

app/src/main/java/com/sopt/now/compose/HomeActivity.kt

@@ -106,7 +106,10 @@ class HomeActivity: ComponentActivity() {
                 verticalArrangement = Arrangement.spacedBy(16.dp)
             ) {
                 when(selectedItem) {
-                    0 -> HomeFragment()
+                    0 -> HomeFragment(
+                        intent.getStringExtra("nickname"),
+                        intent.getStringExtra("mbti")
+                    )
                     1 -> SearchFragment()
                     2 -> MypageFragment(
                         intent.getStringExtra("id"),

app/src/main/java/com/sopt/now/compose/HomeFragment.kt

@@ -1,9 +1,44 @@
 package com.sopt.now.compose
 
+import android.provider.ContactsContract.CommonDataKinds.Nickname
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 
 @Composable
-fun HomeFragment(){
-    Text("HOME")
+fun HomeFragment(nickname: String?, mbti: String?){
+    val homeViewModel = HomeViewModel()
+    val friendsList = homeViewModel.getFriendsData()
+
+    LazyColumn {
+        item {
+            nickname?.let {
+                mbti?.let { it1 ->
+                    UserItem(
+                        painter = R.drawable.ic_launcher_foreground,
+                        contentDescription = "User Profile Image",
+                        imageSize = 70.dp,
+                        nickname = it,
+                        mbti = it1,
+                        fontSize = 24.sp
+                    )
+                }
+            }
+        }
+
+        items(friendsList) {friendsList ->
+            UserItem(
+                painter = friendsList.profileImage,
+                contentDescription = "Friends profile image",
+                imageSize = 50.dp,
+                nickname = friendsList.nickname,
+                mbti = friendsList.mbti,
+                fontSize = 18.sp
+            )
+
+        }
+    }
 }

app/src/main/java/com/sopt/now/compose/HomeViewModel.kt

@@ -0,0 +1,148 @@
+package com.sopt.now.compose
+
+class HomeViewModel {
+    private val mockFriendList = listOf<User> (
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "곽의진",
+            mbti = "ENFP"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "주효은",
+            mbti = "INFP"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "이연진",
+            mbti = "ESFJ"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "이가을",
+            mbti = "INFP"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "배지현",
+            mbti = "ESFJ"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "최준서",
+            mbti = "ENTJ"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "김언지",
+            mbti = "ISTJ"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "손민재",
+            mbti = "ESFP"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "박동민",
+            mbti = "ESTP"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "공세영",
+            mbti = "INTJ"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "김명석",
+            mbti = "ENFP"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "윤서희",
+            mbti = "ESFP"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "이나경",
+            mbti = "ENTJ"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "박유진",
+            mbti = "ISTP"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "우상욱",
+            mbti = "INFP"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "송혜음",
+            mbti = "ISFJ"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "이유빈",
+            mbti = "ENFP"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "김아린",
+            mbti = "INTJ"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "배찬우",
+            mbti = "INFP"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "김윤서",
+            mbti = "ESFJ"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "송혜음",
+            mbti = "ISFJ"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "신민석",
+            mbti = "ISFP"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "임하늘",
+            mbti = "INTP"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "유정현",
+            mbti = "ESTJ"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "이석찬",
+            mbti = "ISFJ"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "이석준",
+            mbti = "ISFP"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "강문수",
+            mbti = "ISTJ"
+        ),
+        User(
+            profileImage = R.drawable.ic_launcher_foreground,
+            nickname = "이현진",
+            mbti = "ENTJ"
+        )
+    )
+
+    fun getFriendsData(): List<User> = mockFriendList
+}

app/src/main/java/com/sopt/now/compose/User.kt

@@ -0,0 +1,9 @@
+package com.sopt.now.compose
+
+import androidx.annotation.DrawableRes
+
+data class User(
+    @DrawableRes val profileImage: Int,
+    val nickname: String,
+    val mbti: String
+)

app/src/main/java/com/sopt/now/compose/UserItem.kt

@@ -0,0 +1,61 @@
+package com.sopt.now.compose
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun UserItem(
+    painter: Int,
+    contentDescription: String,
+    imageSize: Dp,
+    nickname: String,
+    mbti: String,
+    fontSize: TextUnit
+) {
+    Row (
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 10.dp),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Image(
+            painter = painterResource(id = painter),
+            contentDescription = contentDescription,
+            Modifier
+                .width(imageSize)
+                .height(imageSize)
+                .background(color = Color(0xFF209672))
+        )
+
+        Text(
+            text = nickname,
+            fontSize = fontSize,
+            fontWeight = FontWeight.Bold,
+            modifier = Modifier.padding(start = 30.dp)
+        )
+
+        Text(
+            text = mbti,
+            fontSize = fontSize,
+            modifier = Modifier.padding(start = 160.dp))
+
+    }
+}