Merge pull request #40 from NOW-SOPT-APP4-KREAM/feat-view1-delete-scr…

…ap-compose

[feat] 발매 정보 뷰 인디케이터 구현

app/build.gradle.kts

@@ -83,6 +83,9 @@ dependencies {
     implementation(libs.bundles.okhttp)
     implementation(libs.bundles.retrofit)
     implementation(libs.kotlin.serialization.json)
+    implementation(libs.androidx.foundation.v167)
+    implementation(libs.androidx.material)
+    implementation(libs.accompanist.pager.v0160)
 
     // Pager
     implementation(libs.accompanist.pager.v02413rc)

app/src/main/java/org/sopt/kream/presentation/ui/main/home/release/ReleaseAdvertisementViewPager.kt

@@ -2,8 +2,10 @@ package org.sopt.kream.presentation.ui.main.home.release
 
 import android.annotation.SuppressLint
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
@@ -12,6 +14,10 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.material.Tab
+import androidx.compose.material.TabRow
+import androidx.compose.material.TabRowDefaults
+import androidx.compose.material.TabRowDefaults.tabIndicatorOffset
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -20,12 +26,14 @@ import androidx.compose.runtime.mutableLongStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import com.google.accompanist.pager.ExperimentalPagerApi
 import com.google.accompanist.pager.HorizontalPager
 import com.google.accompanist.pager.rememberPagerState
 import kotlinx.coroutines.delay
+import org.sopt.kream.R
 import org.sopt.kream.presentation.ui.model.Advertisement
 import org.sopt.kream.theme.robotoBold
 import java.util.concurrent.TimeUnit
@@ -38,23 +46,52 @@ fun ReleaseAdvertisementViewPager(
 ) {
     val pagerState = rememberPagerState()
 
-    HorizontalPager(
-        count = advertisements.size,
-        state = pagerState,
-        modifier = Modifier.height(327.dp),
-    ) { page ->
-        val advertisement = advertisements[page]
+    Box {
+        HorizontalPager(
+            count = advertisements.size,
+            state = pagerState,
+            modifier = Modifier.height(327.dp),
+        ) { page ->
+            val advertisement = advertisements[page]
 
-        Box {
-            Advertisement(
-                imgResource = advertisement.imgResource,
-                modifier =
-                    Modifier
-                        .fillMaxSize()
-                        .aspectRatio(1f),
-            )
-            if (page == 0) {
-                CountdownTimer(targetTimeInMillis, textStyle = robotoBold)
+            Box {
+                Advertisement(
+                    imgResource = advertisement.imgResource,
+                    modifier =
+                        Modifier
+                            .fillMaxSize()
+                            .aspectRatio(1f),
+                )
+                if (page == 0) {
+                    CountdownTimer(targetTimeInMillis, textStyle = robotoBold)
+                }
+            }
+        }
+
+        Column(modifier = Modifier.fillMaxWidth()) {
+            Spacer(modifier = Modifier.height(310.dp))
+
+            TabRow(
+                selectedTabIndex = pagerState.currentPage,
+                modifier = Modifier.height(2.dp).fillMaxWidth().padding(start = 14.dp).padding(end = 14.dp),
+                backgroundColor = colorResource(id = R.color.gray04),
+                indicator = { tabPositions ->
+                    TabRowDefaults.Indicator(
+                        Modifier
+                            .tabIndicatorOffset(tabPositions[pagerState.currentPage])
+                            .height(2.dp)
+                            .background(colorResource(id = R.color.black01)),
+                    )
+                },
+                divider = {},
+            ) {
+                advertisements.forEachIndexed { index, _ ->
+                    Tab(
+                        selected = pagerState.currentPage == index,
+                        onClick = { },
+                        modifier = Modifier.height(2.dp),
+                    ) {}
+                }
             }
         }
     }

app/src/main/java/org/sopt/kream/presentation/ui/main/home/release/ReleaseProductViewModel.kt

@@ -29,20 +29,19 @@ class ReleaseProductViewModel(
     private val _postScrapState = MutableStateFlow<UiState<Int>>(UiState.Empty)
     val postScrapState get() = _postScrapState.asStateFlow()
 
-    private val _deleteScrapState = MutableStateFlow<UiState<Int>>(UiState.Empty)
-    val deleteScrapState get() = _postScrapState.asStateFlow()
+    private val deleteScrapState =
+        MutableStateFlow<UiState<Int>>(UiState.Empty)
 
-    private val _productList = MutableStateFlow<List<ResponseReleaseProductDto.ReleaseProductResponseDto>>(listOf())
-
-    val productList get() = _productList.asStateFlow()
+    private val productList =
+        MutableStateFlow<List<ResponseReleaseProductDto.ReleaseProductResponseDto>>(listOf())
 
     fun getReleaseProduct() {
         viewModelScope.launch {
             runCatching {
                 authService.getReleaseProduct(MEMBER_ID)
             }.onSuccess {
                 _getReleaseProductState.value = UiState.Success(it.data.releaseProducts)
-                _productList.value = it.data.releaseProducts
+                productList.value = it.data.releaseProducts
             }.onFailure { exception: Throwable ->
                 _getReleaseProductState.value = UiState.Error(exception.message)
             }
@@ -62,11 +61,11 @@ class ReleaseProductViewModel(
 
     fun deleteScrapProduct(productId: Int) {
         viewModelScope.launch {
-            _deleteScrapState.value = UiState.Loading
+            deleteScrapState.value = UiState.Loading
             productRepository.deleteScrap(productId = productId).onSuccess {
-                _deleteScrapState.value = UiState.Success(productId)
+                deleteScrapState.value = UiState.Success(productId)
             }.onFailure { exception: Throwable ->
-                _deleteScrapState.value = UiState.Error(exception.message)
+                deleteScrapState.value = UiState.Error(exception.message)
             }
         }
     }

gradle/libs.versions.toml

@@ -6,6 +6,8 @@ accompanistPagerVersion = "0.24.13-rc"
 agp = "8.3.2"
 coilCompose = "2.6.0"
 foundation = "1.9.23"
+foundationVersion = "1.6.7"
+googleAccompanistPager = "0.16.0"
 kotlin = "1.9.23"
 kotlinSerializationJson = "1.5.1"
 kotlinxCoroutines = "1.7.3"
@@ -19,6 +21,7 @@ coreKtx = "1.13.1"
 activity = "1.9.0"
 constraintlayout = "2.1.4"
 fragment = "1.7.0"
+materialVersion = "1.6.7"
 navigation = "2.7.7"
 material3Android = "1.2.1"
 recyclerview = "1.2.0"
@@ -44,8 +47,11 @@ foundationAndroid = "1.6.7"
 accompanist-pager = { module = "com.google.accompanist:accompanist-pager", version.ref = "accompanistPager" }
 accompanist-pager-indicators = { module = "com.google.accompanist:accompanist-pager-indicators", version.ref = "accompanistPager" }
 accompanist-pager-indicators-v02413rc = { module = "com.google.accompanist:accompanist-pager-indicators", version.ref = "accompanistPagerIndicators" }
+accompanist-pager-v0160 = { module = "com.google.accompanist:accompanist-pager", version.ref = "googleAccompanistPager" }
 accompanist-pager-v02413rc = { module = "com.google.accompanist:accompanist-pager", version.ref = "accompanistPagerVersion" }
 androidx-foundation = { module = "androidx.compose.foundation:foundation", version.ref = "foundation" }
+androidx-foundation-v167 = { module = "androidx.compose.foundation:foundation", version.ref = "foundationVersion" }
+androidx-material = { module = "androidx.compose.material:material", version.ref = "materialVersion" }
 coil-compose = { module = "io.coil-kt:coil-compose", version.ref = "coilCompose" }
 kotlin-serialization-json = { group = "org.jetbrains.kotlinx", name = "kotlinx-serialization-json", version.ref = "kotlinSerializationJson" }
 kotlin-coroutines = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-android", version.ref = "kotlinxCoroutines" }