From 7ce94574a7b5cba252472e1ec9d2cb14c1b38642 Mon Sep 17 00:00:00 2001
From: hyeonsu <hyeonsu@wace.me>
Date: Wed, 27 Aug 2025 11:33:27 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/common/Pagination.tsx | 42 ++++++++++++-----------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/frontend/components/common/Pagination.tsx b/frontend/components/common/Pagination.tsx
index 2046e894..4709baaf 100644
--- a/frontend/components/common/Pagination.tsx
+++ b/frontend/components/common/Pagination.tsx
@@ -118,9 +118,9 @@ export function Pagination({
   // 항상 페이지네이션을 표시 (1페이지일 때도 표시)
 
   return (
-    <div className={cn("flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", className)}>
+    <div className={cn("flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between", className)}>
       {/* 페이지 정보 */}
-      <div className="text-muted-foreground text-sm">
+      <div className="text-muted-foreground text-center text-sm lg:text-left">
         <span className="font-medium">{startItem.toLocaleString()}</span>
         {" - "}
         <span className="font-medium">{endItem.toLocaleString()}</span>
@@ -129,10 +129,10 @@ export function Pagination({
       </div>
 
       {/* 페이지네이션 컨트롤 */}
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+      <div className="flex flex-col items-center gap-4 lg:flex-row">
         {/* 페이지 크기 선택 */}
         {showPageSizeSelector && onPageSizeChange && (
-          <div className="flex items-center gap-2">
+          <div className="flex items-center justify-center gap-2">
             <span className="text-muted-foreground text-sm">페이지당</span>
             <Select value={itemsPerPage.toString()} onValueChange={handlePageSizeChange}>
               <SelectTrigger className="w-20">
@@ -151,42 +151,44 @@ export function Pagination({
         )}
 
         {/* 페이지 버튼들 */}
-        <div className="flex items-center gap-1">
+        <div className="flex items-center justify-center gap-1">
           {/* 첫 페이지로 */}
           <Button
-            variant="outline"
+            variant="ghost"
             size="sm"
             onClick={() => handlePageChange(1)}
             disabled={currentPage === 1}
-            className="h-9 w-9 p-0"
+            className="h-8 w-8 p-0 lg:h-9 lg:w-9"
             title="첫 페이지"
           >
-            <ChevronsLeft className="h-4 w-4" />
+            <ChevronsLeft className="h-3 w-3 lg:h-4 lg:w-4" />
           </Button>
 
           {/* 이전 페이지 */}
           <Button
-            variant="outline"
+            variant="ghost"
             size="sm"
             onClick={() => handlePageChange(currentPage - 1)}
             disabled={currentPage === 1}
-            className="h-9 w-9 p-0"
+            className="h-8 w-8 p-0 lg:h-9 lg:w-9"
             title="이전 페이지"
           >
-            <ChevronLeft className="h-4 w-4" />
+            <ChevronLeft className="h-3 w-3 lg:h-4 lg:w-4" />
           </Button>
 
           {/* 페이지 번호들 */}
           {pageNumbers.map((page, index) => (
             <div key={index}>
               {page === "..." ? (
-                <span className="text-muted-foreground flex h-9 w-9 items-center justify-center text-sm">...</span>
+                <span className="text-muted-foreground flex h-8 w-8 items-center justify-center text-sm lg:h-9 lg:w-9">
+                  ...
+                </span>
               ) : (
                 <Button
-                  variant={page === currentPage ? "default" : "outline"}
+                  variant={page === currentPage ? "default" : "ghost"}
                   size="sm"
                   onClick={() => handlePageChange(page as number)}
-                  className="h-9 w-9 p-0"
+                  className="h-8 w-8 p-0 lg:h-9 lg:w-9"
                 >
                   {page}
                 </Button>
@@ -196,26 +198,26 @@ export function Pagination({
 
           {/* 다음 페이지 */}
           <Button
-            variant="outline"
+            variant="ghost"
             size="sm"
             onClick={() => handlePageChange(currentPage + 1)}
             disabled={currentPage === totalPages}
-            className="h-9 w-9 p-0"
+            className="h-8 w-8 p-0 lg:h-9 lg:w-9"
             title="다음 페이지"
           >
-            <ChevronRight className="h-4 w-4" />
+            <ChevronRight className="h-3 w-3 lg:h-4 lg:w-4" />
           </Button>
 
           {/* 마지막 페이지로 */}
           <Button
-            variant="outline"
+            variant="ghost"
             size="sm"
             onClick={() => handlePageChange(totalPages)}
             disabled={currentPage === totalPages}
-            className="h-9 w-9 p-0"
+            className="h-8 w-8 p-0 lg:h-9 lg:w-9"
             title="마지막 페이지"
           >
-            <ChevronsRight className="h-4 w-4" />
+            <ChevronsRight className="h-3 w-3 lg:h-4 lg:w-4" />
           </Button>
         </div>
       </div>