<footer class="oopy-my-footer">
    <div
        class="oopy-my-footer-mobile-toggle"
        id="footer-toggle"
        role="button"
        tabindex="0"
        aria-expanded="false"
        aria-controls="footer-content"
    >
        <h3>행복나눔재단</h3>

        <span
            class="oopy-my-footer-mobile-toggle-button"
            aria-hidden="true"
        >
            ▼
        </span>
    </div>

    <div
        class="oopy-my-footer-container"
        id="footer-content"
    >
        <div class="oopy-my-footer-column">
            <h3>행복나눔재단</h3>

            <p>
                주소: 서울특별시 용산구 장문로 60(동빙고동)
            </p>

            <p>
                이메일:
                <a href="mailto:contact@skhappiness.org">
                    contact@skhappiness.org
                </a>
            </p>
        </div>

        <div class="oopy-my-footer-column">
            <h3>바로가기</h3>

            <ul>
                <li>
                    <a
                        href="https://skhappiness.org/"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        공식 홈페이지
                    </a>
                </li>

                <li>
                    <a
                        href="https://project.skhappiness.org/"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        프로젝트 노트
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="oopy-my-footer-copyright">
        <p>
            &copy;
            <span id="footer-current-year"></span>
            행복나눔재단. All Rights Reserved.
        </p>
    </div>
</footer>

<script>
    (function () {
        /*
         * 실제 메인 노션 페이지 ID
         * skhappinessinterview.oopy.io에서 직접 확인한 값
         */
        const MAIN_PAGE_ID =
            '1c9f80c6-a421-809d-ac99-f480d8d4de1d';

        const footer = document.querySelector('.oopy-my-footer');
        const footerToggle =
            document.getElementById('footer-toggle');
        const footerContent =
            document.getElementById('footer-content');
        const footerYear =
            document.getElementById('footer-current-year');

        function isActualMainPage() {
            const currentPath =
                window.location.pathname.replace(/\/+$/, '') || '/';

            const mainPageBlock = document.querySelector(
                '.notion-page-block[data-block-id="' +
                    MAIN_PAGE_ID +
                    '"]'
            );

            /*
             * 주소가 루트이고 실제 메인 페이지 블록이 있을 때만
             * 메인으로 판정
             */
            return currentPath === '/' && Boolean(mainPageBlock);
        }

        function updateFooterVisibility() {
            if (!footer) {
                return;
            }

            const isMainPage = isActualMainPage();

            document.documentElement.classList.toggle(
                'oopy-main-page',
                isMainPage
            );

            footer.style.setProperty(
                'display',
                isMainPage ? 'block' : 'none',
                'important'
            );
        }

        function setFooterState(isOpen) {
            if (!footerToggle || !footerContent) {
                return;
            }

            footerContent.classList.toggle('is-open', isOpen);
            footerToggle.classList.toggle('is-open', isOpen);
            footerToggle.setAttribute(
                'aria-expanded',
                String(isOpen)
            );
        }

        function toggleFooter() {
            if (!footerContent || window.innerWidth > 768) {
                return;
            }

            setFooterState(
                !footerContent.classList.contains('is-open')
            );
        }

        function checkFooterView() {
            if (!footerToggle || !footerContent) {
                return;
            }

            if (window.innerWidth > 768) {
                footerContent.classList.add('is-open');
                footerToggle.classList.remove('is-open');
                footerToggle.setAttribute('aria-expanded', 'true');
            } else {
                setFooterState(false);
            }
        }

        if (footerYear) {
            footerYear.textContent = new Date().getFullYear();
        }

        if (
            footerToggle &&
            footerToggle.dataset.footerEventBound !== 'true'
        ) {
            footerToggle.dataset.footerEventBound = 'true';

            footerToggle.addEventListener('click', toggleFooter);

            footerToggle.addEventListener(
                'keydown',
                function (event) {
                    if (
                        event.key === 'Enter' ||
                        event.key === ' '
                    ) {
                        event.preventDefault();
                        toggleFooter();
                    }
                }
            );
        }

        if (window.__oopyFooterResizeHandler) {
            window.removeEventListener(
                'resize',
                window.__oopyFooterResizeHandler
            );
        }

        window.__oopyFooterResizeHandler = checkFooterView;

        window.addEventListener(
            'resize',
            window.__oopyFooterResizeHandler
        );

        /*
         * 우피가 URL 변경 없이 내부 콘텐츠만 교체하는 경우까지 감지
         */
        if (window.__oopyFooterObserver) {
            window.__oopyFooterObserver.disconnect();
        }

        window.__oopyFooterObserver = new MutationObserver(
            function () {
                updateFooterVisibility();
            }
        );

        window.__oopyFooterObserver.observe(document.body, {
            childList: true,
            subtree: true
        });

        checkFooterView();
        updateFooterVisibility();

        window.setTimeout(updateFooterVisibility, 300);
        window.setTimeout(updateFooterVisibility, 1000);
    })();
</script>

사회문제 당사자 인터뷰 아카이브

아카이브에서는

자주 묻는 질문