[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69d47b6663f88191af8f8d8d5a517be1","versionInt","title","ver1.1","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\ntype WarningColor = \"red\" | \"cyan\" | \"yellow\";\ntype WarningKind = \"periodic\" | \"random\";\ntype LineType = \"row\" | \"col\";\ntype GamePhase = \"ready\" | \"playing\" | \"celebrating\" | \"lost\";\ntype SpeedMode = \"normal\" | \"slow\" | \"slower\";\ntype AxisKey = \"left\" | \"center\" | \"right\";\ntype ControlMode = \"mouse\" | \"keyboard\";\n\ntype ActiveWarning = {\n id: number;\n type: LineType;\n axis: AxisKey;\n color: WarningColor;\n kind: WarningKind;\n startedAt: number;\n};\n\ntype Point = { x: number; y: number };\ntype Range = { start: number; size: number };\n\nconst TARGET_SURVIVAL_MS = 15_000;\nconst CEREMONY_MS = 5_000;\nconst CEREMONY_WARNING_SPEED_MULTIPLIER = 1.2;\nconst FADE_INTO_DARK_MS = 2_000;\nconst DESKTOP_BOARD_SIZE = 660;\nconst MOBILE_SIDE_MARGIN = 24;\nconst DESKTOP_SIDE_MARGIN = 220;\nconst MOBILE_CLICK_AREA_PADDING = 8;\nconst DESKTOP_CLICK_AREA_PADDING = 60;\nconst BASE_PLAYER_SIZE = 28.8;\nconst OUTER_BAND_RATIO = 0.25;\nconst CENTER_BAND_RATIO = 0.5;\nconst WARNING_TOTAL_MS = 1000;\nconst WARNING_RED_MS = 500;\nconst WARNING_CYAN_MS = 500;\nconst WARNING_YELLOW_VISIBLE_MS = 90;\nconst RANDOM_WARNING_CHANCE = 0.3;\nconst RANDOM_WARNING_MIN_DELAY_MS = 100;\nconst PERIODIC_START_MIN_MS = 1_000;\nconst PERIODIC_START_MAX_MS = 2_000;\nconst PERIODIC_GAPS_MS = [1260, 1080, 945, 810, 756] as const;\nconst PLAYER_SPEED_PER_SECOND_RATIO = 2.5;\nconst KEYBOARD_STEP_RATIO = 0.04;\nconst START_WARNING_MESSAGE = \"장막의 힘이 서서히 깨어나는듯하다\";\nconst CLEAR_WARNING_MESSAGE = \"공명하는 에너지가 충만해 깨어난 장막의 힘이 느껴진다\";\nconst LOSE_MESSAGE = \"당신 실수로 다 죽은거야\";\nconst BACKGROUND_IMAGE = \"url('/mnt/data/화면 캡처 2026-04-07 115956.png')\";\n\nconst SPEED_MULTIPLIERS: Record = {\n normal: 1,\n slow: 0.7,\n slower: 0.5,\n};\n\nconst SPEED_LABELS: Record = {\n normal: \"보통\",\n slow: \"느리게\",\n slower: \"더 느리게\",\n};\n\nconst CONTROL_LABELS: Record = {\n mouse: \"마우스\",\n keyboard: \"키보드\",\n};\n\nconst randomBetween = (min: number, max: number) => min + Math.random() * (max - min);\nconst randomChoice = (arr: readonly T[]) => arr[Math.floor(Math.random() * arr.length)];\n\nfunction getSegments(boardSize: number) {\n return {\n left: { start: 0, size: boardSize * OUTER_BAND_RATIO },\n center: { start: boardSize * OUTER_BAND_RATIO, size: boardSize * CENTER_BAND_RATIO },\n right: { start: boardSize * (OUTER_BAND_RATIO + CENTER_BAND_RATIO), size: boardSize * OUTER_BAND_RATIO },\n } as const;\n}\n\nconst AXIS_KEYS: readonly AxisKey[] = [\"left\", \"center\", \"right\"];\n\nfunction getFullWarningBandSize(boardSize: number) {\n return boardSize * CENTER_BAND_RATIO;\n}\n\nfunction getAxisByCoordinate(value: number, boardSize: number): AxisKey {\n const segments = getSegments(boardSize);\n if (value < segments.center.start) return \"left\";\n if (value < segments.right.start) return \"center\";\n return \"right\";\n}\n\nfunction getAxisBandRange(axis: AxisKey, boardSize: number): Range {\n const segments = getSegments(boardSize);\n const centerStart = segments.center.start;\n const centerEnd = segments.center.start + segments.center.size;\n const fullWarningBandSize = getFullWarningBandSize(boardSize);\n\n if (axis === \"center\") return { start: centerStart, size: fullWarningBandSize };\n if (axis === \"left\") return { start: centerStart - fullWarningBandSize, size: fullWarningBandSize };\n return { start: centerEnd, size: fullWarningBandSize };\n}\n\nfunction getLineColorClass(color: WarningColor) {\n if (color === \"red\") return \"bg-red-500/38\";\n if (color === \"cyan\") return \"bg-cyan-300/34\";\n return \"bg-yellow-200/48\";\n}\n\nfunction getWarningEdgeClass(color: WarningColor) {\n if (color === \"red\") return \"bg-red-200/32\";\n if (color === \"cyan\") return \"bg-cyan-200/28\";\n return \"bg-yellow-100/34\";\n}\n\nfunction getRandomOuterStart(boardSize: number, playerRadius: number): Point {\n const cx = boardSize / 2;\n const cy = boardSize / 2;\n const angle = Math.random() * Math.PI * 2;\n const distance = boardSize / 2 + playerRadius + randomBetween(24, 120);\n return {\n x: cx + Math.cos(angle) * distance,\n y: cy + Math.sin(angle) * distance,\n };\n}\n\nfunction runInvariantChecks(boardSize: number) {\n const segments = getSegments(boardSize);\n const total = segments.left.size + segments.center.size + segments.right.size;\n if (Math.abs(total - boardSize) > 0.001) throw new Error(\"Segment sizes must cover the board exactly.\");\n\n const leftRange = getAxisBandRange(\"left\", boardSize);\n const centerRange = getAxisBandRange(\"center\", boardSize);\n const rightRange = getAxisBandRange(\"right\", boardSize);\n const fullBand = getFullWarningBandSize(boardSize);\n\n if (Math.abs(centerRange.size - fullBand) > 0.001) throw new Error(\"Center warning width mismatch.\");\n if (!(leftRange.start + leftRange.size <= centerRange.start + 0.001)) throw new Error(\"Left warning overlaps center.\");\n if (!(rightRange.start >= centerRange.start + centerRange.size - 0.001)) throw new Error(\"Right warning overlaps center.\");\n}\n\nrunInvariantChecks(DESKTOP_BOARD_SIZE);\n\nexport default function GridCircleDangerGame() {\n const [phase, setPhase] = useState(\"ready\");\n const [timeLeft, setTimeLeft] = useState(TARGET_SURVIVAL_MS / 1000);\n const [message, setMessage] = useState(\"\");\n const [messageVisible, setMessageVisible] = useState(false);\n const [screenDarkness, setScreenDarkness] = useState(0);\n const [player, setPlayer] = useState({ x: DESKTOP_BOARD_SIZE / 2, y: DESKTOP_BOARD_SIZE / 2 });\n const [warnings, setWarnings] = useState([]);\n const [speedMode, setSpeedMode] = useState(\"normal\");\n const [controlMode, setControlMode] = useState(\"mouse\");\n const [viewportWidth, setViewportWidth] = useState(typeof window !== \"undefined\" ? window.innerWidth : 1280);\n const [viewportHeight, setViewportHeight] = useState(typeof window !== \"undefined\" ? window.innerHeight : 900);\n\n const arenaRef = useRef(null);\n const animationFrameRef = useRef(null);\n const periodicTimeoutRef = useRef(null);\n const fadeTimeoutRef = useRef(null);\n const ceremonyTimeoutRef = useRef(null);\n const pendingTimeoutsRef = useRef([]);\n const warningIdRef = useRef(0);\n const pressedKeysRef = useRef>({\n ArrowUp: false,\n ArrowDown: false,\n ArrowLeft: false,\n ArrowRight: false,\n });\n const periodicIndexRef = useRef(0);\n const playerRef = useRef({ x: DESKTOP_BOARD_SIZE / 2, y: DESKTOP_BOARD_SIZE / 2 });\n const targetRef = useRef({ x: DESKTOP_BOARD_SIZE / 2, y: DESKTOP_BOARD_SIZE / 2 });\n const phaseRef = useRef(\"ready\");\n const speedModeRef = useRef(\"normal\");\n const timeLeftRef = useRef(TARGET_SURVIVAL_MS / 1000);\n const enteredArenaMessageShownRef = useRef(false);\n const clearMessageShownRef = useRef(false);\n const insideAccumulatedMsRef = useRef(0);\n\n const isMobile = viewportWidth < 768;\n const boardSize = useMemo(() => {\n const horizontalMargin = isMobile ? MOBILE_SIDE_MARGIN : DESKTOP_SIDE_MARGIN;\n const availableWidth = viewportWidth - horizontalMargin;\n const availableHeight = viewportHeight - (isMobile ? 260 : 300);\n return Math.max(280, Math.min(DESKTOP_BOARD_SIZE, availableWidth, availableHeight));\n }, [isMobile, viewportWidth, viewportHeight]);\n const clickAreaPadding = isMobile ? MOBILE_CLICK_AREA_PADDING : DESKTOP_CLICK_AREA_PADDING;\n const playerSize = useMemo(() => (boardSize / DESKTOP_BOARD_SIZE) * BASE_PLAYER_SIZE * 2, [boardSize]);\n const playerRadius = playerSize / 2;\n const arenaRadius = useMemo(() => boardSize / 2 - playerRadius, [boardSize, playerRadius]);\n\n useEffect(() => {\n speedModeRef.current = speedMode;\n }, [speedMode]);\n\n useEffect(() => {\n phaseRef.current = phase;\n }, [phase]);\n\n useEffect(() => {\n timeLeftRef.current = timeLeft;\n }, [timeLeft]);\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n const onResize = () => {\n setViewportWidth(window.innerWidth);\n setViewportHeight(window.innerHeight);\n };\n window.addEventListener(\"resize\", onResize);\n return () => window.removeEventListener(\"resize\", onResize);\n }, []);\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\"].includes(e.key)) return;\n if (controlMode !== \"keyboard\") return;\n e.preventDefault();\n pressedKeysRef.current[e.key] = true;\n };\n\n const handleKeyUp = (e: KeyboardEvent) => {\n if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\"].includes(e.key)) return;\n pressedKeysRef.current[e.key] = false;\n };\n\n const handleBlur = () => {\n pressedKeysRef.current = {\n ArrowUp: false,\n ArrowDown: false,\n ArrowLeft: false,\n ArrowRight: false,\n };\n };\n\n window.addEventListener(\"keydown\", handleKeyDown, { passive: false });\n window.addEventListener(\"keyup\", handleKeyUp);\n window.addEventListener(\"blur\", handleBlur);\n return () => {\n window.removeEventListener(\"keydown\", handleKeyDown);\n window.removeEventListener(\"keyup\", handleKeyUp);\n window.removeEventListener(\"blur\", handleBlur);\n };\n }, [boardSize, controlMode]);\n\n const clearAllTimers = () => {\n if (animationFrameRef.current !== null) cancelAnimationFrame(animationFrameRef.current);\n if (periodicTimeoutRef.current !== null) window.clearTimeout(periodicTimeoutRef.current);\n if (fadeTimeoutRef.current !== null) window.clearTimeout(fadeTimeoutRef.current);\n if (ceremonyTimeoutRef.current !== null) window.clearTimeout(ceremonyTimeoutRef.current);\n pendingTimeoutsRef.current.forEach((id) => window.clearTimeout(id));\n\n animationFrameRef.current = null;\n periodicTimeoutRef.current = null;\n fadeTimeoutRef.current = null;\n ceremonyTimeoutRef.current = null;\n pendingTimeoutsRef.current = [];\n };\n\n const registerTimeout = (callback: () => void, delay: number) => {\n const id = window.setTimeout(() => {\n pendingTimeoutsRef.current = pendingTimeoutsRef.current.filter((savedId) => savedId !== id);\n callback();\n }, delay);\n pendingTimeoutsRef.current.push(id);\n return id;\n };\n\n const showTimedMessage = (text: string, visibleMs: number) => {\n setMessage(text);\n setMessageVisible(true);\n registerTimeout(() => setMessageVisible(false), visibleMs);\n };\n\n const removeWarning = (warningId: number) => {\n setWarnings((prev) => prev.filter((warning) => warning.id !== warningId));\n };\n\n const resetToReady = () => {\n clearAllTimers();\n setWarnings([]);\n setPhase(\"ready\");\n phaseRef.current = \"ready\";\n setScreenDarkness(0);\n setMessage(\"\");\n setMessageVisible(false);\n setTimeLeft(TARGET_SURVIVAL_MS / 1000);\n timeLeftRef.current = TARGET_SURVIVAL_MS / 1000;\n insideAccumulatedMsRef.current = 0;\n enteredArenaMessageShownRef.current = false;\n clearMessageShownRef.current = false;\n periodicIndexRef.current = 0;\n const center = { x: boardSize / 2, y: boardSize / 2 };\n setPlayer(center);\n playerRef.current = center;\n targetRef.current = center;\n };\n\n const endGame = (result: GamePhase, text?: string) => {\n clearAllTimers();\n setWarnings([]);\n setPhase(result);\n phaseRef.current = result;\n setScreenDarkness(0);\n\n if (text) {\n setMessage(text);\n setMessageVisible(true);\n } else {\n setMessage(\"\");\n setMessageVisible(false);\n }\n\n if (result === \"celebrating\") {\n ceremonyTimeoutRef.current = window.setTimeout(() => {\n resetToReady();\n }, CEREMONY_MS);\n }\n };\n\n const isOutsideArena = (point: Point) => {\n const cx = boardSize / 2;\n const cy = boardSize / 2;\n return Math.hypot(point.x - cx, point.y - cy) > arenaRadius;\n };\n\n const isInsideWarning = (warning: Pick) => {\n const current = playerRef.current;\n const range = getAxisBandRange(warning.axis, boardSize);\n\n if (warning.type === \"row\") {\n return current.y + playerRadius >= range.start && current.y - playerRadius <= range.start + range.size;\n }\n\n return current.x + playerRadius >= range.start && current.x - playerRadius <= range.start + range.size;\n };\n\n const createWarning = (type: LineType, axis: AxisKey, kind: WarningKind) => {\n if (phaseRef.current !== \"playing\" && phaseRef.current !== \"celebrating\") return;\n\n const id = ++warningIdRef.current;\n const nextWarning: ActiveWarning = { id, type, axis, color: \"red\", kind, startedAt: Date.now() };\n setWarnings((prev) => [...prev, nextWarning]);\n\n registerTimeout(() => {\n setWarnings((prev) => prev.map((warning) => (warning.id === id ? { ...warning, color: \"cyan\" } : warning)));\n }, WARNING_RED_MS);\n\n registerTimeout(() => {\n setWarnings((prev) => prev.map((warning) => (warning.id === id ? { ...warning, color: \"yellow\" } : warning)));\n\n if (phaseRef.current === \"playing\" && insideAccumulatedMsRef.current < TARGET_SURVIVAL_MS && isInsideWarning({ type, axis })) {\n endGame(\"lost\", LOSE_MESSAGE);\n }\n }, WARNING_RED_MS + WARNING_CYAN_MS);\n\n registerTimeout(() => {\n removeWarning(id);\n }, WARNING_TOTAL_MS + WARNING_YELLOW_VISIBLE_MS);\n };\n\n const maybeScheduleRandomWarning = (periodicType: LineType, periodicAxis: AxisKey, gap: number) => {\n if (phaseRef.current !== \"playing\" && phaseRef.current !== \"celebrating\") return;\n if (Math.random() > RANDOM_WARNING_CHANCE) return;\n if (gap <= RANDOM_WARNING_MIN_DELAY_MS) return;\n\n const windowStart = RANDOM_WARNING_MIN_DELAY_MS;\n const windowEnd = Math.max(windowStart, gap - 20);\n const delay = randomBetween(windowStart, windowEnd);\n\n registerTimeout(() => {\n if (phaseRef.current !== \"playing\" && phaseRef.current !== \"celebrating\") return;\n\n const randomType: LineType = Math.random() > 0.5 ? \"row\" : \"col\";\n let randomAxis: AxisKey = randomChoice(AXIS_KEYS);\n\n if (randomType === periodicType && randomAxis === periodicAxis) {\n randomAxis = randomChoice(AXIS_KEYS.filter((axis) => axis !== periodicAxis));\n }\n\n createWarning(randomType, randomAxis, \"random\");\n }, delay);\n };\n\n const schedulePeriodicWarning = () => {\n if (phaseRef.current !== \"playing\" && phaseRef.current !== \"celebrating\") return;\n\n let type: LineType;\n let axis: AxisKey;\n\n if (phaseRef.current === \"celebrating\") {\n // 세레모니: 완전 랜덤\n type = Math.random() > 0.5 ? \"row\" : \"col\";\n axis = randomChoice(AXIS_KEYS);\n } else {\n // 기존 로직 (플레이 중)\n const current = playerRef.current;\n type = Math.random() > 0.5 ? \"row\" : \"col\";\n axis = type === \"row\" ? getAxisByCoordinate(current.y, boardSize) : getAxisByCoordinate(current.x, boardSize);\n }\n\n createWarning(type, axis, \"periodic\");\n\n const baseGap = PERIODIC_GAPS_MS[Math.min(periodicIndexRef.current, PERIODIC_GAPS_MS.length - 1)];\n const effectiveGap = phaseRef.current === \"celebrating\" ? baseGap / CEREMONY_WARNING_SPEED_MULTIPLIER : baseGap;\n\n // 세레모니에서도 랜덤 추가 유지\n maybeScheduleRandomWarning(type, axis, effectiveGap);\n\n if (periodicIndexRef.current < PERIODIC_GAPS_MS.length - 1) {\n periodicIndexRef.current += 1;\n }\n\n periodicTimeoutRef.current = window.setTimeout(schedulePeriodicWarning, effectiveGap);\n };\n\n const startMovementLoop = () => {\n let lastTime = performance.now();\n\n const tick = (now: number) => {\n if (phaseRef.current !== \"playing\" && phaseRef.current !== \"celebrating\") return;\n\n const deltaSeconds = (now - lastTime) / 1000;\n lastTime = now;\n\n const current = playerRef.current;\n const target = targetRef.current;\n const dx = target.x - current.x;\n const dy = target.y - current.y;\n const distance = Math.hypot(dx, dy);\n const maxStep = boardSize * PLAYER_SPEED_PER_SECOND_RATIO * SPEED_MULTIPLIERS[speedModeRef.current] * deltaSeconds;\n\n if (controlMode === \"mouse\" && distance > 0.01) {\n const next = distance <= maxStep\n ? target\n : {\n x: current.x + (dx / distance) * maxStep,\n y: current.y + (dy / distance) * maxStep,\n };\n\n playerRef.current = next;\n setPlayer(next);\n }\n\n if (controlMode === \"keyboard\") {\n const horizontal = (pressedKeysRef.current.ArrowRight ? 1 : 0) - (pressedKeysRef.current.ArrowLeft ? 1 : 0);\n const vertical = (pressedKeysRef.current.ArrowDown ? 1 : 0) - (pressedKeysRef.current.ArrowUp ? 1 : 0);\n const keyDistance = Math.hypot(horizontal, vertical);\n\n if (keyDistance > 0) {\n const next = {\n x: current.x + (horizontal / keyDistance) * maxStep,\n y: current.y + (vertical / keyDistance) * maxStep,\n };\n\n playerRef.current = next;\n targetRef.current = next;\n setPlayer(next);\n }\n }\n\n const outside = isOutsideArena(playerRef.current);\n if (phaseRef.current === \"playing\" && !outside) {\n insideAccumulatedMsRef.current += deltaSeconds * 1000;\n const nextTime = Math.max(0, (TARGET_SURVIVAL_MS - insideAccumulatedMsRef.current) / 1000);\n setTimeLeft(nextTime);\n timeLeftRef.current = nextTime;\n\n if (!enteredArenaMessageShownRef.current) {\n enteredArenaMessageShownRef.current = true;\n showTimedMessage(START_WARNING_MESSAGE, 1000);\n }\n\n if (!clearMessageShownRef.current && insideAccumulatedMsRef.current >= TARGET_SURVIVAL_MS) {\n clearMessageShownRef.current = true;\n showTimedMessage(CLEAR_WARNING_MESSAGE, 2000);\n setPhase(\"celebrating\");\n phaseRef.current = \"celebrating\";\n setTimeLeft(0);\n timeLeftRef.current = 0;\n ceremonyTimeoutRef.current = window.setTimeout(() => {\n resetToReady();\n }, CEREMONY_MS);\n }\n }\n\n animationFrameRef.current = requestAnimationFrame(tick);\n };\n\n animationFrameRef.current = requestAnimationFrame(tick);\n };\n\n const startGame = () => {\n clearAllTimers();\n\n const randomOuterPoint = getRandomOuterStart(boardSize, playerRadius);\n setPlayer(randomOuterPoint);\n playerRef.current = randomOuterPoint;\n targetRef.current = randomOuterPoint;\n setWarnings([]);\n setPhase(\"playing\");\n phaseRef.current = \"playing\";\n setTimeLeft(TARGET_SURVIVAL_MS / 1000);\n timeLeftRef.current = TARGET_SURVIVAL_MS / 1000;\n setScreenDarkness(0);\n setMessage(\"\");\n setMessageVisible(false);\n enteredArenaMessageShownRef.current = false;\n clearMessageShownRef.current = false;\n insideAccumulatedMsRef.current = 0;\n periodicIndexRef.current = 0;\n pressedKeysRef.current = {\n ArrowUp: false,\n ArrowDown: false,\n ArrowLeft: false,\n ArrowRight: false,\n };\n\n requestAnimationFrame(() => setScreenDarkness(0.78));\n startMovementLoop();\n\n fadeTimeoutRef.current = window.setTimeout(() => {\n const firstDelay = randomBetween(PERIODIC_START_MIN_MS, PERIODIC_START_MAX_MS);\n periodicTimeoutRef.current = window.setTimeout(schedulePeriodicWarning, firstDelay);\n }, FADE_INTO_DARK_MS);\n };\n\n const handleAreaClick = (event: React.MouseEvent) => {\n if (phase !== \"playing\" && phase !== \"celebrating\") return;\n if (!arenaRef.current) return;\n if (controlMode !== \"mouse\") return;\n\n const interactiveTarget = event.target as HTMLElement;\n if (interactiveTarget.closest(\"button\")) return;\n\n const rect = arenaRef.current.getBoundingClientRect();\n const x = event.clientX - rect.left;\n const y = event.clientY - rect.top;\n targetRef.current = { x, y };\n };\n\n useEffect(() => () => clearAllTimers(), []);\n\n const segments = getSegments(boardSize);\n const verticalLines = [segments.center.start, segments.right.start];\n const horizontalLines = verticalLines;\n\n return (\n \n

\n\n

손 느린 아저씨 2관 탈출하기

2관 50% 패턴에서 살아남아 보자!

\n\n

\n {/* 타이머 단독 */}\n

\n {timeLeft.toFixed(3)}\n

\n\n {/* 컨트롤 + 속도 */}\n

\n {(Object.keys(CONTROL_LABELS) as ControlMode[]).map((mode) => (\n setControlMode(mode)}\n className={`px-3 py-2 rounded-xl text-sm font-medium transition ${\n controlMode === mode ? \"bg-cyan-100 text-slate-950\" : \"bg-white/5 text-white hover:bg-white/15\"\n }`}\n >\n {CONTROL_LABELS[mode]}\n \n ))}\n

\n\n

\n {(Object.keys(SPEED_LABELS) as SpeedMode[]).map((mode) => (\n setSpeedMode(mode)}\n className={`px-3 py-2 rounded-xl text-sm font-medium transition ${\n speedMode === mode ? \"bg-white text-black\" : \"bg-white/5 text-white hover:bg-white/15\"\n }`}\n >\n {SPEED_LABELS[mode]}\n \n ))}\n

\n\n {/* 시작 버튼 아래로 분리 */}\n

\n \n 시작\n \n

\n\n \n

\n \n {message}\n

\n\n \n

\n \n\n {warnings.map((warning) => {\n const segment = getAxisBandRange(warning.axis, boardSize);\n const colorClass = getLineColorClass(warning.color);\n const edgeClass = getWarningEdgeClass(warning.color);\n const edgeThickness = Math.max(6, boardSize * 0.012);\n\n return warning.type === \"row\" ? (\n \n \n \n \n \n ) : (\n \n \n \n \n \n );\n })}\n\n

\n {verticalLines.map((line, index) => (\n

\n ))}\n {horizontalLines.map((line, index) => (\n

\n ))}\n

\n\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","6110257136072565851","traceTime",1781449156003]