feat: 관리자멤버 스켈레톤 페이지 구현

frontend-monorepo/packages/hanglog-admin/src/components/adminMember/AdminMemberTable/AdminMemberTableSkeleton.tsx

@@ -0,0 +1,35 @@
+import { Skeleton } from 'hang-log-design-system';
+
+import { tableStyling } from './AdminMemberTable.style';
+
+interface AdminMemberTableSkeletonProps {
+  length: number;
+}
+
+const AdminMemberTableSkeleton = ({ length }: AdminMemberTableSkeletonProps) => {
+  return (
+    <table css={tableStyling}>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>계정명</th>
+          <th>관리자 등급</th>
+          <th>비밀번호 수정</th>
+        </tr>
+      </thead>
+      <tbody>
+        {Array.from({ length }, (_, index) => {
+          return (
+            <tr key={index}>
+              <td colSpan={4}>
+                <Skeleton />
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+export default AdminMemberTableSkeleton;

frontend-monorepo/packages/hanglog-admin/src/pages/AdminMemberPage/AdminMemberPageSkeleton.tsx

@@ -0,0 +1,38 @@
+import { Button, Flex, Heading, Skeleton } from 'hang-log-design-system';
+
+import SidebarNavigation from '@/components/common/SidebarNavigation/SidebarNavigation';
+import AdminMemberTableSkeleton from '@/components/adminMember/AdminMemberTable/AdminMemberTableSkeleton';
+
+import {
+  containerStyling,
+  titleStyling,
+  addButtonStyling,
+  tableStyling,
+  pagenationSkeletonStyling,
+} from './AdminMemberPage.style';
+
+const AdminMemberPageSkeleton = () => {
+  return (
+    <>
+      <Flex>
+        <SidebarNavigation />
+        <Flex styles={{ direction: 'column', align: 'center' }} css={containerStyling}>
+          <Heading size="large" css={titleStyling}>
+            관리자 멤버 관리
+          </Heading>
+          <Button variant="primary" css={addButtonStyling}>
+            추가하기
+          </Button>
+          <section css={tableStyling}>
+            <AdminMemberTableSkeleton length={10} />
+          </section>
+          <div css={pagenationSkeletonStyling}>
+            <Skeleton />
+          </div>
+        </Flex>
+      </Flex>
+    </>
+  );
+};
+
+export default AdminMemberPageSkeleton;

frontend-monorepo/packages/hanglog-admin/src/router/AppRouter.tsx

@@ -14,6 +14,7 @@ import CurrencyPageSkeleton from '@/pages/CurrencyPage/CurrencyPageSkeleton';
 import { PATH } from '@constants/path';
 import { Suspense } from 'react';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import AdminMemberPageSkeleton from '@/pages/AdminMemberPage/AdminMemberPageSkeleton';
 
 const router = createBrowserRouter([
   {
@@ -36,7 +37,7 @@ const router = createBrowserRouter([
       {
         path: PATH.ADMIN_MEMBER,
         element: (
-          <Suspense>
+          <Suspense fallback={<AdminMemberPageSkeleton />}>
             <AdminMemberPage />
           </Suspense>
         ),