<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MLNT9JG6"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>


<script charset="UTF-8" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>

<style>
  /* [필독] 스탬프 페이지에서만 작동하도록 격리 */
  .is-stamp-page .notion-image-block img { 
    filter: grayscale(100%) opacity(0.2) !important; 
    transition: all 0.5s ease-in-out !important;
  }
  
  .is-stamp-page .stamp-active img { 
    filter: grayscale(0%) opacity(1) !important; 
    transform: scale(1.05) !important;
  }

  /* 완료 안내 메시지 스타일 */
  #finish-message {
    display: none;
    margin: 40px 20px;
    padding: 25px;
    background-color: #f0f9ff;
    border: 2px solid #00a0e9;
    border-radius: 15px;
    text-align: center;
    font-weight: bold;
    color: #003366;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }

  /* 애니메이션용 설정 */
  .is-stamp-page .notion-page-content > div {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s, transform 0.6s !important;
  }
  .is-stamp-page .notion-page-content > div.reveal { opacity: 1; transform: translateY(0); }
</style>

<script>
(function() {
    // 1. 대상 페이지 체크 (낙운님의 스탬프 페이지 ID)
    const TARGET_PAGE_PATH = '343ffbb7-fd41-8060-beeb-df770e40860c';
    if (!window.location.pathname.includes(TARGET_PAGE_PATH)) return;

    document.body.classList.add('is-stamp-page');

    const STORAGE_KEY = 'wjymca_stamp_v2';
    const urlParams = new URLSearchParams(window.location.search);

    // [초기화]
    if (urlParams.get('reset') === 'true') {
        localStorage.removeItem(STORAGE_KEY);
        alert('초기화되었습니다.');
        location.href = window.location.pathname;
        return;
    }

    // 2. 데이터 처리
    let myStamps = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
    const stampId = urlParams.get('stamp');

    if (stampId && !myStamps.includes(stampId)) {
        myStamps.push(stampId);
        localStorage.setItem(STORAGE_KEY, JSON.stringify(myStamps));
        alert(stampId + "번 스탬프 획득! 🥳");
        window.history.replaceState({}, '', window.location.pathname);
    }

    // 3. UI 업데이트 및 안내 메시지 생성
    const runSystem = function() {
        const images = Array.from(document.querySelectorAll('.is-stamp-page .notion-image-block'));
        if (images.length < 9) { setTimeout(runSystem, 300); return; }

        // 좌표 기준 정렬 (3*3 그리드 순서 고정)
        images.sort((a, b) => {
            const rectA = a.getBoundingClientRect();
            const rectB = b.getBoundingClientRect();
            if (Math.abs(rectA.top - rectB.top) > 40) return rectA.top - rectB.top;
            return rectA.left - rectB.left;
        });

        // 애니메이션 및 스탬프 활성화
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('reveal'); });
        }, { threshold: 0.1 });

        images.forEach((img, idx) => {
            if (myStamps.includes(String(idx + 1))) img.classList.add('stamp-active');
            const row = img.closest('.notion-page-content > div');
            if (row) observer.observe(row);
        });

        // 4. 완료 시 메시지 출력
        if (myStamps.length >= 9) {
            // 이미 메시지 박스가 있으면 생성 안 함
            if (!document.getElementById('finish-message')) {
                const msgBox = document.createElement('div');
                msgBox.id = 'finish-message';
                msgBox.innerHTML = `
                    <h2 style="margin:0 0 10px 0;">🎉 축하합니다! 🎉</h2>
                    <p style="font-size: 1.1em; line-height: 1.6; margin:0;">
                        모든 미션을 완료하셨습니다!<br>
                        <strong>안내부스로 오셔서 추첨에 참여하세요!</strong>
                    </p>
                `;
                // 노션 본문 맨 마지막에 삽입
                const content = document.querySelector('.notion-page-content');
                if (content) content.appendChild(msgBox);
                msgBox.style.display = 'block';
                
                // 9개째 찍는 순간에만 한 번 더 알림
                if (urlParams.get('stamp')) alert("축하합니다! 모든 미션을 완료하셨습니다.");
            }
        }
    };

    window.addEventListener('load', runSystem);
    if (document.readyState === 'complete') runSystem();
})();
</script>

wjymca.oopy.io

작성자

상태

설명

연락처

웹사이트

이메일

우선순위

첨부파일

참여자

마감일

작성일시

이름

행사일

내용

영상갤러리

사진갤러리

보도자료모음

예하기관소식

전체보기

full-color-logo-2

원주시청소년수련관 청소년 진로특강 - 원주시청소년수련관