{}}
initialCategories={blank ? [] : SEED_CATEGORIES}
initialGuides={blank ? [] : SEED_GUIDES}
initialActiveCategory={activeCat}
initialActiveGuideId={activeGid}
persistKey={persist}
editorId={editorId} />);
}
// 초대/비밀번호 재설정 링크 진입 시 새 비밀번호 설정 화면
const EyeIcon = ({ off }) => off ?
:
;
function SetPasswordScreen({ onDone }) {
const [pw, setPw] = useState("");
const [pw2, setPw2] = useState("");
const [show, setShow] = useState(false);
const [busy, setBusy] = useState(false);
const [err, setErr] = useState("");
const submit = async (e) => {
e && e.preventDefault();
setErr("");
if (pw.length < 6) {setErr("비밀번호는 6자 이상이어야 해요");return;}
if (pw !== pw2) {setErr("비밀번호가 일치하지 않아요");return;}
setBusy(true);
const r = window.__auth && window.__auth.updatePassword ? await window.__auth.updatePassword(pw) : { ok: false, error: "서버 설정이 없습니다" };
setBusy(false);
if (r && r.ok) onDone && onDone();else setErr((r && r.error) || "설정에 실패했어요. 링크가 만료되었을 수 있어요.");
};
const field = (val, set, ph, auto) =>
set(e.target.value)} style={{ width: "100%", boxSizing: "border-box", paddingRight: 42 }} />
;
return (
비밀번호 설정
Bannerly 사용을 위해 새 비밀번호를 설정해 주세요.
);
}
function IntegratedApp() {
// 인증 상태: authReady=세션 확인 완료 여부, user=로그인 사용자(없으면 로그인 화면)
const [authReady, setAuthReady] = useState(false);
const [user, setUser] = useState(null);
const [needPwSet, setNeedPwSet] = useState(!!window.__BANNERLY_PWSET);
const loggedIn = !!user;
const [tabs, setTabs] = useState([]); // editor tabs: { id, name }
const [active, setActive] = useState("home"); // "home" | tab.id
// [보류] 관리자 영역을 임시로 숨김: 기본 권한을 "user"로 고정하고 관리자/사용자 토글 버튼을 제거함.
// 관리자 코드·진입로(canCreate 게이팅)는 삭제하지 않고 그대로 둠 — role 을 "admin"으로 되돌리고
// 아래 imode-toggle 블록을 복원하면 관리자 영역이 다시 노출된다.
const [role, setRole] = useState("user"); // "admin" | "user" — 실제 권한(프로필)
const [viewAsUser, setViewAsUser] = useState(false); // 관리자가 '사용자 화면'으로 전환
const [brandGuides, setBrandGuides] = useState(window.BRAND_GUIDES);
const [brandOpen, setBrandOpen] = useState(false);
const [homeNav, setHomeNav] = useState(null); // Studio2App 이 발행하는 워크스페이스 네비 상태
const [publishConfirm, setPublishConfirm] = useState(false);
const [importConfirm, setImportConfirm] = useState(null); // 불러오기 확인 대기 데이터
const [showAccountSettings, setShowAccountSettings] = useState(false);
const fileRef = useRef(null);
const [toast, setToast] = useState(null);
const showToast = (m) => {setToast(m);setTimeout(() => setToast(null), 2200);};
// ---- 백업 내보내기 / 불러오기 ----
const handleExport = () => {
const api = window.__bannerlyEditors && window.__bannerlyEditors[active];
if (!api) {showToast("내보낼 편집기가 없습니다");return;}
const res = api.exportBackup();
if (res && res.ok) showToast(`백업 파일을 내보냈습니다 (가이드 ${res.counts.guides}개)`);
};
const handleImportFile = (e) => {
const file = e.target.files && e.target.files[0];
e.target.value = ""; // 같은 파일 다시 선택 허용
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
let data = null;
try {data = JSON.parse(reader.result);} catch (err) {showToast("파일을 읽을 수 없습니다");return;}
if (!data || !Array.isArray(data.categories) || !Array.isArray(data.guides)) {
showToast("백업 파일 형식이 올바르지 않습니다");return;
}
setImportConfirm(data); // 덮어쓰기 확인 다이얼로그
};
reader.readAsText(file);
};
const applyImport = () => {
const data = importConfirm;
setImportConfirm(null);
const api = window.__bannerlyEditors && window.__bannerlyEditors[active];
if (!api) {showToast("불러올 편집기가 없습니다");return;}
const res = api.importBackup(data);
if (res && res.ok) showToast(`백업을 불러왔습니다 (가이드 ${res.counts.guides}개)`);else
showToast(res && res.error || "불러오기에 실패했습니다");
};
useEffect(() => {
const onMsg = (e) => {
const d = e.data || {};
if (d.type === "bannerly-open-editor") {
const name = d.name || "가이드";
const category = d.category || null;
const blank = !!d.blank;
setTabs((prev) => {
const ex = prev.find((t) => t.name === name && (t.category || null) === category);
if (ex) {setActive(ex.id);return prev;}
const id = "ed-" + Date.now();
// 가이드 정체성(카테고리+이름) 기반의 안정적 저장 키 — 같은 가이드를 다시 열면 작업이 복원되고,
// 리로드 시에도 캔버스 작업이 사라지지 않는다. (blank 새 가이드는 저장하지 않음)
const persist = blank ? undefined : "bannerly:editor:" + (category || "") + "::" + name;
setActive(id);
return [...prev, { id, name, category, blank, persist }];
});
}
};
window.addEventListener("message", onMsg);
return () => window.removeEventListener("message", onMsg);
}, []);
// ---- 인증 부팅: 저장된 세션 복원 + 로컬 개발 우회 ----
useEffect(() => {
let cancelled = false;
let unsub = () => {};
const boot = async () => {
// 로컬(localhost) 개발 편의: 로그인 화면을 건너뛴다 (배포에선 실제 로그인)
if (window.__BANNERLY_DEV_BYPASS) {
window.__bannerlyUser = "개발자";
window.__bannerlyRole = "user";
if (!cancelled) {setUser({ email: "dev@local", dev: true });setRole("user");setAuthReady(true);}
return;
}
// supabase 모듈(module script)이 늦게 로드될 수 있어 __auth 준비를 잠시 대기
for (let i = 0; i < 100 && !window.__auth; i++) {await new Promise((r) => setTimeout(r, 50));}
if (!window.__auth || !window.__auth.hasConfig()) {
if (!cancelled) setAuthReady(true); // 설정 없음 → 로그인 화면 노출
return;
}
const res = await window.__auth.currentUser();
if (cancelled) return;
if (res) {setUser(res.user);setRole((res.profile && res.profile.role) || "user");}
setAuthReady(true);
// 세션 만료/외부 로그아웃 반영
unsub = window.__authSubscribe((u) => {
if (cancelled) return;
setUser(u);
if (!u) setRole("user");
});
};
boot();
return () => {cancelled = true;unsub();};
}, []);
const handleLogout = useCallback(async () => {
try {
if (window.__auth) await window.__auth.signOut();
} catch (e) {}
// Supabase 세션 키를 직접 제거해 재로드 후 로그인 화면이 나오도록
try {
Object.keys(localStorage).forEach((k) => {
if (k.startsWith('bannerly-auth') || k.startsWith('sb-') || k === 'supabase.auth.token') {
localStorage.removeItem(k);
}
});
} catch (e) {}
setUser(null);
setRole("user");
setActive("home");
setTabs([]);
// 깨끗한 상태를 보장하기 위해 페이지 재로드
window.location.href = window.location.origin + '/';
}, []);
// when a tab becomes visible, let the editor re-measure & fit
useEffect(() => {window.dispatchEvent(new Event("resize"));}, [active]);
const closeTab = useCallback((id, e) => {
e && e.stopPropagation();
setTabs((prev) => prev.filter((t) => t.id !== id));
setActive((cur) => cur === id ? "home" : cur);
}, []);
// 모드 전환 토글: 권한 전환. 사용자는 관리자 권한이 없어 편집기에 진입할 수 없고 홈(가이드)만 볼 수 있음
const goAdmin = useCallback(() => {setRole("admin");setActive("home");}, []);
const goUser = useCallback(() => {
setRole("user");
setActive("home");
}, []);
if (!authReady) {
return (
);
}
if (needPwSet) {
return {location.href = location.origin + "/";}} />;
}
if (!loggedIn) {
return {setUser(u);setRole((profile && profile.role) || "user");}} />;
}
const platform = (window.PLATFORMS || []).find((p) => p.id === "cj") || (window.PLATFORMS || [])[0];
const brand = brandGuides.cj;
const setBrand = (patch) => setBrandGuides((bg) => ({ ...bg, cj: { ...bg.cj, ...patch } }));
const isEditor = active !== "home";
// 관리자가 '사용자 화면으로 전환'하면 화면(메뉴)만 사용자로. 실제 권한(role)은 그대로.
const effRole = (role === "admin" && viewAsUser) ? "user" : role;
const toggleViewAsUser = () => {setViewAsUser((v) => !v);setActive("home");setTabs([]);};
const activeTab = tabs.find((t) => t.id === active);
const guideName = activeTab ? activeTab.name : "";
return (
{/* 전역 상단바 (B): 로고 + 계정 — 탭 스트립은 추후 이 바에 추가 예정 */}
{active === "home" && homeNav &&
}
{/* [보류] 관리자/사용자 권한 토글 — 관리자 영역을 임시로 숨기며 제거함. 복원 시 아래 블록을 되살릴 것:
*/}
setShowAccountSettings(true)} canSwitchView={role === "admin"} viewAsUser={viewAsUser} onToggleView={toggleViewAsUser} />
{effRole === "admin" && isEditor && tabs.length > 0 &&
{tabs.map((t) =>
setActive(t.id)} style={{ borderRadius: "6px", height: "30px", borderStyle: "none" }}>
{t.name}
)}
{/* 편집기 헤더 우측 액션: 브랜드 가이드 · 임시 저장하기 · 배포하기 · 백업 */}
}
{brandOpen &&
setBrandOpen(false)} />}
{
setPublishConfirm(false);
const t = tabs.find((x) => x.id === active);
if (t && window.__guideStore) {
window.__guideStore.upsert({
id: (t.category ? t.category + '::' : '') + t.name,
category: t.category || t.name, name: t.name,
published: true, updatedAt: new Date().toISOString(),
author: window.__bannerlyName || null,
}).catch(() => {});
}
showToast("가이드가 배포되었습니다");
}}
onCancel={() => setPublishConfirm(false)} />
setImportConfirm(null)} />
{showAccountSettings && (() => {
const M = window.AccountSettingsModal;
return M ? setShowAccountSettings(false)} />
: null;
})()}
{toast && {toast}
}