Merge pull request #167 from pknu-wap/feature/tgyuu/#166

README.md

@@ -1,15 +1,5 @@
 # 와피 - WAP 일정확인 및 설문조사 플랫폼
 
-```
-WAP 행사일정을 쉽게 알려드릴게요! 함께해요 와피
-```
-
-<p align="center">
-	    <img src="./image/icon.png"/ width="40%">
-</p>
-
-<br><br><br>
-
 <img src="https://github.com/pknu-wap/WAPP/assets/116813010/aa89aa41-9406-42d8-b245-40bca847b63d" width="250"/>
 <img src="https://github.com/pknu-wap/WAPP/assets/116813010/9e7ec50f-404e-436c-ab7a-7037da2873a7" width="250"/>
 <img src="https://github.com/pknu-wap/WAPP/assets/116813010/4e973d3d-7f35-432e-b6e1-3ce36d070c1a" width="250"/>

feature/splash/src/main/java/com/wap/wapp/feature/splash/SplahScreen.kt

@@ -1,23 +1,39 @@
 package com.wap.wapp.feature.splash
 
 import android.widget.Toast
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.scaleIn
+import androidx.compose.animation.scaleOut
+import androidx.compose.animation.togetherWith
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.wap.designsystem.WappTheme
 import com.wap.wapp.core.commmon.extensions.TrackScreenViewEvent
 import com.wap.wapp.core.commmon.extensions.toSupportingText
+import com.wap.wapp.core.designresource.R.drawable
 import com.wap.wapp.feature.splash.R.string
 
 @Composable
@@ -27,6 +43,8 @@ internal fun SplashRoute(
     navigateToNotice: () -> Unit,
 ) {
     val context = LocalContext.current
+    val isIconLogoVisible by viewModel.isIconLogoVisible.collectAsStateWithLifecycle()
+    val isIconLogoGoUp by viewModel.isIconLogoGoUp.collectAsStateWithLifecycle()
 
     LaunchedEffect(true) {
         viewModel.splashUiEvent.collect { event ->
@@ -42,24 +60,102 @@ internal fun SplashRoute(
         }
     }
 
-    SplashScreen()
+    SplashScreen(
+        isIconLogoVisible = isIconLogoVisible,
+        isIconLogoGoUp = isIconLogoGoUp,
+    )
 }
 
 @Composable
-internal fun SplashScreen() {
+internal fun SplashScreen(
+    isIconLogoVisible: Boolean,
+    isIconLogoGoUp: Boolean,
+) {
+    val ANIMATION_MILLS = 400
+
     TrackScreenViewEvent(screenName = "SplashScreen")
 
-    Box(
+    Column(
         modifier = Modifier
             .fillMaxSize()
             .background(WappTheme.colors.backgroundBlack),
+    ) {
+        AnimatedContent(
+            targetState = isIconLogoVisible,
+            transitionSpec = {
+                scaleIn(tween(ANIMATION_MILLS, ANIMATION_MILLS)) togetherWith
+                    scaleOut(tween(ANIMATION_MILLS))
+            },
+        ) { isIconLogoVisible ->
+            if (!isIconLogoVisible) {
+                SplashTypoLogo()
+            } else {
+                SplashIconLogo(isIconLogoGoUp)
+            }
+        }
+    }
+}
+
+@Composable
+private fun SplashTypoLogo() {
+    Column(
+        verticalArrangement = Arrangement.Center,
+        modifier = Modifier
+            .fillMaxSize(),
     ) {
         Image(
             painter = painterResource(id = R.drawable.ic_wapp_logo),
             modifier = Modifier
-                .align(Alignment.Center)
+                .align(Alignment.CenterHorizontally)
                 .size(width = 230.dp, height = 230.dp),
             contentDescription = stringResource(id = string.wapp_icon_description),
         )
     }
 }
+
+@Composable
+private fun SplashIconLogo(isIconLogoGoUp: Boolean) {
+    val animatedPadding by animateDpAsState(
+        targetValue = if (isIconLogoGoUp) 200.dp else 0.dp,
+        animationSpec = tween(1000),
+    )
+
+    Column(modifier = Modifier.fillMaxSize()) {
+        Column(
+            verticalArrangement = Arrangement.Center,
+            modifier = Modifier
+                .fillMaxSize()
+                .weight(1f)
+                .padding(bottom = animatedPadding),
+        ) {
+            Image(
+                painter = painterResource(id = drawable.img_white_cat),
+                modifier = Modifier
+                    .align(Alignment.CenterHorizontally)
+                    .size(width = 230.dp, height = 230.dp),
+                contentDescription = stringResource(id = string.wapp_icon_description),
+            )
+
+            Row(
+                modifier = Modifier.align(Alignment.CenterHorizontally),
+            ) {
+                Column {
+                    Spacer(modifier = Modifier.height(40.dp))
+
+                    Text(
+                        text = stringResource(id = string.application_name),
+                        style = WappTheme.typography.titleBold,
+                        fontSize = 48.sp,
+                        color = WappTheme.colors.white,
+                    )
+                }
+                Text(
+                    text = stringResource(id = string.application_name),
+                    fontSize = 48.sp,
+                    style = WappTheme.typography.titleBold,
+                    color = WappTheme.colors.yellow34,
+                )
+            }
+        }
+    }
+}

feature/splash/src/main/java/com/wap/wapp/feature/splash/SplashViewModel.kt

@@ -4,8 +4,11 @@ import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.wap.wapp.core.domain.usecase.auth.IsUserSignInUseCase
 import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.asSharedFlow
+import kotlinx.coroutines.flow.asStateFlow
 import kotlinx.coroutines.launch
 import javax.inject.Inject
 
@@ -16,16 +19,29 @@ class SplashViewModel @Inject constructor(
     private val _splashUiEvent = MutableSharedFlow<SplashEvent>()
     val splashUiEvent = _splashUiEvent.asSharedFlow()
 
+    private var _isIconLogoVisible = MutableStateFlow<Boolean>(false)
+    var isIconLogoVisible = _isIconLogoVisible.asStateFlow()
+
+    private var _isIconLogoGoUp = MutableStateFlow<Boolean>(false)
+    var isIconLogoGoUp = _isIconLogoGoUp.asStateFlow()
+
     init {
-        isUserSignIn()
+        viewModelScope.launch {
+            delay(1000)
+            _isIconLogoVisible.value = true
+            delay(1000)
+            isUserSignIn()
+        }
     }
 
-    private fun isUserSignIn() = viewModelScope.launch {
+    private suspend fun isUserSignIn() {
         isUserSignInUseCase()
             .onSuccess { isSignIn ->
                 if (isSignIn) {
                     _splashUiEvent.emit(SplashEvent.SignInUser)
                 } else {
+                    _isIconLogoGoUp.value = true
+                    delay(1000)
                     _splashUiEvent.emit(SplashEvent.NonSignInUser)
                 }
             }.onFailure { throwable ->