Commit @5042f14f2a967d7d3a85c296add7f3095458cee5

245c863

5042f14

eslint.config.js

--- eslint.config.js

+++ eslint.config.js


       ecmaVersion: 2020,
       globals: globals.browser,
     },
+    rules: {
+      '@typescript-eslint/no-unused-vars': 'off',
+    }
   },
 ])

245c863

5042f14

src/App.tsx

--- src/App.tsx

+++ src/App.tsx


 import { useEffect, useState } from 'react';
 import { UserLayout } from './user/UserLayout';
 import { UserListPage } from './user/UserListPage';
-import {AdminLayout} from "./admin/layout/AdminLayout.tsx";
 import {AdminRoute} from "./admin/route/AdminRoute.tsx";
 import {ToastContainer} from "react-toastify";
 

       </div>
 
       {skin === 'admin' ? (
-        <AdminLayout>
-          <AdminRoute />
-        </AdminLayout>
+        <AdminRoute />
       ) : (
         <UserLayout>
           <UserListPage />

5042f14

src/admin/component/table/SortableHeaderCell.tsx (added)

+++ src/admin/component/table/SortableHeaderCell.tsx

...	...	@@ -0,0 +1,29 @@
	1	+import type {ReactNode} from "react";
	2	+
	3	+type SortableHeaderCellProps = {
	4	+ field: string;
	5	+ active: boolean;
	6	+ icon: ReactNode;
	7	+ onSort: (field: string) => void;
	8	+ children: ReactNode;
	9	+};
	10	+
	11	+export const SortableHeaderCell = ({
	12	+ field,
	13	+ active,
	14	+ icon,
	15	+ onSort,
	16	+ children,
	17	+ }: SortableHeaderCellProps) => {
	18	+ return (
	19	+ <th scope="col">
	20	+ {children}
	21	+ <button
	22	+ className={`sort sortBtn ${active ? 'active' : ''}`}
	23	+ onClick={() => onSort(field)}
	24	+ >
	25	+ {icon}
	26	+ </button>
	27	+ </th>
	28	+ );
	29	+};

5042f14

src/admin/component/table/getTableRowNumber.ts (added)

+++ src/admin/component/table/getTableRowNumber.ts

...	...	@@ -0,0 +1,18 @@
	1	+import type {SearchParams} from "../../../type/searchParams.ts";
	2	+
	3	+type GetTableRowNumberParams = {
	4	+ searchParams: Pick<SearchParams, 'searchSortOrd' \| 'pageUnit'>;
	5	+ totalItems: number;
	6	+ currentPage: number;
	7	+ index: number;
	8	+};
	9	+
	10	+export const getTableRowNumber = ({
	11	+ searchParams,
	12	+ totalItems,
	13	+ currentPage,
	14	+ index,
	15	+ }: GetTableRowNumberParams) =>
	16	+ searchParams.searchSortOrd === 'DESC'
	17	+ ? totalItems - (currentPage - 1) * searchParams.pageUnit - index
	18	+ : (currentPage - 1) * searchParams.pageUnit + (index + 1);

245c863

5042f14

src/admin/feature/board/article/components/BoardArticleListTable.tsx

--- src/admin/feature/board/article/components/BoardArticleListTable.tsx

+++ src/admin/feature/board/article/components/BoardArticleListTable.tsx


                                 searchParams={params}
                                 totalItems={pagination.totalItems}
                                 currentPage={pagination.currentPage}
-                                totalPages={pagination.totalPages}
                                 checked={check.isChecked(item.nttId)}
                                 onCheck={check.onCheck}
                             />

245c863

5042f14

src/admin/feature/board/article/components/BoardArticleListTableHeader.tsx

--- src/admin/feature/board/article/components/BoardArticleListTableHeader.tsx

+++ src/admin/feature/board/article/components/BoardArticleListTableHeader.tsx


 import type {BoardArticleSearchParams} from "../type/boardArticle.types.ts";
 import {CheckBox} from "../../../../component/checkbox/CheckBox.tsx";
+import {useTableSort} from "../../../../hook/useTableSort.ts";
+import {SortableHeaderCell} from "../../../../component/table/SortableHeaderCell.tsx";
 
 type BoardArticleListTableHeaderProps = {
     params: BoardArticleSearchParams;

                                                 indeterminate,
                                                 onCheckAll,
                                             }: BoardArticleListTableHeaderProps) => {
-    const handleSort = (field: string) => {
-        const nextOrder =
-            params.searchSortCnd === field &&
-            params.searchSortOrd === 'ASC'
-                ? 'DESC'
-                : 'ASC';
-
-        onChange({
-            ...params,
-            searchSortCnd: field,
-            searchSortOrd: nextOrder,
-            pageIndex: 1,
-        });
-    };
-
-    const getSortIcon = (field: string) => {
-
-        if (params.searchSortCnd !== field) {
-            return '-';
-        }
-
-        return params.searchSortOrd === 'ASC'
-            ? '▲'
-            : '▼';
-    };
+    const {handleSort, getSortIcon, isSorted} = useTableSort(params, onChange);
 
 
     return (

                 <th scope={"col"}>
                     공개여부
                 </th>
-                <th scope="col">작성자</th>
-                <th scope="col">작성일
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'FRST_REGIST_PNTTM' ? 'active' : ''}`}
-                        onClick={() => handleSort('FRST_REGIST_PNTTM')}
-                    >
-                        {getSortIcon('FRST_REGIST_PNTTM')}
-                    </button>
-                </th>
+                <th scope="col">???</th>
+                <SortableHeaderCell
+                    field="FRST_REGIST_PNTTM"
+                    active={isSorted('FRST_REGIST_PNTTM')}
+                    icon={getSortIcon('FRST_REGIST_PNTTM')}
+                    onSort={handleSort}
+                >
+                    ???
+                </SortableHeaderCell>
                 <th scope="col">조회수</th>
             </tr>
             </thead>

245c863

5042f14

src/admin/feature/board/article/components/BoardArticleListTableRow.tsx

--- src/admin/feature/board/article/components/BoardArticleListTableRow.tsx

+++ src/admin/feature/board/article/components/BoardArticleListTableRow.tsx


 import type {BoardArticleListItem} from "../type/boardArticle.types.ts";
 import type {SearchParams} from "../../../../../type/searchParams.ts";
 import {CheckBox} from "../../../../component/checkbox/CheckBox.tsx";
+import {getTableRowNumber} from "../../../../component/table/getTableRowNumber.ts";
 
 type BoardArticleListTableRowProps = {
     item: BoardArticleListItem

     searchParams: SearchParams
     totalItems: number
     currentPage: number
-    totalPages: number
     checked: boolean
     onCheck: (id: string, checked: boolean) => void
 }

                                              searchParams,
                                              totalItems,
                                              currentPage,
-                                             totalPages,
                                              checked,
                                              onCheck,
                                          }: BoardArticleListTableRowProps) => {
 
-    const rowNumber = searchParams.searchSortOrd === 'DESC'
-        ? totalItems - (currentPage - 1) * totalPages - index
-        : (currentPage - 1) * totalPages + (index + 1)
+    const rowNumber = getTableRowNumber({
+        searchParams,
+        totalItems,
+        currentPage,
+        index,
+    });
+
     return (
         <tr>
             <td>

245c863

5042f14

src/admin/feature/board/master/components/BoardListTable.tsx

--- src/admin/feature/board/master/components/BoardListTable.tsx

+++ src/admin/feature/board/master/components/BoardListTable.tsx


                             searchParams={params}
                             totalItems={pagination.totalItems}
                             currentPage={pagination.currentPage}
-                            totalPages={pagination.totalPages}
                             checked={check.isChecked(item.bbsId)}
                             onCheck={check.onCheck}
                             onDetail={rowActions.onDetail}

245c863

5042f14

src/admin/feature/board/master/components/BoardListTableHeader.tsx

--- src/admin/feature/board/master/components/BoardListTableHeader.tsx

+++ src/admin/feature/board/master/components/BoardListTableHeader.tsx


 import type {SearchParams} from "../../../../../type/searchParams.ts";
 import {CheckBox} from "../../../../component/checkbox/CheckBox.tsx";
+import {useTableSort} from "../../../../hook/useTableSort.ts";
+import {SortableHeaderCell} from "../../../../component/table/SortableHeaderCell.tsx";
 
 interface BoardListTableHeaderProps {
     params: SearchParams;

                                          indeterminate,
                                          onCheckAll
                                      }: BoardListTableHeaderProps) {
-    const handleSort = (field: string) => {
-
-        const nextOrder =
-            params.searchSortCnd === field &&
-            params.searchSortOrd === 'ASC'
-                ? 'DESC'
-                : 'ASC';
-
-        onChange({
-            ...params,
-            searchSortCnd: field,
-            searchSortOrd: nextOrder,
-            pageIndex: 1,
-        });
-    };
-
-    const getSortIcon = (field: string) => {
-
-        if (params.searchSortCnd !== field) {
-            return '-';
-        }
-
-        return params.searchSortOrd === 'ASC'
-            ? '▲'
-            : '▼';
-    };
+    const {handleSort, getSortIcon, isSorted} = useTableSort(params, onChange);
 
     return (
         <>

                     />
                 </th>
                 <th>번호</th>
-                <th>
+                <SortableHeaderCell
+                    field="BBS_NM"
+                    active={isSorted('BBS_NM')}
+                    icon={getSortIcon('BBS_NM')}
+                    onSort={handleSort}
+                >
                     게시판명
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'BBS_NM' ? 'active' : ''}`}
-                        onClick={() => handleSort('BBS_NM')}
-                    >
-                        {getSortIcon('BBS_NM')}
-                    </button>
-                </th>
-                <th>
+                </SortableHeaderCell>
+                <SortableHeaderCell
+                    field="MENU_NM"
+                    active={isSorted('MENU_NM')}
+                    icon={getSortIcon('MENU_NM')}
+                    onSort={handleSort}
+                >
                     연결 메뉴
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'MENU_NM' ? 'active' : ''}`}
-                        onClick={() => handleSort('MENU_NM')}
-                    >
-                        {getSortIcon('MENU_NM')}
-                    </button>
-                </th>
-                <th>
+                </SortableHeaderCell>
+                <SortableHeaderCell
+                    field="TOTCNT"
+                    active={isSorted('TOTCNT')}
+                    icon={getSortIcon('TOTCNT')}
+                    onSort={handleSort}
+                >
                     댓글 / 글수
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'TOTCNT' ? 'active' : ''}`}
-                        onClick={() => handleSort('TOTCNT')}
-                    >
-                        {getSortIcon('TOTCNT')}
-                    </button>
-                </th>
-                <th>
+                </SortableHeaderCell>
+                <SortableHeaderCell
+                    field="BBS_TY_CODE_NM"
+                    active={isSorted('BBS_TY_CODE_NM')}
+                    icon={getSortIcon('BBS_TY_CODE_NM')}
+                    onSort={handleSort}
+                >
                     게시판유형
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'BBS_TY_CODE_NM' ? 'active' : ''}`}
-                        onClick={() => handleSort('BBS_TY_CODE_NM')}
-                    >
-                        {getSortIcon('BBS_TY_CODE_NM')}
-                    </button>
-                </th>
-                <th>
+                </SortableHeaderCell>
+                <SortableHeaderCell
+                    field="FRST_REGIST_PNTTM"
+                    active={isSorted('FRST_REGIST_PNTTM')}
+                    icon={getSortIcon('FRST_REGIST_PNTTM')}
+                    onSort={handleSort}
+                >
                     생성일
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'FRST_REGIST_PNTTM' ? 'active' : ''}`}
-                        onClick={() => handleSort('FRST_REGIST_PNTTM')}
-                    >
-                        {getSortIcon('FRST_REGIST_PNTTM')}
-                    </button>
-                </th>
-                <th>
+                </SortableHeaderCell>
+                <SortableHeaderCell
+                    field="USE_AT"
+                    active={isSorted('USE_AT')}
+                    icon={getSortIcon('USE_AT')}
+                    onSort={handleSort}
+                >
                     사용여부
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'USE_AT' ? 'active' : ''}`}
-                        onClick={() => handleSort('USE_AT')}
-                    >
-                        {getSortIcon('USE_AT')}
-                    </button>
-                </th>
+                </SortableHeaderCell>
                 <th>게시판 관리</th>
             </tr>
             </thead>

245c863

5042f14

src/admin/feature/board/master/components/BoardListTableRow.tsx

--- src/admin/feature/board/master/components/BoardListTableRow.tsx

+++ src/admin/feature/board/master/components/BoardListTableRow.tsx


 import type {BoardListItem} from "../type/boardMaster.types.ts";
 import type {SearchParams} from "../../../../../type/searchParams.ts";
 import {CheckBox} from "../../../../component/checkbox/CheckBox.tsx";
+import {getTableRowNumber} from "../../../../component/table/getTableRowNumber.ts";
 
 interface BoardListTableRowProps {
     item: BoardListItem

     searchParams: SearchParams
     totalItems: number
     currentPage: number
-    totalPages: number
     checked: boolean
     onCheck: (id: string, checked: boolean) => void
     onDetail: (bbsId: string) => void

                                       searchParams,
                                       totalItems,
                                       currentPage,
-                                      totalPages,
                                       checked,
                                       onCheck,
                                       onDetail,
                                       onArticleList,
                                       onPreview
                                   }: BoardListTableRowProps) {
-    const rowNumber = searchParams.searchSortOrd === 'DESC'
-        ? totalItems - (currentPage - 1) * totalPages - index
-        : (currentPage - 1) * totalPages + (index + 1)
+    const rowNumber = getTableRowNumber({
+        searchParams,
+        totalItems,
+        currentPage,
+        index,
+    });
+
     const bbsId = item.bbsId;
 
     return (

245c863

5042f14

src/admin/feature/role/author/components/AuthorListTable.tsx

--- src/admin/feature/role/author/components/AuthorListTable.tsx

+++ src/admin/feature/role/author/components/AuthorListTable.tsx


                             searchParams={params}
                             totalItems={pagination.totalItems}
                             currentPage={pagination.currentPage}
-                            totalPages={pagination.totalPages}
                             checked={check.isChecked(item.authorCode)}
                             onCheck={check.onCheck}
                             onDetail={rowActions.onDetail}

245c863

5042f14

src/admin/feature/role/author/components/AuthorListTableHeader.tsx

--- src/admin/feature/role/author/components/AuthorListTableHeader.tsx

+++ src/admin/feature/role/author/components/AuthorListTableHeader.tsx


 import type {SearchParams} from "../../../../../type/searchParams.ts";
 import {CheckBox} from "../../../../component/checkbox/CheckBox.tsx";
+import {useTableSort} from "../../../../hook/useTableSort.ts";
+import {SortableHeaderCell} from "../../../../component/table/SortableHeaderCell.tsx";
 
 interface AuthorListTableHeaderProps {
     params: SearchParams;

                                           indeterminate,
                                           onCheckAll
                                       }: AuthorListTableHeaderProps) => {
-    const handleSort = (field: string) => {
-
-        const nextOrder =
-            params.searchSortCnd === field &&
-            params.searchSortOrd === 'ASC'
-                ? 'DESC'
-                : 'ASC';
-
-        onChange({
-            ...params,
-            searchSortCnd: field,
-            searchSortOrd: nextOrder,
-            pageIndex: 1,
-        });
-    };
-
-    const getSortIcon = (field: string) => {
-
-        if (params.searchSortCnd !== field) {
-            return '-';
-        }
-
-        return params.searchSortOrd === 'ASC'
-            ? '▲'
-            : '▼';
-    };
+    const {handleSort, getSortIcon, isSorted} = useTableSort(params, onChange);
 
     return (
         <>

                         onChange={onCheckAll}
                     />
                 </th>
-                <th scope="col">번호
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'SORT_NUM' ? 'active' : ''}`}
-                        onClick={() => handleSort('SORT_NUM')}
-                    >
-                        {getSortIcon('SORT_NUM')}
-                    </button>
-                </th>
-                <th scope="col">권한명
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'AUTHOR_NM' ? 'active' : ''}`}
-                        onClick={() => handleSort('AUTHOR_NM')}
-                    >
-                        {getSortIcon('AUTHOR_NM')}
-                    </button>
-                </th>
-                <th scope="col">권한코드
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'AUTHOR_CODE' ? 'active' : ''}`}
-                        onClick={() => handleSort('AUTHOR_CODE')}
-                    >
-                        {getSortIcon('AUTHOR_CODE')}
-                    </button>
-                </th>
-                <th scope="col">설명
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'AUTHOR_DC' ? 'active' : ''}`}
-                        onClick={() => handleSort('AUTHOR_DC')}
-                    >
-                        {getSortIcon('AUTHOR_DC')}
-                    </button>
-                </th>
-                <th scope="col">등록일자
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'AUTHOR_CREAT_DE' ? 'active' : ''}`}
-                        onClick={() => handleSort('AUTHOR_CREAT_DE')}
-                    >
-                        {getSortIcon('AUTHOR_CREAT_DE')}
-                    </button>
-                </th>
+                <SortableHeaderCell
+                    field="SORT_NUM"
+                    active={isSorted('SORT_NUM')}
+                    icon={getSortIcon('SORT_NUM')}
+                    onSort={handleSort}
+                >번호
+                </SortableHeaderCell>
+                <SortableHeaderCell
+                    field="AUTHOR_NM"
+                    active={isSorted('AUTHOR_NM')}
+                    icon={getSortIcon('AUTHOR_NM')}
+                    onSort={handleSort}
+                >권한명
+                </SortableHeaderCell>
+                <SortableHeaderCell
+                    field="AUTHOR_CODE"
+                    active={isSorted('AUTHOR_CODE')}
+                    icon={getSortIcon('AUTHOR_CODE')}
+                    onSort={handleSort}
+                >권한코드
+                </SortableHeaderCell>
+                <SortableHeaderCell
+                    field="AUTHOR_DC"
+                    active={isSorted('AUTHOR_DC')}
+                    icon={getSortIcon('AUTHOR_DC')}
+                    onSort={handleSort}
+                >설명
+                </SortableHeaderCell>
+                <SortableHeaderCell
+                    field="AUTHOR_CREAT_DE"
+                    active={isSorted('AUTHOR_CREAT_DE')}
+                    icon={getSortIcon('AUTHOR_CREAT_DE')}
+                    onSort={handleSort}
+                >등록일자
+                </SortableHeaderCell>
                 <th scope="col">롤 정보</th>
             </tr>
             </thead>

245c863

5042f14

src/admin/feature/role/author/components/AuthorListTableRow.tsx

--- src/admin/feature/role/author/components/AuthorListTableRow.tsx

+++ src/admin/feature/role/author/components/AuthorListTableRow.tsx


 import type {SearchParams} from "../../../../../type/searchParams.ts";
 import type {AuthorListItem} from "../type/author.types.ts";
 import {CheckBox} from "../../../../component/checkbox/CheckBox.tsx";
+import {getTableRowNumber} from "../../../../component/table/getTableRowNumber.ts";
 
 interface AuthorListTableRowProps {
     item: AuthorListItem

     searchParams: SearchParams
     totalItems: number
     currentPage: number
-    totalPages: number
     checked: boolean
     onCheck: (id: string, checked: boolean) => void
     onDetail: (authorCode: string) => void

                                        searchParams,
                                        totalItems,
                                        currentPage,
-                                       totalPages,
                                        checked,
                                        onCheck,
                                        onDetail,
                                        onRoleMove
                                    }: AuthorListTableRowProps) => {
-    const rowNumber = searchParams.searchSortOrd === 'DESC'
-        ? totalItems - (currentPage - 1) * totalPages - index
-        : (currentPage - 1) * totalPages + (index + 1)
+    const rowNumber = getTableRowNumber({
+        searchParams,
+        totalItems,
+        currentPage,
+        index,
+    });
 
     const authorCode = item.authorCode;
 

             </td>
         </tr>
     );
-};
+};

245c863

5042f14

src/admin/feature/role/authorGroup/api/authorGroupApi.ts

--- src/admin/feature/role/authorGroup/api/authorGroupApi.ts

+++ src/admin/feature/role/authorGroup/api/authorGroupApi.ts


 import {apiClient} from "../../../../../api/apiClient.ts";
-import type {AuthorGroupSearchParams} from "../type/authorGroup.types.ts";
+import type {
+    AuthorGroupExtraData,
+    AuthorGroupListItem,
+    AuthorGroupSearchParams,
+    UpdateAuthorGroupRequest
+} from "../type/authorGroup.types.ts";
+import type {PageResponse} from "../../../../../type/pageResponse.ts";
 
 export async function fetchAuthorGroupList(params: AuthorGroupSearchParams) {
-    return apiClient.get(`/sec/rgm/list.do`, params);
+    return apiClient.get<PageResponse<AuthorGroupListItem, AuthorGroupExtraData>>(`/sec/rgm/list.do`, params);
+}
+
+export async function fetchUpdateAuthorGroup(params: UpdateAuthorGroupRequest) {
+    return apiClient.post(`/sec/rgm/EgovAuthorUpdate.do`, params);
 }

5042f14

src/admin/feature/role/authorGroup/component/AuthorGroupListHeader.tsx (added)

+++ src/admin/feature/role/authorGroup/component/AuthorGroupListHeader.tsx

...	...	@@ -0,0 +1,66 @@
	1	+import {useTableSort} from "../../../../hook/useTableSort.ts";
	2	+import type {SearchParams} from "../../../../../type/searchParams.ts";
	3	+import {SortableHeaderCell} from "../../../../component/table/SortableHeaderCell.tsx";
	4	+
	5	+interface AuthorGroupListTableProps {
	6	+ params: SearchParams;
	7	+ onChange: (params: SearchParams) => void;
	8	+}
	9	+
	10	+export const AuthorGroupListHeader = ({
	11	+ params,
	12	+ onChange
	13	+
	14	+ }: AuthorGroupListTableProps) => {
	15	+ const {handleSort, getSortIcon, isSorted} = useTableSort(params, onChange);
	16	+
	17	+ return (
	18	+ <>
	19	+ <colgroup>
	20	+ <col style={{width: "6%"}}/>
	21	+ <col style={{width: "25%"}}/>
	22	+ <col style={{width: "25%"}}/>
	23	+ <col style={{width: "25%"}}/>
	24	+ <col style={{width: "120px"}}/>
	25	+ </colgroup>
	26	+ <thead>
	27	+ <tr>
	28	+ <SortableHeaderCell
	29	+ field="ESNTL_ID"
	30	+ active={isSorted('ESNTL_ID')}
	31	+ onSort={handleSort}
	32	+ icon={getSortIcon('ESNTL_ID')}
	33	+ >번호</SortableHeaderCell>
	34	+ <SortableHeaderCell
	35	+ field="USER_ID"
	36	+ active={isSorted('USER_ID')}
	37	+ onSort={handleSort}
	38	+ icon={getSortIcon('USER_ID')}
	39	+ >아이디</SortableHeaderCell>
	40	+
	41	+ <SortableHeaderCell
	42	+ field="USER_NM"
	43	+ active={isSorted('USER_NM')}
	44	+ onSort={handleSort}
	45	+ icon={getSortIcon('USER_NM')}
	46	+ >관리자명</SortableHeaderCell>
	47	+
	48	+ <SortableHeaderCell
	49	+ field="AUTHOR_CODE"
	50	+ active={isSorted('AUTHOR_CODE')}
	51	+ onSort={handleSort}
	52	+ icon={getSortIcon('AUTHOR_CODE')}
	53	+ >권한</SortableHeaderCell>
	54	+
	55	+ <SortableHeaderCell
	56	+ field="REG_YN"
	57	+ active={isSorted('REG_YN')}
	58	+ onSort={handleSort}
	59	+ icon={getSortIcon('REG_YN')}
	60	+ >등록여부</SortableHeaderCell>
	61	+ </tr>
	62	+ </thead>
	63	+
	64	+ </>
	65	+ )
	66	+}(No newline at end of file)

5042f14

src/admin/feature/role/authorGroup/component/AuthorGrouptListTable.tsx (added)

+++ src/admin/feature/role/authorGroup/component/AuthorGrouptListTable.tsx

...	...	@@ -0,0 +1,41 @@
	1	+import type {ListTableModel, RowActionsModel} from "../../../../../type/viewModel.ts";
	2	+import type {AuthorGroupListItem} from "../type/authorGroup.types.ts";
	3	+import type {SearchParams} from "../../../../../type/searchParams.ts";
	4	+import {AuthorGroupListHeader} from "./AuthorGroupListHeader.tsx";
	5	+import {EmptyRow} from "../../../../component/EmptyRow.tsx";
	6	+import {AuthorGroupListTableRow} from "./AuthorGrouptListTableRow.tsx";
	7	+import type {AuthorListItem} from "../../author/type/author.types.ts";
	8	+
	9	+type AuthorGroupListTableProps =
	10	+ ListTableModel<AuthorGroupListItem, SearchParams, AuthorListItem[]>
	11	+ & RowActionsModel<{ onEdit: (authorCode: string) => void }>;
	12	+
	13	+export const AuthorGroupListTable = ({
	14	+ items,
	15	+ params,
	16	+ onChange,
	17	+ pagination,
	18	+ rowActions,
	19	+ extraData
	20	+ }: AuthorGroupListTableProps) => {
	21	+ return (
	22	+ <div className="table table_type_cols">
	23	+ <table>
	24	+ <AuthorGroupListHeader params={params}
	25	+ onChange={onChange}/>
	26	+ <tbody>
	27	+ {items.length > 0 ?
	28	+ items.map((item, index) => (
	29	+ <AuthorGroupListTableRow key={index} index={index} item={item} extraData={extraData ?? []}
	30	+ searchParams={params} {...pagination}
	31	+ {...rowActions}
	32	+ />
	33	+ ))
	34	+
	35	+ :
	36	+ (<EmptyRow colSpan={5}/>)}
	37	+ </tbody>
	38	+ </table>
	39	+ </div>
	40	+ );
	41	+}

5042f14

src/admin/feature/role/authorGroup/component/AuthorGrouptListTableRow.tsx (added)

+++ src/admin/feature/role/authorGroup/component/AuthorGrouptListTableRow.tsx

...	...	@@ -0,0 +1,51 @@
	1	+import type {AuthorGroupListItem} from "../type/authorGroup.types.ts";
	2	+import type {SearchParams} from "../../../../../type/searchParams.ts";
	3	+import {getTableRowNumber} from "../../../../component/table/getTableRowNumber.ts";
	4	+import type {AuthorListItem} from "../../author/type/author.types.ts";
	5	+
	6	+interface AuthorGroupListTableRowProps {
	7	+ item: AuthorGroupListItem
	8	+ index: number
	9	+ searchParams: SearchParams
	10	+ totalItems: number;
	11	+ currentPage: number;
	12	+ onEdit: (uniqId:string, authorCode: string) => void;
	13	+ extraData: AuthorListItem[];
	14	+}
	15	+
	16	+
	17	+export const AuthorGroupListTableRow = ({
	18	+ item,
	19	+ index,
	20	+ searchParams,
	21	+ totalItems,
	22	+ currentPage,
	23	+ onEdit,
	24	+ extraData
	25	+ }: AuthorGroupListTableRowProps) => {
	26	+ const rowNumber = getTableRowNumber({searchParams, totalItems, currentPage, index});
	27	+
	28	+ return (
	29	+ <tr>
	30	+ <td>{rowNumber}</td>
	31	+ <td>
	32	+ {item.userId}
	33	+ </td>
	34	+ <td>{item.userNm}</td>
	35	+ <td>
	36	+ <select
	37	+ className="select"
	38	+ value={item.authorCode}
	39	+ onChange={(event) => onEdit(item.uniqId, event.target.value)}
	40	+ >
	41	+ {extraData.map((author) => (
	42	+ <option key={author.authorCode} value={author.authorCode}>
	43	+ {author.authorNm}
	44	+ </option>
	45	+ ))}
	46	+ </select>
	47	+ </td>
	48	+ <td>{item.regYn}</td>
	49	+ </tr>
	50	+ );
	51	+};

5042f14

src/admin/feature/role/authorGroup/hook/mutation/useUpdateAuthorGroup.ts (added)

+++ src/admin/feature/role/authorGroup/hook/mutation/useUpdateAuthorGroup.ts

...	...	@@ -0,0 +1,15 @@
	1	+import {useMutation, useQueryClient} from "@tanstack/react-query";
	2	+import {fetchUpdateAuthorGroup} from "../../api/authorGroupApi.ts";
	3	+
	4	+export function useUpdateAuthorGroup () {
	5	+ const queryClient = useQueryClient();
	6	+
	7	+ return useMutation({
	8	+ mutationFn: fetchUpdateAuthorGroup,
	9	+ onSuccess: () => {
	10	+ queryClient.invalidateQueries({
	11	+ queryKey:["authorGroupList"]
	12	+ })
	13	+ }
	14	+ })
	15	+}(No newline at end of file)

245c863

5042f14

src/admin/feature/role/authorGroup/hook/page/useAuthorGroupListPage.ts

--- src/admin/feature/role/authorGroup/hook/page/useAuthorGroupListPage.ts

+++ src/admin/feature/role/authorGroup/hook/page/useAuthorGroupListPage.ts

...	...	@@ -1,0 +1,125 @@
	1	+import type {
	2	+ HeaderModel,
	3	+ ListTableModel,
	4	+ PaginationModel,
	5	+ RowActionsModel,
	6	+ SearchModel,
	7	+ StatusModel
	8	+} from "../../../../../../type/viewModel.ts";
	9	+import type {AuthorGroupListItem, AuthorGroupSearchParams} from "../../type/authorGroup.types.ts";
	10	+import {useState} from "react";
	11	+import {useAuthorGroupList} from "../query/useAuthorGroupList.ts";
	12	+import type {AuthorListItem} from "../../../author/type/author.types.ts";
	13	+import {useUpdateAuthorGroup} from "../mutation/useUpdateAuthorGroup.ts";
	14	+import {toast} from "react-toastify";
	15	+
	16	+const initSearchParam: AuthorGroupSearchParams = {
	17	+ pageIndex: 1,
	18	+ pageUnit: 10,
	19	+ searchCnd: "0",
	20	+ searchKeyword: "",
	21	+ searchSortCnd: "",
	22	+ searchSortOrd: "",
	23	+};
	24	+
	25	+type AuthorGroupListRowActions = {
	26	+ onEdit: (uniqId: string, authorCode: string) => void;
	27	+}
	28	+
	29	+type AuthorGroupListPageModel = {
	30	+ header: HeaderModel;
	31	+ status: StatusModel;
	32	+ search: SearchModel<AuthorGroupSearchParams>;
	33	+ table: ListTableModel<AuthorGroupListItem, AuthorGroupSearchParams, AuthorListItem[]> & RowActionsModel<AuthorGroupListRowActions>;
	34	+ pagination: PaginationModel;
	35	+}
	36	+
	37	+const pageSizeOptions = [
	38	+ {value: '10', label: '10줄'},
	39	+ {value: '20', label: '20줄'},
	40	+ {value: '30', label: '30줄'},
	41	+]
	42	+
	43	+
	44	+const searchOptions = [
	45	+ {value: '', label: '전체'},
	46	+ {value: '0', label: '아이디'},
	47	+ {value: '1', label: '관리자명'},
	48	+]
	49	+
	50	+
	51	+export const useAuthorGroupListPage = (): AuthorGroupListPageModel => {
	52	+ const [searchParams, setSearchParams] = useState({...initSearchParam});
	53	+ const {
	54	+ extraData,
	55	+ currentPage,
	56	+ totalPages,
	57	+ list,
	58	+ totalItems,
	59	+ isLoading,
	60	+ size,
	61	+ error
	62	+ } = useAuthorGroupList(searchParams);
	63	+ const title = "관리자별권한관리";
	64	+ const breadcrumb = [
	65	+ {label: '권한관리'},
	66	+ {label: title}
	67	+ ];
	68	+
	69	+ const {mutateAsync: fetchUpdateAuthorGroup} = useUpdateAuthorGroup();
	70	+
	71	+ const handlePageChange = (pageIndex: number) => {
	72	+ setSearchParams((prev) => ({...prev, pageIndex}));
	73	+ }
	74	+
	75	+ const handleUpdate = async (uniqId: string, authorCode: string) => {
	76	+ await toast.promise(
	77	+ fetchUpdateAuthorGroup({uniqId, authorCode}),
	78	+ {
	79	+ pending: '변경 처리 중...',
	80	+ success: '변경 완료',
	81	+ error: '변경 실패'
	82	+ }
	83	+ )
	84	+ }
	85	+ return {
	86	+ header: {
	87	+ title,
	88	+ breadcrumb
	89	+ },
	90	+ status: {
	91	+ isLoading,
	92	+ error,
	93	+ successMessage: '관리자별권한관리를 조회하였습니다.'
	94	+ },
	95	+ search: {
	96	+ totalItems,
	97	+ searchParams,
	98	+ onChange: setSearchParams,
	99	+ pageSizeOptions,
	100	+ searchOptions
	101	+ },
	102	+ table: {
	103	+ items: list,
	104	+ extraData: extraData?.authorManageList ?? [],
	105	+ params: searchParams,
	106	+ onChange: setSearchParams,
	107	+ pagination: {
	108	+ totalItems,
	109	+ currentPage,
	110	+ totalPages,
	111	+ },
	112	+ rowActions: {
	113	+ onEdit: handleUpdate,
	114	+ }
	115	+ },
	116	+ pagination: {
	117	+ totalItems,
	118	+ totalPages,
	119	+ currentPage,
	120	+ size,
	121	+ onPageChange: handlePageChange,
	122	+ }
	123	+ }
	124	+
	125	+}

245c863

5042f14

src/admin/feature/role/authorGroup/hook/query/useAuthorGroupList.ts

--- src/admin/feature/role/authorGroup/hook/query/useAuthorGroupList.ts

+++ src/admin/feature/role/authorGroup/hook/query/useAuthorGroupList.ts


 import type {AuthorGroupSearchParams} from "../../type/authorGroup.types.ts";
 import {keepPreviousData, useQuery} from "@tanstack/react-query";
 import {fetchAuthorGroupList} from "../../api/authorGroupApi.ts";
+import {createPageQueryResult} from "../../../../../../type/pageResponse.ts";
 
 export function useAuthorGroupList(searchParams: AuthorGroupSearchParams) {
-    return useQuery({
-        queryKey: ['authorGroupList', searchParams],
+    const query = useQuery({
+        queryKey: ["authorGroupList"],
         queryFn: () => fetchAuthorGroupList(searchParams),
         placeholderData: keepPreviousData
-    });
+    })
+
+    return createPageQueryResult(query);
 }

5042f14

src/admin/feature/role/authorGroup/page/AuthorGroupListPage.tsx (added)

+++ src/admin/feature/role/authorGroup/page/AuthorGroupListPage.tsx

...	...	@@ -0,0 +1,21 @@
	1	+import {useAuthorGroupListPage} from "../hook/page/useAuthorGroupListPage.ts";
	2	+import {PageHeader} from "../../../../component/PageHeader.tsx";
	3	+import {ListSearchForm} from "../../../../component/ListSearchForm.tsx";
	4	+import {Pagination} from "../../../../component/pagination/Pagination.tsx";
	5	+import {AuthorGroupListTable} from "../component/AuthorGrouptListTable.tsx";
	6	+import {useLoadingToast} from "../../../../hook/useLoadingToast.ts";
	7	+
	8	+export const AuthorGroupListPage = () => {
	9	+ const {header, status, search, table, pagination} = useAuthorGroupListPage();
	10	+
	11	+ useLoadingToast(status);
	12	+
	13	+ return (
	14	+ <>
	15	+ <PageHeader {...header}/>
	16	+ <ListSearchForm {...search} totalLabel={"관리"}/>
	17	+ <AuthorGroupListTable {...table}/>
	18	+ <Pagination {...pagination}/>
	19	+ </>
	20	+ );
	21	+}(No newline at end of file)

245c863

5042f14

src/admin/feature/role/authorGroup/type/authorGroup.types.ts

--- src/admin/feature/role/authorGroup/type/authorGroup.types.ts

+++ src/admin/feature/role/authorGroup/type/authorGroup.types.ts

...	...	@@ -1,4 +1,24 @@
1	1	import type {SearchParams} from "../../../../../type/searchParams.ts";
	2	+import type {AuthorListItem} from "../../author/type/author.types.ts";
2	3
3	4	export interface AuthorGroupSearchParams extends SearchParams {
4	5	}
	6	+
	7	+export interface AuthorGroupListItem {
	8	+ userId: string;
	9	+ userNm: string;
	10	+ mberTyCode: string;
	11	+ authorCode: string;
	12	+ uniqId: string;
	13	+ authorNm: string;
	14	+ regYn: string;
	15	+}
	16	+
	17	+export interface AuthorGroupExtraData {
	18	+ authorManageList: AuthorListItem[];
	19	+}
	20	+
	21	+export interface UpdateAuthorGroupRequest {
	22	+ uniqId: string;
	23	+ authorCode: string;
	24	+} (No newline at end of file)

245c863

5042f14

src/admin/feature/role/authorRole/components/AuthorRoleListTable.tsx

--- src/admin/feature/role/authorRole/components/AuthorRoleListTable.tsx

+++ src/admin/feature/role/authorRole/components/AuthorRoleListTable.tsx


                                 searchParams={params}
                                 totalItems={pagination.totalItems}
                                 currentPage={pagination.currentPage}
-                                totalPages={pagination.totalPages}
                                 onDetail={rowActions.onDetail}
                                 onChange={rowActions.onSelectChange}
                             />

245c863

5042f14

src/admin/feature/role/authorRole/components/AuthorRoleListTableHeader.tsx

--- src/admin/feature/role/authorRole/components/AuthorRoleListTableHeader.tsx

+++ src/admin/feature/role/authorRole/components/AuthorRoleListTableHeader.tsx


 import type {SearchParams} from "../../../../../type/searchParams.ts";
+import {useTableSort} from "../../../../hook/useTableSort.ts";
+import {SortableHeaderCell} from "../../../../component/table/SortableHeaderCell.tsx";
 
 interface AuthorRoleListTableHeaderProps<T extends SearchParams = SearchParams> {
     params: T;

                                               params,
                                               onChange,
                                           }: AuthorRoleListTableHeaderProps<T>) => {
-    const handleSort = (field: string) => {
-
-        const nextOrder =
-            params.searchSortCnd === field &&
-            params.searchSortOrd === 'ASC'
-                ? 'DESC'
-                : 'ASC';
-
-        onChange({
-            ...params,
-            searchSortCnd: field,
-            searchSortOrd: nextOrder,
-            pageIndex: 1,
-        });
-    };
-
-    const getSortIcon = (field: string) => {
-
-        if (params.searchSortCnd !== field) {
-            return '-';
-        }
-
-        return params.searchSortOrd === 'ASC'
-            ? '▲'
-            : '▼';
-    };
+    const {handleSort, getSortIcon, isSorted} = useTableSort(params, onChange);
 
     return (
         <>

             </colgroup>
             <thead>
             <tr>
-                <th scope="col">번호
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'tempSortNum' ? 'active' : ''}`}
-                        onClick={() => handleSort('tempSortNum')}
-                    >
-                        {getSortIcon('tempSortNum')}
-                    </button>
-                </th>
-                <th scope="col">롤명
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'ROLE_NM' ? 'active' : ''}`}
-                        onClick={() => handleSort('ROLE_NM')}
-                    >
-                        {getSortIcon('ROLE_NM')}
-                    </button>
-                </th>
-                <th scope="col">롤패턴
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'ROLE_PTTRN' ? 'active' : ''}`}
-                        onClick={() => handleSort('ROLE_PTTRN')}
-                    >
-                        {getSortIcon('ROLE_PTTRN')}
-                    </button>
-                </th>
-                <th scope="col">롤설명
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'ROLE_SORT' ? 'active' : ''}`}
-                        onClick={() => handleSort('ROLE_SORT')}
-                    >
-                        {getSortIcon('ROLE_SORT')}
-                    </button>
-                </th>
-                <th scope="col">등록일자
-                    <button
-                        className={`sort sortBtn ${params.searchSortCnd === 'ROLE_DC' ? 'active' : ''}`}
-                        onClick={() => handleSort('ROLE_DC')}
-                    >
-                        {getSortIcon('ROLE_DC')}
-                    </button>
-                </th>
-                <th scope="col">등록여부
-                    <button className={`sort sortBtn ${params.searchSortCnd === 'REG_YN' ? 'active' : ''}`}
-                            onClick={() => handleSort('REG_YN')}
-                    >{getSortIcon('REG_YN')}</button>
-                </th>
+                <SortableHeaderCell
+                    field="tempSortNum"
+                    active={isSorted('tempSortNum')}
+                    icon={getSortIcon('tempSortNum')}
+                    onSort={handleSort}
+                >번호
+                </SortableHeaderCell>
+                <SortableHeaderCell
+                    field="ROLE_NM"
+                    active={isSorted('ROLE_NM')}
+                    icon={getSortIcon('ROLE_NM')}
+                    onSort={handleSort}
+                >롤명
+                </SortableHeaderCell>
+                <SortableHeaderCell
+                    field="ROLE_PTTRN"
+                    active={isSorted('ROLE_PTTRN')}
+                    icon={getSortIcon('ROLE_PTTRN')}
+                    onSort={handleSort}
+                >롤패턴
+                </SortableHeaderCell>
+                <SortableHeaderCell
+                    field="ROLE_SORT"
+                    active={isSorted('ROLE_SORT')}
+                    icon={getSortIcon('ROLE_SORT')}
+                    onSort={handleSort}
+                >롤설명
+                </SortableHeaderCell>
+                <SortableHeaderCell
+                    field="ROLE_DC"
+                    active={isSorted('ROLE_DC')}
+                    icon={getSortIcon('ROLE_DC')}
+                    onSort={handleSort}
+                >등록일자
+                </SortableHeaderCell>
+                <SortableHeaderCell
+                    field="REG_YN"
+                    active={isSorted('REG_YN')}
+                    icon={getSortIcon('REG_YN')}
+                    onSort={handleSort}
+                >등록여부
+                </SortableHeaderCell>
             </tr>
             </thead>
         </>

245c863

5042f14

src/admin/feature/role/authorRole/components/AuthorRoleListTableRow.tsx

--- src/admin/feature/role/authorRole/components/AuthorRoleListTableRow.tsx

+++ src/admin/feature/role/authorRole/components/AuthorRoleListTableRow.tsx


 import type {SearchParams} from "../../../../../type/searchParams.ts";
 import type {AuthorRoleListItem} from "../type/authorRole.types.ts";
+import {getTableRowNumber} from "../../../../component/table/getTableRowNumber.ts";
 
 
 interface AuthorRoleListTableRowProps {

     searchParams: SearchParams
     totalItems: number
     currentPage: number
-    totalPages: number
     onDetail: (roleCode: string) => void
     onChange: (roleCode: string,value: string) => void
 }

                                            searchParams,
                                            totalItems,
                                            currentPage,
-                                           totalPages,
                                            onDetail,
                                            onChange,
                                        }: AuthorRoleListTableRowProps) => {
-    const rowNumber = searchParams.searchSortOrd === 'DESC'
-        ? totalItems - (currentPage - 1) * totalPages - index
-        : (currentPage - 1) * totalPages + (index + 1)
+    const rowNumber = getTableRowNumber({
+        searchParams,
+        totalItems,
+        currentPage,
+        index,
+    });
 
     const roleCode = item.roleCode;
 

             </td>
         </tr>
     );
-};
+};

245c863

5042f14

src/admin/feature/role/authorRoleMenu/api/authorRoleMenuApi.ts

--- src/admin/feature/role/authorRoleMenu/api/authorRoleMenuApi.ts

+++ src/admin/feature/role/authorRoleMenu/api/authorRoleMenuApi.ts


 import {apiClient} from "../../../../../api/apiClient.ts";
-import type {AuthorRoleMenuSearchParams} from "../type/authorRoleMenu.types.ts";
+import type {
+    AuthorRoleMenuFormItem,
+    AuthorRoleMenuListItem,
+    AuthorRoleMenuSearchParams, UpdateAuthorRoleMenuItemRequest
+} from "../type/authorRoleMenu.types.ts";
+import type {PageResponse} from "../../../../../type/pageResponse.ts";
 
 export async function fetchAuthorRoleMenuList(params: AuthorRoleMenuSearchParams) {
-    return apiClient.get(`/sym/mnu/mcm/list.do`, params);
+    return apiClient.get<PageResponse<AuthorRoleMenuListItem>>(`/sym/mnu/mcm/list.do`, params);
 }
 
 export async function fetchAuthorRoleMenuDetail(authorCode: string) {
-    return apiClient.get(`/sym/mnu/mcm/detail?authorCode=${authorCode}`);
+    return apiClient.get<AuthorRoleMenuFormItem[]>(`/sym/mnu/mcm/detail.do?authorCode=${authorCode}`);
+}
+
+export async function updateAuthorRoleMenu(params: UpdateAuthorRoleMenuItemRequest[]) {
+    return apiClient.post(`/sym/mnu/mcm/EgovMenuCreatInsert.do`, params);
 }

5042f14

src/admin/feature/role/authorRoleMenu/component/AuthorRoleMenuDetailTable.tsx (added)

+++ src/admin/feature/role/authorRoleMenu/component/AuthorRoleMenuDetailTable.tsx

...	...	@@ -0,0 +1,41 @@
	1	+import {buildMenuTree} from "./buildMenuTree.ts";
	2	+import type {AuthorRoleMenuFormItem} from "../type/authorRoleMenu.types.ts";
	3	+import {AuthorRoleMenuTreeItem} from "./AuthorRoleMenuTreeItem.tsx";
	4	+
	5	+type Props = {
	6	+ items: AuthorRoleMenuFormItem[];
	7	+ isChecked: (menuNo: AuthorRoleMenuFormItem["menuNo"]) => boolean;
	8	+ onCheck: (menuNo: AuthorRoleMenuFormItem["menuNo"], checked: boolean) => void;
	9	+};
	10	+
	11	+export const AuthorRoleMenuDetailTable = ({
	12	+ items,
	13	+ isChecked,
	14	+ onCheck,
	15	+ }: Props) => {
	16	+
	17	+ const tree = buildMenuTree(items);
	18	+
	19	+ return (
	20	+ <div className={"tree"}>
	21	+
	22	+ <div className={"tree_title"}>
	23	+ 메뉴목록
	24	+ </div>
	25	+
	26	+ <div className={"tree_body"}>
	27	+
	28	+ {tree.map((node) => (
	29	+ <AuthorRoleMenuTreeItem
	30	+ key={node.menuNo}
	31	+ node={node}
	32	+ isChecked={isChecked}
	33	+ onCheck={onCheck}
	34	+ />
	35	+ ))}
	36	+
	37	+ </div>
	38	+
	39	+ </div>
	40	+ );
	41	+};

5042f14

src/admin/feature/role/authorRoleMenu/component/AuthorRoleMenuListTable.tsx (added)

+++ src/admin/feature/role/authorRoleMenu/component/AuthorRoleMenuListTable.tsx

...	...	@@ -0,0 +1,52 @@
	1	+import {EmptyRow} from "../../../../component/EmptyRow.tsx";
	2	+import type {SearchParams} from "../../../../../type/searchParams.ts";
	3	+import type {ListTableModel, RowActionsModel} from "../../../../../type/viewModel.ts";
	4	+import type {AuthorRoleMenuListItem} from "../type/authorRoleMenu.types.ts";
	5	+import {AuthorRoleMenuListTableHeader} from "./AuthorRoleMenuListTableHeader.tsx";
	6	+import {AuthorRoleMenuListTableRow} from "./AuthorRoleMenuListTableRow.tsx";
	7	+
	8	+
	9	+type AuthorRoleMenuListTableProps<T extends SearchParams = SearchParams> =
	10	+ ListTableModel<AuthorRoleMenuListItem, T> &
	11	+ RowActionsModel<{
	12	+ onPopup: (authorCode:string) => void;
	13	+ }>;
	14	+
	15	+
	16	+export const AuthorRoleMenuListTable = (
	17	+ {
	18	+ items,
	19	+ params,
	20	+ onChange,
	21	+ pagination,
	22	+ rowActions
	23	+ }: AuthorRoleMenuListTableProps) => {
	24	+
	25	+ return (
	26	+ <div className="table table_type_cols">
	27	+ <table>
	28	+ <AuthorRoleMenuListTableHeader
	29	+ params={params}
	30	+ onChange={onChange}
	31	+ />
	32	+ <tbody>
	33	+ {items.length > 0 ?
	34	+ items.map((item, index) => (
	35	+ <AuthorRoleMenuListTableRow
	36	+ key={index}
	37	+ item={item}
	38	+ index={index}
	39	+ searchParams={params}
	40	+ {...pagination}
	41	+ {...rowActions}
	42	+ />
	43	+ )
	44	+ ) : (
	45	+ <EmptyRow colSpan={6} />
	46	+ )
	47	+ }
	48	+ </tbody>
	49	+ </table>
	50	+ </div>
	51	+ )
	52	+}(No newline at end of file)

5042f14

src/admin/feature/role/authorRoleMenu/component/AuthorRoleMenuListTableHeader.tsx (added)

+++ src/admin/feature/role/authorRoleMenu/component/AuthorRoleMenuListTableHeader.tsx

...	...	@@ -0,0 +1,67 @@
	1	+import type {SearchParams} from "../../../../../type/searchParams.ts";
	2	+import {useTableSort} from "../../../../hook/useTableSort.ts";
	3	+import {SortableHeaderCell} from "../../../../component/table/SortableHeaderCell.tsx";
	4	+
	5	+interface AuthorRoleMenuListTableHeaderProps<T extends SearchParams = SearchParams>{
	6	+ params: T;
	7	+ onChange: (params: T) => void;
	8	+}
	9	+
	10	+export const AuthorRoleMenuListTableHeader = ({params, onChange}: AuthorRoleMenuListTableHeaderProps) => {
	11	+ const {handleSort, getSortIcon, isSorted} = useTableSort(params, onChange);
	12	+
	13	+ return (
	14	+ <>
	15	+ <colgroup>
	16	+ <col style={{width: "6%"}}/>
	17	+ <col style={{width: "25%"}}/>
	18	+ <col style={{width: "30%"}}/>
	19	+ <col style={{width: "30%"}}/>
	20	+ <col style={{width: "15%"}}/>
	21	+ <col style={{width: "120px"}}/>
	22	+ </colgroup>
	23	+ <thead>
	24	+ <tr>
	25	+ <SortableHeaderCell
	26	+ field="tempSortNum"
	27	+ active={isSorted('tempSortNum')}
	28	+ icon={getSortIcon('tempSortNum')}
	29	+ onSort={handleSort}
	30	+ >번호
	31	+ </SortableHeaderCell>
	32	+ <SortableHeaderCell
	33	+ field="authorCode"
	34	+ active={isSorted('authorCode')}
	35	+ icon={getSortIcon('authorCode')}
	36	+ onSort={handleSort}
	37	+ >권한코드
	38	+ </SortableHeaderCell>
	39	+ <SortableHeaderCell
	40	+ field="authorNm"
	41	+ active={isSorted('authorNm')}
	42	+ icon={getSortIcon('authorNm')}
	43	+ onSort={handleSort}
	44	+ >권한명
	45	+ </SortableHeaderCell>
	46	+ <SortableHeaderCell
	47	+ field="authorDc"
	48	+ active={isSorted('authorDc')}
	49	+ icon={getSortIcon('authorDc')}
	50	+ onSort={handleSort}
	51	+ >권한설명
	52	+ </SortableHeaderCell>
	53	+ <SortableHeaderCell
	54	+ field="chkYeoBu"
	55	+ active={isSorted('chkYeoBu')}
	56	+ icon={getSortIcon('chkYeoBu')}
	57	+ onSort={handleSort}
	58	+ >관리메뉴 갯수
	59	+ </SortableHeaderCell>
	60	+ <th scope="col">
	61	+ 롤 메뉴생성
	62	+ </th>
	63	+ </tr>
	64	+ </thead>
	65	+ </>
	66	+ )
	67	+}(No newline at end of file)

5042f14

src/admin/feature/role/authorRoleMenu/component/AuthorRoleMenuListTableRow.tsx (added)

+++ src/admin/feature/role/authorRoleMenu/component/AuthorRoleMenuListTableRow.tsx

...	...	@@ -0,0 +1,56 @@
	1	+import type {SearchParams} from "../../../../../type/searchParams.ts";
	2	+import type {AuthorRoleMenuListItem} from "../type/authorRoleMenu.types.ts";
	3	+import {getTableRowNumber} from "../../../../component/table/getTableRowNumber.ts";
	4	+
	5	+interface AuthorRoleMenuListTableRowProps {
	6	+ item: AuthorRoleMenuListItem
	7	+ index: number
	8	+ searchParams: SearchParams
	9	+ totalItems: number
	10	+ currentPage: number
	11	+ onPopup: (authorCode:string) => void
	12	+}
	13	+
	14	+export const AuthorRoleMenuListTableRow = ({
	15	+ item,
	16	+ index,
	17	+ searchParams,
	18	+ totalItems,
	19	+ currentPage,
	20	+ onPopup
	21	+ }: AuthorRoleMenuListTableRowProps) => {
	22	+
	23	+ const rowNumber = getTableRowNumber({
	24	+ searchParams,
	25	+ totalItems,
	26	+ currentPage,
	27	+ index,
	28	+ });
	29	+
	30	+ const authorCode = item.authorCode;
	31	+
	32	+ return (
	33	+ <tr>
	34	+ <td>
	35	+ {rowNumber}
	36	+ </td>
	37	+ <td>
	38	+ {authorCode}
	39	+ </td>
	40	+ <td>
	41	+ {item.authorNm}
	42	+ </td>
	43	+ <td>
	44	+ {item.authorDc}
	45	+ </td>
	46	+ <td>
	47	+ {item.chkYeoBu}개
	48	+ </td>
	49	+ <td>
	50	+ <button type="button" className={"btn line secondary medium"} onClick={() => onPopup(authorCode)}>
	51	+ 메뉴생성
	52	+ </button>
	53	+ </td>
	54	+ </tr>
	55	+ )
	56	+}

5042f14

src/admin/feature/role/authorRoleMenu/component/AuthorRoleMenuTreeItem.tsx (added)

+++ src/admin/feature/role/authorRoleMenu/component/AuthorRoleMenuTreeItem.tsx

...	...	@@ -0,0 +1,60 @@
	1	+import {useState} from "react";
	2	+import type {MenuTreeItem} from "../type/authorRoleMenu.types.ts";
	3	+
	4	+type TreeItemProps = {
	5	+ node: MenuTreeItem;
	6	+ isChecked: (menuNo: MenuTreeItem["menuNo"]) => boolean;
	7	+ onCheck: (menuNo: MenuTreeItem["menuNo"], checked: boolean) => void;
	8	+};
	9	+
	10	+export const AuthorRoleMenuTreeItem = ({
	11	+ node,
	12	+ isChecked,
	13	+ onCheck,
	14	+ }: TreeItemProps) => {
	15	+
	16	+ const [open, setOpen] = useState(true);
	17	+
	18	+ const hasChildren =
	19	+ node.children.length > 0;
	20	+
	21	+ return (
	22	+ <div className={`tree-node ${hasChildren ? 'folder' : 'file'}`}>
	23	+
	24	+ <label className={"tree-label"}>
	25	+
	26	+ {hasChildren && (
	27	+ <button
	28	+ type={"button"}
	29	+ onClick={() => setOpen(prev => !prev)}
	30	+ >
	31	+ {open ? "-" : "+"}
	32	+ </button>
	33	+ )}
	34	+
	35	+ <input
	36	+ type={"checkbox"}
	37	+ checked={isChecked(node.menuNo)}
	38	+ onChange={(event) => onCheck(node.menuNo, event.target.checked)}
	39	+ />
	40	+
	41	+ <span>
	42	+ {node.menuNm}
	43	+ </span>
	44	+ </label>
	45	+
	46	+ {open && hasChildren && (
	47	+ <div className={"tree-children"}>
	48	+ {node.children.map((child) => (
	49	+ <AuthorRoleMenuTreeItem
	50	+ key={child.menuNo}
	51	+ node={child}
	52	+ isChecked={isChecked}
	53	+ onCheck={onCheck}
	54	+ />
	55	+ ))}
	56	+ </div>
	57	+ )}
	58	+ </div>
	59	+ );
	60	+};

5042f14

src/admin/feature/role/authorRoleMenu/component/buildMenuTree.ts (added)

+++ src/admin/feature/role/authorRoleMenu/component/buildMenuTree.ts

...	...	@@ -0,0 +1,48 @@
	1	+import type {AuthorRoleMenuFormItem, MenuTreeItem} from "../type/authorRoleMenu.types.ts";
	2	+
	3	+export const buildMenuTree = (
	4	+ items: AuthorRoleMenuFormItem[]
	5	+): MenuTreeItem[] => {
	6	+
	7	+ const map = new Map<string, MenuTreeItem>();
	8	+ const roots: MenuTreeItem[] = [];
	9	+ const normalizeId = (value: number \| string \| null \| undefined) =>
	10	+ value == null ? '' : String(value);
	11	+
	12	+ items.forEach((item) => {
	13	+ map.set(normalizeId(item.menuNo), {
	14	+ ...item,
	15	+ children: [],
	16	+ });
	17	+ });
	18	+
	19	+ map.forEach((node) => {
	20	+ const upperMenuId = normalizeId(node.upperMenuId);
	21	+
	22	+ if (upperMenuId === '0' \|\| upperMenuId === '') {
	23	+ roots.push(node);
	24	+ return;
	25	+ }
	26	+
	27	+ const parent = map.get(upperMenuId);
	28	+
	29	+ if (parent) {
	30	+ parent.children.push(node);
	31	+ return;
	32	+ }
	33	+
	34	+ roots.push(node);
	35	+ });
	36	+
	37	+ const sortByMenuOrder = (left: MenuTreeItem, right: MenuTreeItem) =>
	38	+ Number(left.menuOrdr) - Number(right.menuOrdr);
	39	+
	40	+ const sortTree = (nodes: MenuTreeItem[]) => {
	41	+ nodes.sort(sortByMenuOrder);
	42	+ nodes.forEach((node) => sortTree(node.children));
	43	+ };
	44	+
	45	+ sortTree(roots);
	46	+
	47	+ return roots;
	48	+};

5042f14

src/admin/feature/role/authorRoleMenu/constant/authorRoleMenuMessage.ts (added)

+++ src/admin/feature/role/authorRoleMenu/constant/authorRoleMenuMessage.ts

...	...	@@ -0,0 +1,1 @@
	1	+export const AUTHOR_ROLE_MENU_UPDATED_MESSAGE = 'AUTHOR_ROLE_MENU_UPDATED';

5042f14

src/admin/feature/role/authorRoleMenu/hook/mutation/useUpdateAuthorRoleMenu.ts (added)

+++ src/admin/feature/role/authorRoleMenu/hook/mutation/useUpdateAuthorRoleMenu.ts

...	...	@@ -0,0 +1,27 @@
	1	+import {useMutation, useQueryClient} from "@tanstack/react-query";
	2	+import {updateAuthorRoleMenu} from "../../api/authorRoleMenuApi.ts";
	3	+
	4	+export const useUpdateAuthorRoleMenu = () => {
	5	+ const queryClient = useQueryClient();
	6	+
	7	+ return useMutation({
	8	+ mutationFn: updateAuthorRoleMenu,
	9	+ onSuccess: (_, variables) => {
	10	+ const authorCode = variables[0]?.authorCode;
	11	+
	12	+ queryClient.invalidateQueries({
	13	+ queryKey: ['authorRoleMenuList']
	14	+ });
	15	+
	16	+ if (authorCode) {
	17	+ queryClient.invalidateQueries({
	18	+ queryKey: ['authorRoleMenuDetail', authorCode],
	19	+ });
	20	+ }
	21	+
	22	+ queryClient.invalidateQueries({
	23	+ queryKey: ['menuList'],
	24	+ })
	25	+ }
	26	+ });
	27	+}

5042f14

src/admin/feature/role/authorRoleMenu/hook/page/useAuthorRoleMenuListPage.ts (added)

+++ src/admin/feature/role/authorRoleMenu/hook/page/useAuthorRoleMenuListPage.ts

...	...	@@ -0,0 +1,148 @@
	1	+import type {
	2	+ HeaderModel,
	3	+ ListTableModel, PaginationModel,
	4	+ RowActionsModel,
	5	+ SearchModel,
	6	+ StatusModel
	7	+} from "../../../../../../type/viewModel.ts";
	8	+import type {AuthorRoleMenuListItem, AuthorRoleMenuSearchParams} from "../../type/authorRoleMenu.types.ts";
	9	+import {useEffect, useState} from "react";
	10	+import {useQueryClient} from "@tanstack/react-query";
	11	+import {useAuthorRoleMenuList} from "../query/useAuthorRoleMenuList.ts";
	12	+import {ADMIN_MENU_POPUP_ROUTE} from "../../../../../route/adminRouteMap.ts";
	13	+import {AUTHOR_ROLE_MENU_UPDATED_MESSAGE} from "../../constant/authorRoleMenuMessage.ts";
	14	+
	15	+type AuthorRoleMenuRowActions = {
	16	+ onPopup: (authorCode: string) => void
	17	+}
	18	+
	19	+
	20	+type AuthorRoleMenuListPageModel = {
	21	+ header: HeaderModel;
	22	+ status: StatusModel;
	23	+ search: SearchModel<AuthorRoleMenuSearchParams>;
	24	+ table: ListTableModel<AuthorRoleMenuListItem, AuthorRoleMenuSearchParams> & RowActionsModel<AuthorRoleMenuRowActions>;
	25	+ pagination: PaginationModel;
	26	+}
	27	+
	28	+const initSearchParam = {
	29	+ pageIndex: 1,
	30	+ pageUnit: 10,
	31	+ searchCnd: "0",
	32	+ searchKeyword: "",
	33	+ searchSortCnd: "",
	34	+ searchSortOrd: ""
	35	+}
	36	+
	37	+const title = "권한별메뉴관리"
	38	+const breadcrumb = [
	39	+ {label: '권한관리',},
	40	+ {label: '권한별메뉴관리'}
	41	+]
	42	+const homeUrl = "#"
	43	+
	44	+const pageSizeOptions = [
	45	+ {value: '10', label: '10줄'},
	46	+ {value: '20', label: '20줄'},
	47	+ {value: '30', label: '30줄'},
	48	+]
	49	+
	50	+const successMessage = "메뉴를 조회하였습니다.";
	51	+
	52	+export const useAuthorRoleMenuListPage = (): AuthorRoleMenuListPageModel => {
	53	+ const [searchParams, setSearchParams] = useState(initSearchParam);
	54	+ const queryClient = useQueryClient();
	55	+ const {list, totalPages, totalItems, currentPage, size, isLoading, error} = useAuthorRoleMenuList(searchParams);
	56	+
	57	+ useEffect(() => {
	58	+ const handleMessage = (event: MessageEvent) => {
	59	+ if (event.origin !== window.location.origin) {
	60	+ return;
	61	+ }
	62	+
	63	+ if (typeof event.data !== 'object' \|\| event.data === null) {
	64	+ return;
	65	+ }
	66	+
	67	+ const message = event.data as {
	68	+ type?: unknown;
	69	+ authorCode?: unknown;
	70	+ };
	71	+
	72	+ if (message.type !== AUTHOR_ROLE_MENU_UPDATED_MESSAGE) {
	73	+ return;
	74	+ }
	75	+
	76	+ queryClient.invalidateQueries({
	77	+ queryKey: ['authorRoleMenuList'],
	78	+ });
	79	+
	80	+ if (typeof message.authorCode === 'string') {
	81	+ queryClient.invalidateQueries({
	82	+ queryKey: ['authorRoleMenuDetail', message.authorCode],
	83	+ });
	84	+ }
	85	+
	86	+ queryClient.invalidateQueries({
	87	+ queryKey: ['menuList'],
	88	+ });
	89	+ };
	90	+
	91	+ window.addEventListener('message', handleMessage);
	92	+
	93	+ return () => window.removeEventListener('message', handleMessage);
	94	+ }, [queryClient]);
	95	+
	96	+ const handleOpenPopup = (authorCode: string) => {
	97	+ window.open(`${ADMIN_MENU_POPUP_ROUTE}/${authorCode}`, "_blank"
	98	+ ,"width=600,height=600"
	99	+ );
	100	+ }
	101	+
	102	+ const handlePageChange = (pageIndex: number) => {
	103	+ setSearchParams((prev) => ({
	104	+ ...prev,
	105	+ pageIndex
	106	+ }));
	107	+ }
	108	+
	109	+ return {
	110	+ header: {
	111	+ title,
	112	+ breadcrumb,
	113	+ homeUrl
	114	+ },
	115	+ status: {
	116	+ isLoading,
	117	+ error,
	118	+ successMessage
	119	+ },
	120	+ search: {
	121	+ totalItems,
	122	+ searchParams,
	123	+ onChange: setSearchParams,
	124	+ pageSizeOptions
	125	+ },
	126	+ table : {
	127	+ items: list,
	128	+ params: searchParams,
	129	+ onChange: setSearchParams,
	130	+ pagination: {
	131	+ totalItems,
	132	+ currentPage,
	133	+ totalPages
	134	+ },
	135	+ rowActions: {
	136	+ onPopup: handleOpenPopup
	137	+ }
	138	+ },
	139	+ pagination: {
	140	+ totalItems,
	141	+ totalPages,
	142	+ currentPage,
	143	+ size,
	144	+ onPageChange: handlePageChange
	145	+ }
	146	+ }
	147	+
	148	+}

5042f14

src/admin/feature/role/authorRoleMenu/hook/page/useAuthorRoleMenuPopupPage.ts (added)

+++ src/admin/feature/role/authorRoleMenu/hook/page/useAuthorRoleMenuPopupPage.ts

...	...	@@ -0,0 +1,119 @@
	1	+import {useMemo, useState} from "react";
	2	+import {useParams} from "react-router-dom";
	3	+import {useAuthorRoleMenuDetail} from "../query/useAuthorRoleMenuDetail.ts";
	4	+import type {AuthorRoleMenuFormItem, UpdateAuthorRoleMenuItemRequest} from "../../type/authorRoleMenu.types.ts";
	5	+import {useUpdateAuthorRoleMenu} from "../mutation/useUpdateAuthorRoleMenu.ts";
	6	+import {toast} from "react-toastify";
	7	+import {AUTHOR_ROLE_MENU_UPDATED_MESSAGE} from "../../constant/authorRoleMenuMessage.ts";
	8	+
	9	+export const useAuthorRoleMenuPopupPage = () => {
	10	+ const {authorCode = ''} = useParams();
	11	+ const {data = [], isLoading, error} = useAuthorRoleMenuDetail(authorCode);
	12	+ const [selectedMenuNos, setSelectedMenuNos] = useState<Set<string> \| null>(null);
	13	+ const {mutateAsync: updateRoleMenu} = useUpdateAuthorRoleMenu();
	14	+
	15	+ const initialSelectedMenuNos = useMemo(
	16	+ () => new Set(
	17	+ data
	18	+ .filter((item) => String(item.chkYeoBu) === '1')
	19	+ .map((item) => String(item.menuNo))
	20	+ ),
	21	+ [data],
	22	+ );
	23	+
	24	+ const currentSelectedMenuNos = selectedMenuNos ?? initialSelectedMenuNos;
	25	+
	26	+ const childrenByParent = useMemo(() => {
	27	+ const map = new Map<string, AuthorRoleMenuFormItem[]>();
	28	+
	29	+ data.forEach((item) => {
	30	+ const parentKey = item.upperMenuId == null ? '' : String(item.upperMenuId);
	31	+ const children = map.get(parentKey) ?? [];
	32	+
	33	+ children.push(item);
	34	+ map.set(parentKey, children);
	35	+ });
	36	+
	37	+ return map;
	38	+ }, [data]);
	39	+
	40	+ const getDescendantMenuNos = (menuNo: AuthorRoleMenuFormItem["menuNo"]) => {
	41	+ const descendantMenuNos: string[] = [];
	42	+ const appendDescendants = (parentMenuNo: string) => {
	43	+ const children = childrenByParent.get(parentMenuNo) ?? [];
	44	+
	45	+ children.forEach((child) => {
	46	+ const childMenuNo = String(child.menuNo);
	47	+
	48	+ descendantMenuNos.push(childMenuNo);
	49	+ appendDescendants(childMenuNo);
	50	+ });
	51	+ };
	52	+
	53	+ appendDescendants(String(menuNo));
	54	+
	55	+ return descendantMenuNos;
	56	+ };
	57	+
	58	+ const isChecked = (menuNo: AuthorRoleMenuFormItem["menuNo"]) =>
	59	+ currentSelectedMenuNos.has(String(menuNo));
	60	+
	61	+ const handleCheck = (
	62	+ menuNo: AuthorRoleMenuFormItem["menuNo"],
	63	+ checked: boolean,
	64	+ ) => {
	65	+ setSelectedMenuNos((prev) => {
	66	+ const next = new Set(prev ?? currentSelectedMenuNos);
	67	+ const menuNosToUpdate = [
	68	+ String(menuNo),
	69	+ ...getDescendantMenuNos(menuNo),
	70	+ ];
	71	+
	72	+ if (checked) {
	73	+ menuNosToUpdate.forEach((targetMenuNo) => next.add(targetMenuNo));
	74	+ } else {
	75	+ menuNosToUpdate.forEach((targetMenuNo) => next.delete(targetMenuNo));
	76	+ }
	77	+
	78	+ return next;
	79	+ });
	80	+ };
	81	+
	82	+ const handleUpdateAuthorRoleMenu = async (menu: UpdateAuthorRoleMenuItemRequest[]) => {
	83	+ await toast.promise(
	84	+ updateRoleMenu(menu), {
	85	+ pending: '수정 중...',
	86	+ success: '수정 완료',
	87	+ error: '수정 실패'
	88	+ }
	89	+ );
	90	+
	91	+ window.opener?.postMessage(
	92	+ {
	93	+ type: AUTHOR_ROLE_MENU_UPDATED_MESSAGE,
	94	+ authorCode,
	95	+ },
	96	+ window.location.origin,
	97	+ );
	98	+ }
	99	+
	100	+ const handleSave = () => {
	101	+ const payload = [...currentSelectedMenuNos].map((menuNo) => ({
	102	+ authorCode,
	103	+ menuNo,
	104	+ }))
	105	+
	106	+ return handleUpdateAuthorRoleMenu(payload);
	107	+ }
	108	+
	109	+ return {
	110	+ authorCode,
	111	+ items: data,
	112	+ isLoading,
	113	+ error,
	114	+ selectedMenuNos: currentSelectedMenuNos,
	115	+ isChecked,
	116	+ onCheck: handleCheck,
	117	+ onSave: handleSave,
	118	+ };
	119	+};

245c863

5042f14

src/admin/feature/role/authorRoleMenu/hook/query/useAuthorRoleMenuList.ts

--- src/admin/feature/role/authorRoleMenu/hook/query/useAuthorRoleMenuList.ts

+++ src/admin/feature/role/authorRoleMenu/hook/query/useAuthorRoleMenuList.ts


 import type {AuthorRoleMenuSearchParams} from "../../type/authorRoleMenu.types.ts";
 import {keepPreviousData, useQuery} from "@tanstack/react-query";
 import {fetchAuthorRoleMenuList} from "../../api/authorRoleMenuApi.ts";
+import {createPageQueryResult} from "../../../../../../type/pageResponse.ts";
 
 export function useAuthorRoleMenuList(searchParams: AuthorRoleMenuSearchParams) {
-    return useQuery({
+    const query = useQuery({
         queryKey: ['authorRoleMenuList', searchParams],
         queryFn: () => fetchAuthorRoleMenuList(searchParams),
         placeholderData: keepPreviousData
     });
+
+    return createPageQueryResult(query);
 }

5042f14

src/admin/feature/role/authorRoleMenu/page/AuthorRoleMenuListPage.tsx (added)

+++ src/admin/feature/role/authorRoleMenu/page/AuthorRoleMenuListPage.tsx

...	...	@@ -0,0 +1,27 @@
	1	+import {PageHeader} from "../../../../component/PageHeader.tsx";
	2	+import {useAuthorRoleMenuListPage} from "../hook/page/useAuthorRoleMenuListPage.ts";
	3	+import {ListSearchForm} from "../../../../component/ListSearchForm.tsx";
	4	+import {Pagination} from "../../../../component/pagination/Pagination.tsx";
	5	+import {AuthorRoleMenuListTable} from "../component/AuthorRoleMenuListTable.tsx";
	6	+import {useLoadingToast} from "../../../../hook/useLoadingToast.ts";
	7	+
	8	+export const AuthorRoleMenuListPage = () => {
	9	+ const {
	10	+ header,
	11	+ status,
	12	+ search,
	13	+ table,
	14	+ pagination
	15	+ } = useAuthorRoleMenuListPage();
	16	+
	17	+ useLoadingToast(status);
	18	+
	19	+ return (
	20	+ <>
	21	+ <PageHeader {...header}/>
	22	+ <ListSearchForm {...search}/>
	23	+ <AuthorRoleMenuListTable {...table}/>
	24	+ <Pagination {...pagination}/>
	25	+ </>
	26	+ );
	27	+}(No newline at end of file)

5042f14

src/admin/feature/role/authorRoleMenu/page/AuthorRoleMenuPopupPage.tsx (added)

+++ src/admin/feature/role/authorRoleMenu/page/AuthorRoleMenuPopupPage.tsx

...	...	@@ -0,0 +1,53 @@
	1	+import {AuthorRoleMenuDetailTable} from "../component/AuthorRoleMenuDetailTable.tsx";
	2	+import {useAuthorRoleMenuPopupPage} from "../hook/page/useAuthorRoleMenuPopupPage.ts";
	3	+
	4	+export const AuthorRoleMenuPopupPage = () => {
	5	+ const {
	6	+ authorCode,
	7	+ items,
	8	+ isLoading,
	9	+ error,
	10	+ isChecked,
	11	+ onCheck,
	12	+ onSave
	13	+ } = useAuthorRoleMenuPopupPage();
	14	+
	15	+ if (isLoading) {
	16	+ return <p>Loading...</p>;
	17	+ }
	18	+
	19	+ if (error) {
	20	+ return <p>{error.message}</p>;
	21	+ }
	22	+
	23	+ return (
	24	+ <div>
	25	+ <div className={"popup_window popup"}>
	26	+ <h2 className={"title"}>메뉴관리</h2>
	27	+
	28	+ <div className={"popup_content"}>
	29	+ <div className="content_title mt0">
	30	+ <h3 className="title">조건정보 영역</h3>
	31	+ </div>
	32	+ <ul className="search_area box">
	33	+ <li className="search_item">
	34	+ <strong className="search_title">권한코드</strong>
	35	+ <div className="form_wrap">
	36	+ <input id="authorCode" className="input" name="authorCode" type="text" value={authorCode} readOnly={true} />
	37	+ </div>
	38	+ </li>
	39	+ </ul>
	40	+ <AuthorRoleMenuDetailTable
	41	+ items={items}
	42	+ isChecked={isChecked}
	43	+ onCheck={onCheck}
	44	+ />
	45	+ </div>
	46	+ <div className={"btn_wrap center mt20"}>
	47	+ <button onClick={onSave} className={"btn fill primary large w20per"}>설정</button>
	48	+ <button onClick={() => {window.close()}} className={"btn fill gray large w20per"}>닫기</button>
	49	+ </div>
	50	+ </div>
	51	+ </div>
	52	+ );
	53	+}

245c863

5042f14

src/admin/feature/role/authorRoleMenu/type/authorRoleMenu.types.ts

--- src/admin/feature/role/authorRoleMenu/type/authorRoleMenu.types.ts

+++ src/admin/feature/role/authorRoleMenu/type/authorRoleMenu.types.ts

...	...	@@ -2,3 +2,29 @@
2	2
3	3	export interface AuthorRoleMenuSearchParams extends SearchParams {
4	4	}
	5	+
	6	+
	7	+export interface AuthorRoleMenuListItem {
	8	+ tempSortNum: string;
	9	+ authorCode: string;
	10	+ authorNm: string;
	11	+ authorDc: string;
	12	+ chkYeoBu: string;
	13	+}
	14	+
	15	+export interface AuthorRoleMenuFormItem {
	16	+ chkYeoBu: number \| string;
	17	+ menuNm: string;
	18	+ menuNo: number \| string;
	19	+ menuOrdr: number \| string;
	20	+ upperMenuId?: number \| string \| null;
	21	+}
	22	+
	23	+export interface MenuTreeItem extends AuthorRoleMenuFormItem {
	24	+ children: MenuTreeItem[];
	25	+}
	26	+
	27	+export interface UpdateAuthorRoleMenuItemRequest {
	28	+ authorCode: string;
	29	+ menuNo: string;
	30	+}

5042f14

src/admin/hook/useTableSort.ts (added)

+++ src/admin/hook/useTableSort.ts

...	...	@@ -0,0 +1,40 @@
	1	+import type {SearchParams} from "../../type/searchParams.ts";
	2	+
	3	+export const useTableSort = <T extends SearchParams>(
	4	+ params: T,
	5	+ onChange: (params: T) => void
	6	+) => {
	7	+ const handleSort = (field: string) => {
	8	+ const nextOrder =
	9	+ params.searchSortCnd === field &&
	10	+ params.searchSortOrd === 'ASC'
	11	+ ? 'DESC'
	12	+ : 'ASC';
	13	+
	14	+ onChange({
	15	+ ...params,
	16	+ searchSortCnd: field,
	17	+ searchSortOrd: nextOrder,
	18	+ pageIndex: 1,
	19	+ });
	20	+ };
	21	+
	22	+ const getSortIcon = (field: string) => {
	23	+ if (params.searchSortCnd !== field) {
	24	+ return '-';
	25	+ }
	26	+
	27	+ return params.searchSortOrd === 'ASC'
	28	+ ? '▲'
	29	+ : '▼';
	30	+ };
	31	+
	32	+ const isSorted = (field: string) =>
	33	+ params.searchSortCnd === field;
	34	+
	35	+ return {
	36	+ handleSort,
	37	+ getSortIcon,
	38	+ isSorted,
	39	+ };
	40	+};

245c863

5042f14

src/admin/layout/AdminLayout.tsx

--- src/admin/layout/AdminLayout.tsx

+++ src/admin/layout/AdminLayout.tsx


-import type {ReactNode} from "react";
+import {Outlet} from "react-router-dom";
 import {AdminSideBar} from "./AdminSideBar.tsx";
 import {AdminTopBar} from "./AdminTopBar.tsx";
 
-type AdminLayoutProps = {
-    children: ReactNode;
-}
-
-export function AdminLayout({children}: AdminLayoutProps) {
+export function AdminLayout() {
     return (
         <div className="wrap">
             <AdminSideBar/>

             <div className="container sub">
                 <AdminTopBar/>
                 <div className="content_wrap">
-                    {children}
+                    <Outlet/>
                 </div>
             </div>
         </div>
     );
-}
+}

245c863

5042f14

src/admin/route/AdminRoute.tsx

--- src/admin/route/AdminRoute.tsx

+++ src/admin/route/AdminRoute.tsx


 import {Navigate, Route, Routes} from "react-router-dom";
 import {BoardListPage} from "../feature/board/master/page/BoardListPage.tsx";
 import {
-    ADMIN_AUTHOR_DETAIL_ROUTE,
+    ADMIN_AUTHOR_DETAIL_ROUTE, ADMIN_AUTHOR_GROUP_LIST_ROUTE,
     ADMIN_AUTHOR_LIST_ROUTE,
     ADMIN_AUTHOR_ROLE_LIST_ROUTE, ADMIN_BBS_ARTICLE_FORM_ROUTE,
-    ADMIN_BBS_MASTER_ROUTE, ADMIN_ROLE_FORM_ROUTE
+    ADMIN_BBS_MASTER_ROUTE, ADMIN_MENU_CREATE_MANAGE_ROUTE, ADMIN_MENU_POPUP_ROUTE, ADMIN_ROLE_FORM_ROUTE
 } from "./adminRouteMap.ts";
 import {BoardArticleListPage} from "../feature/board/article/page/BoardArticleListPage.tsx";
 import {BoardFormPage} from "../feature/board/master/page/BoardFormPage.tsx";
 import {AuthorListPage} from "../feature/role/author/page/AuthorListPage.tsx";
 import {AuthorRoleListPage} from "../feature/role/authorRole/page/AuthorRoleListPage.tsx";
 import {AuthorRoleFormPage} from "../feature/role/role/page/AuthorRoleFormPage.tsx";
+import {AuthorRoleMenuListPage} from "../feature/role/authorRoleMenu/page/AuthorRoleMenuListPage.tsx";
+import {AuthorRoleMenuPopupPage} from "../feature/role/authorRoleMenu/page/AuthorRoleMenuPopupPage.tsx";
+import {AdminLayout} from "../layout/AdminLayout.tsx";
+import {AuthorGroupListPage} from "../feature/role/authorGroup/page/AuthorGroupListPage.tsx";
 
 const ReadyPage = () => {
     return <div>Preparing menu.</div>;

 export const AdminRoute = () => {
     return (
         <Routes>
-            <Route path="/" element={<Navigate to={ADMIN_BBS_MASTER_ROUTE} replace/>}/>
-            <Route path={ADMIN_BBS_MASTER_ROUTE} element={<BoardListPage/>}/>
-            <Route path={`/admin/cop/bbs/article/:bbsId`} element={<BoardArticleListPage/>}/>
-            <Route path={`${ADMIN_BBS_ARTICLE_FORM_ROUTE}:bbsId`} element={<BoardFormPage/>}/>
-            <Route path={ADMIN_BBS_ARTICLE_FORM_ROUTE} element={<BoardFormPage/>}/>
+            <Route path={`${ADMIN_MENU_POPUP_ROUTE}/:authorCode`} element={<AuthorRoleMenuPopupPage/>}/>
 
-            <Route path={ADMIN_AUTHOR_LIST_ROUTE} element={<AuthorListPage/>}/>
-            <Route path={ADMIN_AUTHOR_DETAIL_ROUTE} element={<ReadyPage/>}/>
-            <Route path={ADMIN_AUTHOR_ROLE_LIST_ROUTE} element={<AuthorRoleListPage/>}/>
-            <Route path={ADMIN_ROLE_FORM_ROUTE} element={<AuthorRoleFormPage/>}/>
-            <Route path="*" element={<ReadyPage/>}/>
+            <Route element={<AdminLayout/>}>
+                <Route path="/" element={<Navigate to={ADMIN_BBS_MASTER_ROUTE} replace/>}/>
+                <Route path={ADMIN_BBS_MASTER_ROUTE} element={<BoardListPage/>}/>
+                <Route path={`/admin/cop/bbs/article/:bbsId`} element={<BoardArticleListPage/>}/>
+                <Route path={`${ADMIN_BBS_ARTICLE_FORM_ROUTE}:bbsId`} element={<BoardFormPage/>}/>
+                <Route path={ADMIN_BBS_ARTICLE_FORM_ROUTE} element={<BoardFormPage/>}/>
+
+                <Route path={ADMIN_AUTHOR_LIST_ROUTE} element={<AuthorListPage/>}/>
+                <Route path={ADMIN_AUTHOR_DETAIL_ROUTE} element={<ReadyPage/>}/>
+                <Route path={ADMIN_AUTHOR_ROLE_LIST_ROUTE} element={<AuthorRoleListPage/>}/>
+                <Route path={ADMIN_ROLE_FORM_ROUTE} element={<AuthorRoleFormPage/>}/>
+                <Route path={ADMIN_MENU_CREATE_MANAGE_ROUTE} element={<AuthorRoleMenuListPage/>}/>
+                <Route path={ADMIN_AUTHOR_GROUP_LIST_ROUTE} element={<AuthorGroupListPage/>}/>
+                <Route path="*" element={<ReadyPage/>}/>
+            </Route>
         </Routes>
     );
 };

245c863

5042f14

src/admin/route/adminRouteMap.ts

--- src/admin/route/adminRouteMap.ts

+++ src/admin/route/adminRouteMap.ts


 export const ADMIN_LOGIN_GROUP_POLICY_ROUTE = `${ADMIN_ROUTE_PREFIX}/uat/uap/selectLoginGroupPolicyList.do`;
 export const ADMIN_MEMBER_MANAGE_ROUTE = `${ADMIN_ROUTE_PREFIX}/uss/umt/EgovMberManage.do`;
 export const ADMIN_POPUP_ZONE_LIST_ROUTE = `${ADMIN_ROUTE_PREFIX}/uss/ion/pwm/popupZoneList.do`;
+
+
 export const ADMIN_MENU_CREATE_MANAGE_ROUTE = `${ADMIN_ROUTE_PREFIX}/sym/mnu/mcm/EgovMenuCreatManageSelect.do`;
+export const ADMIN_MENU_POPUP_ROUTE = `${ADMIN_ROUTE_PREFIX}/sym/mnu/mcm/detail.do`;
+
+export const ADMIN_AUTHOR_GROUP_LIST_ROUTE = `${ADMIN_ROUTE_PREFIX}/sec/rgm/EgovAuthorGroupList.do`;
+
+
 export const ADMIN_USER_MANAGE_ROUTE = `${ADMIN_ROUTE_PREFIX}/uss/umt/user/EgovUserManage.do`;
 export const ADMIN_COMMON_CODE_TREE_ROUTE = `${ADMIN_ROUTE_PREFIX}/sym/ccm/ccc/EgovCcmCmmnCodeTree.do`;
-export const ADMIN_AUTHOR_GROUP_LIST_ROUTE = `${ADMIN_ROUTE_PREFIX}/sec/rgm/EgovAuthorGroupList.do`;
 export const ADMIN_POPUP_LIST_ROUTE = `${ADMIN_ROUTE_PREFIX}/uss/ion/pwm/egovPopupList.do`;
 export const ADMIN_WEB_LOG_LIST_ROUTE = `${ADMIN_ROUTE_PREFIX}/sym/log/clg/SelectWebLogList.do`;
 

245c863

5042f14

src/styles/adm/popup.css

--- src/styles/adm/popup.css

+++ src/styles/adm/popup.css


 .popup_window .tree .tree-node{display:flex;height:auto;font-size:14px;flex-direction:column;align-items:flex-start;padding:0 12px;}
 .popup_window .tree .tree-node label{display:flex;min-height:35px;align-items:center;gap:4px;}
 .popup_window .tree-node.folder .tree-label{padding:0 0 0 26px;}
-.popup_window .tree-node.folder .tree-label::before{width:24px;height:24px;top:50%;transform:translateY(-50%);}
+.popup_window .tree-node.folder .tree-label{position:relative;}
+.popup_window .tree-node.folder .tree-label::before{position:absolute;left:0;width:24px;height:24px;top:50%;content:"";background:url(/publish/adm/images/component/icon_folder.png) no-repeat center;transform:translateY(-50%);}
+.popup_window .tree-node.folder:has(.tree-children)>.tree-label::before{background-image:url(/publish/adm/images/component/icon_folder_open.png);}
 .popup_window .tree-node.file label{min-height:25px;}
+.popup_window .tree-node.file .tree-label{position:relative;padding:0 0 0 26px;}
+.popup_window .tree-node.file .tree-label::before{position:absolute;left:0;width:24px;height:24px;top:50%;content:"";background:url(/publish/adm/images/component/icon_file.png) no-repeat center;transform:translateY(-50%);}
 .popup_window .tree .tree-children{display:flex;width:calc(100% - 24px);font-size:14px;background:#f2f4f5;flex-direction:column;gap:4px;border-radius:4px;padding:8px 12px;margin:0 auto;}
 .popup_window .tree .tree-children .tree-node{height:auto;}

245c863

5042f14

src/type/pageResponse.ts

--- src/type/pageResponse.ts

+++ src/type/pageResponse.ts


     size: number;
 }
 
-export const createPageQueryResult = <T>(
-    query: UseQueryResult<PageResponse<T>>
+export const createPageQueryResult = <T, E = Record<string, unknown>>(
+    query: UseQueryResult<PageResponse<T, E>>
 ) => ({
     list: query.data?.list ?? [],
+    extraData: query.data?.extraData ?? null,
     totalItems: query.data?.totalItems ?? 0,
     totalPages: query.data?.totalPages ?? 0,
     currentPage: query.data?.currentPage ?? 0,
     size: query.data?.size ?? 0,
     isLoading: query.isLoading,
     error: query.error,
-});
+});

245c863

5042f14

src/type/viewModel.ts

--- src/type/viewModel.ts

+++ src/type/viewModel.ts


     "totalItems" | "currentPage" | "totalPages"
 >;
 
-export type ListTableModel<TItem, TSearchParams extends SearchParams> = {
+export type ListTableModel<
+    TItem,
+    TSearchParams extends SearchParams,
+    TExtraData = unknown
+> = {
     items: TItem[];
+    extraData?: TExtraData | null;
     params: TSearchParams;
     onChange: (params: TSearchParams) => void;
     pagination: TablePaginationModel;

 export type CheckableTableModel<
     TItem,
     TSearchParams extends SearchParams,
-    TId extends string | number = string
-> = ListTableModel<TItem, TSearchParams> & {
+    TId extends string | number = string,
+    TExtraData = unknown
+> = ListTableModel<TItem, TSearchParams, TExtraData> & {
     check: TableCheckModel<TId>;
 };
 

...	...	@@ -19,5 +19,8 @@
19	19	ecmaVersion: 2020,
20	20	globals: globals.browser,
21	21	},
	22	+ rules: {
	23	+ '@typescript-eslint/no-unused-vars': 'off',
	24	+ }
22	25	},
23	26	])

...	...	@@ -1,7 +1,6 @@
1	1	import { useEffect, useState } from 'react';
2	2	import { UserLayout } from './user/UserLayout';
3	3	import { UserListPage } from './user/UserListPage';
4		-import {AdminLayout} from "./admin/layout/AdminLayout.tsx";
5	4	import {AdminRoute} from "./admin/route/AdminRoute.tsx";
6	5	import {ToastContainer} from "react-toastify";
7	6
...	...	@@ -55,9 +54,7 @@
55	54	</div>
56	55
57	56	{skin === 'admin' ? (
58		- <AdminLayout>
59		- <AdminRoute />
60		- </AdminLayout>
	57	+ <AdminRoute />
61	58	) : (
62	59	<UserLayout>
63	60	<UserListPage />

...	...	@@ -34,7 +34,6 @@
34	34	searchParams={params}
35	35	totalItems={pagination.totalItems}
36	36	currentPage={pagination.currentPage}
37		- totalPages={pagination.totalPages}
38	37	checked={check.isChecked(item.nttId)}
39	38	onCheck={check.onCheck}
40	39	/>

...	...	@@ -1,5 +1,7 @@
1	1	import type {BoardArticleSearchParams} from "../type/boardArticle.types.ts";
2	2	import {CheckBox} from "../../../../component/checkbox/CheckBox.tsx";
	3	+import {useTableSort} from "../../../../hook/useTableSort.ts";
	4	+import {SortableHeaderCell} from "../../../../component/table/SortableHeaderCell.tsx";
3	5
4	6	type BoardArticleListTableHeaderProps = {
5	7	params: BoardArticleSearchParams;
...	...	@@ -16,31 +18,7 @@
16	18	indeterminate,
17	19	onCheckAll,
18	20	}: BoardArticleListTableHeaderProps) => {
19		- const handleSort = (field: string) => {
20		- const nextOrder =
21		- params.searchSortCnd === field &&
22		- params.searchSortOrd === 'ASC'
23		- ? 'DESC'
24		- : 'ASC';
25		-
26		- onChange({
27		- ...params,
28		- searchSortCnd: field,
29		- searchSortOrd: nextOrder,
30		- pageIndex: 1,
31		- });
32		- };
33		-
34		- const getSortIcon = (field: string) => {
35		-
36		- if (params.searchSortCnd !== field) {
37		- return '-';
38		- }
39		-
40		- return params.searchSortOrd === 'ASC'
41		- ? '▲'
42		- : '▼';
43		- };
	21	+ const {handleSort, getSortIcon, isSorted} = useTableSort(params, onChange);
44	22
45	23
46	24	return (
...	...	@@ -77,15 +55,15 @@
77	55	<th scope={"col"}>
78	56	공개여부
79	57	</th>
80		- <th scope="col">작성자</th>
81		- <th scope="col">작성일
82		- <button
83		- className={`sort sortBtn ${params.searchSortCnd === 'FRST_REGIST_PNTTM' ? 'active' : ''}`}
84		- onClick={() => handleSort('FRST_REGIST_PNTTM')}
85		- >
86		- {getSortIcon('FRST_REGIST_PNTTM')}
87		- </button>
88		- </th>
	58	+ <th scope="col">???</th>
	59	+ <SortableHeaderCell
	60	+ field="FRST_REGIST_PNTTM"
	61	+ active={isSorted('FRST_REGIST_PNTTM')}
	62	+ icon={getSortIcon('FRST_REGIST_PNTTM')}
	63	+ onSort={handleSort}
	64	+ >
	65	+ ???
	66	+ </SortableHeaderCell>
89	67	<th scope="col">조회수</th>
90	68	</tr>
91	69	</thead>

...	...	@@ -1,6 +1,7 @@
1	1	import type {BoardArticleListItem} from "../type/boardArticle.types.ts";
2	2	import type {SearchParams} from "../../../../../type/searchParams.ts";
3	3	import {CheckBox} from "../../../../component/checkbox/CheckBox.tsx";
	4	+import {getTableRowNumber} from "../../../../component/table/getTableRowNumber.ts";
4	5
5	6	type BoardArticleListTableRowProps = {
6	7	item: BoardArticleListItem
...	...	@@ -8,7 +9,6 @@
8	9	searchParams: SearchParams
9	10	totalItems: number
10	11	currentPage: number
11		- totalPages: number
12	12	checked: boolean
13	13	onCheck: (id: string, checked: boolean) => void
14	14	}
...	...	@@ -19,14 +19,17 @@
19	19	searchParams,
20	20	totalItems,
21	21	currentPage,
22		- totalPages,
23	22	checked,
24	23	onCheck,
25	24	}: BoardArticleListTableRowProps) => {
26	25
27		- const rowNumber = searchParams.searchSortOrd === 'DESC'
28		- ? totalItems - (currentPage - 1) * totalPages - index
29		- : (currentPage - 1) * totalPages + (index + 1)
	26	+ const rowNumber = getTableRowNumber({
	27	+ searchParams,
	28	+ totalItems,
	29	+ currentPage,
	30	+ index,
	31	+ });
	32	+
30	33	return (
31	34	<tr>
32	35	<td>

...	...	@@ -42,7 +42,6 @@
42	42	searchParams={params}
43	43	totalItems={pagination.totalItems}
44	44	currentPage={pagination.currentPage}
45		- totalPages={pagination.totalPages}
46	45	checked={check.isChecked(item.bbsId)}
47	46	onCheck={check.onCheck}
48	47	onDetail={rowActions.onDetail}

...	...	@@ -1,6 +1,7 @@
1	1	import type {BoardListItem} from "../type/boardMaster.types.ts";
2	2	import type {SearchParams} from "../../../../../type/searchParams.ts";
3	3	import {CheckBox} from "../../../../component/checkbox/CheckBox.tsx";
	4	+import {getTableRowNumber} from "../../../../component/table/getTableRowNumber.ts";
4	5
5	6	interface BoardListTableRowProps {
6	7	item: BoardListItem
...	...	@@ -8,7 +9,6 @@
8	9	searchParams: SearchParams
9	10	totalItems: number
10	11	currentPage: number
11		- totalPages: number
12	12	checked: boolean
13	13	onCheck: (id: string, checked: boolean) => void
14	14	onDetail: (bbsId: string) => void
...	...	@@ -22,16 +22,19 @@
22	22	searchParams,
23	23	totalItems,
24	24	currentPage,
25		- totalPages,
26	25	checked,
27	26	onCheck,
28	27	onDetail,
29	28	onArticleList,
30	29	onPreview
31	30	}: BoardListTableRowProps) {
32		- const rowNumber = searchParams.searchSortOrd === 'DESC'
33		- ? totalItems - (currentPage - 1) * totalPages - index
34		- : (currentPage - 1) * totalPages + (index + 1)
	31	+ const rowNumber = getTableRowNumber({
	32	+ searchParams,
	33	+ totalItems,
	34	+ currentPage,
	35	+ index,
	36	+ });
	37	+
35	38	const bbsId = item.bbsId;
36	39
37	40	return (

...	...	@@ -41,7 +41,6 @@
41	41	searchParams={params}
42	42	totalItems={pagination.totalItems}
43	43	currentPage={pagination.currentPage}
44		- totalPages={pagination.totalPages}
45	44	checked={check.isChecked(item.authorCode)}
46	45	onCheck={check.onCheck}
47	46	onDetail={rowActions.onDetail}

...	...	@@ -1,6 +1,7 @@
1	1	import type {SearchParams} from "../../../../../type/searchParams.ts";
2	2	import type {AuthorListItem} from "../type/author.types.ts";
3	3	import {CheckBox} from "../../../../component/checkbox/CheckBox.tsx";
	4	+import {getTableRowNumber} from "../../../../component/table/getTableRowNumber.ts";
4	5
5	6	interface AuthorListTableRowProps {
6	7	item: AuthorListItem
...	...	@@ -8,7 +9,6 @@
8	9	searchParams: SearchParams
9	10	totalItems: number
10	11	currentPage: number
11		- totalPages: number
12	12	checked: boolean
13	13	onCheck: (id: string, checked: boolean) => void
14	14	onDetail: (authorCode: string) => void
...	...	@@ -22,15 +22,17 @@
22	22	searchParams,
23	23	totalItems,
24	24	currentPage,
25		- totalPages,
26	25	checked,
27	26	onCheck,
28	27	onDetail,
29	28	onRoleMove
30	29	}: AuthorListTableRowProps) => {
31		- const rowNumber = searchParams.searchSortOrd === 'DESC'
32		- ? totalItems - (currentPage - 1) * totalPages - index
33		- : (currentPage - 1) * totalPages + (index + 1)
	30	+ const rowNumber = getTableRowNumber({
	31	+ searchParams,
	32	+ totalItems,
	33	+ currentPage,
	34	+ index,
	35	+ });
34	36
35	37	const authorCode = item.authorCode;
36	38
...	...	@@ -70,4 +72,4 @@
70	72	</td>
71	73	</tr>
72	74	);
73		-}; (No newline at end of file)
	75	+};

...	...	@@ -1,6 +1,16 @@
1	1	import {apiClient} from "../../../../../api/apiClient.ts";
2		-import type {AuthorGroupSearchParams} from "../type/authorGroup.types.ts";
	2	+import type {
	3	+ AuthorGroupExtraData,
	4	+ AuthorGroupListItem,
	5	+ AuthorGroupSearchParams,
	6	+ UpdateAuthorGroupRequest
	7	+} from "../type/authorGroup.types.ts";
	8	+import type {PageResponse} from "../../../../../type/pageResponse.ts";
3	9
4	10	export async function fetchAuthorGroupList(params: AuthorGroupSearchParams) {
5		- return apiClient.get(`/sec/rgm/list.do`, params);
	11	+ return apiClient.get<PageResponse<AuthorGroupListItem, AuthorGroupExtraData>>(`/sec/rgm/list.do`, params);
	12	+}
	13	+
	14	+export async function fetchUpdateAuthorGroup(params: UpdateAuthorGroupRequest) {
	15	+ return apiClient.post(`/sec/rgm/EgovAuthorUpdate.do`, params);
6	16	}

...	...	@@ -1,11 +1,14 @@
1	1	import type {AuthorGroupSearchParams} from "../../type/authorGroup.types.ts";
2	2	import {keepPreviousData, useQuery} from "@tanstack/react-query";
3	3	import {fetchAuthorGroupList} from "../../api/authorGroupApi.ts";
	4	+import {createPageQueryResult} from "../../../../../../type/pageResponse.ts";
4	5
5	6	export function useAuthorGroupList(searchParams: AuthorGroupSearchParams) {
6		- return useQuery({
7		- queryKey: ['authorGroupList', searchParams],
	7	+ const query = useQuery({
	8	+ queryKey: ["authorGroupList"],
8	9	queryFn: () => fetchAuthorGroupList(searchParams),
9	10	placeholderData: keepPreviousData
10		- });
	11	+ })
	12	+
	13	+ return createPageQueryResult(query);
11	14	} (No newline at end of file)

...	...	@@ -37,7 +37,6 @@
37	37	searchParams={params}
38	38	totalItems={pagination.totalItems}
39	39	currentPage={pagination.currentPage}
40		- totalPages={pagination.totalPages}
41	40	onDetail={rowActions.onDetail}
42	41	onChange={rowActions.onSelectChange}
43	42	/>

...	...	@@ -1,4 +1,6 @@
1	1	import type {SearchParams} from "../../../../../type/searchParams.ts";
	2	+import {useTableSort} from "../../../../hook/useTableSort.ts";
	3	+import {SortableHeaderCell} from "../../../../component/table/SortableHeaderCell.tsx";
2	4
3	5	interface AuthorRoleListTableHeaderProps<T extends SearchParams = SearchParams> {
4	6	params: T;
...	...	@@ -9,32 +11,7 @@
9	11	params,
10	12	onChange,
11	13	}: AuthorRoleListTableHeaderProps<T>) => {
12		- const handleSort = (field: string) => {
13		-
14		- const nextOrder =
15		- params.searchSortCnd === field &&
16		- params.searchSortOrd === 'ASC'
17		- ? 'DESC'
18		- : 'ASC';
19		-
20		- onChange({
21		- ...params,
22		- searchSortCnd: field,
23		- searchSortOrd: nextOrder,
24		- pageIndex: 1,
25		- });
26		- };
27		-
28		- const getSortIcon = (field: string) => {
29		-
30		- if (params.searchSortCnd !== field) {
31		- return '-';
32		- }
33		-
34		- return params.searchSortOrd === 'ASC'
35		- ? '▲'
36		- : '▼';
37		- };
	14	+ const {handleSort, getSortIcon, isSorted} = useTableSort(params, onChange);
38	15
39	16	return (
40	17	<>
...	...	@@ -48,51 +25,48 @@
48	25	</colgroup>
49	26	<thead>
50	27	<tr>
51		- <th scope="col">번호
52		- <button
53		- className={`sort sortBtn ${params.searchSortCnd === 'tempSortNum' ? 'active' : ''}`}
54		- onClick={() => handleSort('tempSortNum')}
55		- >
56		- {getSortIcon('tempSortNum')}
57		- </button>
58		- </th>
59		- <th scope="col">롤명
60		- <button
61		- className={`sort sortBtn ${params.searchSortCnd === 'ROLE_NM' ? 'active' : ''}`}
62		- onClick={() => handleSort('ROLE_NM')}
63		- >
64		- {getSortIcon('ROLE_NM')}
65		- </button>
66		- </th>
67		- <th scope="col">롤패턴
68		- <button
69		- className={`sort sortBtn ${params.searchSortCnd === 'ROLE_PTTRN' ? 'active' : ''}`}
70		- onClick={() => handleSort('ROLE_PTTRN')}
71		- >
72		- {getSortIcon('ROLE_PTTRN')}
73		- </button>
74		- </th>
75		- <th scope="col">롤설명
76		- <button
77		- className={`sort sortBtn ${params.searchSortCnd === 'ROLE_SORT' ? 'active' : ''}`}
78		- onClick={() => handleSort('ROLE_SORT')}
79		- >
80		- {getSortIcon('ROLE_SORT')}
81		- </button>
82		- </th>
83		- <th scope="col">등록일자
84		- <button
85		- className={`sort sortBtn ${params.searchSortCnd === 'ROLE_DC' ? 'active' : ''}`}
86		- onClick={() => handleSort('ROLE_DC')}
87		- >
88		- {getSortIcon('ROLE_DC')}
89		- </button>
90		- </th>
91		- <th scope="col">등록여부
92		- <button className={`sort sortBtn ${params.searchSortCnd === 'REG_YN' ? 'active' : ''}`}
93		- onClick={() => handleSort('REG_YN')}
94		- >{getSortIcon('REG_YN')}</button>
95		- </th>
	28	+ <SortableHeaderCell
	29	+ field="tempSortNum"
	30	+ active={isSorted('tempSortNum')}
	31	+ icon={getSortIcon('tempSortNum')}
	32	+ onSort={handleSort}
	33	+ >번호
	34	+ </SortableHeaderCell>
	35	+ <SortableHeaderCell
	36	+ field="ROLE_NM"
	37	+ active={isSorted('ROLE_NM')}
	38	+ icon={getSortIcon('ROLE_NM')}
	39	+ onSort={handleSort}
	40	+ >롤명
	41	+ </SortableHeaderCell>
	42	+ <SortableHeaderCell
	43	+ field="ROLE_PTTRN"
	44	+ active={isSorted('ROLE_PTTRN')}
	45	+ icon={getSortIcon('ROLE_PTTRN')}
	46	+ onSort={handleSort}
	47	+ >롤패턴
	48	+ </SortableHeaderCell>
	49	+ <SortableHeaderCell
	50	+ field="ROLE_SORT"
	51	+ active={isSorted('ROLE_SORT')}
	52	+ icon={getSortIcon('ROLE_SORT')}
	53	+ onSort={handleSort}
	54	+ >롤설명
	55	+ </SortableHeaderCell>
	56	+ <SortableHeaderCell
	57	+ field="ROLE_DC"
	58	+ active={isSorted('ROLE_DC')}
	59	+ icon={getSortIcon('ROLE_DC')}
	60	+ onSort={handleSort}
	61	+ >등록일자
	62	+ </SortableHeaderCell>
	63	+ <SortableHeaderCell
	64	+ field="REG_YN"
	65	+ active={isSorted('REG_YN')}
	66	+ icon={getSortIcon('REG_YN')}
	67	+ onSort={handleSort}
	68	+ >등록여부
	69	+ </SortableHeaderCell>
96	70	</tr>
97	71	</thead>
98	72	</>

...	...	@@ -1,5 +1,6 @@
1	1	import type {SearchParams} from "../../../../../type/searchParams.ts";
2	2	import type {AuthorRoleListItem} from "../type/authorRole.types.ts";
	3	+import {getTableRowNumber} from "../../../../component/table/getTableRowNumber.ts";
3	4
4	5
5	6	interface AuthorRoleListTableRowProps {
...	...	@@ -8,7 +9,6 @@
8	9	searchParams: SearchParams
9	10	totalItems: number
10	11	currentPage: number
11		- totalPages: number
12	12	onDetail: (roleCode: string) => void
13	13	onChange: (roleCode: string,value: string) => void
14	14	}
...	...	@@ -20,13 +20,15 @@
20	20	searchParams,
21	21	totalItems,
22	22	currentPage,
23		- totalPages,
24	23	onDetail,
25	24	onChange,
26	25	}: AuthorRoleListTableRowProps) => {
27		- const rowNumber = searchParams.searchSortOrd === 'DESC'
28		- ? totalItems - (currentPage - 1) * totalPages - index
29		- : (currentPage - 1) * totalPages + (index + 1)
	26	+ const rowNumber = getTableRowNumber({
	27	+ searchParams,
	28	+ totalItems,
	29	+ currentPage,
	30	+ index,
	31	+ });
30	32
31	33	const roleCode = item.roleCode;
32	34
...	...	@@ -58,4 +60,4 @@
58	60	</td>
59	61	</tr>
60	62	);
61		-}; (No newline at end of file)
	63	+};

...	...	@@ -1,10 +1,19 @@
1	1	import {apiClient} from "../../../../../api/apiClient.ts";
2		-import type {AuthorRoleMenuSearchParams} from "../type/authorRoleMenu.types.ts";
	2	+import type {
	3	+ AuthorRoleMenuFormItem,
	4	+ AuthorRoleMenuListItem,
	5	+ AuthorRoleMenuSearchParams, UpdateAuthorRoleMenuItemRequest
	6	+} from "../type/authorRoleMenu.types.ts";
	7	+import type {PageResponse} from "../../../../../type/pageResponse.ts";
3	8
4	9	export async function fetchAuthorRoleMenuList(params: AuthorRoleMenuSearchParams) {
5		- return apiClient.get(`/sym/mnu/mcm/list.do`, params);
	10	+ return apiClient.get<PageResponse<AuthorRoleMenuListItem>>(`/sym/mnu/mcm/list.do`, params);
6	11	}
7	12
8	13	export async function fetchAuthorRoleMenuDetail(authorCode: string) {
9		- return apiClient.get(`/sym/mnu/mcm/detail?authorCode=${authorCode}`);
	14	+ return apiClient.get<AuthorRoleMenuFormItem[]>(`/sym/mnu/mcm/detail.do?authorCode=${authorCode}`);
	15	+}
	16	+
	17	+export async function updateAuthorRoleMenu(params: UpdateAuthorRoleMenuItemRequest[]) {
	18	+ return apiClient.post(`/sym/mnu/mcm/EgovMenuCreatInsert.do`, params);
10	19	}

...	...	@@ -1,11 +1,14 @@
1	1	import type {AuthorRoleMenuSearchParams} from "../../type/authorRoleMenu.types.ts";
2	2	import {keepPreviousData, useQuery} from "@tanstack/react-query";
3	3	import {fetchAuthorRoleMenuList} from "../../api/authorRoleMenuApi.ts";
	4	+import {createPageQueryResult} from "../../../../../../type/pageResponse.ts";
4	5
5	6	export function useAuthorRoleMenuList(searchParams: AuthorRoleMenuSearchParams) {
6		- return useQuery({
	7	+ const query = useQuery({
7	8	queryKey: ['authorRoleMenuList', searchParams],
8	9	queryFn: () => fetchAuthorRoleMenuList(searchParams),
9	10	placeholderData: keepPreviousData
10	11	});
	12	+
	13	+ return createPageQueryResult(query);
11	14	}

...	...	@@ -1,12 +1,8 @@
1		-import type {ReactNode} from "react";
	1	+import {Outlet} from "react-router-dom";
2	2	import {AdminSideBar} from "./AdminSideBar.tsx";
3	3	import {AdminTopBar} from "./AdminTopBar.tsx";
4	4
5		-type AdminLayoutProps = {
6		- children: ReactNode;
7		-}
8		-
9		-export function AdminLayout({children}: AdminLayoutProps) {
	5	+export function AdminLayout() {
10	6	return (
11	7	<div className="wrap">
12	8	<AdminSideBar/>
...	...	@@ -14,9 +10,9 @@
14	10	<div className="container sub">
15	11	<AdminTopBar/>
16	12	<div className="content_wrap">
17		- {children}
	13	+ <Outlet/>
18	14	</div>
19	15	</div>
20	16	</div>
21	17	);
22		-} (No newline at end of file)
	18	+}

...	...	@@ -1,16 +1,20 @@
1	1	import {Navigate, Route, Routes} from "react-router-dom";
2	2	import {BoardListPage} from "../feature/board/master/page/BoardListPage.tsx";
3	3	import {
4		- ADMIN_AUTHOR_DETAIL_ROUTE,
	4	+ ADMIN_AUTHOR_DETAIL_ROUTE, ADMIN_AUTHOR_GROUP_LIST_ROUTE,
5	5	ADMIN_AUTHOR_LIST_ROUTE,
6	6	ADMIN_AUTHOR_ROLE_LIST_ROUTE, ADMIN_BBS_ARTICLE_FORM_ROUTE,
7		- ADMIN_BBS_MASTER_ROUTE, ADMIN_ROLE_FORM_ROUTE
	7	+ ADMIN_BBS_MASTER_ROUTE, ADMIN_MENU_CREATE_MANAGE_ROUTE, ADMIN_MENU_POPUP_ROUTE, ADMIN_ROLE_FORM_ROUTE
8	8	} from "./adminRouteMap.ts";
9	9	import {BoardArticleListPage} from "../feature/board/article/page/BoardArticleListPage.tsx";
10	10	import {BoardFormPage} from "../feature/board/master/page/BoardFormPage.tsx";
11	11	import {AuthorListPage} from "../feature/role/author/page/AuthorListPage.tsx";
12	12	import {AuthorRoleListPage} from "../feature/role/authorRole/page/AuthorRoleListPage.tsx";
13	13	import {AuthorRoleFormPage} from "../feature/role/role/page/AuthorRoleFormPage.tsx";
	14	+import {AuthorRoleMenuListPage} from "../feature/role/authorRoleMenu/page/AuthorRoleMenuListPage.tsx";
	15	+import {AuthorRoleMenuPopupPage} from "../feature/role/authorRoleMenu/page/AuthorRoleMenuPopupPage.tsx";
	16	+import {AdminLayout} from "../layout/AdminLayout.tsx";
	17	+import {AuthorGroupListPage} from "../feature/role/authorGroup/page/AuthorGroupListPage.tsx";
14	18
15	19	const ReadyPage = () => {
16	20	return <div>Preparing menu.</div>;
...	...	@@ -19,17 +23,23 @@
19	23	export const AdminRoute = () => {
20	24	return (
21	25	<Routes>
22		- <Route path="/" element={<Navigate to={ADMIN_BBS_MASTER_ROUTE} replace/>}/>
23		- <Route path={ADMIN_BBS_MASTER_ROUTE} element={<BoardListPage/>}/>
24		- <Route path={`/admin/cop/bbs/article/:bbsId`} element={<BoardArticleListPage/>}/>
25		- <Route path={`${ADMIN_BBS_ARTICLE_FORM_ROUTE}:bbsId`} element={<BoardFormPage/>}/>
26		- <Route path={ADMIN_BBS_ARTICLE_FORM_ROUTE} element={<BoardFormPage/>}/>
	26	+ <Route path={`${ADMIN_MENU_POPUP_ROUTE}/:authorCode`} element={<AuthorRoleMenuPopupPage/>}/>
27	27
28		- <Route path={ADMIN_AUTHOR_LIST_ROUTE} element={<AuthorListPage/>}/>
29		- <Route path={ADMIN_AUTHOR_DETAIL_ROUTE} element={<ReadyPage/>}/>
30		- <Route path={ADMIN_AUTHOR_ROLE_LIST_ROUTE} element={<AuthorRoleListPage/>}/>
31		- <Route path={ADMIN_ROLE_FORM_ROUTE} element={<AuthorRoleFormPage/>}/>
32		- <Route path="*" element={<ReadyPage/>}/>
	28	+ <Route element={<AdminLayout/>}>
	29	+ <Route path="/" element={<Navigate to={ADMIN_BBS_MASTER_ROUTE} replace/>}/>
	30	+ <Route path={ADMIN_BBS_MASTER_ROUTE} element={<BoardListPage/>}/>
	31	+ <Route path={`/admin/cop/bbs/article/:bbsId`} element={<BoardArticleListPage/>}/>
	32	+ <Route path={`${ADMIN_BBS_ARTICLE_FORM_ROUTE}:bbsId`} element={<BoardFormPage/>}/>
	33	+ <Route path={ADMIN_BBS_ARTICLE_FORM_ROUTE} element={<BoardFormPage/>}/>
	34	+
	35	+ <Route path={ADMIN_AUTHOR_LIST_ROUTE} element={<AuthorListPage/>}/>
	36	+ <Route path={ADMIN_AUTHOR_DETAIL_ROUTE} element={<ReadyPage/>}/>
	37	+ <Route path={ADMIN_AUTHOR_ROLE_LIST_ROUTE} element={<AuthorRoleListPage/>}/>
	38	+ <Route path={ADMIN_ROLE_FORM_ROUTE} element={<AuthorRoleFormPage/>}/>
	39	+ <Route path={ADMIN_MENU_CREATE_MANAGE_ROUTE} element={<AuthorRoleMenuListPage/>}/>
	40	+ <Route path={ADMIN_AUTHOR_GROUP_LIST_ROUTE} element={<AuthorGroupListPage/>}/>
	41	+ <Route path="*" element={<ReadyPage/>}/>
	42	+ </Route>
33	43	</Routes>
34	44	);
35	45	};

...	...	@@ -18,10 +18,16 @@
18	18	export const ADMIN_LOGIN_GROUP_POLICY_ROUTE = `${ADMIN_ROUTE_PREFIX}/uat/uap/selectLoginGroupPolicyList.do`;
19	19	export const ADMIN_MEMBER_MANAGE_ROUTE = `${ADMIN_ROUTE_PREFIX}/uss/umt/EgovMberManage.do`;
20	20	export const ADMIN_POPUP_ZONE_LIST_ROUTE = `${ADMIN_ROUTE_PREFIX}/uss/ion/pwm/popupZoneList.do`;
	21	+
	22	+
21	23	export const ADMIN_MENU_CREATE_MANAGE_ROUTE = `${ADMIN_ROUTE_PREFIX}/sym/mnu/mcm/EgovMenuCreatManageSelect.do`;
	24	+export const ADMIN_MENU_POPUP_ROUTE = `${ADMIN_ROUTE_PREFIX}/sym/mnu/mcm/detail.do`;
	25	+
	26	+export const ADMIN_AUTHOR_GROUP_LIST_ROUTE = `${ADMIN_ROUTE_PREFIX}/sec/rgm/EgovAuthorGroupList.do`;
	27	+
	28	+
22	29	export const ADMIN_USER_MANAGE_ROUTE = `${ADMIN_ROUTE_PREFIX}/uss/umt/user/EgovUserManage.do`;
23	30	export const ADMIN_COMMON_CODE_TREE_ROUTE = `${ADMIN_ROUTE_PREFIX}/sym/ccm/ccc/EgovCcmCmmnCodeTree.do`;
24		-export const ADMIN_AUTHOR_GROUP_LIST_ROUTE = `${ADMIN_ROUTE_PREFIX}/sec/rgm/EgovAuthorGroupList.do`;
25	31	export const ADMIN_POPUP_LIST_ROUTE = `${ADMIN_ROUTE_PREFIX}/uss/ion/pwm/egovPopupList.do`;
26	32	export const ADMIN_WEB_LOG_LIST_ROUTE = `${ADMIN_ROUTE_PREFIX}/sym/log/clg/SelectWebLogList.do`;
27	33

...	...	@@ -9,14 +9,15 @@
9	9	size: number;
10	10	}
11	11
12		-export const createPageQueryResult = <T>(
13		- query: UseQueryResult<PageResponse<T>>
	12	+export const createPageQueryResult = <T, E = Record<string, unknown>>(
	13	+ query: UseQueryResult<PageResponse<T, E>>
14	14	) => ({
15	15	list: query.data?.list ?? [],
	16	+ extraData: query.data?.extraData ?? null,
16	17	totalItems: query.data?.totalItems ?? 0,
17	18	totalPages: query.data?.totalPages ?? 0,
18	19	currentPage: query.data?.currentPage ?? 0,
19	20	size: query.data?.size ?? 0,
20	21	isLoading: query.isLoading,
21	22	error: query.error,
22		-}); (No newline at end of file)
	23	+});

Delete comment

...	...	@@ -51,8 +51,13 @@
51	51	"totalItems" \| "currentPage" \| "totalPages"
52	52	>;
53	53
54		-export type ListTableModel<TItem, TSearchParams extends SearchParams> = {
	54	+export type ListTableModel<
	55	+ TItem,
	56	+ TSearchParams extends SearchParams,
	57	+ TExtraData = unknown
	58	+> = {
55	59	items: TItem[];
	60	+ extraData?: TExtraData \| null;
56	61	params: TSearchParams;
57	62	onChange: (params: TSearchParams) => void;
58	63	pagination: TablePaginationModel;
...	...	@@ -61,8 +66,9 @@
61	66	export type CheckableTableModel<
62	67	TItem,
63	68	TSearchParams extends SearchParams,
64		- TId extends string \| number = string
65		-> = ListTableModel<TItem, TSearchParams> & {
	69	+ TId extends string \| number = string,
	70	+ TExtraData = unknown
	71	+> = ListTableModel<TItem, TSearchParams, TExtraData> & {
66	72	check: TableCheckModel<TId>;
67	73	};
68	74