(() => {
  const { Handlebars, utils, actions, EventManager } = ShopbySkin;

  // URL 쿼리 파라미터에서 pageNumber 추출
  const searchParams = new URLSearchParams(location.search);
  const pageNumber = Number(searchParams.get('pageNumber')) || 1;
  const pageSize = 15;

  EventManager.on('PAGE_LOAD_COMPLETED', async () => {
    try {
      // API 호출로 게시글 목록 가져오기
      const articleRes = await actions.queryArticlesByBoardNo({
        boardNo: 'announcement',
        pageSize: pageSize,
        pageNumber: pageNumber,
      });
      const articles = articleRes.data;

      // 페이지네이션 생성
      const pagination = new utils.Pagination({
        currentPage: pageNumber,
        totalCount: articles.totalCount,
        itemsPerPage: pageSize,
      });
      const paginationData = pagination.generate();

      // Handlebars 데이터 구성
      const handlebarData = {
        items: articles.items,
        totalCount: articles.totalCount,
        pagination: paginationData,
      };

      // 템플릿 컴파일 및 렌더링
      const templateElement = document.querySelector(
        'winner-notice-component script[type="text/x-handlebars-template"]'
      );
      if (templateElement) {
        const template = Handlebars.compile(templateElement.innerHTML);
        const renderedHtml = template(handlebarData);

        // 컴포넌트에 렌더링된 HTML 삽입
        const component = document.querySelector('winner-notice-component');
        component.innerHTML = renderedHtml;
      } else {
        console.error('템플릿을 찾을 수 없습니다!');
      }
    } catch (error) {
      console.error('데이터 로딩 실패:', error);
    }
  });
})();