pythonkr · MU-Software · Jun 8, 2025 · Jun 8, 2025
diff --git a/apps/pyconkr-admin/src/components/pages/account/account.tsx b/apps/pyconkr-admin/src/components/pages/account/account.tsx
@@ -10,6 +10,6 @@ export const AccountRedirectPage: React.FC = ErrorBoundary.with(
     const backendAdminAPIClient = Common.Hooks.BackendAdminAPI.useBackendAdminClient();
     const { data } = Common.Hooks.BackendAdminAPI.useSignedInUserQuery(backendAdminAPIClient);
 
-    return data ? <Navigate to="/account/sign-out" replace /> : <Navigate to="/account/sign-in" replace />;
+    return data ? <Navigate to="/account/manage" replace /> : <Navigate to="/account/sign-in" replace />;
   })
 );
diff --git a/apps/pyconkr-admin/src/components/pages/account/manage.tsx b/apps/pyconkr-admin/src/components/pages/account/manage.tsx
@@ -0,0 +1,143 @@
+import * as Common from "@frontend/common";
+import { Logout } from "@mui/icons-material";
+import { Button, Stack, Tab, Tabs, TextField, Typography } from "@mui/material";
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+
+import { addErrorSnackbar, addSnackbar } from "../../../utils/snackbar";
+
+type ChangePasswordFormType = {
+  old_password: string;
+  new_password: string;
+  new_password_confirm: string;
+};
+
+export const AccountManagementPage: React.FC = () => {
+  const changePasswordFormRef = React.useRef<HTMLFormElement>(null);
+  const [pageState, setPageState] = React.useState<{ tab: number }>({ tab: 0 });
+  const navigate = useNavigate();
+  const backendAdminAPIClient = Common.Hooks.BackendAdminAPI.useBackendAdminClient();
+  const signOutMutation = Common.Hooks.BackendAdminAPI.useSignOutMutation(backendAdminAPIClient);
+  const changePasswordMutation = Common.Hooks.BackendAdminAPI.useChangePasswordMutation(backendAdminAPIClient);
+
+  const setTab = (_: React.SyntheticEvent, tab: number) => setPageState((ps) => ({ ...ps, tab }));
+
+  const handleSignOut = () => {
+    signOutMutation.mutate(undefined, {
+      onSuccess: () => {
+        addSnackbar("로그아웃 되었습니다.", "success");
+        navigate("/");
+      },
+      onError: addErrorSnackbar,
+    });
+  };
+
+  const handleChangePassword = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const form = changePasswordFormRef.current;
+    if (!Common.Utils.isFormValid(form)) {
+      addSnackbar("폼에 오류가 있습니다. 다시 확인해주세요.", "error");
+      return;
+    }
+
+    const formData = Common.Utils.getFormValue<ChangePasswordFormType>({ form });
+    if (formData.new_password !== formData.new_password_confirm) {
+      addSnackbar("새 비밀번호와 확인 비밀번호가 일치하지 않습니다.", "error");
+      return;
+    }
+
+    changePasswordMutation.mutate(formData, {
+      onSuccess: () => {
+        addSnackbar("비밀번호가 변경되었습니다.", "success");
+        navigate("/");
+      },
+      onError: addErrorSnackbar,
+    });
+  };
+
+  React.useEffect(() => {
+    (async () => {
+      const userInfo = await Common.BackendAdminAPIs.me(backendAdminAPIClient)();
+      if (!userInfo) {
+        addSnackbar("로그아웃 상태입니다!", "error");
+        navigate("/");
+      }
+    })();
+  }, [backendAdminAPIClient, navigate]);
+
+  const disabled = signOutMutation.isPending || changePasswordMutation.isPending;
+
+  return (
+    <Stack
+      sx={{
+        width: "100%",
+        height: "100%",
+        minHeight: "100%",
+        maxHeight: "100%",
+        flexGrow: 1,
+      }}
+      justifyContent="center"
+      alignItems="center"
+      spacing={2}
+    >
+      <Tabs value={pageState.tab} >
+        <Tab wrapped label="비밀번호 변경" />
+        <Tab wrapped label="로그아웃" />
+      </Tabs>
+
+      {pageState.tab === 0 && (
+        <Stack sx={{ width: "100%", maxWidth: "600px", textAlign: "center" }}>
+          <Typography variant="h5">비밀번호 변경</Typography>
+          <br />
+          <form ref={changePasswordFormRef} >
+            <Stack spacing={2}>
+              <TextField
+                disabled={disabled}
+                name="old_password"
+                type="password"
+                label="현재 비밀번호"
+                required
+                fullWidth
+              />
+              <TextField
+                disabled={disabled}
+                name="new_password"
+                type="password"
+                label="새 비밀번호"
+                required
+                fullWidth
+              />
+              <TextField
+                disabled={disabled}
+                name="new_password_confirm"
+                type="password"
+                label="새 비밀번호 확인"
+                required
+                fullWidth
+              />
+              <Button type="submit" variant="contained" disabled={disabled} fullWidth>
+                비밀번호 변경
+              </Button>
+            </Stack>
+          </form>
+        </Stack>
+      )}
+      {pageState.tab === 1 && (
+        <>
+          <Typography variant="h5">정말 로그아웃하시겠습니까?</Typography>
+          <br />
+          <Button
+            variant="contained"
+            >
+            disabled={signOutMutation.isPending}
+            startIcon={<Logout />}
+          >
+            로그아웃
+          </Button>
+        </>
+      )}
+    </Stack>
+  );
+};
diff --git a/apps/pyconkr-admin/src/components/pages/account/sign_out.tsx b/apps/pyconkr-admin/src/components/pages/account/sign_out.tsx
diff --git a/apps/pyconkr-admin/src/routes.tsx b/apps/pyconkr-admin/src/routes.tsx
@@ -4,8 +4,8 @@ import { AdminEditorCreateRoutePage, AdminEditorModifyRoutePage } from "./compon
 import { AdminList } from "./components/layouts/admin_list";
 import { RouteDef } from "./components/layouts/global";
 import { AccountRedirectPage } from "./components/pages/account/account";
+import { AccountManagementPage } from "./components/pages/account/manage";
 import { SignInPage } from "./components/pages/account/sign_in";
-import { SignOutPage } from "./components/pages/account/sign_out";
 import { PublicFileUploadPage } from "./components/pages/file/upload";
 import { AdminCMSPageEditor } from "./components/pages/page/editor";
 
@@ -50,7 +50,7 @@ export const RouteDefinitions: RouteDef[] = [
     icon: AccountCircle,
     title: "로그인 / 로그아웃",
     app: "user",
-    resource: "userext",
+    resource: "account",
     route: "/account",
     placeOnBottom: true,
   },
@@ -80,5 +80,5 @@ export const RegisteredRoutes = {
   "/file/publicfile/:id": <AdminEditorModifyRoutePage app="file" resource="publicfile" notModifiable notDeletable />,
   "/account": <AccountRedirectPage />,
   "/account/sign-in": <SignInPage />,
-  "/account/sign-out": <SignOutPage />,
+  "/account/manage": <AccountManagementPage />,
 };
diff --git a/packages/common/src/apis/admin_api.ts b/packages/common/src/apis/admin_api.ts
@@ -19,6 +19,12 @@ namespace BackendAdminAPIs {
 
   export const signOut = (client: BackendAPIClient) => () => client.delete<void>("v1/admin-api/user/userext/signout/");
 
+  export const changePassword = (client: BackendAPIClient) => (data: BackendAdminAPISchemas.UserChangePasswordSchema) =>
+    client.post<void, BackendAdminAPISchemas.UserChangePasswordSchema>("v1/admin-api/user/userext/password/", data);
+
+  export const resetUserPassword = (client: BackendAPIClient, id: string) => () =>
+    client.delete<void, void>(`v1/admin-api/user/userext/${id}/password/`);
+
   export const list =
     <T>(client: BackendAPIClient, app: string, resource: string) =>
     () =>

diff --git a/packages/common/src/hooks/useAdminAPI.ts b/packages/common/src/hooks/useAdminAPI.ts
@@ -13,6 +13,9 @@ const QUERY_KEYS = {
 
 const MUTATION_KEYS = {
   ADMIN_SIGN_IN: ["mutation", "admin", "sign-in"],
+  ADMIN_SIGN_OUT: ["mutation", "admin", "sign-out"],
+  ADMIN_CHANGE_PASSWORD: ["mutation", "admin", "change-password"],
+  ADMIN_RESET_PASSWORD: ["mutation", "admin", "reset-password"],
   ADMIN_CREATE: ["mutation", "admin", "create"],
   ADMIN_UPDATE: ["mutation", "admin", "update"],
   ADMIN_REMOVE: ["mutation", "admin", "remove"],
@@ -38,10 +41,22 @@ namespace BackendAdminAPIHooks {
 
   export const useSignOutMutation = (client: BackendAPIClient) =>
     useMutation({
-      mutationKey: [...MUTATION_KEYS.ADMIN_SIGN_IN, "sign-out"],
+      mutationKey: [...MUTATION_KEYS.ADMIN_SIGN_OUT],
       mutationFn: BackendAdminAPIs.signOut(client),
     });
 
+  export const useChangePasswordMutation = (client: BackendAPIClient) =>
+    useMutation({
+      mutationKey: [...MUTATION_KEYS.ADMIN_CHANGE_PASSWORD],
+      mutationFn: BackendAdminAPIs.changePassword(client),
+    });
+
+  export const useResetUserPasswordMutation = (client: BackendAPIClient, id: string) =>
+    useMutation({
+      mutationKey: [...MUTATION_KEYS.ADMIN_RESET_PASSWORD, id],
+      mutationFn: BackendAdminAPIs.resetUserPassword(client, id),
+    });
+
   export const useSchemaQuery = (client: BackendAPIClient, app: string, resource: string) =>
     useSuspenseQuery({
       queryKey: [...QUERY_KEYS.ADMIN_SCHEMA, app, resource],

diff --git a/packages/common/src/schemas/backendAdminAPI.ts b/packages/common/src/schemas/backendAdminAPI.ts
@@ -34,6 +34,12 @@ namespace BackendAdminAPISchemas {
     password: string;
   };
 
+  export type UserChangePasswordSchema = {
+    old_password: string;
+    new_password: string;
+    new_password_confirm: string;
+  };
+
   export type PublicFileSchema = {
     id: string; // UUID
     file: string; // URL to the public file