♻️ [refactor] : 회원 수정 api 연결

Author: Minkyu0424

src/api/admin.ts

@@ -1,4 +1,4 @@
-import type { NewLabelTypes, UserRegistrationApiProps } from '@/types/admin'
+import type { NewLabelTypes, UserRegistrationApiProps, UserUpdateValue } from '@/types/admin'
 import type { LabelDataTypes } from '@/types/common'
 import { axiosInstance, formDataAxiosInstance } from '@/utils/axios'
 
@@ -39,3 +39,13 @@ export const addMemberAdminByCsv = async (formdata: FormData) => {
   const response = await formDataAxiosInstance.post('/api/managements/members/upload', formdata)
   return response.data
 }
+
+export const getMemberDetailAdmin = async (id: string) => {
+  const response = await axiosInstance.get(`api/managements/members/${id}/details`)
+  return response.data
+}
+
+export const updateMemberAdmin = async (id: string, data: UserUpdateValue) => {
+  const response = await axiosInstance.post(`api/managements/members/${id}`, data)
+  return response.data
+}

src/components/member-management/MemberManagementListCard.vue

@@ -10,7 +10,7 @@
       :is-status="tab.isStatus" />
     <div class="w-[180px] flex gap-2 justify-center items-center shrink-0">
       <button
-        @click="router.push(`/user-update`)"
+        @click="router.push(`/user-update?id=${info.memberId}`)"
         class="button-medium-primary">
         수정
       </button>
@@ -57,15 +57,15 @@
 </template>
 
 <script setup lang="ts">
-import type { ListCardProps, Role } from '@/types/common'
-import ListCardTab from '../lists/ListCardTab.vue'
 import type { MemberManagementListData } from '@/types/admin'
-import { useRouter } from 'vue-router'
-import ModalView from '../ModalView.vue'
-import { ref } from 'vue'
+import type { ListCardProps, Role } from '@/types/common'
 import { axiosInstance } from '@/utils/axios'
-import { useQueryClient } from '@tanstack/vue-query'
 import { formatDate } from '@/utils/date'
+import { useQueryClient } from '@tanstack/vue-query'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import ListCardTab from '../lists/ListCardTab.vue'
+import ModalView from '../ModalView.vue'
 
 const roleContent = (role: Role) => {
   return role === 'ROLE_USER' ? '사용자' : role === 'ROLE_MANAGER' ? '담당자' : '관리자'

src/components/request-task/RequestTaskInput.vue

@@ -13,7 +13,8 @@
       :value="modelValue"
       :disabled="isEdit"
       @input="updateValue(($event.target as HTMLInputElement).value)"
-      :placeholder="placeholderText" />
+      :placeholder="placeholderText"
+      :class="{ 'text-gray-500': isEdit, 'text-black': !isEdit }" />
     <p
       v-if="isInvalidateState === 'input'"
       class="text-red-1 text-xs absolute top-[calc(100%+4px)]">

src/components/user-manage/UserUpdate.vue

@@ -15,10 +15,19 @@
       :placeholderText="'회원의 아이디를 입력해주세요'"
       :isEdit="true"
       :labelName="'아이디'" />
-    <RequestTaskInput
-      v-model="userRegistrationForm.email"
-      :placeholderText="'회원의 이메일을 입력해주세요'"
-      :labelName="'이메일'" />
+    <div class="flex w-full gap-2">
+      <RequestTaskInput
+        v-model="userRegistrationForm.nickname"
+        :is-edit="true"
+        :placeholderText="'이메일은 아이디와 동일합니다'"
+        :labelName="'이메일'" />
+      <RequestTaskInput
+        v-model="userRegistrationForm.email"
+        :placeholderText="'@kakao.com'"
+        :label-name="'도메인'"
+        :is-edit="true"
+        :is-not-required="false" />
+    </div>
     <RequestTaskDropdown
       v-model="userRegistrationForm.role"
       :options="RoleKeys"
@@ -44,9 +53,16 @@
 </template>
 
 <script lang="ts" setup>
-import { INITIAL_USER_REGISTRATION, RoleKeys } from '@/constants/admin'
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { getMemberDetailAdmin, updateMemberAdmin } from '@/api/admin'
+import {
+  INITIAL_USER_REGISTRATION,
+  RoleKeys,
+  RoleMapping,
+  RoleTypeMapping
+} from '@/constants/admin'
+import type { UserRegistrationProps } from '@/types/admin'
+import { onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
 import FormCheckbox from '../common/FormCheckbox.vue'
 import ModalView from '../ModalView.vue'
@@ -57,15 +73,52 @@ import DepartmentDropDown from './DepartmentDropDown.vue'
 const isModalVisible = ref(false)
 const userRegistrationForm = ref(INITIAL_USER_REGISTRATION)
 
+const route = useRoute()
 const router = useRouter()
+const userId = ref(route.query.id)
+const userData = ref<UserRegistrationProps | null>(null)
+console.log(userId.value, '유저 아이디')
+
+watch(
+  () => router.currentRoute.value.query.id,
+  newId => {
+    userId.value = newId
+  }
+)
+onMounted(async () => {
+  if (typeof userId.value === 'string') {
+    userData.value = await getMemberDetailAdmin(userId.value)
+  }
+  if (userData.value) {
+    if (userData.value.role in RoleMapping) {
+      userRegistrationForm.value = {
+        ...userData.value,
+        role: RoleMapping[userData.value.role as keyof typeof RoleMapping]
+      }
+    }
+  }
+})
+
 const handleCancel = () => {
   userRegistrationForm.value = { ...INITIAL_USER_REGISTRATION }
   isModalVisible.value = false
   router.back()
 }
 
-const handleSubmit = () => {
-  console.log(userRegistrationForm.value)
+const handleSubmit = async () => {
+  if (typeof userId.value === 'string') {
+    const userData = {
+      role: RoleTypeMapping[userRegistrationForm.value.role],
+      email: null,
+      name: userRegistrationForm.value.name,
+      isReviewer: userRegistrationForm.value.isReviewer,
+      departmentId: userRegistrationForm.value.departmentId,
+      departmentRole: userRegistrationForm.value.departmentRole
+    }
+    console.log(userData, '수정할 데이터')
+    console.log(userId.value, '수정할 아이디')
+    await updateMemberAdmin(userId.value, userData)
+  }
   isModalVisible.value = true
 }
 </script>

src/constants/admin.ts

@@ -63,4 +63,10 @@ export const RoleTypeMapping: { [key in RoleTypes]: RoleTypesEnum } = {
   관리자: 'ROLE_ADMIN'
 }
 
+export const RoleMapping: { [key in RoleTypesEnum]: RoleTypes } = {
+  ROLE_USER: '사용자',
+  ROLE_MANAGER: '담당자',
+  ROLE_ADMIN: '관리자'
+}
+
 export const RoleKeys: RoleTypes[] = Object.keys(RoleTypeMapping) as RoleTypes[]

src/types/admin.ts

@@ -42,6 +42,11 @@ export interface UserRegistrationProps {
   departmentRole: string
 }
 
+export interface UserInfoForAdmin extends UserRegistrationProps {
+  profileImageUrl: string
+  departmentName: string
+}
+
 export type RoleTypes = '관리자' | '사용자' | '담당자'
 
 export type RoleTypesEnum = 'ROLE_ADMIN' | 'ROLE_USER' | 'ROLE_MANAGER'
@@ -110,3 +115,12 @@ export interface UserRegistrationApiProps {
   role: RoleTypesEnum
   departmentRole: string
 }
+
+export interface UserUpdateValue {
+  name: string
+  email: null
+  isReviewer: boolean
+  departmentId: number
+  role: RoleTypesEnum
+  departmentRole: string
+}