4주차 미션/1조 이강준

app/src/main/java/com/example/kuit7_android/MainActivity.kt

@@ -25,8 +25,9 @@ class MainActivity : ComponentActivity() {
             KUIT7_AndroidTheme {
 
                 val navController = rememberNavController()
-
-                Scaffold(
+                /*이 프로그램에서 remembernavcontroller리모컨을 사용할건데 이걸 navcontroller라는 상수에 담아서
+                함수들에게 전달하겠다*/
+                Scaffold(//화면의 표준규격, 내가 만든 bottomnavbar를 bottombar자리에 배치해라
                     modifier = Modifier.fillMaxSize(),
                     bottomBar = {
                         BottomNavBar(navController)

app/src/main/java/com/example/kuit7_android/navigation/BottomNavBar.kt

@@ -1,26 +1,20 @@
 package com.example.kuit7_android.navigation
 
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-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.draw.drawBehind
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.currentBackStackEntryAsState
+import com.example.kuit7_android.ui.components.NavItem
 
 @Composable
 fun BottomNavBar(
@@ -51,29 +45,17 @@ fun BottomNavBar(
 
             val isSelected = currentRoute == tab.route.route
 
-            Column(
-                horizontalAlignment = Alignment.CenterHorizontally,
-                modifier = Modifier
-                    .clickable {
-                        navController.navigate(tab.route.route) {
-                            popUpTo(navController.graph.startDestinationId)
-                            launchSingleTop = true
-                        }
+            NavItem(
+                icon=tab.icon,
+                text=tab.label,
+                isSelected=isSelected,
+                onClick={
+                    navController.navigate(tab.route.route) {
+                        popUpTo(navController.graph.startDestinationId)
+                        launchSingleTop = true
                     }
-            ) {
-                Icon(
-                    painter = painterResource(tab.icon),
-                    contentDescription = tab.label,
-                    tint = if (isSelected) Color(0xFF4E76E7) else Color.Gray,
-                    modifier = Modifier.size(24.dp)
-                )
-
-                Text(
-                    text = tab.label,
-                    fontSize = 12.sp,
-                    color = if (isSelected) Color(0xFF4E76E7) else Color.Gray
-                )
-            }
+                }
+            )
         }
     }
 }

app/src/main/java/com/example/kuit7_android/navigation/MainNavHost.kt

@@ -8,9 +8,14 @@ import androidx.compose.ui.Modifier
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
+import com.example.kuit7_android.ui.contact.Call
+import com.example.kuit7_android.ui.contact.screen.ContactDetailScreen
 
 import com.example.kuit7_android.ui.contact.screen.ContactScreen
+import com.example.kuit7_android.ui.home.Article
+import com.example.kuit7_android.ui.home.screen.HomeDetailScreen
 import com.example.kuit7_android.ui.home.screen.HomeScreen
+import com.example.kuit7_android.ui.profile.screen.ProfileScreen
 
 @Composable
 fun MainNavHost(
@@ -22,12 +27,44 @@ fun MainNavHost(
         startDestination = Route.HOME.route,
         modifier = Modifier.padding(padding)
     ) {
-        composable(Route.HOME.route) {
-            HomeScreen()
+        composable(Route.HOME.route) {//괄호안의 주소를 호출하면 homescreen함수를 그려라
+            HomeScreen(navController = navController)
         }
 
         composable(Route.CONTACT.route) {
-            ContactScreen()
+            ContactScreen(navController = navController)
+        }
+
+        composable(Route.PROFILE.route){
+            ProfileScreen(navController=navController)
+        }
+
+        composable(Route.CONTACT_DETAIL.route) {
+            val call = navController
+                .previousBackStackEntry
+                ?.savedStateHandle      //직렬화 필요
+                ?.get<Call>("call")
+
+            call?.let {
+                ContactDetailScreen(
+                    call = it,
+                    navController = navController
+                )
+            }
+        }
+
+        composable(Route.HOME_DETAIL.route) {
+            val article = navController
+                .previousBackStackEntry //이전 백스택의 savedstatehandle에 저장된 article객체 가져오기
+                ?.savedStateHandle
+                ?.get<Article>("article")
+
+            article?.let {
+                HomeDetailScreen(
+                    article = it,
+                    navController = navController
+                )
+            }
         }
     }
 }

app/src/main/java/com/example/kuit7_android/navigation/NavTab.kt

@@ -17,5 +17,9 @@ enum class NavTab (
         label = "연락처",
         route = Route.CONTACT
     ),
-
+    PROFILE(
+        icon=R.drawable.ic_profile,
+        label="프로필",
+        route=Route.PROFILE
+    )
 }

app/src/main/java/com/example/kuit7_android/navigation/Route.kt

@@ -10,4 +10,16 @@ sealed interface Route {
     data object CONTACT : Route {
         override val route = "contact"
     }
+
+    data object PROFILE : Route {
+        override val route = "profile"
+    }
+
+    data object CONTACT_DETAIL : Route {
+        override val route = "contact_detail"
+    }
+
+    data object HOME_DETAIL : Route {
+        override val route = "home_detail"
+    }
 }

app/src/main/java/com/example/kuit7_android/navigation/launchedeffectdemoscreen.kt

@@ -0,0 +1,49 @@
+package com.example.kuit7_android.navigation
+
+import android.util.Log
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Button
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.sp
+import kotlinx.coroutines.delay
+
+@Composable
+fun LaunchedEffectDemoScreen(
+    modifier:
+    Modifier = Modifier,
+) {
+    var count by remember { mutableIntStateOf(0) }
+    LaunchedEffect(key1 = count){
+        delay(3000L)
+        Log.d("countValue", "$count")
+    }
+    Column(
+        modifier = modifier.fillMaxSize(),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(text = "Current Value : $count", fontSize = 40.sp)
+        Button(
+            onClick = { count++ }
+        ) {
+            Text("Increment Count")
+        }
+    }
+}
+
+@Preview
+@Composable
+fun launchedeffectdemopreview(){
+    LaunchedEffectDemoScreen()
+}

app/src/main/java/com/example/kuit7_android/ui/components/ArticleCard.kt

@@ -0,0 +1,109 @@
+package com.example.kuit7_android.ui.components
+
+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.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.shape.RoundedCornerShape
+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.draw.clip
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import com.example.kuit7_android.R
+import com.example.kuit7_android.ui.home.Article
+import com.example.kuit7_android.ui.theme.KuitTheme
+
+@Composable
+fun ArticleCard(
+    article: Article,
+    modifier: Modifier = Modifier
+) {
+    val imageRes = when (article.newspaper) {
+        "BBC News" -> R.drawable.ic_bbc
+        "CNN" -> R.drawable.ic_cnn
+        "USA Today" -> R.drawable.ic_usa
+        else -> R.drawable.ic_bbc
+    }
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(8.dp)
+    ) {
+        Image(
+            painter = painterResource(article.image),
+            contentDescription = "article image",
+            contentScale = ContentScale.Crop,
+            modifier = Modifier
+                .size(96.dp)
+                .clip(RoundedCornerShape(10.dp))
+        )
+        Spacer(modifier = Modifier.width(4.dp))
+        Column(modifier = Modifier.fillMaxWidth()) {
+            Text(
+                text = article.category,
+                style = KuitTheme.typography.R_12,
+                color = KuitTheme.colors.gray400
+            )
+            Spacer(modifier = Modifier.height(4.dp))
+            Text(
+                text = article.title,
+                style = KuitTheme.typography.R_16,
+                color = KuitTheme.colors.gray900,
+                maxLines = 2,
+                overflow = TextOverflow.Ellipsis,
+            )
+            Spacer(modifier = Modifier.height(4.dp))
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Image(
+                        painter = painterResource(imageRes),
+                        contentDescription = "newspaper",
+                        modifier = Modifier.size(20.dp)
+                    )
+                    Spacer(modifier = Modifier.width(4.dp))
+                    Text(
+                        text = article.newspaper,
+                        style = KuitTheme.typography.B_13,
+                        color = KuitTheme.colors.gray400,
+                    )
+                    Spacer(modifier = Modifier.width(8.dp))
+                    Icon(
+                        painter = painterResource(R.drawable.ic_clock),
+                        contentDescription = "clock",
+                        modifier = Modifier.size(14.dp)
+                    )
+                    Text(
+                        text = article.time,
+                        style = KuitTheme.typography.R_13,
+                        color = KuitTheme.colors.gray400,
+                    )
+                }
+
+                Icon(
+                    painter = painterResource(R.drawable.ic_etc),
+                    contentDescription = "etc",
+                    modifier = Modifier.size(14.dp)
+                )
+            }
+        }
+    }
+}

app/src/main/java/com/example/kuit7_android/ui/components/MainTopBar.kt

@@ -0,0 +1,36 @@
+package com.example.kuit7_android.ui.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.example.kuit7_android.R
+
+@Composable
+fun MainTopBar() {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(56.dp),
+        horizontalArrangement = Arrangement.Center
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.kalar_logo),
+            contentDescription = "logo",
+            tint = Color.Unspecified
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun maintopbarPreview() {
+    MainTopBar()
+}