kevin/baron-sso
1
0
Fork 0
forked from baron/baron-sso
Code Pull Requests Activity

fix: 회원가입 화면(Userfront) 모바일 뷰에서 인증 입력창 사라지는 반응형 레이아웃 버그 수정

Browse Source
This commit is contained in:
조찬영
2026-04-27 11:56:49 +09:00
parent 093d2f2af0
commit 3de28410ae
2 changed files with 109 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
userfront/lib/features/auth/presentation/signup_screen.dart
View File

@@ -22,9 +22,9 @@ class _SignupScreenState extends State<SignupScreen> {
static const _signupMuted = Color(0xFF6B7280); static const _signupMuted = Color(0xFF6B7280);
static const _signupDone = Color(0xFF0F766E); static const _signupDone = Color(0xFF0F766E);
static const _signupDoneSurface = Color(0xFFECFDF5); static const _signupDoneSurface = Color(0xFFECFDF5);
static const _agreementDesktopBreakpoint = 960.0; static const _agreementDesktopBreakpoint = 1024.0;
static const _agreementCardMaxWidth = 880.0; static const _agreementCardMaxWidth = 880.0;
static const _stepIndicatorDesktopBreakpoint = 720.0; static const _stepIndicatorDesktopBreakpoint = 1024.0;
static const _stepIndicatorMaxWidth = 880.0; static const _stepIndicatorMaxWidth = 880.0;
final _formKey = GlobalKey<FormState>(); final _formKey = GlobalKey<FormState>();
@@ -1254,7 +1254,8 @@ class _SignupScreenState extends State<SignupScreen> {
], ],
), ),
SizedBox(height: isDesktop ? 20 : 16), SizedBox(height: isDesktop ? 20 : 16),
Row( isDesktop
? Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Expanded( Expanded(
@@ -1277,7 +1278,7 @@ class _SignupScreenState extends State<SignupScreen> {
const SizedBox(width: 10), const SizedBox(width: 10),
SizedBox( SizedBox(
height: 52, height: 52,
width: isDesktop ? 108 : null, width: 108,
child: FilledButton( child: FilledButton(
onPressed: buttonEnabled ? onRequestCode : null, onPressed: buttonEnabled ? onRequestCode : null,
style: FilledButton.styleFrom( style: FilledButton.styleFrom(
@@ -1286,7 +1287,47 @@ class _SignupScreenState extends State<SignupScreen> {
disabledBackgroundColor: const Color(0xFFE5E7EB), disabledBackgroundColor: const Color(0xFFE5E7EB),
disabledForegroundColor: const Color(0xFF9CA3AF), disabledForegroundColor: const Color(0xFF9CA3AF),
), ),
child: Text(buttonLabel), child: Text(
buttonLabel,
style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
),
),
),
],
)
: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
ConstrainedBox(
constraints: const BoxConstraints(minHeight: 56),
child: TextFormField(
controller: controller,
onChanged: onChanged,
decoration: InputDecoration(
labelText: label,
border: const OutlineInputBorder(),
errorText: errorText,
hintText: hintText,
),
readOnly: readOnly,
keyboardType: keyboardType,
),
),
const SizedBox(height: 10),
SizedBox(
height: 52,
child: FilledButton(
onPressed: buttonEnabled ? onRequestCode : null,
style: FilledButton.styleFrom(
backgroundColor: _signupInk,
foregroundColor: Colors.white,
disabledBackgroundColor: const Color(0xFFE5E7EB),
disabledForegroundColor: const Color(0xFF9CA3AF),
),
child: Text(
buttonLabel,
style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
),
), ),
), ),
], ],
@@ -1299,7 +1340,8 @@ class _SignupScreenState extends State<SignupScreen> {
children: [ children: [
if (verificationVisible) ...[ if (verificationVisible) ...[
const SizedBox(height: 12), const SizedBox(height: 12),
Row( isDesktop
? Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Expanded( Expanded(
@@ -1324,8 +1366,27 @@ class _SignupScreenState extends State<SignupScreen> {
), ),
), ),
const SizedBox(width: 10), const SizedBox(width: 10),
SizedBox(width: isDesktop ? 108 : 0), const SizedBox(width: 108),
], ],
)
: ConstrainedBox(
constraints: const BoxConstraints(minHeight: 56),
child: TextFormField(
controller: verificationController,
decoration: InputDecoration(
labelText: tr(
'ui.userfront.signup.auth.code_label',
),
suffixText: verificationCountdown,
border: const OutlineInputBorder(),
),
keyboardType: TextInputType.number,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
LengthLimitingTextInputFormatter(6),
],
onChanged: onVerificationChanged,
),
), ),
], ],
if (verified) ...[ if (verified) ...[