feat: change Type, add hook comments

IT-Cotato · Feb 12, 2025 · 7661fd5 · 7661fd5
1 parent af15018
commit 7661fd5
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 40 deletions.
diff --git a/src/pages/MyPage/hooks/useActiveMemberManagement.ts b/src/pages/MyPage/hooks/useActiveMemberManagement.ts
@@ -1,17 +1,17 @@
 import api from '@/api/api';
-import {
-  CotatoMemberEnrollInfoResponse,
-  CotatoMemberEnrollInfoResponseRoleEnum,
-} from 'cotato-openapi-clients';
+import { CotatoMemberInfoResponse, CotatoMemberInfoResponseRoleEnum } from 'cotato-openapi-clients';
 import { useEffect, useState } from 'react';
 
 //
 //
 //
 
 export const useActiveMemberManagement = () => {
-  const [activeMembers, setActiveMembers] = useState<CotatoMemberEnrollInfoResponse[]>([]);
+  const [activeMembers, setActiveMembers] = useState<CotatoMemberInfoResponse[]>([]);
 
+  /**
+   * activeMembers Init
+   */
   useEffect(() => {
     const fetchActiveMembers = async () => {
       try {
@@ -25,14 +25,25 @@ export const useActiveMemberManagement = () => {
     fetchActiveMembers();
   }, []);
 
-  const updateMemberRole = (memberId: number, newRole: CotatoMemberEnrollInfoResponseRoleEnum) => {
+  /**
+   * memberId 의 role 변경
+   * @param memberId number
+   * @param newRole CotatoMemberInfoResponseRoleEnum
+   */
+  const updateMemberRole = (memberId: number, newRole: CotatoMemberInfoResponseRoleEnum) => {
     try {
       api.patch(`/v1/api/member/${memberId}/role`, { memberId: memberId, role: newRole });
     } catch (error) {
+      const apiError = error as { message: string };
+      alert(apiError.message || '권한 변경에 실패했습니다.');
       console.error('Failed to patch member role:', error);
     }
   };
 
+  /**
+   * memberIds 배열을 모두 OM으로 변경
+   * @param memberIds number[]
+   */
   const transferMemberIdsToOM = (memberIds: number[]) => {
     try {
       api.patch('/v1/api/admin/status', { memberIds: memberIds });

diff --git a/src/pages/MyPage/hooks/useOMManagement.ts b/src/pages/MyPage/hooks/useOMManagement.ts
@@ -1,14 +1,17 @@
 import api from '@/api/api';
-import { CotatoMemberEnrollInfoResponse } from 'cotato-openapi-clients';
+import { CotatoMemberInfoResponse } from 'cotato-openapi-clients';
 import { useEffect, useState } from 'react';
 
 //
 //
 //
 
 export const useOMManagement = () => {
-  const [OMMembers, setOMMembers] = useState<CotatoMemberEnrollInfoResponse[]>([]);
+  const [OMMembers, setOMMembers] = useState<CotatoMemberInfoResponse[]>([]);
 
+  /**
+   * OMMembers Init
+   */
   useEffect(() => {
     const fetchOMMembers = async () => {
       try {
@@ -22,6 +25,10 @@ export const useOMManagement = () => {
     fetchOMMembers();
   }, []);
 
+  /**
+   * memberId를 활동 멤버로 변경
+   * @param memberId number
+   */
   const transferMemberIdToActive = (memberId: number) => {
     try {
       api.patch(`/v1/api/member/${memberId}/status`);

diff --git a/src/pages/MyPage/member-management/MypageMemberManagementContent.tsx b/src/pages/MyPage/member-management/MypageMemberManagementContent.tsx
@@ -67,7 +67,12 @@ const MypageMemberManagementContent = () => {
   return (
     <Stack gap="1.5rem">
       {renderHeader()}
-      {currentView === 'MEMBER' && <MypageMemberManagementContentMemberInfo data={activeMembers} />}
+      {currentView === 'MEMBER' && (
+        <MypageMemberManagementContentMemberInfo
+          data={activeMembers}
+          updateMemberRole={updateMemberRole}
+        />
+      )}
       {currentView === 'OM' && <MypageMemberManagementContentOMInfo data={OMMembers} />}
     </Stack>
   );

diff --git a/src/pages/MyPage/member-management/MypageMemberManagementContentMemberInfo.tsx b/src/pages/MyPage/member-management/MypageMemberManagementContentMemberInfo.tsx
@@ -1,21 +1,18 @@
 import React, { useState } from 'react';
-import { Checkbox, MenuItem, Select, Stack } from '@mui/material';
+import { Checkbox, MenuItem, Select, SelectChangeEvent, Stack } from '@mui/material';
 import TableLayout from '@components/Table/TableLayout';
 import TableRenderer from '@components/Table/TableRenderer';
 import { useBreakpoints } from '@/hooks/useBreakpoints';
-import { MemberRole } from '@/enums';
 import { useTheme } from 'styled-components';
-import {
-  CotatoMemberEnrollInfoResponse,
-  CotatoMemberEnrollInfoResponseRoleEnum,
-} from 'cotato-openapi-clients';
+import { CotatoMemberInfoResponse, CotatoMemberInfoResponseRoleEnum } from 'cotato-openapi-clients';
 
 //
 //
 //
 
 interface MypageMemberManagementContentMemberInfoProps {
-  data: CotatoMemberEnrollInfoResponse[];
+  data: CotatoMemberInfoResponse[];
+  updateMemberRole: (memberId: number, newRole: CotatoMemberInfoResponseRoleEnum) => void;
 }
 
 //
@@ -24,27 +21,13 @@ interface MypageMemberManagementContentMemberInfoProps {
 
 const TableCell = TableLayout.TableCell;
 
-const getRoleEnum = (role: CotatoMemberEnrollInfoResponseRoleEnum | undefined): MemberRole => {
-  switch (role) {
-    case 'MANAGER':
-      return MemberRole.MANAGER;
-    case 'ADMIN':
-      return MemberRole.ADMIN;
-    case 'DEV':
-      return MemberRole.DEV;
-    case 'MEMBER':
-      return MemberRole.MEMBER;
-    default:
-      return MemberRole.NOTHING;
-  }
-};
-
 //
 //
 //
 
 const MypageMemberManagementContentMemberInfo = ({
   data,
+  updateMemberRole,
 }: MypageMemberManagementContentMemberInfoProps) => {
   const { isLandScapeOrSmaller } = useBreakpoints();
   const [memberIds, setMemberIds] = useState<number[]>([]);
@@ -72,12 +55,12 @@ const MypageMemberManagementContentMemberInfo = ({
                   }}
                 >
                   <Checkbox />
-                  <span style={{ padding: '1rem 0.75rem' }}>{item?.name}</span>
+                  <span style={{ padding: '1rem 0.75rem' }}>{item.name}</span>
                 </div>
               </TableCell>
               <TableCell>
                 <Select
-                  defaultValue={getRoleEnum(item?.role)}
+                  defaultValue={item.role}
                   size="small"
                   sx={{
                     fontFamily: 'YComputer',
@@ -89,12 +72,17 @@ const MypageMemberManagementContentMemberInfo = ({
                     disableScrollLock: true,
                   }}
                   fullWidth
-                  onChange={() => {}}
+                  onChange={(e: SelectChangeEvent) => {
+                    updateMemberRole(
+                      item.memberId,
+                      e.target.value as CotatoMemberInfoResponseRoleEnum,
+                    );
+                  }}
                 >
-                  <MenuItem value={MemberRole.DEV}>개발팀</MenuItem>
-                  <MenuItem value={MemberRole.ADMIN}>관리자</MenuItem>
-                  <MenuItem value={MemberRole.MANAGER}>부관리자</MenuItem>
-                  <MenuItem value={MemberRole.MEMBER}>멤버</MenuItem>
+                  <MenuItem value={CotatoMemberInfoResponseRoleEnum.Dev}>개발팀</MenuItem>
+                  <MenuItem value={CotatoMemberInfoResponseRoleEnum.Admin}>관리자</MenuItem>
+                  <MenuItem value={CotatoMemberInfoResponseRoleEnum.Manager}>부관리자</MenuItem>
+                  <MenuItem value={CotatoMemberInfoResponseRoleEnum.Member}>멤버</MenuItem>
                 </Select>
               </TableCell>
             </>

diff --git a/src/pages/MyPage/member-management/MypageMemberManagementContentOMInfo.tsx b/src/pages/MyPage/member-management/MypageMemberManagementContentOMInfo.tsx
@@ -4,14 +4,14 @@ import TableLayout from '@components/Table/TableLayout';
 import TableRenderer from '@components/Table/TableRenderer';
 import { useBreakpoints } from '@/hooks/useBreakpoints';
 import { useTheme } from 'styled-components';
-import { CotatoMemberEnrollInfoResponse } from 'cotato-openapi-clients';
+import { CotatoMemberInfoResponse } from 'cotato-openapi-clients';
 
 //
 //
 //
 
 interface MypageMemberManagementContentOMInfoProps {
-  data: CotatoMemberEnrollInfoResponse[];
+  data: CotatoMemberInfoResponse[];
 }
 
 //