!busy && onClose()} style={{
position: 'absolute', inset: 0, zIndex: 60, background: 'rgba(18,32,23,0.42)',
opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none', transition: 'opacity .28s ease',
}} />
{/* sheet */}
{state === 'done' ? (
지갑이 생성되었어요
EverSeal가 새 XRPL 지갑을 만들었어요.
키는 기기에 안전하게 보관됩니다.
) : busy ? (
지갑을 만들고 있어요
XRPL 원장에 안전하게 생성 중…
) : (
지갑 주소를 모르시나요?
지금 없어도 괜찮아요. 가입 후 담당자가 지갑 발급을 도와드려요.
{features.map(([ic, t, d], i) => (
))}
)}
);
}
// ─────────────────────────────────────────────────────────
// 3) SignUpViewController — 2 steps
// ─────────────────────────────────────────────────────────
function SignUpVC() {
const [step, setStep] = React.useState(1);
const [role, setRole] = React.useState('화가');
const [sig, setSig] = React.useState('idle'); // idle | nonce | done
const [terms, setTerms] = React.useState({ all: false, t1: false, t2: false });
const [sheet, setSheet] = React.useState('closed'); // closed | intro | creating | done
const [addr, setAddr] = React.useState('');
const GEN_ADDR = 'rPv8s2KqWmEx7Yd4LhTnZc9bF6jRnUa3E';
const generated = addr === GEN_ADDR;
const createWallet = () => {
setSheet('creating');
setTimeout(() => { setAddr(GEN_ADDR); setSheet('done'); }, 1300);
};
const roles = ['화가', '경매사', '투자자'];
const TOTAL = 4;
const STEP_TITLES = ['계정 정보', '프로필', '지갑 연결', '약관 동의'];
const Progress = () => (
{Array.from({ length: TOTAL }).map((_, i) => (
))}
);
return (
step > 1 ? setStep(step - 1) : null} />
회원가입 · {step}/{TOTAL}
{STEP_TITLES[step - 1]}
{step === 1 ? (
) : step === 2 ? (
) : step === 3 ? (
EverSeal은 내부 지갑만 지원해요. 이미 발급받은 EverSeal 지갑 주소가 있다면 입력해 주세요.
{generated && (
EverSeal 생성
)}
) : (
{[['all', '약관 전체 동의', true], ['t1', '서비스 이용약관 (필수)', false], ['t2', '개인정보 처리방침 (필수)', false]].map(([k, label, bold]) => {
const on = k === 'all' ? terms.all : terms[k];
const toggle = () => {
if (k === 'all') { const v = !terms.all; setTerms({ all: v, t1: v, t2: v }); }
else { const nt = { ...terms, [k]: !terms[k] }; nt.all = nt.t1 && nt.t2; setTerms(nt); }
};
return (
{on && }
{label}
{!bold &&
}
);
})}
)}
setSheet('closed')}
onUse={() => setSheet('closed')}
/>
);
}
// ─────────────────────────────────────────────────────────
// 4) FindPasswordViewController
// ─────────────────────────────────────────────────────────
function FindPasswordVC() {
const [sent, setSent] = React.useState(false);
return (
setSent(false)} />
{sent ? '메일을 확인하세요' : '비밀번호 찾기'}
{sent
? '입력하신 주소로 재설정 링크를 보냈습니다. 메일의 안내에 따라 비밀번호를 다시 설정해 주세요.'
: '가입하신 이메일 주소를 입력하시면 비밀번호 재설정 링크를 보내드립니다.'}
{!sent && (
)}
{sent && (
)}
{!sent
?
:
}
);
}
// ─────────────────────────────────────────────────────────
// 5) AuthenticityVerificationViewController — GUEST
// ─────────────────────────────────────────────────────────
function GuestVerifyVC() {
const [state, setState] = React.useState('idle'); // idle | scanning | done
React.useEffect(() => {
if (state === 'scanning') { const t = setTimeout(() => setState('done'), 2200); return () => clearTimeout(t); }
}, [state]);
return (
setState('idle')}
right={게스트} />
{state !== 'done' ? (
<>
{state === 'scanning' && [0, 1, 2].map(i => (
))}
{state === 'idle' ? '작품에 휴대폰을 가까이 대세요' : '정품 여부를 확인하는 중…'}
{state === 'idle'
? '로그인 없이도 작품의 NFC 태그로 정품 여부를 바로 확인할 수 있어요.'
: 'NFC 태그와 서버 원장을 대조하고 있습니다.'}
) : (
정품으로 확인되었습니다
NFC 태그 · 서버 원장 검증 완료
새벽의 정물 No.3
박서린 · 2025 · 에디션 12/50
자세한 거래·소유 이력은 로그인 후 확인할 수 있습니다.
)}
{state === 'idle' &&
}
{state === 'scanning' &&
}
{state === 'done' && <>
}
);
}
// ─────────────────────────────────────────────────────────
// 6) WalletAuthViewController — standalone XRPL signature auth
// ─────────────────────────────────────────────────────────
function WalletAuthVC({ initial = 'address', onSkip }) {
const demoAddr = 'rN7n7otQDd6FczFgLdSqtcsAUxDkw6fzRH';
const [state, setState] = React.useState(initial); // address | done
const [addr, setAddr] = React.useState(initial === 'address' ? '' : demoAddr);
const [err, setErr] = React.useState('');
const connect = () => {
if (addr.trim().length < 20 || !addr.trim().startsWith('r')) { setErr('올바른 XRPL 지갑 주소를 입력해 주세요.'); return; }
setErr(''); setState('done');
};
const subtitle = {
address: 'EverSeal은 내부 지갑만 지원해요. 이미 발급받은 주소가 있다면 입력해 주세요.',
done: '지갑이 연결되어 서비스를 이용할 수 있어요.',
}[state];
return (
setState('address')} />
{state === 'done' ? '지갑 연결 완료' : '지갑 연결'}
{subtitle}
{state === 'address' && (
{err
?
{err}
:
주소가 없거나 모르면, 나중에 확인 또는 생성이 가능하니 다음으로 넘어가셔도 돼요.}
)}
{state === 'done' && (
{[['지갑', 'EverSeal 내부 지갑'], ['주소', addr.slice(0, 8) + '…' + addr.slice(-4)], ['상태', '연결 완료']].map(([k, v], i) => (
{k}
{v}
))}
)}
{state === 'address' && <>
}
{state === 'done' &&
}
);
}
function Spinner() {
return (
);
}
function SealMarkLight({ done }) {
return (
);
}
// ─────────────────────────────────────────────────────────
// 7) SignUpCompleteViewController — 가입 완료 · 이메일 인증 안내
// ─────────────────────────────────────────────────────────
function EnvelopeMark({ s = 22 }) {
return (
);
}
function SignUpCompleteVC({ email = 'you@example.com' }) {
return (
{/* gold seal ring with success check */}
가입이 완료되었습니다
인증 메일을 보냈어요.
메일함을 확인해 주세요.
{/* email chip */}
{email}
);
}
Object.assign(window, { IntroVC, SignInVC, SignInEmailOnlyVC, SignUpVC, FindPasswordVC, GuestVerifyVC, WalletAuthVC, SignUpCompleteVC });
