브릿지 호출 샘플 추가

back/root/fo/src/main/java/sample/ustraframework/java/fo/config/InterfaceConfiguration.java

@@ -0,0 +1,19 @@
+package sample.ustraframework.java.fo.config;
+
+import java.io.IOException;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+
+import com.gsitm.ustra.java.core.utils.UstraResourceUtils;
+import com.gsitm.ustra.java.data.logging.interfaces.provider.InterfaceInfoProvider;
+import com.gsitm.ustra.java.data.logging.interfaces.provider.XmlResourceInterfaceInfoProvider;
+
+@Configuration
+public class InterfaceConfiguration {
+
+	@Bean
+	public InterfaceInfoProvider interfaceInfoProvider() throws IOException {
+		return new XmlResourceInterfaceInfoProvider(UstraResourceUtils.getResourcesByPattern("classpath*:/data/interfaces-*.xml"));
+	}
+}

back/root/fo/src/main/java/sample/ustraframework/java/fo/sample/interfaces/InterfaceApiController.java

@@ -0,0 +1,26 @@
+package sample.ustraframework.java.fo.sample.interfaces;
+
+import java.util.List;
+import java.util.stream.Collectors;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import com.gsitm.ustra.java.data.logging.interfaces.info.InterfaceInfo;
+import com.gsitm.ustra.java.data.logging.interfaces.store.InterfaceInfoStore;
+
+@RestController
+public class InterfaceApiController {
+
+	@Autowired private InterfaceInfoStore interfaceInfoStore;
+
+	@RequestMapping("/api/interface/all")
+	public List<InterfaceInfo> interfaceStore() {
+		return this.interfaceInfoStore.getAll()
+				.entrySet().stream()
+				.map(e->e.getValue())
+				.collect(Collectors.toList());
+	}
+
+}

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

@@ -34,6 +34,9 @@ ustra:
           driver-class-name: net.sf.log4jdbc.sql.jdbcapi.DriverSpy
           username: ENC(p6rIPoShJklFLPxHKNJYFLooNCd2xnkayNZ2f+GexyA17qEMS77u8g==)
           password: ENC(ohS/a1/Q/lKriwUq3rqJqht76fQ0Bnge)
+    logging:
+      interfaces:
+        enabled: true
   mvc:
     view:
       api-prefix: api

back/root/fo/src/main/resources/data/interfaces-sample.xml

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interfaceInfos>
+	<interfaceInfo>
+		<id>IF-INBOUD-MOBILE01</id>
+		<version>1.0</version>
+		<name>모바일 인바운드 API</name>
+		<type>MOBILE_BRIDGE</type>
+		<logType>ALL</logType>
+		<direction>INBOUND</direction>
+		<systemCode>FO</systemCode>
+		<rmk>샘플로 정의된 모바일 인바운드 API</rmk>
+		<keys>
+			<key id="key1">value1</key>
+			<key id="key2">value2</key>
+		</keys>
+	</interfaceInfo>
+	<interfaceInfo>
+		<id>IF-OUTBOUND-MOBILE01</id>
+		<version>1.0</version>
+		<name>모바일 아웃바운드 API</name>
+		<type>MOBILE_BRIDGE</type>
+		<logType>ALL</logType>
+		<direction>OUTBOUND</direction>
+		<systemCode>FO</systemCode>
+		<rmk>샘플로 정의된 모바일 아웃바운드 API</rmk>
+		<keys>
+			<key id="key1">value1</key>
+			<key id="key2">value2</key>
+		</keys>
+	</interfaceInfo>
+</interfaceInfos>

front/fo/client/assets/global.scss

@@ -1,3 +1,155 @@
+@font-face {
+  font-family: NotoSansKR;
+  font-weight: 100;
+  font-style: normal;
+  src: url('/fonts/NotoSansKR-Thin.woff') format('woff'), url('/fonts/NotoSansKR-Thin.woff2') format('woff2'), url('/fonts/NotoSansKR-Thin.otf') format('opentype');
+}
+
+@font-face {
+  font-family: NotoSansKR;
+  font-weight: 300;
+  font-style: normal;
+  src: url('/fonts/NotoSansKR-Light.woff') format('woff'), url('/fonts/NotoSansKR-Light.woff2') format('woff2'), url('/fonts/NotoSansKR-Light.otf') format('opentype');
+}
+
+@font-face {
+  font-family: NotoSansKR;
+  font-weight: 400;
+  font-style: normal;
+  src: url('/fonts/NotoSansKR-Regular.woff') format('woff'), url('/fonts/NotoSansKR-Regular.woff2') format('woff2'), url('/fonts/NotoSansKR-Regular.otf') format('opentype');
+}
+
+@font-face {
+  font-family: NotoSansKR;
+  font-weight: 500;
+  font-style: normal;
+  src: url('/fonts/NotoSansKR-Medium.woff') format('woff'), url('/fonts/NotoSansKR-Medium.woff2') format('woff2'), url('/fonts/NotoSansKR-Medium.otf') format('opentype');
+}
+
+@font-face {
+  font-family: NotoSansKR;
+  font-weight: 700;
+  font-style: normal;
+  src: url('/fonts/NotoSansKR-Bold.woff') format('woff'), url('/fonts/NotoSansKR-Bold.woff2') format('woff2'), url('/fonts/NotoSansKR-Bold.otf') format('opentype');
+}
+
+@font-face {
+  font-family: NotoSansKR;
+  font-weight: 900;
+  font-style: normal;
+  src: url('/fonts/NotoSansKR-Black.woff') format('woff'), url('/fonts/NotoSansKR-Black.woff2') format('woff2'), url('/fonts/NotoSansKR-Black.otf') format('opentype');
+}
+
 .sub-page-section {
   padding: 50px 0;
 }
+
+html,
+body,
+#__nuxt,
+#__layout {
+  width: 100%;
+  height: 100%;
+}
+
+#__layout {
+  display: flex;
+}
+
+body,
+code,
+input,
+textarea,
+select {
+  font-family: NotoSansKR !important;
+  font-weight: 400;
+}
+
+.container {
+  margin: 0 auto;
+  width: auto;
+  position: relative;
+  flex-grow: 1;
+}
+
+.sidebar.b-sidebar {
+  & .sidebar-content {
+    min-width: 260px;
+    width: revert;
+    padding: 5px;
+  }
+}
+
+.documentation {
+  position: relative;
+
+  &:after &:before {
+    box-sizing: inherit;
+  }
+  .docs-template-horizontal {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+
+    .sidebar {
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+      // width: 16rem;
+      padding: 3rem 1rem;
+      background: #f5f5f5;
+
+      .sidebar-menu {
+        width: 100%;
+      }
+    }
+
+    .docs-main {
+      position: relative;
+      background: #fff;
+      overflow: hidden;
+      width: 100%;
+
+      .docs-main-container {
+        padding: 3rem;
+      }
+    }
+  }
+
+  .sidebar-bg {
+    position: absolute;
+    bottom: 0;
+    right: 50%;
+    left: 0;
+    top: 0;
+    background: #f5f5f5;
+  }
+}
+
+.section-top {
+  margin-top: 60px;
+}
+
+.ref-section {
+  padding: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.25s ease-out;
+}
+.page-enter,
+.page-leave-active {
+  opacity: 0;
+  transform-origin: 50% 50%;
+}
+
+.guide-index-button {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+}

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

@@ -10,11 +10,13 @@
       <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>
       <b-navbar-item :active="isActiveCustomer" @click="$router.push('/customer')">Customer</b-navbar-item>
+      <b-navbar-item :active="isActiveSample" @click="$router.push('/sample')">Sample</b-navbar-item>
     </template>
 
     <template #end>
-      <b-navbar-item v-show="!isAuthenticated" @click="$router.push('/customer')">Login</b-navbar-item>
+      <b-navbar-item v-if="isAuthenticated" type="div">{{ $ustra.auth.getTokenClaim().displayName }}</b-navbar-item>
-      <b-navbar-item v-show="isAuthenticated" @click="logout">Logout</b-navbar-item>
+      <b-navbar-item v-if="!isAuthenticated" @click="$router.push('/customer')">Login</b-navbar-item>
+      <b-navbar-item v-if="isAuthenticated" @click="logout">Logout</b-navbar-item>
     </template>
   </b-navbar>
 </template>
@@ -38,6 +40,10 @@ export default class extends CustomFoComponent {
     return startsWith(this.$route.path, '/customer')
   }
 
+  get isActiveSample() {
+    return startsWith(this.$route.path, '/sample')
+  }
+
   get isAuthenticated() {
     return this.$ustra.auth.isAutenticated()
   }

front/fo/client/pages/customer/index.vue

@@ -9,6 +9,10 @@
         <b-input type="password" v-model="password" password-reveal> </b-input>
       </b-field>
 
+      <article class="message is-primary">
+        <div class="message-body">샘플 로그인 화면입니다. sample/sample 계정을 사용하여 로그인이 가능합니다.</div>
+      </article>
+
       <b-button type="is-primary" @click="login">Login</b-button>
     </div>
   </section>
@@ -37,7 +41,7 @@ export default class extends CustomFoComponent {
       },
     })
 
-    this.$router.push('/')
+    this.$router.push((this.$route.query.rtnUrl as string) || '/')
   }
   // #endregion
   // #region watches

front/fo/client/pages/sample.vue

@@ -0,0 +1,52 @@
+<template>
+  <section class="documentation">
+    <!-- <div class="sidebar-bg"></div> -->
+    <div class="is-fullhd docs-template-horizontal">
+      <b-sidebar :open.sync="visibleSideBar" :can-cancel="true" :overlay="true" :fullheight="true" class="sidebar">
+        <div class="is-custom-mobile sidebar-menu">
+          <b-menu-list>
+            <b-menu-item @click="$router.push('/sample/mobile')">
+              <template #label>모바일 브릿지 호출</template>
+            </b-menu-item>
+          </b-menu-list>
+        </div>
+      </b-sidebar>
+      <b-button icon-left="grid-large" :rounded="true" class="guide-index-button" type="is-danger" @click="showSideBar"></b-button>
+      <nuxt-child :key="$route.fullPath" ref="child" />
+    </div>
+    <!-- </div> -->
+  </section>
+</template>
+<script lang="ts">
+import { Component, PropSync } from 'vue-property-decorator'
+import { CustomFoComponent } from '@/components/custom-fo-component'
+
+@Component({
+  config: {
+    auth: {
+      required: true,
+    },
+  },
+})
+/**
+ * @vuese
+ * @group component group
+ * component description
+ */
+export default class extends CustomFoComponent {
+  // #region variables
+  visibleSideBar: boolean = false
+  // #endregion
+  // #region hooks
+  // #endregion
+
+  // #region methods
+  showSideBar() {
+    this.visibleSideBar = true
+  }
+  // #endregion
+  // #region watches
+  // #endregion
+}
+</script>
+<style lang="scss"></style>

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

@@ -0,0 +1,27 @@
+<template>
+  <section class="mb-5 section-top" style="width: 100%">
+    <b-message title="Sample" type="is-success" has-icon :closable="false"> 코드 샘플 화면입니다. <br />우측 하단의 메뉴 아이콘을 선택하여 조회할 샘플 메뉴를 선택하십시오.</b-message>
+  </section>
+</template>
+<script lang="ts">
+import { Component } from 'vue-property-decorator'
+import { CustomFoComponent } from '@/components/custom-fo-component'
+
+@Component({})
+/**
+ * @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>

front/fo/client/pages/sample/md/mobile01.md

@@ -0,0 +1,11 @@
+```typescript
+callOutbound() {
+  this.$ustra.mobile.bridge.callNative({
+    id: 'IF-OUTBOUND-MOBILE01',
+    callback: result => {
+      console.log('result', result)
+    },
+    timeout: 2000,
+  })
+}
+```

front/fo/client/pages/sample/md/mobile02.md

@@ -0,0 +1,9 @@
+```typescript
+this.$ustra.mobile.bridge.addNativeListener('IF-INBOUD-MOBILE01', data => {
+  console.log('nativate inbound data', data)
+})
+
+// 브라우저 콘솔 창에서 아래와 같이 테스트 수행
+window['IF_INBOUD_MOBILE01']({ data: { param1: 'value1' }})
+```
+

front/fo/client/pages/sample/mobile.vue

@@ -0,0 +1,63 @@
+<template>
+  <section class="mb-5 section-top" style="width: 100%">
+    <b-message title="모바일 브릿지 호출" type="is-success" has-icon :closable="false">
+      모바일 브릿지 연계 기본 가이드는 http://guide.ustraframework.kro.kr/ref-doc/03/1GyLoOpEjmPqsz2PPArR 를 참조합니다.
+    </b-message>
+
+    <b-button @click="callOutbound">아웃바운드 브릿지 호출</b-button> <br />
+    <u-markdown-viewer :html="true">{{ mobile01 }}</u-markdown-viewer>
+
+    <b-message :closable="false"> 인바운드 브릿지는 addNativeListener 메소드를 사용하여 컴포넌트 initializing 시에 리스닝을 수행한다. 브라우저 상에서 테스트는 아래와 같이 수행할 수 있다. </b-message>
+    <u-markdown-viewer :html="true">{{ mobile02 }}</u-markdown-viewer>
+  </section>
+</template>
+<script lang="ts">
+import { Component } from 'vue-property-decorator'
+import { CustomFoComponent } from '@/components/custom-fo-component'
+import UMarkdownViewer from '@ustra/nuxt/src/vue/components/ustra-markdown-viewer'
+
+// @ts-ignore
+import mobile01 from './md/mobile01.md'
+
+// @ts-ignore
+import mobile02 from './md/mobile02.md'
+
+@Component({
+  components: {
+    UMarkdownViewer,
+  },
+})
+/**
+ * @vuese
+ * @group component group
+ * component description
+ */
+export default class extends CustomFoComponent {
+  // #region variables
+  mobile01 = mobile01
+  mobile02 = mobile02
+  // #endregion
+  // #region hooks
+  mounted() {
+    this.$ustra.mobile.bridge.addNativeListener('IF-INBOUD-MOBILE01', data => {
+      console.log('nativate inbound data', data)
+    })
+  }
+  // #endregion
+
+  // #region methods
+  callOutbound() {
+    this.$ustra.mobile.bridge.callNative({
+      id: 'IF-OUTBOUND-MOBILE01',
+      callback: result => {
+        console.log('result', result)
+      },
+      timeout: 2000,
+    })
+  }
+  // #endregion
+  // #region watches
+  // #endregion
+}
+</script>
+<style lang="scss"></style>

front/fo/nuxt.config.ts

@@ -12,7 +12,7 @@ export default async () => {
       title: 'U.STRA Node Framework Sample - FO',
       auth: {
         enabled: true,
-        loginUrl: '/',
+        loginUrl: '/customer',
         jwt: {
           useCookie: false,
           accessTokenKey: 'sample-fo-token',
@@ -40,6 +40,7 @@ export default async () => {
           css: true,
           materialDesignIcons: true,
         },
+        useMarkdown: true,
       },
       css: ['~/assets/global.scss'],
       head: {
@@ -50,6 +51,22 @@ export default async () => {
         generateDirPath: '../../../back/root/fo/src/main/resources/static',
         generateProfiles: [env.Profile.DEV, env.Profile.STAGING, env.Profile.PRODUCTION],
       },
+      interfaces: {
+        initialDataApiUrl: '/api/interface/all',
+      },
+      mobile: {
+        enabled: true,
+        hybrid: {
+          nativeAgent: {
+            android: 'client1',
+            ios: 'client2',
+          },
+          bridge: {
+            enabled: true,
+            useTokenSecurity: false,
+          },
+        },
+      },
     },
   }