{"id":127,"date":"2025-12-30T09:49:13","date_gmt":"2025-12-30T09:49:13","guid":{"rendered":"http:\/\/192.168.219.154:8000\/?page_id=127"},"modified":"2026-01-26T12:52:05","modified_gmt":"2026-01-26T12:52:05","slug":"%ec%a3%bc%eb%b3%b4","status":"publish","type":"page","link":"https:\/\/www.thelightofgrace.org\/?page_id=127","title":{"rendered":"\uc8fc\ubcf4"},"content":{"rendered":"\n<style>\n    .bulletin-container {\n        display: flex;\n        flex-direction: column;\n        gap: 20px;\n        max-width: 1000px;\n        margin: 0 auto;\n    }\n    \n    \/* Image Viewer Area *\/\n    .bulletin-viewer {\n        background: #f4f4f4;\n        padding: 20px;\n        border-radius: 8px;\n        text-align: center;\n        min-height: 400px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n    }\n    .bulletin-viewer img {\n        max-width: 100%;\n        height: auto;\n        margin-bottom: 20px;\n        box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n    }\n    .bulletin-title {\n        font-size: 1.5rem;\n        font-weight: bold;\n        margin-bottom: 10px;\n    }\n    \n    \/* Download Button *\/\n    .download-btn {\n        display: inline-block;\n        padding: 10px 20px;\n        background-color: #0073aa;\n        color: white;\n        text-decoration: none;\n        border-radius: 5px;\n        transition: background-color 0.3s;\n        border: none;\n        cursor: pointer;\n        font-size: 16px;\n    }\n    .download-btn:hover {\n        background-color: #005177;\n    }\n\n    \/* List View Area *\/\n    .bulletin-list {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n        gap: 15px;\n        margin-top: 20px;\n    }\n    .bulletin-item {\n        background: #fff;\n        border: 1px solid #ddd;\n        padding: 15px;\n        text-align: center;\n        border-radius: 8px;\n        cursor: pointer;\n        transition: all 0.2s;\n    }\n    .bulletin-item:hover {\n        border-color: #0073aa;\n        background-color: #f0f8ff;\n        transform: translateY(-2px);\n    }\n    .bulletin-item.active {\n        background-color: #0073aa;\n        color: white;\n        border-color: #0073aa;\n    }\n    .bulletin-date {\n        font-weight: bold;\n        font-size: 1.1rem;\n    }\n    \n    .loading-spinner {\n        border: 4px solid #f3f3f3;\n        border-top: 4px solid #0073aa;\n        border-radius: 50%;\n        width: 40px;\n        height: 40px;\n        animation: spin 1s linear infinite;\n        margin: 20px auto;\n    }\n    @keyframes spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n    }\n<\/style>\n\n<div class=\"bulletin-container\">\n    \n    <!-- Viewer Section -->\n    <div id=\"bulletinViewer\" class=\"bulletin-viewer\">\n        <div class=\"loading-spinner\" id=\"viewerLoader\"><\/div>\n        <div id=\"viewerContent\" style=\"display:none; width:100%\">\n            <h2 id=\"currentDateDisplay\" class=\"bulletin-title\"><\/h2>\n            <div id=\"imageContainer\"><\/div>\n            <br>\n            <a id=\"downloadLink\" href=\"#\" class=\"download-btn\" target=\"_blank\">\uc8fc\ubcf4 \ub2e4\uc6b4\ub85c\ub4dc (PDF\/Images)<\/a>\n        <\/div>\n        <div id=\"emptyState\" style=\"display:none\">\n            <p>\ub4f1\ub85d\ub41c \uc8fc\ubcf4\uac00 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n        <\/div>\n    <\/div>\n\n    <!-- List Section -->\n    <div>\n        <h3>\uc9c0\ub09c \uc8fc\ubcf4 \ubcf4\uae30<\/h3>\n        <div id=\"bulletinList\" class=\"bulletin-list\">\n            <!-- List items will be injected here -->\n        <\/div>\n    <\/div>\n\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const apiUrl = '\/wp-content\/bulletin-api.php';\n    const listContainer = document.getElementById('bulletinList');\n    const viewerLoader = document.getElementById('viewerLoader');\n    const viewerContent = document.getElementById('viewerContent');\n    const emptyState = document.getElementById('emptyState');\n    const currentDateDisplay = document.getElementById('currentDateDisplay');\n    const imageContainer = document.getElementById('imageContainer');\n    const downloadLink = document.getElementById('downloadLink');\n\n    let bulletins = [];\n\n    \/\/ Fetch Data\n    fetch(apiUrl + '?action=list')\n        .then(response => response.json())\n        .then(data => {\n            bulletins = data;\n            viewerLoader.style.display = 'none';\n            \n            if (bulletins.length === 0) {\n                emptyState.style.display = 'block';\n                return;\n            }\n\n            renderList();\n            \/\/ Select first item by default\n            selectBulletin(0);\n            viewerContent.style.display = 'block';\n        })\n        .catch(err => {\n            console.error('Error fetching bulletins:', err);\n            viewerLoader.style.display = 'none';\n            emptyState.innerHTML = '<p>\ub370\uc774\ud130\ub97c \ubd88\ub7ec\uc624\ub294 \uc911 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.<\/p>';\n            emptyState.style.display = 'block';\n        });\n\n    function renderList() {\n        listContainer.innerHTML = '';\n        bulletins.forEach((item, index) => {\n            const div = document.createElement('div');\n            div.className = 'bulletin-item';\n            div.innerHTML = `<div class=\"bulletin-date\">${item.date}<\/div>`;\n            div.onclick = () => selectBulletin(index);\n            listContainer.appendChild(div);\n        });\n    }\n\n    function selectBulletin(index) {\n        const item = bulletins[index];\n        \n        \/\/ Update Active State in List\n        const items = listContainer.children;\n        for (let i = 0; i < items.length; i++) {\n            items[i].classList.remove('active');\n        }\n        if(items[index]) items[index].classList.add('active');\n\n        \/\/ Update Viewer\n        currentDateDisplay.textContent = `${item.date} \uc8fc\ubcf4`;\n        imageContainer.innerHTML = ''; \/\/ Clear previous images\n\n        item.images.forEach(imgUrl => {\n            const img = document.createElement('img');\n            img.src = imgUrl;\n            img.alt = item.date + ' \uc8fc\ubcf4';\n            imageContainer.appendChild(img);\n        });\n\n        \/\/ Update Download Link\n        downloadLink.href = `${apiUrl}?action=download&date=${item.date}`;\n    }\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\uc8fc\ubcf4 \ub2e4\uc6b4\ub85c\ub4dc (PDF\/Images) \ub4f1\ub85d\ub41c \uc8fc\ubcf4\uac00 \uc5c6\uc2b5\ub2c8\ub2e4. \uc9c0\ub09c \uc8fc\ubcf4 \ubcf4\uae30<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-127","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.thelightofgrace.org\/index.php?rest_route=\/wp\/v2\/pages\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thelightofgrace.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.thelightofgrace.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thelightofgrace.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=127"}],"version-history":[{"count":5,"href":"https:\/\/www.thelightofgrace.org\/index.php?rest_route=\/wp\/v2\/pages\/127\/revisions"}],"predecessor-version":[{"id":182,"href":"https:\/\/www.thelightofgrace.org\/index.php?rest_route=\/wp\/v2\/pages\/127\/revisions\/182"}],"wp:attachment":[{"href":"https:\/\/www.thelightofgrace.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}