@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Icon from './Icon';
+import './Avatar.css';
+const ICON_SIZE = { xs: 12, sm: 16, md: 20, lg: 28, xl: 36 };
+function getInitials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return '';
+    // 코드유닛(slice/인덱싱) 대신 코드포인트([...str]) 단위로 잘라야, 이름에 이모지(서로게이트
+    // 쌍)가 들어있을 때 절반만 잘려 깨진 문자가 렌더링되는 것을 막을 수 있다
+    if (parts.length === 1)
+        return [...parts[0]].slice(0, 2).join('').toUpperCase();
+    return ([...parts[0]][0] + [...parts[parts.length - 1]][0]).toUpperCase();
+}
+/**
+ * 사용자 아바타 — src 이미지가 있으면 이미지를, 로드 실패/미지정 시
+ * name에서 파생한 initials를, 그마저 없으면 일반 사용자 아이콘을 보여준다.
+ * @public
+ */
+export default function Avatar({ src, name, size = 'md', shape = 'circle', className = '' }) {
+    const { t } = useTranslation();
+    const [imgFailed, setImgFailed] = useState(false);
+    const initials = name ? getInitials(name) : '';
+    const showImage = !!src && !imgFailed;
+    const showInitials = !showImage && !!initials;
+    const label = name || t('avatar.ariaLabel', '사용자 아바타');
+    return (_jsxs("span", { className: `avatar avatar--${size} avatar--${shape} ${className}`.trim(), role: "img", "aria-label": label, children: [showImage && (_jsx("img", { className: "avatar__image", src: src, alt: label, onError: () => setImgFailed(true) })), !showImage && showInitials && (_jsx("span", { className: "avatar__initials", "aria-hidden": "true", children: initials })), !showImage && !showInitials && (_jsx(Icon, { icon: "user-round", size: ICON_SIZE[size], className: "avatar__icon" }))] }));
+}

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

@@ -0,0 +1,166 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: 999px;
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: middle;
+  /* filled (default) */
+  background: var(--badge-color, var(--color-main));
+  color: var(--badge-on-color, #ffffff);
+  box-shadow: var(--badge-shadow, none);
+}
+
+/* sizes */
+.badge--small  { padding: 0 10px; height: 20px; font-size: 12px; }
+.badge--medium { padding: 0 14px; height: 28px; font-size: 14px; }
+.badge--large  { padding: 0 18px; height: 32px; font-size: 16px; }
+
+/* icon wrapper inside badge */
+.badge__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ── variants — define color tokens only ── */
+.badge--default {
+  --badge-color: var(--color-lightGray);
+  --badge-on-color: #ffffff;
+}
+.badge--main {
+  --badge-color: var(--color-main);
+  --badge-on-color: #ffffff;
+}
+.badge--sub {
+  --badge-color: var(--color-sub);
+  --badge-on-color: #ffffff;
+}
+.badge--danger {
+  --badge-color: var(--color-error);
+  --badge-on-color: #ffffff;
+}
+.badge--disabled {
+  --badge-color: var(--color-disabled);
+  --badge-on-color: #ffffff;
+}
+.badge--like {
+  --badge-color: var(--color-like);
+  --badge-on-color: #ffffff;
+}
+.badge--success {
+  --badge-color: var(--color-success);
+  --badge-on-color: #ffffff;
+}
+.badge--warning {
+  --badge-color: var(--color-warn);
+  --badge-on-color: #ffffff;
+}
+/* 보안 이벤트 심각도 최상급(critical) 전용 */
+.badge--critical {
+  --badge-color: #7c3aed;
+  --badge-on-color: #ffffff;
+}
+
+/* ── outline — transparent bg, variant color border + text ── */
+.badge--outline {
+  background: transparent;
+  color: var(--badge-color);
+  border: 1px solid var(--badge-color);
+  box-shadow: none;
+}
+
+/* ── soft — variant color text + 20% tinted bg ── */
+.badge--soft {
+  background: color-mix(in srgb, var(--badge-color) 10%, transparent);
+  color: var(--badge-color);
+  box-shadow: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   Dot Badge (type="dot") — 원형 아이콘/숫자 뱃지
+   부모 요소에 position: relative 필요
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.circle-badge {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;          /* flex 컨테이너(표 셀 등)에서 눌려 찌그러지지 않도록 */
+  border-radius: 50%;
+  border: 2px solid var(--color-pureWhite);
+  box-sizing: border-box;
+  line-height: 1;
+  font-weight: 700;
+  pointer-events: none;
+  user-select: none;
+  transition: background 0.12s, transform 0.12s;
+  z-index: 1;
+}
+
+/* 등장 애니메이션 (animate) — 선택 순간 '톡' 튀어나오게. 살짝 오버슈트했다가 제자리로.
+   접근성: 모션 최소화를 켠 사용자에게는 페이드만 남긴다. */
+@keyframes circle-badge-pop {
+  0%   { transform: scale(0.3); opacity: 0; }
+  60%  { transform: scale(1.12); opacity: 1; }
+  100% { transform: scale(1);   opacity: 1; }
+}
+.circle-badge--animate {
+  animation: circle-badge-pop 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .circle-badge--animate { animation: none; }
+}
+
+/* clickable */
+.circle-badge--clickable {
+  pointer-events: auto;
+  cursor: pointer;
+}
+.circle-badge--clickable:hover {
+  transform: scale(1.12);
+}
+
+/* ── 위치 ── */
+.circle-badge--top-right {
+  top: -6px;
+  right: -6px;
+}
+.circle-badge--top-left {
+  top: -6px;
+  left: -6px;
+}
+/* 인라인(불릿·단계 번호) — absolute 해제, 흐름 안에 배치. 오버레이용 흰 테두리 제거 */
+.circle-badge--inline {
+  position: static;
+  border: none;
+}
+
+/* ── 크기 ── Button과 같은 숫자 스케일(size={24|32|40})
+   흰 테두리(top-right 오버레이용) 두께도 크기에 맞춰 조정한다 — 작은 배지(24)는 1px. */
+.circle-badge--24 { width: 24px; height: 24px; font-size: 11px; border-width: 1px; }
+.circle-badge--32 { width: 32px; height: 32px; font-size: 14px; border-width: 2px; }
+.circle-badge--40 { width: 40px; height: 40px; font-size: 16px; border-width: 2px; }
+
+/* ── 아이콘별 색상 ── */
+.circle-badge--check,
+.circle-badge--number {
+  background: var(--color-main);
+  color: #ffffff;
+}
+.circle-badge--remove {
+  background: var(--color-error);
+  color: #ffffff;
+}
+.circle-badge--minus {
+  background: var(--color-lightGray);
+  color: #ffffff;
+}
+
+/* ── svg 크기 ── */
+.circle-badge--24 svg { width: 11px; height: 11px; }
+.circle-badge--32 svg { width: 15px; height: 15px; }
+.circle-badge--40 svg { width: 19px; height: 19px; }

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

@@ -0,0 +1,82 @@
+import { type ReactNode, type MouseEvent } from 'react';
+import './Badge.css';
+/** @public */
+export type BadgeType = 'bar' | 'dot';
+/** @public */
+export type BadgeFill = 'filled' | 'outline' | 'soft';
+/** @public */
+export type BadgeDotIcon = 'check' | 'remove' | 'minus';
+/** @public @deprecated Use BadgeDotIcon */
+export type CircleBadgeType = 'check' | 'remove' | 'minus' | 'number';
+/** dot(CircleBadge) 크기 — Button과 동일한 숫자 스케일 @public */
+export type BadgeDotSize = 24 | 32 | 40;
+/** @public */
+export interface BadgeProps {
+    /**
+     * 뱃지 스타일 구분
+     * - `bar`  — 텍스트 레이블 뱃지 (기본값)
+     * - `dot`  — 원형 아이콘/숫자 뱃지 (부모 기준 absolute 배치)
+     */
+    type?: BadgeType;
+    /**
+     * 크기.
+     * - dot(CircleBadge) — Button과 같은 숫자 스케일 `24 | 32 | 40`. 기본값 32.
+     * - bar — `'small' | 'medium' | 'large'`. 기본값 'medium'.
+     *
+     * (dot에 문자열을, bar에 숫자를 넘기면 각자의 기본값으로 렌더된다.)
+     */
+    size?: 'small' | 'medium' | 'large' | BadgeDotSize;
+    className?: string;
+    'aria-label'?: string;
+    label?: string;
+    children?: ReactNode;
+    /**
+     * 색상 variant (bar 전용)
+     * default / main / sub / danger / disabled / like
+     */
+    variant?: string;
+    /**
+     * 채우기 스타일 (bar 전용). 기본값 'filled'
+     * - `filled`  — 배경색으로 채움
+     * - `outline` — 테두리만
+     * - `soft`    — 연한 배경
+     */
+    fill?: BadgeFill;
+    /**
+     * 색 직접 지정 (bar 전용) — variant가 정하는 색을 덮는다.
+     * 토큰 이름('--color-sub')이나 CSS 색('#d97706') 둘 다 받는다.
+     * variant 목록에 없는 색이 필요할 때 쓴다(예: 알림 카테고리별 색).
+     */
+    color?: string;
+    minWidth?: number | string;
+    /** 좌측 아이콘 (bar 전용). Lucide 아이콘 이름 또는 ReactNode */
+    iconLeft?: ReactNode | string;
+    /** 우측 아이콘 (bar 전용). Lucide 아이콘 이름 또는 ReactNode */
+    iconRight?: ReactNode | string;
+    /**
+     * 아이콘 종류 (dot 전용)
+     * - `check`  — 선택/완료 (파란 체크)
+     * - `remove` — 제거 (빨간 ×)
+     * - `minus`  — 비활성/제외 (회색 —)
+     */
+    icon?: BadgeDotIcon;
+    /** 표시할 숫자 (dot 전용, icon 대신 숫자 표시) */
+    number?: number;
+    /**
+     * 배치 위치 (dot 전용). 기본값 'top-right'
+     * - `top-right` / `top-left` — 부모 모서리에 absolute 오버레이
+     * - `inline` — 흐름 안에 배치(불릿·단계 번호 등). position: static
+     */
+    position?: 'top-right' | 'top-left' | 'inline';
+    /** 클릭 핸들러 (dot 전용) — 설정 시 pointer-events 활성화 */
+    onClick?: (e: MouseEvent) => void;
+    /**
+     * 등장 애니메이션 (dot 전용). 기본값 false.
+     * 선택·완료처럼 뱃지가 '그 순간' 나타나는 자리에서 켜면 톡 튀어나오는 효과가 붙는다.
+     * 목록처럼 처음부터 떠 있는 뱃지에는 끄는 편이 낫다(로드 때마다 다 같이 튄다).
+     * 모션 최소화 설정(prefers-reduced-motion)에서는 자동으로 비활성화된다.
+     */
+    animate?: boolean;
+}
+/** @public */
+export default function Badge(props: BadgeProps): import("react").JSX.Element;

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import Icon from './Icon';
+import './Badge.css';
+// ── 내부 아이콘 ────────────────────────────────────────────────────────────
+function CheckIcon() {
+    return (_jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "2,6 5,9 10,3" }) }));
+}
+function RemoveIcon() {
+    return (_jsxs("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "3", y1: "3", x2: "9", y2: "9" }), _jsx("line", { x1: "9", y1: "3", x2: "3", y2: "9" })] }));
+}
+function MinusIcon() {
+    return (_jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", "aria-hidden": "true", children: _jsx("line", { x1: "2.5", y1: "6", x2: "9.5", y2: "6" }) }));
+}
+// ── 컴포넌트 ───────────────────────────────────────────────────────────────
+/** @public */
+export default function Badge(props) {
+    const { type = 'bar', size, className = '', 'aria-label': ariaLabel, } = props;
+    // ── dot (원형) ──────────────────────────────────────────────────────────
+    if (type === 'dot') {
+        const { icon, number, position = 'top-right', onClick, animate = false } = props;
+        const dotVariant = number !== undefined ? 'number' : icon ?? 'check';
+        // dot 크기는 Button과 같은 숫자 스케일 — 문자열이 오면 기본값(32)으로 떨어뜨린다.
+        const dotSize = typeof size === 'number' ? size : 32;
+        const cls = cx('circle-badge', `circle-badge--${dotVariant}`, `circle-badge--${position}`, `circle-badge--${dotSize}`, animate ? 'circle-badge--animate' : '', onClick ? 'circle-badge--clickable' : '', className);
+        const defaultLabel = number !== undefined
+            ? `${number}번째 선택`
+            : { check: '선택됨', remove: '제거', minus: '제외' }[icon ?? 'check'];
+        return (_jsxs("span", { className: cls, onClick: onClick, 
+            /* `<span role="button">` 은 브라우저가 Enter·Space 를 눌림으로 바꿔 주지 않는다.
+               tabIndex 만 있으면 키보드 사용자는 **그 자리에 멈추고도 아무것도 못 한다** —
+               닿기만 하고 눌리지 않는 편이 아예 못 닿는 것보다 나쁘다(2026-08-28).
+               Space 의 기본 동작(페이지 스크롤)도 막는다(Accordion 과 같은 처리). */
+            onKeyDown: onClick ? (e) => {
+                if (e.key !== 'Enter' && e.key !== ' ')
+                    return;
+                /* onClick 이 MouseEvent 를 받으므로 가짜로 만들지 않고 **DOM 이 진짜 클릭을
+                   내게** 한다 — 그래야 이벤트의 target·currentTarget 도 실제와 같다. */
+                e.preventDefault();
+                e.currentTarget.click();
+            } : undefined, "aria-label": ariaLabel ?? defaultLabel, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [number !== undefined && number, number === undefined && icon === 'check' && _jsx(CheckIcon, {}), number === undefined && icon === 'remove' && _jsx(RemoveIcon, {}), number === undefined && icon === 'minus' && _jsx(MinusIcon, {})] }));
+    }
+    // ── bar (텍스트) ────────────────────────────────────────────────────────
+    const { label, children, variant = 'default', fill = 'filled', minWidth, iconLeft, iconRight, color } = props;
+    // bar는 문자열 크기만 쓴다 — dot용 숫자가 들어오면 기본값(medium)으로 떨어뜨린다.
+    const barSize = typeof size === 'number' ? 'medium' : size ?? 'medium';
+    // medium·large는 볼드 계열(b) — 배지는 짧은 라벨이라 본문보다 또렷해야 눈에 잡힌다
+    const sizeFont = { small: 'caption-2b', medium: 'body-3b', large: 'body-2b' }[barSize] ?? 'body-2b';
+    const iconSize = { small: 12, medium: 14, large: 16 }[barSize] ?? 14;
+    const cls = cx('badge', `badge--${variant}`, `badge--${barSize}`, fill !== 'filled' ? `badge--${fill}` : '', sizeFont, className);
+    // color는 variant가 정하는 --badge-color를 덮는다. 토큰 이름('--color-main')을 주면
+    // var()로 감싸 준다(Button의 color prop과 같은 규칙). filled/soft/outline 모두
+    // 이 변수 하나만 보므로 fill과 조합이 자유롭다.
+    const resolvedColor = color?.startsWith('--') ? `var(${color})` : color;
+    const style = (minWidth !== undefined || resolvedColor)
+        ? {
+            ...(minWidth !== undefined ? { minWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth } : {}),
+            ...(resolvedColor ? { '--badge-color': resolvedColor } : {}),
+        }
+        : undefined;
+    return (_jsxs("span", { className: cls, style: style, children: [iconLeft && _jsx(Icon, { icon: iconLeft, size: iconSize, className: "badge__icon" }), label ?? children, iconRight && _jsx(Icon, { icon: iconRight, size: iconSize, className: "badge__icon" })] }));
+}

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

@@ -0,0 +1,142 @@
+/* BarChart — 막대차트 섹션 (제목 + 구간 네비 + 주/일 토글 + 2계열 막대) */
+/* 카드/헤더/total/legend 공통 레이아웃은 ChartSection.css 로 이동(RingChart 섹션과 공유) */
+
+/* 월/주 드롭다운 고정 너비 (주: 'YYYY년 M월 N째주' 수용) */
+.month-dropdown .dropdown__trigger {
+  width: 200px;
+  min-width: 200px;
+  max-width: 200px;
+}
+
+/* 월 드롭다운 스크롤 */
+.month-dropdown .dropdown__menu {
+  max-height: 280px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-darkWhite) transparent;
+}
+.month-dropdown .dropdown__menu::-webkit-scrollbar { width: 4px; }
+.month-dropdown .dropdown__menu::-webkit-scrollbar-thumb {
+  background: var(--color-darkWhite);
+  border-radius: var(--radius-xs);
+}
+
+/* 바 차트 */
+.manager-bar-chart-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-s);
+}
+.manager-bar-chart-gridline {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--color-darkWhite);
+  pointer-events: none;
+  z-index: -1;
+}
+.manager-bar-chart-gridline__label {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  font-size: 11px;
+  /* lightGray는 라이트 2.25:1 · 다크 2.34:1로 WCAG AA(4.5:1)에 크게 못 미쳤다.
+     한 단계 진한 deepGray로 올려 양 테마 모두 5.3:1 이상을 확보한다. */
+  color: var(--color-deepGray);
+  white-space: nowrap;
+}
+.manager-bar-chart-inner {
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: flex-start;
+}
+.manager-bar-chart-scroll {
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: visible;
+  -webkit-overflow-scrolling: touch;
+  /* 스크롤바 숨김 (공간 차지 방지) */
+  scrollbar-width: none;
+}
+.manager-bar-chart-scroll::-webkit-scrollbar { display: none; }
+
+.manager-bar-chart-area {
+  display: flex;
+  flex-direction: column;
+  /* 주간 5개 + 일간 31개 모두 수용하는 최소 너비 */
+  min-width: max-content;
+}
+.manager-bar-chart-area svg {
+  display: block;
+}
+.manager-bar-chart-x-axis {
+  display: flex;
+  font-size: 11px;
+  /* 눈금 라벨과 같은 이유로 deepGray (AA 미달이던 축 라벨 대비 보정) */
+  color: var(--color-deepGray);
+  padding-top: 6px;
+}
+
+/* 막대 컬럼(flex:1 중앙)과 동일하게 — 막대 중심과 라벨 중심을 수직 정렬.
+   좁을 때 겹침 방지: 메인/서브를 세로 스택 + 줄바꿈 허용 */
+.manager-bar-chart-x-axis__label {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 1px;
+  text-align: center;
+  word-break: keep-all;
+}
+/* 아직 도래하지 않은 날 — 글씨 흐리게 */
+.manager-bar-chart-x-axis__label--future .caption-1 {
+  color: var(--color-whiteLine);
+}
+/* 오늘 날짜 표시 점 — 텍스트 중심 정렬을 흐트러뜨리지 않도록 absolute로 텍스트 왼쪽에 배치 */
+.manager-bar-chart-x-axis__main {
+  position: relative;
+}
+.manager-bar-chart-x-axis__today-dot {
+  position: absolute;
+  right: calc(100% + 3px);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+/* 정적 인라인 style 이전 — 동적 값(height/flex/maxWidth/background/cursor 등)은 그대로 인라인 유지 */
+.manager-bar-chart-plot {
+  display: flex;
+  align-items: flex-end;
+  gap: 0;
+  position: relative;
+  isolation: isolate;
+}
+.manager-bar-chart-col {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  height: 100%;
+  gap: 2px;
+}
+.manager-bar-chart-stack {
+  min-width: 0;
+  display: flex;
+  flex-direction: column-reverse;
+}
+.manager-bar-chart-bar {
+  min-width: 0;
+  border-radius: 6px 6px 0 0;
+}
+.manager-bar-chart-stack-segment {
+  width: 100%;
+}
+.manager-bar-chart-detail-btn {
+  margin-left: auto;
+}

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

@@ -0,0 +1,16 @@
+import './BarChart.css';
+export type { BarData, MonthBarData, ChartPoint } from './barChartData';
+export type { BarChartControl, BarChartProps, BarChartSize } from './barChartTypes';
+import type { BarChartControl } from './barChartTypes';
+/** 기간 컨트롤 UI(이전/다음·월 드롭다운·월/주 토글). Toolbar 등 외부에 배치 가능. @public */
+export declare function BarChartControls({ control }: {
+    control: BarChartControl;
+}): import("react").JSX.Element;
+import type { BarChartProps } from './barChartTypes';
+/**
+ * 막대차트 섹션 — 제목 + 구간 네비게이션(이전/다음 + 드롭다운) + 월/주 토글 + 2계열 막대차트.
+ *  - 월(month): 월 드롭다운 + 주별 막대(1주~5주)
+ *  - 주(week):  'YYYY년 M월 N째주' 드롭다운 + 그 주의 요일(일~토) 막대
+ * 원시 렌더링은 내부 BarChartCanvas가 담당한다.
+ */
+export default function BarChart({ size, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, tightMax, avgMode, totalFormat, series, loading, onDetail, }: BarChartProps): import("react").JSX.Element;