feat(admin): aside-navigation-menu 추가

apps/admin/package.json

@@ -28,6 +28,7 @@
     "@tanstack/react-router": "^1.104.1",
     "antd": "^5.24.1",
     "ky": "^1.7.5",
+    "lucide-react": "^0.462.0",
     "react": "catalog:react19",
     "react-dom": "catalog:react19",
     "tailwindcss": "^4.0.6"

apps/admin/src/components/aside-navigation-menu.tsx

@@ -0,0 +1,87 @@
+import { Link } from '@tanstack/react-router';
+import { Menu, type MenuProps } from 'antd';
+import {
+  Clipboard,
+  FlaskConical,
+  GraduationCap,
+  Speech,
+  Users,
+} from 'lucide-react';
+
+import LOGO from '~/assets/logo.svg';
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+const items: MenuItem[] = [
+  //TODO: Link 내부 url 변경
+  {
+    key: 'user',
+    label: '회원 관리',
+    icon: <Users size={20} />,
+  },
+  {
+    key: 'about',
+    label: '소개',
+    icon: <GraduationCap size={20} />,
+    children: [
+      { key: 'dept', label: <Link to="/">학부 소개</Link> },
+      { key: 'club', label: <Link to="/">동아리 소개</Link> },
+      { key: 'contact', label: <Link to="/">찾아오시는 길</Link> },
+    ],
+  },
+  {
+    key: 'professor',
+    label: <Link to="/">교수진 소개</Link>,
+    icon: <Speech size={20} />,
+  },
+  {
+    key: 'lab',
+    label: <Link to="/">연구실 소개</Link>,
+    icon: <FlaskConical size={20} />,
+  },
+  {
+    key: 'board',
+    label: '게시판',
+    icon: <Clipboard size={20} />,
+    children: [
+      { key: 'notice', label: <Link to="/">공지사항</Link> },
+      { key: 'news', label: <Link to="/">학부 소식</Link> },
+    ],
+  },
+];
+
+function AsideHeader() {
+  return (
+    <div className="flex items-center justify-center gap-2 font-bold border-r border-gray-200 h-22">
+      <img src={LOGO} alt="logo" />
+      <div className="leading-4.5">
+        <p>AI컴퓨터공학부</p>
+        <p>관리자 시스템</p>
+      </div>
+    </div>
+  );
+}
+
+function AsideFooter() {
+  //TODO: 로그아웃 기능 적용
+  return (
+    <div className="flex items-center p-2 border-r border-gray-200 place-self-end">
+      <button
+        type="button"
+        className="p-2 text-xs transition-colors duration-150 rounded-md cursor-pointer hover:bg-gray-300"
+      >
+        로그아웃
+      </button>
+    </div>
+  );
+}
+
+export default function AsideNavigationMenu() {
+  return (
+    <aside className="flex flex-col h-full select-none bg-slate-100 w-80">
+      <AsideHeader />
+      <Menu mode="inline" items={items} className="flex-grow" />
+      <AsideFooter />
+    </aside>
+  );
+}

apps/admin/src/routes/__root.tsx

@@ -1,17 +1,35 @@
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { Outlet, createRootRoute } from '@tanstack/react-router';
+import { Outlet, createRootRoute, useLocation } from '@tanstack/react-router';
 import { TanStackRouterDevtools } from '@tanstack/router-devtools';
+import { ConfigProvider } from 'antd';
+import AsideNavigationMenu from '~/components/aside-navigation-menu';
 
 export const Route = createRootRoute({
   component: App,
 });
 
 function App() {
+  const location = useLocation();
+  const isSigninPage = location.pathname === '/';
+
   return (
-    <>
-      <Outlet />
-      <TanStackRouterDevtools position="top-right" />
-      <ReactQueryDevtools initialIsOpen={false} />
-    </>
+    <ConfigProvider
+      theme={{
+        components: {
+          Menu: {
+            itemBg: '#f1f5f9',
+          },
+        },
+      }}
+    >
+      <main className="relative flex h-dvh">
+        {!isSigninPage && <AsideNavigationMenu />}
+        <div className="flex flex-col items-center justify-center w-full h-full">
+          <Outlet />
+        </div>
+        <TanStackRouterDevtools position="top-right" />
+        <ReactQueryDevtools initialIsOpen={false} />
+      </main>
+    </ConfigProvider>
   );
 }

apps/admin/src/routes/index.tsx

@@ -32,8 +32,8 @@ function SignInPage() {
   };
 
   return (
-    <div className="flex justify-center items-center h-screen bg-gray-100">
-      <Card className="w-96 shadow-lg">
+    <div className="flex items-center justify-center w-full h-full bg-gray-100">
+      <Card className="shadow-lg w-96">
         <Typography.Title level={3} className="text-center">
           로그인
         </Typography.Title>

apps/admin/src/styles/globals.css

@@ -1,5 +1,20 @@
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css");
 @import "tailwindcss";
 
+:root {
+  font-family:
+    "Pretendard Variable", Pretendard, -apple-system,
+    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
+    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+  font-size: 16px;
+}
+
 .ProseMirror ul ul,
 .ProseMirror ol ol,
 .ProseMirror ul ol,