Merge pull request 'feat(admin-can-status): 화폐단위 추가, 충전금액에 NumberFormat style: currency 적용하여 화폐단위 표시' (#80) from test into main

Reviewed-on: #80

src/api/charge_status.js

@@ -4,8 +4,11 @@ async function getChargeStatus(startDate, endDate) {
     return Vue.axios.get('/admin/charge/status?startDateStr=' + startDate + '&endDateStr=' + endDate);
 }
 
-async function getChargeStatusDetail(startDate, paymentGateway) {
-    return Vue.axios.get('/admin/charge/status/detail?startDateStr=' + startDate + '&paymentGateway=' + paymentGateway);
+async function getChargeStatusDetail(startDate, paymentGateway, currency) {
+    return Vue.axios.get('/admin/charge/status/detail?startDateStr=' + startDate
+      + '&paymentGateway=' + paymentGateway
+      + '&currency=' + currency
+    );
 }
 
 export { getChargeStatus, getChargeStatusDetail }

src/views/Can/CanStatus.vue

@@ -62,7 +62,7 @@
             </template>
 
             <template v-slot:item.chargeAmount="{ item }">
-              {{ item.chargeAmount.toLocaleString() }} 원
+              {{ formatMoney(item.chargeAmount, item.currency) }}
             </template>
 
             <template v-slot:item.locale="{ item }">
@@ -107,7 +107,7 @@
               </template>
 
               <template v-slot:item.amount="{ item }">
-                {{ item.amount.toLocaleString() }} 원
+                {{ formatMoney(item.amount, item.locale) }}
               </template>
 
               <template v-slot:item.datetime="{ item }">
@@ -204,6 +204,12 @@ export default {
           sortable: false,
           value: 'chargeCount',
         },
+        {
+          text: '화폐단위',
+          align: 'center',
+          sortable: false,
+          value: 'currency',
+        },
         {
           text: 'PG',
           sortable: false,
@@ -248,6 +254,15 @@ export default {
       this.show_popup_dialog = false
     },
 
+    formatMoney(price, currencyCode, locale = navigator.language) {
+      const formatted = new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currencyCode
+      }).format(price);
+
+      return formatted.replace(/([^\d\s])(\d)/, '$1 $2');
+    },
+
     async getChargeStatus() {
       this.is_loading = true
 
@@ -271,7 +286,7 @@ export default {
         this.is_loading = true
 
         try {
-          const res = await api.getChargeStatusDetail(value.date, value.pg)
+          const res = await api.getChargeStatusDetail(value.date, value.pg, value.currency)
           if (res.status === 200 && res.data.success === true) {
             this.detail_items = res.data.data
             this.show_popup_dialog = true