✨ [feat] : CSV로 회원 추가 및 revalidate 연결

Author: Minkyu0424

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
+}

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>

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

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'