[#17] 스크롤 상태에서 툴팁 이상한 곳에 나오는 이슈 수정

fixed 가 아닌 absolute 여서, 스크롤시 계산한 위치는 도큐먼트 기준이라 다르게 보였었어요. overflow-y: auto 를 래핑하는 요소를 만들어서, 툴팁을 해당 요소에 붙이게 수정했습니다!
MaetDol · Jun 18, 2024 · b03ca67 · b03ca67
1 parent e66376d
commit b03ca67
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 34 deletions.
diff --git a/src/components/Heatmap.ts b/src/components/Heatmap.ts
@@ -4,7 +4,11 @@ import { StreamerSummary } from '@/types';
 import { getYearMonthDateString } from '@/utils/date-to-year-month-date';
 import { parseHtml } from '@/utils/domParser';
 
-function block(level: number, tooltip?: HTMLElement) {
+function block(
+  level: number,
+  tooltip?: HTMLElement,
+  tooltipWrapper?: HTMLElement,
+) {
   const parser = new DOMParser();
   const block = parser.parseFromString(
     `<div style="      
@@ -17,35 +21,12 @@ function block(level: number, tooltip?: HTMLElement) {
       position: relative;
     "></div>`,
     'text/html',
-  ).body.children[0];
-
-  if (tooltip) {
-    block.addEventListener('mouseover', () => {
-      const { left, width, top } = block.getBoundingClientRect();
-      tooltip.style.position = 'absolute';
-      tooltip.style.left = left + width / 2 + 'px';
-      tooltip.style.top = top + 'px';
-      const translate = 'translate(-50%, calc(-100% - 3px))';
-      tooltip.style.transform = translate;
-      document.body.append(tooltip);
-      tooltip.animate(
-        [
-          {
-            opacity: '0',
-            transform: translate + ' scale(0.85)',
-          },
-          {
-            opacity: '1',
-            transform: translate + ' scale(1)',
-          },
-        ],
-        {
-          duration: 200,
-          easing: 'ease-out',
-        },
-      );
-    });
+  ).body.children[0] as HTMLElement;
 
+  if (tooltip && tooltipWrapper) {
+    block.addEventListener('mouseover', () =>
+      showTooltip(block, tooltip, tooltipWrapper),
+    );
     block.addEventListener('mouseleave', () => tooltip.remove());
   }
 
@@ -74,6 +55,7 @@ function getTooltip(date: string, price: number) {
 
 function drawBlocks(
   dateWithLevel: Record<string, { price: number; level: number }>,
+  tooltipWrapper: HTMLElement,
 ) {
   const blocks = [];
   const today = new Date();
@@ -83,7 +65,7 @@ function drawBlocks(
     const key = getYearMonthDateString(today);
     const { level = 0, price = 0 } = dateWithLevel[key] ?? {};
     const tooltip = getTooltip(key, price);
-    blocks.push(block(level, tooltip));
+    blocks.push(block(level, tooltip, tooltipWrapper));
     today.setTime(today.getTime() - DAY);
   }
 
@@ -143,7 +125,11 @@ export function heatmap(groupedChzInfos: StreamerSummary[]) {
     }
   }
 
-  const div = parseHtml(`
+  const div = document.createElement('div');
+  div.style.minWidth = '0';
+  div.style.position = 'relative';
+
+  const scrollWrapper = parseHtml(`
     <div style="
       --level-0: #ebedf0;
       --level-1: #fff056;
@@ -163,8 +149,44 @@ export function heatmap(groupedChzInfos: StreamerSummary[]) {
   heading.append(block(2));
   heading.append(block(3));
   heading.append(block(4));
-  div.append(heading);
-  div.append(drawBlocks(dateWithLevel));
+  scrollWrapper.append(heading);
+  scrollWrapper.append(drawBlocks(dateWithLevel, div));
 
+  div.append(scrollWrapper);
   return div;
 }
+
+function showTooltip(
+  block: HTMLElement,
+  tooltip: HTMLElement,
+  appendTooltipOn: Element,
+) {
+  const top = block.offsetTop;
+  const left = block.offsetLeft;
+  const width = block.clientWidth;
+
+  tooltip.style.position = 'absolute';
+  tooltip.style.left = left + width / 2 + 'px';
+  tooltip.style.top = top + 'px';
+
+  const translate = 'translate(-50%, calc(-100% - 3px))';
+  tooltip.style.transform = translate;
+
+  appendTooltipOn.append(tooltip);
+  tooltip.animate(
+    [
+      {
+        opacity: '0',
+        transform: translate + ' scale(0.85)',
+      },
+      {
+        opacity: '1',
+        transform: translate + ' scale(1)',
+      },
+    ],
+    {
+      duration: 200,
+      easing: 'ease-out',
+    },
+  );
+}
diff --git a/src/tampermonkey-docs.ts b/src/tampermonkey-docs.ts
@@ -2,7 +2,7 @@ export default //
 `// ==UserScript==
 // @name         Chzzk Cheese Roadmap
 // @namespace    http://tampermonkey.net/
-// @version      0.6.2
+// @version      0.6.3
 // @updateURL    https://raw.githubusercontent.com/MaetDol/chzzk-cheese-roadmap/release/cheese-roadmap.user.js
 // @downloadURL  https://raw.githubusercontent.com/MaetDol/chzzk-cheese-roadmap/release/cheese-roadmap.user.js
 // @description  "내 치즈" 페이지에서 각 스트리머들에게 후원한 치즈 양을 확인할 수 있게 해줍니다