-
Notifications
You must be signed in to change notification settings - Fork 1
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.
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
Feature/mz 160 splash, signup-vote, login UI #41
Merged
Merged
Changes from all commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
2bee117
feat: 로그인 화면 원형 그래프와 애니메이션
yangsooplus 81cdbe3
chore: susu 로고 추가
yangsooplus 703c660
feat: SplashScreen icon, background 설정
yangsooplus 8acc660
chore: 연한 susu 로고 추가
yangsooplus 1b4afba
fix: LoginArchGraph outlineWidth 단위 수정
yangsooplus e441692
chore: kakao 아이콘 추가
yangsooplus 97e7b47
refactor: 불필요한 LoginState property 제거
yangsooplus c155de3
feat: 회원가입 투표 UI
yangsooplus 15e68cc
feat: 로그인 UI
yangsooplus 17284c9
refactor: Navigation을 XXXRoute로 변경
yangsooplus f653446
chore: string resource 분리
yangsooplus 7bb713d
feat: login 성공 시 백스택을 전부 비움
yangsooplus abf62ba
chore: ktlint format
jinukeu 7c2e684
refactor: LoginArchGraph 불필요한 코드 제거
yangsooplus a518120
refactor: 카카오 로그인 버튼 네이밍 변경, Box 제거
yangsooplus 6931f5e
refactor: LoadingScreen 컴포넌트 분리
yangsooplus 07a9551
fix: collectAsState -> collectAsStateWithLifecycle
yangsooplus 17ae6cc
chore: ktlint check
yangsooplus File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
17 changes: 17 additions & 0 deletions
17
core/designsystem/src/main/java/com/susu/core/designsystem/component/util/LoadingScreen.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
package com.susu.core.designsystem.component.util | ||
|
||
import androidx.compose.foundation.layout.fillMaxSize | ||
import androidx.compose.material3.CircularProgressIndicator | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.ui.Modifier | ||
import com.susu.core.designsystem.theme.SusuTheme | ||
|
||
@Composable | ||
fun LoadingScreen( | ||
modifier: Modifier = Modifier, | ||
) { | ||
CircularProgressIndicator( | ||
modifier = modifier.fillMaxSize(), | ||
color = SusuTheme.colorScheme.primary, | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
<vector xmlns:android="http://schemas.android.com/apk/res/android" | ||
android:width="108dp" | ||
android:height="108dp" | ||
android:viewportWidth="156" | ||
android:viewportHeight="68"> | ||
<group android:scaleX="0.6" | ||
android:scaleY="0.26153848" | ||
android:translateX="31.2" | ||
android:translateY="25.107693"> | ||
<path | ||
android:pathData="M34,0L34,0A34,34 0,0 1,68 34L68,34A34,34 0,0 1,34 68L34,68A34,34 0,0 1,0 34L0,34A34,34 0,0 1,34 0z" | ||
android:fillColor="#FFA500"/> | ||
<path | ||
android:pathData="M19,37.5C20.93,37.5 22.5,35.93 22.5,34C22.5,32.07 20.93,30.5 19,30.5L19,37.5ZM15.53,31.53C14.16,32.89 14.16,35.11 15.53,36.47L37.8,58.75C39.17,60.12 41.38,60.12 42.75,58.75C44.12,57.38 44.12,55.17 42.75,53.8L22.95,34L42.75,14.2C44.12,12.83 44.12,10.62 42.75,9.25C41.38,7.88 39.17,7.88 37.8,9.25L15.53,31.53ZM19,30.5L18,30.5L18,37.5L19,37.5L19,30.5Z" | ||
android:fillColor="#ffffff"/> | ||
<path | ||
android:pathData="M78,68L78,68A34,34 0,0 1,44 34L44,34A34,34 0,0 1,78 0L78,0A34,34 0,0 1,112 34L112,34A34,34 0,0 1,78 68z" | ||
android:fillColor="#FFA500"/> | ||
<path | ||
android:pathData="M62,37.5C63.93,37.5 65.5,35.93 65.5,34C65.5,32.07 63.93,30.5 62,30.5L62,37.5ZM58.53,31.53C57.16,32.89 57.16,35.11 58.53,36.47L80.8,58.75C82.17,60.12 84.38,60.12 85.75,58.75C87.12,57.38 87.12,55.17 85.75,53.8L65.95,34L85.75,14.2C87.12,12.83 87.12,10.62 85.75,9.25C84.38,7.88 82.17,7.88 80.8,9.25L58.53,31.53ZM62,30.5L61,30.5L61,37.5L62,37.5L62,30.5Z" | ||
android:fillColor="#ffffff"/> | ||
<path | ||
android:pathData="M88,34L88,34A34,34 0,0 1,122 0L122,0A34,34 0,0 1,156 34L156,34A34,34 0,0 1,122 68L122,68A34,34 0,0 1,88 34z" | ||
android:fillColor="#FFA500"/> | ||
<path | ||
android:pathData="M129,37.5C130.93,37.5 132.5,35.93 132.5,34C132.5,32.07 130.93,30.5 129,30.5L129,37.5ZM102.53,31.53C101.16,32.89 101.16,35.11 102.53,36.47L124.8,58.75C126.17,60.12 128.38,60.12 129.75,58.75C131.12,57.38 131.12,55.17 129.75,53.8L109.95,34L129.75,14.2C131.12,12.83 131.12,10.62 129.75,9.25C128.38,7.88 126.17,7.88 124.8,9.25L102.53,31.53ZM129,30.5L105,30.5L105,37.5L129,37.5L129,30.5Z" | ||
android:fillColor="#ffffff"/> | ||
</group> | ||
</vector> |
24 changes: 24 additions & 0 deletions
24
core/designsystem/src/main/res/drawable/ic_susu_logo_weak.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
<vector xmlns:android="http://schemas.android.com/apk/res/android" | ||
android:width="78dp" | ||
android:height="34dp" | ||
android:viewportWidth="78" | ||
android:viewportHeight="34"> | ||
<path | ||
android:pathData="M17,0L17,0A17,17 0,0 1,34 17L34,17A17,17 0,0 1,17 34L17,34A17,17 0,0 1,0 17L0,17A17,17 0,0 1,17 0z" | ||
android:fillColor="#FFE1AA"/> | ||
<path | ||
android:pathData="M9.5,18.75C10.467,18.75 11.25,17.966 11.25,17C11.25,16.034 10.467,15.25 9.5,15.25L9.5,18.75ZM7.763,15.763C7.079,16.446 7.079,17.554 7.763,18.237L18.899,29.374C19.583,30.058 20.691,30.058 21.374,29.374C22.058,28.691 22.058,27.583 21.374,26.899L11.475,17L21.374,7.101C22.058,6.417 22.058,5.309 21.374,4.626C20.691,3.942 19.583,3.942 18.899,4.626L7.763,15.763ZM9.5,15.25L9,15.25L9,18.75L9.5,18.75L9.5,15.25Z" | ||
android:fillColor="#ffffff"/> | ||
<path | ||
android:pathData="M39,34L39,34A17,17 0,0 1,22 17L22,17A17,17 0,0 1,39 0L39,0A17,17 0,0 1,56 17L56,17A17,17 0,0 1,39 34z" | ||
android:fillColor="#FFE1AA"/> | ||
<path | ||
android:pathData="M31,18.75C31.966,18.75 32.75,17.966 32.75,17C32.75,16.034 31.966,15.25 31,15.25L31,18.75ZM29.263,15.763C28.579,16.446 28.579,17.554 29.263,18.237L40.4,29.374C41.083,30.058 42.191,30.058 42.874,29.374C43.558,28.691 43.558,27.583 42.874,26.899L32.975,17L42.874,7.101C43.558,6.417 43.558,5.309 42.874,4.626C42.191,3.942 41.083,3.942 40.4,4.626L29.263,15.763ZM31,15.25L30.5,15.25L30.5,18.75L31,18.75L31,15.25Z" | ||
android:fillColor="#ffffff"/> | ||
<path | ||
android:pathData="M44,17L44,17A17,17 0,0 1,61 0L61,0A17,17 0,0 1,78 17L78,17A17,17 0,0 1,61 34L61,34A17,17 0,0 1,44 17z" | ||
android:fillColor="#FFE1AA"/> | ||
<path | ||
android:pathData="M64.5,18.75C65.466,18.75 66.25,17.966 66.25,17C66.25,16.034 65.466,15.25 64.5,15.25L64.5,18.75ZM51.263,15.763C50.579,16.446 50.579,17.554 51.263,18.237L62.4,29.374C63.083,30.058 64.191,30.058 64.874,29.374C65.558,28.691 65.558,27.583 64.874,26.899L54.975,17L64.874,7.101C65.558,6.417 65.558,5.309 64.874,4.626C64.191,3.942 63.083,3.942 62.4,4.626L51.263,15.763ZM64.5,15.25L52.5,15.25L52.5,18.75L64.5,18.75L64.5,15.25Z" | ||
android:fillColor="#ffffff"/> | ||
</vector> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
<?xml version="1.0" encoding="utf-8"?> | ||
<resources> | ||
<color name="splash_background">#FFFFF8EA</color> | ||
</resources> |
110 changes: 106 additions & 4 deletions
110
feature/loginsignup/src/main/java/com/susu/feature/loginsignup/VoteScreen.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,116 @@ | ||
package com.susu.feature.loginsignup | ||
|
||
import androidx.compose.material3.Button | ||
import androidx.compose.animation.AnimatedVisibility | ||
import androidx.compose.animation.core.MutableTransitionState | ||
import androidx.compose.animation.core.tween | ||
import androidx.compose.animation.fadeIn | ||
import androidx.compose.animation.slideInVertically | ||
import androidx.compose.foundation.Image | ||
import androidx.compose.foundation.layout.Arrangement | ||
import androidx.compose.foundation.layout.Column | ||
import androidx.compose.foundation.layout.Spacer | ||
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.material3.Text | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.runtime.remember | ||
import androidx.compose.ui.Alignment | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.res.painterResource | ||
import androidx.compose.ui.res.stringResource | ||
import androidx.compose.ui.text.buildAnnotatedString | ||
import androidx.compose.ui.text.withStyle | ||
import androidx.compose.ui.tooling.preview.Preview | ||
import androidx.compose.ui.unit.dp | ||
import androidx.compose.ui.unit.sp | ||
import com.susu.core.designsystem.component.button.GhostButtonColor | ||
import com.susu.core.designsystem.component.button.MediumButtonStyle | ||
import com.susu.core.designsystem.component.button.SusuGhostButton | ||
import com.susu.core.designsystem.theme.SusuTheme | ||
|
||
@Composable | ||
fun VoteRoute(navigateToLogin: () -> Unit) { | ||
VoteScreen(navigateToLogin = navigateToLogin) | ||
} | ||
|
||
@Composable | ||
fun VoteScreen( | ||
navigateToLogin: () -> Unit, | ||
navigateToLogin: () -> Unit = {}, | ||
) { | ||
Button(onClick = navigateToLogin) { | ||
Text("대충 회원가입 투표") | ||
val buttonList = listOf( | ||
stringResource(R.string.signup_vote_unit_3), | ||
stringResource(R.string.signup_vote_unit_5), | ||
stringResource(R.string.signup_vote_unit_10), | ||
stringResource(R.string.signup_vote_unit_20), | ||
) | ||
val transitionState = remember { | ||
MutableTransitionState(false).apply { | ||
targetState = true | ||
} | ||
} | ||
|
||
AnimatedVisibility( | ||
visibleState = transitionState, | ||
enter = fadeIn(tween(1500)) + slideInVertically(tween(1500), initialOffsetY = { it / 10 }), | ||
) { | ||
Column( | ||
modifier = Modifier.fillMaxSize().padding(horizontal = SusuTheme.spacing.spacing_m), | ||
|
||
) { | ||
Spacer(modifier = Modifier.height(SusuTheme.spacing.spacing_xxl)) | ||
Text(text = stringResource(R.string.signup_vote_question_1), style = SusuTheme.typography.title_l) | ||
Spacer(modifier = Modifier.height(SusuTheme.spacing.spacing_m)) | ||
Text( | ||
text = buildAnnotatedString { | ||
withStyle(style = SusuTheme.typography.title_l.toSpanStyle()) { | ||
append(stringResource(R.string.signup_vote_question_2)) | ||
} | ||
withStyle(style = SusuTheme.typography.text_l.toSpanStyle()) { | ||
append(stringResource(R.string.signup_vote_question_3)) | ||
} | ||
withStyle(style = SusuTheme.typography.title_l.toSpanStyle()) { | ||
append(stringResource(R.string.signup_vote_question_4)) | ||
} | ||
withStyle(style = SusuTheme.typography.text_l.toSpanStyle()) { | ||
append(stringResource(R.string.signup_vote_question_5)) | ||
} | ||
}, | ||
lineHeight = 40.sp, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 이렇게 따로 lineHeight를 지정한 이유가 뭘까욥..?? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
) | ||
Spacer(modifier = Modifier.height(48.dp)) | ||
Column( | ||
verticalArrangement = Arrangement.spacedBy(SusuTheme.spacing.spacing_xxs), | ||
) { | ||
buttonList.forEach { | ||
SusuGhostButton( | ||
modifier = Modifier.fillMaxWidth(), | ||
text = it, | ||
color = GhostButtonColor.Black, | ||
style = MediumButtonStyle.height60, | ||
isActive = false, | ||
isClickable = true, | ||
onClick = navigateToLogin, | ||
) | ||
} | ||
} | ||
Spacer(modifier = Modifier.weight(1f)) | ||
Image( | ||
modifier = Modifier.align(Alignment.CenterHorizontally), | ||
painter = painterResource(id = com.susu.core.designsystem.R.drawable.ic_susu_logo_weak), | ||
contentDescription = null, | ||
) | ||
Spacer(modifier = Modifier.height(SusuTheme.spacing.spacing_xl)) | ||
} | ||
} | ||
} | ||
|
||
@Preview | ||
@Composable | ||
fun VoteScreenPreview() { | ||
SusuTheme { | ||
VoteScreen { | ||
} | ||
} | ||
} |
65 changes: 65 additions & 0 deletions
65
feature/loginsignup/src/main/java/com/susu/feature/loginsignup/login/LoginArchGraph.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
package com.susu.feature.loginsignup.login | ||
|
||
import androidx.compose.animation.core.Animatable | ||
import androidx.compose.animation.core.EaseInOutCubic | ||
import androidx.compose.animation.core.tween | ||
import androidx.compose.foundation.Canvas | ||
import androidx.compose.foundation.layout.size | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.runtime.LaunchedEffect | ||
import androidx.compose.runtime.remember | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.tooling.preview.Preview | ||
import androidx.compose.ui.unit.Dp | ||
import androidx.compose.ui.unit.dp | ||
import com.susu.core.designsystem.theme.Orange20 | ||
import com.susu.core.designsystem.theme.Orange50 | ||
import com.susu.core.designsystem.theme.SusuTheme | ||
|
||
@Composable | ||
fun LoginArchGraph( | ||
modifier: Modifier = Modifier, | ||
outlineWidth: Dp = 8.dp, | ||
fillFrom: Float = 0f, | ||
fillUntil: Float = 0.87f, | ||
delay: Int = 1500, | ||
duration: Int = 1000, | ||
) { | ||
val fillAngle = remember { Animatable(fillFrom) } | ||
|
||
LaunchedEffect(key1 = Unit) { | ||
fillAngle.animateTo( | ||
targetValue = fillUntil, | ||
animationSpec = tween( | ||
delayMillis = delay, | ||
durationMillis = duration, | ||
easing = EaseInOutCubic, | ||
), | ||
) | ||
} | ||
|
||
Canvas( | ||
modifier = modifier, | ||
onDraw = { | ||
drawArc( | ||
color = Orange50, | ||
startAngle = 0f, | ||
sweepAngle = -1f * 360f * fillAngle.value, | ||
useCenter = true, | ||
) | ||
drawCircle( | ||
color = Orange20, | ||
alpha = 0.48f, | ||
radius = size.minDimension / 2.0f - outlineWidth.toPx(), | ||
) | ||
}, | ||
) | ||
} | ||
|
||
@Preview(showBackground = true) | ||
@Composable | ||
fun LoginArchGraphPreview() { | ||
SusuTheme { | ||
LoginArchGraph(modifier = Modifier.size(200.dp)) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
요렇게 이 화면에서만 사용하는 상수 어떻게 관리하면 좋을까요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
음 private const val로 빼고 Resid 값을 저장하면 좋을거같아요.