/* sa-structure-panel.jsx — SA 캠페인·그룹·소재 "구조" 매트릭스.
GFA는 오디언스/관심사 세그먼트 매트릭스(노출 ON·예산비중)로 표현되지만, SA는 그 패러다임이
그대로 이식되지 않는다 — SA는 실제 계정 객체계층(campaignTp → adgroupType → adType)이고,
층위마다 지원하는 요소(키워드매칭·확장소재·타겟·Criterion 입찰축)가 구조적으로 다르다
(예: PLACE엔 키워드 자체가 없음, BRAND_SEARCH엔 실시간 입찰이 없음).
이 패널은 그 구조를 SASpec(순수 레퍼런스, src/data/sa-spec.js)로 게이팅해 "이 층위에서
실제로 무엇을 만들 수 있는가"를 보여준다 — GFA 매트릭스의 복사가 아니라 SA 고유 축.
★모든 요소에 confidence(documented/observed/inferred/unconfirmed) 배지 — 거짓정밀 금지(DP-4).
*/
const { useState: useSSState, useMemo: useSSMemo, useEffect: useSSEffect } = React;
const SS_CONF_TONE = { documented: 'plant', observed: 'cyan', inferred: 'signal', unconfirmed: 'alert' };
const SS_CONF_LABEL = { documented: '가능', observed: '실측관측', inferred: '구조추론', unconfirmed: '미확인' };
const SS_BID_UNIT_LABEL = { keyword: '키워드', mixed: '혼합', contract: '계약(기간)', campaign: '캠페인', 'product-or-none': '상품/없음' };
const SS_AXIS_LABEL = { gender_age: '성별×연령', gender: '성별', age: '연령', device: '디바이스', daypart: '시간대', region: '지역' };
function SSConfBadge({ c }) {
const tone = SS_CONF_TONE[c] || 'alert';
return {SS_CONF_LABEL[c] || c};
}
function SSGroup({ title, items, render, empty }) {
return (
{title} {items.length}
{items.length === 0 ?
{empty}
:
{items.map(render)}
}
);
}
function SAStructurePanel({ brand }) {
const SASpec = window.SASpec;
if (!SASpec) return
SASpec 엔진 로드 대기.
;
const campaignList = Object.keys(SASpec.CAMPAIGN_TYPES);
const [campaignTp, setCampaignTp] = useSSState('WEB_SITE');
const [adgroupType, setAdgroupType] = useSSState('');
const [adType, setAdType] = useSSState('');
const camp = SASpec.CAMPAIGN_TYPES[campaignTp];
const adgroupOpts = camp ? camp.adgroupTypes : [];
const adTypeOpts = (adgroupType && SASpec.ADGROUP_TYPES[adgroupType]) ? SASpec.ADGROUP_TYPES[adgroupType].adTypes : [];
function pickCampaign(id) { setCampaignTp(id); setAdgroupType(''); setAdType(''); }
function pickAdgroup(id) { setAdgroupType(id); setAdType(''); }
const layer = useSSMemo(() => SASpec.matrixForLayer(campaignTp, adgroupType || undefined, adType || undefined),
[campaignTp, adgroupType, adType]);
// 브랜드 입찰축(daypart/region/gender_age/device) — 이 campaignTp가 실제 지원하는 축만
// (campaignTypeGate가 diagnose-matrix.js 내부에서 이미 필터링, 여기선 재구현 없이 결과만 소비).
// ★2026-07-18: 로컬 window.DiagnoseMatrix.build() 직접실행 → 서버 배포본(api/sa-structure.mjs)
// 원격호출로 전환 — 첼로(progress_kit)가 부르는 것과 동일한 엔진 코드를 항상 최신 배포본으로
// 공유하기 위함(파일 이식·양방향 동기화 대신 "소스 하나 + 원격호출"). same-origin fetch라
// CORS/추가인증 불필요(api/sa-structure.mjs 참조). 선택이 바뀔 때만 재요청(타이핑 단위 아님).
const [bidCells, setBidCells] = useSSState(null);
useSSEffect(() => {
if (!brand) { setBidCells(null); return; }
let ignore = false;
setBidCells(null); // 조회 중(스켈레톤) — 이전 캠페인유형 결과를 오인 표시하지 않도록 즉시 비움
fetch('/api/sa-structure?brand_id=' + encodeURIComponent(brand) + '&campaign_type=' + encodeURIComponent(campaignTp))
.then(r => r.json())
.then(out => { if (!ignore) setBidCells((out && out.sa_cells) || []); })
.catch(() => { if (!ignore) setBidCells([]); });
return () => { ignore = true; };
}, [brand, campaignTp]);
const bidGroups = {};
(bidCells || []).forEach(c => { (bidGroups[c.axis] = bidGroups[c.axis] || []).push(c); });
const bidAxes = Object.keys(bidGroups);
return (
SA 계정 구조 관점 매트릭스 — GFA(오디언스 세그먼트)와는 별개 축입니다. 실제 SA API 계층
(캠페인 → 광고그룹 → 소재)에서 이 층위가 실제로 지원하는 요소만 표시합니다. 캠페인 유형에 따라
키워드·확장소재·타겟·입찰조정축이 구조적으로 달라집니다(예: 플레이스는 키워드가 없고, 브랜드검색은 실시간 입찰이 없습니다).