From dd6a8d770f96039809c42148f3017d94f501fcde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=95=B4=EC=B0=AC=5BVertical=20Service=20Dev1=5D?= Date: Thu, 20 Jun 2024 23:24:28 +0900 Subject: [PATCH] =?UTF-8?q?fix=20:=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8?= =?UTF-8?q?=ED=95=B4=EB=8F=84=20=EC=95=88=ED=8A=95=EA=B8=B0=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/webapp/src/config/routes.ts | 15 +- src/main/webapp/src/layout/Content/index.tsx | 49 ++++--- .../src/pages/attendance/QRCodeList.tsx | 128 ++++++++++++++++++ 3 files changed, 165 insertions(+), 27 deletions(-) create mode 100644 src/main/webapp/src/pages/attendance/QRCodeList.tsx diff --git a/src/main/webapp/src/config/routes.ts b/src/main/webapp/src/config/routes.ts index 3cfb99c..315dc9e 100644 --- a/src/main/webapp/src/config/routes.ts +++ b/src/main/webapp/src/config/routes.ts @@ -3,18 +3,19 @@ import React from 'react'; const Dashboard = React.lazy(() => import('../pages/dashboard/Dashboard')); const DemoList = React.lazy(() => import('../pages/demo/List')); +const QRCodeList = React.lazy(() => import('../pages/attendance/QRCodeList')); const UserList = React.lazy(() => import('../pages/user/UserList')); const DemoDetail = React.lazy(() => import('../pages/demo/Detail')); const TextEditor = React.lazy(() => import('../pages/demo/EditorPage')); const routes = [ - {path: '/dashboard', component: Dashboard}, - {path: '/admin-page/dashboard', component: Dashboard}, - {path: '/user/attendance', component: UserList}, - {path: '/user/attendance/qrcode', component: UserList}, - {path: '/demo/list', component: DemoList}, - {path: '/demo/editor', component: TextEditor}, - {path: '/demo/detail/:id', component: DemoDetail}, + {path: '/dashboard', component: Dashboard}, + {path: '/admin-page/dashboard', component: Dashboard}, + {path: '/user/attendance', component: UserList}, + {path: '/user/attendance/qrcode', component: QRCodeList}, + {path: '/demo/list', component: DemoList}, + {path: '/demo/editor', component: TextEditor}, + {path: '/demo/detail/:id', component: DemoDetail}, ]; export default routes; diff --git a/src/main/webapp/src/layout/Content/index.tsx b/src/main/webapp/src/layout/Content/index.tsx index aaae26c..2e3ae40 100644 --- a/src/main/webapp/src/layout/Content/index.tsx +++ b/src/main/webapp/src/layout/Content/index.tsx @@ -5,30 +5,39 @@ import {Navigate, Route, Routes, useLocation} from 'react-router-dom'; import routes from '../../config/routes'; const loading = ( -
-
-
+
+
+
); const Content = () => { - const location = useLocation(); - const [isExistsFilteredRoute] = useState(routes.filter(route => route.path === location.pathname).length > 0); + const location = useLocation(); + const [isExistsFilteredRoute] = useState( + routes.filter(route => + location.pathname.startsWith("/admin-page" + route.path) || + location.pathname.startsWith(route.path) + ).length > 0 + ); - console.log(`isExistsFilteredRoute : ${isExistsFilteredRoute}`) - return ( - - {!isExistsFilteredRoute ? ( - - ) : ( - - {routes.map((route, idx) => { - return route.component && }/>; - })} - }/> - - )} - - ); + routes.map((route) => { + console.log(route.path) + }) + console.log(location.pathname) + console.log(`isExistsFilteredRoute : ${isExistsFilteredRoute}`) + return ( + + {!isExistsFilteredRoute ? ( + + ) : ( + + {routes.map((route, idx) => { + return route.component && }/>; + })} + }/> + + )} + + ); }; export default React.memo(Content); diff --git a/src/main/webapp/src/pages/attendance/QRCodeList.tsx b/src/main/webapp/src/pages/attendance/QRCodeList.tsx new file mode 100644 index 0000000..2a059d3 --- /dev/null +++ b/src/main/webapp/src/pages/attendance/QRCodeList.tsx @@ -0,0 +1,128 @@ +import {Column} from '@coreui/react/dist/components/table/types'; +import Section from 'components/Section'; +import useSelectSize from 'components/Select/useSelectSize'; +import useQueryString from 'hooks/useQueryString'; +import React, {Fragment, useState} from 'react'; +import useQueryStringEffect from "../../hooks/useQueryStringEffect"; +import {useInput} from "../../hooks/useInput"; +import {useQuery} from "@tanstack/react-query"; +import {userApi} from "../../apis/handlers/users"; + +const USER_COLUMNS: Column[] = [ + {label: 'id', key: 'id'}, + {label: '기수', key: 'generation'}, + {label: '이름', key: 'name'}, + {label: '이메일', key: 'email'}, + {label: '닉네임', key: 'nickname'}, + {label: '파트', key: 'part'}, + {label: '회원가입 승인', key: 'signUpApprove'}, + {label: '회원가입 승인', key: 'modal'}, +]; + +const QRCodeList = () => { + + const {get} = useQueryString(); + const [page, setPage] = useState(Number(get('page') || 0)); + const [size, SizeSelect] = useSelectSize(() => setPage(0)); + const [generation, onChangeGeneration, setGeneration] = useInput(get('searchValue') || '15'); + + /** + * + * useQuery의 querykey에 다양한 변수들을 넣어줄 수 있습니다. + * const {data, status: httpStatus} = useQuery(['mock',page,size, status //..외 기타 키들], () => + */ + const { + data, + status: httpStatus, + refetch, + } = useQuery( + [page, size], + () => + userApi.getAllUsersByGeneration( + { + generation: parseInt(generation), + page: page, + size: size + } + ), + { + onSuccess: data => { + console.log(data) + }, + }, + ); + + useQueryStringEffect( + { + page, + size, + }, + [page, size], + ); + + return ( + <> +
+ QR 코드 준비 중... + + } + footer={ + <> + + // + // refetch()}>검색 + // + } + /> + {/**/} + {/* (*/} + {/* <>*/} + {/* {*/} + {/* userApi.handleSignUpAprrove({*/} + {/* userId: data.id,*/} + {/* approve: true*/} + {/* }).then(() => {*/} + {/* refetch();*/} + {/* });*/} + {/* }}*/} + {/* >*/} + {/* 승인*/} + {/* */} + {/* {*/} + {/* userApi.handleSignUpAprrove({*/} + {/* userId: data.id,*/} + {/* approve: false*/} + {/* }).then(() => {*/} + {/* refetch().then();*/} + {/* });*/} + {/* }}>*/} + {/* 거부*/} + {/* */} + {/* */} + {/* ),*/} + {/* }}*/} + {/* />*/} + {/* */} + {/* }*/} + {/*/>*/} + + ); +}; + +export default QRCodeList;