Merge pull request #30 from Yoon-Chan/list/contents

List/contents

presentation/src/main/java/com/example/presentation/component/ImagePager.kt

@@ -0,0 +1,78 @@
+package com.example.presentation.component
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+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.layout.ContentScale
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import coil.compose.rememberAsyncImagePainter
+import com.example.presentation.ui.theme.SnsProjectTheme
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun ImagePager(
+    modifier: Modifier,
+    images: List<String>,
+    pagerState: PagerState,
+) {
+    Box(
+        modifier = modifier,
+    ) {
+        HorizontalPager(
+            state = pagerState,
+        ) { index ->
+            val image = images[index]
+            Image(
+                modifier = Modifier.fillMaxSize(),
+                painter = rememberAsyncImagePainter(model = image),
+                contentDescription = "",
+                contentScale = ContentScale.Crop,
+            )
+        }
+
+        Box(
+            modifier =
+                Modifier
+                    .align(Alignment.TopEnd)
+                    .padding(8.dp)
+                    .background(MaterialTheme.colorScheme.primary, shape = RoundedCornerShape(8.dp)),
+        ) {
+            Text(
+                modifier = Modifier.padding(horizontal = 4.dp, vertical = 2.dp),
+                text = "${pagerState.currentPage + 1} / ${images.size}",
+                style = MaterialTheme.typography.labelSmall,
+                color = Color.White,
+            )
+        }
+    }
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Preview
+@Composable
+private fun ImagePagerPreview() {
+    SnsProjectTheme {
+        ImagePager(
+            modifier = Modifier,
+            images = listOf(),
+            pagerState =
+                rememberPagerState(
+                    pageCount = { 10 },
+                ),
+        )
+    }
+}

presentation/src/main/java/com/example/presentation/main/writing/ImageSelectScreen.kt

@@ -37,14 +37,18 @@ import com.example.presentation.ui.theme.SnsProjectTheme
 import org.orbitmvi.orbit.compose.collectAsState
 
 @Composable
-fun ImageSelectScreen(viewModel: WritingViewModel) {
+fun ImageSelectScreen(
+    viewModel: WritingViewModel,
+    onBackClick: () -> Unit,
+    onNextClick: () -> Unit,
+) {
     val state = viewModel.collectAsState().value
 
     ImageSelectScreen(
         selectImages = state.selectedImages,
         images = state.images,
-        onBackClick = {},
-        onNextClick = {},
+        onBackClick = onBackClick,
+        onNextClick = onNextClick,
         onItemClick = viewModel::onItemClick,
     )
 }

presentation/src/main/java/com/example/presentation/main/writing/WritingActivity.kt

@@ -13,7 +13,7 @@ class WritingActivity : AppCompatActivity() {
 
         setContent {
             SnsProjectTheme {
-                WritingNavHost()
+                WritingNavHost(onFinish = { finish() })
             }
         }
     }

presentation/src/main/java/com/example/presentation/main/writing/WritingNavHost.kt

@@ -7,16 +7,19 @@ import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 
 @Composable
-fun WritingNavHost() {
+fun WritingNavHost(onFinish: () -> Unit) {
     val navController = rememberNavController()
     val sharedViewModel: WritingViewModel = viewModel()
 
     NavHost(navController = navController, startDestination = WritingRoute.IMAGE_SELECT_SCREEN.route) {
         composable(WritingRoute.IMAGE_SELECT_SCREEN.route) {
-            ImageSelectScreen(viewModel = sharedViewModel)
+            ImageSelectScreen(viewModel = sharedViewModel, onNextClick = {
+                navController.navigate(WritingRoute.WRITING_SCREEN.route)
+            }, onBackClick = onFinish)
         }
 
         composable(WritingRoute.WRITING_SCREEN.route) {
+            WritingScreen(viewModel = sharedViewModel, onBackClick = { navController.navigateUp() }, onPostClick = {})
         }
     }
 }

presentation/src/main/java/com/example/presentation/main/writing/WritingScreen.kt

@@ -0,0 +1,125 @@
+package com.example.presentation.main.writing
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import com.example.presentation.component.ImagePager
+import com.example.presentation.component.LoginTextField
+import com.example.presentation.ui.theme.SnsProjectTheme
+import org.orbitmvi.orbit.compose.collectAsState
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun WritingScreen(
+    viewModel: WritingViewModel,
+    onBackClick: () -> Unit,
+    onPostClick: () -> Unit,
+) {
+    val state = viewModel.collectAsState().value
+    val pageState =
+        rememberPagerState(
+            initialPage = 0,
+            pageCount = { state.images.size },
+        )
+
+    WritingScreen(
+        images = state.images.map { it.uri },
+        text = state.text,
+        onTextChange = viewModel::onTextChange,
+        pagerState = pageState,
+        onBackClick = onBackClick,
+        onPostClick = viewModel::onPostClick,
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
+@Composable
+fun WritingScreen(
+    images: List<String>,
+    pagerState: PagerState,
+    text: String,
+    onTextChange: (String) -> Unit,
+    onBackClick: () -> Unit,
+    onPostClick: () -> Unit,
+) {
+    Surface {
+        Scaffold(
+            topBar =
+                {
+                    CenterAlignedTopAppBar(
+                        title = {
+                            Text(text = "새 게시물", style = MaterialTheme.typography.headlineSmall)
+                        },
+                        navigationIcon = {
+                            IconButton(onClick = onBackClick) {
+                                Icon(imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "뒤로가기")
+                            }
+                        },
+                        actions = {
+                            TextButton(onClick = onPostClick) {
+                                Text(text = "다음", style = MaterialTheme.typography.bodyMedium, color = Color.Black)
+                            }
+                        },
+                    )
+                },
+            content = { paddingValues ->
+                Column(modifier = Modifier.padding(paddingValues)) {
+                    ImagePager(
+                        modifier =
+                            Modifier
+                                .fillMaxWidth()
+                                .weight(2f),
+                        images = images,
+                        pagerState = pagerState,
+                    )
+
+                    HorizontalDivider()
+
+                    LoginTextField(
+                        modifier =
+                            Modifier
+                                .fillMaxWidth()
+                                .weight(3f),
+                        value = text,
+                        onValueString = onTextChange,
+                    )
+                }
+            },
+        )
+    }
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Preview
+@Composable
+private fun WritingScreenPreview() {
+    SnsProjectTheme {
+        WritingScreen(
+            images = listOf(),
+            text = "",
+            onTextChange = {},
+            pagerState = rememberPagerState(pageCount = { 10 }),
+            onBackClick = {},
+            onPostClick = {},
+        )
+    }
+}

presentation/src/main/java/com/example/presentation/main/writing/WritingViewModel.kt

@@ -9,6 +9,7 @@ import javax.inject.Inject
 import kotlinx.coroutines.CoroutineExceptionHandler
 import org.orbitmvi.orbit.Container
 import org.orbitmvi.orbit.ContainerHost
+import org.orbitmvi.orbit.syntax.simple.blockingIntent
 import org.orbitmvi.orbit.syntax.simple.intent
 import org.orbitmvi.orbit.syntax.simple.postSideEffect
 import org.orbitmvi.orbit.syntax.simple.reduce
@@ -58,12 +59,27 @@ class WritingViewModel
                     }
                 }
             }
+
+        fun onTextChange(text: String) =
+            blockingIntent {
+                reduce {
+                    state.copy(text = text)
+                }
+            }
+
+        fun onPostClick() =
+            intent {
+//         val writingState = state
+//
+                // TODO: 업로드 기능 구현
+            }
     }
 
 @Immutable
 data class WritingState(
     val selectedImages: List<Image> = listOf(),
     val images: List<Image> = listOf(),
+    val text: String = "",
 )
 
 sealed interface WritingSideEffect {