@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import { IHAB_OUTLINE_PATH } from './ihabOutlinePath';
+import './PassCardBg.css';
+import './PassCardBgSoundMove.css';
+import symbolIhab from '../../logo/Symbol_IHAB.svg';
+import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
+/** @public */
+export const passCardBgSoundMoveTheme = {
+    text: '#1a1a1a',
+    sub: 'var(--color-lightGray)',
+    logoBase: 'Logo_speechear_kr',
+    copyrightColor: 'var(--color-main)',
+};
+/** 각 wave: scale, opacity */
+const WAVES = [
+    { scale: 1.0, opacity: 0.55 },
+    { scale: 2.0, opacity: 0.40 },
+    { scale: 3.1, opacity: 0.28 },
+    { scale: 4.5, opacity: 0.18 },
+    { scale: 6.0, opacity: 0.10 },
+];
+/** @public */
+export default function PassCardBgSoundMove(_props = {}) {
+    const ref = useParentBgTheme(passCardBgSoundMoveTheme, injectPassCardBgTheme, clearPassCardBgTheme);
+    const stroke = 'var(--color-main)';
+    // viewBox: 300×189 (PassCard 비율). 소스 중심: 우하단
+    const cx = 270;
+    const cy = 170;
+    return (_jsxs("div", { ref: ref, className: "pass-card-bg pass-card-bg-sound-move", "aria-hidden": "true", children: [_jsx("svg", { className: "pass-card-bg-sound-move__svg", viewBox: "0 0 300 189", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", children: WAVES.map(({ scale, opacity }, i) => (_jsx("g", { transform: `translate(${cx} ${cy}) scale(${scale}) translate(-50 -50)`, opacity: opacity, children: _jsx("path", { d: IHAB_OUTLINE_PATH, fill: "none", stroke: stroke, strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" }) }, i))) }), _jsx("span", { className: "pass-card-bg__symbol pass-card-bg-sound-move__symbol", style: { ['--symbol-url']: `url("${symbolIhab}")` } })] }));
+}

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import { IHAB_OUTLINE_PATH } from './ihabOutlinePath';
+import './PassCardBg.css';
+import './PassCardBgSoundMoveV1.css';
+import symbolIhab from '../../logo/Symbol_IHAB_white.svg';
+import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
+/** @public */
+export const passCardBgSoundMoveV1Theme = {
+    text: '#ffffff',
+    sub: 'var(--color-lightGray)',
+    logoBase: 'Logo_speechear_kr',
+    logoColor: '_white',
+    copyrightColor: '#ffffff',
+};
+/** 각 wave: scale, opacity */
+const WAVES = [
+    { scale: 1.0, opacity: 0.55 },
+    { scale: 2.0, opacity: 0.40 },
+    { scale: 3.1, opacity: 0.28 },
+    { scale: 4.5, opacity: 0.18 },
+    { scale: 6.0, opacity: 0.10 },
+];
+/** @public */
+export default function PassCardBgSoundMoveV1(_props = {}) {
+    const ref = useParentBgTheme(passCardBgSoundMoveV1Theme, injectPassCardBgTheme, clearPassCardBgTheme);
+    const stroke = '#ffffff';
+    // viewBox: 300×189 (PassCard 비율). 소스 중심: 우하단
+    const cx = 270;
+    const cy = 170;
+    return (_jsxs("div", { ref: ref, className: "pass-card-bg pass-card-bg-sound-move-v1", "aria-hidden": "true", children: [_jsx("svg", { className: "pass-card-bg-sound-move-v1__svg", viewBox: "0 0 300 189", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", children: WAVES.map(({ scale, opacity }, i) => (_jsx("g", { transform: `translate(${cx} ${cy}) scale(${scale}) translate(-50 -50)`, opacity: opacity, children: _jsx("path", { d: IHAB_OUTLINE_PATH, fill: "none", stroke: stroke, strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" }) }, i))) }), _jsx("span", { className: "pass-card-bg__symbol pass-card-bg-sound-move-v1__symbol", style: { ['--symbol-url']: `url("${symbolIhab}")` } })] }));
+}

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

@@ -0,0 +1,33 @@
+/* ── PassCardBg_Talk ───────────────────────────────────────────────── */
+/* 가운데 두 도형이 겹친 그래픽 — main(좌하단 직각) + sub(원, 반투명)         */
+
+.pass-card-bg-talk {
+  background: var(--color-pureWhite);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 도형 공통 */
+.pass-card-bg-talk__shape {
+  position: absolute;
+  width: 76px;
+  height: 76px;
+}
+
+/* 좌측 — BL만 직각(0), 나머지는 큰 라운드 */
+.pass-card-bg-talk__shape--left {
+  background: var(--color-main);
+  border-radius: 42px 42px 42px 4px;
+  /* 정확히 가운데 기준 좌측에 위치 (살짝 왼쪽으로) */
+  transform: translateX(-18px);
+}
+
+/* 우측 — 완전한 원, 반투명 */
+.pass-card-bg-talk__shape--right {
+  background: var(--color-sub);
+  border-radius: 50%;
+  opacity: 0.7;
+  transform: translateX(18px);
+}
+

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

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

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PassCardBg.css';
+import './PassCardBgTalk.css';
+import symbolIhab from '../../logo/Symbol_IHAB.svg';
+import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
+/** @public */
+export const passCardBgTalkTheme = {
+    text: '#1a1a1a',
+    sub: 'var(--color-lightGray)',
+    logoBase: 'Logo_speechear_kr',
+    copyrightColor: 'var(--color-main)',
+};
+/** @public */
+export default function PassCardBgTalk(_props = {}) {
+    const ref = useParentBgTheme(passCardBgTalkTheme, injectPassCardBgTheme, clearPassCardBgTheme);
+    return (_jsxs("div", { ref: ref, className: "pass-card-bg pass-card-bg-talk", "aria-hidden": "true", children: [_jsx("div", { className: "pass-card-bg-talk__shape pass-card-bg-talk__shape--left" }), _jsx("div", { className: "pass-card-bg-talk__shape pass-card-bg-talk__shape--right" }), _jsx("span", { className: "pass-card-bg__symbol pass-card-bg-talk__symbol", style: { ['--symbol-url']: `url("${symbolIhab}")` } })] }));
+}

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

@@ -0,0 +1,36 @@
+/* ── PassCardBg_Talk_v1 ─────────────────────────────────────────────── */
+/* PassCardBgTalk과 동일 — 화이트 배경 + main(좌, BL 직각)·sub(우, 반투명 원) */
+
+.pass-card-bg-talk-v1 {
+  background: var(--color-pureWhite);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 도형 공통 */
+.pass-card-bg-talk-v1__shape {
+  position: absolute;
+  width: 76px;
+  height: 76px;
+}
+
+/* 좌측 — 알약(캡슐) 형태: 가로로 길고 양끝 완전 둥글게. 가운데 배치 */
+.pass-card-bg-talk-v1__shape--left {
+  background: linear-gradient(70deg, var(--color-main), var(--color-sub));
+  width: 180px;
+  height: 92px;
+  border-radius: 999px;
+  transform: translateX(0px) rotate(120deg);
+}
+
+/* 우측 — 완전한 원, 반투명 */
+.pass-card-bg-talk-v1__shape--right {
+  background: var(--color-sub);
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  opacity: 1;
+  transform: translate(38px, 12px);
+}
+

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

@@ -0,0 +1,13 @@
+import './PassCardBg.css';
+import './PassCardBgTalkV1.css';
+import { type PassCardBgTheme } from './PassCardBgTheme';
+/** @public */
+export declare const passCardBgTalkV1Theme: PassCardBgTheme;
+/** @public */
+export type PassCardBgTalkV1Props = Record<string, never>;
+/**
+ * PassCardBgTalk의 오픈특가 전용 변형 — 컬러 그라데이션 배경 + 흰색 도형/로고.
+ * (기본형은 화이트 배경/메인색 텍스트, _v1은 컬러 배경/화이트 텍스트)
+ * @public
+ */
+export default function PassCardBgTalkV1(_props?: PassCardBgTalkV1Props): import("react").JSX.Element;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PassCardBg.css';
+import './PassCardBgTalkV1.css';
+import symbolIhab from '../../logo/Symbol_IHAB.svg';
+import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
+/** @public */
+export const passCardBgTalkV1Theme = {
+    text: '#1a1a1a',
+    sub: 'var(--color-lightGray)',
+    logoBase: 'Logo_speechear_kr',
+    copyrightColor: 'var(--color-main)',
+};
+/**
+ * PassCardBgTalk의 오픈특가 전용 변형 — 컬러 그라데이션 배경 + 흰색 도형/로고.
+ * (기본형은 화이트 배경/메인색 텍스트, _v1은 컬러 배경/화이트 텍스트)
+ * @public
+ */
+export default function PassCardBgTalkV1(_props = {}) {
+    const ref = useParentBgTheme(passCardBgTalkV1Theme, injectPassCardBgTheme, clearPassCardBgTheme);
+    return (_jsxs("div", { ref: ref, className: "pass-card-bg pass-card-bg-talk-v1", "aria-hidden": "true", children: [_jsx("div", { className: "pass-card-bg-talk-v1__shape pass-card-bg-talk-v1__shape--left" }), _jsx("div", { className: "pass-card-bg-talk-v1__shape pass-card-bg-talk-v1__shape--right" }), _jsx("span", { className: "pass-card-bg__symbol pass-card-bg-talk-v1__symbol", style: { ['--symbol-url']: `url("${symbolIhab}")` } })] }));
+}

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

@@ -0,0 +1,38 @@
+/**
+ * PassCardBg 컴포넌트가 부모에 주입하는 CSS 커스텀 프로퍼티 정의.
+ * 각 PassCardBg_* 컴포넌트는 자신의 배경에 맞는 theme을 export하고,
+ * useLayoutEffect로 부모 요소에 CSS var를 주입한다.
+ *
+ * PassCard 콘텐츠(텍스트, 서브 등)는 var(--pass-card-text) 등을 참조해
+ * 배경을 교체하는 것만으로 전경색이 자동으로 바뀐다.
+ *
+ * @public
+ */
+export interface PassCardBgTheme {
+    /** 주 텍스트 색상 — 플랜명, 로고 영역 등 → --pass-card-text */
+    text: string;
+    /** 보조 텍스트 색상 — copyright 등 → --pass-card-sub */
+    sub: string;
+    /**
+     * 배경에 어울리는 로고 색상 variant 접미사.
+     * 예: '' (기본), '_white', '_black'
+     * PassCard가 logoBase와 조합해 실제 파일을 결정할 때 참조.
+     */
+    logoColor?: string;
+    /** 좌측 로고 베이스 이름 (e.g. 'Logo_speechear_kr') */
+    logoBase?: string;
+    /** 카피라이트 텍스트 색상 → --pass-card-copyright */
+    copyrightColor?: string;
+}
+/** CSS 커스텀 프로퍼티 키 목록 */
+export declare const PASS_CARD_BG_VARS: {
+    readonly text: "--pass-card-text";
+    readonly sub: "--pass-card-sub";
+    readonly copyright: "--pass-card-copyright";
+};
+/** 레지스트리에서 theme 조회 */
+export declare function getPassCardBgTheme(el: Element | null): PassCardBgTheme | undefined;
+/** theme 객체를 부모 요소에 CSS var로 주입 */
+export declare function injectPassCardBgTheme(el: HTMLElement | null, theme: PassCardBgTheme): void;
+/** 주입된 CSS var 제거 (cleanup용) */
+export declare function clearPassCardBgTheme(el: HTMLElement | null): void;

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

@@ -0,0 +1,34 @@
+/** CSS 커스텀 프로퍼티 키 목록 */
+export const PASS_CARD_BG_VARS = {
+    text: '--pass-card-text',
+    sub: '--pass-card-sub',
+    copyright: '--pass-card-copyright',
+};
+/** WeakMap 레지스트리: Element → 마지막으로 주입된 theme */
+const _themeRegistry = new WeakMap();
+/** 레지스트리에서 theme 조회 */
+export function getPassCardBgTheme(el) {
+    if (!el)
+        return undefined;
+    return _themeRegistry.get(el);
+}
+/** theme 객체를 부모 요소에 CSS var로 주입 */
+export function injectPassCardBgTheme(el, theme) {
+    if (!el)
+        return;
+    el.style.setProperty(PASS_CARD_BG_VARS.text, theme.text);
+    el.style.setProperty(PASS_CARD_BG_VARS.sub, theme.sub);
+    if (theme.copyrightColor) {
+        el.style.setProperty(PASS_CARD_BG_VARS.copyright, theme.copyrightColor);
+    }
+    _themeRegistry.set(el, theme);
+}
+/** 주입된 CSS var 제거 (cleanup용) */
+export function clearPassCardBgTheme(el) {
+    if (!el)
+        return;
+    el.style.removeProperty(PASS_CARD_BG_VARS.text);
+    el.style.removeProperty(PASS_CARD_BG_VARS.sub);
+    el.style.removeProperty(PASS_CARD_BG_VARS.copyright);
+    _themeRegistry.delete(el);
+}

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

@@ -0,0 +1,36 @@
+/* 모든 variant 공통 배경 */
+.pass-card-bg-two-circle {
+  background: var(--color-pureWhite);
+}
+
+/* ── 원 ──────────────────────────────────────────────────── */
+.pass-card-bg-two-circle__c1,
+.pass-card-bg-two-circle__c3 {
+  position: absolute;
+  border-radius: 50%;
+  opacity: var(--pass-card-symbol-opacity, 0.75);
+}
+
+/* 큰 원 — main */
+.pass-card-bg-two-circle__c1 {
+  width: 340px;
+  height: 340px;
+  top: -140px;
+  right: -150px;
+  background: var(--color-main);
+}
+
+/* 작은 원 — sub */
+.pass-card-bg-two-circle__c3 {
+  width: 220px;
+  height: 220px;
+  bottom: -90px;
+  right: -50px;
+  background: var(--color-sub);
+}
+
+/* 우측 상단 심볼 — 위치·마스크는 공통 .pass-card-bg__symbol이 담당.
+   이 배경만 원본 SVG를 그대로 쓰지 않고 단색 토큰으로 칠한다. */
+.pass-card-bg-two-circle__symbol {
+  background: var(--color-darkWhite);
+}

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

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

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PassCardBg.css';
+import './PassCardBgTwoCircle.css';
+import symbolIhab from '../../logo/Symbol_IHAB_white.svg';
+import { injectPassCardBgTheme, clearPassCardBgTheme } from './PassCardBgTheme';
+/** @public */
+export const passCardBgTwoCircleTheme = {
+    text: 'var(--color-pureBlack)',
+    sub: 'var(--color-lightGray)',
+    logoBase: 'Logo_speechear_kr',
+    copyrightColor: '#1a1a1a',
+};
+/** @public */
+export default function PassCardBgTwoCircle(_props = {}) {
+    const ref = useParentBgTheme(passCardBgTwoCircleTheme, injectPassCardBgTheme, clearPassCardBgTheme);
+    return (_jsxs("div", { ref: ref, className: "pass-card-bg pass-card-bg-two-circle", "aria-hidden": "true", children: [_jsx("div", { className: "pass-card-bg-two-circle__c1" }), _jsx("div", { className: "pass-card-bg-two-circle__c3" }), _jsx("span", { className: "pass-card-bg__symbol pass-card-bg-two-circle__symbol", style: { ['--symbol-url']: `url("${symbolIhab}")` } })] }));
+}

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

@@ -0,0 +1,76 @@
+/* ── PassCard 뒷면 ─────────────────────────────────────────────────── */
+/* 좌상단 IHAB 로고 · 우측 사이트 QR · 하단 이용권 코드 + URL                  */
+
+.pass-card-back {
+  background: var(--color-pureWhite);
+  color: var(--pass-card-text, var(--color-black));
+  /* 카드 비율(1.586)은 .pass-card 그대로 유지 */
+  text-align: left;
+  padding: 20px 20px;
+}
+
+/* 좌상단: 로고 + 그 아래 URL */
+.pass-card-back__head {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.pass-card-back__logo {
+  height: 38px;
+  width: auto;
+  object-fit: contain;
+}
+
+/* 우측 하단 QR — 사이트로 이동 */
+.pass-card-back__qr {
+  position: absolute;
+  bottom: 14px;
+  right: 14px;
+  width: 80px;
+  height: 80px;
+  z-index: 1;
+}
+
+/* 하단 영역 — 이용권 코드 · 짧은 선 · URL */
+.pass-card-back__footer {
+  position: relative;
+  z-index: 1;
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+}
+
+.pass-card-back__coupon {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* 이용권 코드와 URL 사이 짧은 구분선 */
+.pass-card-back__divider {
+  width: 20px;
+  height: 1px;
+  background: var(--color-whiteLine);
+}
+
+.pass-card-back__coupon-label {
+  color: var(--color-lightGray);
+  font-size: 10px;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+}
+
+.pass-card-back__coupon-code {
+  letter-spacing: 0.5px;
+  color: var(--color-black);
+}
+
+.pass-card-back__url {
+  color: var(--color-black);
+}

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

@@ -0,0 +1,13 @@
+import './PassCard.css';
+import './PassCard_Back.css';
+/** @public */
+export interface PassCard_BackProps {
+    /** 이용권 코드(쿠폰 발행 시 부여). 지정하면 하단에 코드 영역을 표시. */
+    couponCode?: string;
+}
+/**
+ * PassCard 뒷면 — 좌상단 IHAB 로고, 우측 사이트 QR, 하단 이용권 코드 + URL.
+ * 카드 셸(비율·라운드·그림자)은 PassCard와 동일한 .pass-card 를 공유한다.
+ * @public
+ */
+export default function PassCard_Back({ couponCode }?: PassCard_BackProps): import("react").JSX.Element;

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

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import './PassCard.css';
+import './PassCard_Back.css';
+import logoIhab from '../../logo/Logo_IHAB_en.svg';
+import qrSpeechear from '../../logo/qr_speechear.svg';
+/** 뒷면 QR이 가리키는 웹 주소 */
+const SITE_URL = 'https://speechear.ihab.co.kr';
+/** 화면 표시용 — scheme(https://) 제거 */
+const SITE_URL_DISPLAY = SITE_URL.replace(/^https?:\/\//, '');
+/**
+ * PassCard 뒷면 — 좌상단 IHAB 로고, 우측 사이트 QR, 하단 이용권 코드 + URL.
+ * 카드 셸(비율·라운드·그림자)은 PassCard와 동일한 .pass-card 를 공유한다.
+ * @public
+ */
+export default function PassCard_Back({ couponCode } = {}) {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "pass-card pass-card--active pass-card-back", children: [_jsx("img", { className: "pass-card-back__qr", src: qrSpeechear, alt: SITE_URL }), _jsx("div", { className: "pass-card-back__head", children: _jsx("img", { className: "pass-card-back__logo", src: logoIhab, alt: "IHAB" }) }), _jsxs("div", { className: "pass-card-back__footer", children: [couponCode && (_jsxs("div", { className: "pass-card-back__coupon", children: [_jsx("span", { className: "pass-card-back__coupon-label caption-2", children: t('passCard.couponCode', { defaultValue: '이용권 코드' }) }), _jsx("span", { className: "pass-card-back__coupon-code h5b", children: couponCode })] })), _jsx("span", { className: "pass-card-back__divider", "aria-hidden": "true" }), _jsx("span", { className: "pass-card-back__url caption-2", children: SITE_URL_DISPLAY })] })] }));
+}

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

@@ -0,0 +1,12 @@
+/**
+ * IHAB 심볼의 외곽 path — 정원이 아니라 좌상단이 살짝 안쪽으로 들어간 비대칭 형태다.
+ * 원본 viewBox 100×100, 중심 (50, 50).
+ *
+ * 이용권 카드 배경 둘(지금 것과 V1)이 이 아홉 줄을 각자 들고 있었다. 로고 모양은 바뀌면
+ * 함께 바뀌어야 하는데, 두 벌이면 한쪽만 새 모양이 되어 화면마다 다른 로고가 뜬다.
+ * 원본은 src/logo/Symbol_IHAB.svg 다. 그 파일의 path 는 **바깥 외곽 + 안쪽 구멍** 두 조각이
+ * 이어져 있고, 여기 옮겨 적은 것은 그중 앞의 바깥 조각뿐이다(배경으로 깔 때는 구멍이
+ * 필요 없다). 그림 파일이라 코드에서 직접 읽지 못해 옮겨 적되, 원본과 어긋나지 않는지는
+ * ihabOutlinePath.test.ts 가 대조한다.
+ */
+export declare const IHAB_OUTLINE_PATH: string;

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

@@ -0,0 +1,19 @@
+/**
+ * IHAB 심볼의 외곽 path — 정원이 아니라 좌상단이 살짝 안쪽으로 들어간 비대칭 형태다.
+ * 원본 viewBox 100×100, 중심 (50, 50).
+ *
+ * 이용권 카드 배경 둘(지금 것과 V1)이 이 아홉 줄을 각자 들고 있었다. 로고 모양은 바뀌면
+ * 함께 바뀌어야 하는데, 두 벌이면 한쪽만 새 모양이 되어 화면마다 다른 로고가 뜬다.
+ * 원본은 src/logo/Symbol_IHAB.svg 다. 그 파일의 path 는 **바깥 외곽 + 안쪽 구멍** 두 조각이
+ * 이어져 있고, 여기 옮겨 적은 것은 그중 앞의 바깥 조각뿐이다(배경으로 깔 때는 구멍이
+ * 필요 없다). 그림 파일이라 코드에서 직접 읽지 못해 옮겨 적되, 원본과 어긋나지 않는지는
+ * ihabOutlinePath.test.ts 가 대조한다.
+ */
+export const IHAB_OUTLINE_PATH = 'M75.2535 24.7464C68.7892 18.2821 59.8606 14.2857 49.9999 14.2857' +
+    'C40.1392 14.2857 37.5214 24.5964 31.0606 31.0607' +
+    'C24.5964 37.525 14.2856 40.1893 14.2856 50' +
+    'C14.2856 59.8107 18.2821 68.7893 24.7464 75.2536' +
+    'C31.2106 81.7178 40.1392 85.7143 49.9999 85.7143' +
+    'C59.8606 85.7143 68.7892 81.7178 75.2535 75.2536' +
+    'C81.7178 68.7893 85.7142 59.8607 85.7142 50' +
+    'C85.7142 40.1393 81.7178 31.2107 75.2535 24.7464Z';

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

@@ -0,0 +1,48 @@
+/** @public 패스카드 종류. (순환 참조 방지를 위해 컴포넌트가 아닌 여기서 정의) */
+export type PassCardType = 'speechear' | 'manager';
+/**
+ * PassCard에 넘기는 "상품 서술자".
+ * 페이지가 type·기간·가격을 각각 계산해 주입하는 대신, 상품 정보 하나만 넘기면
+ * 카드가 스스로 표시 속성을 도출한다. code 하나로 type·기간·등급이 인코딩된다.
+ * @public
+ */
+export interface PassCardProduct {
+    /** 서비스 타입 명시 override. 지정 시 code/name 파싱보다 우선(호출부가 확실히 아는 경우). */
+    type?: PassCardType;
+    /** 상품 코드 (예: 'manager_standard_30d', 'speechear_standard_30d', 'manager_pro_1y'). type·기간을 인코딩. */
+    code?: string;
+    /** 상품명 (예: '말귀 30일'). code에 기간이 없을 때 기간 파싱 폴백. */
+    name?: string;
+    /** 기간(일). 지정 시 code/name보다 우선. */
+    durationDays?: number;
+    /** 가격. 숫자(원 단위) 또는 이미 포맷된 문자열. */
+    price?: string | number;
+    /** 원가(취소선). 숫자(원 단위) 또는 문자열. */
+    originalPrice?: string | number;
+    /** 우측 상단 할인 배지 텍스트. */
+    discountLabel?: string;
+    /** 플랜 위 라벨(예: '오픈특가') 오버라이드. */
+    label?: string;
+}
+/** derivePassCard 결과 — PassCard가 그대로 렌더에 사용. @public */
+export interface PassCardDisplay {
+    type: PassCardType;
+    plan: string;
+    label?: string;
+    price?: string;
+    originalPrice?: string;
+    discountLabel?: string;
+}
+/**
+ * 상품코드 접미사(_30d, _7d, _1y 등)에서 기간(일)을 도출 — derivePlan과 같은
+ * 정규식이지만 표시용 문자열이 아니라 실제 일수(y는 365배)를 반환한다.
+ * PassCard의 사용량% 계산, UsagePage의 사용 시작 시 종료일 계산 등에 공용으로 쓴다.
+ * @public
+ */
+export declare function deriveDurationDays(code?: string): number | null;
+/**
+ * 상품 서술자 → PassCard 표시 속성.
+ * type·plan은 항상 도출, 가격 관련은 값이 있을 때만 채운다.
+ * @public
+ */
+export declare function derivePassCard(p: PassCardProduct): PassCardDisplay;

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

@@ -0,0 +1,56 @@
+import { toWonSymbol } from '../../utils/format';
+/** 숫자(원) 또는 문자열 가격을 '₩12,345' 형태로 통일. */
+function formatPrice(v) {
+    if (v === undefined || v === null || v === '')
+        return undefined;
+    return typeof v === 'number' ? toWonSymbol(`${v.toLocaleString('ko-KR')}원`) : toWonSymbol(v);
+}
+/** 상품 코드/이름에서 말귀(speechear) / 말귀매니저(manager) 판별. */
+function deriveType(p) {
+    const s = `${p.code ?? ''} ${p.name ?? ''}`.toLowerCase();
+    return /manager|매니저/.test(s) ? 'manager' : 'speechear';
+}
+/** 기간 토큰(예: '30일', '1년') 도출 — durationDays > code > name 순. */
+function derivePlan(p) {
+    if (p.durationDays && p.durationDays > 0) {
+        const d = p.durationDays;
+        return d % 365 === 0 ? `${d / 365}년` : `${d}일`;
+    }
+    const code = p.code ?? '';
+    const cm = code.match(/(\d+)(d|y)\b/i);
+    if (cm)
+        return cm[2].toLowerCase() === 'y' ? `${cm[1]}년` : `${cm[1]}일`;
+    const name = p.name ?? '';
+    const nm = name.match(/(\d+\s*(?:년|개월|주|일))\s*(?:이용권)?\s*$/);
+    if (nm)
+        return nm[1].replace(/\s+/g, '');
+    return name || '이용권';
+}
+/**
+ * 상품코드 접미사(_30d, _7d, _1y 등)에서 기간(일)을 도출 — derivePlan과 같은
+ * 정규식이지만 표시용 문자열이 아니라 실제 일수(y는 365배)를 반환한다.
+ * PassCard의 사용량% 계산, UsagePage의 사용 시작 시 종료일 계산 등에 공용으로 쓴다.
+ * @public
+ */
+export function deriveDurationDays(code) {
+    const m = (code ?? '').match(/(\d+)(d|y)\b/i);
+    if (!m)
+        return null;
+    const n = Number(m[1]);
+    return m[2].toLowerCase() === 'y' ? n * 365 : n;
+}
+/**
+ * 상품 서술자 → PassCard 표시 속성.
+ * type·plan은 항상 도출, 가격 관련은 값이 있을 때만 채운다.
+ * @public
+ */
+export function derivePassCard(p) {
+    return {
+        type: p.type ?? deriveType(p),
+        plan: derivePlan(p),
+        label: p.label,
+        price: formatPrice(p.price),
+        originalPrice: formatPrice(p.originalPrice),
+        discountLabel: p.discountLabel,
+    };
+}