feat:#345 confirm창 로직 훅함수로 분리

src/api/patchUserManagement.tsx → src/api/admin/member/patchUserManagement.tsx

@@ -13,7 +13,6 @@ const resetPwdApi = async (userId: number | number[]) => {
   try {
     const queryParam = userIds.map((id) => `userId=${id}`).join('&');
     const url = `${BASE_URL}${PATH}/reset?${queryParam}`;
-    console.log(`API 요청 URL: ${url}`);
     const response = await axios.patch(
       url,
       {},

src/components/Admin/ButtonGroup.tsx

@@ -21,7 +21,6 @@ const ButtonGroupContainer = styled.div<{ hasEndGap?: boolean }>`
   overflow-x: auto;
   white-space: nowrap;
   padding-left: 10px;
-  max-width: 100%;
   &::-webkit-scrollbar {
     height: 3px;
   }
@@ -72,7 +71,7 @@ const ButtonGroup: React.FC<ButtonGroupProps & { hasEndGap?: boolean }> = ({
           color="#fff"
           textcolor="#000"
           width="auto"
-          height="40px"
+          height="45px"
           borderRadius="4px"
           onClick={onClick}
           disabled={disabled}

src/components/Admin/Modal/MemberDetailModal.tsx

@@ -37,20 +37,17 @@ const ModalContent = styled.div`
   background-color: white;
   border-radius: 4px;
   width: 100%;
-  /* max-width: 600px; */
   box-shadow: 0px 3px 8px 0px rgba(133, 141, 138, 0.2);
   display: flex;
   flex-direction: column;
   gap: 20px;
   padding: 10px;
   flex: 1.5;
-  /* margin-top: 20%; */
 `;
 
 const ActivityContent = styled(ModalContent)`
   flex: 1;
   margin-bottom: 6%;
-  /* max-width: 400px; */
 `;
 
 const FlexWrapper = styled.div`

src/components/Admin/SelectedTopBar.tsx

@@ -71,7 +71,7 @@ const SelectedTopBar: React.FC = () => {
     {
       label: '비밀번호 초기화',
       onClick: () =>
-        alert(
+        window.confirm(
           `${selectedMembers.length}명의 멤버 비밀번호를 초기화하시겠습니까?`,
         ),
       disabled: false,

src/components/Admin/context/MemberContext.tsx

@@ -66,7 +66,8 @@ export const MemberProvider: React.FC<{ children: React.ReactNode }> = ({
         console.log('API응답: ', response.data);
         const mappedMembers = fetchedMembers.map((user: any) => ({
           ...user,
-          cardinals: user.cardinals.length > 0 ? user.cardinals.join('.') : '',
+          cardinals:
+            user.cardinals.length > 0 ? user.cardinals.reverse().join('.') : '',
           status: statusMapping[user.status] || '추방',
           createdAt: new Date(user.createdAt)
             .toISOString()

src/hooks/useAdminActions.ts

@@ -0,0 +1,52 @@
+import resetPwdApi from '@/api/admin/member/patchUserManagement';
+
+type ActionType =
+  | '가입 승인'
+  | '관리자로 변경'
+  | '사용자로 변경'
+  | '비밀번호 초기화'
+  | '유저 추방';
+
+const getConfirmMessage = (action: ActionType, count: number) => {
+  switch (action) {
+    case '가입 승인':
+      return `${count}명의 멤버 가입을 승인하시겠습니까?`;
+    case '관리자로 변경':
+      return `${count}명의 멤버를 관리자로 변경하시겠습니까?`;
+    case '사용자로 변경':
+      return `${count}명의 멤버를 사용자로 변경하시겠습니까?`;
+    case '비밀번호 초기화':
+      return `${count}명의 멤버 비밀번호를 초기화하시겠습니까?`;
+    case '유저 추방':
+      return `${count}명의 멤버를 추방하시겠습니까?`;
+    default:
+      return `${count}명의 멤버에 대해 ${action}을 진행하시겠습니까?`;
+  }
+};
+
+const useAdminActions = () => {
+  const handleAction = async (action: ActionType, targetIds: number[]) => {
+    const count = targetIds.length;
+    const confirmMessage = getConfirmMessage(action, count);
+
+    if (!window.confirm(confirmMessage)) return;
+
+    try {
+      console.log(`${action} API 요청 시작...`, targetIds);
+
+      if (action === '비밀번호 초기화') {
+        const response = await resetPwdApi(targetIds);
+        console.log('비밀번호 초기화 API 응답:', response);
+        alert('비밀번호 초기화가 완료되었습니다.');
+      }
+
+      // 다른 API 요청 로직 추가 가능
+    } catch (error: any) {
+      console.error('오류 발생:', error.message);
+    }
+  };
+
+  return { handleAction };
+};
+
+export default useAdminActions;