89 lines
3.7 KiB
TypeScript
89 lines
3.7 KiB
TypeScript
/*
|
|
* 회원가입 — 04_backend_public_auth.md §1. 공개 경로.
|
|
* 비밀번호 8~100자. companyName·inviteCode 선택. 성공 시 로그인 안내.
|
|
*/
|
|
import { router } from 'expo-router';
|
|
import React, { useState } from 'react';
|
|
import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, Text } from 'react-native';
|
|
import { Banner } from '../components/Banner';
|
|
import { Button } from '../components/Button';
|
|
import { Field } from '../components/Field';
|
|
import { ApiRequestError } from '../lib/api';
|
|
import { register } from '../lib/auth';
|
|
import { colors, spacing, type } from '../theme';
|
|
|
|
export default function RegisterScreen() {
|
|
const [email, setEmail] = useState('');
|
|
const [displayName, setDisplayName] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [companyName, setCompanyName] = useState('');
|
|
const [inviteCode, setInviteCode] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [done, setDone] = useState<string | null>(null);
|
|
|
|
async function onSubmit() {
|
|
setError(null);
|
|
if (!email.trim() || !displayName.trim() || password.length < 8) {
|
|
setError('이메일·이름·비밀번호(8자 이상)를 확인해 주세요.');
|
|
return;
|
|
}
|
|
setLoading(true);
|
|
try {
|
|
const res = await register({
|
|
email,
|
|
displayName: displayName.trim(),
|
|
password,
|
|
companyName: companyName.trim() || undefined,
|
|
inviteCode: inviteCode.trim() || undefined,
|
|
});
|
|
setDone(
|
|
res.joinedEvent
|
|
? '가입이 완료되었고 초대 행사에 연결되었습니다. 로그인해 주세요.'
|
|
: '가입이 완료되었습니다. 로그인해 주세요.',
|
|
);
|
|
} catch (e) {
|
|
if (e instanceof ApiRequestError && e.code === 'EMAIL_TAKEN') {
|
|
setError('이미 가입된 이메일입니다.');
|
|
} else if (e instanceof ApiRequestError) {
|
|
setError(e.message);
|
|
} else {
|
|
setError('회원가입에 실패했습니다.');
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={styles.flex}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
|
>
|
|
<ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled">
|
|
<Text style={styles.title}>계정 만들기</Text>
|
|
{error ? <Banner tone="error">{error}</Banner> : null}
|
|
{done ? <Banner tone="info">{done}</Banner> : null}
|
|
|
|
<Field label="이메일" value={email} onChangeText={setEmail} placeholder="name@company.co.kr" keyboardType="email-address" />
|
|
<Field label="이름" value={displayName} onChangeText={setDisplayName} placeholder="홍길동" autoCapitalize="none" />
|
|
<Field label="비밀번호" value={password} onChangeText={setPassword} placeholder="8자 이상" secureTextEntry helperText="8~100자" />
|
|
<Field label="회사명 (선택)" value={companyName} onChangeText={setCompanyName} placeholder="지오인포" />
|
|
<Field label="초대 코드 (선택)" value={inviteCode} onChangeText={setInviteCode} placeholder="행사 초대 코드" />
|
|
|
|
{done ? (
|
|
<Button label="로그인으로 이동" onPress={() => router.replace('/login')} />
|
|
) : (
|
|
<Button label="가입하기" onPress={onSubmit} loading={loading} />
|
|
)}
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
flex: { flex: 1, backgroundColor: colors.neutral050 },
|
|
scroll: { padding: spacing.md, gap: spacing.md, paddingBottom: spacing.xl },
|
|
title: { fontSize: type.h2.fontSize, fontWeight: '700', color: colors.neutral900 },
|
|
});
|