@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,32 @@
+/* 앱 진입 연출 — 로고가 살짝 커지며 나타났다가 유지하고, 조금 더 커지며 사라진다. */
+@keyframes splash-logo {
+  0%   { opacity: 0; transform: scale(0.92); }
+  18%  { opacity: 1; transform: scale(1); }
+  75%  { opacity: 1; transform: scale(1); }
+  100% { opacity: 0; transform: scale(1.04); }
+}
+
+.splash-logo {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-pureWhite);
+  z-index: var(--z-modal, 1000);
+}
+
+.splash-logo__image {
+  height: var(--splash-logo-height, 80px);
+  width: auto;
+  animation: splash-logo var(--splash-logo-duration, 3000ms)
+    cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/* 움직임을 줄이도록 설정한 사용자에게는 크기 변화 없이 머물다 사라지게 한다 */
+@media (prefers-reduced-motion: reduce) {
+  .splash-logo__image {
+    animation: none;
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,35 @@
+import './SplashLogo.css';
+/** @public */
+export interface SplashLogoProps {
+    /** 로고 이미지 URL */
+    logo: string;
+    /** 로고 대체 텍스트 — 제품 이름을 넣는다 */
+    alt: string;
+    /** 연출이 끝났을 때. 이 시점에 화면을 걷어내면 된다. */
+    onDone?: () => void;
+    /**
+     * 연출 길이(ms). CSS 애니메이션과 같은 값을 쓰므로 여기만 바꾸면 된다.
+     * @defaultValue 3000
+     */
+    durationMs?: number;
+}
+/**
+ * 앱에 처음 들어올 때 로고를 한 번 보여 주는 연출.
+ *
+ * 로고가 살짝 커지며 나타나 잠시 머물다, 조금 더 커지며 사라진다.
+ * 감싸는 쪽에 `position: relative`가 있어야 화면을 덮는다.
+ *
+ * 소리방향성 검사 플로우(app/FlowUX)가 쓰던 연출을 컴포넌트로 뺐다 — 그쪽은
+ * speechear 전용 영역이라 다른 제품에서 가져다 쓸 수 없었다. 크기와 길이는
+ * `--splash-logo-height`, `--splash-logo-duration`으로 조정한다.
+ *
+ * @example
+ * ```tsx
+ * {showSplash && (
+ *   <SplashLogo logo={logoUrl} alt="APEB" onDone={() => setShowSplash(false)} />
+ * )}
+ * ```
+ *
+ * @public
+ */
+export default function SplashLogo({ logo, alt, onDone, durationMs, }: SplashLogoProps): import("react").JSX.Element;

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

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import './SplashLogo.css';
+/**
+ * 앱에 처음 들어올 때 로고를 한 번 보여 주는 연출.
+ *
+ * 로고가 살짝 커지며 나타나 잠시 머물다, 조금 더 커지며 사라진다.
+ * 감싸는 쪽에 `position: relative`가 있어야 화면을 덮는다.
+ *
+ * 소리방향성 검사 플로우(app/FlowUX)가 쓰던 연출을 컴포넌트로 뺐다 — 그쪽은
+ * speechear 전용 영역이라 다른 제품에서 가져다 쓸 수 없었다. 크기와 길이는
+ * `--splash-logo-height`, `--splash-logo-duration`으로 조정한다.
+ *
+ * @example
+ * ```tsx
+ * {showSplash && (
+ *   <SplashLogo logo={logoUrl} alt="APEB" onDone={() => setShowSplash(false)} />
+ * )}
+ * ```
+ *
+ * @public
+ */
+export default function SplashLogo({ logo, alt, onDone, durationMs = 3000, }) {
+    useEffect(() => {
+        if (!onDone)
+            return;
+        const timer = setTimeout(onDone, durationMs);
+        return () => clearTimeout(timer);
+    }, [onDone, durationMs]);
+    return (_jsx("div", { className: "splash-logo", style: { ['--splash-logo-duration']: `${durationMs}ms` }, "aria-hidden": "true", children: _jsx("img", { src: logo, alt: alt, className: "splash-logo__image" }) }));
+}

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

@@ -0,0 +1,83 @@
+/* StatChart — 순수 카운트 스탯 카드 (제목+아이콘, 큰 숫자+증감) */
+.manager-stat-card {
+  container-type: inline-size;
+  background: var(--color-white);
+  border-radius: var(--radius-m);
+  padding: 20px;
+  box-shadow: var(--shadow-card);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  justify-content: flex-start;
+  /* 그리드/flex 컨테이너에서 텍스트가 세로 한 글자씩 줄바꿈되지 않도록 최소 폭 확보 */
+  min-width: 160px;
+}
+.manager-stat-card--clickable {
+  cursor: pointer;
+  transition: box-shadow 120ms ease, border-color 120ms ease;
+  border: 1px solid transparent;
+}
+.manager-stat-card--clickable:hover {
+  border-color: var(--color-main);
+  box-shadow: var(--shadow-dropdown);
+}
+
+.manager-stat-card__label-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 28px;
+}
+.manager-stat-card__label {
+  color: var(--color-deepGray);
+}
+.manager-stat-card__icon {
+  opacity: 0.35;
+  display: inline-flex;
+}
+.manager-stat-card__icon-inner {
+  width: 22px;
+  height: 22px;
+  color: var(--color-darkGray);
+}
+.manager-stat-card__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+  flex: 1;
+  justify-content: space-between;
+}
+.manager-stat-card__left {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1;
+  text-align: left;
+}
+.manager-stat-card__value {
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--color-black);
+  line-height: 1;
+  letter-spacing: -0.5px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+/* 값 우측 상단에 배지처럼 붙어 증감 유무와 무관하게 카드 높이가 일정하게 유지되도록 함 */
+.manager-stat-card__change {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.2;
+  margin-top: 1px;
+  min-width: 0;
+}
+.manager-stat-card__change--up { color: var(--color-sub); }
+.manager-stat-card__change--down { color: var(--color-error); }
+.manager-stat-card__change--neutral { color: var(--color-gray); }
+
+@media (max-width: 767px) {
+  .manager-stat-card { padding: 12px 14px 16px; }
+  .manager-stat-card__value { font-size: 24px; }
+}

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

@@ -0,0 +1,26 @@
+import './StatChart.css';
+/** @public */
+export type StatChartChangeType = 'up' | 'down' | 'neutral';
+/** @public */
+export interface StatChartProps {
+    /** 카드 제목(좌상단) */
+    label: string;
+    /** 큰 숫자/값 */
+    value: string | number;
+    /** 값 옆에 표시할 증감 수치 — 부호(+/-)는 자동으로 붙는다(예: 3 → "+3", -2 → "-2") */
+    change?: number;
+    /** 증감 색상. 미지정 시 change의 부호로 자동 결정(양수=up, 음수=down, 0=neutral) */
+    changeType?: StatChartChangeType;
+    /** 제목 옆 아이콘(옅게 표시) */
+    icon?: string;
+    /** 호버 시 표시할 툴팁 텍스트 */
+    tooltip?: string;
+    onClick?: () => void;
+}
+/**
+ * 순수 카운트 스탯 카드 — 제목+아이콘, 큰 숫자, 증감(선택) 만 보여준다.
+ * 도넛/리스트처럼 숫자 하나로 요약되지 않는 카드는 이 컴포넌트의 대상이 아니다
+ * (도넛 breakdown은 RingChart segments 모드, 리스트는 페이지에서 직접 구성).
+ * @public
+ */
+export default function StatChart({ label, value, change, changeType, icon, tooltip, onClick }: StatChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './StatChart.css';
+import { useRef, useCallback } from 'react';
+import { useHoverAnchor } from '../hooks/useHoverAnchor';
+import Icon from './Icon';
+import TooltipInfo from './Tooltip/InfoTooltip';
+/**
+ * 순수 카운트 스탯 카드 — 제목+아이콘, 큰 숫자, 증감(선택) 만 보여준다.
+ * 도넛/리스트처럼 숫자 하나로 요약되지 않는 카드는 이 컴포넌트의 대상이 아니다
+ * (도넛 breakdown은 RingChart segments 모드, 리스트는 페이지에서 직접 구성).
+ * @public
+ */
+export default function StatChart({ label, value, change, changeType, icon, tooltip, onClick }) {
+    const cardRef = useRef(null);
+    /* 앵커 상태는 공용 훅이 갖는다 — ManagerPage 의 VisitListCard 가 같은 것을 손으로
+       한 벌 더 적고 있었다. 여는 조건(tooltip 이 있을 때만)만 여기 남긴다. */
+    const { anchorRect, openAt, close: handleAnchorLeave } = useHoverAnchor();
+    const handleAnchorEnter = useCallback(() => { if (tooltip && cardRef.current)
+        openAt(cardRef.current); }, [tooltip, openAt]);
+    const resolvedChangeType = changeType ?? (change === undefined ? undefined : change > 0 ? 'up' : change < 0 ? 'down' : 'neutral');
+    const changeText = change === undefined ? undefined : change > 0 ? `+${change}` : `${change}`;
+    const handleKeyDown = useCallback((e) => {
+        if (!onClick)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick();
+        }
+    }, [onClick]);
+    return (_jsxs("div", { ref: cardRef, className: `manager-stat-card${onClick ? ' manager-stat-card--clickable' : ''}`, onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, onPointerEnter: handleAnchorEnter, onPointerLeave: handleAnchorLeave, 
+        // hover 전용이면 키보드로는 툴팁 내용을 볼 수 없다(ManagerPage와 동일 처리)
+        onFocus: handleAnchorEnter, onBlur: handleAnchorLeave, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? `${label} ${value}` : undefined, children: [tooltip && anchorRect && (_jsx(TooltipInfo, { anchorRect: {
+                    left: anchorRect.left,
+                    top: anchorRect.top + 21,
+                    right: anchorRect.right,
+                    bottom: anchorRect.bottom,
+                    width: anchorRect.width,
+                    height: anchorRect.height,
+                }, text: tooltip })), _jsxs("div", { className: "manager-stat-card__label-row", children: [_jsx("span", { className: "manager-stat-card__label h5", children: label }), icon && (_jsx("span", { className: "manager-stat-card__icon", children: _jsx(Icon, { icon: icon, className: "manager-stat-card__icon-inner" }) }))] }), _jsx("div", { className: "manager-stat-card__content", children: _jsxs("div", { className: "manager-stat-card__left", children: [_jsx("div", { className: "manager-stat-card__value h2", children: value }), changeText && (_jsx("div", { className: `manager-stat-card__change manager-stat-card__change--${resolvedChangeType ?? 'neutral'} caption-1`, children: changeText }))] }) })] }));
+}

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

@@ -0,0 +1,158 @@
+.table-wrap { overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--color-whiteLine); background: var(--color-white); }
+.table { width: 100%; }
+
+/* 그룹 헤더 — title prop 지정 시 렌더 [제목, 갯수, 접기/펼치기, 액션]
+   높이는 size 스케일을 따름(table-fields, table-row와 동일) */
+.table-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 0 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--color-whiteLine);
+  text-align: left;
+}
+
+.table-header[role="button"] {
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.table-header[role="button"]:hover {
+  background: var(--color-darkWhite);
+}
+
+.table-header__chevron {
+  display: flex;
+  align-items: center;
+  color: var(--color-gray);
+  flex-shrink: 0;
+}
+
+.table-header__title {
+  color: var(--color-darkGray);
+}
+
+.table-header__count {
+  color: var(--color-main);
+  flex-shrink: 0;
+}
+
+.table-header__actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.table-header__action-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-gray);
+  padding: 2px 6px;
+  border-radius: 4px;
+  line-height: 1;
+  transition: background 0.12s, color 0.12s;
+}
+
+.table-header__action-button:hover {
+  background: var(--color-darkWhite);
+  color: var(--color-main);
+}
+
+.table-header__action-button--delete:hover {
+  background: var(--color-error-bg, #ffeef0);
+  color: var(--color-error, #e03131);
+}
+
+/* 접힌 상태 — 헤더 border-bottom이 wrap 테두리와 겹쳐 두꺼워 보이는 것 방지 */
+.table-wrap--collapsed .table-header {
+  border-bottom: none;
+}
+
+/* 드래그 오버 강조 */
+.table-wrap--dragover {
+  outline: 2px dashed var(--color-main);
+  outline-offset: -2px;
+}
+
+.table-wrap--dragover .table-header {
+  background: var(--color-darkWhite);
+}
+
+/* 필드 라벨 행 — 정렬 클릭 가능한 컬럼 헤더. 높이는 size 스케일을 따름 */
+.table-fields {
+  display: grid;
+  grid-template-columns: var(--table-grid-cols, repeat(auto-fit, minmax(80px, 1fr)));
+  border-bottom: 1px solid var(--color-whiteLine);
+}
+
+.table-body { display: flex; flex-direction: column; }
+
+.table-row-wrap {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--color-darkWhite);
+}
+.table-row-wrap:last-child { border-bottom: none; }
+
+.table-row {
+  display: grid;
+  grid-template-columns: var(--table-grid-cols, repeat(auto-fit, minmax(80px, 1fr)));
+}
+
+.table-row-expand {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 16px 20px;
+  background: var(--color-darkWhite);
+  border-top: 1px solid var(--color-whiteLine);
+}
+
+/* 높이 스케일 — Panel과 공유. header·fields·row 모두 적용. small 48 / medium 56 / large 64 */
+.table-wrap--small  .table-header,
+.table-wrap--small  .table-fields,
+.table-wrap--small  .table-row { min-height: 48px; }
+.table-wrap--medium .table-header,
+.table-wrap--medium .table-fields,
+.table-wrap--medium .table-row { min-height: 56px; }
+.table-wrap--large  .table-header,
+.table-wrap--large  .table-fields,
+.table-wrap--large  .table-row { min-height: 64px; }
+
+/* 그룹 헤더 행(headerGroups)은 라벨만 담으므로 필드 행 높이(48/56/64)를 다
+   쓰지 않아도 된다 — 낮춰 2줄 머리행이 과하게 높아 보이지 않게 한다. */
+.table-fields.table-fields--groups { min-height: 34px; }
+
+.table-row--clickable {
+  cursor: pointer;
+  transition: background 0.1s, box-shadow 0.1s;
+}
+.table-row--clickable:hover {
+  background: var(--color-darkWhite);
+}
+
+.table-row--draggable { cursor: grab; }
+.table-row--draggable:active { cursor: grabbing; }
+.table-row--dragging { opacity: 0.4; }
+
+.table-row--loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.table-row--empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 20px;
+  color: var(--color-lightGray);
+}
+.table-wrap--small .table-row--empty  { min-height: 48px; }
+.table-wrap--medium .table-row--empty { min-height: 56px; }
+.table-wrap--large .table-row--empty  { min-height: 64px; }

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

@@ -0,0 +1,94 @@
+import './Table.css';
+import './TableCell.css';
+import './TableField.css';
+import type { ReactNode, CSSProperties, MouseEvent, DragEvent } from 'react';
+/** @public */
+export type TableFieldDef = {
+    label?: ReactNode;
+    onClick?: (ev?: unknown) => void;
+    className?: string;
+    sortDir?: 'asc' | 'desc' | null;
+    /** 테이블 전체가 resizable이어도 이 컬럼만 폭 조절을 끄고 싶을 때(예: 체크박스 컬럼) false로 지정 */
+    resizable?: boolean;
+};
+/**
+ * 필드(하위 컬럼) 위에 얹는 그룹 헤더 한 칸.
+ * @public
+ */
+export type TableHeaderGroup = {
+    /** 그룹 라벨 */
+    label?: ReactNode;
+    /** 이 그룹이 덮는 하위 컬럼(field) 개수 */
+    span: number;
+    className?: string;
+};
+/** @public */
+export type TableProps<T extends {
+    id?: string | number;
+}> = {
+    fields?: TableFieldDef[];
+    /**
+     * 필드 위에 얹는 그룹 헤더 행. 각 그룹이 span 개의 하위 컬럼을 덮는다
+     * (예: L·R 두 컬럼 위에 "AFG(8dB)"). 지정하면 필드 행 위에 한 줄이 더 생기며,
+     * span 합계가 fields 개수와 같아야 열이 맞는다.
+     */
+    headerGroups?: TableHeaderGroup[];
+    items?: T[];
+    renderRow: (item: T) => Array<{
+        content: ReactNode;
+        className?: string;
+        style?: CSSProperties;
+    }>;
+    onRowClick?: (item: T) => void;
+    onRowMouseEnter?: (item: T, event: MouseEvent<HTMLDivElement>) => void;
+    onRowMouseLeave?: (item: T, event: MouseEvent<HTMLDivElement>) => void;
+    onRowDragStart?: (item: T, event: DragEvent<HTMLDivElement>) => void;
+    onRowDragEnd?: (item: T, event: DragEvent<HTMLDivElement>) => void;
+    draggingId?: string | number | null;
+    gridTemplateColumns?: string;
+    /** true면 헤더 경계선을 드래그해 컬럼 폭 조절 가능 */
+    resizable?: boolean;
+    /**
+     * 폭 조절 방식. 기본 'grow'.
+     *
+     * - `grow` : 끈 만큼 그 컬럼이 넓어진다. 표가 컨테이너보다 넓어지면 가로 스크롤이 생기고,
+     *   그때 표 제목과 머리행까지 함께 밀려난다(스크롤은 .table-wrap 전체에 걸린다).
+     * - `fit`  : 넓힌 만큼 오른쪽 이웃 컬럼이 줄어 표 전체 폭이 그대로다 — 가로 스크롤이 없다.
+     *   폭을 px가 아니라 비율(fr)로 들고 있어 창 크기가 바뀌어도, 저장한 값을 다른 화면에서
+     *   복원해도 늘 컨테이너에 맞는다.
+     *
+     * 열이 많아 어차피 스크롤을 두고 보는 표는 'grow'가, 한 화면에서 훑는 표는 'fit'이 맞다.
+     */
+    resizeMode?: 'grow' | 'fit';
+    /** 지정하면 조절한 컬럼 폭을 이 키로 localStorage에 저장·복원 */
+    resizeStorageKey?: string;
+    /** 높이 스케일 — Panel과 공유 (small 48 / medium 56 / large 64). header·row 모두 적용. 기본 small */
+    size?: 'small' | 'medium' | 'large';
+    /** 테이블 상단 그룹 헤더 제목. 지정하면 .table-header 영역이 렌더됩니다. */
+    title?: ReactNode;
+    /** 제목 옆 항목 갯수 표시 */
+    count?: number;
+    /** 접힘 상태 — true면 필드/행 영역을 숨김. onToggleCollapse와 함께 사용 */
+    collapsed?: boolean;
+    /** 헤더 클릭 시 접기/펼치기 토글 콜백. 지정하면 chevron 표시 */
+    onToggleCollapse?: () => void;
+    /** 헤더 우측 액션 버튼들 (클릭이 토글로 전파되지 않음) */
+    headerActions?: ReactNode;
+    /** 행이 없을 때 body 영역에 표시할 콘텐츠 */
+    empty?: ReactNode;
+    /** true면 rows/empty 대신 스피너 표시 (fields 헤더도 숨김) */
+    loading?: boolean;
+    /** 드래그 오버 강조 */
+    dragOver?: boolean;
+    onDragOver?: (e: DragEvent<HTMLDivElement>) => void;
+    onDragLeave?: (e: DragEvent<HTMLDivElement>) => void;
+    onDrop?: (e: DragEvent<HTMLDivElement>) => void;
+    /** 펼쳐진 행에 렌더할 콘텐츠. expandedId와 함께 사용 */
+    renderExpandedRow?: (item: T) => ReactNode;
+    /** 현재 펼쳐진 행의 id */
+    expandedId?: string | number | Set<string | number> | null;
+};
+/** @public */
+export default function Table<T extends {
+    id?: string | number;
+}>({ fields, headerGroups, items, renderRow, onRowClick, onRowMouseEnter, onRowMouseLeave, onRowDragStart, onRowDragEnd, draggingId, gridTemplateColumns, resizable, resizeMode, resizeStorageKey, size, title, count, collapsed, onToggleCollapse, headerActions, empty, loading, dragOver, onDragOver, onDragLeave, onDrop, renderExpandedRow, expandedId, }: TableProps<T>): import("react").JSX.Element;