feat(member-block): 계정 및 본인인증 정보 차단 기능 추가 완료

src/api/member.js

@@ -52,6 +52,11 @@ async function resetPassword(id) {
     return Vue.axios.post("/admin/member/password/reset", request)
 }
 
+async function blockMember(memberId, reason) {
+    const request = {memberId, reason}
+    return Vue.axios.post("/admin/member/block", request)
+}
+
 /**
  * 닉네임으로 회원 검색 API
  * - 서버 구현 차이를 흡수하기 위해 nickname, search_word 두 파라미터 모두 전송
@@ -84,8 +89,9 @@ export {
   searchMember,
   getCreatorList,
   searchCreator,
-  updateMember,
-  getCreatorAllList,
-  resetPassword,
-  searchMembersByNickname
+    updateMember,
+    getCreatorAllList,
+    resetPassword,
+    blockMember,
+    searchMembersByNickname
 }

src/views/Member/MemberList.vue

@@ -193,6 +193,14 @@
             </v-row>
           </v-card-text>
           <v-card-actions v-show="!is_loading">
+            <v-btn
+              color="error"
+              text
+              @click="showBlockReasonDialog"
+            >
+              차단
+            </v-btn>
+            <v-spacer />
             <v-btn
               color="blue darken-1"
               text
@@ -200,7 +208,6 @@
             >
               비밀번호 재설정
             </v-btn>
-            <v-spacer />
             <v-btn
               color="blue darken-1"
               text
@@ -252,6 +259,74 @@
         </v-card>
       </v-dialog>
     </v-row>
+
+    <v-row>
+      <v-dialog
+        v-model="show_block_reason_dialog"
+        max-width="500px"
+        persistent
+      >
+        <v-card>
+          <v-card-title>차단(탈퇴) 사유 입력</v-card-title>
+          <v-card-text>
+            <v-textarea
+              v-model="block_reason"
+              label="사유를 입력해주세요"
+              outlined
+              hide-details
+            />
+          </v-card-text>
+          <v-card-actions v-show="!is_loading">
+            <v-spacer />
+            <v-btn
+              color="error"
+              text
+              @click="confirmBlock"
+            >
+              차단
+            </v-btn>
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancelBlock"
+            >
+              취소
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+
+    <v-row>
+      <v-dialog
+        v-model="show_confirm_block_dialog"
+        max-width="500px"
+        persistent
+      >
+        <v-card>
+          <v-card-title class="text-h6">
+            '{{ nickname }}' 계정과 본인인증 정보, 같은 본인인증 정보를 사용하는 모든 계정을 차단합니다.
+          </v-card-title>
+          <v-card-actions v-show="!is_loading">
+            <v-spacer />
+            <v-btn
+              color="error"
+              text
+              @click="blockMember"
+            >
+              차단
+            </v-btn>
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancelBlock"
+            >
+              취소
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
   </div>
 </template>
 
@@ -274,6 +349,9 @@ export default {
       user_type: null,
       show_popup_dialog: false,
       show_confirm_reset_password_dialog: false,
+      show_block_reason_dialog: false,
+      show_confirm_block_dialog: false,
+      block_reason: '',
     }
   },
 
@@ -382,6 +460,51 @@ export default {
       this.user_type = null
       this.show_popup_dialog = false
       this.show_confirm_reset_password_dialog = false
+      this.show_block_reason_dialog = false
+      this.show_confirm_block_dialog = false
+      this.block_reason = ''
+    },
+
+    showBlockReasonDialog() {
+      this.show_popup_dialog = false
+      this.show_block_reason_dialog = true
+    },
+
+    cancelBlock() {
+      this.show_block_reason_dialog = false
+      this.show_confirm_block_dialog = false
+      this.block_reason = ''
+      this.show_popup_dialog = true
+    },
+
+    confirmBlock() {
+      if (this.block_reason.length === 0) {
+        this.notifyError('차단 사유를 입력해주세요.')
+        return
+      }
+      this.show_block_reason_dialog = false
+      this.show_confirm_block_dialog = true
+    },
+
+    async blockMember() {
+      this.is_loading = true
+      try {
+        const res = await api.blockMember(this.member.id, this.block_reason)
+        if (res.status === 200 && res.data.success === true) {
+          this.notifySuccess('차단되었습니다.')
+          this.cancel()
+
+          this.page = 1
+          await this.getMemberList()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+
+        this.is_loading = false
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      }
     },
 
     async modify() {