Skip to content

feat : 로그인 온보딩 로띠 적용 #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
koreatlwls wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

feat : 로그인 온보딩 로띠 적용 #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
255 changes: 242 additions & 13 deletions ...tation/src/main/kotlin/com/moa/salary/app/presentation/ui/onboarding/login/LoginScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import androidx.activity.compose.LocalActivity
import androidx.compose.animation.core.EaseIn
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
Expand All @@ -13,6 +14,7 @@ import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.sizeIn
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.pager.HorizontalPager
Expand All @@ -33,11 +35,19 @@ import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
import com.airbnb.lottie.compose.LottieAnimation
import com.airbnb.lottie.compose.LottieCompositionSpec
import com.airbnb.lottie.compose.LottieConstants
import com.airbnb.lottie.compose.animateLottieCompositionAsState
import com.airbnb.lottie.compose.rememberLottieComposition
import com.moa.salary.app.core.model.setting.OAuthType
import com.moa.salary.app.presentation.R
import com.moa.salary.app.presentation.designsystem.component.MoaPageIndicator
Expand Down Expand Up @@ -70,12 +80,12 @@ private fun LoginScreen(

LaunchedEffect(key1 = isAutoPagingEnabled) {
while (isAutoPagingEnabled) {
delay(3000)
delay(2200)
isProgrammaticScroll = true
pagerState.animateScrollToPage(
page = pagerState.currentPage + 1,
animationSpec = tween(
durationMillis = 600,
durationMillis = 720,
easing = EaseIn
)
)
Expand Down Expand Up @@ -155,21 +165,240 @@ private fun ColumnScope.LoginScreenContent(pagerState: PagerState) {
modifier = Modifier.weight(1f),
state = pagerState
) { pageCount ->
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.TopCenter,
when (pageCount % 3) {
0 -> LoginFirstContent()
1 -> LoginSecondContent()
else -> LoginThirdContent()
}
}
}

@Composable
private fun LoginFirstContent() {
val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.onboarding1))
val progress by animateLottieCompositionAsState(
composition = composition,
isPlaying = true,
iterations = LottieConstants.IterateForever,
)

Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.TopCenter,
) {
LottieAnimation(
modifier = Modifier
.padding(top = 24.dp)
.widthIn(max = 375.dp)
.height(333.dp),
composition = composition,
progress = { progress },
)

Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Spacer(Modifier.height(238.dp))

Image(
modifier = Modifier.widthIn(max = 400.dp),
painter = painterResource(
when {
pageCount % 3 == 0 -> R.drawable.img_first_onboarding
pageCount % 3 == 1 -> R.drawable.img_second_onboarding
else -> R.drawable.img_third_onboarding
}
),
painter = painterResource(R.drawable.img_big_white_logo),
contentDescription = null,
)

Spacer(Modifier.height(16.dp))

Text(
text = "실시간으로 월급이 쌓이는 경험!",
style = MoaTheme.typography.b1_400,
color = MoaTheme.colors.textHighEmphasis,
)
}
}
}

@Composable
private fun LoginSecondContent() {
val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.onboarding2))
val progress by animateLottieCompositionAsState(
composition = composition,
isPlaying = true,
iterations = LottieConstants.IterateForever,
)

Box(
modifier = Modifier
.fillMaxSize()
.padding(horizontal = 28.dp),
contentAlignment = Alignment.Center,
) {
Column(
modifier = Modifier
.clip(RoundedCornerShape(26.dp))
.background(
color = MoaTheme.colors.containerPrimary,
)
.sizeIn(
maxWidth = 375.dp,
maxHeight = 420.dp,
)
.fillMaxSize()
.padding(horizontal = 20.dp)
.padding(
top = 40.dp,
bottom = 32.dp,
),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Text(
text = "오늘 쌓은 월급",
style = MoaTheme.typography.b2_500,
color = MoaTheme.colors.textMediumEmphasis,
)

Row(verticalAlignment = Alignment.Bottom) {
Text(
text = "12,000",
style = MoaTheme.typography.h2_700,
color = MoaTheme.colors.textHighEmphasis,
)

Spacer(Modifier.width(4.dp))

Text(
modifier = Modifier.padding(bottom = 4.dp),
text = stringResource(R.string.working_currency_won),
style = MoaTheme.typography.h3_500,
color = MoaTheme.colors.textMediumEmphasis,
)
}

LottieAnimation(
modifier = Modifier
.padding(vertical = 12.dp)
.weight(1f),
composition = composition,
progress = { progress },
)

Row {
Text(
text = "오늘도 쌓이는 ",
style = MoaTheme.typography.t1_700,
color = MoaTheme.colors.textGreen,
)

Text(
text = "내월급",
style = MoaTheme.typography.t1_700,
color = MoaTheme.colors.textHighEmphasis,
)
}

Spacer(Modifier.height(6.dp))

Text(
text = "출퇴근 시간과 급여만 입력하면\n오늘 번 월급을 자동으로 계산해드려요.",
style = MoaTheme.typography.b2_400,
textAlign = TextAlign.Center,
color = MoaTheme.colors.textMediumEmphasis,
)
}
}
}

@Composable
private fun LoginThirdContent() {
val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.onboarding3))
val progress by animateLottieCompositionAsState(
composition = composition,
isPlaying = true,
iterations = LottieConstants.IterateForever,
)

Box(
modifier = Modifier
.fillMaxSize()
.padding(horizontal = 28.dp),
contentAlignment = Alignment.Center,
) {
Column(
modifier = Modifier
.clip(RoundedCornerShape(26.dp))
.background(
color = MoaTheme.colors.containerPrimary,
)
.sizeIn(
maxWidth = 375.dp,
maxHeight = 420.dp,
)
.fillMaxSize()
.padding(horizontal = 20.dp)
.padding(
top = 40.dp,
bottom = 32.dp,
),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Text(
text = "오늘은 월급날!",
style = MoaTheme.typography.b2_500,
color = MoaTheme.colors.textMediumEmphasis,
)

Row(verticalAlignment = Alignment.Bottom) {
Text(
text = "3,400,000",
style = MoaTheme.typography.h2_700,
color = MoaTheme.colors.textHighEmphasis,
)

Spacer(Modifier.width(4.dp))

Text(
modifier = Modifier.padding(bottom = 4.dp),
text = stringResource(R.string.working_currency_won),
style = MoaTheme.typography.h3_500,
color = MoaTheme.colors.textMediumEmphasis,
)
}

LottieAnimation(
modifier = Modifier
.padding(vertical = 12.dp)
.weight(1f),
composition = composition,
progress = { progress },
)

Row {
Text(
text = "당신의 ",
style = MoaTheme.typography.t1_700,
color = MoaTheme.colors.textHighEmphasis,
)

Text(
text = "존버",
style = MoaTheme.typography.t1_700,
color = MoaTheme.colors.textGreen,
)

Text(
text = "를 함께해요",
style = MoaTheme.typography.t1_700,
color = MoaTheme.colors.textHighEmphasis,
)
}

Spacer(Modifier.height(6.dp))

Text(
text = "월급날만 기다리지 말고\n지금 버는 돈을 보면서 같이 존버해요!.",
style = MoaTheme.typography.b2_400,
textAlign = TextAlign.Center,
color = MoaTheme.colors.textMediumEmphasis,
)
}
}
}
Expand Down
22 changes: 22 additions & 0 deletions presentation/src/main/res/drawable/img_big_white_logo.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="193dp"
android:height="60dp"
android:viewportWidth="193"
android:viewportHeight="60">
<group>
<clip-path
android:pathData="M0,0h192.84v60h-192.84z"/>
<path
android:pathData="M150.07,59.19H137.04L157.22,0.81H172.74L192.84,59.19H179.89L175.51,45.73H154.45L150.07,59.19H150.07ZM157.5,36.29H172.46L165.18,13.95H164.78L157.5,36.29Z"
android:fillColor="#ffffff"/>
<path
android:pathData="M137.45,30C137.45,49.07 125.67,60 110.28,60C94.88,60 83.02,48.99 83.02,30C83.02,11.01 94.76,0 110.28,0C125.79,0 137.45,10.93 137.45,30ZM95.32,30C95.32,42.46 101.23,49.23 110.28,49.27C119.24,49.23 125.19,42.46 125.15,30C125.19,17.5 119.24,10.76 110.28,10.72C101.23,10.76 95.32,17.5 95.32,30Z"
android:fillColor="#ffffff"/>
<path
android:pathData="M8.7,0.81H22.62L38.78,43.15H39.42L55.58,0.81H69.5L72.59,59.19H61.24L58.8,20.97H58.31L43.12,59.19H35.08L19.89,20.81H19.4L17.34,59.19H5.61L8.7,0.81Z"
android:fillColor="#ffffff"/>
<path
android:pathData="M78.2,28.09H0V36.41H78.2V28.09Z"
android:fillColor="#ffffff"/>
</group>
</vector>
Loading