Feature. Apply Styles to TDataGrid and TPagination, Modify Test Code

src/components/data-container/data-grid/TDataGrid.interface.ts

@@ -28,6 +28,9 @@ export interface TDataGridProps extends TBaseProps, AgReactUiProps {
     paging?: TPageResponseVO,
     maxRowsWithoutScroll?: number,
 
+    noJumper?: boolean,
+    jumperText?: string,
+
     noDataText?: string,
     noDataContent?: {
         title: string,

src/components/data-container/data-grid/TDataGrid.tsx

@@ -107,7 +107,7 @@ const TDataGrid = forwardRef((props: TDataGridProps, ref: Ref<AgGridReact>) => {
         <div className={`t-data-grid ${rootClass}`} style={rootStyle} id={props.id} data-testid={'data-grid-root'}>
             {
                 !props.noHeader && (
-                    <div className={'t-data-grid__header'}>
+                    <div className={'t-data-grid__header'} data-testid={'data-grid-header-root'}>
                         {
                             !props.noTotalRows && (
                                 <div className={'t-data-grid__header__pagination'}>
@@ -126,14 +126,14 @@ const TDataGrid = forwardRef((props: TDataGridProps, ref: Ref<AgGridReact>) => {
 
                         {
                             props.leftAction && (
-                                <div className={'t-data-grid__header__left-action'}>
+                                <div className={'t-data-grid__header__left-action'} data-testid={'data-gird-left-action-root'}>
                                     {props.leftAction}
                                 </div>
                             )
                         }
                         {
                             props.rightAction && (
-                                <div className={'t-data-grid__header__right-action'}>
+                                <div className={'t-data-grid__header__right-action'} data-testid={'data-gird-right-action-root'}>
                                     {props.rightAction}
                                 </div>
                             )
@@ -143,7 +143,7 @@ const TDataGrid = forwardRef((props: TDataGridProps, ref: Ref<AgGridReact>) => {
             }
 
 
-            <div className={'t-data-grid__body ag-theme-material'}
+            <div className={'t-data-grid__body ag-theme-material'} data-testid={'data-grid-body-root'}
                  style={{height: generatedHeightProps.height}}>
                 <AgGridReact className={''}
                              ref={gridRef}
@@ -160,6 +160,8 @@ const TDataGrid = forwardRef((props: TDataGridProps, ref: Ref<AgGridReact>) => {
                                  totalPages={props.paging?.totalPages || 1}
                                  pageNumber={props.paging?.pageNumber || 1}
                                  onChangePageNumber={(value) => props.onChangePageNumber(value)}
+                                 noJumper={props.noJumper}
+                                 jumperText={props.jumperText}
                     />
                 )
             }
@@ -180,8 +182,8 @@ TDataGrid.defaultProps = {
     suppressRowClickSelection: true,
     enableCellTextSelection: true,
     noDataText: '검색 조건에 맞는 데이터가 없습니다',
-    headerHeight: 48,
-    rowHeight: 76,
+    headerHeight: 32,
+    rowHeight: 40,
 };
 
 TDataGrid.displayName = 'TDataGrid';

src/components/data-container/pagination/TPagination.interface.ts

@@ -4,6 +4,8 @@ export interface TPaginationProps extends TBaseProps {
 
     totalPages: number,
     pageNumber: number,
+    noJumper?: boolean,
+    jumperText?: string,
 
     onChangePageNumber(value: number): void,
 }

src/components/data-container/pagination/TPagination.tsx

@@ -1,7 +1,10 @@
-import {CSSProperties, forwardRef, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useState} from 'react';
+import {CSSProperties, forwardRef, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 
 import {TPaginationProps, TPaginationRef} from './TPagination.interface';
 import TIcon from '../../icon/TIcon';
+import TButton from '~/button/button/TButton';
+import TNumberField from '~/input/number-field/TNumberField';
+import rule from '@/common/validator/TValidatorRule';
 
 
 const TPagination = forwardRef((props: TPaginationProps, ref: Ref<TPaginationRef>) => {
@@ -16,10 +19,13 @@ const TPagination = forwardRef((props: TPaginationProps, ref: Ref<TPaginationRef
         nextPageSet(): void { onClickNextPageSet(); },
         previousPage(): void { onClickPreviousPage(); },
         previousPageSet(): void { onClickPreviousPageSet(); },
+        jumpToPage(): void { onClickJumperButton(); },
     }));
 
     const [pageRange, setPageRange] = useState<{ min: number, max: number }>({min: 1, max: 1});
-
+    const [jumperPage, setJumperPage] = useState<number>(props.pageNumber);
+    const numberFieldRef = useRef(null);
+    const jumperTextFieldMin = 1;
     // endregion
 
 
@@ -49,7 +55,6 @@ const TPagination = forwardRef((props: TPaginationProps, ref: Ref<TPaginationRef
     const getPageRange = useCallback((currentPage: number, totalPages: number) => {
         const min = Math.floor((currentPage - 1) / 10) * 10 + 1;
         const max = Math.min(totalPages, min + 9);
-
         return {min, max};
     }, []);
 
@@ -108,6 +113,14 @@ const TPagination = forwardRef((props: TPaginationProps, ref: Ref<TPaginationRef
         onChangePageNumber(targetPage);
     }, [onChangePageNumber, pageRange.min, props.pageNumber]);
 
+    const onChangeJumperPageNumber = useCallback((pageNumber: string) => {
+        setJumperPage(Number(pageNumber));
+    }, [pageRange]);
+
+    const onClickJumperButton = useCallback(() => {
+        const validResult = numberFieldRef.current?.validate();
+        if (validResult === true && onChangePageNumber) { onChangePageNumber(jumperPage); }
+    }, [jumperPage, pageRange, onChangePageNumber]);
 
     // endregion
 
@@ -116,14 +129,14 @@ const TPagination = forwardRef((props: TPaginationProps, ref: Ref<TPaginationRef
     useEffect(() => {
         const range = getPageRange(props.pageNumber, props.totalPages);
         setPageRange(range);
+        setJumperPage(props.pageNumber);
     }, [getPageRange, props.pageNumber, props.totalPages]);
 
-
     // endregion
 
 
     return (
-        <nav className={`t-pagination ${rootClass}`} style={rootStyle}>
+        <nav className={`t-pagination ${rootClass}`} style={rootStyle} data-testid={'pagination-root'}>
 
             <span className={'t-pagination__nav-button-container'}>
                 <TIcon className={`t-pagination__nav-button-container__button ${prevPageButtonClass}`}
@@ -132,14 +145,14 @@ const TPagination = forwardRef((props: TPaginationProps, ref: Ref<TPaginationRef
                        disabled={props.pageNumber === 1}
                        onClick={onClickPreviousPageSet}
                        onKeyDownEnter={onClickPreviousPageSet}
-                       onKeyDownSpace={onClickPreviousPageSet}>t_navigate_left_double</TIcon>
+                       onKeyDownSpace={onClickPreviousPageSet}>keyboard_double_arrow_left</TIcon>
                 <TIcon className={`t-pagination__nav-button-container__button ${prevPageButtonClass}`}
                        clickable
                        small
                        disabled={props.pageNumber === 1}
                        onClick={onClickPreviousPage}
                        onKeyDownEnter={onClickPreviousPage}
-                       onKeyDownSpace={onClickPreviousPage}>t_navigate_left</TIcon>
+                       onKeyDownSpace={onClickPreviousPage}>keyboard_arrow_left</TIcon>
             </span>
 
             <ul className={'t-pagination__page-container'}>
@@ -162,19 +175,36 @@ const TPagination = forwardRef((props: TPaginationProps, ref: Ref<TPaginationRef
                        disabled={props.pageNumber === props.totalPages}
                        onClick={onClickNextPage}
                        onKeyDownEnter={onClickNextPage}
-                       onKeyDownSpace={onClickNextPage}>t_navigate_right</TIcon>
+                       onKeyDownSpace={onClickNextPage}>keyboard_arrow_right</TIcon>
                 <TIcon className={`t-pagination__nav-button-container__button ${nextPageButtonClass}`}
                        clickable
                        small
                        disabled={props.pageNumber === props.totalPages}
                        onClick={onClickNextPageSet}
                        onKeyDownEnter={onClickNextPageSet}
-                       onKeyDownSpace={onClickNextPageSet}>t_navigate_right_double</TIcon>
+                       onKeyDownSpace={onClickNextPageSet}>keyboard_double_arrow_right</TIcon>
             </span>
+            {
+                !props.noJumper && (
+                    <div className={'t-pagination__jumper__container'} data-testid={'pagination-jumper-root'}>
+                        <TNumberField ref={numberFieldRef} className={'t-pagination__jumper__container__page__field'}
+                                      value={jumperPage.toString()} min={jumperTextFieldMin} max={props.totalPages}
+                                      rules={[rule.valueMin(jumperTextFieldMin), rule.valueMax(props.totalPages)]}
+                                      onChange={onChangeJumperPageNumber} onKeyDownEnter={onClickJumperButton}
+                        />
+                        <TButton className={'t-pagination__jumper__container__button'} onClick={onClickJumperButton}>
+                            {props.jumperText}
+                        </TButton>
+                    </div>
+                )
+            }
+
         </nav>
     );
 });
-TPagination.defaultProps = {};
+TPagination.defaultProps = {
+    jumperText: '바로가기',
+};
 
 TPagination.displayName = 'TPagination';
 

src/components/input/number-field/TNumberField.tsx

@@ -228,6 +228,7 @@ const TNumberField = forwardRef((props: TNumberFieldProps, ref: Ref<TNumberField
                        onKeyDown={onKeyDown}
                        onFocus={onFocus}
                        onBlur={onBlur}
+                       data-testid={'number-field-input-root'}
                 />
                 {
 

src/styles/component/data-container/data-grid/TDataGrid.scss

@@ -14,19 +14,22 @@
     }
 
     .t-data-grid__header {
-        height: 46px;
-        margin-bottom: $t-spacing-8;
+        margin-bottom: $t-spacing-10;
         display: flex;
         align-items: center;
         gap: $t-spacing-16;
 
         .t-data-grid__header__pagination {
             color: $t-gray-color-5;
-            strong { color: $t-primary-color; }
+            @include typo-element-3;
+            strong {
+                color: $t-black-color;
+                font-weight: $t-font-weight-regular;
+            }
         }
         .t-data-grid__header__select-indicator {
+            @include typo-element-3;
             color: $t-primary-color;
-            font-weight: $t-font-weight-medium;
         }
         .t-data-grid__header__left-action {
             flex: 1 1 auto;
@@ -44,7 +47,7 @@
     .t-data-grid__body.ag-theme-material {
         --ag-material-primary-color: #{$t-primary-color};
         --ag-font-family: #{$t-font-family};
-        --ag-font-size: var(--t-font-size-medium);
+        --ag-font-size: #{$t-font-size-body-3};
 
         --ag-checkbox-checked-color: #{$t-primary-color};
         --ag-checkbox-indeterminate-color: #{$t-primary-color};
@@ -55,19 +58,24 @@
         --ag-input-focus-box-shadow: none;
 
         --ag-cell-horizontal-padding: 32px;
-        --ag-row-border-color: #{$t-grid-border-color--01};
+        --ag-row-border-color: #{$t-grid-border-color--02};
 
-        border-top: 2px solid $t-grid-border-color--03;
+        --ag-header-cell-hover-background-color: #{$t-blue-gray-color-3};
+        --ag-border-color: none;
+        --ag-foreground-color: #{$t-gray-color-6};
 
         .ag-header {
 
-            border-bottom: 1px solid $t-border-color--default;
-
             .ag-header-row {
-                font-size: var(--ag-font-size);
-                font-weight: $t-font-weight-bold;
                 color: $t-black-color;
-                background-color: $t-gray-color-1;
+                background-color: $t-blue-gray-color-2;
+                @include typo-subtitle-4;
+
+                & .ag-header-cell {
+                    padding: 0 $t-spacing-20;
+
+                    .ag-header-cell-label { position: relative; }
+                }
             }
 
             .ag-header-viewport {
@@ -105,10 +113,12 @@
             min-width: 100%;
         }
 
+        .ag-cell { padding: 0 $t-spacing-20; }
 
         .ag-cell, .ag-cell-wrapper {
             display: flex;
             align-items: center;
+
             @include ellipsis;
             &::selection { color: transparent; background: transparent;}
 
@@ -129,6 +139,6 @@
 
 
     .t-data-grid__pagination.t-pagination {
-        margin-top: 64px;
+        margin-top: $t-spacing-40;
     }
 }