Merge pull request 'test' (#1) from test into main

Reviewed-on: #1

package-lock.json

@@ -10,7 +10,6 @@
       "dependencies": {
         "core-js": "^3.6.5",
         "vue": "^2.6.11",
-        "vue-excel-xlsx": "^1.2.2",
         "vue-router": "^3.2.0",
         "vue2-editor": "^2.10.3",
         "vuedraggable": "^2.24.3",
@@ -2760,21 +2759,6 @@
         "node": ">= 0.12.0"
       }
     },
-    "node_modules/adler-32": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
-      "integrity": "sha512-/vUqU/UY4MVeFsg+SsK6c+/05RZXIHZMGJA+PX5JyWI0ZRcBpupnRuPLU/NXXoFwMYCPCoxIfElM2eS+DUXCqQ==",
-      "dependencies": {
-        "exit-on-epipe": "~1.0.1",
-        "printj": "~1.1.0"
-      },
-      "bin": {
-        "adler32": "bin/adler32.njs"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -3876,26 +3860,6 @@
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
       "dev": true
     },
-    "node_modules/cfb": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
-      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
-      "dependencies": {
-        "adler-32": "~1.3.0",
-        "crc-32": "~1.2.0"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/cfb/node_modules/adler-32": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
-      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -4322,26 +4286,6 @@
         "node": ">= 4.0"
       }
     },
-    "node_modules/codepage": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
-      "integrity": "sha512-iz3zJLhlrg37/gYRWgEPkaFTtzmnEv1h+r7NgZum2lFElYQPi0/5bnmuDfODHxfp0INEfnRqyfyeIJDbb7ahRw==",
-      "dependencies": {
-        "commander": "~2.14.1",
-        "exit-on-epipe": "~1.0.1"
-      },
-      "bin": {
-        "codepage": "bin/codepage.njs"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/codepage/node_modules/commander": {
-      "version": "2.14.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
-      "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw=="
-    },
     "node_modules/collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -4405,7 +4349,8 @@
     "node_modules/commander": {
       "version": "2.17.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
-      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
+      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
+      "dev": true
     },
     "node_modules/commondir": {
       "version": "1.0.1",
@@ -4848,17 +4793,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/crc-32": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
-      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
-      "bin": {
-        "crc32": "bin/crc32.njs"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -6382,14 +6316,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/exit-on-epipe": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
-      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw==",
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -7027,14 +6953,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/frac": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
-      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -11283,17 +11201,6 @@
         "renderkid": "^2.0.4"
       }
     },
-    "node_modules/printj": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
-      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==",
-      "bin": {
-        "printj": "bin/printj.njs"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -12920,20 +12827,6 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
-    "node_modules/ssf": {
-      "version": "0.10.3",
-      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.10.3.tgz",
-      "integrity": "sha512-pRuUdW0WwyB2doSqqjWyzwCD6PkfxpHAHdZp39K3dp/Hq7f+xfMwNAWIi16DyrRg4gg9c/RvLYkJTSawTPTm1w==",
-      "dependencies": {
-        "frac": "~1.1.2"
-      },
-      "bin": {
-        "ssf": "bin/ssf.njs"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/sshpk": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
@@ -14439,14 +14332,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/vue-excel-xlsx": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/vue-excel-xlsx/-/vue-excel-xlsx-1.2.2.tgz",
-      "integrity": "sha512-/kXVlfoeiScN792FwkzybylLT7zv94vTgpX1PQeUK0rl+wUci+Z+W1W1ULxiiJX4dHN3gWAIOIpadz+8qNe8Gg==",
-      "dependencies": {
-        "xlsx": "^0.14.4"
-      }
-    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -15657,26 +15542,6 @@
         "async-limiter": "~1.0.0"
       }
     },
-    "node_modules/xlsx": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.14.5.tgz",
-      "integrity": "sha512-s/5f4/mjeWREmIWZ+HtDfh/rnz51ar+dZ4LWKZU3u9VBx2zLdSIWTdXgoa52/pnZ9Oe/Vu1W1qzcKzLVe+lq4w==",
-      "dependencies": {
-        "adler-32": "~1.2.0",
-        "cfb": "^1.1.2",
-        "codepage": "~1.14.0",
-        "commander": "~2.17.1",
-        "crc-32": "~1.2.0",
-        "exit-on-epipe": "~1.0.1",
-        "ssf": "~0.10.2"
-      },
-      "bin": {
-        "xlsx": "bin/xlsx.njs"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -17944,15 +17809,6 @@
       "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
       "dev": true
     },
-    "adler-32": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
-      "integrity": "sha512-/vUqU/UY4MVeFsg+SsK6c+/05RZXIHZMGJA+PX5JyWI0ZRcBpupnRuPLU/NXXoFwMYCPCoxIfElM2eS+DUXCqQ==",
-      "requires": {
-        "exit-on-epipe": "~1.0.1",
-        "printj": "~1.1.0"
-      }
-    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -18846,22 +18702,6 @@
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
       "dev": true
     },
-    "cfb": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
-      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
-      "requires": {
-        "adler-32": "~1.3.0",
-        "crc-32": "~1.2.0"
-      },
-      "dependencies": {
-        "adler-32": {
-          "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
-          "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A=="
-        }
-      }
-    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -19195,22 +19035,6 @@
         "q": "^1.1.2"
       }
     },
-    "codepage": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
-      "integrity": "sha512-iz3zJLhlrg37/gYRWgEPkaFTtzmnEv1h+r7NgZum2lFElYQPi0/5bnmuDfODHxfp0INEfnRqyfyeIJDbb7ahRw==",
-      "requires": {
-        "commander": "~2.14.1",
-        "exit-on-epipe": "~1.0.1"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.14.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
-          "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw=="
-        }
-      }
-    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -19268,7 +19092,8 @@
     "commander": {
       "version": "2.17.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
-      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
+      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
+      "dev": true
     },
     "commondir": {
       "version": "1.0.1",
@@ -19616,11 +19441,6 @@
         "parse-json": "^4.0.0"
       }
     },
-    "crc-32": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
-      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ=="
-    },
     "create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -20830,11 +20650,6 @@
         "strip-eof": "^1.0.0"
       }
     },
-    "exit-on-epipe": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
-      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
-    },
     "expand-brackets": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -21337,11 +21152,6 @@
       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
       "dev": true
     },
-    "frac": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
-      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
-    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -24735,11 +24545,6 @@
         "renderkid": "^2.0.4"
       }
     },
-    "printj": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
-      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
-    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -26095,14 +25900,6 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
-    "ssf": {
-      "version": "0.10.3",
-      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.10.3.tgz",
-      "integrity": "sha512-pRuUdW0WwyB2doSqqjWyzwCD6PkfxpHAHdZp39K3dp/Hq7f+xfMwNAWIi16DyrRg4gg9c/RvLYkJTSawTPTm1w==",
-      "requires": {
-        "frac": "~1.1.2"
-      }
-    },
     "sshpk": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
@@ -27311,14 +27108,6 @@
         }
       }
     },
-    "vue-excel-xlsx": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/vue-excel-xlsx/-/vue-excel-xlsx-1.2.2.tgz",
-      "integrity": "sha512-/kXVlfoeiScN792FwkzybylLT7zv94vTgpX1PQeUK0rl+wUci+Z+W1W1ULxiiJX4dHN3gWAIOIpadz+8qNe8Gg==",
-      "requires": {
-        "xlsx": "^0.14.4"
-      }
-    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -28283,20 +28072,6 @@
         "async-limiter": "~1.0.0"
       }
     },
-    "xlsx": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.14.5.tgz",
-      "integrity": "sha512-s/5f4/mjeWREmIWZ+HtDfh/rnz51ar+dZ4LWKZU3u9VBx2zLdSIWTdXgoa52/pnZ9Oe/Vu1W1qzcKzLVe+lq4w==",
-      "requires": {
-        "adler-32": "~1.2.0",
-        "cfb": "^1.1.2",
-        "codepage": "~1.14.0",
-        "commander": "~2.17.1",
-        "crc-32": "~1.2.0",
-        "exit-on-epipe": "~1.0.1",
-        "ssf": "~0.10.2"
-      }
-    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

package.json

@@ -12,7 +12,6 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
-    "vue-excel-xlsx": "^1.2.2",
     "vue-router": "^3.2.0",
     "vue2-editor": "^2.10.3",
     "vuedraggable": "^2.24.3",

src/api/calculate.js

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+
+async function getCalculateLive(startDate, endDate) {
+    return Vue.axios.get('/creator-admin/calculate/live?startDateStr=' + startDate + '&endDateStr=' + endDate);
+}
+
+export { getCalculateLive }

src/main.js

@@ -7,7 +7,6 @@ import store from './store'
 
 import VuetifyDialog from 'vuetify-dialog'
 import 'vuetify-dialog/dist/vuetify-dialog.css'
-import VueExcelXlsx from "vue-excel-xlsx";
 
 Vue.config.productionTip = false
 Vue.use(VuetifyDialog, {
@@ -16,8 +15,6 @@ Vue.use(VuetifyDialog, {
     }
 })
 
-Vue.use(VueExcelXlsx);
-
 new Vue({
     vuetify,
     router,

src/router/index.js

@@ -19,7 +19,12 @@ const routes = [
                 path: '/content/list',
                 name: 'ContentList',
                 component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentList.vue')
-            }
+            },
+            {
+                path: '/calculate/live',
+                name: 'CalculateLive',
+                component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateLive.vue')
+            },
         ]
     },
     {

src/views/Calculate/CalculateLive.vue

@@ -0,0 +1,302 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>라이브 정산</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col cols="2">
+          <datetime
+            v-model="start_date"
+            class="datepicker"
+            format="YYYY-MM-DD"
+          />
+        </v-col>
+
+        <v-col cols="1">
+          ~
+        </v-col>
+
+        <v-col cols="2">
+          <datetime
+            v-model="end_date"
+            class="datepicker"
+            format="YYYY-MM-DD"
+          />
+        </v-col>
+
+        <v-col cols="1" />
+
+        <v-col cols="2">
+          <v-btn
+            block
+            color="#9970ff"
+            dark
+            depressed
+            @click="getCalculateLive"
+          >
+            조회
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="items"
+            :loading="is_loading"
+            :items-per-page="-1"
+            class="elevation-1"
+            hide-default-footer
+          >
+            <template v-slot:item.email="{ item }">
+              {{ item.email }}
+            </template>
+
+            <template v-slot:item.nickname="{ item }">
+              {{ item.nickname }}
+            </template>
+
+            <template v-slot:item.date="{ item }">
+              {{ item.date }}
+            </template>
+
+            <template v-slot:item.title="{ item }">
+              {{ item.title }}
+            </template>
+
+            <template v-slot:item.entranceFee="{ item }">
+              {{ item.entranceFee.toLocaleString() }} 캔
+            </template>
+
+            <template v-slot:item.canUsageStr="{ item }">
+              {{ item.canUsageStr }}
+            </template>
+
+            <template v-slot:item.totalAmount="{ item }">
+              {{ item.totalAmount.toLocaleString() }} 캔
+            </template>
+
+            <template v-slot:item.totalKrw="{ item }">
+              {{ item.totalKrw.toLocaleString() }} 원
+            </template>
+
+            <template v-slot:item.paymentFee="{ item }">
+              {{ item.paymentFee.toLocaleString() }} 원
+            </template>
+
+            <template v-slot:item.settlementAmount="{ item }">
+              {{ item.settlementAmount.toLocaleString() }} 원
+            </template>
+
+            <template v-slot:item.tax="{ item }">
+              {{ item.tax.toLocaleString() }} 원
+            </template>
+
+            <template v-slot:item.depositAmount="{ item }">
+              {{ item.depositAmount.toLocaleString() }} 원
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import * as api from "@/api/calculate";
+import datetime from 'vuejs-datetimepicker';
+
+export default {
+  name: "CalculateLive",
+  components: {datetime},
+
+  data() {
+    return {
+      is_loading: false,
+      start_date: null,
+      end_date: null,
+      items: [],
+      columns: [
+        {
+          label: "크리에이터",
+          field: "nickname",
+        },
+        {
+          label: "날짜",
+          field: "date",
+        },
+        {
+          label: "제목",
+          field: "title",
+        },
+        {
+          label: "구분",
+          field: "canUsageStr",
+        },
+        {
+          label: "입장캔",
+          field: "entranceFee",
+        },
+        {
+          label: "인원",
+          field: "numberOfPeople",
+        },
+        {
+          label: "합계(캔)",
+          field: "totalAmount",
+        },
+        {
+          label: "원화",
+          field: "totalKrw",
+        },
+        {
+          label: "결제수수료(6.6%)",
+          field: "paymentFee",
+        },
+        {
+          label: "정산금액",
+          field: "settlementAmount",
+        },
+        {
+          label: "원천세(3.3%)",
+          field: "tax",
+        },
+        {
+          label: "입금액",
+          field: "depositAmount",
+        },
+      ],
+      headers: [
+        {
+          text: '크리에이터',
+          align: 'center',
+          sortable: false,
+          value: 'nickname',
+        },
+        {
+          text: '날짜',
+          align: 'center',
+          sortable: false,
+          value: 'date',
+        },
+        {
+          text: '제목',
+          sortable: false,
+          value: 'title',
+        },
+        {
+          text: '구분',
+          align: 'center',
+          sortable: false,
+          value: 'canUsageStr',
+        },
+        {
+          text: '입장캔',
+          align: 'center',
+          sortable: false,
+          value: 'entranceFee',
+        },
+        {
+          text: '인원',
+          align: 'center',
+          sortable: false,
+          value: 'numberOfPeople',
+        },
+        {
+          text: '합계(캔)',
+          align: 'center',
+          sortable: false,
+          value: 'totalAmount',
+        },
+        {
+          text: '원화',
+          align: 'center',
+          sortable: false,
+          value: 'totalKrw',
+        },
+        {
+          text: '수수료\n(6.6%)',
+          align: 'center',
+          sortable: false,
+          value: 'paymentFee',
+        },
+        {
+          text: '정산금액',
+          align: 'center',
+          sortable: false,
+          value: 'settlementAmount',
+        },
+        {
+          text: '원천세\n(3.3%)',
+          align: 'center',
+          sortable: false,
+          value: 'tax',
+        },
+        {
+          text: '입금액',
+          align: 'center',
+          sortable: false,
+          value: 'depositAmount',
+        }
+      ],
+    }
+  },
+
+  async created() {
+    const date = new Date();
+    const firstDate = new Date(date.getFullYear(), date.getMonth(), 1);
+    const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+
+    let firstDateMonth = (firstDate.getMonth() + 1).toString()
+    if (firstDateMonth.length < 2) {
+      firstDateMonth = '0' + firstDateMonth
+    }
+
+
+    let lastDateMonth = (lastDate.getMonth() + 1).toString()
+    if (lastDateMonth.length < 2) {
+      lastDateMonth = '0' + lastDateMonth
+    }
+
+    this.start_date = firstDate.getFullYear() + '-' + firstDateMonth + '-0' + firstDate.getDate()
+    this.end_date = lastDate.getFullYear() + '-' + lastDateMonth + '-' + lastDate.getDate()
+
+    await this.getCalculateLive()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    async getCalculateLive() {
+      this.is_loading = true
+
+      try {
+        const res = await api.getCalculateLive(this.start_date, this.end_date)
+        if (res.status === 200 && res.data.success === true) {
+          this.items = res.data.data
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+
+        this.is_loading = false
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      }
+    }
+  }
+}
+</script>