From e8a7aa992b384b252c1aa55a4a281766636ef649 Mon Sep 17 00:00:00 2001
From: za0012 <zinazeek@gmail.com>
Date: Tue, 11 Aug 2026 13:42:07 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20fix:=20=ED=9E=88=ED=8A=B8?=
 =?UTF-8?q?=EB=A7=B5=20=EB=82=A0=EC=A7=9C=20=EC=85=80=EC=9D=84=20=ED=82=A4?=
 =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=ED=8F=AC=EC=BB=A4=EC=8A=A4=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=EB=8F=84=20=EC=9D=BD=ED=9E=88=EA=B2=8C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

날짜 셀의 툴팁이 onMouseEnter/onMouseLeave 로만 열리고 닫혔다.
mouseenter/mouseleave 는 포인터 장치에서만 발생하고 키보드 이동은
focus/blur 를 발생시키므로, Tab 으로 셀에 들어가면 포커스 링만 뜨고
풀이 수는 끝내 표시되지 않았다.

셀을 <circle> 대신 <button> 으로 감싼 것은 원래 이 문제를 가리킨
린트 규칙 때문이었다(주석에 남아 있다). 그 규칙이 요구하는 건
태그 교체가 아니라 "마우스로 되는 일은 키보드로도 될 것"인데,
지금까지는 요소 의미만 맞추고 상호작용은 마우스 전용으로 남아 있었다.

핸들러를 showTooltip/hideTooltip 으로 한 번만 정의하고
onMouseEnter/onMouseLeave 와 onFocus/onBlur 양쪽에 같은 것을 걸었다.
hovered 상태가 이미 { date, value, cx, cy } 를 들고 있어 새 상태나
위치 계산은 필요 없었다.

aria-label 이 있어 스크린리더는 원래 값을 읽을 수 있었다.
막혀 있던 건 눈은 보이지만 마우스를 쓰지 않는 사용자와
화면 확대 사용자다.

검증(개발 서버, /mypage):
  focusin  → 툴팁 "2026-03-20: 0문제" 표시
  focusout → 툴팁 사라짐
  마우스 경로는 기존과 동일

  * 브라우저 창이 OS 포커스를 갖지 않으면 element.focus() 가
    activeElement 만 바꾸고 focus 이벤트를 발생시키지 않는다.
    그래서 React 가 실제로 구독하는 focusin/focusout 으로 확인했다.

tsc --noEmit 0 / bun test 12 pass / build 통과

남은 한계: 셀 365개가 모두 탭 순서에 들어 있어 히트맵을 지나가려면
Tab 을 365번 눌러야 한다. roving tabindex 는 별도로 다룬다.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../mypage/components/Heatmap/view.tsx              | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app/(with-sidebar)/mypage/components/Heatmap/view.tsx b/src/app/(with-sidebar)/mypage/components/Heatmap/view.tsx
index c895447..77b9db0 100644
--- a/src/app/(with-sidebar)/mypage/components/Heatmap/view.tsx
+++ b/src/app/(with-sidebar)/mypage/components/Heatmap/view.tsx
@@ -106,10 +106,17 @@ function History({ id }: { id: number }) {
                 const cx = weekIndex * STEP + STEP / 2;
                 const cy = dayOfWeek * STEP + STEP / 2;
 
+                // 마우스와 키보드가 같은 동작을 하도록 핸들러를 하나로 두고 양쪽에 건다.
+                const showTooltip = () => setHovered({ date, value, cx, cy });
+                const hideTooltip = () => setHovered(null);
+
                 return (
                   <button
                     //버튼으로 한 이유... 우선 아래에 있는 onMouse이벤트를 circle같은 정적인 svg도형에 넣으면 접근성 규칙에 걸린다.
                     // biome측에서 button에 넣는 것이 좋다고 하여 button안에 넣게 되었다. 구조는 svg위에 button이 올라가있는 구조이다.
+                    // 그 규칙이 요구하는 건 태그 교체가 아니라 "마우스로 되는 일은 키보드로도 될 것"이다.
+                    // mouseenter/mouseleave는 포인터 장치에서만 발생하고 키보드 이동은 focus/blur를 발생시키므로,
+                    // 같은 핸들러를 focus/blur에도 걸어야 Tab으로 이동했을 때 툴팁이 뜬다.
                     // 기존에 hover시 툴팁이 굉장히 두꺼워지고 테두리도 블러처리된 것처럼 되었었는데
                     // 이는 hovered && <foreignObject />가 map안에 있어서 hover한 번에 툴팁이 날짜 개수만큼 중복 렌더링 되어서 일어난 것이었다.
                     // 같은 자리에 여러 개가 겹쳐서... 그렇게 보이는 것이었다.
@@ -118,8 +125,10 @@ function History({ id }: { id: number }) {
                     key={`${date}-hit-area`}
                     type="button"
                     aria-label={`${date}: ${value}문제`}
-                    onMouseEnter={() => setHovered({ date, value, cx, cy })}
-                    onMouseLeave={() => setHovered(null)}
+                    onMouseEnter={showTooltip}
+                    onMouseLeave={hideTooltip}
+                    onFocus={showTooltip}
+                    onBlur={hideTooltip}
                     className="absolute cursor-pointer appearance-none rounded-full border-0 bg-transparent p-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1B64FA]"
                     style={{
                       left: cx - CELL / 2,