sam-sales/lib/meta_common.php

<?php
/**
 * Global Metadata and Shared Styles
 * This file centralizes Tailwind CSS, Lucide Icons, React, and Babel scripts.
 */

// Base path 계산 (sales 폴더 기준)
$salesBasePath = '';
$scriptPath = $_SERVER['SCRIPT_NAME'] ?? '';
$depth = substr_count(str_replace('/sales/', '', $scriptPath), '/');
if ($depth > 0) {
    $salesBasePath = str_repeat('../', $depth);
}

// 로고 HTML 컴포넌트 (SAM 스타일)
$samLogoHtml = '
<a href="' . $salesBasePath . 'index.php" class="flex items-center gap-3 cursor-pointer">
    <div class="w-10 h-10 bg-slate-100 rounded-xl flex items-center justify-center">
        <svg class="w-6 h-6 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 19V5M5 12l7-7 7 7"/>
        </svg>
    </div>
    <div class="flex flex-col">
        <span class="text-lg font-bold text-slate-800 leading-tight">SAM</span>
        <span class="text-xs text-slate-500 leading-tight">Smart Automation Management</span>
    </div>
</a>';

// SVG favicon (빨간색 화살표)
$svgFavicon = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="20" fill="%23f1f5f9"/><path d="M50 75V25M25 50l25-25 25 25" stroke="%23ef4444" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>';
?>
<!-- Favicon (SVG - 빨간색 화살표) -->
<link rel="icon" type="image/svg+xml" href="<?= $svgFavicon ?>">
<link rel="apple-touch-icon" sizes="180x180" href="<?= $salesBasePath ?>img/apple-touch-icon.png">

<!-- Core Libraries -->
<script src="https://cdn.tailwindcss.com?v=3.4.1"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script>
    // Ensure Lucide icons are initialized after page load
    document.addEventListener('DOMContentLoaded', () => {
        if (window.lucide) {
            window.lucide.createIcons();
        }
    });
</script>

<style type="text/tailwindcss">
    @layer components {
        /* Global Modal Close Button Style */
        .btn-close-modal {
            @apply w-10 h-10 flex items-center justify-center rounded-full bg-white shadow-lg border-2 border-slate-900 transition-all duration-200 hover:bg-red-50 hover:border-red-500 cursor-pointer pointer-events-auto;
        }
        .btn-close-modal span {
            @apply text-xl font-bold text-black group-hover:text-red-600 select-none;
        }
    }
</style>