Skip to content

Commit 4fee138

Browse files
easyhoooneasyhooon
committed
[BOOK-475] feat: 로그인 버튼에 로그인 툴팁 배치
1 parent 55d9c59 commit 4fee138

2 files changed

Lines changed: 95 additions & 74 deletions

File tree

‎feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/LoginUi.kt‎

Lines changed: 92 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@ package com.ninecraft.booket.feature.login
22

33
import androidx.compose.foundation.Image
44
import androidx.compose.foundation.background
5-
import androidx.compose.foundation.layout.Arrangement
65
import androidx.compose.foundation.layout.Box
76
import androidx.compose.foundation.layout.Column
87
import androidx.compose.foundation.layout.Spacer
98
import androidx.compose.foundation.layout.fillMaxSize
109
import androidx.compose.foundation.layout.fillMaxWidth
1110
import androidx.compose.foundation.layout.height
11+
import androidx.compose.foundation.layout.offset
1212
import androidx.compose.foundation.layout.padding
13+
import androidx.compose.ui.zIndex
14+
import com.ninecraft.booket.core.common.extensions.noRippleClickable
1315
import androidx.compose.material3.Icon
1416
import androidx.compose.material3.Text
1517
import androidx.compose.runtime.Composable
@@ -20,6 +22,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
2022
import androidx.compose.ui.res.painterResource
2123
import androidx.compose.ui.res.stringResource
2224
import androidx.compose.ui.res.vectorResource
25+
import androidx.compose.ui.unit.IntOffset
2326
import androidx.compose.ui.unit.dp
2427
import com.ninecraft.booket.core.designsystem.DevicePreview
2528
import com.ninecraft.booket.core.designsystem.component.button.ReedButton
@@ -32,6 +35,7 @@ import com.ninecraft.booket.core.designsystem.theme.White
3235
import com.ninecraft.booket.core.ui.ReedScaffold
3336
import com.ninecraft.booket.core.ui.component.ReedCloseTopAppBar
3437
import com.ninecraft.booket.core.ui.component.ReedLoadingIndicator
38+
import com.ninecraft.booket.feature.login.component.LoginTooltipBox
3539
import com.ninecraft.booket.feature.screens.LoginScreen
3640
import com.skydoves.compose.stability.runtime.TraceRecomposition
3741
import com.slack.circuit.codegen.annotations.CircuitInject
@@ -52,87 +56,104 @@ internal fun LoginUi(
5256
ReedScaffold(
5357
modifier = modifier.fillMaxSize(),
5458
) { innerPadding ->
55-
Column(
56-
modifier = modifier
59+
Box(
60+
modifier = Modifier
5761
.fillMaxSize()
5862
.background(White)
59-
.padding(innerPadding),
60-
horizontalAlignment = Alignment.CenterHorizontally,
61-
verticalArrangement = Arrangement.Center,
63+
.padding(innerPadding)
64+
.then(
65+
if (state.showLoginTooltip) {
66+
Modifier.noRippleClickable {
67+
state.eventSink(LoginUiEvent.OnDismissLoginTooltip)
68+
}
69+
} else {
70+
Modifier
71+
},
72+
),
6273
) {
63-
Box(modifier = Modifier.fillMaxSize()) {
64-
Column {
65-
if (state.returnToScreen != null) {
66-
ReedCloseTopAppBar(
67-
onClose = {
68-
state.eventSink(LoginUiEvent.OnCloseButtonClick)
69-
},
70-
)
71-
}
72-
Column(
74+
Column(
75+
modifier = Modifier.fillMaxSize(),
76+
horizontalAlignment = Alignment.CenterHorizontally,
77+
) {
78+
if (state.returnToScreen != null) {
79+
ReedCloseTopAppBar(
80+
onClose = {
81+
state.eventSink(LoginUiEvent.OnCloseButtonClick)
82+
},
83+
)
84+
}
85+
Spacer(modifier = Modifier.weight(1f))
86+
Image(
87+
painter = painterResource(R.drawable.img_reed_logo_big),
88+
contentDescription = "Reed Logo",
89+
modifier = Modifier.height(67.14.dp),
90+
)
91+
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing5))
92+
Text(
93+
text = stringResource(R.string.login_reed_slogan),
94+
color = ReedTheme.colors.contentBrand,
95+
style = ReedTheme.typography.headline2SemiBold,
96+
)
97+
Spacer(modifier = Modifier.weight(1f))
98+
Box(
99+
modifier = Modifier
100+
.fillMaxWidth(),
101+
) {
102+
ReedButton(
103+
onClick = {
104+
state.eventSink(LoginUiEvent.OnKakaoLoginButtonClick)
105+
},
106+
sizeStyle = largeButtonStyle,
107+
colorStyle = ReedButtonColorStyle.KAKAO,
73108
modifier = Modifier
74109
.fillMaxWidth()
75-
.weight(1f),
76-
verticalArrangement = Arrangement.Center,
77-
horizontalAlignment = Alignment.CenterHorizontally,
78-
) {
79-
Image(
80-
painter = painterResource(R.drawable.img_reed_logo_big),
81-
contentDescription = "Reed Logo",
82-
modifier = Modifier.height(67.14.dp),
83-
)
84-
Spacer(modifier = Modifier.height(ReedTheme.spacing.spacing5))
85-
Text(
86-
text = stringResource(R.string.login_reed_slogan),
87-
color = ReedTheme.colors.contentBrand,
88-
style = ReedTheme.typography.headline2SemiBold,
89-
)
90-
}
91-
Column(
92-
modifier = Modifier.fillMaxWidth(),
93-
horizontalAlignment = Alignment.CenterHorizontally,
94-
) {
95-
ReedButton(
96-
onClick = {
97-
state.eventSink(LoginUiEvent.OnKakaoLoginButtonClick)
98-
},
99-
sizeStyle = largeButtonStyle,
100-
colorStyle = ReedButtonColorStyle.KAKAO,
110+
.padding(
111+
start = ReedTheme.spacing.spacing5,
112+
end = ReedTheme.spacing.spacing5,
113+
),
114+
text = stringResource(id = R.string.kakao_login),
115+
leadingIcon = {
116+
Icon(
117+
imageVector = ImageVector.vectorResource(id = R.drawable.ic_kakao),
118+
contentDescription = "Kakao Icon",
119+
tint = Color.Unspecified,
120+
)
121+
},
122+
)
123+
124+
if (state.showLoginTooltip) {
125+
LoginTooltipBox(
126+
messageResId = R.string.recent_login,
101127
modifier = Modifier
102-
.fillMaxWidth()
103-
.padding(
104-
start = ReedTheme.spacing.spacing5,
105-
end = ReedTheme.spacing.spacing5,
106-
),
107-
text = stringResource(id = R.string.kakao_login),
108-
leadingIcon = {
109-
Icon(
110-
imageVector = ImageVector.vectorResource(id = R.drawable.ic_kakao),
111-
contentDescription = "Kakao Icon",
112-
tint = Color.Unspecified,
113-
)
114-
},
115-
)
116-
Spacer(
117-
modifier = Modifier.height(if (state.returnToScreen == null) ReedTheme.spacing.spacing2 else ReedTheme.spacing.spacing8),
128+
.align(Alignment.BottomEnd)
129+
.offset {
130+
IntOffset(
131+
x = (-28).dp.roundToPx(),
132+
y = (-32).dp.roundToPx()
133+
)
134+
}
135+
.zIndex(10f)
118136
)
119-
if (state.returnToScreen == null) {
120-
ReedTextButton(
121-
onClick = {
122-
state.eventSink(LoginUiEvent.OnGuestLoginButtonClick)
123-
},
124-
text = stringResource(R.string.guest_login),
125-
sizeStyle = smallButtonStyle,
126-
colorStyle = ReedButtonColorStyle.TEXT,
127-
)
128-
}
129137
}
130138
}
131-
132-
if (state.isLoading) {
133-
ReedLoadingIndicator()
139+
Spacer(
140+
modifier = Modifier.height(if (state.returnToScreen == null) ReedTheme.spacing.spacing2 else ReedTheme.spacing.spacing8),
141+
)
142+
if (state.returnToScreen == null) {
143+
ReedTextButton(
144+
onClick = {
145+
state.eventSink(LoginUiEvent.OnGuestLoginButtonClick)
146+
},
147+
text = stringResource(R.string.guest_login),
148+
sizeStyle = smallButtonStyle,
149+
colorStyle = ReedButtonColorStyle.TEXT,
150+
)
134151
}
135152
}
153+
154+
if (state.isLoading) {
155+
ReedLoadingIndicator()
156+
}
136157
}
137158
}
138159
}

‎feature/login/src/main/kotlin/com/ninecraft/booket/feature/login/component/LoginTooltipBox.kt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.width
1111
import androidx.compose.foundation.shape.RoundedCornerShape
1212
import androidx.compose.material3.Text
1313
import androidx.compose.runtime.Composable
14-
import androidx.compose.ui.Alignment
1514
import androidx.compose.ui.Modifier
1615
import androidx.compose.ui.draw.clip
1716
import androidx.compose.ui.draw.shadow
@@ -52,10 +51,11 @@ private val TriangleShape = object : Shape {
5251
@Composable
5352
internal fun LoginTooltipBox(
5453
@StringRes messageResId: Int,
54+
modifier: Modifier = Modifier,
5555
) {
56-
Column(horizontalAlignment = Alignment.Start) {
56+
Column(modifier = modifier) {
5757
Box(
58-
Modifier
58+
modifier = Modifier
5959
.shadow(ReedTheme.radius.xs, RoundedCornerShape(ReedTheme.radius.xs), clip = false)
6060
.clip(RoundedCornerShape(ReedTheme.radius.xs))
6161
.background(ReedTheme.colors.contentBrand)

0 commit comments

Comments
 (0)