hubez-admin partner-git master -> hubez-git transfer 202205241800

.classpath

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<classpath>
+	<classpathentry kind="src" output="bin/main" path="src/main/java">
+		<attributes>
+			<attribute name="gradle_scope" value="main"/>
+			<attribute name="gradle_used_by_scope" value="main,test"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="src" output="bin/main" path="src/main/resources">
+		<attributes>
+			<attribute name="gradle_scope" value="main"/>
+			<attribute name="gradle_used_by_scope" value="main,test"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8/"/>
+	<classpathentry kind="con" path="org.eclipse.jst.j2ee.internal.web.container"/>
+	<classpathentry kind="con" path="org.eclipse.buildship.core.gradleclasspathcontainer">
+		<attributes>
+			<attribute name="org.eclipse.jst.component.dependency" value="/WEB-INF/lib"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="output" path="bin/default"/>
+</classpath>

.gitignore

@@ -0,0 +1,23 @@
+### java ###
+.gradle/
+bin/
+build/
+logs/
+fileHashes.lock
+buildOutputCleanup.lock
+*.class
+frontend/node_modules
+
+### IntelliJ IDEA ###
+.idea
+*.iws
+*.iml
+*.ipr
+/out/
+
+### NetBeans ###
+/nbproject/private/
+/nbbuild/
+/dist/
+/nbdist/
+/.nb-gradle/

.project

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>hubeasy-admin</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.jdt.core.javabuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.wst.common.project.facet.core.builder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.wst.validation.validationbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.jdt.core.javanature</nature>
+		<nature>org.eclipse.wst.common.project.facet.core.nature</nature>
+		<nature>org.eclipse.wst.common.modulecore.ModuleCoreNature</nature>
+		<nature>org.eclipse.jem.workbench.JavaEMFNature</nature>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>

.settings/.jsdtscope

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<classpath>
+	<classpathentry kind="con" path="org.eclipse.wst.jsdt.launching.JRE_CONTAINER"/>
+	<classpathentry kind="con" path="org.eclipse.wst.jsdt.launching.baseBrowserLibrary"/>
+	<classpathentry kind="src" path=""/>
+	<classpathentry kind="output" path=""/>
+</classpath>

.settings/org.eclipse.buildship.core.prefs

@@ -0,0 +1,2 @@
+connection.project.dir=
+eclipse.preferences.version=1

.settings/org.eclipse.core.resources.prefs

@@ -0,0 +1,2 @@
+eclipse.preferences.version=1
+encoding/<project>=UTF-8

.settings/org.eclipse.jdt.core.prefs

@@ -0,0 +1,15 @@
+eclipse.preferences.version=1
+org.eclipse.jdt.core.compiler.codegen.inlineJsrBytecode=enabled
+org.eclipse.jdt.core.compiler.codegen.methodParameters=do not generate
+org.eclipse.jdt.core.compiler.codegen.targetPlatform=1.8
+org.eclipse.jdt.core.compiler.codegen.unusedLocal=preserve
+org.eclipse.jdt.core.compiler.compliance=1.8
+org.eclipse.jdt.core.compiler.debug.lineNumber=generate
+org.eclipse.jdt.core.compiler.debug.localVariable=generate
+org.eclipse.jdt.core.compiler.debug.sourceFile=generate
+org.eclipse.jdt.core.compiler.problem.assertIdentifier=error
+org.eclipse.jdt.core.compiler.problem.enablePreviewFeatures=disabled
+org.eclipse.jdt.core.compiler.problem.enumIdentifier=error
+org.eclipse.jdt.core.compiler.problem.reportPreviewFeatures=warning
+org.eclipse.jdt.core.compiler.release=disabled
+org.eclipse.jdt.core.compiler.source=1.8

.settings/org.eclipse.wst.common.component

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project-modules id="moduleCoreId" project-version="1.5.0">
+	<wb-module deploy-name="hubeasy-admin">
+		<property name="context-root" value="hubeasy-admin"/>
+		<wb-resource deploy-path="/WEB-INF/classes" source-path="src/main/resources"/>
+		<wb-resource deploy-path="/WEB-INF/classes" source-path="src/main/java"/>
+	</wb-module>
+</project-modules>

.settings/org.eclipse.wst.common.project.facet.core.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<faceted-project>
+	<fixed facet="jst.java"/>
+	<fixed facet="jst.web"/>
+	<installed facet="jst.web" version="2.4"/>
+	<installed facet="jst.java" version="1.8"/>
+</faceted-project>

.settings/org.eclipse.wst.jsdt.ui.superType.container

@@ -0,0 +1 @@
+org.eclipse.wst.jsdt.launching.JRE_CONTAINER

.settings/org.eclipse.wst.jsdt.ui.superType.name

@@ -0,0 +1 @@
+Global

.settings/org.springframework.ide.eclipse.boot.prefs

@@ -0,0 +1,2 @@
+eclipse.preferences.version=1
+spring.boot.launch.profile.history=local;

.settings/org.springframework.ide.eclipse.prefs

@@ -0,0 +1,2 @@
+boot.validation.initialized=true
+eclipse.preferences.version=1

.springBeans

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<beansProjectDescription>
+	<version>1</version>
+	<pluginVersion><![CDATA[3.9.8.201903260659-RELEASE]]></pluginVersion>
+	<configSuffixes>
+		<configSuffix><![CDATA[xml]]></configSuffix>
+	</configSuffixes>
+	<enableImports><![CDATA[false]]></enableImports>
+	<configs>
+		<config>java:com.lguplus.rcs.bp.admin.WebTemplateApplication</config>
+	</configs>
+	<autoconfigs>
+	</autoconfigs>
+	<configSets>
+	</configSets>
+</beansProjectDescription>

HELP.md

@@ -0,0 +1,24 @@
+# Getting Started
+
+### Reference Documentation
+For further reference, please consider the following sections:
+
+* [Official Gradle documentation](https://docs.gradle.org)
+
+### Guides
+The following guides illustrate how to use some features concretely:
+
+* [Quick Start](https://github.com/mybatis/spring-boot-starter/wiki/Quick-Start)
+* [Accessing data with MySQL](https://spring.io/guides/gs/accessing-data-mysql/)
+* [Securing a Web Application](https://spring.io/guides/gs/securing-web/)
+* [Spring Boot and OAuth2](https://spring.io/guides/tutorials/spring-boot-oauth2/)
+* [Authenticating a User with LDAP](https://spring.io/guides/gs/authenticating-ldap/)
+* [Building a RESTful Web Service](https://spring.io/guides/gs/rest-service/)
+* [Serving Web Content with Spring MVC](https://spring.io/guides/gs/serving-web-content/)
+* [Building REST services with Spring](https://spring.io/guides/tutorials/bookmarks/)
+
+### Additional Links
+These additional references should also help you:
+
+* [Gradle Build Scans – insights for your project's build](https://scans.gradle.com#gradle)
+

README.md

@@ -1,92 +1,2 @@
-# hubez-admin
+# sample
 
-메시지허브이지 어드민 프로젝트
-
-## Getting started
-
-To make it easy for you to get started with GitLab, here's a list of recommended next steps.
-
-Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
-
-## Add your files
-
-- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
-- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
-
-```
-cd existing_repo
-git remote add origin http://localhost/hubez/hubez-admin.git
-git branch -M main
-git push -uf origin main
-```
-
-## Integrate with your tools
-
-- [ ] [Set up project integrations](http://localhost/hubez/hubez-admin/-/settings/integrations)
-
-## Collaborate with your team
-
-- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
-- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
-- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
-- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
-- [ ] [Automatically merge when pipeline succeeds](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
-
-## Test and Deploy
-
-Use the built-in continuous integration in GitLab.
-
-- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
-- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
-- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
-- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
-- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
-
-***
-
-# Editing this README
-
-When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!).  Thank you to [makeareadme.com](https://www.makeareadme.com/) for this template.
-
-## Suggestions for a good README
-Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
-
-## Name
-Choose a self-explaining name for your project.
-
-## Description
-Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
-
-## Badges
-On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
-
-## Visuals
-Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
-
-## Installation
-Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
-
-## Usage
-Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
-
-## Support
-Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
-
-## Roadmap
-If you have ideas for releases in the future, it is a good idea to list them in the README.
-
-## Contributing
-State if you are open to contributions and what your requirements are for accepting them.
-
-For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
-
-You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
-
-## Authors and acknowledgment
-Show your appreciation to those who have contributed to the project.
-
-## License
-For open source projects, say how it is licensed.
-
-## Project status
-If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.

build.gradle

@@ -0,0 +1,121 @@
+plugins {
+	id 'org.springframework.boot' version '2.6.6'
+	id 'io.spring.dependency-management' version '1.0.11.RELEASE'
+	id 'java'
+}
+
+apply plugin: 'java'
+apply plugin: 'eclipse'
+apply plugin: 'idea'
+apply plugin: 'war'
+apply plugin: 'org.springframework.boot'
+apply plugin: 'io.spring.dependency-management'
+
+def buildTime() {
+	return new Date().format('yyyy-MM-dd.HHmm')
+}
+
+version = buildTime()
+def cnf = [
+    outName: 'mhez-admin',
+    version: version
+]
+
+compileJava.dependsOn(processResources)
+
+sourceCompatibility = 1.8
+targetCompatibility = 1.8
+
+tasks.withType(JavaCompile) {
+	options.compilerArgs = ["-Xlint:unchecked", "-Xlint:deprecation", "-parameters"]
+}
+
+repositories {
+	maven { url "https://repo1.maven.org/maven2" }
+	maven { url "https://repo.spring.io/milestone" }
+	maven { url 'https://repo.spring.io/libs-snapshot' }
+
+	mavenLocal()
+	mavenCentral()
+}
+
+dependencies {
+
+    // 스프링부트 버전업으로 logback 1.2.10 적용됨
+	implementation group: 'org.springframework.boot', name: 'spring-boot-starter-web'
+	implementation group: 'org.springframework.boot', name: 'spring-boot-devtools'
+	implementation group: 'org.springframework.boot', name: 'spring-boot-starter-cache'
+	implementation group: 'org.springframework.boot', name: 'spring-boot-starter-aop'
+	// security 사용여부...
+	implementation group: 'org.springframework.boot', name: 'spring-boot-starter-security'
+	// RestTemplate 대신 WebClient 사용
+	implementation group: 'org.springframework.boot', name: 'spring-boot-starter-webflux'
+	// JSP 사용시
+    // implementation group: 'org.apache.tomcat.embed', name: 'tomcat-embed-jasper'
+	// implementation group: 'javax.servlet', name: 'jstl', version: '1.2'
+
+	// mariadb driver
+	implementation group: 'org.mariadb.jdbc', name: 'mariadb-java-client', version: '2.7.5'
+
+	// mybatis
+	implementation group: 'org.mybatis.spring.boot', name: 'mybatis-spring-boot-starter', version: '2.2.2'
+
+	// lombok
+	compileOnly 'org.projectlombok:lombok:1.18.6'
+	annotationProcessor 'org.projectlombok:lombok:1.18.6'
+
+    //jasypt 암복호화
+	implementation group: 'com.github.ulisesbocchio', name: 'jasypt-spring-boot-starter', version: '3.0.4'
+
+	// poi
+	implementation group: 'org.apache.poi', name: 'poi', version: '4.1.2'
+	// poi-ooxml
+	implementation group: 'org.apache.poi', name: 'poi-ooxml', version: '4.1.2'
+
+	// json
+	implementation group: 'com.googlecode.json-simple', name: 'json-simple', version: '1.1'
+	implementation group: 'com.google.code.gson', name: 'gson', version: '2.8.9'
+
+	//commons-text
+	implementation group: 'org.apache.commons', name: 'commons-text', version: '1.9'
+	// apache.httpcomponents
+	implementation group: 'org.apache.httpcomponents', name: 'httpclient', version: '4.5.13'
+	// apache commons-io
+	implementation group: 'commons-io', name: 'commons-io', version: '2.5'
+
+	// swagger 2.x (/swagger-ui.html)
+	// swagger 3.0 (/swagger-ui/index.html)
+	implementation group: 'io.springfox', name: 'springfox-boot-starter', version: '3.0.0'
+
+	// date lib
+	implementation group: 'joda-time', name: 'joda-time', version: '2.10.13'
+
+	// jsonwebtoken
+	implementation group: 'io.jsonwebtoken', name: 'jjwt', version: '0.9.1'
+
+	// custom libs
+	implementation fileTree(dir:'libs', include:'*.jar')
+
+	// mysql 사용시
+	// https://mvnrepository.com/artifact/mysql/mysql-connector-java
+	implementation 'mysql:mysql-connector-java'
+	//implementation group: 'mysql', name: 'mysql-connector-java', version: '8.0.22'
+	//implementation group: 'mysql', name: 'mysql-connector-java', version: '5.1.47'
+
+	// https://mvnrepository.com/artifact/commons-dbcp/commons-dbcp
+	implementation group: 'commons-dbcp', name: 'commons-dbcp', version: '1.4'
+
+}
+
+bootJar {
+    enabled = true
+	baseName = "${cnf.outName}"
+	version = "1.0-${cnf.version}"
+}
+
+bootWar {
+    manifest {
+        attributes( 'Implementation-Title': cnf.outName, 'Implementation-Version': cnf.version )
+    }
+    archiveFileName = "${cnf.outName}-${cnf.version}.war"
+}

frontend/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

frontend/.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

frontend/.env

@@ -0,0 +1 @@
+VUE_APP_TEST_PROP=local env value

frontend/.env.dev

@@ -0,0 +1,4 @@
+NODE_ENV = "dev"
+BASE_URL: "/"
+VUE_APP_TARGET_URL=https://console.ums-dev.uplus.co.kr/
+VUE_APP_PORT=3000

frontend/.env.production

@@ -0,0 +1,4 @@
+NODE_ENV = "production"
+BASE_URL: "/"
+VUE_APP_TARGET_URL=https://console.ums-dev.uplus.co.kr/
+VUE_APP_PORT=4000

frontend/.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    'eslint:recommended'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  globals:{
+    '$': true,
+    'jQuery': true
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}

frontend/.gitignore

@@ -0,0 +1 @@
+/npm-v6.10.0/

frontend/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    // tabWidth: 4,
+    // useTabs: true,
+    semi: true,
+    singleQuote: true,
+    printWidth: 120
+}

frontend/README.md

@@ -0,0 +1,34 @@
+# hubez-admin-web
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn run serve
+```
+
+### Compiles and minifies for production
+```
+yarn run build
+```
+
+### Run your tests
+```
+yarn run test
+```
+
+### Lints and fixes files
+```
+yarn run lint
+```
+
+### Run your unit tests
+```
+yarn run test:unit
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

frontend/babel.config.js

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

frontend/jest.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  moduleFileExtensions: [
+    'js',
+    'jsx',
+    'json',
+    'vue'
+  ],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
+    '^.+\\.jsx?$': 'babel-jest'
+  },
+  transformIgnorePatterns: [
+    '/node_modules/'
+  ],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  snapshotSerializers: [
+    'jest-serializer-vue'
+  ],
+  testMatch: [
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+  ],
+  testURL: 'http://localhost/',
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname'
+  ]
+}

frontend/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "hub-web-easy",
+  "version": "0.1.0",
+  "private": true,  
+  "proxy":"http://localhost:7070",
+  "scripts": {
+    "serve": "vue-cli-service serve --port 3000",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "test:unit": "vue-cli-service test:unit"
+  },
+  "dependencies": {
+    "@toast-ui/vue-grid": "2.1.0",
+    "axios": "^0.19.0",
+    "core-js": "^2.6.5",
+    "element-ui": "^2.15.0",
+    "file-saver": "^2.0.2",
+    "js-base64": "^2.5.1",
+    "moment": "^2.24.0",
+    "sticky-sidebar": "^3.3.1",
+    "tui-grid": "4.5.2",
+    "v-runtime-template": "^1.10.0",
+    "vue": "^2.6.10",
+    "vue-custom-scrollbar": "^1.4.0",
+    "vue-router": "^3.0.3",
+    "vue-scrollbar": "^1.0.4",
+    "vue-tiny-slider": "^0.1.35",
+    "vuejs-daum-postcode": "^1.0.4",
+    "vuex": "^3.0.1",
+    "xlsx": "^0.15.3"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.9.0",
+    "@vue/cli-plugin-eslint": "^3.9.0",
+    "@vue/cli-plugin-unit-jest": "^3.9.0",
+    "@vue/cli-service": "^3.9.0",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "less": "^4.1.0",
+    "less-loader": "^7.2.1",
+    "sass": "^1.18.0",
+    "sass-loader": "^7.1.0",
+    "vue-template-compiler": "^2.6.10"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

frontend/public/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>hubez-admin-web</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but hubez-admin-web 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>

frontend/src/App.vue

@@ -0,0 +1,3 @@
+<template>
+    <router-view/>
+</template>

frontend/src/assets/css/common.css

@@ -0,0 +1,72 @@
+/* CSS Document */
+
+a {text-decoration: none;}
+ul,li {list-style: none;}
+input,button {outline: none;}
+input {padding: 15px; box-sizing: border-box; font-family: 'SpoqaHanSansNeo'; font-weight: 500; font-size: 14px;}
+input::placeholder {font-family: 'SpoqaHanSansNeo'; font-weight: 500; font-size: 14px;}
+button {cursor: pointer;font-family: 'SpoqaHanSansNeo'; font-weight: 500; font-size: 14px;}
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin:0; padding:0; box-sizing:border-box;
+    word-break: keep-all;
+    word-wrap: break-word;
+}
+
+a{box-sizing:border-box;}
+
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section {
+    display:block;
+}
+table {
+    border-collapse:collapse;
+    border:0 none;
+}
+input, select, option{
+    font-family: 'SpoqaHanSansNeo'; 
+}
+input:focus{
+    outline: 1px solid #000;
+}
+select:focus{
+    outline: 1px solid #000;
+}
+input[type="checkbox"] + label{
+    cursor: pointer;
+}
+input:disabled{
+    background-color: #eeeeee;
+}
+input[type="radio"]{
+    display:none;
+}
+input[type="radio"] + label{
+    position: relative;
+    padding-left:25px;
+    cursor: pointer;
+}
+input[type="radio"] + label::before{
+    content: '';
+    position:absolute;
+    width:20px;
+    height:21px;
+    top:50%;
+    transform: translate(0,-50%);
+    left:0;
+    background:url(../images/icon-radio.png) no-repeat center/100% auto;
+}
+input[type="radio"]:checked + label::before{
+    background:url(../images/icon-radio-chk.png) no-repeat center/100% auto;
+}

frontend/src/assets/css/contents.css

@@ -0,0 +1,71 @@
+/* CSS Document */
+
+/*======================
+	
+======================*/
+
+.btn-pcolor {background: #eb008b; border-radius: 6px; border: none; color: #fff; font-weight: 700; font-size: 16px;}
+.btn-pcolor:hover{background: #b9006d;}
+.btn-p2color {background: #2e2b46; border-radius: 6px; border: none; color: #fff; font-weight: 700; font-size: 16px;}
+.btn-default {background: #fff; border-radius: 6px; border: 1px solid #a1a1a1; color: #5b5879; font-weight: 700; font-size: 16px;}
+.btn-default:hover{border-color:#000;}
+
+
+
+
+
+
+/*======================
+	.login-wrap
+======================*/
+.login-wrap {width: 100%; height: 100vh; background: url("../images/login-bg.jpg") no-repeat center center; background-size: cover;}
+.bg-wrap {width: 100%; min-height: 100vh; background: #f0effa;}
+.login-box {width: 520px; position: absolute; top: calc(50% - 80px); left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%);}
+.adm-login.login-box {background: #fff; border-radius: 21px; box-shadow: 0 5px 13px rgba(56,56,56,0.05); padding: 65px 65px 40px 65px; box-sizing: border-box;}
+.adm-login.login-box .wbox {border-radius: 0; box-shadow: none; padding: 0;}
+.login-box .wbox {background: #fff; border-radius: 21px; box-shadow: 0 5px 13px rgba(56,56,56,0.05); padding: 50px 65px 40px 65px; box-sizing: border-box;}
+
+.login-box .desc {font-size: 14px; color: #a6a6a6; letter-spacing: -1px; line-height: 140%; text-align: center; word-break: keep-all; padding-bottom: 20px;}
+.login-box input {background: #f6f6f9; border-radius: 2px; padding: 15px; box-sizing: border-box; line-height: 20px; border: none; outline: none; width: 100%;}
+.login-box input::placeholder {font-size: 16px; line-height: 20px; color: #acacac; font-weight: 500; }
+.login-box input[type="checkbox"] {display: none;}
+.login-box input[type="checkbox"] + label {cursor: pointer; display: flex; align-items: center; color: #333333; font-size: 16px; font-weight: 400; letter-spacing: -1px;}
+.login-box input[type="checkbox"] + label:before {content: ""; width: 24px; height: 24px; display: inline-block; background: url("../images/icon-chk-n.png") no-repeat left center; background-size: contain; margin-right: 8px;}
+.login-box input[type="checkbox"]:checked + label:before {background: url("../images/icon-chk.png") no-repeat left center; background-size: contain;}
+.login-box .btn-pcolor {width: 100%; height: 55px; margin: 15px 0;}
+.login-box li {list-style: none; margin: 10px 0; display: flex; justify-content: space-between; align-items: center; min-height: 50px;}
+.login-box li.bg-g {background: #f6f6f9;}
+.login-box .login-notice {}
+.login-box .login-notice li {color: #a6a6a6; font-size: 14px; letter-spacing: -1px; font-weight: 400; position: relative; padding-left: 10px; min-height: auto;}
+.login-box .login-notice li:before {content: ""; display: block; position: absolute; left: 0; top: 50%; margin-top: -1.5px; width: 3px; height: 3px; background: #e3e3ea;}
+.login-box .login-notice li + li {margin-top: 10px;}
+
+.login-box .title {font-size: 24px; color: #333333; margin: 0 auto 30px; text-align: center; font-weight: 500;}
+.login-box .login-form {border-bottom: 1px solid #e3e3ea; padding-bottom: 10px; box-sizing: border-box; margin-bottom: 30px;}
+.login-box .login-form li .btn-pwreset {border: none; background: url("../images/icon-lock.png") no-repeat left 3px #fff; background-size: contain; padding-left: 25px; height: 32px; color: #333333; font-size: 16px; font-weight: 400; letter-spacing: -1px; cursor: pointer;}
+
+.text-auth .btn-p2color {border-radius: 2px; margin-left: 7px; width: 190px; height: 50px;}
+.text-auth .btn-pcolor {width: 49%;}
+.text-auth .btn-default {width: 49%; height: 55px;}
+.text-auth .bg-g {}
+.text-auth .time {padding: 15px 17px; color: #d92f89; font-size: 16px;}
+
+.pw-reset .btn-pcolor {width: 64%;}
+.pw-reset .btn-default {width: 34%; height: 55px;}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

frontend/src/assets/css/layout.css

@@ -0,0 +1,109 @@
+/* CSS Document */
+
+/*======================
+SpoqaHanSansNeo
+======================*/
+@font-face {
+  font-family: 'SpoqaHanSansNeo';
+  src: url('../font/SpoqaHanSansNeo-Thin.woff') format('woff');
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'SpoqaHanSansNeo';
+  src: url('../font/SpoqaHanSansNeo-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'SpoqaHanSansNeo';
+  src: url('../font/SpoqaHanSansNeo-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'SpoqaHanSansNeo';
+  src: url('../font/SpoqaHanSansNeo-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'SpoqaHanSansNeo';
+  src: url('../font/SpoqaHanSansNeo-Bold.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+}
+
+
+
+
+* {margin: 0; padding: 0; }
+body,html {font-family: 'SpoqaHanSansNeo'; font-weight: 500; font-size: 14px;}
+body{
+  min-width:1600px;
+}
+.div-cont {width: 1200px; padding: 0 30px; box-sizing: border-box; margin: auto;}
+
+
+
+/*======================
+	#logo
+======================*/
+.login-box .logo {width: 280px; height: 72px; position: relative; margin: 0 auto 30px; background: url("../images/logo.png") no-repeat center center; background-size: contain;}
+
+
+
+
+
+/*======================
+	#footer-wrap
+======================*/
+.login-wrap .footer-wrap {position: absolute; bottom: 0; left: 0;}
+.bg-wrap .footer-wrap {position: absolute; bottom: 0; left: 0;}
+.footer-wrap {width: 100%; background: #fff;}
+.footer {display: flex; justify-content: space-between; align-items: flex-start; padding-top: 45px; padding-bottom: 45px;}
+.footer .flogo {}
+.footer .f-info {}
+.footer .f-info > ul {display: flex; align-items: center; flex-wrap: wrap;}
+.footer .f-info > ul li {list-style: none; margin-right: 30px; position: relative;}
+.footer .f-info > ul li + li:before {content: ""; display: block; width: 1px; height: 14px; background: #7b7b7b; position: absolute; left: -15px; top: 50%; margin-top: -7px;}
+.footer .f-info p {font-size: 14px; color: #7b7b7b; line-height: 170%; font-weight: 400;}
+.footer .f-info a {font-size: 14px; color: #7b7b7b; line-height: 170%; text-decoration: none;}
+
+
+
+
+
+/*======================
+	.popup
+======================*/
+.dimmed {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.4); display: none;}
+.dimmed.open {display: block !important;}
+.popup-wrap {display: none;}
+.popup-wrap.open {display: block !important;}
+.popup {width: 390px; border-radius: 8px; background: #fff; padding: 0 30px; box-sizing: border-box; border: 1px solid rgba(197,197,197,0.36); box-shadow: 2px 2px 8px rgba(171,171,171,0.30); position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); display: none;}
+.popup.open {display: block !important;}
+.popup .pop-head {padding: 30px 0 25px;}
+.popup .pop-head .pop-tit {font-size: 18px; color: #222222; letter-spacing: -1px; line-height: 100%;}
+.popup .btn-close {width: 30px; height: 30px; position: absolute; top: 0; right: 0; background: url("../images/icon-close.png") no-repeat center center; background-size: 11px; border: none;}
+.popup .pop-cont {}
+.popup .pop-cont p {font-size: 16px; color: #666666; font-weight: 400; letter-spacing: -0.8px; line-height: 100%;}
+.popup .pop-cont p + p {margin-top: 10px;}
+.popup .pop-btn1 {display: flex; justify-content: flex-end; align-items: center; margin: 35px 0 25px;}
+.popup .pop-btn2 {display: flex; justify-content: space-between; align-items: center; margin: 35px 0 25px;}
+.popup .pop-btn1 button {width: 49%; height: 42px; font-size: 16px; font-weight: 400; letter-spacing: -1.1px;}
+.popup .pop-btn2 button {width: 49%; height: 42px; font-size: 16px; font-weight: 400; letter-spacing: -1.1px;}
+
+
+
+
+
+
+
+
+
+
+
+
+
+

frontend/src/assets/css/style.css

@@ -0,0 +1,977 @@
+.main_wrap {
+  background-color: #f0effa;
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+  padding: 70px 0 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+header {
+  height: 70px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 20;
+  background-color: #f0effa;
+}
+
+header .logo {
+  width: 180px;
+  height: 26px;
+  background: url(../images/admin-logo.png) no-repeat center/100% auto;
+  font-size: 0;
+  margin: 23px 0 0 23px;
+  position: relative;
+}
+
+header .logo a {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+header .logo span {
+  font-size: 12px;
+  position: absolute;
+  right: -80px;
+  bottom: 0;
+  color: #b9b6d2;
+  line-height: 1;
+  letter-spacing: -0.025em;
+}
+
+header .user_wrap {
+  font-size: 14px;
+  color: #303035;
+  position: relative;
+}
+
+header .user_wrap a {
+  color: #303035;
+}
+
+header .user_wrap .user {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 258px;
+  height: 63px;
+  background: url(../images/user-bg.png) no-repeat center/100% auto;
+}
+
+header .user_wrap .user p {
+  position: relative;
+  padding: 8px 12px 0 40px;
+  margin-right: 12px;
+}
+
+header .user_wrap .user p:after {
+  content: '';
+  width: 1px;
+  height: 12px;
+  background-color: #bab7d3;
+  position: absolute;
+  right: 0;
+  top: 12px;
+}
+
+header .user_wrap .user .btn_user {
+  padding: 8px 0 0 28px;
+  position: relative;
+}
+
+header .user_wrap .user .btn_user:before {
+  content: '';
+  position: absolute;
+  top: 8px;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  background: url(../images/user-icon.png) no-repeat center/100% auto;
+}
+
+header .user_wrap .user .btn_user:after {
+  content: '';
+  position: absolute;
+  top: 16px;
+  right: -17px;
+  width: 11px;
+  height: 6px;
+  background: url(../images/arrow-down.png) no-repeat center/100% auto;
+}
+
+header .user_wrap .user.clicked + .user_info {
+  display: block;
+}
+
+header .user_wrap .user.clicked .btn_user:after {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
+header .user_wrap .user_info {
+  border: 1px solid #cbcbcb;
+  background-color: #fff;
+  -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.18);
+          box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.18);
+  border-radius: 12px;
+  width: 108px;
+  height: 84px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  position: absolute;
+  top: 40px;
+  right: 24px;
+  display: none;
+}
+
+header .user_wrap .user_info a {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 50%;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+header .user_wrap .user_info .modify {
+  color: #d92f89;
+  padding-top: 15px;
+}
+
+header .user_wrap .user_info .logout {
+  color: #333333;
+  padding-top: 5px;
+}
+.main_menu {
+	overflow: hidden;
+  background-color: #7572a5;
+  border-radius: 24px;
+  width: 240px;
+  position: relative;
+  margin-bottom: 25px;
+	padding:25px 0;
+}
+
+.main_menu:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50px;
+  height: 100%;
+  background-color: #34344f;
+  border-radius: 25px;
+}
+
+.main_menu > li {
+  padding: 0 0 0 50px;
+	position: relative; 
+}
+
+.main_menu > li > a {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 16px;
+  display: block;
+  position: relative;
+  padding: 10px;
+	transition: all 0.3s;
+}
+
+
+.main_menu > li > a:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 15px;
+	transform-origin: center;
+	transition: transform 0.3s;
+  width: 11px;
+  height: 6px;
+  background: url(../images/arrow-white.png) no-repeat center/100% auto;
+  opacity: 0.5;
+  -webkit-transform: translateY(-50%) rotate(180deg);
+          transform: translateY(-50%) rotate(180deg);
+}
+
+
+
+.main_menu > li.is-current > a {
+  color: #fff;
+}
+
+.main_menu > li.is-current > a:before {
+  opacity: 1;
+}
+
+.main_menu > li.is-current > a:after {
+  opacity: 1;
+  -webkit-transform: translateY(-50%) rotate(0deg);
+          transform: translateY(-50%) rotate(0deg);
+}
+
+.main_menu > li.is-current .sub_menu {
+  display: block;
+}
+
+.main_menu > li.is-current:last-child .sub_menu {
+  margin-bottom: 0;
+}
+
+.main_menu .sub_menu {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 18px 10px;
+	transition: all 0.3s;
+}
+
+.main_menu .sub_menu > li {
+  padding: 0 0 15px 5px;
+  position: relative;
+}
+
+.main_menu .sub_menu > li:last-child {
+  padding-bottom: 0;
+}
+
+.main_menu .sub_menu > li:before {
+  content: '';
+  position: absolute;
+  top: 7px;
+  left: 0;
+  width: 3px;
+  height: 3px;
+  background-color: #bcb8e1;
+}
+
+.main_menu .sub_menu > li > a {
+  font-size: 14px;
+  color: #68647a;
+  display: block;
+}
+
+.main_menu .is-current .sub_menu > li:hover > a,.main_menu .is-current .sub_menu > li > a.selected { color:#000000; }
+
+
+/* 추가 */
+
+.main_menu > li .menu_btn { position: absolute; left:0; top:0; font-size: 0; width: 50px; height: 43px; transition: all 0.3s; cursor: pointer; }
+
+.main_menu > li.customer .menu_btn { background: url(../images/icon-customer.png) no-repeat center/auto; }
+.main_menu > li.attract .menu_btn { background: url(../images/icon-attract.png) no-repeat center/auto; }
+.main_menu > li.service .menu_btn { background: url(../images/icon-service.png) no-repeat center/auto; }
+.main_menu > li.calculate .menu_btn { background: url(../images/icon-calculate.png) no-repeat center/auto; }
+.main_menu > li.channel .menu_btn { background: url(../images/icon-channel.png) no-repeat center/auto; }
+.main_menu > li.key .menu_btn { background: url(../images/icon-key.png) no-repeat center/auto; }
+.main_menu > li.moniter .menu_btn { background: url(../images/icon-moniter.png) no-repeat center/auto; }
+.main_menu > li.risk .menu_btn { background: url(../images/icon-risk.png) no-repeat center/auto; }
+.main_menu > li.stats .menu_btn { background: url(../images/icon-stats.png) no-repeat center/auto; }
+.main_menu > li.system .menu_btn { background: url(../images/icon-system.png) no-repeat center/auto; }
+
+.main_menu > li:hover > a { background: #646193; color: #fff; }
+.main_menu > li.customer:hover .menu_btn { background: url(../images/icon-customer-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.attract:hover .menu_btn { background: url(../images/icon-attract-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.service:hover .menu_btn { background: url(../images/icon-service-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.calculate:hover .menu_btn { background: url(../images/icon-calculate-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.channel:hover .menu_btn { background: url(../images/icon-channel-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.key:hover .menu_btn { background: url(../images/icon-key-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.moniter:hover .menu_btn { background: url(../images/icon-moniter-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.risk:hover .menu_btn { background: url(../images/icon-risk-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.stats:hover .menu_btn { background: url(../images/icon-stats-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.system:hover .menu_btn { background: url(../images/icon-system-on.png) no-repeat center/auto #4a496c; }
+
+.main_menu > li.customer.is-current .menu_btn { background-image: url(../images/icon-customer-on.png); }
+.main_menu > li.attract.is-current .menu_btn { background-image: url(../images/icon-attract-on.png); }
+.main_menu > li.service.is-current .menu_btn { background-image: url(../images/icon-service-on.png); }
+.main_menu > li.calculate.is-current .menu_btn { background-image: url(../images/icon-calculate-on.png); }
+.main_menu > li.channel.is-current .menu_btn { background-image: url(../images/icon-channel-on.png); }
+.main_menu > li.key.is-current .menu_btn { background-image: url(../images/icon-key-on.png); }
+.main_menu > li.moniter.is-current .menu_btn { background-image: url(../images/icon-moniter-on.png); }
+.main_menu > li.risk.is-current .menu_btn { background-image: url(../images/icon-risk-on.png); }
+.main_menu > li.stats.is-current .menu_btn { background-image: url(../images/icon-stats-on.png); }
+.main_menu > li.system.is-current .menu_btn { background-image: url(../images/icon-system-on.png); }
+
+.main_menu > li .sub_menu_wrap { padding:0 10px 10px; display:none; }
+.main_menu > li.is-current .sub_menu_wrap { display: block; }
+
+
+
+
+
+
+
+
+
+.contents {
+  padding: 0 4.16vw;
+  width: 100%;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 0px;
+          flex: 1 1 0;
+}
+
+.contents_wrap {
+  -webkit-box-shadow: 8px 8px 8px rgba(80, 80, 80, 0.08);
+          box-shadow: 8px 8px 8px rgba(80, 80, 80, 0.08);
+  background-color: #fff;
+  width: 100%;
+  border-radius: 24px;
+  padding: 15px 0;
+  margin-bottom: 70px;
+}
+
+.contents_wrap .search_form {
+  padding: 0 40px;
+}
+
+.contents .top_wrap {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-bottom: 1px solid #d5d3e6;
+  padding: 0 40px;
+  margin-bottom: 27px;
+}
+
+.contents .top_wrap .title {
+  font-size: 18px;
+  color: #1b1b1b;
+  letter-spacing: -0.025em;
+  padding-bottom: 14px;
+  border-bottom: 4px solid #eb008b;
+  margin-bottom: -1px;
+}
+
+.contents .top_wrap .breadcrumb {
+  font-size: 13px;
+  color: #9493a1;
+  letter-spacing: -0.025em;
+}
+
+.contents .search_wrap {
+  background-color: #f6f6f8;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 20px 30px 40px;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  border-radius: 4px;
+  margin-bottom: 50px;
+}
+
+.contents .search_wrap button.grey {
+  background-color: #35354f;
+  width: 122px;
+  font-size: 18px;
+  padding: 0 8px;
+  margin-left: 0;
+}
+
+.contents .select_box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  margin-right: 10px;
+  width: 13.67%;
+}
+
+.contents .select_box .label {
+  font-size: 13px;
+  letter-spacing: -0.025em;
+  margin-bottom: 6px;
+  color: #a3a3a3;
+}
+
+.contents .select_box select {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #c9c9c9;
+  font-size: 14px;
+  color: #000;
+  border-radius: 4px;
+  padding:0 10px;
+	
+  -webkit-appearance:none; 
+  -moz-appearance:none; 
+  -o-appearance:none; 
+  appearance:none;
+  background:#fff url('../images/icon-select-down.png')no-repeat right 10px center;
+}
+
+.contents .select_box option {
+  color: #000;
+}
+
+.contents .input_box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  margin-right: 10px;
+  width: 22.64%;
+}
+
+.contents .input_box .label {
+  font-size: 13px;
+  letter-spacing: -0.025em;
+  margin-bottom: 6px;
+  color: #a3a3a3;
+}
+
+.contents .input_box input {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #c9c9c9;
+  position: relative;
+  background: url(../images/icon-search.png) no-repeat 6% center/14px auto;
+  background-color: #fff;
+  padding-left: 43px;
+  border-radius: 4px;
+}
+
+.contents .input_box input::-webkit-input-placeholder {
+  color: #c9c9c9;
+}
+
+.contents .input_box input:-ms-input-placeholder {
+  color: #c9c9c9;
+}
+
+.contents .input_box input::-ms-input-placeholder {
+  color: #c9c9c9;
+}
+
+.contents .input_box input::placeholder {
+  color: #c9c9c9;
+}
+
+.contents .input_box.id {
+  position: relative;
+  margin-left: 10px;
+}
+
+.contents .input_box.id:before {
+  content: '';
+  position: absolute;
+  top: 25px;
+  left: -10px;
+  width: 1px;
+  height: 36px;
+  background-color: #e8e8f1;
+}
+
+.contents .button {
+  height: 40px;
+  color: #fff;
+  border-radius: 4px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border: none;
+  min-width: 80px;
+  margin-left: 10px;
+}
+
+.contents .button.grey {
+  background-color: #35354f;
+  font-size: 16px;
+}
+
+.contents .button.grey:hover {
+  background-color: #0a0b24;
+}
+
+.contents .button.blue {
+  background-color: #333589;
+  font-size: 16px;
+  padding: 0 15px;
+}
+
+.contents .button.blue:hover {
+  background-color: #0a0b24;
+}
+
+.contents .button.white {
+  border: 1px solid #c9c9c9;
+  font-size: 16px;
+  background-color: #fff;
+  color: #000;
+}
+
+.contents .button.white:hover {
+  border-color: #000;
+}
+
+.contents .info {
+  padding: 0 30px;
+  margin-bottom: 10px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.contents .info .count {
+  font-size: 16px;
+  position: relative;
+  padding-left: 10px;
+}
+
+.contents .info .count span {
+  color: #eb008b;
+}
+
+.contents .info .count:before {
+  content: '';
+  position: absolute;
+  top: 10px;
+  left: 0;
+  width: 3px;
+  height: 3px;
+  background-color: #eb008b;
+}
+
+.contents .info .button_group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.contents .info .title {
+  font-size: 18px;
+  position: relative;
+  padding-left: 10px;
+  margin-top: 9px;
+}
+
+.contents .info .title:before {
+  content: '';
+  position: absolute;
+  top: 10px;
+  left: 0;
+  width: 3px;
+  height: 3px;
+  background-color: #eb008b;
+}
+
+.contents .table {
+  color: #333333;
+  padding: 0 30px;
+  margin-bottom: 65px;
+}
+
+.contents .table table {
+  width: 100%;
+  text-align: center;
+  border-top: 2px solid #69677e;
+  border-bottom: 1px solid #a4a4b0;
+}
+
+.contents .table table thead {
+  background-color: #f7f7f7;
+}
+
+.contents .table table tbody tr:last-child {
+  border-bottom: none;
+}
+
+.contents .table table th {
+  font-weight: 500;
+  height: 50px;
+  position: relative;
+}
+
+.contents .table table tr {
+  padding: 10px;
+  height: 50px;
+  border-bottom: 1px solid #dadae6;
+}
+
+.contents .table table tr:hover {
+  background-color: #fafaff;
+}
+
+.contents .table table td {
+  position: relative;
+}
+
+.contents .table table td a {
+  text-decoration: underline;
+  color: #333333;
+}
+
+.contents .table table td a:hover {
+  color: #eb008b;
+}
+
+.contents .table table td.stop {
+  color: #a5a5a5;
+}
+
+.contents .table table td.two_btn_group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 50px;
+}
+
+.contents .table table input[type="checkbox"] {
+  display: none;
+}
+
+.contents .table table input[type="checkbox"] + label {
+  width: 20px;
+  height: 30px;
+  display: block;
+  background: url(../images/icon-chk-n-square.png) no-repeat center/100% auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
+.contents .table table input[type="checkbox"]:checked + label {
+  background: url(../images/icon-chk-square.png) no-repeat center/100% auto;
+}
+
+.contents .table.table_form {
+  font-size: 16px;
+  margin-bottom: 24px;
+}
+
+.contents .table.table_form th {
+  background-color: #f7f7f7;
+  width: 9%;
+  text-align: left;
+  padding-left: 20px;
+}
+
+.contents .table.table_form th.center {
+  text-align: center;
+  padding-left: 0;
+}
+
+.contents .table.table_form td {
+  text-align: left;
+}
+
+.contents .table.table_form td.check {
+  padding: 20px;
+  width: 15%;
+  vertical-align: text-top;
+}
+
+.contents .table.table_form td.check p {
+  margin-bottom: 15px;
+}
+
+.contents .table.table_form input[type="checkbox"] + div > label:first-child {
+  width: 20px;
+  height: 30px;
+  display: block;
+  background: url(../images/icon-chk-n-square.png) no-repeat center/100% auto;
+  margin-right: 10px;
+}
+
+.contents .table.table_form input[type="checkbox"]:checked + div > label:first-child {
+  background: url(../images/icon-chk-square.png) no-repeat center/100% auto;
+  margin-right: 10px;
+}
+
+.contents .table.table_form .label_group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.contents .table.table_form .tr_checkbox {
+  border-bottom: none;
+}
+
+.contents .table.table_form .tr_checkbox .check:first-child {
+  background-color: #f7f7f7;
+}
+
+.contents .table.table_form .tr_input input[type="text"] {
+  border: 1px solid #c9c9c9;
+  border-radius: 4px;
+  height: 40px;
+  margin-left: 10px;
+}
+
+.contents .table.table_form .tr_input.w30 input[type="text"] {
+  width: 30%;
+}
+
+.contents .table.table_form .tr_input.w75 input[type="text"] {
+  width: 75%;
+}
+
+.contents .table.table_form .tr_input.w100 input[type="text"] {
+  width: 98%;
+}
+
+.contents .table.table_form .tr_input input[type="radio"] + label:nth-child(2) {
+  margin: 0 30px 0 10px;
+}
+
+.contents .pop-btn2 {
+  text-align: end;
+  padding: 0 30px;
+  margin-bottom: 9px;
+}
+
+.contents .pop-btn2 button {
+  width: 160px;
+  height: 42px;
+}
+
+.contents .pop-btn2 .btn-pcolor {
+  margin-left: 8px;
+}
+
+.popup .pop-cont-detail {
+  font-size: 16px;
+  color: #666666;
+  border-radius: 12px;
+  background-color: #f5f6f8;
+  padding: 15px;
+  margin-top: 13px;
+}
+
+.popup .pop-cont-detail li {
+  position: relative;
+  padding-left: 10px;
+}
+
+.popup .pop-cont-detail li:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translate(0, -50%);
+          transform: translate(0, -50%);
+  left: 0;
+  width: 2px;
+  height: 2px;
+  background-color: #c7c7c7;
+}
+
+.popup.popup_form {
+  width: 525px;
+}
+
+.popup.popup_form .pop-head {
+  border-bottom: 1px solid #d5d3e6;
+  padding-bottom: 0;
+  margin-bottom: 25px;
+}
+
+.popup.popup_form .pop-tit {
+  display: inline-block;
+  border-bottom: 4px solid #eb008b;
+  padding-bottom: 20px;
+  margin-bottom: -1px;
+}
+
+.popup.popup_form .pop-btn2 {
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+}
+
+.popup.popup_form .pop-btn2 button {
+  width: 30%;
+}
+
+.popup.popup_form .pop-btn2 button:last-child {
+  margin-left: 10px;
+}
+
+.popup.popup_form table {
+  width: 100%;
+  border-top: 1px solid #dadae6;
+  border-bottom: 1px solid #dadae6;
+}
+
+.popup.popup_form table tr {
+  border-bottom: 1px solid #dadae6;
+  height: 50px;
+}
+
+.popup.popup_form table tr:last-child {
+  border-bottom: none;
+}
+
+.popup.popup_form table th {
+  width: 30%;
+  background-color: #f7f7f7;
+  font-size: 16px;
+  color: #333333;
+  text-align: left;
+  padding-left: 20px;
+}
+
+.popup.popup_form table td {
+  padding: 0 0 0 10px;
+}
+
+.popup.popup_form table td input {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #c9c9c9;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+.popup.popup_form table td input::-webkit-input-placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table td input:-ms-input-placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table td input::-ms-input-placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table td input::placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table input[type="radio"] + label {
+  font-size: 16px;
+  vertical-align: text-top;
+}
+
+.popup.popup_form table input[type="radio"] + label:nth-child(2) {
+  margin-right: 40px;
+}
+
+.popup.popup_form table select {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #c9c9c9;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 16px;
+  color: #333333;
+}
+
+.popup.popup_form table .input_search {
+  height: 50px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.popup.popup_form table .input_search input[type="text"] {
+  position: relative;
+  background: url(../images/icon-search.png) no-repeat 6% center/14px auto;
+  background-color: #fff;
+  padding-left: 40px;
+  border-radius: 4px;
+  width: 72%;
+}
+
+.popup.popup_form table .input_search input[type="text"]::-webkit-input-placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table .input_search input[type="text"]:-ms-input-placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table .input_search input[type="text"]::-ms-input-placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table .input_search input[type="text"]::placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table .button {
+  height: 40px;
+  color: #fff;
+  border-radius: 4px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border: none;
+  min-width: 80px;
+  margin-left: 10px;
+}
+
+.popup.popup_form table .button.grey {
+  background-color: #35354f;
+  font-size: 16px;
+}
+
+.popup.popup_form table .button.grey:hover {
+  background-color: #0a0b24;
+}
+
+
+
+/*# sourceMappingURL=style.css.map */

frontend/src/assets/js/script.js

@@ -0,0 +1,66 @@
+
+/*(function(){	
+	const menuList = document.querySelectorAll('.main_menu .is-sub');
+	for(const menu of menuList){
+		menu.addEventListener('click', (e)=> {
+			if(e.target.classList.contains('menu_target') || e.target.classList.contains('menu_btn')){
+				const menuListCheck = e.target.parentNode;
+				if(menuListCheck.classList.contains('is-current')){
+					menuListCheck.classList.remove('is-current');
+				} else {
+					for(const other of menuList){
+						other.classList.remove('is-current');
+					}	
+					menuListCheck.classList.add('is-current');
+				}
+			}
+		})
+	}
+})();*/
+
+/*const ModalOpen = target =>{
+	console.log("ModalOpen");
+	var dimmed = document.getElementsByClassName('dimmed');
+	var wrap = document.getElementsByClassName('popup-wrap');
+	var obj = document.getElementsByClassName(target);
+	dimmed[0].style.display = 'block';
+	wrap[0].style.display = 'block';
+	obj[0].style.display = 'block';
+}*/
+
+// eslint-disable-next-line no-unused-vars
+/*function ModalOpen(target) {
+	var dimmed = document.getElementsByClassName('dimmed');
+	var wrap = document.getElementsByClassName('popup-wrap');
+	var obj = document.getElementsByClassName(target);
+	dimmed[0].style.display = 'block';
+	wrap[0].style.display = 'block';
+	obj[0].style.display = 'block';
+}*/
+// eslint-disable-next-line no-unused-vars
+/*function ModalClose() {
+	var dimmed = document.getElementsByClassName('dimmed');
+	var wrap = document.getElementsByClassName('popup-wrap');
+	var obj = wrap[0].childElementCount
+	dimmed[0].style.display = 'none';
+	wrap[0].style.display = 'none';
+	for(var i = 0; i < obj; i++) {
+		var target = document.getElementsByClassName('popup');
+		target[i].style.display = 'none';
+	}
+}
+// eslint-disable-next-line no-unused-vars
+function userInfoToggle(){
+	var click = "clicked";
+	var userBtn = document.querySelector('.user_wrap .user');
+	if(userBtn.classList.contains(click)){
+		userBtn.classList.remove(click);
+	}
+	else{
+		userBtn.classList.add(click);
+	}
+}*/
+
+export default{
+	ModalOpen
+}

frontend/src/common/comm-api.js

@@ -0,0 +1,9 @@
+import httpClient from '@/common/http-client';
+// 주소찾기
+const getAddressList = params => {
+  return httpClient.get('/api/comm/address', { params: params })
+}
+
+export default {
+  getAddressList
+}

frontend/src/common/config.js

@@ -0,0 +1,10 @@
+const { VUE_APP_TEST_PROP, NODE_ENV = '' } = process.env;
+
+const environment = NODE_ENV.toLowerCase();
+const testProp = VUE_APP_TEST_PROP;
+
+const consts = {
+    tokenPart1: 'JwtPart1'
+}
+
+export { environment, testProp, consts };

frontend/src/common/excel.js

@@ -0,0 +1,143 @@
+import xlsx from 'xlsx';
+
+const xlsxUtils = {
+  filename: '',
+  data: [],
+  header: [],
+  options: {},
+  summary: {
+    isUse: false,
+    position: '',
+    data: null,
+    title: { replaceKeys: [], name: '' }
+  },
+  visibleDataOrder: [],
+  instance: undefined,
+  createInstance() {
+    return new Promise((resolve, reject) => {
+      this.instance = document.createElement('table');
+      resolve();
+    });
+  },
+  createHeader() {
+    return new Promise((resolve, reject) => {
+      let header = this.header;
+      /*
+      if (!Array.isArray(this.header[0])) {
+        header.push(this.header);
+      } else {
+        header = this.header;
+      }
+      */
+
+      let thead = document.createElement('thead');
+      for (let row of header) {
+        let tr = document.createElement('tr');
+        for (let h of row) {
+          let rowspan = h.rowspan || '1';
+          let colspan = h.colspan || '1';
+          let th = document.createElement('th');
+          th.setAttribute('rowspan', rowspan);
+          th.setAttribute('colspan', colspan);
+          //th.setAttribute('align', 'center');
+          th.innerText = h.name;
+          tr.appendChild(th);
+        }
+        thead.appendChild(tr);
+      }
+      this.instance.appendChild(thead);
+      resolve();
+    });
+  },
+  createDataRows() {
+    return new Promise((resolve, reject) => {
+      let tbody = document.createElement('tbody');
+
+      if (this.options.summary != undefined && this.options.summary.isUse) {
+        this.summary = this.options.summary;
+      }
+
+      if (this.summary.isUse && this.summary.position === 'first') {
+        this.appendDataRow(tbody, this.summary.data, true);
+      }
+
+      this.appendDataRow(tbody, this.data, false);
+
+      if (this.summary.isUse && this.summary.position === 'last') {
+        this.appendDataRow(tbody, this.summary.data, true);
+      }
+
+      this.instance.appendChild(tbody);
+      resolve();
+    });
+  },
+
+  appendDataRow(tbody, data, isSummary) {
+    for (let row of data) {
+      let tr = document.createElement('tr');
+
+      if (isSummary) {
+        let td = document.createElement('td');
+        td.innerText = this.summary.title.name;
+        td.setAttribute('colspan', this.summary.title.replaceKeys.length);
+        //td.setAttribute('align', 'center');
+        tr.appendChild(td);
+      }
+
+      for (let cellkey of this.visibleDataOrder) {
+        if (isSummary && this.summary.title.replaceKeys.indexOf(cellkey) > -1) continue;
+
+        let td = document.createElement('td');
+        td.innerText = row[cellkey];
+        tr.appendChild(td);
+      }
+      tbody.appendChild(tr);
+    }
+    return tbody;
+  },
+  getVisibleDataOrder() {
+    let dataOrder = [];
+    if (Array.isArray(this.options.dataOrder)) {
+      dataOrder = this.options.dataOrder;
+    } else if (this.options.dataOrder === 'header') {
+      for (let row of this.header) {
+        for (let h of row) {
+          if (h.key != undefined && h.key != null && h.key !== '') {
+            dataOrder.push(h.key);
+          }
+        }
+      }
+    } else {
+      dataOrder = Object.keys(this.data[0]);
+    }
+    this.visibleDataOrder = dataOrder;
+  },
+  export(data, filename, options) {
+    this.data = data;
+    this.filename = filename;
+    this.header = options.header;
+    this.options = options;
+
+    this.getVisibleDataOrder();
+    return new Promise((resolve, reject) => {
+      this.createInstance().then(() => {
+        this.createHeader().then(() => {
+          this.createDataRows().then(() => {
+            this.exportTableToXlsx();
+            resolve();
+          });
+        });
+      });
+    });
+  },
+  exportTableToXlsx() {
+    let config = { raw: true, type: 'string' };
+    let ws = xlsx.utils.table_to_sheet(this.instance, config);
+    let wb = xlsx.utils.book_new();
+
+    xlsx.utils.book_append_sheet(wb, ws, 'Sheet1');
+    xlsx.writeFile(wb, this.filename);
+  }
+};
+
+export default xlsxUtils;

frontend/src/common/http-client.js

@@ -0,0 +1,105 @@
+import axios from 'axios';
+import { testProp } from './config';
+
+const config = {
+  //baseURL: 'http://localhost:7070',
+  // baseURL: apiBaseUrl,
+  headers: {
+    'X-Requested-With': 'XMLHttpRequest'
+  },  
+  timeout: 120000 // timeout은 120초로 설정
+};
+
+const httpClient = axios.create(config);
+
+const authInterceptor = config => {
+  // frontend와 backend의 origin이 다른 경우
+  // devServer.proxy 설정을 하던지 baseURL과 withCredentials 설정을 해야 한다.
+  // cookie, header 등에 자격정보 설정이 필요한 api는 true 설정으로 호출해야 하고
+  // 자격정보 설정이 필요없는 api는 withCredentials=false 설정으로 호출해야 한다.
+  // config.withCredentials = !config.url.startsWith('/api/public/');
+  console.log("Test Url : "+ config.url);
+  /*if(config.url == '/api/auth/login'){
+    config.baseURL = "http://localhost:3000";
+  }*/
+  return config;
+};
+
+const loggerInterceptor = config => {
+  console.log('testProp:', testProp);
+  console.log('request url:', config.url, 'params:', config.data);
+  return config;
+};
+
+let loadOverlap = [];
+const loadingLayer = (type, config) => {
+  /*
+  get: httpClient.get(url, { params: { ... }, headers: {"show-layer": "Yes"} }) // in 2nd property
+  post: httpClient.post(url, params, { headers: {"show-layer": "Yes"} })  // 3rd property
+  */
+  if (config.headers['Show-Layer'] == 'Yes') {
+    if (type) {
+      loadOverlap.push('add');
+    } else {
+      loadOverlap.pop();
+    }
+
+    if (loadOverlap.length > 0) {
+      document.querySelector('html > body').style.overflow = 'hidden'; // 스크롤 block
+      document.getElementsByClassName('loading_layer')[0].style.display = 'block';
+    } else {
+      document.querySelector('html > body').style.removeProperty('overflow'); // 스크롤 allow
+      document.getElementsByClassName('loading_layer')[0].style.display = 'none';
+    }
+  }
+};
+
+/*const loadingLayerInterceptor = config => {
+  loadingLayer(true, config);
+  return config;
+};*/
+
+/** Adding the request interceptors */
+httpClient.interceptors.request.use(authInterceptor);
+httpClient.interceptors.request.use(loggerInterceptor);
+//httpClient.interceptors.request.use(loadingLayerInterceptor);
+
+/** Adding the response interceptors */
+httpClient.interceptors.response.use(
+  response => {
+    //loadingLayer(false, response.config);
+    console.log('response status:', response.status, 'data:', response.data);    
+    return response;
+  },
+  error => {
+    console.log(error);
+    if (error.response != undefined && error.response != null) loadingLayer(false, error.response.config);
+    else loadingLayer(false, error.config);
+
+    if (error.code === 'ECONNABORTED') {
+      alert('서비스가 지연되고 있습니다. 잠시 후 확인하시고 다시 시도해주세요.');
+      return Promise.reject(error);
+    } else if (error.response.status == 401 || error.response.status == 418) {
+      alert('세션이 만료되었습니다.');
+      window.top.location.href = '/login';
+    } else if (error.response.status == 500) {
+      if (error.response.data != null && error.response.data.message == '511 NETWORK_AUTHENTICATION_REQUIRED') {
+        alert('웹템플릿 IP가 브랜드포털에 등록이 필요합니다. 기술지원에 문의해주세요.');
+        return Promise.reject(error);
+      } else {
+        window.top.location.href = '/view/error/500';
+      }
+    } else if (error.response.status == 511) {
+      alert('웹템플릿 IP가 브랜드포털에 등록이 필요합니다. 기술지원에 문의해주세요.');
+      return Promise.reject(error);
+    } else if (error.message == 'Network Error') {
+      alert('네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
+      return Promise.reject(error);
+    } else {
+      console.log('response error:', error);
+      return Promise.reject(error);
+    }
+  }
+);
+
+export default httpClient;

frontend/src/common/ko.js

@@ -0,0 +1 @@
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):((t=t||self).vdp_translation_ko=t.vdp_translation_ko||{},t.vdp_translation_ko.js=n())}(this,function(){"use strict";function t(t,n){for(var e=0;e<n.length;e++){var r=n[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var n=new(function(){function n(t,e,r,o){!function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}(this,n),this.language=t,this.months=e,this.monthsAbbr=r,this.days=o,this.rtl=!1,this.ymd=!1,this.yearSuffix=""}var e,r,o;return e=n,(r=[{key:"language",get:function(){return this._language},set:function(t){if("string"!=typeof t)throw new TypeError("Language must be a string");this._language=t}},{key:"months",get:function(){return this._months},set:function(t){if(12!==t.length)throw new RangeError("There must be 12 months for ".concat(this.language," language"));this._months=t}},{key:"monthsAbbr",get:function(){return this._monthsAbbr},set:function(t){if(12!==t.length)throw new RangeError("There must be 12 abbreviated months for ".concat(this.language," language"));this._monthsAbbr=t}},{key:"days",get:function(){return this._days},set:function(t){if(7!==t.length)throw new RangeError("There must be 7 days for ".concat(this.language," language"));this._days=t}}])&&t(e.prototype,r),o&&t(e,o),n}())("Korean",["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],["일","월","화","수","목","금","토"]);return n.yearSuffix="년",n.ymd=!0,n});

frontend/src/common/token-service.js

@@ -0,0 +1,38 @@
+import * as utils from './utils';
+import { consts } from './config';
+
+// const KEY_TOKEN = 'access_token';
+
+const tokenSvc = {
+    getToken() {
+        // return store.getters['login/getToken'];
+        // var payload = sessionStorage.getItem(KEY_TOKEN);
+        var jwtPart1 = utils.getCookie(consts.tokenPart1);
+        if (!jwtPart1)
+            return null;
+        var payload = utils.base64decode(jwtPart1.split('.').pop());
+        return JSON.parse(payload);
+    },
+    removeToken() {       
+        var name = consts.tokenPart1; 
+        document.cookie = name + '=; expires=Thu, 01 Jan 1999 00:00:10 GMT;';
+    }
+
+    // saveToken(jwtPart1) {
+    //     if (!jwtPart1)
+    //         return;
+
+    //     var payload = utils.base64decode(jwtPart1.split('.').pop());
+    //     console.log('save token:', payload);
+    //     // store.commit('login/saveToken', token);
+    //     sessionStorage.setItem(KEY_TOKEN, payload);
+    // },
+
+    // removeToken() {
+    //     // store.commit('login/removeToken');
+    //     sessionStorage.removeItem(KEY_TOKEN);
+    // }
+
+};
+
+export default tokenSvc;

frontend/src/common/utils.js

@@ -0,0 +1,117 @@
+/**
+ * @description This method is responsile for creating the object with mirror key and values
+ * and also add prefix to values if available
+ * @param {Array<string>} arr Array of strings
+ * @param {string} prefix prefix
+ * @returns {Object} object with mirror keys generated from the array of strings
+ */
+export const reflectKeys = (arr = [], prefix) =>
+  arr.reduce((obj, key) => {
+    const value = prefix ? prefix + ' ' + key : key;
+    obj[key] = value;
+
+    return obj;
+  }, {});
+
+export const form2obj = function(form) {
+  var queryStr = serializeForm(form);
+  return qstr2obj(queryStr);
+};
+
+/*!
+ * Serialize all form data into a query string
+ * (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com
+ * @param  {Node}   form The form to serialize
+ * @return {String}      The serialized form data
+ */
+export const serializeForm = function(form) {
+  // Setup our serialized data
+  var serialized = [];
+
+  // Loop through each field in the form
+  for (var i = 0; i < form.elements.length; i++) {
+    var field = form.elements[i];
+
+    // Don't serialize fields without a name, submits, buttons, file and reset inputs, and disabled fields
+    if (
+      !field.name ||
+      field.disabled ||
+      field.type === 'file' ||
+      field.type === 'reset' ||
+      field.type === 'submit' ||
+      field.type === 'button'
+    )
+      continue;
+
+    // If a multi-select, get all selections
+    if (field.type === 'select-multiple') {
+      for (var n = 0; n < field.options.length; n++) {
+        if (!field.options[n].selected) continue;
+        serialized.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.options[n].value));
+      }
+    }
+
+    // Convert field data to a query string
+    else if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) {
+      serialized.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value));
+    }
+  }
+
+  return serialized.join('&');
+};
+
+export const qstr2obj = function(qstr) {
+  let obj = {};
+  if (qstr) {
+    qstr.split('&').map(item => {
+      const [k, v] = item.split('=');
+      v ? (obj[k] = v) : null;
+    });
+  }
+  return obj;
+};
+
+export const getCookie = function(name) {
+  var value = '; ' + document.cookie;
+  var parts = value.split('; ' + name + '=');
+  if (parts.length == 2)
+    return parts
+      .pop()
+      .split(';')
+      .shift();
+};
+
+import { Base64 } from 'js-base64';
+
+export const base64encode = function(str) {
+  return Base64.encode(str);
+};
+
+export const base64decode = function(b64) {
+  return Base64.decode(b64);
+};
+
+export const getGwSuccessCode = function() {
+  return '10000';
+};
+
+export const isGwSuccess = function(code) {
+  return getGwSuccessCode() == code;
+};
+
+let loadOverlap = [];
+export const loadingLayer = (type) => {
+  if (type) {
+    loadOverlap.push('add');
+  } else {
+    loadOverlap.pop();
+  }
+
+  if (loadOverlap.length > 0) {
+    document.querySelector('html > body').style.overflow = 'hidden'; // 스크롤 block
+    document.getElementsByClassName('loading_layer')[0].style.display = 'block';
+  } else {
+    document.querySelector('html > body').style.removeProperty('overflow'); // 스크롤 allow
+    document.getElementsByClassName('loading_layer')[0].style.display = 'none';
+  }
+};

frontend/src/common/vue-mixins.js

@@ -0,0 +1,228 @@
+const coreUiMixin = {
+  directives: {
+    focus: {
+      inserted: function(el) {
+        el.focus();
+      }
+    }
+  },
+  methods: {
+    clearInput: function(evt) {
+      var me = evt.target;
+      var vname = me.previousElementSibling.name;
+      this.$data[vname] = '';
+      me.previousElementSibling.focus();
+    },
+    showPhoneNumber: function(str) {
+      str = str.replace(/[\-\s\/]+/g, '');
+      if (str.length > 12 || str.length < 10) {
+        return str;
+      }
+      var result =
+        str.substring(0, str.length - 8) +
+        '-' +
+        str.substring(str.length - 8, str.length - 4) +
+        '-' +
+        str.substring(str.length - 4, str.length);
+      return result;
+    },
+    /*
+		openLayer: function(event, callback) {
+			var myId = event.target.getAttribute('data-id');
+			var myLayer = document.querySelector('[layer-id="' + myId + '"]');
+			var btnClose = document.querySelector('[layer-id="' + myId + '"] .btn_close');
+			myLayer.classList.add('active');
+			btnClose.addEventListener("click", function() {
+				myLayer.classList.remove('active');
+				if (callback != undefined && callback != null) {
+					callback('');
+				}
+			});
+
+			if (callback != undefined && callback != null) {
+				callback(myId);
+			}
+		},
+		*/
+    openLayer: function(layerId) {
+      if (layerId == undefined || layerId == null || layerId == '') {
+        alert('layerId를 설정해 주세요.');
+      } else {
+        this.$emit('changeLayerId', layerId);
+      }
+    },
+    closeLayer() {
+      this.$emit('changeLayerId', '');
+    },
+    numberComma(num) {
+      if (typeof num == undefined || num == null) {
+        return '';
+      }
+      num = num + '';
+      let point = num.length % 3;
+      let len = num.length;
+
+      let str = num.substring(0, point);
+      while (point < len) {
+        if (str != '') {
+          str += ',';
+        }
+        str += num.substring(point, point + 3);
+        point += 3;
+      }
+
+      return str;
+    }
+  }
+};
+
+var chkPattern = {
+  data: function() {
+    return {};
+  },
+  methods: {
+    setLenth: function(e, len) {
+      this.cut(e, len);
+    },
+    onlyNum: function(e, len) {
+      this.cut(e, len);
+      var str = e.target.value;
+      if (!/^[0-9]*$/g.exec(str)) {
+        e.target.value = str.replace(/[^0-9]/gi, '');
+      }
+    },
+    only11Num: function(e, len) {
+      this.cut(e, len);
+      var str = e.target.value;
+      if (!/^[0-9]*$/g.exec(str)) {
+        str = str.replace(/[^0-9]/gi, '');
+      }
+
+      if (str.length > 11) {
+        str = str.substring(0, 11);
+      }
+
+      e.target.value = str;
+    },
+    onlyEmail: function(e, len) {
+      this.cut(e, len);
+      var str = e.target.value;
+      if (!/^[a-zA-Z0-9_\.\-@._-]*$/g.exec(str)) {
+        e.target.value = str.replace(/[^a-zA-Z0-9_\.\-@._-]/gi, '');
+      }
+    },
+    onlyName: function(e, len) {
+      this.cut(e, len);
+      var str = e.target.value;
+      if (!/^[ㄱ-힣a-zA-Z]*$/g.exec(str)) {
+        e.target.value = str.replace(/[^ㄱ-힣a-zA-Z]/gi, '');
+      }
+    },
+    onlyTitle: function(e, len) {
+      this.cut(e, len);
+      var str = e.target.value;
+      if (!/^[ㄱ-힣a-zA-Z0-9]*$/g.exec(str)) {
+        e.target.value = str.replace(/[^ㄱ-힣a-zA-Z0-9]/gi, '');
+      }
+    },
+    onlyText: function(e, len) {
+      this.cut(e, len);
+      var str = e.target.value;
+      if (!/^[ㄱ-힣a-zA-Z0-9_-]*$/g.exec(str)) {
+        e.target.value = str.replace(/[^ㄱ-힣a-zA-Z0-9_-]/gi, '');
+      }
+    },
+    onlyPassword: function(e, len) {
+      this.cut(e, len);
+      var str = e.target.value;
+      if (!/^[A-Za-z0-9!@#$%^&*]*$/g.exec(str)) {
+        e.target.value = str.replace(/[^A-Za-z0-9!@#$%^&*]/gi, '');
+      }
+    },
+    onlyId: function(e, len) {
+      this.cut(e, len);
+      var str = e.target.value;
+      if (!/^[A-Za-z0-9]*$/g.exec(str)) {
+        e.target.value = str.replace(/[^A-Za-z0-9]/gi, '');
+      }
+    },
+    onlyIp: function(e, len) {
+      this.cut(e, len);
+      var str = e.target.value;
+      if (!/^[0-9,.*]*$/g.exec(str)) {
+        e.target.value = str.replace(/[^0-9,.*]/gi, '');
+      }
+    },
+    onlyRoleNm_Space: function(e, len) {
+      this.cut(e, len);
+      var str = e.target.value;
+      if (!/^[ㄱ-힣a-zA-Z0-9/\s]*$/g.exec(str)) {
+        e.target.value = str.replace(/[^ㄱ-힣a-zA-Z0-9/\s]/gi, '');
+      }
+    },
+    onlyRoleId_UnderBar: function(e, len) {
+      this.cut(e, len);
+      var str = e.target.value;
+      if (!/^[a-zA-Z0-9_]*$/g.exec(str)) {
+        e.target.value = str.replace(/[^a-zA-Z0-9_]/gi, '');
+      }
+    },
+    cut: function(e, len) {
+      if (typeof len != 'undefined') {
+        var str = e.target.value;
+        if (this.bytes(str) > len) {
+          e.target.value = this.cutBytes(str, len);
+        }
+      }
+    },
+    cutBytes: function(str, len) {
+      var count = 0;
+      for (var i = 0; i < str.length; i++) {
+        if (escape(str.charAt(i)).length >= 4) count += 2;
+        else if (escape(str.charAt(i)) != '%0D') count++;
+        if (count > len) {
+          if (escape(str.charAt(i)) == '%0A') i--;
+          break;
+        }
+      }
+      return str.substring(0, i);
+    },
+    bytes: function(str) {
+      var length = 0;
+      for (var i = 0; i < str.length; i++) {
+        if (escape(str.charAt(i)).length >= 4) length += 2;
+        else if (escape(str.charAt(i)) == '%A7') length += 2;
+        else {
+          if (escape(str.charAt(i)) != '%0D') length++;
+        }
+      }
+      return length;
+    },
+    checkPhone: function(str) {
+      str = str.replace(/[\-\s\/]+/g, '');
+      if (str.charAt(0) != '0') {
+        str = '0' + str;
+      }
+      if (str.length < 10 || str.length > 12) {
+        return '';
+      }
+      if (isNaN(str)) {
+        return '';
+      }
+      //if (str.substr(0,2)!="01" && str.substr(0,3)!="070"  && str.substr(0,4)!="0505" && str.substr(0,4)!="0503"){return "";	}
+      //sif (str.substr(0,3)!="010"){return "";	}
+      return str;
+    },
+    checkExcelFile: function(fileObj) {
+      let reg = /(.*?)\.(xls|xlsx)$/;
+      if (fileObj == undefined || fileObj == null)
+        return false;
+      if (!fileObj.name.match(reg)) 
+        return false;
+      
+      return true;
+    }    
+  }
+};
+
+export { coreUiMixin, chkPattern };

frontend/src/components/ButtonBranch.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="container template_free"> 
+    <article id="content" class="content"></article>
+    <div tabindex="0" class="layer active">
+      <div tabindex="0" class="layer_cont error">
+        <div class="layer_body">
+          <div class="title_wrap center mar_b50">
+            <h5 class="h5_title" v-html="message">{{ message }}</h5>
+          </div>
+          <div class="btn_wrap mar_t20 center">          
+            <a v-for="(branch, index) in branchList" :key="index" href="javascript:void(0);" class="btn mid" :class="branch.class" @click="branch.callback"><span>{{ branch.text }}</span></a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/*
+  branchList: [
+    {
+      text: "저장",
+      class: "bd_black",
+      callback: callback
+    },
+    .....
+  ]
+ */
+export default {
+  name: "buttonBranch",
+  props: {
+    message: String,
+    branchList: {
+      text: Array,
+      class: String,
+      callback: Function
+    }
+  },
+  data() {
+    return {
+    }
+  }
+}
+</script>

frontend/src/components/CreateBrandViewer.vue

@@ -0,0 +1,199 @@
+<template>
+  <section>
+  <!-- <div class="emulator_wrap"> -->
+    <div class="inner_emul">
+      <strong class="blind">미리보기</strong>
+      <div class="emulator_area">
+        <div class="emulator_cont">
+        <div class="img_area description">
+          <img :src="bgImageData" v-if="bgImageData && !retrivebgFlag">
+          <img :src="this.bgImageUrl" v-else-if="retrivebgFlag">
+          <img src="@/assets/images/common/img_placeholder02.png" v-else>
+        </div>
+          <div class="rcs_profile_area">
+            <img :src="profileImageData" v-if="profileImageData && !retriveProfileFlag">
+            <img :src="this.profileImageUrl" v-else-if="retriveProfileFlag">
+            <img src="@/assets/images/common/img_profile_blank.png" v-else>
+          </div>
+          <strong class="rcs_brand_name">{{this.brandInfoData.name}}</strong>
+          <div class="rcs_icon_area">
+            <span
+              v-for="(item, index) in visibleMenuItemList"
+              :key="index"
+              class="rcs_icon"
+              :class="`icon_${item.code.toLowerCase()}`"
+            ></span>
+          </div>
+          <div class="rcs_desc_area" v-html="this.brandInfoData.descr"></div>
+          <div class="rcs_detail_area">
+            <dl>
+              <dt>전화번호</dt>
+              <dd>{{this.brandInfoData.tel}}</dd>
+              <dt>웹사이트</dt>
+              <dd>{{this.brandInfoData.url}}</dd>
+              <dt>이메일</dt>
+              <dd v-if="this.brandInfoData.email === '@'"></dd>
+              <dd v-else>{{this.brandInfoData.email}}</dd>
+              <dt>주소</dt>
+              <dd>{{this.brandInfoData.addrRegnNo}}{{this.brandInfoData.addrMngNo}}{{this.brandInfoData.addrDtl}}</dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+  <!-- </div> -->
+  </section>
+</template>
+
+<script>
+// 스크립트를 정의하는 부분
+// 개발자 작업 영역
+//import { getImageUrl } from '@/service/code'
+
+// [ECMA6] export default 된 부분이 외부에서 import로 사용할 수 있게 된다.
+export default {
+  // .vue 내부에서 사용되는 model
+  // model 기반으로 vue는 동작된다.
+  props: {
+    brandInfoData: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      bgImageData: '',
+      profileImageData: '',
+
+      profileImageUrl: '',
+      bgImageUrl: '',
+      retriveProfileFlag: false,
+      retrivebgFlag: false
+    }
+  },
+  created() {
+    // DOM이 만들어 지기 전 실행 되는 곳
+    // Data를 사전에 준비할 경우 사용된다.
+  },
+  mounted() {
+    // DOM에 해당 .vue가 들어가게 되면 실행 되는 곳
+    // onload 상태와 동일하다. DOM 이후에 조작할 경우 이곳에서 수행
+  },
+  watch: {
+    'brandInfoData.descr'() {
+      this.brandInfoData.descr = this.brandInfoData.descr.replace(/\(|\)|on.*\(|eval\(|javascript/gi,'')
+        .split('\n')
+        .join('<br />')
+    },
+    'brandInfoData.profileImgFile'() {
+      if (this.brandInfoData.profileImgFile) {
+        let reader = new FileReader()
+        let vm = this
+        let file = this.brandInfoData.profileImgFile
+
+        reader.onload = e => {
+          vm.profileImageData = e.target.result
+        }
+        reader.readAsDataURL(file)
+      } else {
+        this.profileImageData = ''
+      }
+    },
+    'brandInfoData.bgImgFile'() {
+      if (this.brandInfoData.bgImgFile) {
+        let reader = new FileReader()
+        let vm = this
+        let file = this.brandInfoData.bgImgFile
+
+        reader.onload = e => {
+          vm.bgImageData = e.target.result
+        }
+        reader.readAsDataURL(file)
+      } else {
+        this.bgImageData = ''
+      }
+    },
+    'brandInfoData.profileImgFileId'() {
+      if (
+        !jglib.isEmpty(this.brandInfoData.profileImgFileId) &&
+        !jglib.isEmpty(this.brandInfoData.profileImgFileNo)
+      ) {
+        this.retriveProfileFlag = true
+        let reqObj = {
+          fileId: this.brandInfoData.profileImgFileId,
+          fileNo: this.brandInfoData.profileImgFileNo
+        }
+        getImageUrl(reqObj).then(res => {
+          this.profileImageUrl = res.downloadUrl
+        })
+      } else {
+        this.retriveProfileFlag = false
+        this.profileImageUrl = ''
+      }
+    },
+    'brandInfoData.bgImgFileId'() {
+      if (
+        !jglib.isEmpty(this.brandInfoData.bgImgFileId) &&
+        !jglib.isEmpty(this.brandInfoData.bgImgFileNo)
+      ) {
+        this.retrivebgFlag = true
+        let reqObj = {
+          fileId: this.brandInfoData.bgImgFileId,
+          fileNo: this.brandInfoData.bgImgFileNo
+        }
+        getImageUrl(reqObj).then(res => {
+          this.bgImageUrl = res.downloadUrl
+        })
+      } else {
+        this.retrivebgFlag = false
+        this.bgImageUrl = ''
+      }
+    }
+  },
+  computed: {
+    // 값이 자주 변경됨에 따라, 관련되어 데이터 혹은 view가 바뀌어야 할 경우 사용
+    // method를 바로 연결하면 tic 단위로 계속 실행되기 때문에, 값이 변경할 때만 수행되고,
+    // cache로 남는 computed를 활용하는 것이 성능에 좋음
+    visibleMenuItemList() {
+      if (this.brandInfoData.menuItemList) {
+        return this.brandInfoData.menuItemList.filter(res => {
+          return res.visible
+        })
+      } else {
+        return []
+      }
+    }
+  },
+  methods: {
+    // .vue 내부에서 사용되는 함수를 정의한다.
+    // 이벤트에 따라 실행하거나, 내부적으로 사용되는 함수들을 정의한다.
+  getImageUrl: function(reqData) {
+      if (!isUseAPI()) {
+        return new Promise((resolve, reject) => {
+          let res = {
+            code: '99999999',
+            msg: 'not available in mockup'
+          }
+          resolve(res)
+        })
+      }
+
+      return new Promise((resolve, reject) => {
+        request({
+          url: `/file/${reqData.fileId}/${reqData.fileNo}`,
+          method: 'get'
+        })
+          .then(res => {
+            let imgData = {
+              fileName: res.result.fileName,
+              downloadUrl: res.result.downloadUrl
+            }
+            resolve(imgData)
+          })
+          .catch(res => {
+            reject('error in filedownload')
+          })
+      })
+    }
+  }
+}
+</script>

frontend/src/components/CustomGrid.vue

@@ -0,0 +1,679 @@
+<template>
+  <section>
+    <div class="box_scroll" :class="addCls">
+      <table class="tbl_col_type cgrid" ref="customTable" :class="addTbCls" :style="applyTbStyle">
+        <v-runtime-template :template="colsData"></v-runtime-template>
+        <v-runtime-template :template="headerData"></v-runtime-template>
+        <v-runtime-template :template="bodyData" @hook:updated="setEvents"></v-runtime-template>
+      </table>
+    </div>
+
+    <v-runtime-template v-if="pagination == true" :template="pagingData"></v-runtime-template>
+  </section>
+</template>
+
+<script>
+import httpClient from '@/common/http-client';
+import VRuntimeTemplate from 'v-runtime-template';
+
+export default {
+  name: 'customGrid',
+  props: [
+    'url', // 연동 url
+    'initialRequest', // false일 시 초기 렌더링 시 백엔드에 요청 하지 않음. 이 경우 readData를 호출하여 그리드 데이터를 할당해 줘야 함
+    'pagination', // 페이지 네비게이션 사용 여부
+    'perPage', // 페이지 당 개수
+    'header', // 사용자정의 header가 있을 경우
+    'columns', // 컬럼 정보
+    'noDataStr', // 데이터가 없을 때
+    'isCheckbox', // 기본 체크박스 그리드일 경우 true
+    'addBodyAlign', // TOP, BOTTOM
+    'addBodyTmplt', // 추가되는 html
+    'addTableStyle', // 추가되는 그리드 style
+    'addTbCls', // 추가되는 테이블 클래스
+    'addCls', // 추가되는 클래스
+    'totalItems' // 부모창에 표시할 총 컨텐츠 개수 변수 명 (더 좋은 방법 있으면 알려주세요.)
+  ],
+  components: {
+    VRuntimeTemplate
+  },
+  data() {
+    return {
+      getParams: {},
+
+      applyTbStyle: 'table-layout: fixed;',
+      prevCallOrderKey: '',
+      callOrderKey: '',
+      callOrderDesc: true,
+      colsLen: 0,
+      pageCount: 10,
+      curPerPage: 5,
+      currentIndex: 1,
+      totalCount: 0,
+      bodyList: [],
+
+      events: [],
+      colsData: '',
+      headerData: '',
+      bodyData: '',
+      pagingData: ''
+    };
+  },
+  created() {
+    this.cleanData();
+    if (this.initialRequest == true) {
+      this.readData();
+    }
+  },
+  watch: {
+    perPage() {
+      this.currentIndex = 1;
+      this.curPerPage = this.perPage;
+      this.readData();
+    }
+  },
+  methods: {
+    getData() {
+      return this.bodyList;
+    },
+    cleanData() {
+      if (typeof this.perPage == undefined || this.perPage == null) {
+        this.curPerPage = 5;
+      } else {
+        this.curPerPage = this.perPage;
+      }
+
+      if (typeof this.addTableStyle == undefined || this.addTableStyle == null) {
+        this.applyTbStyle = 'table-layout: fixed;';
+      } else {
+        this.applyTbStyle = this.addTableStyle;
+      }
+
+      this.getParams = {};
+
+      this.prevCallOrderKey = '';
+      this.callOrderKey = '';
+      this.callOrderDesc = true;
+      this.colsLen = 0;
+      this.currentIndex = 1;
+      this.totalCount = 0;
+      this.bodyList = [];
+
+      this.events = [];
+      this.colsData = '';
+      this.headerData = '';
+      this.bodyData = '';
+      this.pagingData = '';
+    },
+    readData(isKeep) {
+      if (typeof this.url != undefined && this.url != null && this.url != '') {
+        if (isKeep == true) {
+          // nothing
+        } else {
+          if (this.pagination == true) {
+            this.getParams['perPage'] = this.curPerPage;
+            this.getParams['page'] = this.currentIndex;
+          } else {
+            delete this.getParams['perPage'];
+            delete this.getParams['page'];
+          }
+        }
+
+        let colStr = this.makeColGroupView();
+        let headerStr = this.makeHeaderView();
+        let bodyStr = '';
+        let pageStr = '';
+
+        var vm = this;
+        console.log(this.url);        
+        httpClient
+          //.get(this.url, { params: this.getParams, headers: { 'Show-Layer': 'Yes' }})
+          .post(this.url, this.getParams,  {headers: { 'Show-Layer': 'Yes' }})
+          .then(response => {
+            let resp = response.data;
+            console.log(resp);
+            //if (resp != null && resp.result == true) {
+            if (resp != null && resp.retCode == '0000') {
+              let data = resp.data;
+              //let conts = data.contents;
+              let conts = data.list;              
+              vm.bodyList = conts;
+
+              bodyStr = vm.makeBodyView();
+              //this.$parent[this.totalItems] = data.pagination.totalCount;
+              this.$parent[this.totalItems] = data.paging.totalCnt;
+
+              /*if (vm.pagination == true) {
+                vm.currentIndex = data.pagination.page == 0 ? 1 : data.pagination.page;
+                vm.totalCount = data.pagination.totalCount;
+                pageStr = vm.makePagingView();
+              }*/
+              if (vm.pagination == true) {
+                vm.currentIndex = data.paging.currentPage == 0 ? 1 : data.paging.currentPage;
+                vm.totalCount = data.paging.totalCnt;
+                pageStr = vm.makePagingView();
+              }
+            }
+
+            vm.setTableView(colStr, headerStr, bodyStr, pageStr);
+          }).catch(response => {
+            bodyStr = vm.makeBodyView();
+            if (vm.pagination == true) {
+              vm.currentIndex = 1;
+              vm.totalCount = 0;
+              pageStr = vm.makePagingView();
+            }
+            vm.setTableView(colStr, headerStr, bodyStr, pageStr);
+          });
+      }
+    },
+    reloadData() {
+      this.movePage(1, true);
+    },
+    search(params, isKeep) {
+      if (params == undefined || params == null) {
+        params = {};
+        this.currentIndex = 1;
+        this.callOrderKey = '';
+      }
+      if (isKeep == undefined || isKeep == null || typeof isKeep != 'boolean') {
+        isKeep = false;
+        this.currentIndex = 1;
+        this.callOrderKey = '';
+      }
+
+      this.getParams = {};
+      this.getParams = params;
+      this.readData(isKeep);
+    },
+
+    setTableView(colStr, headerStr, bodyStr, pageStr) {
+      this.colsData = colStr;
+      this.headerData = headerStr;
+      this.bodyData = bodyStr;
+      this.pagingData = pageStr;
+    },
+    setEvents() {
+      for (var i = 0; i < this.events.length; i++) {
+        let e = this.events[i];
+        let cls = e.cls;
+        let addCls = '';
+        for (var c = 0; c < cls.getElement().classList.length; c++) {
+          addCls += '.' + cls.getElement().classList[c];
+        }
+
+        if (addCls != '') {
+          let selQuery = this.$refs.customTable.querySelectorAll(addCls);
+          let key = e.key;
+          if (selQuery.length > 0 && typeof selQuery[key] != undefined && selQuery[key] != null) {
+            cls.addEvent(selQuery[key]);
+          }
+        }
+      }
+    },
+    makeColGroupView() {
+      this.colsLen = 0;
+      let colGroup = '';
+      colGroup += '<colgroup>';
+      if (this.isCheckbox == true) {
+        colGroup += '<col style="width: 60px">';
+        this.colsLen++;
+      }
+
+      for (var i = 0; i < this.columns.length; i++) {
+        let colData = this.columns[i];
+        if (colData.hidden != undefined && colData.hidden == true) {
+        } else {
+          let cw = colData.width;
+          if (typeof cw == undefined || cw == null || cw == '') {
+            cw = '';
+          } else if (Number(cw) > 0) {
+            cw += 'px';
+          }
+
+          if (cw == '') {
+            colGroup += '<col>';
+          } else {
+            colGroup += '<col style="width: ' + cw + '">';
+          }
+          this.colsLen++;
+        }
+      }
+
+      colGroup += '</colgroup>';
+      return colGroup;
+    },
+    makeHeaderView() {
+      let skipHeader = [];
+      let mustHeader = [];
+
+      let tHead = '';
+      tHead += '<thead>';
+
+      if (this.header != undefined && this.header != null && this.header.length > 0) {
+        tHead += '<tr>';
+        let rLen = this.header.length + 1;
+        if (this.isCheckbox == true) {
+          tHead +=
+            '<th scope="col" rowspan="' +
+            rLen +
+            '"><span class="custom_checkbox"><input type="checkbox" name="checkboxAll" @click="checkAll" id="checkboxAll"> <label for="checkboxAll"></label></span></th>';
+        }
+
+        for (var i = 0; i < this.header.length; i++) {
+          let hDataList = this.header[i];
+          for (var j = 0; j < hDataList.length; j++) {
+            let hData = hDataList[j];
+
+            let cdata = hData.childNames;
+            let hStr = hData.header;
+            if (typeof hStr == undefined || hStr == null) {
+              hStr = '';
+            }
+            if (typeof cdata == undefined || cdata == null || cdata.length == 0) {
+              tHead += '<th scope="col" rowspan="' + rLen + '">' + hStr + '</th>';
+              skipHeader.push(hStr);
+            } else {
+              let cLen = cdata.length;
+              let chId = 'thHeader' + i + '' + j;
+              tHead +=
+                '<th scope="colgroup" colspan="' + cLen + '" class="th_line" id="' + chId + '">' + hStr + '</th>';
+              for (var k = 0; k < cLen; k++) {
+                mustHeader.push(chId);
+              }
+            }
+          }
+        }
+
+        tHead += '<tr>';
+      } else {
+        tHead += '<tr>';
+        if (this.isCheckbox == true) {
+          tHead +=
+            '<th><span class="custom_checkbox"><input type="checkbox" name="checkboxAll" @click="checkAll" id="checkboxAll"> <label for="checkboxAll"></label></span></th>';
+        }
+      }
+
+      let colIdx = 0;
+      for (var i = 0; i < this.columns.length; i++) {
+        let colData = this.columns[i];
+        if (colData.hidden == true) {
+        } else {
+          let cheader = colData.header;
+          let hd = '';
+          if (cheader == undefined || cheader == null || cheader == '') {
+            cheader = '';
+          } else {
+            if (skipHeader.length > 0 && skipHeader.includes(cheader)) {
+              continue;
+            }
+
+            hd = '<th';
+            if (mustHeader.length > 0) {
+              let hs = mustHeader[colIdx];
+              if (hs != undefined && hs != null) {
+                hd += ' headers="' + hs + '" class="th_line"';
+                colIdx++;
+              }
+            }
+
+            if (colData.sort == true) {
+              let orderKey = colData.name;
+              let sortHd = ' class="sort_table">';
+              sortHd += '<strong>';
+              sortHd += cheader;
+              sortHd +=
+                '<a href="javascript:void(0);" class="btn_sort" @click="sortData(\'' + orderKey + '\')">정렬</a>';
+              sortHd += '</strong>';
+              hd += sortHd;
+            } else {
+              hd += '>' + cheader;
+            }
+          }
+
+          tHead += hd + '</th>';
+        }
+      }
+
+      tHead += '</tr></thead>';
+      return tHead;
+    },
+    makeBodyView() {
+      this.events = [];
+      let tBody = '';
+      tBody += '<tbody>';
+
+      if (this.bodyList != undefined && this.bodyList != null && this.bodyList.length > 0) {
+        if (this.addBodyAlign == 'TOP') {
+          tBody += this.addBodyTmplt;
+        }
+
+        for (var b = 0; b < this.bodyList.length; b++) {
+          let bData = this.bodyList[b];
+
+          let trStr = '<tr>';
+          if (this.isCheckbox == true) {
+            trStr +=
+              '<td><span class="custom_checkbox single"><input type="checkbox" name="checkbox" @click="check" id="checkbox' +
+              b +
+              '"> <label for="checkbox' +
+              b +
+              '"></label></span></td>';
+          }
+
+          let colIdx = 0;
+          for (var i = 0; i < this.columns.length; i++) {
+            let colData = this.columns[i];
+            if (colData.hidden == true) continue;
+
+            let cname = colData.name;
+            let crenderer = colData.renderer;
+            let formatter = colData.formatter;
+            let cdefaultText = colData.defaultText;
+            let align = colData.align;
+            let csubtlb = colData.subtlb;
+            let tooltipTextCol = colData.tooltipTextCol;
+
+            let cls = colData.cls;
+            if (cls == undefined || cls == null) {
+              cls = '';
+            }
+
+            const customTd = document.createElement('td');
+            customTd.className = cls;
+            if (align == 'left' || align == 'right') {
+              customTd.style.textAlign = align;
+            }
+
+            let cw = colData.width;
+            if (cw == undefined || cw == null || cw == '') {
+              cw = '';
+            } else if (Number(cw) > 0) {
+              cw += 'px';
+            }
+
+            bData['cgridwidth'] = cw;
+
+            if (crenderer != undefined && crenderer != null) {
+              let customCls = crenderer.type;
+              bData['rowKey'] = b;
+
+              let tdv = this.makeTdText(formatter, bData, cname, cdefaultText);
+
+              bData['colValue'] = this.customReplaceStr(tdv);
+              bData['colName'] = cname;
+              if (crenderer.options != undefined && crenderer.options != null) {
+                let opts = { options: crenderer.options };
+                if (cname == undefined || cname == null || cname == '') {
+                  bData['cgrido'] = opts;
+                } else {
+                  bData['cgrido' + cname] = opts;
+                }
+              }
+              let initCls = new customCls(bData);
+              let el = initCls.getElement();
+              let oh = el.outerHTML;
+
+              customTd.innerHTML = this.customReplaceStr(oh);
+
+              this.events.push({ cls: initCls, key: b });
+            } else if (csubtlb != undefined && csubtlb != null) {
+              customTd.innerHTML = this.makeDoubleRowColumn(csubtlb, bData);
+            } else {
+              customTd.innerHTML = this.makeTooltip(
+                bData,
+                colData,
+                this.makeTdText(formatter, bData, cname, cdefaultText)
+              );
+            }
+
+            trStr += customTd.outerHTML;
+            colIdx++;
+          }
+
+          trStr += '</tr>';
+          tBody += trStr;
+        }
+
+        if (this.addBodyAlign == 'BOTTOM') {
+          tBody += this.addBodyTmplt;
+        }
+      } else {
+        tBody += '<tr><td colspan="' + this.colsLen + '" class="no_data">' + this.noDataStr + '</td></tr>';
+      }
+
+      tBody += '</tbody>';
+      return tBody;
+    },
+    makeDoubleRowColumn(csubtlb, bData) {
+      let rtnHtml = '<table><tbody>';
+
+      for (var j = 0; j < csubtlb.length; j++) {
+        rtnHtml += '<tr><td>';
+        let subTlb = csubtlb[j];
+        let subName = subTlb.name;
+        let subDefaultText = subTlb.defaultText;
+        let subFormater = subTlb.formatter;
+        let tdv = this.makeTdText(subFormater, bData, subName, subDefaultText);
+        rtnHtml += this.makeTooltip(bData, subTlb, tdv);
+        rtnHtml += '</td></tr>';
+      }
+
+      rtnHtml += '</tbody></table>';
+
+      return rtnHtml;
+    },
+    makeTdText(formatter, bData, cname, defaultText) {
+      if (defaultText != undefined || defaultText != null) return defaultText;
+
+      let tdv = bData[cname];
+      if (formatter != undefined && formatter != null && typeof formatter === 'function') {
+        tdv = formatter(bData);
+        if (tdv == undefined || tdv == null) {
+          tdv = bData[cname];
+        }
+      }
+      if (tdv == undefined || tdv == null || tdv == '') {
+        tdv = '-';
+      }
+
+      return tdv;
+    },
+    makeTooltip(bData, colData, tdv) {
+      if (colData.tooltip == true && tdv != '' && tdv != '-') {
+        let inHtml = this.customReplaceStr(tdv);
+        let tArea = '<div class="tooltip_area';
+
+        if (colData.tooltipAreaClass != null && colData.tooltipAreaClass != '') tArea += ' ' + colData.tooltipAreaClass;
+        tArea += '">';
+
+        tArea += '<div @mouseover="hoverTooltip" class="text_info ellipsis';
+
+        if (colData.tooltipclass != null && colData.tooltipclass != '') tArea += ' ' + colData.tooltipclass;
+        tArea += '" style="width:' + bData['cgridwidth'];
+        tArea += '">';
+        tArea += inHtml;
+        tArea += '</div>';
+        tArea += '<div class="box_text_tooltip text_absolute">';
+        if (colData.tooltipTextCol != undefined && colData.tooltipTextCol != null && colData.tooltipTextCol != '') {
+          if (
+            bData[colData.tooltipTextCol] != undefined &&
+            bData[colData.tooltipTextCol] != null &&
+            bData[colData.tooltipTextCol] != ''
+          ) {
+            tArea += '<p>' + bData[colData.tooltipTextCol] + '</p>';
+          } else {
+            tArea += '<p>' + inHtml + '</p>';
+          }
+        } else {
+          tArea += '<p>' + inHtml + '</p>';
+        }
+        tArea += '</div>';
+        tArea += '</div>';
+
+        return tArea;
+      } else {
+        return this.customReplaceStr(tdv);
+      }
+    },
+    customReplaceStr(str) {
+      if (str != undefined && str != null) {
+        str = new String(str);
+        str = str.replace(/{{/g, '{ { ');
+        str = str.replace(/}}/g, ' } }');
+      } else {
+        str = '';
+      }
+      return str;
+    },
+    makePagingView() {
+      let pData = '<div class="paging">';
+
+      let totalPage = Math.ceil(this.totalCount / this.curPerPage);
+      if (totalPage < 1) {
+        totalPage = 1;
+      }
+      let pageGroup = Math.ceil(this.currentIndex / this.pageCount);
+
+      let last = pageGroup * this.pageCount;
+      if (last > totalPage) {
+        last = totalPage;
+      }
+
+      let first = last - (this.pageCount - 1);
+      if (first < 1) {
+        first = 1;
+      }
+      let prev = first - 1;
+      if (prev < 1) {
+        prev = 1;
+      }
+      let next = last + 1;
+      if (next > totalPage) {
+        next = totalPage;
+      }
+
+      pData += '<a href="javascript:void(0);" @click="movePage(1)" class="btn_arrow first">처음으로</a>';
+      pData += '<a href="javascript:void(0);" @click="movePage(' + prev + ')" class="btn_arrow prev">이전으로</a>';
+
+      for (var i = first; i <= last; i++) {
+        let actCls = '';
+        if (i == this.currentIndex) {
+          actCls = "class='active'";
+        }
+        pData += '<a href="javascript:void(0);" @click="movePage(' + i + ')" ' + actCls + '>' + i + '</a>';
+      }
+
+      pData += '<a href="javascript:void(0);" @click="movePage(' + next + ')" class="btn_arrow next">다음으로</a>';
+      pData +=
+        '<a href="javascript:void(0);" @click="movePage(' + totalPage + ')" class="btn_arrow last">마지막으로</a>';
+
+      pData += '</div>';
+      return pData;
+    },
+    movePage(idx, refresh) {
+      if (refresh == undefined || refresh == null) {
+        refresh = false;
+      }
+      if (idx != this.currentIndex || refresh == true) {
+        this.currentIndex = idx;
+        this.readData();
+      }
+    },
+
+    checkedElementDatas() {
+      let checkEls = this.checkEls();
+      let checkDatas = [];
+      for (var i = 0; i < checkEls.length; i++) {
+        let c = checkEls[i];
+        if (c.checked === true) {
+          checkDatas.push(this.bodyList[i]);
+        }
+      }
+
+      return checkDatas;
+    },
+    checkEls() {
+      let checkEls = this.$refs.customTable.querySelectorAll("input[name='checkbox']");
+      return checkEls;
+    },
+    check() {
+      let checkEls = this.checkEls();
+      let cnt = 0;
+      for (var i = 0; i < checkEls.length; i++) {
+        let c = checkEls[i];
+        if (c.checked === true) {
+          cnt++;
+        }
+      }
+
+      let chkAll = this.$refs.customTable.querySelectorAll("input[name='checkboxAll']");
+      let allCheck = false;
+      if (this.bodyList.length == cnt) {
+        allCheck = true;
+      }
+
+      for (var i = 0; i < chkAll.length; i++) {
+        let c = chkAll[i];
+        c.checked = allCheck;
+      }
+    },
+    checkAll() {
+      let checkEls = this.checkEls();
+      for (var i = 0; i < checkEls.length; i++) {
+        let c = checkEls[i];
+        c.checked = event.target.checked;
+      }
+    },
+    sortData(orderKey) {
+      if (typeof orderKey != undefined && orderKey != null && orderKey != '') {
+        this.currentIndex = 1;
+        this.callOrderKey = orderKey;
+
+        if (this.callOrderKey != null && this.callOrderKey != '') {
+          if (this.prevCallOrderKey != this.callOrderKey) {
+            this.callOrderDesc = true;
+          } else {
+            this.callOrderDesc = !this.callOrderDesc;
+          }
+
+          this.prevCallOrderKey = this.callOrderKey;
+          let sort = this.callOrderKey;
+          if (this.callOrderDesc == false) {
+            sort += ' ASC';
+          } else {
+            sort += ' DESC';
+          }
+
+          this.getParams['sort'] = sort;
+        } else {
+          delete this.getParams['sort'];
+        }
+
+        this.readData();
+      }
+    },
+    getPagination() {
+      let rslt = {
+        _currentPage: this.currentIndex,
+        _options: {
+          itemsPerPage: this.curPerPage,
+          sort: this.getParams['sort']
+        }
+      };
+
+      return rslt;
+    },
+    hoverTooltip(event) {
+      var myChild = event.target.querySelector('.box_text_tooltip');
+      var rect = event.target.getBoundingClientRect();
+      if (myChild != null) {
+        myChild.style.top = rect.y + 20 + 'px';
+      }
+    }
+  }
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Datepicker.vue

@@ -0,0 +1,139 @@
+.rtl {
+  direction: rtl;
+}
+.vdp-datepicker {
+  position: relative;
+  text-align: left;
+}
+.vdp-datepicker * {
+  box-sizing: border-box;
+}
+.vdp-datepicker__calendar {
+  position: absolute;
+  z-index: 100;
+  background: #fff;
+  width: 300px;
+  border: 1px solid #ccc;
+}
+.vdp-datepicker__calendar header {
+  display: block;
+  line-height: 40px;
+}
+.vdp-datepicker__calendar header span {
+  display: inline-block;
+  text-align: center;
+  width: 71.42857142857143%;
+  float: left;
+}
+.vdp-datepicker__calendar header .prev,
+.vdp-datepicker__calendar header .next {
+  width: 14.285714285714286%;
+  float: left;
+  text-indent: -10000px;
+  position: relative;
+}
+.vdp-datepicker__calendar header .prev:after,
+.vdp-datepicker__calendar header .next:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  border: 6px solid transparent;
+}
+.vdp-datepicker__calendar header .prev:after {
+  border-right: 10px solid #000;
+  margin-left: -5px;
+}
+.vdp-datepicker__calendar header .prev.disabled:after {
+  border-right: 10px solid #ddd;
+}
+.vdp-datepicker__calendar header .next:after {
+  border-left: 10px solid #000;
+  margin-left: 5px;
+}
+.vdp-datepicker__calendar header .next.disabled:after {
+  border-left: 10px solid #ddd;
+}
+.vdp-datepicker__calendar header .prev:not(.disabled),
+.vdp-datepicker__calendar header .next:not(.disabled),
+.vdp-datepicker__calendar header .up:not(.disabled) {
+  cursor: pointer;
+}
+.vdp-datepicker__calendar header .prev:not(.disabled):hover,
+.vdp-datepicker__calendar header .next:not(.disabled):hover,
+.vdp-datepicker__calendar header .up:not(.disabled):hover {
+  background: #eee;
+}
+.vdp-datepicker__calendar .disabled {
+  color: #ddd;
+  cursor: default;
+}
+.vdp-datepicker__calendar .flex-rtl {
+  display: flex;
+  width: inherit;
+  flex-wrap: wrap;
+}
+.vdp-datepicker__calendar .cell {
+  display: inline-block;
+  padding: 0 5px;
+  width: 14.285714285714286%;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid transparent;
+}
+.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day,
+.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month,
+.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year {
+  cursor: pointer;
+}
+.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,
+.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,
+.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {
+  border: 1px solid #4bd;
+}
+.vdp-datepicker__calendar .cell.selected {
+  background: #4bd;
+}
+.vdp-datepicker__calendar .cell.selected:hover {
+  background: #4bd;
+}
+.vdp-datepicker__calendar .cell.selected.highlighted {
+  background: #4bd;
+}
+.vdp-datepicker__calendar .cell.highlighted {
+  background: #cae5ed;
+}
+.vdp-datepicker__calendar .cell.highlighted.disabled {
+  color: #a3a3a3;
+}
+.vdp-datepicker__calendar .cell.grey {
+  color: #888;
+}
+.vdp-datepicker__calendar .cell.grey:hover {
+  background: inherit;
+}
+.vdp-datepicker__calendar .cell.day-header {
+  font-size: 75%;
+  white-space: nowrap;
+  cursor: inherit;
+}
+.vdp-datepicker__calendar .cell.day-header:hover {
+  background: inherit;
+}
+.vdp-datepicker__calendar .month,
+.vdp-datepicker__calendar .year {
+  width: 33.333%;
+}
+.vdp-datepicker__clear-button,
+.vdp-datepicker__calendar-button {
+  cursor: pointer;
+  font-style: normal;
+}
+.vdp-datepicker__clear-button.disabled,
+.vdp-datepicker__calendar-button.disabled {
+  color: #999;
+  cursor: default;
+}

frontend/src/components/HubWebFooter.vue

@@ -0,0 +1,25 @@
+<template>
+    <footer class="footer-wrap">
+        <div class="footer div-cont">
+            <div class="f-logo"><a href="/"><img src="../assets/images/flogo.png" alt=""></a></div>
+            <div class="f-info">
+                <ul>
+                    <li><p>(주)엘지유플러스</p></li>
+                    <li><p>주소 서울특별시 용산구 한강대로 32</p></li>
+                </ul>
+                <ul>
+                    <li><p>대표이사  황현식</p></li>
+                    <li><p>사업자번호 220-81-39938</p></li>
+                    <li><p>통신판매신고 제2010-서울중구-0968호</p></li>
+                    <li><p>고객센터 1544-5992</p></li>
+                    <li><p>e-Mail <a href="mailto:smshelp@lguplus.co.kr">smshelp@lguplus.co.kr</a></p></li>
+                </ul>
+                <p>Copyright © LG Uplus Corp. All Rights Reserved.</p>
+            </div>
+        </div>
+    </footer>
+</template>
+
+<script>
+
+</script>

frontend/src/components/HubWebHeader.vue

@@ -0,0 +1,87 @@
+<template>    
+  <header>
+    <h1 class="logo"><a href="javascript:void(0)">uplus 메시지허브이지<span>BACKOFFICE</span></a></h1>
+    <div class="user_wrap">
+      <div class="user" @click="userInfoToggle();">
+        <p>슈퍼관리자</p>
+        <a href="javascript:void(0)" class="btn_user">Uplus01</a>
+      </div>
+      <div class="user_info">
+        <a href="superadmin_info.html" class="modify">정보수정</a>
+        <a href="javascript:void(0)" class="logout" @click="logout();">로그아웃</a>
+      </div>
+    </div>
+  </header>        
+</template>
+
+<script>
+//import tokenSvc from '@/common/token-service';
+import { mapGetters } from 'vuex';
+import loginApi from '@/modules/login/service/api';
+
+export default { 
+  name: "hubWebHeader",  
+  data() {
+    return {
+      menuList: null,
+      isLogin: false,
+      isErrPage: false,
+      navActive: false,
+    }
+  },
+  created() {    
+    
+  },  
+  computed: {
+    ...mapGetters({
+      getLogin: 'login/isLogin',
+      getErrorPage: 'login/isErrorPage',
+    }),
+  },
+  watch: {
+    getLogin(data) {
+      if (data != null && data != '' && data == true) {
+        this.isLogin = true;
+        //this.setMenuData();
+      } else {
+        this.isLogin = false;
+        //this.menuList = null;
+      }
+    },
+    getErrorPage(data) {
+      if (data != null && data != '' && data == true) {
+        this.isErrPage = true;
+      } else {
+        this.isErrPage = false;
+      }
+    },
+  },
+  methods: {
+    userInfoToggle(){
+      var click = "clicked";
+      var userBtn = document.querySelector('.user_wrap .user');
+      if(userBtn.classList.contains(click)){
+        userBtn.classList.remove(click);
+      }
+      else{
+        userBtn.classList.add(click);
+      }
+    },
+    logout(){
+      let result = confirm("로그아웃 하시겠습니까?");
+      if (result) {
+        loginApi.logout().then(response => {
+          if(response.data.retCode == '0000'){            
+            
+            //tokenSvc.removeToken();
+
+            this.$router.push({
+              path: "/login"
+            });
+          }
+        });
+      }      
+    }
+  }
+};
+</script>

frontend/src/components/Lnb.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div>role: {{role}}</div><br/>
+    <TreeMenu :nodes="tree.nodes" :depth="0" :label="tree.label"></TreeMenu>
+  </div>
+</template>
+
+<script>
+  import TreeMenu from './TreeMenu';
+  import tokenSvc from '@/common/token-service';
+
+  let tree = {
+    label: 'root',
+    nodes: [
+      {
+        label: 'item1',
+        nodes: [
+          {
+            label: 'item1.1'
+          },
+          {
+            label: 'item1.2',
+            nodes: [
+              {
+                label: 'item1.2.1'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        label: 'item2'
+      }
+    ]
+  };
+  export default {
+    components: {
+      TreeMenu
+    },
+    data() {
+      return {
+        tree
+      };
+    },
+    computed: {
+      role() {
+        return tokenSvc.getToken().principal.authorities[0].authority;
+      }
+    },
+    created() {
+      console.log('created Lnb');
+      console.log('node[0]:', this.tree.nodes[0].label);
+      console.log('role:', tokenSvc.getToken().principal.authorities[0].authority);
+    }
+  };
+</script>

frontend/src/components/LoginPopup.vue

@@ -0,0 +1,307 @@
+<template>
+  
+	
+	
+
+<!-- 버튼 -->
+<div class="wrap bg-wrap">
+
+
+<!-- <div class="popup-btn-wrap">		
+			<button class="trigger" onclick="ModalOpen('modal01');">로그인실패: 확인</button>
+			<button class="trigger" onclick="ModalOpen('modal02');">로그인실패: 5회</button>
+			<button class="trigger" onclick="ModalOpen('modal03');">로그인실패: 상태</button>
+			<button class="trigger" onclick="ModalOpen('modal04');">보안 알림</button>
+			<button class="trigger" onclick="ModalOpen('modal05');">중복 로그인</button>
+			<button class="trigger" onclick="ModalOpen('modal06');">휴대폰번호 확인</button>
+			<button class="trigger" onclick="ModalOpen('modal07');">인증번호: 발송</button>
+			<button class="trigger" onclick="ModalOpen('modal08');">인증번호: 입력</button>
+			<button class="trigger" onclick="ModalOpen('modal09');">인증실패: 인증번호</button>
+			<button class="trigger" onclick="ModalOpen('modal10');">인증실패: 시간초과</button>
+			<button class="trigger" onclick="ModalOpen('modal11');">인증실패: 5회</button>
+			<button class="trigger" onclick="ModalOpen('modal12');">비밀번호 초기화 문자 발송</button>
+			<button class="trigger" onclick="ModalOpen('modal13');">아이디 오류</button>
+			<button class="trigger" onclick="ModalOpen('modal14');">비밀번호 오류</button>
+			<button class="trigger" onclick="ModalOpen('modal15');">비밀번호 패턴 오류</button>
+			<button class="trigger" onclick="ModalOpen('modal16');">비밀번호 정상 변경</button>
+		</div> -->
+
+<!--	s: 팝업	-->
+		<div class="dimmed" @click="ModalClose();"></div>
+		<div class="popup-wrap">
+
+
+			<!-- 로그인실패: 확인 -->
+			<div class="popup modal01">
+				<div class="pop-head">
+					<h3 class="pop-tit">로그인 실패</h3>
+				</div>
+				<div class="pop-cont">
+					<p>아이디,비밀번호를 확인해주세요.</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">확인</button>
+				</div>
+			</div>
+			
+			<!-- 로그인실패: 5회 -->
+			<div class="popup modal02">
+				<div class="pop-head">
+					<h3 class="pop-tit">로그인 실패</h3>
+				</div>
+				<div class="pop-cont">
+					<p>로그인 5회 실패하였습니다.</p>
+					<p>비밀번호 초기화 후 비밀번호를 변경해 주세요.</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">확인</button>
+				</div>
+			</div>
+			
+			<!-- 로그인실패: 상태 -->
+			<div class="popup modal03">
+				<div class="pop-head">
+					<h3 class="pop-tit">로그인 실패</h3>
+				</div>
+				<div class="pop-cont">
+					<p>아이디 상태를 확인해 주세요.</p>
+					<p>(사용중인 상태만 로그인 가능합니다.)</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">확인</button>
+				</div>
+			</div>
+			
+			<!-- 보안 알림 -->
+			<div class="popup modal04">
+				<div class="pop-head">
+					<h3 class="pop-tit">보안 알림</h3>
+				</div>
+				<div class="pop-cont">
+					<p>비밀번호를 변경하지 않은지 90일이</p>
+					<p>지났습니다. 비밀번호를 변경하여</p>
+					<p>이용 부탁드립니다.</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">비밀번호 변경하기</button>
+				</div>
+			</div>
+			
+			<!-- 중복 로그인 -->
+			<div class="popup modal05">
+				<div class="pop-head">
+					<h3 class="pop-tit">중복 로그인</h3>
+				</div>
+				<div class="pop-cont">
+					<p>동일한 아이디로 로그인 되어 있습니다.</p>
+					<p>이전 로그인 세션 종료 후 로그인하시겠습니까?</p>
+					<p>확인 시 이전 로그인한 상태는 로그아웃됩니다.</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">확인</button>
+				</div>
+			</div>
+			
+			<!-- 휴대폰번호 확인 -->
+			<div class="popup modal06">
+				<div class="pop-head">
+					<h3 class="pop-tit">휴대폰번호 확인</h3>
+				</div>
+				<div class="pop-cont">
+					<p>휴대폰번호를 확인해주세요.</p>
+					<p>아이디에 등록된 휴대폰번호로만 인증이 가능합니다.</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">확인</button>
+				</div>
+			</div>
+			
+			<!-- 인증번호: 발송 -->
+			<div class="popup modal07">
+				<div class="pop-head">
+					<h3 class="pop-tit">인증번호 발송</h3>
+				</div>
+				<div class="pop-cont">
+					<p>인증번호를 발송하였습니다.</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">확인</button>
+				</div>
+			</div>
+			
+			<!-- 인증번호: 입력 -->
+			<div class="popup modal08">
+				<div class="pop-head">
+					<h3 class="pop-tit">인증번호 입력</h3>
+				</div>
+				<div class="pop-cont">
+					<p>인증번호를 입력하세요.</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">확인</button>
+				</div>
+			</div>
+			
+			<!-- 인증실패: 인증번호 -->
+			<div class="popup modal09">
+				<div class="pop-head">
+					<h3 class="pop-tit">인증실패</h3>
+				</div>
+				<div class="pop-cont">
+					<p>잘못된 인증번호입니다.</p>
+					<p>5회 실패 시 로그아웃됩니다.</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">확인</button>
+				</div>
+			</div>
+			
+			<!-- 인증실패: 시간초과 -->
+			<div class="popup modal10">
+				<div class="pop-head">
+					<h3 class="pop-tit">인증실패</h3>
+				</div>
+				<div class="pop-cont">
+					<p>인증시간 초과되었습니다.</p>
+					<p>다시 휴대폰번호를 입력해주세요.</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">확인</button>
+				</div>
+			</div>
+			
+			<!-- 인증실패: 5회 -->
+			<div class="popup modal11">
+				<div class="pop-head">
+					<h3 class="pop-tit">인증실패</h3>
+				</div>
+				<div class="pop-cont">
+					<p>인증번호 5회 실패하였습니다.</p>
+					<p>로그아웃되어 다시 로그인해주세요.</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">확인</button>
+				</div>
+			</div>
+			
+			<!-- 비밀번호 초기화 발송 -->
+			<div class="popup modal12">
+				<div class="pop-head">
+					<h3 class="pop-tit">비밀번호 초기화</h3>
+				</div>
+				<div class="pop-cont">
+					<p>해당 아이디에 저장되어 있는 핸드폰번호로</p>
+					<p>비밀번호 초기화 문자가 발송되었습니다.</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">확인</button>
+				</div>
+			</div>
+			
+			<!-- 아이디 오류 -->
+			<div class="popup modal13">
+				<div class="pop-head">
+					<h3 class="pop-tit">아이디 오류</h3>
+				</div>
+				<div class="pop-cont">
+					<p>등록되지 않은 아이디입니다.</p>
+					<p>아이디를 다시 확인하세요</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">확인</button>
+				</div>
+			</div>
+			
+			<!-- 비밀번호 오류 -->
+			<div class="popup modal14">
+				<div class="pop-head">
+					<h3 class="pop-tit">비밀번호 오류</h3>
+				</div>
+				<div class="pop-cont">
+					<p>비밀번호를 확인해주세요.</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">확인</button>
+				</div>
+			</div>
+			
+			<!-- 비밀번호 패턴 오류 -->
+			<div class="popup modal15">
+				<div class="pop-head">
+					<h3 class="pop-tit">비밀번호 오류</h3>
+				</div>
+				<div class="pop-cont">
+					<p>비밀번호를 사용할 수 없습니다.</p>
+					<p>비밀번호는 영문/숫자/특수기호를 혼합하여</p>
+					<p>8~16자리로 설정해주세요</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">확인</button>
+				</div>
+			</div>
+			
+			<!-- 비밀번호 정상 변경 -->
+			<div class="popup modal16">
+				<div class="pop-head">
+					<h3 class="pop-tit">비밀번호 오류</h3>
+				</div>
+				<div class="pop-cont">
+					<p>비밀번호가 정상적으로 변경되었습니다.</p>
+					<p>변경된 비밀번호로 다시 로그인 해주세요</p>
+				</div>
+				<div class="pop-btn1">
+					<button class="btn-pcolor" @click="ModalClose();">확인</button>
+				</div>
+			</div>
+
+			
+		</div>
+<!--	e: 팝업	-->
+	</div>
+
+
+</template>
+
+<script>
+
+export default {
+	data(){
+		return{
+
+		}
+		},
+		methods: {
+		//모달 켜기
+		ModalOpen(target){
+			console.log("ModalOpen");
+			var dimmed = document.getElementsByClassName('dimmed');
+			var wrap = document.getElementsByClassName('popup-wrap');
+			var obj = document.getElementsByClassName(target);
+			dimmed[0].style.display = 'block';
+			wrap[0].style.display = 'block';
+			obj[0].style.display = 'block';
+		},
+		// 모달 끄기
+		ModalClose(){
+			var dimmed = document.getElementsByClassName('dimmed');
+			var wrap = document.getElementsByClassName('popup-wrap');
+			var obj = wrap[0].childElementCount
+			dimmed[0].style.display = 'none';
+			wrap[0].style.display = 'none';
+			for(var i = 0; i < obj; i++) {
+				var target = document.getElementsByClassName('popup');
+				target[i].style.display = 'none';
+			}
+		},
+	}
+
+}
+</script>
+
+<style>
+
+		.popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
+		.popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
+		.popup-btn-wrap button:hover {background: #000; color: #fff;}
+
+</style>

frontend/src/components/NavBar.vue

@@ -0,0 +1,132 @@
+<template>
+    <nav>
+        <ul v-if="menuList.length > 0" class="main_menu">
+            <!-- 선택한 메뉴 li.is-current -->
+            <li v-for="child in menuList" :key="child.menuNo" :class="child.classNm">
+                <div class="menu_btn" ></div>
+                <a class="menu_target"  @click="clickTest" :data-menu-no="child.menuNo">{{child.menuNm}}</a>
+                <div class="sub_menu_wrap">
+                    <ul class="sub_menu" v-if="child.children.length > 0">
+                        <li v-for="child2 in child.children" :key="child2.menuNo">
+                            <a href="javascript:void(0);" @click="clickMenu(child2.menuUrl)" :data-menu-no="child2.menuNo">{{child2.menuNm}}</a>
+                        </li>                        
+                    </ul>
+                </div>
+            </li>        
+        </ul>
+    </nav>
+</template>
+
+<script>
+//import "../assets/js/script.js";
+import api from '@/service/api.js';
+
+export default {
+  name: 'Nav',
+  props: {
+    
+  },
+  data() {
+    return {
+      isLogin : false,
+      isAuthChk : false,
+      menuList: null,
+      tempList: null
+    }
+  },
+  created() {  
+      // 메뉴 가져오기    
+      this.setMenuData();
+      
+  },
+  mounted() {},
+  computed: {
+     
+  },
+  watch: {
+       
+  },
+  methods: {
+    setMenuData() {
+      api.menus().then(response => {
+        const rootMenu = response.data.data;
+        console.log(rootMenu);        
+        if (rootMenu != null && rootMenu.children != null && rootMenu.children.length > 0) {
+            this.tempList = rootMenu.children;
+            for(var i=0; i<this.tempList.length; i++){
+                var menuNo = this.tempList[i].menuNo;
+                var classNm = '';
+                switch(menuNo){
+                    case 1001 :  classNm = 'customer'; break;
+                    case 1002 :  classNm = 'attract'; break;
+                    case 1003 :  classNm = 'service'; break;
+                    case 1004 :  classNm = 'calculate'; break;
+                    case 1005 :  classNm = 'channel'; break;
+                    case 1006 :  classNm = 'key'; break;
+                    case 1007 :  classNm = 'moniter'; break;
+                    case 1008 :  classNm = 'risk'; break;
+                    case 1009 :  classNm = 'stats'; break;
+                    case 1010 :  classNm = 'system'; break;
+                    default : classNm = 'customer';
+                }
+                this.tempList[i].classNm = classNm;
+                //console.log(classNm);
+            }
+
+
+            //this.menuList = rootMenu.children;            
+            this.menuList = this.tempList;
+            //this.$store.commit("login/isLogin", true);      
+            //this.$store.commit("login/isAuthChk", true);
+        } else {
+          this.$store.commit("login/isLogin", false);      
+          this.$store.commit("login/isAuthChk", false);      
+          this.menuList = null;
+          this.$router.push({ path: '/login' });
+        }
+      }).catch(response => {        
+        this.$store.commit("login/isLogin", false);      
+        this.$store.commit("login/isAuthChk", false);      
+        this.menuList = null;
+        this.$router.push({ path: '/login' });
+        console.log(response);
+      });
+    },
+    clickMenu(link){
+       
+       this.$router.push({
+            path: link
+        }); 
+    },
+
+    
+    clickTest(e){
+        const menuList = document.querySelectorAll('.main_menu .is-current');
+
+        
+
+     if(e.target.classList.contains('menu_target') || e.target.classList.contains('menu_btn')){
+                    const menuListCheck = e.target.parentNode;
+                    if(menuListCheck.classList.contains('is-current')){
+                        menuListCheck.classList.remove('is-current');
+                       
+                       for(const menu of menuList){
+                           menu.classList.remove('is-current');
+                         }
+                    } else {
+                        for(const other of menuList){
+                            other.classList.remove('is-current');
+
+                        }	
+                        menuListCheck.classList.add('is-current');
+                    }
+                }
+    },
+   
+
+
+
+
+  }
+}
+</script>