From a2554a049a4099a49dc6883fad3e70bdb44df0df Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Thu, 6 Feb 2025 05:19:27 +0900
Subject: [PATCH 01/11] =?UTF-8?q?:sparkles:=20[feat]=20:=20=EB=B6=80?=
 =?UTF-8?q?=EC=84=9C=EC=A0=95=EB=B3=B4=20=EA=B0=80=EC=A0=B8=EC=98=A4?=
 =?UTF-8?q?=EA=B8=B0=20API=20=EC=97=B0=EA=B2=B0,=20=EB=B6=80=EC=84=9C?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin.ts                              | 10 ++-
 .../user-manage/DepartmentDropDown.vue        | 61 +++++++++++++++++++
 .../user-manage/UserRegistration.vue          | 33 ++++++----
 3 files changed, 89 insertions(+), 15 deletions(-)
 create mode 100644 src/components/user-manage/DepartmentDropDown.vue

diff --git a/src/api/admin.ts b/src/api/admin.ts
index 86c6c982..a60a3b70 100644
--- a/src/api/admin.ts
+++ b/src/api/admin.ts
@@ -1,4 +1,4 @@
-import type { NewLabelTypes, UserRegistrationProps } from '@/types/admin'
+import type { NewLabelTypes, UserRegistrationApiProps } from '@/types/admin'
 import type { LabelDataTypes } from '@/types/common'
 import { axiosInstance } from '@/utils/axios'
 
@@ -25,8 +25,12 @@ export const deleteCategoryAdmin = async (id: number) => {
   return response.data
 }
 
-export const addMemberAdmin = async (memberData: UserRegistrationProps) => {
-  console.log(memberData, '요청 데이터')
+export const addMemberAdmin = async (memberData: UserRegistrationApiProps) => {
   const response = await axiosInstance.post('/api/managements/members', memberData)
   return response.data
 }
+
+export const getDepartmentsAdmin = async () => {
+  const response = await axiosInstance.get('/api/managements/departments')
+  return response.data
+}
diff --git a/src/components/user-manage/DepartmentDropDown.vue b/src/components/user-manage/DepartmentDropDown.vue
new file mode 100644
index 00000000..61bc38f9
--- /dev/null
+++ b/src/components/user-manage/DepartmentDropDown.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div class="flex text-xs gap-x-1 mb-2">
+      <p class="text-body font-bold">부서</p>
+      <p class="text-red-1">*</p>
+    </div>
+    <div class="relative flex">
+      <div
+        class="flex w-full h-11 items-center rounded p-4 border border-border-1 bg-white text-black cursor-pointer"
+        @click="toggleDropdown()">
+        <p>
+          {{ dePartments.find(department => department.departmentId === modelValue)?.name }}
+        </p>
+        <CommonIcons
+          :name="dropdownIcon"
+          :class="['ml-auto', { 'rotate-180': dropdownOpen }]" />
+      </div>
+      <div
+        v-if="dropdownOpen"
+        class="absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2 text-black">
+        <div
+          v-for="department in dePartments"
+          :key="department.departmentId"
+          class="w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer"
+          @click="selectOption(department)">
+          {{ department.name }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getDepartmentsAdmin } from '@/api/admin'
+import { dropdownIcon } from '@/constants/iconPath'
+import type { DepartmentType } from '@/types/admin'
+import { onMounted, ref } from 'vue'
+import CommonIcons from '../common/CommonIcons.vue'
+
+const dePartments = ref<DepartmentType[]>([])
+const dropdownOpen = ref(false)
+const emit = defineEmits(['update:modelValue'])
+const { modelValue } = defineProps<{ modelValue: number }>()
+
+const toggleDropdown = () => {
+  dropdownOpen.value = !dropdownOpen.value
+}
+
+const selectOption = (option: DepartmentType) => {
+  emit('update:modelValue', option.departmentId)
+  dropdownOpen.value = false
+}
+
+onMounted(async () => {
+  try {
+    dePartments.value = await getDepartmentsAdmin()
+  } catch (error) {
+    console.error('부서가져오기 실패:', error)
+  }
+})
+</script>
diff --git a/src/components/user-manage/UserRegistration.vue b/src/components/user-manage/UserRegistration.vue
index 865aac49..3224fa75 100644
--- a/src/components/user-manage/UserRegistration.vue
+++ b/src/components/user-manage/UserRegistration.vue
@@ -14,10 +14,18 @@
       v-model="userRegistrationForm.nickname"
       :placeholderText="'회원의 아이디를 입력해주세요'"
       :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-not-required="false" />
+    </div>
     <RequestTaskDropdown
       v-model="userRegistrationForm.role"
       :options="RoleKeys"
@@ -28,11 +36,7 @@
       :labelName="'요청 승인 권한'"
       :checkButtonName="'허용'"
       :isChecked="userRegistrationForm.isReviewer" />
-    <!-- <RequestTaskInput
-      v-model="userRegistrationForm.departmentId"
-      :placeholderText="'회원의 부서를 입력해주세요'"
-      :is-not-required="true"
-      :labelName="'부서'" /> -->
+    <DepartmentDropDown v-model="userRegistrationForm.departmentId" />
     <RequestTaskInput
       v-model="userRegistrationForm.departmentRole"
       :placeholderText="'회원의 직무를 입력해주세요'"
@@ -48,7 +52,7 @@
 
 <script lang="ts" setup>
 import { addMemberAdmin } from '@/api/admin'
-import { INITIAL_USER_REGISTRATION, RoleKeys } from '@/constants/admin'
+import { INITIAL_USER_REGISTRATION, RoleKeys, RoleTypeMapping } from '@/constants/admin'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
@@ -56,6 +60,7 @@ import FormCheckbox from '../common/FormCheckbox.vue'
 import ModalView from '../ModalView.vue'
 import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
 import RequestTaskInput from '../request-task/RequestTaskInput.vue'
+import DepartmentDropDown from './DepartmentDropDown.vue'
 
 const isModalVisible = ref(false)
 const userRegistrationForm = ref(INITIAL_USER_REGISTRATION)
@@ -67,11 +72,15 @@ const handleCancel = () => {
   isModalVisible.value = false
   router.back()
 }
+console.log(RoleTypeMapping['사용자'])
 
 const handleSubmit = async () => {
   console.log(userRegistrationForm.value)
-  const formData = { ...userRegistrationForm.value, role: 'ROLE_USER', departmentId: 1 }
-  console.log(formData, '요청정보')
+  const formData = {
+    ...userRegistrationForm.value,
+    role: RoleTypeMapping[userRegistrationForm.value.role],
+    email: userRegistrationForm.value.nickname + userRegistrationForm.value.email
+  }
   await addMemberAdmin(formData)
   isModalVisible.value = true
 }

From a77403d57797e3c37092b8339c6540dc713b92ed Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Thu, 6 Feb 2025 05:19:44 +0900
Subject: [PATCH 02/11] =?UTF-8?q?:sparkles:=20[feat]=20:=20=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=20=EC=B6=94=EA=B0=80=20API=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../request-task/RequestTaskInput.vue           |  4 ++--
 src/components/user-manage/UserUpdate.vue       | 13 +++++--------
 src/constants/admin.ts                          | 10 +++++-----
 src/types/admin.ts                              | 17 ++++++++++++++++-
 src/types/user.ts                               |  2 +-
 5 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/components/request-task/RequestTaskInput.vue b/src/components/request-task/RequestTaskInput.vue
index c7bd4828..ecf9e557 100644
--- a/src/components/request-task/RequestTaskInput.vue
+++ b/src/components/request-task/RequestTaskInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative">
+  <div class="relative w-full">
     <div class="text-xs flex gap-x-1 mb-2">
       <p class="text-body font-bold">{{ labelName }}</p>
       <p
@@ -11,7 +11,7 @@
     <input
       class="w-full h-11 border border-border-1 px-4 focus:outline-none text-black rounded"
       :value="modelValue"
-      :disabled="isEdit"
+      :disabled="isEdit || isDisbled"
       @input="updateValue(($event.target as HTMLInputElement).value)"
       :placeholder="placeholderText" />
     <p
diff --git a/src/components/user-manage/UserUpdate.vue b/src/components/user-manage/UserUpdate.vue
index a76881f6..a220d202 100644
--- a/src/components/user-manage/UserUpdate.vue
+++ b/src/components/user-manage/UserUpdate.vue
@@ -29,11 +29,7 @@
       :labelName="'요청 승인 권한'"
       :checkButtonName="'허용'"
       :isChecked="userRegistrationForm.isReviewer" />
-    <RequestTaskInput
-      v-model="userRegistrationForm.departmentId"
-      :placeholderText="'회원의 부서를 입력해주세요'"
-      :is-not-required="true"
-      :labelName="'부서'" />
+    <DepartmentDropDown v-model="userRegistrationForm.departmentId" />
     <RequestTaskInput
       v-model="userRegistrationForm.departmentRole"
       :placeholderText="'회원의 직무를 입력해주세요'"
@@ -50,12 +46,13 @@
 <script lang="ts" setup>
 import { INITIAL_USER_REGISTRATION, RoleKeys } from '@/constants/admin'
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import FormButtonContainer from '../common/FormButtonContainer.vue'
+import FormCheckbox from '../common/FormCheckbox.vue'
 import ModalView from '../ModalView.vue'
 import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
 import RequestTaskInput from '../request-task/RequestTaskInput.vue'
-import FormButtonContainer from '../common/FormButtonContainer.vue'
-import FormCheckbox from '../common/FormCheckbox.vue'
-import { useRouter } from 'vue-router'
+import DepartmentDropDown from './DepartmentDropDown.vue'
 
 const isModalVisible = ref(false)
 const userRegistrationForm = ref(INITIAL_USER_REGISTRATION)
diff --git a/src/constants/admin.ts b/src/constants/admin.ts
index da6707c2..eef52e90 100644
--- a/src/constants/admin.ts
+++ b/src/constants/admin.ts
@@ -48,13 +48,13 @@ export const CATEGORY_FORM: CategoryForm = {
 }
 
 export const INITIAL_USER_REGISTRATION: UserRegistrationProps = {
-  name: '조철득',
-  email: 'choiron@gmail.com',
-  nickname: 'iron.ch',
+  name: '',
+  email: '',
+  nickname: '',
   isReviewer: false,
+  role: '사용자',
   departmentId: 1,
-  role: 'ROLE_USER',
-  departmentRole: 'FE'
+  departmentRole: ''
 }
 
 export const RoleTypeMapping: { [key in RoleTypes]: RoleTypesEnum } = {
diff --git a/src/types/admin.ts b/src/types/admin.ts
index 857a0535..79dbf72f 100644
--- a/src/types/admin.ts
+++ b/src/types/admin.ts
@@ -38,7 +38,7 @@ export interface UserRegistrationProps {
   nickname: string
   isReviewer: boolean
   departmentId: number
-  role: string
+  role: RoleTypes
   departmentRole: string
 }
 
@@ -95,3 +95,18 @@ export interface ApiLogsResponse {
   isFirst: boolean
   isLast: boolean
 }
+
+export interface DepartmentType {
+  departmentId: number
+  name: string
+}
+
+export interface UserRegistrationApiProps {
+  name: string
+  email: string
+  nickname: string
+  isReviewer: boolean
+  departmentId: number
+  role: RoleTypesEnum
+  departmentRole: string
+}
diff --git a/src/types/user.ts b/src/types/user.ts
index 9b2943ab..9b21611c 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -20,7 +20,6 @@ export interface RequestTaskDropdownProps {
   labelName: string
   modelValue: string
   isLabel?: boolean
-  disabled?: boolean
 }
 
 export interface RequestTaskInputProps {
@@ -30,6 +29,7 @@ export interface RequestTaskInputProps {
   isNotRequired?: boolean
   isEdit?: boolean
   isInvalidate?: string
+  isDisbled?: boolean
 }
 
 export interface RequestTaskFileInputProps {

From a2269b9120e4fe036e07c7c2f48d43fba737ca78 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Thu, 6 Feb 2025 05:47:34 +0900
Subject: [PATCH 03/11] =?UTF-8?q?:sparkles:=20[feat]=20:=20CSV=EB=A1=9C=20?=
 =?UTF-8?q?=ED=9A=8C=EC=9B=90=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20revalidat?=
 =?UTF-8?q?e=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin.ts                              |  7 ++-
 .../MemberManagementAddByCsv.vue              | 52 +++++++++++++++++++
 .../request-task/RequestTaskInput.vue         |  2 +-
 src/views/MemberManagement.vue                | 10 +---
 4 files changed, 61 insertions(+), 10 deletions(-)
 create mode 100644 src/components/member-management/MemberManagementAddByCsv.vue

diff --git a/src/api/admin.ts b/src/api/admin.ts
index a60a3b70..facdcdcb 100644
--- a/src/api/admin.ts
+++ b/src/api/admin.ts
@@ -1,6 +1,6 @@
 import type { NewLabelTypes, UserRegistrationApiProps } from '@/types/admin'
 import type { LabelDataTypes } from '@/types/common'
-import { axiosInstance } from '@/utils/axios'
+import { axiosInstance, formDataAxiosInstance } from '@/utils/axios'
 
 export const deleteLabelAdmin = async (id: number) => {
   const response = await axiosInstance.delete(`/api/managements/labels/${id}`)
@@ -34,3 +34,8 @@ export const getDepartmentsAdmin = async () => {
   const response = await axiosInstance.get('/api/managements/departments')
   return response.data
 }
+
+export const addMemberAdminByCsv = async (formdata: FormData) => {
+  const response = await formDataAxiosInstance.post('/api/managements/members/upload', formdata)
+  return response.data
+}
diff --git a/src/components/member-management/MemberManagementAddByCsv.vue b/src/components/member-management/MemberManagementAddByCsv.vue
new file mode 100644
index 00000000..fc25fadd
--- /dev/null
+++ b/src/components/member-management/MemberManagementAddByCsv.vue
@@ -0,0 +1,52 @@
+<template>
+  <input
+    class="hidden"
+    type="file"
+    id="file"
+    accept=".csv"
+    @change="handleFileUpload" />
+  <label
+    for="file"
+    class="cursor-pointer flex items-center gap-1 text-xs font-bold text-primary1">
+    <CommonIcons
+      :name="plusIcon"
+      :style="{ fill: '#7879EB' }" />
+    파일로 일괄 추가
+  </label>
+  <ModalView
+    :isOpen="isModalVisible"
+    :type="'successType'"
+    @close="handleCancel">
+    <template #header> 회원이 추가되었습니다 </template>
+  </ModalView>
+</template>
+
+<script setup lang="ts">
+import { addMemberAdminByCsv } from '@/api/admin'
+import { plusIcon } from '@/constants/iconPath'
+import { useMemberManagementParamsStore } from '@/stores/params'
+import { useQueryClient } from '@tanstack/vue-query'
+import { ref } from 'vue'
+import CommonIcons from '../common/CommonIcons.vue'
+import ModalView from '../ModalView.vue'
+
+const queryClient = useQueryClient()
+const isModalVisible = ref(false)
+const { params } = useMemberManagementParamsStore()
+
+const handleFileUpload = async (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (!file) return
+  const formData = new FormData()
+  formData.append('file', file)
+  await addMemberAdminByCsv(formData)
+  queryClient.invalidateQueries({ queryKey: ['member', { ...params }] })
+  isModalVisible.value = true
+  target.value = ''
+}
+
+const handleCancel = () => {
+  isModalVisible.value = false
+}
+</script>
diff --git a/src/components/request-task/RequestTaskInput.vue b/src/components/request-task/RequestTaskInput.vue
index ecf9e557..1809f641 100644
--- a/src/components/request-task/RequestTaskInput.vue
+++ b/src/components/request-task/RequestTaskInput.vue
@@ -11,7 +11,7 @@
     <input
       class="w-full h-11 border border-border-1 px-4 focus:outline-none text-black rounded"
       :value="modelValue"
-      :disabled="isEdit || isDisbled"
+      :disabled="isEdit"
       @input="updateValue(($event.target as HTMLInputElement).value)"
       :placeholder="placeholderText" />
     <p
diff --git a/src/views/MemberManagement.vue b/src/views/MemberManagement.vue
index b119f97d..8b33d3dd 100644
--- a/src/views/MemberManagement.vue
+++ b/src/views/MemberManagement.vue
@@ -2,14 +2,7 @@
   <div class="list-view">
     <TitleBar title="회원 관리">
       <template #button>
-        <button
-          class="flex items-center gap-1 text-xs font-bold text-primary1"
-          @click="() => {}">
-          <CommonIcons
-            :name="plusIcon"
-            :style="{ fill: '#7879EB' }" />
-          파일로 일괄 추가
-        </button>
+        <MemberManagementAddByCsv />
         <button
           class="flex items-center gap-1 text-xs font-bold text-primary1"
           @click="createNewMember">
@@ -29,6 +22,7 @@
 
 <script setup lang="ts">
 import CommonIcons from '@/components/common/CommonIcons.vue'
+import MemberManagementAddByCsv from '@/components/member-management/MemberManagementAddByCsv.vue'
 import MemberManagementFilterBar from '@/components/member-management/MemberManagementFilterBar.vue'
 import MemberManagementList from '@/components/member-management/MemberManagementList.vue'
 import TitleBar from '@/components/TitleBar.vue'

From f90d37c17f1c1e2aaa9bca543d385d0ff19c762e Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Thu, 6 Feb 2025 19:23:04 +0900
Subject: [PATCH 04/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=20=EC=88=98=EC=A0=95=20api=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin.ts                              | 12 +++-
 .../MemberManagementListCard.vue              | 14 ++--
 .../request-task/RequestTaskInput.vue         |  3 +-
 src/components/user-manage/UserUpdate.vue     | 71 ++++++++++++++++---
 src/constants/admin.ts                        |  6 ++
 src/types/admin.ts                            | 14 ++++
 6 files changed, 102 insertions(+), 18 deletions(-)

diff --git a/src/api/admin.ts b/src/api/admin.ts
index facdcdcb..df2edbf7 100644
--- a/src/api/admin.ts
+++ b/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
+}
diff --git a/src/components/member-management/MemberManagementListCard.vue b/src/components/member-management/MemberManagementListCard.vue
index f0573174..2b1305fb 100644
--- a/src/components/member-management/MemberManagementListCard.vue
+++ b/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' ? '담당자' : '관리자'
diff --git a/src/components/request-task/RequestTaskInput.vue b/src/components/request-task/RequestTaskInput.vue
index 1809f641..ac036112 100644
--- a/src/components/request-task/RequestTaskInput.vue
+++ b/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)]">
diff --git a/src/components/user-manage/UserUpdate.vue b/src/components/user-manage/UserUpdate.vue
index a220d202..d77a5456 100644
--- a/src/components/user-manage/UserUpdate.vue
+++ b/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>
diff --git a/src/constants/admin.ts b/src/constants/admin.ts
index eef52e90..aefb085c 100644
--- a/src/constants/admin.ts
+++ b/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[]
diff --git a/src/types/admin.ts b/src/types/admin.ts
index 79dbf72f..672c9a5f 100644
--- a/src/types/admin.ts
+++ b/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
+}

From 58ad762e09c28b46442280e7bf7c3225db3f87eb Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Thu, 6 Feb 2025 22:18:36 +0900
Subject: [PATCH 05/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EC=9A=94?=
 =?UTF-8?q?=EC=B2=AD=20=EC=B7=A8=EC=86=8C=20api=20=EC=97=B0=EA=B2=B0=20?=
 =?UTF-8?q?=ED=9B=84=20=EB=AA=A8=EB=8B=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.ts                               |  5 ++++
 .../task-detail/TaskDetailTopBar.vue          | 29 ++++++++++++++-----
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/api/user.ts b/src/api/user.ts
index 2f981710..da0da516 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -71,3 +71,8 @@ export const deleteComment = async (commentId: number) => {
   const response = await axiosInstance.delete(`/api/comment/${commentId}`)
   return response.data
 }
+
+export const cancelTaskUser = async (taskId: number) => {
+  const response = await axiosInstance.patch(`/api/tasks/${taskId}/cancel`)
+  return response.data
+}
diff --git a/src/components/task-detail/TaskDetailTopBar.vue b/src/components/task-detail/TaskDetailTopBar.vue
index a8944afc..e7fce09f 100644
--- a/src/components/task-detail/TaskDetailTopBar.vue
+++ b/src/components/task-detail/TaskDetailTopBar.vue
@@ -21,7 +21,7 @@
         <p class="text-primary1">요청 승인</p>
       </div>
       <div
-        @click="cancelTask"
+        @click="toggleModal('cancel')"
         v-if="!isApproved && (isRequestor || isProcessor)"
         class="flex gap-1 items-center cursor-pointer">
         <CommonIcons :name="cancelIcon" />
@@ -33,16 +33,24 @@
       @click="closeTaskDetail"
       class="cursor-pointer" />
     <ModalView
-      type="inputType"
       :is-open="isModalOpen.cancel"
-      @click="cancelTask"
-      @close="cancelTask">
-      <template #header>거부 사유를 입력해주세요</template>
+      type="warningType"
+      @close="closeCancelModal()"
+      @click="cancelTask">
+      <template #header>요청을 취소 하시겠습니까?</template>
+      <template #body>요청하신 내용은 사라집니다</template>
+    </ModalView>
+    <ModalView
+      :is-open="isModalOpen.success"
+      type="successType"
+      @close="toggleModal('success')">
+      <template #header>요청이 취소되었습니다</template>
     </ModalView>
   </div>
 </template>
 
 <script setup lang="ts">
+import { cancelTaskUser } from '@/api/user'
 import {
   approveIcon,
   cancelIcon,
@@ -62,19 +70,24 @@ const { isApproved, closeTaskDetail, id, isProcessor, isRequestor } =
 
 const isModalOpen = ref({
   cancel: false,
-  approve: false
+  success: false
 })
 
 const toggleModal = (key: keyof typeof isModalOpen.value) => {
   isModalOpen.value[key] = !isModalOpen.value[key]
 }
 
-const cancelTask = () => {
+const closeCancelModal = () => {
+  isModalOpen.value.cancel = false
+}
+
+const cancelTask = async () => {
+  await cancelTaskUser(id)
   toggleModal('cancel')
+  toggleModal('success')
 }
 
 const ApproveTask = () => {
-  toggleModal('approve')
   router.push(`/request-approve/${id}`)
 }
 

From df03366423d75bb5d44258905947e642c6b75483 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Thu, 6 Feb 2025 22:33:49 +0900
Subject: [PATCH 06/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EC=9D=B4?=
 =?UTF-8?q?=EB=A9=94=EC=9D=BC=EC=9D=84=20=ED=8F=AC=ED=95=A8=ED=95=B4=20?=
 =?UTF-8?q?=ED=9A=8C=EC=9B=90=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin.ts                          |  2 +-
 src/components/user-manage/UserUpdate.vue | 14 ++++++--------
 src/types/admin.ts                        |  2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/api/admin.ts b/src/api/admin.ts
index df2edbf7..7ef09fd7 100644
--- a/src/api/admin.ts
+++ b/src/api/admin.ts
@@ -46,6 +46,6 @@ export const getMemberDetailAdmin = async (id: string) => {
 }
 
 export const updateMemberAdmin = async (id: string, data: UserUpdateValue) => {
-  const response = await axiosInstance.post(`api/managements/members/${id}`, data)
+  const response = await axiosInstance.patch(`api/managements/members/${id}`, data)
   return response.data
 }
diff --git a/src/components/user-manage/UserUpdate.vue b/src/components/user-manage/UserUpdate.vue
index d77a5456..ca322027 100644
--- a/src/components/user-manage/UserUpdate.vue
+++ b/src/components/user-manage/UserUpdate.vue
@@ -89,12 +89,10 @@ 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]
-      }
+  if (userData.value && userData.value.role in RoleMapping) {
+    userRegistrationForm.value = {
+      ...userData.value,
+      role: RoleMapping[userData.value.role as keyof typeof RoleMapping]
     }
   }
 })
@@ -109,7 +107,7 @@ const handleSubmit = async () => {
   if (typeof userId.value === 'string') {
     const userData = {
       role: RoleTypeMapping[userRegistrationForm.value.role],
-      email: null,
+      email: userRegistrationForm.value.email,
       name: userRegistrationForm.value.name,
       isReviewer: userRegistrationForm.value.isReviewer,
       departmentId: userRegistrationForm.value.departmentId,
@@ -118,7 +116,7 @@ const handleSubmit = async () => {
     console.log(userData, '수정할 데이터')
     console.log(userId.value, '수정할 아이디')
     await updateMemberAdmin(userId.value, userData)
+    isModalVisible.value = true
   }
-  isModalVisible.value = true
 }
 </script>
diff --git a/src/types/admin.ts b/src/types/admin.ts
index 672c9a5f..f12549af 100644
--- a/src/types/admin.ts
+++ b/src/types/admin.ts
@@ -118,7 +118,7 @@ export interface UserRegistrationApiProps {
 
 export interface UserUpdateValue {
   name: string
-  email: null
+  email: string
   isReviewer: boolean
   departmentId: number
   role: RoleTypesEnum

From e1b6d28908d4f70301f8c0479bc985754bb06b4f Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Fri, 7 Feb 2025 01:46:56 +0900
Subject: [PATCH 07/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=20=EC=A0=95=EB=B3=B4=20=EC=88=98=EC=A0=95=20=EC=97=AD?=
 =?UTF-8?q?=ED=95=A0=EB=B3=84=20=EC=8A=B9=EC=9D=B8=EA=B6=8C=ED=95=9C=20?=
 =?UTF-8?q?=EC=A0=9C=ED=95=9C=ED=95=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/FormCheckbox.vue        | 20 ++++++++++++++++---
 .../task-detail/TaskDetailHistoryInput.vue    |  2 +-
 .../user-manage/UserRegistration.vue          |  3 ++-
 src/types/common.ts                           |  3 ++-
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/common/FormCheckbox.vue b/src/components/common/FormCheckbox.vue
index ec71c773..399b3cfc 100644
--- a/src/components/common/FormCheckbox.vue
+++ b/src/components/common/FormCheckbox.vue
@@ -2,8 +2,11 @@
   <div class="text-xs font-bold">
     <p class="text-body mb-2">{{ labelName }}</p>
     <div
-      class="w-fit flex gap-2 items-center cursor-pointer"
-      @click="updateValue">
+      @click="!isDisabled && updateValue()"
+      :class="[
+        'w-fit flex gap-2 items-center',
+        { 'cursor-pointer': !isDisabled, 'cursor-not-allowed': isDisabled }
+      ]">
       <CommonIcons
         :name="checkBoxIcon"
         :class="[
@@ -19,12 +22,23 @@
 <script lang="ts" setup>
 import { checkBoxIcon } from '@/constants/iconPath'
 import type { FormCheckboxProps } from '@/types/common'
+import { watch } from 'vue'
 import CommonIcons from './CommonIcons.vue'
 
-const { labelName, checkButtonName, isChecked } = defineProps<FormCheckboxProps>()
+const { labelName, checkButtonName, isChecked, isDisabled } = defineProps<FormCheckboxProps>()
 const emit = defineEmits(['update:modelValue'])
 
 const updateValue = () => {
   emit('update:modelValue', !isChecked)
+  console.log('updateValue')
 }
+
+watch(
+  () => isDisabled,
+  newVal => {
+    if (newVal) {
+      emit('update:modelValue', false)
+    }
+  }
+)
 </script>
diff --git a/src/components/task-detail/TaskDetailHistoryInput.vue b/src/components/task-detail/TaskDetailHistoryInput.vue
index ab573129..419f29e1 100644
--- a/src/components/task-detail/TaskDetailHistoryInput.vue
+++ b/src/components/task-detail/TaskDetailHistoryInput.vue
@@ -12,7 +12,7 @@
       :disabled="!isPossible"
       @compositionstart="isComposing = true"
       @compositionend="isComposing = false"
-      @keyup.enter.prevent="handleEnterKey"></textarea>
+      @keydown.enter.stop.prevent="handleEnterKey"></textarea>
     <input
       class="hidden"
       type="file"
diff --git a/src/components/user-manage/UserRegistration.vue b/src/components/user-manage/UserRegistration.vue
index 3224fa75..d3613976 100644
--- a/src/components/user-manage/UserRegistration.vue
+++ b/src/components/user-manage/UserRegistration.vue
@@ -35,7 +35,8 @@
       v-model="userRegistrationForm.isReviewer"
       :labelName="'요청 승인 권한'"
       :checkButtonName="'허용'"
-      :isChecked="userRegistrationForm.isReviewer" />
+      :isChecked="userRegistrationForm.isReviewer"
+      :isDisabled="userRegistrationForm.role !== '담당자'" />
     <DepartmentDropDown v-model="userRegistrationForm.departmentId" />
     <RequestTaskInput
       v-model="userRegistrationForm.departmentRole"
diff --git a/src/types/common.ts b/src/types/common.ts
index 4c18d85a..9230a03a 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -70,9 +70,10 @@ export interface FormButtonProps {
 }
 
 export interface FormCheckboxProps {
-  labelName?: string
   checkButtonName: string
   isChecked: boolean
+  labelName?: string
+  isDisabled?: boolean
 }
 
 export interface ColorSelectProps {

From 2ca56fd29dc89e10f498580c55b3f29c62cd113c Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Fri, 7 Feb 2025 01:47:24 +0900
Subject: [PATCH 08/11] =?UTF-8?q?:sparkles:=20[feat]=20:=20=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=EC=A0=95=EB=B3=B4=20=EC=88=98=EC=A0=95=20api=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin.ts                          | 2 +-
 src/components/user-manage/UserUpdate.vue | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/api/admin.ts b/src/api/admin.ts
index 7ef09fd7..df2edbf7 100644
--- a/src/api/admin.ts
+++ b/src/api/admin.ts
@@ -46,6 +46,6 @@ export const getMemberDetailAdmin = async (id: string) => {
 }
 
 export const updateMemberAdmin = async (id: string, data: UserUpdateValue) => {
-  const response = await axiosInstance.patch(`api/managements/members/${id}`, data)
+  const response = await axiosInstance.post(`api/managements/members/${id}`, data)
   return response.data
 }
diff --git a/src/components/user-manage/UserUpdate.vue b/src/components/user-manage/UserUpdate.vue
index ca322027..13ff6ff7 100644
--- a/src/components/user-manage/UserUpdate.vue
+++ b/src/components/user-manage/UserUpdate.vue
@@ -37,6 +37,7 @@
       v-model="userRegistrationForm.isReviewer"
       :labelName="'요청 승인 권한'"
       :checkButtonName="'허용'"
+      :isDisabled="userRegistrationForm.role !== '담당자'"
       :isChecked="userRegistrationForm.isReviewer" />
     <DepartmentDropDown v-model="userRegistrationForm.departmentId" />
     <RequestTaskInput
@@ -77,7 +78,6 @@ 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,
@@ -85,6 +85,7 @@ watch(
     userId.value = newId
   }
 )
+
 onMounted(async () => {
   if (typeof userId.value === 'string') {
     userData.value = await getMemberDetailAdmin(userId.value)
@@ -115,7 +116,9 @@ const handleSubmit = async () => {
     }
     console.log(userData, '수정할 데이터')
     console.log(userId.value, '수정할 아이디')
-    await updateMemberAdmin(userId.value, userData)
+    const res = await updateMemberAdmin(userId.value, userData)
+    console.log(res, '수정 결과')
+
     isModalVisible.value = true
   }
 }

From e749c2a1b0b58d788872ec7bb02a81b5101f91bf Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Fri, 7 Feb 2025 02:17:45 +0900
Subject: [PATCH 09/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EA=B2=BD=EB=A1=9C=20=EB=AF=B8=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/member-management/MemberManagementListCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/member-management/MemberManagementListCard.vue b/src/components/member-management/MemberManagementListCard.vue
index 44f0a470..a8f9750a 100644
--- a/src/components/member-management/MemberManagementListCard.vue
+++ b/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>

From 0a1236887cfcd31a7116ed935b3c4e8b10bda8ae Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Fri, 7 Feb 2025 09:44:06 +0900
Subject: [PATCH 10/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EC=9D=B4?=
 =?UTF-8?q?=EB=A9=94=EC=9D=BC=20=EB=B9=BC=EA=B3=A0=20=EB=B3=B4=EB=82=B4?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user-manage/UserUpdate.vue | 7 ++-----
 src/types/admin.ts                        | 1 -
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/user-manage/UserUpdate.vue b/src/components/user-manage/UserUpdate.vue
index 13ff6ff7..0090848c 100644
--- a/src/components/user-manage/UserUpdate.vue
+++ b/src/components/user-manage/UserUpdate.vue
@@ -93,6 +93,7 @@ onMounted(async () => {
   if (userData.value && userData.value.role in RoleMapping) {
     userRegistrationForm.value = {
       ...userData.value,
+      email: '@' + userData.value.email.split('@')[1],
       role: RoleMapping[userData.value.role as keyof typeof RoleMapping]
     }
   }
@@ -108,16 +109,12 @@ const handleSubmit = async () => {
   if (typeof userId.value === 'string') {
     const userData = {
       role: RoleTypeMapping[userRegistrationForm.value.role],
-      email: userRegistrationForm.value.email,
       name: userRegistrationForm.value.name,
       isReviewer: userRegistrationForm.value.isReviewer,
       departmentId: userRegistrationForm.value.departmentId,
       departmentRole: userRegistrationForm.value.departmentRole
     }
-    console.log(userData, '수정할 데이터')
-    console.log(userId.value, '수정할 아이디')
-    const res = await updateMemberAdmin(userId.value, userData)
-    console.log(res, '수정 결과')
+    await updateMemberAdmin(userId.value, userData)
 
     isModalVisible.value = true
   }
diff --git a/src/types/admin.ts b/src/types/admin.ts
index f12549af..b97e4c3a 100644
--- a/src/types/admin.ts
+++ b/src/types/admin.ts
@@ -118,7 +118,6 @@ export interface UserRegistrationApiProps {
 
 export interface UserUpdateValue {
   name: string
-  email: string
   isReviewer: boolean
   departmentId: number
   role: RoleTypesEnum

From 108e90a9a1c5f4bfd6e9471e966bc14630ccde15 Mon Sep 17 00:00:00 2001
From: Minkyu0424 <yng1404@gmail.com>
Date: Fri, 7 Feb 2025 11:32:11 +0900
Subject: [PATCH 11/11] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EA=B0=92=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EB=B0=8F?=
 =?UTF-8?q?=20=EC=9A=94=EC=B2=AD=20=EC=8A=B9=EC=9D=B8=20=EA=B6=8C=ED=95=9C?=
 =?UTF-8?q?=20invisible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/FormCheckbox.vue          |  1 -
 .../member-management/MemberManagementList.vue  | 13 ++++++-------
 src/components/user-manage/UserRegistration.vue | 17 ++++++++++-------
 src/components/user-manage/UserUpdate.vue       | 17 +++++++++--------
 4 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/common/FormCheckbox.vue b/src/components/common/FormCheckbox.vue
index 399b3cfc..081663a1 100644
--- a/src/components/common/FormCheckbox.vue
+++ b/src/components/common/FormCheckbox.vue
@@ -30,7 +30,6 @@ const emit = defineEmits(['update:modelValue'])
 
 const updateValue = () => {
   emit('update:modelValue', !isChecked)
-  console.log('updateValue')
 }
 
 watch(
diff --git a/src/components/member-management/MemberManagementList.vue b/src/components/member-management/MemberManagementList.vue
index 18e2e250..bda06767 100644
--- a/src/components/member-management/MemberManagementList.vue
+++ b/src/components/member-management/MemberManagementList.vue
@@ -22,22 +22,21 @@
 </template>
 
 <script setup lang="ts">
-import ListPagination from '../lists/ListPagination.vue'
-import ListContainer from '../lists/ListContainer.vue'
 import { useMemberManagementParamsStore } from '@/stores/params'
-import MemberManagementListBar from './MemberManagementListBar.vue'
-import MemberManagementListCard from './MemberManagementListCard.vue'
-import NoContent from '../lists/NoContent.vue'
+import type { MemberManagementResponse } from '@/types/admin'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
-import type { MemberManagementResponse } from '@/types/admin'
+import ListContainer from '../lists/ListContainer.vue'
+import ListPagination from '../lists/ListPagination.vue'
+import NoContent from '../lists/NoContent.vue'
+import MemberManagementListBar from './MemberManagementListBar.vue'
+import MemberManagementListCard from './MemberManagementListCard.vue'
 
 const { params } = useMemberManagementParamsStore()
 const onPageChange = (value: number) => {
   params.page = value
 }
-
 const fetchMemberList = async () => {
   const response = await axiosInstance.get('/api/managements/members', { params })
   return response.data
diff --git a/src/components/user-manage/UserRegistration.vue b/src/components/user-manage/UserRegistration.vue
index d3613976..2b01daf1 100644
--- a/src/components/user-manage/UserRegistration.vue
+++ b/src/components/user-manage/UserRegistration.vue
@@ -32,11 +32,12 @@
       :label-name="'역할'"
       :placeholderText="'회원의 역할을 선택해주세요'" />
     <FormCheckbox
+      v-if="isManager"
       v-model="userRegistrationForm.isReviewer"
       :labelName="'요청 승인 권한'"
       :checkButtonName="'허용'"
-      :isChecked="userRegistrationForm.isReviewer"
-      :isDisabled="userRegistrationForm.role !== '담당자'" />
+      :isDisabled="!isManager"
+      :isChecked="userRegistrationForm.isReviewer" />
     <DepartmentDropDown v-model="userRegistrationForm.departmentId" />
     <RequestTaskInput
       v-model="userRegistrationForm.departmentRole"
@@ -54,7 +55,7 @@
 <script lang="ts" setup>
 import { addMemberAdmin } from '@/api/admin'
 import { INITIAL_USER_REGISTRATION, RoleKeys, RoleTypeMapping } from '@/constants/admin'
-import { ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
 import FormCheckbox from '../common/FormCheckbox.vue'
@@ -63,22 +64,24 @@ import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
 import RequestTaskInput from '../request-task/RequestTaskInput.vue'
 import DepartmentDropDown from './DepartmentDropDown.vue'
 
+const router = useRouter()
 const isModalVisible = ref(false)
 const userRegistrationForm = ref(INITIAL_USER_REGISTRATION)
+const isManager = computed(() => userRegistrationForm.value.role === '담당자')
 
-const router = useRouter()
+onMounted(async () => {
+  userRegistrationForm.value = { ...INITIAL_USER_REGISTRATION }
+})
 
 const handleCancel = () => {
-  userRegistrationForm.value = { ...INITIAL_USER_REGISTRATION }
   isModalVisible.value = false
   router.back()
 }
-console.log(RoleTypeMapping['사용자'])
 
 const handleSubmit = async () => {
-  console.log(userRegistrationForm.value)
   const formData = {
     ...userRegistrationForm.value,
+    isReviewer: isManager.value ? userRegistrationForm.value.isReviewer : false,
     role: RoleTypeMapping[userRegistrationForm.value.role],
     email: userRegistrationForm.value.nickname + userRegistrationForm.value.email
   }
diff --git a/src/components/user-manage/UserUpdate.vue b/src/components/user-manage/UserUpdate.vue
index 0090848c..165f7c2c 100644
--- a/src/components/user-manage/UserUpdate.vue
+++ b/src/components/user-manage/UserUpdate.vue
@@ -34,10 +34,11 @@
       :label-name="'역할'"
       :placeholderText="'회원의 역할을 선택해주세요'" />
     <FormCheckbox
+      v-if="isManager"
       v-model="userRegistrationForm.isReviewer"
       :labelName="'요청 승인 권한'"
       :checkButtonName="'허용'"
-      :isDisabled="userRegistrationForm.role !== '담당자'"
+      :isDisabled="!isManager"
       :isChecked="userRegistrationForm.isReviewer" />
     <DepartmentDropDown v-model="userRegistrationForm.departmentId" />
     <RequestTaskInput
@@ -62,7 +63,7 @@ import {
   RoleTypeMapping
 } from '@/constants/admin'
 import type { UserRegistrationProps } from '@/types/admin'
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
 import FormCheckbox from '../common/FormCheckbox.vue'
@@ -71,13 +72,14 @@ import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
 import RequestTaskInput from '../request-task/RequestTaskInput.vue'
 import DepartmentDropDown from './DepartmentDropDown.vue'
 
-const isModalVisible = ref(false)
-const userRegistrationForm = ref(INITIAL_USER_REGISTRATION)
-
 const route = useRoute()
 const router = useRouter()
+
+const userRegistrationForm = ref(INITIAL_USER_REGISTRATION)
+const isManager = computed(() => userRegistrationForm.value.role === '담당자')
 const userId = ref(route.query.id)
 const userData = ref<UserRegistrationProps | null>(null)
+const isModalVisible = ref(false)
 
 watch(
   () => router.currentRoute.value.query.id,
@@ -99,7 +101,7 @@ onMounted(async () => {
   }
 })
 
-const handleCancel = () => {
+const handleCancel = async () => {
   userRegistrationForm.value = { ...INITIAL_USER_REGISTRATION }
   isModalVisible.value = false
   router.back()
@@ -110,12 +112,11 @@ const handleSubmit = async () => {
     const userData = {
       role: RoleTypeMapping[userRegistrationForm.value.role],
       name: userRegistrationForm.value.name,
-      isReviewer: userRegistrationForm.value.isReviewer,
+      isReviewer: isManager.value ? userRegistrationForm.value.isReviewer : false,
       departmentId: userRegistrationForm.value.departmentId,
       departmentRole: userRegistrationForm.value.departmentRole
     }
     await updateMemberAdmin(userId.value, userData)
-
     isModalVisible.value = true
   }
 }