// SupportWave — 응원 물결 섹션 (PRD v1.0 기반 데모 구현)
// localStorage 기반. PRD §3, §8, §9, §10, §12 충실 반영.
//
// 핵심:
// • approved 메시지 카드 리스트 + 오늘의 응원 (featured)
// • 응원 메시지 작성 폼 (50자, 익명 기본, 지역 선택, 버튼 동의 + 자세히보기)
// • 리액션 3종 (heart/like/clap) + sessionId 중복 방지 + count 증가
// • ReactionFloatLayer — 클릭 시 3~5개, 자동 8~15초 1~2개, 동시 12개 캡
// • prefers-reduced-motion 시 애니메이션 비활성
// • 데모용 mini moderation toggle (관리자 모드)
// • 금칙어/URL/반복문자/중복 IP hash 검증 (클라이언트 데모)
const SW_LS_KEY = "sw_messages_v1";
const SW_REACTIONS_KEY = "sw_reactions_v1";
const SW_SESSION_KEY = "sw_session_id";
const SW_ADMIN_RECEIPT_ROLES = ["super_admin", "moderator", "publisher", "auditor"];
// ── Seed 데이터 (자료조사 기반: 22개 시·군 / 5개 광주 자치구) ──────
const SW_REGIONS = [
"광주 동구","광주 서구","광주 남구","광주 북구","광주 광산",
"목포","여수","순천","나주","광양",
"담양","곡성","구례","고흥","보성","화순",
"장흥","강진","해남","영암","무안","함평","영광","장성","완도","진도","신안",
];
const SW_BAD_WORDS = ["바보","멍청","ㅅㅂ","개새","씨발","좆","fuck","shit"];
const SW_SEED = [
{ id: "s1", nickname: "전남교육지기", region: "목포", message: "아이들이 행복한 학교를 기대합니다.",
heartCount: 128, likeCount: 42, clapCount: 31, isFeatured: true, featuredLabel: "오늘의 응원",
createdAt: "2026-04-29T08:00:00Z" },
{ id: "s2", nickname: "곡성학부모", region: "곡성", message: "곡성에서 시작된 변화, 통합특별시에서 이어가 주세요.",
heartCount: 96, likeCount: 38, clapCount: 22, createdAt: "2026-04-28T14:30:00Z" },
{ id: "s3", nickname: "광산구 교사", region: "광주 광산", message: "현장의 목소리가 정책이 되는 모습, 처음 봅니다.",
heartCount: 74, likeCount: 51, clapCount: 18, createdAt: "2026-04-28T11:12:00Z" },
{ id: "s4", nickname: "여수 시민", region: "여수", message: "근자열 원자래 — 가까운 곳부터 기뻐하게 하소서.",
heartCount: 62, likeCount: 19, clapCount: 27, createdAt: "2026-04-27T19:45:00Z" },
{ id: "s5", nickname: "고3 자녀 엄마", region: "순천", message: "AI 진학 상담, 정말 절실했습니다. 응원합니다.",
heartCount: 53, likeCount: 28, clapCount: 14, createdAt: "2026-04-27T09:20:00Z" },
{ id: "s6", nickname: "5·18을 기억", region: "광주 동구", message: "민주주의 교육, 광주에서 시작된 약속을 잊지 않습니다.",
heartCount: 89, likeCount: 24, clapCount: 33, createdAt: "2026-04-26T16:00:00Z" },
];
function swSeedMessages() {
return SW_SEED.map((m) => ({ ...m, status: "approved", isSeed: true }));
}
// ── helpers ────────────────────────────────────────────────────────
function swSession() {
try {
let s = localStorage.getItem(SW_SESSION_KEY);
if (!s) {
s = "sw-" + Math.random().toString(36).slice(2, 10) + "-" + Date.now().toString(36);
localStorage.setItem(SW_SESSION_KEY, s);
}
return s;
} catch { return "sw-anon-" + Date.now(); }
}
function swLoad(key, fallback) {
try {
const raw = localStorage.getItem(key);
if (!raw) return fallback;
return JSON.parse(raw);
} catch { return fallback; }
}
function swSave(key, val) { try { localStorage.setItem(key, JSON.stringify(val)); } catch {} }
// 간소화된 폼 검증 — 닉네임은 익명 default라 검증 대상이 아니다.
// 동의는 폼 제출 자체로 갈음한다 (버튼 라벨이 명시적으로 안내).
function swValidateMessage({ region, message }) {
if (!message || message.trim().length < 5) return "응원 메시지는 5자 이상으로 입력해 주세요.";
if (message.length > 50) return "응원 메시지는 50자 이내로 입력해 주세요.";
if (region && !SW_REGIONS.includes(region) && region !== "") return "지역을 다시 선택해 주세요.";
if (/https?:\/\/|www\.|\.com|\.kr|\.net/i.test(message)) return "URL은 포함할 수 없습니다.";
if (/(.)\1{4,}/.test(message)) return "같은 글자를 너무 많이 반복할 수 없습니다.";
const lower = message.toLowerCase();
if (SW_BAD_WORDS.some((w) => lower.includes(w.toLowerCase()))) return "부적절한 표현이 포함되어 있습니다.";
return null;
}
function swRelativeTime(iso) {
const t = new Date(iso).getTime();
const diff = Date.now() - t;
if (diff < 60_000) return "방금 전";
if (diff < 3_600_000) return Math.floor(diff / 60_000) + "분 전";
if (diff < 86_400_000) return Math.floor(diff / 3_600_000) + "시간 전";
return Math.floor(diff / 86_400_000) + "일 전";
}
// ── ReactionFloatLayer ─────────────────────────────────────────────
const SW_EMOJI = { heart: "❤️", like: "👍", clap: "👏" };
const SW_MAX_FLOAT = 12;
function useReducedMotion() {
const [r, setR] = React.useState(false);
React.useEffect(() => {
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
const upd = () => setR(mq.matches);
upd();
mq.addEventListener?.("change", upd);
return () => mq.removeEventListener?.("change", upd);
}, []);
return r;
}
function ReactionFloatLayer({ floats }) {
return (
{floats.map((f) => (
{SW_EMOJI[f.type]}
))}
);
}
// ── ReactionButton ─────────────────────────────────────────────────
function ReactionButton({ type, count, active, ambient, onClick, label }) {
return (
);
}
// ── SupportMessageCard ─────────────────────────────────────────────
function SupportMessageCard({ msg, myReactions, onReact, featured, ambientType }) {
return (
{featured && (
{msg.featuredLabel || "오늘의 응원"}
)}
"{msg.message}"
{msg.nickname}
{msg.region && <>·{msg.region}}
·
{swRelativeTime(msg.createdAt)}
onReact(msg.id, "heart")} label="공감" />
onReact(msg.id, "like")} label="응원" />
onReact(msg.id, "clap")} label="기대" />
);
}
function SupportMiniCard({ msg, myReactions, onReact, ambientType, index }) {
const total = (msg.heartCount || 0) + (msg.likeCount || 0) + (msg.clapCount || 0);
return (
함께 뜨는 응원
{String(index + 1).padStart(2, "0")}
"{msg.message}"
{msg.nickname}
{msg.region && <>·{msg.region}}
{total.toLocaleString()}
);
}
// ── SupportTicker (간단 가로 흐름 — pending 승인된 한줄들) ─────────
function SupportTicker({ messages }) {
if (!messages.length) return null;
// 두 번 반복해서 무한루프 효과
const loop = [...messages, ...messages];
return (
{loop.map((m, i) => (
❤
{m.message}
— {m.nickname}{m.region ? ` · ${m.region}` : ""}
))}
);
}
// ── SupportWindLayer (배경형 응원 흐름) ───────────────────────────
function SupportWindLayer({ messages }) {
const source = (messages && messages.length ? messages : SW_SEED).slice(0, 12);
if (!source.length) return null;
const loop = [...source, ...source.slice(0, 4)];
return (
{loop.map((m, i) => (
응원
{m.message}
))}
);
}
function useSupportAdminSession() {
const [isAdmin, setIsAdmin] = React.useState(false);
React.useEffect(() => {
let alive = true;
async function check() {
if (!window.kdjSupabase) {
if (alive) setIsAdmin(false);
return;
}
try {
const { data } = await window.kdjSupabase.auth.getSession();
const user = data?.session?.user;
if (!user) {
if (alive) setIsAdmin(false);
return;
}
let role = user.user_metadata?.role || null;
const { data: roleRow } = await window.kdjSupabase
.from("users_roles")
.select("role")
.eq("user_id", user.id)
.maybeSingle();
role = roleRow?.role || role;
if (alive) setIsAdmin(SW_ADMIN_RECEIPT_ROLES.includes(role));
} catch (e) {
console.warn("[support-admin-session]", e);
if (alive) setIsAdmin(false);
}
}
check();
const sub = window.kdjSupabase?.auth?.onAuthStateChange?.(() => check());
return () => {
alive = false;
sub?.data?.subscription?.unsubscribe?.();
};
}, []);
return isAdmin;
}
function SupportHeroFlow() {
const reduced = useReducedMotion();
const [messages, setMessages] = React.useState(() => swSeedMessages());
const [floats, setFloats] = React.useState([]);
React.useEffect(() => {
let alive = true;
async function load() {
if (!swApiMode() || !window.kdjSupportApi) return;
try {
const list = await window.kdjSupportApi.listMessages({ sort: "popular", limit: 18 });
if (alive && list.length) setMessages(list);
} catch (e) {
console.warn("[support-hero-flow] list", e);
}
}
load();
return () => { alive = false; };
}, []);
const approved = React.useMemo(
() => messages.filter((m) => (m.status || "approved") === "approved"),
[messages]
);
const visible = approved.length ? approved.slice(0, 12) : swSeedMessages();
const loop = [...visible, ...visible];
const pushFloats = React.useCallback((type, n = 1) => {
if (reduced || document.hidden) return;
setFloats((cur) => {
const next = [...cur];
for (let i = 0; i < n; i++) {
if (next.length >= 14) break;
next.push({
id: "hf-" + Math.random().toString(36).slice(2),
type,
x: 10 + Math.random() * 80,
size: 18 + Math.random() * 16,
duration: 3 + Math.random() * 1.4,
delay: Math.random() * 0.2,
});
}
return next;
});
}, [reduced]);
React.useEffect(() => {
if (!floats.length) return;
const t = window.setTimeout(() => {
setFloats((cur) => cur.slice(Math.max(0, cur.length - 10)));
}, 4600);
return () => window.clearTimeout(t);
}, [floats]);
React.useEffect(() => {
if (reduced) return;
let stop = false;
let timer;
const tick = () => {
if (stop) return;
const types = ["heart", "like", "clap"];
pushFloats(types[Math.floor(Math.random() * types.length)], 1 + Math.floor(Math.random() * 3));
timer = window.setTimeout(tick, 3200 + Math.random() * 2800);
};
timer = window.setTimeout(tick, 900);
return () => {
stop = true;
window.clearTimeout(timer);
};
}, [reduced, pushFloats]);
return (
응원 남기기
함께 쓰는 응원 물결
{loop.map((m, i) => (
응원
"{m.message}"
{m.region || m.nickname || "익명"}
))}
);
}
function SupportPendingReceipts({ receipts }) {
const isAdmin = useSupportAdminSession();
if (!receipts.length || !isAdmin) return null;
return (
{receipts.map((r) => (
접수 완료 · 공개 검토 중
"{r.message}"
{r.region ? `${r.region} · ` : ""}운영자 확인 후 응원 물결에 소개됩니다.
))}
e.stopPropagation()}>
응원 메시지 — 동의 안내
- 수집 항목
- 지역(선택), 응원 메시지, 접속 기록·세션 식별값(해시 처리)
- 이용 목적
- 응원 메시지 접수, 공개 검토, 도배·부정 이용 방지
- 공개 검토
- 관리자 검토 후 공개됩니다. 운영정책에 따라 공개되지 않거나 숨김 처리될 수 있습니다.
- 보관 기간
- 선거 종료 후 별도 고지된 기간까지. 관계 법령상 의무가 있는 경우 해당 기간을 따릅니다.
- 삭제 요청
- 본인이 작성한 메시지의 삭제는 사이트 내 공개 소통 채널로 요청할 수 있습니다.
);
}
// ── SupportMessageForm ─────────────────────────────────────────────
// 부모에 전달할 payload는 항상 다음 형태:
// { nickname, region, message, displayIdentity, turnstileToken? }
// turnstileToken은 api 모드에서만 채워진다. 부모(SupportWaveSection)가
// kdjSupportApi.submitMessage로 백엔드에 전달한다.
function SupportMessageForm({ onSubmit, onCancel }) {
// MVP 간소화: 닉네임은 모두 '익명'으로 저장 (서버 nickname 필수 제약 충족).
// 동의는 [동의하고 응원하기] 버튼 누름 자체로 갈음 + 자세히보기 모달 제공.
const [region, setRegion] = React.useState("");
const [message, setMessage] = React.useState("");
const [busy, setBusy] = React.useState(false);
const [error, setError] = React.useState(null);
const [done, setDone] = React.useState(false);
const [showModal, setShowModal] = React.useState(false);
const [turnstileStatus, setTurnstileStatus] = React.useState("idle");
const [turnstileErrorCode, setTurnstileErrorCode] = React.useState(null);
const turnstileRef = React.useRef(null);
const turnstileStatusRef = React.useRef(turnstileStatus);
React.useEffect(() => { turnstileStatusRef.current = turnstileStatus; }, [turnstileStatus]);
const isApiMode = (() => {
const cfg = (typeof window !== "undefined" && window.__KDJ_CONFIG__) || {};
return cfg.supportWaveMode === "api";
})();
const resetTurnstile = React.useCallback(async () => {
if (!isApiMode || !window.kdjTurnstile || !turnstileRef.current) return;
setTurnstileStatus("loading");
setTurnstileErrorCode(null);
await window.kdjTurnstile.reset(turnstileRef.current);
}, [isApiMode]);
React.useEffect(() => {
if (!isApiMode || done) return;
const el = turnstileRef.current;
if (!el || !window.kdjTurnstile) {
setTurnstileStatus("missing");
return;
}
let alive = true;
setTurnstileStatus("loading");
setTurnstileErrorCode(null);
window.kdjTurnstile.mount(el, {
onToken: () => {
if (!alive) return;
setTurnstileStatus("verified");
setTurnstileErrorCode(null);
},
onError: (code) => {
if (!alive) return;
setTurnstileStatus("error");
setTurnstileErrorCode(code || null);
},
onExpired: () => {
if (!alive) return;
setTurnstileStatus("expired");
setTurnstileErrorCode(null);
},
onMissing: () => {
if (!alive) return;
setTurnstileStatus("missing");
},
onStatus: (status, code) => {
if (!alive) return;
setTurnstileStatus(status);
setTurnstileErrorCode(code || null);
},
});
return () => {
alive = false;
window.kdjTurnstile?.unmount(el);
};
}, [isApiMode, done]);
const submit = async (e) => {
e.preventDefault();
setError(null);
const err = swValidateMessage({ region, message });
if (err) { setError(err); return; }
setBusy(true);
let turnstileToken = null;
if (isApiMode) {
if (!window.kdjTurnstile || !turnstileRef.current) {
setBusy(false);
setError("보안 확인을 불러오지 못했습니다. 새로고침 후 다시 시도해 주세요.");
return;
}
turnstileToken = await window.kdjTurnstile.getToken(turnstileRef.current, { waitMs: 1200 });
if (!turnstileToken) {
setBusy(false);
const currentTurnstileStatus = turnstileStatusRef.current;
const needsRetry = currentTurnstileStatus === "error" || currentTurnstileStatus === "expired";
setError(needsRetry
? "보안 확인에 실패했습니다. 아래의 '다시 확인'을 누른 뒤 다시 응원해 주세요."
: "보안 확인이 아직 완료되지 않았습니다. 잠시 후 다시 시도해 주세요.");
return;
}
}
try {
await onSubmit({
nickname: "익명",
region: region || null,
message: message.trim(),
// 닉네임은 항상 '익명'. 지역을 고르면 지역만 함께 공개한다.
displayIdentity: !!region,
turnstileToken,
});
setBusy(false);
setDone(true);
} catch (err2) {
setBusy(false);
if ((err2 && err2.message || "").includes("보안 확인")) {
resetTurnstile();
}
setError((err2 && err2.message) || "전송에 실패했습니다. 잠시 후 다시 시도해 주세요.");
}
};
if (done) {
return (
접수
응원 메시지가 접수되었습니다.
운영자 확인 후 홈페이지에 소개될 수 있습니다.
따뜻한 마음, 감사합니다.
);
}
const remain = 50 - message.length;
const submitDisabled = busy || (isApiMode && turnstileStatus !== "verified");
return (
<>