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

uf 회원가입 약관동의 테스크탑 레이아웃 개선

Browse Source
This commit is contained in:
김용연
2026-03-20 15:10:40 +09:00
parent 2571233c4a
commit 397605d5e5
4 changed files with 323 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
locales/en.toml
View File

File diff suppressed because one or more lines are too long

7
locales/ko.toml
View File

@@ -676,6 +676,11 @@ privacy_full = "개인정보 수집 및 이용 동의 전문..."
tos_full = "서비스 이용약관 전문..."
[msg.userfront.signup.agreement]
all_hint = "필수 약관 2개를 모두 확인하고 동의하면 다음 단계로 진행할 수 있습니다."
description = "계속 진행하려면 서비스 이용 조건과 개인정보 수집·이용 항목을 확인한 뒤 동의해주세요."
privacy_summary = "개인정보 수집 항목, 이용 목적, 보관 기준을 안내합니다."
progress = "필수 약관 {{total}}개 중 {{count}}개 동의 완료"
tos_summary = "서비스 이용 조건과 책임 범위를 확인할 수 있습니다."
title = "서비스 이용을 위해\n약관에 동의해주세요"
[msg.userfront.signup.auth]
@@ -1709,6 +1714,7 @@ title = "회원가입"
[ui.userfront.signup.agreement]
all = "모두 동의합니다"
privacy_title = "개인정보 수집 및 이용 동의 (필수)"
required = "필수"
tos_title = "바론 소프트웨어 이용약관 (필수)"
[ui.userfront.signup.auth]
@@ -1742,4 +1748,3 @@ verify = "본인인증"
[ui.userfront.signup.success]
action = "로그인하기"

7
locales/template.toml
View File

@@ -676,6 +676,11 @@ privacy_full = ""
tos_full = ""
[msg.userfront.signup.agreement]
all_hint = ""
description = ""
privacy_summary = ""
progress = ""
tos_summary = ""
title = ""
[msg.userfront.signup.auth]
@@ -1709,6 +1714,7 @@ title = ""
[ui.userfront.signup.agreement]
all = ""
privacy_title = ""
required = ""
tos_title = ""
[ui.userfront.signup.auth]
@@ -1742,4 +1748,3 @@ verify = ""
[ui.userfront.signup.success]
action = ""

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

@@ -14,6 +14,13 @@ class SignupScreen extends StatefulWidget {
}
class _SignupScreenState extends State<SignupScreen> {
static const _signupInk = Color(0xFF111827);
static const _signupBorder = Color(0xFFE5E7EB);
static const _signupSurface = Color(0xFFF8FAFC);
static const _signupMuted = Color(0xFF6B7280);
static const _agreementDesktopBreakpoint = 960.0;
static const _agreementCardMaxWidth = 880.0;
final _formKey = GlobalKey<FormState>();
int _currentStep = 1;
@@ -417,105 +424,305 @@ class _SignupScreenState extends State<SignupScreen> {
}
Widget _buildStepAgreement() {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
tr('msg.userfront.signup.agreement.title'),
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
height: 1.3,
),
),
const SizedBox(height: 24),
// 모두 동의 버튼
Container(
decoration: BoxDecoration(
color: Colors.grey[50],
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.grey[200]!),
),
child: CheckboxListTile(
title: Text(
tr('ui.userfront.signup.agreement.all'),
style: const TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
return LayoutBuilder(
builder: (context, constraints) {
final isDesktop = constraints.maxWidth >= _agreementDesktopBreakpoint;
return Align(
alignment: Alignment.topCenter,
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: isDesktop
? _agreementCardMaxWidth
: constraints.maxWidth,
),
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(isDesktop ? 24 : 18),
border: Border.all(color: _signupBorder),
boxShadow: isDesktop
? const [
BoxShadow(
color: Color(0x12000000),
blurRadius: 32,
offset: Offset(0, 18),
),
]
: const [],
),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: isDesktop ? 32 : 20,
vertical: isDesktop ? 32 : 24,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
tr('msg.userfront.signup.agreement.title'),
style: TextStyle(
fontSize: isDesktop ? 28 : 20,
fontWeight: FontWeight.w700,
height: 1.25,
color: _signupInk,
),
),
const SizedBox(height: 12),
Text(
tr('msg.userfront.signup.agreement.description'),
style: TextStyle(
fontSize: isDesktop ? 15 : 14,
height: 1.6,
color: _signupMuted,
),
),
SizedBox(height: isDesktop ? 28 : 24),
_buildAgreementSummaryCard(isDesktop: isDesktop),
const SizedBox(height: 18),
_agreementSection(
title: tr('ui.userfront.signup.agreement.tos_title'),
summary: tr('msg.userfront.signup.agreement.tos_summary'),
content: _tosText,
value: _termsAccepted,
isDesktop: isDesktop,
onChanged: (val) =>
setState(() => _termsAccepted = val ?? false),
),
const SizedBox(height: 18),
_agreementSection(
title: tr('ui.userfront.signup.agreement.privacy_title'),
summary: tr(
'msg.userfront.signup.agreement.privacy_summary',
),
content: _privacyText,
value: _privacyAccepted,
isDesktop: isDesktop,
onChanged: (val) =>
setState(() => _privacyAccepted = val ?? false),
),
],
),
),
),
value: _termsAccepted && _privacyAccepted,
onChanged: (val) {
setState(() {
_termsAccepted = val!;
_privacyAccepted = val;
});
},
controlAffinity: ListTileControlAffinity.leading,
activeColor: Colors.black,
),
);
},
);
}
Widget _buildAgreementSummaryCard({required bool isDesktop}) {
final acceptedCount = [
_termsAccepted,
_privacyAccepted,
].where((accepted) => accepted).length;
return DecoratedBox(
decoration: BoxDecoration(
color: _signupSurface,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: _signupBorder),
),
child: Padding(
padding: EdgeInsets.all(isDesktop ? 20 : 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
CheckboxListTile(
title: Text(
tr('ui.userfront.signup.agreement.all'),
style: TextStyle(
fontSize: isDesktop ? 17 : 15,
fontWeight: FontWeight.w700,
color: _signupInk,
),
),
subtitle: Padding(
padding: const EdgeInsets.only(top: 4),
child: Text(
tr('msg.userfront.signup.agreement.all_hint'),
style: const TextStyle(
fontSize: 13,
height: 1.45,
color: _signupMuted,
),
),
),
value: _termsAccepted && _privacyAccepted,
onChanged: (val) {
setState(() {
final next = val ?? false;
_termsAccepted = next;
_privacyAccepted = next;
});
},
contentPadding: EdgeInsets.zero,
controlAffinity: ListTileControlAffinity.leading,
activeColor: _signupInk,
),
const SizedBox(height: 8),
Text(
tr(
'msg.userfront.signup.agreement.progress',
params: {'count': '$acceptedCount', 'total': '2'},
),
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: _signupMuted,
),
),
],
),
const SizedBox(height: 16),
_agreementSection(
title: tr('ui.userfront.signup.agreement.tos_title'),
content: _tosText,
value: _termsAccepted,
onChanged: (val) => setState(() => _termsAccepted = val!),
),
const SizedBox(height: 16),
_agreementSection(
title: tr('ui.userfront.signup.agreement.privacy_title'),
content: _privacyText,
value: _privacyAccepted,
onChanged: (val) => setState(() => _privacyAccepted = val!),
),
],
),
);
}
Widget _agreementSection({
required String title,
required String summary,
required String content,
required bool value,
required bool isDesktop,
required ValueChanged<bool?> onChanged,
}) {
return Column(
children: [
CheckboxListTile(
title: Text(
title,
style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600),
),
value: value,
onChanged: onChanged,
controlAffinity: ListTileControlAffinity.leading,
contentPadding: EdgeInsets.zero,
activeColor: Colors.black,
),
Container(
height: 120,
width: double.infinity,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey[300]!),
borderRadius: BorderRadius.circular(4),
),
child: SingleChildScrollView(
child: Text(
content,
style: const TextStyle(
fontSize: 12,
color: Colors.grey,
height: 1.5,
final contentHeight = isDesktop ? 260.0 : 148.0;
return DecoratedBox(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(18),
border: Border.all(color: _signupBorder),
),
child: Padding(
padding: EdgeInsets.all(isDesktop ? 20 : 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: CheckboxListTile(
title: Text(
title,
style: TextStyle(
fontSize: isDesktop ? 16 : 14,
fontWeight: FontWeight.w700,
color: _signupInk,
),
),
subtitle: Padding(
padding: const EdgeInsets.only(top: 6),
child: Text(
summary,
style: const TextStyle(
fontSize: 13,
height: 1.45,
color: _signupMuted,
),
),
),
value: value,
onChanged: onChanged,
controlAffinity: ListTileControlAffinity.leading,
contentPadding: EdgeInsets.zero,
activeColor: _signupInk,
),
),
const SizedBox(width: 12),
_buildRequiredBadge(),
],
),
const SizedBox(height: 12),
Container(
height: contentHeight,
width: double.infinity,
padding: EdgeInsets.all(isDesktop ? 18 : 14),
decoration: BoxDecoration(
color: _signupSurface,
border: Border.all(color: _signupBorder),
borderRadius: BorderRadius.circular(14),
),
child: SingleChildScrollView(
child: SelectableText(
content,
style: TextStyle(
fontSize: isDesktop ? 13 : 12,
color: _signupMuted,
height: 1.6,
),
),
),
),
),
],
),
],
),
);
}
static String get _tosText => tr(
'msg.userfront.signup.tos_full',
fallback: """
Widget _buildRequiredBadge() {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
decoration: BoxDecoration(
color: const Color(0xFFEEF2FF),
borderRadius: BorderRadius.circular(999),
border: Border.all(color: const Color(0xFFC7D2FE)),
),
child: Text(
tr('ui.userfront.signup.agreement.required'),
style: const TextStyle(
fontSize: 11,
fontWeight: FontWeight.w700,
color: Color(0xFF3730A3),
),
),
);
}
Widget _buildStepBody() {
final stepChild = _currentStep == 1
? _buildStepAgreement()
: (_currentStep == 2
? _buildStepAuth()
: (_currentStep == 3 ? _buildStepInfo() : _buildStepPassword()));
return LayoutBuilder(
builder: (context, constraints) {
final isAgreementStep = _currentStep == 1;
final horizontalPadding =
isAgreementStep &&
constraints.maxWidth >= _agreementDesktopBreakpoint
? 40.0
: 24.0;
return SingleChildScrollView(
padding: EdgeInsets.fromLTRB(
horizontalPadding,
24,
horizontalPadding,
32,
),
child: Form(key: _formKey, child: stepChild),
);
},
);
}
static String _resolveAgreementText(
String key, {
required String fallback,
required Set<String> placeholders,
}) {
final localized = tr(key, fallback: '').trim();
if (localized.isEmpty || placeholders.contains(localized)) {
return fallback;
}
return localized;
}
static String get _tosText {
const fallback = """
바론 소프트웨어 이용약관
제1장 총칙
@@ -585,12 +792,16 @@ class _SignupScreenState extends State<SignupScreen> {
본 약관에 따른 분쟁은 서울중앙지방법원을 관할 법원으로 합니다.
부칙
본 약관은 2024년 10월 1일부터 시행됩니다.
""",
);
""";
return _resolveAgreementText(
'msg.userfront.signup.tos_full',
fallback: fallback,
placeholders: {'서비스 이용약관 전문...', 'Tos Full'},
);
}
static String get _privacyText => tr(
'msg.userfront.signup.privacy_full',
fallback: """
static String get _privacyText {
const fallback = """
개인정보 수집 및 이용 동의
바론서비스 개인정보처리방침
@@ -698,8 +909,13 @@ class _SignupScreenState extends State<SignupScreen> {
회사는 이용자의 개인정보를 국외로 이전하지 않으며, 향후 필요한 경우, 사전에 이용자의 동의를 받습니다.
제8조 (기타)
본 방침에 명시되지 않은 사항은 회사의 내부 방침과 관련 법령에 따릅니다.
""",
);
""";
return _resolveAgreementText(
'msg.userfront.signup.privacy_full',
fallback: fallback,
placeholders: {'개인정보 수집 및 이용 동의 전문...', 'Privacy Full'},
);
}
Widget _buildStepAuth() {
return Column(
@@ -1233,21 +1449,7 @@ class _SignupScreenState extends State<SignupScreen> {
padding: const EdgeInsets.symmetric(horizontal: 20),
child: _buildStepIndicator(),
),
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Form(
key: _formKey,
child: _currentStep == 1
? _buildStepAgreement()
: (_currentStep == 2
? _buildStepAuth()
: (_currentStep == 3
? _buildStepInfo()
: _buildStepPassword())),
),
),
),
Expanded(child: _buildStepBody()),
Padding(
padding: const EdgeInsets.all(24),
child: Row(