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

155
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,43 +1254,84 @@ class _SignupScreenState extends State<SignupScreen> {
], ],
), ),
SizedBox(height: isDesktop ? 20 : 16), SizedBox(height: isDesktop ? 20 : 16),
Row( isDesktop
crossAxisAlignment: CrossAxisAlignment.start, ? Row(
children: [ crossAxisAlignment: CrossAxisAlignment.start,
Expanded( children: [
child: ConstrainedBox( Expanded(
constraints: const BoxConstraints(minHeight: 56), child: ConstrainedBox(
child: TextFormField( constraints: const BoxConstraints(minHeight: 56),
controller: controller, child: TextFormField(
onChanged: onChanged, controller: controller,
decoration: InputDecoration( onChanged: onChanged,
labelText: label, decoration: InputDecoration(
border: const OutlineInputBorder(), labelText: label,
errorText: errorText, border: const OutlineInputBorder(),
hintText: hintText, errorText: errorText,
hintText: hintText,
),
readOnly: readOnly,
keyboardType: keyboardType,
),
),
), ),
readOnly: readOnly, const SizedBox(width: 10),
keyboardType: keyboardType, 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( AnimatedSize(
duration: const Duration(milliseconds: 180), duration: const Duration(milliseconds: 180),
curve: Curves.easeOut, curve: Curves.easeOut,
@@ -1299,11 +1340,36 @@ class _SignupScreenState extends State<SignupScreen> {
children: [ children: [
if (verificationVisible) ...[ if (verificationVisible) ...[
const SizedBox(height: 12), const SizedBox(height: 12),
Row( isDesktop
crossAxisAlignment: CrossAxisAlignment.start, ? Row(
children: [ crossAxisAlignment: CrossAxisAlignment.start,
Expanded( children: [
child: ConstrainedBox( 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), constraints: const BoxConstraints(minHeight: 56),
child: TextFormField( child: TextFormField(
controller: verificationController, controller: verificationController,
@@ -1322,11 +1388,6 @@ class _SignupScreenState extends State<SignupScreen> {
onChanged: onVerificationChanged, onChanged: onVerificationChanged,
), ),
), ),
),
const SizedBox(width: 10),
SizedBox(width: isDesktop ? 108 : 0),
],
),
], ],
if (verified) ...[ if (verified) ...[
const SizedBox(height: 12), const SizedBox(height: 12),