@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,318 @@
+/* keep this file for component-specific overrides */
+
+.payment-plan__card {
+    border: 1px solid var(--color-whiteLine);
+    border-radius: var(--radius-m);
+    padding: 20px;
+    width: 100%;
+    /* 내부 PassCard(300px) + 좌우 padding(20px×2). PassCard 가 설계 폭을 지키려면
+       카드가 이보다 좁아지면 안 된다.
+       ※ 아래 grid-template-columns 의 트랙 하한을 반드시 이 값 이상으로 둘 것 —
+         트랙이 더 작으면 카드가 트랙을 뚫고 자라 gap 을 먹고 옆 카드와 겹친다
+         (5열 트랙 280px + gap 48px = 간격 328px 에 340px 카드 → 12px 씩 겹쳤다).
+       min(…, 100%) 으로 두는 이유: 컨테이너가 340px 보다 좁으면(사이드냅이 넓은 좁은
+       화면 등) 하한을 고집하다 카드가 좌우로 밀려 나간다. 그럴 땐 컨테이너에 맞춘다. */
+    min-width: min(340px, 100%);
+    max-width: 360px;  /* 카드가 적은 줄에서 과도하게 늘어나지 않게 상한 */
+    background: var(--color-white);
+    flex: 1 1 340px;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+    transition: box-shadow 0.2s ease, transform 0.2s ease;
+    position: relative;
+    box-sizing: border-box;
+}
+
+.payment-plan__card:hover {
+    box-shadow: var(--shadow-dropdown);
+    transform: translateY(-4px);
+}
+
+.payment-plan__card-badge {
+    position: absolute;
+    top: 32px;
+    right: 32px;
+}
+
+/* 가격 tier — PassCard 형태 버튼 */
+.payment-plan__pricing-card {
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+}
+/* PassCard 의 폭과 비율은 PassCard.css 가 스스로 정한다(width:300px; max-width:100%).
+   여기서 다시 덮으면 같은 값을 두 곳이 쥐게 되고, 한쪽만 고칠 때 비율이 어긋난다. */
+
+.payment-plan__title {
+    color: var(--color-black);
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.payment-plan__quote {
+    color: var(--color-sub);
+    margin: 0 0 4px 0;
+    /* quote가 없는 플랜도 제목 라인을 맞추도록 한 줄 높이 예약 */
+    min-height: 1.4em;
+}
+
+.payment-plan__title-heading {
+    margin: 0;
+}
+
+.payment-plan__subtitle {
+    /* 플랜 설명문 — lightGray는 2.48:1로 AA 미달이었다 */
+    color: var(--color-gray);
+    margin: 8px 0 0 0;
+    text-align: left;
+    line-height: 1.5;
+}
+
+.payment-plan__box {
+   display: block;
+}
+
+.payment-plan__box-title {
+    display: block;
+}
+
+.payment-plan__box-list {
+    padding-left: 18px;
+    color: var(--color-lightGray);
+}
+
+.payment-plan__box-list li {
+    margin-bottom: 4px;
+}
+
+.payment-plan__contact-button {
+    width: 100%;
+}
+
+.payment-plan__feature-list {
+    list-style: none;
+    padding: 0;
+    margin: 12px 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.payment-plan__feature-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--color-darkGray);
+    line-height: 1.45;
+}
+
+.payment-plan__feature-check {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.payment-plan__card-pricing {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    text-align: left;
+    /* keep pricing area at the bottom of the card */
+    margin-top: auto;
+}
+
+.payment-plan__pricing-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-s);
+}
+
+.payment-plan__pricing-row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    align-items: center;
+    row-gap: 4px;
+    padding: 14px 18px;
+    border-radius: var(--radius-s);
+    border: 1px solid transparent;
+    background: var(--plan-color, var(--color-darkWhite));
+    color: #ffffff;
+    cursor: pointer;
+    width: 100%;
+    box-sizing: border-box;
+    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+/* 비활성(표시 전용) 행 — 호버·클릭 없음 */
+.payment-plan__pricing-row--static {
+    cursor: default;
+    pointer-events: none;
+}
+
+.payment-plan__pricing-row--highlight {
+    background: var(--color-white);
+    border: 1px solid var(--plan-color, var(--color-main));
+    color: var(--color-darkGray);
+}
+
+.payment-plan__pricing-row--highlight .payment-plan__pricing-row-price {
+    color: var(--plan-color, var(--color-main));
+}
+
+.payment-plan__pricing-row--highlight .payment-plan__pricing-current {
+    color: var(--plan-color, var(--color-main));
+}
+
+.payment-plan__pricing-row--highlight .payment-plan__pricing-original {
+    color: var(--color-lightGray);
+}
+
+.payment-plan__pricing-row--highlight .payment-plan__pricing-badge {
+    color: var(--plan-color, var(--color-main));
+}
+
+.payment-plan__pricing-row:hover {
+    filter: brightness(1.04);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-dropdown);
+}
+
+/* __title은 display:contents → 자식이 직접 grid cell에 배치 */
+.payment-plan__pricing-row-title {
+    display: contents;
+}
+
+/* margin: 0 은 !important 불필요 — 이 요소들과 결합되는 타이포그래피 유틸리티 클래스
+   (h1/h5b 등, styles.css)가 이미 margin: 0을 지정하므로 값이 애초에 충돌하지 않음. */
+.payment-plan__pricing-row-label {
+    grid-column: 1;
+    grid-row: 1;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.payment-plan__pricing-badge {
+    grid-column: 2;
+    grid-row: 1;
+    text-align: right;
+    white-space: nowrap;
+    margin: 0;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.payment-plan__pricing-row-price {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    display: flex;
+    gap: var(--spacing-xs);
+    align-items: center;
+    justify-content: flex-end;
+    text-align: right;
+    color: #ffffff;
+    margin: 0;
+}
+
+.payment-plan__pricing-original {
+    color: var(--color-white-a80);
+    text-decoration: line-through;
+    white-space: nowrap;
+    margin: 0;
+}
+
+.payment-plan__pricing-current {
+    color: #ffffff;
+    white-space: nowrap;
+    margin: 0;
+}
+
+/* 통화기호(₩) — 숫자보다 작게, 베이스라인 정렬 (PassCard와 동일) */
+.payment-plan__pricing-symbol {
+    margin-right: 2px;
+    font-weight: 600;
+}
+
+.payment-plan__list {
+    display: grid;
+    /* 기본(좁은 화면) 1열 */
+    /* 컨테이너에 들어가는 만큼만 열을 만든다 — 하한 340px 은 PassCard(300px)+padding 을
+       지키기 위한 값이고, 컨테이너가 그보다 좁으면 min(…,100%) 로 접혀 넘치지 않는다. */
+    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 360px));
+    gap: var(--spacing-l); /* 행·열 20px */
+    width: 100%;
+    margin: 0 auto var(--spacing-page);
+    justify-content: center;
+    align-items: stretch;
+}
+
+/* 카드 수에 따라 1×N / 2×2 / N×1 로만 배치 (3열 깨짐 방지) */
+/* 열 수 고정 미디어쿼리를 두지 않는다.
+   미디어쿼리는 뷰포트 폭만 아는데 이 목록이 놓이는 콘텐츠 영역은 사이드냅·페이지
+   여백만큼 더 좁다. 그 차이만큼 열을 과하게 켜면 카드가 좌우로 밀려 나간다.
+   위 auto-fit 이 컨테이너 폭을 직접 보고 들어갈 수 있는 만큼만 열을 만든다. */
+
+/* 카드 높이를 row 내에서 동일하게 */
+.payment-plan__list > .payment-plan__card {
+    align-self: stretch;
+}
+
+/* Allow inner flex items to shrink (prevents children from forcing taller heights) */
+.payment-plan__card-inner,
+.payment-plan__card-content {
+    min-height: 0;
+}
+
+/* Legacy card variant (recommended badge style) */
+.payment-plan__card.recommended {
+    border-color: var(--color-main);
+    box-shadow: var(--shadow-dropdown);
+}
+
+.payment-plan__recommended-badge {
+    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
+    padding: 4px 14px; border-radius: var(--radius-m);
+    background: var(--color-main); color: #ffffff;
+    font-weight: 700; white-space: nowrap;
+}
+
+.payment-plan__name { font-weight: 800; margin: 0 0 8px; }
+.payment-plan__price { font-weight: 800; margin: 0 0 4px; }
+.payment-plan__period { color: var(--color-gray); display: inline; }
+.payment-plan__features { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-direction: column; gap: var(--spacing-xs); }
+.payment-plan__feature {
+    display: flex; align-items: center; gap: var(--spacing-xs);
+    color: var(--color-darkGray);
+}
+.payment-plan__feature::before { content: '✓'; font-weight: 700; color: var(--color-success); }
+.payment-plan__button {
+    width: 100%; padding: 14px;
+    border-radius: var(--radius-card); border: none; cursor: pointer;
+    font-weight: 700;
+    transition: all 0.12s;
+}
+.payment-plan__button--primary { background: var(--color-main); color: #ffffff; }
+.payment-plan__button--primary:hover { background: var(--color-infoLink); }
+.payment-plan__button--outline { background: var(--color-deepWhite); color: var(--color-darkGray); border: 1px solid var(--color-whiteLine); }
+.payment-plan__button--outline:hover { border-color: var(--color-main); color: var(--color-main); }
+
+@media (max-width: 767px) {
+    .payment-plan__list {
+        flex-direction: column;
+        align-items: center;
+        gap: var(--spacing-m);
+    }
+    /* 카드가 flex-grow로 row를 꽉 채우지 않도록 고정, 가운데 정렬 */
+    .payment-plan__list > .payment-plan__card {
+        flex: none;
+        width: 100%;
+        max-width: 360px;
+        align-self: center;
+    }
+}

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

@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react';
+import "./PaymentPlan.css";
+/** @public */
+export interface PaymentPlanTier {
+    id: string | number;
+    label?: string;
+    /** DB 상품 코드(서버 상품 목록에서 병합) — 구매 시 사용 */
+    code?: string;
+    badge?: string | null;
+    price?: string;
+    /** 기간별 현재 가격. key는 period 값(예: `"monthly"`, `"yearly"`) */
+    prices?: Record<string, string>;
+    /** 기간별 원래 가격(취소선 표시). null이면 표시하지 않습니다. */
+    originals?: Record<string, string | null>;
+    /** true이면 흰 배경 + 키 색상 테두리 강조 스타일 적용 */
+    highlight?: boolean;
+    /**
+     * 할인 배지에 '오픈 특가'를 함께 얹는다 — **표시 전용**.
+     * 계정당 1회 제한은 라벨의 '오픈 특가' 문자열로 판정하므로, 이 플래그만으로는
+     * 구매 횟수가 제한되지 않는다(같은 프로모션이되 1회 제한 대상은 아닌 tier용).
+     */
+    openPromo?: boolean;
+    [k: string]: unknown;
+}
+/** @public */
+export interface PaymentPlanData {
+    id: string | number;
+    title?: string;
+    /** 서비스명(말귀/말귀매니저). 카드 로고·표기용. title에서 파싱하지 않고 별도 저장. */
+    service?: string;
+    /** 플랜 티어명(스탠다드/라이트/프로 등). 카드 헤드라인용. */
+    tier?: string;
+    subtitle?: string;
+    quote?: string;
+    /** CSS 색상 토큰. `'main'` | `'sub'` | 기타 → gray */
+    colorToken?: 'main' | 'sub' | string;
+    recommendedFor?: string[];
+    features?: string[];
+    tiers?: PaymentPlanTier[];
+    cardBadge?: string;
+    [k: string]: unknown;
+}
+/** @public */
+export interface PaymentPlanProps {
+    plan: PaymentPlanData;
+    onSelect?: (tier: PaymentPlanTier & {
+        productId: string | number;
+        productTitle?: string;
+        preview?: ReactNode;
+    }) => void;
+    /** 가격 표시 기준 기간. 기본값: `'monthly'` */
+    period?: string;
+    /** 보유(환불 제외) 상품 코드. 이미 산 오픈특가(계정당 1회) tier는 숨기고 기본 tier를 카드로 승격. */
+    ownedCodes?: string[];
+}
+/** @public */
+export default function PaymentPlan(props: PaymentPlanProps): import("react").JSX.Element;

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

@@ -0,0 +1,126 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import "./PaymentPlan.css";
+import Badge from "./Badge";
+import Button from "./Button";
+import Icon from "./Icon";
+import PassCard from "./PassCard/PassCard";
+import PassCardBgSoundMove from "./PassCard/PassCardBgSoundMove";
+import PassCardBgSoundLine from "./PassCard/PassCardBgSoundLine";
+import PassCardBgTalkV1 from "./PassCard/PassCardBgTalkV1";
+import { toWonSymbol } from "../utils/format";
+/** 매니저 라이트/스탠다드/프로 플랜별 PassCard 배경 override.
+ *  plan.id(로케일 독립)로 분기 — 이전엔 title(한국어)로 분기해 EN 로케일에서 배경이 누락됐음.
+ *  말귀(speechear)는 override하지 않음 — PassCard가 type만으로 스스로 TwoCircle을 도출(getDefaultBg). */
+function renderPlanBg(isOrg, planId) {
+    if (!isOrg)
+        return undefined; // 말귀(speechear) → PassCard 기본 배경
+    if (planId === 'manager_pro')
+        return _jsx(PassCardBgTalkV1, {});
+    if (planId === 'manager_standard')
+        return _jsx(PassCardBgSoundLine, {});
+    if (planId === 'manager_lite')
+        return _jsx(PassCardBgSoundMove, {});
+    return undefined; // 그 외 → PassCard 기본 배경
+}
+/** '₩7,500' → 통화기호(작게) + 숫자(크게). PassCard 가격 표기와 동일. */
+function renderPriceParts(raw) {
+    const s = toWonSymbol(raw);
+    if (!s)
+        return null;
+    const m = s.match(/^([^\d]*)([\d.,]+)(.*)$/);
+    if (!m)
+        return s;
+    const [, pre, num, post] = m;
+    return (_jsxs(_Fragment, { children: [pre && _jsx("span", { className: "payment-plan__pricing-symbol h4", children: pre }), num, post.trim() && _jsx("span", { className: "payment-plan__pricing-symbol h4", children: post.trim() })] }));
+}
+/** @public */
+export default function PaymentPlan(props) {
+    const { t } = useTranslation();
+    const { plan, onSelect, period = "monthly", ownedCodes } = props || {};
+    const owned = (code) => !!code && !!ownedCodes?.includes(code);
+    // 이 플랜의 오픈특가 tier를 이미 보유(구매)했는지 — 그러면 기본 tier를 카드로 승격
+    const openSoldOut = (plan.tiers || []).some(tr => /오픈\s*특가/.test(tr.label ?? '') && owned(tr.code));
+    // 할인 tier 가 정가를 취소선으로 이미 보여 주면, 같은 값을 가진 정가 행은 같은 상품을 두 번
+    // 늘어놓는 셈이 된다(30일 이용권 ₩10,000 행 + 30일 ₩10,000→₩5,000 카드). 그 행은 숨긴다.
+    const coveredByDiscount = (tier) => {
+        const price = tier.prices ? tier.prices[period] : tier.price;
+        if (!price)
+            return false;
+        return (plan.tiers || []).some(tr => !!tr.badge && tr.originals?.[period] === price);
+    };
+    const color = plan.colorToken
+        ? `var(--color-${plan.colorToken})`
+        : "var(--color-gray)";
+    const freePrice = t('payment.plan.freePrice', '무료');
+    // 견적문의 가격 문구(로케일별: '문의'/'Contact us') — 하드코딩 '문의'만 비교하면 EN에서 미감지됨
+    const inquiryPrice = t('payment.products.mgrEnterprise.tier.price', '문의');
+    const tierPriceOf = (tier) => (tier.prices ? tier.prices[period] : tier.price);
+    const isFree = (plan.tiers || []).length > 0 && (plan.tiers || []).every(tier => {
+        const price = tierPriceOf(tier);
+        return price === "무료" || price === freePrice || price === "0원";
+    });
+    // 맞춤 견적(문의) 플랜 — 가격이 '문의'(ko) 또는 로케일 견적 문구
+    const isInquiry = (plan.tiers || []).length > 0 && (plan.tiers || []).every(tier => {
+        const price = tierPriceOf(tier);
+        return price === "문의" || price === inquiryPrice;
+    });
+    // 가격 tier → PassCard 매핑용
+    const isOrgPlan = plan.group === 'org';
+    const passType = isOrgPlan ? 'manager' : 'speechear';
+    return (_jsxs("div", { className: "payment-plan__card", style: { borderColor: color, '--plan-color': color }, children: [plan.cardBadge && (_jsx("div", { className: "payment-plan__card-badge", children: _jsx(Badge, { label: plan.cardBadge, variant: "main", size: "medium", fill: "soft" }) })), _jsxs("div", { className: "payment-plan__title", children: [_jsx("p", { className: "payment-plan__quote body-3b", style: { color }, children: plan.quote || ' ' }), _jsx("h3", { className: "payment-plan__title-heading h1", children: plan.tier ?? plan.title }), _jsx("p", { className: "payment-plan__subtitle body-3", children: plan.subtitle })] }), _jsxs("div", { className: "payment-plan__box", children: [_jsx("span", { className: "payment-plan__box-title body-3b", children: t('payment.plan.recommendedFor', '이런 분께 추천합니다.') }), _jsx("ul", { className: "payment-plan__feature-list", children: (plan.recommendedFor || []).map((r, i) => (_jsxs("li", { className: "payment-plan__feature-item body-3", children: [_jsx(Icon, { icon: "check", size: 18, className: "payment-plan__feature-check", wrapperStyle: { color } }), r] }, i))) })] }), _jsxs("div", { className: "payment-plan__box", children: [_jsx("span", { className: "payment-plan__box-title body-3b", children: t('payment.plan.features', '핵심 기능') }), _jsx("ul", { className: "payment-plan__feature-list", children: (plan.features || []).map((f, i) => (_jsxs("li", { className: "payment-plan__feature-item body-3", children: [_jsx(Icon, { icon: "check", size: 18, className: "payment-plan__feature-check", wrapperStyle: { color } }), f] }, i))) })] }), _jsx("div", { className: "payment-plan__card-pricing", children: isFree ? (
+                /* 무료는 아무것도 하지 않아도 쓰고 있는 상태다 — 살 것이 없으므로 이 자리에
+                   둘 것이 없다. 전엔 '무료로 시작하기'가 유료와 같은 구매 플로우(확인 모달 →
+                   구매 RPC)로 들어갔고, 무료 상품에 code 가 없으면 '구매 처리에 실패했습니다'
+                   까지 떴다. 누구나 쓸 수 있다는 사실은 카드 위 quote 로 알린다. */
+                null) : isInquiry ? (
+                /* 문의는 실제로 할 일이 있는 행동이라 버튼을 둔다 — 페이지 하단 문의 버튼과
+                   같은 공용 Button(variant=main)으로 맞춘다. */
+                _jsx(Button, { className: "payment-plan__contact-button", label: t('payment.plan.contact', { defaultValue: '문의하기' }), variant: "main", size: 56, onClick: () => plan.tiers?.[0] && onSelect?.({ ...plan.tiers[0], productId: plan.id, productTitle: plan.title }) })) : (_jsx(_Fragment, { children: _jsx("div", { className: "payment-plan__pricing-list", children: (plan.tiers || []).map((tier) => {
+                            const rawLabel = tier.label || '이용권';
+                            // 라벨의 '오픈 특가'는 계정당 1회 제한의 표시다 — 숨김·소진 판정에만 쓴다.
+                            const isOnceOnly = /오픈\s*특가/.test(rawLabel);
+                            // 배지 문구는 별도 — 같은 프로모션이되 1회 제한은 없는 tier(1년권)도 함께 얹는다.
+                            const showOpenPromo = isOnceOnly || tier.openPromo === true;
+                            const planText = rawLabel.replace(/^오픈\s*특가\s*/, '') || '이용권';
+                            const curPrice = tier.prices ? tier.prices[period] : tier.price;
+                            const discount = tier.badge ? (showOpenPromo ? `오픈 특가\n${tier.badge}` : tier.badge) : undefined;
+                            // 이미 구매한 오픈특가(계정당 1회)는 결제 화면에서 숨긴다.
+                            if (isOnceOnly && owned(tier.code))
+                                return null;
+                            // 할인 없는 기본 tier(예: 30일 이용권) → 기존 행 버튼. 할인 tier(오픈특가/1년) → PassCard.
+                            // 단, 이 플랜의 오픈특가가 소진(openSoldOut)됐으면 기본 tier를 카드로 승격해 노출한다.
+                            if (!tier.badge && !openSoldOut) {
+                                if (coveredByDiscount(tier))
+                                    return null;
+                                return (_jsxs("div", { className: `payment-plan__pricing-row payment-plan__pricing-row--static${tier.highlight ? ' payment-plan__pricing-row--highlight' : ''}`, children: [_jsx("div", { className: "payment-plan__pricing-row-title", children: _jsx("div", { className: "payment-plan__pricing-row-label h5b", children: tier.label }) }), _jsx("div", { className: "payment-plan__pricing-row-price", children: _jsx("span", { className: "payment-plan__pricing-current h1", children: renderPriceParts(curPrice) }) })] }, tier.id));
+                            }
+                            // PassCard 객체화: 개별 표시값을 주입하지 않고 상품 서술자(product) 하나만 넘겨
+                            // 카드가 스스로 도출한다. type=서비스(말귀/매니저), name=기간(30일/1년 → 큰 글씨),
+                            // label=플랜 티어명(스탠다드/라이트/프로 → 접미 '{티어} 이용권'). bg만 플랜별 배경 override.
+                            const tierName = plan.tier ?? (isOrgPlan ? plan.title : undefined);
+                            const cardEl = (_jsx(PassCard, { showPrice: true, product: {
+                                    type: passType,
+                                    code: tier.code,
+                                    name: planText,
+                                    label: tierName,
+                                    price: curPrice,
+                                    // 정가를 함께 넘긴다 — 이게 없으면 '50% 할인 ₩5,000' 만 보이고
+                                    // 무엇의 50% 인지 화면 어디에도 나오지 않는다(특히 1년권).
+                                    originalPrice: tier.originals?.[period] ?? undefined,
+                                    discountLabel: discount,
+                                }, bg: renderPlanBg(isOrgPlan, plan.id) }));
+                            const selectTier = () => onSelect?.({ ...tier, productId: plan.id, productTitle: plan.title, preview: cardEl });
+                            return (
+                            // 요금제 카드는 클릭만 받고 있어 키보드로는 결제 단계로 갈 수 없었다.
+                            _jsx("div", { className: "payment-plan__pricing-card", onClick: selectTier, onKeyDown: onSelect ? (e) => {
+                                    if (e.target !== e.currentTarget)
+                                        return;
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                        e.preventDefault();
+                                        selectTier();
+                                    }
+                                } : undefined, role: onSelect ? 'button' : undefined, tabIndex: onSelect ? 0 : undefined, children: cardEl }, tier.id));
+                        }) }) })) })] }));
+}

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

@@ -0,0 +1,72 @@
+/* 인물 소개 카드 — 원형 사진 + 이름/직함 + 경력 목록 */
+.person-card {
+  display: flex;
+  flex-direction: column;
+}
+
+.person-card__photo {
+  margin-inline: auto;
+  max-width: 100%;
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  background: var(--color-surface-raised);
+  flex-shrink: 0;
+}
+
+.person-card__photo > img,
+.person-card__photo > * {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.person-card__name {
+  font-size: var(--text-h4-size);
+  line-height: var(--text-h4-line);
+  font-weight: var(--text-h4-weight-bold);
+  margin-top: var(--spacing-xl);
+  text-align: center;
+  color: var(--color-text-primary);
+}
+
+.person-card__role {
+  font-size: var(--text-body-3-size);
+  line-height: var(--text-body-3-line);
+  font-weight: var(--text-body-3-weight);
+  margin-top: 6px;
+  text-align: center;
+  color: var(--color-darkGray);
+}
+
+/*
+ * 글줄은 왼쪽으로 읽히되 덩어리는 가운데에 놓는다.
+ * text-align:center 로 하면 줄마다 시작점이 달라져 목록이 읽기 어려워진다.
+ * fit-content 로 가장 긴 줄에 폭을 맞추고 그 상자를 가운데로 민다.
+ */
+.person-card__credentials {
+  margin: var(--spacing-xl) auto 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  width: fit-content;
+  max-width: 100%;
+  text-align: left;
+}
+
+/* 경력은 여러 줄로 읽는 본문이라 caption(12px)으로는 작다 */
+.person-card__credentials > li {
+  font-size: var(--text-body-3-size);
+  line-height: var(--text-body-3-line);
+  color: var(--color-darkGray);
+}
+
+@media (max-width: 767px) {
+  .person-card__name {
+    margin-top: var(--spacing-l);
+  }
+  .person-card__credentials {
+    margin-top: var(--spacing-l);
+  }
+}

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

@@ -0,0 +1,27 @@
+import './PersonCard.css';
+import type { ReactNode } from 'react';
+/** @public */
+export interface PersonCardProps {
+    /** 이름 */
+    name: string;
+    /** 직함·역할 (예: CTO) */
+    role?: string;
+    /** 사진 URL. 프레임워크 이미지 컴포넌트를 쓰려면 `media`를 대신 넘긴다 */
+    photo?: string;
+    /**
+     * 사진 자리에 직접 넣을 노드. `next/image` 같은 최적화 컴포넌트를 주입할 때 사용한다.
+     * 지정하면 `photo`는 무시된다.
+     */
+    media?: ReactNode;
+    /** 학위·경력 등 목록 */
+    credentials?: string[];
+    /** 원형 사진 지름(px). 기본 190 */
+    size?: number;
+    className?: string;
+}
+/**
+ * 인물 소개 카드 — 원형 사진 위에 이름·직함, 아래에 경력 목록을 세로로 쌓는다.
+ * 회사 소개의 운영진 섹션, 연구진 목록 등에 사용.
+ * @public
+ */
+export default function PersonCard({ name, role, photo, media, credentials, size, className, }: PersonCardProps): import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import './PersonCard.css';
+/**
+ * 인물 소개 카드 — 원형 사진 위에 이름·직함, 아래에 경력 목록을 세로로 쌓는다.
+ * 회사 소개의 운영진 섹션, 연구진 목록 등에 사용.
+ * @public
+ */
+export default function PersonCard({ name, role, photo, media, credentials, size = 190, className = '', }) {
+    return (_jsxs("div", { className: cx('person-card', className), children: [_jsx("div", { className: "person-card__photo", style: { width: size, height: size }, children: media ?? (photo ? _jsx("img", { src: photo, alt: role ? `${name} ${role}` : name }) : null) }), _jsx("h3", { className: "person-card__name", children: name }), role ? _jsx("p", { className: "person-card__role", children: role }) : null, credentials?.length ? (_jsx("ul", { className: "person-card__credentials", children: credentials.map((line) => (_jsx("li", { children: line }, line))) })) : null] }));
+}

package/dist/packages/core/src/components/Popup/ConfirmPopup.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from 'react';
+import { type ButtonVariant } from '../Button';
+/** @public */
+export interface ConfirmPopupProps {
+    /** 팝업 제목 */
+    title: ReactNode;
+    /** 본문 메시지 */
+    message: ReactNode;
+    /** details/message 위(본문 최상단)에 놓을 콘텐츠 — 미리보기 카드 등. 가운데 정렬. */
+    topContent?: ReactNode;
+    /**
+     * 결정에 필요한 정보를 표(header 없는 Panel)로 message 위에 보여줄 때 사용.
+     * 결제 요약·환불 정보 등 "확인에 필요한 항목"을 매번 Panel로 짜지 않도록 표준화한 슬롯.
+     */
+    details?: {
+        label: ReactNode;
+        value: ReactNode;
+    }[];
+    /** message 아래에 덧붙일 추가 콘텐츠 (예: 에러 문구) */
+    children?: ReactNode;
+    /** 확인 버튼 라벨 (기본: 공통 '확인') */
+    confirmLabel?: string;
+    /** 취소 버튼 라벨 (기본: 공통 '취소') */
+    cancelLabel?: string;
+    /** 확인 버튼 variant (기본 'main'. 삭제 등 파괴적 동작은 'danger') */
+    confirmVariant?: ButtonVariant;
+    /** 확인 버튼 비활성화 (처리 중 등) */
+    confirmDisabled?: boolean;
+    /** true면 취소 버튼을 숨긴다(단순 안내·닫기 전용). 기본 false */
+    hideCancel?: boolean;
+    /** 확인/취소 왼쪽에 놓는 부가 액션(삭제 등). 클릭 후 팝업이 닫힌다. */
+    extraAction?: {
+        label: ReactNode;
+        variant?: ButtonVariant;
+        onClick: () => void;
+    };
+    /**
+     * 확인 클릭 시 실행. `close`로 직접 닫을 수 있음(async 지원).
+     * 기본은 onConfirm 완료 후 자동으로 닫힘(closeOnConfirm).
+     */
+    onConfirm: (close: () => void) => void | Promise<void>;
+    /** false면 자동으로 닫지 않음 — onConfirm이 전달받은 close로 닫힘 시점을 제어 (성공 시에만 닫기 등). 기본 true */
+    closeOnConfirm?: boolean;
+    /** 취소/닫기 시 호출 (보통 상태 초기화) */
+    onClose: () => void;
+    /** portal 없이 부모 컨테이너에 제자리 렌더 (목업/데모용) */
+    inline?: boolean;
+    /** 패널 최대 가로폭. 확인창 기본은 'small'(640px) */
+    size?: 'small' | 'medium' | 'large';
+    className?: string;
+}
+/**
+ * 취소/확인 두 버튼을 가진 표준 확인 다이얼로그.
+ * 삭제 확인 등 단순 yes/no 흐름을 매번 Popup+buttons로 직접 짜지 않도록 분리한 래퍼.
+ * 로딩/에러(children)·조건부 닫힘(closeOnConfirm)도 지원한다.
+ * @public
+ */
+export default function ConfirmPopup(props: ConfirmPopupProps): import("react").JSX.Element;