fix: 유저 권한 변경 API 추가

Author: pepperdad

apps/ticket-admin/src/app/users/_clientBoundary/ChangeRoleModal/index.tsx

@@ -1,14 +1,34 @@
 import { useState } from "react";
 
 import { Button, Dialog, Flex } from "@permit/design-system";
+import { usePutUserRoleMutation } from "@/data/admin/putUserRole/mutation";
 import { ModalComponentProps } from "@/shared/hooks/useModal/types";
+import { isAxiosErrorResponse } from "@/shared/types/axioxError";
 
-type Props = {} & ModalComponentProps<{ result: boolean }>;
+type Props = { userId: number } & ModalComponentProps<{ result: boolean }>;
 
-// TODO: 수정
-export const ChangeRoleModal = ({ isOpen, close }: Props) => {
+export const ChangeRoleModal = ({ userId, isOpen, close }: Props) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  const { mutateAsync } = usePutUserRoleMutation({ userId });
+
+  const changeUserRole = async (role: "ADMIN" | "STAFF" | "USER") => {
+    setIsSubmitting(true);
+
+    try {
+      await mutateAsync({ role });
+      alert(`${role}으로 권한 변경에 성공하였습니다.`);
+    } catch (error) {
+      if (isAxiosErrorResponse(error)) {
+        alert(error.response?.data.message || "Failed to change user role.");
+
+        return;
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   const handleClose = () => {
     if (!isSubmitting) {
       close();
@@ -22,26 +42,23 @@ export const ChangeRoleModal = ({ isOpen, close }: Props) => {
           <Button
             variant="primary"
             size="md"
-            onClick={() => {}}
-            isLoading={isSubmitting}
+            onClick={() => changeUserRole("ADMIN")}
             disabled={isSubmitting}
           >
             ADMIN
           </Button>
           <Button
             variant="primary"
             size="md"
-            onClick={() => {}}
-            isLoading={isSubmitting}
+            onClick={() => changeUserRole("STAFF")}
             disabled={isSubmitting}
           >
             STAFF
           </Button>
           <Button
             variant="primary"
             size="md"
-            onClick={() => {}}
-            isLoading={isSubmitting}
+            onClick={() => changeUserRole("USER")}
             disabled={isSubmitting}
           >
             USER

apps/ticket-admin/src/app/users/_clientBoundary/UserManagementClient/index.tsx

@@ -1,20 +1,54 @@
 "use client";
 
+import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
 import classNames from "classnames/bind";
 
 import { Button, Flex, TextField, Typography } from "@permit/design-system";
+import { useTextField } from "@permit/design-system/hooks";
+import { userOptions } from "@/data/admin/getUser/queries";
+import { UserResponse } from "@/data/admin/getUser/types";
 import { useModal } from "@/shared/hooks/useModal";
+import { isAxiosErrorResponse } from "@/shared/types/axioxError";
 
 import { ChangeRoleModal } from "../ChangeRoleModal";
 import styles from "./index.module.scss";
 
 const cx = classNames.bind(styles);
 
 export const UserManagementClient = () => {
-  const { show } = useModal(ChangeRoleModal);
+  const qc = useQueryClient();
+  const { show: changeUserRoleModal } = useModal(ChangeRoleModal);
 
-  const searchUser = () => {
-    alert("hi");
+  const [userInfo, setUserInfo] = useState<UserResponse | null>(null);
+
+  const userEmail = useTextField({
+    initialValue: "",
+    validate: (value: string) => {
+      if (!value.trim()) return "유저 이메일을 입력해주세요.";
+
+      return undefined;
+    },
+  });
+
+  const searchUser = async () => {
+    const userEmailValid = userEmail.validateValue();
+
+    if (!userEmailValid) {
+      return;
+    }
+
+    try {
+      const userInfoData = await qc.fetchQuery(userOptions({ email: userEmail.value }));
+
+      setUserInfo(userInfoData);
+    } catch (error) {
+      if (isAxiosErrorResponse(error)) {
+        setUserInfo(null);
+
+        alert(error.response?.data.message || "유저를 찾을 수 없습니다.");
+      }
+    }
   };
 
   return (
@@ -27,23 +61,34 @@ export const UserManagementClient = () => {
       </header>
       <main>
         <Flex gap={20}>
-          <TextField className={cx("input")} placeholder="이메일을 입력해주세요" />
+          <TextField
+            className={cx("input")}
+            placeholder="이메일을 입력해주세요"
+            value={userEmail.value}
+            onChange={userEmail.handleChange}
+            error={userEmail.error}
+          />
           <Button variant="cta" onClick={searchUser}>
             Search
           </Button>
         </Flex>
 
-        <div className={cx("serach_area")}>
-          <Flex justify="space-between">
-            <Flex direction="column">
-              <Typography type="title20">userName: hi</Typography>
-              <Typography type="title20">current Role: USER</Typography>
+        {userInfo && (
+          <div className={cx("serach_area")}>
+            <Flex justify="space-between">
+              <Flex direction="column">
+                <Typography type="title20">userName: {userInfo.userName}</Typography>
+                <Typography type="title20">current Role: {userInfo.currentUserRole}</Typography>
+              </Flex>
+              <Button
+                variant="primary"
+                onClick={() => changeUserRoleModal({ userId: userInfo.userId })}
+              >
+                Change Role
+              </Button>
             </Flex>
-            <Button variant="primary" onClick={show}>
-              Change Role
-            </Button>
-          </Flex>
-        </div>
+          </div>
+        )}
       </main>
     </div>
   );

apps/ticket-admin/src/data/admin/getUser/queries.ts

@@ -0,0 +1,54 @@
+import { useQuery } from "@tanstack/react-query";
+import queryString from "query-string";
+
+import { API_URL } from "@/data/constants";
+import { instance } from "@/lib/axios";
+import { useSuspenseQuery } from "@/shared/hooks/useSuspenseQuery";
+import {
+  OptionsObject,
+  PermitQueryOptions,
+  UsePermitQueryOptions,
+  UsePermitSuspenseQueryOptions,
+} from "@/shared/types/queryOptions";
+
+import { ADMIN_QUERY_KEYS } from "../queryKeys";
+import { UserParams, UserResponse } from "./types";
+
+/** 유저 권한 정보 조회 API */
+export const userOptions = (params: UserParams): PermitQueryOptions<UserResponse> => {
+  return {
+    queryKey: [ADMIN_QUERY_KEYS.USER, params.email],
+    queryFn: () => {
+      const url = queryString.stringifyUrl({
+        url: API_URL.ADMIN.USER,
+        query: {
+          email: params.email,
+        },
+      });
+
+      return instance.get<UserResponse>(url).then((res) => res.data);
+    },
+  };
+};
+
+/** 유저 권한 정보 조회 Query */
+export const useUserQuery = ({
+  email,
+  options,
+}: UserParams & OptionsObject<UsePermitQueryOptions<UserResponse>>) => {
+  return useQuery({
+    ...userOptions({ email }),
+    ...options,
+  });
+};
+
+/** 행사 티켓 라운드+타입 전체 조회 Suspense Query */
+export const useUserSuspenseQuery = ({
+  email,
+  options,
+}: UserParams & OptionsObject<UsePermitSuspenseQueryOptions<UserResponse>>) => {
+  return useSuspenseQuery({
+    ...userOptions({ email }),
+    ...options,
+  });
+};

apps/ticket-admin/src/data/admin/getUser/types.ts

@@ -0,0 +1,9 @@
+export type UserParams = {
+  email: string;
+};
+
+export type UserResponse = {
+  userId: number;
+  userName: string;
+  currentUserRole: "ADMIN" | "STAFF" | "USER";
+};

apps/ticket-admin/src/data/admin/putUserRole/mutation.ts

@@ -0,0 +1,36 @@
+import { useMutation, UseMutationOptions } from "@tanstack/react-query";
+
+import { API_URL } from "@/data/constants";
+import { instance } from "@/lib/axios";
+import { getPathUrl } from "@/shared/helpers/getPathUrl";
+
+export type PutUserRoleRequest = {
+  role: "ADMIN" | "STAFF" | "USER";
+};
+
+type PutUserRoleResponse = {
+  data: null;
+};
+
+export type PutUserRoleMutationOptions<TData> = {
+  userId: number;
+  options?: Omit<UseMutationOptions<TData, Error, PutUserRoleRequest>, "mutationFn"> & {
+    onSuccess?: (data: TData) => void;
+  };
+};
+
+export const usePutUserRoleMutation = ({
+  userId,
+  options,
+}: PutUserRoleMutationOptions<PutUserRoleResponse>) => {
+  const url = getPathUrl(API_URL.ADMIN.USER_ROLE, { userId });
+
+  return useMutation({
+    mutationFn: async (params: PutUserRoleRequest) => {
+      const { data } = await instance.put<PutUserRoleResponse>(url, params);
+
+      return data;
+    },
+    ...options,
+  });
+};

apps/ticket-admin/src/data/admin/queryKeys.ts

@@ -7,4 +7,5 @@ export const ADMIN_QUERY_KEYS = {
   TICEKTS: `${queryKeyPrefix}tickets`,
   TICEKTS_DETAIL: `${queryKeyPrefix}tickets_detail`,
   COUPONS: `${queryKeyPrefix}coupons`,
+  USER: `${queryKeyPrefix}user`,
 } as const;

apps/ticket-admin/src/data/constants.ts

@@ -39,5 +39,9 @@ export const API_URL = {
     COUPONS_MEMO: "/api/admin/coupons/memos",
     /** 쿠폰 리스트 조회 API */
     COUPONS_LIST: "/api/admin/coupons/:eventId",
+    /** 유저 권한 정보 조회 API */
+    USER: "/api/admin/users", // ?email (필수)
+    /** 유저 권한 변경 API */
+    USER_ROLE: "/api/admin/users/:userId/role",
   },
 } as const;