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

* chore(admin): init lucide icons

* feat(admin): pretendard 폰트 적용

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

* refactor: bg 색상 변경

* refactor: height 조정

* refactor(admin): use-auth에서 유틸함수로 분리

* feat: add mainpage

* refactor: use-auth에서 refreshTokens 분리

* feat: 로그인 후 메인페이지로 리다이랙션

* feat: 로그인 연장 및 로그아웃 기능

* chore: change file name

---------

Co-authored-by: NoaH <85290394+noahyunjun@users.noreply.github.com>

Author: SunwooJaeho

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/assets/.gitkeep

@@ -0,0 +1,113 @@
+import { Link } from '@tanstack/react-router';
+import { Menu, type MenuProps } from 'antd';
+import {
+  Clipboard,
+  Clock,
+  FlaskConical,
+  GraduationCap,
+  Speech,
+  Users,
+} from 'lucide-react';
+
+import LOGO from '~/assets/logo.svg';
+import { useRefreshTokens } from '~/hooks/use-refresh-token';
+import { useTokenExpiration } from '~/hooks/use-token-expiration';
+import { authServices } from '~/utils/auth';
+import { formatExpireTime } from '~/utils/utils';
+
+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() {
+  const { expireTime } = useTokenExpiration();
+  const refreshMutation = useRefreshTokens();
+  const { logout } = authServices();
+
+  const handleRefreshToken = () => {
+    refreshMutation.mutate();
+  };
+
+  return (
+    <div className="flex items-center text-sm p-2 border-r border-gray-200 justify-between">
+      <div className="flex gap-1.5 items-center">
+        <Clock size={16} />
+        <span>{formatExpireTime(expireTime)}</span>
+      </div>
+      <div>
+        <button
+          type="button"
+          className="p-2  transition-colors duration-150 rounded-md cursor-pointer hover:bg-gray-300"
+          onClick={handleRefreshToken}
+        >
+          시간연장
+        </button>
+        <button
+          type="button"
+          className="p-2  transition-colors duration-150 rounded-md cursor-pointer hover:bg-gray-300"
+          onClick={logout}
+        >
+          로그아웃
+        </button>
+      </div>
+    </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/assets/logo.svg

@@ -0,0 +1,40 @@
+import { useMutation } from '@tanstack/react-query';
+import { END_POINT } from '~/constants/api';
+import { getToken } from '~/utils/api';
+import { authServices } from '~/utils/auth';
+import { authHttp } from '~/utils/http';
+import type { Tokens } from './use-sign-in';
+
+interface RefreshToken {
+  refreshToken: string;
+}
+
+const useRefreshTokens = () => {
+  const { setTokens, logout } = authServices();
+
+  const refreshMutation = useMutation({
+    mutationFn: () => {
+      const [accessToken, refreshToken] = getToken();
+
+      if (!accessToken || !refreshToken) {
+        throw new Error('토큰이 존재하지 않습니다');
+      }
+
+      const response = authHttp.post<RefreshToken>(END_POINT.REISSUE, {
+        json: { refreshToken },
+      });
+      return response.json<Tokens>();
+    },
+    onSuccess: (newTokens) => {
+      setTokens(newTokens);
+    },
+    onError: () => {
+      alert('오류가 발생하여 로그아웃합니다.');
+      logout();
+    },
+  });
+
+  return refreshMutation;
+};
+
+export { type RefreshToken, useRefreshTokens };

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

@@ -1,6 +1,7 @@
 import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
 import { END_POINT } from '~/constants/api';
-import { useAuth } from '~/hooks/use-auth';
+import { authServices } from '~/utils/auth';
 import { authHttp } from '~/utils/http';
 
 interface SignInData {
@@ -14,15 +15,16 @@ interface Tokens {
 }
 
 const useSignIn = () => {
-  const { setTokens } = useAuth();
+  const { setTokens } = authServices();
+  const navigate = useNavigate();
 
   return useMutation({
     mutationFn: (data: SignInData) => {
       return authHttp.post(END_POINT.SIGN_IN, { json: data }).json<Tokens>();
     },
     onSuccess: (token) => {
-      console.log('success : ', token);
       setTokens(token);
+      navigate({ to: '/main' });
     },
   });
 };

apps/admin/src/hooks/use-auth.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { getAccessToken } from '~/utils/api';
+import { authServices } from '~/utils/auth';
+import { decodeJwt } from '~/utils/jwt';
+
+export const useTokenExpiration = () => {
+  const { logout } = authServices();
+  const [expireTime, setExpireTime] = useState<number | null>(null);
+  const accessToken = getAccessToken();
+
+  useEffect(() => {
+    if (accessToken) {
+      const decoded = decodeJwt(accessToken);
+      if (decoded?.exp) {
+        const expiresIn = decoded.exp * 1000 - Date.now();
+        setExpireTime(expiresIn);
+      }
+    }
+  }, [accessToken]);
+
+  useEffect(() => {
+    if (expireTime !== null && expireTime <= 0) {
+      logout();
+    } else if (expireTime !== null && expireTime > 0) {
+      const timerId = setTimeout(() => {
+        setExpireTime(expireTime - 1000);
+      }, 1000);
+      return () => clearTimeout(timerId);
+    }
+  }, [expireTime, logout]);
+
+  return { expireTime };
+};

apps/admin/src/hooks/use-refresh-token.ts

@@ -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/hooks/use-sign-in.ts

@@ -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/hooks/use-token-expiration.ts

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/main/')({
+  component: MainPage,
+});
+
+function MainPage() {
+  return <div>main</div>;
+}

apps/admin/src/routes/__root.tsx

@@ -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,