first commit

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,26 @@
+import Vue from 'vue';
+
+async function getAudioContentList(page) {
+    return Vue.axios.get(
+        "/creator-admin/audio-content/list?page=" + (page - 1) +
+        "&size=10"
+    )
+}
+
+async function searchAudioContent(searchWord, page){
+    return Vue.axios.get(
+        "/creator-admin/audio-content/search?search_word=" + searchWord +
+        "&page=" + (page - 1) +
+        "&size=10"
+    )
+}
+
+async function modifyAudioContent(request) {
+    return Vue.axios.put("/creator-admin/audio-content", request)
+}
+
+export {
+    getAudioContentList,
+    searchAudioContent,
+    modifyAudioContent
+}

src/api/member.js

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+
+async function login(email, password) {
+    return Vue.axios.post('/creator-admin/member/login', { email, password });
+}
+
+async function logout() {
+    return Vue.axios.post('/creator-admin/member/logout');
+}
+
+export { login, logout }

src/api/menu.js

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

src/components/SideMenu.vue

@@ -0,0 +1,122 @@
+<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.logoutWithoutNetwork();
+        }
+      } catch (e) {
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
+        this.logoutWithoutNetwork();
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    logoutWithoutNetwork() {
+      this.$store.dispatch('accountStore/LOGOUT_WITHOUT_NETWORK')
+    },
+
+    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,51 @@
+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: '/content/list',
+                name: 'ContentList',
+                component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentList.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,123 @@
+import * as memberApi 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 memberApi.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)
+                }
+            });
+        },
+
+        async LOGOUT({commit}) {
+            let result = false
+            let errorMessage = null
+
+            try {
+                let res = await memberApi.logout()
+                if (res.data.success === true) {
+                    Vue.axios.defaults.headers.common['Authorization'] = undefined;
+                    commit("LOGOUT")
+                    result = true
+                } else {
+                    errorMessage = res.data.message
+                }
+            } catch (e) {
+                errorMessage = '로그인 정보를 확인해주세요.'
+            }
+
+            return new Promise((resolve, reject) => {
+                if (result) {
+                    resolve();
+                } else {
+                    reject(errorMessage)
+                }
+            });
+        },
+
+        LOGOUT_WITHOUT_NETWORK({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/Content/ContentList.vue

@@ -0,0 +1,523 @@
+<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-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">
+                    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.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-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"
+                align="left"
+              >
+                <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"
+                align="left"
+              >
+                <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"
+                align="left"
+              >
+                <input
+                  v-model="audio_content.is_default_cover_image"
+                  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
+              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 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.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 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 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
+                }
+            }
+        },
+    }
+}
+</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>