Merge pull request #7 from AND-SOPT-ANDROID/feat-week3

[WEEK3] 3주차 필수과제 구현
AND-SOPT-ANDROID · Nov 4, 2024 · 9857a60 · 9857a60
2 parents c20ce9d + 2e3b9be
commit 9857a60
Show file tree

Hide file tree

Showing 15 changed files with 95 additions and 93 deletions.
diff --git a/app/src/main/java/org/sopt/and/presentation/ui/auth/login/LoginRoute.kt b/app/src/main/java/org/sopt/and/presentation/ui/auth/login/LoginRoute.kt
@@ -12,17 +12,18 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import kotlinx.coroutines.launch
 import org.sopt.and.R
 
 @Composable
 fun LoginRoute(
     paddingValues: PaddingValues,
-    loginViewModel: LoginViewModel = hiltViewModel(),
     navigateToRegister: () -> Unit,
-    navigateToHome: () -> Unit
+    navigateToHome: () -> Unit,
+    loginViewModel: LoginViewModel = hiltViewModel()
 ) {
-    val loginState by loginViewModel.uiState.collectAsState()
+    val loginState by loginViewModel.uiState.collectAsStateWithLifecycle()
     val loginEffect = loginViewModel.uiEffect
 
     val snackBarHostState = remember { SnackbarHostState() }

diff --git a/app/src/main/java/org/sopt/and/presentation/ui/auth/login/LoginScreen.kt b/app/src/main/java/org/sopt/and/presentation/ui/auth/login/LoginScreen.kt
@@ -33,7 +33,6 @@ import timber.log.Timber
 
 @Composable
 fun LoginScreen(
-    modifier: Modifier = Modifier,
     email: String,
     password: String,
     showPassword: Boolean,
@@ -42,7 +41,8 @@ fun LoginScreen(
     onPasswordVisibilityChange: () -> Unit,
     onLoginBtnClick: () -> Unit,
     onNavigateToRegisterBtnClick: () -> Unit,
-    snackBarHostState: SnackbarHostState
+    snackBarHostState: SnackbarHostState,
+    modifier: Modifier = Modifier
 ) {
     Box(
         modifier = modifier

diff --git a/app/src/main/java/org/sopt/and/presentation/ui/auth/register/RegisterRoute.kt b/app/src/main/java/org/sopt/and/presentation/ui/auth/register/RegisterRoute.kt
@@ -10,15 +10,16 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import org.sopt.and.R
 import org.sopt.and.util.showToast
 
 @Composable
 fun RegisterRoute(
-    registerViewModel: RegisterViewModel = hiltViewModel(),
-    navigateToLogin: () -> Unit
+    navigateToLogin: () -> Unit,
+    registerViewModel: RegisterViewModel = hiltViewModel()
 ) {
-    val registerState by registerViewModel.uiState.collectAsState()
+    val registerState by registerViewModel.uiState.collectAsStateWithLifecycle()
     val registerEffect = registerViewModel.uiEffect
 
     val context = LocalContext.current

diff --git a/app/src/main/java/org/sopt/and/presentation/ui/auth/register/RegisterScreen.kt b/app/src/main/java/org/sopt/and/presentation/ui/auth/register/RegisterScreen.kt
@@ -33,7 +33,6 @@ import org.sopt.and.ui.theme.White
 
 @Composable
 fun RegisterScreen(
-    modifier: Modifier = Modifier,
     email: String,
     password: String,
     showPassword: Boolean,
@@ -42,6 +41,7 @@ fun RegisterScreen(
     onPasswordVisibilityChange: () -> Unit,
     onBackBtnClick: () -> Unit,
     onRegisterBtnClick: () -> Unit,
+    modifier: Modifier = Modifier
 ) {
 
     Column(

diff --git a/app/src/main/java/org/sopt/and/presentation/ui/component/WaveAllButton.kt b/app/src/main/java/org/sopt/and/presentation/ui/component/WaveAllButton.kt
@@ -19,9 +19,9 @@ import timber.log.Timber
 @Composable
 fun WaveAllButton(
     buttonText: String,
-    buttonColor: Color = BlueButton,
     onClickButton: () -> Unit,
     modifier: Modifier = Modifier,
+    buttonColor: Color = BlueButton
 ) {
     Button(
         modifier = Modifier

diff --git a/app/src/main/java/org/sopt/and/presentation/ui/component/WaveTextField.kt b/app/src/main/java/org/sopt/and/presentation/ui/component/WaveTextField.kt
@@ -24,8 +24,8 @@ import org.sopt.and.ui.theme.White
 fun WaveTextField(
     placeholder: String,
     value: String,
-    onValueChange: (String) -> Unit = { _ -> },
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    onValueChange: (String) -> Unit = { _ -> }
 ) {
     TextField(
         value = value,

diff --git a/app/src/main/java/org/sopt/and/presentation/ui/component/WaveTextFieldWithShowAndHide.kt b/app/src/main/java/org/sopt/and/presentation/ui/component/WaveTextFieldWithShowAndHide.kt
@@ -29,10 +29,10 @@ import org.sopt.and.ui.theme.White
 fun WaveTextFieldWithShowAndHide(
     placeholder: String,
     value: String,
-    modifier: Modifier = Modifier,
+    changePasswordVisibility: () -> Unit,
     onValueChange: (String) -> Unit = { _ -> },
     showPassword: Boolean = false,
-    changePasswordVisibility: () -> Unit
+    modifier: Modifier = Modifier
 ) {
     TextField(
         value = value,

diff --git a/app/src/main/java/org/sopt/and/presentation/ui/home/HomeRoute.kt b/app/src/main/java/org/sopt/and/presentation/ui/home/HomeRoute.kt
@@ -4,25 +4,22 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 
 @Composable
 fun HomeRoute(
     paddingValues: PaddingValues,
     homeViewModel: HomeViewModel = hiltViewModel()
 ) {
-    val homeState by homeViewModel.uiState.collectAsState()
+    val homeState by homeViewModel.uiState.collectAsStateWithLifecycle()
 
-    LaunchedEffect(homeState.homeStatus) {
-        if (homeState.homeStatus == HomeContract.HomeStatus.Idle) {
-            homeViewModel.setHomeImgList()
-        }
+    LaunchedEffect(Unit) {
+       homeViewModel.setHomeImgList()
     }
 
-
     HomeScreen(
         modifier = Modifier
             .padding(paddingValues),

diff --git a/app/src/main/java/org/sopt/and/presentation/ui/home/HomeScreen.kt b/app/src/main/java/org/sopt/and/presentation/ui/home/HomeScreen.kt
@@ -6,11 +6,13 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.pager.HorizontalPager
@@ -24,31 +26,28 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalConfiguration
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import coil3.compose.AsyncImage
-import coil3.request.ImageRequest
-import coil3.request.crossfade
 import org.sopt.and.R
 import org.sopt.and.presentation.ui.component.TextWithNavigateButton
+import org.sopt.and.presentation.ui.home.component.HomeAsyncImage
 import org.sopt.and.ui.theme.ANDANDROIDTheme
 import org.sopt.and.ui.theme.Gray100
 import org.sopt.and.ui.theme.GrayBlack
 import org.sopt.and.ui.theme.White
 
 @Composable
 fun HomeScreen(
-    modifier: Modifier = Modifier,
     bannerImgList: List<String>,
     numPages: String,
     onCurrentPageChanged: (Int) -> Unit,
     editorRecommendedImgList: List<String>,
-    todayTopRankingImgList: List<String>
+    todayTopRankingImgList: List<String>,
+    modifier: Modifier = Modifier
 ) {
     Column(
         modifier = modifier
@@ -86,10 +85,10 @@ fun HomeScreen(
             contentPadding = PaddingValues(horizontal = 16.dp),
             horizontalArrangement = Arrangement.spacedBy(12.dp)
         ) {
-            itemsIndexed(editorRecommendedImgList,
-                key = { index, _ -> index },
-                contentType = { _, item -> item }
-            ) { index, item ->
+            itemsIndexed(
+                editorRecommendedImgList,
+                key = { index, _ -> index }
+            ) { _, item ->
                 EditorRecommendedItem(recommendedItem = item)
             }
         }
@@ -104,9 +103,9 @@ fun HomeScreen(
             contentPadding = PaddingValues(horizontal = 16.dp),
             horizontalArrangement = Arrangement.spacedBy(12.dp)
         ) {
-            itemsIndexed(todayTopRankingImgList,
-                key = { index, _ -> index },
-                contentType = { _, item -> item }
+            itemsIndexed(
+                todayTopRankingImgList,
+                key = { _, item -> item }
             ) { index, item ->
                 TodayTopRankingImgList(ranking = index, rankingItem = item)
             }
@@ -128,14 +127,8 @@ fun HomeBannerItem(
             .fillMaxWidth()
             .clip(RoundedCornerShape(15.dp))
     ) {
-        AsyncImage(
-            model = ImageRequest.Builder(context = LocalContext.current)
-                .data(bannerImg)
-                .crossfade(enable = true)
-                .build(),
-            contentDescription = null,
-            contentScale = ContentScale.Crop,
-            modifier = Modifier.fillMaxWidth()
+        HomeAsyncImage(
+            imgUrl = bannerImg
         )
 
         HomeBannerItemCountText(
@@ -172,17 +165,14 @@ fun HomeBannerItemCountText(
 fun EditorRecommendedItem(
     recommendedItem: String
 ) {
-    AsyncImage(
-        model = ImageRequest.Builder(context = LocalContext.current)
-            .data(recommendedItem)
-            .crossfade(enable = true)
-            .build(),
-        contentDescription = null,
-        contentScale = ContentScale.Crop,
+    val imageWidth = (LocalConfiguration.current.screenWidthDp.dp) / 3
+
+    HomeAsyncImage(
+        imgUrl = recommendedItem,
         modifier = Modifier
-            .fillMaxWidth()
+            .width(imageWidth)
             .clip(RoundedCornerShape(15.dp))
-            .size(width = 144.dp, height = 192.dp)
+            .aspectRatio(3f / 4f)
     )
 }
 
@@ -191,29 +181,28 @@ fun TodayTopRankingImgList(
     ranking: Int,
     rankingItem: String,
 ) {
+    val imageWidth = (LocalConfiguration.current.screenWidthDp.dp) / 2
+
     Box(
         modifier = Modifier
-            .fillMaxWidth()
+            .padding(start = 10.dp, bottom = 28.dp)
     ) {
-        AsyncImage(
-            model = ImageRequest.Builder(context = LocalContext.current)
-                .data(rankingItem)
-                .crossfade(enable = true)
-                .build(),
-            contentDescription = null,
-            contentScale = ContentScale.Crop,
+        HomeAsyncImage(
+            imgUrl = rankingItem,
             modifier = Modifier
-                .fillMaxWidth()
+                .width(imageWidth)
                 .clip(RoundedCornerShape(15.dp))
-                .size(width = 180.dp, height = 240.dp)
+                .aspectRatio(3f / 4f)
         )
 
         Text(
             text = (ranking + 1).toString(),
             color = White,
             fontSize = 42.sp,
+            fontStyle = FontStyle.Italic,
             modifier = Modifier
                 .align(Alignment.BottomStart)
+                .offset(x = (-10).dp, y = 28.dp)
         )
     }
 }

diff --git a/app/src/main/java/org/sopt/and/presentation/ui/home/HomeViewModel.kt b/app/src/main/java/org/sopt/and/presentation/ui/home/HomeViewModel.kt
@@ -20,7 +20,7 @@ class HomeViewModel @Inject constructor() :
         TODO("Not yet implemented")
     }
 
-    val mockBannerItem = listOf(
+    private val mockBannerItem = listOf(
         "https://image.wavve.com/v1/thumbnails/480_720_20_80/meta/image/202409/1726468505828994516.webp",
         "https://image.wavve.com/v1/thumbnails/480_720_20_80/meta/image/202409/1727073001312600950.webp",
         "https://image.wavve.com/v1/thumbnails/480_720_20_80/meta/image/202410/1728548543503727711.webp",
@@ -29,7 +29,7 @@ class HomeViewModel @Inject constructor() :
         "https://image.wavve.com/v1/thumbnails/480_720_20_80/meta/image/202409/1725362669902656119.webp"
     )
 
-    val mockEditorRecommendedItem = listOf(
+    private val mockEditorRecommendedItem = listOf(
         "https://image.wavve.com/v1/thumbnails/480_720_20_80/meta/image/202410/1729230112230270084.webp",
         "https://image.wavve.com/v1/thumbnails/480_720_20_80/meta/image/202406/1717859400991205300.webp",
         "https://image.wavve.com/v1/thumbnails/480_720_20_80/BMS/TVSeason/2023/K01_T2009-0520-2.webp",
@@ -40,7 +40,7 @@ class HomeViewModel @Inject constructor() :
         "https://image.wavve.com/v1/thumbnails/480_720_20_80/movieImg/MovieGroup/2023/GMV_CD01_WR0000011336-Vertical_LogoY_RTC.webp"
     )
 
-    val mockTodayTopRankingItem = listOf(
+    private val mockTodayTopRankingItem = listOf(
         "https://image.wavve.com/v1/thumbnails/480_720_20_80/meta/image/202409/1726468463104944317.webp",
         "https://image.wavve.com/v1/thumbnails/480_720_20_80/meta/image/202311/1698908212143109040.webp",
         "https://image.wavve.com/v1/thumbnails/480_720_20_80/meta/image/202311/1701072276533128034.webp",
@@ -58,22 +58,13 @@ class HomeViewModel @Inject constructor() :
     }
 
     fun setHomeImgList() {
-        setHomeBannerState()
-        setEditorRecommendState()
-        setTodayTopRankingState()
-
-        setState(currentUiState.copy(homeStatus = HomeContract.HomeStatus.Success))
-    }
-
-    private fun setHomeBannerState() {
-        setState(currentUiState.copy(bannerImgList = mockBannerItem))
-    }
-
-    private fun setEditorRecommendState() {
-        setState(currentUiState.copy(editorRecommendedList = mockEditorRecommendedItem))
-    }
-
-    private fun setTodayTopRankingState() {
-        setState(currentUiState.copy(todayTopRankingList = mockTodayTopRankingItem))
+        setState(
+            currentUiState.copy(
+                homeStatus = HomeContract.HomeStatus.Success,
+                bannerImgList = mockBannerItem,
+                editorRecommendedList = mockEditorRecommendedItem,
+                todayTopRankingList = mockTodayTopRankingItem
+            )
+        )
     }
 }
diff --git a/app/src/main/java/org/sopt/and/presentation/ui/home/component/HomeAsyncImage.kt b/app/src/main/java/org/sopt/and/presentation/ui/home/component/HomeAsyncImage.kt
@@ -0,0 +1,26 @@
+package org.sopt.and.presentation.ui.home.component
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import coil3.compose.AsyncImage
+import coil3.request.ImageRequest
+import coil3.request.crossfade
+
+@Composable
+fun HomeAsyncImage(
+    imgUrl: String,
+    modifier: Modifier = Modifier
+) {
+    AsyncImage(
+        model = ImageRequest.Builder(context = LocalContext.current)
+            .data(imgUrl)
+            .crossfade(enable = true)
+            .build(),
+        contentDescription = null,
+        contentScale = ContentScale.Crop,
+        modifier = modifier.fillMaxWidth()
+    )
+}