From 21fdc1b4fe066e9373094724eb7b8324612f8147 Mon Sep 17 00:00:00 2001
From: kanukim97 <angry_ryan@kakao.com>
Date: Mon, 29 Jan 2024 01:06:21 +0900
Subject: [PATCH] [Delete]  - Delete BottomNavBar.kt [Add]  - Add TopAppBar.kt

---
 .idea/appInsightsSettings.xml                 |   8 +-
 .../com/example/whats_eat/MainActivity.kt     |  80 +---------
 .../whats_eat/navigation/NavigationMenu.kt    |  25 ---
 .../whats_eat/navigation/WhatsEatNavHost.kt   |  18 +--
 .../example/designsystem/component/AppBar.kt  | 145 ++++++++++++++++++
 .../designsystem/component/BottomNavBar.kt    |   4 +-
 .../designsystem/component/ImageLoader.kt     |   4 +-
 .../designsystem/component/SnackBar.kt        |   4 +-
 .../example/designsystem/icons/EatIcons.kt    |   6 +-
 .../com/example/designsystem/theme/Theme.kt   |   2 +-
 .../com/example/designsystem/theme/Type.kt    |   2 +-
 .../main/java/com/example/ui/BannerCard.kt    |   4 +-
 .../java/com/example/ui/CollectionCard.kt     |   4 +-
 .../src/main/java/com/example/ui/GridItem.kt  |   4 +-
 .../com/example/ui/PermissionAlertDialog.kt   |  10 +-
 .../src/main/java/com/example/ui/RatingRow.kt |   4 +-
 .../example/collection/CollectionScreen.kt    |  73 ++++-----
 .../navigation/CollectionNavigation.kt        |  15 +-
 .../java/com/example/detail/DetailScreen.kt   |  99 ++++++------
 .../detail/navigation/DetailNavigation.kt     |  15 +-
 .../main/java/com/example/home/HomeScreen.kt  |  56 ++++---
 .../com/example/home/component/HomeBanner.kt  |   6 +-
 .../example/home/component/HomeItemGrid.kt    |   4 +-
 .../example/home/navigation/HomeNavigation.kt |  18 +--
 24 files changed, 331 insertions(+), 279 deletions(-)
 delete mode 100644 app/src/main/java/com/example/whats_eat/navigation/NavigationMenu.kt
 create mode 100644 core/designsystem/src/main/java/com/example/designsystem/component/AppBar.kt

diff --git a/.idea/appInsightsSettings.xml b/.idea/appInsightsSettings.xml
index 1194555..371f2e2 100644
--- a/.idea/appInsightsSettings.xml
+++ b/.idea/appInsightsSettings.xml
@@ -8,10 +8,10 @@
             <InsightsFilterSettings>
               <option name="connection">
                 <ConnectionSetting>
-                  <option name="appId" value="com.example.whats_eat" />
-                  <option name="mobileSdkAppId" value="1:626792811310:android:9a05d099af997cd94f48bf" />
-                  <option name="projectId" value="lostmyphone-20d12" />
-                  <option name="projectNumber" value="626792811310" />
+                  <option name="appId" value="PLACEHOLDER" />
+                  <option name="mobileSdkAppId" value="" />
+                  <option name="projectId" value="" />
+                  <option name="projectNumber" value="" />
                 </ConnectionSetting>
               </option>
               <option name="signal" value="SIGNAL_UNSPECIFIED" />
diff --git a/app/src/main/java/com/example/whats_eat/MainActivity.kt b/app/src/main/java/com/example/whats_eat/MainActivity.kt
index a114f63..cb387cf 100644
--- a/app/src/main/java/com/example/whats_eat/MainActivity.kt
+++ b/app/src/main/java/com/example/whats_eat/MainActivity.kt
@@ -3,24 +3,9 @@ package com.example.whats_eat
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.Icon
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
-import androidx.compose.runtime.getValue
-import androidx.compose.ui.Modifier
-import androidx.navigation.NavDestination.Companion.hierarchy
 import androidx.navigation.NavHostController
-import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
-import com.example.collection.navigation.collectionRoute
-import com.example.designsystem.component.BottomAppNavBar
-import com.example.designsystem.component.BottomNavAppBarItem
 import com.example.designsystem.theme.EatTheme
-import com.example.designsystem.theme.Typography
-import com.example.detail.navigation.detailRoute
-import com.example.home.navigation.homeRoute
-import com.example.whats_eat.navigation.NavigationMenu
 import com.example.whats_eat.navigation.WhatsEatNavHost
 import dagger.hilt.android.AndroidEntryPoint
 
@@ -31,68 +16,7 @@ class MainActivity : ComponentActivity() {
 
         setContent {
             val navHostController: NavHostController = rememberNavController()
-            val navBackStackEntry by navHostController.currentBackStackEntryAsState()
-            val currentDestination = navBackStackEntry?.destination
-            val navMenu = listOf(
-                NavigationMenu.Home,
-                NavigationMenu.Collection
-            )
-            var bottomBarVisible: Boolean
-
-            navBackStackEntry?.destination?.route.let { route ->
-                bottomBarVisible = when(route) {
-                    homeRoute -> true
-                    collectionRoute -> true
-                    detailRoute -> false
-                    else -> false
-                }
-            }
-
-            EatTheme {
-                Scaffold(
-                    modifier = Modifier.fillMaxSize(),
-                    bottomBar = {
-                        if (bottomBarVisible) {
-                            BottomAppNavBar {
-                                navMenu.forEach { navigationMenu ->
-                                    BottomNavAppBarItem(
-                                        onClick = { navHostController.navigate(navigationMenu.route) },
-                                        selected = currentDestination
-                                            ?.hierarchy
-                                            ?.any { destination ->
-                                                destination.route == navigationMenu.route
-                                            } == true,
-                                        icon = {
-                                            Icon(
-                                                imageVector = navigationMenu.icon,
-                                                contentDescription = navigationMenu.screenName
-                                            )
-                                        },
-                                        selectedIcon = {
-                                            Icon(
-                                                imageVector = navigationMenu.selectedIcon,
-                                                contentDescription = navigationMenu.screenName
-                                            )
-                                        },
-                                        label = {
-                                            Text(
-                                                text = navigationMenu.screenName,
-                                                style = Typography.labelMedium
-                                            )
-                                        }
-                                    )
-                                }
-                            }
-                        }
-                    },
-                    content = { paddingValues ->
-                        WhatsEatNavHost(
-                            scaffoldPaddingValues = paddingValues,
-                            navController = navHostController
-                        )
-                    }
-                )
-            }
+            EatTheme { WhatsEatNavHost(navController = navHostController) }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/app/src/main/java/com/example/whats_eat/navigation/NavigationMenu.kt b/app/src/main/java/com/example/whats_eat/navigation/NavigationMenu.kt
deleted file mode 100644
index d8ec5b9..0000000
--- a/app/src/main/java/com/example/whats_eat/navigation/NavigationMenu.kt
+++ /dev/null
@@ -1,25 +0,0 @@
-package com.example.whats_eat.navigation
-
-import androidx.compose.ui.graphics.vector.ImageVector
-import com.example.designsystem.icons.EatIcons
-
-sealed class NavigationMenu(
-    val route: String,
-    val icon: ImageVector,
-    val selectedIcon: ImageVector,
-    val screenName: String
-) {
-   data object Home: NavigationMenu (
-       route = "Home",
-       icon = EatIcons.HomeOutlined,
-       selectedIcon = EatIcons.HomeBorder,
-       screenName = "홈 화면"
-   )
-
-   data object Collection: NavigationMenu (
-       route = "Collection",
-       icon = EatIcons.CollectionOutlined,
-       selectedIcon = EatIcons.CollectionBorder,
-       screenName = "컬렉션"
-   )
-}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/whats_eat/navigation/WhatsEatNavHost.kt b/app/src/main/java/com/example/whats_eat/navigation/WhatsEatNavHost.kt
index 81b74bd..43c2ba0 100644
--- a/app/src/main/java/com/example/whats_eat/navigation/WhatsEatNavHost.kt
+++ b/app/src/main/java/com/example/whats_eat/navigation/WhatsEatNavHost.kt
@@ -2,21 +2,18 @@ package com.example.whats_eat.navigation
 
 import androidx.compose.animation.EnterTransition
 import androidx.compose.animation.ExitTransition
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.runtime.Composable
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import com.example.collection.navigation.collectionScreen
+import com.example.collection.navigation.toCollectionScreen
 import com.example.detail.navigation.detailScreen
 import com.example.detail.navigation.onNavigateDetail
 import com.example.home.navigation.homeRoute
 import com.example.home.navigation.homeScreen
 
 @Composable
-fun WhatsEatNavHost(
-    scaffoldPaddingValues: PaddingValues,
-    navController: NavHostController
-) {
+fun WhatsEatNavHost(navController: NavHostController) {
     NavHost(
         navController = navController,
         startDestination = homeRoute,
@@ -24,10 +21,13 @@ fun WhatsEatNavHost(
         exitTransition = { ExitTransition.None }
     ) {
         homeScreen(
-            scaffoldPaddingValues = scaffoldPaddingValues,
-            navigateToDetail = { id -> navController.onNavigateDetail(id) }
+            navigateToDetail = { id -> navController.onNavigateDetail(id) },
+            navigateToCollection = { navController.toCollectionScreen() }
+        )
+        collectionScreen(navigationIconClick = { navController.popBackStack() })
+        detailScreen(
+            navigationIconOnClick = { navController.popBackStack() },
+            navigateToCollectionScreen = { navController.toCollectionScreen() }
         )
-        collectionScreen(scaffoldPaddingValues = scaffoldPaddingValues)
-        detailScreen()
     }
 }
\ No newline at end of file
diff --git a/core/designsystem/src/main/java/com/example/designsystem/component/AppBar.kt b/core/designsystem/src/main/java/com/example/designsystem/component/AppBar.kt
new file mode 100644
index 0000000..a3b309c
--- /dev/null
+++ b/core/designsystem/src/main/java/com/example/designsystem/component/AppBar.kt
@@ -0,0 +1,145 @@
+package com.example.designsystem.component
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LargeTopAppBar
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.TopAppBarScrollBehavior
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.font.FontWeight
+import com.example.designsystem.theme.EatTypography
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun EatCenterAlignedAppBar(
+    title: @Composable () -> Unit,
+    navigationIcon: @Composable () -> Unit,
+    actions: @Composable RowScope.() -> Unit,
+    modifier: Modifier = Modifier,
+    scrollBehavior: TopAppBarScrollBehavior? = null
+) {
+    CenterAlignedTopAppBar(
+        title = title,
+        modifier = modifier,
+        navigationIcon = navigationIcon,
+        actions = actions,
+        colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
+            containerColor = MaterialTheme.colorScheme.surface,
+            navigationIconContentColor = MaterialTheme.colorScheme.onSurface,
+            titleContentColor = MaterialTheme.colorScheme.onSurface,
+            actionIconContentColor = MaterialTheme.colorScheme.onSurfaceVariant
+        ),
+        scrollBehavior = scrollBehavior
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun EatCenterAlignedAppBar(
+    navigationIcon: ImageVector,
+    navigationIconOnClick: () -> Unit,
+    actions: @Composable RowScope.() -> Unit,
+    modifier: Modifier = Modifier
+) {
+    EatCenterAlignedAppBar(
+        title = { /* Nothing Here */ },
+        modifier = modifier,
+        navigationIcon = {
+            IconButton(
+                onClick = navigationIconOnClick,
+                content = {
+                    Icon(
+                        imageVector = navigationIcon,
+                        contentDescription = "Icon Button"
+                    )
+                }
+            )
+        },
+        actions = actions
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun EatCenterAlignedAppBar(
+    navigationIcon: ImageVector,
+    navigationIconOnClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    EatCenterAlignedAppBar(
+        title = { /* Nothing Here */ },
+        modifier = modifier,
+        navigationIcon = {
+            IconButton(
+                onClick = navigationIconOnClick,
+                content = {
+                    Icon(
+                        imageVector = navigationIcon,
+                        contentDescription = "Icon Button"
+                    )
+                }
+            )
+        },
+        actions = { /* Nothing Here */ }
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun EatLargeTopAppBar(
+    modifier: Modifier = Modifier,
+    title: @Composable () -> Unit,
+    actions: @Composable RowScope.() -> Unit
+) {
+    LargeTopAppBar(
+        title = title,
+        modifier = modifier,
+        actions = actions
+    )
+}
+
+@Composable
+fun EatLargeTopAppBar(
+    mainTitle: String,
+    subTitle: String,
+    actionIcon: ImageVector,
+    actionIconOnClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    EatLargeTopAppBar(
+        title = {
+            Column {
+                Text(
+                    text = mainTitle,
+                    fontWeight = FontWeight.Bold,
+                    style = EatTypography.headlineMedium
+                )
+                Text(
+                    text = subTitle,
+                    fontWeight = FontWeight.Medium,
+                    style = EatTypography.titleSmall
+                )
+            }
+        },
+        modifier = modifier,
+        actions = {
+            IconButton(
+                onClick = actionIconOnClick,
+                content = {
+                    Icon(
+                        imageVector = actionIcon,
+                        contentDescription = "Icon"
+                    )
+                }
+            )
+        }
+    )
+}
\ No newline at end of file
diff --git a/core/designsystem/src/main/java/com/example/designsystem/component/BottomNavBar.kt b/core/designsystem/src/main/java/com/example/designsystem/component/BottomNavBar.kt
index 231d302..3892264 100644
--- a/core/designsystem/src/main/java/com/example/designsystem/component/BottomNavBar.kt
+++ b/core/designsystem/src/main/java/com/example/designsystem/component/BottomNavBar.kt
@@ -15,7 +15,7 @@ import com.example.designsystem.icons.EatIcons
 import com.example.designsystem.theme.EatTheme
 import com.example.designsystem.theme.Gray700
 import com.example.designsystem.theme.Gray900
-import com.example.designsystem.theme.Typography
+import com.example.designsystem.theme.EatTypography
 
 @Composable
 fun BottomAppNavBar(
@@ -83,7 +83,7 @@ fun PreviewItem() {
                         Text(
                             text = item,
                             fontWeight = FontWeight.Bold,
-                            style = Typography.labelMedium
+                            style = EatTypography.labelMedium
                         )
                     }
                 )
diff --git a/core/designsystem/src/main/java/com/example/designsystem/component/ImageLoader.kt b/core/designsystem/src/main/java/com/example/designsystem/component/ImageLoader.kt
index 3c3ce27..bd77981 100644
--- a/core/designsystem/src/main/java/com/example/designsystem/component/ImageLoader.kt
+++ b/core/designsystem/src/main/java/com/example/designsystem/component/ImageLoader.kt
@@ -15,7 +15,7 @@ import com.bumptech.glide.load.engine.DiskCacheStrategy
 import com.bumptech.glide.request.RequestOptions
 import com.example.designsystem.theme.EatShape
 import com.example.designsystem.theme.Gray
-import com.example.designsystem.theme.Typography
+import com.example.designsystem.theme.EatTypography
 import com.skydoves.landscapist.ImageOptions
 import com.skydoves.landscapist.glide.GlideImage
 import com.skydoves.landscapist.glide.GlideImageState
@@ -73,7 +73,7 @@ fun EatImageLoader(
                 content = {
                     Text(
                         text = "이미지 불러오기에 실패하였습니다.",
-                        style = Typography.labelLarge
+                        style = EatTypography.labelLarge
                     )
                 }
             )
diff --git a/core/designsystem/src/main/java/com/example/designsystem/component/SnackBar.kt b/core/designsystem/src/main/java/com/example/designsystem/component/SnackBar.kt
index 07c5329..e46d83e 100644
--- a/core/designsystem/src/main/java/com/example/designsystem/component/SnackBar.kt
+++ b/core/designsystem/src/main/java/com/example/designsystem/component/SnackBar.kt
@@ -16,7 +16,7 @@ import androidx.compose.ui.unit.dp
 import com.example.designsystem.icons.EatIcons
 import com.example.designsystem.theme.EatShape
 import com.example.designsystem.theme.EatTheme
-import com.example.designsystem.theme.Typography
+import com.example.designsystem.theme.EatTypography
 
 @Composable
 fun NoticeSnackBar(
@@ -50,7 +50,7 @@ fun NoticeSnackBar(
                     Spacer(modifier = modifier.size(8.dp))
                     Text(
                         text = text,
-                        style = Typography.labelLarge
+                        style = EatTypography.labelLarge
                     )
                 }
             )
diff --git a/core/designsystem/src/main/java/com/example/designsystem/icons/EatIcons.kt b/core/designsystem/src/main/java/com/example/designsystem/icons/EatIcons.kt
index 27bed1e..e27531b 100644
--- a/core/designsystem/src/main/java/com/example/designsystem/icons/EatIcons.kt
+++ b/core/designsystem/src/main/java/com/example/designsystem/icons/EatIcons.kt
@@ -1,12 +1,13 @@
 package com.example.designsystem.icons
 
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Add
+import androidx.compose.material.icons.outlined.ArrowBack
 import androidx.compose.material.icons.outlined.Close
 import androidx.compose.material.icons.outlined.CollectionsBookmark
 import androidx.compose.material.icons.outlined.Home
 import androidx.compose.material.icons.outlined.SecurityUpdateWarning
 import androidx.compose.material.icons.rounded.CollectionsBookmark
-import androidx.compose.material.icons.rounded.ExpandLess
 import androidx.compose.material.icons.rounded.ExpandMore
 import androidx.compose.material.icons.rounded.Home
 import androidx.compose.material.icons.rounded.LocationOn
@@ -23,6 +24,9 @@ object EatIcons {
     val CloseOutlined = Icons.Outlined.Close
     val starBordered = Icons.Rounded.StarRate
 
+    val arrowBackOutlined = Icons.Outlined.ArrowBack
+    val plusOutlined = Icons.Outlined.Add
+
     val locationPermissionBordered = Icons.Rounded.LocationOn
     val extendedMoreBordered = Icons.Rounded.ExpandMore
 }
\ No newline at end of file
diff --git a/core/designsystem/src/main/java/com/example/designsystem/theme/Theme.kt b/core/designsystem/src/main/java/com/example/designsystem/theme/Theme.kt
index d71a42e..fdaacae 100644
--- a/core/designsystem/src/main/java/com/example/designsystem/theme/Theme.kt
+++ b/core/designsystem/src/main/java/com/example/designsystem/theme/Theme.kt
@@ -47,7 +47,7 @@ fun EatTheme(
     MaterialTheme(
         colorScheme = colorScheme,
         shapes = EatShape,
-        typography = Typography,
+        typography = EatTypography,
         content = content
     )
 }
\ No newline at end of file
diff --git a/core/designsystem/src/main/java/com/example/designsystem/theme/Type.kt b/core/designsystem/src/main/java/com/example/designsystem/theme/Type.kt
index 2b7dc80..0ed1365 100644
--- a/core/designsystem/src/main/java/com/example/designsystem/theme/Type.kt
+++ b/core/designsystem/src/main/java/com/example/designsystem/theme/Type.kt
@@ -7,7 +7,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
 import com.example.designsystem.font.NotoSansKR
 
-val Typography = Typography(
+val EatTypography = Typography(
     displayLarge = TextStyle(
         fontFamily = NotoSansKR,
         fontWeight = FontWeight.Normal,
diff --git a/core/ui/src/main/java/com/example/ui/BannerCard.kt b/core/ui/src/main/java/com/example/ui/BannerCard.kt
index a7505ae..f110870 100644
--- a/core/ui/src/main/java/com/example/ui/BannerCard.kt
+++ b/core/ui/src/main/java/com/example/ui/BannerCard.kt
@@ -13,7 +13,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import com.example.designsystem.component.EatCard
 import com.example.designsystem.component.EatImageLoader
-import com.example.designsystem.theme.Typography
+import com.example.designsystem.theme.EatTypography
 import com.example.model.feature.BannerItemsModel
 
 @Composable
@@ -43,7 +43,7 @@ fun BannerCard(
                 Text(
                     text = banner?.name ?: "",
                     fontWeight = FontWeight.SemiBold,
-                    style = Typography.titleMedium
+                    style = EatTypography.titleMedium
                 )
             }
         )
diff --git a/core/ui/src/main/java/com/example/ui/CollectionCard.kt b/core/ui/src/main/java/com/example/ui/CollectionCard.kt
index 96ea8ea..6e6e3cf 100644
--- a/core/ui/src/main/java/com/example/ui/CollectionCard.kt
+++ b/core/ui/src/main/java/com/example/ui/CollectionCard.kt
@@ -26,7 +26,7 @@ import com.example.designsystem.component.EatCard
 import com.example.designsystem.component.EatIconButton
 import com.example.designsystem.component.EatImageLoader
 import com.example.designsystem.icons.EatIcons
-import com.example.designsystem.theme.Typography
+import com.example.designsystem.theme.EatTypography
 
 @Composable
 fun CollectionCard(
@@ -65,7 +65,7 @@ fun CollectionCard(
                             text = placeName,
                             maxLines = 1,
                             overflow = TextOverflow.Ellipsis,
-                            style = Typography.headlineSmall
+                            style = EatTypography.headlineSmall
                         )
                         EatIconButton(
                             onClick = { expandedState = !expandedState },
diff --git a/core/ui/src/main/java/com/example/ui/GridItem.kt b/core/ui/src/main/java/com/example/ui/GridItem.kt
index 6ec344d..042bb4c 100644
--- a/core/ui/src/main/java/com/example/ui/GridItem.kt
+++ b/core/ui/src/main/java/com/example/ui/GridItem.kt
@@ -17,7 +17,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import com.example.designsystem.component.EatImageLoader
-import com.example.designsystem.theme.Typography
+import com.example.designsystem.theme.EatTypography
 import com.example.model.feature.GridItemsModel
 
 @Composable
@@ -49,7 +49,7 @@ fun GridItem(
                     fontWeight = FontWeight.SemiBold,
                     overflow = TextOverflow.Ellipsis,
                     maxLines = 2,
-                    style = Typography.labelLarge
+                    style = EatTypography.labelLarge
                 )
             }
         )
diff --git a/core/ui/src/main/java/com/example/ui/PermissionAlertDialog.kt b/core/ui/src/main/java/com/example/ui/PermissionAlertDialog.kt
index 76b067c..21e8a7c 100644
--- a/core/ui/src/main/java/com/example/ui/PermissionAlertDialog.kt
+++ b/core/ui/src/main/java/com/example/ui/PermissionAlertDialog.kt
@@ -11,7 +11,7 @@ import com.example.designsystem.component.EatAlertDialog
 import com.example.designsystem.component.EatOutlinedTextButton
 import com.example.designsystem.icons.EatIcons
 import com.example.designsystem.theme.EatTheme
-import com.example.designsystem.theme.Typography
+import com.example.designsystem.theme.EatTypography
 import com.example.ui.preview.ComponentPreview
 
 @Composable
@@ -29,7 +29,7 @@ fun PermissionAlertDialog(
             Text(
                 text = "권한을 허용해주세요!",
                 fontWeight = FontWeight.Bold,
-                style = Typography.titleLarge
+                style = EatTypography.titleLarge
             )
         },
         text = {
@@ -38,7 +38,7 @@ fun PermissionAlertDialog(
                     "위치 사용 권한을 허용해야합니다.\n" +
                     "허용하시겠습니까?",
                 fontWeight = FontWeight.Medium,
-                style = Typography.bodySmall
+                style = EatTypography.bodySmall
             )
         },
         onDismissRequest = onDismiss,
@@ -49,7 +49,7 @@ fun PermissionAlertDialog(
                     containerColor = MaterialTheme.colorScheme.primary,
                     contentColor = MaterialTheme.colorScheme.onPrimary
                 ),
-                content = { Text(text = "네", style = Typography.labelLarge) }
+                content = { Text(text = "네", style = EatTypography.labelLarge) }
             )
         },
         dismissButton = {
@@ -59,7 +59,7 @@ fun PermissionAlertDialog(
                     containerColor = MaterialTheme.colorScheme.surface,
                     contentColor = MaterialTheme.colorScheme.inverseSurface
                 ),
-                content = { Text(text = "아니요", style = Typography.labelLarge) }
+                content = { Text(text = "아니요", style = EatTypography.labelLarge) }
             )
         }
     )
diff --git a/core/ui/src/main/java/com/example/ui/RatingRow.kt b/core/ui/src/main/java/com/example/ui/RatingRow.kt
index 1ab56e3..f893c9c 100644
--- a/core/ui/src/main/java/com/example/ui/RatingRow.kt
+++ b/core/ui/src/main/java/com/example/ui/RatingRow.kt
@@ -13,7 +13,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.designsystem.icons.EatIcons
-import com.example.designsystem.theme.Typography
+import com.example.designsystem.theme.EatTypography
 
 @Composable
 fun RatingRow(
@@ -33,7 +33,7 @@ fun RatingRow(
             Text(
                 text = ratingNumber,
                 fontWeight = FontWeight.Bold,
-                style = Typography.labelLarge
+                style = EatTypography.labelLarge
             )
         }
     )
diff --git a/feature/collection/src/main/java/com/example/collection/CollectionScreen.kt b/feature/collection/src/main/java/com/example/collection/CollectionScreen.kt
index e86c8b1..2525a26 100644
--- a/feature/collection/src/main/java/com/example/collection/CollectionScreen.kt
+++ b/feature/collection/src/main/java/com/example/collection/CollectionScreen.kt
@@ -1,12 +1,9 @@
 package com.example.collection
 
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -14,59 +11,63 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.example.designsystem.component.EatCenterAlignedAppBar
 import com.example.designsystem.component.EatCircularProgressIndicator
 import com.example.designsystem.component.EatLazyColumn
-import com.example.designsystem.theme.Typography
+import com.example.designsystem.icons.EatIcons
+import com.example.designsystem.theme.EatTypography
 import com.example.ui.CollectionCard
 
 @Composable
-internal fun CollectionRoute(scaffoldPaddingValues: PaddingValues) {
+internal fun CollectionRoute(navigationIconOnClick: () -> Unit) {
     val collectionViewModel = hiltViewModel<CollectionViewModel>()
-    val deleteContentUiState by collectionViewModel.deleteCollectionState.collectAsStateWithLifecycle()
     val readAllContentUiState by collectionViewModel.readAllCollectionUiState.collectAsStateWithLifecycle()
 
     CollectionScreen(
-        scaffoldPaddingValues = scaffoldPaddingValues,
-        deleteContentUiState = deleteContentUiState,
+        navigationIconOnClick = navigationIconOnClick,
         readAllContentUiState = readAllContentUiState
     )
 }
 
 @Composable
 internal fun CollectionScreen(
-    scaffoldPaddingValues: PaddingValues,
-    deleteContentUiState: DeleteCollectionUiState,
+    navigationIconOnClick: () -> Unit,
     readAllContentUiState: ReadAllCollectionUiState,
     modifier: Modifier = Modifier
 ) {
-    Surface(
-        modifier = modifier
-            .fillMaxSize()
-            .padding(scaffoldPaddingValues),
-        color = MaterialTheme.colorScheme.surface,
-        content = {
-            when (readAllContentUiState) {
-                is ReadAllCollectionUiState.IsLoading -> { EatCircularProgressIndicator() }
-                is ReadAllCollectionUiState.IsSuccess -> {
-                    val content = readAllContentUiState.data
+    Scaffold(
+        modifier = modifier.fillMaxSize(),
+        topBar = {
+            EatCenterAlignedAppBar(
+                navigationIcon = EatIcons.arrowBackOutlined,
+                navigationIconOnClick = navigationIconOnClick
+            )
+        }
+    ) { paddingValues ->
+        when (readAllContentUiState) {
+            is ReadAllCollectionUiState.IsLoading -> { EatCircularProgressIndicator() }
+            is ReadAllCollectionUiState.IsSuccess -> {
+                val content = readAllContentUiState.data
 
-                    EatLazyColumn(modifier.fillMaxSize()) {
-                        items(items = content) { collection ->
-                            CollectionCard(
-                                placeName = collection.name,
-                                placeImgUrl = collection.imgUrl
-                            )
-                        }
+                EatLazyColumn(
+                    modifier = modifier.fillMaxSize(),
+                    contentPadding = paddingValues
+                ) {
+                    items(items = content) { collection ->
+                        CollectionCard(
+                            placeName = collection.name,
+                            placeImgUrl = collection.imgUrl
+                        )
                     }
                 }
-                is ReadAllCollectionUiState.IsFailed -> {
-                    Box(
-                        modifier = modifier.fillMaxSize(),
-                        contentAlignment = Alignment.Center,
-                        content = { Text(text = "로딩에 실패하였습니다.", style = Typography.labelLarge) }
-                    )
-                }
+            }
+            is ReadAllCollectionUiState.IsFailed -> {
+                Box(
+                    modifier = modifier.fillMaxSize(),
+                    contentAlignment = Alignment.Center,
+                    content = { Text(text = "로딩에 실패하였습니다.", style = EatTypography.labelLarge) }
+                )
             }
         }
-    )
+    }
 }
\ No newline at end of file
diff --git a/feature/collection/src/main/java/com/example/collection/navigation/CollectionNavigation.kt b/feature/collection/src/main/java/com/example/collection/navigation/CollectionNavigation.kt
index 8f4eb49..5a7d643 100644
--- a/feature/collection/src/main/java/com/example/collection/navigation/CollectionNavigation.kt
+++ b/feature/collection/src/main/java/com/example/collection/navigation/CollectionNavigation.kt
@@ -5,14 +5,18 @@ import androidx.compose.animation.core.LinearEasing
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.foundation.layout.PaddingValues
+import androidx.navigation.NavController
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.compose.composable
 import com.example.collection.CollectionRoute
 
 const val collectionRoute = "Collection"
 
-fun NavGraphBuilder.collectionScreen(scaffoldPaddingValues: PaddingValues) {
+fun NavController.toCollectionScreen() {
+    this.navigate(collectionRoute)
+}
+
+fun NavGraphBuilder.collectionScreen(navigationIconClick: () -> Unit) {
     composable(
         route = collectionRoute,
         enterTransition = {
@@ -36,7 +40,8 @@ fun NavGraphBuilder.collectionScreen(scaffoldPaddingValues: PaddingValues) {
                     easing = LinearEasing
                 )
             )
-        },
-        content =  { CollectionRoute(scaffoldPaddingValues) }
-    )
+        }
+    ) {
+        CollectionRoute(navigationIconOnClick = navigationIconClick)
+    }
 }
\ No newline at end of file
diff --git a/feature/detail/src/main/java/com/example/detail/DetailScreen.kt b/feature/detail/src/main/java/com/example/detail/DetailScreen.kt
index 98e8f83..df923c9 100644
--- a/feature/detail/src/main/java/com/example/detail/DetailScreen.kt
+++ b/feature/detail/src/main/java/com/example/detail/DetailScreen.kt
@@ -1,32 +1,30 @@
 package com.example.detail
 
-import android.widget.Toast
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 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.size
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.example.designsystem.component.EatCenterAlignedAppBar
 import com.example.designsystem.component.EatCircularProgressIndicator
 import com.example.designsystem.component.EatImageLoader
-import com.example.designsystem.component.EatTextButton
-import com.example.designsystem.theme.Typography
+import com.example.designsystem.icons.EatIcons
+import com.example.designsystem.theme.EatTypography
 import com.example.model.feature.CollectionModel
 import com.google.android.gms.maps.model.CameraPosition
 import com.google.android.gms.maps.model.LatLng
@@ -36,7 +34,11 @@ import com.google.maps.android.compose.MarkerState
 import com.google.maps.android.compose.rememberCameraPositionState
 
 @Composable
-internal fun DetailRoute(modifier: Modifier = Modifier) {
+internal fun DetailRoute(
+    navigationIconOnClick: () -> Unit,
+    navigateToCollectionScreen: () -> Unit,
+    modifier: Modifier = Modifier
+) {
     val detailViewModel = hiltViewModel<DetailViewModel>()
     val detailUiState by detailViewModel.detailUiState.collectAsStateWithLifecycle()
     val collectionUiState by detailViewModel.saveCollectionState.collectAsStateWithLifecycle()
@@ -44,6 +46,8 @@ internal fun DetailRoute(modifier: Modifier = Modifier) {
     DetailScreen(
         detailUiState = detailUiState,
         collectionUiState = collectionUiState,
+        navigationIconOnClick = navigationIconOnClick,
+        navigateToCollectionScreen = navigateToCollectionScreen,
         addOnCollection = detailViewModel::saveCollection,
         modifier = modifier
     )
@@ -54,18 +58,43 @@ internal fun DetailScreen(
     detailUiState: DetailUiState,
     collectionUiState: SaveCollectionState,
     addOnCollection: (CollectionModel) -> Unit,
+    navigationIconOnClick: () -> Unit,
+    navigateToCollectionScreen: () -> Unit,
     modifier: Modifier = Modifier
 ) {
-    val localContext = LocalContext.current
-
-    Surface(
+    Scaffold(
         modifier = modifier.fillMaxSize(),
-        color = MaterialTheme.colorScheme.surface
-    ) {
+        topBar = {
+            EatCenterAlignedAppBar(
+                navigationIcon = EatIcons.arrowBackOutlined,
+                navigationIconOnClick = navigationIconOnClick,
+                actions = {
+                    IconButton(
+                        onClick = { /*TODO*/ },
+                        content = {
+                            Icon(
+                                imageVector = EatIcons.plusOutlined,
+                                contentDescription = "Add"
+                            )
+                        }
+                    )
+                    IconButton(
+                        onClick = navigateToCollectionScreen,
+                        content = {
+                            Icon(
+                                imageVector = EatIcons.CollectionOutlined,
+                                contentDescription = "Collection"
+                            )
+                        }
+                    )
+                }
+            )
+        }
+    ) { paddingValues ->
         Column(
             modifier = modifier
                 .fillMaxSize()
-                .padding(10.dp),
+                .padding(paddingValues),
             verticalArrangement = Arrangement.Top,
             horizontalAlignment = Alignment.Start
         ) {
@@ -96,7 +125,7 @@ internal fun DetailScreen(
                         fontWeight = FontWeight.Bold,
                         overflow = TextOverflow.Ellipsis,
                         maxLines = 1,
-                        style = Typography.headlineMedium
+                        style = EatTypography.headlineMedium
                     )
                     Text(
                         text = if (detailUiState.info.isPlaceOpenNow) {
@@ -105,12 +134,12 @@ internal fun DetailScreen(
                             "영업 종료"
                         },
                         maxLines = 1,
-                        style = Typography.labelMedium
+                        style = EatTypography.labelMedium
                     )
                     Text(
                         text = "위치",
                         fontWeight = FontWeight.SemiBold,
-                        style = Typography.headlineMedium
+                        style = EatTypography.headlineMedium
                     )
                     GoogleMap(
                         modifier = modifier
@@ -124,44 +153,12 @@ internal fun DetailScreen(
                             )
                         }
                     )
-                    Spacer(modifier = modifier.size(20.dp))
-                    EatTextButton(
-                        onClick = {
-                            val collection = CollectionModel(
-                                id = detailUiState.info.placeId,
-                                name = detailUiState.info.placeName,
-                                latLng = "${lat},${lng}",
-                                imgUrl = detailUiState.info.placeImgUrl
-                            )
-
-                            addOnCollection(collection)
-                            when (collectionUiState) {
-                                is SaveCollectionState.IsLoading -> {}
-                                is SaveCollectionState.IsSuccess -> {
-                                    Toast.makeText(
-                                        localContext,
-                                        "저장이 완료되었습니다.",
-                                        Toast.LENGTH_SHORT
-                                    ).show()
-                                }
-                                is SaveCollectionState.IsFailed -> {
-                                    Toast.makeText(
-                                        localContext,
-                                        "저장에 실패하였습니다.",
-                                        Toast.LENGTH_SHORT
-                                    ).show()
-                                }
-                            }
-                        },
-                        modifier = modifier.fillMaxWidth(),
-                        content = { Text(text = "컬렉션에 추가하기", style = Typography.labelLarge) }
-                    )
                 }
                 is DetailUiState.IsFailed -> {
                     Box(
                         modifier = modifier.fillMaxSize(),
                         contentAlignment = Alignment.Center,
-                        content = { Text(text = "로딩에 실패하였습니다.", style = Typography.labelLarge) }
+                        content = { Text(text = "로딩에 실패하였습니다.", style = EatTypography.labelLarge) }
                     )
                 }
             }
diff --git a/feature/detail/src/main/java/com/example/detail/navigation/DetailNavigation.kt b/feature/detail/src/main/java/com/example/detail/navigation/DetailNavigation.kt
index 441b48e..1c62b67 100644
--- a/feature/detail/src/main/java/com/example/detail/navigation/DetailNavigation.kt
+++ b/feature/detail/src/main/java/com/example/detail/navigation/DetailNavigation.kt
@@ -25,7 +25,10 @@ fun NavController.onNavigateDetail(placeID: String) {
     this.navigate("$detailRoute/$placeID")
 }
 
-fun NavGraphBuilder.detailScreen() {
+fun NavGraphBuilder.detailScreen(
+    navigationIconOnClick: () -> Unit,
+    navigateToCollectionScreen: () -> Unit
+) {
     composable(
         route = "$detailRoute/{$placeIDArgs}",
         arguments = listOf(
@@ -52,7 +55,11 @@ fun NavGraphBuilder.detailScreen() {
                     easing = LinearEasing
                 )
             )
-        },
-        content = { DetailRoute() }
-    )
+        }
+    ) {
+        DetailRoute(
+            navigationIconOnClick = navigationIconOnClick,
+            navigateToCollectionScreen = navigateToCollectionScreen
+        )
+    }
 }
\ No newline at end of file
diff --git a/feature/home/src/main/java/com/example/home/HomeScreen.kt b/feature/home/src/main/java/com/example/home/HomeScreen.kt
index 033664c..4a88517 100644
--- a/feature/home/src/main/java/com/example/home/HomeScreen.kt
+++ b/feature/home/src/main/java/com/example/home/HomeScreen.kt
@@ -4,11 +4,9 @@ import android.Manifest
 import android.content.pm.PackageManager
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -17,13 +15,14 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.core.app.ActivityCompat
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.example.designsystem.component.EatLargeTopAppBar
+import com.example.designsystem.icons.EatIcons
 import com.example.designsystem.theme.EatTheme
-import com.example.designsystem.theme.Typography
+import com.example.designsystem.theme.EatTypography
 import com.example.home.component.HomeBanner
 import com.example.home.component.HomeItemGrid
 import com.example.ui.preview.ComponentPreview
@@ -40,7 +39,7 @@ import com.google.android.gms.tasks.OnTokenCanceledListener
 @OptIn(ExperimentalPermissionsApi::class)
 @Composable
 internal fun HomeRoute(
-    scaffoldPaddingValues: PaddingValues,
+    navigateToCollection: () -> Unit,
     navigateToDetail: (String) -> Unit
 ) {
     val context = LocalContext.current
@@ -91,8 +90,8 @@ internal fun HomeRoute(
     HomeScreen(
         bannerState = bannerUiState,
         itemGridState = gridUiState,
-        scaffoldPaddingValues = scaffoldPaddingValues,
-        itemOnClick = navigateToDetail
+        itemOnClick = navigateToDetail,
+        actionIconOnClick = navigateToCollection
     )
 }
 
@@ -100,39 +99,36 @@ internal fun HomeRoute(
 internal fun HomeScreen(
     bannerState: BannerUiState,
     itemGridState: ItemGridUiState,
-    scaffoldPaddingValues: PaddingValues,
     itemOnClick: (String) -> Unit,
+    actionIconOnClick: () -> Unit,
     modifier: Modifier = Modifier
 ) {
-    Surface(
-        modifier = modifier
-            .fillMaxSize()
-            .padding(scaffoldPaddingValues),
-        color = MaterialTheme.colorScheme.surface
-    ) {
+    Scaffold(
+        modifier = modifier.fillMaxSize(),
+        topBar = {
+            EatLargeTopAppBar(
+                mainTitle = "내 주변 음식점",
+                subTitle = "오늘은 여기 어떤가요?",
+                actionIcon = EatIcons.CollectionOutlined,
+                actionIconOnClick = actionIconOnClick
+            )
+        }
+    ) { paddingValues ->
         Column(
-            modifier = modifier.fillMaxSize(),
+            modifier = modifier
+                .fillMaxSize()
+                .padding(paddingValues),
             horizontalAlignment = Alignment.Start,
             verticalArrangement = Arrangement.Top,
-            content =  {
-                Text(
-                    text = "내 주변 음식점",
-                    fontWeight = FontWeight.Bold,
-                    style = Typography.headlineLarge
-                )
-                Text(
-                    text = "오늘은 여기 어떤가요?",
-                    fontWeight = FontWeight.Medium,
-                    style = Typography.titleSmall
-                )
+            content = {
                 HomeBanner(
                     bannerUiState = bannerState,
                     bannerOnClick = itemOnClick
                 )
                 Text(
                     text = "근처 맛집",
-                    fontWeight = FontWeight.Medium,
-                    style = Typography.titleSmall
+                    modifier = modifier.padding(start = 16.dp),
+                    style = EatTypography.titleSmall
                 )
                 HomeItemGrid(
                     itemGridUiState = itemGridState,
@@ -149,10 +145,10 @@ internal fun HomeScreen(
 fun PreviewHomeScreen() {
     EatTheme {
         HomeScreen(
-            scaffoldPaddingValues = PaddingValues(bottom = 10.dp),
             bannerState = BannerUiState.IsLoading,
             itemGridState = ItemGridUiState.IsLoading,
             itemOnClick = { _ -> },
+            actionIconOnClick = {  }
         )
     }
 }
\ No newline at end of file
diff --git a/feature/home/src/main/java/com/example/home/component/HomeBanner.kt b/feature/home/src/main/java/com/example/home/component/HomeBanner.kt
index a619163..a994ef8 100644
--- a/feature/home/src/main/java/com/example/home/component/HomeBanner.kt
+++ b/feature/home/src/main/java/com/example/home/component/HomeBanner.kt
@@ -20,7 +20,7 @@ import com.example.designsystem.component.EatCircularProgressIndicator
 import com.example.designsystem.component.EatHorizontalPager
 import com.example.designsystem.theme.EatShape
 import com.example.designsystem.theme.Gray
-import com.example.designsystem.theme.Typography
+import com.example.designsystem.theme.EatTypography
 import com.example.home.BannerUiState
 import com.example.ui.BannerCard
 
@@ -33,7 +33,7 @@ fun HomeBanner(
 ) {
     Column(
         modifier = modifier
-            .padding(vertical = 10.dp)
+            .padding(bottom = 10.dp)
             .fillMaxWidth()
             .height(300.dp),
         verticalArrangement = Arrangement.Center,
@@ -66,7 +66,7 @@ fun HomeBanner(
                     content = {
                         Text(
                             text = "로딩에 실패하였습니다.",
-                            style = Typography.bodyMedium
+                            style = EatTypography.bodyMedium
                         )
                     }
                 )
diff --git a/feature/home/src/main/java/com/example/home/component/HomeItemGrid.kt b/feature/home/src/main/java/com/example/home/component/HomeItemGrid.kt
index 1308a20..9224dff 100644
--- a/feature/home/src/main/java/com/example/home/component/HomeItemGrid.kt
+++ b/feature/home/src/main/java/com/example/home/component/HomeItemGrid.kt
@@ -15,7 +15,7 @@ import com.example.designsystem.component.EatCircularProgressIndicator
 import com.example.designsystem.component.EatVerticalGrid
 import com.example.designsystem.theme.EatShape
 import com.example.designsystem.theme.Gray
-import com.example.designsystem.theme.Typography
+import com.example.designsystem.theme.EatTypography
 import com.example.home.ItemGridUiState
 import com.example.ui.GridItem
 
@@ -60,7 +60,7 @@ fun HomeItemGrid(
                     content = {
                         Text(
                             text = "로딩에 실패하였습니다.",
-                            style = Typography.bodyMedium
+                            style = EatTypography.bodyMedium
                         )
                     }
                 )
diff --git a/feature/home/src/main/java/com/example/home/navigation/HomeNavigation.kt b/feature/home/src/main/java/com/example/home/navigation/HomeNavigation.kt
index a575643..f368305 100644
--- a/feature/home/src/main/java/com/example/home/navigation/HomeNavigation.kt
+++ b/feature/home/src/main/java/com/example/home/navigation/HomeNavigation.kt
@@ -5,7 +5,6 @@ import androidx.compose.animation.core.LinearEasing
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.compose.composable
 import com.example.home.HomeRoute
@@ -13,8 +12,8 @@ import com.example.home.HomeRoute
 const val homeRoute = "Home"
 
 fun NavGraphBuilder.homeScreen(
-    scaffoldPaddingValues: PaddingValues,
-    navigateToDetail: (String) -> Unit
+    navigateToDetail: (String) -> Unit,
+    navigateToCollection: () -> Unit
 ) {
     composable(
         route = homeRoute,
@@ -39,12 +38,11 @@ fun NavGraphBuilder.homeScreen(
                     easing = LinearEasing
                 )
             )
-        },
-        content = {
-            HomeRoute(
-                scaffoldPaddingValues = scaffoldPaddingValues,
-                navigateToDetail = navigateToDetail
-            )
         }
-    )
+    ) {
+        HomeRoute(
+            navigateToDetail = navigateToDetail,
+            navigateToCollection = navigateToCollection
+        )
+    }
 }
\ No newline at end of file