❇️ Composable 구현 및 ViewModel 연결

presentation/src/main/java/com/mashup/gabbangzip/sharedalbum/presentation/ui/onboarding/HorizontalDotIndicator.kt

@@ -0,0 +1,69 @@
+package com.mashup.gabbangzip.sharedalbum.presentation.ui.onboarding
+
+import androidx.annotation.IntRange
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.mashup.gabbangzip.sharedalbum.presentation.theme.Gray50
+import com.mashup.gabbangzip.sharedalbum.presentation.theme.Gray80
+
+@Composable
+fun HorizontalDotIndicator(
+    circleSize: Dp,
+    selectedColor: Color,
+    unselectedColor: Color,
+    @IntRange(from = 1) totalPage: Int,
+    @IntRange(from = 1) currentPage: Int,
+    paddingHorizontal: Dp,
+) {
+    Row {
+        for (i in 1..totalPage) {
+            CircleUi(
+                modifier = Modifier.padding(start = if (i > 1) paddingHorizontal else 0.dp),
+                size = circleSize,
+                color = if (currentPage == i) selectedColor else unselectedColor,
+            )
+        }
+    }
+}
+
+@Composable
+fun CircleUi(
+    modifier: Modifier = Modifier,
+    size: Dp,
+    color: Color,
+) {
+    Box(
+        modifier = modifier
+            .size(size)
+            .background(color, shape = CircleShape),
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+fun HorizontalDotIndicatorPreview() {
+    HorizontalDotIndicator(
+        circleSize = 50.dp,
+        selectedColor = Gray80,
+        unselectedColor = Gray50,
+        totalPage = 4,
+        currentPage = 2,
+        paddingHorizontal = 30.dp,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+fun CircleUiPreview() {
+    CircleUi(Modifier, 50.dp, Gray50)
+}

presentation/src/main/java/com/mashup/gabbangzip/sharedalbum/presentation/ui/onboarding/OnboardingActivity.kt

@@ -14,11 +14,22 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.ui.Modifier
+import com.mashup.gabbangzip.sharedalbum.presentation.R
 import com.mashup.gabbangzip.sharedalbum.presentation.theme.SharedAlbumTheme
+import com.mashup.gabbangzip.sharedalbum.presentation.ui.invitation.InvitationCodeViewModel
+import com.mashup.gabbangzip.sharedalbum.presentation.ui.login.LoginActivity
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
 class OnboardingActivity : ComponentActivity() {
+    private val viewModel by viewModels<OnboardingViewModel>()
+    private val pageResourceIdList = listOf(
+        R.drawable.onboarding_1,
+        R.drawable.onboarding_2,
+        R.drawable.onboarding_3,
+        R.drawable.onboarding_4,
+    )
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         enableEdgeToEdge(
@@ -31,7 +42,13 @@ class OnboardingActivity : ComponentActivity() {
             SharedAlbumTheme {
                 Scaffold { contentPadding ->
                     Box(modifier = Modifier.padding(contentPadding)) {
-                        Text(text = "hello world")
+                        OnboardingScreen(
+                            pageResourceIdList = pageResourceIdList,
+                            onClickStart = {
+                                viewModel.saveIsNotFirstOpen()
+                                LoginActivity.openActivity(this@OnboardingActivity)
+                            },
+                        )
                     }
                 }
             }

presentation/src/main/java/com/mashup/gabbangzip/sharedalbum/presentation/ui/onboarding/OnboardingScreen.kt

@@ -0,0 +1,78 @@
+package com.mashup.gabbangzip.sharedalbum.presentation.ui.onboarding
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.mashup.gabbangzip.sharedalbum.presentation.R
+import com.mashup.gabbangzip.sharedalbum.presentation.theme.Gray50
+import com.mashup.gabbangzip.sharedalbum.presentation.theme.Gray80
+import com.mashup.gabbangzip.sharedalbum.presentation.ui.common.PicButton
+import com.mashup.gabbangzip.sharedalbum.presentation.utils.StableImage
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun OnboardingScreen(
+    pageResourceIdList: List<Int>,
+    onClickStart: () -> Unit,
+) {
+    val pagerState = rememberPagerState { pageResourceIdList.size }
+    val pageDescription = stringResource(id = R.string.page_description)
+
+    Box(modifier = Modifier.fillMaxSize()) {
+        HorizontalPager(
+            modifier = Modifier.fillMaxSize(),
+            state = pagerState,
+        ) { page ->
+            StableImage(
+                modifier = Modifier.fillMaxSize(),
+                drawableResId = pageResourceIdList[page],
+                contentDescription = pageDescription.format(page),
+                contentScale = ContentScale.FillWidth,
+            )
+        }
+        Column(
+            modifier = Modifier
+                .padding(bottom = 16.dp, start = 21.dp, end = 21.dp)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            HorizontalDotIndicator(
+                circleSize = 8.dp,
+                selectedColor = Gray80,
+                unselectedColor = Gray50,
+                totalPage = pagerState.pageCount,
+                currentPage = pagerState.currentPage + 1,
+                paddingHorizontal = 10.dp,
+            )
+            PicButton(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 32.dp),
+                text = stringResource(id = R.string.start),
+                onButtonClicked = onClickStart,
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun OnboardingScreenPreview() {
+    OnboardingScreen(
+        pageResourceIdList = listOf(),
+        onClickStart = {},
+    )
+}

presentation/src/main/java/com/mashup/gabbangzip/sharedalbum/presentation/ui/onboarding/OnboardingViewModel.kt

@@ -0,0 +1,19 @@
+package com.mashup.gabbangzip.sharedalbum.presentation.ui.onboarding
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.mashup.gabbangzip.sharedalbum.domain.usecase.config.SaveIsFirstOpenUseCase
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class OnboardingViewModel @Inject constructor(
+    private val saveIsFirstOpenUseCase: SaveIsFirstOpenUseCase,
+) : ViewModel() {
+    fun saveIsNotFirstOpen() {
+        viewModelScope.launch {
+            saveIsFirstOpenUseCase(false)
+        }
+    }
+}

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

@@ -37,6 +37,7 @@
     <string name="group_creation_button_description">초대 코드를 받으셨나요?\n코드를 입력해 바로 그룹에 들어갈 수 있어요.</string>
     <string name="group_creation_button_code">초대코드 입력하기</string>
     <string name="next">다음</string>
+    <string name="start">시작하기</string>
     <string name="group_creation_name_title">그룹의 이름은 무엇인가요?</string>
     <string name="group_creation_name_hint">최대 10자 까지 입력 가능해요.</string>
     <string name="group_creation_keyword_title">그룹의 키워드를 선택해 주세요</string>
@@ -143,6 +144,7 @@
     <string name="guide_like_desc">좋아요 가이드 이미지</string>
     <string name="guide_dislike_desc">싫어요 가이드 이미지</string>
     <string name="kook_snackbar">그룹원들을 쿡 찔렀어요!</string>
+    <string name="page_description">%d 페이지 온보딩 화면</string>
 
     <string name="error_network">네트워크가 연결되어 있지 않습니다</string>
     <string name="error_server">서버가 원활하지 않습니다</string>