FO 기본 화면 작성

back/root/fo/src/main/resources/application.yml

@@ -7,10 +7,7 @@ spring:
   profiles:
     active: local
     
----
-spring:
-  profiles: local
-  
+
 mybatis:
   type-aliases-package: com.gsitm.ustra.java.management.models
   configuration:

front/.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

front/.eslintrc

@@ -0,0 +1,14 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "extends": ["@nuxtjs/eslint-config-typescript", "prettier", "prettier/vue", "plugin:prettier/recommended", "plugin:nuxt/recommended"],
+  "plugins": ["prettier"],
+  // add your custom rules here
+  "rules": {
+    "nuxt/no-cjs-in-config": "off",
+    "no-unused-vars": "off"
+  }
+}

front/.gitattributes

@@ -0,0 +1,6 @@
+* text eol=lf
+*.png binary
+*.woff binary
+*.woff2 binary
+*.otf binary
+*.zip binary

front/.gitignore

@@ -0,0 +1,112 @@
+
+node_modules
+#yarn.lock
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# temporary directory
+temp
+

front/.npmrc

@@ -0,0 +1 @@
+@ustra:registry=https://repo.gsitm.com/repository/npm-private/

front/.prettierignore

@@ -0,0 +1,2 @@
+*.md
+dist/

front/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "singleQuote": true,
+  "printWidth": 200,
+  "trailingComma": "all",
+  "arrowParens": "avoid"
+}

front/.vscode/nuxt-bo.code-snippets

@@ -0,0 +1,92 @@
+{
+  "ComponentInit": {
+    "scope": "vue",
+    "prefix": "@@@",
+    "body": [
+      "<template>",
+      "  <div></div>",
+      "</template>",
+      "<script lang=\"ts\">",
+      "import { Vue, Component, Prop, Model, Ref, Watch, Inject, InjectReactive, Provide, ProvideReactive, PropSync, Emit } from 'vue-property-decorator'",
+      "import { CustomBoComponent } from '~/components/custom-bo-component'",
+      "",
+      "@Component({",
+      "  middleware:async(ctx)=>{",
+      "    // todo: middleware",
+      "  },",
+      "  validate:async(ctx)=>{",
+      "    // todo: validate",
+      "    return true",
+      "  },",
+      "  asyncData:async(ctx)=>{",
+      "    // todo: asyncData",
+      "  },",
+      "})",
+      "/** ",
+      " * @vuese",
+      " * @group component group",
+      " * component description",
+      " */",
+      "export default class extends CustomBoComponent {",
+      "  // #region variables",
+      "  // #endregion",
+      "",
+      "  // #region hooks",
+      "  // #endregion",
+      "",
+      "  // #region methods",
+      "  // #endregion",
+      "",
+      "  // #region watches",
+      "  // #endregion",
+      "",
+      "}",
+      "</script>",
+      "<style lang=\"scss\"></style>",
+      ""
+    ],
+    "description": "[BO - Vue 컴포넌트 템플릿]"
+  },
+  "TypeScriptVueComponent": {
+    "scope": "typescript",
+    "prefix": "@@@",
+    "body": [
+      "import { Vue, Component, Prop, Model, Ref, Watch, Inject, InjectReactive, Provide, ProvideReactive, PropSync, Emit } from 'vue-property-decorator'",
+      "import { CustomBoComponent } from '~/components/custom-bo-component'",
+      "",
+      "@Component({",
+      "  middleware:async(ctx)=>{",
+      "    // todo: middleware",
+      "  },",
+      "  validate:async(ctx)=>{",
+      "    // todo: validate",
+      "    return true",
+      "  },",
+      "  asyncData:async(ctx)=>{",
+      "    // todo: asyncData",
+      "  },",
+      "})",
+      "/** ",
+      " * @vuese",
+      " * @group component group",
+      " * component description",
+      " */",
+      "export default class extends UstraBoComponent {",
+      "  // #region variables",
+      "  // #endregion",
+      "",
+      "  // #region hooks",
+      "  // #endregion",
+      "",
+      "  // #region methods",
+      "  // #endregion",
+      "",
+      "  // #region watches",
+      "  // #endregion",
+      "",
+      "}",
+      ""
+    ],
+    "description": "[BO - TypeScript Vue 컴포넌트]"
+  }
+}

front/.vscode/nuxt.code-snippets

@@ -0,0 +1,125 @@
+{
+  "ComponentInit": {
+    "scope": "vue",
+    "prefix": "@@@",
+    "body": [
+      "<template>",
+      "  <div></div>",
+      "</template>",
+      "<script lang=\"ts\">",
+      "import { Vue, Component, Prop, Model, Ref, Watch, Inject, InjectReactive, Provide, ProvideReactive, PropSync, Emit } from 'vue-property-decorator'",
+      "import { CustomFoComponent } from '@/components/custom-fo-component'",
+      "",
+      "@Component({",
+      "  middleware:async(ctx)=>{",
+      "    // todo: middleware",
+      "  },",
+      "  validate:async(ctx)=>{",
+      "    // todo: validate",
+      "    return true",
+      "  },",
+      "  asyncData:async(ctx)=>{",
+      "    // todo: asyncData",
+      "  },",
+      "})",
+      "/** ",
+      " * @vuese",
+      " * @group component group",
+      " * component description",
+      " */",
+      "export default class extends CustomFoComponent {",
+      "  // #region variables",
+      "  // #endregion",
+      "",
+      "  // #region hooks",
+      "  // #endregion",
+      "",
+      "  // #region methods",
+      "  // #endregion",
+      "",
+      "  // #region watches",
+      "  // #endregion",
+      "",
+      "}",
+      "</script>",
+      "<style lang=\"scss\"></style>",
+      ""
+    ],
+    "description": "[Vue 컴포넌트 템플릿]"
+  },
+  "ComponentLogger": {
+    "scope": "typescript",
+    "prefix": "@@@",
+    "body": ["this.$$logger().debug()"],
+    "description": "[Vue 컴포넌트 로깅]"
+  },
+  "TypeScriptModule": {
+    "scope": "typescript",
+    "prefix": "@@@",
+    "body": ["/**", " Comment for typescript module", " @packageDocumentation", " */"],
+    "description": "[TypeScript Module]"
+  },
+  "TypeScriptVueComponent": {
+    "scope": "typescript",
+    "prefix": "@@@",
+    "body": [
+      "import { Vue, Component, Prop, Model, Ref, Watch, Inject, InjectReactive, Provide, ProvideReactive, PropSync, Emit } from 'vue-property-decorator'",
+      "import { CustomFoComponent } from '@/components/custom-fo-component'",
+      "",
+      "@Component({",
+      "  middleware:async(ctx)=>{",
+      "    // todo: middleware",
+      "  },",
+      "  validate:async(ctx)=>{",
+      "    // todo: validate",
+      "    return true",
+      "  },",
+      "  asyncData:async(ctx)=>{",
+      "    // todo: asyncData",
+      "  },",
+      "})",
+      "/** ",
+      " * @vuese",
+      " * @group component group",
+      " * component description",
+      " */",
+      "export default class extends CustomFoComponent {",
+      "  // #region variables",
+      "  // #endregion",
+      "",
+      "  // #region hooks",
+      "  // #endregion",
+      "",
+      "  // #region methods",
+      "  // #endregion",
+      "",
+      "  // #region watches",
+      "  // #endregion",
+      "",
+      "}",
+      ""
+    ],
+    "description": "[TypeScript Vue 컴포넌트]"
+  },
+  "TypeScriptService": {
+    "scope": "typescript",
+    "description": "[TypeScript 서비스 모듈]",
+    "prefix": "@@@",
+    "body": [
+      "import { UtraService } from '@ustra/nuxt/src/services/ustra-service'",
+      "",
+      "export class TempService extends UtraService {",
+      "",
+      "}",
+      "",
+      "export const tempService = new TempService()",
+      "export default tempService"
+    ]
+  },
+  "TypeScriptModel": {
+    "scope": "typescript",
+    "description": "[TypeScript 모델 모듈]",
+    "prefix": "@@@",
+    "body": ["import { BaseModel } from '@ustra/data/src/models/base-models'", "", "export interface TempModel extends BaseModel {", "", "}"]
+  }
+}

front/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.tabSize": 2
+}

front/.yarnrc

@@ -0,0 +1,2 @@
+yarn-offline-mirror "./npm_packages"
+yarn-offline-mirror-pruning true

front/README.md

@@ -0,0 +1 @@
+# GSC 시스템 프론트엔드

front/bo/client/components/custom-bo-component.ts

@@ -0,0 +1,9 @@
+import { Component } from 'vue-property-decorator'
+import { UstraBoComponent } from '@ustra/nuxt-mng-bo/src/components/ustra-bo-component'
+
+@Component
+export default class CustomBoComponent extends UstraBoComponent {
+  mounted() {}
+}
+
+export { CustomBoComponent }

front/bo/client/pages/admin/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div style="display: flex; align-items: stretch; flex: 1; flex-grow: 1; flex-direction: column"></div>
+</template>
+<script lang="ts">
+import { Component } from 'vue-property-decorator'
+import { UstraBoComponent } from '@ustra/nuxt-mng-bo/src/components/ustra-bo-component'
+
+@Component({})
+/**
+ * @vuese
+ * @group component group
+ * component description
+ */
+export default class extends UstraBoComponent {}
+</script>

front/bo/client/pages/sample/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div style="display: flex; align-items: stretch; flex: 1; flex-grow: 1; flex-direction: column"></div>
+</template>
+<script lang="ts">
+import { Component } from 'vue-property-decorator'
+import { UstraBoComponent } from '@ustra/nuxt-mng-bo/src/components/ustra-bo-component'
+
+@Component({})
+/**
+ * @vuese
+ * @group component group
+ * component description
+ */
+export default class extends UstraBoComponent {}
+</script>

front/bo/client/store/index.ts

@@ -0,0 +1,3 @@
+import { createStore } from '@ustra/nuxt/src/vue/store'
+
+export default () => createStore({})

front/bo/config/bo.dev.yml

@@ -0,0 +1,2 @@
+server:
+  host: 0.0.0.0

front/bo/config/bo.local.yml

@@ -0,0 +1,6 @@
+server:
+  host: 0.0.0.0
+  port: 9911
+  apiServerBaseUrl: http://localhost:9901
+nuxt:
+  module: { useProxy: { '/api': { target: 'http://localhost:9901' } } }

front/bo/config/bo.production.yml

@@ -0,0 +1,2 @@
+server:
+  host: 0.0.0.0

front/bo/config/bo.staging.yml

@@ -0,0 +1,2 @@
+server:
+  host: 0.0.0.0

front/bo/jest.config.js

@@ -0,0 +1,14 @@
+const { defaults } = require('jest-config')
+
+module.exports = {
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+  },
+  testRegex: '\\.test\\.ts$',
+  moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'js'],
+  globals: {
+    'ts-jest': {
+      diagnostics: true,
+    },
+  },
+}

front/bo/nuxt.config.ts

@@ -0,0 +1,67 @@
+import { configProperties, env } from '@ustra/core'
+import NuxtConfigLoader from '@ustra/nuxt/src/config/nuxt-config-loader'
+import NuxtAppProperties from '@ustra/nuxt/src/config/nuxt-app-properties'
+
+export default async () => {
+  const config: NuxtAppProperties = {
+    app: {
+      processPath: __dirname,
+      profile: process.env.CONFIG_ENV,
+      configDir: 'config',
+      deviceType: configProperties.DeviceType.MOBILE,
+      title: 'U.STRA Node Framework Sample - BO',
+      auth: {
+        enabled: true,
+        loginUrl: '/',
+        jwt: {
+          useCookie: false,
+          accessTokenKey: 'acc-token',
+          refreshTokenKey: 'ref-token',
+        },
+      },
+    },
+    logger: {
+      level: configProperties.LogLevel.Debug,
+      file: true,
+      datePattern: 'YYYY-MM-DD-HH',
+    },
+    server: {
+      type: configProperties.ServerType.NONE,
+      middleware: {
+        compress: true,
+        bodyParser: true,
+        multipart: { enabled: true, excludeUrlPatterns: ['/external-if/billkey-register-result*'] },
+      },
+    },
+    nuxt: {
+      module: {
+        useCookie: true,
+        useUstraDx: {},
+        useUstraMngBo: {
+          uiConfig: {
+            appTitle: 'GSC Bo',
+            useMaskingForList: true,
+          },
+          useInitialDataCache: true,
+        },
+        useUstraDxMngBo: {
+          importSystemPage: true,
+        },
+      },
+      head: {
+        titleTemplate: 'U.STRA Node Framework Sample - BO',
+        title: '',
+      },
+      generation: {
+        generateDirPath: '../../../back/root/bo/src/main/resources/static',
+        generateProfiles: [env.Profile.DEV, env.Profile.STAGING, env.Profile.PRODUCTION],
+      },
+    },
+  }
+
+  return await NuxtConfigLoader.nuxtConfig(config, (_prop, _config) => {
+    _config.env.SERVER_PROP_ENC_KEY = 'Z3NjLWNyeXB0by1rZXkxMQ=='
+
+    _config.build.transpile.push('@ustra-sample/cmm')
+  })
+}

front/bo/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@ustra-sample/bo",
+  "version": "1.0.0",
+  "description": "U.STRA Node Framework Sample - BO",
+  "main": "src/index.ts",
+  "types": "types/index.d.ts",
+  "license": "MIT",
+  "private": true,
+  "browserslist": [
+    "last 2 version",
+    "android >= 4.4",
+    "IE >= 11"
+  ],
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development CONFIG_ENV=local nuxt-ts dev --spa",
+    "generate": "rm -rf ./node_modules && cross-env NODE_ENV=production CONFIG_ENV=dev nuxt-ts generate --spa",
+    "test": "jest --detectOpenHandles --forceExit"
+  },
+  "dependencies": {
+    "@ustra/nuxt": "^2.0.13-stable",
+    "@ustra/nuxt-dx-mng-bo": "^2.0.13-stable",
+    "@ustra/nuxt-mng-bo": "^2.0.13-stable",
+    "@ustra-sample/cmm": "1.0.0"
+  }
+}

front/bo/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": false,
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "lib": ["esnext", "esnext.asynciterable", "dom"],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "checkJs": false,
+    "sourceMap": true,
+    "inlineSourceMap": false,
+    "inlineSources": false,
+    "strict": false,
+    "noEmit": false,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */,
+    "strictNullChecks": false /* Enable strict null checks. */,
+    "resolveJsonModule": true,
+    "declarationMap": true,
+    "declaration": true,
+    "downlevelIteration": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./client/*"],
+      "@/*": ["./client/*"],
+      "@ustra-sample/*": ["../node_modules/@ustra-sample/*"]
+    },
+    "types": ["@types/node", "@types/jest", "@nuxt/types", "@ustra/nuxt", "@ustra/nuxt-mng-bo", "@ustra-sample/cmm", "./types"]
+  },
+  "exclude": ["node_modules", ".nuxt", "dist", "src/**/*.test.ts", "**/src/static/**/*", "**/*.js"],
+  "typedocOptions": {
+    "mode": "modules",
+    "out": "docs",
+    "exclude": "**/*+(.test).ts,**/test/**",
+    "excludeExternals": true,
+    "includeVersion": true,
+    "hideGenerator": true
+  }
+}

front/cmm/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@ustra-sample/cmm",
+  "version": "1.0.0",
+  "description": "U.STRA Node Framework Sample - Common",
+  "main": "src/index.ts",
+  "types": "types/index.d.ts",
+  "license": "MIT",
+  "private": true,
+  "browserslist": [
+    "last 2 version",
+    "android >= 4.4",
+    "IE >= 11"
+  ],
+  "scripts": {
+    "test": "jest --detectOpenHandles --forceExit"
+  },
+  "dependencies": {
+    "@ustra/nuxt": "^2.0.13-stable"
+  }
+}

front/cmm/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": false,
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "lib": ["esnext", "esnext.asynciterable", "dom"],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "checkJs": false,
+    "sourceMap": true,
+    "inlineSourceMap": false,
+    "inlineSources": false,
+    "strict": false,
+    "noEmit": false,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */,
+    "strictNullChecks": false /* Enable strict null checks. */,
+    "resolveJsonModule": true,
+    "declarationMap": true,
+    "declaration": true,
+    "downlevelIteration": true,
+    "baseUrl": ".",
+    "paths": {
+      "@ustra-sample/*": ["../node_modules/@ustra-sample/*"]
+    },
+    "types": ["@types/node", "@types/jest", "@nuxt/types", "@ustra/nuxt", "@ustra/buefy", "@ustra-sample/cmm", "./types"]
+  },
+  "exclude": ["node_modules", ".nuxt", "dist", "src/**/*.test.ts", "**/src/static/**/*", "**/*.js"],
+  "typedocOptions": {
+    "mode": "modules",
+    "out": "docs",
+    "exclude": "**/*+(.test).ts,**/test/**",
+    "excludeExternals": true,
+    "includeVersion": true,
+    "hideGenerator": true
+  }
+}

front/fo/client/components/custom-fo-component.ts

@@ -0,0 +1,9 @@
+import { Component } from 'vue-property-decorator'
+import { UstraComponent } from '@ustra/nuxt/src/vue/components/ustra-component'
+
+@Component
+export default class CustomFoComponent extends UstraComponent {
+  mounted() {}
+}
+
+export { CustomFoComponent }

front/fo/client/components/index/index-hero.vue

@@ -0,0 +1,65 @@
+<template>
+  <section class="hero is-info is-halfheight">
+    <div class="hero-body main-hero-body">
+      <div>
+        <p ref="textWrapper" class="title">U.STRA Framework</p>
+        <p class="subtitle">Inhanced Development Environment For Enterprise Applicaiton.</p>
+      </div>
+    </div>
+  </section>
+</template>
+<script lang="ts">
+import { Component, Ref } from 'vue-property-decorator'
+import { CustomFoComponent } from '@/components/custom-fo-component'
+import anime from 'animejs'
+
+@Component
+export default class extends CustomFoComponent {
+  // #region variables
+  @Ref() textWrapper: HTMLElement
+  // #endregion
+  // #region hooks
+  mounted() {
+    this.textWrapper.innerHTML = this.textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>")
+
+    anime
+      .timeline({ loop: true })
+      .add({
+        targets: '.main-hero-body .title .letter',
+        scale: [4, 1],
+        opacity: [0, 1],
+        translateZ: 0,
+        easing: 'easeOutExpo',
+        duration: 950,
+        delay: (_el, i) => 70 * i,
+      })
+      .add({
+        targets: '.main-hero-body .title',
+        opacity: 0.1,
+        duration: 1500,
+        easing: 'easeOutExpo',
+        delay: 3000,
+      })
+  }
+  // #endregion
+  // #region methods
+  // #endregion
+  // #region watches
+  // #endregion
+}
+</script>
+<style lang="scss">
+.main-hero-body {
+  background-image: url('/img/main-bg.jpg');
+
+  & .title {
+    font-weight: 900;
+    font-size: 3.5em;
+
+    & .letter {
+      line-height: 1em;
+      display: inline-block;
+    }
+  }
+}
+</style>

front/fo/client/components/layout/layout-footer.vue

@@ -0,0 +1,23 @@
+<template>
+  <footer class="footer pt-5 pb-5">
+    <div class="content has-text-centered">
+      <p><strong>U.STRA Framework</strong> by <a href="https://gsitm.com">GSITM Coporation</a>. The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.</p>
+    </div>
+  </footer>
+</template>
+<script lang="ts">
+import { Component } from 'vue-property-decorator'
+import { CustomFoComponent } from '@/components/custom-fo-component'
+
+@Component
+export default class extends CustomFoComponent {
+  // #region variables
+  // #endregion
+  // #region hooks
+  // #endregion
+  // #region methods
+  // #endregion
+  // #region watches
+  // #endregion
+}
+</script>

front/fo/client/components/layout/layout-navbar.vue

@@ -0,0 +1,66 @@
+<template>
+  <b-navbar :fixed-top="true" :centered="true" class="docs-navbar is-spaced has-shadow">
+    <template #brand>
+      <b-navbar-item tag="router-link" :to="{ path: '/' }">
+        <img src="/img/logo.png" alt="Logo" />
+      </b-navbar-item>
+    </template>
+
+    <template #start>
+      <b-navbar-item :active="isActiveHome" type="div" @click="goHome">Home</b-navbar-item>
+      <b-navbar-item :active="isActiveIntroduce" @click="$router.push('/introduce')">Introduce</b-navbar-item>
+    </template>
+
+    <template #end>
+      <b-navbar-item tag="div">
+        <div class="buttons">
+          <!-- <a class="button is-primary">
+            <strong>Sign up</strong>
+          </a>
+          <a class="button is-light" @click="signIn"> Sign in </a> -->
+        </div>
+      </b-navbar-item>
+    </template>
+  </b-navbar>
+</template>
+<script lang="ts">
+import { Component } from 'vue-property-decorator'
+import { CustomFoComponent } from '@/components/custom-fo-component'
+import startsWith from 'lodash/startsWith'
+
+@Component
+export default class extends CustomFoComponent {
+  // #region variables
+  get isActiveHome() {
+    return this.$route.path === '/'
+  }
+
+  get isActiveIntroduce() {
+    return startsWith(this.$route.path, '/introduce')
+  }
+
+  // #endregion
+  // #region hooks
+  // #endregion
+
+  // #region methods
+  signIn() {
+    alert('준비 중입니다.')
+  }
+
+  goHome() {
+    this.$router.push('/')
+  }
+  // #endregion
+  // #region watches
+  // #endregion
+}
+</script>
+<style lang="scss">
+a.navbar-item.is-active,
+.navbar-link.is-active {
+  background-color: #fafafa;
+  color: #7957d5;
+  font-weight: 700;
+}
+</style>

front/fo/client/layouts/default.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="container">
+    <layout-navbar />
+    <nuxt />
+    <layout-footer />
+
+    <u-b-dialog title="U.STRA Framework" />
+    <u-b-loading />
+  </div>
+</template>
+<script lang="ts">
+import { Component } from 'vue-property-decorator'
+import UBDialog from '@ustra/nuxt-buefy/src/components/u-b-dialog.vue'
+import UBLoading from '@ustra/nuxt-buefy/src/components/u-b-loading.vue'
+import LayoutNavbar from '@/components/layout/layout-navbar.vue'
+import LayoutFooter from '@/components/layout/layout-footer.vue'
+import { CustomFoComponent } from '@/components/custom-fo-component'
+
+@Component({
+  components: { UBDialog, LayoutNavbar, LayoutFooter, UBLoading },
+})
+export default class extends CustomFoComponent {
+  // #region variables
+  // #endregion
+  // #region hooks
+  // #endregion
+  // #region methods
+  // #endregion
+  // #region watches
+  // #endregion
+}
+</script>
+<style lang="scss"></style>

front/fo/client/pages/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <index-hero />
+  </div>
+</template>
+<script lang="ts">
+import { Component } from 'vue-property-decorator'
+import { CustomFoComponent } from '@/components/custom-fo-component'
+import IndexHero from '@/components/index/index-hero.vue'
+
+@Component({
+  components: { IndexHero },
+})
+export default class extends CustomFoComponent {
+  // #region variables
+  // #endregion
+  // #region hooks
+  // #endregion
+  // #region methods
+  // #endregion
+  // #region watches
+  // #endregion
+}
+</script>
+<style lang="scss"></style>

front/fo/client/store/index.ts

@@ -0,0 +1,3 @@
+import { createStore } from '@ustra/nuxt/src/vue/store'
+
+export default () => createStore({})

front/fo/config/bo.dev.yml

@@ -0,0 +1,2 @@
+server:
+  host: 0.0.0.0

front/fo/config/bo.local.yml

@@ -0,0 +1,6 @@
+server:
+  host: 0.0.0.0
+  port: 9912
+  apiServerBaseUrl: http://localhost:9902
+nuxt:
+  module: { useProxy: { '/api': { target: 'http://localhost:9902' } } }

front/fo/config/bo.production.yml

@@ -0,0 +1,2 @@
+server:
+  host: 0.0.0.0

front/fo/config/bo.staging.yml

@@ -0,0 +1,2 @@
+server:
+  host: 0.0.0.0

front/fo/jest.config.js

@@ -0,0 +1,14 @@
+const { defaults } = require('jest-config')
+
+module.exports = {
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+  },
+  testRegex: '\\.test\\.ts$',
+  moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'js'],
+  globals: {
+    'ts-jest': {
+      diagnostics: true,
+    },
+  },
+}

front/fo/nuxt.config.ts

@@ -0,0 +1,60 @@
+import { configProperties, env } from '@ustra/core'
+import NuxtConfigLoader from '@ustra/nuxt/src/config/nuxt-config-loader'
+import NuxtAppProperties from '@ustra/nuxt/src/config/nuxt-app-properties'
+
+export default async () => {
+  const config: NuxtAppProperties = {
+    app: {
+      processPath: __dirname,
+      profile: process.env.CONFIG_ENV,
+      configDir: 'config',
+      deviceType: configProperties.DeviceType.MOBILE,
+      title: 'U.STRA Node Framework Sample - FO',
+      auth: {
+        enabled: true,
+        loginUrl: '/',
+        jwt: {
+          useCookie: false,
+          accessTokenKey: 'acc-token',
+          refreshTokenKey: 'ref-token',
+        },
+      },
+    },
+    logger: {
+      level: configProperties.LogLevel.Debug,
+      file: true,
+      datePattern: 'YYYY-MM-DD-HH',
+    },
+    server: {
+      type: configProperties.ServerType.NONE,
+      middleware: {
+        compress: true,
+        bodyParser: true,
+        multipart: { enabled: true, excludeUrlPatterns: ['/external-if/billkey-register-result*'] },
+      },
+    },
+    nuxt: {
+      module: {
+        useCookie: true,
+        useUstraBuefy: {
+          css: true,
+          materialDesignIcons: true,
+        },
+      },
+      head: {
+        titleTemplate: 'U.STRA Node Framework Sample - FO',
+        title: '',
+      },
+      generation: {
+        generateDirPath: '../../../back/root/bo/src/main/resources/static',
+        generateProfiles: [env.Profile.DEV, env.Profile.STAGING, env.Profile.PRODUCTION],
+      },
+    },
+  }
+
+  return await NuxtConfigLoader.nuxtConfig(config, (_prop, _config) => {
+    _config.env.SERVER_PROP_ENC_KEY = 'Z3NjLWNyeXB0by1rZXkxMQ=='
+
+    _config.build.transpile.push('@ustra-sample/cmm')
+  })
+}

front/fo/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@ustra-sample/fo",
+  "version": "1.0.0",
+  "description": "U.STRA Node Framework Sample - FO",
+  "main": "src/index.ts",
+  "types": "types/index.d.ts",
+  "license": "MIT",
+  "private": true,
+  "browserslist": [
+    "last 2 version",
+    "android >= 4.4",
+    "IE >= 11"
+  ],
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development CONFIG_ENV=local nuxt-ts dev --spa",
+    "generate": "rm -rf ./node_modules && cross-env NODE_ENV=production CONFIG_ENV=dev nuxt-ts generate --spa",
+    "test": "jest --detectOpenHandles --forceExit"
+  },
+  "dependencies": {
+    "@ustra-sample/cmm": "1.0.0",
+    "@ustra/nuxt": "^2.0.13-stable",
+    "@ustra/nuxt-buefy": "^2.0.13-stable",
+    "animejs": "^3.2.1"
+  }
+}

front/fo/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": false,
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "lib": ["esnext", "esnext.asynciterable", "dom"],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "checkJs": false,
+    "sourceMap": true,
+    "inlineSourceMap": false,
+    "inlineSources": false,
+    "strict": false,
+    "noEmit": false,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */,
+    "strictNullChecks": false /* Enable strict null checks. */,
+    "resolveJsonModule": true,
+    "declarationMap": true,
+    "declaration": true,
+    "downlevelIteration": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./client/*"],
+      "@/*": ["./client/*"],
+      "@ustra-sample/*": ["../node_modules/@ustra-sample/*"]
+    },
+    "types": ["@types/node", "@types/jest", "@nuxt/types", "@ustra/nuxt", "@ustra/buefy", "buefy", "@ustra-sample/cmm", "./types"]
+  },
+  "exclude": ["node_modules", ".nuxt", "dist", "src/**/*.test.ts", "**/src/static/**/*", "**/*.js"],
+  "typedocOptions": {
+    "mode": "modules",
+    "out": "docs",
+    "exclude": "**/*+(.test).ts,**/test/**",
+    "excludeExternals": true,
+    "includeVersion": true,
+    "hideGenerator": true
+  }
+}

front/package.json

@@ -0,0 +1,73 @@
+{
+  "private": true,
+  "workspaces": [
+    "./cmm",
+    "./fo",
+    "./bo"
+  ],
+  "engines": {
+    "npm": "^6.14.4",
+    "node": "^12.16.3",
+    "yarn": "^1.22.4"
+  },
+  "resolutions": {
+    "@babel/preset-env": "7.13.12",
+    "highlight.js": "10.6.0",
+    "markdown-it-highlightjs": "3.1.0",
+    "postcss-loader": "3.0.0",
+    "sass": "1.32.12"
+  },
+  "browserslist": [
+    "last 2 version",
+    "android >= 4.4",
+    "IE >= 11"
+  ],
+  "scripts": {
+    "dev:fo": "cd ./fo && yarn run dev",
+    "generate:fo": "cd ./fo && yarn run generate",
+    "dev:bo": "cd ./bo && yarn run dev",
+    "generate:bo": "cd ./bo && yarn run generate",
+    "create-off-pack": "rm -rf node_modules && rm yarn.lock && rm -rf npm_packages/* && yarn cache clean && yarn install"
+  },
+  "devDependencies": {
+    "@babel/node": "7.13.13",
+    "@babel/preset-env": "7.13.12",
+    "@babel/runtime-corejs3": "7.13.10",
+    "@nuxt/typescript-build": "1.0.3",
+    "@nuxtjs/eslint-config": "3.1.0",
+    "@nuxtjs/eslint-config-typescript": "2.1.0",
+    "@nuxtjs/eslint-module": "2.0.0",
+    "@types/crypto-js": "4.0.1",
+    "@types/jest": "26.0.22",
+    "@types/lodash": "4.14.168",
+    "@types/cli-progress": "3.9.1",
+    "@types/jquery": "3.5.5",
+    "@types/node": "14.14.41",
+    "@types/shelljs": "0.8.8",
+    "@types/sockjs-client": "1.5.0",
+    "@vue/test-utils": "1.1.4",
+    "@vuese/cli": "2.14.3",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "26.6.3",
+    "core-js": "3",
+    "cpx": "1.5.0",
+    "cross-env": "5.2.0",
+    "cross-spawn": "7.0.3",
+    "eslint": "7.24.0",
+    "eslint-config-prettier": "6.15.0",
+    "eslint-plugin-nuxt": "1.0.0",
+    "eslint-plugin-prettier": "3.4.0",
+    "jest": "26.6.3",
+    "markdown-loader": "6.0.0",
+    "prettier": "2.2.1",
+    "node-sass": "6.0.0",
+    "sass": "1.32.12",
+    "sass-loader": "10.1.1",
+    "shelljs": "0.8.4",
+    "ts-jest": "26.2.0",
+    "ts-loader": "6.2.2",
+    "ts-node": "8.10.2",
+    "vue-jest": "3.0.7"
+  }
+}

front/tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "rootDir": ".",
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": false,
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "lib": ["esnext", "esnext.asynciterable", "dom"],
+    "esModuleInterop": true,
+    "allowJs": false,
+    "checkJs": false,
+    "sourceMap": false,
+    "inlineSourceMap": false,
+    "inlineSources": false,
+    "strict": false,
+    "noEmit": false,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */,
+    "strictNullChecks": false /* Enable strict null checks. */,
+    "resolveJsonModule": true,
+    "declarationMap": false,
+    "declaration": false,
+    "downlevelIteration": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./fo/client/*", "./bo/client/*"],
+      "@/*": ["./fo/client/*", "./bo/client/*"],
+      "@ustra-sample/*": ["./node_modules/@ustra-sample/*"]
+    },
+    "types": ["@types/node", "@types/jest", "@nuxt/types", "@ustra/nuxt", "@ustra/nuxt-mng-bo", "@ustra-sample/cmm", "@ustra/buefy", "buefy", "@ustra-sample/bo", "@ustra-sample/fo"]
+  },
+  "exclude": ["node_modules", ".nuxt", "dist", "src/**/*.test.ts", "**/src/static/**/*", "**/*.js"],
+  "typedocOptions": {
+    "mode": "modules",
+    "out": "docs",
+    "exclude": "**/*+(.test).ts,**/test/**",
+    "excludeExternals": true,
+    "includeVersion": true,
+    "hideGenerator": true
+  }
+}

front/ustra-sample.code-workspace

@@ -0,0 +1,45 @@
+{
+  "folders": [
+    {
+      "path": "."
+    }
+  ],
+  "settings": {
+    "editor.tabSize": 2,
+    "http.proxyStrictSSL": false,
+    "prettier.packageManager": "yarn",
+    "editor.formatOnSave": true,
+    "explorer.autoReveal": true,
+    "files.eol": "\n",
+    "liveServer.settings.multiRootWorkspaceName": "packages",
+    "javascript.implicitProjectConfig.experimentalDecorators": true,
+    "eslint.enable": true,
+    "eslint.options": { "configFile": "./.eslintrc" },
+    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
+    "workbench.iconTheme": "material-icon-theme",
+    "editor.suggestSelection": "first",
+    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
+    "path-intellisense.extensionOnImport": true,
+    "files.associations": {
+      "*.json": "jsonc"
+    },
+    "editor.fontFamily": "나눔고딕코딩, Consolas, 'Courier New', monospace",
+    "git.autofetch": true,
+    "editor.formatOnPaste": true,
+    "editor.formatOnType": true,
+    "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[jsonc]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "todo-tree.tree.showScanModeButton": false,
+    "[typescript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[vue]": {
+      "editor.defaultFormatter": "octref.vetur"
+    },
+    "svn.ignoreMissingSvnWarning": true
+  }
+}