441 lines
16 KiB
Dart
441 lines
16 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
import '../../core/data/backend.dart';
|
|
import '../../core/theme/tokens.dart';
|
|
import 'auth_repository.dart';
|
|
|
|
/// 회원가입 약관 — Figma `179:24230`(미동의) · `179:24324`(전체 동의).
|
|
///
|
|
/// 필수 항목을 모두 체크해야 「완료」가 켜진다. 완료하면 동의한 항목 키([signupTermKeys] 중)를
|
|
/// 돌려준다 — 가입 모드([SimpleLoginScreen])는 `pop` 결과로, 로그인 직후 약관 단계는 [onAgreed] 로 받는다.
|
|
/// 서버(`fnSignupConsent`)가 같은 필수 목록을 다시 검사하고 항목별 동의 행을 남긴다.
|
|
///
|
|
/// - 필수: 서비스 이용약관 · 개인정보 수집·이용 동의 · 만 14세 이상.
|
|
/// - 선택: 마케팅 수신(기본 OFF).
|
|
/// - 위치기반 서비스 약관은 여기서 받지 않는다 — 위치기능 최초 사용 직전에 따로 받는다.
|
|
/// - 개인정보처리방침은 동의 항목이 아니라 고지다 — 체크 칸 없이 목록 끝에 안내와 보기 링크만 둔다.
|
|
///
|
|
/// 약관 본문은 확정 문구를 받기 전까지 시안의 자리 표시 문구다 — 받으면
|
|
/// [termsPlaceholderBody] 와 [signupTermsVersion] 을 함께 바꾼다(동의 기록에 버전이 남는다).
|
|
class TermsScreen extends StatefulWidget {
|
|
const TermsScreen({super.key, this.onAgreed, this.onBack, this.busy = false});
|
|
|
|
/// 로그인 직후 약관 단계에서 쓸 때 — 「완료」가 화면을 닫지 않고 이걸 부른다.
|
|
final ValueChanged<Set<String>>? onAgreed;
|
|
final VoidCallback? onBack;
|
|
|
|
/// 동의를 기록하는 중 — 버튼을 막고 진행 표시를 띄운다.
|
|
final bool busy;
|
|
|
|
@override
|
|
State<TermsScreen> createState() => _TermsScreenState();
|
|
}
|
|
|
|
/// 동의 기록에 남는 약관 버전. 본문이 자리 표시 문구인 동안은 `draft` 다.
|
|
const signupTermsVersion = 'draft-1';
|
|
|
|
/// 서버 `SIGNUP_REQUIRED_TERMS` + 선택 `marketing` 과 같은 키.
|
|
List<String> get signupTermKeys => [for (final t in _Term.values) t.name];
|
|
|
|
enum _Term {
|
|
service('서비스 이용약관 (필수)', required: true, body: true),
|
|
privacy('개인정보 수집·이용 동의 (필수)', required: true, body: true),
|
|
age('만 14세 이상입니다. (필수)', required: true, body: false),
|
|
marketing('마케팅 정보 및 이벤트 알림 수신 동의 (선택)', required: false, body: true);
|
|
|
|
const _Term(this.label, {required this.required, required this.body});
|
|
|
|
final String label;
|
|
final bool required;
|
|
final bool body;
|
|
}
|
|
|
|
/// 약관 본문 자리 표시 문구.
|
|
const termsPlaceholderBody =
|
|
'FANUZU 서비스 이용약관\n\n제1조 (적용범위)\n서비스 이용약관에 대한 더미 텍스트 입니다.\n'
|
|
'추후 작성해주시기 바랍니다. 서비스 이용약관에 대한 더미 텍스트 입니다.';
|
|
|
|
const _stroke = Color(0xFF545454);
|
|
|
|
class _TermsScreenState extends State<TermsScreen> {
|
|
final _agreed = <_Term>{};
|
|
|
|
bool get _all => _agreed.length == _Term.values.length;
|
|
bool get _ready =>
|
|
_Term.values.where((t) => t.required).every(_agreed.contains);
|
|
|
|
void _done() {
|
|
final agreed = {for (final t in _agreed) t.name};
|
|
final cb = widget.onAgreed;
|
|
cb != null ? cb(agreed) : Navigator.of(context).pop(agreed);
|
|
}
|
|
|
|
void _back() => (widget.onBack ?? () => Navigator.of(context).pop())();
|
|
|
|
void _toggle(_Term t) =>
|
|
setState(() => _agreed.contains(t) ? _agreed.remove(t) : _agreed.add(t));
|
|
|
|
void _showPrivacyPolicy() => showDialog<void>(
|
|
context: context,
|
|
builder: (context) => AlertDialog(
|
|
title: const Text('개인정보처리방침'),
|
|
content: const SingleChildScrollView(child: Text(termsPlaceholderBody)),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () => Navigator.of(context).pop(),
|
|
child: const Text('확인'),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
|
|
Widget _buttons() {
|
|
final shape = RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(AppRadius.sm),
|
|
);
|
|
final busy = widget.busy;
|
|
return Row(
|
|
children: [
|
|
Expanded(
|
|
child: FilledButton(
|
|
onPressed: busy ? null : _back,
|
|
style: FilledButton.styleFrom(
|
|
minimumSize: const Size.fromHeight(56),
|
|
shape: shape,
|
|
side: const BorderSide(color: _stroke),
|
|
backgroundColor: Colors.black,
|
|
foregroundColor: AppColors.onCosmic,
|
|
),
|
|
child: const Text('이전'),
|
|
),
|
|
),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: FilledButton(
|
|
onPressed: _ready && !busy ? _done : null,
|
|
style: FilledButton.styleFrom(
|
|
minimumSize: const Size.fromHeight(56),
|
|
shape: shape,
|
|
side: const BorderSide(color: _stroke),
|
|
backgroundColor: AppColors.cosmicAccent,
|
|
foregroundColor: AppColors.onCosmicAccent,
|
|
disabledBackgroundColor: const Color(0xFF333333),
|
|
disabledForegroundColor: const Color(0xFF777777),
|
|
),
|
|
child: const Text('완료'),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final scaffold = Scaffold(
|
|
// Figma `179:24230` 머리줄 좌측 「<」 — 「이전」과 같은 동작.
|
|
appBar: AppBar(
|
|
automaticallyImplyLeading: false,
|
|
leading: BackButton(onPressed: widget.busy ? null : _back),
|
|
title: const Text('이용 약관'),
|
|
centerTitle: true,
|
|
),
|
|
// 「이전 · 완료」는 화면 하단 고정(56 높이 · 간격 10). 시스템 내비게이션 바 위로 올린다.
|
|
bottomNavigationBar: SafeArea(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(AppSpace.s4),
|
|
child: _buttons(),
|
|
),
|
|
),
|
|
body: ListView(
|
|
padding: const EdgeInsets.all(AppSpace.s4),
|
|
children: [
|
|
_Box(
|
|
child: _CheckRow(
|
|
label: '전체 동의',
|
|
checked: _all,
|
|
size: 16,
|
|
onTap: () => setState(
|
|
() => _all ? _agreed.clear() : _agreed.addAll(_Term.values),
|
|
),
|
|
),
|
|
),
|
|
for (final t in _Term.values) ...[
|
|
const SizedBox(height: AppSpace.s3),
|
|
_Box(
|
|
child: t.body
|
|
? Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
Container(
|
|
// 시안 획은 안쪽이다 — decoration 이면 획 두께만큼 높이가 는다.
|
|
foregroundDecoration: const BoxDecoration(
|
|
border: Border(bottom: BorderSide(color: _stroke)),
|
|
),
|
|
child: _CheckRow(
|
|
label: t.label,
|
|
checked: _agreed.contains(t),
|
|
onTap: () => _toggle(t),
|
|
),
|
|
),
|
|
const Padding(
|
|
padding: EdgeInsets.symmetric(vertical: AppSpace.s4),
|
|
child: SizedBox(
|
|
height: 80,
|
|
child: ClipRect(
|
|
child: Text(
|
|
termsPlaceholderBody,
|
|
overflow: TextOverflow.clip,
|
|
style: TextStyle(
|
|
fontFamily: AppFonts.display,
|
|
fontFamilyFallback: [AppFonts.body],
|
|
fontSize: 12,
|
|
height: 1.36,
|
|
letterSpacing: -0.3,
|
|
color: AppColors.onCosmic,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
)
|
|
: _CheckRow(
|
|
label: t.label,
|
|
checked: _agreed.contains(t),
|
|
onTap: () => _toggle(t),
|
|
),
|
|
),
|
|
],
|
|
// 개인정보처리방침 — 동의 항목과 구분한 고지. 체크 칸이 없고 「보기」로 본문을 연다.
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: AppSpace.s4),
|
|
child: Row(
|
|
children: [
|
|
const Expanded(
|
|
child: Text(
|
|
'개인정보 처리 내용은 개인정보처리방침에서 확인할 수 있습니다.',
|
|
style: TextStyle(
|
|
fontFamily: AppFonts.display,
|
|
fontFamilyFallback: [AppFonts.body],
|
|
fontSize: 12,
|
|
height: 1.36,
|
|
color: AppColors.onCosmicMuted,
|
|
),
|
|
),
|
|
),
|
|
TextButton(
|
|
key: const ValueKey('privacy-policy-link'),
|
|
onPressed: _showPrivacyPolicy,
|
|
child: const Text('보기'),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
if (!widget.busy) return scaffold;
|
|
return Stack(children: [scaffold, const BlockingProgress()]);
|
|
}
|
|
}
|
|
|
|
/// 진행 중 화면 전체를 막는 반투명 막 + 가운데 진행 표시.
|
|
class BlockingProgress extends StatelessWidget {
|
|
const BlockingProgress({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) => const Stack(
|
|
children: [
|
|
ModalBarrier(dismissible: false, color: Color(0x8A000000)),
|
|
Center(child: CircularProgressIndicator()),
|
|
],
|
|
);
|
|
}
|
|
|
|
/// 로그인 직후 약관 단계 — 동의 기록이 없는 계정은 HOME 대신 여기로 온다.
|
|
///
|
|
/// 판정 중(또는 이미 동의한 계정이 셸로 넘어가는 동안)에는 진행 표시만 그린다.
|
|
/// 「이전」은 로그아웃하고 로그인 화면으로 돌아간다 — 동의 없이 셸에 들어가는 길이 없다.
|
|
class SignupTermsGate extends StatefulWidget {
|
|
const SignupTermsGate({super.key, required this.auth});
|
|
|
|
final AuthRepository auth;
|
|
|
|
@override
|
|
State<SignupTermsGate> createState() => _SignupTermsGateState();
|
|
}
|
|
|
|
class _SignupTermsGateState extends State<SignupTermsGate> {
|
|
bool _busy = false;
|
|
|
|
Future<void> _agree(Set<String> agreed) async {
|
|
setState(() => _busy = true);
|
|
try {
|
|
await widget.auth.agreeTerms(agreed);
|
|
} catch (e) {
|
|
if (!mounted) return;
|
|
ScaffoldMessenger.maybeOf(context)
|
|
?..hideCurrentSnackBar()
|
|
..showSnackBar(
|
|
SnackBar(
|
|
content: Text(
|
|
e is BackendException ? e.message : '요청을 처리하지 못했습니다. 다시 시도해 주세요.',
|
|
),
|
|
),
|
|
);
|
|
} finally {
|
|
if (mounted) setState(() => _busy = false);
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) => ListenableBuilder(
|
|
listenable: widget.auth,
|
|
builder: (context, _) => widget.auth.terms == TermsGate.required
|
|
? TermsScreen(
|
|
busy: _busy,
|
|
onAgreed: _agree,
|
|
onBack: widget.auth.signOut,
|
|
)
|
|
: const Scaffold(body: Center(child: CircularProgressIndicator())),
|
|
);
|
|
}
|
|
|
|
/// 약관 칸 — #545454 획 · 모서리 8 · 좌우 16.
|
|
class _Box extends StatelessWidget {
|
|
const _Box({required this.child});
|
|
|
|
final Widget child;
|
|
|
|
@override
|
|
Widget build(BuildContext context) => Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: AppSpace.s4),
|
|
foregroundDecoration: BoxDecoration(
|
|
border: Border.all(color: _stroke),
|
|
borderRadius: BorderRadius.circular(AppRadius.sm),
|
|
),
|
|
child: child,
|
|
);
|
|
}
|
|
|
|
/// 체크 행 — circle-check 20 · 간격 16 · ABeeZee. 미동의는 #767676, 동의는 핑크.
|
|
class _CheckRow extends StatelessWidget {
|
|
const _CheckRow({
|
|
required this.label,
|
|
required this.checked,
|
|
required this.onTap,
|
|
this.size = 14,
|
|
});
|
|
|
|
final String label;
|
|
final bool checked;
|
|
final VoidCallback onTap;
|
|
final double size;
|
|
|
|
@override
|
|
Widget build(BuildContext context) => InkWell(
|
|
onTap: onTap,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: AppSpace.s4),
|
|
child: Row(
|
|
children: [
|
|
ImageIcon(
|
|
const AssetImage('assets/icons/circle_check.png'),
|
|
size: 20,
|
|
color: checked ? AppColors.cosmicAccent : AppColors.onCosmicMuted,
|
|
),
|
|
const SizedBox(width: AppSpace.s4),
|
|
Expanded(
|
|
child: Text(
|
|
label,
|
|
style: TextStyle(
|
|
fontFamily: AppFonts.display,
|
|
fontFamilyFallback: const [AppFonts.body],
|
|
fontSize: size,
|
|
height: size == 16 ? 24 / 16 : 20 / 14,
|
|
color: AppColors.onCosmic,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 회원가입 완료 — Figma `182:29344`. 「시작」은 이 화면을 닫는다.
|
|
///
|
|
/// 아직 가입 동선에 걸려 있지 않다. 제공자 인증이 성공하면 라우터 redirect 가 곧장 셸로
|
|
/// 보내므로, 이 화면을 끼우려면 redirect 가 「가입 직후」를 알아야 한다(app_router 공유 변경).
|
|
class SignupCompleteScreen extends StatelessWidget {
|
|
const SignupCompleteScreen({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
body: SafeArea(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
Expanded(
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
const Padding(
|
|
padding: EdgeInsets.all(20),
|
|
child: SizedBox.square(
|
|
dimension: 120,
|
|
child: DecoratedBox(
|
|
decoration: BoxDecoration(
|
|
color: AppColors.cosmicAccent,
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: AppSpace.s6),
|
|
const Text(
|
|
'회원가입이 완료되었습니다',
|
|
style: TextStyle(
|
|
fontFamily: AppFonts.body,
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.w600,
|
|
height: 1,
|
|
color: AppColors.onCosmic,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSpace.s3),
|
|
Text(
|
|
'팬덤 활동을 시작할 수 있습니다.\n다양한 활동을 통해 내 팬덤 행성을 키워보세요.',
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontFamily: AppFonts.display,
|
|
fontFamilyFallback: const [AppFonts.body],
|
|
fontSize: 14,
|
|
height: 24 / 14,
|
|
color: const Color(0xFFCDCDCD),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: AppSpace.s4),
|
|
child: FilledButton(
|
|
onPressed: () => Navigator.of(context).maybePop(),
|
|
style: FilledButton.styleFrom(
|
|
backgroundColor: AppColors.cosmicAccent,
|
|
foregroundColor: AppColors.onCosmicAccent,
|
|
),
|
|
child: const Text('시작'),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|