// ═══════════════════════════════════════════════════════════════ // TSL 관리자 — App Shell // Header (role sim) · Main tabs · Sub-tabs · Body · Tweaks // ═══════════════════════════════════════════════════════════════ const App = () => { const isMobile = useIsMobile(); // ── Simulated current role (for design review) ── const [role, setRole] = React.useState('master'); // ── Tab state (mobile: 정책>보안관리, PC: 회원관리>검색) ── const INITIAL_TAB_MOBILE = { tab: 'policy', subtab: 'security' }; const INITIAL_TAB_PC = { tab: 'members', subtab: 'search' }; const pickInitialTab = () => (typeof window !== 'undefined' && window.innerWidth <= 768) ? INITIAL_TAB_MOBILE : INITIAL_TAB_PC; const initial = pickInitialTab(); const [tab, setTab] = React.useState(initial.tab); const [subtab, setSubtab] = React.useState(initial.subtab); const [tweaks, setTweaks] = React.useState(window.__TWEAKS__ || {}); const [tweaksOpen, setTweaksOpen] = React.useState(false); // ── 실제 인증 상태 (/admin/me) ── const [authState, setAuthState] = React.useState({ loading: true, me: null, error: null }); const authed = !!authState.me; async function fetchMe() { try { const res = await fetch('/admin/me', { credentials: 'same-origin' }); if (res.status === 401) { setAuthState({ loading: false, me: null, error: null }); return; } const data = await res.json(); setAuthState({ loading: false, me: data, error: null }); if (data.role) setRole(data.role); } catch (e) { setAuthState({ loading: false, me: null, error: e.message }); } } React.useEffect(() => { fetchMe(); }, []); // 초기 탭은 기기별로 결정되므로 localStorage 복원하지 않음 async function doLogout() { try { await fetch('/admin/logout', { method: 'POST', credentials: 'same-origin' }); await fetch('/auth/logout', { method: 'POST', credentials: 'same-origin' }); } catch {} try { localStorage.removeItem('tsl.nav'); } catch {} window.location.replace('/'); } // Tweaks plumbing React.useEffect(() => { const handler = (e) => { if (!e.data || typeof e.data !== 'object') return; if (e.data.type === '__activate_edit_mode') setTweaksOpen(true); if (e.data.type === '__deactivate_edit_mode') setTweaksOpen(false); }; window.addEventListener('message', handler); window.parent.postMessage({ type: '__edit_mode_available' }, '*'); return () => window.removeEventListener('message', handler); }, []); // Accent hue live update React.useEffect(() => { const h = tweaks.accentHue ?? 255; document.documentElement.style.setProperty('--accent', `oklch(0.58 0.13 ${h})`); document.documentElement.style.setProperty('--accent-soft', `oklch(0.96 0.03 ${h})`); document.documentElement.style.setProperty('--accent-ink', `oklch(0.42 0.14 ${h})`); }, [tweaks.accentHue]); const updateTweak = (k, v) => { const next = { ...tweaks, [k]: v }; setTweaks(next); window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); }; // ── Compute allowed tabs/subtabs for current role + device ── const visibleTabs = React.useMemo(() => TABS.map(t => ({ ...t, sub: t.sub.filter(s => s.roles.includes(role) && (!s.mobileOnly || isMobile)), })).filter(t => t.sub.length > 0), [role, isMobile]); // Snap tab/subtab to allowed when role changes React.useEffect(() => { const curTab = visibleTabs.find(t => t.id === tab); if (!curTab) { setTab(visibleTabs[0].id); setSubtab(visibleTabs[0].sub[0].id); return; } if (!curTab.sub.find(s => s.id === subtab)) setSubtab(curTab.sub[0].id); }, [role, visibleTabs]); const currentTab = visibleTabs.find(t => t.id === tab) || visibleTabs[0]; // 인증 로딩 중 if (authState.loading) { return (
인증 확인 중…
); } // 미인증 — 실제 카카오 OAuth 로그인 화면 (원본 loginOverlay 재구성, preview 톤) if (!authed) { const origin = typeof window !== 'undefined' ? window.location.origin : ''; const kakaoHref = `/auth/kakao?mode=admin&redirect_origin=${encodeURIComponent(origin)}`; const kakaoSwitch = `/auth/kakao?mode=admin&prompt=login&redirect_origin=${encodeURIComponent(origin)}`; const params = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null; const err = params?.get('error'); const errMsg = err === 'not_admin' ? '관리자 권한이 없는 계정입니다.' : err === 'login_failed' ? '로그인 처리에 실패했습니다. 다시 시도해주세요.' : null; return (
팀시너지랩

관리자 로그인

{errMsg && (
{errMsg}
)} 카카오 로그인 다른 계정으로 로그인
); } // ── View routing ── const renderContent = () => { const k = `${currentTab?.id}.${subtab}`; switch (k) { case 'members.search': return ; case 'members.register': return ; case 'members.permissions': return ; case 'members.info': return ; case 'members.penalty': return ; case 'members.lecture': return ; case 'activity.errors': return ; case 'activity.chats': return ; case 'activity.tokens': return ; case 'activity.exchange': return ; case 'policy.security': return ; case 'policy.tokenops': return ; case 'policy.categories': return ; case 'policy.tags': return ; case 'policy.appdownload': return ; default: return
준비 중…
; } }; return (
{/* ─── Header ─────────────────────────────────────── */}
관리자
{/* PC: 헤더 우측에 뱃지 + 로그아웃. 모바일: 뱃지는 탭 행으로, 로그아웃만 헤더 우측 */} {authState.me && !isMobile && (
{authState.me.name || '관리자'} {authState.me.role && }
)} {/* Logout — PC·모바일 모두 헤더 우측 */}
{/* ─── Main Tabs ──────────────────────────────────── */}
{visibleTabs.map(t => { const active = currentTab?.id === t.id; return ( ); })}
{isMobile && authState.me && (
{authState.me.name || '관리자'} {authState.me.role && }
)}
{/* ─── Sub Tabs ──────────────────────────────────── */} {currentTab && (
{currentTab.sub.map(s => { const active = subtab === s.id; // 모바일에서 4자 이상 라벨은 2자마다 줄바꿈 (오류보고 → 오류\n보고) const displayLabel = (isMobile && s.label.length >= 4) ? s.label.replace(/(.{2})/g, '$1\n').replace(/\n$/, '') : s.label; return ( ); })}
{!isMobile && (
{currentTab.label} {currentTab.sub.find(s => s.id === subtab)?.label}
)}
)} {/* ─── Body ───────────────────────────────────────── */}
{renderContent()}
{/* ─── Tweaks Panel ──────────────────────────────── */} {tweaksOpen && ( setTweaksOpen(false)} /> )}
); }; // ── Role simulator (for design review) ──────────────────── const RoleSimulator = ({ role, onChange }) => { const meta = { normal: { label: '일반', tone: 'neutral' }, admin: { label: '관리자', tone: 'blue' }, master: { label: '마스터', tone: 'purple' }, }; return (
Preview as
{ROLE_SIM.map(r => { const active = role === r.id; const t = TONE_PALETTE[meta[r.id].tone]; return ( ); })}
); }; // ── Tweaks panel ────────────────────────────────────────── const TweaksPanel = ({ tweaks, update, onClose }) => (
Tweaks
update('accentHue', Number(e.target.value))} style={{ width: '100%' }} />
hue {tweaks.accentHue ?? 255}°
{[['comfortable', '여유'], ['compact', '조밀']].map(([v, l]) => ( ))}
{[['dot', '점'], ['pill', '필']].map(([v, l]) => ( ))}
); const TweakRow = ({ label, children }) => (
{label}
{children}
); ReactDOM.createRoot(document.getElementById('root')).render( );