{/* product block */}
{showProduct && (
4 ? '4%' : '7%', top: '50%',
transform: 'translateY(-50%)',
width: wide > 4 ? '18%' : (wide > 2 ? '30%' : '40%'),
aspectRatio: '1', borderRadius: '50%',
background: 'rgba(255,255,255,0.14)',
border: '1px solid rgba(255,255,255,0.22)',
boxShadow: 'inset 0 0 40px rgba(255,255,255,0.1)',
}} />
)}
{/* badge */}
4 ? '50%' : '14%',
left: wide > 4 ? 'auto' : '8%', right: wide > 4 ? '4%' : 'auto',
transform: wide > 4 ? 'translateY(-50%) rotate(-4deg)' : 'rotate(-4deg)',
background: d.accent, color: '#1a1530',
fontWeight: 800, fontSize: `${Math.max(10, 13 * scale)}px`,
padding: '3px 9px', borderRadius: '6px', letterSpacing: '-0.02em',
boxShadow: '0 3px 10px rgba(0,0,0,0.2)',
}}>{d.badge}
{/* text */}
{d.head}
{d.sub}
{d.cta} →
);
}
// ── 더미 라이브러리 시드 — 카테고리(배너 타입) × 가이드(레이아웃/유형) ──
// 앱푸시 카드 4종(기본형·방송기재·로고형·리딩콘텐츠형). 이전 5종은 아래 주석 참고(복원용).
// const _PUSH_TYPES = ['기본 타입', '방송시간 기재 타입', '로고강조+오늘혜택좋은브랜드 타입', '자유 타입', '쿠폰 타입'];
const _PUSH_TYPES = ['기본형', '방송기재', '로고형', '리딩콘텐츠형'];
// H1 카드 — 분할형(2·3·4분할)을 단일 '분할형' 카드로 통합(에디터는 여전히 2/3/4 후보 모두 생성 → 다양성 유지).
const _PROD_TYPES = ['A 누끼형', 'B 분할+누끼형', 'C 분할형', 'D 풀이미지형'];
// ── 어제 업로드한 실제 더미 배너 이미지 — 타입별 ──
const H1_IMG = Array.from({ length: 11 }, (_, i) => `assets/h1/h1-${String(i + 1).padStart(2, '0')}.jpg`);
const PUSH_IMG = ['assets/push/push-01.jpg', 'assets/push/push-02.jpg', 'assets/push/push-03.jpg', 'assets/push/push-04.jpg', 'assets/push/push-05.jpg', 'assets/push/push-06.png', 'assets/push/push-07.jpg'];
// 앱푸시 카드(배너 만들기) 전용 썸네일 — 유형순: 기본형·방송기재·로고형·리딩콘텐츠형. (PUSH_IMG 공유 풀과 분리)
const _PUSH_CARD_IMG = ['assets/push/card-basic.png', 'assets/push/card-airtime.png', 'assets/push/card-logo.png', 'assets/push/card-reading.png'];
const G550_IMG = Array.from({ length: 8 }, (_, i) => `assets/g550/g550-${String(i + 1).padStart(2, '0')}.jpg`);
const T1E_IMG = ['assets/1e-top/editorial-01.jpg', 'assets/1e-top/nukki-01.jpg']; // 1E: 화보형·누끼형 실제 샘플
// ── 가이드(카드) → 만들기 화면 유형/레이아웃 매핑 (스키마 id) ──
// 카드 선택 시 만들기 페이지 헤더 드롭다운이 이 값으로 초기화된다.
// 기본형·방송기재·로고형·리딩콘텐츠형 = 스키마(schema-push) 실제 유형 id 와 정확히 일치해야 편집기가 해당 유형으로 열림.
// (과거 'logohit'/'reading' 은 스키마에 없어 무조건 기본형으로 폴백됐음 → 'logo'/'leading' 로 교정.)
// const _PUSH_TYPE_IDS = ['basic', 'airtime', 'logohit', 'free', 'coupon'];
const _PUSH_TYPE_IDS = ['basic', 'airtime', 'logo', 'leading'];
const _ONE_E_TYPE_IDS = ['editorial', 'A'];
const _PROD_VARIANTS = [
{ layoutId: 'nukki' },
{ layoutId: 'split-nukki' },
{ layoutId: 'split' }, // 통합 분할형 — 에디터가 2/3/4 후보 모두 생성
{ layoutId: 'full' },
];
// 상품배너 550 전용 카드 — 분할형(2·3·4분할)을 단일 '분할형' 카드로 통합(에디터는 여전히 2/3/4 후보를 모두 생성 → 다양성 유지).
const _PROD_TYPES_550 = ['A 누끼형', 'B 분할+누끼형', 'C 분할형', 'D 풀이미지형'];
const _PROD_VARIANTS_550 = [
{ layoutId: 'nukki' },
{ layoutId: 'split-nukki' },
{ layoutId: 'split' },
{ layoutId: 'full' },
];
// 카드 썸네일: 누끼·분할+누끼는 기존 이미지, 분할형·풀이미지는 사용자 지정 이미지.
const _G550_CARD_IMG = [G550_IMG[0], G550_IMG[1], 'assets/g550/card-split.png', 'assets/g550/card-full.png'];
// H1 카드 썸네일 — 누끼형=기존(h1-01) 유지 · 분할+누끼=마네킹+모델 · 분할형=4컷 모델 · 풀이미지=폴로 더미(사용자 지정).
const _H1_CARD_IMG = [H1_IMG[0], 'assets/h1/card-split-nukki.png', 'assets/h1/card-split.png', 'assets/h1/card-full.png'];
let _gid = 0;
// thumb = 실제 업로드 이미지(어제 적용한 17개). BannerMock CSS 프리뷰는 사용하지 않음.
const _g = (base, name, banners, conf, thumb, variant) => ({
...base, id: 'd-' + (++_gid), name, category: base.bannerType,
layoutTypes: [name], thumb, banners, confidence: conf, ...(variant || {}),
});
const DUMMY_GUIDES = [
// 1. 앱푸시 (4) — 기본형·방송기재·로고형·리딩콘텐츠형 (카드 전용 썸네일 _PUSH_CARD_IMG)
..._PUSH_TYPES.map((t, i) => _g(GUIDE_B, t, 12 - i, 90 - i, _PUSH_CARD_IMG[i], { pushType: _PUSH_TYPE_IDS[i] })),
// 2. 상품배너 550 (5) — 분할형 통합 + 분할형/풀이미지 카드 이미지 지정 + 보험형(E)
..._PROD_TYPES_550.map((t, i) => _g(GUIDE_C, t, 16 - i, 91 - i, _G550_CARD_IMG[i], _PROD_VARIANTS_550[i])),
_g(GUIDE_C, 'E 보험형', 12, 87, 'assets/g550/card-insurance.png', { layoutId: 'insurance' }), // 보험(E) — 이름 '보험'으로 편집기 E 진입(guideToTypeId)
// 3. 상품배너 H1 (5) — 분할형 통합(4종) + 보험형(E). 카드 이미지 = _H1_CARD_IMG.
..._PROD_TYPES.map((t, i) => _g(GUIDE_A, t, 22 - i, 93 - i, _H1_CARD_IMG[i], _PROD_VARIANTS[i])),
_g(GUIDE_A, 'E 보험형', 15, 87, 'assets/h1/card-insurance.png', { layoutId: 'insurance' }), // 보험(E) — 이름 '보험'으로 편집기 E 진입(guideToTypeId)
// 4. 1E 기술서상단 (2) — 화보형·누끼형
...['화보형', '누끼형'].map((t, i) => _g(GUIDE_1E, t, 9 - i, 92 - i, T1E_IMG[i], { oneEType: _ONE_E_TYPE_IDS[i] })),
];
// ── H1 / 550 배너 유형 분류 (작업요청서 기준) ──
const BANNER_TYPES = [
{ id: 'A', name: '누끼형', subs: [
{ id: 'A1', label: '모델', model: true, product: false },
{ id: 'A2', label: '상품+모델', model: true, product: true },
{ id: 'A3', label: '상품', model: false, product: true },
] },
{ id: 'B', name: '분할+누끼형', subs: [
{ id: 'B1', label: '상품+화보', model: false, product: true },
] },
{ id: 'C', name: '분할형', subs: [
{ id: 'C1', label: '2분할' },
{ id: 'C2', label: '3분할' },
{ id: 'C3', label: '4분할' },
] },
{ id: 'D', name: '풀이미지형', subs: [
{ id: 'D1', label: '풀이미지' },
] },
{ id: 'E', name: '보험', note: '보험만 가능', subs: [
{ id: 'E1', label: '보험명' },
{ id: 'E2', label: '보험명+모델' },
] },
];
/* ---------------- TypeSelect — 유형 선택 드롭다운 (현재 유형 표시) ---------------- */
function TypeSelect({ value, options, onChange, placeholder }) {
const [open, setOpen] = React.useState(false);
const ref = React.useRef(null);
React.useEffect(() => {
if (!open) return;
const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', onDoc);
return () => document.removeEventListener('mousedown', onDoc);
}, [open]);
const cur = options.find((o) => o.id === value) || options[0];
return (
{open &&
{options.map((o) =>
)}
}
);
}
Object.assign(window, { S2Icon, TypeSelect, COLLECTED, GUIDE_A, GUIDE_B, GUIDE_C, GUIDE_IMG, DUMMY_GUIDES, BannerMock, H1_IMG, PUSH_IMG, G550_IMG, BANNER_TYPES });