joke-app/apps/web/src/components/NicknameForm.tsx

/** One-field start: nickname (pre-filled suggestion) + start button; Discord as secondary (docs/05 §1). */
import { useState } from 'react';
import { nicknameError, normalizeNickname, suggestNickname } from '@bg/shared/lite';
import { api, discordLoginUrl } from '../net/api';
import { useSession } from '../store/session';

export function NicknameForm({ next, submitLabel = '이 이름으로 시작하기', onDone }: { next: string; submitLabel?: string; onDone?: () => void }) {
  const [nick, setNick] = useState(() => suggestNickname());
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const discord = useSession((s) => s.discordEnabled);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    const n = normalizeNickname(nick);
    const err = nicknameError(n);
    if (err) return setError(err);
    setBusy(true);
    try {
      const r = await api.guest(n);
      useSession.getState().setMe(r.me);
      await useSession.getState().refresh();
      onDone?.();
    } catch (ex) {
      setError((ex as Error).message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <form className="stack" onSubmit={submit}>
      <label className="field">
        내 이름(닉네임)
        <input
          className="input"
          value={nick}
          onChange={(e) => {
            setNick(e.target.value);
            setError(null);
          }}
          onFocus={(e) => e.target.select()}
          maxLength={20}
          autoComplete="nickname"
          enterKeyHint="go"
        />
      </label>
      {error && <p className="field-error">{error}</p>}
      <button className="btn btn-primary btn-block" disabled={busy}>
        {busy ? '잠시만요…' : submitLabel}
      </button>
      {discord && (
        <a className="btn btn-secondary btn-block" href={discordLoginUrl(next)}>
          디스코드로 로그인
        </a>
      )}
      <p className="muted small">이름은 나중에 언제든 바꿀 수 있어요.</p>
    </form>
  );
}