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

[2주차/필수] Android UI 구현 심화 - Compose #6

app/src/main/AndroidManifest.xml

@@ -28,18 +28,12 @@
             android:exported="false"
             android:label="@string/app_name"
             android:theme="@style/Theme.NOWSOPTAndroid">
-            <intent-filter>
-                <category android:name="android.intent.category.LAUNCHER" />
-            </intent-filter>
         </activity>
         <activity
             android:name=".SignupActivity"
             android:exported="false"
             android:label="@string/app_name"
             android:theme="@style/Theme.NOWSOPTAndroid">
-            <intent-filter>
-                <category android:name="android.intent.category.LAUNCHER" />
-            </intent-filter>
         </activity>
     </application>
 

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

@@ -0,0 +1,38 @@
+package com.sopt.now.compose
+
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun HomeScreen(nickname: String?, mbti: String?) {
+    val homeViewModel = HomeViewModel()
+    val friendsList = homeViewModel.getFriendsData()
+
+    LazyColumn {
+        item {
+            UserItem(
+                painter = R.drawable.ic_launcher_foreground,
+                contentDescription = "User Profile Image",
+                imageSize = 70.dp,
+                nickname = nickname ?: "닉네임",
+                mbti = mbti ?: "mbti",
+                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/LoginActivity.kt

@@ -28,6 +28,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight.Companion.Bold
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
@@ -36,22 +37,26 @@ 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.sp
+import com.sopt.now.compose.data.Key.ID
+import com.sopt.now.compose.data.Key.MBTI
+import com.sopt.now.compose.data.Key.NICKNAME
+import com.sopt.now.compose.data.Key.PW
 import com.sopt.now.compose.ui.theme.NOWSOPTAndroidTheme
 
 class LoginActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
             NOWSOPTAndroidTheme {
-                Surface (
+                Surface(
                     modifier = Modifier.fillMaxSize(),
                     color = MaterialTheme.colorScheme.background
                 ) {
                     Login(
-                        signupId = intent.getStringExtra("id"),
-                        signupPw = intent.getStringExtra("pw"),
-                        nickname = intent.getStringExtra("nickname"),
-                        mbti = intent.getStringExtra("mbti")
+                        signupId = intent.getStringExtra(ID),
+                        signupPw = intent.getStringExtra(PW),
+                        nickname = intent.getStringExtra(NICKNAME),
+                        mbti = intent.getStringExtra(MBTI)
                     )
                 }
             }
@@ -60,29 +65,29 @@ class LoginActivity : ComponentActivity() {
 }
 
 @Composable
-fun Login(signupId : String?, signupPw : String?, nickname : String?, mbti : String?) {
+fun Login(signupId: String?, signupPw: String?, nickname: String?, mbti: String?) {
     val context = LocalContext.current
     var id by remember { mutableStateOf("") }
     var pw by remember { mutableStateOf("") }
 
     var shouldShowPassword by remember {
         mutableStateOf(false)
     }
-    val passwordResource : (Boolean) -> Int = {
-        if(it) {
+    val passwordResource: (Boolean) -> Int = {
+        if (it) {
             R.drawable.ic_baseline_visibility_white_24
         } else {
             R.drawable.ic_baseline_visibility_off_white_24
         }
     }
 
-    Column (
+    Column(
         modifier = Modifier
             .padding(horizontal = 70.dp)
             .fillMaxWidth()
     ) {
         Text(
-            text = "Welcome To SOPT",
+            text = stringResource(id = R.string.tv_login_title),
             fontSize = 30.sp,
             fontWeight = Bold,
             textAlign = TextAlign.Center,
@@ -91,7 +96,7 @@ fun Login(signupId : String?, signupPw : String?, nickname : String?, mbti : Str
                 .padding(top = 70.dp)
         )
         Text(
-            text = "ID",
+            text = stringResource(id = R.string.tv_login_id),
             fontSize = 20.sp,
             fontWeight = Bold,
             textAlign = TextAlign.Start,
@@ -107,10 +112,10 @@ fun Login(signupId : String?, signupPw : String?, nickname : String?, mbti : Str
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(top = 10.dp),
-            label = {Text("아이디를 입력해주세요")}
+            label = { Text(stringResource(id = R.string.et_login_id_hint)) }
         )
         Text(
-            text = "비밀번호",
+            text = stringResource(id = R.string.tv_login_pw),
             fontSize = 20.sp,
             fontWeight = Bold,
             textAlign = TextAlign.Start,
@@ -128,33 +133,35 @@ fun Login(signupId : String?, signupPw : String?, nickname : String?, mbti : Str
                 .padding(top = 10.dp),
             keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
             visualTransformation = if (shouldShowPassword) VisualTransformation.None
-                                   else PasswordVisualTransformation(),
-            label = {Text("비밀번호를 입력해주세요")},
+            else PasswordVisualTransformation(),
+            label = { Text(stringResource(id = R.string.et_login_pw_hint)) },
             trailingIcon = {
                 IconButton(onClick = {
                     shouldShowPassword = !shouldShowPassword
                 }) {
-                    Icon(painter = painterResource(
-                        id = passwordResource(shouldShowPassword)),
+                    Icon(
+                        painter = painterResource(
+                            id = passwordResource(shouldShowPassword)
+                        ),
                         contentDescription = null
                     )
                 }
             }
         )
         Button(
             onClick = {
-                if(id == signupId && pw == signupPw) {
-                    Toast.makeText(context, "로그인에 성공했습니다.", Toast.LENGTH_SHORT).show()
+                if (id == signupId && pw == signupPw) {
+                    Toast.makeText(context, R.string.login_success, Toast.LENGTH_SHORT).show()
                     Intent(context, MainActivity::class.java).apply {
-                        putExtra("id", id)
-                        putExtra("pw", pw)
-                        putExtra("nickname", nickname)
-                        putExtra("mbti", mbti)
+                        putExtra(ID, id)
+                        putExtra(PW, pw)
+                        putExtra(NICKNAME, nickname)
+                        putExtra(MBTI, mbti)
                         context.startActivity(this)
                     }
 
                 } else {
-                    Toast.makeText(context, "아이디와 비밀번호가 일치하지 않습니다.", Toast.LENGTH_SHORT).show()
+                    Toast.makeText(context, R.string.login_fail, Toast.LENGTH_SHORT).show()
                 }
             },
             colors = ButtonDefaults.buttonColors(
@@ -164,7 +171,7 @@ fun Login(signupId : String?, signupPw : String?, nickname : String?, mbti : Str
                 .fillMaxWidth()
                 .padding(top = 20.dp)
         ) {
-            Text(text = "로그인")
+            Text(text = stringResource(id = R.string.btn_login))
         }
         Button(
             onClick = {
@@ -175,13 +182,13 @@ fun Login(signupId : String?, signupPw : String?, nickname : String?, mbti : Str
                 containerColor = Color.Transparent
             ),
             modifier = Modifier.align(Alignment.End)
-            ) {
-            Text(text = "회원가입하기", color = Color.Black)
+        ) {
+            Text(text = stringResource(id = R.string.btn_signup), color = Color.Black)
         }
     }
 }
 
-@Preview (showBackground = true)
+@Preview(showBackground = true)
 @Composable
 fun LoginPreview() {
     Login(null, null, null, null)