@jk-core/components 1.1.4 → 1.1.5

package/dist/src/common/Pagination/index.d.ts

@@ -7,10 +7,15 @@ interface PaginationProps {
      * 현재 페이지
      */
     currentPage: number;
+    /**
+     * 페이지 크기 (기본값: false)
+     * true로 설정하면 보여지는 페이지의 개수가 5개에서 7개로 늘어납니다.
+     */
+    large?: boolean;
     /**
      * 페이지 클릭 핸들러
      */
     onPageClick: (page: number) => void;
 }
-export default function Pagination({ totalPage, currentPage, onPageClick }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export default function Pagination({ totalPage, currentPage, onPageClick, large }: PaginationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jk-core/components",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "types": "./dist/index.d.ts",
@@ -37,8 +37,7 @@
     "calendar"
   ],
   "peerDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react": "^19.1.0"
   },
   "scripts": {
     "build": "yarn clean && vite build",

package/src/common/Pagination/Pagination.module.scss

@@ -36,6 +36,22 @@ $size: 40px;
     transform: translateX(0);
   }
 }
+@keyframes slideTripleLeft {
+  from {
+    transform: translateX(-$size * 3);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes slideTripleRight {
+  from {
+    transform: translateX($size * 3);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
 
 .pagination {
   position: relative;
@@ -51,12 +67,17 @@ $size: 40px;
   width: $size;
   height: $size;
   border-radius: 100%;
-  background-color: var(--G-20);
+  background-color: var(--G-10);
   cursor: pointer;
   user-select: none;
   -webkit-user-drag: none;
   pointer-events: auto;
   transition: background-color 0.1s ease;
+  flex-shrink: 0;
+
+  @media screen and (max-width: 500px) {
+    display: none;
+  }
 
   & > svg {
     width: 20px;
@@ -74,7 +95,7 @@ $size: 40px;
   }
 
   &--disabled {
-    background-color: var(--G-20) !important;
+    background-color: var(--G-10) !important;
     cursor: default;
 
     & > svg {
@@ -85,16 +106,17 @@ $size: 40px;
 
 .slider {
   position: relative;
-  width: $size * 8;
   height: $size;
   display: flex;
   overflow: visible;
-  background-color: var(--G-20);
+  background-color: var(--G-10);
   border-radius: 10px;
 }
 
 .track {
   position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
   width: $size;
   height: $size;
   border-radius: 10px;
@@ -105,7 +127,6 @@ $size: 40px;
 }
 
 .pages {
-  width: $size * 5;
   overflow: hidden visible;
   display: flex;
 }
@@ -158,6 +179,14 @@ $size: 40px;
   animation: slideDoubleRight $delay;
 }
 
+.tripleLeft {
+  animation: slideTripleLeft $delay;
+}
+
+.tripleRight {
+  animation: slideTripleRight $delay;
+}
+
 .portal {
   display: flex;
   align-items: center;

package/src/common/Pagination/index.tsx

@@ -14,28 +14,34 @@ interface PaginationProps {
    */
   currentPage: number;
 
+  /**
+   * 페이지 크기 (기본값: false)
+   * true로 설정하면 보여지는 페이지의 개수가 5개에서 7개로 늘어납니다.
+   */
+  large?: boolean;
   /**
    * 페이지 클릭 핸들러
    */
   onPageClick: (page: number) => void;
 }
 
-export default function Pagination({ totalPage, currentPage, onPageClick }: PaginationProps) {
-  const [animation, setAnimation] = useState<'left' | 'right' | 'doubleRight' | 'doubleLeft' | ''>('');
+export default function Pagination({ totalPage, currentPage, onPageClick, large = false }: PaginationProps) {
+  const [animation, setAnimation] = useState<'left' | 'right' | 'doubleRight' | 'doubleLeft' | 'tripleRight' | 'tripleLeft' | ''>('');
   const [selectedPage, setSelectedPage] = useState(currentPage || 1);
+  const weight = useMemo(() => (large ? 2 : 0), [large]);
 
   const pageArray = useMemo(() => {
-    if (!totalPage) return Array.from({ length: 9 }).map((_, i) => (i === 2 ? 1 : null));
+    if (!totalPage) return Array.from({ length: 9 + weight }).map((_, i) => (i === 2 ? 1 : null));
 
-    return Array.from({ length: 9 }).map((_, i) => {
-      const pageIndex = selectedPage + i - 2;
+    return Array.from({ length: 9 + weight }).map((_, i) => {
+      const pageIndex = selectedPage + i - 2 - (weight / 2) ;
 
       if (pageIndex < 1 || pageIndex > totalPage) {
         return null;
       }
       return pageIndex;
     });
-  }, [selectedPage, totalPage]);
+  }, [selectedPage, totalPage, weight]);
 
   const handlePageClick = (page: number) => {
     if (page > totalPage || page < 1) return;
@@ -56,6 +62,12 @@ export default function Pagination({ totalPage, currentPage, onPageClick }: Pagi
       case -2:
         setAnimation('doubleLeft');
         break;
+      case 3:
+        setAnimation('tripleRight');
+        break;
+      case -3:
+        setAnimation('tripleLeft');
+        break;
       default:
         setAnimation('');
     }
@@ -76,12 +88,12 @@ export default function Pagination({ totalPage, currentPage, onPageClick }: Pagi
       >
         <LeftArrowIcon />
       </button>
-      <div className={styles.slider}>
+      <div
+        className={styles.slider}
+        style={{ width: `${(8 + weight) * 40}px` }}
+      >
         <div
           className={styles.track}
-          style={{
-            left: '140px',
-          }}
         />
         <div className={styles.portal}>
           {selectedPage > 3 && (
@@ -96,7 +108,10 @@ export default function Pagination({ totalPage, currentPage, onPageClick }: Pagi
             </>
           )}
         </div>
-        <div className={styles.pages}>
+        <div
+          className={styles.pages}
+          style={{ width: `${(5 + weight) * 40}px` }}
+        >
           <div className={`${styles.pageWrapper} ${animation === 'left' ? styles.left : ''} ${styles[animation]}`}>
             {pageArray.map((page, index) => (
               <button

package/src/common/SegmentButton/SegmentButton.module.scss

@@ -5,6 +5,7 @@
   background-color: var(--G-10);
   border-radius: 8px;
   z-index: 0;
+  overflow: hidden;
 
   &--selector {
     position: absolute;

package/src/common/Table/Table.module.scss

@@ -1,12 +1,15 @@
 .wrapper {
   width: 100%;
   max-height: 60dvh;
-  border: 1px solid var(--G-30);
   overflow: auto;
 
   &__rounded {
     border-radius: 10px;
   }
+
+  &__border {
+    border: 1px solid var(--G-30);
+  }
 }
 
 .table {
@@ -30,6 +33,8 @@
     flex-shrink: 0;
     background-color: var(--G-5);
     padding: 10px;
+    font-weight: 600;
+    color: var(--G-80);
     border-right: 1px solid var(--G-30);
     border-bottom: 1px solid var(--G-30);
   }
@@ -49,6 +54,8 @@
     padding: 10px;
     background-color: var(--white);
     word-break: break-all;
+    color: var(--G-80);
+    font-weight: 400;
     border-bottom: 1px solid var(--G-30);
     border-right: 1px solid var(--G-30);
   }