feat(charge-refund): 캔 환불 프로세스 추가

src/api/charge_status.js

@@ -11,4 +11,8 @@ async function getChargeStatusDetail(startDate, paymentGateway, currency) {
     );
 }
 
-export { getChargeStatus, getChargeStatusDetail }
+async function refundCharge(chargeId) {
+    return Vue.axios.post('/admin/charge/refund', { chargeId });
+}
+
+export { getChargeStatus, getChargeStatusDetail, refundCharge }

src/views/Can/CanStatus.vue

@@ -94,10 +94,6 @@
               class="elevation-1"
               hide-default-footer
             >
-              <template v-slot:item.accountId="{ item }">
-                {{ item.accountId }}
-              </template>
-
               <template v-slot:item.nickname="{ item }">
                 {{ item.nickname }}
               </template>
@@ -113,6 +109,16 @@
               <template v-slot:item.datetime="{ item }">
                 {{ item.datetime }}
               </template>
+
+              <template v-slot:item.refund="{ item }">
+                <v-btn
+                  color="error"
+                  small
+                  @click="confirmRefund(item)"
+                >
+                  환불
+                </v-btn>
+              </template>
             </v-data-table>
             <v-card-actions v-show="!is_loading">
               <v-spacer />
@@ -146,14 +152,9 @@ export default {
       end_date: null,
       items: [],
       detail_items: null,
+      selected_date_item: null,
       show_popup_dialog: false,
       detail_headers: [
-        {
-          text: 'no',
-          align: 'center',
-          sortable: false,
-          value: 'accountId',
-        },
         {
           text: '닉네임',
           align: 'center',
@@ -184,6 +185,12 @@ export default {
           sortable: false,
           value: 'datetime',
         },
+        {
+          text: '환불',
+          align: 'center',
+          sortable: false,
+          value: 'refund',
+        },
       ],
       headers: [
         {
@@ -284,6 +291,7 @@ export default {
     async getChargeStatusDetail(value) {
       if (value.date !== '합계') {
         this.is_loading = true
+        this.selected_date_item = value
 
         try {
           const res = await api.getChargeStatusDetail(value.date, value.pg, value.currency)
@@ -300,6 +308,45 @@ export default {
           this.is_loading = false
         }
       }
+    },
+
+    async confirmRefund(item) {
+      let canText = `${item.chargeCan}캔`
+      if (item.rewardCan > 0) {
+        canText += ` + ${item.rewardCan}캔`
+      }
+
+      const confirm = await this.$dialog.confirm({
+        title: '환불 확인',
+        text: `${item.nickname}님의 ${canText}을 환불하시겠습니까?`,
+        actions: {
+          false: '취소',
+          true: '환불'
+        }
+      })
+
+      if (confirm) {
+        await this.refundCharge(item.chargeId)
+      }
+    },
+
+    async refundCharge(chargeId) {
+      this.is_loading = true
+
+      try {
+        const res = await api.refundCharge(chargeId)
+        if (res.status === 200 && res.data.success === true) {
+          this.notifySuccess('환불이 완료되었습니다.')
+          await this.getChargeStatusDetail(this.selected_date_item)
+          await this.getChargeStatus()
+        } else {
+          this.notifyError(res.data.message || '환불 처리 중 오류가 발생했습니다.')
+        }
+      } catch (e) {
+        this.notifyError('환불 처리 중 오류가 발생했습니다.')
+      } finally {
+        this.is_loading = false
+      }
     }
   }
 }