Merge pull request 'commonComponent' (#6) from commonComponent into dev

Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/6

frontend/components/admin/UserHistoryModal.tsx

@@ -230,17 +230,15 @@ export function UserHistoryModal({ isOpen, onClose, userId, userName }: UserHist
                 </Table>
               </div>
 
-              {/* 페이지네이션 (원본 JSP와 유사한 구조) */}
-              {totalItems > 0 && (
-                <div className="flex-shrink-0 pt-4">
-                  <Pagination
-                    paginationInfo={paginationInfo}
-                    onPageChange={handlePageChange}
-                    onPageSizeChange={() => {}} // 페이지 크기는 고정 (원본과 동일)
-                  />
-                  <div className="text-muted-foreground mt-2 text-center text-sm">총 {totalItems}건</div>
-                </div>
-              )}
+              {/* 페이지네이션 (항상 표시) */}
+              <div className="flex-shrink-0 pt-4">
+                <Pagination
+                  paginationInfo={paginationInfo}
+                  onPageChange={handlePageChange}
+                  onPageSizeChange={() => {}} // 페이지 크기는 고정 (원본과 동일)
+                />
+                <div className="text-muted-foreground mt-2 text-center text-sm">총 {totalItems}건</div>
+              </div>
             </>
           )}
         </div>

frontend/components/common/Pagination.tsx

@@ -115,14 +115,12 @@ export function Pagination({
     }
   };
 
-  if (totalPages <= 1) {
-    return null; // 페이지가 1개 이하면 렌더링하지 않음
-  }
+  // 항상 페이지네이션을 표시 (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>
@@ -131,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">
@@ -153,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>
@@ -198,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>