1
0
forked from baron/baron-sso

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

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

View File

@@ -156,4 +156,4 @@
"authorizer": { "handler": "allow" },
"mutators": [{ "handler": "noop" }]
}
]
]

View File

@@ -22,9 +22,9 @@ class _SignupScreenState extends State<SignupScreen> {
static const _signupMuted = Color(0xFF6B7280);
static const _signupDone = Color(0xFF0F766E);
static const _signupDoneSurface = Color(0xFFECFDF5);
static const _agreementDesktopBreakpoint = 960.0;
static const _agreementDesktopBreakpoint = 1024.0;
static const _agreementCardMaxWidth = 880.0;
static const _stepIndicatorDesktopBreakpoint = 720.0;
static const _stepIndicatorDesktopBreakpoint = 1024.0;
static const _stepIndicatorMaxWidth = 880.0;
final _formKey = GlobalKey<FormState>();
@@ -1254,43 +1254,84 @@ class _SignupScreenState extends State<SignupScreen> {
],
),
SizedBox(height: isDesktop ? 20 : 16),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: ConstrainedBox(
constraints: const BoxConstraints(minHeight: 56),
child: TextFormField(
controller: controller,
onChanged: onChanged,
decoration: InputDecoration(
labelText: label,
border: const OutlineInputBorder(),
errorText: errorText,
hintText: hintText,
isDesktop
? Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: 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,
),
),
),
readOnly: readOnly,
keyboardType: keyboardType,
),
const SizedBox(width: 10),
SizedBox(
height: 52,
width: 108,
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),
),
),
),
],
)
: 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),
),
),
),
],
),
),
const SizedBox(width: 10),
SizedBox(
height: 52,
width: isDesktop ? 108 : null,
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),
),
),
],
),
AnimatedSize(
duration: const Duration(milliseconds: 180),
curve: Curves.easeOut,
@@ -1299,11 +1340,36 @@ class _SignupScreenState extends State<SignupScreen> {
children: [
if (verificationVisible) ...[
const SizedBox(height: 12),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: ConstrainedBox(
isDesktop
? Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: 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,
),
),
),
const SizedBox(width: 10),
const SizedBox(width: 108),
],
)
: ConstrainedBox(
constraints: const BoxConstraints(minHeight: 56),
child: TextFormField(
controller: verificationController,
@@ -1322,11 +1388,6 @@ class _SignupScreenState extends State<SignupScreen> {
onChanged: onVerificationChanged,
),
),
),
const SizedBox(width: 10),
SizedBox(width: isDesktop ? 108 : 0),
],
),
],
if (verified) ...[
const SizedBox(height: 12),