@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Button.js

@@ -0,0 +1,202 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import './Button.css';
+import Icon from './Icon';
+import InfoTooltip from "./Tooltip/InfoTooltip";
+import DescriptionTooltip from "./Tooltip/DescriptionTooltip";
+/** @public */
+export default function Button(props) {
+    const { size = 48, type: explicitType, htmlType, href, target, rel, icon, rightIcon, label: labelProp, count, subLabel, children, ariaLabel, variant = 'default', align = 'center', selected, toggleable = false, disabled = false, useLabel = true, useBorder = true, useBG = true, useDisabledCovered = false, useDisabledInvisible = false, width, minWidth, onClick, onDisabledClick, showTooltipInfo = false, tooltipInfoText = null, tooltipDescription = null, iconSize = 'medium', iconColor, shape = 'rounded', color, className, ...rest } = props;
+    const sizeKey = typeof size === 'string' && isNaN(Number(size))
+        ? size.toLowerCase()
+        : String(Number(size) || 48);
+    const sizeBase = sizeKey.match(/^\d+$/) ? `button${sizeKey}` : `button-${sizeKey}`;
+    // 40 미만(32/28/24 등) 작은 버튼은 라벨을 button-2 타이포로
+    const numericSize = Number(size);
+    const labelTypoClass = !isNaN(numericSize) && numericSize < 40 ? 'button-2' : 'button-1';
+    // label prop 우선, 없으면 children으로 fallback
+    const label = labelProp ?? children;
+    const disabledProp = disabled || Boolean(rest.disabled);
+    const effectiveVariant = disabledProp
+        ? useDisabledCovered ? 'disabled-covered'
+            : useDisabledInvisible ? 'disabled-invisibled'
+                : 'disabled'
+        : variant;
+    const variantClass = effectiveVariant ? `button--variant-${effectiveVariant}` : '';
+    const alignClass = align ? `button--align-${align}` : '';
+    const shapeClass = shape ? `button--shape-${shape}` : '';
+    const resolvedIconColor = typeof iconColor === 'string' && iconColor.startsWith('--')
+        ? `var(${iconColor})`
+        : iconColor;
+    const style = {
+        ...(width ? { width: typeof width === 'number' ? `${width}px` : width } : {}),
+        ...(minWidth ? { minWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth } : {}),
+        ...(!useBorder ? { '--button-border': disabledProp ? '0' : '1px solid transparent' } : {}),
+        ...(resolvedIconColor ? { '--button-icon-color': resolvedIconColor } : {}),
+        ...(color ? { '--color-main': color } : {}),
+    };
+    const displayedLabel = useLabel === false ? '' : label;
+    const hasLabel = Array.isArray(displayedLabel) ? displayedLabel.length > 0 : Boolean(displayedLabel);
+    const hasRight = Boolean(rightIcon);
+    const defaultType = (hasLabel || icon || hasRight) ? 'bar' : 'dot';
+    const type = explicitType ?? defaultType;
+    const sizeTypeClass = `${sizeBase}--${type}`;
+    const btnRef = useRef(null);
+    const prevDisabledRef = useRef(disabledProp);
+    const [internalSelected, setInternalSelected] = useState(Boolean(selected));
+    const [tooltipVisible, setTooltipVisible] = useState(false);
+    const [anchorRect, setAnchorRect] = useState(null);
+    const handleTooltipClose = useCallback(() => setTooltipVisible(false), []);
+    // tooltip이 열린 상태에서 disabled가 되면 즉시 닫기
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        if ((showTooltipInfo || tooltipDescription) && disabledProp && tooltipVisible) {
+            setTooltipVisible(false);
+            setAnchorRect(null);
+        }
+    }, [disabledProp, showTooltipInfo, tooltipDescription, tooltipVisible]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    // selected가 controlled로 전달되면 내부 상태 동기화 (지연 없이 즉시 — isSelected는 controlled 시 selected를 직접 쓰지만, 비제어로 전환될 때를 위해 내부 상태도 맞춰둠)
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        if (typeof selected === 'boolean')
+            setInternalSelected(selected);
+    }, [selected]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    // disabled true→false 전환 시 hover 상태 리셋
+    useEffect(() => {
+        if (prevDisabledRef.current && !disabledProp && btnRef.current) {
+            const btn = btnRef.current;
+            btn.blur();
+            btn.style.pointerEvents = 'none';
+            const id = requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    if (btnRef.current)
+                        btnRef.current.style.pointerEvents = '';
+                });
+            });
+            return () => cancelAnimationFrame(id);
+        }
+        prevDisabledRef.current = disabledProp;
+    }, [disabledProp]);
+    const isSelected = typeof selected === 'boolean' ? Boolean(selected) : internalSelected;
+    // toggleable 또는 controlled selected가 있을 때만 aria-pressed 설정
+    const ariaPressed = (toggleable || typeof selected === 'boolean')
+        ? (isSelected ? 'true' : 'false')
+        : undefined;
+    const classes = cx('button', sizeBase, sizeTypeClass, variantClass, alignClass, shapeClass, isSelected ? 'is-selected' : null, !useBG ? 'button--no-bg' : null, className);
+    const iconClassName = `button__icon button__icon--${iconSize}`;
+    const subLabels = Array.isArray(subLabel) ? subLabel : (subLabel !== undefined ? [subLabel] : []);
+    const renderLabelContent = () => {
+        if (Array.isArray(displayedLabel)) {
+            return displayedLabel.map((l, i) => {
+                const sub = subLabels[i];
+                return (_jsxs("span", { className: `button__label-text${sub !== undefined ? ' button__label-text--has-sub' : ''}`, children: [l, sub !== undefined && _jsx("span", { className: "button__sub-label-text caption-1", children: sub })] }, i));
+            });
+        }
+        const hasSub = subLabel !== undefined;
+        return (_jsxs("span", { className: `button__label-text${hasSub ? ' button__label-text--has-sub' : ''}`, children: [displayedLabel, count != null && _jsx("span", { className: "button__count", children: count }), hasSub && _jsx("span", { className: "button__sub-label-text caption-1", children: subLabel })] }));
+    };
+    const handleMouseLeave = (e) => {
+        if (disabledProp)
+            return;
+        if (typeof rest.onMouseLeave === 'function')
+            rest.onMouseLeave(e);
+        if (typeof selected !== 'boolean')
+            setInternalSelected(false);
+        e.currentTarget.blur();
+    };
+    const handleClickInternal = (e) => {
+        if (disabledProp) {
+            onDisabledClick?.(e);
+            return;
+        }
+        if (typeof selected !== 'boolean' && toggleable) {
+            setInternalSelected(s => !s);
+        }
+        onClick?.(e);
+    };
+    const showTooltipFn = useCallback(() => {
+        if (!disabledProp && (showTooltipInfo || tooltipDescription)) {
+            setTooltipVisible(true);
+            setAnchorRect(btnRef.current?.getBoundingClientRect() ?? null);
+        }
+    }, [disabledProp, showTooltipInfo, tooltipDescription]);
+    const hideTooltipFn = useCallback(() => {
+        if (showTooltipInfo || tooltipDescription) {
+            setTooltipVisible(false);
+            setAnchorRect(null);
+        }
+    }, [showTooltipInfo, tooltipDescription]);
+    // restProps에서 Button이 직접 처리하는 props 제거
+    const restProps = { ...rest };
+    delete restProps.disabled;
+    delete restProps.className;
+    delete restProps.faded;
+    delete restProps.useFaded;
+    delete restProps.loading;
+    // 아래 이벤트들은 내부 핸들러가 직접 위임하므로 중복 방지를 위해 제거
+    delete restProps.onMouseLeave;
+    delete restProps.onPointerEnter;
+    delete restProps.onPointerLeave;
+    delete restProps.onFocus;
+    delete restProps.onBlur;
+    if (disabledProp) {
+        Object.keys(restProps).forEach(k => {
+            if (/^on[A-Z]/.test(k) && typeof restProps[k] === 'function')
+                delete restProps[k];
+        });
+        restProps['aria-disabled'] = 'true';
+    }
+    // 툴팁 텍스트: showTooltipInfo(string) → tooltipInfoText → ariaLabel → label 순 우선
+    const tooltipText = (typeof showTooltipInfo === 'string' ? showTooltipInfo : null)
+        ?? (typeof tooltipInfoText === 'string' ? tooltipInfoText : null)
+        ?? (typeof ariaLabel === 'string' ? ariaLabel : null)
+        ?? (typeof label === 'string' ? label : null)
+        ?? undefined;
+    // 아이콘 전용 버튼이 ariaLabel/label 없이 showTooltipInfo(문자열)만으로 접근 가능한 이름을
+    // 갖는 경우가 많다 — 그때도 실제 화면에 보이는 툴팁 텍스트와 동일한 문자열을 aria-label로
+    // 노출해, 스크린리더 사용자에게 이름 없는 버튼으로 남지 않게 한다.
+    const ariaLabelString = typeof ariaLabel === 'string' ? ariaLabel
+        : typeof label === 'string' ? label
+            : tooltipText;
+    const renderIcon = (iconVal, label) => (_jsx(Icon, { icon: iconVal, label: label ?? ariaLabelString, className: iconClassName, imgClassName: "button__icon-img", maskClassName: "button__icon-mask", svgClassName: "button__icon-svg" }));
+    const renderContent = () => {
+        if (type === 'dot') {
+            return (_jsxs(_Fragment, { children: [renderIcon(icon), hasLabel && _jsx("span", { className: `button__label ${labelTypoClass}`, children: renderLabelContent() })] }));
+        }
+        if (align === 'center' && icon) {
+            return (_jsxs(_Fragment, { children: [_jsxs("span", { className: "button__center-group", children: [_jsx("span", { className: "button__left", children: renderIcon(icon) }), hasLabel && _jsx("span", { className: `button__label ${labelTypoClass}`, children: renderLabelContent() })] }), hasRight && _jsx("span", { className: "button__right", children: renderIcon(rightIcon) })] }));
+        }
+        return (_jsxs(_Fragment, { children: [icon && _jsx("span", { className: "button__left", children: renderIcon(icon, ariaLabel ?? label) }), hasLabel && _jsx("span", { className: `button__label ${labelTypoClass}`, children: renderLabelContent() }), hasRight && _jsx("span", { className: "button__right", children: renderIcon(rightIcon) })] }));
+    };
+    /* href 가 있고 비활성이 아니면 링크로 렌더한다. */
+    const isLink = !!href && !disabledProp;
+    const Root = (isLink ? 'a' : 'button');
+    return (_jsxs(_Fragment, { children: [_jsx(Root, { ...restProps, ref: btnRef, ...(isLink
+                    ? { href, target, rel: rel ?? (target === '_blank' ? 'noreferrer' : undefined) }
+                    : { type: htmlType, disabled: disabledProp && !onDisabledClick }), className: classes, "aria-pressed": ariaPressed, "aria-label": ariaLabelString, "aria-disabled": isLink && disabledProp ? true : undefined, style: style, onClick: handleClickInternal, onMouseLeave: handleMouseLeave, onPointerEnter: (e) => {
+                    showTooltipFn();
+                    if (!disabledProp && typeof rest.onPointerEnter === 'function')
+                        rest.onPointerEnter(e);
+                }, onPointerLeave: (e) => {
+                    hideTooltipFn();
+                    if (!disabledProp && typeof rest.onPointerLeave === 'function')
+                        rest.onPointerLeave(e);
+                }, onFocus: (e) => {
+                    showTooltipFn();
+                    if (!disabledProp && typeof rest.onFocus === 'function')
+                        rest.onFocus(e);
+                }, onBlur: (e) => {
+                    handleMouseLeave(e);
+                    hideTooltipFn();
+                    if (!disabledProp && typeof rest.onBlur === 'function')
+                        rest.onBlur(e);
+                }, children: renderContent() }), tooltipVisible && tooltipDescription
+                ? _jsx(DescriptionTooltip, { anchorRect: anchorRect, title: tooltipDescription.title, items: tooltipDescription.items, onClose: handleTooltipClose })
+                : tooltipVisible && tooltipText
+                    ? _jsx(InfoTooltip, { anchorRect: anchorRect, text: tooltipText, onClose: handleTooltipClose })
+                    : null] }));
+}

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

@@ -0,0 +1,249 @@
+/* Calendar component */
+
+.calendar-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-m);
+  margin-bottom: var(--spacing-m);
+  position: relative;
+}
+
+.calendar-nav__legend {
+  position: absolute;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--color-gray);
+}
+
+.calendar-nav__legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.calendar-nav__legend-dot--main     { background: var(--color-main); }
+.calendar-nav__legend-dot--sub      { background: var(--color-sub); }
+.calendar-nav__legend-dot--disabled { background: var(--color-disabled); }
+
+.calendar-nav__button {
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--color-whiteLine);
+  border-radius: var(--radius-sm);
+  background: var(--color-white);
+  color: var(--color-darkGray);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.calendar-nav__button:hover {
+  border-color: var(--color-main);
+  color: var(--color-main);
+}
+
+.calendar-nav__title {
+  font-weight: 700;
+  color: var(--color-darkGray);
+  min-width: 100px;
+  text-align: center;
+}
+
+/* 7-column grid */
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+}
+
+.calendar-day-header {
+  text-align: center;
+  font-weight: 600;
+  color: var(--color-lightGray);
+  padding: 6px 0;
+}
+
+.calendar-day-header:first-child { color: var(--color-error); }
+.calendar-day-header:last-child  { color: var(--color-main); }
+
+.calendar-cell {
+  min-width: 118px;
+  min-height: 118px;
+  border-radius: var(--radius-s);
+  padding: 8px;
+  cursor: default;
+  background: transparent;
+  box-sizing: border-box;
+}
+
+
+.calendar-cell.empty {
+  background: transparent;
+  cursor: default;
+}
+
+/* !important 필요 — 오늘이 일요일/토요일과 겹치면 아래 nth-child 주말 색상 규칙과
+   특이도가 동일(3클래스)하고 소스 순서상 뒤라 !important 없이는 흰 글자가 주말색으로
+   덮어써짐(오늘 표시가 무의미해짐). 실제 경합 확인됨. */
+.calendar-cell.today .calendar-cell__number {
+  background: var(--color-main);
+  color: #ffffff !important;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+.calendar-cell__number {
+  font-weight: 600;
+  color: var(--color-darkGray);
+  margin-bottom: 6px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Sunday = 1st col, Saturday = 7th col */
+.calendar-cell:nth-child(7n+8) .calendar-cell__number  { color: var(--color-error); }
+.calendar-cell:nth-child(7n+14) .calendar-cell__number { color: var(--color-main); }
+
+.calendar-cell__badges {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.calendar-visit-badge {
+  color: var(--color-main);
+  background: var(--color-main-a10);
+  border-radius: var(--radius-xs);
+  padding: 0 8px;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.calendar-visit-badge__time {
+  opacity: 0.7;
+  flex-shrink: 0;
+  font-weight: 400;
+}
+
+.calendar-visit-badge__name {
+  flex: 1;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.calendar-visit-badge--scheduled {
+  background: var(--color-sub-a10);
+  color: var(--color-sub);
+}
+
+.calendar-visit-badge--no-visit {
+  background: color-mix(in srgb, var(--color-disabled) 15%, white);
+  color: var(--color-disabled);
+}
+
+.calendar-visit-badge__no-visit {
+  flex-shrink: 0;
+  background: var(--color-disabled);
+  color: #ffffff;
+  border-radius: var(--radius-xs);
+  padding: 1px 5px;
+  line-height: 1.4;
+}
+
+.calendar-visit-badge--clickable {
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+
+.calendar-visit-badge--clickable:hover {
+  background: var(--color-main);
+  color: #ffffff;
+  border-color: transparent;
+}
+
+.calendar-visit-badge--scheduled.calendar-visit-badge--clickable:hover {
+  background: var(--color-sub);
+  color: #ffffff;
+}
+
+.calendar-visit-badge--no-visit.calendar-visit-badge--clickable:hover {
+  background: var(--color-disabled);
+  color: #ffffff;
+}
+
+.calendar-visit-badge--draggable {
+  cursor: grab;
+}
+
+.calendar-visit-badge--draggable:active {
+  cursor: grabbing;
+  opacity: 0.5;
+}
+
+/* 누를 수 있는 칸 — 그 날로 새 방문을 여는 자리다. 손 모양과 옅은 바탕으로만
+   알린다(테두리를 주면 오늘 표시와 헷갈린다). */
+/* 아이콘이 가운데에 서게 — 글자였을 때는 line-height 가 잡아 주던 자리다 */
+.calendar-nav__button { display: inline-flex; align-items: center; justify-content: center; }
+.calendar-nav__button-icon { display: block; }
+
+.calendar-cell--clickable { cursor: pointer; }
+.calendar-cell--clickable:hover { background: var(--color-darkWhite); }
+.calendar-cell--clickable:focus-visible { outline: 2px solid var(--color-main); outline-offset: -2px; }
+
+.calendar-cell.drag-over {
+  background: var(--color-main-a10);
+  outline: 1px solid var(--color-main);
+  outline-offset: -1px;
+}
+
+
+/* ── 좁은 화면: 범례를 달력 이동 버튼 아래 줄로 ──
+   범례는 `position: absolute; right: 0`이라 넓은 화면에서는 가운데 정렬된 월 이동
+   영역과 겹치지 않는다. 하지만 320px에서는 네비 폭이 230px로 줄어 범례(127px)가
+   다음달 "›" 버튼(x 226~258) 위를 덮었고, absolute라 클릭까지 가로채 **다음달로
+   넘어갈 수 없었다**(elementFromPoint가 버튼 대신 범례를 반환). 흐름에 되돌려
+   아래 줄로 내린다. */
+@media (max-width: 767px) {
+  .calendar-nav {
+    flex-wrap: wrap;
+  }
+  .calendar-nav__legend {
+    position: static;
+    width: 100%;
+    justify-content: center;
+  }
+
+  /* 셀 min-width 118px × 7 + gap = 850px라, 좁은 화면에선 격자가 줄어들지 못하고
+     그대로 잘렸다(320px에서 620px가 화면 밖 — 조상이 hidden이라 스크롤도 안 돼
+     토요일 쪽 요일이 **아예 보이지 않았다**). 좁을 땐 상한을 풀어 1fr로 나눠 갖게 한다. */
+  .calendar-cell,
+  .calendar-day-header {
+    min-width: 0;
+  }
+  .calendar-cell {
+    min-height: 72px;
+    padding: 4px;
+  }
+}

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

@@ -0,0 +1,23 @@
+import './Calendar.css';
+/** @public */
+export type VisitStatus = 'visited' | 'scheduled' | 'noVisit';
+/** @public */
+export type Visit = {
+    id: string | number;
+    date: string;
+    time?: string;
+    customer?: string;
+    type?: string;
+    status?: VisitStatus;
+};
+/** @public */
+export default function Calendar({ visits, onVisitClick, onVisitMove, onDayClick, }: {
+    visits?: Visit[];
+    onVisitClick?: (visit: Visit) => void;
+    onVisitMove?: (visitId: string | number, newDate: string) => void;
+    /**
+     * 빈 곳을 누르면 그 날짜를 준다('YYYY-MM-DD') — 새 방문을 그 날로 여는 자리다.
+     * 주지 않으면 칸은 눌리지 않고 손 모양도 뜨지 않는다(못 하는 일을 내밀지 않는다).
+     */
+    onDayClick?: (date: string) => void;
+}): import("react").JSX.Element;

package/dist/packages/core/src/components/Calendar.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import Icon from './Icon';
+import { formatTimeHM } from '../utils/format';
+import './Calendar.css';
+function daysInMonth(year, month) { return new Date(year, month + 1, 0).getDate(); }
+function firstDayOfMonth(year, month) { return new Date(year, month, 1).getDay(); }
+/** @public */
+export default function Calendar({ visits = [], onVisitClick, onVisitMove, onDayClick, }) {
+    const { t } = useTranslation();
+    const DOW = useMemo(() => t('calendar.dow', { returnObjects: true }), [t]);
+    const [year, setYear] = useState(new Date().getFullYear());
+    const [month, setMonth] = useState(new Date().getMonth());
+    const [dragOverDate, setDragOverDate] = useState(null);
+    const dragVisitId = useRef(null);
+    const today = new Date();
+    const visitsByDate = useMemo(() => {
+        const map = {};
+        visits.forEach((v) => {
+            if (!map[v.date])
+                map[v.date] = [];
+            map[v.date].push(v);
+        });
+        return map;
+    }, [visits]);
+    const cells = useMemo(() => {
+        const days = daysInMonth(year, month);
+        const firstDay = firstDayOfMonth(year, month);
+        const result = [];
+        for (let i = 0; i < firstDay; i++)
+            result.push(null);
+        for (let d = 1; d <= days; d++)
+            result.push(d);
+        while (result.length < 35)
+            result.push(null);
+        return result;
+    }, [year, month]);
+    const prev = useCallback(() => { if (month === 0) {
+        setYear(y => y - 1);
+        setMonth(11);
+    }
+    else
+        setMonth(m => m - 1); }, [month]);
+    const next = useCallback(() => { if (month === 11) {
+        setYear(y => y + 1);
+        setMonth(0);
+    }
+    else
+        setMonth(m => m + 1); }, [month]);
+    const fmtDate = (d) => `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
+    const isToday = (d) => today.getFullYear() === year && today.getMonth() === month && today.getDate() === d;
+    return (_jsxs("div", { children: [_jsxs("div", { className: "calendar-nav", children: [_jsx("button", { className: "calendar-nav__button", onClick: prev, "aria-label": t('calendar.prevMonth', '이전 달'), children: _jsx(Icon, { icon: "chevron-left", label: "", className: "", svgClassName: "calendar-nav__button-icon", size: 18 }) }), _jsx("span", { className: "calendar-nav__title h5", children: t('calendar.yearMonth', { year, month: month + 1 }) }), _jsx("button", { className: "calendar-nav__button", onClick: next, "aria-label": t('calendar.nextMonth', '다음 달'), children: _jsx(Icon, { icon: "chevron-right", label: "", className: "", svgClassName: "calendar-nav__button-icon", size: 18 }) }), _jsxs("div", { className: "calendar-nav__legend", children: [_jsx("span", { className: "calendar-nav__legend-dot calendar-nav__legend-dot--main" }), _jsx("span", { className: "caption-1", children: t('calendar.legend.visited', '방문') }), _jsx("span", { className: "calendar-nav__legend-dot calendar-nav__legend-dot--sub" }), _jsx("span", { className: "caption-1", children: t('calendar.legend.scheduled', '예약') }), _jsx("span", { className: "calendar-nav__legend-dot calendar-nav__legend-dot--disabled" }), _jsx("span", { className: "caption-1", children: t('calendar.legend.noVisit', '미방문') })] })] }), _jsxs("div", { className: "calendar-grid", children: [DOW.map(d => _jsx("div", { className: "calendar-day-header body-3", children: d }, d)), cells.map((d, i) => {
+                        if (d === null)
+                            return _jsx("div", { className: "calendar-cell empty" }, `empty-${i}`);
+                        const day = d;
+                        const dateKey = fmtDate(day);
+                        const dayVisits = visitsByDate[dateKey] ?? [];
+                        const isDragOver = dragOverDate === dateKey;
+                        return (_jsxs("div", { className: `calendar-cell${isToday(day) ? ' today' : ''}${isDragOver ? ' drag-over' : ''}${onDayClick ? ' calendar-cell--clickable' : ''}`, role: onDayClick ? 'button' : undefined, tabIndex: onDayClick ? 0 : undefined, "aria-label": onDayClick ? t('calendar.addOnDate', { date: dateKey }) : undefined, onClick: onDayClick ? () => onDayClick(dateKey) : undefined, 
+                            /* `<div role="button">` 은 브라우저가 Enter·Space 를 눌림으로 바꿔 주지 않는다 */
+                            onKeyDown: onDayClick ? (e) => {
+                                if (e.key !== 'Enter' && e.key !== ' ')
+                                    return;
+                                e.preventDefault();
+                                onDayClick(dateKey);
+                            } : undefined, onDragOver: onVisitMove ? (e) => { e.preventDefault(); setDragOverDate(dateKey); } : undefined, onDragLeave: onVisitMove ? (e) => {
+                                if (!e.currentTarget.contains(e.relatedTarget))
+                                    setDragOverDate(null);
+                            } : undefined, onDrop: onVisitMove ? (e) => {
+                                e.preventDefault();
+                                if (dragVisitId.current != null) {
+                                    onVisitMove(dragVisitId.current, dateKey);
+                                    dragVisitId.current = null;
+                                }
+                                setDragOverDate(null);
+                            } : undefined, children: [_jsx("div", { className: "calendar-cell__number body-3", children: day }), _jsx("div", { className: "calendar-cell__badges", children: dayVisits.map((v, vi) => (_jsxs("div", { draggable: !!onVisitMove, className: `calendar-visit-badge${v.status === 'noVisit' ? ' calendar-visit-badge--no-visit' : v.status === 'scheduled' ? ' calendar-visit-badge--scheduled' : ''}${onVisitClick ? ' calendar-visit-badge--clickable' : ''}${onVisitMove ? ' calendar-visit-badge--draggable' : ''}`, onDragStart: onVisitMove ? (e) => {
+                                            dragVisitId.current = v.id;
+                                            e.dataTransfer.effectAllowed = 'move';
+                                        } : undefined, onDragEnd: onVisitMove ? () => {
+                                            dragVisitId.current = null;
+                                            setDragOverDate(null);
+                                        } : undefined, onClick: onVisitClick ? (e) => { e.stopPropagation(); onVisitClick(v); } : undefined, "aria-label": [
+                                            v.time ? formatTimeHM(v.time, t) : null,
+                                            v.customer,
+                                            t(v.status === 'noVisit' ? 'calendar.legend.noVisit'
+                                                : v.status === 'scheduled' ? 'calendar.legend.scheduled'
+                                                    : 'calendar.legend.visited'),
+                                        ].filter(Boolean).join(' '), children: [v.time && _jsx("span", { className: "calendar-visit-badge__time body-3", children: formatTimeHM(v.time, t) }), _jsx("span", { className: "calendar-visit-badge__name body-3", children: v.customer }), v.status === 'noVisit' && _jsx("span", { className: "calendar-visit-badge__no-visit caption-1", children: t('calendar.legend.noVisit', '미방문') })] }, v.id ?? vi))) })] }, day));
+                    })] })] }));
+}