Merge pull request #216 from Moaguide-develop/feat/articleDetail

Fix: QA Article Page

Author: jiohjung98

src/components/common/MobileFooter.tsx

@@ -49,12 +49,12 @@ const MobileFooter = () => {
       </div>
       <div
         onClick={() => {
-          router.push('/practicepage');
+          router.push('/learning');
         }}
         className="flex-1 flex flex-col gap-1 items-center">
         <div>
           <img
-            src={`${pathname.includes('/practice') ? '/images/footer/practice_active.svg' : '/images/footer/practice.svg'}`}
+            src={`${pathname.includes('/learning') ? '/images/footer/practice_active.svg' : '/images/footer/practice.svg'}`}
             alt=""
           />
         </div>

src/components/learning/FilteredContents.tsx

@@ -9,6 +9,7 @@ import viewIcon from '../../../public/images/learning/article_filter_view.svg';
 import { extractText } from '@/utils/extractText';
 import { useLikeStore } from '@/store/articleLike.store';
 import { useViewStore } from '@/store/articleView.store';
+import ResponsivePagination from './ResponsivePagination';
 
 interface FilteredContentsProps {
   contents: FilteredResponse['content'];
@@ -95,7 +96,7 @@ const FilteredContents = ({
                   <h3 className="text-lg font-bold text-gray-800 mb-4 line-clamp-1">
                     {item.article.title}
                   </h3>
-                  <p className="text-sm text-gray-600 line-clamp-2">
+                  <p className="text-sm text-gray-600 line-clamp-2 max-w-full overflow-hidden break-words break-all">
                     {extractText(item.article.description || '')}
                   </p>
                   <div className="text-xs text-gray-500 mt-4 flex items-center justify-end gap-4">
@@ -129,26 +130,11 @@ const FilteredContents = ({
       </div>
 
       {totalPages > 1 && (
-        <div className="flex justify-center mt-8 mb-2">
-          <ul className="flex items-center space-x-1">
-            {Array.from({ length: totalPages }, (_, i) => i + 1).map(
-              (pageNum) => (
-                <li key={pageNum}>
-                  <button
-                    onClick={() => onPageChange(pageNum)}
-                    className={`w-8 h-8 flex items-center justify-center border rounded ${
-                      page === pageNum
-                        ? 'bg-purple-600 text-white'
-                        : 'bg-white text-gray-800 border-gray-300 hover:bg-gray-100'
-                    }`}
-                  >
-                    {pageNum}
-                  </button>
-                </li>
-              )
-            )}
-          </ul>
-        </div>
+        <ResponsivePagination
+          totalPages={totalPages}
+          currentPage={page}
+          onPageChange={onPageChange}
+        />
       )}
     </div>
   );

src/components/learning/ResponsivePagination.tsx

@@ -0,0 +1,96 @@
+'use client';
+import { useState, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import React from 'react';
+
+interface PaginationProps {
+  totalPages: number;
+  currentPage: number;
+  onPageChange: (newPage: number) => void;
+}
+
+const ResponsivePagination = ({ totalPages, currentPage, onPageChange }: PaginationProps) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [pageNumbers, setPageNumbers] = useState<number[]>([]);
+  const [currentRange, setCurrentRange] = useState<number>(0);
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+
+  useEffect(() => {
+    const pageSize = isMobile ? 5 : 10;
+    const range = Math.floor((currentPage - 1) / pageSize);
+    setCurrentRange(range);
+  }, [currentPage, isMobile]);
+
+  useEffect(() => {
+    const checkScreenSize = () => setIsMobile(window.innerWidth < 768);
+    checkScreenSize();
+    window.addEventListener('resize', checkScreenSize);
+    return () => window.removeEventListener('resize', checkScreenSize);
+  }, []);
+
+  useEffect(() => {
+    const pageSize = isMobile ? 5 : 10; 
+    const start = currentRange * pageSize + 1;
+    const end = Math.min(start + pageSize - 1, totalPages);
+    const pages: number[] = [];
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+    setPageNumbers(pages);
+  }, [currentRange, totalPages, isMobile]);
+
+  const handlePageClick = (page: number) => {
+    onPageChange(page);
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('page', page.toString());
+    router.replace(`?${params.toString()}`, { scroll: false });
+  };
+
+  const handleNextRange = () => {
+    const pageSize = isMobile ? 5 : 10;
+    if ((currentRange + 1) * pageSize < totalPages) {
+      const newRange = currentRange + 1;
+      setCurrentRange(newRange);
+      const firstPageOfNextRange = newRange * pageSize + 1;
+      handlePageClick(firstPageOfNextRange);
+    }
+  };
+
+  const handlePrevRange = () => {
+    if (currentRange > 0) {
+      const pageSize = isMobile ? 5 : 10;
+      const newRange = currentRange - 1;
+      setCurrentRange(newRange);
+      const firstPageOfPrevRange = newRange * pageSize + 1;
+      handlePageClick(firstPageOfPrevRange);
+    }
+  };
+
+  return (
+    <div className="flex justify-center items-center space-x-2 mt-10 mb-10">
+      <button
+        onClick={handlePrevRange}
+        disabled={currentRange === 0}
+        className="px-3 py-1 border rounded disabled:opacity-50">
+        &lt;
+      </button>
+      {pageNumbers.map((page) => (
+        <button
+          key={page}
+          onClick={() => handlePageClick(page)}
+          className={`px-3 py-1 border rounded ${page === currentPage ? 'bg-purple-600 text-white' : 'bg-white text-black'}`}>
+          {page}
+        </button>
+      ))}
+      <button
+        onClick={handleNextRange}
+        disabled={(currentRange + 1) * (isMobile ? 5 : 10) >= totalPages}
+        className="px-3 py-1 border rounded disabled:opacity-50">
+        &gt;
+      </button>
+    </div>
+  );
+};
+
+export default ResponsivePagination;