@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,313 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useLayoutEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import i18n from '../../i18n';
+import { toWonSymbol } from '../../utils/format';
+import { derivePassCard, deriveDurationDays } from './passCardProduct';
+import './PassCard.css';
+import Tooltip from '../Tooltip/Tooltip';
+import MenuTooltip from '../Tooltip/MenuTooltip';
+import logoSpeechear from '../../logo/Logo_speechear_kr.svg';
+import logoSpeechear_white from '../../logo/Logo_speechear_kr_white.svg';
+import logoSpeechear_textWhite from '../../logo/Logo_speechear_kr_textWhite.svg';
+import logoSpeechear_black from '../../logo/Logo_speechear_kr_black.svg';
+import logoSpeechearManager from '../../logo/Logo_speechearManager_kr.svg';
+import logoSpeechearManager_white from '../../logo/Logo_speechearManager_kr_white.svg';
+import logoSpeechearManager_textWhite from '../../logo/Logo_speechearManager_kr_textWhite.svg';
+import logoSpeechearManager_black from '../../logo/Logo_speechearManager_kr_black.svg';
+import PassCardBgTwoCircle from './PassCardBgTwoCircle';
+import PassCardBgSoundMove from './PassCardBgSoundMove';
+import PassCardBgSoundMoveV1 from './PassCardBgSoundMoveV1';
+import PassCardBgTalk from './PassCardBgTalk';
+import { getPassCardBgTheme } from './PassCardBgTheme';
+/*
+ * 로고 variant 정적 매핑 — base + color suffix 조합으로 SVG URL을 resolve.
+ * (Vite 전용 import.meta.glob 대신 정적 import — Rollup CJS 빌드 호환)
+ */
+const LOGO_VARIANTS = {
+    Logo_speechear_kr: {
+        '': logoSpeechear,
+        '_white': logoSpeechear_white,
+        '_textWhite': logoSpeechear_textWhite,
+        '_black': logoSpeechear_black,
+    },
+    Logo_speechearManager_kr: {
+        '': logoSpeechearManager,
+        '_white': logoSpeechearManager_white,
+        '_textWhite': logoSpeechearManager_textWhite,
+        '_black': logoSpeechearManager_black,
+    },
+};
+function resolveLogoUrl(base, color) {
+    if (!base)
+        return undefined;
+    return LOGO_VARIANTS[base]?.[color ?? ''] ?? undefined;
+}
+const LOGO = {
+    speechear: logoSpeechear,
+    manager: logoSpeechearManager,
+};
+/** type별 로고 base 파일명 — 색상 variant 접미사와 조합해 실제 파일 결정 */
+const LOGO_BASE = {
+    speechear: 'Logo_speechear_kr',
+    manager: 'Logo_speechearManager_kr',
+};
+const MAX_TILT = 10;
+/**
+ * 초 → 가장 큰 단위 하나만("N일 남음" / "N시간 남음" / "N분 남음" / "N초 남음").
+ * 일이 있으면 일까지만, 없으면 시간까지만, 없으면 분까지만, 없으면 초까지.
+ * 하드코딩된 한국어 단위였던 것을 en 로케일에서도 올바르게 보이도록 t()로 번역.
+ */
+function formatRemaining(seconds, t) {
+    if (seconds <= 0)
+        return t('passCard.remainingSecond', { n: 0 });
+    const days = Math.floor(seconds / 86400);
+    if (days > 0)
+        return t('passCard.remainingDay', { n: days });
+    const hours = Math.floor(seconds / 3600);
+    if (hours > 0)
+        return t('passCard.remainingHour', { n: hours });
+    const minutes = Math.floor(seconds / 60);
+    if (minutes > 0)
+        return t('passCard.remainingMinute', { n: minutes });
+    return t('passCard.remainingSecond', { n: Math.floor(seconds) });
+}
+/**
+ * (type, plan, label) 조합에 따른 기본 PassCardBg 자동 선택.
+ *
+ * | 종류        | 30일       | 30일 오픈특가   | 1년        |
+ * | 말귀        | TwoCircle  | TwoCircle       | TwoCircle  |
+ * | 말귀 매니저 | SoundMove  | SoundMove_v1    | Talk       |
+ *
+ * 말귀(speechear)는 기간/라벨과 무관하게 항상 PassCardBgTwoCircle 고정.
+ * 이 매핑을 변경하면 UsagePage / 다른 사용처도 한 번에 갱신됨.
+ *
+ * NOTE: `_v1` 접미사는 "버전"이 아니라 **오픈특가 전용 화이트 테마 변형**을 뜻한다
+ * (기본형은 라이트 배경/메인색 텍스트, _v1은 컬러 배경/화이트 텍스트 + white 로고).
+ * 중복이 아니므로 단순 병합하면 시각 회귀가 발생한다. 명확성을 위해
+ * `_Special`(또는 variant prop)로의 리네임이 바람직하나 CSS 클래스 계약을 함께
+ * 바꿔야 하므로 별도 작업으로 분리한다.
+ */
+function getDefaultBg(type, plan, label) {
+    if (type === 'manager') {
+        const isYear = /년/.test(plan) || /yr|year/i.test(plan) || /1년|365/.test(plan);
+        const isSpecial = label === '오픈특가' || label === i18n.t('passCard.specialLabel');
+        if (isYear)
+            return _jsx(PassCardBgTalk, {});
+        if (isSpecial)
+            return _jsx(PassCardBgSoundMoveV1, {});
+        return _jsx(PassCardBgSoundMove, {});
+    }
+    // speechear — 기간/라벨과 무관하게 항상 TwoCircle
+    return _jsx(PassCardBgTwoCircle, {});
+}
+/** @public */
+export default function PassCard({ product, showPrice = false, plan, type, endDate, remainingSeconds, state = 'active', bg, bgOnly = false, textColor, subColor, copyrightColor, logoSrc, label, price, originalPrice, discountLabel, onUse, onRefund, onDelete }) {
+    const { t } = useTranslation();
+    // product가 있으면 카드가 표시 속성을 스스로 도출. 명시적 prop이 항상 우선.
+    const d = product ? derivePassCard(product) : undefined;
+    const rType = type ?? d?.type ?? 'speechear';
+    const rPlan = plan ?? d?.plan ?? '이용권';
+    const rLabel = label ?? d?.label;
+    const rPrice = price ?? (showPrice ? d?.price : undefined);
+    const rOriginalPrice = originalPrice ?? (showPrice ? d?.originalPrice : undefined);
+    const rDiscountLabel = discountLabel ?? d?.discountLabel;
+    // 사용량%·남은 시간 — rPrice가 있으면(가격 표시 카드) 그쪽이 우선이라 여긴 안 씀.
+    // 전체 기간을 모르면(product 미지정 등) 표시할 게 없으므로 null.
+    const usageInfo = useMemo(() => {
+        if (rPrice)
+            return null;
+        const totalDays = product?.durationDays ?? deriveDurationDays(product?.code);
+        if (!totalDays || totalDays <= 0)
+            return null;
+        const totalSeconds = totalDays * 86400;
+        let remaining;
+        if (remainingSeconds != null) {
+            remaining = remainingSeconds;
+        }
+        else if ((state === 'active' || state === 'expired') && endDate) {
+            // endDate는 앱 전체에서 날짜만(YYYY-MM-DD, 시:분:초 없음) 저장되는 관례라
+            // new Date(endDate)는 UTC 자정으로 파싱된다 — "지금"과 초 단위로 그냥 빼면
+            // 시간대 차이(KST는 UTC+9)만큼 없는 시:분이 생겨난 것처럼 보인다. 실제로
+            // 갖고 있는 정밀도(하루 단위)만큼만 계산해 자정 기준 날짜 차이로 스냅한다.
+            const end = new Date(endDate).getTime();
+            if (Number.isNaN(end))
+                return null;
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            const endDay = new Date(end);
+            endDay.setHours(0, 0, 0, 0);
+            const days = Math.round((endDay.getTime() - today.getTime()) / 86_400_000);
+            remaining = Math.max(0, days) * 86400;
+        }
+        else if (state === 'expired') {
+            // 만료된 카드인데 기준 날짜 정보가 전혀 없음 — 다 쓴 것으로 간주
+            remaining = 0;
+        }
+        else {
+            // pending인데 remainingSeconds도 없음 = 한 번도 안 쓴 새 이용권 → 전체 기간이 그대로 남음
+            remaining = totalSeconds;
+        }
+        // 남은 사용량 기준(%) — 내림. "정확히 다 채웠을 때만 100%"가 되도록(있지도 않은
+        // 정밀도를 반올림으로 부풀리지 않음). "보유 중"인데 아직 한 번도 안 써서 100%
+        // 그대로면 표시하지 않고 카피라이트 유지(진짜 새 이용권이라는 뜻). active/expired는
+        // 100%든 0%든 항상 표시 — 지금 쓰고 있다는 사실 자체가 정보이므로 숨기면 안 됨.
+        const percent = Math.max(0, Math.min(100, Math.floor((Math.min(remaining, totalSeconds) / totalSeconds) * 100)));
+        if (state === 'pending' && percent >= 100)
+            return null;
+        return { percent, remainingLabel: formatRemaining(remaining, t) };
+    }, [rPrice, state, endDate, remainingSeconds, product?.durationDays, product?.code, t]);
+    const cardRef = useRef(null);
+    const [cardStyle, setCardStyle] = useState({});
+    const [menuAnchor, setMenuAnchor] = useState(null);
+    const hasMenu = !!(onUse || onRefund || onDelete);
+    const isEnteringRef = useRef(false);
+    const enterTimerRef = useRef(undefined);
+    // 테마 레지스트리 기반으로 resolve된 로고 src
+    // prop이 명시적으로 전달된 경우 그것을 우선 사용
+    const [resolvedLogoSrc, setResolvedLogoSrc] = useState(logoSrc);
+    // prop logoSrc 변경 시 즉시 반영하는 의도된 동기화다
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    useLayoutEffect(() => { setResolvedLogoSrc(logoSrc); }, [logoSrc]);
+    // PassCardBg가 useLayoutEffect(child)에서 CSS 변수를 주입한 뒤,
+    // PassCard(parent)의 useLayoutEffect에서 override → 항상 마지막에 적용됨
+    //
+    // ⚠️ prop이 undefined일 때는 절대 removeProperty 하지 않는다.
+    // PassCardBg가 주입한 값을 지워버리기 때문. undefined = "override 안 함".
+    useLayoutEffect(() => {
+        const el = cardRef.current;
+        if (!el)
+            return;
+        if (textColor !== undefined)
+            el.style.setProperty('--pass-card-text', textColor);
+        if (subColor !== undefined)
+            el.style.setProperty('--pass-card-sub', subColor);
+        if (copyrightColor !== undefined)
+            el.style.setProperty('--pass-card-copyright', copyrightColor);
+    }, [textColor, subColor, copyrightColor]);
+    // bg가 바뀔 때마다 레지스트리에서 theme을 읽어 로고 src를 자동 resolve
+    // ⚠️ logoBase는 type으로 결정 (theme.logoBase 무시). theme은 색상 variant만 제공.
+    useLayoutEffect(() => {
+        const el = cardRef.current;
+        if (!el)
+            return;
+        const theme = getPassCardBgTheme(el);
+        if (!logoSrc) {
+            const base = LOGO_BASE[rType];
+            // 만료 카드는 CSS에서 바탕을 흰색으로 통일하므로(.pass-card--expired .pass-card-bg),
+            // 컬러 배경 전제로 고른 흰 로고 variant를 그대로 쓰면 로고가 사라진다.
+            // 브랜드색도 뺀 상태이니 검정 로고로 맞춘다.
+            const variant = state === 'expired' ? '_black' : (theme?.logoColor ?? '');
+            const resolved = resolveLogoUrl(base, variant);
+            setResolvedLogoSrc(resolved);
+        }
+    }, [bg, logoSrc, rType, state]);
+    const calcTilt = (e) => {
+        const card = cardRef.current;
+        if (!card)
+            return null;
+        const { left, top, width, height } = card.getBoundingClientRect();
+        const x = (e.clientX - left) / width - 0.5;
+        const y = (e.clientY - top) / height - 0.5;
+        return { rotateX: -y * MAX_TILT, rotateY: x * MAX_TILT };
+    };
+    const makeShadow = (rotateX, rotateY) => {
+        const sx = rotateY * -0.7;
+        const sy = rotateX * 0.7 + 10;
+        const blur = 20 + (Math.abs(rotateX) + Math.abs(rotateY)) * 0.4;
+        return `${sx}px ${sy}px ${blur}px rgba(0, 0, 0, 0.18)`;
+    };
+    const handleMouseEnter = useCallback((e) => {
+        isEnteringRef.current = true;
+        clearTimeout(enterTimerRef.current);
+        enterTimerRef.current = setTimeout(() => { isEnteringRef.current = false; }, 200);
+        const tilt = calcTilt(e);
+        if (!tilt)
+            return;
+        setCardStyle({
+            transform: `perspective(800px) rotateX(${tilt.rotateX}deg) rotateY(${tilt.rotateY}deg) scale3d(1.03, 1.03, 1.03)`,
+            boxShadow: makeShadow(tilt.rotateX, tilt.rotateY),
+            transition: 'transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s cubic-bezier(0.23, 1, 0.32, 1)',
+        });
+    }, []);
+    const handleMouseMove = useCallback((e) => {
+        const tilt = calcTilt(e);
+        if (!tilt)
+            return;
+        const transition = isEnteringRef.current ? 'transform 0.2s ease, box-shadow 0.2s ease' : 'none';
+        setCardStyle({
+            transform: `perspective(800px) rotateX(${tilt.rotateX}deg) rotateY(${tilt.rotateY}deg) scale3d(1.03, 1.03, 1.03)`,
+            boxShadow: makeShadow(tilt.rotateX, tilt.rotateY),
+            transition,
+        });
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        clearTimeout(enterTimerRef.current);
+        isEnteringRef.current = false;
+        setCardStyle({
+            transform: 'perspective(800px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)',
+            boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.08)',
+            transition: 'transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1)',
+        });
+    }, []);
+    const handleCloseMenu = useCallback(() => setMenuAnchor(null), []);
+    const planDisplay = useMemo(() => {
+        const text = rPlan.replace('이용권', '').trim();
+        const match = text.match(/^(.*?)(일|년)$/);
+        return match
+            ? _jsxs(_Fragment, { children: [_jsx("span", { className: "h0 pass-card__plan-number", children: match[1] }), _jsx("span", { className: "h5b pass-card__plan-unit", children: match[2] === '년' ? t('passCard.unitYear', '년') : t('passCard.unitDay', '일') })] })
+            : _jsx("span", { className: "h0", children: text });
+    }, [rPlan, t]);
+    // 가격 표시 — 통화 기호(₩) / '원' 등은 h5로 작게, 숫자는 h1로 크게
+    const priceDisplay = useMemo(() => {
+        const p = toWonSymbol(rPrice);
+        if (!p)
+            return null;
+        const m = p.match(/^([^\d]*)([\d.,]+)(.*)$/);
+        if (!m)
+            return _jsx("span", { className: "h1", children: p });
+        const [, pre, num, post] = m;
+        return (_jsxs(_Fragment, { children: [pre && _jsx("span", { className: "h5 pass-card__price-symbol", children: pre }), _jsx("span", { className: "h1 pass-card__price-amount", children: num }), post.trim() && _jsx("span", { className: "h5 pass-card__price-symbol", children: post.trim() })] }));
+    }, [rPrice]);
+    const handleCardClick = useCallback(() => {
+        if (!hasMenu)
+            return;
+        setMenuAnchor(prev => {
+            if (prev)
+                return null;
+            const rect = cardRef.current?.getBoundingClientRect();
+            if (!rect)
+                return null;
+            const offset = 50;
+            return {
+                left: rect.left, right: rect.right,
+                width: rect.width, height: rect.height,
+                x: rect.x, y: rect.y + offset,
+                top: rect.top + offset, bottom: rect.bottom + offset,
+            };
+        });
+    }, [hasMenu]);
+    const handleCardKeyDown = useCallback((e) => {
+        if (!hasMenu)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleCardClick();
+        }
+    }, [hasMenu, handleCardClick]);
+    const menuColumns = [{
+            items: [
+                ...(onUse ? [{ label: t('passCard.menu.use', '사용하기'), icon: 'play', onClick: () => { onUse(); setMenuAnchor(null); }, closeOnSelect: true }] : []),
+                ...(onRefund ? [{ label: t('passCard.menu.refund', '환불하기'), icon: 'rotate-ccw', onClick: () => { onRefund(); setMenuAnchor(null); }, closeOnSelect: true }] : []),
+                ...(onDelete ? [{ label: t('passCard.menu.delete', '삭제하기'), icon: 'trash-2', onClick: () => { onDelete(); setMenuAnchor(null); }, closeOnSelect: true }] : []),
+            ],
+        }];
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "pass-card-frame", children: _jsxs("div", { ref: cardRef, className: `pass-card pass-card--${state}${hasMenu ? ' pass-card--clickable' : ''}`, style: cardStyle, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, onClick: handleCardClick, onKeyDown: hasMenu ? handleCardKeyDown : undefined, role: hasMenu ? 'button' : undefined, tabIndex: hasMenu ? 0 : undefined, children: [bg ?? getDefaultBg(rType, rPlan, rLabel), !bgOnly && (_jsxs(_Fragment, { children: [_jsx("div", { className: "pass-card__top", children: _jsxs("div", { className: "pass-card__top-left", children: [_jsx("img", { src: resolvedLogoSrc ?? LOGO[rType], className: "pass-card__logo", alt: rType === 'manager'
+                                                    ? t('header.logoManager', '말귀매니저 로고')
+                                                    : t('header.logoMalgwi', '말귀 로고') }), _jsxs("div", { className: "pass-card__plan", children: [_jsx("div", { children: planDisplay }), _jsx("span", { className: "h5b pass-card__plan-suffix", children: rLabel ? t('passCard.labeledPlan', { label: rLabel }) : t('passCard.planSuffix', '이용권') })] })] }) }), rPrice
+                                    ? (_jsxs("div", { className: "pass-card__price-area", children: [rDiscountLabel && _jsx("span", { className: "pass-card__discount body-3", children: rDiscountLabel }), _jsxs("div", { className: "pass-card__price", children: [rOriginalPrice && _jsx("span", { className: "pass-card__price-original body-3", children: toWonSymbol(rOriginalPrice) }), priceDisplay] })] }))
+                                    : usageInfo
+                                        ? (_jsxs("div", { className: "pass-card__usage", children: [_jsx("span", { className: "h5b pass-card__usage-remaining", children: usageInfo.remainingLabel }), _jsxs("span", { className: "pass-card__usage-percent", children: [_jsx("span", { className: "h1 pass-card__usage-value", children: usageInfo.percent }), _jsx("span", { className: "h5b pass-card__usage-symbol", children: "%" })] })] }))
+                                        : _jsx("div", { className: "pass-card__copyright caption-2", children: "\u00A9 IHAB Corp. All rights reserved." })] }))] }) }), menuAnchor && (_jsx(Tooltip, { anchorRect: menuAnchor, onClose: handleCloseMenu, children: _jsx(MenuTooltip, { columns: menuColumns, onClose: handleCloseMenu, size: "small" }) }))] }));
+}

package/dist/packages/core/src/components/PassCard/PassCardBg.css

@@ -0,0 +1,39 @@
+/* ── PassCardBg 공통 베이스 ────────────────────────────────────────── */
+/* 모든 PassCardBg_* 컴포넌트가 공유하는 기본 스타일                    */
+/* 부모에 position: relative; overflow: hidden 필요                    */
+.pass-card-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+/* ── 심볼 불투명도 토큰 ─────────────────────────────────────────────── */
+:root {
+  --pass-card-symbol-opacity: 1;
+}
+
+/* ── 우측 상단 심볼 (9종 공통) ──────────────────────────────────────────
+   <img>가 아니라 span인 이유: img는 색을 지정할 수 없어 만료 상태처럼 단색으로
+   칠해야 할 때 필터 꼼수(brightness+invert)를 써야 하고, 그러면 색조가 없는
+   중성 회색밖에 못 만들어 토큰 색과 정확히 맞출 수 없다.
+
+   기본은 원본 SVG를 배경 이미지로 깔아 <img>와 같게 그리고, 동시에 같은 SVG를
+   마스크로 씌워 둔다 — background를 색으로 바꾸기만 하면 형태는 그대로 둔 채
+   단색으로 칠해진다(.pass-card--expired 규칙이 이걸 쓴다).
+
+   --symbol-url은 컴포넌트가 인라인으로 주입한다. 번들러가 해석한 import 값을
+   써야 해서 CSS에 url(...)을 직접 적을 수 없고, 반드시 따옴표로 감싸야 한다
+   (작은 SVG는 data URI로 인라인되는데 그 안의 clip-path="url(#...)" 때문에
+   따옴표가 없으면 바깥 url()이 중간 괄호에서 먼저 닫힌다). */
+.pass-card-bg__symbol {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 48px;
+  height: 48px;
+  background: var(--symbol-url) center / contain no-repeat;
+  -webkit-mask: var(--symbol-url) center / contain no-repeat;
+  mask: var(--symbol-url) center / contain no-repeat;
+}

package/dist/packages/core/src/components/PassCard/PassCardBg.d.ts

@@ -0,0 +1,8 @@
+import './PassCardBg.css';
+/** @public */
+export interface PassCardBgProps {
+    /** 배경 색조 변형 */
+    variant?: 'default' | 'blue' | 'dark';
+}
+/** @public */
+export default function PassCardBg({ variant }: PassCardBgProps): import("react").JSX.Element;

package/dist/packages/core/src/components/PassCard/PassCardBg.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './PassCardBg.css';
+/** @public */
+export default function PassCardBg({ variant = 'default' }) {
+    return (_jsxs("div", { className: `pass-card-bg pass-card-bg--${variant}`, "aria-hidden": "true", children: [_jsx("div", { className: "pass-card-bg__circle pass-card-bg__circle--1" }), _jsx("div", { className: "pass-card-bg__circle pass-card-bg__circle--2" }), _jsx("div", { className: "pass-card-bg__circle pass-card-bg__circle--3" })] }));
+}

package/dist/packages/core/src/components/PassCard/PassCardBgIHAB.css

@@ -0,0 +1,25 @@
+.pass-card-bg-ihab {
+  background: var(--color-white);
+}
+
+.pass-card-bg-ihab__symbol {
+  position: absolute;
+  bottom: -24px;
+  right: -24px;
+  width: 140px;
+  height: 140px;
+  object-fit: contain;
+  opacity: 0.06;
+}
+
+/* 우측 상단 심볼 — -90도 회전 후 visible bbox가 top:12/right:12에 위치하도록.
+   위치·마스크는 공통 .pass-card-bg__symbol이 담당하고 여기서는 차이만 둔다.
+   이 배경만 심볼이 아니라 가로 워드마크(Logo_IHAB_en, 264×100)라 폭이 정사각이
+   아니다 — <img width:auto>가 해주던 비율 유지를 span에서는 직접 계산해 준다. */
+.pass-card-bg-ihab__symbol-top {
+  width: calc(48px * 264 / 100);
+  /* transform-origin: top right → 회전축이 layout box 우상단 */
+  /* translate(-48px, 0): 회전 후 우측으로 빠져나간 visible 영역(원래 height만큼)을 다시 좌측으로 당김 */
+  transform: translate(-48px, 0) rotate(-90deg);
+  transform-origin: top right;
+}

package/dist/packages/core/src/components/PassCard/PassCardBgIHAB.d.ts

@@ -0,0 +1,7 @@
+import './PassCardBg.css';
+import './PassCardBgIHAB.css';
+import { type PassCardBgTheme } from './PassCardBgTheme';
+/** @public */
+export declare const passCardBgIhabTheme: PassCardBgTheme;
+/** @public */
+export default function PassCardBgIHAB(): import("react").JSX.Element;

package/dist/packages/core/src/components/PassCard/PassCardBgIHAB.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PassCardBg.css';
+import './PassCardBgIHAB.css';
+import logoIhab from '../../logo/Logo_IHAB_en.svg';
+import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
+/** @public */
+export const passCardBgIhabTheme = {
+    text: '#1a1a1a',
+    sub: 'var(--color-lightGray)',
+    logoBase: 'Logo_speechear_kr',
+    copyrightColor: '#c9c9c9',
+};
+/** @public */
+export default function PassCardBgIHAB() {
+    const ref = useParentBgTheme(passCardBgIhabTheme, injectPassCardBgTheme, clearPassCardBgTheme);
+    return (_jsx("div", { ref: ref, className: "pass-card-bg pass-card-bg-ihab", "aria-hidden": "true", children: _jsx("span", { className: "pass-card-bg__symbol pass-card-bg-ihab__symbol-top", style: { ['--symbol-url']: `url("${logoIhab}")` } }) }));
+}

package/dist/packages/core/src/components/PassCard/PassCardBgLeftColorGrid.css

@@ -0,0 +1,45 @@
+.pass-card-bg-left-color-grid {
+  background: var(--color-white);
+}
+
+/* 좌측 컬러 바 — 좌 0 ~ 76% 덮음 */
+.pass-card-bg-left-color-grid__bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 76%;
+  height: 100%;
+  background: linear-gradient(120deg, var(--color-main), var(--color-sub));
+  border-radius: 16px 0 0 16px;
+}
+
+
+/* 우측 격자 패턴 — 선 색은 변수로 빼둔다(만료 상태에서 회색으로 바꿔 끼우기 위함).
+   --color-main을 참조하지 않고 값이 박혀 있어서, 카드 쪽의 회색 재정의만으로는
+   여기까지 따라오지 않는다. */
+.pass-card-bg-left-color-grid__grid {
+  --grid-line: rgba(73, 156, 223, 0.06);
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(var(--grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+/* 만료 카드 — 격자를 숨긴다. 격자는 inset:0으로 카드 전체를 덮고 좌측 판보다 뒤에
+   그려지는데, 판이 밝아지면 그 위로 선이 드러난다. 특정 배경색으로 맞추는 대신
+   투명으로 둔다 — 판 위(darkWhite)와 우측 바탕(흰색) 두 곳을 한 색으로는 못 맞춘다. */
+.pass-card--expired .pass-card-bg-left-color-grid__grid {
+  --grid-line: transparent;
+}
+
+/* 만료 카드 — 좌측 판. 카드 폭의 76%를 덮는 가장 큰 면이라, 카드 전역 회색
+   재정의(disabled→whiteLine)를 그대로 받으면 이 판만 유독 진해 회색 톤이 깨진다.
+   우상단 심볼과 같은 색(--pass-card-expired-shape, PassCard.css 정의 —
+   --color-whiteLine이 다크모드에서 8% 알파로 거의 투명해지는 문제를 피하려고
+   다크모드 전용 불투명 값을 갖는 지역 변수)으로 맞추고, 그라디언트가 아니라
+   단색으로 채운다 — 회색끼리의 그라디언트는 한쪽 끝이 옅어져 판이 투명한 것처럼 보인다. */
+.pass-card--expired .pass-card-bg-left-color-grid__bar {
+  background: var(--pass-card-expired-shape);
+}

package/dist/packages/core/src/components/PassCard/PassCardBgLeftColorGrid.d.ts

@@ -0,0 +1,9 @@
+import './PassCardBg.css';
+import './PassCardBgLeftColorGrid.css';
+import { type PassCardBgTheme } from './PassCardBgTheme';
+/** @public */
+export declare const passCardBgLeftColorGridTheme: PassCardBgTheme;
+/** @public */
+export type PassCardBgLeftColorGridProps = Record<string, never>;
+/** @public */
+export default function PassCardBgLeftColorGrid(_props?: PassCardBgLeftColorGridProps): import("react").JSX.Element;

package/dist/packages/core/src/components/PassCard/PassCardBgLeftColorGrid.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PassCardBg.css';
+import './PassCardBgLeftColorGrid.css';
+import symbolIhab from '../../logo/Symbol_IHAB.svg';
+import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
+/** @public */
+export const passCardBgLeftColorGridTheme = {
+    text: '#ffffff',
+    sub: 'var(--color-lightGray)',
+    logoBase: 'Logo_speechearManager_kr',
+    logoColor: '_white',
+    copyrightColor: '#ffffff',
+};
+/** @public */
+export default function PassCardBgLeftColorGrid(_props = {}) {
+    const ref = useParentBgTheme(passCardBgLeftColorGridTheme, injectPassCardBgTheme, clearPassCardBgTheme);
+    return (_jsxs("div", { ref: ref, className: "pass-card-bg pass-card-bg-left-color-grid", "aria-hidden": "true", children: [_jsx("div", { className: "pass-card-bg-left-color-grid__bar" }), _jsx("div", { className: "pass-card-bg-left-color-grid__grid" }), _jsx("span", { className: "pass-card-bg__symbol pass-card-bg-left-color-grid__symbol", style: { ['--symbol-url']: `url("${symbolIhab}")` } })] }));
+}

package/dist/packages/core/src/components/PassCard/PassCardBgSoundLine.css

@@ -0,0 +1,19 @@
+/* ── PassCardBg_SoundLine ─────────────────────────────────────────── */
+/* 다중 파동 리본 (4 humps) — 시안 → 그린 → 옐로 그라데이션                */
+
+.pass-card-bg-sound-line {
+  background:
+    linear-gradient(60deg,
+      var(--color-pureWhite) 0%,
+      color-mix(in srgb, var(--color-sub) 15%, var(--color-pureWhite)) 100%
+    );
+}
+
+.pass-card-bg-sound-line__svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+

package/dist/packages/core/src/components/PassCard/PassCardBgSoundLine.d.ts

@@ -0,0 +1,9 @@
+import './PassCardBg.css';
+import './PassCardBgSoundLine.css';
+import { type PassCardBgTheme } from './PassCardBgTheme';
+/** @public */
+export declare const passCardBgSoundLineTheme: PassCardBgTheme;
+/** @public */
+export type PassCardBgSoundLineProps = Record<string, never>;
+/** @public */
+export default function PassCardBgSoundLine(_props?: PassCardBgSoundLineProps): import("react").JSX.Element;

package/dist/packages/core/src/components/PassCard/PassCardBgSoundLine.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PassCardBg.css';
+import './PassCardBgSoundLine.css';
+import symbolIhab from '../../logo/Symbol_IHAB.svg';
+import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
+/** @public */
+export const passCardBgSoundLineTheme = {
+    text: '#1a1a1a',
+    sub: 'var(--color-lightGray)',
+    logoBase: 'Logo_speechear_kr',
+    copyrightColor: '#1a1a1a',
+};
+/** @public */
+export default function PassCardBgSoundLine(_props = {}) {
+    // 같은 플랜 카드가 badge tier별로 여러 인스턴스 렌더될 수 있어(예: manager_standard),
+    // 고정 id면 두 번째 인스턴스부터 url(#id) 참조가 첫 번째 인스턴스의 그라디언트를 가리킨다
+    const gradId = `passcard-sound-line-grad-${useId()}`;
+    const ref = useParentBgTheme(passCardBgSoundLineTheme, injectPassCardBgTheme, clearPassCardBgTheme);
+    return (_jsxs("div", { ref: ref, className: "pass-card-bg pass-card-bg-sound-line", "aria-hidden": "true", children: [_jsxs("svg", { className: "pass-card-bg-sound-line__svg", viewBox: "0 0 500 300", preserveAspectRatio: "xMidYMid slice", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "20%", stopColor: "var(--color-main)" }), _jsx("stop", { offset: "80%", stopColor: "var(--color-sub)" })] }) }), _jsx("g", { transform: "translate(25, 45)", children: _jsx("path", { d: "M -30 150 C 40 80, 100 220, 160 150 S 280 80, 340 150 S 460 220, 510 150", fill: "none", stroke: `url(#${gradId})`, strokeWidth: "50", strokeLinecap: "round" }) })] }), _jsx("span", { className: "pass-card-bg__symbol pass-card-bg-sound-line__symbol", style: { ['--symbol-url']: `url("${symbolIhab}")` } })] }));
+}

package/dist/packages/core/src/components/PassCard/PassCardBgSoundLineV1.css

@@ -0,0 +1,15 @@
+/* ── PassCardBg_SoundLine_v1 ──────────────────────────────────────── */
+/* 다중 파동 리본 (4 humps) — main → sub 그라데이션                       */
+
+.pass-card-bg-sound-line-v1 {
+  background: linear-gradient(135deg, var(--color-main), var(--color-sub));
+}
+
+.pass-card-bg-sound-line-v1__svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+

package/dist/packages/core/src/components/PassCard/PassCardBgSoundLineV1.d.ts

@@ -0,0 +1,9 @@
+import './PassCardBg.css';
+import './PassCardBgSoundLineV1.css';
+import { type PassCardBgTheme } from './PassCardBgTheme';
+/** @public */
+export declare const passCardBgSoundLineV1Theme: PassCardBgTheme;
+/** @public */
+export type PassCardBgSoundLineV1Props = Record<string, never>;
+/** @public */
+export default function PassCardBgSoundLineV1(_props?: PassCardBgSoundLineV1Props): import("react").JSX.Element;

package/dist/packages/core/src/components/PassCard/PassCardBgSoundLineV1.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PassCardBg.css';
+import './PassCardBgSoundLineV1.css';
+import symbolIhab from '../../logo/Symbol_IHAB_white.svg';
+import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
+/** @public */
+export const passCardBgSoundLineV1Theme = {
+    text: '#ffffff',
+    sub: 'var(--color-lightGray)',
+    logoBase: 'Logo_speechear_kr',
+    logoColor: '_white',
+    copyrightColor: '#ffffff',
+};
+/** @public */
+export default function PassCardBgSoundLineV1(_props = {}) {
+    // 같은 플랜 카드가 badge tier별로 여러 인스턴스 렌더될 수 있어, 고정 id면
+    // 두 번째 인스턴스부터 url(#id) 참조가 첫 번째 인스턴스의 그라디언트를 가리킨다
+    const gradId = `passcard-sound-line-v1-grad-${useId()}`;
+    const ref = useParentBgTheme(passCardBgSoundLineV1Theme, injectPassCardBgTheme, clearPassCardBgTheme);
+    return (_jsxs("div", { ref: ref, className: "pass-card-bg pass-card-bg-sound-line-v1", "aria-hidden": "true", children: [_jsxs("svg", { className: "pass-card-bg-sound-line-v1__svg", viewBox: "0 0 500 300", preserveAspectRatio: "xMidYMid slice", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "50%", stopColor: "var(--color-sub)" }), _jsx("stop", { offset: "90%", stopColor: "var(--color-main)" })] }) }), _jsx("g", { transform: "translate(25, 45)", children: _jsx("path", { d: "M -30 150 C 40 80, 100 220, 160 150 S 280 80, 340 150 S 460 220, 510 150", fill: "none", stroke: `url(#${gradId})`, strokeWidth: "50", strokeLinecap: "round" }) })] }), _jsx("span", { className: "pass-card-bg__symbol pass-card-bg-sound-line-v1__symbol", style: { ['--symbol-url']: `url("${symbolIhab}")` } })] }));
+}

package/dist/packages/core/src/components/PassCard/PassCardBgSoundMove.css

@@ -0,0 +1,16 @@
+/* ── PassCardBg_SoundMove ─────────────────────────────────────────── */
+/* IHAB 심볼 외곽선을 동심으로 반복 — 우하단에서 좌상단으로 확산           */
+
+.pass-card-bg-sound-move {
+  background: var(--color-pureWhite);
+}
+
+/* SVG 레이어 — 카드 전체 채움 */
+.pass-card-bg-sound-move__svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+

package/dist/packages/core/src/components/PassCard/PassCardBgSoundMove.d.ts

@@ -0,0 +1,9 @@
+import './PassCardBg.css';
+import './PassCardBgSoundMove.css';
+import { type PassCardBgTheme } from './PassCardBgTheme';
+/** @public */
+export declare const passCardBgSoundMoveTheme: PassCardBgTheme;
+/** @public */
+export type PassCardBgSoundMoveProps = Record<string, never>;
+/** @public */
+export default function PassCardBgSoundMove(_props?: PassCardBgSoundMoveProps): import("react").JSX.Element;