[K5P-67] [feat] 회원 대량 등록 기능 구현

src/assets/scss/component/modal.scss

@@ -4,6 +4,7 @@
   left: $side-bar-width;
   width: calc(100vw - $side-bar-width);
   height: calc(100vh - $nav-bar-height);
+  padding: 20px 0;
   background: rgba(255, 255, 255, 0.8);
   display: flex;
   justify-content: center;
@@ -14,12 +15,16 @@
 .modal-content {
   @include flex-box(column, center, 20px);
   width: 400px;
+  max-height: 100%;
   padding: 0px 30px;
   border-radius : 10px;
   box-shadow: $base-shadow;
   background-color: white;
   .modal-main {
     @include flex-box(column, center, 20px);
+    width: 100%;
+    max-height: 100%;
+    overflow: auto;
   }
 }
 
@@ -33,4 +38,19 @@
 
 .fade-enter-to, .fade-leave-from{
   opacity: 1;
+}
+
+/* 웹킷 브라우저의 스크롤바 숨기기 */
+.modal-main::-webkit-scrollbar {
+  display: none;
+}
+
+/* 파이어폭스의 스크롤바 숨기기 */
+.modal-main {
+  scrollbar-width: none; /* Firefox */
+}
+
+/* Edge, IE 10+, 및 최신 브라우저의 스크롤바 숨기기 */
+.modal-main {
+  -ms-overflow-style: none;  /* IE 10+ */
 }

src/components/common/ExcelUpload.vue

@@ -8,7 +8,7 @@
         <img :src="`/src/assets/images/${store.exampleImg}`" alt="">
         <div class="guide-line">
           <span>※ 위 사진처럼 이름과 형식을 맞춰서 입력해주세요</span>
-          <ExcelBtnVue title="샘플" :func="downloadSample" />
+          <ExcelBtnVue title="양식" :func="downloadSample" />
         </div>
       </div>
       <FileInputVue v-model="file" />
@@ -47,12 +47,6 @@ export default {
       errorMsg: '',
     }
   },
-  watch: {
-    'store.file': function(newFile) {
-      this.file = newFile;
-      console.log(this.file)
-    }
-  },
   methods: {
     downloadSample() {
       const link = this.$refs.hiddenLink;
@@ -74,7 +68,6 @@ export default {
 
       this.errorMsg = ''
       this.store.setFile(this.file);
-      this.store.setIsValid(true);
       
       const reader = new FileReader();
 
@@ -89,10 +82,13 @@ export default {
       };
 
       reader.readAsArrayBuffer(this.file);
-
     }
   },
-  mounted() { }
+  mounted() { 
+    this.store.setFile(null);
+    this.store.setUploadData(null);
+    this.store.setErrorList(null);
+  }
 }
 </script>
 

src/components/common/input/FileInput.vue

@@ -56,11 +56,11 @@ export default {
     }
 
     .file-box {
-      @include flex-box(row, center, 0px);
+      @include flex-box(row, start, 0px);
       @include base-icon;
       width: 100%;
       height: 100%;
-      padding: 0px 10px;
+      padding: 0px 20px;
       font-weight: bold;
       border: $theme-color solid;
       border-top-right-radius: 5px;

src/components/member/MemberCreateTable.vue

@@ -27,7 +27,7 @@ export default {
   name: 'MemberCreateTableVue',
   data() {
     return {
-      colums: ['이름', '이메일', '전화번호']
+      colums: ['회원명', '이메일', '전화번호']
     }
   },
   computed: {

src/components/member/modal/MemberBulkErrorModal.vue

@@ -0,0 +1,55 @@
+<template>
+  <transition name="fade">
+    <div v-if="isVisible" class="modal-overlay">
+      <div class="modal-content">
+        <div class="modal-main">
+          <span class="content-text" v-for="(value, idx) in memberBulkStore.errorList" :key="idx">{{ value }}</span>
+        </div>
+        <ModalFooterVue title="확인" :func="closeModal"/>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { mapStores } from 'pinia';
+import { useMemberBulkStore } from '@/stores/memberBulk';
+import ModalFooterVue from '@/components/common/modal/ModalFooter.vue';
+
+export default {
+  name: 'MemberBulkErrorModalVue',
+  components: {
+    ModalFooterVue
+  },
+  props: {
+    'isVisible': Boolean,
+    'closeModal': Function,
+  },
+  data() {
+    return {
+      title: ' ',
+      errorMsg: '',
+      name: '',
+      price: '',
+      description: '',
+    }
+  },
+  computed: {
+    ...mapStores(useMemberBulkStore),
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/component/modal.scss';
+  .modal-main {
+    margin-top: 30px;
+  }
+
+  .content-text{
+    width: 100%;
+    // padding: 0px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+</style>

src/stores/memberBulk.js

@@ -6,18 +6,14 @@ export const useMemberBulkStore = defineStore('memberBulk', {
       exampleImg: 'example_member.png',
       download: '회원등록.xlsx',
       file: null,
-      isValid: false,
       uploadData: null,
-      errorList: null,
+      errorList: [],
     }
   },
   actions: {
     setFile(file) {
       this.file = file;
     },
-    setIsValid(isValid) {
-      this.isValid = isValid;
-    },
     setUploadData(uploadData) {
       this.uploadData = uploadData;
     },

src/utils/member.js

@@ -1,7 +1,9 @@
 import { useMemberStore } from "@/stores/member";
-import { mainAxios } from "@/utils/axios";
+import { useMemberBulkStore } from "@/stores/memberBulk";
+import { fileAxios, mainAxios } from "@/utils/axios";
 
 const memberStore = useMemberStore();
+const memberBulkStore = useMemberBulkStore();
 
 // 회원 목록 조회
 async function getMemberList(keyword, input) {
@@ -39,6 +41,25 @@ async function createMember(infos) {
   return result;
 }
 
+// 회원 대량 등록
+async function createMemberBulk(file) {
+  const formData = new FormData();
+  formData.append('file', file, 'file');
+
+  const result = await fileAxios.post('members/bulk-register', formData);
+
+  if (result.code !== 200) {
+    if (result.data) {
+      memberBulkStore.errorList = [...result.data];
+    } else {
+      memberBulkStore.errorList = [result.message];
+    }
+  }
+
+  return result;
+}
+
+
 // 회원 수정
 async function updateMember(memberId, infos) {
   const result = await mainAxios.put(`members/${memberId}`, infos);
@@ -57,4 +78,4 @@ async function deleteMember(memberId) {
   return result;
 }
 
-export { getMemberList, getMember, createMember, updateMember, deleteMember }
+export { getMemberList, getMember, createMember, createMemberBulk, updateMember, deleteMember }

src/views/member/MemberBulkCreateView.vue

@@ -4,25 +4,27 @@
       <ExcelUploadVue :store="memberBulkStore" />
       <div class="btn-box">
         <WarningWideBtnVue title="취소" :func="cancelBulk"/>
-        <ThemeWideBtnVue title="초기화" :func="resetBulk"/>
-        <SuccessWideBtnVue title="회원 등록" />
+        <SuccessWideBtnVue title="회원 등록" :func="registerBulk"/>
       </div>
     </div>
     <div class="right-side">
       <span>등록할 회원 정보</span>
       <MemberCreateTableVue />
     </div>
   </div>
+  <MemberBulkErrorModalVue :isVisible="isInValid" :close-modal="() => operateErrorModal(false)"/>
 </template>
 
 <script>
 import { useMemberBulkStore } from '@/stores/memberBulk';
 import { mapActions, mapStores } from 'pinia';
+import { createMemberBulk } from '@/utils/member';
 import ExcelUploadVue from '@/components/common/ExcelUpload.vue';
 import MemberCreateTableVue from '@/components/member/MemberCreateTable.vue';
 import SuccessWideBtnVue from '@/components/common/btn/SuccessWideBtn.vue';
 import WarningWideBtnVue from '@/components/common/btn/WarningWideBtn.vue';
-import ThemeWideBtnVue from '@/components/common/btn/ThemeWideBtn.vue';
+import MemberBulkErrorModalVue from '@/components/member/modal/MemberBulkErrorModal.vue';
+import { useMemberStore } from '@/stores/member';
 
 export default {
   name: 'MemberBulkCreateView',
@@ -31,26 +33,42 @@ export default {
     MemberCreateTableVue,
     WarningWideBtnVue,
     SuccessWideBtnVue,
-    ThemeWideBtnVue
+    MemberBulkErrorModalVue
+  },
+  data() {
+    return {
+      isInValid: false,
+    }
   },
   computed: {
-    ...mapStores(useMemberBulkStore)
+    ...mapStores(useMemberBulkStore),
+    ...mapStores(useMemberStore)
   },
   methods: {
-    ...mapActions(useMemberBulkStore, ['setIsValid', 'setUploadData', 'setErrorList', 'setFile']),
+    ...mapActions(useMemberBulkStore, ['setUploadData', 'setErrorList', 'setFile']),
     cancelBulk() {
       this.$router.push({name: 'member'})
     },
-    resetBulk() {
-      this.memberBulkStore.setFile(null);
-      this.memberBulkStore.setIsValid(false);
-      this.memberBulkStore.setUploadData(null);
-      this.memberBulkStore.setErrorList(null);
-    }
+    operateErrorModal(value) {
+      this.isInValid = value;
+    },
+    async registerBulk() {
+      if (this.memberBulkStore.file === null) {
+        this.memberBulkStore.setErrorList(['파일이 업로드되지 않았습니다.']);
+        this.operateErrorModal(true);
+        return;
+      }
+
+      const result = await createMemberBulk(this.memberBulkStore.file);
+
+      if (result.code !== 200) {
+        this.operateErrorModal(true);
+        return;
+      } 
+      
+      this.$router.push({name: 'member'})
+    },
   },
-  mounted() {
-    this.resetBulk();
-  }
 }
 </script>
 

src/views/member/MemberListView.vue

@@ -99,7 +99,7 @@ export default {
   @include flex-box(column, space-between, 20px);
   background: $back-color;
   width: 100%;
-  min-height: 100%;
+  height: 100%;
   padding: 30px 40px
 }