first commit

.env.development

@@ -0,0 +1,2 @@
+VUE_APP_API_URL=https://test-api.sodalive.net
+NODE_ENV=development

.env.production

@@ -0,0 +1,2 @@
+VUE_APP_API_URL=https://api.sodalive.net
+NODE_ENV=production

.gitignore

@@ -0,0 +1,221 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
+# Created by https://www.toptal.com/developers/gitignore/api/webstorm,visualstudiocode,vuejs,macos,windows
+# Edit at https://www.toptal.com/developers/gitignore?templates=webstorm,visualstudiocode,vuejs,macos,windows
+
+### macOS ###
+# General
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+# Support for Project snippet scope
+
+### Vuejs ###
+# Recommended template: Node.gitignore
+
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
+
+### WebStorm ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# AWS User-specific
+.idea/**/aws.xml
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# SonarLint plugin
+.idea/sonarlint/
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+### WebStorm Patch ###
+# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
+
+# *.iml
+# modules.xml
+# .idea/misc.xml
+# *.ipr
+
+# Sonarlint plugin
+# https://plugins.jetbrains.com/plugin/7973-sonarlint
+.idea/**/sonarlint/
+
+# SonarQube Plugin
+# https://plugins.jetbrains.com/plugin/7238-sonarqube-community-plugin
+.idea/**/sonarIssues.xml
+
+# Markdown Navigator plugin
+# https://plugins.jetbrains.com/plugin/7896-markdown-navigator-enhanced
+.idea/**/markdown-navigator.xml
+.idea/**/markdown-navigator-enh.xml
+.idea/**/markdown-navigator/
+
+# Cache file creation bug
+# See https://youtrack.jetbrains.com/issue/JBR-2257
+.idea/$CACHE_FILE$
+
+# CodeStream plugin
+# https://plugins.jetbrains.com/plugin/12206-codestream
+.idea/codestream.xml
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.toptal.com/developers/gitignore/api/webstorm,visualstudiocode,vuejs,macos,windows

README.md

@@ -0,0 +1,24 @@
+# yozm-admin
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package.json

@@ -0,0 +1,63 @@
+{
+  "name": "yozm-admin",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve_local": "vue-cli-service serve --mode local --port 8888",
+    "serve": "vue-cli-service serve --port 8888",
+    "build": "vue-cli-service build",
+    "build_development": "vue-cli-service build --mode development",
+    "lint": "vue-cli-service lint"
+  },
+  "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",
+    "vuejs-datetimepicker": "^1.1.13",
+    "vuetify": "2.6.10",
+    "vuetify-audio": "^0.3.3",
+    "vuetify-dialog": "^2.0.17",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "axios": "0.21.2",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "sass": "~1.32.0",
+    "sass-loader": "^10.0.0",
+    "vue-cli-plugin-axios": "~0.0.4",
+    "vue-cli-plugin-vuetify": "~2.4.5",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.7.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/recommended",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {
+      "no-unused-vars": "off"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-app>
+    <v-app-bar
+      app
+      clipped-left
+      color="primary"
+      dark
+    >
+      <v-spacer />
+      <v-toolbar-title>요즘 관리자</v-toolbar-title>
+      <v-spacer />
+    </v-app-bar>
+
+    <v-main>
+      <router-view />
+    </v-main>
+  </v-app>
+</template>
+
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
+}
+</style>

src/api/audio_content.js

@@ -0,0 +1,74 @@
+import Vue from 'vue';
+
+async function getAudioContentList(page) {
+    return Vue.axios.get(
+        "/admin/audio-content/list?page=" + (page - 1) +
+        "&size=10"
+    )
+}
+
+async function searchAudioContent(searchWord, page){
+    return Vue.axios.get(
+        "/admin/audio-content/search?search_word=" + searchWord +
+        "&page=" + (page - 1) +
+        "&size=10"
+    )
+}
+
+async function modifyAudioContent(request) {
+    return Vue.axios.put("/admin/audio-content", request)
+}
+
+async function getBannerList() {
+    return Vue.axios.get("/admin/audio-content/banner")
+}
+
+async function saveBanner(formData) {
+    return Vue.axios.post('/admin/audio-content/banner', formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    });
+}
+
+async function modifyBanner(formData) {
+    return Vue.axios.put('/admin/audio-content/banner', formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    });
+}
+
+async function updateBannerOrders(ids) {
+    return Vue.axios.put('/admin/audio-content/banner/orders', {ids: ids})
+}
+
+async function getCurations() {
+    return Vue.axios.get("/admin/audio-content/curation")
+}
+
+async function saveCuration(request) {
+    return Vue.axios.post("/admin/audio-content/curation", request)
+}
+
+async function modifyCuration(request) {
+    return Vue.axios.put("/admin/audio-content/curation", request)
+}
+
+async function updateCurationOrders(ids) {
+    return Vue.axios.put('/admin/audio-content/curation/orders', {ids: ids})
+}
+
+export {
+    getAudioContentList,
+    searchAudioContent,
+    modifyAudioContent,
+    getBannerList,
+    saveBanner,
+    modifyBanner,
+    updateBannerOrders,
+    getCurations,
+    saveCuration,
+    modifyCuration,
+    updateCurationOrders
+}

src/api/audio_content_theme.js

@@ -0,0 +1,23 @@
+import Vue from 'vue';
+
+async function enrollment(formData) {
+    return Vue.axios.post('/admin/audio-content/theme', formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    });
+}
+
+async function getThemes() {
+    return Vue.axios.get('/admin/audio-content/theme');
+}
+
+async function deleteTheme(themeId)  {
+    return Vue.axios.delete('/admin/audio-content/theme/' + themeId)
+}
+
+async function updateThemeOrders(ids) {
+    return Vue.axios.put('/admin/audio-content/theme/orders', { ids: ids })
+}
+
+export { enrollment, getThemes, deleteTheme, updateThemeOrders }

src/api/calculate.js

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

src/api/charge_event.js

@@ -0,0 +1,17 @@
+import Vue from 'vue';
+
+async function save(title, startDateString, endDateString, availableCount, addPercent) {
+    const request = {title, startDateString, endDateString, availableCount, addPercent}
+    return Vue.axios.post("/event/charge", request)
+}
+
+async function modify(id, title, startDateString, endDateString, availableCount, addPercent, isActive) {
+    const request = {id, title, startDateString, endDateString, availableCount, addPercent, isActive}
+    return Vue.axios.put("/event/charge", request)
+}
+
+async function getChargeEventList() {
+    return Vue.axios.get('/event/charge/list')
+}
+
+export {save, modify, getChargeEventList}

src/api/charge_status.js

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+
+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);
+}
+
+export { getChargeStatus, getChargeStatusDetail }

src/api/coin.js

@@ -0,0 +1,27 @@
+import Vue from 'vue';
+
+async function deleteCoin(id) {
+    return Vue.axios.delete('/coin/' + id);
+}
+
+async function modifyCoin(id, coin, rewardCoin, price) {
+    const request = {id: id, coin: coin, rewardCoin: rewardCoin, price: price}
+    return Vue.axios.put('/coin', request);
+}
+
+
+async function getCoins() {
+    return Vue.axios.get('/coin');
+}
+
+async function insertCoin(coin, rewardCoin, price) {
+    const request = {coin: coin, rewardCoin: rewardCoin, price: price}
+    return Vue.axios.post('/coin', request);
+}
+
+async function paymentCoin(coin, method, account_id) {
+    const request = {accountId: account_id, method: method, coin: coin}
+    return Vue.axios.post('/admin/coin/charge', request)
+}
+
+export {getCoins, insertCoin, modifyCoin, deleteCoin, paymentCoin}

src/api/counselor_situation.js

@@ -0,0 +1,27 @@
+import Vue from 'vue';
+
+async function createSituation(formData) {
+    return Vue.axios.post('/recommend_situation', formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    })
+}
+
+async function getSituationList() {
+    return Vue.axios.get('/recommend_situation/admin')
+}
+
+async function modifySituation(id, formData) {
+    return Vue.axios.put('/recommend_situation/' + id, formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    })
+}
+
+async function deleteSituation(id) {
+    return Vue.axios.delete('/recommend_situation/' + id)
+}
+
+export { createSituation, getSituationList, modifySituation, deleteSituation }

src/api/counselor_tag.js

@@ -0,0 +1,31 @@
+import Vue from 'vue';
+
+async function enrollment(formData) {
+    return Vue.axios.post('/account/counselor/tag', formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    });
+}
+
+async function getTags() {
+    return Vue.axios.get('/account/counselor/tag');
+}
+
+async function deleteTag(tagId)  {
+    return Vue.axios.delete('/account/counselor/tag/' + tagId)
+}
+
+async function modifyTag(tagId, formData) {
+    return Vue.axios.put('/account/counselor/tag/' + tagId, formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    })
+}
+
+async function updateTagOrders(ids) {
+    return Vue.axios.put('/account/counselor/tag/orders', { ids: ids })
+}
+
+export { enrollment, getTags, deleteTag, modifyTag, updateTagOrders }

src/api/event.js

@@ -0,0 +1,27 @@
+import Vue from 'vue';
+
+async function save(formData) {
+    return Vue.axios.post('/event', formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    });
+}
+
+async function modify(formData) {
+    return Vue.axios.put('/event', formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    });
+}
+
+async function deleteEvent(id) {
+    return Vue.axios.delete("/event/" + id)
+}
+
+async function getEvents() {
+    return Vue.axios.get("/event")
+}
+
+export {save, modify, deleteEvent, getEvents}

src/api/explorer.js

@@ -0,0 +1,19 @@
+import Vue from 'vue';
+
+async function getExplorerSections(page) {
+    return Vue.axios.get("/admin/explorer?page=" + (page - 1) + "&size=20");
+}
+
+async function updateExplorerSectionsOrders(firstOrders, ids) {
+    return Vue.axios.put('/admin/explorer/orders', { firstOrders: firstOrders, ids: ids })
+}
+
+async function createExplorerSection(item) {
+    return Vue.axios.post("/admin/explorer", item);
+}
+
+async function updateExplorerSection(item) {
+    return Vue.axios.put("/admin/explorer", item)
+}
+
+export { createExplorerSection, updateExplorerSection, getExplorerSections, updateExplorerSectionsOrders }

src/api/faq.js

@@ -0,0 +1,24 @@
+import Vue from 'vue';
+
+async function save(question, answer, category) {
+    const request = {question: question, answer: answer, category: category}
+    return Vue.axios.post("/faq", request)
+}
+
+async function modify(request) {
+    return Vue.axios.put("/faq", request)
+}
+
+async function deleteFaq(id) {
+    return Vue.axios.delete("/faq/" + id)
+}
+
+async function getFaqs(category) {
+    return Vue.axios.get("/faq?category=" + category)
+}
+
+async function getCategories() {
+    return Vue.axios.get("/faq/category")
+}
+
+export {save, modify, deleteFaq, getCategories, getFaqs}

src/api/firebase_dynamic_link.js

@@ -0,0 +1,73 @@
+import axios from "axios";
+
+const url = "https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=AIzaSyAOY4pgYs2swcllYCWjJF3bZUkNC6LWPqI"
+
+async function shareCreatorChannel(channelInfo, utmSource, utmMedium, utmCampaign) {
+    const data = {
+        "dynamicLinkInfo": {
+            "domainUriPrefix": "https://yozm.page.link",
+            "link": "https://yozm.day/?channel_id=" + channelInfo.id,
+            "androidInfo": {
+                "androidPackageName": "kr.co.vividnext.sodalive",
+            },
+            "iosInfo": {
+                "iosBundleId": "kr.co.vividnext.yozm",
+                "iosAppStoreId": "1630284226"
+            },
+            "analyticsInfo": {
+                "googlePlayAnalytics": {
+                    "utmSource": utmSource,
+                    "utmMedium": utmMedium,
+                    "utmCampaign": utmCampaign,
+                },
+            },
+            "socialMetaTagInfo": {
+                "socialTitle": "요즘라이브",
+                "socialDescription": "요즘라이브 " + channelInfo.nickname + "님의 채널입니다.",
+                "socialImageLink": channelInfo.profileUrl
+            }
+        }
+    }
+
+    return axios.post(url, data, {
+        headers: {
+            "Content-Type": "application/json",
+        },
+    });
+}
+
+async function shareAudioContent(audioContent, utmSource, utmMedium, utmCampaign) {
+    const data = {
+        "dynamicLinkInfo": {
+            "domainUriPrefix": "https://yozm.page.link",
+            "link": "https://yozm.day/?audio_content_id=" + audioContent.audioContentId,
+            "androidInfo": {
+                "androidPackageName": "kr.co.vividnext.yozm",
+            },
+            "iosInfo": {
+                "iosBundleId": "kr.co.vividnext.yozm",
+                "iosAppStoreId": "1630284226"
+            },
+            "analyticsInfo": {
+                "googlePlayAnalytics": {
+                    "utmSource": utmSource,
+                    "utmMedium": utmMedium,
+                    "utmCampaign": utmCampaign,
+                },
+            },
+            "socialMetaTagInfo": {
+                "socialTitle": audioContent.title + " - " + audioContent.creatorNickname,
+                "socialDescription": "지금 요즘라이브에서 이 콘텐츠 감상하기",
+                "socialImageLink": audioContent.coverImageUrl
+            }
+        }
+    }
+
+    return axios.post(url, data, {
+        headers: {
+            "Content-Type": "application/json",
+        },
+    });
+}
+
+export { shareCreatorChannel, shareAudioContent }

src/api/live.js

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+
+async function getLive() {
+    return Vue.axios.get('/admin/live')
+}
+
+export { getLive }

src/api/live_tag.js

@@ -0,0 +1,31 @@
+import Vue from 'vue';
+
+async function enrollment(formData) {
+    return Vue.axios.post('/suda/tag', formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    });
+}
+
+async function getTags() {
+    return Vue.axios.get('/suda/tag');
+}
+
+async function deleteTag(tagId)  {
+    return Vue.axios.delete('/suda/tag/' + tagId)
+}
+
+async function modifyTag(tagId, formData) {
+    return Vue.axios.put('/suda/tag/' + tagId, formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    })
+}
+
+async function updateTagOrders(ids) {
+    return Vue.axios.put('/suda/tag/orders', { ids: ids })
+}
+
+export { enrollment, getTags, deleteTag, modifyTag, updateTagOrders }

src/api/member.js

@@ -0,0 +1,53 @@
+import Vue from 'vue';
+
+async function login(email, password) {
+    return Vue.axios.post('/member/login', {
+        email,
+        password,
+        isAdmin: true,
+    });
+}
+
+async function getAccountList(page) {
+    return Vue.axios.get(
+        "/admin/account/list?page=" + (page - 1) +
+        "&size=20"
+    )
+}
+
+async function searchAccount(searchWord, page) {
+    return Vue.axios.get(
+        "/admin/account/search?search_word=" + searchWord +
+        "&page=" + (page - 1) +
+        "&size=20"
+    )
+}
+
+async function getCreatorAccountList(page) {
+    return Vue.axios.get(
+        "/admin/account/creator/list?page=" + (page - 1) +
+        "&size=20"
+    )
+}
+
+async function searchCreatorAccount(searchWord, page) {
+    return Vue.axios.get(
+        "/admin/account/creator/search?search_word=" + searchWord +
+        "&page=" + (page - 1) +
+        "&size=20"
+    )
+}
+
+async function updateAccount(id, user_type) {
+    const request = {id, userType: user_type}
+    return Vue.axios.put("/admin/account", request)
+}
+
+export {
+    login,
+    getAccountList,
+    searchAccount,
+    getCreatorAccountList,
+    searchCreatorAccount,
+    updateAccount
+}

src/api/menu.js

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+
+async function getMenus() {
+    return Vue.axios.get("/menu");
+}
+
+export { getMenus }

src/api/notice.js

@@ -0,0 +1,34 @@
+import Vue from 'vue';
+
+async function save(title, content) {
+    const request = {title: title, content: content}
+    return Vue.axios.post("/notice", request)
+}
+
+async function modify(id, title, content) {
+    const request = {id: id}
+
+    if (title.trim().length > 0) {
+        request.title = title
+    }
+
+    if (content.trim().length > 0) {
+        request.content = content
+    }
+
+    return Vue.axios.put("/notice", request)
+}
+
+async function deleteNotice(id) {
+    return Vue.axios.delete("/notice/" + id)
+}
+
+async function getNotices(page) {
+    return Vue.axios.get(
+        "/notice?page=" + (page - 1) +
+        "&size=20" +
+        "&timezone=" + Intl.DateTimeFormat().resolvedOptions().timeZone
+    )
+}
+
+export {save, modify, deleteNotice, getNotices}

src/api/push.js

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+
+async function sendPush(accountIds, title, message) {
+    return Vue.axios.post('/push', {
+        accountIds,
+        title,
+        message
+    })
+}
+
+export { sendPush }

src/api/recommend_counselor.js

@@ -0,0 +1,15 @@
+import Vue from 'vue';
+
+async function addRecommendCounselor(id) {
+    return Vue.axios.post('/recommend_counselor', { id });
+}
+
+async function getRecommendCounselorList() {
+    return Vue.axios.get('/recommend_counselor/admin');
+}
+
+async function deleteRecommendCounselor(id) {
+    return Vue.axios.delete('/recommend_counselor/' + id);
+}
+
+export { addRecommendCounselor, getRecommendCounselorList, deleteRecommendCounselor }

src/api/recommend_suda_creator.js

@@ -0,0 +1,27 @@
+import Vue from 'vue';
+
+async function createRecommendSudaCreator(formData) {
+    return Vue.axios.post('/admin/suda/recommend-suda-creator', formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    });
+}
+
+async function updateRecommendSudaCreator(formData) {
+    return Vue.axios.put('/admin/suda/recommend-suda-creator', formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    });
+}
+
+async function updateRecommendSudaCreatorOrders(firstOrders, ids) {
+    return Vue.axios.put('/admin/suda/recommend-suda-creator/orders', { firstOrders: firstOrders, ids: ids })
+}
+
+async function getRecommendSudaCreator(page) {
+    return Vue.axios.get("/admin/suda/recommend-suda-creator?page=" + (page - 1) + "&size=20");
+}
+
+export { createRecommendSudaCreator, updateRecommendSudaCreator, updateRecommendSudaCreatorOrders, getRecommendSudaCreator };

src/api/stplat.js

@@ -0,0 +1,16 @@
+import Vue from 'vue';
+
+async function getTermsOfService() {
+    return Vue.axios.get("/stplat/terms_of_service")
+}
+
+async function getPrivacyPolicy() {
+    return Vue.axios.get("/stplat/privacy_policy")
+}
+
+async function modify(id, description) {
+    const request = { id, description }
+    return Vue.axios.post("/stplat/modify", request)
+}
+
+export { getTermsOfService, getPrivacyPolicy, modify }

src/components/SideMenu.vue

@@ -0,0 +1,118 @@
+<template>
+  <v-navigation-drawer
+    app
+    clipped
+    color="black"
+    dark
+    permanent
+  >
+    <v-layout
+      column
+      fill-height
+    >
+      <v-list
+        v-for="item in items"
+        :key="item.title"
+        class="py-0"
+      >
+        <div v-if="!item.items">
+          <v-list-item
+            :to="item.route"
+            active-class="blue white--text"
+          >
+            <v-list-item-icon>
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-item-icon>
+
+            <v-list-item-title>{{ item.title }}</v-list-item-title>
+          </v-list-item>
+        </div>
+
+        <v-list-group
+          v-else
+          :prepend-icon="item.icon"
+          no-action
+        >
+          <template v-slot:activator>
+            <v-list-item-title>{{ item.title }}</v-list-item-title>
+          </template>
+
+          <div
+            v-for="childItem in item.items"
+            :key="childItem.title"
+          >
+            <v-list-item
+              :to="childItem.route"
+              active-class="blue white--text"
+            >
+              <v-list-item-title>{{ childItem.title }}</v-list-item-title>
+            </v-list-item>
+          </div>
+        </v-list-group>
+      </v-list>
+      <v-spacer />
+      <v-list>
+        <v-list-item @click="logout">
+          <v-list-item-icon>
+            <v-icon>mdi-logout</v-icon>
+          </v-list-item-icon>
+
+          <v-list-item-title>로그아웃</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-layout>
+  </v-navigation-drawer>
+</template>
+
+<script>
+import * as api from '@/api/menu'
+
+export default {
+  name: "SideMenu",
+  data() {
+    return {
+      isLoading: false,
+      items: [],
+    }
+  },
+
+  async created() {
+    await this.getMenus()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    async getMenus() {
+      this.isLoading = true
+      try {
+        let res = await api.getMenus();
+        if (res.status === 200 && res.data.success === true && res.data.data.length > 0) {
+          this.items = res.data.data
+        } else {
+          this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
+          this.logout();
+        }
+      } catch (e) {
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
+        this.logout();
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    logout() {
+      this.$store.dispatch('accountStore/LOGOUT')
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/layouts/default/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <SideMenu />
+    <router-view />
+  </div>
+</template>
+
+<script>
+import SideMenu from "@/components/SideMenu";
+
+export default {
+  name: "DefaultLayout",
+  components: {
+    SideMenu
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import './plugins/axios'
+import App from './App.vue'
+import vuetify from './plugins/vuetify'
+import router from './router'
+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, {
+    context: {
+        vuetify
+    }
+})
+
+Vue.use(VueExcelXlsx);
+
+new Vue({
+    vuetify,
+    router,
+    store,
+    render: h => h(App)
+}).$mount('#app')

src/plugins/axios.js

@@ -0,0 +1,69 @@
+"use strict";
+
+import Vue from 'vue';
+import axios from "axios";
+
+// Full config:  https://github.com/axios/axios#request-config
+// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
+// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+
+let config = {
+  baseURL: process.env.VUE_APP_API_URL,
+  timeout: 60 * 1000, // Timeout
+  // withCredentials: true, // Check cross-site Access-Control
+};
+
+const _axios = axios.create(config);
+
+_axios.interceptors.request.use(
+  function(config) {
+    // Do something before request is sent
+    return config;
+  },
+  function(error) {
+    // Do something with request error
+    return Promise.reject(error);
+  }
+);
+
+// Add a response interceptor
+_axios.interceptors.response.use(
+  function(response) {
+    // Do something with response data
+    return response;
+  },
+  function(error) {
+    // Do something with response error
+    if (error.response.status === 401) {
+      localStorage.clear()
+      if (location.pathname === '/') {
+        location.reload()
+      } else {
+        location.replace("/")
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
+Plugin.install = function(Vue, options) {
+  Vue.axios = _axios;
+  window.axios = _axios;
+  Object.defineProperties(Vue.prototype, {
+    axios: {
+      get() {
+        return _axios;
+      }
+    },
+    $axios: {
+      get() {
+        return _axios;
+      }
+    },
+  });
+};
+
+Vue.use(Plugin)
+
+export default Plugin;

src/plugins/vuetify.js

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib/framework';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+});

src/router/index.js

@@ -0,0 +1,181 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import store from '@/store';
+
+import DefaultLayout from '@/layouts/default'
+
+Vue.use(VueRouter)
+
+// route level code-splitting
+// this generates a separate chunk (about.[hash].js) for this route
+// which is lazy-loaded when the route is visited.
+const routes = [
+    {
+        path: '/',
+        name: 'DefaultLayout',
+        component: DefaultLayout,
+        children: [
+            {
+                path: '/',
+                name: 'Dashboard',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard/Dashboard.vue')
+            },
+            {
+                path: '/explorer',
+                name: 'Explorer',
+                component: () => import(/* webpackChunkName: "dashboard" */ '../views/Explorer/ExplorerSectionView.vue')
+            },
+            {
+                path: '/member/list',
+                name: 'MemberList',
+                component: () => import(/* webpackChunkName: "member" */ '../views/Account/MemberList.vue')
+            },
+            {
+                path: '/creator/tags',
+                name: 'CreatorTags',
+                component: () => import(/* webpackChunkName: "counselor" */ '../views/Creator/CreatorTags.vue')
+            },
+            {
+                path: '/creator/list',
+                name: 'CreatorList',
+                component: () => import(/* webpackChunkName: "counselor" */ '../views/Creator/CreatorList.vue')
+            },
+            {
+                path: '/creator/review',
+                name: 'CreatorReview',
+                component: () => import(/* webpackChunkName: "counselor" */ '../views/Creator/CreatorReview.vue')
+            },
+            {
+                path: '/live/tags',
+                name: 'LiveTags',
+                component: () => import(/* webpackChunkName: "live" */ '../views/Live/LiveTags.vue')
+            },
+            {
+                path: '/live/list',
+                name: 'LiveList',
+                component: () => import(/* webpackChunkName: "live" */ '../views/Live/LiveList.vue')
+            },
+            {
+                path: '/live/recommend',
+                name: 'LiveRecommend',
+                component: () => import(/* webpackChunkName: "live" */ '../views/Live/LiveRecommend.vue')
+            },
+            {
+                path: '/content/theme',
+                name: 'ContentTheme',
+                component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentTheme.vue')
+            },
+            {
+                path: '/content/list',
+                name: 'ContentList',
+                component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentList.vue')
+            },
+            {
+                path: '/content/banner',
+                name: 'ContentMainTopBanner',
+                component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentMainTopBanner.vue')
+            },
+            {
+                path: '/content/curation',
+                name: 'ContentCuration',
+                component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentCuration.vue')
+            },
+            {
+                path: '/promotion/event',
+                name: 'EventView',
+                component: () => import(/* webpackChunkName: "promotion" */ '../views/Promotion/EventView.vue')
+            },
+            {
+                path: '/promotion/push',
+                name: 'Push',
+                component: () => import(/* webpackChunkName: "promotion" */ '../views/Promotion/Push.vue')
+            },
+            {
+                path: '/promotion/charge-event',
+                name: 'ChargeEvent',
+                component: () => import(/* webpackChunkName: "promotion" */ '../views/Promotion/ChargeEvent.vue')
+            },
+            {
+                path: '/can/management',
+                name: 'CoinView',
+                component: () => import(/* webpackChunkName: "coin" */ '../views/Can/CanManagement.vue')
+            },
+            {
+                path: '/can/charge',
+                name: 'CoinCharge',
+                component: () => import(/* webpackChunkName: "coin" */ '../views/Can/CanCharge.vue')
+            },
+            {
+                path: '/can/status',
+                name: 'CoinStatus',
+                component: () => import(/* webpackChunkName: "coin" */ '../views/Can/CoinStatus.vue')
+            },
+            {
+                path: '/calculate/creator',
+                name: 'CalculateCreator',
+                component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateCreator.vue')
+            },
+            {
+                path: '/calculate/content',
+                name: 'CalculateContent',
+                component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateContent.vue')
+            },
+            {
+                path: '/calculate/copyright',
+                name: 'CalculateCopyright',
+                component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateCopyright.vue')
+            },
+            {
+                path: '/notice',
+                name: 'NoticeView',
+                component: () => import(/* webpackChunkName: "support" */ '../views/Support/NoticeView.vue')
+            },
+            {
+                path: '/faq',
+                name: 'FaqView',
+                component: () => import(/* webpackChunkName: "support" */ '../views/Support/FaqView.vue')
+            },
+            {
+                path: '/report',
+                name: 'ReportView',
+                component: () => import(/* webpackChunkName: "support" */ '../views/Support/ReportView.vue')
+            },
+            {
+                path: '/terms',
+                name: 'TermsOfServiceView',
+                component: () => import(/* webpackChunkName: "support" */ '../views/Support/TermsOfServiceView.vue')
+            },
+            {
+                path: '/privacy',
+                name: 'PrivacyView',
+                component: () => import(/* webpackChunkName: "support" */ '../views/Support/PrivacyView.vue')
+            },
+        ]
+    },
+    {
+        path: '/login',
+        name: 'Login',
+        component: () => import(/* webpackChunkName: "login" */ '../views/login/Login.vue')
+    },
+]
+
+const router = new VueRouter({
+    mode: 'history',
+    base: process.env.BASE_URL,
+    routes
+})
+
+router.beforeEach((to, from, next) => {
+    if (to.path !== '/login') {
+        const isAuthenticated = store.getters['accountStore/isAuthenticated']
+        if (isAuthenticated) {
+            next();
+        } else {
+            next('/login?redirect=' + to.fullPath)
+        }
+    } else {
+        next()
+    }
+})
+
+export default router

src/store/accountStore.js

@@ -0,0 +1,97 @@
+import * as accountApi from '@/api/member'
+import Vue from 'vue';
+
+const enhanceAccessToken = () => {
+    const {accessToken} = localStorage
+    if (!accessToken) return
+    Vue.axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
+}
+
+enhanceAccessToken();
+
+const accountStore = {
+    namespaced: true,
+    state: {
+        userId: '',
+        nickname: '',
+        accessToken: '',
+        profileImage: '',
+    },
+    getters: {
+        isAuthenticated(state) {
+            state.userId = state.userId || localStorage.userId
+            state.nickname = state.nickname || localStorage.nickname
+            state.profileImage = state.profileImage || localStorage.profileImage
+            state.accessToken = state.accessToken || localStorage.accessToken
+
+            return state.accessToken !== undefined &&
+                state.accessToken !== null &&
+                state.accessToken !== 'null' &&
+                state.accessToken !== ''
+        }
+    },
+    mutations: {
+        LOGIN(state, {userId, nickname, token, profileImage}) {
+            state.userId = userId
+            localStorage.userId = userId
+
+            state.nickname = nickname
+            localStorage.nickname = nickname
+
+            state.profileImage = profileImage
+            localStorage.profileImage = profileImage
+
+            state.accessToken = token
+            localStorage.accessToken = token
+
+            Vue.axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+        },
+
+        LOGOUT(state) {
+            state.userId = ''
+            state.nickname = ''
+            state.profileImage = ''
+            state.accessToken = ''
+
+            localStorage.clear()
+            if (location.pathname === '/') {
+                location.reload()
+            } else {
+                location.replace("/")
+            }
+        },
+    },
+    actions: {
+        async LOGIN({commit}, {email, password}) {
+            let result = false
+            let errorMessage = null
+
+            try {
+                let res = await accountApi.login(email, password)
+                if (res.data.success === true) {
+                    commit("LOGIN", res.data.data)
+                    result = true
+                } else {
+                    errorMessage = res.data.message
+                }
+            } catch (e) {
+                errorMessage = '로그인 정보를 확인해주세요.'
+            }
+
+            return new Promise((resolve, reject) => {
+                if (result) {
+                    resolve();
+                } else {
+                    reject(errorMessage)
+                }
+            });
+        },
+
+        LOGOUT({commit}) {
+            Vue.axios.defaults.headers.common['Authorization'] = undefined;
+            commit("LOGOUT")
+        },
+    }
+}
+
+export default accountStore

src/store/index.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+import accountStore from "@/store/accountStore";
+
+export default new Vuex.Store({
+    modules: {
+        accountStore: accountStore
+    }
+})

src/views/Account/DailyMembershipStatus.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-container>
+    일별 회원현황
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "DailyMembershipStatus"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Account/MemberList.vue

@@ -0,0 +1,367 @@
+<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="8" />
+        <v-col>
+          <v-text-field
+            v-model="search_word"
+            label="이메일 혹은 닉네임을 입력하세요"
+            @keyup.enter="search"
+          >
+            <v-btn
+              slot="append"
+              color="#9970ff"
+              dark
+              @click="search"
+            >
+              검색
+            </v-btn>
+          </v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-simple-table class="elevation-10">
+            <template>
+              <thead>
+                <tr>
+                  <th class="text-center">
+                    회원번호
+                  </th>
+                  <th class="text-center">
+                    이메일
+                  </th>
+                  <th class="text-center">
+                    닉네임
+                  </th>
+                  <th class="text-center">
+                    이미지
+                  </th>
+                  <th class="text-center">
+                    회원타입
+                  </th>
+                  <th class="text-center">
+                    OS
+                  </th>
+                  <th class="text-center">
+                    성인인증
+                  </th>
+                  <th class="text-center">
+                    가입일
+                  </th>
+                  <th class="text-center">
+                    이용중지/탈퇴일
+                  </th>
+                  <th class="text-center">
+                    관리
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="item in accounts"
+                  :key="item.id"
+                >
+                  <td>{{ item.id }}</td>
+                  <td>{{ item.email }}</td>
+                  <td>{{ item.nickname }}</td>
+                  <td align="center">
+                    <v-img
+                      max-width="100"
+                      max-height="100"
+                      :src="item.profileUrl"
+                      class="rounded-circle"
+                    />
+                  </td>
+                  <td>{{ item.userType }}</td>
+                  <td>
+                    <div v-if="item.container === 'aos'">
+                      Android
+                    </div>
+                    <div v-else>
+                      iOS
+                    </div>
+                  </td>
+                  <td>
+                    <div v-if="item.auth">
+                      O
+                    </div>
+                    <div v-else>
+                      X
+                    </div>
+                  </td>
+                  <td>{{ item.signUpDate }}</td>
+                  <td>{{ item.signOutDate }}</td>
+                  <td>
+                    <v-btn
+                      dark
+                      @click="showPopupDialog(item)"
+                    >
+                      수정
+                    </v-btn>
+                  </td>
+                </tr>
+              </tbody>
+            </template>
+          </v-simple-table>
+        </v-col>
+      </v-row>
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-row>
+      <v-dialog
+        v-model="show_popup_dialog"
+        max-width="1000px"
+        persistent
+      >
+        <v-card>
+          <v-card-title>계정 상세</v-card-title>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                이메일 :
+              </v-col>
+              <v-col cols="8">
+                {{ email }}
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                닉네임 :
+              </v-col>
+              <v-col cols="8">
+                {{ nickname }}
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                사용 여부
+              </v-col>
+              <v-col cols="8">
+                <v-radio-group
+                  v-model="user_type"
+                  row
+                >
+                  <v-spacer />
+                  <v-radio
+                    value="CREATOR"
+                    label="크리에이터"
+                  />
+                  <v-radio
+                    value="USER"
+                    label="일반회원"
+                  />
+                  <v-spacer />
+                </v-radio-group>
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-actions v-show="!is_loading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="modify"
+            >
+              수정
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/member'
+
+export default {
+  name: "AccountList",
+
+  data() {
+    return {
+      is_loading: false,
+      page: 1,
+      total_page: 0,
+      search_word: '',
+      accounts: [],
+      account: null,
+      email: null,
+      nickname: null,
+      user_type: null,
+      show_popup_dialog: false
+    }
+  },
+
+  async created() {
+    await this.getAccounts()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    async search() {
+      this.page = 1
+      await this.searchAccount()
+    },
+
+    async searchAccount() {
+      if (this.search_word.length === 0) {
+        await this.getAccounts()
+      } else if (this.search_word.length < 2) {
+        this.notifyError('검색어를 2글자 이상 입력하세요.')
+      } else {
+        this.is_loading = true
+        try {
+          const res = await api.searchAccount(this.search_word, this.page)
+          if (res.status === 200 && res.data.success === true) {
+            const data = res.data.data
+
+            const total_page = Math.ceil(data.totalCount / 20)
+            this.accounts = data.items
+
+            if (total_page <= 0)
+              this.total_page = 1
+            else
+              this.total_page = total_page
+          } else {
+            this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          }
+
+          this.is_loading = false
+        } catch (e) {
+          this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.is_loading = false
+        }
+      }
+    },
+
+    async next() {
+      if (this.search_word.length < 2) {
+        this.search_word = ''
+        await this.getAccounts()
+      } else {
+        await this.searchAccount()
+      }
+    },
+
+    async getAccounts() {
+      this.is_loading = true
+      try {
+        const res = await api.getAccountList(this.page)
+        if (res.status === 200 && res.data.success === true) {
+          const data = res.data.data
+
+          const total_page = Math.ceil(data.totalCount / 20)
+          this.accounts = data.items
+
+          if (total_page <= 0)
+            this.total_page = 1
+          else
+            this.total_page = total_page
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+
+        this.is_loading = false
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      }
+    },
+
+    showPopupDialog(account) {
+      this.account = account
+
+      if (account.userType === '일반회원') {
+        this.user_type = 'USER'
+      } else if (account.userType === '요즘친구') {
+        this.user_type = 'CREATOR'
+      }
+
+      this.email = account.email
+      this.nickname = account.nickname
+
+      this.show_popup_dialog = true
+    },
+
+    cancel() {
+      this.account = null
+      this.email = null
+      this.nickname = null
+      this.user_type = null
+      this.show_popup_dialog = false
+    },
+
+    async modify() {
+      this.is_loading = true
+
+      if (
+        (this.user_type === 'CREATOR' && this.account.userType === '요즘친구') ||
+        (this.user_type === 'USER' && this.account.userType === '일반회원')
+      ) {
+        this.notifyError("변경사항이 없습니다.")
+      } else {
+        try {
+          const res = await api.updateAccount(this.account.id, this.user_type)
+          if (res.status === 200 && res.data.success === true) {
+            this.page = 1
+            this.total_page = 0
+            this.search_word = ''
+
+            this.accounts = []
+            await this.getAccounts()
+          } else {
+            this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          }
+        } catch (e) {
+          this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
+        }
+      }
+
+      this.is_loading = false
+      this.cancel()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Account/MembershipStatus.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-container>
+    회원현황
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "MembershipStatus"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Calculate/CalculateContent.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>콘텐츠 정산</div>
+</template>
+
+<style scoped>
+
+</style>

src/views/Calculate/CalculateCopyright.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>저작권 정산</div>
+</template>
+
+<script>
+export default {
+  name: "CalculateCopyright"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Calculate/CalculateCreator.vue

@@ -0,0 +1,327 @@
+<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="getCalculateCreator"
+          >
+            조회
+          </v-btn>
+        </v-col>
+
+        <v-spacer />
+
+        <v-col cols="2">
+          <vue-excel-xlsx
+            :data="items"
+            :columns="columns"
+            :file-name="'정산'"
+            :file-type="'xlsx'"
+            :sheet-name="'정산'"
+          >
+            <v-btn
+              block
+              color="#9970ff"
+              dark
+              depressed
+            >
+              엑셀 다운로드
+            </v-btn>
+          </vue-excel-xlsx>
+        </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.coinUsageStr="{ item }">
+              {{ item.coinUsageStr }}
+            </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: "CalculateCounselor",
+  components: {datetime},
+
+  data() {
+    return {
+      is_loading: false,
+      start_date: null,
+      end_date: null,
+      items: [],
+      columns: [
+        {
+          label: "이메일",
+          field: "email",
+        },
+        {
+          label: "닉네임",
+          field: "nickname",
+        },
+        {
+          label: "날짜",
+          field: "date",
+        },
+        {
+          label: "라이브 제목",
+          field: "title",
+        },
+        {
+          label: "유료방 입장 금액(코인)",
+          field: "entranceFee",
+        },
+        {
+          label: "코인사용구분",
+          field: "coinUsageStr",
+        },
+        {
+          label: "합계(코인)",
+          field: "totalAmount",
+        },
+        {
+          label: "원화",
+          field: "totalKrw",
+        },
+        {
+          label: "결제수수료(4.4%)",
+          field: "paymentFee",
+        },
+        {
+          label: "정산금액",
+          field: "settlementAmount",
+        },
+        {
+          label: "원천세(3.3%)",
+          field: "tax",
+        },
+        {
+          label: "입금액",
+          field: "depositAmount",
+        },
+      ],
+      headers: [
+        {
+          text: '이메일',
+          align: 'center',
+          sortable: false,
+          value: 'email',
+        },
+        {
+          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: 'entranceFee',
+        },
+        {
+          text: '코인사용구분',
+          align: 'center',
+          sortable: false,
+          value: 'coinUsageStr',
+        },
+        {
+          text: '합계(코인)',
+          align: 'center',
+          sortable: false,
+          value: 'totalAmount',
+        },
+        {
+          text: '원화',
+          align: 'center',
+          sortable: false,
+          value: 'totalKrw',
+        },
+        {
+          text: '결제수수료(4.4%)',
+          align: 'center',
+          sortable: false,
+          value: 'paymentFee',
+        },
+        {
+          text: '정산금액',
+          align: 'center',
+          sortable: false,
+          value: 'settlementAmount',
+        },
+        {
+          text: '원천세(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.getCalculateCreator()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    async getCalculateCreator() {
+      this.is_loading = true
+
+      try {
+        const res = await api.getCalculateCreator(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>
+
+<style scoped>
+
+</style>

src/views/Can/CanCharge.vue

@@ -0,0 +1,168 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>코인 충전</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+    <v-container>
+      <v-text-field
+        v-model="account_id"
+        label="회원번호"
+        outlined
+        required
+      />
+
+      <v-text-field
+        v-model="method"
+        label="기록 내용"
+        outlined
+        required
+      />
+
+      <v-text-field
+        v-model="coin"
+        label="지급할 코인 수"
+        outlined
+        required
+      />
+
+      <v-row>
+        <v-col cols="10" />
+        <v-col>
+          <v-btn
+            block
+            color="#9970ff"
+            dark
+            depressed
+            @click="confirm"
+          >
+            코인 지급
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-dialog
+          v-model="show_confirm"
+          max-width="400px"
+          persistent
+        >
+          <v-card>
+            <v-card-title>코인 지급 확인</v-card-title>
+            <v-card-text>
+              회원번호: {{ account_id }}
+            </v-card-text>
+            <v-card-text>
+              기록내용: {{ method }}
+            </v-card-text>
+            <v-card-text>
+              지급할 코인 수: {{ coin }}코인
+            </v-card-text>
+            <v-card-actions v-show="!isLoading">
+              <v-spacer />
+              <v-btn
+                color="blue darken-1"
+                text
+                @click="submit"
+              >
+                코인 지급
+              </v-btn>
+              <v-spacer />
+              <v-btn
+                color="blue darken-1"
+                text
+                @click="cancel"
+              >
+                취소
+              </v-btn>
+              <v-spacer />
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/coin'
+
+export default {
+  name: "CoinCharge",
+
+  data() {
+    return {
+      show_confirm: false,
+      isLoading: false,
+      account_id: '',
+      method: '',
+      coin: ''
+    }
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    confirm() {
+      if (this.account_id.trim() === '' || isNaN(this.account_id)) {
+        return this.notifyError('코인을 지급할 회원의 회원번호를 입력하세요.')
+      }
+
+      if (this.method.trim() === '') {
+        return this.notifyError('기록할 내용을 입력하세요')
+      }
+
+      if (isNaN(this.coin)) {
+        return this.notifyError('코인은 숫자만 넣을 수 있습니다.')
+      }
+
+      if (!this.isLoading) {
+        this.show_confirm = true
+      }
+    },
+
+    cancel() {
+      this.show_confirm = false
+    },
+
+    async submit() {
+      if (!this.isLoading) {
+        this.isLoading = true
+
+        try {
+          this.show_confirm = false
+
+          const res = await api.paymentCoin(Number(this.coin), this.method, this.account_id)
+          if (res.status === 200 && res.data.success === true) {
+            this.notifySuccess('코인이 지급되었습니다.')
+            this.account_id = ''
+            this.method = ''
+            this.coin = ''
+            this.is_loading = false
+          } else {
+            this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            this.is_loading = false
+          }
+        } catch (e) {
+          this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.is_loading = false
+        } finally {
+          this.is_loading = false
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Can/CanManagement.vue

@@ -0,0 +1,282 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>코인 환율관리</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-row>
+      <v-dialog
+        v-model="show_dialog"
+        max-width="400px"
+        persistent
+      >
+        <template v-slot:activator="{ on, attrs }">
+          <v-container>
+            <v-row>
+              <v-col cols="10" />
+              <v-col>
+                <v-btn
+                  block
+                  color="#9970ff"
+                  dark
+                  depressed
+                  v-bind="attrs"
+                  v-on="on"
+                >
+                  코인등록
+                </v-btn>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-data-table
+                  :headers="headers"
+                  :items="coins"
+                  class="elevation-1"
+                  hide-default-footer
+                >
+                  <template v-slot:item.price="{ item }">
+                    {{ item.price.toLocaleString('en-US') }}원
+                  </template>
+
+                  <template v-slot:item.coin="{ item }">
+                    {{ item.coin.toLocaleString('en-US') }}코인
+                  </template>
+
+                  <template v-slot:item.rewardCoin="{ item }">
+                    {{ item.rewardCoin.toLocaleString('en-US') }}코인
+                  </template>
+
+                  <template v-slot:item.management="{ item }">
+                    <v-btn
+                      :disabled="isLoading"
+                      @click="showModifyCoinDialog(item)"
+                    >
+                      수정
+                    </v-btn>
+                    &nbsp;&nbsp;
+                    <v-btn
+                      :disabled="isLoading"
+                      @click="deleteCoin(item)"
+                    >
+                      삭제
+                    </v-btn>
+                  </template>
+                </v-data-table>
+              </v-col>
+            </v-row>
+          </v-container>
+        </template>
+
+        <v-card>
+          <v-card-title>코인 등록</v-card-title>
+          <v-card-text>
+            <v-text-field
+              v-model="price"
+              label="원화"
+              required
+            />
+          </v-card-text>
+          <v-card-text>
+            <v-text-field
+              v-model="coin"
+              label="코인"
+              required
+            />
+          </v-card-text>
+          <v-card-text>
+            <v-text-field
+              v-model="reward_coin"
+              label="리워드 코인"
+              required
+            />
+          </v-card-text>
+          <v-card-actions v-show="!isLoading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              v-if="selected_coin !== null"
+              color="blue darken-1"
+              text
+              @click="modify"
+            >
+              수정
+            </v-btn>
+            <v-btn
+              v-else
+              color="blue darken-1"
+              text
+              @click="submit"
+            >
+              등록
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/coin'
+
+export default {
+  name: "CoinView",
+
+  data() {
+    return {
+      isLoading: false,
+      show_dialog: false,
+      selected_coin: null,
+      price: null,
+      coin: null,
+      reward_coin: null,
+      headers: [
+        {
+          text: '원화(VAT포함)',
+          align: 'center',
+          sortable: false,
+          value: 'price',
+        },
+        {
+          text: '충전코인',
+          align: 'center',
+          sortable: false,
+          value: 'coin',
+        },
+        {
+          text: '리워드코인',
+          align: 'center',
+          sortable: false,
+          value: 'rewardCoin',
+        },
+        {
+          text: '관리',
+          align: 'center',
+          sortable: false,
+          value: 'management'
+        },
+      ],
+      coins: [],
+    }
+  },
+
+  async created() {
+    await this.getCoins()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    cancel() {
+      this.show_dialog = false
+      this.coin = null
+      this.price = null
+      this.reward_coin = null
+      this.selected_coin = null
+    },
+
+    showModifyCoinDialog(item) {
+      this.selected_coin = item
+      this.price = item.price
+      this.coin = item.coin
+      this.reward_coin = item.rewardCoin
+
+      this.show_dialog = true
+    },
+
+    async getCoins() {
+      this.isLoading = true
+      try {
+        let res = await api.getCoins();
+        this.coins = res.data.data
+      } catch (e) {
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async deleteCoin(item) {
+      this.isLoading = true
+
+      let res = await api.deleteCoin(item.id)
+      if (res.status === 200 && res.data.success === true) {
+        this.notifySuccess(res.data.message || '삭제되었습니다.')
+        this.coins = []
+        await this.getCoins()
+      } else {
+        this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      }
+    },
+
+    async modify() {
+      this.isLoading = true
+
+      try {
+        const res = await api.modifyCoin(this.selected_coin.id, this.coin, this.reward_coin, this.price)
+
+        if (res.status === 200 && res.data.success === true) {
+          this.show_dialog = false
+          this.coin = null
+          this.price = null
+          this.reward_coin = null
+          this.selected_coin = null
+          this.notifySuccess(res.data.message || '수정되었습니다.')
+
+          this.coins = []
+          await this.getCoins()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async submit() {
+      this.isLoading = true
+
+      const res = await api.insertCoin(this.coin, this.reward_coin, this.price)
+
+      if (res.status === 200 && res.data.success === true) {
+        this.show_dialog = false
+        this.coin = null
+        this.price = null
+        this.reward_coin = null
+        this.selected_coin = null
+        this.notifySuccess(res.data.message || '등록되었습니다.')
+
+        this.coins = []
+        await this.getCoins()
+      } else {
+        this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      }
+
+      this.isLoading = false
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Can/CoinByUser.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>회원별 코인관리</div>
+</template>
+
+<script>
+export default {
+  name: "CoinByUser"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Can/CoinStatus.vue

@@ -0,0 +1,285 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>코인 충전 현황</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-spacer />
+        <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="getChargeStatus"
+          >
+            조회
+          </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
+            @click:row="getChargeStatusDetail"
+          >
+            <template v-slot:item.date="{ item }">
+              {{ item.date }}
+            </template>
+
+            <template v-slot:item.chargeAmount="{ item }">
+              {{ item.chargeAmount.toLocaleString() }} 원
+            </template>
+
+            <template v-slot:item.chargeCount="{ item }">
+              {{ item.chargeCount }}
+            </template>
+
+            <template v-slot:item.pg="{ item }">
+              {{ item.pg }}
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-dialog
+          v-model="show_popup_dialog"
+          max-width="1000px"
+          persistent
+        >
+          <v-card>
+            <v-data-table
+              :headers="detail_headers"
+              :items="detail_items"
+              :loading="is_loading"
+              :items-per-page="-1"
+              class="elevation-1"
+              hide-default-footer
+            >
+              <template v-slot:item.accountId="{ item }">
+                {{ item.accountId }}
+              </template>
+
+              <template v-slot:item.nickname="{ item }">
+                {{ item.nickname }}
+              </template>
+
+              <template v-slot:item.method="{ item }">
+                {{ item.method }}
+              </template>
+
+              <template v-slot:item.amount="{ item }">
+                {{ item.amount.toLocaleString() }} 원
+              </template>
+
+              <template v-slot:item.datetime="{ item }">
+                {{ item.datetime }}
+              </template>
+            </v-data-table>
+            <v-card-actions v-show="!is_loading">
+              <v-spacer />
+              <v-btn
+                color="blue darken-1"
+                text
+                @click="cancel"
+              >
+                확인
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import * as api from "@/api/charge_status";
+import datetime from 'vuejs-datetimepicker';
+
+export default {
+  name: "CoinStatus",
+  components: {datetime},
+
+  data() {
+    return {
+      is_loading: false,
+      start_date: null,
+      end_date: null,
+      items: [],
+      detail_items: null,
+      show_popup_dialog: false,
+      detail_headers: [
+        {
+          text: 'no',
+          align: 'center',
+          sortable: false,
+          value: 'accountId',
+        },
+        {
+          text: '닉네임',
+          align: 'center',
+          sortable: false,
+          value: 'nickname',
+        },
+        {
+          text: '결제수단',
+          align: 'center',
+          sortable: false,
+          value: 'method',
+        },
+        {
+          text: '가격',
+          align: 'center',
+          sortable: false,
+          value: 'amount',
+        },
+        {
+          text: '날짜',
+          align: 'center',
+          sortable: false,
+          value: 'datetime',
+        },
+      ],
+      headers: [
+        {
+          text: '날짜',
+          align: 'center',
+          sortable: false,
+          value: 'date',
+        },
+        {
+          text: '충전금액',
+          align: 'center',
+          sortable: false,
+          value: 'chargeAmount',
+        },
+        {
+          text: '충전횟수',
+          align: 'center',
+          sortable: false,
+          value: 'chargeCount',
+        },
+        {
+          text: 'PG',
+          sortable: false,
+          value: 'pg',
+        }
+      ]
+    }
+  },
+
+  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.getChargeStatus()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    cancel() {
+      this.show_popup_dialog = false
+    },
+
+    async getChargeStatus() {
+      this.is_loading = true
+
+      try {
+        const res = await api.getChargeStatus(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
+      }
+    },
+
+    async getChargeStatusDetail(value) {
+      if (value.date !== '합계') {
+        this.is_loading = true
+
+        try {
+          const res = await api.getChargeStatusDetail(value.date, value.pg)
+          if (res.status === 200 && res.data.success === true) {
+            this.detail_items = res.data.data
+            this.show_popup_dialog = true
+          } else {
+            this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          }
+
+          this.is_loading = false
+        } catch (e) {
+          this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.is_loading = false
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Content/ContentCuration.vue

@@ -0,0 +1,460 @@
+<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="10" />
+        <v-col>
+          <v-btn
+            block
+            color="#9970ff"
+            dark
+            depressed
+            @click="showWriteDialog"
+          >
+            큐레이션 등록
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="curations"
+            :loading="is_loading"
+            item-key="id"
+            class="elevation-1"
+            hide-default-footer
+            disable-pagination
+          >
+            <template v-slot:body="props">
+              <draggable
+                v-model="props.items"
+                tag="tbody"
+                @end="onDropCallback(props.items)"
+              >
+                <tr
+                  v-for="(item, index) in props.items"
+                  :key="index"
+                >
+                  <td>
+                    {{ item.title }}
+                  </td>
+                  <td>
+                    {{ item.description }}
+                  </td>
+                  <td>
+                    <h3 v-if="item.isAdult">
+                      O
+                    </h3>
+                    <h3 v-else>
+                      X
+                    </h3>
+                  </td>
+                  <td>
+                    <v-row>
+                      <v-col />
+                      <v-col>
+                        <v-btn
+                          :disabled="is_loading"
+                          @click="showModifyDialog(item)"
+                        >
+                          수정
+                        </v-btn>
+                      </v-col>
+
+                      <v-col>
+                        <v-btn
+                          :disabled="is_loading"
+                          @click="deleteConfirm(item)"
+                        >
+                          삭제
+                        </v-btn>
+                      </v-col>
+                      <v-col />
+                    </v-row>
+                  </td>
+                </tr>
+              </draggable>
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-row>
+      <v-dialog
+        v-model="show_write_dialog"
+        max-width="1000px"
+        persistent
+      >
+        <v-card>
+          <v-card-title v-if="is_modify === true">
+            콘텐츠 큐레이션 수정
+          </v-card-title>
+          <v-card-title v-else>
+            콘텐츠 큐레이션 등록
+          </v-card-title>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                제목
+              </v-col>
+              <v-col cols="8">
+                <v-text-field
+                  v-model="curation.title"
+                  label="제목"
+                  required
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                설명
+              </v-col>
+              <v-col cols="8">
+                <v-text-field
+                  v-model="curation.description"
+                  label="설명"
+                  required
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row>
+              <v-col cols="4">
+                19금
+              </v-col>
+              <v-col cols="8">
+                <input
+                  v-model="curation.is_adult"
+                  type="checkbox"
+                >
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-actions v-show="!is_loading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              v-if="is_modify === true"
+              color="blue darken-1"
+              text
+              @click="modify"
+            >
+              수정
+            </v-btn>
+            <v-btn
+              v-else
+              color="blue darken-1"
+              text
+              @click="submit"
+            >
+              등록
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+
+    <v-dialog
+      v-model="show_delete_confirm_dialog"
+      max-width="400px"
+      persistent
+    >
+      <v-card>
+        <v-card-text />
+        <v-card-text>
+          "{{ selected_curation.title }}"을 삭제하시겠습니까?
+        </v-card-text>
+        <v-card-actions v-show="!is_loading">
+          <v-spacer />
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="deleteCancel"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="deleteCuration"
+          >
+            확인
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import Draggable from 'vuedraggable';
+import * as api from "@/api/audio_content"
+
+export default {
+    name: "AudioContentCuration",
+    components: {Draggable},
+    data() {
+        return {
+            is_loading: false,
+            is_modify: false,
+            show_delete_confirm_dialog: false,
+            show_write_dialog: false,
+            selected_curation: {},
+            curation: {is_adult: false},
+            curations: [],
+            headers: [
+                {
+                    text: '제목',
+                    align: 'center',
+                    sortable: false,
+                    value: 'title',
+                },
+                {
+                    text: '설명',
+                    align: 'center',
+                    sortable: false,
+                    value: 'description',
+                },
+                {
+                    text: '19금',
+                    align: 'center',
+                    sortable: false,
+                    value: 'isAdult',
+                },
+                {
+                    text: '관리',
+                    align: 'center',
+                    sortable: false,
+                    value: 'management'
+                },
+            ],
+        }
+    },
+
+    async created() {
+        await this.getCurations()
+    },
+
+    methods: {
+        notifyError(message) {
+            this.$dialog.notify.error(message)
+        },
+
+        notifySuccess(message) {
+            this.$dialog.notify.success(message)
+        },
+
+        showWriteDialog() {
+            this.show_write_dialog = true
+        },
+
+        showModifyDialog(item) {
+            this.is_modify = true
+            this.selected_curation = item
+
+            this.curation.id = item.id
+            this.curation.title = item.title
+            this.curation.description = item.description
+            this.curation.is_adult = item.isAdult
+
+            this.show_write_dialog = true
+        },
+
+        cancel() {
+            this.curation = {is_adult: false}
+            this.selected_curation = {}
+
+            this.is_modify = false
+            this.show_write_dialog = false
+        },
+
+        validate() {
+            if (
+                this.curation.title === null ||
+                this.curation.title === undefined ||
+                this.curation.title.trim().length <= 0
+            ) {
+                this.notifyError("제목을 입력하세요")
+                return false
+            }
+
+            if (
+                this.curation.description === null ||
+                this.curation.description === undefined ||
+                this.curation.description.trim().length <= 0
+            ) {
+                this.notifyError("설명을 입력하세요")
+                return false
+            }
+
+            return true
+        },
+
+        deleteConfirm(curation) {
+            this.selected_curation = curation
+            this.show_delete_confirm_dialog = true
+        },
+
+        deleteCancel() {
+            this.selected_curation = {}
+            this.show_delete_confirm_dialog = false
+        },
+
+        async submit() {
+            if (!this.validate()) return;
+            if (this.is_loading) return;
+
+            this.isLoading = true
+
+            try {
+                const request = {
+                    title: this.curation.title,
+                    description: this.curation.description,
+                    isAdult: this.curation.is_adult
+                }
+
+                const res = await api.saveCuration(request)
+                if (res.status === 200 && res.data.success === true) {
+                    this.cancel()
+                    this.notifySuccess('등록되었습니다.')
+
+                    this.curations = []
+                    await this.getCurations()
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async modify() {
+            if (!this.validate()) return;
+            if (this.is_loading) return;
+            this.isLoading = true
+
+            try {
+                let request = {id: this.curation.id}
+                if (this.selected_curation.title !== this.curation.title && this.curation.title.trim().length > 0) {
+                    request.title = this.curation.title
+                }
+
+                if (
+                    this.selected_curation.description !== this.curation.description &&
+                    this.curation.description.trim().length > 0
+                ) {
+                    request.description = this.curation.description
+                }
+
+                if (this.selected_curation.isAdult !== this.curation.is_adult) {
+                    request.isAdult = this.curation.is_adult
+                }
+
+                const res = await api.modifyCuration(request)
+                if (res.status === 200 && res.data.success === true) {
+                    this.cancel()
+                    this.notifySuccess('수정되었습니다.')
+
+                    this.curations = []
+                    await this.getCurations()
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async deleteCuration() {
+            if (this.is_loading) return;
+            this.is_loading = true
+
+            try {
+                let request = {id: this.selected_curation.id, isActive: false}
+
+                const res = await api.modifyCuration(request)
+                if (res.status === 200 && res.data.success === true) {
+                    this.show_delete_confirm_dialog = false
+                    this.cancel()
+                    this.notifySuccess('삭제되었습니다.')
+
+                    this.curations = []
+                    await this.getCurations()
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async onDropCallback(items) {
+            this.curations = items
+            const ids = items.map((item) => {
+                return item.id
+            })
+
+            try {
+                this.is_loading = true
+                const res = await api.updateCurationOrders(ids)
+                if (res.status === 200 && res.data.success === true) {
+                    this.notifySuccess(res.data.message)
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async getCurations() {
+            this.is_loading = true
+
+            try {
+                const res = await api.getCurations()
+                if (res.status === 200 && res.data.success === true) {
+                    this.curations = res.data.data
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        }
+    },
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Content/ContentList.vue

@@ -0,0 +1,623 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>콘텐츠 리스트</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-text-field
+            v-model="utm_source"
+            label="예) youtube, google"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field
+            v-model="utm_medium"
+            label="예) email, cpc"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field
+            v-model="utm_campaign"
+            label="예) 화이트데이"
+          />
+        </v-col>
+        <v-col cols="2" />
+        <v-col cols="4">
+          <v-text-field
+            v-model="search_word"
+            label="콘텐츠 제목 혹은 크리에이터 닉네임을 입력하세요"
+            @keyup.enter="search"
+          >
+            <v-btn
+              slot="append"
+              color="#9970ff"
+              dark
+              @click="search"
+            >
+              검색
+            </v-btn>
+          </v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-simple-table class="elevation-10">
+            <template>
+              <thead>
+                <tr>
+                  <th class="text-center">
+                    콘텐츠 번호
+                  </th>
+                  <th class="text-center">
+                    썸네일
+                  </th>
+                  <th class="text-center">
+                    제목
+                  </th>
+                  <th class="text-center">
+                    내용
+                  </th>
+                  <th class="text-center">
+                    큐레이션
+                  </th>
+                  <th class="text-center">
+                    크리에이터
+                  </th>
+                  <th class="text-center">
+                    테마
+                  </th>
+                  <th class="text-center">
+                    태그
+                  </th>
+                  <th class="text-center">
+                    가격
+                  </th>
+                  <th class="text-center">
+                    19금
+                  </th>
+                  <th class="text-center">
+                    시간
+                  </th>
+                  <th class="text-center">
+                    듣기
+                  </th>
+                  <th class="text-center">
+                    등록일
+                  </th>
+                  <th class="text-center">
+                    관리
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="item in audio_contents"
+                  :key="item.audioContentId"
+                >
+                  <td>{{ item.audioContentId }}</td>
+                  <td align="center">
+                    <v-img
+                      max-width="100"
+                      max-height="100"
+                      :src="item.coverImageUrl"
+                      class="rounded-circle"
+                    />
+                  </td>
+                  <td>{{ item.title }}</td>
+                  <td style="max-width: 350px !important; word-break:break-all; height: auto;">
+                    {{ item.detail }}
+                  </td>
+                  <td>{{ item.curationTitle || '없음' }}</td>
+                  <td>{{ item.creatorNickname }}</td>
+                  <td>{{ item.theme }}</td>
+                  <td style="max-width: 200px !important; word-break:break-all; height: auto;">
+                    {{ item.tags }}
+                  </td>
+                  <td v-if="item.price > 0">
+                    {{ item.price }} 코인
+                  </td>
+                  <td v-else>
+                    무료
+                  </td>
+                  <td>
+                    <div v-if="item.isAdult">
+                      O
+                    </div>
+                    <div v-else>
+                      X
+                    </div>
+                  </td>
+                  <td>{{ item.remainingTime }}</td>
+                  <td>
+                    <vuetify-audio
+                      :file="item.contentUrl"
+                      :downloadable="true"
+                      :auto-play="false"
+                    />
+                  </td>
+                  <td>{{ item.date }}</td>
+                  <td>
+                    <v-row>
+                      <v-col>
+                        <v-btn
+                          :disabled="is_loading"
+                          @click="showModifyDialog(item)"
+                        >
+                          수정
+                        </v-btn>
+                      </v-col>
+                      <v-spacer />
+                      <v-col>
+                        <v-btn
+                          :disabled="is_loading"
+                          @click="deleteConfirm(item)"
+                        >
+                          삭제
+                        </v-btn>
+                      </v-col>
+                      <v-spacer />
+                      <v-col>
+                        <v-btn
+                          :disabled="is_loading"
+                          @click="shareAudioContent(item)"
+                        >
+                          공유
+                        </v-btn>
+                      </v-col>
+                    </v-row>
+                  </td>
+                </tr>
+              </tbody>
+            </template>
+          </v-simple-table>
+        </v-col>
+      </v-row>
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-row>
+      <v-dialog
+        v-model="show_modify_dialog"
+        max-width="1000px"
+        persistent
+      >
+        <v-card>
+          <v-card-title>
+            콘텐츠 수정
+          </v-card-title>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                제목
+              </v-col>
+              <v-col cols="8">
+                <v-text-field
+                  v-model="audio_content.title"
+                  label="제목"
+                  required
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                내용
+              </v-col>
+              <v-col cols="8">
+                <v-text-field
+                  v-model="audio_content.detail"
+                  label="내용"
+                  required
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row>
+              <v-col cols="4">
+                19금
+              </v-col>
+              <v-col cols="8">
+                <input
+                  v-model="audio_content.is_adult"
+                  type="checkbox"
+                >
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row>
+              <v-col cols="4">
+                댓글 가능
+              </v-col>
+              <v-col cols="8">
+                <input
+                  v-model="audio_content.is_comment_available"
+                  type="checkbox"
+                >
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row>
+              <v-col cols="4">
+                기본 커버이미지로 변경
+              </v-col>
+              <v-col cols="8">
+                <input
+                  v-model="audio_content.is_default_cover_image"
+                  type="checkbox"
+                >
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row>
+              <v-col cols="4">
+                큐레이션
+              </v-col>
+              <v-col cols="8">
+                <v-select
+                  v-model="audio_content.curation_id"
+                  :items="curations"
+                  item-text="title"
+                  item-value="value"
+                  label="큐레이션 선택"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-actions v-show="!is_loading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="modify"
+            >
+              수정
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+
+    <v-dialog
+      v-model="show_delete_confirm_dialog"
+      max-width="400px"
+      persistent
+    >
+      <v-card>
+        <v-card-text />
+        <v-card-text>
+          "{{ selected_audio_content.title }}"을 삭제하시겠습니까?
+        </v-card-text>
+        <v-card-actions v-show="!is_loading">
+          <v-spacer />
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="deleteCancel"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="deleteAudioContent"
+          >
+            확인
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/audio_content'
+import * as dynamicLink from "@/api/firebase_dynamic_link";
+
+import VuetifyAudio from 'vuetify-audio'
+
+export default {
+    name: "AudioContentList",
+
+    components: {VuetifyAudio},
+
+    data() {
+        return {
+            is_loading: false,
+            show_modify_dialog: false,
+            show_delete_confirm_dialog: false,
+            page: 1,
+            total_page: 0,
+            search_word: '',
+            audio_content: {},
+            audio_contents: [],
+            curations: [],
+            selected_audio_content: {},
+            utm_source: '',
+            utm_medium: '',
+            utm_campaign: '',
+        }
+    },
+
+    async created() {
+        await this.getCurations()
+        await this.getAudioContent()
+    },
+
+    methods: {
+        notifyError(message) {
+            this.$dialog.notify.error(message)
+        },
+
+        notifySuccess(message) {
+            this.$dialog.notify.success(message)
+        },
+
+        deleteConfirm(item) {
+            this.selected_audio_content = item
+            this.show_delete_confirm_dialog = true
+        },
+
+        deleteCancel() {
+            this.selected_audio_content = {}
+            this.show_delete_confirm_dialog = false
+        },
+
+        showModifyDialog(item) {
+            this.selected_audio_content = item
+
+            this.audio_content.id = item.audioContentId
+            this.audio_content.title = item.title
+            this.audio_content.detail = item.detail
+            this.audio_content.curation_id = item.curationId
+            this.audio_content.is_adult = item.isAdult
+            this.audio_content.is_comment_available = item.isCommentAvailable
+            this.audio_content.is_default_cover_image = false
+
+            console.log(this.audio_content)
+
+            this.show_modify_dialog = true
+        },
+
+        cancel() {
+            this.selected_audio_content = {}
+            this.audio_content = {}
+            this.show_modify_dialog = false
+            this.show_delete_confirm_dialog = false
+        },
+
+        async modify() {
+            if (
+                this.audio_content.title === null ||
+                this.audio_content.title === undefined ||
+                this.audio_content.title.trim().length <= 0
+            ) {
+                this.notifyError("제목을 입력하세요")
+                return
+            }
+
+            if (
+                this.audio_content.detail === null ||
+                this.audio_content.detail === undefined ||
+                this.audio_content.detail.trim().length <= 0
+            ) {
+                this.notifyError("내용을 입력하세요")
+                return
+            }
+
+            if (this.is_loading) return;
+
+            this.isLoading = true
+
+            try {
+                const request = {
+                    id: this.audio_content.id,
+                    isDefaultCoverImage: this.audio_content.is_default_cover_image
+                }
+
+                if (
+                    this.selected_audio_content.title !== this.audio_content.title &&
+                    this.audio_content.title.trim().length > 0
+                ) {
+                    request.title = this.audio_content.title
+                }
+
+                if (
+                    this.selected_audio_content.detail !== this.audio_content.detail &&
+                    this.audio_content.detail.trim().length > 0
+                ) {
+                    request.detail = this.audio_content.detail
+                }
+
+                if (this.selected_audio_content.curationId !== this.audio_content.curation_id) {
+                    request.curationId = this.audio_content.curation_id
+                }
+
+                if (this.selected_audio_content.isAdult !== this.audio_content.is_adult) {
+                    request.isAdult = this.audio_content.is_adult
+                }
+
+                if (this.selected_audio_content.isCommentAvailable !== this.audio_content.is_comment_available) {
+                    request.isCommentAvailable = this.audio_content.is_comment_available
+                }
+
+                console.log(request)
+                const res = await api.modifyAudioContent(request)
+                if (res.status === 200 && res.data.success === true) {
+                    this.cancel()
+                    this.notifySuccess('수정되었습니다.')
+
+                    this.audio_contents = []
+                    await this.getAudioContent()
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async deleteAudioContent() {
+            if (this.is_loading) return;
+            this.is_loading = true
+
+            try {
+                let request = {id: this.selected_audio_content.audioContentId, isActive: false}
+
+                const res = await api.modifyAudioContent(request)
+                if (res.status === 200 && res.data.success === true) {
+                    this.cancel()
+                    this.notifySuccess('삭제되었습니다.')
+
+                    this.audio_contents = []
+                    await this.getAudioContent()
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async next() {
+            if (this.search_word.length < 2) {
+                this.search_word = ''
+                await this.getAudioContent()
+            } else {
+                await this.searchAudioContent()
+            }
+        },
+
+        async getCurations() {
+            this.is_loading = true
+            try {
+                const res = await api.getCurations()
+                if (res.status === 200 && res.data.success === true) {
+                    this.curations = res.data.data.map((curation) => {
+                        return {title: curation.title, value: curation.id}
+                    })
+
+                    this.curations.unshift({title: '없음', value: 0})
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async getAudioContent() {
+            this.is_loading = true
+            try {
+                const res = await api.getAudioContentList(this.page)
+                if (res.status === 200 && res.data.success === true) {
+                    const data = res.data.data
+
+                    const total_page = Math.ceil(data.totalCount / 10)
+                    this.audio_contents = data.items
+
+                    if (total_page <= 0)
+                        this.total_page = 1
+                    else
+                        this.total_page = total_page
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+
+                this.is_loading = false
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                this.is_loading = false
+            }
+        },
+
+        async search() {
+            this.page = 1
+            await this.searchAudioContent()
+        },
+
+        async searchAudioContent() {
+            if (this.search_word.length === 0) {
+                await this.getAudioContent()
+            } else if (this.search_word.length < 2) {
+                this.notifyError('검색어를 2글자 이상 입력하세요.')
+            } else {
+                this.is_loading = true
+                try {
+                    const res = await api.searchAudioContent(this.search_word, this.page)
+                    if (res.status === 200 && res.data.success === true) {
+                        const data = res.data.data
+
+                        const total_page = Math.ceil(data.totalCount / 10)
+                        this.audio_contents = data.items
+
+                        if (total_page <= 0)
+                            this.total_page = 1
+                        else
+                            this.total_page = total_page
+                    } else {
+                        this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                    }
+
+                    this.is_loading = false
+                } catch (e) {
+                    this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                    this.is_loading = false
+                }
+            }
+        },
+
+        async shareAudioContent(item) {
+            this.is_loading = true
+            try {
+                const linkData = await dynamicLink.shareAudioContent(item, this.utm_source, this.utm_medium, this.utm_campaign);
+                if (linkData.status === 200) {
+                  await navigator.clipboard.writeText(linkData.data.shortLink)
+                  this.notifySuccess("링크가 복사되었습니다.")
+                } else {
+                  this.notifyError("링크를 생성하지 못했습니다.")
+                }
+            } finally {
+                this.is_loading = false
+            }
+        },
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Content/ContentMainTopBanner.vue

@@ -0,0 +1,576 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>콘텐츠 배너</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-dialog
+      v-model="show_write_dialog"
+      max-width="1000px"
+      persistent
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <v-container>
+          <v-row>
+            <v-col cols="10" />
+            <v-col>
+              <v-btn
+                block
+                color="#9970ff"
+                dark
+                depressed
+                v-bind="attrs"
+                v-on="on"
+              >
+                배너 등록
+              </v-btn>
+            </v-col>
+          </v-row>
+          <draggable
+            v-model="banners"
+            class="row"
+            @end="onDropCallback(banners)"
+          >
+            <v-col
+              v-for="(item, i) in banners"
+              :key="i"
+              cols="3"
+            >
+              <v-card>
+                <v-card-title>
+                  <v-spacer />
+                  <v-img :src="item.thumbnailImageUrl" />
+                  <v-spacer />
+                </v-card-title>
+                <v-card-actions>
+                  <v-spacer />
+                  <v-btn
+                    text
+                    @click="showModifyBannerDialog(item)"
+                  >
+                    수정
+                  </v-btn>
+                  <v-btn
+                    text
+                    @click="deleteConfirm(item)"
+                  >
+                    삭제
+                  </v-btn>
+                  <v-spacer />
+                </v-card-actions>
+              </v-card>
+            </v-col>
+          </draggable>
+        </v-container>
+      </template>
+
+      <v-card>
+        <v-card-title>배너 등록</v-card-title>
+        <v-card-text>
+          <v-row align="center">
+            <v-col cols="4">
+              배너 타입
+            </v-col>
+            <v-col cols="8">
+              <v-radio-group
+                v-model="banner.type"
+                row
+              >
+                <v-radio
+                  value="CREATOR"
+                  label="크리에이터 채널"
+                />
+                <v-radio
+                  value="LINK"
+                  label="외부링크"
+                />
+                <v-radio
+                  value="EVENT"
+                  label="이벤트"
+                />
+              </v-radio-group>
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-text v-if="banner.type === 'CREATOR'">
+          <v-row align="center">
+            <v-col cols="4">
+              크리에이터
+            </v-col>
+            <v-col cols="8">
+              <v-select
+                v-model="banner.creator_id"
+                :items="creators"
+                item-text="name"
+                item-value="value"
+                label="크리에이터 선택"
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-text v-else-if="banner.type === 'LINK'">
+          <v-row align="center">
+            <v-col cols="4">
+              링크
+            </v-col>
+            <v-col cols="8">
+              <v-text-field
+                v-model="banner.link"
+                label="링크"
+                required
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-text v-else>
+          <v-row align="center">
+            <v-col cols="4">
+              이벤트
+            </v-col>
+            <v-col cols="8">
+              <v-select
+                v-model="banner.event_id"
+                :items="events"
+                item-text="title"
+                item-value="value"
+                label="이벤트 선택"
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-text>
+          <v-row>
+            <v-col cols="4">
+              19금
+            </v-col>
+            <v-col cols="8">
+              <input
+                v-model="banner.is_adult"
+                type="checkbox"
+              >
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <div class="image-select">
+          <label for="image">
+            배너 이미지 등록
+          </label>
+          <v-file-input
+            id="image"
+            v-model="banner.thumbnail_image"
+            @change="imageAdd"
+          />
+        </div>
+        <img
+          v-if="banner.thumbnail_image_url"
+          :src="banner.thumbnail_image_url"
+          alt=""
+          class="image-preview"
+        >
+        <v-card-actions v-show="!is_loading">
+          <v-spacer />
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="cancel"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            v-if="is_modify === true"
+            color="blue darken-1"
+            text
+            @click="modify"
+          >
+            수정
+          </v-btn>
+          <v-btn
+            v-else
+            color="blue darken-1"
+            text
+            @click="submit"
+          >
+            등록
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog
+      v-model="show_delete_confirm_dialog"
+      max-width="400px"
+      persistent
+    >
+      <v-card>
+        <v-card-text />
+        <v-card-text>
+          삭제하시겠습니까?
+        </v-card-text>
+        <v-card-actions v-show="!is_loading">
+          <v-spacer />
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="deleteCancel"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="deleteBanner"
+          >
+            확인
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import Draggable from "vuedraggable";
+
+import * as accountApi from "@/api/member";
+import * as eventApi from "@/api/event";
+import * as api from "@/api/audio_content"
+
+export default {
+    name: "AudioContentMainTopBanner",
+
+    components: {Draggable},
+
+    data() {
+        return {
+            is_loading: false,
+            is_modify: false,
+            show_write_dialog: false,
+            show_delete_confirm_dialog: false,
+            selected_banner: {},
+            banner: {type: 'CREATOR'},
+            banners: [],
+            events: [],
+            creators: [],
+        }
+    },
+
+    async created() {
+        await this.getCreatorList()
+        await this.getEvents()
+        await this.getBanners()
+    },
+
+    methods: {
+        imageAdd(payload) {
+            const file = payload;
+            if (file) {
+                this.banner.thumbnail_image_url = URL.createObjectURL(file)
+                URL.revokeObjectURL(file)
+            } else {
+                this.banner.thumbnail_image_url = null
+            }
+        },
+
+        cancel() {
+            this.is_modify = false
+            this.show_write_dialog = false
+            this.banner = {type: 'CREATOR'}
+            this.selected_banner = {}
+        },
+
+        notifyError(message) {
+            this.$dialog.notify.error(message)
+        },
+
+        notifySuccess(message) {
+            this.$dialog.notify.success(message)
+        },
+
+        showModifyBannerDialog(banner) {
+            this.is_modify = true
+            this.selected_banner = banner
+
+            this.banner.id = banner.id
+            this.banner.type = banner.type
+            this.banner.thumbnail_image_url = banner.thumbnailImageUrl
+            this.banner.event_id = banner.eventId
+            this.banner.event_thumbnail_image = banner.eventThumbnailImage
+            this.banner.creator_id = banner.creatorId
+            this.banner.creator_nickname = banner.creatorNickname
+            this.banner.link = banner.link
+            this.banner.is_adult = banner.isAdult
+
+            this.show_write_dialog = true
+        },
+
+        validate() {
+            if (this.banner.type === 'EVENT' && (this.banner.event_id === null || this.banner.event_id === undefined)) {
+                this.notifyError("이벤트를 선택하세요")
+                return false;
+            }
+
+            if (
+                this.banner.type === 'CREATOR' &&
+                (this.banner.creator_id === null || this.banner.creator_id === undefined)) {
+                this.notifyError("크리에이터를 선택하세요")
+                return false;
+            }
+
+            if (
+                this.banner.type === 'LINK' &&
+                (this.banner.link === null || this.banner.link === undefined || this.banner.link.trim().length <= 0)
+            ) {
+                this.notifyError("링크를 입력하세요")
+                return false;
+            }
+
+            if (this.banner.thumbnail_image == null) {
+                this.notifyError("썸네일 이미지를 등록하세요")
+                return false;
+            }
+
+            return true
+        },
+
+        deleteConfirm(banner) {
+            this.selected_banner = banner
+            this.show_delete_confirm_dialog = true
+        },
+
+        deleteCancel() {
+            this.show_delete_confirm_dialog = false
+        },
+
+        async submit() {
+            if (!this.validate()) return;
+            if (this.is_loading === true) return;
+
+            this.is_loading = true
+
+            try {
+                const formData = new FormData()
+                formData.append("image", this.banner.thumbnail_image)
+
+                let request = {
+                    type: this.banner.type,
+                    isAdult: this.banner.is_adult
+                }
+
+                if (this.banner.type === 'CREATOR') {
+                    request.creatorId = this.banner.creator_id
+                } else if (this.banner.type === 'EVENT') {
+                    request.eventId = this.banner.event_id
+                } else if (this.banner.type === 'LINK') {
+                    request.link = this.banner.link
+                }
+
+                formData.append("request", JSON.stringify(request))
+
+                const res = await api.saveBanner(formData)
+                if (res.status === 200 && res.data.success === true) {
+                    this.cancel()
+                    this.notifySuccess('등록되었습니다.')
+
+                    this.banners = []
+                    await this.getBanners()
+                } else {
+                    this.notifyError(res.data.message);
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async modify() {
+            if (this.is_loading) return;
+
+            this.is_loading = true
+            try {
+                const formData = new FormData()
+                let request = {id: this.banner.id}
+
+                if (this.banner.thumbnail_image !== null) {
+                    formData.append("image", this.banner.thumbnail_image)
+                }
+
+                if (
+                    this.selected_banner.eventId !== this.banner.event_id &&
+                    this.banner.event_id !== null &&
+                    this.banner.event_id !== undefined
+                ) {
+                    request.type = this.banner.type
+                    request.eventId = this.banner.event_id
+                }
+
+                if (
+                    this.selected_banner.creator_id !== this.banner.creator_id &&
+                    this.banner.creator_id !== null &&
+                    this.banner.creator_id !== undefined
+                ) {
+                    request.type = this.banner.type
+                    request.creatorId = this.banner.creator_id
+                }
+
+                if (
+                    this.selected_banner.link !== this.banner.link &&
+                    this.banner.link !== null &&
+                    this.banner.link !== undefined
+                ) {
+                    request.type = this.banner.type
+                    request.link = this.banner.link
+                }
+
+                if (this.selected_banner.isAdult !== this.banner.is_adult) {
+                    request.isAdult = this.banner.is_adult
+                }
+
+                formData.append("request", JSON.stringify(request))
+
+                const res = await api.modifyBanner(formData)
+                if (res.status === 200 && res.data.success === true) {
+                    this.cancel()
+                    this.notifySuccess('수정되었습니다.')
+
+                    this.banners = []
+                    await this.getBanners()
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async deleteBanner() {
+            if (this.is_loading) return;
+            this.is_loading = true
+
+            try {
+                const formData = new FormData()
+                formData.append("request", JSON.stringify({id: this.selected_banner.id, isActive: false}))
+                const res = await api.modifyBanner(formData)
+                if (res.status === 200 && res.data.success === true) {
+                    this.show_delete_confirm_dialog = false
+                    this.cancel()
+                    this.notifySuccess('삭제되었습니다.')
+
+                    this.banners = []
+                    await this.getBanners()
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async onDropCallback(items) {
+            const ids = items.map((item) => {
+                return item.id
+            })
+
+            const res = await api.updateBannerOrders(ids)
+            if (res.status === 200 && res.data.success === true) {
+                this.notifySuccess(res.data.message)
+            }
+        },
+
+        async getCreatorList() {
+            this.is_loading = true
+
+            try {
+                const res = await accountApi.getCounselorList()
+
+                if (res.status === 200 && res.data.success === true) {
+                    this.creators = res.data.data.map((item) => {
+                        return {name: item.nickname, value: item.id}
+                    })
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                    this.is_loading = false
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                this.is_loading = false
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async getEvents() {
+            this.is_loading = true
+            try {
+                const res = await eventApi.getEvents(1)
+                if (res.status === 200 && res.data.success === true) {
+                    this.events = res.data.data.eventList.map((item) => {
+                        return {title: item.title, value: item.id}
+                    })
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                this.is_loading = false
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async getBanners() {
+            this.is_loading = true
+            try {
+                const res = await api.getBannerList()
+                if (res.status === 200 && res.data.success === true) {
+                    this.banners = res.data.data
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                this.is_loading = false
+            } finally {
+                this.is_loading = false
+            }
+        },
+    }
+}
+</script>
+
+<style scoped>
+.image-select label {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #232d4a;
+    color: #fff;
+    vertical-align: middle;
+    font-size: 15px;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+.v-file-input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+}
+
+.image-preview {
+    max-width: 100%;
+    width: 250px;
+    object-fit: cover;
+    margin-top: 10px;
+}
+</style>

src/views/Content/ContentTheme.vue

@@ -0,0 +1,268 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>콘텐츠 테마 관리</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-row>
+      <v-dialog
+        v-model="show_dialog"
+        max-width="400px"
+        persistent
+      >
+        <template v-slot:activator="{ on, attrs }">
+          <v-container>
+            <v-row>
+              <v-col cols="10" />
+              <v-col>
+                <v-btn
+                  block
+                  color="#9970ff"
+                  dark
+                  depressed
+                  v-bind="attrs"
+                  v-on="on"
+                >
+                  테마 추가등록
+                </v-btn>
+              </v-col>
+            </v-row>
+            <draggable
+              v-model="themes"
+              class="row"
+              @end="onDropCallback(themes)"
+            >
+              <v-col
+                v-for="(theme, i) in themes"
+                :key="i"
+                cols="2"
+              >
+                <v-card>
+                  <v-card-title>
+                    <v-spacer />
+                    <v-img
+                      :src="theme.image"
+                      class="rounded-circle"
+                    />
+                    <v-spacer />
+                  </v-card-title>
+                  <v-card-title>
+                    <v-spacer />
+                    {{ theme.theme }}
+                    <v-spacer />
+                  </v-card-title>
+                  <v-card-actions>
+                    <v-spacer />
+                    <v-btn
+                      text
+                      @click="deleteTheme(theme)"
+                    >
+                      삭제
+                    </v-btn>
+                    <v-spacer />
+                  </v-card-actions>
+                </v-card>
+              </v-col>
+            </draggable>
+          </v-container>
+        </template>
+
+        <v-card>
+          <v-card-title>테마 등록</v-card-title>
+          <v-card-text>
+            <v-text-field
+              v-model="theme_text"
+              label="테마"
+              required
+            />
+          </v-card-text>
+          <div class="image-select">
+            <label for="image">
+              이미지 등록
+            </label>
+            <v-file-input
+              id="image"
+              v-model="image"
+              @change="imageAdd"
+            />
+          </div>
+          <img
+            v-if="image_url"
+            :src="image_url"
+            alt=""
+            class="image-preview"
+          >
+          <v-card-actions v-show="!isLoading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="submit"
+            >
+              등록
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/audio_content_theme'
+import Draggable from "vuedraggable";
+
+export default {
+  name: "AudioContentTheme",
+
+  components: {Draggable},
+
+  data() {
+    return {
+      isLoading: false,
+      themes: [],
+      show_dialog: false,
+      theme_text: null,
+      image: null,
+      image_url: null
+    }
+  },
+
+  async created() {
+    await this.getThemes()
+  },
+
+  methods: {
+    async onDropCallback(items) {
+      const ids = items.map((item) => {
+        return item.id
+      })
+
+      const res = await api.updateThemeOrders(ids)
+      if (res.status === 200 && res.data.success === true) {
+        this.notifySuccess(res.data.message)
+      }
+    },
+
+    imageAdd(payload) {
+      const file = payload;
+      if (file) {
+        this.image_url = URL.createObjectURL(file)
+        URL.revokeObjectURL(file)
+      } else {
+        this.image_url = null
+      }
+    },
+
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    cancel() {
+      this.show_dialog = false
+      this.image = null
+      this.image_url = null
+      this.theme = null
+    },
+
+    async getThemes() {
+      this.isLoading = true
+
+      try {
+        let res = await api.getThemes();
+        this.themes = res.data.data
+      } catch (e) {
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async deleteTheme(theme) {
+      this.isLoading = true
+      try {
+        let res = await api.deleteTheme(theme.id)
+        if (res.status === 200 && res.data.success === true) {
+          this.notifySuccess(res.data.message)
+          await this.getThemes()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async submit() {
+      this.isLoading = true
+
+      const formData = new FormData()
+      formData.append("image", this.image)
+      formData.append("request", JSON.stringify({theme: this.theme_text}))
+
+      const res = await api.enrollment(formData)
+
+      if (res.status === 200 && res.data.success === true) {
+        this.show_dialog = false
+        this.image = null
+        this.image_url = null
+        this.theme_text = null
+        this.themes = []
+        this.notifySuccess(res.data.message)
+
+        await this.getThemes()
+      } else {
+        this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      }
+
+      this.isLoading = false
+    },
+  },
+}
+</script>
+
+<style scoped>
+.image-select label {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #232d4a;
+  color: #fff;
+  vertical-align: middle;
+  font-size: 15px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.v-file-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+}
+
+.image-preview {
+  max-width: 100%;
+  width: 250px;
+  object-fit: cover;
+  margin-top: 10px;
+}
+</style>

src/views/Counseling/CounselingByCreator.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>수다친구별 관리</div>
+</template>
+
+<script>
+export default {
+  name: "CounselingByCounselor"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Counseling/CounselingDaily.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>일별 상담관리</div>
+</template>
+
+<script>
+export default {
+  name: "CounselingDaily"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Counseling/CounselingTickets.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>상담권 관리</div>
+</template>
+
+<script>
+export default {
+  name: "CounselingTickets"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Creator/CreatorCalculate.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>수다친구-정산관리</div>
+</template>
+
+<script>
+export default {
+  name: "CounselorCalculate"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Creator/CreatorList.vue

@@ -0,0 +1,274 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>요즘친구 리스트</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-text-field
+            v-model="utm_source"
+            label="예) youtube, google"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field
+            v-model="utm_medium"
+            label="예) email, cpc"
+          />
+        </v-col>
+        <v-col>
+          <v-text-field
+            v-model="utm_campaign"
+            label="예) 화이트데이"
+          />
+        </v-col>
+        <v-col cols="2" />
+        <v-col cols="4">
+          <v-text-field
+            v-model="search_word"
+            label="이메일 혹은 닉네임을 입력하세요"
+            @keyup.enter="search"
+          >
+            <v-btn
+              slot="append"
+              color="#9970ff"
+              dark
+              @click="search"
+            >
+              검색
+            </v-btn>
+          </v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-simple-table class="elevation-10">
+            <template>
+              <thead>
+                <tr>
+                  <th class="text-center">
+                    회원번호
+                  </th>
+                  <th class="text-center">
+                    이메일
+                  </th>
+                  <th class="text-center">
+                    닉네임
+                  </th>
+                  <th class="text-center">
+                    이미지
+                  </th>
+                  <th class="text-center">
+                    회원타입
+                  </th>
+                  <th class="text-center">
+                    OS
+                  </th>
+                  <th class="text-center">
+                    성인인증
+                  </th>
+                  <th class="text-center">
+                    가입일
+                  </th>
+                  <th class="text-center">
+                    이용중지/탈퇴일
+                  </th>
+                  <th class="text-center">
+                    공유
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="item in accounts"
+                  :key="item.id"
+                >
+                  <td>{{ item.id }}</td>
+                  <td>{{ item.email }}</td>
+                  <td>{{ item.nickname }}</td>
+                  <td align="center">
+                    <v-img
+                      max-width="100"
+                      max-height="100"
+                      :src="item.profileUrl"
+                      class="rounded-circle"
+                    />
+                  </td>
+                  <td>{{ item.userType }}</td>
+                  <td>
+                    <div v-if="item.container === 'aos'">
+                      Android
+                    </div>
+                    <div v-else>
+                      iOS
+                    </div>
+                  </td>
+                  <td>
+                    <div v-if="item.auth">
+                      O
+                    </div>
+                    <div v-else>
+                      X
+                    </div>
+                  </td>
+                  <td>{{ item.signUpDate }}</td>
+                  <td>{{ item.signOutDate }}</td>
+                  <td>
+                    <v-btn
+                      :disabled="is_loading"
+                      @click="shareCreatorChannel(item)"
+                    >
+                      공유
+                    </v-btn>
+                  </td>
+                </tr>
+              </tbody>
+            </template>
+          </v-simple-table>
+        </v-col>
+      </v-row>
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import * as api from "@/api/member";
+import * as dynamicLink from "@/api/firebase_dynamic_link";
+
+export default {
+  name: "CounselorList",
+
+  data() {
+    return {
+      is_loading: false,
+      page: 1,
+      total_page: 0,
+      search_word: '',
+      accounts: [],
+      account: {},
+      utm_source: '',
+      utm_medium: '',
+      utm_campaign: '',
+    }
+  },
+
+  async created() {
+    await this.getAccounts()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    async search() {
+      this.page = 1
+      await this.searchAccount()
+    },
+
+    async searchAccount() {
+      if (this.search_word.length === 0) {
+        await this.getAccounts()
+      } else if (this.search_word.length < 2) {
+        this.notifyError('검색어를 2글자 이상 입력하세요.')
+      } else {
+        this.is_loading = true
+        try {
+          const res = await api.searchCreatorAccount(this.search_word, this.page)
+          if (res.status === 200 && res.data.success === true) {
+            const data = res.data.data
+
+            const total_page = Math.ceil(data.totalCount / 20)
+            this.accounts = data.items
+
+            if (total_page <= 0)
+              this.total_page = 1
+            else
+              this.total_page = total_page
+          } else {
+            this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          }
+
+          this.is_loading = false
+        } catch (e) {
+          this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.is_loading = false
+        }
+      }
+    },
+
+    async next() {
+      if (this.search_word.length < 2) {
+        this.search_word = ''
+        await this.getAccounts()
+      } else {
+        await this.searchAccount()
+      }
+    },
+
+    async getAccounts() {
+      this.is_loading = true
+      try {
+        const res = await api.getCreatorAccountList(this.page)
+        if (res.status === 200 && res.data.success === true) {
+          const data = res.data.data
+
+          const total_page = Math.ceil(data.totalCount / 20)
+          this.accounts = data.items
+
+          if (total_page <= 0)
+            this.total_page = 1
+          else
+            this.total_page = total_page
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+
+        this.is_loading = false
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      }
+    },
+
+    async shareCreatorChannel(item) {
+      this.is_loading = true
+      try {
+          const linkData = await dynamicLink.shareCreatorChannel(item, this.utm_source, this.utm_medium, this.utm_campaign);
+          if (linkData.status === 200) {
+            await navigator.clipboard.writeText(linkData.data.shortLink)
+            this.notifySuccess("링크가 복사되었습니다.")
+          } else {
+            this.notifyError("링크를 생성하지 못했습니다.")
+          }
+      } finally {
+         this.is_loading = false
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Creator/CreatorReview.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>후기관리</div>
+</template>
+
+<script>
+export default {
+  name: "CounselorReview"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Creator/CreatorTags.vue

@@ -0,0 +1,316 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>수다친구 관심사 관리</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-row>
+      <v-dialog
+        v-model="show_dialog"
+        max-width="400px"
+        persistent
+      >
+        <template v-slot:activator="{ on, attrs }">
+          <v-container>
+            <v-row>
+              <v-col cols="10" />
+              <v-col>
+                <v-btn
+                  block
+                  color="#9970ff"
+                  dark
+                  depressed
+                  v-bind="attrs"
+                  v-on="on"
+                >
+                  관심사 추가등록
+                </v-btn>
+              </v-col>
+            </v-row>
+            <draggable
+              v-model="tags"
+              class="row"
+              @end="onDropCallback(tags)"
+            >
+              <v-col
+                v-for="(tag, i) in tags"
+                :key="i"
+                cols="2"
+              >
+                <v-card>
+                  <v-card-title>
+                    <v-spacer />
+                    <v-img
+                      :src="tag.image"
+                      class="rounded-circle"
+                    />
+                    <v-spacer />
+                  </v-card-title>
+                  <v-card-title>
+                    <v-spacer />
+                    {{ tag.tag }}
+                    <v-spacer />
+                  </v-card-title>
+                  <v-card-actions>
+                    <v-spacer />
+                    <v-btn
+                      text
+                      @click="showModifyTagDialog(tag)"
+                    >
+                      수정
+                    </v-btn>
+                    <v-btn
+                      text
+                      @click="deleteTag(tag)"
+                    >
+                      삭제
+                    </v-btn>
+                    <v-spacer />
+                  </v-card-actions>
+                </v-card>
+              </v-col>
+            </draggable>
+          </v-container>
+        </template>
+
+        <v-card>
+          <v-card-title>관심사 등록</v-card-title>
+          <v-card-text>
+            <v-text-field
+              v-model="tag_text"
+              label="관심사"
+              required
+            />
+          </v-card-text>
+          <div class="image-select">
+            <label for="image">
+              이미지 등록
+            </label>
+            <v-file-input
+              id="image"
+              v-model="image"
+              @change="imageAdd"
+            />
+          </div>
+          <img
+            v-if="image_url"
+            :src="image_url"
+            alt=""
+            class="image-preview"
+          >
+          <v-card-actions v-show="!isLoading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              v-if="selected_tag !== null"
+              color="blue darken-1"
+              text
+              @click="modify"
+            >
+              수정
+            </v-btn>
+            <v-btn
+              v-else
+              color="blue darken-1"
+              text
+              @click="submit"
+            >
+              등록
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import * as api from "@/api/counselor_tag";
+import Draggable from "vuedraggable";
+
+export default {
+  name: "CounselorTags",
+
+  components: {Draggable},
+
+  data() {
+    return {
+      isLoading: false,
+      tags: [],
+      show_dialog: false,
+      selected_tag: null,
+      tag_text: null,
+      image: null,
+      image_url: null
+    }
+  },
+
+  async created() {
+    await this.getTags()
+  },
+
+  methods: {
+    async onDropCallback(items) {
+      const ids = items.map((item) => {
+        return item.id
+      })
+
+      const res = await api.updateTagOrders(ids)
+      if (res.status === 200 && res.data.success === true) {
+        this.notifySuccess(res.data.message)
+      }
+    },
+
+    imageAdd(payload) {
+      const file = payload;
+      if (file) {
+        this.image_url = URL.createObjectURL(file)
+        URL.revokeObjectURL(file)
+      } else {
+        this.image_url = null
+      }
+    },
+
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    cancel() {
+      this.show_dialog = false
+      this.image = null
+      this.image_url = null
+      this.tag_text = null
+    },
+
+    showModifyTagDialog(tag) {
+      this.selected_tag = tag
+      this.image_url = tag.image
+      this.tag_text = tag.tag
+      this.show_dialog = true
+    },
+
+    async submit() {
+      this.isLoading = true
+
+      const formData = new FormData()
+      formData.append("image", this.image)
+      formData.append("request", JSON.stringify({tag: this.tag_text}))
+
+      const res = await api.enrollment(formData)
+
+      if (res.status === 200 && res.data.success === true) {
+        this.show_dialog = false
+        this.image = null
+        this.image_url = null
+        this.tag_text = null
+        this.tags = []
+        this.notifySuccess(res.data.message)
+
+        await this.getTags()
+      } else {
+        this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      }
+
+      this.isLoading = false
+    },
+
+    async getTags() {
+      this.isLoading = true
+
+      try {
+        let res = await api.getTags();
+        this.tags = res.data.data
+      } catch (e) {
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async deleteTag(tag) {
+      this.isLoading = true
+      try {
+        let res = await api.deleteTag(tag.id)
+        if (res.status === 200 && res.data.success === true) {
+          this.notifySuccess(res.data.message)
+          await this.getTags()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async modify() {
+      this.isLoading = true
+
+      const formData = new FormData()
+      formData.append("image", this.image)
+      formData.append("request", JSON.stringify({tag: this.tag_text}))
+
+      const res = await api.modifyTag(this.selected_tag.id, formData)
+
+      if (res.status === 200 && res.data.success === true) {
+        this.show_dialog = false
+        this.image = null
+        this.image_url = null
+        this.tag_text = null
+        this.tags = []
+        this.notifySuccess(res.data.message)
+
+        await this.getTags()
+      } else {
+        this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      }
+
+      this.isLoading = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.image-select label {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #232d4a;
+  color: #fff;
+  vertical-align: middle;
+  font-size: 15px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.v-file-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+}
+
+.image-preview {
+  max-width: 100%;
+  width: 250px;
+  object-fit: cover;
+  margin-top: 10px;
+}
+</style>

src/views/Dashboard/Dashboard.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1>대시보드</h1>
+</template>
+
+<script>
+export default {
+  name: "Dashboard"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Explorer/ExplorerSectionView.vue

@@ -0,0 +1,438 @@
+<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="10" />
+        <v-col>
+          <v-btn
+            block
+            color="#9970ff"
+            dark
+            depressed
+            @click="showWriteDialog"
+          >
+            탐색 섹션 등록
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="explorer_sections"
+            :loading="isLoading"
+            :items-per-page="20"
+            item-key="id"
+            class="elevation-1"
+            hide-default-footer
+          >
+            <template v-slot:body="props">
+              <draggable
+                v-model="props.items"
+                tag="tbody"
+                @end="onDropCallback(props.items)"
+              >
+                <tr
+                  v-for="(item, index) in props.items"
+                  :key="index"
+                >
+                  <td>{{ item.title }}</td>
+                  <td>{{ item.coloredTitle }}</td>
+                  <td>#{{ item.color }}</td>
+                  <td>{{ item.tags.map((tag) => '#' + tag).join(' ') }}</td>
+                  <td>
+                    <span v-if="item.isAdult">
+                      O
+                    </span>
+                    <span v-else>
+                      X
+                    </span>
+                  </td>
+                  <td>
+                    <span v-if="item.isActive">
+                      O
+                    </span>
+                    <span v-else>
+                      X
+                    </span>
+                  </td>
+                  <td>
+                    <v-btn
+                      :disabled="isLoading"
+                      @click="showModifyDialog(item)"
+                    >
+                      수정
+                    </v-btn>
+                  </td>
+                </tr>
+              </draggable>
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-row>
+      <v-dialog
+        v-model="show_write_dialog"
+        max-width="1000px"
+        persistent
+      >
+        <v-card>
+          <v-card-title>탐색 섹션 등록</v-card-title>
+          <v-card-text>
+            <v-text-field
+              v-model="title"
+              label="제목"
+              required
+            />
+          </v-card-text>
+          <v-card-text>
+            <v-text-field
+              v-model="colored_title"
+              label="제목에 컬러를 변경할 단어(선택)"
+              required
+            />
+          </v-card-text>
+          <v-card-text>
+            <v-text-field
+              v-model="color"
+              label="컬러(ex > 00ff00)(선택)"
+              required
+            />
+          </v-card-text>
+          <v-card-text>
+            관심사(최소 1개 이상)<br><br>
+            ----------------
+            <v-row align="center">
+              <v-col
+                v-for="tag in creator_tags"
+                :key="tag.id"
+                cols="3"
+              >
+                <input
+                  v-model="selected_tags"
+                  :value="tag.tag"
+                  type="checkbox"
+                >
+                {{ tag.tag }}
+              </v-col>
+            </v-row>
+          </v-card-text>
+          ----------------<br><br>
+          <v-card-text>
+            <v-row align="center">
+              <v-col>
+                <input
+                  v-model="is_adult"
+                  type="checkbox"
+                >&nbsp;&nbsp;19금
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text v-if="selected_explorer_section != null">
+            <v-row align="center">
+              <v-col>
+                <input
+                  v-model="is_active"
+                  type="checkbox"
+                >&nbsp;&nbsp;활성화
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-actions v-show="!isLoading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              v-if="selected_explorer_section != null"
+              color="blue darken-1"
+              text
+              @click="modify"
+            >
+              수정
+            </v-btn>
+            <v-btn
+              v-else
+              color="blue darken-1"
+              text
+              @click="validate"
+            >
+              등록
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import * as api from "@/api/explorer"
+import * as creatorTagApi from "@/api/counselor_tag";
+import Draggable from "vuedraggable";
+
+export default {
+  name: "ExplorerSectionView",
+
+  components: {Draggable},
+
+  data() {
+    return {
+      isLoading: false,
+      show_write_dialog: false,
+      page: 1,
+      total_page: 0,
+      creator_tags: [],
+      selected_tags: [],
+      explorer_sections: [],
+      selected_explorer_section: null,
+      title: null,
+      colored_title: null,
+      color: null,
+      is_adult: false,
+      is_active: true,
+      headers: [
+        {
+          text: '제목',
+          align: 'center',
+          sortable: false,
+          value: 'title',
+        },
+        {
+          text: '제목에 컬러를 변경할 단어',
+          align: 'center',
+          sortable: false,
+          value: 'coloredTitle',
+        },
+        {
+          text: '컬러',
+          align: 'center',
+          sortable: false,
+          value: 'color',
+        },
+        {
+          text: '관심사',
+          align: 'center',
+          sortable: false,
+          value: 'tags',
+        },
+        {
+          text: '19금',
+          align: 'center',
+          sortable: false,
+          value: 'isAdult',
+        },
+        {
+          text: '사용여부',
+          align: 'center',
+          sortable: false,
+          value: 'isActive',
+        },
+        {
+          text: '관리',
+          align: 'center',
+          sortable: false,
+          value: 'management'
+        },
+      ]
+    }
+  },
+
+  async created() {
+    await this.getCreatorTags()
+    await this.getExplorerSections()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    validate() {
+      if (this.title === null || this.title.trim().length <= 0) {
+        this.notifyError("제목을 입력하세요.")
+      } else if (
+        this.selected_tags === null ||
+        this.selected_tags.length <= 0
+      ) {
+        this.notifyError("관심사를 선택하세요.")
+      } else {
+        this.submit()
+      }
+    },
+
+    async submit() {
+      if (this.is_loading) return;
+      this.isLoading = true
+
+      const res = await api.createExplorerSection({
+        "title": this.title,
+        "isAdult": this.is_adult,
+        "tagList": this.selected_tags,
+        "coloredTitle": this.colored_title,
+        "color": this.color
+      })
+
+      if (res.status === 200 && res.data.success === true) {
+        this.cancel()
+        this.notifySuccess('등록되었습니다.')
+        this.page = 1
+        await this.getExplorerSections()
+      } else {
+        this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      }
+
+      this.is_loading = false
+    },
+
+    async modify() {
+      if (this.is_loading) return;
+      this.isLoading = true
+
+      const res = await api.updateExplorerSection({
+        "id": this.selected_explorer_section.id,
+        "title": this.title !== this.selected_explorer_section.title ? this.title : null,
+        "isAdult": this.is_adult !== this.selected_explorer_section.isAdult ? this.is_adult : null,
+        "isActive": this.is_active !== this.selected_explorer_section.isActive ? this.is_active : null,
+        "tagList": this.selected_tags !== this.selected_explorer_section.tags ? this.selected_tags : null,
+        "coloredTitle": this.colored_title !== this.selected_explorer_section.coloredTitle ? this.colored_title : null,
+        "color": this.color !== this.selected_explorer_section.color ? this.color : null
+      })
+
+      if (res.status === 200 && res.data.success === true) {
+        this.cancel()
+        this.notifySuccess(res.data.message || '수정되었습니다.')
+        this.page = 1
+        await this.getExplorerSections()
+        this.is_loading = false
+      } else {
+        this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      }
+    },
+
+    async next() {
+      await this.getExplorerSections()
+    },
+
+    async getExplorerSections() {
+      this.isLoading = true
+
+      try {
+        const res = await api.getExplorerSections(this.page)
+
+        if (res.status === 200 && res.data.success === true) {
+          const data = res.data.data
+
+          const totalPage = Math.ceil(data.totalCount / 20)
+          this.explorer_sections = data.explorerSectionItemList;
+
+          if (totalPage <= 0)
+            this.total_page = 1
+          else
+            this.total_page = totalPage
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async getCreatorTags() {
+      this.isLoading = true
+
+      try {
+        const res = await creatorTagApi.getTags()
+
+        if (res.status === 200 && res.data.success === true) {
+          this.creator_tags = res.data.data;
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    showWriteDialog() {
+      this.show_write_dialog = true
+    },
+
+    showModifyDialog(item) {
+      this.selected_explorer_section = item;
+      this.title = item.title;
+      this.colored_title = item.coloredTitle;
+      this.color = item.color;
+      this.selected_tags = item.tags;
+      this.is_adult = item.isAdult;
+      this.is_active = item.isActive;
+      this.show_write_dialog = true
+    },
+
+    cancel() {
+      this.show_write_dialog = false
+      this.selected_explorer_section = null
+      this.selected_tags = []
+      this.title = null
+      this.colored_title = null
+      this.color = null
+      this.is_adult = false
+      this.is_active = true
+    },
+
+    async onDropCallback(items) {
+      this.explorer_sections = items
+
+      const ids = items.map((item) => {
+        return item.id
+      })
+
+      const firstOrders = (this.page - 1) * 20 + 1
+
+      const res = await api.updateExplorerSectionsOrders(firstOrders, ids)
+      if (res.status === 200 && res.data.success === true) {
+        this.notifySuccess(res.data.message)
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Live/LiveList.vue

@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>라이브 관리 (진행예정 / 진행중)</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="liveList"
+            :loading="isLoading"
+            :items-per-page="-1"
+            class="elevation-1"
+            hide-default-footer
+          >
+            <template v-slot:item.id="{ item }">
+              {{ item.id }}
+            </template>
+
+            <template v-slot:item.title="{ item }">
+              {{ item.title }}
+            </template>
+
+            <template v-slot:item.content="{ item }">
+              {{ item.content }}
+            </template>
+
+            <template v-slot:item.nickname="{ item }">
+              {{ item.managerNickname }}
+            </template>
+
+            <template v-slot:item.cover="{ item }">
+              <img
+                :src="item.coverImageUrl"
+                alt=""
+                height="100"
+                width="100"
+              >
+            </template>
+
+            <template v-slot:item.ing="{ item }">
+              <span v-if="item.channelName.length > 0">진행중</span>
+              <span v-else>진행예정</span>
+            </template>
+
+            <template v-slot:item.type="{ item }">
+              <span v-if="item.type === 'SECRET'">비밀</span>
+              <span v-else-if="item.type === 'PRIVATE'">비공개</span>
+              <span v-else>공개</span>
+            </template>
+
+            <template v-slot:item.nickname="{ item }">
+              {{ item.password }}
+            </template>
+
+            <template v-slot:item.isAdult="{ item }">
+              <span v-if="item.isAdult">O</span>
+              <span v-else>X</span>
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import * as api from "@/api/live"
+
+export default {
+  name: "LiveRoom",
+
+  data() {
+    return {
+      isLoading: false,
+      liveList: [],
+      headers: [
+        {
+          text: '방번호',
+          align: 'center',
+          sortable: false,
+          value: 'id',
+        },
+        {
+          text: '타이틀',
+          align: 'center',
+          sortable: false,
+          value: 'title',
+        },
+        {
+          text: '공지',
+          align: 'center',
+          sortable: false,
+          value: 'content',
+        },
+        {
+          text: '방장',
+          align: 'center',
+          sortable: false,
+          value: 'managerNickname',
+        },
+        {
+          text: '커버이미지',
+          align: 'center',
+          sortable: false,
+          value: 'cover',
+        },
+        {
+          text: '진행여부',
+          align: 'center',
+          sortable: false,
+          value: 'ing',
+        },
+        {
+          text: '공개여부',
+          align: 'center',
+          sortable: false,
+          value: 'type',
+        },
+        {
+          text: '비밀번호',
+          align: 'center',
+          sortable: false,
+          value: 'password',
+        },
+        {
+          text: '19금',
+          align: 'center',
+          sortable: false,
+          value: 'isAdult',
+        },
+      ],
+    }
+  },
+
+  async created() {
+    await this.getLive()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    async getLive() {
+      this.isLoading = true
+
+      try {
+        this.isLoading = false
+
+        const res = await api.getLive()
+
+        if (res.status === 200 && res.data.success === true) {
+          this.liveList = res.data.data.liveList
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+
+        this.isLoading = false
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.isLoading = false
+      }
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Live/LiveRecommend.vue

@@ -0,0 +1,537 @@
+<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="10" />
+        <v-col>
+          <v-btn
+            block
+            color="#9970ff"
+            dark
+            depressed
+            @click="showWriteDialog"
+          >
+            추천 요즘라이브 등록
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="recommendLiveList"
+            :loading="isLoading"
+            :items-per-page="20"
+            item-key="id"
+            class="elevation-1"
+            hide-default-footer
+          >
+            <template v-slot:body="props">
+              <draggable
+                v-model="props.items"
+                tag="tbody"
+                @end="onDropCallback(props.items)"
+              >
+                <tr
+                  v-for="(item, index) in props.items"
+                  :key="index"
+                >
+                  <td>
+                    <img
+                      :src="item.image"
+                      alt=""
+                      height="100"
+                      width="100"
+                    >
+                  </td>
+                  <td> <h3>{{ item.creatorNickname }}</h3> </td>
+                  <td>
+                    <h3>
+                      {{ item.startDate }} ~ {{ item.endDate }}
+                    </h3>
+                  </td>
+                  <td>
+                    <h3 v-if="item.isAdult">
+                      O
+                    </h3>
+                    <h3 v-else>
+                      X
+                    </h3>
+                  </td>
+                  <td>
+                    <v-btn
+                      :disabled="isLoading"
+                      @click="showModifyDialog(item)"
+                    >
+                      수정
+                    </v-btn>
+                  </td>
+                </tr>
+              </draggable>
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-row>
+      <v-dialog
+        v-model="show_write_dialog"
+        max-width="1000px"
+        persistent
+      >
+        <v-card>
+          <v-card-title>추천 요즘라이브 등록</v-card-title>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                요즘친구
+              </v-col>
+              <v-col cols="8">
+                <v-select
+                  v-model="creator_id"
+                  :items="creatorList"
+                  item-text="name"
+                  item-value="value"
+                  label="크리에이터 선택"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                기간
+              </v-col>
+              <v-col
+                cols="8"
+                class="datepicker-wrapper"
+              >
+                <datetime
+                  v-model="start_date"
+                  class="datepicker"
+                  format="YYYY-MM-DD H:i"
+                />
+                <div> ~ </div>
+                <datetime
+                  v-model="end_date"
+                  class="datepicker"
+                  format="YYYY-MM-DD H:i"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                19금
+              </v-col>
+              <v-col cols="8">
+                <input
+                  v-model="is_adult"
+                  type="checkbox"
+                >
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                이미지
+              </v-col>
+              <v-col cols="8">
+                <div class="image-select">
+                  <label for="image">
+                    이미지 불러오기
+                  </label>
+                  <v-file-input
+                    id="image"
+                    v-model="image"
+                    @change="imageAdd"
+                  />
+                </div>
+                <img
+                  v-if="image_url"
+                  :src="image_url"
+                  alt=""
+                  class="image-preview"
+                >
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-actions v-show="!isLoading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              v-if="selected_recommend_live !== null"
+              color="blue darken-1"
+              text
+              @click="modify"
+            >
+              수정
+            </v-btn>
+            <v-btn
+              v-else
+              color="blue darken-1"
+              text
+              @click="validate"
+            >
+              등록
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import Draggable from 'vuedraggable';
+import datetime from 'vuejs-datetimepicker';
+import * as accountApi from "@/api/member";
+import * as api from "@/api/recommend_suda_creator"
+
+export default {
+  name: "LiveRecommendView",
+  components: { datetime, Draggable },
+  data() {
+    return {
+      isLoading: false,
+      page: 1,
+      total_page: 0,
+      show_write_dialog: false,
+      image: null,
+      image_url: null,
+      creator_id: null,
+      creatorList: [],
+      recommendLiveList: [],
+      selected_recommend_live: null,
+      start_date: null,
+      end_date: null,
+      is_adult: false,
+      headers: [
+        {
+          text: '이미지',
+          align: 'center',
+          sortable: false,
+          value: 'image',
+        },
+        {
+          text: '요즘친구',
+          align: 'center',
+          sortable: false,
+          value: 'creatorNickname',
+        },
+        {
+          text: '기간',
+          align: 'center',
+          sortable: false,
+          value: 'date',
+        },
+        {
+          text: '19금',
+          align: 'center',
+          sortable: false,
+          value: 'isAdult',
+        },
+        {
+          text: '관리',
+          align: 'center',
+          sortable: false,
+          value: 'management'
+        },
+      ],
+    }
+  },
+
+  async created() {
+    await this.getCreatorList()
+    await this.getRecommendSudaCreator()
+  },
+
+  methods: {
+    async onDropCallback(items) {
+      this.recommendLiveList = items
+
+      const ids = items.map((item) => {
+        return item.id
+      })
+
+      const firstOrders = (this.page - 1) * 20 + 1
+
+      const res = await api.updateRecommendSudaCreatorOrders(firstOrders, ids)
+      if (res.status === 200 && res.data.success === true) {
+        this.notifySuccess(res.data.message)
+      }
+    },
+    showModifyDialog(item) {
+      this.selected_recommend_live = item;
+      this.is_adult = item.isAdult;
+      this.creator_id = item.creatorId;
+      this.start_date = item.startDate;
+      this.end_date = item.endDate;
+      this.image_url = item.image;
+      this.show_write_dialog = true
+    },
+
+    async modify() {
+      if (this.is_loading) return;
+
+      this.is_loading = true
+
+      try {
+        const formData = new FormData()
+        formData.append("recommend_suda_creator_id", this.selected_recommend_live.id)
+
+        if (this.image !== null) {
+          formData.append("image", this.image)
+        }
+
+        if (this.selected_recommend_live.creatorId !== this.creator_id) {
+          formData.append("creator_id", this.creator_id)
+        }
+
+        if (this.selected_recommend_live.startDate !== this.start_date) {
+          formData.append("start_date", this.start_date)
+        }
+
+        if (this.selected_recommend_live.endDate !== this.end_date) {
+          formData.append("end_date", this.end_date)
+        }
+
+        if (this.selected_recommend_live.isAdult !== this.is_adult) {
+          formData.append("is_adult", this.is_adult)
+        }
+
+        const res = await api.updateRecommendSudaCreator(formData)
+        if (res.status === 200 && res.data.success === true) {
+          this.cancel()
+          this.notifySuccess('수정되었습니다.')
+          this.page = 1
+          await this.getRecommendSudaCreator()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.is_loading = false
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async submit() {
+      if (this.is_loading) return;
+
+      this.isLoading = true
+
+      try {
+        const formData = new FormData()
+        formData.append("image", this.image)
+        formData.append("creator_id", this.creator_id)
+        formData.append("start_date", this.start_date)
+        formData.append("end_date", this.end_date)
+        formData.append("is_adult", this.is_adult)
+
+        const res = await api.createRecommendSudaCreator(formData);
+        if (res.status === 200 && res.data.success === true) {
+          this.cancel()
+          this.notifySuccess('등록되었습니다.')
+          this.page = 1
+          await this.getRecommendSudaCreator()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.is_loading = false
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    validate() {
+      if (
+        this.image === null ||
+        this.creator_id === null ||
+        this.start_date === null ||
+        this.end_date === null
+      ) {
+        this.notifyError('내용을 입력하세요')
+      } else {
+        this.submit()
+      }
+    },
+
+    cancel() {
+      this.show_write_dialog = false
+      this.image = null
+      this.image_url = null
+      this.creator_id = null
+      this.start_date = null
+      this.end_date = null
+    },
+
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    async next() {
+      await this.getRecommendSudaCreator()
+    },
+
+    async getRecommendSudaCreator() {
+      this.isLoading = true
+
+      try {
+        const res = await api.getRecommendSudaCreator(this.page)
+
+        if (res.status === 200 && res.data.success === true) {
+          const data = res.data.data
+
+          const totalPage = Math.ceil(data.totalCount / 20)
+          this.recommendLiveList = data.recommendCreatorList
+
+          if (totalPage <= 0)
+            this.total_page = 1
+          else
+            this.total_page = totalPage
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.is_loading = false
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async getCreatorList() {
+      this.isLoading = true
+
+      try {
+        const res = await accountApi.getCounselorList()
+
+        if (res.status === 200 && res.data.success === true) {
+          this.creatorList = res.data.data.map((item) => {
+            return {name: item.nickname, value: item.id}
+          })
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.is_loading = false
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      } finally {
+        this.isLoading = false
+      }
+    },
+    imageAdd(payload) {
+      const file = payload;
+      if (file) {
+        this.image_url = URL.createObjectURL(file)
+        URL.revokeObjectURL(file)
+      } else {
+        this.image_url = null
+      }
+    },
+    showWriteDialog() {
+      this.show_write_dialog = true
+    },
+  }
+}
+</script>
+
+<style scoped>
+.image-select label {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #232d4a;
+  color: #fff;
+  vertical-align: middle;
+  font-size: 15px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.v-file-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+}
+
+.image-preview {
+  max-width: 100%;
+  width: 250px;
+  object-fit: cover;
+  margin-top: 10px;
+}
+
+.datepicker {
+  text-align: center;
+}
+
+.datepicker-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.datepicker-wrapper > div {
+  margin: 20px;
+}
+
+.v-card__text {
+  margin-top: 20px;
+}
+
+.v-card__actions {
+  margin-top: 100px;
+}
+
+.v-card__actions > .v-btn {
+  font-size: 20px;
+
+}
+
+td img {
+  display: block;
+  margin: 10px auto;
+}
+</style>

src/views/Live/LiveTags.vue

@@ -0,0 +1,316 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>라이브 관심사 관리</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-row>
+      <v-dialog
+        v-model="show_dialog"
+        max-width="400px"
+        persistent
+      >
+        <template v-slot:activator="{ on, attrs }">
+          <v-container>
+            <v-row>
+              <v-col cols="10" />
+              <v-col>
+                <v-btn
+                  block
+                  color="#9970ff"
+                  dark
+                  depressed
+                  v-bind="attrs"
+                  v-on="on"
+                >
+                  관심사 추가등록
+                </v-btn>
+              </v-col>
+            </v-row>
+            <draggable
+              v-model="tags"
+              class="row"
+              @end="onDropCallback(tags)"
+            >
+              <v-col
+                v-for="(tag, i) in tags"
+                :key="i"
+                cols="2"
+              >
+                <v-card>
+                  <v-card-title>
+                    <v-spacer />
+                    <v-img
+                      :src="tag.image"
+                      class="rounded-circle"
+                    />
+                    <v-spacer />
+                  </v-card-title>
+                  <v-card-title>
+                    <v-spacer />
+                    {{ tag.tag }}
+                    <v-spacer />
+                  </v-card-title>
+                  <v-card-actions>
+                    <v-spacer />
+                    <v-btn
+                      text
+                      @click="showModifyTagDialog(tag)"
+                    >
+                      수정
+                    </v-btn>
+                    <v-btn
+                      text
+                      @click="deleteTag(tag)"
+                    >
+                      삭제
+                    </v-btn>
+                    <v-spacer />
+                  </v-card-actions>
+                </v-card>
+              </v-col>
+            </draggable>
+          </v-container>
+        </template>
+
+        <v-card>
+          <v-card-title>관심사 등록</v-card-title>
+          <v-card-text>
+            <v-text-field
+              v-model="tag_text"
+              label="관심사"
+              required
+            />
+          </v-card-text>
+          <div class="image-select">
+            <label for="image">
+              이미지 등록
+            </label>
+            <v-file-input
+              id="image"
+              v-model="image"
+              @change="imageAdd"
+            />
+          </div>
+          <img
+            v-if="image_url"
+            :src="image_url"
+            alt=""
+            class="image-preview"
+          >
+          <v-card-actions v-show="!isLoading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              v-if="selected_tag !== null"
+              color="blue darken-1"
+              text
+              @click="modify"
+            >
+              수정
+            </v-btn>
+            <v-btn
+              v-else
+              color="blue darken-1"
+              text
+              @click="submit"
+            >
+              등록
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/live_tag'
+import Draggable from "vuedraggable";
+
+export default {
+  name: "PromotionSudaTags",
+
+  components: {Draggable},
+
+  data() {
+    return {
+      isLoading: false,
+      tags: [],
+      show_dialog: false,
+      selected_tag: null,
+      tag_text: null,
+      image: null,
+      image_url: null
+    }
+  },
+
+  async created() {
+    await this.getTags()
+  },
+
+  methods: {
+    async onDropCallback(items) {
+      const ids = items.map((item) => {
+        return item.id
+      })
+
+      const res = await api.updateTagOrders(ids)
+      if (res.status === 200 && res.data.success === true) {
+        this.notifySuccess(res.data.message)
+      }
+    },
+
+    imageAdd(payload) {
+      const file = payload;
+      if (file) {
+        this.image_url = URL.createObjectURL(file)
+        URL.revokeObjectURL(file)
+      } else {
+        this.image_url = null
+      }
+    },
+
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    cancel() {
+      this.show_dialog = false
+      this.image = null
+      this.image_url = null
+      this.tag_text = null
+    },
+
+    showModifyTagDialog(tag) {
+      this.selected_tag = tag
+      this.image_url = tag.image
+      this.tag_text = tag.tag
+      this.show_dialog = true
+    },
+
+    async submit() {
+      this.isLoading = true
+
+      const formData = new FormData()
+      formData.append("image", this.image)
+      formData.append("request", JSON.stringify({tag: this.tag_text}))
+
+      const res = await api.enrollment(formData)
+
+      if (res.status === 200 && res.data.success === true) {
+        this.show_dialog = false
+        this.image = null
+        this.image_url = null
+        this.tag_text = null
+        this.tags = []
+        this.notifySuccess(res.data.message)
+
+        await this.getTags()
+      } else {
+        this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      }
+
+      this.isLoading = false
+    },
+
+    async getTags() {
+      this.isLoading = true
+
+      try {
+        let res = await api.getTags();
+        this.tags = res.data.data
+      } catch (e) {
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async deleteTag(tag) {
+      this.isLoading = true
+      try {
+        let res = await api.deleteTag(tag.id)
+        if (res.status === 200 && res.data.success === true) {
+          this.notifySuccess(res.data.message)
+          await this.getTags()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async modify() {
+      this.isLoading = true
+
+      const formData = new FormData()
+      formData.append("image", this.image)
+      formData.append("request", JSON.stringify({tag: this.tag_text}))
+
+      const res = await api.modifyTag(this.selected_tag.id, formData)
+
+      if (res.status === 200 && res.data.success === true) {
+        this.show_dialog = false
+        this.image = null
+        this.image_url = null
+        this.tag_text = null
+        this.tags = []
+        this.notifySuccess(res.data.message)
+
+        await this.getTags()
+      } else {
+        this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      }
+
+      this.isLoading = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.image-select label {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #232d4a;
+  color: #fff;
+  vertical-align: middle;
+  font-size: 15px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.v-file-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+}
+
+.image-preview {
+  max-width: 100%;
+  width: 250px;
+  object-fit: cover;
+  margin-top: 10px;
+}
+</style>

src/views/Live/RecommendLive.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>수다친구별 관리</div>
+</template>
+
+<script>
+export default {
+  name: "SudaByCounselor"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Live/SudaStatus.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>수다현황</div>
+</template>
+
+<script>
+export default {
+  name: "SudaStatus"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Payment/PaymentCreatorStatus.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>수다친구별 현황</div>
+</template>
+
+<script>
+export default {
+  name: "PaymentCounselorStatus"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Payment/PaymentDailyStatus.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>일별 결제현황</div>
+</template>
+
+<script>
+export default {
+  name: "PaymentDailyStatus"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Promotion/BannerView.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>배너 관리</div>
+</template>
+
+<script>
+export default {
+  name: "BannerView"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Promotion/ChargeEvent.vue

@@ -0,0 +1,415 @@
+<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="10" />
+        <v-col>
+          <v-btn
+            block
+            color="#9970ff"
+            dark
+            depressed
+            @click="showWriteDialog"
+          >
+            충전 이벤트 등록
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="charge_event_list"
+            :loading="is_loading"
+            :items-per-page="-1"
+            item-key="id"
+            class="elevation-1"
+            hide-default-footer
+          >
+            <template v-slot:item.title="{ item }">
+              {{ item.title }}
+            </template>
+
+            <template v-slot:item.period="{ item }">
+              {{ item.startDate }}  ~ {{ item.endDate }}
+            </template>
+
+            <template v-slot:item.availableCount="{ item }">
+              {{ item.availableCount }} 번 참여가능
+            </template>
+
+            <template v-slot:item.addPercent="{ item }">
+              {{ item.addPercent }} %
+            </template>
+
+            <template v-slot:item.isActive="{ item }">
+              <div v-if="item.isActive">
+                O
+              </div>
+              <div v-else>
+                X
+              </div>
+            </template>
+
+            <template v-slot:item.management="{ item }">
+              <v-btn
+                :disabled="is_loading"
+                @click="showModifyDialog(item)"
+              >
+                수정
+              </v-btn>
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-row>
+      <v-dialog
+        v-model="show_write_dialog"
+        max-width="1000px"
+        persistent
+      >
+        <v-card>
+          <v-card-title>충전 이벤트 등록</v-card-title>
+          <v-card-text>
+            <v-text-field
+              v-model="title"
+              label="제목"
+              required
+            />
+          </v-card-text>
+          <v-card-text>
+            <v-text-field
+              v-model="available_count"
+              label="참여가능 횟수"
+              required
+            />
+          </v-card-text>
+          <v-card-text>
+            <v-text-field
+              v-model="add_percent"
+              label="추가 충전 %"
+              required
+            />
+          </v-card-text>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                기간
+              </v-col>
+              <v-col
+                cols="8"
+                class="datepicker-wrapper"
+              >
+                <datetime
+                  v-model="start_date"
+                  class="datepicker"
+                  format="YYYY-MM-DD"
+                />
+                <div> ~ </div>
+                <datetime
+                  v-model="end_date"
+                  class="datepicker"
+                  format="YYYY-MM-DD"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text v-show="selected_charge_event !== null">
+            <v-row align="center">
+              <v-col cols="4">
+                활성화
+              </v-col>
+              <v-col cols="8">
+                <input
+                  v-model="is_active"
+                  type="checkbox"
+                >
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-actions v-show="!is_loading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              v-if="selected_charge_event !== null"
+              color="blue darken-1"
+              text
+              @click="modify"
+            >
+              수정
+            </v-btn>
+            <v-btn
+              v-else
+              color="blue darken-1"
+              text
+              @click="validate"
+            >
+              등록
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/charge_event'
+import datetime from 'vuejs-datetimepicker';
+
+export default {
+  name: "ChargeEvent",
+  components: { datetime },
+
+  data() {
+    return {
+      is_loading: false,
+      show_write_dialog: false,
+
+      selected_charge_event: null,
+      title: null,
+      start_date: null,
+      end_date: null,
+      available_count: null,
+      add_percent: null,
+      is_active: null,
+
+      charge_event_list: [],
+      headers: [
+        {
+          text: '제목',
+          align: 'center',
+          sortable: false,
+          value: 'title',
+        },
+        {
+          text: '기간',
+          align: 'center',
+          sortable: false,
+          value: 'period',
+        },
+        {
+          text: '참여가능 횟수',
+          align: 'center',
+          sortable: false,
+          value: 'availableCount',
+        },
+        {
+          text: '추가 충전 %',
+          align: 'center',
+          sortable: false,
+          value: 'addPercent',
+        },
+        {
+          text: '활성화',
+          align: 'center',
+          sortable: false,
+          value: 'isActive',
+        },
+        {
+          text: '관리',
+          align: 'center',
+          sortable: false,
+          value: 'management'
+        },
+      ],
+    }
+  },
+
+  async created() {
+    await this.getChargeEventList();
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    showWriteDialog() {
+      this.show_write_dialog = true
+    },
+
+    showModifyDialog(item) {
+      this.selected_charge_event = item;
+      this.title = item.title;
+      this.add_percent = item.addPercent;
+      this.available_count = item.availableCount;
+      this.start_date = item.startDate;
+      this.end_date = item.endDate;
+      this.is_active = item.isActive;
+      this.show_write_dialog = true
+    },
+
+    validate() {
+      if (this.title === null) {
+        this.notifyError('제목을 입력하세요.')
+        return
+      }
+
+      if (this.available_count === null) {
+        this.notifyError('참여가능 횟수를 입력하세요.')
+        return
+      }
+
+      if (isNaN(this.available_count)) {
+        this.notifyError('참여가능 횟수는 숫자만 입력 가능합니다.')
+        return
+      }
+
+      if (this.add_percent === null) {
+        this.notifyError('추가 충전 비율(%)을 입력하세요')
+        return
+      }
+
+      if (isNaN(this.add_percent)) {
+        this.notifyError('추가 충전 비율(%)은 숫자만 입력 가능합니다.')
+        return
+      }
+
+      if (this.start_date === null || this.end_date === null) {
+        this.notifyError('이벤트 기간을 입력하세요.')
+        return
+      }
+
+      this.submit()
+     },
+
+    cancel() {
+      this.selected_charge_event = null;
+      this.title = null;
+      this.add_percent = null;
+      this.available_count = null;
+      this.start_date = null;
+      this.end_date = null;
+      this.show_write_dialog = false
+    },
+
+    async submit() {
+      if (this.is_loading) return;
+
+      this.is_loading = true
+
+      try {
+        const res = await api.save(
+          this.title,
+          this.start_date,
+          this.end_date,
+          this.available_count,
+          this.add_percent
+        )
+
+        if (res.status === 200 && res.data.success === true) {
+          this.cancel()
+          this.notifySuccess(res.data.message || '등록되었습니다.')
+
+          this.charge_event_list = [];
+          await this.getChargeEventList()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
+      }
+
+      this.is_loading = false
+    },
+
+    async modify() {
+      if (this.is_loading) return;
+
+      this.isLoading = true
+
+      try {
+        const res = await api.modify(
+          this.selected_charge_event.id,
+          this.title !== this.selected_charge_event.title ? this.title : null,
+          this.start_date !== this.selected_charge_event.startDate ? this.start_date : null,
+          this.end_date !== this.selected_charge_event.endDate ? this.end_date : null,
+          this.available_count !== this.selected_charge_event.availableCount ? this.available_count : null,
+          this.add_percent !== this.selected_charge_event.addPercent ? this.add_percent : null,
+          this.is_active !== this.selected_charge_event.isActive ? this.is_active : null
+        )
+
+        if (res.status === 200 && res.data.success === true) {
+          this.cancel()
+          this.notifySuccess(res.data.message || '수정되었습니다.')
+
+          this.charge_event_list = [];
+          await this.getChargeEventList()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
+      }
+    },
+
+    async getChargeEventList() {
+      this.is_loading = true
+
+      try {
+        const res = await api.getChargeEventList();
+
+        if (res.status === 200 && res.data.success === true) {
+          this.charge_event_list = res.data.data
+        } else {
+          this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+
+        this.is_loading = false
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      }
+    }
+  },
+}
+</script>
+
+<style scoped>
+.datepicker {
+  text-align: center;
+}
+
+.datepicker-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.datepicker-wrapper > div {
+  margin: 20px;
+}
+
+.v-card__text {
+  margin-top: 20px;
+}
+
+.v-card__actions {
+  margin-top: 100px;
+}
+
+.v-card__actions > .v-btn {
+  font-size: 20px;
+
+}
+</style>

src/views/Promotion/EventView.vue

@@ -0,0 +1,495 @@
+<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="10" />
+        <v-col>
+          <v-btn
+            block
+            color="#9970ff"
+            dark
+            depressed
+            @click="showWriteDialog"
+          >
+            이벤트 등록
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col
+          v-for="(item, i) in events"
+          :key="i"
+          cols="3"
+        >
+          <v-card>
+            <v-card-title>
+              <v-spacer />
+              <v-img
+                :src="item.thumbnailImageUrl"
+                @click="clickEvent(item)"
+              />
+              <v-spacer />
+            </v-card-title>
+          </v-card>
+        </v-col>
+      </v-row>
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-row>
+      <v-dialog
+        v-model="show_write_dialog"
+        max-width="1000px"
+        persistent
+      >
+        <v-card>
+          <v-card-text />
+          <v-card-title v-show="!is_modify">
+            이벤트 등록
+          </v-card-title>
+          <v-card-title v-show="is_modify">
+            이벤트 수정
+          </v-card-title>
+          <v-card-text>
+            <v-text-field
+              v-model="event.title"
+              label="제목"
+              required
+            />
+          </v-card-text>
+          <v-card-text>
+            <div class="image-select">
+              <label for="thumbnailImage">
+                썸네일 등록
+              </label>
+              <v-file-input
+                id="thumbnailImage"
+                v-model="event.thumbnailImage"
+                @change="thumbnailImageAdd"
+              />
+            </div>
+            <img
+              v-if="event.thumbnailImageUrl"
+              :src="event.thumbnailImageUrl"
+              alt=""
+              class="image-preview"
+            >
+          </v-card-text>
+          <v-card-text>
+            <div class="image-select">
+              <label for="detailImage">
+                상세 이미지 등록
+              </label>
+              <v-file-input
+                id="detailImage"
+                v-model="event.detailImage"
+                @change="detailImageAdd"
+              />
+            </div>
+            <img
+              v-if="event.detailImageUrl"
+              :src="event.detailImageUrl"
+              alt=""
+              class="image-preview"
+            >
+          </v-card-text>
+          <v-card-text>
+            <div class="image-select">
+              <label for="popupImage">
+                팝업 이미지 등록
+              </label>
+              <v-file-input
+                id="popupImage"
+                v-model="event.popupImage"
+                @change="popupImageAdd"
+              />
+            </div>
+            <img
+              v-if="event.popupImageUrl"
+              :src="event.popupImageUrl"
+              alt=""
+              class="image-preview"
+            >
+          </v-card-text>
+          <v-card-text>
+            <v-text-field
+              v-model="event.link"
+              label="link"
+              required
+            />
+          </v-card-text>
+          <v-card-text>
+            <v-row>
+              <v-col cols="4">
+                팝업
+              </v-col>
+              <v-col cols="8">
+                <input
+                  v-model="event.isPopup"
+                  type="checkbox"
+                >
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-actions v-show="!is_loading">
+            <v-btn
+              v-show="is_modify"
+              color="blue darken-1"
+              text
+              @click="deleteConfirm"
+            >
+              삭제
+            </v-btn>
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              v-show="!is_modify"
+              color="blue darken-1"
+              text
+              @click="submit"
+            >
+              등록
+            </v-btn>
+            <v-btn
+              v-show="is_modify"
+              color="blue darken-1"
+              text
+              @click="modify"
+            >
+              수정
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+    <v-row>
+      <v-dialog
+        v-model="show_delete_confirm_dialog"
+        max-width="400px"
+        persistent
+      >
+        <v-card>
+          <v-card-text />
+          <v-card-text>
+            삭제하시겠습니까?
+          </v-card-text>
+          <v-card-actions v-show="!is_loading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="deleteCancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="deleteEvent"
+            >
+              확인
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/event'
+
+export default {
+    name: "EventView",
+
+    data() {
+        return {
+            is_loading: false,
+            is_modify: false,
+            page: 1,
+            events: [],
+            event: {},
+            show_write_dialog: false,
+            show_delete_confirm_dialog: false,
+        }
+    },
+
+    async created() {
+        await this.getEvents()
+    },
+
+    methods: {
+        notifyError(message) {
+            this.$dialog.notify.error(message)
+        },
+
+        notifySuccess(message) {
+            this.$dialog.notify.success(message)
+        },
+
+        thumbnailImageAdd(payload) {
+            const file = payload;
+            if (file) {
+                this.event.thumbnailImageUrl = URL.createObjectURL(file)
+                URL.revokeObjectURL(file)
+            } else {
+                this.event.thumbnailImageUrl = null
+            }
+        },
+
+        detailImageAdd(payload) {
+            const file = payload;
+            if (file) {
+                this.event.detailImageUrl = URL.createObjectURL(file)
+                URL.revokeObjectURL(file)
+            } else {
+                this.event.detailImageUrl = null
+            }
+        },
+
+        popupImageAdd(payload) {
+            const file = payload;
+            if (file) {
+                this.event.popupImageUrl = URL.createObjectURL(file)
+                URL.revokeObjectURL(file)
+            } else {
+                this.event.popupImageUrl = null
+            }
+        },
+
+        async getEvents() {
+            this.is_loading = true
+
+            try {
+                const res = await api.getEvents(this.page)
+                if (res.status === 200 && res.data.success === true) {
+                    this.events = res.data.data.eventList
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async next() {
+            await this.getEvents()
+        },
+
+        showWriteDialog() {
+            this.show_write_dialog = true
+        },
+
+        clickEvent(item) {
+            this.is_modify = true
+            this.event.id = item.id
+            this.event.thumbnailImageUrl = item.thumbnailImageUrl
+            this.event.detailImageUrl = item.detailImageUrl
+            this.event.link = item.link
+            this.event.title = item.title
+            this.event.isPopup = item.isPopup
+            this.event.popupImageUrl = item.popupImageUrl
+            this.show_write_dialog = true
+        },
+
+        cancel() {
+            this.is_modify = false
+            this.event = {}
+            this.show_write_dialog = false
+        },
+
+        validate() {
+            if (this.event.title == null) {
+                this.notifyError("제목을 입력하세요")
+                return false;
+            }
+
+            if (this.event.thumbnailImage == null) {
+                this.notifyError("썸네일 이미지를 등록하세요")
+                return false;
+            }
+
+            if ((this.event.link == null || this.event.link.trim().length <= 0) && this.event.detailImage == null) {
+                this.notifyError("상세이미지 혹은 link 둘 중 하나는 반드시 입력해야 합니다.")
+                return false;
+            }
+
+            return true
+        },
+
+        async submit() {
+            if (!this.validate()) return;
+            if (this.is_loading) return;
+
+            this.is_loading = true
+
+            try {
+                const formData = new FormData()
+                formData.append("title", this.event.title)
+                formData.append("thumbnail", this.event.thumbnailImage)
+                formData.append("isPopup", this.event.isPopup ? this.event.isPopup : false)
+
+                if (this.event.detailImage != null) {
+                    formData.append("detail", this.event.detailImage)
+                }
+
+                if (this.event.popupImage != null) {
+                    formData.append("popup", this.event.popupImage)
+                }
+
+                if (this.event.link != null && this.event.link.trim().length > 0) {
+                    formData.append("link", this.event.link)
+                }
+
+                const res = await api.save(formData)
+                if (res.status === 200 && res.data.success === true) {
+                    this.show_write_dialog = false
+                    this.notifySuccess('등록되었습니다.')
+                    this.page = 1
+                    await this.getEvents()
+                    this.event = {}
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async modify() {
+            if (this.is_loading) return;
+
+            this.is_loading = true
+            try {
+                const formData = new FormData()
+                formData.append("id", this.event.id)
+
+                if (this.event.title != null && this.event.title.trim().length > 0) {
+                    formData.append("title", this.event.title)
+                }
+
+                if (this.event.thumbnailImage != null) {
+                    formData.append("thumbnail", this.event.thumbnailImage)
+                }
+
+                if (this.event.detailImage != null) {
+                    formData.append("detail", this.event.detailImage)
+                }
+
+                if (this.event.popupImage != null) {
+                    formData.append("popup", this.event.popupImage)
+                }
+
+                if (this.event.isPopup != null) {
+                    formData.append("isPopup", this.event.isPopup)
+                }
+
+                if (this.event.link != null && this.event.link.trim().length > 0) {
+                    formData.append("link", this.event.link)
+                }
+
+                const res = await api.modify(formData)
+                if (res.status === 200 && res.data.success === true) {
+                    this.show_write_dialog = false
+                    this.notifySuccess('수정되었습니다.')
+                    this.page = 1
+                    await this.getEvents()
+                    this.event = {}
+                    this.is_modify = false
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        deleteConfirm() {
+            this.show_delete_confirm_dialog = true
+        },
+
+        deleteCancel() {
+            this.show_delete_confirm_dialog = false
+        },
+
+        async deleteEvent() {
+            if (this.is_loading) return;
+            this.is_loading = true
+
+            try {
+                const res = await api.deleteEvent(this.event.id)
+                if (res.status === 200 && res.data.success === true) {
+                    this.show_write_dialog = false
+                    this.show_delete_confirm_dialog = false
+                    this.notifySuccess('삭제되었습니다.')
+                    this.page = 1
+                    await this.getEvents()
+                    this.event = {}
+                    this.is_modify = false
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.image-select label {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #232d4a;
+    color: #fff;
+    vertical-align: middle;
+    font-size: 15px;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+.v-file-input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+}
+
+.image-preview {
+    max-width: 100%;
+    width: 250px;
+    object-fit: cover;
+    margin-top: 10px;
+}
+</style>

src/views/Promotion/PromotionCreatorRecommend.vue

@@ -0,0 +1,362 @@
+<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="10" />
+        <v-col>
+          <v-btn
+            block
+            color="#9970ff"
+            dark
+            depressed
+            @click="showAddCounselorDialog"
+          >
+            추천 상담친구 추가
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="recommendCounselorList"
+            :loading="isLoading"
+            class="elevation-1"
+            hide-default-footer
+          >
+            <template v-slot:item.image="{ item }">
+              <img
+                :src="item.profileImageUrl"
+                alt=""
+                height="100"
+                width="100"
+              >
+            </template>
+
+            <template v-slot:item.introduce="{ item }">
+              <v-btn
+                :disabled="isLoading"
+                text
+                color="blue darken-1"
+                @click="showIntroduceDialog(item)"
+              >
+                [보기]
+              </v-btn>
+            </template>
+
+            <template v-slot:item.isCounseling="{ item }">
+              <h3 v-if="item.isCounseling">
+                O
+              </h3>
+              <h3 v-else>
+                X
+              </h3>
+            </template>
+
+            <template v-slot:item.youtubeUrl="{ item }">
+              <a :href="item.youtubeUrl">{{ item.youtubeUrl }}</a>
+            </template>
+
+            <template v-slot:item.instagramUrl="{ item }">
+              <a :href="item.instagramUrl">{{ item.instagramUrl }}</a>
+            </template>
+
+            <template v-slot:item.management="{ item }">
+              <v-btn
+                :disabled="isLoading"
+                class="white--text"
+                color="blue darken-1"
+                @click="deleteRecommendCounselor(item)"
+              >
+                삭제
+              </v-btn>
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-row>
+      <v-dialog
+        v-model="show_add_counselor_dialog"
+        max-width="400px"
+        persistent
+      >
+        <v-card>
+          <v-card-title>추천 상담친구 추가</v-card-title>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                추천친구
+              </v-col>
+              <v-col cols="8">
+                <v-select
+                  v-model="counselor_id"
+                  :items="counselorList"
+                  item-text="name"
+                  item-value="value"
+                  label="수다친구 선택"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-actions v-show="!isLoading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="validate"
+            >
+              추가
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+    <v-row>
+      <v-dialog
+        v-model="show_introduce_dialog"
+        max-width="400px"
+        persistent
+      >
+        <v-card>
+          <v-card-title>{{ counselor_nickname }} 소개</v-card-title>
+          <v-card-text>
+            {{ counselor_introduce }}
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="closeIntroduceDialog"
+            >
+              확인
+            </v-btn>
+            <v-spacer />
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import * as accountApi from "@/api/member";
+import * as api from '@/api/recommend_counselor'
+
+export default {
+  name: "PromotionRecommendCounselor",
+  data() {
+    return {
+      isLoading: false,
+      counselor_id: null,
+      counselorList: [],
+      recommendCounselorList: [],
+      headers: [
+        {
+          text: '회원번호',
+          align: 'center',
+          sortable: false,
+          value: 'id',
+        },
+        {
+          text: '썸네일',
+          align: 'center',
+          sortable: false,
+          value: 'image',
+        },
+        {
+          text: '닉네임',
+          align: 'center',
+          sortable: false,
+          value: 'nickname',
+        },
+        {
+          text: '관심사',
+          align: 'center',
+          sortable: false,
+          value: 'tags',
+        },
+        {
+          text: '소개내용',
+          align: 'center',
+          sortable: false,
+          value: 'introduce',
+        },
+        {
+          text: '상담유무',
+          align: 'center',
+          sortable: false,
+          value: 'isCounseling',
+        },
+        {
+          text: '유튜브',
+          align: 'center',
+          sortable: false,
+          value: 'youtubeUrl',
+        },
+        {
+          text: '인스타그램',
+          align: 'center',
+          sortable: false,
+          value: 'instagramUrl',
+        },
+        {
+          text: '관리',
+          align: 'center',
+          sortable: false,
+          value: 'management',
+        },
+      ],
+      show_add_counselor_dialog: false,
+      show_introduce_dialog: false,
+      counselor_introduce: null,
+      counselor_nickname: null,
+    }
+  },
+
+  created() {
+    this.getCounselorList()
+    this.getRecommendCounselorList()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    closeIntroduceDialog() {
+      this.show_introduce_dialog = false
+      this.counselor_introduce = null
+      this.counselor_nickname = null
+    },
+
+    showIntroduceDialog(item) {
+      this.counselor_introduce = item.introduce
+      this.counselor_nickname = item.nickname
+      this.show_introduce_dialog = true
+    },
+
+    showAddCounselorDialog() {
+      this.show_add_counselor_dialog = true
+    },
+
+    cancel() {
+      this.counselor_id = null
+      this.show_add_counselor_dialog = false
+    },
+
+    validate() {
+      if (this.counselor_id != null && this.counselor_id > 0) {
+        this.submit()
+      } else {
+        this.notifyError("수다친구를 선택해 주세요.")
+      }
+    },
+
+    async submit() {
+      this.isLoading = true
+
+      try {
+        const res = await api.addRecommendCounselor(this.counselor_id)
+
+        if (res.status === 200 && res.data.success === true) {
+          this.show_add_counselor_dialog = false
+          this.counselor_id = null
+          this.notifySuccess(res.data.message || '등록되었습니다.')
+          await this.getRecommendCounselorList()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async getCounselorList() {
+      this.isLoading = true
+
+      try {
+        const res = await accountApi.getCounselorList()
+
+        if (res.status === 200 && res.data.success === true) {
+          this.counselorList = res.data.data.map((item) => {
+            return {name: item.nickname, value: item.id}
+          })
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async getRecommendCounselorList() {
+      this.isLoading = true
+
+      try {
+        const res = await api.getRecommendCounselorList()
+
+        if (res.status === 200 && res.data.success === true) {
+          this.recommendCounselorList = res.data.data
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async deleteRecommendCounselor(item) {
+      this.isLoading = true
+      try {
+        const res = await api.deleteRecommendCounselor(item.id)
+
+        if (res.status === 200 && res.data.success === true) {
+          this.notifySuccess(res.data.message || '삭제되었습니다.')
+          await this.getRecommendCounselorList()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.isLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+td img {
+  display: block;
+  margin: 10px auto;
+}
+</style>

src/views/Promotion/PromotionCreatorSituation.vue

@@ -0,0 +1,486 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>상황별 추천상담사</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-row>
+      <v-dialog
+        v-model="show_dialog"
+        max-width="400px"
+        persistent
+      >
+        <template v-slot:activator="{ on, attrs }">
+          <v-container>
+            <v-row>
+              <v-col cols="10" />
+              <v-col>
+                <v-btn
+                  block
+                  color="#9970ff"
+                  dark
+                  depressed
+                  v-bind="attrs"
+                  v-on="on"
+                >
+                  상황등록
+                </v-btn>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-data-table
+                  :headers="headers"
+                  :items="situationList"
+                  :loading="isLoading"
+                  class="elevation-1"
+                  hide-default-footer
+                >
+                  <template v-slot:item.image="{ item }">
+                    <img
+                      :src="item.thumbnailImageUrl"
+                      alt=""
+                      height="100"
+                      width="100"
+                    >
+                  </template>
+
+                  <template v-slot:item.counselor="{ item }">
+                    - {{ item.counselorList[0].nickname }}<br>
+                    - {{ item.counselorList[1].nickname }}
+                  </template>
+
+                  <template v-slot:item.isActive="{ item }">
+                    <h3 v-if="item.isActive">
+                      O
+                    </h3>
+                    <h3 v-else>
+                      X
+                    </h3>
+                  </template>
+
+                  <template v-slot:item.management="{ item }">
+                    <v-btn
+                      :disabled="isLoading"
+                      @click="showModifySituationDialog(item)"
+                    >
+                      수정
+                    </v-btn>
+                    &nbsp;&nbsp;
+                    <v-btn
+                      :disabled="isLoading"
+                      @click="deleteSituation(item)"
+                    >
+                      삭제
+                    </v-btn>
+                  </template>
+                </v-data-table>
+              </v-col>
+            </v-row>
+          </v-container>
+        </template>
+
+        <v-card>
+          <v-card-title>상황 등록</v-card-title>
+          <v-card-text>
+            <v-text-field
+              v-model="title"
+              label="제목"
+              required
+            />
+          </v-card-text>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                썸네일
+              </v-col>
+              <v-col cols="8">
+                <div class="image-select">
+                  <label for="image">
+                    이미지 불러오기
+                  </label>
+                  <v-file-input
+                    id="image"
+                    v-model="image"
+                    @change="imageAdd"
+                  />
+                </div>
+                <img
+                  v-if="image_url"
+                  :src="image_url"
+                  alt=""
+                  class="image-preview"
+                >
+              </v-col>
+            </v-row>
+          </v-card-text>
+
+          <br>
+
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                추천친구
+              </v-col>
+              <v-col cols="8">
+                <v-select
+                  v-model="counselor1"
+                  :items="counselorList"
+                  item-text="name"
+                  item-value="value"
+                  label="수다친구 선택 1"
+                />
+
+                <v-select
+                  v-model="counselor2"
+                  :items="counselorList"
+                  item-text="name"
+                  item-value="value"
+                  label="수다친구 선택 2"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+
+          <br>
+
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                사용 여부
+              </v-col>
+              <v-col cols="8">
+                <v-radio-group
+                  v-model="is_active"
+                  row
+                >
+                  <v-spacer />
+                  <v-radio
+                    :value="true"
+                    label="사용"
+                  />
+                  <v-radio
+                    :value="false"
+                    label="미사용"
+                  />
+                  <v-spacer />
+                </v-radio-group>
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-actions v-show="!isLoading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              v-if="selected_situation !== null"
+              color="blue darken-1"
+              text
+              @click="modify"
+            >
+              수정
+            </v-btn>
+            <v-btn
+              v-else
+              color="blue darken-1"
+              text
+              @click="validate"
+            >
+              등록
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import * as accountApi from '@/api/member'
+import * as api from '@/api/counselor_situation'
+
+export default {
+  name: "PromotionCounselorSituation",
+
+  data() {
+    return {
+      isLoading: false,
+      title: null,
+      image: null,
+      image_url: null,
+      is_active: null,
+      show_dialog: false,
+      selected_situation: null,
+      counselor1: null,
+      counselor2: null,
+      counselorList: [],
+      situationList: [],
+      headers: [
+        {
+          text: '제목',
+          align: 'center',
+          sortable: false,
+          value: 'title',
+        },
+        {
+          text: '썸네일',
+          align: 'center',
+          sortable: false,
+          value: 'image',
+        },
+        {
+          text: '추천친구',
+          align: 'center',
+          sortable: false,
+          value: 'counselor',
+        },
+        {
+          text: '사용여부',
+          align: 'center',
+          sortable: false,
+          value: 'isActive',
+        },
+        {
+          text: '관리',
+          align: 'center',
+          sortable: false,
+          value: 'management'
+        },
+      ]
+    }
+  },
+
+  created() {
+    this.getCounselorList()
+    this.getSituationList()
+  },
+
+  methods: {
+    imageAdd(payload) {
+      const file = payload;
+      if (file) {
+        this.image_url = URL.createObjectURL(file)
+        URL.revokeObjectURL(file)
+      } else {
+        this.image_url = null
+      }
+    },
+
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    cancel() {
+      this.show_dialog = false
+      this.image = null
+      this.image_url = null
+      this.title = null
+      this.selected_situation = null
+      this.is_active = null
+      this.counselor1 = null
+      this.counselor2 = null
+    },
+
+    validate() {
+      if (
+        this.title === null ||
+        this.image === null ||
+        this.is_active === null ||
+        this.counselor2 === null ||
+        this.counselor1 === null
+      ) {
+        this.notifyError('내용을 입력하세요')
+      } else if (this.counselor2 === this.counselor1) {
+        this.notifyError('다른 수다친구를 선택해 주세요.')
+      } else {
+        this.submit()
+      }
+    },
+
+    showModifySituationDialog(item) {
+      this.selected_situation = item
+      this.counselor1 = item.counselorList[0].accountId
+      this.counselor2 = item.counselorList[1].accountId
+      this.title = item.title
+      this.image_url = item.thumbnailImageUrl
+      this.is_active = item.isActive
+
+      this.show_dialog = true
+    },
+
+    async submit() {
+      this.isLoading = true
+
+      try {
+        const formData = new FormData()
+        formData.append("image", this.image)
+        formData.append("request", JSON.stringify({
+          title: this.title,
+          isActive: JSON.parse(this.is_active),
+          recommendCounselorIds: [this.counselor1, this.counselor2]
+        }))
+
+        const res = await api.createSituation(formData)
+
+        if (res.status === 200 && res.data.success === true) {
+          this.show_dialog = false
+          this.image = null
+          this.image_url = null
+          this.title = null
+          this.selected_situation = null
+          this.is_active = null
+          this.counselor1 = null
+          this.counselor2 = null
+
+          this.notifySuccess(res.data.message || '등록되었습니다.')
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async modify() {
+      this.isLoading = true
+
+      try {
+        const formData = new FormData()
+        formData.append("image", this.image)
+        formData.append("request", JSON.stringify({
+          title: this.title,
+          isActive: JSON.parse(this.is_active),
+          recommendCounselorIds: [this.counselor1, this.counselor2]
+        }))
+
+        const res = await api.modifySituation(this.selected_situation.id, formData)
+
+        if (res.status === 200 && res.data.success === true) {
+          this.show_dialog = false
+          this.image = null
+          this.image_url = null
+          this.title = null
+          this.selected_situation = null
+          this.is_active = null
+          this.counselor1 = null
+          this.counselor2 = null
+          this.situationList = []
+          this.notifySuccess(res.data.message || '수정되었습니다.')
+
+          await this.getSituationList()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async deleteSituation(item) {
+      this.isLoading = true
+      try {
+        const res = await api.deleteSituation(item.id)
+
+        if (res.status === 200 && res.data.success === true) {
+          this.notifySuccess(res.data.message || '삭제되었습니다.')
+          await this.getSituationList()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async getSituationList() {
+      this.isLoading = true
+
+      try {
+        const res = await api.getSituationList();
+        if (res.status === 200 && res.data.success === true) {
+          this.situationList = res.data.data
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async getCounselorList() {
+      this.isLoading = true
+
+      try {
+        const res = await accountApi.getCounselorList()
+
+        if (res.status === 200 && res.data.success === true) {
+          this.counselorList = res.data.data.map((item) => {
+            return {name: item.nickname, value: item.id}
+          })
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.isLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.image-select label {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #232d4a;
+  color: #fff;
+  vertical-align: middle;
+  font-size: 15px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.v-file-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+}
+
+.image-preview {
+  max-width: 100%;
+  width: 250px;
+  object-fit: cover;
+  margin-top: 10px;
+}
+
+td img {
+  display: block;
+  margin: 10px auto;
+}
+</style>

src/views/Promotion/Push.vue

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>푸시메시지 발송</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-text-field
+        v-model="account_id"
+        label="회원번호(입력하지 않으면 전체회원에게 발송)"
+        outlined
+        required
+      />
+
+      <v-text-field
+        v-model="title"
+        label="제목"
+        outlined
+        required
+      />
+
+      <v-textarea
+        v-model="message"
+        label="내용"
+        outlined
+        required
+      />
+
+      <v-row>
+        <v-col cols="10" />
+        <v-col>
+          <v-btn
+            block
+            color="#9970ff"
+            dark
+            depressed
+            @click="confirm"
+          >
+            메시지 발송
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-dialog
+          v-model="show_confirm"
+          max-width="400px"
+          persistent
+        >
+          <v-card>
+            <v-card-title>푸시메시지 발송 확인</v-card-title>
+            <v-card-text v-if="account_id.length > 0">
+              발송대상(회원번호): {{ send_account_id }}
+            </v-card-text>
+            <v-card-text v-else>
+              발송대상(회원번호): 전체
+            </v-card-text>
+            <v-card-text>
+              제목: {{ title }}
+            </v-card-text>
+            <v-card-text>
+              내용: {{ message }}
+            </v-card-text>
+            <v-card-actions v-show="!isLoading">
+              <v-spacer />
+              <v-btn
+                color="blue darken-1"
+                text
+                @click="send"
+              >
+                발송
+              </v-btn>
+              <v-spacer />
+              <v-btn
+                color="blue darken-1"
+                text
+                @click="cancel"
+              >
+                취소
+              </v-btn>
+              <v-spacer />
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/push'
+
+export default {
+  name: "Push",
+
+  data() {
+    return {
+      show_confirm: false,
+      isLoading: false,
+      account_id: '',
+      send_account_id: [],
+      title: '',
+      message: ''
+    }
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    confirm() {
+      if (this.title.trim() === '') {
+        return this.notifyError('제목을 입력하세요')
+      }
+
+      if (this.message.trim() === '') {
+        return this.notifyError('내용을 입력하세요')
+      }
+
+      if (!this.isLoading) {
+        if (this.account_id.length > 0) {
+          this.send_account_id = Array.from(
+            new Set(
+              this.account_id.split(",")
+                .map(accountId => accountId.trim())
+                .filter(accountId => Number(accountId))
+            )
+          )
+        }
+        this.show_confirm = true
+      }
+    },
+
+    cancel() {
+      this.show_confirm = false
+    },
+
+    async send() {
+      if (!this.isLoading) {
+        this.isLoading = true
+
+        try {
+          await api.sendPush(
+            this.send_account_id,
+            this.title,
+            this.message
+          )
+        } finally {
+          this.isLoading = false
+          this.show_confirm = false
+          this.account_id = ''
+          this.send_account_id = []
+          this.title = ''
+          this.message = ''
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Support/FaqView.vue

@@ -0,0 +1,374 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>FAQ</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col cols="9">
+          <v-radio-group
+            v-model="selected_category"
+            row
+            @change="getFaqs"
+          >
+            <v-radio
+              v-for="category in categories"
+              :key="category"
+              :label="category"
+              :value="category"
+            />
+          </v-radio-group>
+        </v-col>
+        <v-spacer />
+        <v-col>
+          <v-btn
+            block
+            color="#9970ff"
+            dark
+            depressed
+            @click="showWriteDialog"
+          >
+            FAQ 등록
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-simple-table
+            class="elevation-10"
+            dark
+          >
+            <template>
+              <thead>
+                <tr>
+                  <th class="text-center">
+                    NO
+                  </th>
+                  <th class="text-center">
+                    카테고리
+                  </th>
+                  <th class="text-center">
+                    질문
+                  </th>
+                  <th class="text-center">
+                    답변
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="item in faqs"
+                  :key="item.id"
+                  @click="clickFaq(item)"
+                >
+                  <td>
+                    {{ item.id }}
+                  </td>
+                  <td>
+                    {{ item.category }}
+                  </td>
+                  <td class="text-left">
+                    {{ item.question }}
+                  </td>
+                  <td class="text-left">
+                    <div v-html="item.answer" />
+                  </td>
+                </tr>
+              </tbody>
+            </template>
+          </v-simple-table>
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-row>
+      <v-dialog
+        v-model="show_write_dialog"
+        max-width="1000px"
+        persistent
+      >
+        <v-card>
+          <v-card-text />
+          <v-card-text>
+            <v-radio-group
+              v-model="faq.category"
+              row
+            >
+              <v-radio
+                v-for="category in categories"
+                :key="category"
+                :label="category"
+                :value="category"
+              />
+            </v-radio-group>
+          </v-card-text>
+          <v-card-text>
+            <v-text-field
+              v-model="faq.question"
+              label="제목"
+            />
+          </v-card-text>
+          <v-card-text>
+            <VueEditor
+              v-model="faq.answer"
+              :editor-toolbar="customToolbar"
+            />
+          </v-card-text>
+          <v-card-actions v-show="!is_loading">
+            <v-btn
+              v-show="is_modify"
+              color="blue darken-1"
+              text
+              @click="deleteFaq"
+            >
+              삭제
+            </v-btn>
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              v-if="is_modify"
+              color="blue darken-1"
+              text
+              @click="modify"
+            >
+              수정
+            </v-btn>
+            <v-btn
+              v-else
+              color="blue darken-1"
+              text
+              @click="submit"
+            >
+              등록
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/faq'
+import {VueEditor} from "vue2-editor";
+
+export default {
+    name: "FaqView",
+
+    components: {
+        VueEditor,
+    },
+
+    data() {
+        return {
+            is_loading: false,
+            is_modify: false,
+            categories: [],
+            selected_category: '',
+            selected_faq: {},
+            faqs: [],
+            faq: {},
+            show_write_dialog: false,
+            show_delete_confirm_dialog: false,
+            customToolbar: [
+                [{header: [false, 1, 2, 3, 4, 5, 6]}],
+                ["bold", "italic", "underline"],
+                [
+                    {align: ""},
+                    {align: "center"},
+                    {align: "right"},
+                    {align: "justify"}
+                ],
+                [{list: "ordered"}, {list: "bullet"}],
+                [{color: []}, {background: []}],
+            ]
+        }
+    },
+
+    async created() {
+        await this.getFaqCategories()
+    },
+
+    methods: {
+        notifyError(message) {
+            this.$dialog.notify.error(message)
+        },
+
+        notifySuccess(message) {
+            this.$dialog.notify.success(message)
+        },
+
+        async getFaqCategories() {
+            this.is_loading = true
+            try {
+                const res = await api.getCategories()
+                if (res.status === 200 && res.data.success === true) {
+                    const data = res.data.data
+
+                    this.categories = data
+                    this.selected_category = data[0]
+                    await this.getFaqs()
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async getFaqs() {
+            this.is_loading = true
+
+            this.faqs = []
+            try {
+                const res = await api.getFaqs(this.selected_category)
+                if (res.status === 200 && res.data.success === true) {
+                    this.faqs = res.data.data
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async submit() {
+            if (!this.validate()) return;
+            if (this.is_loading) return;
+
+            this.is_loading = true
+
+            try {
+                const res = await api.save(this.faq.question, this.faq.answer, this.faq.category)
+                if (res.status === 200 && res.data.success === true) {
+                    this.show_write_dialog = false
+                    this.notifySuccess('등록되었습니다.')
+                    this.faq = {}
+                    await this.getFaqs()
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+            }
+        },
+
+        async deleteFaq() {
+            this.is_loading = true
+            try {
+                const res = await api.deleteFaq(this.faq.id)
+                if (res.status === 200 && res.data.success === true) {
+                    this.show_write_dialog = false
+                    this.notifySuccess(res.data.message || '삭제되었습니다.')
+                    this.faq = {}
+                    await this.getFaqs()
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+                this.is_modify = false
+            }
+        },
+
+        async modify() {
+            if (this.is_loading) return;
+
+            this.is_loading = true
+            try {
+                let request = {id: this.faq.id}
+
+                if (this.faq.question !== this.selected_faq.question) {
+                    request.question = this.faq.question
+                }
+
+                if (this.faq.answer !== this.selected_faq.answer) {
+                    request.answer = this.faq.answer
+                }
+
+                if (this.faq.category !== this.selected_faq.category) {
+                    request.category = this.faq.category
+                }
+
+                const res = await api.modify(request)
+                if (res.status === 200 && res.data.success === true) {
+                    this.show_write_dialog = false
+                    this.notifySuccess(res.data.message || '수정되었습니다.')
+                    this.faq = {}
+                    await this.getFaqs()
+                } else {
+                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                }
+            } catch (e) {
+                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            } finally {
+                this.is_loading = false
+                this.is_modify = false
+            }
+        },
+
+        clickFaq(item) {
+            this.faq.id = item.id
+            this.faq.question = item.question
+            this.faq.answer = item.answer
+            this.faq.category = item.category
+
+            this.selected_faq = item
+            this.is_modify = true
+            this.show_write_dialog = true
+        },
+
+        cancel() {
+            this.faq = {}
+            this.selected_faq = {}
+            this.is_modify = false
+            this.show_write_dialog = false
+        },
+
+        showWriteDialog() {
+            this.show_write_dialog = true
+        },
+
+        validate() {
+            if (this.faq.question == null || this.faq.question.trim().length === 0) {
+                this.notifyError("질문을 입력하세요.")
+                return false;
+            }
+
+            if (this.faq.answer == null || this.faq.answer.trim().length === 0) {
+                this.notifyError("답변을 입력하세요.")
+                return false;
+            }
+
+            if (this.faq.category == null || this.faq.category.trim().length === 0) {
+                this.notifyError("카테고리를 선택하세요.")
+                return false;
+            }
+
+            return true
+        },
+    },
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Support/NoticeView.vue

@@ -0,0 +1,382 @@
+<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="10" />
+        <v-col>
+          <v-btn
+            block
+            color="#9970ff"
+            dark
+            depressed
+            @click="showWriteDialog"
+          >
+            공지사항 등록
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-simple-table
+            class="elevation-10"
+            dark
+          >
+            <template>
+              <thead>
+                <tr>
+                  <th class="text-center">
+                    NO
+                  </th>
+                  <th class="text-left">
+                    제목
+                  </th>
+                  <th class="text-center">
+                    등록일
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="item in notices"
+                  :key="item.id"
+                  @click="clickNotice(item)"
+                >
+                  <td>
+                    {{ item.id }}
+                  </td>
+                  <td class="text-left">
+                    {{ item.title }}
+                  </td>
+                  <td>
+                    {{ item.date }}
+                  </td>
+                </tr>
+              </tbody>
+            </template>
+          </v-simple-table>
+        </v-col>
+      </v-row>
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+    <v-row>
+      <v-dialog
+        v-model="show_write_dialog"
+        max-width="1000px"
+        persistent
+      >
+        <v-card>
+          <v-card-text />
+          <v-card-text>
+            <v-text-field
+              v-model="notice.title"
+              label="제목"
+            />
+          </v-card-text>
+          <v-card-text>
+            <VueEditor
+              v-model="notice.content"
+              :editor-toolbar="customToolbar"
+            />
+          </v-card-text>
+          <v-card-actions v-show="!is_loading">
+            <v-btn
+              v-show="is_modify"
+              color="blue darken-1"
+              text
+              @click="deleteConfirm"
+            >
+              삭제
+            </v-btn>
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              v-show="!is_modify"
+              color="blue darken-1"
+              text
+              @click="submit"
+            >
+              등록
+            </v-btn>
+            <v-btn
+              v-show="is_modify"
+              color="blue darken-1"
+              text
+              @click="modify"
+            >
+              수정
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+    <v-row>
+      <v-dialog
+        v-model="show_delete_confirm_dialog"
+        max-width="400px"
+        persistent
+      >
+        <v-card>
+          <v-card-text />
+          <v-card-text>
+            삭제하시겠습니까?
+          </v-card-text>
+          <v-card-actions v-show="!is_loading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="deleteCancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="deleteNotice"
+            >
+              확인
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import {VueEditor} from "vue2-editor";
+import * as api from '@/api/notice'
+
+export default {
+  name: "NoticeView",
+
+  components: {
+    VueEditor,
+  },
+
+  data() {
+    return {
+      is_loading: false,
+      is_modify: false,
+      page: 1,
+      total_page: 0,
+      notices: [],
+      notice: {},
+      show_write_dialog: false,
+      show_delete_confirm_dialog: false,
+      customToolbar: [
+        [{header: [false, 1, 2, 3, 4, 5, 6]}],
+        ["bold", "italic", "underline"],
+        [
+          {align: ""},
+          {align: "center"},
+          {align: "right"},
+          {align: "justify"}
+        ],
+        [{list: "ordered"}, {list: "bullet"}],
+        [{color: []}, {background: []}],
+      ]
+    }
+  },
+
+  async created() {
+    await this.getNotices()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    async next() {
+      await this.getNotices()
+    },
+
+    async getNotices() {
+      this.is_loading = true
+
+      try {
+        const res = await api.getNotices(this.page)
+        if (res.status === 200 && res.data.success === true) {
+          const data = res.data.data
+
+          const total_page = Math.ceil(data.totalCount / 20)
+          this.notices = res.data.data.noticeList
+
+          if (total_page <= 0)
+            this.total_page = 1
+          else
+            this.total_page = total_page
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    showWriteDialog() {
+      this.show_write_dialog = true
+    },
+
+    clickNotice(item) {
+      this.is_modify = true
+      this.notice.id = item.id;
+      this.notice.title = item.title;
+      this.notice.content = item.content;
+      this.show_write_dialog = true
+    },
+
+    cancel() {
+      this.is_modify = false
+      this.notice = {}
+      this.show_write_dialog = false
+    },
+
+    validate() {
+      if (this.notice.title == null || this.notice.title.trim().length === 0) {
+        this.notifyError("제목을 입력하세요.")
+        return false;
+      }
+
+      if (this.notice.content == null || this.notice.content.trim().length === 0) {
+        this.notifyError("내용을 입력하세요.")
+        return false;
+      }
+
+      return true
+    },
+
+    async submit() {
+      if (!this.validate()) return;
+      if (this.is_loading) return;
+
+      this.is_loading = true
+
+      try {
+        const res = await api.save(this.notice.title, this.notice.content)
+        if (res.status === 200 && res.data.success === true) {
+          this.show_write_dialog = false
+          this.notifySuccess('등록되었습니다.')
+          this.page = 1
+          await this.getNotices()
+          this.notice = {}
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async modify() {
+      if (!this.validate()) return;
+      if (this.is_loading) return;
+
+      this.is_loading = true
+
+      try {
+        const res = await api.modify(this.notice.id, this.notice.title, this.notice.content)
+        if (res.status === 200 && res.data.success === true) {
+          this.show_write_dialog = false
+          this.notifySuccess('수정되었습니다.')
+          this.page = 1
+          await this.getNotices()
+          this.notice = {}
+          this.is_modify = false
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    deleteConfirm() {
+      this.show_delete_confirm_dialog = true
+    },
+
+    deleteCancel() {
+      this.show_delete_confirm_dialog = false
+    },
+
+    async deleteNotice() {
+      if (this.is_loading) return;
+      this.is_loading = true
+
+      try {
+        const res = await api.deleteNotice(this.notice.id)
+        if (res.status === 200 && res.data.success === true) {
+          this.show_write_dialog = false
+          this.show_delete_confirm_dialog = false
+          this.notifySuccess('삭제되었습니다.')
+          this.page = 1
+          await this.getNotices()
+          this.notice = {}
+          this.is_modify = false
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+table {
+  width: 100%;
+  border-top: 1px solid #444444;
+  border-collapse: collapse;
+}
+
+th, td {
+  border-left: 1px solid #444444;
+  padding: 10px;
+}
+
+th:first-child, th:last-child {
+  width: 20%
+}
+
+th:first-child, td:first-child {
+  border-left: none;
+}
+</style>

src/views/Support/PrivacyView.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>개인정보 처리방침</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col>
+          <VueEditor
+            v-model="privacy_policy"
+            :editor-toolbar="customToolbar"
+          />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="10" />
+        <v-col v-if="!is_loading">
+          <v-btn
+            block
+            color="#9970ff"
+            dark
+            depressed
+            @click="save"
+          >
+            수정
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import {VueEditor} from "vue2-editor";
+import * as api from "@/api/stplat";
+
+export default {
+  name: "PrivacyView",
+
+  components: {
+    VueEditor,
+  },
+
+  data() {
+    return {
+      is_loading: false,
+      stiplat_id: 0,
+      privacy_policy: '',
+      customToolbar: [
+        [{header: [false, 1, 2, 3, 4, 5, 6]}],
+        ["bold", "italic", "underline"],
+        [
+          {align: ""},
+          {align: "center"},
+          {align: "right"},
+          {align: "justify"}
+        ],
+        [{list: "ordered"}, {list: "bullet"}],
+        [{color: []}, {background: []}],
+      ]
+    }
+  },
+
+  async created() {
+    await this.getPrivacyPolicy()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    async getPrivacyPolicy() {
+      this.is_loading = true
+
+      try {
+        const res = await api.getPrivacyPolicy()
+        if (res.status === 200 && res.data.success === true) {
+          const data = res.data.data
+          this.privacy_policy = data.description
+          this.stiplat_id = data.id
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async save() {
+      if (this.stiplat_id < 1) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        return;
+      }
+      if (this.privacy_policy.length < 10) {
+        this.notifyError('내용을 입력하세요')
+        return;
+      }
+
+      if (this.is_loading) return;
+
+      this.is_loading = true
+
+      try {
+        const res = await api.modify(this.stiplat_id, this.privacy_policy)
+        if (res.status === 200 && res.data.success === true) {
+          this.notifySuccess(res.data.message || '수정되었습니다.')
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Support/ReportView.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>신고내역</div>
+</template>
+
+<script>
+export default {
+  name: "ReportView"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Support/TermsOfServiceView.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>서비스 이용약관</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col>
+          <VueEditor
+            v-model="terms_of_service"
+            :editor-toolbar="customToolbar"
+          />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="10" />
+        <v-col v-if="!is_loading">
+          <v-btn
+            block
+            color="#9970ff"
+            dark
+            depressed
+            @click="save"
+          >
+            수정
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import {VueEditor} from "vue2-editor";
+import * as api from "@/api/stplat";
+
+export default {
+  name: "TermsOfServiceView",
+
+  components: {
+    VueEditor,
+  },
+
+  data() {
+    return {
+      is_loading: false,
+      stiplat_id: 0,
+      terms_of_service: '',
+      customToolbar: [
+        [{header: [false, 1, 2, 3, 4, 5, 6]}],
+        ["bold", "italic", "underline"],
+        [
+          {align: ""},
+          {align: "center"},
+          {align: "right"},
+          {align: "justify"}
+        ],
+        [{list: "ordered"}, {list: "bullet"}],
+        [{color: []}, {background: []}],
+      ]
+    }
+  },
+
+  async created() {
+    await this.getTermsOfService()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    async getTermsOfService() {
+      this.is_loading = true
+
+      try {
+        const res = await api.getTermsOfService()
+        if (res.status === 200 && res.data.success === true) {
+          const data = res.data.data
+          this.terms_of_service = data.description
+          this.stiplat_id = data.id
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async save() {
+      if (this.stiplat_id < 1) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        return;
+      }
+      if (this.terms_of_service.length < 10) {
+        this.notifyError('내용을 입력하세요')
+        return;
+      }
+
+      if (this.is_loading) return;
+
+      this.is_loading = true
+
+      try {
+        const res = await api.modify(this.stiplat_id, this.terms_of_service)
+        if (res.status === 200 && res.data.success === true) {
+          this.notifySuccess(res.data.message || '수정되었습니다.')
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/login/Login.vue

@@ -0,0 +1,79 @@
+<template>
+  <v-app>
+    <v-main>
+      <v-container
+        align-center
+        justify-center
+      >
+        <v-card class="elevation-12">
+          <v-card-text>
+            <v-form>
+              <v-text-field
+                v-model="email"
+                label="Email"
+                type="text"
+              />
+              <v-text-field
+                v-model="password"
+                :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+                :type="showPassword ? 'text' : 'password'"
+                label="Password"
+                @click:append="showPassword = !showPassword"
+                @keyup.enter="loginSubmit"
+              />
+            </v-form>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer />
+            <v-btn
+              color="primary"
+              @click="loginSubmit"
+            >
+              로그인
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+export default {
+  name: "Login",
+
+  data: () => ({
+    showPassword: false,
+    email: '',
+    password: '',
+  }),
+
+  methods: {
+    notifyError: async function (message) {
+      await this.$dialog.notify.error(message)
+    },
+
+    loginSubmit() {
+      let loginData = {};
+      loginData.email = this.email;
+      loginData.password = this.password;
+
+      try {
+        this.$store.dispatch('accountStore/LOGIN', loginData)
+          .then(() => {
+            this.$router.push(this.$route.query.redirect || '/')
+          })
+          .catch((message) => {
+            this.notifyError(message);
+          })
+      } catch (e) {
+        this.notifyError('로그인 정보를 확인해주세요.');
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

vue.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  transpileDependencies: [
+    'vuetify'
+  ],
+  //adding extract css true solves this issue
+  css: {
+    extract: true
+  },
+  configureWebpack: config => {
+      config.output.filename = 'js/[name].[hash].js'
+      config.output.chunkFilename = 'js/[name].[hash].js'
+  }
+}