Feat[THKV-114]: Pagination 컴포넌트 리디자인 적용

src/components/common/Button/Button.variant.tsx

@@ -43,7 +43,7 @@ export const buttonVariants = cva(
       {
         variant: 'pagination',
         className:
-          'flex w-7 h-7 p-0 cursor-pointer items-center justify-center rounded bg-green-200 text-center text-white-100 hover:bg-green-300 disabled:cursor-default disabled:hover:bg-green-200 active:bg-green-400',
+          'flex w-8 h-8 p-0 cursor-pointer items-center justify-center rounded-lg bg-white-100 text-black-100 text-base leading-[1.44] tracking-[-0.008em] font-bold border border-grey-100 hover:bg-grey-100 active:bg-grey-200 disabled:cursor-default disabled:hover:bg-white-100',
       },
     ],
   },

src/components/common/Icon/assets/ArrowNext.tsx

@@ -11,16 +11,15 @@ const ArrowNext = ({
       width={width}
       height={height}
       viewBox='0 0 24 24'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
-        d='M8.5 5L15.5 12L8.5 19'
-        stroke={color}
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M9.86321 6.2636C10.2147 5.91213 10.7845 5.91213 11.136 6.2636L16.236 11.3636C16.5875 11.7151 16.5875 12.2849 16.236 12.6364L11.136 17.7364C10.7845 18.0879 10.2147 18.0879 9.86321 17.7364C9.51174 17.3849 9.51174 16.8151 9.86321 16.4636L14.3268 12L9.86321 7.5364C9.51174 7.18492 9.51174 6.61508 9.86321 6.2636Z'
+        stroke='none'
+        fill={color}
       />
     </svg>
   );

src/components/common/Icon/assets/ArrowNextBlock.tsx

@@ -11,16 +11,15 @@ const ArrowNextBlock = ({
       width={width}
       height={height}
       viewBox='0 0 24 24'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
-        d='M13 6L19 12L13 18M6 6L12 12L6 18'
-        stroke={color}
-        strokeWidth='2'
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M18.336 11.4697C18.6875 11.7626 18.6875 12.2374 18.336 12.5303L13.236 16.7803C12.8845 17.0732 12.3147 17.0732 11.9632 16.7803C11.6117 16.4874 11.6117 16.0126 11.9632 15.7197L16.4268 12L11.9632 8.28033C11.6117 7.98744 11.6117 7.51256 11.9632 7.21967C12.3147 6.92678 12.8845 6.92678 13.236 7.21967L18.336 11.4697ZM7.236 7.21967L12.336 11.4697C12.6875 11.7626 12.6875 12.2374 12.336 12.5303L7.236 16.7803C6.88453 17.0732 6.31468 17.0732 5.96321 16.7803C5.61174 16.4874 5.61174 16.0126 5.96321 15.7197L10.4268 12L5.96321 8.28033C5.61174 7.98744 5.61174 7.51256 5.96321 7.21967C6.31468 6.92678 6.88453 6.92678 7.236 7.21967Z'
+        stroke='none'
+        fill={color}
       />
     </svg>
   );

src/components/common/Icon/assets/ArrowPrev.tsx

@@ -11,16 +11,15 @@ const ArrowPrev = ({
       width={width}
       height={height}
       viewBox='0 0 24 24'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
-        d='M15.5 19L8.5 12L15.5 5'
-        stroke={color}
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M14.1364 6.2636C14.4879 6.61508 14.4879 7.18492 14.1364 7.5364L9.67279 12L14.1364 16.4636C14.4879 16.8151 14.4879 17.3849 14.1364 17.7364C13.7849 18.0879 13.2151 18.0879 12.8636 17.7364L7.7636 12.6364C7.41213 12.2849 7.41213 11.7151 7.7636 11.3636L12.8636 6.2636C13.2151 5.91213 13.7849 5.91213 14.1364 6.2636Z'
+        stroke='none'
+        fill={color}
       />
     </svg>
   );

src/components/common/Icon/assets/ArrowPrevBlock.tsx

@@ -11,16 +11,15 @@ const ArrowPrevBlock = ({
       width={width}
       height={height}
       viewBox='0 0 24 24'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
-        d='M11 6L5 12L11 18M18 6L12 12L18 18'
-        stroke={color}
-        strokeWidth='2'
-        strokeLinecap='round'
-        strokeLinejoin='round'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M5.66399 11.4697C5.31252 11.7626 5.31252 12.2374 5.66399 12.5303L10.764 16.7803C11.1155 17.0732 11.6853 17.0732 12.0368 16.7803C12.3883 16.4874 12.3883 16.0126 12.0368 15.7197L7.57318 12L12.0368 8.28033C12.3883 7.98744 12.3883 7.51256 12.0368 7.21967C11.6853 6.92678 11.1155 6.92678 10.764 7.21967L5.66399 11.4697ZM16.764 7.21967L11.664 11.4697C11.3125 11.7626 11.3125 12.2374 11.664 12.5303L16.764 16.7803C17.1155 17.0732 17.6853 17.0732 18.0368 16.7803C18.3883 16.4874 18.3883 16.0126 18.0368 15.7197L13.5732 12L18.0368 8.28033C18.3883 7.98744 18.3883 7.51256 18.0368 7.21967C17.6853 6.92678 17.1155 6.92678 16.764 7.21967Z'
+        stroke='none'
+        fill={color}
       />
     </svg>
   );

src/components/common/Icon/assets/index.ts

@@ -33,7 +33,7 @@ type IconMapEntry = {
 };
 
 type ColorClassNames = {
-  [group in 'white' | 'dark' | 'red' | 'green' | 'gray']: {
+  [group in 'white' | 'dark' | 'red' | 'green' | 'gray' | 'grey']: {
     [shade: number]: string;
   };
 };
@@ -45,10 +45,10 @@ export const iconMap: Record<string, IconMapEntry> = {
   plus: { type: 'stroke', file: Plus },
   arrowUp: { type: 'stroke', file: Arrowup },
   arrowDown: { type: 'stroke', file: ArrowDown },
-  arrowPrev: { type: 'stroke', file: ArrowPrev },
-  arrowNext: { type: 'stroke', file: ArrowNext },
-  arrowPrevBlock: { type: 'stroke', file: ArrowPrevBlock },
-  arrowNextBlock: { type: 'stroke', file: ArrowNextBlock },
+  arrowPrev: { type: 'fill', file: ArrowPrev },
+  arrowNext: { type: 'fill', file: ArrowNext },
+  arrowPrevBlock: { type: 'fill', file: ArrowPrevBlock },
+  arrowNextBlock: { type: 'fill', file: ArrowNextBlock },
   dashboard: {
     type: 'stroke',
     file: Dashboard,
@@ -147,12 +147,16 @@ const COLOR_CLASSNAMES: ColorClassNames = {
     700: 'gray-700',
     800: 'gray-800',
   },
+  grey: {
+    200: 'grey-200',
+  },
 };
 
 export const COLORS = {
   // 리디자인 색상 적용
   warning: colors.red[500],
   black: colors.black[100],
+  grey: colors.grey[200],
   //---
   // 기존 아이콘 색상
   white: colors.white[100],

src/components/common/Pagination/index.tsx

@@ -32,7 +32,9 @@ const Pagination = ({ limit, page, setPage, totalPosts }: Props) => {
         variant={'pagination'}
         className={cn(
           '',
-          page === i + ONE ? 'bg-green-400 hover:bg-green-400' : '',
+          page === i + ONE
+            ? 'bg-green-500 text-white-100 hover:bg-green-500'
+            : '',
         )}
       >
         {i + ONE}
@@ -76,29 +78,49 @@ const Pagination = ({ limit, page, setPage, totalPosts }: Props) => {
         disabled={blockNum === ZERO}
         variant='pagination'
       >
-        <Icon name='arrowPrevBlock' width={15} height={15} color='white' />
+        <Icon
+          name='arrowPrevBlock'
+          width={24}
+          height={24}
+          color={blockNum === ZERO ? 'grey' : 'black'}
+        />
       </Button>
       <Button
         onClick={prevBtnHandler}
         disabled={page === ONE}
         variant='pagination'
       >
-        <Icon name='arrowPrev' width={15} height={15} color='white' />
+        <Icon
+          name='arrowPrev'
+          width={24}
+          height={24}
+          color={page === ONE ? 'grey' : 'black'}
+        />
       </Button>
       {sliceArr}
       <Button
         onClick={nextBtnHandler}
         disabled={page === totalPages}
         variant='pagination'
       >
-        <Icon name='arrowNext' width={15} height={15} color='white' />
+        <Icon
+          name='arrowNext'
+          width={24}
+          height={24}
+          color={page === totalPages ? 'grey' : 'black'}
+        />
       </Button>
       <Button
         onClick={lastPage}
         disabled={blockArea >= totalPages - PAGE_LIMIT}
         variant='pagination'
       >
-        <Icon name='arrowNextBlock' width={15} height={15} color='white' />
+        <Icon
+          name='arrowNextBlock'
+          width={24}
+          height={24}
+          color={blockArea >= totalPages - PAGE_LIMIT ? 'grey' : 'black'}
+        />
       </Button>
     </div>
   );