Merge pull request #40 from ddyeon/feature/storage_detail

보관함 상세 UI 🐶🐾

app/src/main/java/com/mashup/dorabangs/navigation/DoraApp.kt

@@ -18,11 +18,13 @@ import com.mashup.dorabangs.core.designsystem.component.bottomnavigation.DoraBot
 fun DoraApp(appState: DoraAppState = rememberDoraAppState()) {
     Scaffold(
         bottomBar = {
-            DoraBottomBar(
-                destinations = appState.bottomBarDestination,
-                onNavigateToDestination = appState::navigateToBottomNavigationDestination,
-                currentDestination = appState.currentDestination,
-            )
+            if (appState.isBottomBarVisible()) {
+                DoraBottomBar(
+                    destinations = appState.bottomBarDestination,
+                    onNavigateToDestination = appState::navigateToBottomNavigationDestination,
+                    currentDestination = appState.currentDestination,
+                )
+            }
         },
         content = { paddingValues ->
             Column(

app/src/main/java/com/mashup/dorabangs/navigation/DoraAppState.kt

@@ -9,6 +9,7 @@ import androidx.navigation.NavHostController
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import androidx.navigation.navOptions
+import com.mashup.core.navigation.NavigationRoute
 import com.mashup.dorabangs.core.designsystem.component.bottomnavigation.BottomNavigationDestination
 import com.mashup.dorabangs.feature.navigation.navigateToHome
 import com.mashup.dorabangs.feature.storage.navigation.navigateToStorage
@@ -46,5 +47,13 @@ class DoraAppState(
         }
     }
 
+    @Composable
+    fun isBottomBarVisible(): Boolean {
+        return when (currentDestination?.route) {
+            NavigationRoute.HomeScreen.route, NavigationRoute.StorageScreen.route -> true
+            else -> false
+        }
+    }
+
     val bottomBarDestination: List<BottomNavigationDestination> = BottomNavigationDestination.values().toList().toImmutableList()
 }

app/src/main/java/com/mashup/dorabangs/navigation/MainNavHost.kt

@@ -5,6 +5,7 @@ import androidx.compose.ui.Modifier
 import androidx.navigation.compose.NavHost
 import com.mashup.core.navigation.NavigationRoute
 import com.mashup.dorabangs.feature.navigation.homeNavigation
+import com.mashup.dorabangs.feature.storage.navigation.storageDetailNavigation
 import com.mashup.dorabangs.feature.storage.navigation.storageNavigation
 
 @Composable
@@ -19,6 +20,7 @@ fun MainNavHost(
         startDestination = startDestination,
     ) {
         homeNavigation()
-        storageNavigation()
+        storageNavigation(appState.navController)
+        storageDetailNavigation(appState.navController)
     }
 }

core/designsystem/src/main/java/com/mashup/dorabangs/core/designsystem/component/card/FeedCardUiModel.kt

@@ -8,4 +8,35 @@ data class FeedCardUiModel(
     val keywordList: List<String>,
     val thumbnail: Int, // TODO - url String 변경 필요
     val isLoading: Boolean = false,
-)
+) {
+    companion object {
+        fun getDefaultFeedCard(): List<FeedCardUiModel> {
+            return listOf(
+                FeedCardUiModel(
+                    title = "실험 0건인 조직에서, 가장 실험을 활발하게 하는 조직 되기",
+                    content = "실험 0건인 조직에서, 가장 실험을 활발하게 하는 조직 되기실험 0건인 조직에서, 가장 실험을 활발하게 하는 조직 되기실험 0건인 조직에서, 가장 실험을 활발하게 하는 조직 되기",
+                    keywordList = listOf("다연", "호현", "석주"),
+                    category = "디자인",
+                    createdAt = 1,
+                    thumbnail = androidx.core.R.drawable.ic_call_answer,
+                ),
+                FeedCardUiModel(
+                    title = "실험 0건인 조직에서, 가장 실험을 활발하게 하는 조직 되기",
+                    content = "실험 0건인 조직에서, 가장 실험을 활발하게 하는 조직 되기실험 0건인 조직에서, 가장 실험을 활발하게 하는 조직 되기실험 0건인 조직에서, 가장 실험을 활발하게 하는 조직 되기",
+                    keywordList = listOf("다연", "호현", "석주"),
+                    category = "디자인",
+                    createdAt = 1,
+                    thumbnail = androidx.core.R.drawable.ic_call_answer,
+                ),
+                FeedCardUiModel(
+                    title = "실험 0건인 조직에서, 가장 실험을 활발하게 하는 조직 되기",
+                    content = "실험 0건인 조직에서, 가장 실험을 활발하게 하는 조직 되기실험 0건인 조직에서, 가장 실험을 활발하게 하는 조직 되기실험 0건인 조직에서, 가장 실험을 활발하게 하는 조직 되기",
+                    keywordList = listOf("다연", "호현", "석주"),
+                    category = "디자인",
+                    createdAt = 1,
+                    thumbnail = androidx.core.R.drawable.ic_call_answer,
+                ),
+            )
+        }
+    }
+}

core/designsystem/src/main/java/com/mashup/dorabangs/core/designsystem/component/topbar/DorabangsTopAppBar.kt

@@ -1,79 +1,94 @@
 package com.mashup.dorabangs.core.designsystem.component.topbar
 
 import androidx.annotation.DrawableRes
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.mashup.dorabangs.core.designsystem.R
+import com.mashup.dorabangs.core.designsystem.theme.DoraColorTokens
 import com.mashup.dorabangs.core.designsystem.theme.DoraTypoTokens
 import com.mashup.dorabangs.core.designsystem.theme.TopBarColorTokens
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun DoraTopAppBar(
     modifier: Modifier = Modifier,
     title: String,
-    titleAlignment: Alignment = Alignment.Center,
+    isTitleCenter: Boolean = false,
     isEnableBackNavigation: Boolean = false,
     @DrawableRes actionIcon: Int? = null,
     onClickBackIcon: () -> Unit = {},
     onClickActonIcon: () -> Unit = {},
 ) {
-    val isHomeAppBar = titleAlignment == Alignment.CenterStart && !isEnableBackNavigation
-    TopAppBar(
-        modifier = modifier,
-        colors = TopAppBarDefaults.topAppBarColors(containerColor = TopBarColorTokens.ContainerColor),
-        title = {
-            Box(
-                modifier = Modifier.fillMaxSize(),
-                contentAlignment = titleAlignment,
+    val isHomeAppBar = isTitleCenter && !isEnableBackNavigation
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(48.dp)
+            .background(color = DoraColorTokens.White),
+    ) {
+        val horizontalArrangement = if (isTitleCenter) Arrangement.Center else Arrangement.Start
+        if (isTitleCenter && isEnableBackNavigation) {
+            Icon(
+                modifier = Modifier.align(Alignment.CenterStart)
+                    .padding(start = 20.dp)
+                    .clickable { onClickBackIcon() },
+                painter = painterResource(id = R.drawable.ic_back),
+                contentDescription = "navigation",
+            )
+            Text(
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .padding(start = 16.dp),
+                text = title,
+                color = TopBarColorTokens.OnContainerColor,
+                style = DoraTypoTokens.base1Bold,
+            )
+        } else {
+            Row(
+                modifier = Modifier.fillMaxWidth().align(Alignment.CenterStart),
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = horizontalArrangement,
             ) {
-                val startPadding =
-                    if (titleAlignment == Alignment.CenterStart && isEnableBackNavigation) 16.dp else 8.dp
+                if (isEnableBackNavigation) {
+                    Icon(
+                        modifier = Modifier
+                            .padding(start = 20.dp)
+                            .clickable { onClickBackIcon() },
+                        painter = painterResource(id = R.drawable.ic_back),
+                        contentDescription = "navigation",
+                    )
+                }
                 Text(
-                    modifier = Modifier.padding(start = startPadding),
+                    modifier = Modifier.padding(start = if (isEnableBackNavigation) 16.dp else 20.dp),
                     text = title,
                     color = if (isHomeAppBar) TopBarColorTokens.OnContainerColorHome else TopBarColorTokens.OnContainerColor,
                     style = if (isHomeAppBar) DoraTypoTokens.Subtitle1Bold else DoraTypoTokens.base1Bold,
                 )
             }
-        },
-        actions = {
-            if (actionIcon != null) {
-                Icon(
-                    modifier = Modifier
-                        .padding(end = 20.dp)
-                        .clickable { onClickActonIcon() },
-                    painter = painterResource(id = actionIcon),
-                    contentDescription = "action",
-                )
-            }
-        },
-        navigationIcon = {
-            if (isEnableBackNavigation) {
-                Icon(
-                    modifier = Modifier
-                        .padding(start = 20.dp)
-                        .clickable { onClickBackIcon() },
-                    painter = painterResource(id = R.drawable.ic_back),
-                    contentDescription = "navigation",
-                )
-            }
-        },
-    )
+        }
+        actionIcon?.let { icon ->
+            Icon(
+                modifier = Modifier.align(Alignment.CenterEnd)
+                    .padding(end = 20.dp)
+                    .clickable { onClickActonIcon() },
+                painter = painterResource(id = icon),
+                contentDescription = "action",
+            )
+        }
+    }
 }
 
 @Preview
@@ -92,7 +107,7 @@ fun PreviewBackNavigationTopBar() {
     DoraTopBar.BackNavigationTopBar(
         modifier = Modifier.fillMaxWidth(),
         title = "Dorabangs",
-        titleAlignment = Alignment.CenterStart,
+        isTitleCenter = true,
     ) {}
 }
 

core/designsystem/src/main/java/com/mashup/dorabangs/core/designsystem/component/topbar/TopAppBarType.kt

@@ -1,7 +1,6 @@
 package com.mashup.dorabangs.core.designsystem.component.topbar
 
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 
 object DoraTopBar : TopAppBarType {
@@ -15,7 +14,7 @@ object DoraTopBar : TopAppBarType {
         DoraTopAppBar(
             modifier = modifier,
             title = title,
-            titleAlignment = Alignment.CenterStart,
+            isTitleCenter = false,
             actionIcon = actionIcon,
             onClickActonIcon = onClickActonIcon,
         )
@@ -25,13 +24,13 @@ object DoraTopBar : TopAppBarType {
     override fun BackNavigationTopBar(
         modifier: Modifier,
         title: String,
-        titleAlignment: Alignment,
+        isTitleCenter: Boolean,
         onClickBackIcon: () -> Unit,
     ) {
         DoraTopAppBar(
             modifier = modifier,
             title = title,
-            titleAlignment = titleAlignment,
+            isTitleCenter = isTitleCenter,
             isEnableBackNavigation = true,
             onClickBackIcon = onClickBackIcon,
         )
@@ -48,7 +47,7 @@ object DoraTopBar : TopAppBarType {
         DoraTopAppBar(
             modifier = modifier,
             title = title,
-            titleAlignment = Alignment.CenterStart,
+            isTitleCenter = false,
             isEnableBackNavigation = true,
             actionIcon = actionIcon,
             onClickBackIcon = onClickBackIcon,
@@ -64,7 +63,7 @@ object DoraTopBar : TopAppBarType {
         DoraTopAppBar(
             modifier = modifier,
             title = title,
-            titleAlignment = Alignment.Center,
+            isTitleCenter = true,
         )
     }
 }
@@ -82,7 +81,7 @@ sealed interface TopAppBarType {
     fun BackNavigationTopBar(
         modifier: Modifier,
         title: String,
-        titleAlignment: Alignment,
+        isTitleCenter: Boolean,
         onClickBackIcon: () -> Unit,
     )
 

core/navigation/src/main/java/com/mashup/core/navigation/NavigationRoute.kt

@@ -2,5 +2,7 @@ package com.mashup.core.navigation
 
 sealed class NavigationRoute(val route: String) {
     object HomeScreen : NavigationRoute("home")
-    object StorageScreen : NavigationRoute("storage")
+    object StorageScreen : NavigationRoute("storage") {
+        object StorageDetailScreen : NavigationRoute("storage/detail")
+    }
 }

feature/home/src/main/java/com/mashup/dorabangs/feature/home/HomeScreen.kt

@@ -111,7 +111,7 @@ fun HomeScreen(
             DoraTopAppBar(
                 modifier = Modifier.fillMaxWidth(),
                 title = "Logo",
-                titleAlignment = Alignment.CenterStart,
+                isTitleCenter = false,
                 actionIcon = R.drawable.ic_plus,
             )
 

feature/save/src/main/java/com/dorabangs/feature/save/DoraLinkSaveScreen.kt

@@ -8,7 +8,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -31,7 +30,7 @@ fun DoraLinkSaveScreen(
         DoraTopBar.BackNavigationTopBar(
             modifier = Modifier,
             title = stringResource(id = R.string.link_save_title_text),
-            titleAlignment = Alignment.Center,
+            isTitleCenter = true,
             onClickBackIcon = onClickBackIcon,
         )
         Spacer(modifier = Modifier.height(height = 24.dp))

feature/storage/src/main/java/com/mashup/dorabangs/feature/storage/navigation/StorageDetailNavigation.kt

@@ -0,0 +1,21 @@
+package com.mashup.dorabangs.feature.storage.navigation
+
+import androidx.navigation.NavController
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.compose.composable
+import com.mashup.core.navigation.NavigationRoute
+import com.mashup.dorabangs.feature.storage.storagedetail.StorageDetailRoute
+
+fun NavController.navigateToStorageDetail() = navigate(NavigationRoute.StorageScreen.StorageDetailScreen.route)
+
+fun NavGraphBuilder.storageDetailNavigation(navController: NavController) {
+    composable(
+        route = NavigationRoute.StorageScreen.StorageDetailScreen.route,
+    ) {
+        StorageDetailRoute(
+            onClickBackIcon = {
+                navController.popBackStack()
+            },
+        )
+    }
+}

feature/storage/src/main/java/com/mashup/dorabangs/feature/storage/navigation/StorageNavigation.kt

@@ -9,10 +9,14 @@ import com.mashup.dorabangs.feature.storage.storage.StorageRoute
 
 fun NavController.navigateToStorage(navOptions: NavOptions) = navigate(NavigationRoute.StorageScreen.route, navOptions)
 
-fun NavGraphBuilder.storageNavigation() {
+fun NavGraphBuilder.storageNavigation(navController: NavController) {
     composable(
         route = NavigationRoute.StorageScreen.route,
     ) {
-        StorageRoute()
+        StorageRoute(
+            navigateToStorageDetail = { selectItem ->
+                navController.navigateToStorageDetail()
+            },
+        )
     }
 }