Merge pull request #8 from NOW-SOPT-ANDROID/feat/week2_compose

feat/#6: week2 compose 과제 구현

app/build.gradle

@@ -35,6 +35,7 @@ android {
     }
     buildFeatures {
         compose true
+        viewBinding true
     }
     composeOptions {
         kotlinCompilerExtensionVersion '1.5.1'
@@ -55,6 +56,12 @@ dependencies {
     implementation 'androidx.compose.ui:ui-graphics'
     implementation 'androidx.compose.ui:ui-tooling-preview'
     implementation 'androidx.compose.material3:material3'
+    implementation 'androidx.appcompat:appcompat:1.6.1'
+    implementation 'com.google.android.material:material:1.11.0'
+    implementation 'androidx.activity:activity:1.8.0'
+    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
+    implementation 'androidx.navigation:navigation-fragment-ktx:2.7.7'
+    implementation 'androidx.navigation:navigation-ui-ktx:2.7.7'
     testImplementation 'junit:junit:4.13.2'
     androidTestImplementation 'androidx.test.ext:junit:1.1.5'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'

app/src/main/java/com/sopt/now/compose/BottomNavigationItem.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
+)

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

@@ -0,0 +1,106 @@
+package com.sopt.now.compose
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.runtime.Composable
+import com.sopt.now.compose.item.FriendItem
+import com.sopt.now.compose.item.Profile
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import com.sopt.now.compose.item.UserItem
+import com.sopt.now.compose.ui.theme.NOWSOPTAndroidTheme
+
+@Composable
+fun HomeView() {
+    LazyColumn(
+        modifier = Modifier.fillMaxSize()
+    ) {
+        item {
+            UserItem(friendList.first())
+        }
+
+        // 첫 번째 요소는 건너뛰고 적용
+        itemsIndexed(friendList) { index, profile ->
+            if (index > 0) {
+                FriendItem(profile)
+            }
+        }
+    }
+}
+
+val friendList = listOf(
+    Profile(
+        userProfile = R.drawable.iv_user_profile,
+        userName = "박유진",
+        userDescription = "안녕하세요~!!"
+    ),
+    Profile(
+        userProfile = R.drawable.iv_friend_profile,
+        userName = "AAA",
+        userDescription = "AAA님의 한 줄 소개"
+    ),
+    Profile(
+        userProfile = R.drawable.iv_friend_profile,
+        userName = "BBB",
+        userDescription = "BBB님의 한 줄 소개"
+    ),
+    Profile(
+        userProfile = R.drawable.iv_friend_profile,
+        userName = "CCC",
+        userDescription = "CCC님의 한 줄 소개"
+    ),
+    Profile(
+        userProfile = R.drawable.iv_friend_profile,
+        userName = "DDD",
+        userDescription = "DDD님의 한 줄 소개"
+    ),
+    Profile(
+        userProfile = R.drawable.iv_friend_profile,
+        userName = "EEE",
+        userDescription = "EEE님의 한 줄 소개"
+    ),
+    Profile(
+        userProfile = R.drawable.iv_friend_profile,
+        userName = "FFF",
+        userDescription = "FFF님의 한 줄 소개"
+    ),
+    Profile(
+        userProfile = R.drawable.iv_friend_profile,
+        userName = "GGG",
+        userDescription = "GGG님의 한 줄 소개"
+    ),
+    Profile(
+        userProfile = R.drawable.iv_friend_profile,
+        userName = "HHH",
+        userDescription = "HHH님의 한 줄 소개"
+    ),
+    Profile(
+        userProfile = R.drawable.iv_friend_profile,
+        userName = "III",
+        userDescription = "III님의 한 줄 소개"
+    ),
+    Profile(
+        userProfile = R.drawable.iv_friend_profile,
+        userName = "JJJ",
+        userDescription = "JJJ님의 한 줄 소개"
+    ),
+    Profile(
+        userProfile = R.drawable.iv_friend_profile,
+        userName = "KKK",
+        userDescription = "KKK님의 한 줄 소개"
+    ),
+    Profile(
+        userProfile = R.drawable.iv_friend_profile,
+        userName = "LLL",
+        userDescription = "LLL님의 한 줄 소개"
+    )
+)
+
+@Preview(showBackground = true)
+@Composable
+fun HomePreview() {
+    NOWSOPTAndroidTheme {
+        HomeView()
+    }
+}

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

@@ -6,12 +6,7 @@ import android.os.Bundle
 import android.widget.Toast
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.foundation.layout.Column
-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.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Button
@@ -28,9 +23,11 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -49,113 +46,147 @@ class LoginActivity : ComponentActivity() {
                     val userId = intent.getStringExtra("userId").toString()
                     val userPw = intent.getStringExtra("userPw").toString()
                     val userName = intent.getStringExtra("userName").toString()
-                    val userMbti = intent.getStringExtra("userMbti").toString()
+                    val userDescription = intent.getStringExtra("userDescription").toString()
 
-                    LoginCompose(userId, userPw, userName ,userMbti)
+                    LoginView(userId, userPw, userName ,userDescription)
                 }
             }
         }
     }
 }
 
 @Composable
-fun LoginCompose(userId: String, userPw: String, userName: String, userMbti: String) {
+fun LoginView(
+    userId: String,
+    userPw: String,
+    userName: String,
+    userDescription: String
+) {
     val context = LocalContext.current
     var inputId by remember { mutableStateOf("") }
     var inputPw by remember { mutableStateOf("") }
 
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .padding(horizontal = 30.dp),
+            .padding(horizontal = 30.dp, vertical = 60.dp),
     ) {
-        Spacer(modifier = Modifier.height(60.dp))
         Text(
-            text = "Welcom To SOPT",
+            text = stringResource(id = R.string.title_login),
             fontSize = 30.sp,
             fontWeight = FontWeight.Bold,
             textAlign = TextAlign.Center,
             modifier = Modifier.fillMaxWidth()
         )
         Spacer(modifier = Modifier.height(60.dp))
-        Text(
-            text = "ID",
-            fontSize = 20.sp,
-            fontWeight = FontWeight.Bold,
-            textAlign = TextAlign.Start
+        LoginInputField(
+            label = stringResource(id = R.string.tv_id),
+            inputData = inputId,
+            isPassword = false
+        ) { inputId = it }
+        Spacer(modifier = Modifier.height(60.dp))
+        LoginInputField(
+            label = stringResource(id = R.string.tv_pw),
+            inputData = inputPw,
+            isPassword = true
+        ) { inputPw = it }
+        Spacer(modifier = Modifier.weight(2f))
+        LoginButton(
+            text = stringResource(id = R.string.btn_login),
+            onClick = {
+                checkLogin(context, userId, userPw, userName, userDescription, inputId, inputPw)
+            }
         )
         Spacer(modifier = Modifier.height(10.dp))
-        TextField(
-            value = inputId,
-            onValueChange = { inputId = it },
-            modifier = Modifier.fillMaxWidth(),
-            label = { Text("아이디를 입력하세요.") },
-            singleLine = true, //단일 줄로 제한
-        )
-        Spacer(modifier = Modifier.height(30.dp))
+        LoginButton(
+            stringResource(id = R.string.btn_sign_up)) {
+            Intent(context, SignUpActivity::class.java).apply {
+                context.startActivity(this)
+            }
+        }
+    }
+}
+
+@Composable
+fun LoginInputField(
+    label: String,
+    inputData: String,
+    isPassword: Boolean,
+    onValueChange: (String) -> Unit
+) {
+    Column(
+        modifier = Modifier.fillMaxWidth()
+    ) {
         Text(
-            text = "비밀번호",
+            text = label,
             fontSize = 20.sp,
             fontWeight = FontWeight.Bold,
             textAlign = TextAlign.Start
         )
         Spacer(modifier = Modifier.height(10.dp))
         TextField(
-            value = inputPw,
-            onValueChange = { inputPw = it },
+            value = inputData,
+            onValueChange = onValueChange,
             modifier = Modifier.fillMaxWidth(),
-            label = { Text("비밀번호를 입력하세요.") },
-            singleLine = true, //단일 줄로 제한
-            visualTransformation = PasswordVisualTransformation(), // 비밀번호 마스킹 처리
-            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
+            label = { Text(label) },
+            singleLine = true,
+            visualTransformation =
+            if (isPassword)
+                PasswordVisualTransformation()
+            else VisualTransformation.None,
+            keyboardOptions =
+            if (isPassword)
+                KeyboardOptions(keyboardType = KeyboardType.Password)
+            else KeyboardOptions.Default
         )
-        Spacer(modifier = Modifier.weight(2f))
-        Button(
-            onClick = {
-                // 로그인
-                if(userId == inputId && userPw == inputPw){
-                    moveToMain(context, userId, userPw, userName ,userMbti)
-                }
-            },
-            colors = ButtonDefaults.buttonColors(containerColor = Color.Black),
-            shape = RoundedCornerShape(50.dp),
-            modifier = Modifier.fillMaxWidth()
-        ) {
-            Text("로그인", color = Color.White)
-        }
-        Spacer(modifier = Modifier.height(10.dp))
-        Button(
-            onClick = {
-                // 회원가입 페이지로 이동
-                val intent = Intent(context, SignUpActivity::class.java)
-                context.startActivity(intent)
-            },
-            colors = ButtonDefaults.buttonColors(containerColor = Color.Black),
-            shape = RoundedCornerShape(50.dp),
-            modifier = Modifier.fillMaxWidth()
-        ) {
-            Text("회원가입", color = Color.White)
-        }
-        Spacer(modifier = Modifier.padding(bottom = 60.dp))
+    }
+}
+@Composable
+fun LoginButton(text: String, onClick: () -> Unit) {
+    Button(
+        onClick = onClick,
+        colors = ButtonDefaults.buttonColors(containerColor = Color.Black),
+        shape = RoundedCornerShape(50.dp),
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        Text(text, color = Color.White)
+    }
+}
+
+private fun checkLogin(
+    context: Context,
+    userId: String,
+    userPw: String,
+    userName: String,
+    userDescription: String,
+    inputId: String,
+    inputPw: String
+) {
+    if (userId == inputId && userPw == inputPw) {
+        moveToMain(context, userId, userPw, userName, userDescription)
     }
 }
 
-// 메인 페이지로 이동
-private fun moveToMain(context: Context, userId: String, userPw: String, userName: String, userMbti: String) {
-    val intent = Intent(context, MainActivity::class.java).apply {
+private fun moveToMain(
+    context: Context,
+    userId: String,
+    userPw: String,
+    userName: String,
+    userDescription: String
+) {
+    Intent(context, MainActivity::class.java).apply {
         putExtra("userId", userId)
         putExtra("userPw", userPw)
         putExtra("userName", userName)
-        putExtra("userMbti", userMbti)
+        putExtra("userDescription", userDescription)
     }
-    context.startActivity(intent)
     Toast.makeText(context, "로그인 성공!", Toast.LENGTH_SHORT).show()
 }
 
 @Preview(showBackground = true)
 @Composable
 fun LoginPreview() {
     NOWSOPTAndroidTheme {
-        LoginCompose("","","","")
+        LoginView("","","","")
     }
 }