feat: switch recent trips to load more

Author: teddy-dongho

src/pages/index.astro

@@ -167,18 +167,17 @@ const tripTypes: Record<string, string> = {
         );
       })}
     </div>
-    <nav class="pagination" id="recent-pagination" aria-label="최근 여행 페이지" hidden>
-      <button type="button" id="recent-prev" aria-label="이전 페이지">‹</button>
-      <span id="recent-page-info"></span>
-      <button type="button" id="recent-next" aria-label="다음 페이지">›</button>
-    </nav>
+    <div class="load-more" id="recent-load-more" hidden>
+      <button type="button" id="recent-more">전체 여행 더보기</button>
+      <span id="recent-count-info"></span>
+    </div>
   </section>
 </BaseLayout>
 
 <script>
   let activeCountries = [];
-  let recentPage = 1;
-  const recentPageSize = 3;
+  let visibleRecentCount = 3;
+  const recentBatchSize = 3;
 
   function parseLocalDate(value) {
     const [year, month, day] = value.split('-').map(Number);
@@ -247,33 +246,30 @@ const tripTypes: Record<string, string> = {
     plansSection.hidden = futureCards.length === 0;
   }
 
-  function updateRecentPagination() {
+  function updateRecentList() {
     const postsGrid = document.getElementById('posts-grid');
-    const pagination = document.getElementById('recent-pagination');
-    const pageInfo = document.getElementById('recent-page-info');
-    const prevBtn = document.getElementById('recent-prev');
-    const nextBtn = document.getElementById('recent-next');
-    if (!postsGrid || !pagination || !pageInfo || !prevBtn || !nextBtn) return;
+    const loadMore = document.getElementById('recent-load-more');
+    const countInfo = document.getElementById('recent-count-info');
+    const moreBtn = document.getElementById('recent-more');
+    if (!postsGrid || !loadMore || !countInfo || !moreBtn) return;
 
     const cards = Array.from(postsGrid.querySelectorAll('.trip-card'));
     const visibleCards = cards.filter(card => card.getAttribute('data-filter-match') !== 'false');
-    const totalPages = Math.max(1, Math.ceil(visibleCards.length / recentPageSize));
-    recentPage = Math.min(recentPage, totalPages);
+    visibleRecentCount = Math.min(Math.max(visibleRecentCount, recentBatchSize), visibleCards.length || recentBatchSize);
 
     cards.forEach(card => {
       card.style.display = 'none';
     });
 
     visibleCards.forEach((card, index) => {
-      const start = (recentPage - 1) * recentPageSize;
-      const end = start + recentPageSize;
-      card.style.display = index >= start && index < end ? 'block' : 'none';
+      card.style.display = index < visibleRecentCount ? 'block' : 'none';
     });
 
-    pagination.hidden = visibleCards.length <= recentPageSize;
-    pageInfo.textContent = `${recentPage} / ${totalPages}`;
-    prevBtn.toggleAttribute('disabled', recentPage <= 1);
-    nextBtn.toggleAttribute('disabled', recentPage >= totalPages);
+    const shownCount = Math.min(visibleRecentCount, visibleCards.length);
+    const remainingCount = Math.max(visibleCards.length - shownCount, 0);
+    loadMore.hidden = remainingCount === 0;
+    moreBtn.textContent = `전체 여행 더보기 (${remainingCount}개 남음)`;
+    countInfo.textContent = `${shownCount} / ${visibleCards.length}`;
   }
 
   function applyFilters() {
@@ -300,7 +296,7 @@ const tripTypes: Record<string, string> = {
       plansSection.hidden = plansGrid.children.length === 0 || visiblePlanCount === 0;
     }
 
-    updateRecentPagination();
+    updateRecentList();
 
     // Notify Map Component
     window.dispatchEvent(new CustomEvent('map-filter-change', {
@@ -334,7 +330,7 @@ const tripTypes: Record<string, string> = {
           activeCountries = [];
           document.querySelectorAll('.country-tag').forEach(b => b.classList.remove('active'));
           btn.classList.add('active');
-          recentPage = 1;
+          visibleRecentCount = recentBatchSize;
           applyFilters();
           return;
         }
@@ -351,7 +347,7 @@ const tripTypes: Record<string, string> = {
         if (activeCountries.length === 0) {
           document.querySelector('[data-country="all"]')?.classList.add('active');
         }
-        recentPage = 1;
+        visibleRecentCount = recentBatchSize;
         applyFilters();
       });
     });
@@ -364,19 +360,14 @@ const tripTypes: Record<string, string> = {
         // remove active class from all buttons
         document.querySelectorAll('.country-tag').forEach(b => b.classList.remove('active'));
         document.querySelector('[data-country="all"]')?.classList.add('active');
-        recentPage = 1;
+        visibleRecentCount = recentBatchSize;
         applyFilters();
       });
     }
 
-    document.getElementById('recent-prev')?.addEventListener('click', () => {
-      recentPage = Math.max(1, recentPage - 1);
-      updateRecentPagination();
-    });
-
-    document.getElementById('recent-next')?.addEventListener('click', () => {
-      recentPage += 1;
-      updateRecentPagination();
+    document.getElementById('recent-more')?.addEventListener('click', () => {
+      visibleRecentCount += recentBatchSize;
+      updateRecentList();
     });
   });
 </script>
@@ -592,7 +583,7 @@ const tripTypes: Record<string, string> = {
     gap: 0.5rem;
   }
 
-  .pagination {
+  .load-more {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -602,36 +593,31 @@ const tripTypes: Record<string, string> = {
     border-top: 1px solid var(--color-border);
   }
 
-  .pagination[hidden] {
+  .load-more[hidden] {
     display: none;
   }
 
-  .pagination button {
-    width: 36px;
-    height: 36px;
+  .load-more button {
+    min-height: 40px;
+    padding: 0 1rem;
     border: 1px solid var(--color-border);
     border-radius: 8px;
     background: var(--color-bg-secondary);
     color: var(--color-text);
     cursor: pointer;
-    font-size: 1.25rem;
-    line-height: 1;
+    font-size: 0.9rem;
+    font-weight: 700;
     transition: all 0.2s;
   }
 
-  .pagination button:hover:not(:disabled) {
+  .load-more button:hover {
     border-color: var(--color-primary);
     color: var(--color-primary);
     box-shadow: 0 4px 14px rgba(67, 97, 238, 0.12);
   }
 
-  .pagination button:disabled {
-    cursor: not-allowed;
-    opacity: 0.35;
-  }
-
-  .pagination span {
-    min-width: 56px;
+  .load-more span {
+    min-width: 64px;
     text-align: center;
     color: var(--color-text-muted);
     font-size: 0.875rem;
@@ -780,6 +766,15 @@ const tripTypes: Record<string, string> = {
       gap: 0.25rem;
     }
 
+    .load-more {
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .load-more button {
+      width: 100%;
+    }
+
     .country-tag {
       padding: 0.25rem 0.5rem;
       font-size: 0.75rem;