>(new Map());
+ const initializedRef = useRef(false);
+ const burstIdRef = useRef(0);
- const flushRef = useRef(flush);
- const clubNameRef = useRef(clubName);
- useEffect(() => {
- flushRef.current = flush;
- }, [flush]);
useEffect(() => {
- clubNameRef.current = clubName;
- }, [clubName]);
+ const clubs = rankingData?.clubs;
+ if (!clubs) return;
- useEffect(() => {
- return () => {
- flushRef.current(clubNameRef.current);
- };
- }, []);
+ if (!initializedRef.current) {
+ clubs.forEach((c) => prevCountsRef.current.set(c.clubName, c.clickCount));
+ initializedRef.current = true;
+ return;
+ }
+
+ const crossed = clubs.some((c) => {
+ const prev = prevCountsRef.current.get(c.clubName) ?? 0;
+ return (
+ Math.floor(c.clickCount / MILESTONE_UNIT) >
+ Math.floor(prev / MILESTONE_UNIT)
+ );
+ });
+
+ clubs.forEach((c) => prevCountsRef.current.set(c.clubName, c.clickCount));
+
+ if (crossed) {
+ const id = burstIdRef.current++;
+ setBgBursts((prev) => [...prev, id]);
+ setTimeout(() => {
+ setBgBursts((prev) => prev.filter((b) => b !== id));
+ }, 2200);
+ }
+ }, [rankingData]);
const handleStart = (name: string) => {
sessionStorage.setItem(STORAGE_KEY, name);
setClubName(name);
};
- const handleClick = useCallback(() => {
- pendingRef.current += 1;
-
- if (pendingRef.current >= 5) {
- flush(clubName);
- } else {
- if (timerRef.current) clearTimeout(timerRef.current);
- timerRef.current = setTimeout(() => flush(clubName), 500);
- }
- }, [clubName, flush]);
+ const toggleDark = () => {
+ setIsDark((prev) => {
+ const next = !prev;
+ sessionStorage.setItem(DARK_KEY, String(next));
+ return next;
+ });
+ };
return (
-
- {BLOBS.map((blob, i) => (
-
-
-
- ))}
-
-
- {/* 상단: 타이틀(좌) + 실시간 순위(우) */}
-
+ <>
+ {isInAppWebView() && }
+
+ {bgBursts.map((id) => (
+
+ ))}
+
+
+
+
+
+ {isDark ? : }
+
+
+
+
+ {/* 상단: 타이틀(좌) + 실시간 순위(우) */}
+
+
+ 동아리 클릭 배틀
+
+ 우리 동아리를 응원해주세요! 클릭할수록 순위가 올라가요.
+
+
+
+
+
+
+
+
+
+
+ {/* 중앙: 도트 글자 */}
+ {top1Club && (
+
+
+
+ )}
+
+ {/* 하단: 클릭 버튼 */}
- 동아리 클릭 배틀
-
- 우리 동아리를 응원해주세요! 클릭할수록 순위가 올라가요.
-
+ {!clubName ? (
+
+ ) : (
+
+ )}
-
+ {/* 모바일 전용: 순위표 최하단 */}
+
-
-
-
- {/* 중앙: 도트 글자 */}
- {top1Club && (
-
-
-
- )}
-
- {/* 하단: 클릭 버튼 */}
-
- {!clubName ? (
-
- ) : (
-
- )}
-
-
- {/* 모바일 전용: 순위표 최하단 */}
-
-
-
-
-
-
-
+
+
+
+
);
};
diff --git a/frontend/src/pages/GamePage/components/BackgroundFirework/BackgroundFirework.tsx b/frontend/src/pages/GamePage/components/BackgroundFirework/BackgroundFirework.tsx
new file mode 100644
index 000000000..24b816a71
--- /dev/null
+++ b/frontend/src/pages/GamePage/components/BackgroundFirework/BackgroundFirework.tsx
@@ -0,0 +1,95 @@
+import { memo, useMemo } from 'react';
+import { motion } from 'framer-motion';
+
+const PARTICLE_COUNT = 70;
+const PARTICLE_COLORS = [
+ '#FF5414',
+ '#FFD432',
+ '#FF9D7C',
+ '#5FD8C0',
+ '#7094FF',
+ '#FF5FA2',
+ '#A06BFF',
+];
+
+const BackgroundFirework = () => {
+ const particles = useMemo(
+ () =>
+ Array.from({ length: PARTICLE_COUNT }, (_, i) => {
+ const angle =
+ (i / PARTICLE_COUNT) * Math.PI * 2 + (Math.random() - 0.5) * 0.3;
+ const distance = 280 + Math.random() * 380;
+ const size = 8 + Math.random() * 16;
+ const isConfetti = Math.random() > 0.45;
+ return {
+ x: Math.cos(angle) * distance,
+ y: Math.sin(angle) * distance,
+ color:
+ PARTICLE_COLORS[Math.floor(Math.random() * PARTICLE_COLORS.length)],
+ size,
+ isConfetti,
+ spin: (Math.random() - 0.5) * 1080,
+ duration: 1.3 + Math.random() * 0.6,
+ };
+ }),
+ [],
+ );
+
+ return (
+
+ {/* 중앙 플래시 링 */}
+
+ {particles.map((p, i) => (
+
+ ))}
+
+ );
+};
+
+export default memo(BackgroundFirework);
diff --git a/frontend/src/pages/GamePage/components/ClickButton/ClickButton.styles.ts b/frontend/src/pages/GamePage/components/ClickButton/ClickButton.styles.ts
index dce5c7a96..6f94c98f2 100644
--- a/frontend/src/pages/GamePage/components/ClickButton/ClickButton.styles.ts
+++ b/frontend/src/pages/GamePage/components/ClickButton/ClickButton.styles.ts
@@ -13,10 +13,18 @@ export const Wrapper = styled.div`
gap: 16px;
`;
-export const ClubLabel = styled.p`
+export const ButtonArea = styled.div`
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`;
+
+export const ClubLabel = styled.p<{ $dark: boolean }>`
font-size: 1rem;
font-weight: 600;
- color: ${({ theme }) => theme.colors.gray[700]};
+ color: ${({ $dark, theme }) =>
+ $dark ? theme.colors.gray[400] : theme.colors.gray[700]};
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
@@ -71,9 +79,10 @@ export const Count = styled.p`
color: ${({ theme }) => theme.colors.primary[900]};
`;
-export const CountLabel = styled.span`
+export const CountLabel = styled.span<{ $dark: boolean }>`
font-size: 1rem;
font-weight: 500;
- color: ${({ theme }) => theme.colors.gray[600]};
+ color: ${({ $dark, theme }) =>
+ $dark ? theme.colors.gray[400] : theme.colors.gray[600]};
margin-left: 4px;
`;
diff --git a/frontend/src/pages/GamePage/components/ClickButton/ClickButton.tsx b/frontend/src/pages/GamePage/components/ClickButton/ClickButton.tsx
index a77457cad..6a81af039 100644
--- a/frontend/src/pages/GamePage/components/ClickButton/ClickButton.tsx
+++ b/frontend/src/pages/GamePage/components/ClickButton/ClickButton.tsx
@@ -1,44 +1,133 @@
-import { memo, useState } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import * as S from './ClickButton.styles';
interface ClickButtonProps {
clubName: string;
onClickGame: () => void;
+ isDark?: boolean;
}
-const ClickButton = ({ clubName, onClickGame }: ClickButtonProps) => {
+const PARTICLE_COUNT = 36;
+const PARTICLE_COLORS = [
+ '#FF5414',
+ '#FFD432',
+ '#FF9D7C',
+ '#FFFFFF',
+ '#5FD8C0',
+ '#7094FF',
+ '#FF5FA2',
+];
+
+const Firework = () => {
+ const particles = useMemo(
+ () =>
+ Array.from({ length: PARTICLE_COUNT }, (_, i) => {
+ const angle =
+ (i / PARTICLE_COUNT) * Math.PI * 2 + (Math.random() - 0.5) * 0.4;
+ const distance = 160 + Math.random() * 130;
+ const size = 6 + Math.random() * 11;
+ const isConfetti = Math.random() > 0.5;
+ return {
+ x: Math.cos(angle) * distance,
+ y: Math.sin(angle) * distance,
+ color:
+ PARTICLE_COLORS[Math.floor(Math.random() * PARTICLE_COLORS.length)],
+ size,
+ isConfetti,
+ spin: (Math.random() - 0.5) * 720,
+ duration: 0.7 + Math.random() * 0.4,
+ };
+ }),
+ [],
+ );
+
+ return (
+ <>
+ {particles.map((p, i) => (
+
+ ))}
+
+ );
+};
+
+const ClickButton = ({
+ clubName,
+ onClickGame,
+ isDark = false,
+}: ClickButtonProps) => {
const [clickCount, setClickCount] = useState(0);
+ const [bursts, setBursts] = useState([]);
+ const burstIdRef = useRef(0);
+ const timersRef = useRef[]>([]);
+ const lastClickRef = useRef(0);
+
+ useEffect(() => {
+ return () => {
+ timersRef.current.forEach(clearTimeout);
+ timersRef.current = [];
+ };
+ }, []);
const handleClick = () => {
+ const now = Date.now();
+ if (now - lastClickRef.current < 100) return;
+ lastClickRef.current = now;
+
setClickCount((prev) => prev + 1);
onClickGame();
+
+ const id = burstIdRef.current++;
+ setBursts((prev) => [...prev, id]);
+ const timer = setTimeout(() => {
+ setBursts((prev) => prev.filter((b) => b !== id));
+ }, 1200);
+ timersRef.current.push(timer);
};
return (
- {clubName}
-
- 클릭!
-
+ {clubName}
+
+ {bursts.map((id) => (
+
+ ))}
+
+ 클릭!
+
+
@@ -53,7 +142,7 @@ const ClickButton = ({ clubName, onClickGame }: ClickButtonProps) => {
{clickCount.toLocaleString()}
- 회
+ 회
);
diff --git a/frontend/src/pages/GamePage/components/ClubNameInput/ClubNameInput.styles.ts b/frontend/src/pages/GamePage/components/ClubNameInput/ClubNameInput.styles.ts
index 300135064..3c3124cf6 100644
--- a/frontend/src/pages/GamePage/components/ClubNameInput/ClubNameInput.styles.ts
+++ b/frontend/src/pages/GamePage/components/ClubNameInput/ClubNameInput.styles.ts
@@ -10,10 +10,10 @@ export const Wrapper = styled.div`
max-width: 360px;
`;
-export const Title = styled.h2`
+export const Title = styled.h2<{ $dark: boolean }>`
font-size: 1.25rem;
font-weight: 700;
- color: ${({ theme }) => theme.colors.gray[900]};
+ color: ${({ $dark, theme }) => ($dark ? '#FFFFFF' : theme.colors.gray[900])};
`;
export const InputContainer = styled.div`
@@ -27,16 +27,26 @@ export const InputRow = styled.div`
width: 100%;
`;
-export const Input = styled.input<{ $hasError: boolean }>`
+export const Input = styled.input<{ $hasError: boolean; $dark: boolean }>`
flex: 1;
padding: 12px 16px;
font-size: 1rem;
+ background: ${({ $dark }) => ($dark ? '#1E1E2A' : '#FFFFFF')};
+ color: ${({ $dark, theme }) =>
+ $dark ? theme.colors.gray[100] : theme.colors.gray[900]};
border: 2px solid
- ${({ theme, $hasError }) =>
- $hasError ? theme.colors.primary[900] : theme.colors.gray[300]};
+ ${({ theme, $hasError, $dark }) =>
+ $hasError
+ ? theme.colors.primary[900]
+ : $dark
+ ? '#3A3A4A'
+ : theme.colors.gray[300]};
border-radius: 10px;
outline: none;
- transition: border-color 0.2s;
+ transition:
+ border-color 0.2s,
+ background 0.2s,
+ color 0.2s;
min-width: 0;
&:focus {
@@ -44,7 +54,8 @@ export const Input = styled.input<{ $hasError: boolean }>`
}
&::placeholder {
- color: ${({ theme }) => theme.colors.gray[500]};
+ color: ${({ $dark, theme }) =>
+ $dark ? theme.colors.gray[600] : theme.colors.gray[500]};
}
${media.mobile} {
@@ -80,13 +91,14 @@ export const StartButton = styled.button`
}
`;
-export const Dropdown = styled.ul`
+export const Dropdown = styled.ul<{ $dark: boolean }>`
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
- background: #fff;
- border: 1.5px solid ${({ theme }) => theme.colors.gray[200]};
+ background: ${({ $dark }) => ($dark ? '#1E1E2A' : '#fff')};
+ border: 1.5px solid
+ ${({ $dark, theme }) => ($dark ? '#3A3A4A' : theme.colors.gray[200])};
border-radius: 10px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
list-style: none;
@@ -95,19 +107,22 @@ export const Dropdown = styled.ul`
z-index: 10;
`;
-export const DropdownItem = styled.li`
+export const DropdownItem = styled.li<{ $dark: boolean }>`
padding: 10px 16px;
font-size: 0.95rem;
- color: ${({ theme }) => theme.colors.gray[800]};
+ color: ${({ $dark, theme }) =>
+ $dark ? theme.colors.gray[200] : theme.colors.gray[800]};
cursor: pointer;
transition: background 0.15s;
&:hover {
- background: ${({ theme }) => theme.colors.gray[100]};
+ background: ${({ $dark, theme }) =>
+ $dark ? '#2A2A38' : theme.colors.gray[100]};
}
& + & {
- border-top: 1px solid ${({ theme }) => theme.colors.gray[100]};
+ border-top: 1px solid
+ ${({ $dark, theme }) => ($dark ? '#3A3A4A' : theme.colors.gray[100])};
}
`;
diff --git a/frontend/src/pages/GamePage/components/ClubNameInput/ClubNameInput.tsx b/frontend/src/pages/GamePage/components/ClubNameInput/ClubNameInput.tsx
index ca65ef950..7785c8360 100644
--- a/frontend/src/pages/GamePage/components/ClubNameInput/ClubNameInput.tsx
+++ b/frontend/src/pages/GamePage/components/ClubNameInput/ClubNameInput.tsx
@@ -1,4 +1,6 @@
import { useEffect, useId, useRef, useState } from 'react';
+import { USER_EVENT } from '@/constants/eventName';
+import useMixpanelTrack from '@/hooks/Mixpanel/useMixpanelTrack';
import {
useClubSuggestions,
useValidateClubName,
@@ -7,10 +9,12 @@ import * as S from './ClubNameInput.styles';
interface ClubNameInputProps {
onStart: (clubName: string) => void;
+ isDark?: boolean;
}
-const ClubNameInput = ({ onStart }: ClubNameInputProps) => {
+const ClubNameInput = ({ onStart, isDark = false }: ClubNameInputProps) => {
const validateClubName = useValidateClubName();
+ const trackEvent = useMixpanelTrack();
const [value, setValue] = useState('');
const [debouncedKeyword, setDebouncedKeyword] = useState('');
const [error, setError] = useState('');
@@ -62,6 +66,7 @@ const ClubNameInput = ({ onStart }: ClubNameInputProps) => {
setError('존재하지 않는 동아리입니다.');
return;
}
+ trackEvent(USER_EVENT.GAME_START_BUTTON_CLICKED, { clubName: trimmed });
onStart(trimmed);
} catch {
setError('동아리 확인 중 오류가 발생했습니다.');
@@ -99,7 +104,7 @@ const ClubNameInput = ({ onStart }: ClubNameInputProps) => {
return (
- 동아리명을 입력해주세요
+ 동아리명을 입력해주세요
{
maxLength={30}
autoFocus
$hasError={!!error}
+ $dark={isDark}
role='combobox'
aria-autocomplete='list'
aria-expanded={isOpen}
@@ -125,7 +131,7 @@ const ClubNameInput = ({ onStart }: ClubNameInputProps) => {
{isOpen && (
-
+
{suggestions.map((name, index) => (
{
aria-selected={index === highlightedIndex}
onMouseDown={(e) => e.preventDefault()}
onClick={() => handleSelect(name)}
+ $dark={isDark}
>
{name}
diff --git a/frontend/src/pages/GamePage/components/DotTextEffect/DotTextEffect.tsx b/frontend/src/pages/GamePage/components/DotTextEffect/DotTextEffect.tsx
index 444958d53..32cc7d894 100644
--- a/frontend/src/pages/GamePage/components/DotTextEffect/DotTextEffect.tsx
+++ b/frontend/src/pages/GamePage/components/DotTextEffect/DotTextEffect.tsx
@@ -21,10 +21,9 @@ interface DotTextEffectProps {
charGap?: number;
hoverRadius?: number;
sweepSpeed?: number;
+ dotColor?: string;
}
-const DOT_COLOR = '#000000';
-
function buildDots(
text: string,
fontSize: number,
@@ -81,6 +80,7 @@ const DotTextEffect = ({
charGap = 14,
hoverRadius = 28,
sweepSpeed = 0.12,
+ dotColor = '#000000',
}: DotTextEffectProps) => {
const [isMobile, setIsMobile] = useState(mobileQuery.matches);
const isMobileRef = useRef(mobileQuery.matches);
@@ -157,7 +157,7 @@ const DotTextEffect = ({
// 인터랙션 없을 때: 전체 dot을 단일 path로 배치 렌더 (성능 최적화)
if (inactive && ds.every((d) => !d.swept)) {
ctx.beginPath();
- ctx.fillStyle = DOT_COLOR;
+ ctx.fillStyle = dotColor;
for (const d of ds) {
ctx.moveTo(d.ox + dotR, d.oy);
ctx.arc(d.ox, d.oy, dotR, 0, Math.PI * 2);
@@ -216,7 +216,7 @@ const DotTextEffect = ({
// non-swept dots: 단일 path 배치 렌더
ctx.beginPath();
- ctx.fillStyle = DOT_COLOR;
+ ctx.fillStyle = dotColor;
for (const d of ds) {
if (!d.swept) {
ctx.moveTo(d.x + dotR, d.y);
@@ -229,7 +229,7 @@ const DotTextEffect = ({
for (const { d, renderT } of sweptDots) {
ctx.beginPath();
ctx.arc(d.x, d.y, dotR * (1 + (1 - renderT) * 0.8), 0, Math.PI * 2);
- ctx.fillStyle = DOT_COLOR;
+ ctx.fillStyle = dotColor;
ctx.fill();
}
@@ -262,6 +262,7 @@ const DotTextEffect = ({
charGap,
hoverRadius,
sweepSpeed,
+ dotColor,
isMobile,
]);
diff --git a/frontend/src/pages/GamePage/components/RankingBoard/RankingBoard.styles.ts b/frontend/src/pages/GamePage/components/RankingBoard/RankingBoard.styles.ts
index bea904909..89288bcea 100644
--- a/frontend/src/pages/GamePage/components/RankingBoard/RankingBoard.styles.ts
+++ b/frontend/src/pages/GamePage/components/RankingBoard/RankingBoard.styles.ts
@@ -3,6 +3,7 @@ import styled from 'styled-components';
export const Wrapper = styled.div`
width: 100%;
max-width: 480px;
+ margin: 0 auto;
`;
export const Header = styled.div`
@@ -12,15 +13,10 @@ export const Header = styled.div`
margin-bottom: 12px;
`;
-export const Title = styled.h3`
+export const Title = styled.h3<{ $dark: boolean }>`
font-size: 1.125rem;
font-weight: 700;
- color: ${({ theme }) => theme.colors.gray[900]};
-`;
-
-export const ResetInfo = styled.p`
- font-size: 0.75rem;
- color: ${({ theme }) => theme.colors.gray[600]};
+ color: ${({ $dark, theme }) => ($dark ? '#FFFFFF' : theme.colors.gray[900])};
`;
export const List = styled.ol`
@@ -30,16 +26,28 @@ export const List = styled.ol`
gap: 8px;
`;
-export const Item = styled.div<{ $isMe: boolean; $rank: number }>`
+export const Item = styled.div<{
+ $isMe: boolean;
+ $rank: number;
+ $dark: boolean;
+}>`
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 10px;
- background: ${({ $isMe, theme }) =>
- $isMe ? theme.colors.primary[500] : theme.colors.gray[100]};
- border: ${({ $isMe, theme }) =>
- $isMe ? `2px solid ${theme.colors.primary[900]}` : '2px solid transparent'};
+ background: ${({ $isMe, $dark, theme }) => {
+ if ($dark) return $isMe ? 'rgba(255, 84, 20, 0.18)' : '#22222E';
+ return $isMe ? theme.colors.primary[500] : '#FFFFFF';
+ }};
+ border: ${({ $isMe, $dark, theme }) => {
+ if ($isMe) return `2px solid ${theme.colors.primary[900]}`;
+ return $dark
+ ? '2px solid transparent'
+ : `2px solid ${theme.colors.gray[300]}`;
+ }};
+ box-shadow: ${({ $isMe, $dark }) =>
+ !$isMe && !$dark ? '0 1px 3px rgba(0, 0, 0, 0.06)' : 'none'};
transition: background 0.3s;
`;
@@ -56,11 +64,12 @@ export const Rank = styled.span<{ $rank: number }>`
}};
`;
-export const ClubName = styled.span`
+export const ClubName = styled.span<{ $dark: boolean }>`
flex: 1;
font-size: 0.95rem;
font-weight: 600;
- color: ${({ theme }) => theme.colors.gray[900]};
+ color: ${({ $dark, theme }) =>
+ $dark ? theme.colors.gray[100] : theme.colors.gray[900]};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -72,9 +81,10 @@ export const ClickCount = styled.span`
color: ${({ theme }) => theme.colors.primary[900]};
`;
-export const EmptyMessage = styled.p`
+export const EmptyMessage = styled.p<{ $dark: boolean }>`
text-align: center;
padding: 40px 0;
- color: ${({ theme }) => theme.colors.gray[500]};
+ color: ${({ $dark, theme }) =>
+ $dark ? theme.colors.gray[400] : theme.colors.gray[500]};
font-size: 0.95rem;
`;
diff --git a/frontend/src/pages/GamePage/components/RankingBoard/RankingBoard.tsx b/frontend/src/pages/GamePage/components/RankingBoard/RankingBoard.tsx
index 9aeeca54b..d10457412 100644
--- a/frontend/src/pages/GamePage/components/RankingBoard/RankingBoard.tsx
+++ b/frontend/src/pages/GamePage/components/RankingBoard/RankingBoard.tsx
@@ -4,28 +4,24 @@ import * as S from './RankingBoard.styles';
interface RankingBoardProps {
ranking: GameRankingEntry[];
- resetAt?: string;
myClubName?: string;
+ isDark?: boolean;
}
const MEDAL = ['🥇', '🥈', '🥉'];
-const RankingBoard = ({ ranking, resetAt, myClubName }: RankingBoardProps) => {
- const resetTime = resetAt
- ? new Date(resetAt).toLocaleTimeString('ko-KR', {
- hour: '2-digit',
- minute: '2-digit',
- })
- : null;
-
+const RankingBoard = ({
+ ranking,
+ myClubName,
+ isDark = false,
+}: RankingBoardProps) => {
return (
- 🏆 Top 20 실시간 순위
- {resetTime && 매일 {resetTime} 초기화}
+ 🏆 Top 20 실시간 순위
{ranking.length === 0 ? (
-
+
아직 참여한 동아리가 없어요. 첫 번째로 클릭해보세요!
) : (
@@ -44,11 +40,12 @@ const RankingBoard = ({ ranking, resetAt, myClubName }: RankingBoardProps) => {
{MEDAL[entry.rank - 1] ?? entry.rank}
- {entry.clubName}
+ {entry.clubName}
{entry.clickCount.toLocaleString()}회
diff --git a/frontend/src/pages/GamePage/hooks/useBatchedClick.ts b/frontend/src/pages/GamePage/hooks/useBatchedClick.ts
new file mode 100644
index 000000000..d033e0cbc
--- /dev/null
+++ b/frontend/src/pages/GamePage/hooks/useBatchedClick.ts
@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useClickGame } from '@/hooks/Queries/useGame';
+
+const FLUSH_THRESHOLD = 5;
+const FLUSH_DELAY = 500;
+
+/**
+ * 클릭을 모아 일정 개수(5)나 디바운스(500ms) 시점에 한 번에 전송한다.
+ * 언마운트 시 미전송 클릭을 보존하기 위해 flush/clubName을 ref로 미러링한다.
+ */
+export const useBatchedClick = (clubName: string) => {
+ const pendingRef = useRef(0);
+ const timerRef = useRef | null>(null);
+ const { mutate: clickGame } = useClickGame();
+
+ const flush = useCallback(
+ (name: string) => {
+ if (timerRef.current) clearTimeout(timerRef.current);
+ timerRef.current = null;
+ const count = pendingRef.current;
+ if (count === 0) return;
+ pendingRef.current = 0;
+ clickGame(
+ { clubName: name, count },
+ {
+ onError: () => {
+ pendingRef.current += count;
+ if (!timerRef.current) {
+ timerRef.current = setTimeout(() => flush(name), FLUSH_DELAY);
+ }
+ },
+ },
+ );
+ },
+ [clickGame],
+ );
+
+ // 언마운트 시 최신 flush/clubName으로 미전송분을 보내기 위한 ref 미러
+ const flushRef = useRef(flush);
+ const clubNameRef = useRef(clubName);
+ useEffect(() => {
+ flushRef.current = flush;
+ }, [flush]);
+ useEffect(() => {
+ clubNameRef.current = clubName;
+ }, [clubName]);
+
+ useEffect(() => {
+ return () => {
+ flushRef.current(clubNameRef.current);
+ };
+ }, []);
+
+ const handleClick = useCallback(() => {
+ pendingRef.current += 1;
+
+ if (pendingRef.current >= FLUSH_THRESHOLD) {
+ flush(clubName);
+ } else {
+ if (timerRef.current) clearTimeout(timerRef.current);
+ timerRef.current = setTimeout(() => flush(clubName), FLUSH_DELAY);
+ }
+ }, [clubName, flush]);
+
+ return handleClick;
+};