From 14377d94790e11520c0f1f80b3d1a7f473be0669 Mon Sep 17 00:00:00 2001
From: LJW25 <dbjwlee@gmail.com>
Date: Sun, 4 Feb 2024 01:02:43 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B4=80=EB=A6=AC=EC=9E=90=EB=A9=A4?=
 =?UTF-8?q?=EB=B2=84=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AdminMemberTableSkeleton.tsx              | 35 +++++++++++++++++
 .../AdminMemberPageSkeleton.tsx               | 38 +++++++++++++++++++
 .../hanglog-admin/src/router/AppRouter.tsx    |  3 +-
 3 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 frontend-monorepo/packages/hanglog-admin/src/components/adminMember/AdminMemberTable/AdminMemberTableSkeleton.tsx
 create mode 100644 frontend-monorepo/packages/hanglog-admin/src/pages/AdminMemberPage/AdminMemberPageSkeleton.tsx

diff --git a/frontend-monorepo/packages/hanglog-admin/src/components/adminMember/AdminMemberTable/AdminMemberTableSkeleton.tsx b/frontend-monorepo/packages/hanglog-admin/src/components/adminMember/AdminMemberTable/AdminMemberTableSkeleton.tsx
new file mode 100644
index 00000000..f8b0e458
--- /dev/null
+++ b/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;
diff --git a/frontend-monorepo/packages/hanglog-admin/src/pages/AdminMemberPage/AdminMemberPageSkeleton.tsx b/frontend-monorepo/packages/hanglog-admin/src/pages/AdminMemberPage/AdminMemberPageSkeleton.tsx
new file mode 100644
index 00000000..6b0876a7
--- /dev/null
+++ b/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;
diff --git a/frontend-monorepo/packages/hanglog-admin/src/router/AppRouter.tsx b/frontend-monorepo/packages/hanglog-admin/src/router/AppRouter.tsx
index 367302bb..8398e3ac 100644
--- a/frontend-monorepo/packages/hanglog-admin/src/router/AppRouter.tsx
+++ b/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>
         ),