[Refactor] - admin 배포 설정 및 리팩토링

apps/admin/src/pages/GlobalError/GlobalError.tsx

@@ -0,0 +1,39 @@
+import { Button, TriangleWarningIcon } from '@muneo/design-system';
+import { useEffect } from 'react';
+import { Link, useRouteError } from 'react-router';
+import { ROUTES } from '@/constants/routes';
+
+export const GlobalError = () => {
+  const error = useRouteError();
+
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div
+      style={{
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '16px',
+        textAlign: 'center',
+        padding: '24px',
+      }}
+    >
+      <TriangleWarningIcon width={48} height={48} style={{ color: '#EF4444' }} />
+      <h2 style={{ fontSize: '20px', fontWeight: 600, margin: 0 }}>오류가 발생했습니다</h2>
+      <p style={{ fontSize: '14px', color: '#64748B', margin: 0 }}>일시적인 문제가 발생했습니다. 다시 시도해주세요.</p>
+      <div style={{ display: 'flex', gap: '8px' }}>
+        <Button variant="primary" onClick={() => window.location.reload()}>
+          다시 시도
+        </Button>
+        <Button as={Link} variant="outlineSecondaryStrong" to={ROUTES.users}>
+          홈으로
+        </Button>
+      </div>
+    </div>
+  );
+};

apps/admin/src/pages/LoginPage/LoginPage.tsx → apps/admin/src/pages/Login/Login.tsx

@@ -1,7 +1,7 @@
 import { LoginForm } from './components/LoginForm';
-import * as styles from './LoginPage.css';
+import * as styles from './Login.css';
 
-export const LoginPage = () => (
+export const Login = () => (
   <div className={styles.wrapper}>
     <div className={styles.card}>
       <div>

apps/admin/src/pages/LoginPage/components/LoginForm.tsx → apps/admin/src/pages/Login/components/LoginForm.tsx

@@ -1,6 +1,6 @@
 import { Button, TextField } from '@muneo/design-system';
 import { useLoginForm } from '../hooks/useLoginForm';
-import * as styles from '../LoginPage.css';
+import * as styles from '../Login.css';
 
 export const LoginForm = () => {
   const { email, password, setEmail, setPassword, fieldErrors, submitError, isPending, submit } = useLoginForm();

apps/admin/src/pages/NotFound/NotFound.tsx

@@ -0,0 +1,28 @@
+import { Button } from '@muneo/design-system';
+import { Link } from 'react-router';
+import { ROUTES } from '@/constants/routes';
+
+export const NotFound = () => (
+  <div
+    style={{
+      minHeight: '100vh',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      textAlign: 'center',
+      padding: '24px',
+    }}
+  >
+    <p style={{ fontSize: '120px', fontWeight: 900, lineHeight: 1, color: '#0F62FE', margin: 0 }}>404</p>
+    <h1 style={{ fontSize: '22px', fontWeight: 700, margin: '20px 0 10px', color: '#0F172A' }}>
+      페이지를 찾을 수 없습니다
+    </h1>
+    <p style={{ fontSize: '14px', color: '#64748B', margin: '0 0 36px', lineHeight: 1.6 }}>
+      요청하신 페이지가 존재하지 않거나 이동되었습니다.
+    </p>
+    <Button as={Link} to={ROUTES.users} variant="primary" size="md">
+      홈으로 돌아가기
+    </Button>
+  </div>
+);

apps/admin/src/pages/UserDetailPage/UserDetailPage.tsx → apps/admin/src/pages/UserDetail/UserDetail.tsx

@@ -6,9 +6,9 @@ import { UserDangerZone } from './components/UserDangerZone';
 import { UserEditForm } from './components/UserEditForm';
 import { UserRoleSection } from './components/UserRoleSection';
 import { useUserDetail } from './hooks/useUserDetail';
-import * as styles from './UserDetailPage.css';
+import * as styles from './UserDetail.css';
 
-export const UserDetailPage = () => {
+export const UserDetail = () => {
   const {
     userId,
     detail,

apps/admin/src/pages/UserDetailPage/components/UserDangerZone.tsx → apps/admin/src/pages/UserDetail/components/UserDangerZone.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@muneo/design-system';
 import { Card } from '@/components/Card';
-import * as styles from '../UserDetailPage.css';
+import * as styles from '../UserDetail.css';
 
 interface UserDangerZoneProps {
   isDeleted: boolean;

apps/admin/src/pages/UserDetailPage/components/UserEditForm.tsx → apps/admin/src/pages/UserDetail/components/UserEditForm.tsx

@@ -3,7 +3,7 @@ import { type FormEvent } from 'react';
 import { type UpdateUserRequest } from '@/api';
 import { Card } from '@/components/Card';
 import { type FormErrors } from '../hooks/useUserDetail';
-import * as styles from '../UserDetailPage.css';
+import * as styles from '../UserDetail.css';
 
 interface UserEditFormProps {
   form: UpdateUserRequest;

apps/admin/src/pages/UserDetailPage/components/UserRoleSection.tsx → apps/admin/src/pages/UserDetail/components/UserRoleSection.tsx

@@ -2,7 +2,7 @@ import { Button, Dropdown } from '@muneo/design-system';
 import { USER_ROLES, type UserRole } from '@/api';
 import { Card } from '@/components/Card';
 import { ROLE_LABEL } from '@/lib/formatters';
-import * as styles from '../UserDetailPage.css';
+import * as styles from '../UserDetail.css';
 
 interface UserRoleSectionProps {
   currentRole: UserRole;

apps/admin/src/pages/UsersListPage/UsersListPage.tsx → apps/admin/src/pages/UsersList/UsersList.tsx

@@ -3,9 +3,9 @@ import { ROUTES } from '@/constants/routes';
 import { UserFilters } from './components/UserFilters';
 import { UsersTable } from './components/UsersTable';
 import { useUsersFilters } from './hooks/useUsersFilters';
-import * as styles from './UsersListPage.css';
+import * as styles from './UsersList.css';
 
-export const UsersListPage = () => {
+export const UsersList = () => {
   const navigate = useNavigate();
   const { draft, setDraft, query, apply, reset, prevPage, nextPage } = useUsersFilters();
 

apps/admin/src/router/router.tsx

@@ -1,31 +1,38 @@
 import { createBrowserRouter, Navigate } from 'react-router';
 import { ROUTES } from '@/constants/routes';
 import { Layout } from '@/layout/Layout';
-import { LoginPage } from '@/pages/LoginPage/LoginPage';
-import { UserDetailPage } from '@/pages/UserDetailPage/UserDetailPage';
-import { UsersListPage } from '@/pages/UsersListPage/UsersListPage';
+import { GlobalError } from '@/pages/GlobalError/GlobalError';
+import { Login } from '@/pages/Login/Login';
+import { NotFound } from '@/pages/NotFound/NotFound';
+import { UserDetail } from '@/pages/UserDetail/UserDetail';
+import { UsersList } from '@/pages/UsersList/UsersList';
 import { ProtectedRoute } from './ProtectedRoute';
 
 export const router = createBrowserRouter([
   {
-    path: ROUTES.login,
-    element: <LoginPage />,
-  },
-  {
-    element: <ProtectedRoute />,
+    errorElement: <GlobalError />,
     children: [
       {
-        element: <Layout />,
+        path: ROUTES.login,
+        element: <Login />,
+      },
+      {
+        element: <ProtectedRoute />,
         children: [
-          { index: true, element: <Navigate to={ROUTES.users} replace /> },
-          { path: ROUTES.users, element: <UsersListPage /> },
-          { path: ROUTES.userDetail(':userId'), element: <UserDetailPage /> },
+          {
+            element: <Layout />,
+            children: [
+              { index: true, element: <Navigate to={ROUTES.users} replace /> },
+              { path: ROUTES.users, element: <UsersList /> },
+              { path: ROUTES.userDetail(':userId'), element: <UserDetail /> },
+            ],
+          },
         ],
       },
+      {
+        path: '*',
+        element: <NotFound />,
+      },
     ],
   },
-  {
-    path: '*',
-    element: <Navigate to={ROUTES.users} replace />,
-  },
 ]);

apps/admin/vercel.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
+}