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

locales/ko.toml

@@ -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 = "로그인하기"
-

locales/template.toml

@@ -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 = ""
-

userfront/lib/features/auth/presentation/signup_screen.dart

@@ -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(
+    return LayoutBuilder(
-      crossAxisAlignment: CrossAxisAlignment.stretch,
+      builder: (context, constraints) {
-      children: [
+        final isDesktop = constraints.maxWidth >= _agreementDesktopBreakpoint;
-        Text(
+
-          tr('msg.userfront.signup.agreement.title'),
+        return Align(
-          style: const TextStyle(
+          alignment: Alignment.topCenter,
-            fontSize: 20,
+          child: ConstrainedBox(
-            fontWeight: FontWeight.bold,
+            constraints: BoxConstraints(
-            height: 1.3,
+              maxWidth: isDesktop
-          ),
+                  ? _agreementCardMaxWidth
-        ),
+                  : constraints.maxWidth,
-        const SizedBox(height: 24),
+            ),
-        // 모두 동의 버튼
+            child: DecoratedBox(
-        Container(
+              decoration: BoxDecoration(
-          decoration: BoxDecoration(
+                color: Colors.white,
-            color: Colors.grey[50],
+                borderRadius: BorderRadius.circular(isDesktop ? 24 : 18),
-            borderRadius: BorderRadius.circular(8),
+                border: Border.all(color: _signupBorder),
-            border: Border.all(color: Colors.grey[200]!),
+                boxShadow: isDesktop
-          ),
+                    ? const [
-          child: CheckboxListTile(
+                        BoxShadow(
-            title: Text(
+                          color: Color(0x12000000),
-              tr('ui.userfront.signup.agreement.all'),
+                          blurRadius: 32,
-              style: const TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
+                          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(
+    final contentHeight = isDesktop ? 260.0 : 148.0;
-      children: [
+
-        CheckboxListTile(
+    return DecoratedBox(
-          title: Text(
+      decoration: BoxDecoration(
-            title,
+        color: Colors.white,
-            style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600),
+        borderRadius: BorderRadius.circular(18),
-          ),
+        border: Border.all(color: _signupBorder),
-          value: value,
+      ),
-          onChanged: onChanged,
+      child: Padding(
-          controlAffinity: ListTileControlAffinity.leading,
+        padding: EdgeInsets.all(isDesktop ? 20 : 16),
-          contentPadding: EdgeInsets.zero,
+        child: Column(
-          activeColor: Colors.black,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
-        ),
+          children: [
-        Container(
+            Row(
-          height: 120,
+              crossAxisAlignment: CrossAxisAlignment.start,
-          width: double.infinity,
+              children: [
-          padding: const EdgeInsets.all(12),
+                Expanded(
-          decoration: BoxDecoration(
+                  child: CheckboxListTile(
-            color: Colors.white,
+                    title: Text(
-            border: Border.all(color: Colors.grey[300]!),
+                      title,
-            borderRadius: BorderRadius.circular(4),
+                      style: TextStyle(
-          ),
+                        fontSize: isDesktop ? 16 : 14,
-          child: SingleChildScrollView(
+                        fontWeight: FontWeight.w700,
-            child: Text(
+                        color: _signupInk,
-              content,
+                      ),
-              style: const TextStyle(
+                    ),
-                fontSize: 12,
+                    subtitle: Padding(
-                color: Colors.grey,
+                      padding: const EdgeInsets.only(top: 6),
-                height: 1.5,
+                      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(
+  Widget _buildRequiredBadge() {
-    'msg.userfront.signup.tos_full',
+    return Container(
-    fallback: """
+      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(
+  static String get _privacyText {
-    'msg.userfront.signup.privacy_full',
+    const fallback = """
-    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(
+            Expanded(child: _buildStepBody()),
-              child: SingleChildScrollView(
-                padding: const EdgeInsets.all(24),
-                child: Form(
-                  key: _formKey,
-                  child: _currentStep == 1
-                      ? _buildStepAgreement()
-                      : (_currentStep == 2
-                            ? _buildStepAuth()
-                            : (_currentStep == 3
-                                  ? _buildStepInfo()
-                                  : _buildStepPassword())),
-                ),
-              ),
-            ),
             Padding(
               padding: const EdgeInsets.all(24),
               child: Row(