diff --git a/angular.json b/angular.json
index 37ed647d..79569837 100644
--- a/angular.json
+++ b/angular.json
@@ -82,7 +82,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
+                  "maximumWarning": "4mb",
                   "maximumError": "5mb"
                 },
                 {
@@ -140,7 +140,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
+                  "maximumWarning": "4mb",
                   "maximumError": "5mb"
                 },
                 {
diff --git a/config/angular.webpack.config.js b/config/angular.webpack.config.js
index c7013ead..1e970c61 100644
--- a/config/angular.webpack.config.js
+++ b/config/angular.webpack.config.js
@@ -4,14 +4,12 @@ module.exports = (config, options) => {
   const PRODUCTION = process.env.NODE_ENV === 'production';
   const BROWSER = process.env.UCAP_ENV_RUNTIME === 'BROWSER';
 
-  console.log('BROWSER', BROWSER, config.target);
-
   if (!BROWSER) {
     config.target = 'electron-renderer';
   } else {
     config.target = 'web';
     config.node = {
-      fs: 'empty'
+      fs: 'empty',
     };
   }
 
@@ -21,7 +19,7 @@ module.exports = (config, options) => {
       __dirname,
       '..',
       'projects/ucap-webmessenger-ui/src/assets/scss'
-    )
+    ),
   };
 
   return config;
diff --git a/config/main.webpack.config.ts b/config/main.webpack.config.ts
index 961a2542..5759bf65 100644
--- a/config/main.webpack.config.ts
+++ b/config/main.webpack.config.ts
@@ -20,18 +20,18 @@ const mainConfig: webpack.Configuration = {
       __dirname,
       '..',
       'electron-projects/ucap-webmessenger-electron/src/index'
-    )
+    ),
   },
   target: 'electron-main',
   mode: enviroments.__DEV__ ? 'development' : 'production',
   devtool: 'source-map',
   optimization: {
-    noEmitOnErrors: true
+    noEmitOnErrors: true,
   },
   externals,
   output: {
     filename: '[name].js',
-    path: path.resolve(__dirname, '..', outputDir)
+    path: path.resolve(__dirname, '..', outputDir),
   },
   module: {
     rules: [
@@ -44,7 +44,7 @@ const mainConfig: webpack.Configuration = {
             'electron-projects/ucap-webmessenger-electron/src'
           ),
           path.resolve(__dirname, '..', 'electron-projects'),
-          path.resolve(__dirname, '..', 'projects')
+          path.resolve(__dirname, '..', 'projects'),
         ],
         use: [
           {
@@ -55,20 +55,20 @@ const mainConfig: webpack.Configuration = {
                 __dirname,
                 '..',
                 'electron-projects/ucap-webmessenger-electron/tsconfig.electron.json'
-              )
-            }
-          }
+              ),
+            },
+          },
         ],
-        exclude: /node_modules/
+        exclude: /node_modules/,
       },
       {
         test: /\.node$/,
         loader: 'awesome-node-loader',
         options: {
-          name: '[name].[ext]'
-        }
-      }
-    ]
+          name: '[name].[ext]',
+        },
+      },
+    ],
   },
   plugins: [
     new CleanWebpackPlugin({ verbose: false }),
@@ -77,16 +77,16 @@ const mainConfig: webpack.Configuration = {
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
     new webpack.DefinePlugin(
       Object.assign({}, enviroments, {
-        __PROCESS_KIND__: JSON.stringify('main')
+        __PROCESS_KIND__: JSON.stringify('main'),
       })
     ),
     new CopyWebpackPlugin([
       {
         from: 'ucap-webmessenger-electron/resources/**/*',
         to: path.resolve(__dirname, '..', 'dist'),
-        context: 'electron-projects'
-      }
-    ])
+        context: 'electron-projects',
+      },
+    ]),
   ],
   resolve: {
     extensions: ['.js', '.ts'],
@@ -101,6 +101,11 @@ const mainConfig: webpack.Configuration = {
         '..',
         'electron-projects/ucap-webmessenger-electron-notification/src/public-api'
       ),
+      '@ucap-webmessenger/core': path.resolve(
+        __dirname,
+        '..',
+        'projects/ucap-webmessenger-core/src/public-api'
+      ),
       '@ucap-webmessenger/native': path.resolve(
         __dirname,
         '..',
@@ -115,14 +120,14 @@ const mainConfig: webpack.Configuration = {
         __dirname,
         '..',
         'electron-projects/ucap-webmessenger-electron/src/public-api'
-      )
+      ),
     },
-    modules: [path.resolve(__dirname, '..', 'node_modules/')]
+    modules: [path.resolve(__dirname, '..', 'node_modules/')],
   },
   node: {
     __dirname: false,
-    __filename: false
-  }
+    __filename: false,
+  },
 };
 
 export default [mainConfig];
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
new file mode 100644
index 00000000..29789cd5
--- /dev/null
+++ b/docker/docker-compose.yml
@@ -0,0 +1,9 @@
+version: '3.1'
+
+services:
+  nginx:
+    image: nginx:1.17.5-alpine
+    volumes:
+      - ../dist/ucap-webmessenger-app:/usr/share/nginx/html:ro
+    ports:
+      - 8099:80
diff --git a/electron-projects/ucap-webmessenger-electron/tsconfig.electron.json b/electron-projects/ucap-webmessenger-electron/tsconfig.electron.json
index 0eec2f0f..d01f9dcd 100644
--- a/electron-projects/ucap-webmessenger-electron/tsconfig.electron.json
+++ b/electron-projects/ucap-webmessenger-electron/tsconfig.electron.json
@@ -19,6 +19,9 @@
       "@ucap-webmessenger/electron-notification": [
         "../ucap-webmessenger-electron-notification/src/public-api"
       ],
+      "@ucap-webmessenger/core": [
+        "../../projects/ucap-webmessenger-core/src/public-api"
+      ],
       "@ucap-webmessenger/native": [
         "../../projects/ucap-webmessenger-native/src/public-api"
       ],
diff --git a/package.json b/package.json
index e1df8b40..e6c3d28d 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "start:renderer": "cross-env UCAP_ENV_RUNTIME=ELECTRON ng serve -c renderer-development",
     "start:browser": "cross-env UCAP_ENV_RUNTIME=BROWSER ng serve -c browser-development -o",
     "build:renderer": "cross-env NODE_ENV=production ng build --base-href ./",
+    "build:browser": "cross-env UCAP_ENV_RUNTIME=BROWSER ng build -c browser-development",
     "build:main:development": "cross-env NODE_ENV=development TS_NODE_PROJECT='./config/tsconfig.webpack.json' parallel-webpack --config=config/main.webpack.config.ts",
     "build:main:production": "cross-env NODE_ENV=production TS_NODE_PROJECT='./config/tsconfig.webpack.json' NODE_OPTIONS='--max_old_space_size=4096' parallel-webpack --config=config/main.webpack.config.ts",
     "test": "ng test",
diff --git a/projects/ucap-webmessenger-api-common/src/lib/config/module-config.ts b/projects/ucap-webmessenger-api-common/src/lib/config/module-config.ts
new file mode 100644
index 00000000..c51a89c0
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/config/module-config.ts
@@ -0,0 +1,7 @@
+import { ModuleConfig as CoreModuleConfig } from '@ucap-webmessenger/core';
+
+import { Urls } from './urls';
+
+export interface ModuleConfig extends CoreModuleConfig<Urls> {
+  acceptableFileExtensions: string[];
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/types/token.ts b/projects/ucap-webmessenger-api-common/src/lib/config/token.ts
similarity index 100%
rename from projects/ucap-webmessenger-api-common/src/lib/types/token.ts
rename to projects/ucap-webmessenger-api-common/src/lib/config/token.ts
diff --git a/projects/ucap-webmessenger-api-common/src/lib/config/urls.ts b/projects/ucap-webmessenger-api-common/src/lib/config/urls.ts
new file mode 100644
index 00000000..2fc7cb2f
--- /dev/null
+++ b/projects/ucap-webmessenger-api-common/src/lib/config/urls.ts
@@ -0,0 +1,12 @@
+export interface Urls {
+  fileProfileSave: string;
+  fileTalkDownload: string;
+  fileTalkSave: string;
+  fileTalkShare: string;
+  massTalkDownload: string;
+  massTalkSave: string;
+  transMassTalkDownload: string;
+  transMassTalkSave: string;
+  translationReq: string;
+  translationSave: string;
+}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts b/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts
index 4ec66383..ba8e48b6 100644
--- a/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/services/common-api.service.ts
@@ -3,82 +3,92 @@ import {
   HttpClient,
   HttpEventType,
   HttpResponse,
-  HttpRequest
+  HttpRequest,
 } from '@angular/common/http';
 
 import { Observable, Subject } from 'rxjs';
 import { map, filter } from 'rxjs/operators';
 
-import { _MODULE_CONFIG } from '../types/token';
-import { ModuleConfig } from '../types/module-config';
 import {
   FileProfileSaveRequest,
   FileProfileSaveResponse,
   encodeFileProfileSave,
-  decodeFileProfileSave
+  decodeFileProfileSave,
 } from '../apis/file-profile-save';
 import {
   FileTalkDownloadRequest,
   encodeFileTalkDownload,
-  encodeFormDataFileTalkDownload
+  encodeFormDataFileTalkDownload,
 } from '../apis/file-talk-download';
 import {
   FileTalkSaveRequest,
   FileTalkSaveResponse,
   encodeFileTalkSave,
-  decodeFileTalkSave
+  decodeFileTalkSave,
 } from '../apis/file-talk-save';
 import {
   FileTalkShareRequest,
   FileTalkShareResponse,
   encodeFileTalkShare,
-  decodeFileTalkShare
+  decodeFileTalkShare,
 } from '../apis/file-talk-share';
 import {
   MassTalkDownloadRequest,
   MassTalkDownloadResponse,
   encodeMassTalkDownload,
-  decodeMassTalkDownload
+  decodeMassTalkDownload,
 } from '../apis/mass-talk-download';
 import {
   MassTalkSaveRequest,
   MassTalkSaveResponse,
   encodeMassTalkSave,
-  decodeMassTalkSave
+  decodeMassTalkSave,
 } from '../apis/mass-talk-save';
 import {
   TransMassTalkDownloadRequest,
   TransMassTalkDownloadResponse,
   encodeTransMassTalkDownload,
-  decodeTransMassTalkDownload
+  decodeTransMassTalkDownload,
 } from '../apis/trans-mass-talk-download';
 import {
   TransMassTalkSaveRequest,
   TransMassTalkSaveResponse,
   encodeTransMassTalkSave,
-  decodeTransMassTalkSave
+  decodeTransMassTalkSave,
 } from '../apis/trans-mass-talk-save';
 import {
   TranslationReqRequest,
   TranslationReqResponse,
   encodeTranslationReq,
-  decodeTranslationReq
+  decodeTranslationReq,
 } from '../apis/translation-req';
 import {
   TranslationSaveRequest,
   TranslationSaveResponse,
   encodeTranslationSave,
-  decodeTranslationSave
+  decodeTranslationSave,
 } from '../apis/translation-save';
 
+import { _MODULE_CONFIG } from '../config/token';
+import { ModuleConfig } from '../config/module-config';
+import { Urls } from '../config/urls';
+import { UrlConfig } from '@ucap-webmessenger/core';
+
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class CommonApiService {
+  readonly urls: Urls;
+
   constructor(
     @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
     private httpClient: HttpClient
-  ) {}
+  ) {
+    this.urls = UrlConfig.getUrls(
+      this.moduleConfig.hostConfig,
+      this.moduleConfig.urls
+    );
+  }
 
   public fileProfileSave(
     req: FileProfileSaveRequest,
@@ -86,12 +96,10 @@ export class CommonApiService {
   ): Observable<FileProfileSaveResponse> {
     return this.httpClient
       .post<any>(
-        !!fileProfileSaveUrl
-          ? fileProfileSaveUrl
-          : this.moduleConfig.urls.fileProfileSave,
+        !!fileProfileSaveUrl ? fileProfileSaveUrl : this.urls.fileProfileSave,
         {},
         {
-          params: encodeFileProfileSave(req)
+          params: encodeFileProfileSave(req),
         }
       )
       .pipe(map(res => decodeFileProfileSave(res)));
@@ -103,12 +111,10 @@ export class CommonApiService {
   ): string {
     const httpReq = new HttpRequest(
       'GET',
-      !!fileTalkDownloadUrl
-        ? fileTalkDownloadUrl
-        : this.moduleConfig.urls.fileTalkDownload,
+      !!fileTalkDownloadUrl ? fileTalkDownloadUrl : this.urls.fileTalkDownload,
       {},
       {
-        params: encodeFileTalkDownload(req)
+        params: encodeFileTalkDownload(req),
       }
     );
 
@@ -121,9 +127,7 @@ export class CommonApiService {
   ): Observable<Blob> {
     const httpReq = new HttpRequest(
       'POST',
-      !!fileTalkDownloadUrl
-        ? fileTalkDownloadUrl
-        : this.moduleConfig.urls.fileTalkDownload,
+      !!fileTalkDownloadUrl ? fileTalkDownloadUrl : this.urls.fileTalkDownload,
       encodeFormDataFileTalkDownload(req),
       { reportProgress: true, responseType: 'blob' }
     );
@@ -159,7 +163,7 @@ export class CommonApiService {
   ): Observable<FileTalkSaveResponse> {
     const httpReq = new HttpRequest(
       'POST',
-      !!fileTalkSaveUrl ? fileTalkSaveUrl : this.moduleConfig.urls.fileTalkSave,
+      !!fileTalkSaveUrl ? fileTalkSaveUrl : this.urls.fileTalkSave,
       encodeFileTalkSave(req),
       { reportProgress: true, responseType: 'text' as 'json' }
     );
@@ -185,7 +189,10 @@ export class CommonApiService {
   public acceptableExtensionForFileTalk(extensions: string[]): boolean {
     for (const extension of extensions) {
       if (
-        -1 === this.moduleConfig.acceptableFileExtensions.indexOf(extension.toLowerCase())
+        -1 ===
+        this.moduleConfig.acceptableFileExtensions.indexOf(
+          extension.toLowerCase()
+        )
       ) {
         return false;
       }
@@ -198,10 +205,10 @@ export class CommonApiService {
   ): Observable<FileTalkShareResponse> {
     return this.httpClient
       .post<any>(
-        this.moduleConfig.urls.fileTalkShare,
+        this.urls.fileTalkShare,
         {},
         {
-          params: encodeFileTalkShare(req)
+          params: encodeFileTalkShare(req),
         }
       )
       .pipe(map(res => decodeFileTalkShare(res)));
@@ -212,11 +219,11 @@ export class CommonApiService {
   ): Observable<MassTalkDownloadResponse> {
     return this.httpClient
       .post<any>(
-        this.moduleConfig.urls.massTalkDownload,
+        this.urls.massTalkDownload,
         {},
         {
           params: encodeMassTalkDownload(req),
-          responseType: 'text' as 'json'
+          responseType: 'text' as 'json',
         }
       )
       .pipe(map(res => decodeMassTalkDownload(res)));
@@ -227,11 +234,11 @@ export class CommonApiService {
   ): Observable<MassTalkSaveResponse> {
     return this.httpClient
       .post<any>(
-        this.moduleConfig.urls.massTalkSave,
+        this.urls.massTalkSave,
         {},
         {
           params: encodeMassTalkSave(req),
-          responseType: 'text' as 'json'
+          responseType: 'text' as 'json',
         }
       )
       .pipe(map(res => decodeMassTalkSave(res)));
@@ -242,10 +249,10 @@ export class CommonApiService {
   ): Observable<TransMassTalkDownloadResponse> {
     return this.httpClient
       .post<any>(
-        this.moduleConfig.urls.transMassTalkDownload,
+        this.urls.transMassTalkDownload,
         {},
         {
-          params: encodeTransMassTalkDownload(req)
+          params: encodeTransMassTalkDownload(req),
         }
       )
       .pipe(map(res => decodeTransMassTalkDownload(res)));
@@ -256,10 +263,10 @@ export class CommonApiService {
   ): Observable<TransMassTalkSaveResponse> {
     return this.httpClient
       .post<any>(
-        this.moduleConfig.urls.transMassTalkSave,
+        this.urls.transMassTalkSave,
         {},
         {
-          params: encodeTransMassTalkSave(req)
+          params: encodeTransMassTalkSave(req),
         }
       )
       .pipe(map(res => decodeTransMassTalkSave(res)));
@@ -270,10 +277,10 @@ export class CommonApiService {
   ): Observable<TranslationReqResponse> {
     return this.httpClient
       .post<any>(
-        this.moduleConfig.urls.translationReq,
+        this.urls.translationReq,
         {},
         {
-          params: encodeTranslationReq(req)
+          params: encodeTranslationReq(req),
         }
       )
       .pipe(map(res => decodeTranslationReq(res)));
@@ -284,10 +291,10 @@ export class CommonApiService {
   ): Observable<TranslationSaveResponse> {
     return this.httpClient
       .post<any>(
-        this.moduleConfig.urls.translationSave,
+        this.urls.translationSave,
         {},
         {
-          params: encodeTranslationSave(req)
+          params: encodeTranslationSave(req),
         }
       )
       .pipe(map(res => decodeTranslationSave(res)));
diff --git a/projects/ucap-webmessenger-api-common/src/lib/types/module-config.ts b/projects/ucap-webmessenger-api-common/src/lib/types/module-config.ts
deleted file mode 100644
index 8799fa4f..00000000
--- a/projects/ucap-webmessenger-api-common/src/lib/types/module-config.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export interface ModuleConfig {
-  urls: {
-    fileProfileSave: string;
-    fileTalkDownload: string;
-    fileTalkSave: string;
-    fileTalkShare: string;
-    massTalkDownload: string;
-    massTalkSave: string;
-    transMassTalkDownload: string;
-    transMassTalkSave: string;
-    translationReq: string;
-    translationSave: string;
-  };
-  acceptableFileExtensions: string[];
-}
diff --git a/projects/ucap-webmessenger-api-common/src/lib/ucap-common-api.module.ts b/projects/ucap-webmessenger-api-common/src/lib/ucap-common-api.module.ts
index 3e3baffb..2292850f 100644
--- a/projects/ucap-webmessenger-api-common/src/lib/ucap-common-api.module.ts
+++ b/projects/ucap-webmessenger-api-common/src/lib/ucap-common-api.module.ts
@@ -1,15 +1,16 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { _MODULE_CONFIG } from './types/token';
 
 import { CommonApiService } from './services/common-api.service';
-import { ModuleConfig } from './types/module-config';
+
+import { _MODULE_CONFIG } from './config/token';
+import { ModuleConfig } from './config/module-config';
 
 const SERVICES = [CommonApiService];
 
 @NgModule({
   declarations: [],
   imports: [],
-  exports: []
+  exports: [],
 })
 export class UCapCommonApiModule {
   public static forRoot(
@@ -17,7 +18,7 @@ export class UCapCommonApiModule {
   ): ModuleWithProviders<UCapCommonApiModule> {
     return {
       ngModule: UCapCommonApiModule,
-      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES]
+      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES],
     };
   }
 }
diff --git a/projects/ucap-webmessenger-api-common/src/public-api.ts b/projects/ucap-webmessenger-api-common/src/public-api.ts
index 0a47d28d..82e0038c 100644
--- a/projects/ucap-webmessenger-api-common/src/public-api.ts
+++ b/projects/ucap-webmessenger-api-common/src/public-api.ts
@@ -2,8 +2,6 @@
  * Public API Surface of ucap-webmessenger-api-common
  */
 
-export * from './lib/types/module-config';
-
 export * from './lib/apis/file-profile-save';
 export * from './lib/apis/file-talk-download';
 export * from './lib/apis/file-talk-save';
@@ -21,3 +19,6 @@ export * from './lib/models/file-upload-item';
 export * from './lib/services/common-api.service';
 
 export * from './lib/ucap-common-api.module';
+
+export * from './lib/config/urls';
+export * from './lib/config/module-config';
diff --git a/projects/ucap-webmessenger-api-external/src/lib/config/module-config.ts b/projects/ucap-webmessenger-api-external/src/lib/config/module-config.ts
new file mode 100644
index 00000000..8e49cd75
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/src/lib/config/module-config.ts
@@ -0,0 +1,5 @@
+import { ModuleConfig as CoreModuleConfig } from '@ucap-webmessenger/core';
+
+import { Urls } from './urls';
+
+export interface ModuleConfig extends CoreModuleConfig<Urls> {}
diff --git a/projects/ucap-webmessenger-api-external/src/lib/types/token.ts b/projects/ucap-webmessenger-api-external/src/lib/config/token.ts
similarity index 100%
rename from projects/ucap-webmessenger-api-external/src/lib/types/token.ts
rename to projects/ucap-webmessenger-api-external/src/lib/config/token.ts
diff --git a/projects/ucap-webmessenger-api-external/src/lib/config/urls.ts b/projects/ucap-webmessenger-api-external/src/lib/config/urls.ts
new file mode 100644
index 00000000..1912b8cb
--- /dev/null
+++ b/projects/ucap-webmessenger-api-external/src/lib/config/urls.ts
@@ -0,0 +1,6 @@
+export interface Urls {
+  checkUserInfoEx: string;
+  companyList: string;
+  tokenUpdate: string;
+  urlInfo: string;
+}
diff --git a/projects/ucap-webmessenger-api-external/src/lib/services/external-api.service.ts b/projects/ucap-webmessenger-api-external/src/lib/services/external-api.service.ts
index a4730adf..5da6b027 100644
--- a/projects/ucap-webmessenger-api-external/src/lib/services/external-api.service.ts
+++ b/projects/ucap-webmessenger-api-external/src/lib/services/external-api.service.ts
@@ -4,51 +4,61 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { _MODULE_CONFIG } from '../types/token';
-import { ModuleConfig } from '../types/module-config';
 import {
   CheckUserInfoExRequest,
   CheckUserInfoExResponse,
   encodeCheckUserInfoEx,
-  decodeCheckUserInfoEx
+  decodeCheckUserInfoEx,
 } from '../apis/check-user-info-ex';
 import {
   CompanyListRequest,
   CompanyListResponse,
   encodeCompanyList,
-  decodeCompanyList
+  decodeCompanyList,
 } from '../apis/company-list';
 import {
   TokenUpdateRequest,
   TokenUpdateResponse,
   encodeTokenUpdate,
-  decodeTokenUpdate
+  decodeTokenUpdate,
 } from '../apis/token-update';
 import {
   UrlInfoResponse,
   UrlInfoRequest,
   encodeUrlInfo,
-  decodeUrlInfo
+  decodeUrlInfo,
 } from '../apis/url-info';
 
+import { _MODULE_CONFIG } from '../config/token';
+import { ModuleConfig } from '../config/module-config';
+import { Urls } from '../config/urls';
+import { UrlConfig } from '@ucap-webmessenger/core';
+
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ExternalApiService {
+  readonly urls: Urls;
+
   constructor(
     @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
     private httpClient: HttpClient
-  ) {}
+  ) {
+    this.urls = UrlConfig.getUrls(
+      this.moduleConfig.hostConfig,
+      this.moduleConfig.urls
+    );
+  }
 
   public checkUserInfoEx(
     req: CheckUserInfoExRequest
   ): Observable<CheckUserInfoExResponse> {
     return this.httpClient
       .post<any>(
-        this.moduleConfig.urls.checkUserInfoEx,
+        this.urls.checkUserInfoEx,
         {},
         {
-          params: encodeCheckUserInfoEx(req)
+          params: encodeCheckUserInfoEx(req),
         }
       )
       .pipe(map(res => decodeCheckUserInfoEx(res)));
@@ -57,10 +67,10 @@ export class ExternalApiService {
   public companyList(req: CompanyListRequest): Observable<CompanyListResponse> {
     return this.httpClient
       .post<any>(
-        this.moduleConfig.urls.companyList,
+        this.urls.companyList,
         {},
         {
-          params: encodeCompanyList(req)
+          params: encodeCompanyList(req),
         }
       )
       .pipe(map(res => decodeCompanyList(res)));
@@ -69,10 +79,10 @@ export class ExternalApiService {
   public tokenUpdate(req: TokenUpdateRequest): Observable<TokenUpdateResponse> {
     return this.httpClient
       .post<any>(
-        this.moduleConfig.urls.tokenUpdate,
+        this.urls.tokenUpdate,
         {},
         {
-          params: encodeTokenUpdate(req)
+          params: encodeTokenUpdate(req),
         }
       )
       .pipe(map(res => decodeTokenUpdate(res)));
@@ -81,10 +91,10 @@ export class ExternalApiService {
   public urlInfo(req: UrlInfoRequest): Observable<UrlInfoResponse> {
     return this.httpClient
       .post<any>(
-        this.moduleConfig.urls.urlInfo,
+        this.urls.urlInfo,
         {},
         {
-          params: encodeUrlInfo(req)
+          params: encodeUrlInfo(req),
         }
       )
       .pipe(map(res => decodeUrlInfo(res)));
diff --git a/projects/ucap-webmessenger-api-external/src/lib/types/module-config.ts b/projects/ucap-webmessenger-api-external/src/lib/types/module-config.ts
deleted file mode 100644
index 91a494d8..00000000
--- a/projects/ucap-webmessenger-api-external/src/lib/types/module-config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface ModuleConfig {
-  urls: {
-    checkUserInfoEx: string;
-    companyList: string;
-    tokenUpdate: string;
-    urlInfo: string;
-  };
-}
diff --git a/projects/ucap-webmessenger-api-external/src/lib/ucap-external-api.module.ts b/projects/ucap-webmessenger-api-external/src/lib/ucap-external-api.module.ts
index c21dada5..c6283c72 100644
--- a/projects/ucap-webmessenger-api-external/src/lib/ucap-external-api.module.ts
+++ b/projects/ucap-webmessenger-api-external/src/lib/ucap-external-api.module.ts
@@ -1,15 +1,16 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { _MODULE_CONFIG } from './types/token';
 
 import { ExternalApiService } from './services/external-api.service';
-import { ModuleConfig } from './types/module-config';
+
+import { _MODULE_CONFIG } from './config/token';
+import { ModuleConfig } from './config/module-config';
 
 const SERVICES = [ExternalApiService];
 
 @NgModule({
   declarations: [],
   imports: [],
-  exports: []
+  exports: [],
 })
 export class UCapExternalApiModule {
   public static forRoot(
@@ -17,7 +18,7 @@ export class UCapExternalApiModule {
   ): ModuleWithProviders<UCapExternalApiModule> {
     return {
       ngModule: UCapExternalApiModule,
-      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES]
+      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES],
     };
   }
 }
diff --git a/projects/ucap-webmessenger-api-external/src/public-api.ts b/projects/ucap-webmessenger-api-external/src/public-api.ts
index b9a5d5ab..375f6493 100644
--- a/projects/ucap-webmessenger-api-external/src/public-api.ts
+++ b/projects/ucap-webmessenger-api-external/src/public-api.ts
@@ -2,8 +2,6 @@
  * Public API Surface of ucap-webmessenger-api-public
  */
 
-export * from './lib/types/module-config';
-
 export * from './lib/models/company';
 
 export * from './lib/apis/check-user-info-ex';
@@ -14,3 +12,6 @@ export * from './lib/apis/url-info';
 export * from './lib/services/external-api.service';
 
 export * from './lib/ucap-external-api.module';
+
+export * from './lib/config/urls';
+export * from './lib/config/module-config';
diff --git a/projects/ucap-webmessenger-api-public/src/lib/apis/update-info.ts b/projects/ucap-webmessenger-api-public/src/lib/apis/update-info.ts
index a4d08e08..4a1cfea9 100644
--- a/projects/ucap-webmessenger-api-public/src/lib/apis/update-info.ts
+++ b/projects/ucap-webmessenger-api-public/src/lib/apis/update-info.ts
@@ -4,7 +4,7 @@ import {
   APIResponse,
   APIEncoder,
   APIDecoder,
-  ParameterUtil
+  ParameterUtil,
 } from '@ucap-webmessenger/api';
 
 export interface UpdateInfoRequest extends APIRequest {
@@ -19,7 +19,7 @@ export interface UpdateInfoResponse extends APIResponse {
 }
 
 const updateInfoEncodeMap = {
-  deviceType: 'p_device_type'
+  deviceType: 'p_device_type',
 };
 
 export const encodeUpdateInfo: APIEncoder<UpdateInfoRequest> = (
@@ -35,6 +35,6 @@ export const decodeUpdateInfo: APIDecoder<UpdateInfoResponse> = (res: any) => {
     appVersion: res.AppVer,
     installUrl: res.InstallURL,
     launcherAppVersion: res.LauncherAppVer,
-    launcherInstallUrl: res.LauncherInstallURL
+    launcherInstallUrl: res.LauncherInstallURL,
   } as UpdateInfoResponse;
 };
diff --git a/projects/ucap-webmessenger-api-public/src/lib/config/module-config.ts b/projects/ucap-webmessenger-api-public/src/lib/config/module-config.ts
new file mode 100644
index 00000000..8e49cd75
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/src/lib/config/module-config.ts
@@ -0,0 +1,5 @@
+import { ModuleConfig as CoreModuleConfig } from '@ucap-webmessenger/core';
+
+import { Urls } from './urls';
+
+export interface ModuleConfig extends CoreModuleConfig<Urls> {}
diff --git a/projects/ucap-webmessenger-api-public/src/lib/types/token.ts b/projects/ucap-webmessenger-api-public/src/lib/config/token.ts
similarity index 100%
rename from projects/ucap-webmessenger-api-public/src/lib/types/token.ts
rename to projects/ucap-webmessenger-api-public/src/lib/config/token.ts
diff --git a/projects/ucap-webmessenger-api-public/src/lib/config/urls.ts b/projects/ucap-webmessenger-api-public/src/lib/config/urls.ts
new file mode 100644
index 00000000..6a9da63f
--- /dev/null
+++ b/projects/ucap-webmessenger-api-public/src/lib/config/urls.ts
@@ -0,0 +1,4 @@
+export interface Urls {
+  versionInfo2: string;
+  updateInfo: string;
+}
diff --git a/projects/ucap-webmessenger-api-public/src/lib/services/public-api.service.ts b/projects/ucap-webmessenger-api-public/src/lib/services/public-api.service.ts
index d3dd1f98..739fdb6b 100644
--- a/projects/ucap-webmessenger-api-public/src/lib/services/public-api.service.ts
+++ b/projects/ucap-webmessenger-api-public/src/lib/services/public-api.service.ts
@@ -4,39 +4,49 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { _MODULE_CONFIG } from '../types/token';
 import {
   VersionInfo2Request,
   VersionInfo2Response,
   encodeVersionInfo2,
-  decodeVersionInfo2
+  decodeVersionInfo2,
 } from '../apis/version-info2';
 import {
   UpdateInfoRequest,
   UpdateInfoResponse,
   encodeUpdateInfo,
-  decodeUpdateInfo
+  decodeUpdateInfo,
 } from '../apis/update-info';
-import { ModuleConfig } from '../types/module-config';
+
+import { _MODULE_CONFIG } from '../config/token';
+import { ModuleConfig } from '../config/module-config';
+import { UrlConfig } from '@ucap-webmessenger/core';
+import { Urls } from '../config/urls';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class PublicApiService {
+  readonly urls: Urls;
+
   constructor(
     @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
     private httpClient: HttpClient
-  ) {}
+  ) {
+    this.urls = UrlConfig.getUrls(
+      this.moduleConfig.hostConfig,
+      this.moduleConfig.urls
+    );
+  }
 
   public versionInfo2(
     req: VersionInfo2Request
   ): Observable<VersionInfo2Response> {
     return this.httpClient
       .post<any>(
-        this.moduleConfig.urls.versionInfo2,
+        this.urls.versionInfo2,
         {},
         {
-          params: encodeVersionInfo2(req)
+          params: encodeVersionInfo2(req),
         }
       )
       .pipe(map((res: any) => decodeVersionInfo2(res)));
@@ -45,10 +55,10 @@ export class PublicApiService {
   public updateInfo(req: UpdateInfoRequest): Observable<UpdateInfoResponse> {
     return this.httpClient
       .post<any>(
-        this.moduleConfig.urls.updateInfo,
+        this.urls.updateInfo,
         {},
         {
-          params: encodeUpdateInfo(req)
+          params: encodeUpdateInfo(req),
         }
       )
       .pipe(map(res => decodeUpdateInfo(res)));
diff --git a/projects/ucap-webmessenger-api-public/src/lib/types/module-config.ts b/projects/ucap-webmessenger-api-public/src/lib/types/module-config.ts
deleted file mode 100644
index 3d90c146..00000000
--- a/projects/ucap-webmessenger-api-public/src/lib/types/module-config.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface ModuleConfig {
-  urls: {
-    versionInfo2: string;
-    updateInfo: string;
-  };
-}
diff --git a/projects/ucap-webmessenger-api-public/src/lib/ucap-public-api.module.ts b/projects/ucap-webmessenger-api-public/src/lib/ucap-public-api.module.ts
index 3424d78f..cc929036 100644
--- a/projects/ucap-webmessenger-api-public/src/lib/ucap-public-api.module.ts
+++ b/projects/ucap-webmessenger-api-public/src/lib/ucap-public-api.module.ts
@@ -1,15 +1,16 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { _MODULE_CONFIG } from './types/token';
 
 import { PublicApiService } from './services/public-api.service';
-import { ModuleConfig } from './types/module-config';
+
+import { _MODULE_CONFIG } from './config/token';
+import { ModuleConfig } from './config/module-config';
 
 const SERVICES = [PublicApiService];
 
 @NgModule({
   declarations: [],
   imports: [],
-  exports: []
+  exports: [],
 })
 export class UCapPublicApiModule {
   public static forRoot(
@@ -17,7 +18,7 @@ export class UCapPublicApiModule {
   ): ModuleWithProviders<UCapPublicApiModule> {
     return {
       ngModule: UCapPublicApiModule,
-      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES]
+      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES],
     };
   }
 }
diff --git a/projects/ucap-webmessenger-api-public/src/public-api.ts b/projects/ucap-webmessenger-api-public/src/public-api.ts
index eb7db5ee..41cd5c4d 100644
--- a/projects/ucap-webmessenger-api-public/src/public-api.ts
+++ b/projects/ucap-webmessenger-api-public/src/public-api.ts
@@ -7,7 +7,9 @@ export * from './lib/apis/version-info2';
 
 export * from './lib/services/public-api.service';
 
-export * from './lib/types/module-config';
 export * from './lib/types/sync-mode.type';
 
 export * from './lib/ucap-public-api.module';
+
+export * from './lib/config/urls';
+export * from './lib/config/module-config';
diff --git a/projects/ucap-webmessenger-api/src/lib/types/status-code.type.ts b/projects/ucap-webmessenger-api/src/lib/types/status-code.type.ts
index ec9005b5..e3db8044 100644
--- a/projects/ucap-webmessenger-api/src/lib/types/status-code.type.ts
+++ b/projects/ucap-webmessenger-api/src/lib/types/status-code.type.ts
@@ -1,4 +1,4 @@
 export enum StatusCode {
   Success = '200',
-  Fail = '500'
+  Fail = '500',
 }
diff --git a/projects/ucap-webmessenger-app/src/app/app-provider.module.ts b/projects/ucap-webmessenger-app/src/app/app-provider.module.ts
index 5dfda4ed..9fea381a 100644
--- a/projects/ucap-webmessenger-app/src/app/app-provider.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/app-provider.module.ts
@@ -1,35 +1,59 @@
-import { NgModule, APP_INITIALIZER } from '@angular/core';
+import { NgModule, APP_INITIALIZER, Type } from '@angular/core';
+
+import { HttpClient } from '@angular/common/http';
+
+import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
 
 import { RESOLVERS } from './resolvers';
 import { SERVICES } from './services';
 import { AppService } from './services/app.service';
-import { HttpClient } from '@angular/common/http';
-import { UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
-import { environment } from '../environments/environment';
 
-export function initializeApp(appService: AppService) {
+import { environment } from '../environments/environment';
+import { BrowserNativeService } from '@ucap-webmessenger/native-browser';
+import { ElectronNativeService } from '@ucap-webmessenger/native-electron';
+
+export function initializeApp(
+  appService: AppService,
+  nativeService: NativeService
+) {
   return (): Promise<any> => {
     return appService.postInit();
   };
 }
 
+// export function nativeServiceFactory(httpClient: HttpClient) {
+//   if ('browser' === environment.runtime) {
+//     return import('@ucap-webmessenger/native-browser').then(
+//       m => new m.BrowserNativeService(httpClient)
+//     );
+//   } else {
+//     return import('@ucap-webmessenger/native-electron').then(
+//       m => new m.ElectronNativeService()
+//     );
+//   }
+// }
+
 @NgModule({
   imports: [],
   exports: [],
   providers: [
-    ...SERVICES,
-    ...RESOLVERS,
     {
       provide: UCAP_NATIVE_SERVICE,
-      useClass: environment.modules.native.serviceClass,
-      deps: [HttpClient]
+      // useFactory: nativeServiceFactory,
+      useClass:
+        'browser' === environment.runtime
+          ? BrowserNativeService
+          : ElectronNativeService,
+      deps: [HttpClient],
     },
+    ...SERVICES,
+    ...RESOLVERS,
     {
       provide: APP_INITIALIZER,
       useFactory: initializeApp,
       deps: [AppService, UCAP_NATIVE_SERVICE],
-      multi: true
-    }
-  ]
+      multi: true,
+    },
+  ],
 })
 export class AppProviderModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/app-routing.module.ts b/projects/ucap-webmessenger-app/src/app/app-routing.module.ts
index e27fc322..99fef86b 100644
--- a/projects/ucap-webmessenger-app/src/app/app-routing.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/app-routing.module.ts
@@ -10,26 +10,26 @@ const routes: Routes = [
       import('./pages/messenger/messenger.page.module').then(
         m => m.AppMessengerPageModule
       ),
-    canActivate: [AppAuthGuard]
+    canActivate: [AppAuthGuard],
   },
   {
     path: 'account',
     loadChildren: () =>
       import('./pages/account/account.page.module').then(
         m => m.AppAccountPageModule
-      )
+      ),
   },
   {
     path: 'template',
     loadChildren: () =>
       import('./pages/template/template.page.module').then(
         m => m.AppTemplatePageModule
-      )
-  }
+      ),
+  },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, { enableTracing: false })],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
 export class AppRoutingModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/app.module.ts b/projects/ucap-webmessenger-app/src/app/app.module.ts
index 2e3bc2e2..2476fe74 100644
--- a/projects/ucap-webmessenger-app/src/app/app.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/app.module.ts
@@ -7,6 +7,13 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
+import { UCapUiModule } from '@ucap-webmessenger/ui';
+import { UCapUiAccountModule } from '@ucap-webmessenger/ui-account';
+
+import { UCapWebStorageModule } from '@ucap-webmessenger/web-storage';
+
+import { UCapUtilModule } from '@ucap-webmessenger/util';
+
 import { UCapCommonApiModule } from '@ucap-webmessenger/api-common';
 import { UCapExternalApiModule } from '@ucap-webmessenger/api-external';
 import { UCapPublicApiModule } from '@ucap-webmessenger/api-public';
@@ -25,17 +32,8 @@ import { UCapServiceProtocolModule } from '@ucap-webmessenger/protocol-service';
 import { UCapStatusProtocolModule } from '@ucap-webmessenger/protocol-status';
 import { UCapSyncProtocolModule } from '@ucap-webmessenger/protocol-sync';
 
-import { UCapUiModule } from '@ucap-webmessenger/ui';
-import { UCapUiAccountModule } from '@ucap-webmessenger/ui-account';
-
-import { UCapWebStorageModule } from '@ucap-webmessenger/web-storage';
-
-import { UCapUtilModule } from '@ucap-webmessenger/util';
-
 import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';
 
-import { environment } from '../environments/environment';
-
 import { AppProviderModule } from './app-provider.module';
 import { AppRoutingModule } from './app-routing.module';
 import { AppStoreModule } from './app-store.module';
@@ -47,6 +45,8 @@ import { GUARDS } from './guards';
 import { AppMessengerLayoutModule } from './layouts/messenger/messenger.layout.module';
 import { AppNativeLayoutModule } from './layouts/native/native.layout.module';
 
+import { environment } from '../environments/environment';
+
 @NgModule({
   imports: [
     BrowserModule,
@@ -58,28 +58,14 @@ import { AppNativeLayoutModule } from './layouts/native/native.layout.module';
 
     PerfectScrollbarModule,
 
-    UCapCommonApiModule.forRoot({
-      urls: environment.urls.apiCommon,
-      acceptableFileExtensions:
-        environment.modules.event.acceptableFileExtensions
-    }),
+    UCapCommonApiModule.forRoot(environment.commonApiModuleConfig),
 
-    UCapPublicApiModule.forRoot({
-      urls: environment.urls.apiPublic
-    }),
-    UCapExternalApiModule.forRoot({
-      urls: environment.urls.apiExternal
-    }),
+    UCapPublicApiModule.forRoot(environment.publicApiModuleConfig),
+    UCapExternalApiModule.forRoot(environment.externalApiModuleConfig),
 
-    UCapPiModule.forRoot({
-      urls: environment.urls.pi
-    }),
+    UCapPiModule.forRoot(environment.piModuleConfig),
 
-    UCapProtocolModule.forRoot({
-      urls: environment.urls.protocol,
-      reconnect: environment.protocol.reconnect,
-      requestId: environment.protocol.requestId
-    }),
+    UCapProtocolModule.forRoot(environment.protocolModuleConfig),
     UCapAuthenticationProtocolModule.forRoot(),
     UCapEventProtocolModule.forRoot(),
     UCapGroupProtocolModule.forRoot(),
@@ -107,12 +93,12 @@ import { AppNativeLayoutModule } from './layouts/native/native.layout.module';
     AppNativeLayoutModule,
 
     LoggerModule.forRoot({
-      level: NgxLoggerLevel.DEBUG
-    })
+      level: NgxLoggerLevel.DEBUG,
+    }),
   ],
   providers: [...GUARDS],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
-  entryComponents: []
+  entryComponents: [],
 })
 export class AppModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
index 71099332..28ec68e9 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
@@ -9,8 +9,17 @@
       <ng-template mat-tab-label>
         <!--<mat-icon>group</mat-icon>-->
         <div class="icon-item">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-            stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="round"
+          >
             <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
             <circle cx="12" cy="7" r="4"></circle>
           </svg>
@@ -18,7 +27,7 @@
       </ng-template>
       <app-layout-chat-left-sidenav-group
         class="left-group-side"
-        (newGroupAndMember)="onClickNewGroupAndMember($event)"
+        (newGroupAndMember)="onClickNewGroupAndMember()"
         (openProfile)="onClickOpenProfile($event)"
       ></app-layout-chat-left-sidenav-group>
     </mat-tab>
@@ -32,16 +41,28 @@
           matBadgePosition="above after"
           >chat</mat-icon
         >-->
-        <div class="icon-item"  [matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
+        <div
+          class="icon-item"
+          [matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
           [matBadge]="badgeChatUnReadCount$ | async"
           matBadgeDescription="확인하지 않은 메시지가 있습니다."
           matBadgeColor="accent"
-          matBadgePosition="above after">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000"
-            stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="bevel">
+          matBadgePosition="above after"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#000000"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="bevel"
+          >
             <path
-              d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
-            </path>
+              d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
+            ></path>
           </svg>
         </div>
       </ng-template>
@@ -51,8 +72,17 @@
       <ng-template mat-tab-label>
         <!--<mat-icon>device_hub</mat-icon>-->
         <div class="icon-item">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000"
-            stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="bevel">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#000000"
+            stroke-width="1.5"
+            stroke-linecap="butt"
+            stroke-linejoin="bevel"
+          >
             <circle class="st0" cx="18.4" cy="18.5" r="3" />
             <circle class="st0" cx="12" cy="5" r="3" />
             <path class="st0" d="M12.4,10.5h4c1.1,0,2,0.9,2,2v3" />
@@ -73,16 +103,27 @@
       <ng-template mat-tab-label>
         <!--<mat-icon>phone</mat-icon>-->
         <div class="icon-item">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone">
-            <path class="st0"
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="feather feather-phone"
+          >
+            <path
+              class="st0"
               d="M2,5.8c0.1-0.6,0.3-1.1,0.7-1.6l1.7-1.7C4.7,2.2,5,2.1,5.3,2.1c0.3,0,0.6,0.1,0.8,0.4c0.3,0.3,0.6,0.6,0.9,0.9
                   		c0.2,0.2,0.3,0.3,0.5,0.5l1.4,1.4c0.3,0.3,0.4,0.6,0.4,0.9S9.2,6.7,8.9,7C8.8,7.2,8.6,7.3,8.5,7.5C8.1,7.9,7.7,8.3,7.2,8.7
                   		c0,0,0,0,0,0C6.8,9.1,6.9,9.5,7,9.7c0,0,0,0,0,0c0.4,0.9,0.9,1.7,1.6,2.6c1.4,1.7,2.9,3,4.5,4.1c0.2,0.1,0.4,0.2,0.6,0.3
                   		c0.2,0.1,0.4,0.2,0.5,0.3c0,0,0,0,0.1,0c0.2,0.1,0.3,0.1,0.4,0.1c0.4,0,0.6-0.2,0.7-0.3l1.7-1.7c0.3-0.3,0.6-0.4,0.8-0.4
                   		c0.4,0,0.6,0.2,0.8,0.4l2.8,2.8c0.6,0.6,0.6,1.2,0,1.7c-0.2,0.2-0.4,0.4-0.6,0.6c-0.3,0.3-0.7,0.6-1,1c-0.5,0.6-1.2,0.8-2,0.8
-                  		c-0.1,0-0.2,0-0.2,0c-1.5-0.1-2.9-0.7-4-1.2c-2.9-1.4-5.4-3.4-7.5-5.9C4.5,13,3.3,11.1,2.6,9C2.1,7.7,1.9,6.7,2,5.8z">
-            </path>
+                  		c-0.1,0-0.2,0-0.2,0c-1.5-0.1-2.9-0.7-4-1.2c-2.9-1.4-5.4-3.4-7.5-5.9C4.5,13,3.3,11.1,2.6,9C2.1,7.7,1.9,6.7,2,5.8z"
+            ></path>
           </svg>
         </div>
       </ng-template>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
index 7edc38e5..19570fd5 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
@@ -17,7 +17,7 @@
     [companyList]="companyList$ | async"
     [companyCode]="companyCode"
     (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
-    (cancel)="onClickCancel($event)"
+    (cancel)="onClickCancel()"
   ></ucap-organization-tenant-search>
 
   <mat-menu
@@ -28,8 +28,17 @@
   >
     <button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
       <!--<mat-icon>group_add</mat-icon>-->
-      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-        stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="butt"
+        stroke-linejoin="round"
+      >
         <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
         <circle cx="8.5" cy="7" r="4"></circle>
         <line x1="20" y1="8" x2="20" y2="14"></line>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
index a4146c36..a6cbf034 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.html
@@ -6,7 +6,7 @@
     [companyList]="companyList$ | async"
     [companyCode]="companyCode"
     (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
-    (cancel)="onClickCancel($event)"
+    (cancel)="onClickCancel()"
   >
   </ucap-organization-tenant-search>
 </div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
index 9a1f51b2..cfce4f1d 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
@@ -66,7 +66,7 @@
         <button
           *ngIf="!!roomInfo"
           mat-icon-button
-          (click)="onClickReceiveAlarm($event)"
+          (click)="onClickReceiveAlarm()"
           aria-label="Toggle Receive Alarm"
         >
           <mat-icon class="amber-fg" *ngIf="roomInfo.receiveAlarm"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
index 0b7338cc..efcd0f4a 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.html
@@ -44,7 +44,7 @@
                   (keyDownEnter)="
                     onKeyDownEnterOrganizationTenantSearch($event)
                   "
-                  (cancel)="onClickCancel($event)"
+                  (cancel)="onClickCancel()"
                 ></ucap-organization-tenant-search>
               </div>
               <div *ngIf="!isShowSearch" class="list-panel">
diff --git a/projects/ucap-webmessenger-app/src/app/services/app.service.ts b/projects/ucap-webmessenger-app/src/app/services/app.service.ts
index 2a2c16d5..d52cdadf 100644
--- a/projects/ucap-webmessenger-app/src/app/services/app.service.ts
+++ b/projects/ucap-webmessenger-app/src/app/services/app.service.ts
@@ -32,7 +32,7 @@ export class AppService {
         this.sessionStorageService.set<EnvironmentsInfo>(
           KEY_ENVIRONMENTS_INFO,
           {
-            deviceType
+            deviceType,
           }
         );
 
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/actions.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/actions.ts
index c87419be..4ad59d61 100644
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/actions.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/actions.ts
@@ -6,7 +6,7 @@ import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { LoginInfo } from '@app/types';
 import {
   UserPasswordSetRequest,
-  UserPasswordSetResponse
+  UserPasswordSetResponse,
 } from '@ucap-webmessenger/protocol-service';
 
 export const webLogin = createAction(
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
index c0253fd8..d7a9eb0b 100644
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/effects.ts
@@ -9,14 +9,14 @@ import { Actions, ofType, createEffect } from '@ngrx/effects';
 import {
   PiService,
   Login2Response,
-  UserTermsActionResponse
+  UserTermsActionResponse,
 } from '@ucap-webmessenger/pi';
 import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
 import {
   DialogService,
   ConfirmDialogComponent,
   ConfirmDialogData,
-  ConfirmDialogResult
+  ConfirmDialogResult,
 } from '@ucap-webmessenger/ui';
 
 import {
@@ -34,13 +34,13 @@ import {
   privacyAgreeSuccess,
   changePassword,
   changePasswordFailure,
-  changePasswordSuccess
+  changePasswordSuccess,
 } from './actions';
 import {
   LoginInfo,
   KEY_LOGIN_INFO,
   EnvironmentsInfo,
-  KEY_ENVIRONMENTS_INFO
+  KEY_ENVIRONMENTS_INFO,
 } from '@app/types';
 import { AppAuthenticationService } from '@app/services/authentication.service';
 import { NGXLogger } from 'ngx-logger';
@@ -48,7 +48,7 @@ import { Store } from '@ngrx/store';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import {
   ServiceProtocolService,
-  UserPasswordSetResponse
+  UserPasswordSetResponse,
 } from '@ucap-webmessenger/protocol-service';
 
 @Injectable()
@@ -62,7 +62,7 @@ export class Effects {
           .login2({
             loginId: params.loginInfo.loginId,
             loginPw: params.loginInfo.loginPw,
-            companyCode: params.loginInfo.companyCode
+            companyCode: params.loginInfo.companyCode,
           })
           .pipe(
             map((res: Login2Response) => {
@@ -72,7 +72,7 @@ export class Effects {
                 return webLoginSuccess({
                   loginInfo: params.loginInfo,
                   rememberMe: params.rememberMe,
-                  login2Response: res
+                  login2Response: res,
                 });
               }
             }),
@@ -138,8 +138,8 @@ export class Effects {
           width: '220px',
           data: {
             title: 'Logout',
-            message: 'Logout ?'
-          }
+            message: 'Logout ?',
+          },
         });
 
         return result.choice;
@@ -168,7 +168,7 @@ export class Effects {
               token: loginRes.tokenString,
               deviceType: environmentsInfo.deviceType,
               localeCode: loginInfo.localeCode,
-              textOnly: 'true'
+              textOnly: 'true',
             });
 
             const result = await this.dialogService.open<
@@ -180,9 +180,9 @@ export class Effects {
               height: '500px',
               disableClose: true,
               data: {
-                title: '개인정보 동의'
+                title: '개인정보 동의',
                 // html: `<iframe id="ifm_privacy" src="${privacyTotalUrl}" style="width: 100%;height: 300px;" />`
-              }
+              },
             });
 
             if (result.choice) {
@@ -204,8 +204,8 @@ export class Effects {
               disableClose: true,
               data: {
                 title: '패스워드 만료',
-                message: ''
-              }
+                message: '',
+              },
             });
 
             if (result.choice) {
@@ -232,7 +232,7 @@ export class Effects {
         return {
           loginInfo,
           environmentsInfo,
-          loginResponse: action.loginRes
+          loginResponse: action.loginRes,
         };
       }),
       exhaustMap(params =>
@@ -240,7 +240,7 @@ export class Effects {
           .userTermsAction({
             userSeq: params.loginResponse.userSeq,
             token: params.loginResponse.tokenString,
-            deviceType: params.environmentsInfo.deviceType
+            deviceType: params.environmentsInfo.deviceType,
           })
           .pipe(
             map((res: UserTermsActionResponse) => {
@@ -264,7 +264,7 @@ export class Effects {
         this.serviceProtocolService.userPasswordSet(req).pipe(
           map((res: UserPasswordSetResponse) => {
             return changePasswordSuccess({
-              res
+              res,
             });
           }),
           catchError(error => of(changePasswordFailure({ error })))
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/reducers.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/reducers.ts
index 31016fc3..77e08802 100644
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/reducers.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/reducers.ts
@@ -7,7 +7,7 @@ export const reducer = createReducer(
   on(loginSuccess, (state, action) => {
     return {
       ...state,
-      loginRes: action.loginRes
+      loginRes: action.loginRes,
     };
   })
 );
diff --git a/projects/ucap-webmessenger-app/src/app/store/account/authentication/state.ts b/projects/ucap-webmessenger-app/src/app/store/account/authentication/state.ts
index 95b51728..2c34d04b 100644
--- a/projects/ucap-webmessenger-app/src/app/store/account/authentication/state.ts
+++ b/projects/ucap-webmessenger-app/src/app/store/account/authentication/state.ts
@@ -7,14 +7,11 @@ export interface State {
 }
 
 export const initialState: State = {
-  loginRes: null
+  loginRes: null,
 };
 
 export function selectors<S>(selector: Selector<any, State>) {
   return {
-    loginRes: createSelector(
-      selector,
-      (state: State) => state.loginRes
-    )
+    loginRes: createSelector(selector, (state: State) => state.loginRes),
   };
 }
diff --git a/projects/ucap-webmessenger-app/src/environments/environment-browser.dev.ts b/projects/ucap-webmessenger-app/src/environments/environment-browser.dev.ts
index b7ea6ae7..9687c1e0 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment-browser.dev.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment-browser.dev.ts
@@ -1,18 +1,7 @@
-import { Environment, build } from './environment.type';
-import { BrowserNativeService } from '@ucap-webmessenger/native-browser';
+import { Environment } from './environment.type';
+import { environment as devEnvironment } from './environment.dev';
 
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment: Environment = build(false);
-environment.modules.native.serviceClass = BrowserNativeService;
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+export const environment: Environment = {
+  ...devEnvironment,
+  runtime: 'browser',
+};
diff --git a/projects/ucap-webmessenger-app/src/environments/environment-browser.prod.ts b/projects/ucap-webmessenger-app/src/environments/environment-browser.prod.ts
index 53c0661c..7b565be5 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment-browser.prod.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment-browser.prod.ts
@@ -1,5 +1,7 @@
-import { Environment, build } from './environment.type';
-import { BrowserNativeService } from '@ucap-webmessenger/native-browser';
+import { Environment } from './environment.type';
+import { environment as prodEnvironment } from './environment.prod';
 
-export const environment: Environment = build(true);
-environment.modules.native.serviceClass = BrowserNativeService;
+export const environment: Environment = {
+  ...prodEnvironment,
+  runtime: 'browser',
+};
diff --git a/projects/ucap-webmessenger-app/src/environments/environment-renderer.dev.ts b/projects/ucap-webmessenger-app/src/environments/environment-renderer.dev.ts
index bd5cf194..712eb3e4 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment-renderer.dev.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment-renderer.dev.ts
@@ -1,18 +1,7 @@
-import { Environment, build } from './environment.type';
-import { ElectronNativeService } from '@ucap-webmessenger/native-electron';
+import { Environment } from './environment.type';
+import { environment as devEnvironment } from './environment.dev';
 
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment: Environment = build(false);
-environment.modules.native.serviceClass = ElectronNativeService;
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+export const environment: Environment = {
+  ...devEnvironment,
+  runtime: 'electron',
+};
diff --git a/projects/ucap-webmessenger-app/src/environments/environment-renderer.prod.ts b/projects/ucap-webmessenger-app/src/environments/environment-renderer.prod.ts
index 4a13b358..84f658b8 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment-renderer.prod.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment-renderer.prod.ts
@@ -1,5 +1,7 @@
-import { Environment, build } from './environment.type';
-import { ElectronNativeService } from '@ucap-webmessenger/native-electron';
+import { Environment } from './environment.type';
+import { environment as prodEnvironment } from './environment.prod';
 
-export const environment: Environment = build(true);
-environment.modules.native.serviceClass = ElectronNativeService;
+export const environment: Environment = {
+  ...prodEnvironment,
+  runtime: 'electron',
+};
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.dev.ts b/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
new file mode 100644
index 00000000..9d499d61
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
@@ -0,0 +1,69 @@
+import {
+  Environment,
+  commonApiUrls,
+  commonApiacceptableFileExtensions,
+  publicApiUrls,
+  externalApiUrls,
+  piUrls,
+  protocolUrls,
+} from './environment.type';
+
+export const environment: Environment = {
+  production: false,
+  title: `[개발] Woori TALK`,
+
+  commonApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 8011,
+    },
+    urls: commonApiUrls,
+    acceptableFileExtensions: commonApiacceptableFileExtensions,
+  },
+
+  publicApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 8011,
+    },
+    urls: publicApiUrls,
+  },
+
+  externalApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 8011,
+    },
+    urls: externalApiUrls,
+  },
+
+  piModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 9097,
+    },
+    urls: piUrls,
+  },
+
+  protocolModuleConfig: {
+    hostConfig: {
+      protocol: 'ws',
+      domain: '27.122.224.170',
+      port: 8080,
+    },
+    urls: protocolUrls,
+    reconnect: {
+      delay: 1000,
+    },
+    requestId: {
+      min: 1,
+      max: 59999,
+    },
+  },
+
+  nativeModuleConfig: {},
+};
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.prod.ts b/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
new file mode 100644
index 00000000..32317900
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
@@ -0,0 +1,69 @@
+import {
+  Environment,
+  commonApiUrls,
+  commonApiacceptableFileExtensions,
+  publicApiUrls,
+  externalApiUrls,
+  piUrls,
+  protocolUrls,
+} from './environment.type';
+
+export const environment: Environment = {
+  production: true,
+  title: `[개발] Woori TALK`,
+
+  commonApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 8011,
+    },
+    urls: commonApiUrls,
+    acceptableFileExtensions: commonApiacceptableFileExtensions,
+  },
+
+  publicApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 8011,
+    },
+    urls: publicApiUrls,
+  },
+
+  externalApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 8011,
+    },
+    urls: externalApiUrls,
+  },
+
+  piModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 9097,
+    },
+    urls: piUrls,
+  },
+
+  protocolModuleConfig: {
+    hostConfig: {
+      protocol: 'ws',
+      domain: '27.122.224.170',
+      port: 8080,
+    },
+    urls: protocolUrls,
+    reconnect: {
+      delay: 1000,
+    },
+    requestId: {
+      min: 1,
+      max: 59999,
+    },
+  },
+
+  nativeModuleConfig: {},
+};
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.ts b/projects/ucap-webmessenger-app/src/environments/environment.ts
index a813ba4d..a9cdb6b7 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.ts
@@ -1,10 +1,13 @@
-import { Environment, build } from './environment.type';
+import { Environment } from './environment.type';
+import { environment as devEnvironment } from './environment.dev';
 
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
-export const environment: Environment = build(false);
+export const environment: Environment = {
+  ...devEnvironment,
+};
 
 /*
  * For easier debugging in development mode, you can import the following file
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.type.ts b/projects/ucap-webmessenger-app/src/environments/environment.type.ts
index 68f23dd2..a2736e22 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment.type.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.type.ts
@@ -1,492 +1,668 @@
-import { Type, ModuleWithProviders } from '@angular/core';
-import { NativeService } from '@ucap-webmessenger/native';
+import {
+  ModuleConfig as CommonApiModuleConfig,
+  Urls as CommonApiUrls,
+} from '@ucap-webmessenger/api-common';
+import {
+  ModuleConfig as PublicApiModuleConfig,
+  Urls as PublicApiUrls,
+} from '@ucap-webmessenger/api-public';
+import {
+  ModuleConfig as ExternalApiModuleConfig,
+  Urls as ExternalApiUrls,
+} from '@ucap-webmessenger/api-external';
+import {
+  ModuleConfig as PiModuleConfig,
+  Urls as PiUrls,
+} from '@ucap-webmessenger/pi';
+import {
+  ModuleConfig as ProtocolModuleConfig,
+  Urls as ProtocolUrls,
+} from '@ucap-webmessenger/protocol';
+import { ModuleConfig as NativeModuleConfig } from '@ucap-webmessenger/native';
 
-export abstract class UrlConfig {
-  constructor(
-    protected useSsl: boolean,
-    protected domain: string,
-    protected port: number,
-    protected webSocket: boolean = false
-  ) {}
-
-  protected getProtocol(): string {
-    return this.webSocket
-      ? this.useSsl
-        ? 'wss:'
-        : 'ws:'
-      : this.useSsl
-      ? 'https:'
-      : 'http:';
-  }
-
-  protected getUrl(extra: Partial<URL>): string {
-    const url = new URL(
-      `${this.getProtocol()}//${this.domain}:${String(this.port)}`
-    );
-
-    for (const key in extra) {
-      if (extra.hasOwnProperty(key)) {
-        url[key] = extra[key];
-      }
-    }
-
-    console.log('url.href', url.href);
-
-    return url.href;
-  }
-}
-
-export class ApiPublicUrlConfig extends UrlConfig {
-  constructor(useSsl: boolean, domain: string, port: number) {
-    super(useSsl, domain, port);
-  }
-
-  public get versionInfo2(): string {
-    return this.getUrl({
-      pathname: '/Pub/verinfo2.aspx'
-    });
-  }
-
-  public get updateInfo(): string {
-    return this.getUrl({
-      pathname: '/Pub/updinfo.aspx'
-    });
-  }
-}
-
-export class ApiExternalUrlConfig extends UrlConfig {
-  constructor(useSsl: boolean, domain: string, port: number) {
-    super(useSsl, domain, port);
-  }
-
-  public get companyList(): string {
-    return this.getUrl({
-      pathname: '/Extern/CompanyList.aspx'
-    });
-  }
-
-  public get urlInfo(): string {
-    return this.getUrl({
-      pathname: '/Extern/urlinfo.aspx'
-    });
-  }
-
-  public get checkUserInfoEx(): string {
-    return this.getUrl({
-      pathname: '/Extern/CheckUserInfoEx.aspx'
-    });
-  }
-
-  public get tokenUpdate(): string {
-    return this.getUrl({
-      pathname: '/Extern/TokenUpdate.aspx'
-    });
-  }
-}
-
-export class ApiCommonUrlConfig extends UrlConfig {
-  constructor(useSsl: boolean, domain: string, port: number) {
-    super(useSsl, domain, port);
-  }
-
-  public get fileProfileSave(): string {
-    return this.getUrl({
-      pathname: '/Common/FileProfileSave.aspx'
-    });
-  }
-
-  public get fileTalkSave(): string {
-    return this.getUrl({
-      pathname: '/Common/FileTalkSave.aspx'
-    });
-  }
-
-  public get fileTalkDownload(): string {
-    return this.getUrl({
-      pathname: '/Common/FileTalkDownload.aspx'
-    });
-  }
-
-  public get fileTalkShare(): string {
-    return this.getUrl({
-      pathname: '/Common/FileTalkShare.aspx'
-    });
-  }
-
-  public get massTalkSave(): string {
-    return this.getUrl({
-      pathname: '/Common/MassTalkSave.aspx'
-    });
-  }
-
-  public get massTalkDownload(): string {
-    return this.getUrl({
-      pathname: '/Common/MassTalkDownload.aspx'
-    });
-  }
-
-  public get transMassTalkSave(): string {
-    return this.getUrl({
-      pathname: '/Common/TransMassTalkSave.aspx'
-    });
-  }
-
-  public get transMassTalkDownload(): string {
-    return this.getUrl({
-      pathname: '/Common/TransMassTalkDownload.aspx'
-    });
-  }
-
-  public get translationReq(): string {
-    return this.getUrl({
-      pathname: '/Common/TranslationReq.aspx'
-    });
-  }
-
-  public get translationSave(): string {
-    return this.getUrl({
-      pathname: '/Common/TranslationSave.aspx'
-    });
-  }
-}
-
-export class PiUrlConfig extends UrlConfig {
-  constructor(useSsl: boolean, domain: string, port: number) {
-    super(useSsl, domain, port);
-  }
-
-  public get login2(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/login2'
-    });
-  }
-
-  public get userTermsAction(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/user/terms.action'
-    });
-  }
-
-  public get passwordInitStep1(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/password/initStep1'
-    });
-  }
-
-  public get passwordChange(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/password/change'
-    });
-  }
-
-  public get policyTotal(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/policy/total'
-    });
-  }
-
-  public get policyService(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/policy/service'
-    });
-  }
-
-  public get policyPrivacy(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/policy/privacy'
-    });
-  }
-
-  public get tokenCheck(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/tokenCheck'
-    });
-  }
-
-  public get userMobileAuth(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/user/mobileAuth'
-    });
-  }
-
-  public get userUserAuth(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/user/userAuth'
-    });
-  }
-
-  public get userCall(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/user/call'
-    });
-  }
-
-  public get userMoblieCallAuth(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/user/moblieCallAuth'
-    });
-  }
-
-  public get eventSendEventMail(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/event/sendEventMail'
-    });
-  }
-
-  public get userMobileInitial1(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/user/mobileInitial1'
-    });
-  }
-
-  public get eventSendInvite(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/event/sendInvite'
-    });
-  }
-
-  public get userRoom(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/user/room'
-    });
-  }
-
-  public get scheduleRetrieveScheduleList(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/schedule/retrieveScheduleList'
-    });
-  }
-
-  public get userScreenCapture(): string {
-    return this.getUrl({
-      pathname: '/uCapPi/user/screenCapture'
-    });
-  }
-}
-
-export class ProtocolUrlConfig extends UrlConfig {
-  constructor(useSsl: boolean, domain: string, port: number) {
-    super(useSsl, domain, port, true);
-  }
-
-  public get base(): string {
-    return this.getUrl({
-      pathname: '/'
-    });
-  }
-}
-
-export class VideoConfrenceUrlConfig extends UrlConfig {
-  constructor(useSsl: boolean, domain: string, port: number) {
-    super(useSsl, domain, port);
-  }
-
-  public get create(): string {
-    return this.getUrl({
-      pathname: '/API_CreateConf'
-    });
-  }
-
-  public get join(): string {
-    return this.getUrl({
-      pathname: '/AutoLogin.jsp'
-    });
-  }
-}
-
-export class ClickToCallUrlConfig extends UrlConfig {
-  constructor(useSsl: boolean, domain: string, port: number) {
-    super(useSsl, domain, port);
-  }
-
-  public get cdr(): string {
-    return this.getUrl({
-      pathname: '/clicktocall/api/messenger/cdr'
-    });
-  }
-
-  public get clicktocall(): string {
-    return this.getUrl({
-      pathname: '/clicktocall/api/messenger/clicktocall'
-    });
-  }
-}
+export type UCapRuntime = 'browser' | 'electron';
 
 export interface Environment {
   production: boolean;
+  runtime?: UCapRuntime;
   title: string;
-  useSsl: boolean;
-  webDomain: string;
-  webPort: number;
-  urls: {
-    apiPublic: ApiPublicUrlConfig;
-    apiCommon: ApiCommonUrlConfig;
-    apiExternal: ApiExternalUrlConfig;
-    pi: PiUrlConfig;
-    protocol: ProtocolUrlConfig;
-    videoConfrence: VideoConfrenceUrlConfig;
-    clickToCall: ClickToCallUrlConfig;
-  };
-  protocol: {
-    reconnect: {
-      delay: number;
-    };
-    requestId: {
-      min: number;
-      max: number;
-    };
-  };
-  modules: {
-    native: {
-      serviceClass?: Type<NativeService>;
-    };
-    event: {
-      acceptableFileExtensions: string[];
-    };
-  };
+
+  commonApiModuleConfig: CommonApiModuleConfig;
+  publicApiModuleConfig: PublicApiModuleConfig;
+  externalApiModuleConfig: ExternalApiModuleConfig;
+  piModuleConfig: PiModuleConfig;
+  protocolModuleConfig: ProtocolModuleConfig;
+  nativeModuleConfig: NativeModuleConfig;
 }
 
-export function build(production: boolean): Environment {
-  const devServer = false;
-  const useSsl = false;
-  const title = 'Woori TALK';
+export const commonApiUrls: CommonApiUrls = {
+  fileProfileSave: '/Common/FileProfileSave.aspx',
+  fileTalkDownload: '/Common/FileTalkDownload.aspx',
+  fileTalkSave: '/Common/FileTalkSave.aspx',
+  fileTalkShare: '/Common/FileTalkShare.aspx',
+  massTalkDownload: '/Common/MassTalkDownload.aspx',
+  massTalkSave: '/Common/MassTalkSave.aspx',
+  transMassTalkDownload: '/Common/TransMassTalkDownload.aspx',
+  transMassTalkSave: '/Common/TransMassTalkSave.aspx',
+  translationReq: '/Common/TranslationReq.aspx',
+  translationSave: '/Common/TranslationSave.aspx',
+};
 
-  const webDomain = devServer ? 'bizucap.uplus.co.kr' : '27.122.224.170';
-  const webPort = devServer ? 80 : 8011;
+export const publicApiUrls: PublicApiUrls = {
+  versionInfo2: '/Pub/verinfo2.aspx',
+  updateInfo: '/Pub/updinfo.aspx',
+};
+export const externalApiUrls: ExternalApiUrls = {
+  checkUserInfoEx: '/Extern/CheckUserInfoEx.aspx',
+  companyList: '/Extern/CompanyList.aspx',
+  tokenUpdate: '/Extern/TokenUpdate.aspx',
+  urlInfo: '/Extern/urlinfo.aspx',
+};
+export const piUrls: PiUrls = {
+  login2: '/uCapPi/login2',
+  userTermsAction: '/uCapPi/user/terms.action',
+  passwordInitStep1: '/uCapPi/password/initStep1',
+  passwordChange: '/uCapPi/password/change',
+  policyTotal: '/uCapPi/policy/total',
+  policyService: '/uCapPi/policy/service',
+  policyPrivacy: '/uCapPi/policy/privacy',
+  tokenCheck: '/uCapPi/tokenCheck',
+  userMobileAuth: '/uCapPi/user/mobileAuth',
+  userUserAuth: '/uCapPi/user/userAuth',
+  userCall: '/uCapPi/user/call',
+  userMoblieCallAuth: '/uCapPi/user/moblieCallAuth',
+  eventSendEventMail: '/uCapPi/event/sendEventMail',
+  userMobileInitial1: '/uCapPi/user/mobileInitial1',
+  eventSendInvite: '/uCapPi/event/sendInvite',
+  userRoom: '/uCapPi/user/room',
+  scheduleRetrieveScheduleList: '/uCapPi/schedule/retrieveScheduleList',
+  userScreenCapture: '/uCapPi/user/screenCapture',
+};
+export const protocolUrls: ProtocolUrls = {
+  base: '/',
+};
 
-  return {
-    production,
-    title: devServer ? `[개발]${title}` : title,
-    useSsl,
-    webDomain,
-    webPort,
-    urls: {
-      apiCommon: new ApiCommonUrlConfig(useSsl, webDomain, webPort),
-      apiPublic: new ApiPublicUrlConfig(useSsl, webDomain, webPort),
-      apiExternal: new ApiExternalUrlConfig(useSsl, webDomain, webPort),
-      pi: new PiUrlConfig(useSsl, webDomain, devServer ? 9097 : 9097),
-      protocol: new ProtocolUrlConfig(useSsl, webDomain, useSsl ? 9443 : 8080),
-      videoConfrence: new VideoConfrenceUrlConfig(
-        useSsl,
-        devServer ? '101.55.17.24' : '101.55.17.24',
-        devServer ? 80 : 80
-      ),
-      clickToCall: new ClickToCallUrlConfig(
-        useSsl,
-        devServer ? '169.56.82.147' : '169.56.82.147',
-        devServer ? 9095 : 9095
-      )
-    },
-    protocol: {
-      reconnect: {
-        delay: 1000
-      },
-      requestId: {
-        min: 1,
-        max: 59999
-      }
-    },
-    modules: {
-      native: {},
-      event: {
-        acceptableFileExtensions: [
-          // 문서1
-          'csv',
-          'd01',
-          'doc',
-          'docx',
-          'dot',
-          'dotx',
-          'hwp',
-          'log',
-          'one',
-          'pdf',
-          'pot',
-          'potx',
-          'pps',
-          'ppsx',
-          'ppt',
-          'pptx',
-          'ps',
-          // 문서2
-          'rtf',
-          'txt',
-          'vcf',
-          'xls',
-          'xlsx',
-          'xlt',
-          'xltx',
-          'xlsm',
-          'ods',
-          // CAD
-          'asc',
-          'dwg',
-          'dws',
-          'dwt',
-          'dxf',
-          'pgp',
-          'plt',
-          // MAC
-          'pages',
-          'keynote',
-          // 압축
-          '7z',
-          'a01',
-          'a02',
-          'a03',
-          'alz',
-          'egg',
-          'gz',
-          'rar',
-          'tar',
-          'zip',
-          // 오디오
-          'aac',
-          'aiff',
-          'flac',
-          'm4a',
-          'mp2',
-          'mp3',
-          'mpega',
-          'mpga',
-          'ogg',
-          'wma',
-          'wav',
-          // 플래쉬
-          'fla',
-          'flv',
-          'swf',
-          // 이미지
-          'ai',
-          'bmp',
-          'cdr',
-          'emf',
-          'eps',
-          'gif',
-          'jpeg',
-          'jpg',
-          'png',
-          'psd',
-          'tif',
-          'tiff',
-          'wmf',
-          // 동영상
-          '3gp',
-          'avi',
-          'm4v',
-          'mkv',
-          'mov',
-          'mp4',
-          'mpeg',
-          'mpg',
-          'rv',
-          'ts',
-          'webm',
-          'wmv',
-          // 폴더전송용
-          'zdr'
-        ]
-      }
-    }
-  };
-}
+export const commonApiacceptableFileExtensions: string[] = [
+  // 문서1
+  'csv',
+  'd01',
+  'doc',
+  'docx',
+  'dot',
+  'dotx',
+  'hwp',
+  'log',
+  'one',
+  'pdf',
+  'pot',
+  'potx',
+  'pps',
+  'ppsx',
+  'ppt',
+  'pptx',
+  'ps',
+  // 문서2
+  'rtf',
+  'txt',
+  'vcf',
+  'xls',
+  'xlsx',
+  'xlt',
+  'xltx',
+  'xlsm',
+  'ods',
+  // CAD
+  'asc',
+  'dwg',
+  'dws',
+  'dwt',
+  'dxf',
+  'pgp',
+  'plt',
+  // MAC
+  'pages',
+  'keynote',
+  // 압축
+  '7z',
+  'a01',
+  'a02',
+  'a03',
+  'alz',
+  'egg',
+  'gz',
+  'rar',
+  'tar',
+  'zip',
+  // 오디오
+  'aac',
+  'aiff',
+  'flac',
+  'm4a',
+  'mp2',
+  'mp3',
+  'mpega',
+  'mpga',
+  'ogg',
+  'wma',
+  'wav',
+  // 플래쉬
+  'fla',
+  'flv',
+  'swf',
+  // 이미지
+  'ai',
+  'bmp',
+  'cdr',
+  'emf',
+  'eps',
+  'gif',
+  'jpeg',
+  'jpg',
+  'png',
+  'psd',
+  'tif',
+  'tiff',
+  'wmf',
+  // 동영상
+  '3gp',
+  'avi',
+  'm4v',
+  'mkv',
+  'mov',
+  'mp4',
+  'mpeg',
+  'mpg',
+  'rv',
+  'ts',
+  'webm',
+  'wmv',
+  // 폴더전송용
+  'zdr',
+];
+
+// export abstract class UrlConfig {
+//   constructor(
+//     protected useSsl: boolean,
+//     protected domain: string,
+//     protected port: number,
+//     protected webSocket: boolean = false
+//   ) {}
+
+//   protected getProtocol(): string {
+//     return this.webSocket
+//       ? this.useSsl
+//         ? 'wss:'
+//         : 'ws:'
+//       : this.useSsl
+//       ? 'https:'
+//       : 'http:';
+//   }
+
+//   protected getUrl(extra: Partial<URL>): string {
+//     const url = new URL(
+//       `${this.getProtocol()}//${this.domain}:${String(this.port)}`
+//     );
+
+//     for (const key in extra) {
+//       if (extra.hasOwnProperty(key)) {
+//         url[key] = extra[key];
+//       }
+//     }
+//     return url.href;
+//   }
+// }
+
+// export class ApiPublicUrlConfig extends UrlConfig {
+//   constructor(useSsl: boolean, domain: string, port: number) {
+//     super(useSsl, domain, port);
+//   }
+
+//   public get versionInfo2(): string {
+//     return this.getUrl({
+//       pathname: '/Pub/verinfo2.aspx',
+//     });
+//   }
+
+//   public get updateInfo(): string {
+//     return this.getUrl({
+//       pathname: '/Pub/updinfo.aspx',
+//     });
+//   }
+// }
+
+// export class ApiExternalUrlConfig extends UrlConfig {
+//   constructor(useSsl: boolean, domain: string, port: number) {
+//     super(useSsl, domain, port);
+//   }
+
+//   public get companyList(): string {
+//     return this.getUrl({
+//       pathname: '/Extern/CompanyList.aspx',
+//     });
+//   }
+
+//   public get urlInfo(): string {
+//     return this.getUrl({
+//       pathname: '/Extern/urlinfo.aspx',
+//     });
+//   }
+
+//   public get checkUserInfoEx(): string {
+//     return this.getUrl({
+//       pathname: '/Extern/CheckUserInfoEx.aspx',
+//     });
+//   }
+
+//   public get tokenUpdate(): string {
+//     return this.getUrl({
+//       pathname: '/Extern/TokenUpdate.aspx',
+//     });
+//   }
+// }
+
+// export class ApiCommonUrlConfig extends UrlConfig {
+//   constructor(useSsl: boolean, domain: string, port: number) {
+//     super(useSsl, domain, port);
+//   }
+
+//   public get fileProfileSave(): string {
+//     return this.getUrl({
+//       pathname: '/Common/FileProfileSave.aspx',
+//     });
+//   }
+
+//   public get fileTalkSave(): string {
+//     return this.getUrl({
+//       pathname: '/Common/FileTalkSave.aspx',
+//     });
+//   }
+
+//   public get fileTalkDownload(): string {
+//     return this.getUrl({
+//       pathname: '/Common/FileTalkDownload.aspx',
+//     });
+//   }
+
+//   public get fileTalkShare(): string {
+//     return this.getUrl({
+//       pathname: '/Common/FileTalkShare.aspx',
+//     });
+//   }
+
+//   public get massTalkSave(): string {
+//     return this.getUrl({
+//       pathname: '/Common/MassTalkSave.aspx',
+//     });
+//   }
+
+//   public get massTalkDownload(): string {
+//     return this.getUrl({
+//       pathname: '/Common/MassTalkDownload.aspx',
+//     });
+//   }
+
+//   public get transMassTalkSave(): string {
+//     return this.getUrl({
+//       pathname: '/Common/TransMassTalkSave.aspx',
+//     });
+//   }
+
+//   public get transMassTalkDownload(): string {
+//     return this.getUrl({
+//       pathname: '/Common/TransMassTalkDownload.aspx',
+//     });
+//   }
+
+//   public get translationReq(): string {
+//     return this.getUrl({
+//       pathname: '/Common/TranslationReq.aspx',
+//     });
+//   }
+
+//   public get translationSave(): string {
+//     return this.getUrl({
+//       pathname: '/Common/TranslationSave.aspx',
+//     });
+//   }
+// }
+
+// export class PiUrlConfig extends UrlConfig {
+//   constructor(useSsl: boolean, domain: string, port: number) {
+//     super(useSsl, domain, port);
+//   }
+
+//   public get login2(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/login2',
+//     });
+//   }
+
+//   public get userTermsAction(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/user/terms.action',
+//     });
+//   }
+
+//   public get passwordInitStep1(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/password/initStep1',
+//     });
+//   }
+
+//   public get passwordChange(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/password/change',
+//     });
+//   }
+
+//   public get policyTotal(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/policy/total',
+//     });
+//   }
+
+//   public get policyService(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/policy/service',
+//     });
+//   }
+
+//   public get policyPrivacy(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/policy/privacy',
+//     });
+//   }
+
+//   public get tokenCheck(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/tokenCheck',
+//     });
+//   }
+
+//   public get userMobileAuth(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/user/mobileAuth',
+//     });
+//   }
+
+//   public get userUserAuth(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/user/userAuth',
+//     });
+//   }
+
+//   public get userCall(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/user/call',
+//     });
+//   }
+
+//   public get userMoblieCallAuth(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/user/moblieCallAuth',
+//     });
+//   }
+
+//   public get eventSendEventMail(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/event/sendEventMail',
+//     });
+//   }
+
+//   public get userMobileInitial1(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/user/mobileInitial1',
+//     });
+//   }
+
+//   public get eventSendInvite(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/event/sendInvite',
+//     });
+//   }
+
+//   public get userRoom(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/user/room',
+//     });
+//   }
+
+//   public get scheduleRetrieveScheduleList(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/schedule/retrieveScheduleList',
+//     });
+//   }
+
+//   public get userScreenCapture(): string {
+//     return this.getUrl({
+//       pathname: '/uCapPi/user/screenCapture',
+//     });
+//   }
+// }
+
+// export class ProtocolUrlConfig extends UrlConfig {
+//   constructor(useSsl: boolean, domain: string, port: number) {
+//     super(useSsl, domain, port, true);
+//   }
+
+//   public get base(): string {
+//     return this.getUrl({
+//       pathname: '/',
+//     });
+//   }
+// }
+
+// export class VideoConfrenceUrlConfig extends UrlConfig {
+//   constructor(useSsl: boolean, domain: string, port: number) {
+//     super(useSsl, domain, port);
+//   }
+
+//   public get create(): string {
+//     return this.getUrl({
+//       pathname: '/API_CreateConf',
+//     });
+//   }
+
+//   public get join(): string {
+//     return this.getUrl({
+//       pathname: '/AutoLogin.jsp',
+//     });
+//   }
+// }
+
+// export class ClickToCallUrlConfig extends UrlConfig {
+//   constructor(useSsl: boolean, domain: string, port: number) {
+//     super(useSsl, domain, port);
+//   }
+
+//   public get cdr(): string {
+//     return this.getUrl({
+//       pathname: '/clicktocall/api/messenger/cdr',
+//     });
+//   }
+
+//   public get clicktocall(): string {
+//     return this.getUrl({
+//       pathname: '/clicktocall/api/messenger/clicktocall',
+//     });
+//   }
+// }
+
+// export interface Environment {
+//   production?: boolean;
+//   title?: string;
+//   useSsl?: boolean;
+//   webDomain?: string;
+//   webPort?: number;
+//   urls?: {
+//     apiPublic: ApiPublicUrlConfig;
+//     apiCommon: ApiCommonUrlConfig;
+//     apiExternal: ApiExternalUrlConfig;
+//     pi: PiUrlConfig;
+//     protocol: ProtocolUrlConfig;
+//     videoConfrence: VideoConfrenceUrlConfig;
+//     clickToCall: ClickToCallUrlConfig;
+//   };
+//   protocol?: {
+//     reconnect: {
+//       delay: number;
+//     };
+//     requestId: {
+//       min: number;
+//       max: number;
+//     };
+//   };
+//   modules?: {
+//     native: {
+//       serviceClass?: Type<NativeService>;
+//     };
+//     event: {
+//       acceptableFileExtensions: string[];
+//     };
+//   };
+// }
+
+// export function build(production: boolean): Environment {
+//   const devServer = false;
+//   const useSsl = false;
+//   const title = 'Woori TALK';
+
+//   const webDomain = devServer ? 'bizucap.uplus.co.kr' : '27.122.224.170';
+//   const webPort = devServer ? 80 : 8011;
+
+//   return {
+//     production,
+//     title: devServer ? `[개발]${title}` : title,
+//     useSsl,
+//     webDomain,
+//     webPort,
+//     urls: {
+//       apiCommon: new ApiCommonUrlConfig(useSsl, webDomain, webPort),
+//       apiPublic: new ApiPublicUrlConfig(useSsl, webDomain, webPort),
+//       apiExternal: new ApiExternalUrlConfig(useSsl, webDomain, webPort),
+//       pi: new PiUrlConfig(useSsl, webDomain, devServer ? 9097 : 9097),
+//       protocol: new ProtocolUrlConfig(useSsl, webDomain, useSsl ? 9443 : 8080),
+//       videoConfrence: new VideoConfrenceUrlConfig(
+//         useSsl,
+//         devServer ? '101.55.17.24' : '101.55.17.24',
+//         devServer ? 80 : 80
+//       ),
+//       clickToCall: new ClickToCallUrlConfig(
+//         useSsl,
+//         devServer ? '169.56.82.147' : '169.56.82.147',
+//         devServer ? 9095 : 9095
+//       ),
+//     },
+//     protocol: {
+// reconnect: {
+//   delay: 1000,
+// },
+// requestId: {
+//   min: 1,
+//   max: 59999,
+// },
+//     },
+//     modules: {
+//       native: {},
+//       event: {
+//         acceptableFileExtensions: [
+// // 문서1
+// 'csv',
+// 'd01',
+// 'doc',
+// 'docx',
+// 'dot',
+// 'dotx',
+// 'hwp',
+// 'log',
+// 'one',
+// 'pdf',
+// 'pot',
+// 'potx',
+// 'pps',
+// 'ppsx',
+// 'ppt',
+// 'pptx',
+// 'ps',
+// // 문서2
+// 'rtf',
+// 'txt',
+// 'vcf',
+// 'xls',
+// 'xlsx',
+// 'xlt',
+// 'xltx',
+// 'xlsm',
+// 'ods',
+// // CAD
+// 'asc',
+// 'dwg',
+// 'dws',
+// 'dwt',
+// 'dxf',
+// 'pgp',
+// 'plt',
+// // MAC
+// 'pages',
+// 'keynote',
+// // 압축
+// '7z',
+// 'a01',
+// 'a02',
+// 'a03',
+// 'alz',
+// 'egg',
+// 'gz',
+// 'rar',
+// 'tar',
+// 'zip',
+// // 오디오
+// 'aac',
+// 'aiff',
+// 'flac',
+// 'm4a',
+// 'mp2',
+// 'mp3',
+// 'mpega',
+// 'mpga',
+// 'ogg',
+// 'wma',
+// 'wav',
+// // 플래쉬
+// 'fla',
+// 'flv',
+// 'swf',
+// // 이미지
+// 'ai',
+// 'bmp',
+// 'cdr',
+// 'emf',
+// 'eps',
+// 'gif',
+// 'jpeg',
+// 'jpg',
+// 'png',
+// 'psd',
+// 'tif',
+// 'tiff',
+// 'wmf',
+// // 동영상
+// '3gp',
+// 'avi',
+// 'm4v',
+// 'mkv',
+// 'mov',
+// 'mp4',
+// 'mpeg',
+// 'mpg',
+// 'rv',
+// 'ts',
+// 'webm',
+// 'wmv',
+// // 폴더전송용
+// 'zdr',
+//         ],
+//       },
+//     },
+//   };
+// }
diff --git a/projects/ucap-webmessenger-core/src/lib/config/host.config.ts b/projects/ucap-webmessenger-core/src/lib/config/host.config.ts
new file mode 100644
index 00000000..ad216d1d
--- /dev/null
+++ b/projects/ucap-webmessenger-core/src/lib/config/host.config.ts
@@ -0,0 +1,7 @@
+export type HostProtocol = 'http' | 'https' | 'ws' | 'wss';
+
+export interface HostConfig {
+  protocol: HostProtocol;
+  domain: string;
+  port: number;
+}
diff --git a/projects/ucap-webmessenger-core/src/lib/config/module.config.ts b/projects/ucap-webmessenger-core/src/lib/config/module.config.ts
new file mode 100644
index 00000000..652953f3
--- /dev/null
+++ b/projects/ucap-webmessenger-core/src/lib/config/module.config.ts
@@ -0,0 +1,6 @@
+import { HostConfig } from './host.config';
+
+export interface ModuleConfig<UrlsType = {}> {
+  hostConfig?: HostConfig;
+  urls?: UrlsType;
+}
diff --git a/projects/ucap-webmessenger-core/src/lib/config/url.config.ts b/projects/ucap-webmessenger-core/src/lib/config/url.config.ts
new file mode 100644
index 00000000..b7124842
--- /dev/null
+++ b/projects/ucap-webmessenger-core/src/lib/config/url.config.ts
@@ -0,0 +1,24 @@
+import { HostConfig } from './host.config';
+
+export abstract class UrlConfig {
+  static getUrls<T extends any>(hotConfig: HostConfig, urls: T): T {
+    const nUrls: any = {};
+    for (const key in urls) {
+      if (urls.hasOwnProperty(key)) {
+        const pathname = urls[key];
+        nUrls[key] = UrlConfig.getUrl(hotConfig, pathname);
+      }
+    }
+
+    return nUrls;
+  }
+
+  private static getUrl(hotConfig: HostConfig, pathname: string): string {
+    const url = new URL(
+      `${hotConfig.protocol}://${hotConfig.domain}:${String(hotConfig.port)}`
+    );
+    url.pathname = pathname;
+
+    return url.href;
+  }
+}
diff --git a/projects/ucap-webmessenger-core/src/public-api.ts b/projects/ucap-webmessenger-core/src/public-api.ts
index df10b4a9..b088a55f 100644
--- a/projects/ucap-webmessenger-core/src/public-api.ts
+++ b/projects/ucap-webmessenger-core/src/public-api.ts
@@ -23,3 +23,7 @@ export * from './lib/types/video-conference-type.type';
 export * from './lib/utils/file.util';
 export * from './lib/utils/mime.util';
 export * from './lib/utils/string.util';
+
+export * from './lib/config/host.config';
+export * from './lib/config/url.config';
+export * from './lib/config/module.config';
diff --git a/projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts b/projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts
index 67c5978f..b33c5e7a 100644
--- a/projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts
+++ b/projects/ucap-webmessenger-native-browser/src/lib/services/browser-native.service.ts
@@ -8,15 +8,15 @@ import {
 } from '@ucap-webmessenger/native';
 import { HttpClient } from '@angular/common/http';
 import { map, share } from 'rxjs/operators';
-import { Injectable } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
 import { TranslateLoaderService } from '../translate/browser-loader';
 import { NotificationService } from '../notification/notification.service';
+import { Injectable } from '@angular/core';
 
 @Injectable({
   providedIn: 'root',
 })
-export class BrowserNativeService implements NativeService {
+export class BrowserNativeService extends NativeService {
   private notificationService: NotificationService;
 
   private chatOpenRoomSubject: Subject<string> | null = null;
@@ -110,6 +110,7 @@ export class BrowserNativeService implements NativeService {
   }
 
   constructor(private httpClient: HttpClient) {
+    super();
     this.notificationService = new NotificationService();
   }
 }
diff --git a/projects/ucap-webmessenger-native-browser/src/lib/ucap-browser-native.module.ts b/projects/ucap-webmessenger-native-browser/src/lib/ucap-browser-native.module.ts
deleted file mode 100644
index ec936074..00000000
--- a/projects/ucap-webmessenger-native-browser/src/lib/ucap-browser-native.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { BrowserNativeService } from './services/browser-native.service';
-
-const SERVICES = [BrowserNativeService];
-
-@NgModule({
-  declarations: [],
-  imports: [],
-  exports: []
-})
-export class UCapBrowserNativeModule {
-  public static forRoot(): ModuleWithProviders<UCapBrowserNativeModule> {
-    return {
-      ngModule: UCapBrowserNativeModule,
-      providers: [...SERVICES]
-    };
-  }
-}
diff --git a/projects/ucap-webmessenger-native-browser/src/public-api.ts b/projects/ucap-webmessenger-native-browser/src/public-api.ts
index e3451340..0d4fcdcd 100644
--- a/projects/ucap-webmessenger-native-browser/src/public-api.ts
+++ b/projects/ucap-webmessenger-native-browser/src/public-api.ts
@@ -2,8 +2,8 @@
  * Public API Surface of ucap-webmessenger-native-browser
  */
 
+export * from './lib/notification/notification.service';
+
 export * from './lib/services/browser-native.service';
 
 export * from './lib/translate/browser-loader';
-
-export * from './lib/ucap-browser-native.module';
diff --git a/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts b/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts
index 4a7bf321..9836473a 100644
--- a/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts
+++ b/projects/ucap-webmessenger-native-electron/src/lib/services/electron-native.service.ts
@@ -1,4 +1,4 @@
-import { ipcRenderer, remote, IpcRendererEvent } from 'electron';
+import { ipcRenderer, remote } from 'electron';
 
 import { Observable, Subject } from 'rxjs';
 
@@ -6,7 +6,7 @@ import {
   NativeService,
   WindowState,
   NotificationRequest,
-  WindowIdle
+  WindowIdle,
 } from '@ucap-webmessenger/native';
 import { share } from 'rxjs/operators';
 import {
@@ -15,16 +15,19 @@ import {
   FileChannel,
   WindowStateChannel,
   IdleStateChannel,
-  ChatChannel
+  ChatChannel,
 } from '../types/channel.type';
 import { Injectable } from '@angular/core';
 import { TranslateLoaderService } from '../translate/electron-loader';
 import { TranslateLoader } from '@ngx-translate/core';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ElectronNativeService implements NativeService {
+  private ipcRenderer: typeof ipcRenderer;
+  private remote: typeof remote;
+
   private windowStateChangedSubject: Subject<WindowState> | null = null;
   private windowStateChanged$: Observable<WindowState> | null = null;
 
@@ -37,17 +40,17 @@ export class ElectronNativeService implements NativeService {
   postAppInit(): void {}
 
   notify(noti: NotificationRequest): void {
-    ipcRenderer.send(NotificationChannel.Notify, noti);
+    this.ipcRenderer.send(NotificationChannel.Notify, noti);
   }
 
   closeAllNotify(): void {
-    ipcRenderer.send(NotificationChannel.CloseAllNotify);
+    this.ipcRenderer.send(NotificationChannel.CloseAllNotify);
   }
 
   checkForUpdates(): Observable<boolean> {
     return new Observable<boolean>(subscriber => {
       try {
-        subscriber.next(ipcRenderer.sendSync(UpdaterChannel.Check));
+        subscriber.next(this.ipcRenderer.sendSync(UpdaterChannel.Check));
       } catch (error) {
         subscriber.error(error);
       } finally {
@@ -57,13 +60,13 @@ export class ElectronNativeService implements NativeService {
   }
 
   showImageViewer(): void {
-    ipcRenderer.send(FileChannel.ShowImageViewer);
+    this.ipcRenderer.send(FileChannel.ShowImageViewer);
   }
 
   readFile(path: string): Observable<Buffer> {
     return new Observable<Buffer>(subscriber => {
       try {
-        subscriber.next(ipcRenderer.sendSync(FileChannel.ReadFile, path));
+        subscriber.next(this.ipcRenderer.sendSync(FileChannel.ReadFile, path));
       } catch (error) {
         subscriber.error(error);
       } finally {
@@ -80,7 +83,12 @@ export class ElectronNativeService implements NativeService {
     return new Observable<string>(subscriber => {
       try {
         subscriber.next(
-          ipcRenderer.sendSync(FileChannel.SaveFile, buffer, fileName, path)
+          this.ipcRenderer.sendSync(
+            FileChannel.SaveFile,
+            buffer,
+            fileName,
+            path
+          )
         );
       } catch (error) {
         subscriber.error(error);
@@ -98,9 +106,9 @@ export class ElectronNativeService implements NativeService {
         .pipe(share());
     }
 
-    ipcRenderer.on(
+    this.ipcRenderer.on(
       WindowStateChannel.Changed,
-      (event: IpcRendererEvent, windowState: WindowState) => {
+      (event: any, windowState: WindowState) => {
         this.windowStateChangedSubject.next(windowState);
       }
     );
@@ -108,7 +116,7 @@ export class ElectronNativeService implements NativeService {
   }
 
   windowClose(): void {
-    const currentWindow = remote.getCurrentWindow();
+    const currentWindow = this.remote.getCurrentWindow();
     if (!currentWindow) {
       return;
     }
@@ -117,7 +125,7 @@ export class ElectronNativeService implements NativeService {
   }
 
   windowMinimize(): void {
-    const currentWindow = remote.getCurrentWindow();
+    const currentWindow = this.remote.getCurrentWindow();
     if (!currentWindow) {
       return;
     }
@@ -126,7 +134,7 @@ export class ElectronNativeService implements NativeService {
   }
 
   windowMaximize(): void {
-    const currentWindow = remote.getCurrentWindow();
+    const currentWindow = this.remote.getCurrentWindow();
     if (!currentWindow) {
       return;
     }
@@ -146,11 +154,11 @@ export class ElectronNativeService implements NativeService {
         .pipe(share());
     }
 
-    ipcRenderer.send(IdleStateChannel.StartCheck);
+    this.ipcRenderer.send(IdleStateChannel.StartCheck);
 
-    ipcRenderer.on(
+    this.ipcRenderer.on(
       IdleStateChannel.Changed,
-      (event: IpcRendererEvent, idleState: WindowIdle) => {
+      (event: any, idleState: WindowIdle) => {
         this.idleStateChangedSubject.next(idleState);
       }
     );
@@ -165,12 +173,9 @@ export class ElectronNativeService implements NativeService {
         .pipe(share());
     }
 
-    ipcRenderer.on(
-      ChatChannel.OpenRoom,
-      (event: IpcRendererEvent, roomSeq: string) => {
-        this.chatOpenRoomSubject.next(roomSeq);
-      }
-    );
+    this.ipcRenderer.on(ChatChannel.OpenRoom, (event: any, roomSeq: string) => {
+      this.chatOpenRoomSubject.next(roomSeq);
+    });
     return this.chatOpenRoom$;
   }
 
@@ -178,5 +183,14 @@ export class ElectronNativeService implements NativeService {
     return new TranslateLoaderService(this, prefix, suffix);
   }
 
-  constructor() {}
+  get isElectron() {
+    return window && (window as any).process && (window as any).process.type;
+  }
+
+  constructor() {
+    if (this.isElectron) {
+      this.ipcRenderer = (window as any).require('electron').ipcRenderer;
+      this.remote = (window as any).require('electron').remote;
+    }
+  }
 }
diff --git a/projects/ucap-webmessenger-native-electron/src/lib/types/channel.type.ts b/projects/ucap-webmessenger-native-electron/src/lib/types/channel.type.ts
index 36235950..3d93aac3 100644
--- a/projects/ucap-webmessenger-native-electron/src/lib/types/channel.type.ts
+++ b/projects/ucap-webmessenger-native-electron/src/lib/types/channel.type.ts
@@ -1,27 +1,27 @@
 export enum ChatChannel {
-  OpenRoom = 'UCAP::chat::openRoom'
+  OpenRoom = 'UCAP::chat::openRoom',
 }
 
 export enum NotificationChannel {
   Notify = 'UCAP::notification::notify',
-  CloseAllNotify = 'UCAP::notification::closeAllNotify'
+  CloseAllNotify = 'UCAP::notification::closeAllNotify',
 }
 
 export enum UpdaterChannel {
-  Check = 'UCAP::updater::check'
+  Check = 'UCAP::updater::check',
 }
 
 export enum FileChannel {
   ShowImageViewer = 'UCAP::file::showImageViewer',
   SaveFile = 'UCAP::file::saveFile',
-  ReadFile = 'UCAP::file::readFile'
+  ReadFile = 'UCAP::file::readFile',
 }
 
 export enum WindowStateChannel {
-  Changed = 'UCAP::windowState::windowStateChanged'
+  Changed = 'UCAP::windowState::windowStateChanged',
 }
 
 export enum IdleStateChannel {
   Changed = 'UCAP::idleState::changed',
-  StartCheck = 'UCAP::idleState::startCheck'
+  StartCheck = 'UCAP::idleState::startCheck',
 }
diff --git a/projects/ucap-webmessenger-native-electron/src/lib/ucap-electron-native.module.ts b/projects/ucap-webmessenger-native-electron/src/lib/ucap-electron-native.module.ts
deleted file mode 100644
index 629fe2fc..00000000
--- a/projects/ucap-webmessenger-native-electron/src/lib/ucap-electron-native.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { ElectronNativeService } from './services/electron-native.service';
-
-const SERVICES = [ElectronNativeService];
-
-@NgModule({
-  declarations: [],
-  imports: [],
-  exports: []
-})
-export class UCapElectronNativeModule {
-  public static forRoot(): ModuleWithProviders<UCapElectronNativeModule> {
-    return {
-      ngModule: UCapElectronNativeModule,
-      providers: [...SERVICES]
-    };
-  }
-}
diff --git a/projects/ucap-webmessenger-native-electron/src/public-api.ts b/projects/ucap-webmessenger-native-electron/src/public-api.ts
index 2753bcb5..689efae4 100644
--- a/projects/ucap-webmessenger-native-electron/src/public-api.ts
+++ b/projects/ucap-webmessenger-native-electron/src/public-api.ts
@@ -7,5 +7,3 @@ export * from './lib/services/electron-native.service';
 export * from './lib/translate/electron-loader';
 
 export * from './lib/types/channel.type';
-
-export * from './lib/ucap-electron-native.module';
diff --git a/projects/ucap-webmessenger-native/src/lib/config/module-config.ts b/projects/ucap-webmessenger-native/src/lib/config/module-config.ts
new file mode 100644
index 00000000..d4752ac0
--- /dev/null
+++ b/projects/ucap-webmessenger-native/src/lib/config/module-config.ts
@@ -0,0 +1,4 @@
+import { ModuleConfig as CoreModuleConfig } from '@ucap-webmessenger/core';
+
+// tslint:disable-next-line: no-empty-interface
+export interface ModuleConfig extends CoreModuleConfig {}
diff --git a/projects/ucap-webmessenger-native/src/lib/services/native.service.ts b/projects/ucap-webmessenger-native/src/lib/services/native.service.ts
index 4aebb58d..cdfac5de 100644
--- a/projects/ucap-webmessenger-native/src/lib/services/native.service.ts
+++ b/projects/ucap-webmessenger-native/src/lib/services/native.service.ts
@@ -5,27 +5,34 @@ import { WindowIdle } from '../types/window-idle.type';
 import { NotificationRequest } from '../models/notification';
 import { TranslateLoader } from '@ngx-translate/core';
 
-export interface NativeService {
-  postAppInit(): void;
+export abstract class NativeService {
+  abstract postAppInit(): void;
 
-  notify(noti: NotificationRequest): void;
-  closeAllNotify(): void;
+  abstract notify(noti: NotificationRequest): void;
+  abstract closeAllNotify(): void;
 
-  checkForUpdates(): Observable<boolean>;
+  abstract checkForUpdates(): Observable<boolean>;
 
-  showImageViewer(): void;
+  abstract showImageViewer(): void;
 
-  saveFile(buffer: Buffer, fileName: string, path?: string): Observable<string>;
-  readFile(path: string): Observable<Buffer>;
+  abstract saveFile(
+    buffer: Buffer,
+    fileName: string,
+    path?: string
+  ): Observable<string>;
+  abstract readFile(path: string): Observable<Buffer>;
 
-  windowStateChanged(): Observable<WindowState>;
-  windowClose(): void;
-  windowMinimize(): void;
-  windowMaximize(): void;
+  abstract windowStateChanged(): Observable<WindowState>;
+  abstract windowClose(): void;
+  abstract windowMinimize(): void;
+  abstract windowMaximize(): void;
 
-  idleStateChanged(): Observable<WindowIdle>;
+  abstract idleStateChanged(): Observable<WindowIdle>;
 
-  chatOpenRoom(): Observable<string>;
+  abstract chatOpenRoom(): Observable<string>;
 
-  getTranslateLoader(prefix?: string, suffix?: string): TranslateLoader;
+  abstract getTranslateLoader(
+    prefix?: string,
+    suffix?: string
+  ): TranslateLoader;
 }
diff --git a/projects/ucap-webmessenger-native/src/lib/ucap-native.module.ts b/projects/ucap-webmessenger-native/src/lib/ucap-native.module.ts
deleted file mode 100644
index e094b10d..00000000
--- a/projects/ucap-webmessenger-native/src/lib/ucap-native.module.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { NgModule } from '@angular/core';
-
-@NgModule({
-  imports: [],
-  exports: [],
-  declarations: []
-})
-export class UCapNativeModule {}
diff --git a/projects/ucap-webmessenger-native/src/public-api.ts b/projects/ucap-webmessenger-native/src/public-api.ts
index 54f16191..e4b9aef2 100644
--- a/projects/ucap-webmessenger-native/src/public-api.ts
+++ b/projects/ucap-webmessenger-native/src/public-api.ts
@@ -2,12 +2,13 @@
  * Public API Surface of ucap-webmessenger-native
  */
 
+export * from './lib/types/token';
+
 export * from './lib/models/notification';
 
 export * from './lib/services/native.service';
 
-export * from './lib/types/token';
 export * from './lib/types/window-state.type';
 export * from './lib/types/window-idle.type';
 
-export * from './lib/ucap-native.module';
+export * from './lib/config/module-config';
diff --git a/projects/ucap-webmessenger-pi/src/lib/config/module-config.ts b/projects/ucap-webmessenger-pi/src/lib/config/module-config.ts
new file mode 100644
index 00000000..8e49cd75
--- /dev/null
+++ b/projects/ucap-webmessenger-pi/src/lib/config/module-config.ts
@@ -0,0 +1,5 @@
+import { ModuleConfig as CoreModuleConfig } from '@ucap-webmessenger/core';
+
+import { Urls } from './urls';
+
+export interface ModuleConfig extends CoreModuleConfig<Urls> {}
diff --git a/projects/ucap-webmessenger-pi/src/lib/types/token.ts b/projects/ucap-webmessenger-pi/src/lib/config/token.ts
similarity index 66%
rename from projects/ucap-webmessenger-pi/src/lib/types/token.ts
rename to projects/ucap-webmessenger-pi/src/lib/config/token.ts
index 236f4ca7..587bbe11 100644
--- a/projects/ucap-webmessenger-pi/src/lib/types/token.ts
+++ b/projects/ucap-webmessenger-pi/src/lib/config/token.ts
@@ -1,5 +1,5 @@
 import { InjectionToken } from '@angular/core';
 
 export const _MODULE_CONFIG = new InjectionToken(
-  '@ucap-webmessenger/api-public config of module'
+  '@ucap-webmessenger/pi config of module'
 );
diff --git a/projects/ucap-webmessenger-pi/src/lib/types/module-config.ts b/projects/ucap-webmessenger-pi/src/lib/config/urls.ts
similarity index 86%
rename from projects/ucap-webmessenger-pi/src/lib/types/module-config.ts
rename to projects/ucap-webmessenger-pi/src/lib/config/urls.ts
index 8023b6b6..78ec8236 100644
--- a/projects/ucap-webmessenger-pi/src/lib/types/module-config.ts
+++ b/projects/ucap-webmessenger-pi/src/lib/config/urls.ts
@@ -1,4 +1,4 @@
-export interface PiUrls {
+export interface Urls {
   login2: string;
   userTermsAction: string;
   passwordInitStep1: string;
@@ -18,7 +18,3 @@ export interface PiUrls {
   scheduleRetrieveScheduleList: string;
   userScreenCapture: string;
 }
-
-export interface ModuleConfig {
-  urls: PiUrls;
-}
diff --git a/projects/ucap-webmessenger-pi/src/lib/services/pi.service.ts b/projects/ucap-webmessenger-pi/src/lib/services/pi.service.ts
index 294cf6e8..58d10886 100644
--- a/projects/ucap-webmessenger-pi/src/lib/services/pi.service.ts
+++ b/projects/ucap-webmessenger-pi/src/lib/services/pi.service.ts
@@ -4,13 +4,11 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { _MODULE_CONFIG } from '../types/token';
-import { ModuleConfig, PiUrls } from '../types/module-config';
 import {
   Login2Request,
   Login2Response,
   encodeLogin2,
-  decodeLogin2
+  decodeLogin2,
 } from '../apis/login2';
 import { PrivacyTotalRequest, encodePrivacyTotal } from '../apis/privacy-total';
 import { UrlUtil, Parameter } from '@ucap-webmessenger/api';
@@ -18,25 +16,37 @@ import {
   UserTermsActionRequest,
   UserTermsActionResponse,
   encodeUserTermsAction,
-  decodeUserTermsAction
+  decodeUserTermsAction,
 } from '../apis/user-terms-action';
 
+import { _MODULE_CONFIG } from '../config/token';
+import { ModuleConfig } from '../config/module-config';
+import { Urls } from '../config/urls';
+import { UrlConfig } from '@ucap-webmessenger/core';
+
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class PiService {
+  readonly urls: Urls;
+
   constructor(
     @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
     private httpClient: HttpClient
-  ) {}
+  ) {
+    this.urls = UrlConfig.getUrls(
+      this.moduleConfig.hostConfig,
+      this.moduleConfig.urls
+    );
+  }
 
   public login2(req: Login2Request): Observable<Login2Response> {
     return this.httpClient
       .post<any>(
-        this.moduleConfig.urls.login2,
+        this.urls.login2,
         {},
         {
-          params: encodeLogin2(req)
+          params: encodeLogin2(req),
         }
       )
       .pipe(map(res => decodeLogin2(res)));
@@ -47,10 +57,10 @@ export class PiService {
   ): Observable<UserTermsActionResponse> {
     return this.httpClient
       .post<any>(
-        this.moduleConfig.urls.userTermsAction,
+        this.urls.userTermsAction,
         {},
         {
-          params: encodeUserTermsAction(req)
+          params: encodeUserTermsAction(req),
         }
       )
       .pipe(map(res => decodeUserTermsAction(res)));
@@ -61,12 +71,8 @@ export class PiService {
    */
   public privacyTotalUrl(req: PrivacyTotalRequest): string {
     return UrlUtil.format(
-      this.moduleConfig.urls.policyTotal,
+      this.urls.policyTotal,
       encodePrivacyTotal(req) as Parameter
     );
   }
-
-  public get urls(): PiUrls {
-    return this.moduleConfig.urls;
-  }
 }
diff --git a/projects/ucap-webmessenger-pi/src/lib/ucap-pi.module.ts b/projects/ucap-webmessenger-pi/src/lib/ucap-pi.module.ts
index 72224b0f..1522f507 100644
--- a/projects/ucap-webmessenger-pi/src/lib/ucap-pi.module.ts
+++ b/projects/ucap-webmessenger-pi/src/lib/ucap-pi.module.ts
@@ -1,15 +1,16 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { _MODULE_CONFIG } from './types/token';
 
 import { PiService } from './services/pi.service';
-import { ModuleConfig } from './types/module-config';
+
+import { _MODULE_CONFIG } from './config/token';
+import { ModuleConfig } from './config/module-config';
 
 const SERVICES = [PiService];
 
 @NgModule({
   declarations: [],
   imports: [],
-  exports: []
+  exports: [],
 })
 export class UCapPiModule {
   public static forRoot(
@@ -17,7 +18,7 @@ export class UCapPiModule {
   ): ModuleWithProviders<UCapPiModule> {
     return {
       ngModule: UCapPiModule,
-      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES]
+      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES],
     };
   }
 }
diff --git a/projects/ucap-webmessenger-pi/src/public-api.ts b/projects/ucap-webmessenger-pi/src/public-api.ts
index 9ffbe7a7..fbe99147 100644
--- a/projects/ucap-webmessenger-pi/src/public-api.ts
+++ b/projects/ucap-webmessenger-pi/src/public-api.ts
@@ -2,8 +2,6 @@
  * Public API Surface of ucap-webmessenger-pi
  */
 
-export * from './lib/types/module-config';
-
 export * from './lib/apis/pi';
 export * from './lib/apis/login2';
 export * from './lib/apis/privacy-total';
@@ -14,3 +12,6 @@ export * from './lib/types/response-status.type';
 export * from './lib/services/pi.service';
 
 export * from './lib/ucap-pi.module';
+
+export * from './lib/config/urls';
+export * from './lib/config/module-config';
diff --git a/projects/ucap-webmessenger-protocol/src/lib/config/module-config.ts b/projects/ucap-webmessenger-protocol/src/lib/config/module-config.ts
new file mode 100644
index 00000000..549e4506
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/src/lib/config/module-config.ts
@@ -0,0 +1,13 @@
+import { ModuleConfig as CoreModuleConfig } from '@ucap-webmessenger/core';
+
+import { Urls } from './urls';
+
+export interface ModuleConfig extends CoreModuleConfig<Urls> {
+  reconnect: {
+    delay: number;
+  };
+  requestId: {
+    min: number;
+    max: number;
+  };
+}
diff --git a/projects/ucap-webmessenger-protocol/src/lib/types/token.ts b/projects/ucap-webmessenger-protocol/src/lib/config/token.ts
similarity index 100%
rename from projects/ucap-webmessenger-protocol/src/lib/types/token.ts
rename to projects/ucap-webmessenger-protocol/src/lib/config/token.ts
diff --git a/projects/ucap-webmessenger-protocol/src/lib/config/urls.ts b/projects/ucap-webmessenger-protocol/src/lib/config/urls.ts
new file mode 100644
index 00000000..e6ee501f
--- /dev/null
+++ b/projects/ucap-webmessenger-protocol/src/lib/config/urls.ts
@@ -0,0 +1,3 @@
+export interface Urls {
+  base: string;
+}
diff --git a/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.ts b/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.ts
index e0eea6ca..925a3769 100644
--- a/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.ts
+++ b/projects/ucap-webmessenger-protocol/src/lib/services/protocol.service.ts
@@ -5,24 +5,27 @@ import { share, switchMap, retryWhen, delay, finalize } from 'rxjs/operators';
 
 import { QueueingSubject } from 'queueing-subject';
 
+import { NGXLogger } from 'ngx-logger';
+
 import {
   makeWebSocketObservable,
   GetWebSocketResponses,
-  NormalClosureMessage
+  NormalClosureMessage,
 } from '@ucap-webmessenger/web-socket';
 
-import { _MODULE_CONFIG } from '../types/token';
-import { ModuleConfig } from '../types/module-config';
 import { PacketBody } from '../protocols/packet';
 import {
   PacketBodyValueDivider,
-  PacketBodyDivider
+  PacketBodyDivider,
 } from '../types/packet-body-divider';
 import { PacketBodyValue } from '../types/packet-body-value.type';
 import { SSVC_TYPE_ERROR_RES, ServerErrorCode } from '../types/service';
 import { ProtocolMessage } from '../protocols/protocol';
 
-import { NGXLogger } from 'ngx-logger';
+import { _MODULE_CONFIG } from '../config/token';
+import { ModuleConfig } from '../config/module-config';
+import { Urls } from '../config/urls';
+import { UrlConfig } from '@ucap-webmessenger/core';
 
 interface RequestState {
   subject: Subject<ProtocolMessage>;
@@ -34,9 +37,11 @@ interface RequestState {
 }
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ProtocolService {
+  readonly urls: Urls;
+
   // tslint:disable-next-line: variable-name
   private _requestId: number | null = null;
   private readonly pendingRequests: Map<number, RequestState>;
@@ -51,6 +56,10 @@ export class ProtocolService {
     @Inject(_MODULE_CONFIG) private moduleConfig: ModuleConfig,
     private logger: NGXLogger
   ) {
+    this.urls = UrlConfig.getUrls(
+      this.moduleConfig.hostConfig,
+      this.moduleConfig.urls
+    );
     this.pendingRequests = new Map();
     this.input$ = new QueueingSubject<string>();
     this.serverMessageSubject = new Subject();
@@ -63,7 +72,7 @@ export class ProtocolService {
     return new Observable<void>(subscriber => {
       try {
         this.socket$ = makeWebSocketObservable(
-          `${this.moduleConfig.urls.base}${serverIp ? serverIp : ''}`
+          `${this.urls.base}${serverIp ? serverIp : ''}`
         );
         this.messages$ = this.socket$.pipe(
           switchMap(getResponses => {
@@ -177,7 +186,7 @@ export class ProtocolService {
 
       packet = this.encodePacket(serviceType, subServiceType, [
         ...bodyList,
-        { type: PacketBodyValue.RequestId, value: requestId }
+        { type: PacketBodyValue.RequestId, value: requestId },
       ]);
 
       responseSubject = new Subject<ProtocolMessage>().pipe(
@@ -194,7 +203,7 @@ export class ProtocolService {
 
       this.pendingRequests.set(requestId, {
         subject: responseSubject,
-        request: { serviceType, subServiceType, bodyList }
+        request: { serviceType, subServiceType, bodyList },
       });
     } else {
       packet = this.encodePacket(serviceType, subServiceType, bodyList);
@@ -287,8 +296,8 @@ export class ProtocolService {
         serviceType,
         subServiceType,
         senderSeq,
-        bodyList
-      }
+        bodyList,
+      },
     };
   }
 
diff --git a/projects/ucap-webmessenger-protocol/src/lib/types/module-config.ts b/projects/ucap-webmessenger-protocol/src/lib/types/module-config.ts
deleted file mode 100644
index 167f3e52..00000000
--- a/projects/ucap-webmessenger-protocol/src/lib/types/module-config.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export interface ModuleConfig {
-  urls: {
-    base: string;
-  };
-  reconnect: {
-    delay: number;
-  };
-  requestId: {
-    min: number;
-    max: number;
-  };
-}
diff --git a/projects/ucap-webmessenger-protocol/src/lib/ucap-protocol.module.ts b/projects/ucap-webmessenger-protocol/src/lib/ucap-protocol.module.ts
index 81e3a3e1..ab3f2175 100644
--- a/projects/ucap-webmessenger-protocol/src/lib/ucap-protocol.module.ts
+++ b/projects/ucap-webmessenger-protocol/src/lib/ucap-protocol.module.ts
@@ -1,15 +1,15 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 
 import { ProtocolService } from './services/protocol.service';
-import { ModuleConfig } from './types/module-config';
-import { _MODULE_CONFIG } from './types/token';
+import { ModuleConfig } from './config/module-config';
+import { _MODULE_CONFIG } from './config/token';
 
 const SERVICES = [ProtocolService];
 
 @NgModule({
   declarations: [],
   imports: [],
-  exports: []
+  exports: [],
 })
 export class UCapProtocolModule {
   public static forRoot(
@@ -17,7 +17,7 @@ export class UCapProtocolModule {
   ): ModuleWithProviders<UCapProtocolModule> {
     return {
       ngModule: UCapProtocolModule,
-      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES]
+      providers: [{ provide: _MODULE_CONFIG, useValue: config }, ...SERVICES],
     };
   }
 }
diff --git a/projects/ucap-webmessenger-protocol/src/public-api.ts b/projects/ucap-webmessenger-protocol/src/public-api.ts
index c0cd2637..0f7b82be 100644
--- a/projects/ucap-webmessenger-protocol/src/public-api.ts
+++ b/projects/ucap-webmessenger-protocol/src/public-api.ts
@@ -7,9 +7,11 @@ export * from './lib/protocols/protocol';
 
 export * from './lib/services/protocol.service';
 
-export * from './lib/types/module-config';
 export * from './lib/types/packet-body-divider';
 export * from './lib/types/packet-body-value.type';
 export * from './lib/types/service';
 
 export * from './lib/ucap-protocol.module';
+
+export * from './lib/config/urls';
+export * from './lib/config/module-config';
diff --git a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
index e99f1d24..37e8206f 100644
--- a/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
+++ b/projects/ucap-webmessenger-ui/src/lib/dialogs/alert.dialog.component.html
@@ -9,7 +9,7 @@
     </div>
   </mat-card-content>
   <mat-card-actions class="button-farm flex-row">
-    <button mat-stroked-button (click)="onClickConfirm(false)" class="mat-primary">
+    <button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
       Confirm
     </button>
   </mat-card-actions>
diff --git a/tsconfig.json b/tsconfig.json
index d28256cd..b51156af 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,6 @@
     "typeRoots": ["node_modules/@types"],
     "lib": ["es2018", "dom"],
     "paths": {
-      "@app/*": ["projects/ucap-webmessenger-app/src/app/*"],
       "@ucap-webmessenger/core": [
         "projects/ucap-webmessenger-core/src/public-api"
       ],
@@ -126,6 +125,8 @@
       "@ucap-webmessenger/util": [
         "projects/ucap-webmessenger-util/src/public-api"
       ],
+      "@app/*": ["projects/ucap-webmessenger-app/src/app/*"],
+
       "@ucap-webmessenger/electron-core": [
         "electron-projects/ucap-webmessenger-electron-core/src/public-api"
       ],