[FIX/#47] 갤러리 화면 QA기반 오류 해결

app/src/main/java/com/sopt/shinmungo/core/designsystem/component/topbar/CommonTopBar.kt

@@ -1,9 +1,11 @@
 package com.sopt.shinmungo.core.designsystem.component.topbar
 
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
@@ -12,6 +14,7 @@ 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.graphics.Color
 import androidx.compose.ui.res.painterResource
@@ -37,34 +40,45 @@ fun CommonTopBar(
 ) {
     TopAppBar(
         modifier = Modifier.fillMaxWidth(),
-        windowInsets = WindowInsets(left = 8.dp, right = 8.dp),
+        windowInsets = WindowInsets(0.dp),
         colors = TopAppBarDefaults.topAppBarColors(
             containerColor = ShinMunGoTheme.color.primary,
             titleContentColor = Color.White,
             navigationIconContentColor = ShinMunGoTheme.color.gray1
         ),
         title = {
-            Text(
-                text = title,
-                style = ShinMunGoTheme.typography.heading2,
-                modifier = Modifier.fillMaxWidth(),
-                textAlign = TextAlign.Center
-            )
-        },
-        navigationIcon = {
-            Row(
-                horizontalArrangement = Arrangement.spacedBy(8.dp)
+            Box(
+                modifier = Modifier
+                    .padding(end = 8.dp)
+                    .fillMaxWidth()
             ) {
-                onLeftContent()
+                Row(
+                    modifier = Modifier.align(Alignment.CenterStart),
+                    horizontalArrangement = Arrangement.spacedBy(8.dp)
+                ) {
+                    onLeftContent()
+                }
+
+                Text(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .align(Alignment.Center),
+                    text = title,
+                    style = ShinMunGoTheme.typography.heading2,
+                    textAlign = TextAlign.Center
+                )
+
+                Row(
+                    modifier = Modifier.align(Alignment.CenterEnd),
+                    horizontalArrangement = Arrangement.spacedBy(8.dp)
+                ) {
+                    onRightContent()
+                }
             }
         },
-        actions = {
-            Row(
-                horizontalArrangement = Arrangement.spacedBy(8.dp)
-            ) {
-                onRightContent()
-            }
-        }
+        navigationIcon = { },
+        actions = { },
+
     )
 }
 
@@ -85,17 +99,6 @@ fun CommonTopBarPreview() {
                         tint = ShinMunGoTheme.color.gray1
                     )
                 }
-                IconButton(
-                    modifier = Modifier.size(24.dp),
-                    onClick = { }) {
-                    Icon(
-                        painter = painterResource(id = R.drawable.ic_arrow_left_line_white_24),
-                        contentDescription = "Back",
-                        modifier = Modifier.size(24.dp),
-                        tint = ShinMunGoTheme.color.gray1
-                    )
-                }
-
             },
             onRightContent = {
                 IconButton(

app/src/main/java/com/sopt/shinmungo/presentation/gallery/GalleryScreen.kt

@@ -8,13 +8,15 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -39,6 +41,7 @@ import com.sopt.shinmungo.presentation.gallery.component.AlertMessageBox
 import com.sopt.shinmungo.presentation.gallery.component.CustomTabRow
 import com.sopt.shinmungo.presentation.gallery.component.PhotoCard
 import com.sopt.shinmungo.presentation.gallery.component.PhotoDateTitle
+import com.sopt.shinmungo.presentation.report.type.ReportDialogType
 
 @Composable
 fun GalleryScreen(
@@ -58,15 +61,19 @@ fun GalleryScreen(
     Column(
         modifier = modifier
             .fillMaxSize()
-            .background(ShinMunGoTheme.color.gray1),
-        horizontalAlignment = Alignment.CenterHorizontally) {
+            .background(ShinMunGoTheme.color.gray1)
+    ) {
         CommonTopBar(
             title = stringResource(R.string.gallery_topbar_title),
             onLeftContent = {
-                IconButton(onClick = onBackClick) {
+                IconButton(
+                    modifier = Modifier.size(24.dp),
+                    onClick = onBackClick
+                ) {
                     Icon(
                         imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_left_line_white_24),
                         contentDescription = stringResource(R.string.back_screen_text),
+                        modifier = Modifier.size(24.dp),
                         tint = Color.White
                     )
                 }
@@ -92,65 +99,80 @@ fun GalleryScreen(
                     .weight(1f)
                     .fillMaxWidth()
             ) {
-                LazyVerticalGrid(
-                    columns = GridCells.Fixed(3),
-                    modifier = Modifier
-                        .fillMaxSize()
-                        .padding(horizontal = 16.dp)
-                        .padding(top = 8.dp),
-                    contentPadding = PaddingValues(1.dp),
+                when(selectedTab) {
+                    0 -> {
+                        LazyVerticalGrid(
+                            columns = GridCells.Fixed(3),
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .padding(horizontal = 16.dp)
+                                .padding(top = 8.dp),
+                            contentPadding = PaddingValues(1.dp),
 
-                    ) {
-                    item(span = { GridItemSpan(3) }) {
-                        AlertMessageBox(
-                            message = stringResource(R.string.gallery_alert_caption_text),
-                            iconRes = R.drawable.ic_alert_line_red_16,
-                            backgroundColor = ShinMunGoTheme.color.opacityGray13Per5,
-                            textColor = ShinMunGoTheme.color.primaryRed
-                        )
-                    }
+                            ) {
+                            item(span = { GridItemSpan(3) }) {
+                                AlertMessageBox(
+                                    message = stringResource(R.string.gallery_alert_caption_text),
+                                    iconRes = R.drawable.ic_alert_line_red_16,
+                                    backgroundColor = ShinMunGoTheme.color.opacityGray13Per5,
+                                    textColor = ShinMunGoTheme.color.primaryRed
+                                )
+                            }
 
-                    uiState.photos.forEach { (date, photos) ->
-                        item(span = { GridItemSpan(3) }) {
-                            PhotoDateTitle(
-                                date = date
-                            )
-                        }
+                            uiState.photos.forEach { (date, photos) ->
+                                item(span = { GridItemSpan(3) }) {
+                                    PhotoDateTitle(
+                                        date = date
+                                    )
+                                }
 
-                        items(photos.size) { index ->
-                            val photo = photos[index]
-                            PhotoCard(
-                                photo = photo,
-                                isSelected = photo.id in uiState.selectedPhotos,
-                                onPhotoClick = { onPhotoClick(photo.id) },
-                                onCheckboxClick = {
-                                    if (photo.id in uiState.selectedPhotos) {
-                                        viewModel.onEvent(GalleryEvent.DeselectPhoto(photo.id))
-                                    } else {
-                                        viewModel.onEvent(GalleryEvent.SelectPhoto(photo.id))
-                                    }
+                                items(photos.size) { index ->
+                                    val photo = photos[index]
+                                    PhotoCard(
+                                        photo = photo,
+                                        isSelected = photo.id in uiState.selectedPhotos,
+                                        onPhotoClick = { onPhotoClick(photo.id) },
+                                        onCheckboxClick = {
+                                            if (photo.id in uiState.selectedPhotos) {
+                                                viewModel.onEvent(GalleryEvent.DeselectPhoto(photo.id))
+                                            } else {
+                                                viewModel.onEvent(GalleryEvent.SelectPhoto(photo.id))
+                                            }
+                                        }
+                                    )
                                 }
+                            }
+                        }
+                    }
+                    1 -> {
+                        Box(
+                            modifier = Modifier.fillMaxSize(),
+                            contentAlignment = Alignment.Center
+                        ) {
+                            Text(
+                                text = stringResource(R.string.gallery_empty_video_text),
+                                style = ShinMunGoTheme.typography.body3,
+                                color = ShinMunGoTheme.color.gray6
                             )
                         }
                     }
                 }
             }
         }
 
-        Row(
+        Box(
             modifier = Modifier
-                .padding(horizontal = 16.dp)
-                .padding(top = 8.dp)
                 .fillMaxWidth()
+                .padding(horizontal = 24.dp)
+                .padding(top = 8.dp, bottom = 32.dp)
         ) {
             RoundedCornerTextButton(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(16.dp),
+                    .padding(10.dp),
                 text = stringResource(R.string.gallery_use_button_text),
-                textStyle = ShinMunGoTheme.typography.body4,
+                textStyle = ShinMunGoTheme.typography.heading1,
                 textColor = ShinMunGoTheme.color.gray1,
-                borderLineColor = null,
                 backgroundColor = ShinMunGoTheme.color.primary,
                 roundedCornerShape = RoundedCornerShape(10.dp),
                 onButtonClick = {

app/src/main/java/com/sopt/shinmungo/presentation/gallery/navigation/GalleryNavigation.kt

@@ -7,6 +7,7 @@ import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavHostController
 import androidx.navigation.NavOptions
 import androidx.navigation.compose.composable
+import androidx.navigation.navOptions
 import androidx.navigation.toRoute
 import com.sopt.shinmungo.presentation.gallery.GalleryDetailScreen
 import com.sopt.shinmungo.presentation.gallery.GalleryScreen
@@ -17,7 +18,12 @@ fun NavHostController.navigateToGallery(navOptions: NavOptions? = null) =
     navigate(route = Gallery, navOptions = navOptions)
 
 fun NavHostController.navigateToGalleryDetail(photoId: Int, navOptions: NavOptions? = null) =
-    navigate(route = GalleryDetail(photoId), navOptions = navOptions)
+    navigate(
+        route = GalleryDetail(photoId),
+        navOptions = navOptions ?: navOptions {
+            launchSingleTop = true
+        }
+    )
 
 fun NavGraphBuilder.galleryScreen(
     navController: NavHostController,
@@ -28,7 +34,7 @@ fun NavGraphBuilder.galleryScreen(
             modifier = modifier,
             onBackClick = { navController.popBackStack() },
             onPhotoClick = { photoId ->
-                navController.navigate(GalleryDetail(photoId))
+                navController.navigateToGalleryDetail(photoId)
             },
             onConfirmClick = { selectedPhotos ->
                 navController.previousBackStackEntry?.savedStateHandle?.set(

app/src/main/res/values/strings.xml

@@ -135,4 +135,5 @@
     <string name="gallery_detail_topbar_title">상세보기</string>
     <string name="gallery_detail_timestamp_prefix_text">촬영 일시     : %s</string>
     <string name="gallery_detail_shinmungo">안전신문고</string>
+    <string name="gallery_empty_video_text">동영상이 없습니다</string>
 </resources>