fix(game): ClubNameInput 드롭다운 재오픈 및 DotTextEffect 리사이즈 scale 버그 수정

- justSelectedRef로 선택 후 debounce useEffect 재트리거 차단
- ResizeObserver로 wrapper 리사이즈 시 canvas transform scale 동적 재계산

Author: seongwon030

frontend/src/pages/GamePage/components/ClubNameInput/ClubNameInput.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useId, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 import {
   useClubSuggestions,
   useValidateClubName,
@@ -18,8 +18,13 @@ const ClubNameInput = ({ onStart }: ClubNameInputProps) => {
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
 
   const listboxId = useId();
+  const justSelectedRef = useRef(false);
 
   useEffect(() => {
+    if (justSelectedRef.current) {
+      justSelectedRef.current = false;
+      return;
+    }
     const trimmed = value.trim();
     const timer = setTimeout(() => setDebouncedKeyword(trimmed), 300);
     return () => clearTimeout(timer);
@@ -39,6 +44,7 @@ const ClubNameInput = ({ onStart }: ClubNameInputProps) => {
   };
 
   const handleSelect = (name: string) => {
+    justSelectedRef.current = true;
     setValue(name);
     setDebouncedKeyword('');
     setHighlightedIndex(-1);

frontend/src/pages/GamePage/components/DotTextEffect/DotTextEffect.tsx

@@ -140,6 +140,7 @@ const DotTextEffect = ({
   const mouseRef = useRef({ x: -999, y: -999 });
   const dotsRef = useRef<Dot[]>([]);
   const rafRef = useRef<number>(0);
+  const canvasSizeRef = useRef({ W: 0, H: 0 });
 
   const [isMobile, setIsMobile] = useState(() => mobileQuery.matches);
 
@@ -173,6 +174,7 @@ const DotTextEffect = ({
       canvasH = H;
       canvas.width = W;
       canvas.height = H;
+      canvasSizeRef.current = { W, H };
 
       // 컨테이너 너비를 넘으면 CSS transform으로 축소 (항상 한 줄 유지)
       const wrapper = wrapperRef.current;
@@ -304,6 +306,24 @@ const DotTextEffect = ({
     charColors,
   ]);
 
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    const canvas = canvasRef.current;
+    if (!wrapper || !canvas) return;
+
+    const observer = new ResizeObserver(() => {
+      const { W, H } = canvasSizeRef.current;
+      if (W === 0) return;
+      const scale = Math.min(1, wrapper.clientWidth / W);
+      canvas.style.transform = `scale(${scale})`;
+      canvas.style.transformOrigin = 'center top';
+      wrapper.style.height = `${H * scale}px`;
+    });
+
+    observer.observe(wrapper);
+    return () => observer.disconnect();
+  }, []);
+
   const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
     const r = canvasRef.current!.getBoundingClientRect();
     mouseRef.current = { x: e.clientX - r.left, y: e.clientY - r.top };