@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Tooltip/MenuTooltip.d.ts

@@ -0,0 +1,30 @@
+import './MenuTooltip.css';
+/** @public */
+export type TooltipMenuColumnItem = {
+    label?: string;
+    value?: unknown;
+    icon?: string;
+    selected?: boolean;
+    onClick?: () => void;
+    children?: TooltipMenuColumnItem[];
+    closeOnSelect?: boolean;
+    /** 비활성 항목 — 표시는 하되 선택할 수 없다(왜 못 쓰는지 자리로 알리는 용도). */
+    disabled?: boolean;
+    /** 비활성 사유 등 hover 설명(title 속성). */
+    tooltip?: string;
+    /** 우측 원형 배지 숫자(알림 개수 등). 라벨에 "(5)"를 붙이는 대신 SideNav와 같은
+     *  Badge type="dot"으로 표시한다 — 두 메뉴가 같은 항목을 다르게 보여주지 않도록. */
+    badgeCount?: number;
+};
+/** @public */
+export type TooltipMenuColumn = {
+    title?: string | null;
+    items: TooltipMenuColumnItem[];
+};
+/** @public */
+export default function MenuTooltip({ columns, onClose, className, size }: {
+    columns?: TooltipMenuColumn[];
+    onClose?: () => void;
+    className?: string;
+    size?: 'medium' | 'small';
+}): import("react").JSX.Element;

package/dist/packages/core/src/components/Tooltip/MenuTooltip.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import Button from '../Button';
+import Badge from '../Badge';
+import './MenuTooltip.css';
+/** @public */
+export default function MenuTooltip({ columns = [], onClose, className = '', size = 'medium' }) {
+    const { t } = useTranslation();
+    const itemSize = size === 'small' ? 40 : 48;
+    const [stack, setStack] = useState([{ title: null, columns }]);
+    const current = stack[stack.length - 1];
+    // 부모에서 전달되는 `columns`가 변경될 때 루트 컬럼을 동기화합니다.
+    // (사용자가 서브-뷰로 들어가 있으면 그 상태는 유지됩니다.)
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        setStack((prev) => {
+            try {
+                if (!Array.isArray(prev) || prev.length === 0)
+                    return [{ title: null, columns }];
+                const next = prev.slice();
+                const rootTitle = next[0] && typeof next[0].title !== 'undefined' ? next[0].title : null;
+                next[0] = { title: rootTitle, columns };
+                return next;
+            }
+            catch (e) {
+                return [{ title: null, columns }];
+            }
+        });
+    }, [columns]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    const goBack = useCallback(() => setStack((s) => (s.length > 1 ? s.slice(0, s.length - 1) : s)), []);
+    // 키보드 포커스 — Tooltip은 body로 포털되므로, 포커스를 옮겨주지 않으면 ⋯ 버튼을 누른
+    // 키보드 사용자가 메뉴에 닿으려면 페이지 끝까지 Tab 해야 한다(사실상 도달 불가).
+    // Tooltip에 이미 있는 ESC·Tab 트랩과 짝을 이루도록 첫 항목으로 포커스를 넣고,
+    // 닫힐 땐 메뉴를 연 요소로 되돌린다. 하위 메뉴로 들어가거나 뒤로 갈 때도(stack 깊이 변화)
+    // 새 목록의 첫 항목을 잡아준다 — 안 그러면 눌렀던 버튼이 사라지며 포커스가 body로 떨어진다.
+    // (포커스 이동은 클릭으로 여는 메뉴에만 해당한다. hover로 뜨는 Tooltip은 MenuTooltip을
+    //  쓰지 않으므로 이 컴포넌트에 두는 것이 안전하다.)
+    const itemsWrapRef = useRef(null);
+    const openerRef = useRef(null);
+    const depth = stack.length;
+    useEffect(() => {
+        if (!openerRef.current)
+            openerRef.current = document.activeElement;
+        // Tooltip은 위치를 재기 전까지 `visibility: hidden`이고(Tooltip.tsx:291),
+        // **숨겨진 요소에 대한 focus()는 브라우저가 조용히 무시한다** — 실측으로 확인했다
+        // (마운트 직후는 물론 두 프레임 뒤에 호출해도 활성 요소가 바뀌지 않음).
+        // 그래서 보이게 될 때까지 프레임을 넘겨 가며 재시도한다(최대 20프레임 ≈ 0.3초).
+        let raf = 0;
+        let tries = 0;
+        const tryFocus = () => {
+            const first = itemsWrapRef.current?.querySelector('button:not([disabled])');
+            // offsetParent가 null이면 아직 화면에 없는 것(visibility:hidden 포함) — 포커스가 안 먹는다
+            if (first && first.offsetParent) {
+                first.focus({ preventScroll: true });
+                return;
+            }
+            if (tries++ < 20)
+                raf = requestAnimationFrame(tryFocus);
+        };
+        raf = requestAnimationFrame(tryFocus);
+        return () => cancelAnimationFrame(raf);
+    }, [depth]);
+    useEffect(() => () => { openerRef.current?.focus?.({ preventScroll: true }); }, []);
+    const handleClick = useCallback((item) => {
+        if (!item)
+            return;
+        if (Array.isArray(item.children) && item.children.length) {
+            setStack((s) => [...s, { title: item.label || null, columns: [{ title: null, items: (item.children || []) }] }]);
+            return;
+        }
+        try {
+            if (typeof item.onClick === 'function')
+                item.onClick();
+        }
+        catch (err) { }
+        // 기본 동작: 클릭해도 툴팁을 닫지 않음.
+        // 필요 시 항목에 `closeOnSelect: true`를 지정하면 닫음.
+        try {
+            if (item && item.closeOnSelect && typeof onClose === 'function')
+                onClose();
+        }
+        catch (err) { }
+    }, [onClose]);
+    return (_jsxs("div", { className: `tooltip-menu tooltip-menu--${size} ${className}`, children: [(stack.length > 1 || current.title) && (_jsxs("div", { className: "tooltip-menu__header", children: [stack.length > 1 ? (_jsx(Button, { size: itemSize, type: "dot", icon: "chevron-left", ariaLabel: t('common.back', '뒤로'), onClick: goBack, variant: "transparent-gray", useBorder: false })) : null, _jsx("div", { className: "tooltip-menu__title button-1", children: current.title })] })), _jsx("div", { className: "tooltip-menu__columns", ref: itemsWrapRef, children: current.columns && current.columns.map((col, ci) => (_jsxs("div", { className: "tooltip-menu__column", children: [col.title ? _jsx("div", { className: "tooltip-menu__column-title body-3", children: col.title }) : null, _jsx("div", { className: "tooltip-menu__items", children: (col.items || []).map((item, idx) => (_jsx(Button, { className: "tooltip-menu__item", size: itemSize, type: item.label ? 'bar' : 'dot', icon: item.selected ? 'check' : (item.icon || 'none'), rightIcon: Array.isArray(item.children) && item.children.length
+                                    ? 'chevron-right'
+                                    : item.badgeCount
+                                        ? _jsx(Badge, { type: "dot", position: "inline", number: Math.min(item.badgeCount, 99), size: 24, "aria-label": `${item.badgeCount}` })
+                                        : undefined, label: item.label, ariaLabel: item.label, onClick: () => handleClick(item), selected: item.selected, disabled: item.disabled, showTooltipInfo: item.tooltip || false, useBorder: false, align: "left" }, idx))) })] }, ci))) })] }));
+}

package/dist/packages/core/src/components/Tooltip/TextBoxTooltip.css

@@ -0,0 +1,95 @@
+.tooltip-textbox {
+  padding: var(--spacing-content);
+  border-radius: var(--radius-m);
+  background: var(--color-deepWhite);
+  border: 1px solid var(--color-whiteLine);
+  max-width: 520px;
+  box-sizing: border-box;
+}
+
+.tooltip-textbox__root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.tooltip-textbox__box {
+  background: transparent;
+}
+
+.tooltip-textbox__label {
+  color:var(--color-darkGray);
+}
+
+.tooltip-textbox__text {
+  color:var(--color-darkGray);
+  white-space: normal;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+
+.tooltip-textbox__line {
+  margin-bottom: 0;
+  display: flex;
+  gap: var(--spacing-s);
+  align-items: center;
+  min-height: 60px;
+  padding: 10px 0;
+}
+.tooltip-textbox__line:last-child {
+  margin-bottom: 0;
+}
+
+/* border under each line except the last; spacing handled via padding */
+.tooltip-textbox__line:not(:last-child) {
+  border-bottom: 1px solid var(--color-darkWhite);
+}
+
+.tooltip-textbox.is-dark .tooltip-textbox__line:not(:last-child) {
+  border-bottom-color: rgba(255,255,255,0.06);
+}
+
+.tooltip-textbox__marker {
+    min-width: 24px;
+    height: 24px;
+    border-radius: var(--radius-sm);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-main);
+    --marker-pos: 50%;
+    background: color-mix(in srgb,
+        var(--color-main) calc(100% - var(--marker-pos)),
+        var(--color-sub) var(--marker-pos)
+    );
+    color: #ffffff;
+    border: 2px solid var(--color-pureWhite);
+    box-sizing: border-box;
+      /* removed auto-offset to avoid small misalignments */
+}
+
+.tooltip-textbox__line-number {
+  min-width: auto;
+  text-align: center;
+  color: #ffffff;
+}
+.tooltip-textbox__line-text {
+  flex: 1 1 auto;
+}
+
+/* 버튼 영역 */
+.tooltip-textbox__buttons {
+  position: relative;
+  display: flex;
+  gap: var(--spacing-xs);
+  margin-top: 10px;
+  justify-content: center;
+  align-items: center;
+}
+
+.tooltip-textbox.is-dark {
+  background: var(--color-darkGray);
+  border-color: var(--color-gray);
+}
+
+.tooltip-textbox.is-dark .tooltip-textbox__text { color: var(--color-deepWhite) }

package/dist/packages/core/src/components/Tooltip/TextBoxTooltip.d.ts

@@ -0,0 +1,13 @@
+import './TextBoxTooltip.css';
+import type { AnchorRectLike } from '../../types/geometry';
+/** @public */
+export interface TooltipTextBoxProps {
+    text?: string | string[] | null;
+    anchorRect?: DOMRect | AnchorRectLike | null;
+    onClose?: () => void;
+    closeOnOutsideClick?: boolean;
+    isMobilePopup?: boolean;
+    label?: string;
+}
+/** @public */
+export default function TextBoxTooltip(props: TooltipTextBoxProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Tooltip/TextBoxTooltip.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Button from '../Button';
+import Tooltip from './Tooltip';
+import { useFontScale } from '../../hooks';
+import './TextBoxTooltip.css';
+/** @public */
+export default function TextBoxTooltip(props) {
+    const { t } = useTranslation();
+    const { text, label, anchorRect = null, onClose, closeOnOutsideClick = true, isMobilePopup = false } = props || {};
+    const [theme, setTheme] = useState(() => {
+        try {
+            return localStorage.getItem('tooltip-theme') || 'light';
+        }
+        catch (e) {
+            return 'light';
+        }
+    });
+    useEffect(() => {
+        try {
+            localStorage.setItem('tooltip-theme', theme);
+        }
+        catch (e) { }
+    }, [theme]);
+    const { increase, decrease, canIncrease, canDecrease, fontSize, lineHeight } = useFontScale({
+        storageKey: 'tooltip-fontScale',
+    });
+    const toggleTheme = useCallback(() => setTheme(t => (t === 'dark' ? 'light' : 'dark')), []);
+    const handleClose = useCallback((e) => {
+        try {
+            e.stopPropagation();
+        }
+        catch (err) { }
+        try {
+            if (typeof onClose === 'function')
+                onClose();
+        }
+        catch (err) { }
+    }, [onClose]);
+    // Normalize text into an array of lines
+    const lines = Array.isArray(text) ? text : (typeof text === 'undefined' || text === null ? [] : [text]);
+    const textStyle = {
+        fontSize: `${fontSize}px`,
+        lineHeight: `${lineHeight}px`,
+        '--tt-line-height': `${lineHeight}px`,
+        '--tt-marker-size': '28px',
+    };
+    const inner = (_jsxs("div", { className: `tooltip-textbox__root ${theme === 'dark' ? 'is-dark' : ''}`, children: [_jsxs("div", { className: "tooltip-textbox__box", children: [label && _jsx("div", { className: "tooltip-textbox__label body-2b", children: label }), _jsx("div", { className: "tooltip-textbox__text body-1", style: textStyle, children: lines.map((ln, idx) => (_jsxs("div", { className: "tooltip-textbox__line", children: [lines.length > 1 ? (_jsx("div", { className: "tooltip-textbox__marker", children: _jsx("span", { className: "tooltip-textbox__line-number button-1", children: idx + 1 }) })) : null, _jsx("span", { className: "tooltip-textbox__line-text", children: ln })] }, idx))) })] }), _jsxs("div", { className: "tooltip-textbox__buttons", children: [_jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", useBorder: false, width: 48, icon: 'minus', onClick: decrease, ariaLabel: t('training.fontSizeDecrease', '글자 크기 감소'), variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canDecrease }), _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", useBorder: false, width: 48, icon: 'plus', onClick: increase, ariaLabel: t('training.fontSizeIncrease', '글자 크기 증가'), variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray', disabled: !canIncrease }), _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", useBorder: false, width: 48, icon: theme === 'dark' ? 'moon' : 'sun-medium', onClick: toggleTheme, ariaLabel: t('training.toggleBackground', '배경 전환'), variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray' }), _jsx(Button, { size: 32, showTooltipInfo: true, type: "dot", useBorder: false, width: 48, icon: 'x', onClick: handleClose, ariaLabel: t('common.close', '닫기'), variant: theme === 'dark' ? 'transparent-white' : 'transparent-gray' })] })] }));
+    if (anchorRect) {
+        return (_jsx(Tooltip, { anchorRect: anchorRect, className: `tooltip-textbox ${theme === 'dark' ? 'is-dark' : ''}`, onClose: onClose, closeOnOutsideClick: closeOnOutsideClick, isMobilePopup: isMobilePopup, children: inner }));
+    }
+    return (_jsx("div", { className: `tooltip-textbox ${theme === 'dark' ? 'is-dark' : ''}`, children: inner }));
+}

package/dist/packages/core/src/components/Tooltip/Tooltip.css

@@ -0,0 +1,120 @@
+.tooltip-content {
+  /* allow multiline text and let tooltip size to content up to a limit */
+  white-space: normal;
+  box-sizing: border-box;
+  pointer-events: auto;
+  border-radius: var(--radius-m);
+  box-shadow: var(--shadow-tooltip);
+  position: absolute;
+  z-index: var(--z-tooltip);
+  transform-origin: left center;
+  animation: tooltip-pop 200ms cubic-bezier(.2,.9,.2,1) both;
+  will-change: transform, opacity;
+  background-color: var(--color-white);
+}
+
+/* useBorder=true 일 때만 외곽선 */
+.tooltip-content--bordered {
+  border: 1px solid var(--color-whiteLine);
+}
+
+/* 배경 없는 variant 툴팁(Info/Description/Training) 공통 — 감싸는 wrapper(.tooltip-content)의
+   배경·그림자를 지우고 내부 컨텐츠 자체 스타일만 남긴다. 세 파일에 동일 규칙이
+   중복 선언돼 있던 것을 정규화. 결합 선택자(2클래스)가 .tooltip-content(1클래스)보다
+   특이도가 높아 !important 불필요. */
+.tooltip-content.tooltip-info,
+.tooltip-content.tooltip-description,
+.tooltip-content.tooltip-training {
+  background: transparent;
+  box-shadow: none;
+}
+
+/* header prop 전달 시 상단 헤더 */
+.tooltip-content__header {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  color: var(--color-gray);
+  padding: 0 2px 10px;
+}
+
+
+.tooltip-content.is-closing {
+  opacity: 0;
+  transition: opacity 200ms ease, transform 200ms ease;
+}
+
+/* Placement-specific initial offsets (used by open animation) */
+.tooltip-content[data-placement='top'] { transform: translateY(-6px); }
+.tooltip-content[data-placement='bottom'] { transform: translateY(6px); }
+.tooltip-content[data-placement='left'] { transform: translateX(-6px); }
+.tooltip-content[data-placement='right'] { transform: translateX(6px); }
+
+/* Placement-specific closing transforms to animate towards the anchor direction */
+.tooltip-content.is-closing[data-placement='top'] { transform: translateY(-6px) scale(0.98); }
+.tooltip-content.is-closing[data-placement='bottom'] { transform: translateY(6px) scale(0.98); }
+.tooltip-content.is-closing[data-placement='left'] { transform: translateX(-6px) scale(0.98); }
+.tooltip-content.is-closing[data-placement='right'] { transform: translateX(6px) scale(0.98); }
+
+.tooltip--hidden { display: none; }
+
+@keyframes tooltip-pop {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes tooltip-fade-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.98);
+  }
+}
+
+/* optional backdrop used by Tooltip when `backdrop=true` */
+.tooltip-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--color-popupBlock);
+  z-index: calc(var(--z-tooltip) - 1); /* 툴팁 백드롭 — 툴팁 바로 아래 */
+}
+
+.tooltip-portal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-tooltip);
+}
+
+/* Mobile: force centered popup and fixed max-width to avoid any layout override */
+.tooltip-content.is-mobile {
+  left: 50% !important;
+  top: 50% !important;
+  transform: translate(-50%, -50%) !important;
+  width: calc(100% - 40px) !important;
+  max-width: calc(100% - 40px) !important;
+  visibility: visible !important;
+  z-index: var(--z-tooltip) !important;
+}
+
+/* Close button positioned at the tooltip's top-right corner */
+.tooltip-content .tooltip-close {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 2;
+  display: inline-flex;
+}
+
+/* Slightly reduce visual impact of the close button so it reads as control */
+.tooltip-content .tooltip-close .button {
+  box-shadow: none;
+}

package/dist/packages/core/src/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+import './Tooltip.css';
+import type { AnchorRectLike } from '../../types/geometry';
+/** @public */
+export interface TooltipProps {
+    anchorRect?: DOMRect | AnchorRectLike | null;
+    /** 제공 시 scroll/resize 마다 직접 re-measure해서 항상 최신 위치를 유지 */
+    anchorEl?: Element | null;
+    offset?: number;
+    edgeMargin?: number;
+    onClose?: () => void;
+    closeOnOutsideClick?: boolean;
+    className?: string;
+    role?: string;
+    ariaLabel?: string;
+    children?: ReactNode;
+    backdrop?: boolean;
+    isMobilePopup?: boolean;
+    /** 외곽선(테두리) 표시 여부 (기본 true) */
+    useBorder?: boolean;
+    /** 상단 헤더 — 전달하면 내용 위에 헤더 영역 표시 (없으면 미표시) */
+    header?: ReactNode;
+}
+/** @public */
+export default function Tooltip(props: TooltipProps): import("react").JSX.Element;