// 서비스 선택 온보딩 — Q(스크린) / QR(연습장·아카데미) function OnboardingScreen({ onSelect }){ return (
{/* Brand + heading */}
FRIENDS SCREEN
어떤 서비스를
이용하실 건가요?
선택 후 바로 시작합니다.
메뉴에서 언제든 변경할 수 있어요.
{/* Q — 스크린 골프 */} {/* QR — 연습장·아카데미 */}
); } window.OnboardingScreen = OnboardingScreen; // 로그인 — 서비스 선택(온보딩) 이전 진입 화면 (카카오 / 직접입력(TID) / 회원가입) function LoginScreen({ onKakao, onManual, onSignup }){ return (
{/* 로고 (중앙) — FRIENDS SCREEN (공식 마크 에셋) */}
FRIENDS SCREEN
{/* 로그인 버튼 영역 */}
); } window.LoginScreen = LoginScreen; // ===== 인증(로그인·회원가입) 공용 ===== const AUTH_INPUT = {width:"100%",height:52,border:"1.5px solid var(--line-strong)",borderRadius:10,padding:"0 14px",fontSize:15,outline:"none",background:"#fff",color:"var(--text)"}; const FieldLabel = ({ children })=>
{children}
; const AuthCheck = ({ on })=>(
{on && }
); // SMS 본인인증 공용 훅 — 인증번호 요청 토스트 + 3분 유효 타이머 (로그인·회원가입·찾기·휴면 공용) const AUTH_TTL = 180; function useSmsAuth(){ const [phone, setPhone] = React.useState(""); const [code, setCode] = React.useState(""); const [codeSent, setCodeSent] = React.useState(false); const [authed, setAuthed] = React.useState(false); const [left, setLeft] = React.useState(0); const [tick, setTick] = React.useState(0); const [toast, setToast] = React.useState(null); const toastRef = React.useRef(); React.useEffect(()=>{ if(!codeSent) return; const t=window.setInterval(()=>setLeft(s=>{ if(s<=1){ window.clearInterval(t); return 0; } return s-1; }),1000); return ()=>window.clearInterval(t); }, [tick, codeSent]); const showToast = (m)=>{ setToast(m); window.clearTimeout(toastRef.current); toastRef.current=window.setTimeout(()=>setToast(null),2000); }; const onPhone = (v)=>{ setPhone(v.replace(/[^0-9]/g,"").slice(0,11)); setCodeSent(false); setAuthed(false); setCode(""); }; const onCode = (v)=>{ setCode(v.replace(/[^0-9]/g,"").slice(0,6)); setAuthed(false); }; const send = ()=>{ if(phone.length<10) return; setCodeSent(true); setAuthed(false); setCode(""); setLeft(AUTH_TTL); setTick(x=>x+1); showToast("인증번호를 요청했습니다."); }; const verify = ()=>{ if(code.length===6 && left>0) setAuthed(true); }; const reset = ()=>{ setPhone(""); setCode(""); setCodeSent(false); setAuthed(false); setLeft(0); }; const fmt = (s)=>`${String(Math.floor(s/60)).padStart(2,"0")}:${String(s%60).padStart(2,"0")}`; return { phone, onPhone, code, onCode, codeSent, authed, left, send, verify, reset, fmt, toast }; } // 휴대폰 번호 + 인증번호 입력 필드 (함수 호출로 렌더 — 포커스 유지) function smsFields(a){ return (
휴대폰 번호
a.onPhone(e.target.value)} placeholder="숫자만 입력" inputMode="numeric" style={{...AUTH_INPUT,flex:1}}/>
{a.codeSent && (
인증번호
a.onCode(e.target.value)} placeholder="6자리 입력" inputMode="numeric" style={{...AUTH_INPUT,width:"100%",paddingRight:58}}/> {!a.authed && a.left>0 && {a.fmt(a.left)}}
0?"var(--text-mute)":"var(--danger)")}}> {a.authed ? "인증이 완료되었어요." : a.left>0 ? "데모: 아무 6자리나 입력하면 인증됩니다." : "인증 시간이 만료되었어요. 재전송해 주세요."}
)}
); } // 직접 입력(TID) 로그인 — 아이디/비밀번호 + 아이디·비번 찾기 + 휴면 해제 (FS 수동 로그인 참고) function LoginManualScreen({ onBack, onLogin, onFind, onDormant }){ const [id, setId] = React.useState(""); const [pw, setPw] = React.useState(""); const [err, setErr] = React.useState(null); const [dormant, setDormant] = React.useState(false); const canLogin = id.trim() && pw.trim(); const submit = ()=>{ setDormant(false); if(!canLogin){ setErr("아이디와 비밀번호를 입력해 주세요."); return; } // 데모: 아이디 'sleep' → 휴면 계정 재현(정책 §12 366일 휴면) → 휴면 해제 안내, 그 외 성공 if(id.trim().toLowerCase()==="sleep"){ setErr("휴면 상태의 계정이에요. 본인인증 후 해제할 수 있어요."); setDormant(true); return; } onLogin(); }; return (
아이디로 로그인
아이디 { setId(e.target.value); setErr(null); setDormant(false); }} placeholder="아이디" style={AUTH_INPUT}/>
비밀번호 { setPw(e.target.value); setErr(null); }} placeholder="비밀번호" style={AUTH_INPUT}/> {err &&
{err}
} {dormant && }
); } // 회원가입 — 카카오 계정 기반 (FS 방식) · 약관→닉네임→성별→본인인증→생년월일→선택항목→완료 function SignUpFlow({ onBack, onDone }){ const keys = ["agree","nick","gender","phone","birth","optional","done"]; const [i, setI] = React.useState(0); const key = keys[i]; const next = ()=> setI(v => Math.min(keys.length-1, v+1)); const back = ()=> i===0 ? onBack() : setI(v => v-1); // 약관 (FS: [필수] 통합이용약관·개인정보수집·위치정보 / [선택] 제3자·마케팅·카카오프로필) const AGREE_ROWS = [ ["tos","통합 이용 약관", true], ["privacy","개인정보 수집·이용 내역", true], ["location","위치정보 이용약관", true], ["third","개인정보 제3자 제공", false], ["mkt","마케팅 광고 활용", false], ["kakao","카카오 프로필 사진 사용", false], ]; const [agree, setAgree] = React.useState({tos:false,privacy:false,location:false,third:false,mkt:false,kakao:false}); const reqAgreed = agree.tos && agree.privacy && agree.location; const allAgreed = AGREE_ROWS.every(([k])=>agree[k]); const toggleAll = ()=>{ const nv=!allAgreed; const o={}; AGREE_ROWS.forEach(([k])=>o[k]=nv); setAgree(o); }; // 닉네임 · 성별 · 본인인증 · 생년월일 const [nick, setNick] = React.useState(""); const [nickOk, setNickOk] = React.useState(false); const [gender, setGender] = React.useState(null); const sms = useSmsAuth(); const [by, setBy] = React.useState(null); const [bm, setBm] = React.useState(null); const [bd, setBd] = React.useState(null); const [pickOpen, setPickOpen] = React.useState(false); // 상단 5분할 진행 인디케이터 (FS G_indicator_type 5) · 스텝 공용 레이아웃(함수 호출 — 포커스 유지) const SEG = {agree:1, nick:2, gender:3, phone:4, birth:5, optional:5}; const stepScreen = ({ title, sub, children, canNext, nextLabel })=>(
{[0,1,2,3,4].map(n=>(
))}
{title}
{sub &&
{sub}
}
{children}
{sms.toast &&
{sms.toast}
}
); if (key==="agree") return stepScreen({ title:"약관을 읽어보시고\n동의해주세요.", canNext:reqAgreed, children:(
{AGREE_ROWS.map(([k,label,req])=>(
setAgree(a=>({...a,[k]:!a[k]}))} style={{flex:1,fontSize:13.5,color:"var(--text)",fontWeight:500,cursor:"pointer"}}> [{req?"필수":"선택"}] {label}
))}
) }); if (key==="nick") return stepScreen({ title:"대회나 게임에서 사용할\n닉네임을 만들어보세요.", canNext:nickOk, children:(
{ setNick(e.target.value.replace(/[^가-힣a-zA-Z0-9]/g,"").slice(0,12)); setNickOk(false); }} placeholder="닉네임 (2~12자)" style={{...AUTH_INPUT,flex:1}}/>
{nickOk ?
사용할 수 있는 닉네임이에요.
:
한글·영문·숫자만 사용할 수 있어요. (특수문자·이모지·띄어쓰기 불가)
}
) }); if (key==="gender") return stepScreen({ title:"성별을 선택해주시면\n동급비교 데이터를 제공합니다.", canNext:!!gender, children:(
{[["male","남성"],["female","여성"]].map(([g,label])=>( ))}
) }); if (key==="phone") return stepScreen({ title:"휴대폰 번호를 입력하시면\n문자를 발송합니다.", canNext:sms.authed, children: smsFields(sms) }); if (key==="birth") return ( <> {stepScreen({ title:"생년월일을 입력해주세요.", canNext:!!(by&&bm&&bd), children:(
{[[by,"년"],[bm,"월"],[bd,"일"]].map(([val,suf],idx)=>( ))}
) })} {pickOpen && ( <>
setPickOpen(false)} style={{position:"absolute",inset:0,background:"rgba(34,28,28,.45)",zIndex:150}}/>
생년월일
{[["년", Array.from({length:81},(_,n)=>1930+n), by, setBy],["월", Array.from({length:12},(_,n)=>n+1), bm, setBm],["일", Array.from({length:31},(_,n)=>n+1), bd, setBd]].map(([suf,items,val,set])=>(
{items.map(it=>( ))}
))}
)} ); if (key==="optional") return stepScreen({ title:"선택 항목도\n확인해주세요.", canNext:true, nextLabel:"가입 완료", children:(
{[["mkt","마케팅 광고 활용","이벤트·혜택 소식을 받아볼 수 있어요."],["kakao","카카오 프로필 사진 사용","프로필에 카카오 사진을 사용해요."]].map(([k,label,desc])=>(
setAgree(a=>({...a,[k]:!a[k]}))}>
[선택] {label}
{desc}
))}
) }); // done — 가입 완료 (FS: 캐릭터 + 축하 문구) return (
{(nick||"회원")}님의
회원 가입이 완료되었습니다.
{/* 캐릭터 — 공식 춘식이 영상 에셋 */}
); } // 접근 권한 허용 온보딩 (FS: 로그인 후 · 서비스 선택 앞단) function PermissionOnboarding({ onAgree }){ const perms = [ ["위치","필수","주위에 가까운 매장을 찾기 위해 위치 정보를 사용합니다."], ["저장공간","필수","동영상을 빠르게 재생하기 위해 휴대폰 저장공간에 파일을 캐싱합니다."], ["카메라 사용","필수","QR 로그인 서비스를 제공하기 위해 카메라를 사용합니다."], ["알림 APP PUSH 전송","선택","경고, 사운드 및 아이콘 배지가 알람에 포함될 수 있습니다."], ["전화","선택","앱 내에서 원하는 매장 선택 후, 전화 연결 시 사용합니다."], ]; return (
편리한 서비스 이용을 위해
접근 권한 허용이 필요합니다.
{perms.map(([name,req,desc])=>(
{name} {req}
{desc}
))}
); } // 아이디·비밀번호 찾기 — 탭 전환 · 휴대폰 본인인증 후 결과/재설정 (FS는 WebView → 네이티브로 개선) function FindAccountFlow({ initialTab, onBack, onGoLogin }){ const [tab, setTab] = React.useState(initialTab==="pw" ? "pw" : "id"); // id | pw const [step, setStep] = React.useState("verify"); // id: verify→result / pw: verify→newpw→done const [name, setName] = React.useState(""); const [loginId, setLoginId] = React.useState(""); const sms = useSmsAuth(); const [pw1, setPw1] = React.useState(""); const [pw2, setPw2] = React.useState(""); const resetAll = ()=>{ setStep("verify"); setName(""); setLoginId(""); sms.reset(); setPw1(""); setPw2(""); }; const switchTab = (t)=>{ setTab(t); resetAll(); }; let content, canNext, nextLabel, onNext; if (tab==="id"){ if (step==="verify"){ canNext = sms.authed && name.trim(); nextLabel = "아이디 찾기"; onNext = ()=> setStep("result"); content = (
이름setName(e.target.value)} placeholder="이름" style={AUTH_INPUT}/>
{smsFields(sms)}
); } else { canNext = true; nextLabel = "로그인하기"; onNext = onGoLogin; content = (
회원님의 아이디예요
so****e
가입일 2023.05.14
); } } else { if (step==="verify"){ canNext = sms.authed && loginId.trim(); nextLabel = "다음"; onNext = ()=> setStep("newpw"); content = (
아이디setLoginId(e.target.value)} placeholder="아이디" style={AUTH_INPUT}/>
{smsFields(sms)}
); } else if (step==="newpw"){ const valid = pw1.length>=8 && pw1===pw2; canNext = valid; nextLabel = "비밀번호 변경"; onNext = ()=> setStep("done"); content = (
새 비밀번호 setPw1(e.target.value)} placeholder="8자 이상" style={AUTH_INPUT}/>
새 비밀번호 확인 setPw2(e.target.value)} placeholder="비밀번호 재입력" style={AUTH_INPUT}/> {pw2 && pw1!==pw2 &&
비밀번호가 일치하지 않아요.
}
); } else { canNext = true; nextLabel = "로그인하기"; onNext = onGoLogin; content = (
비밀번호가 변경되었어요
새 비밀번호로 로그인해 주세요.
); } } return (
{[["id","아이디 찾기"],["pw","비밀번호 찾기"]].map(([t,label])=>( ))}
{content}
{sms.toast &&
{sms.toast}
}
); } // 휴면 해제 — 본인인증 후 계정 복구 (정책 §12 366일 휴면 · FS는 외부 위임 → 네이티브로 개선) function DormantReleaseScreen({ onBack, onDone }){ const [name, setName] = React.useState(""); const sms = useSmsAuth(); const [done, setDone] = React.useState(false); if (done) return (
휴면이 해제되었어요
이용권·기록은 그대로 복구됐어요.
이제 정상적으로 이용할 수 있어요.
); return (
휴면 계정을 해제할게요
366일 이상 미접속으로 휴면 전환된 계정이에요. 본인인증 후 해제하면 이용권·기록은 그대로 복구됩니다.
이름 setName(e.target.value)} placeholder="이름" style={AUTH_INPUT}/>
{smsFields(sms)}
{sms.toast &&
{sms.toast}
}
); } Object.assign(window, { LoginManualScreen, SignUpFlow, FindAccountFlow, DormantReleaseScreen, PermissionOnboarding });