refactor/#16 : 포토 피커 화면 구성

feature/episode/src/main/java/com/boostcamp/mapisode/episode/EpisodeViewModel.kt

@@ -4,7 +4,9 @@ import com.boostcamp.mapisode.episode.state.EpisodeEffect
 import com.boostcamp.mapisode.episode.state.EpisodeIntent
 import com.boostcamp.mapisode.episode.state.EpisodeState
 import com.boostcamp.mapisode.ui.base.RevisedBaseViewModel
+import com.boostcamp.mapisode.ui.base.retainFirstIfNavigating
 import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.collections.immutable.toPersistentList
 import kotlinx.coroutines.flow.SharedFlow
 import timber.log.Timber
 import javax.inject.Inject
@@ -14,6 +16,22 @@ class EpisodeViewModel @Inject constructor() :
 	RevisedBaseViewModel<EpisodeIntent, EpisodeState, EpisodeEffect>(EpisodeState()) {
 
 	override suspend fun reducer(intent: SharedFlow<EpisodeIntent>) {
+		intent.retainFirstIfNavigating()
+			.collect {
+				when (it) {
+					EpisodeIntent.OnBackClick -> { navigateToBack() }
+					is EpisodeIntent.OnCompletePhotoPicker -> { completePhotoPicker(it.imageUrls) }
+				}
+			}
+	}
+
+	private fun navigateToBack() {
+		sendEffect { EpisodeEffect.NavigateToPreviousScreen }
+	}
+
+	private fun completePhotoPicker(imageUrls: List<String>) {
+		sendState { copy(imageUrls = imageUrls.toPersistentList()) }
+		sendEffect { EpisodeEffect.NavigateToInfoScreen }
 	}
 
 	override fun onCleared() {

feature/episode/src/main/java/com/boostcamp/mapisode/episode/screen/EpisodePhotoScreen.kt

@@ -1,61 +1,61 @@
 package com.boostcamp.mapisode.episode.screen
 
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
+import android.annotation.SuppressLint
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.navigationBars
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.statusBars
-import androidx.compose.material3.Button
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
 import com.boostcamp.mapisode.designsystem.theme.MapisodeTheme
 import com.boostcamp.mapisode.episode.EpisodeViewModel
+import com.boostcamp.mapisode.episode.state.EpisodeEffect
+import com.boostcamp.mapisode.episode.state.EpisodeIntent
+import com.boostcamp.mapisode.ui.photopicker.MapisodePhotoPicker
 
 @Composable
 fun EpisodePhotoRoute(
 	onBackClick: () -> Unit,
 	onCompletePhotoPicker: () -> Unit,
 	viewModel: EpisodeViewModel,
 ) {
+	LaunchedEffect(Unit) {
+		viewModel.effect.collect {
+			when (it) {
+				is EpisodeEffect.NavigateToPreviousScreen -> onBackClick()
+				is EpisodeEffect.NavigateToInfoScreen -> onCompletePhotoPicker()
+			}
+		}
+	}
+
 	EpisodePhotoScreen(
-		onBackClick = onBackClick,
-		onCompletePhotoPicker = onCompletePhotoPicker,
+		onBackClick = { viewModel.sendIntent(EpisodeIntent.OnBackClick) },
+		onSetImages = { images -> viewModel.sendIntent(EpisodeIntent.OnCompletePhotoPicker(images)) },
 	)
 }
 
+@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
 @Composable
 fun EpisodePhotoScreen(
 	onBackClick: () -> Unit,
-	onCompletePhotoPicker: () -> Unit,
+	onSetImages: (List<String>) -> Unit,
 ) {
 	Scaffold(
-		modifier = Modifier
-			.fillMaxSize()
-			.padding(
-				top = WindowInsets.statusBars.asPaddingValues().calculateTopPadding(),
-				bottom = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding(),
-			),
-		topBar = { EpisodeTopBar(title = "사진 선택", onBackClick = onBackClick) },
+		modifier = Modifier,
 		containerColor = MapisodeTheme.colorScheme.scaffoldBackground,
 	) {
-		Column(
-			modifier = Modifier
-				.fillMaxSize()
-				.padding(it.calculateTopPadding()),
-			horizontalAlignment = Alignment.CenterHorizontally,
-			verticalArrangement = Arrangement.Center,
+		Box(
+			modifier = Modifier.fillMaxSize(),
 		) {
-			Button(
-				onClick = onCompletePhotoPicker,
-			) {
-				Text(text = "Back")
-			}
+			MapisodePhotoPicker(
+				numOfPhoto = 4,
+				onPhotoSelected = { photos ->
+					val uris = photos.map { it.uri }
+					onSetImages(uris)
+				},
+				onBackPressed = { onBackClick() },
+				onPermissionDenied = { onBackClick() },
+			)
 		}
 	}
 }

feature/episode/src/main/java/com/boostcamp/mapisode/episode/state/EpisodeIntent.kt

@@ -6,5 +6,5 @@ import com.boostcamp.mapisode.ui.base.UiIntent
 @Immutable
 sealed class EpisodeIntent : UiIntent {
 	data object OnBackClick : EpisodeIntent()
-	data class OnCompletePhotoPicker(val imageUrl: String) : EpisodeIntent()
+	data class OnCompletePhotoPicker(val imageUrls: List<String>) : EpisodeIntent()
 }

feature/episode/src/main/java/com/boostcamp/mapisode/episode/state/EpisodeState.kt

@@ -9,5 +9,6 @@ import kotlinx.collections.immutable.persistentListOf
 @Immutable
 data class EpisodeState(
 	val isInitializing: Boolean = true,
+	val imageUrls: PersistentList<String> = persistentListOf(),
 	val groups: PersistentList<GroupModel> = persistentListOf(),
 ) : UiState