+ 게시판 페이지 네이션 수정

+ 푸터 sns 링크 연결

app/components/footer.vue

@@ -1,79 +1,106 @@
 <template>
-    <footer>
-        <div class="footer--wrap">
-            <div class="footer--container">
-              <div class="footer--top">
-                <div class="logo--wrap">
-                  <NuxtLink to="/">
-                    <img src="/img/footer--logo.svg" alt="그린웨일글로벌" />
-                  </NuxtLink>
-                </div>
-                <ul class="menu--wrap">
-                  <li><NuxtLink to="/company/intro">Company</NuxtLink>
-                    <ul>
-                      <li><NuxtLink to="/company/intro">회사소개</NuxtLink></li>
-                      <li><NuxtLink to="/company/history">회사연혁</NuxtLink></li>
-                      <li><NuxtLink to="/company/partners">협력업체</NuxtLink></li>
-                    </ul>
-                  </li>
-                  <li><NuxtLink to="/products/materials">Products</NuxtLink>
-                    <ul>
-                      <li><NuxtLink to="/products/materials">Materials</NuxtLink></li>
-                      <li><NuxtLink to="/products/solutions">Solutions</NuxtLink></li>
-                    </ul>
-                  </li>
-                  <li><NuxtLink to="/technology/facilities">Technology</NuxtLink>
-                    <ul>
-                      <li><NuxtLink to="/technology/facilities">시설</NuxtLink></li>
-                      <li><NuxtLink to="/technology/patents">특허 / 인증</NuxtLink></li>
-                    </ul>
-                  </li>
-                  <li><NuxtLink to="/media/news">Media</NuxtLink>
-                    <ul>
-                      <li><NuxtLink to="/media/news">환경뉴스</NuxtLink></li>
-                      <li><NuxtLink to="/media/press">보도자료</NuxtLink></li>
-                    </ul>
-                  </li>
-                  <li><NuxtLink to="/contact/notice">Contact</NuxtLink>
-                    <ul>
-                      <li><NuxtLink to="/contact/notice">공지사항</NuxtLink></li>
-                      <li><NuxtLink to="/contact/faq">FAQ</NuxtLink></li>
-                      <li><NuxtLink to="/contact/support">고객센터</NuxtLink></li>
-                      <li><NuxtLink to="/contact/location">오시는길</NuxtLink></li>
-                    </ul>
-                  </li>
-                </ul>
-              </div>
-              <div class="footer--bot">
-                <ul class="sns--list">
-                  <li><NuxtLink to="/" class="blog"></NuxtLink></li>
-                  <li><NuxtLink to="/" class="ytb"></NuxtLink></li>
-                  <li><NuxtLink to="/" class="fb"></NuxtLink></li>
-                  <li><NuxtLink to="/" class="insta"></NuxtLink></li>
-                </ul>
-                <ul class="info--list">
-                  <li>사업자명 : 그린웨일글로벌 주식회사</li>
-                  <span class="bar"></span>
-                  <li>사무실 : 서울시 강남구 언주로 650 한국건설기술인협회 신관 2층</li>
-                  <span class="bar"></span>
-                  <li>대표이사 : 윤태균</li>
-                  <span class="bar mobile"></span>
-                  <li>사업자번호 : 861-88-01187</li>
-                </ul>
-                <ul class="info--list mt-[4px]">
-                  <li>Tel : 02-3447-8801 / 8802</li>
-                  <span class="bar"></span>
-                  <li>E-Mail : green@greenwhaleglobal.com</li>
-                </ul>
-                <p class="copyright">
-                  <span>
-                    Copyright © Greenwhaleglobal. All rights reserved.
-                  </span>
-                  <span class="bar"></span>
-                  <NuxtLink to="/">개인정보취급방침</NuxtLink>
-                </p>
-              </div>
-            </div>
+  <footer>
+    <div class="footer--wrap">
+      <div class="footer--container">
+        <div class="footer--top">
+          <div class="logo--wrap">
+            <NuxtLink to="/">
+              <img src="/img/footer--logo.svg" alt="그린웨일글로벌" />
+            </NuxtLink>
+          </div>
+          <ul class="menu--wrap">
+            <li>
+              <NuxtLink to="/company/intro">Company</NuxtLink>
+              <ul>
+                <li><NuxtLink to="/company/intro">회사소개</NuxtLink></li>
+                <li><NuxtLink to="/company/history">회사연혁</NuxtLink></li>
+                <li><NuxtLink to="/company/partners">협력업체</NuxtLink></li>
+              </ul>
+            </li>
+            <li>
+              <NuxtLink to="/products/materials">Products</NuxtLink>
+              <ul>
+                <li><NuxtLink to="/products/materials">Materials</NuxtLink></li>
+                <li><NuxtLink to="/products/solutions">Solutions</NuxtLink></li>
+              </ul>
+            </li>
+            <li>
+              <NuxtLink to="/technology/facilities">Technology</NuxtLink>
+              <ul>
+                <li><NuxtLink to="/technology/facilities">시설</NuxtLink></li>
+                <li><NuxtLink to="/technology/patents">특허 / 인증</NuxtLink></li>
+              </ul>
+            </li>
+            <li>
+              <NuxtLink to="/media/news">Media</NuxtLink>
+              <ul>
+                <li><NuxtLink to="/media/news">환경뉴스</NuxtLink></li>
+                <li><NuxtLink to="/media/press">보도자료</NuxtLink></li>
+              </ul>
+            </li>
+            <li>
+              <NuxtLink to="/contact/notice">Contact</NuxtLink>
+              <ul>
+                <li><NuxtLink to="/contact/notice">공지사항</NuxtLink></li>
+                <li><NuxtLink to="/contact/faq">FAQ</NuxtLink></li>
+                <li><NuxtLink to="/contact/support">고객센터</NuxtLink></li>
+                <li><NuxtLink to="/contact/location">오시는길</NuxtLink></li>
+              </ul>
+            </li>
+          </ul>
         </div>
-    </footer>
-</template>
+        <div class="footer--bot">
+          <ul class="sns--list">
+            <li>
+              <NuxtLink
+                to="https://blog.naver.com/greenwhaleglobal"
+                target="_blank"
+                class="blog"
+              ></NuxtLink>
+            </li>
+            <li>
+              <NuxtLink
+                to="https://www.youtube.com/channel/UCRYxerlM2kXTZXM_g8B_TBQ"
+                target="_blank"
+                class="ytb"
+              ></NuxtLink>
+            </li>
+            <li>
+              <NuxtLink
+                to="https://www.facebook.com/profile.php?id=100043068986761"
+                target="_blank"
+                class="fb"
+              ></NuxtLink>
+            </li>
+            <li>
+              <NuxtLink
+                to="https://www.instagram.com/greenwhaleglobal"
+                target="_blank"
+                class="insta"
+              ></NuxtLink>
+            </li>
+          </ul>
+          <ul class="info--list">
+            <li>사업자명 : 그린웨일글로벌 주식회사</li>
+            <span class="bar"></span>
+            <li>사무실 : 서울시 강남구 언주로 650 한국건설기술인협회 신관 2층</li>
+            <span class="bar"></span>
+            <li>대표이사 : 윤태균</li>
+            <span class="bar mobile"></span>
+            <li>사업자번호 : 861-88-01187</li>
+          </ul>
+          <ul class="info--list mt-[4px]">
+            <li>Tel : 02-3447-8801 / 8802</li>
+            <span class="bar"></span>
+            <li>E-Mail : green@greenwhaleglobal.com</li>
+          </ul>
+          <p class="copyright">
+            <span> Copyright © Greenwhaleglobal. All rights reserved. </span>
+            <span class="bar"></span>
+            <NuxtLink to="/">개인정보취급방침</NuxtLink>
+          </p>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>

app/pages/contact/notice.vue

@@ -64,6 +64,8 @@
   const searchKeyword = ref("");
   const totalCount = ref(0);
   const loading = ref(true);
+  const allNewsData = ref([]); // 전체 데이터를 누적하여 저장
+  const loadedPages = ref(new Set()); // 이미 로드한 백엔드 페이지 추적
 
   const className = ref("contact");
   const title = ref("Contact");
@@ -97,7 +99,7 @@
   // 검색 실행 함수
   const performSearch = async () => {
     currentPage.value = 1; // 검색시 첫 페이지로 이동
-    await fetchNoticeList(1);
+    await fetchNoticeList(1, true); // reset=true로 검색
   };
 
   // 검색 초기화 함수
@@ -105,12 +107,23 @@
     searchKeyword.value = "";
     searchValue.value = "제목";
     currentPage.value = 1;
-    await fetchNoticeList(1);
+    await fetchNoticeList(1, true); // reset=true로 초기화
   };
 
   // API에서 공지사항 데이터 가져오기
-  const fetchNoticeList = async (page = 1) => {
+  const fetchNoticeList = async (page = 1, reset = false) => {
     try {
+      // 검색이 변경되면 항상 리셋
+      if (searchKeyword.value || searchValue.value !== "제목") {
+        reset = true;
+      }
+
+      // 이미 로드한 페이지는 스킵
+      if (!reset && loadedPages.value.has(page)) {
+        console.log(`페이지 ${page}는 이미 로드됨`);
+        return;
+      }
+
       loading.value = true;
 
       // 검색 종류 매핑
@@ -139,7 +152,15 @@
           const currentPageNum = page || 1;
           const pageSize = 20; // 백엔드의 페이지 사이즈와 동일
 
-          newsData.value = response.list.map((item, index) => {
+          console.log("공지사항 API 응답:", {
+            totalCount: totalCount.value,
+            listCount: response.list.length,
+            currentPage: currentPageNum,
+            pageSize,
+            backendPage: page,
+          });
+
+          const newData = response.list.map((item, index) => {
             // 번호 = 전체개수 - ((현재페이지-1) * 페이지크기 + 인덱스)
             const displayNumber = totalCount.value - ((currentPageNum - 1) * pageSize + index);
 
@@ -150,6 +171,20 @@
               link: `/contact/noticeView?idx=${item.board_idx}`, // 실제 링크는 board_idx 사용
             };
           });
+
+          if (reset) {
+            // 리셋 모드: 전체 데이터 초기화
+            allNewsData.value = newData;
+            loadedPages.value = new Set([page]);
+          } else {
+            // 누적 모드: 새 데이터를 적절한 위치에 삽입
+            const startIndex = (page - 1) * pageSize;
+            allNewsData.value.splice(startIndex, pageSize, ...newData);
+            loadedPages.value.add(page);
+          }
+
+          // newsData를 allNewsData로 업데이트
+          newsData.value = [...allNewsData.value];
         } else {
           console.error("JSON 응답 형식이 올바르지 않습니다:", response);
           newsData.value = [];
@@ -186,18 +221,29 @@
   // 백엔드에서 필요한 데이터가 있는지 확인하고 필요시 API 호출
   const needToFetchData = (targetPage) => {
     const startIndex = (targetPage - 1) * itemsPerPage;
-    const endIndex = startIndex + itemsPerPage - 1;
-    return endIndex >= newsData.value.length && newsData.value.length < totalCount.value;
+    const endIndex = targetPage * itemsPerPage;
+    
+    // 필요한 데이터의 백엔드 페이지들 계산
+    const startBackendPage = Math.floor(startIndex / backendPageSize) + 1;
+    const endBackendPage = Math.ceil(endIndex / backendPageSize);
+    
+    // 아직 로드되지 않은 페이지가 있는지 확인
+    for (let i = startBackendPage; i <= endBackendPage; i++) {
+      if (!loadedPages.value.has(i)) {
+        return i; // 로드가 필요한 백엔드 페이지 번호 반환
+      }
+    }
+    return null; // 모든 필요한 데이터가 이미 로드됨
   };
 
   const goToPage = async (page) => {
     if (page >= 1 && page <= totalPages.value) {
       currentPage.value = page;
-      
-      if (needToFetchData(page)) {
-        // 백엔드 페이지 계산: 프론트 페이지를 백엔드 페이지로 변환
-        const backendPage = Math.ceil((page * itemsPerPage) / backendPageSize);
-        await fetchNoticeList(backendPage);
+
+      const backendPageToLoad = needToFetchData(page);
+      if (backendPageToLoad !== null) {
+        console.log(`프론트엔드 페이지 ${page}를 위해 백엔드 페이지 ${backendPageToLoad} 로드`);
+        await fetchNoticeList(backendPageToLoad);
       }
     }
   };
@@ -216,6 +262,6 @@
 
   // 컴포넌트 마운트 시 데이터 로드
   onMounted(() => {
-    fetchNoticeList(1);
+    fetchNoticeList(1, true); // reset=true로 초기 로드
   });
 </script>

app/pages/media/news.vue

@@ -84,12 +84,20 @@
   ]);
 
   const loading = ref(true);
+  const allNewsData = ref([]); // 전체 데이터를 누적하여 저장
   const newsData = ref([]);
   const totalCount = ref(0);
+  const loadedPages = ref(new Set()); // 이미 로드한 백엔드 페이지 추적
 
   // API에서 뉴스 데이터 가져오기
-  const fetchNewsList = async (page = 1) => {
+  const fetchNewsList = async (page = 1, reset = false) => {
     try {
+      // 이미 로드한 페이지는 스킵
+      if (!reset && loadedPages.value.has(page)) {
+        console.log(`페이지 ${page}는 이미 로드됨`);
+        return;
+      }
+
       loading.value = true;
 
       // 공지사항과 동일한 방식으로 호출
@@ -113,10 +121,11 @@
             totalCount: totalCount.value,
             listCount: response.list.length,
             currentPage: currentPageNum,
-            pageSize
+            pageSize,
+            backendPage: page,
           });
 
-          newsData.value = response.list.map((item, index) => {
+          const newData = response.list.map((item, index) => {
             // 번호 = 전체개수 - ((현재페이지-1) * 페이지크기 + 인덱스)
             const displayNumber = totalCount.value - ((currentPageNum - 1) * pageSize + index);
 
@@ -130,6 +139,20 @@
               link: item.etc1 || "#", // etc1 필드에 외부 링크 저장
             };
           });
+
+          if (reset) {
+            // 리셋 모드: 전체 데이터 초기화
+            allNewsData.value = newData;
+            loadedPages.value = new Set([page]);
+          } else {
+            // 누적 모드: 새 데이터를 적절한 위치에 삽입
+            const startIndex = (page - 1) * pageSize;
+            allNewsData.value.splice(startIndex, pageSize, ...newData);
+            loadedPages.value.add(page);
+          }
+
+          // newsData를 allNewsData로 업데이트
+          newsData.value = [...allNewsData.value];
         } else {
           console.error("JSON 응답 형식이 올바르지 않습니다:", response);
           // 에러시 기본 더미 데이터 사용
@@ -166,18 +189,29 @@
   // 백엔드에서 필요한 데이터가 있는지 확인하고 필요시 API 호출
   const needToFetchData = (targetPage) => {
     const startIndex = (targetPage - 1) * itemsPerPage;
-    const endIndex = startIndex + itemsPerPage - 1;
-    return endIndex >= newsData.value.length && newsData.value.length < totalCount.value;
+    const endIndex = targetPage * itemsPerPage;
+    
+    // 필요한 데이터의 백엔드 페이지들 계산
+    const startBackendPage = Math.floor(startIndex / backendPageSize) + 1;
+    const endBackendPage = Math.ceil(endIndex / backendPageSize);
+    
+    // 아직 로드되지 않은 페이지가 있는지 확인
+    for (let i = startBackendPage; i <= endBackendPage; i++) {
+      if (!loadedPages.value.has(i)) {
+        return i; // 로드가 필요한 백엔드 페이지 번호 반환
+      }
+    }
+    return null; // 모든 필요한 데이터가 이미 로드됨
   };
 
   const goToPage = async (page) => {
     if (page >= 1 && page <= totalPages.value) {
       currentPage.value = page;
-      
-      if (needToFetchData(page)) {
-        // 백엔드 페이지 계산: 프론트 페이지를 백엔드 페이지로 변환
-        const backendPage = Math.ceil(page * itemsPerPage / backendPageSize);
-        await fetchNewsList(backendPage);
+
+      const backendPageToLoad = needToFetchData(page);
+      if (backendPageToLoad !== null) {
+        console.log(`프론트엔드 페이지 ${page}를 위해 백엔드 페이지 ${backendPageToLoad} 로드`);
+        await fetchNewsList(backendPageToLoad);
       }
     }
   };
@@ -196,6 +230,6 @@
 
   // 컴포넌트 마운트 시 데이터 로드
   onMounted(() => {
-    fetchNewsList(1);
+    fetchNewsList(1, true); // reset=true로 초기 로드
   });
 </script>

app/pages/media/press.vue

@@ -117,13 +117,21 @@
   ]);
 
   const loading = ref(true);
+  const allNewsData = ref([]); // 전체 데이터를 누적하여 저장
   const newsData = ref([]);
   const snsData = ref([]);
   const totalCount = ref(0);
+  const loadedPages = ref(new Set()); // 이미 로드한 백엔드 페이지 추적
 
   // API에서 보도자료 데이터 가져오기
-  const fetchPressList = async (page = 1) => {
+  const fetchPressList = async (page = 1, reset = false) => {
     try {
+      // 이미 로드한 페이지는 스킵
+      if (!reset && loadedPages.value.has(page)) {
+        console.log(`페이지 ${page}는 이미 로드됨`);
+        return;
+      }
+
       loading.value = true;
 
       // 공지사항과 동일한 방식으로 호출
@@ -143,14 +151,15 @@
           const currentPageNum = page || 1;
           const pageSize = 20; // 백엔드의 페이지 사이즈와 동일
 
-          // console.log("보도자료(media) API 응답:", {
-          //   totalCount: totalCount.value,
-          //   listCount: response.list.length,
-          //   currentPage: currentPageNum,
-          //   pageSize,
-          // });
+          console.log("보도자료(media) API 응답:", {
+            totalCount: totalCount.value,
+            listCount: response.list.length,
+            currentPage: currentPageNum,
+            pageSize,
+            backendPage: page,
+          });
 
-          newsData.value = response.list.map((item, index) => {
+          const newData = response.list.map((item, index) => {
             // 번호 = 전체개수 - ((현재페이지-1) * 페이지크기 + 인덱스)
             const displayNumber =
               totalCount.value - ((currentPageNum - 1) * pageSize + index);
@@ -165,26 +174,36 @@
               link: item.etc1 || "#", // etc1 필드에 외부 링크 저장
             };
           });
+
+          if (reset) {
+            // 리셋 모드: 전체 데이터 초기화
+            allNewsData.value = newData;
+            loadedPages.value = new Set([page]);
+          } else {
+            // 누적 모드: 새 데이터를 적절한 위치에 삽입
+            const startIndex = (page - 1) * pageSize;
+            allNewsData.value.splice(startIndex, pageSize, ...newData);
+            loadedPages.value.add(page);
+          }
+
+          // newsData를 allNewsData로 업데이트
+          newsData.value = [...allNewsData.value];
         } else {
           console.error("JSON 응답 형식이 올바르지 않습니다:", response);
           // 에러시 기본 더미 데이터 사용
-          setDefaultPressData();
         }
       } else if (typeof response === "string") {
         // HTML 응답인 경우 (백엔드에서 AJAX 감지 실패시)
         console.warn("HTML 응답을 받았습니다. AJAX 감지가 실패했을 수 있습니다.");
         console.log("HTML 내용:", response.substring(0, 200) + "...");
         // 기본 더미 데이터 사용
-        setDefaultPressData();
       } else {
         console.error("예상하지 못한 응답 형식:", typeof response, response);
         // 기본 더미 데이터 사용
-        setDefaultPressData();
       }
     } catch (error) {
       console.error("보도자료 데이터 로드 실패:", error);
       // 에러시 기본 더미 데이터 사용
-      setDefaultPressData();
     } finally {
       loading.value = false;
     }
@@ -214,229 +233,15 @@
           }));
         } else {
           console.error("SNS JSON 응답 형식이 올바르지 않습니다:", response);
-          setDefaultSnsData();
         }
       } else {
         console.error("SNS 예상하지 못한 응답 형식:", typeof response, response);
-        setDefaultSnsData();
       }
     } catch (error) {
       console.error("SNS 데이터 로드 실패:", error);
-      setDefaultSnsData();
     }
   };
 
-  // 기본 SNS 더미 데이터 설정
-  const setDefaultSnsData = () => {
-    snsData.value = [
-      {
-        id: 1,
-        title: "그린웨일글로벌, 녹색인프라 수출펀드 첫 투자기업 선정. 그린웨일글로벌",
-        image: "/img/img--sns1.png",
-        link: "#",
-      },
-      {
-        id: 2,
-        title: "그린웨일글로벌, 녹색인프라 수출펀드 첫 투자기업 선정. 그린웨일글로벌",
-        image: "/img/img--sns2.png",
-        link: "#",
-      },
-      {
-        id: 3,
-        title: "그린웨일글로벌, 녹색인프라 수출펀드 첫 투자기업 선정. 그린웨일글로벌",
-        image: "/img/img--sns3.png",
-        link: "#",
-      },
-      {
-        id: 4,
-        title: "그린웨일글로벌, 녹색인프라 수출펀드 첫 투자기업 선정. 그린웨일글로벌",
-        image: "/img/img--sns4.png",
-        link: "#",
-      },
-    ];
-  };
-
-  // 기본 더미 데이터 설정
-  const setDefaultPressData = () => {
-    newsData.value = [
-      {
-        id: 1,
-        title: "그린플라스틱연합, ESG친환경대전서 '자원순환 탄소중립 GPA 컨퍼런스' 개최",
-        date: "2025.07.11",
-        image: "/img/img--news.png",
-        link: "/",
-      },
-      {
-        id: 2,
-        title: "친환경 플라스틱 기술 개발 동향",
-        date: "2025.07.10",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 3,
-        title: "탄소중립 실현을 위한 플라스틱 재활용 기술",
-        date: "2025.07.09",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 4,
-        title: "바이오플라스틱 시장 전망과 기술 동향",
-        date: "2025.07.08",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 5,
-        title: "플라스틱 감축을 위한 정부 정책 변화",
-        date: "2025.07.07",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 6,
-        title: "순환경제와 플라스틱 재활용 산업",
-        date: "2025.07.06",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 7,
-        title: "해양 플라스틱 오염 해결을 위한 혁신 기술",
-        date: "2025.07.05",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 8,
-        title: "친환경 포장재 개발 현황",
-        date: "2025.07.04",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 9,
-        title: "플라스틱 대체재 소재 연구 동향",
-        date: "2025.07.03",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 10,
-        title: "ESG 경영과 플라스틱 감축 전략",
-        date: "2025.07.02",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 11,
-        title: "글로벌 플라스틱 규제 동향",
-        date: "2025.07.01",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 12,
-        title: "생분해성 플라스틱 상용화 전망",
-        date: "2025.06.30",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 13,
-        title: "플라스틱 없는 일주일 캠페인",
-        date: "2025.06.29",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 14,
-        title: "재활용 플라스틱 품질 향상 기술",
-        date: "2025.06.28",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 15,
-        title: "플라스틱 순환경제 구축 방안",
-        date: "2025.06.27",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 16,
-        title: "친환경 소재 개발 투자 확대",
-        date: "2025.06.26",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 17,
-        title: "마이크로플라스틱 저감 기술",
-        date: "2025.06.25",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 18,
-        title: "플라스틱 재활용률 제고 방안",
-        date: "2025.06.24",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 19,
-        title: "바이오매스 기반 플라스틱 개발",
-        date: "2025.06.23",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 20,
-        title: "환경친화적 플라스틱 산업 전망",
-        date: "2025.06.22",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 21,
-        title: "플라스틱 폐기물 감축 정책",
-        date: "2025.06.21",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 22,
-        title: "지속가능한 포장재 솔루션",
-        date: "2025.06.20",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 23,
-        title: "플라스틱 리사이클링 혁신 기술",
-        date: "2025.06.19",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 24,
-        title: "친환경 플라스틱 인증 시스템",
-        date: "2025.06.18",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-      {
-        id: 25,
-        title: "탄소 발자국 감축을 위한 플라스틱 대안",
-        date: "2025.06.17",
-        image: "/img/img--cycle--center.png",
-        link: "/",
-      },
-    ];
-  };
-
   // 페이지네이션 로직
   const currentPage = ref(1);
   const itemsPerPage = 10; // 프론트엔드에서 10개씩 표시
@@ -452,18 +257,29 @@
   // 백엔드에서 필요한 데이터가 있는지 확인하고 필요시 API 호출
   const needToFetchData = (targetPage) => {
     const startIndex = (targetPage - 1) * itemsPerPage;
-    const endIndex = startIndex + itemsPerPage - 1;
-    return endIndex >= newsData.value.length && newsData.value.length < totalCount.value;
+    const endIndex = targetPage * itemsPerPage;
+    
+    // 필요한 데이터의 백엔드 페이지들 계산
+    const startBackendPage = Math.floor(startIndex / backendPageSize) + 1;
+    const endBackendPage = Math.ceil(endIndex / backendPageSize);
+    
+    // 아직 로드되지 않은 페이지가 있는지 확인
+    for (let i = startBackendPage; i <= endBackendPage; i++) {
+      if (!loadedPages.value.has(i)) {
+        return i; // 로드가 필요한 백엔드 페이지 번호 반환
+      }
+    }
+    return null; // 모든 필요한 데이터가 이미 로드됨
   };
 
   const goToPage = async (page) => {
     if (page >= 1 && page <= totalPages.value) {
       currentPage.value = page;
 
-      if (needToFetchData(page)) {
-        // 백엔드 페이지 계산: 프론트 페이지를 백엔드 페이지로 변환
-        const backendPage = Math.ceil((page * itemsPerPage) / backendPageSize);
-        await fetchPressList(backendPage);
+      const backendPageToLoad = needToFetchData(page);
+      if (backendPageToLoad !== null) {
+        console.log(`프론트엔드 페이지 ${page}를 위해 백엔드 페이지 ${backendPageToLoad} 로드`);
+        await fetchPressList(backendPageToLoad);
       }
     }
   };
@@ -482,7 +298,7 @@
 
   // 컴포넌트 마운트 시 데이터 로드
   onMounted(() => {
-    fetchPressList(1);
+    fetchPressList(1, true); // reset=true로 초기 로드
     fetchSnsList();
   });
 </script>