From 35f82466a0a53eaada05e57e868e12daaf27c943 Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Fri, 6 Apr 2018 20:02:18 +0900
Subject: [PATCH] packages added.

---
 src/app/app-routing.module.ts                 |   3 +-
 src/app/app.component.html                    |  40 +-
 src/app/app.component.ts                      | 313 +-------------
 src/app/app.module.ts                         |  25 +-
 .../layout/menu/app.menu.component.ts         |   3 +-
 .../layout/menu/app.submenu.component.ts      |   3 +-
 .../layout/profile/app.profile.component.ts   |   3 +-
 .../right-panel/app.rightpanel.component.ts   |   3 +-
 .../layout/topbar/app.topbar.component.ts     |   3 +-
 .../layout2/footer/footer.component.ts        |  15 -
 .../layout2/header/header.component.html      |   1 -
 .../layout2/header/header.component.scss      |  17 -
 .../layout2/header/header.component.ts        |  34 --
 .../component/layout2/layout.module.ts        |  29 --
 .../component/layout2/sidebar/menu-element.ts |  83 ----
 .../layout2/sidebar/sidebar.component.html    |   1 -
 .../layout2/sidebar/sidebar.component.scss    |   4 -
 .../layout2/sidebar/sidebar.component.ts      |  20 -
 .../sub-menubar/sub-menubar.component.html    |   1 -
 .../sub-menubar/sub-menubar.component.ts      |  20 -
 src/app/pages/home/home-page.component.html   |   4 +-
 src/app/pages/pages-routing.module.ts         |   1 -
 src/app/pages/pages.component.html            |  35 +-
 src/app/pages/pages.component.ts              | 316 +++++++++++++-
 src/app/pages/pages.module.ts                 |  23 +
 .../commons/prime-ng/prime-ng.module.ts       | 281 ++++++-------
 src/packages/discovery/component/index.ts     |   5 +
 .../component/setting/setting.component.html  |  85 ++++
 .../component/setting/setting.component.scss} |   0
 .../setting/setting.component.spec.ts}        |  12 +-
 .../component/setting/setting.component.ts    | 392 ++++++++++++++++++
 .../discovery/discovery-logger.module.ts      |  10 +
 .../discovery/discovery-rpc.module.ts         |  13 +
 .../discovery/discovery-store.module.ts       |  19 +
 src/packages/discovery/discovery.constant.ts  |   3 +
 src/packages/discovery/discovery.module.ts    |  39 ++
 src/packages/discovery/model/DiscoveryHost.ts |  10 +
 src/packages/discovery/model/DiscoveryPort.ts |  11 +
 .../discovery/model/DiscoveryService.ts       |   3 +
 .../discovery/model/DiscoveryStartInfo.ts     |  11 +
 src/packages/discovery/model/DiscoveryZone.ts |   7 +
 src/packages/discovery/model/Host.ts          |  15 +
 src/packages/discovery/model/Port.ts          |  15 +
 src/packages/discovery/model/PortType.ts      |   8 +
 src/packages/discovery/model/Service.ts       |  10 +
 src/packages/discovery/model/Zone.ts          |  12 +
 src/packages/discovery/model/index.ts         |  11 +
 .../service/discovery.service.spec.ts         |  15 +
 .../discovery/service/discovery.service.ts    |  42 ++
 src/packages/discovery/service/index.ts       |   7 +
 .../service/target-discovery.service.spec.ts  |  15 +
 .../service/target-discovery.service.ts       |  31 ++
 .../store/discover/discover.action.ts         |  82 ++++
 .../store/discover/discover.effect.spec.ts    |  15 +
 .../store/discover/discover.effect.ts         |  66 +++
 .../store/discover/discover.reducer.ts        | 205 +++++++++
 .../store/discover/discover.state.ts          |  16 +
 .../discovery/store/discover/index.ts         |   4 +
 src/packages/discovery/store/index.ts         |  42 ++
 src/packages/discovery/store/regist/index.ts  |   4 +
 .../discovery/store/regist/regist.action.ts   |  45 ++
 .../store/regist/regist.effect.spec.ts        |  15 +
 .../discovery/store/regist/regist.effect.ts   |  51 +++
 .../discovery/store/regist/regist.reducer.ts  |  45 ++
 .../discovery/store/regist/regist.state.ts    |  18 +
 src/packages/discovery/store/setting/index.ts |   4 +
 .../discovery/store/setting/setting.action.ts |  42 ++
 .../store/setting/setting.effect.spec.ts      |  15 +
 .../discovery/store/setting/setting.effect.ts |  51 +++
 .../store/setting/setting.reducer.ts          |  48 +++
 .../discovery/store/setting/setting.state.ts  |  22 +
 .../subscriber/discovery.subscriber.ts        |  47 +++
 src/packages/discovery/subscriber/index.ts    |   5 +
 src/packages/infra/component/index.ts         |   5 +
 .../infra/component/map/map.component.html    |  55 +++
 .../infra/component/map/map.component.scss    |  78 ++++
 .../infra/component/map/map.component.spec.ts |  25 ++
 src/packages/infra/infra-store.module.ts      |  19 +
 src/packages/infra/infra.constant.ts          |   3 +
 src/packages/infra/infra.module.ts            |  38 ++
 src/packages/infra/model/Infra.ts             |  13 +
 src/packages/infra/model/InfraHost.ts         |  10 +
 src/packages/infra/model/InfraMachine.ts      |   8 +
 src/packages/infra/model/InfraOS.ts           |  11 +
 .../infra/model/InfraOSApplication.ts         |  10 +
 src/packages/infra/model/InfraOSDaemon.ts     |   9 +
 src/packages/infra/model/InfraOSPort.ts       |  13 +
 src/packages/infra/model/InfraService.ts      |  13 +
 src/packages/infra/model/index.ts             |   8 +
 src/packages/infra/service/index.ts           |   5 +
 .../infra/service/infra.service.spec.ts       |  15 +
 src/packages/infra/service/infra.service.ts   |  29 ++
 src/packages/infra/store/index.ts             |  31 ++
 src/packages/infra/store/list/index.ts        |   4 +
 src/packages/infra/store/list/list.action.ts  |  63 +++
 .../infra/store/list/list.effect.spec.ts      |  15 +
 src/packages/infra/store/list/list.effect.ts  |  64 +++
 src/packages/infra/store/list/list.reducer.ts |  39 ++
 src/packages/infra/store/list/list.state.ts   |  30 ++
 .../component/signin/signin.component.html    |  93 ++---
 src/packages/member/model/Member.ts           |   4 +-
 .../crawler-input-store.module.ts             |  24 ++
 .../crawler-input.constant.ts                 |   3 +
 .../crawler-input.module.ts                   |  23 +
 .../model/MetaCrawlerInputItem.ts             |  17 +
 .../service/crawler-input-item.service.ts     |  23 +
 .../meta/crawler-input-item/service/index.ts  |   5 +
 .../meta/crawler-input-item/store/index.ts    |  30 ++
 .../crawler-input-item/store/list/index.ts    |   4 +
 .../store/list/list.action.ts                 |  37 ++
 .../store/list/list.effect.spec.ts            |  15 +
 .../store/list/list.effect.ts                 |  51 +++
 .../store/list/list.reducer.ts                |  43 ++
 .../store/list/list.state.ts                  |  15 +
 .../meta/crawler/crawler-store.module.ts      |  24 ++
 src/packages/meta/crawler/crawler.constant.ts |   3 +
 src/packages/meta/crawler/crawler.module.ts   |  22 +
 .../meta/crawler/model/MetaCrawler.ts         |  34 ++
 .../meta/crawler/service/crawler.service.ts   |  22 +
 src/packages/meta/crawler/service/index.ts    |   5 +
 src/packages/meta/crawler/store/index.ts      |  30 ++
 src/packages/meta/crawler/store/list/index.ts |   4 +
 .../meta/crawler/store/list/list.action.ts    |  36 ++
 .../crawler/store/list/list.effect.spec.ts    |  15 +
 .../meta/crawler/store/list/list.effect.ts    |  51 +++
 .../meta/crawler/store/list/list.reducer.ts   |  43 ++
 .../meta/crawler/store/list/list.state.ts     |  15 +
 .../history-type/model/MetaHistoryType.ts     |  14 +
 .../meta/infra-type/model/MetaInfraType.ts    |  16 +
 .../infra-vendor/model/MetaInfraVendor.ts     |  65 +++
 .../meta/input-type/model/MetaInputType.ts    |  15 +
 .../member-status/model/MetaMemberStatus.ts   |  12 +
 .../meta/model-temp/MetaVendorCrawler.ts      |  10 +
 .../model-temp/MetaVendorCrawlerSensorItem.ts |  13 +
 .../meta/model-temp/index.ts}                 |   0
 .../model/MetaNoAuthProbeStatus.ts            |  11 +
 .../notification/model/MetaNotification.ts    |   7 +
 .../model/MetaProbeArchitecture.ts            |  11 +
 .../meta/probe-os/model/MetaProbeOs.ts        |  13 +
 .../probe-package/model/MetaProbePackage.ts   |  11 +
 .../probe-status/model/MetaProbeStatus.ts     |  10 +
 .../model/MetaProbeTaskType.ts                |   7 +
 .../probe-version/model/MetaProbeVersion.ts   |   5 +
 .../model/MetaSensorDisplayItem.ts            |  15 +
 .../sensor-display-item-store.module.ts       |  24 ++
 .../sensor-display-item.constant.ts           |   3 +
 .../sensor-display-item.module.ts             |  22 +
 .../meta/sensor-display-item/service/index.ts |   5 +
 .../service/sensor-display-item.service.ts    |  23 +
 .../meta/sensor-display-item/store/index.ts   |  30 ++
 .../sensor-display-item/store/list/index.ts   |   4 +
 .../store/list/list.action.ts                 |  37 ++
 .../store/list/list.effect.spec.ts            |  15 +
 .../store/list/list.effect.ts                 |  52 +++
 .../store/list/list.reducer.ts                |  43 ++
 .../store/list/list.state.ts                  |  15 +
 .../model/MetaSensorItemKey.ts                |  12 +
 .../model/MetaSensorItemType.ts               |   6 +
 .../model/MetaSensorItemUnit.ts               |   6 +
 .../meta/sensor-item/model/MetaSensorItem.ts  |  10 +
 .../sensor-status/model/MetaSensorStatus.ts   |  10 +
 src/packages/noauth/component/index.ts        |   5 +
 .../noauth/component/list/list.component.html |  38 ++
 .../component/list/list.component.scss}       |   0
 .../component/list/list.component.spec.ts}    |  12 +-
 .../noauth/component/list/list.component.ts   |  88 ++++
 src/packages/noauth/model/NoAuthProbe.ts      |  24 ++
 src/packages/noauth/model/index.ts            |   1 +
 .../noauth/noauth-probe-store.module.ts       |  24 ++
 src/packages/noauth/noauth-probe.constant.ts  |   3 +
 src/packages/noauth/noauth.module.ts          |  25 ++
 src/packages/noauth/service/index.ts          |   5 +
 .../service/noauth-probe.service.spec.ts      |  15 +
 .../noauth/service/noauth-probe.service.ts    |  33 ++
 src/packages/noauth/store/index.ts            |  29 ++
 .../noauth/store/noauth-probe/index.ts        |   4 +
 .../store/noauth-probe/noauth-probe.action.ts |  88 ++++
 .../noauth-probe/noauth-probe.effect.spec.ts  |  15 +
 .../store/noauth-probe/noauth-probe.effect.ts |  82 ++++
 .../noauth-probe/noauth-probe.reducer.ts      | 104 +++++
 .../store/noauth-probe/noauth-probe.state.ts  |  15 +
 .../badge/notification.component.html         |  53 +++
 .../badge/notification.component.scss         | 168 ++++++++
 .../badge/notification.component.spec.ts      |  25 ++
 .../component/badge/notification.component.ts | 119 ++++++
 src/packages/notification/component/index.ts  |   7 +
 .../notification/notification.component.html  |  29 ++
 .../notification/notification.component.scss  |   3 +
 .../notification.component.spec.ts            |  25 ++
 .../notification/notification.component.ts    |  78 ++++
 .../notification/model/Notification.ts        |  14 +
 src/packages/notification/model/index.ts      |   1 +
 .../notification/notification-store.module.ts |  24 ++
 .../notification/notification.constant.ts     |   3 +
 .../notification/notification.module.ts       |  24 ++
 src/packages/notification/service/index.ts    |   5 +
 .../service/notification.service.spec.ts      |  15 +
 .../service/notification.service.ts           |  33 ++
 .../notification/store/detail/index.ts        |   4 +
 .../store/detail/notification.action.ts       |  61 +++
 .../store/detail/notification.effect.spec.ts  |  15 +
 .../store/detail/notification.effect.ts       |  50 +++
 .../store/detail/notification.reducer.ts      |  44 ++
 .../store/detail/notification.state.ts        |  14 +
 src/packages/notification/store/index.ts      |  38 ++
 src/packages/notification/store/list/index.ts |   4 +
 .../store/list/notification.action.ts         |  61 +++
 .../store/list/notification.effect.spec.ts    |  15 +
 .../store/list/notification.effect.ts         |  63 +++
 .../store/list/notification.reducer.ts        |  69 +++
 .../store/list/notification.state.ts          |  14 +
 .../component/detail/detail.component.html    |  35 ++
 .../component/detail/detail.component.scss    |   0
 .../detail/detail.component.spec.ts}          |  12 +-
 .../component/detail/detail.component.ts      | 156 +++++++
 .../download/download.component.html          |  15 +
 .../download/download.component.scss          |  36 ++
 .../download/download.component.spec.ts}      |  12 +-
 .../component/download/download.component.ts  |  27 ++
 src/packages/probe/component/index.ts         |   9 +
 .../probe/component/list/list.component.html  |  45 ++
 .../probe/component/list/list.component.scss  |  14 +
 .../component/list/list.component.spec.ts     |  25 ++
 .../probe/component/list/list.component.ts    |  93 +++++
 src/packages/probe/model/Probe.ts             |  20 +
 src/packages/probe/model/ProbeHost.ts         |   9 +
 src/packages/probe/model/ProbeTask.ts         |  14 +
 src/packages/probe/model/index.ts             |   3 +
 src/packages/probe/probe-store.module.ts      |  24 ++
 src/packages/probe/probe.constant.ts          |   3 +
 src/packages/probe/probe.module.ts            |  40 ++
 src/packages/probe/service/index.ts           |   5 +
 .../probe/service/probe.service.spec.ts       |  15 +
 src/packages/probe/service/probe.service.ts   |  29 ++
 .../probe/store/detail/detail.action.ts       |  37 ++
 .../probe/store/detail/detail.effect.spec.ts  |  15 +
 .../probe/store/detail/detail.effect.ts       |  49 +++
 .../probe/store/detail/detail.reducer.ts      |  49 +++
 .../probe/store/detail/detail.state.ts        |  41 ++
 src/packages/probe/store/detail/index.ts      |   4 +
 src/packages/probe/store/index.ts             |  38 ++
 src/packages/probe/store/list/index.ts        |   4 +
 src/packages/probe/store/list/list.action.ts  |  38 ++
 .../probe/store/list/list.effect.spec.ts      |  15 +
 src/packages/probe/store/list/list.effect.ts  |  51 +++
 src/packages/probe/store/list/list.reducer.ts |  48 +++
 src/packages/probe/store/list/list.state.ts   |  19 +
 src/packages/sensor-item/component/index.ts   |   5 +
 .../component/list/list.component.html        |  45 ++
 .../component/list/list.component.scss        |  14 +
 .../component/list/list.component.spec.ts     |  25 ++
 .../component/list/list.component.ts          |  63 +++
 src/packages/sensor-item/model/SensorItem.ts  |   9 +
 .../sensor-item/model/SensorItemDependency.ts |   8 +
 .../sensor-item/sensor-item-store.module.ts   |  24 ++
 .../sensor-item/sensor-item.constant.ts       |   3 +
 .../sensor-item/sensor-item.module.ts         |  25 ++
 src/packages/sensor-item/service/index.ts     |   7 +
 .../service/sensor-item-dependency.service.ts |  29 ++
 .../service/sensor-item.service.ts            |  22 +
 src/packages/sensor-item/store/index.ts       |  30 ++
 .../sensor-item/store/key-list/index.ts       |   4 +
 .../sensor-item/store/key-list/list.action.ts |  37 ++
 .../store/key-list/list.effect.spec.ts        |  15 +
 .../sensor-item/store/key-list/list.effect.ts |  51 +++
 .../store/key-list/list.reducer.ts            |  43 ++
 .../sensor-item/store/key-list/list.state.ts  |  15 +
 .../component/detail/detail.component.html    |   1 +
 .../component/detail/detail.component.scss    |   0
 .../component/detail/detail.component.spec.ts |  25 ++
 .../component/detail/detail.component.ts      |  22 +
 src/packages/sensor/component/index.ts        |  25 ++
 .../list/filter/filter.component.html         |  30 ++
 .../list/filter/filter.component.scss         |   9 +
 .../list/filter/filter.component.spec.ts      |  25 ++
 .../component/list/filter/filter.component.ts |  24 ++
 .../sensor/component/list/list.component.html |  55 +++
 .../sensor/component/list/list.component.scss |  14 +
 .../component/list/list.component.spec.ts     |  25 ++
 .../sensor/component/list/list.component.ts   |  90 ++++
 .../name-tag/name-tag.component.html          |   5 +
 .../name-tag/name-tag.component.scss          |   0
 .../name-tag/name-tag.component.spec.ts       |   0
 .../component/name-tag/name-tag.component.ts  |  59 +++
 .../setting-result.component.html             |  90 ++++
 .../setting-result.component.scss             |  25 ++
 .../setting-result.component.spec.ts          |  25 ++
 .../setting-result.component.ts               |  71 ++++
 .../crawler-auth/crawler-auth.component.html  |  31 ++
 .../crawler-auth/crawler-auth.component.scss  |   0
 .../crawler-auth.component.spec.ts            |  25 ++
 .../crawler-auth/crawler-auth.component.ts    |  67 +++
 .../crawler-selector.component.html           |  21 +
 .../crawler-selector.component.scss           |   8 +
 .../crawler-selector.component.spec.ts        |  25 ++
 .../crawler-selector.component.ts             |  52 +++
 .../sensor-item-selector.component.html       |  34 ++
 .../sensor-item-selector.component.scss       |   0
 .../sensor-item-selector.component.spec.ts    |  25 ++
 .../sensor-item-selector.component.ts         | 104 +++++
 .../setting-etc/setting-etc.component.html    |  56 +++
 .../setting-etc/setting-etc.component.scss    |   9 +
 .../setting-etc/setting-etc.component.spec.ts |  25 ++
 .../setting-etc/setting-etc.component.ts      |  62 +++
 .../component/setting/setting.component.html  |  37 ++
 .../component/setting/setting.component.scss  |  31 ++
 .../setting/setting.component.spec.ts         |  25 ++
 .../component/setting/setting.component.ts    | 111 +++++
 .../target-selector.component.html            |  21 +
 .../target-selector.component.scss            |   8 +
 .../target-selector.component.spec.ts         |  25 ++
 .../target-selector.component.ts              |  78 ++++
 src/packages/sensor/model/Sensor.ts           |  14 +
 src/packages/sensor/model/SensorRegistInfo.ts |  14 +
 src/packages/sensor/model/index.ts            |   2 +
 src/packages/sensor/sensor-store.module.ts    |  24 ++
 src/packages/sensor/sensor.constant.ts        |   3 +
 src/packages/sensor/sensor.module.ts          |  47 +++
 src/packages/sensor/service/index.ts          |   5 +
 .../sensor/service/sensor.service.spec.ts     |  15 +
 src/packages/sensor/service/sensor.service.ts |  39 ++
 src/packages/sensor/store/index.ts            |  39 ++
 src/packages/sensor/store/list/index.ts       |   4 +
 src/packages/sensor/store/list/list.action.ts |  86 ++++
 .../sensor/store/list/list.effect.spec.ts     |   0
 src/packages/sensor/store/list/list.effect.ts |  78 ++++
 .../sensor/store/list/list.reducer.ts         |  96 +++++
 src/packages/sensor/store/list/list.state.ts  |  15 +
 src/packages/sensor/store/regist/index.ts     |   4 +
 .../sensor/store/regist/regist.action.ts      |  38 ++
 .../sensor/store/regist/regist.effect.ts      |  49 +++
 .../sensor/store/regist/regist.reducer.ts     |  45 ++
 .../sensor/store/regist/regist.state.ts       |  16 +
 src/packages/sensor/store/regist/regist.ts    |   4 +
 .../settings/member/component/index.ts        |   5 +
 .../member/component/totp/totp.component.html |  39 ++
 .../member/component/totp/totp.component.scss |   0
 .../component/totp/totp.component.spec.ts     |  25 ++
 .../member/component/totp/totp.component.ts   |  93 +++++
 .../member/member-totp-store.module.ts        |  24 ++
 .../settings/member/member-totp.constant.ts   |   3 +
 .../settings/member/member-totp.module.ts     |  32 ++
 .../settings/member/model/MemberTotp.ts       |  10 +
 src/packages/settings/member/model/index.ts   |   0
 src/packages/settings/member/service/index.ts |   5 +
 .../service/member-totp.service.spec.ts       |  15 +
 .../member/service/member-totp.service.ts     |  34 ++
 src/packages/settings/member/store/index.ts   |  31 ++
 .../settings/member/store/totp/index.ts       |   4 +
 .../settings/member/store/totp/totp.action.ts |  89 ++++
 .../member/store/totp/totp.effect.spec.ts     |  15 +
 .../settings/member/store/totp/totp.effect.ts |  93 +++++
 .../member/store/totp/totp.reducer.ts         |  71 ++++
 .../settings/member/store/totp/totp.state.ts  |  15 +
 .../component/detail/detail.component.html    |  59 +++
 .../component/detail/detail.component.scss    |  37 ++
 .../component/detail/detail.component.spec.ts |  25 ++
 .../component/detail/detail.component.ts      | 103 +++++
 src/packages/target/component/index.ts        |   9 +
 .../list/filter/filter.component.html         |  19 +
 .../list/filter/filter.component.scss         |   9 +
 .../list/filter/filter.component.spec.ts      |  25 ++
 .../component/list/filter/filter.component.ts |  17 +
 .../target/component/list/list.component.html |  42 ++
 .../target/component/list/list.component.scss |  14 +
 .../component/list/list.component.spec.ts     |  25 ++
 .../target/component/list/list.component.ts   |  57 +++
 src/packages/target/model/Target.ts           |  11 +
 src/packages/target/model/index.ts            |   1 +
 src/packages/target/service/index.ts          |   5 +
 .../target/service/target.service.spec.ts     |  15 +
 src/packages/target/service/target.service.ts |  38 ++
 src/packages/target/store/index.ts            |  30 ++
 src/packages/target/store/target/index.ts     |   4 +
 .../target/store/target/target.action.ts      |  36 ++
 .../target/store/target/target.effect.spec.ts |  15 +
 .../target/store/target/target.effect.ts      |  46 ++
 .../target/store/target/target.reducer.ts     |  45 ++
 .../target/store/target/target.state.ts       |  15 +
 src/packages/target/target-store.module.ts    |  24 ++
 src/packages/target/target.constant.ts        |   3 +
 src/packages/target/target.module.ts          |  25 ++
 382 files changed, 10630 insertions(+), 855 deletions(-)
 delete mode 100644 src/app/commons/component/layout2/footer/footer.component.ts
 delete mode 100644 src/app/commons/component/layout2/header/header.component.html
 delete mode 100644 src/app/commons/component/layout2/header/header.component.scss
 delete mode 100644 src/app/commons/component/layout2/header/header.component.ts
 delete mode 100644 src/app/commons/component/layout2/layout.module.ts
 delete mode 100644 src/app/commons/component/layout2/sidebar/menu-element.ts
 delete mode 100644 src/app/commons/component/layout2/sidebar/sidebar.component.html
 delete mode 100644 src/app/commons/component/layout2/sidebar/sidebar.component.scss
 delete mode 100644 src/app/commons/component/layout2/sidebar/sidebar.component.ts
 delete mode 100644 src/app/commons/component/layout2/sub-menubar/sub-menubar.component.html
 delete mode 100644 src/app/commons/component/layout2/sub-menubar/sub-menubar.component.ts
 create mode 100644 src/packages/discovery/component/index.ts
 create mode 100644 src/packages/discovery/component/setting/setting.component.html
 rename src/{app/commons/component/layout2/footer/footer.component.html => packages/discovery/component/setting/setting.component.scss} (100%)
 rename src/{app/commons/component/layout2/sidebar/sidebar.component.spec.ts => packages/discovery/component/setting/setting.component.spec.ts} (56%)
 create mode 100644 src/packages/discovery/component/setting/setting.component.ts
 create mode 100644 src/packages/discovery/discovery-logger.module.ts
 create mode 100644 src/packages/discovery/discovery-rpc.module.ts
 create mode 100644 src/packages/discovery/discovery-store.module.ts
 create mode 100644 src/packages/discovery/discovery.constant.ts
 create mode 100644 src/packages/discovery/discovery.module.ts
 create mode 100644 src/packages/discovery/model/DiscoveryHost.ts
 create mode 100644 src/packages/discovery/model/DiscoveryPort.ts
 create mode 100644 src/packages/discovery/model/DiscoveryService.ts
 create mode 100644 src/packages/discovery/model/DiscoveryStartInfo.ts
 create mode 100644 src/packages/discovery/model/DiscoveryZone.ts
 create mode 100644 src/packages/discovery/model/Host.ts
 create mode 100644 src/packages/discovery/model/Port.ts
 create mode 100644 src/packages/discovery/model/PortType.ts
 create mode 100644 src/packages/discovery/model/Service.ts
 create mode 100644 src/packages/discovery/model/Zone.ts
 create mode 100644 src/packages/discovery/model/index.ts
 create mode 100644 src/packages/discovery/service/discovery.service.spec.ts
 create mode 100644 src/packages/discovery/service/discovery.service.ts
 create mode 100644 src/packages/discovery/service/index.ts
 create mode 100644 src/packages/discovery/service/target-discovery.service.spec.ts
 create mode 100644 src/packages/discovery/service/target-discovery.service.ts
 create mode 100644 src/packages/discovery/store/discover/discover.action.ts
 create mode 100644 src/packages/discovery/store/discover/discover.effect.spec.ts
 create mode 100644 src/packages/discovery/store/discover/discover.effect.ts
 create mode 100644 src/packages/discovery/store/discover/discover.reducer.ts
 create mode 100644 src/packages/discovery/store/discover/discover.state.ts
 create mode 100644 src/packages/discovery/store/discover/index.ts
 create mode 100644 src/packages/discovery/store/index.ts
 create mode 100644 src/packages/discovery/store/regist/index.ts
 create mode 100644 src/packages/discovery/store/regist/regist.action.ts
 create mode 100644 src/packages/discovery/store/regist/regist.effect.spec.ts
 create mode 100644 src/packages/discovery/store/regist/regist.effect.ts
 create mode 100644 src/packages/discovery/store/regist/regist.reducer.ts
 create mode 100644 src/packages/discovery/store/regist/regist.state.ts
 create mode 100644 src/packages/discovery/store/setting/index.ts
 create mode 100644 src/packages/discovery/store/setting/setting.action.ts
 create mode 100644 src/packages/discovery/store/setting/setting.effect.spec.ts
 create mode 100644 src/packages/discovery/store/setting/setting.effect.ts
 create mode 100644 src/packages/discovery/store/setting/setting.reducer.ts
 create mode 100644 src/packages/discovery/store/setting/setting.state.ts
 create mode 100644 src/packages/discovery/subscriber/discovery.subscriber.ts
 create mode 100644 src/packages/discovery/subscriber/index.ts
 create mode 100644 src/packages/infra/component/index.ts
 create mode 100644 src/packages/infra/component/map/map.component.html
 create mode 100644 src/packages/infra/component/map/map.component.scss
 create mode 100644 src/packages/infra/component/map/map.component.spec.ts
 create mode 100644 src/packages/infra/infra-store.module.ts
 create mode 100644 src/packages/infra/infra.constant.ts
 create mode 100644 src/packages/infra/infra.module.ts
 create mode 100644 src/packages/infra/model/Infra.ts
 create mode 100644 src/packages/infra/model/InfraHost.ts
 create mode 100644 src/packages/infra/model/InfraMachine.ts
 create mode 100644 src/packages/infra/model/InfraOS.ts
 create mode 100644 src/packages/infra/model/InfraOSApplication.ts
 create mode 100644 src/packages/infra/model/InfraOSDaemon.ts
 create mode 100644 src/packages/infra/model/InfraOSPort.ts
 create mode 100644 src/packages/infra/model/InfraService.ts
 create mode 100644 src/packages/infra/model/index.ts
 create mode 100644 src/packages/infra/service/index.ts
 create mode 100644 src/packages/infra/service/infra.service.spec.ts
 create mode 100644 src/packages/infra/service/infra.service.ts
 create mode 100644 src/packages/infra/store/index.ts
 create mode 100644 src/packages/infra/store/list/index.ts
 create mode 100644 src/packages/infra/store/list/list.action.ts
 create mode 100644 src/packages/infra/store/list/list.effect.spec.ts
 create mode 100644 src/packages/infra/store/list/list.effect.ts
 create mode 100644 src/packages/infra/store/list/list.reducer.ts
 create mode 100644 src/packages/infra/store/list/list.state.ts
 create mode 100644 src/packages/meta/crawler-input-item/crawler-input-store.module.ts
 create mode 100644 src/packages/meta/crawler-input-item/crawler-input.constant.ts
 create mode 100644 src/packages/meta/crawler-input-item/crawler-input.module.ts
 create mode 100644 src/packages/meta/crawler-input-item/model/MetaCrawlerInputItem.ts
 create mode 100644 src/packages/meta/crawler-input-item/service/crawler-input-item.service.ts
 create mode 100644 src/packages/meta/crawler-input-item/service/index.ts
 create mode 100644 src/packages/meta/crawler-input-item/store/index.ts
 create mode 100644 src/packages/meta/crawler-input-item/store/list/index.ts
 create mode 100644 src/packages/meta/crawler-input-item/store/list/list.action.ts
 create mode 100644 src/packages/meta/crawler-input-item/store/list/list.effect.spec.ts
 create mode 100644 src/packages/meta/crawler-input-item/store/list/list.effect.ts
 create mode 100644 src/packages/meta/crawler-input-item/store/list/list.reducer.ts
 create mode 100644 src/packages/meta/crawler-input-item/store/list/list.state.ts
 create mode 100644 src/packages/meta/crawler/crawler-store.module.ts
 create mode 100644 src/packages/meta/crawler/crawler.constant.ts
 create mode 100644 src/packages/meta/crawler/crawler.module.ts
 create mode 100644 src/packages/meta/crawler/model/MetaCrawler.ts
 create mode 100644 src/packages/meta/crawler/service/crawler.service.ts
 create mode 100644 src/packages/meta/crawler/service/index.ts
 create mode 100644 src/packages/meta/crawler/store/index.ts
 create mode 100644 src/packages/meta/crawler/store/list/index.ts
 create mode 100644 src/packages/meta/crawler/store/list/list.action.ts
 create mode 100644 src/packages/meta/crawler/store/list/list.effect.spec.ts
 create mode 100644 src/packages/meta/crawler/store/list/list.effect.ts
 create mode 100644 src/packages/meta/crawler/store/list/list.reducer.ts
 create mode 100644 src/packages/meta/crawler/store/list/list.state.ts
 create mode 100644 src/packages/meta/history-type/model/MetaHistoryType.ts
 create mode 100644 src/packages/meta/infra-type/model/MetaInfraType.ts
 create mode 100644 src/packages/meta/infra-vendor/model/MetaInfraVendor.ts
 create mode 100644 src/packages/meta/input-type/model/MetaInputType.ts
 create mode 100644 src/packages/meta/member-status/model/MetaMemberStatus.ts
 create mode 100644 src/packages/meta/model-temp/MetaVendorCrawler.ts
 create mode 100644 src/packages/meta/model-temp/MetaVendorCrawlerSensorItem.ts
 rename src/{app/commons/component/layout2/footer/footer.component.scss => packages/meta/model-temp/index.ts} (100%)
 create mode 100644 src/packages/meta/noauth-probe-status/model/MetaNoAuthProbeStatus.ts
 create mode 100644 src/packages/meta/notification/model/MetaNotification.ts
 create mode 100644 src/packages/meta/probe-architecture/model/MetaProbeArchitecture.ts
 create mode 100644 src/packages/meta/probe-os/model/MetaProbeOs.ts
 create mode 100644 src/packages/meta/probe-package/model/MetaProbePackage.ts
 create mode 100644 src/packages/meta/probe-status/model/MetaProbeStatus.ts
 create mode 100644 src/packages/meta/probe-task-type/model/MetaProbeTaskType.ts
 create mode 100644 src/packages/meta/probe-version/model/MetaProbeVersion.ts
 create mode 100644 src/packages/meta/sensor-display-item/model/MetaSensorDisplayItem.ts
 create mode 100644 src/packages/meta/sensor-display-item/sensor-display-item-store.module.ts
 create mode 100644 src/packages/meta/sensor-display-item/sensor-display-item.constant.ts
 create mode 100644 src/packages/meta/sensor-display-item/sensor-display-item.module.ts
 create mode 100644 src/packages/meta/sensor-display-item/service/index.ts
 create mode 100644 src/packages/meta/sensor-display-item/service/sensor-display-item.service.ts
 create mode 100644 src/packages/meta/sensor-display-item/store/index.ts
 create mode 100644 src/packages/meta/sensor-display-item/store/list/index.ts
 create mode 100644 src/packages/meta/sensor-display-item/store/list/list.action.ts
 create mode 100644 src/packages/meta/sensor-display-item/store/list/list.effect.spec.ts
 create mode 100644 src/packages/meta/sensor-display-item/store/list/list.effect.ts
 create mode 100644 src/packages/meta/sensor-display-item/store/list/list.reducer.ts
 create mode 100644 src/packages/meta/sensor-display-item/store/list/list.state.ts
 create mode 100644 src/packages/meta/sensor-item-key/model/MetaSensorItemKey.ts
 create mode 100644 src/packages/meta/sensor-item-type/model/MetaSensorItemType.ts
 create mode 100644 src/packages/meta/sensor-item-unit/model/MetaSensorItemUnit.ts
 create mode 100644 src/packages/meta/sensor-item/model/MetaSensorItem.ts
 create mode 100644 src/packages/meta/sensor-status/model/MetaSensorStatus.ts
 create mode 100644 src/packages/noauth/component/index.ts
 create mode 100644 src/packages/noauth/component/list/list.component.html
 rename src/{app/commons/component/layout2/sub-menubar/sub-menubar.component.scss => packages/noauth/component/list/list.component.scss} (100%)
 rename src/{app/commons/component/layout2/footer/footer.component.spec.ts => packages/noauth/component/list/list.component.spec.ts} (57%)
 create mode 100644 src/packages/noauth/component/list/list.component.ts
 create mode 100644 src/packages/noauth/model/NoAuthProbe.ts
 create mode 100644 src/packages/noauth/model/index.ts
 create mode 100644 src/packages/noauth/noauth-probe-store.module.ts
 create mode 100644 src/packages/noauth/noauth-probe.constant.ts
 create mode 100644 src/packages/noauth/noauth.module.ts
 create mode 100644 src/packages/noauth/service/index.ts
 create mode 100644 src/packages/noauth/service/noauth-probe.service.spec.ts
 create mode 100644 src/packages/noauth/service/noauth-probe.service.ts
 create mode 100644 src/packages/noauth/store/index.ts
 create mode 100644 src/packages/noauth/store/noauth-probe/index.ts
 create mode 100644 src/packages/noauth/store/noauth-probe/noauth-probe.action.ts
 create mode 100644 src/packages/noauth/store/noauth-probe/noauth-probe.effect.spec.ts
 create mode 100644 src/packages/noauth/store/noauth-probe/noauth-probe.effect.ts
 create mode 100644 src/packages/noauth/store/noauth-probe/noauth-probe.reducer.ts
 create mode 100644 src/packages/noauth/store/noauth-probe/noauth-probe.state.ts
 create mode 100644 src/packages/notification/component/badge/notification.component.html
 create mode 100644 src/packages/notification/component/badge/notification.component.scss
 create mode 100644 src/packages/notification/component/badge/notification.component.spec.ts
 create mode 100644 src/packages/notification/component/badge/notification.component.ts
 create mode 100644 src/packages/notification/component/index.ts
 create mode 100644 src/packages/notification/component/notification/notification.component.html
 create mode 100644 src/packages/notification/component/notification/notification.component.scss
 create mode 100644 src/packages/notification/component/notification/notification.component.spec.ts
 create mode 100644 src/packages/notification/component/notification/notification.component.ts
 create mode 100644 src/packages/notification/model/Notification.ts
 create mode 100644 src/packages/notification/model/index.ts
 create mode 100644 src/packages/notification/notification-store.module.ts
 create mode 100644 src/packages/notification/notification.constant.ts
 create mode 100644 src/packages/notification/notification.module.ts
 create mode 100644 src/packages/notification/service/index.ts
 create mode 100644 src/packages/notification/service/notification.service.spec.ts
 create mode 100644 src/packages/notification/service/notification.service.ts
 create mode 100644 src/packages/notification/store/detail/index.ts
 create mode 100644 src/packages/notification/store/detail/notification.action.ts
 create mode 100644 src/packages/notification/store/detail/notification.effect.spec.ts
 create mode 100644 src/packages/notification/store/detail/notification.effect.ts
 create mode 100644 src/packages/notification/store/detail/notification.reducer.ts
 create mode 100644 src/packages/notification/store/detail/notification.state.ts
 create mode 100644 src/packages/notification/store/index.ts
 create mode 100644 src/packages/notification/store/list/index.ts
 create mode 100644 src/packages/notification/store/list/notification.action.ts
 create mode 100644 src/packages/notification/store/list/notification.effect.spec.ts
 create mode 100644 src/packages/notification/store/list/notification.effect.ts
 create mode 100644 src/packages/notification/store/list/notification.reducer.ts
 create mode 100644 src/packages/notification/store/list/notification.state.ts
 create mode 100644 src/packages/probe/component/detail/detail.component.html
 create mode 100644 src/packages/probe/component/detail/detail.component.scss
 rename src/{app/commons/component/layout2/header/header.component.spec.ts => packages/probe/component/detail/detail.component.spec.ts} (57%)
 create mode 100644 src/packages/probe/component/detail/detail.component.ts
 create mode 100644 src/packages/probe/component/download/download.component.html
 create mode 100644 src/packages/probe/component/download/download.component.scss
 rename src/{app/commons/component/layout2/sub-menubar/sub-menubar.component.spec.ts => packages/probe/component/download/download.component.spec.ts} (54%)
 create mode 100644 src/packages/probe/component/download/download.component.ts
 create mode 100644 src/packages/probe/component/index.ts
 create mode 100644 src/packages/probe/component/list/list.component.html
 create mode 100644 src/packages/probe/component/list/list.component.scss
 create mode 100644 src/packages/probe/component/list/list.component.spec.ts
 create mode 100644 src/packages/probe/component/list/list.component.ts
 create mode 100644 src/packages/probe/model/Probe.ts
 create mode 100644 src/packages/probe/model/ProbeHost.ts
 create mode 100644 src/packages/probe/model/ProbeTask.ts
 create mode 100644 src/packages/probe/model/index.ts
 create mode 100644 src/packages/probe/probe-store.module.ts
 create mode 100644 src/packages/probe/probe.constant.ts
 create mode 100644 src/packages/probe/probe.module.ts
 create mode 100644 src/packages/probe/service/index.ts
 create mode 100644 src/packages/probe/service/probe.service.spec.ts
 create mode 100644 src/packages/probe/service/probe.service.ts
 create mode 100644 src/packages/probe/store/detail/detail.action.ts
 create mode 100644 src/packages/probe/store/detail/detail.effect.spec.ts
 create mode 100644 src/packages/probe/store/detail/detail.effect.ts
 create mode 100644 src/packages/probe/store/detail/detail.reducer.ts
 create mode 100644 src/packages/probe/store/detail/detail.state.ts
 create mode 100644 src/packages/probe/store/detail/index.ts
 create mode 100644 src/packages/probe/store/index.ts
 create mode 100644 src/packages/probe/store/list/index.ts
 create mode 100644 src/packages/probe/store/list/list.action.ts
 create mode 100644 src/packages/probe/store/list/list.effect.spec.ts
 create mode 100644 src/packages/probe/store/list/list.effect.ts
 create mode 100644 src/packages/probe/store/list/list.reducer.ts
 create mode 100644 src/packages/probe/store/list/list.state.ts
 create mode 100644 src/packages/sensor-item/component/index.ts
 create mode 100644 src/packages/sensor-item/component/list/list.component.html
 create mode 100644 src/packages/sensor-item/component/list/list.component.scss
 create mode 100644 src/packages/sensor-item/component/list/list.component.spec.ts
 create mode 100644 src/packages/sensor-item/component/list/list.component.ts
 create mode 100644 src/packages/sensor-item/model/SensorItem.ts
 create mode 100644 src/packages/sensor-item/model/SensorItemDependency.ts
 create mode 100644 src/packages/sensor-item/sensor-item-store.module.ts
 create mode 100644 src/packages/sensor-item/sensor-item.constant.ts
 create mode 100644 src/packages/sensor-item/sensor-item.module.ts
 create mode 100644 src/packages/sensor-item/service/index.ts
 create mode 100644 src/packages/sensor-item/service/sensor-item-dependency.service.ts
 create mode 100644 src/packages/sensor-item/service/sensor-item.service.ts
 create mode 100644 src/packages/sensor-item/store/index.ts
 create mode 100644 src/packages/sensor-item/store/key-list/index.ts
 create mode 100644 src/packages/sensor-item/store/key-list/list.action.ts
 create mode 100644 src/packages/sensor-item/store/key-list/list.effect.spec.ts
 create mode 100644 src/packages/sensor-item/store/key-list/list.effect.ts
 create mode 100644 src/packages/sensor-item/store/key-list/list.reducer.ts
 create mode 100644 src/packages/sensor-item/store/key-list/list.state.ts
 create mode 100644 src/packages/sensor/component/detail/detail.component.html
 create mode 100644 src/packages/sensor/component/detail/detail.component.scss
 create mode 100644 src/packages/sensor/component/detail/detail.component.spec.ts
 create mode 100644 src/packages/sensor/component/detail/detail.component.ts
 create mode 100644 src/packages/sensor/component/index.ts
 create mode 100644 src/packages/sensor/component/list/filter/filter.component.html
 create mode 100644 src/packages/sensor/component/list/filter/filter.component.scss
 create mode 100644 src/packages/sensor/component/list/filter/filter.component.spec.ts
 create mode 100644 src/packages/sensor/component/list/filter/filter.component.ts
 create mode 100644 src/packages/sensor/component/list/list.component.html
 create mode 100644 src/packages/sensor/component/list/list.component.scss
 create mode 100644 src/packages/sensor/component/list/list.component.spec.ts
 create mode 100644 src/packages/sensor/component/list/list.component.ts
 create mode 100644 src/packages/sensor/component/name-tag/name-tag.component.html
 create mode 100644 src/packages/sensor/component/name-tag/name-tag.component.scss
 create mode 100644 src/packages/sensor/component/name-tag/name-tag.component.spec.ts
 create mode 100644 src/packages/sensor/component/name-tag/name-tag.component.ts
 create mode 100644 src/packages/sensor/component/setting-result/setting-result.component.html
 create mode 100644 src/packages/sensor/component/setting-result/setting-result.component.scss
 create mode 100644 src/packages/sensor/component/setting-result/setting-result.component.spec.ts
 create mode 100644 src/packages/sensor/component/setting-result/setting-result.component.ts
 create mode 100644 src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html
 create mode 100644 src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.scss
 create mode 100644 src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.spec.ts
 create mode 100644 src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts
 create mode 100644 src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html
 create mode 100644 src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.scss
 create mode 100644 src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.spec.ts
 create mode 100644 src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts
 create mode 100644 src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html
 create mode 100644 src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.scss
 create mode 100644 src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.spec.ts
 create mode 100644 src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts
 create mode 100644 src/packages/sensor/component/setting/setting-etc/setting-etc.component.html
 create mode 100644 src/packages/sensor/component/setting/setting-etc/setting-etc.component.scss
 create mode 100644 src/packages/sensor/component/setting/setting-etc/setting-etc.component.spec.ts
 create mode 100644 src/packages/sensor/component/setting/setting-etc/setting-etc.component.ts
 create mode 100644 src/packages/sensor/component/setting/setting.component.html
 create mode 100644 src/packages/sensor/component/setting/setting.component.scss
 create mode 100644 src/packages/sensor/component/setting/setting.component.spec.ts
 create mode 100644 src/packages/sensor/component/setting/setting.component.ts
 create mode 100644 src/packages/sensor/component/setting/target-selector/target-selector.component.html
 create mode 100644 src/packages/sensor/component/setting/target-selector/target-selector.component.scss
 create mode 100644 src/packages/sensor/component/setting/target-selector/target-selector.component.spec.ts
 create mode 100644 src/packages/sensor/component/setting/target-selector/target-selector.component.ts
 create mode 100644 src/packages/sensor/model/Sensor.ts
 create mode 100644 src/packages/sensor/model/SensorRegistInfo.ts
 create mode 100644 src/packages/sensor/model/index.ts
 create mode 100644 src/packages/sensor/sensor-store.module.ts
 create mode 100644 src/packages/sensor/sensor.constant.ts
 create mode 100644 src/packages/sensor/sensor.module.ts
 create mode 100644 src/packages/sensor/service/index.ts
 create mode 100644 src/packages/sensor/service/sensor.service.spec.ts
 create mode 100644 src/packages/sensor/service/sensor.service.ts
 create mode 100644 src/packages/sensor/store/index.ts
 create mode 100644 src/packages/sensor/store/list/index.ts
 create mode 100644 src/packages/sensor/store/list/list.action.ts
 create mode 100644 src/packages/sensor/store/list/list.effect.spec.ts
 create mode 100644 src/packages/sensor/store/list/list.effect.ts
 create mode 100644 src/packages/sensor/store/list/list.reducer.ts
 create mode 100644 src/packages/sensor/store/list/list.state.ts
 create mode 100644 src/packages/sensor/store/regist/index.ts
 create mode 100644 src/packages/sensor/store/regist/regist.action.ts
 create mode 100644 src/packages/sensor/store/regist/regist.effect.ts
 create mode 100644 src/packages/sensor/store/regist/regist.reducer.ts
 create mode 100644 src/packages/sensor/store/regist/regist.state.ts
 create mode 100644 src/packages/sensor/store/regist/regist.ts
 create mode 100644 src/packages/settings/member/component/index.ts
 create mode 100644 src/packages/settings/member/component/totp/totp.component.html
 create mode 100644 src/packages/settings/member/component/totp/totp.component.scss
 create mode 100644 src/packages/settings/member/component/totp/totp.component.spec.ts
 create mode 100644 src/packages/settings/member/component/totp/totp.component.ts
 create mode 100644 src/packages/settings/member/member-totp-store.module.ts
 create mode 100644 src/packages/settings/member/member-totp.constant.ts
 create mode 100644 src/packages/settings/member/member-totp.module.ts
 create mode 100644 src/packages/settings/member/model/MemberTotp.ts
 create mode 100644 src/packages/settings/member/model/index.ts
 create mode 100644 src/packages/settings/member/service/index.ts
 create mode 100644 src/packages/settings/member/service/member-totp.service.spec.ts
 create mode 100644 src/packages/settings/member/service/member-totp.service.ts
 create mode 100644 src/packages/settings/member/store/index.ts
 create mode 100644 src/packages/settings/member/store/totp/index.ts
 create mode 100644 src/packages/settings/member/store/totp/totp.action.ts
 create mode 100644 src/packages/settings/member/store/totp/totp.effect.spec.ts
 create mode 100644 src/packages/settings/member/store/totp/totp.effect.ts
 create mode 100644 src/packages/settings/member/store/totp/totp.reducer.ts
 create mode 100644 src/packages/settings/member/store/totp/totp.state.ts
 create mode 100644 src/packages/target/component/detail/detail.component.html
 create mode 100644 src/packages/target/component/detail/detail.component.scss
 create mode 100644 src/packages/target/component/detail/detail.component.spec.ts
 create mode 100644 src/packages/target/component/detail/detail.component.ts
 create mode 100644 src/packages/target/component/index.ts
 create mode 100644 src/packages/target/component/list/filter/filter.component.html
 create mode 100644 src/packages/target/component/list/filter/filter.component.scss
 create mode 100644 src/packages/target/component/list/filter/filter.component.spec.ts
 create mode 100644 src/packages/target/component/list/filter/filter.component.ts
 create mode 100644 src/packages/target/component/list/list.component.html
 create mode 100644 src/packages/target/component/list/list.component.scss
 create mode 100644 src/packages/target/component/list/list.component.spec.ts
 create mode 100644 src/packages/target/component/list/list.component.ts
 create mode 100644 src/packages/target/model/Target.ts
 create mode 100644 src/packages/target/model/index.ts
 create mode 100644 src/packages/target/service/index.ts
 create mode 100644 src/packages/target/service/target.service.spec.ts
 create mode 100644 src/packages/target/service/target.service.ts
 create mode 100644 src/packages/target/store/index.ts
 create mode 100644 src/packages/target/store/target/index.ts
 create mode 100644 src/packages/target/store/target/target.action.ts
 create mode 100644 src/packages/target/store/target/target.effect.spec.ts
 create mode 100644 src/packages/target/store/target/target.effect.ts
 create mode 100644 src/packages/target/store/target/target.reducer.ts
 create mode 100644 src/packages/target/store/target/target.state.ts
 create mode 100644 src/packages/target/target-store.module.ts
 create mode 100644 src/packages/target/target.constant.ts
 create mode 100644 src/packages/target/target.module.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index f771974..c75ae12 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,7 +3,8 @@ import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
 import { AuthGuard } from './commons/guard/auth.guard';
 
 const routes: Routes = [
-  { path: '', loadChildren: './pages/pages.module#PagesModule' },
+  // { path: '', loadChildren: './pages/pages.module#PagesModule', canActivate: [AuthGuard]  },
+  { path: '', loadChildren: './pages/pages.module#PagesModule'},
   { path: 'auth', loadChildren: './pages/auth/auth-page.module#AuthPageModule' },
   // { path: 'errors', loadChildren: './pages/errors/errors-page.module#ErrorsPageModule' },
 ];
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b9662e5..90c6b64 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,39 +1 @@
-<div *ngIf="isAuthRouteActivated();else layout">
-    <router-outlet></router-outlet>
-</div>
-<ng-template #layout>
-    <div class="layout-wrapper" [ngClass]="{'layout-compact':layoutCompact}" (click)="onLayoutClick()">
-
-        <div #layoutContainer class="layout-container" [ngClass]="{'menu-layout-static': !isOverlay(),
-            'menu-layout-overlay': isOverlay(),
-            'layout-menu-overlay-active': overlayMenuActive,
-            'menu-layout-horizontal': isHorizontal(),
-            'menu-layout-slim': isSlim(),
-            'layout-menu-static-inactive': staticMenuDesktopInactive,
-            'layout-menu-static-active': staticMenuMobileActive}">
-
-            <of-topbar></of-topbar>
-
-            <div class="layout-menu" [ngClass]="{'layout-menu-dark':darkMenu}" (click)="onMenuClick($event)">
-                <p-scrollPanel #scrollPanel [style]="{height: '100%'}">
-                    <of-inline-profile *ngIf="profileMode=='inline'&&!isHorizontal()"></of-inline-profile>
-                    <of-menu [reset]="resetMenu"></of-menu>
-                </p-scrollPanel>
-            </div>
-
-            <div class="layout-main">
-                <of-breadcrumb></of-breadcrumb>
-
-                <div class="layout-content">
-                    <router-outlet></router-outlet>
-
-                    <of-footer></of-footer>
-                </div>
-            </div>
-
-            <of-rightpanel></of-rightpanel>
-
-            <div class="layout-mask"></div>
-        </div>
-    </div>
-</ng-template>
\ No newline at end of file
+<router-outlet></router-outlet>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7f9cd09..2d0b308 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,321 +2,10 @@ import { Component, AfterViewInit, ElementRef, Renderer, ViewChild, OnDestroy, O
 import { ScrollPanel } from 'primeng/primeng';
 import { Router } from '@angular/router';
 
-enum MenuOrientation {
-    STATIC,
-    OVERLAY,
-    SLIM,
-    HORIZONTAL
-}
-
 @Component({
     selector: 'of-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements AfterViewInit, OnDestroy, OnInit {
-
-    layoutCompact = true;
-
-    layoutMode: MenuOrientation = MenuOrientation.STATIC;
-
-    darkMenu = false;
-
-    profileMode = 'inline';
-
-    rotateMenuButton: boolean;
-
-    topbarMenuActive: boolean;
-
-    overlayMenuActive: boolean;
-
-    staticMenuDesktopInactive: boolean;
-
-    staticMenuMobileActive: boolean;
-
-    rightPanelActive: boolean;
-
-    rightPanelClick: boolean;
-
-    layoutContainer: HTMLDivElement;
-
-    layoutMenuScroller: HTMLDivElement;
-
-    menuClick: boolean;
-
-    topbarItemClick: boolean;
-
-    activeTopbarItem: any;
-
-    resetMenu: boolean;
-
-    menuHoverActive: boolean;
-
-    @ViewChild('layoutContainer') layourContainerViewChild: ElementRef;
-
-    @ViewChild('scrollPanel') layoutMenuScrollerViewChild: ScrollPanel;
-
-    rippleInitListener: any;
-
-    rippleMouseDownListener: any;
-
-    constructor(public renderer: Renderer, public zone: NgZone, private router: Router) { }
-
-    ngOnInit() {
-        if (this.isAuthRouteActivated()) {
-            console.log('auth?');
-            return;
-        }
-        this.zone.runOutsideAngular(() => { this.bindRipple(); });
-    }
-
-    bindRipple() {
-        this.rippleInitListener = this.init.bind(this);
-        document.addEventListener('DOMContentLoaded', this.rippleInitListener);
-    }
-
-    init() {
-        this.rippleMouseDownListener = this.rippleMouseDown.bind(this);
-        document.addEventListener('mousedown', this.rippleMouseDownListener, false);
-    }
-
-    rippleMouseDown(e) {
-        for (let target = e.target; target && target !== this; target = target['parentNode']) {
-            if (!this.isVisible(target)) {
-                continue;
-            }
-
-            // Element.matches() -> https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
-            if (this.selectorMatches(target, '.ripplelink, .ui-button')) {
-                const element = target;
-                this.rippleEffect(element, e);
-                break;
-            }
-        }
-    }
-
-    selectorMatches(el, selector) {
-        const p = Element.prototype;
-        const f = p['matches'] || p['webkitMatchesSelector'] || p['mozMatchesSelector'] || p['msMatchesSelector'] || function (s) {
-            return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
-        };
-        return f.call(el, selector);
-    }
-
-    isVisible(el) {
-        return !!(el.offsetWidth || el.offsetHeight);
-    }
-
-    rippleEffect(element, e) {
-        if (element.querySelector('.ink') === null) {
-            const inkEl = document.createElement('span');
-            this.addClass(inkEl, 'ink');
-
-            if (this.hasClass(element, 'ripplelink')) {
-                element.querySelector('span').insertAdjacentHTML('afterend', '<span class=\'ink\'></span>');
-            } else {
-                element.appendChild(inkEl);
-            }
-        }
-
-        const ink = element.querySelector('.ink');
-        this.removeClass(ink, 'ripple-animate');
-
-        if (!ink.offsetHeight && !ink.offsetWidth) {
-            const d = Math.max(element.offsetWidth, element.offsetHeight);
-            ink.style.height = d + 'px';
-            ink.style.width = d + 'px';
-        }
-
-        const x = e.pageX - this.getOffset(element).left - (ink.offsetWidth / 2);
-        const y = e.pageY - this.getOffset(element).top - (ink.offsetHeight / 2);
-
-        ink.style.top = y + 'px';
-        ink.style.left = x + 'px';
-        ink.style.pointerEvents = 'none';
-        this.addClass(ink, 'ripple-animate');
-    }
-    hasClass(element, className) {
-        if (element.classList) {
-            return element.classList.contains(className);
-        } else {
-            return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
-        }
-    }
-
-    addClass(element, className) {
-        if (element.classList) {
-            element.classList.add(className);
-        } else {
-            element.className += ' ' + className;
-        }
-    }
-
-    removeClass(element, className) {
-        if (element.classList) {
-            element.classList.remove(className);
-        } else {
-            element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
-        }
-    }
-
-    getOffset(el) {
-        const rect = el.getBoundingClientRect();
-
-        return {
-            top: rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0),
-            left: rect.left + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0),
-        };
-    }
-
-    unbindRipple() {
-        if (this.rippleInitListener) {
-            document.removeEventListener('DOMContentLoaded', this.rippleInitListener);
-        }
-        if (this.rippleMouseDownListener) {
-            document.removeEventListener('mousedown', this.rippleMouseDownListener);
-        }
-    }
-
-    ngAfterViewInit() {
-        this.layoutContainer = <HTMLDivElement>this.layourContainerViewChild.nativeElement;
-        setTimeout(() => { this.layoutMenuScrollerViewChild.moveBar(); }, 100);
-    }
-
-    onLayoutClick() {
-        if (!this.topbarItemClick) {
-            this.activeTopbarItem = null;
-            this.topbarMenuActive = false;
-        }
-
-        if (!this.menuClick) {
-            if (this.isHorizontal() || this.isSlim()) {
-                this.resetMenu = true;
-            }
-
-            if (this.overlayMenuActive || this.staticMenuMobileActive) {
-                this.hideOverlayMenu();
-            }
-
-            this.menuHoverActive = false;
-        }
-
-        if (!this.rightPanelClick) {
-            this.rightPanelActive = false;
-        }
-
-        this.topbarItemClick = false;
-        this.menuClick = false;
-        this.rightPanelClick = false;
-    }
-
-    onMenuButtonClick(event) {
-        this.menuClick = true;
-        this.rotateMenuButton = !this.rotateMenuButton;
-        this.topbarMenuActive = false;
-
-        if (this.layoutMode === MenuOrientation.OVERLAY) {
-            this.overlayMenuActive = !this.overlayMenuActive;
-        } else {
-            if (this.isDesktop()) {
-                this.staticMenuDesktopInactive = !this.staticMenuDesktopInactive;
-            } else {
-                this.staticMenuMobileActive = !this.staticMenuMobileActive;
-            }
-        }
-
-        event.preventDefault();
-    }
-
-    onMenuClick($event) {
-        this.menuClick = true;
-        this.resetMenu = false;
-    }
-
-    onTopbarMenuButtonClick(event) {
-        this.topbarItemClick = true;
-        this.topbarMenuActive = !this.topbarMenuActive;
-
-        this.hideOverlayMenu();
-
-        event.preventDefault();
-    }
-
-    onTopbarItemClick(event, item) {
-        this.topbarItemClick = true;
-
-        if (this.activeTopbarItem === item) {
-            this.activeTopbarItem = null;
-        } else {
-            this.activeTopbarItem = item;
-        }
-
-        event.preventDefault();
-    }
-
-    onRightPanelButtonClick(event) {
-        this.rightPanelClick = true;
-        this.rightPanelActive = !this.rightPanelActive;
-        event.preventDefault();
-    }
-
-    onRightPanelClick() {
-        this.rightPanelClick = true;
-    }
-
-    hideOverlayMenu() {
-        this.rotateMenuButton = false;
-        this.overlayMenuActive = false;
-        this.staticMenuMobileActive = false;
-    }
-
-    isTablet() {
-        const width = window.innerWidth;
-        return width <= 1024 && width > 640;
-    }
-
-    isDesktop() {
-        return window.innerWidth > 1024;
-    }
-
-    isMobile() {
-        return window.innerWidth <= 640;
-    }
-
-    isOverlay() {
-        return this.layoutMode === MenuOrientation.OVERLAY;
-    }
-
-    isHorizontal() {
-        return this.layoutMode === MenuOrientation.HORIZONTAL;
-    }
-
-    isSlim() {
-        return this.layoutMode === MenuOrientation.SLIM;
-    }
-
-    changeToStaticMenu() {
-        this.layoutMode = MenuOrientation.STATIC;
-    }
-
-    changeToOverlayMenu() {
-        this.layoutMode = MenuOrientation.OVERLAY;
-    }
-
-    changeToHorizontalMenu() {
-        this.layoutMode = MenuOrientation.HORIZONTAL;
-    }
-
-    changeToSlimMenu() {
-        this.layoutMode = MenuOrientation.SLIM;
-    }
-
-    ngOnDestroy() {
-        this.unbindRipple();
-    }
-
-    isAuthRouteActivated() {
-        return this.router.url.indexOf('/auth') > -1;
-    }
-
+export class AppComponent  {
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b5029aa..65e5214 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 
-import { PrimeNGModules } from '../packages/commons/prime-ng/prime-ng.module';
 import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 import { AppStoreModule } from './app-store.module';
@@ -10,23 +9,16 @@ import { AppRESTModule } from './app-rest.module';
 import { AppLoggerModule } from './app-logger.module';
 
 import { AppComponent } from './app.component';
-import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 
 import { CookieService } from 'ngx-cookie-service';
 import { AuthGuard } from './commons/guard/auth.guard';
-
-import { AppMenuComponent } from 'app/commons/component/layout/menu/app.menu.component';
-import { AppSubMenuComponent } from 'app/commons/component/layout/menu/app.submenu.component';
-import { AppTopbarComponent } from 'app/commons/component/layout/topbar/app.topbar.component';
-import { AppFooterComponent } from 'app/commons/component/layout/footer/app.footer.component';
-import { AppBreadcrumbComponent } from 'app/commons/component/layout/breadcrumb/app.breadcrumb.component';
-import { AppRightpanelComponent } from 'app/commons/component/layout/right-panel/app.rightpanel.component';
-import { AppInlineProfileComponent } from 'app/commons/component/layout/profile/app.profile.component';
-import { BreadcrumbService } from 'app/commons/component/layout/breadcrumb/breadcrumb.service';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
     imports: [
-        PrimeNGModules,
+        BrowserModule,
+        BrowserAnimationsModule,
         HttpClientModule,
         AppRoutingModule,
         AppStoreModule,
@@ -37,17 +29,8 @@ import { BreadcrumbService } from 'app/commons/component/layout/breadcrumb/bread
     ],
     declarations: [
         AppComponent,
-        AppMenuComponent,
-        AppSubMenuComponent,
-        AppTopbarComponent,
-        AppFooterComponent,
-        AppBreadcrumbComponent,
-        AppRightpanelComponent,
-        AppInlineProfileComponent,
     ],
     providers: [
-        { provide: LocationStrategy, useClass: HashLocationStrategy },
-        BreadcrumbService,
         CookieService,
         AuthGuard,
     ],
diff --git a/src/app/commons/component/layout/menu/app.menu.component.ts b/src/app/commons/component/layout/menu/app.menu.component.ts
index 6641138..da4aad7 100644
--- a/src/app/commons/component/layout/menu/app.menu.component.ts
+++ b/src/app/commons/component/layout/menu/app.menu.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { MenuItem } from 'primeng/primeng';
 import { AppComponent } from 'app/app.component';
+import { PagesComponent } from '../../../../pages/pages.component';
 
 @Component({
     selector: 'of-menu',
@@ -14,7 +15,7 @@ export class AppMenuComponent implements OnInit {
 
     model: any[];
 
-    constructor(public app: AppComponent) { }
+    constructor(public app: PagesComponent) { }
 
     ngOnInit() {
         this.model = [
diff --git a/src/app/commons/component/layout/menu/app.submenu.component.ts b/src/app/commons/component/layout/menu/app.submenu.component.ts
index 416ac78..33d8626 100644
--- a/src/app/commons/component/layout/menu/app.submenu.component.ts
+++ b/src/app/commons/component/layout/menu/app.submenu.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { MenuItem } from 'primeng/primeng';
 import { AppComponent } from 'app/app.component';
+import { PagesComponent } from '../../../../pages/pages.component';
 
 @Component({
     /* tslint:disable:component-selector */
@@ -41,7 +42,7 @@ export class AppSubMenuComponent {
 
     activeIndex: number;
 
-    constructor(public app: AppComponent) { }
+    constructor(public app: PagesComponent) { }
 
     itemClick(event: Event, item: MenuItem, index: number)  {
         if (this.root) {
diff --git a/src/app/commons/component/layout/profile/app.profile.component.ts b/src/app/commons/component/layout/profile/app.profile.component.ts
index ca158ef..be2e3d4 100644
--- a/src/app/commons/component/layout/profile/app.profile.component.ts
+++ b/src/app/commons/component/layout/profile/app.profile.component.ts
@@ -1,5 +1,6 @@
 import {Component, trigger, state, transition, style, animate} from '@angular/core';
 import {AppComponent} from 'app/app.component';
+import { PagesComponent } from '../../../../pages/pages.component';
 
 @Component({
     selector: 'of-inline-profile',
@@ -21,7 +22,7 @@ export class AppInlineProfileComponent {
 
     active: boolean;
 
-    constructor(public app: AppComponent) {}
+    constructor(public app: PagesComponent) {}
 
     onClick(event) {
         this.active = !this.active;
diff --git a/src/app/commons/component/layout/right-panel/app.rightpanel.component.ts b/src/app/commons/component/layout/right-panel/app.rightpanel.component.ts
index a01e279..964c816 100644
--- a/src/app/commons/component/layout/right-panel/app.rightpanel.component.ts
+++ b/src/app/commons/component/layout/right-panel/app.rightpanel.component.ts
@@ -1,6 +1,7 @@
 import {Component, ViewChild, AfterViewInit} from '@angular/core';
 import {AppComponent} from 'app/app.component';
 import {ScrollPanel} from 'primeng/primeng';
+import { PagesComponent } from '../../../../pages/pages.component';
 
 @Component({
     selector: 'of-rightpanel',
@@ -10,7 +11,7 @@ export class AppRightpanelComponent implements AfterViewInit {
 
     @ViewChild('scrollRightPanel') rightPanelMenuScrollerViewChild: ScrollPanel;
 
-    constructor(public app: AppComponent) {}
+    constructor(public app: PagesComponent) {}
 
     ngAfterViewInit() {
       setTimeout(() => {this.rightPanelMenuScrollerViewChild.moveBar(); }, 100);
diff --git a/src/app/commons/component/layout/topbar/app.topbar.component.ts b/src/app/commons/component/layout/topbar/app.topbar.component.ts
index 00cd536..46badcc 100644
--- a/src/app/commons/component/layout/topbar/app.topbar.component.ts
+++ b/src/app/commons/component/layout/topbar/app.topbar.component.ts
@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
 import {AppComponent} from 'app/app.component';
+import { PagesComponent } from '../../../../pages/pages.component';
 
 @Component({
     selector: 'of-topbar',
@@ -7,6 +8,6 @@ import {AppComponent} from 'app/app.component';
 })
 export class AppTopbarComponent {
 
-    constructor(public app: AppComponent) {}
+    constructor(public app: PagesComponent) {}
 
 }
diff --git a/src/app/commons/component/layout2/footer/footer.component.ts b/src/app/commons/component/layout2/footer/footer.component.ts
deleted file mode 100644
index 12cfc41..0000000
--- a/src/app/commons/component/layout2/footer/footer.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'of-footer',
-  templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.scss']
-})
-export class FooterComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
diff --git a/src/app/commons/component/layout2/header/header.component.html b/src/app/commons/component/layout2/header/header.component.html
deleted file mode 100644
index e010bcb..0000000
--- a/src/app/commons/component/layout2/header/header.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<div>header</div>
\ No newline at end of file
diff --git a/src/app/commons/component/layout2/header/header.component.scss b/src/app/commons/component/layout2/header/header.component.scss
deleted file mode 100644
index e321b91..0000000
--- a/src/app/commons/component/layout2/header/header.component.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-:host {
-    z-index: 4;
-  }
-  
-  .main-toolbar {
-    height: 64px;
-    padding-left: 16px;
-  }
-  
-  .more-btn {
-    height: 100%;
-    min-width: 70px;
-  }
-  
-  .mat-icon-button {
-    margin-right: 10px;
-  }
\ No newline at end of file
diff --git a/src/app/commons/component/layout2/header/header.component.ts b/src/app/commons/component/layout2/header/header.component.ts
deleted file mode 100644
index d4548f0..0000000
--- a/src/app/commons/component/layout2/header/header.component.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
-import { Title } from '@angular/platform-browser';
-
-import { ISubscription } from 'rxjs/Subscription';
-
-import { LocaleService, TranslationService } from 'angular-l10n';
-
-@Component({
-  selector: 'of-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
-})
-export class HeaderComponent implements OnInit {
-
-  countryMenuItems: any[] = [
-    { text: 'United States', language: 'en', country: 'US', currency: 'USD', numberingSystem: 'latn' },
-    { text: 'Korea', language: 'kr', country: 'KR', currency: 'KRW', numberingSystem: 'latn' }
-];
-
-  @Input() sidenav;
-  @Input() sidebar;
-  @Input() drawer;
-  @Input() matDrawerShow;
-
-  searchOpen = false;
-
-
-  constructor(public locale: LocaleService, public translation: TranslationService, public title: Title) { }
-
-  ngOnInit() {
-  }
-
-
-}
diff --git a/src/app/commons/component/layout2/layout.module.ts b/src/app/commons/component/layout2/layout.module.ts
deleted file mode 100644
index 766189c..0000000
--- a/src/app/commons/component/layout2/layout.module.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FooterComponent } from './footer/footer.component';
-import { HeaderComponent } from './header/header.component';
-import { LocalizationModule } from 'angular-l10n';
-import { RouterModule } from '@angular/router';
-import { SidebarComponent } from './sidebar/sidebar.component';
-import { SubMenubarComponent } from './sub-menubar/sub-menubar.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        LocalizationModule,
-        RouterModule,
-    ],
-    declarations: [
-        FooterComponent,
-        HeaderComponent,
-        SidebarComponent,
-        SubMenubarComponent
-    ],
-    exports: [
-        FooterComponent,
-        HeaderComponent,
-        SidebarComponent,
-        SubMenubarComponent
-    ]
-})
-export class LayoutModule { }
diff --git a/src/app/commons/component/layout2/sidebar/menu-element.ts b/src/app/commons/component/layout2/sidebar/menu-element.ts
deleted file mode 100644
index 108f9b2..0000000
--- a/src/app/commons/component/layout2/sidebar/menu-element.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-export const menus = [
-    {
-        'name': 'App.Home',
-        'icon': 'home',
-        'link': '/home',
-        'open': true,
-    },
-    {
-        'name': 'App.Infra',
-        'icon': 'widgets',
-        'link': false,
-        'open': false,
-        'sub': [
-            {
-                'name': 'App.Map',
-                'link': '/map',
-                'icon': 'indeterminate_check_box',
-                'chip': false,
-                'open': false,
-            },
-            {
-                'name': 'App.Sensors',
-                'link': '/sensors',
-                'icon': 'indeterminate_check_box',
-                'chip': false,
-                'open': false,
-            },
-            {
-                'name': 'App.Probes',
-                'link': '/probes',
-                'icon': 'indeterminate_check_box',
-                'chip': false,
-                'open': false,
-            },
-        ]
-    },
-    {
-        'name': 'App.Monitor',
-        'icon': 'widgets',
-        'link': false,
-        'open': false,
-        'sub': [
-            {
-                'name': 'App.Overview',
-                'link': '/overview',
-                'icon': 'indeterminate_check_box',
-                'chip': false,
-                'open': false,
-            },
-            {
-                'name': 'App.Dashboards',
-                'link': '/dashboard',
-                'icon': 'indeterminate_check_box',
-                'chip': { 'value': 3, 'color': 'accent'},
-                'open': false,
-            },
-        ]
-    },
-    {
-        'name': 'App.Alert',
-        'icon': 'warning',
-        'link': '/alert',
-        'open': true,
-    },
-    {
-        'name': 'App.Report',
-        'icon': '',
-        'link': '',
-        'open': true,
-    },
-    {
-        'name': 'App.Log',
-        'icon': '',
-        'link': '',
-        'open': true,
-    },
-    {
-        'name': 'App.Setting',
-        'icon': '',
-        'link': '/auth/signin',
-        'open': true,
-    },
-];
diff --git a/src/app/commons/component/layout2/sidebar/sidebar.component.html b/src/app/commons/component/layout2/sidebar/sidebar.component.html
deleted file mode 100644
index b9f3931..0000000
--- a/src/app/commons/component/layout2/sidebar/sidebar.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<div>sidebar</div>
\ No newline at end of file
diff --git a/src/app/commons/component/layout2/sidebar/sidebar.component.scss b/src/app/commons/component/layout2/sidebar/sidebar.component.scss
deleted file mode 100644
index 6f3acaf..0000000
--- a/src/app/commons/component/layout2/sidebar/sidebar.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@mixin sidemenu($theme) {
-    
-    
-}
\ No newline at end of file
diff --git a/src/app/commons/component/layout2/sidebar/sidebar.component.ts b/src/app/commons/component/layout2/sidebar/sidebar.component.ts
deleted file mode 100644
index 0e451e1..0000000
--- a/src/app/commons/component/layout2/sidebar/sidebar.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { menus } from './menu-element';
-import { Language } from 'angular-l10n';
-
-@Component({
-  selector: 'of-sidebar',
-  templateUrl: './sidebar.component.html',
-  styleUrls: ['./sidebar.component.scss']
-})
-export class SidebarComponent implements OnInit {
-  @Language() lang: string;
-  @Input() iconOnly = false;
-  public menus = menus;
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
diff --git a/src/app/commons/component/layout2/sub-menubar/sub-menubar.component.html b/src/app/commons/component/layout2/sub-menubar/sub-menubar.component.html
deleted file mode 100644
index 3c957b7..0000000
--- a/src/app/commons/component/layout2/sub-menubar/sub-menubar.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<div>submenubar</div>
\ No newline at end of file
diff --git a/src/app/commons/component/layout2/sub-menubar/sub-menubar.component.ts b/src/app/commons/component/layout2/sub-menubar/sub-menubar.component.ts
deleted file mode 100644
index 81fb233..0000000
--- a/src/app/commons/component/layout2/sub-menubar/sub-menubar.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { Language } from 'angular-l10n';
-
-@Component({
-  selector: 'of-sub-menubar',
-  templateUrl: './sub-menubar.component.html',
-  styleUrls: ['./sub-menubar.component.scss']
-})
-export class SubMenubarComponent implements OnInit {
-  @Input() tabs: any;
-
-  constructor(public router: Router) { }
-
-  ngOnInit() {
-  }
-
-
-}
diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html
index 4f86c00..811c037 100644
--- a/src/app/pages/home/home-page.component.html
+++ b/src/app/pages/home/home-page.component.html
@@ -1,3 +1 @@
-<p>
-  Home works!
-</p>
+<p>home works</p>
\ No newline at end of file
diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts
index 428a539..2ff95e3 100644
--- a/src/app/pages/pages-routing.module.ts
+++ b/src/app/pages/pages-routing.module.ts
@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { PagesComponent } from './pages.component';
-import {AuthGuard} from '../commons/guard/auth.guard';
 
 const routes: Routes = [
   {
diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html
index 90c6b64..b021e5f 100644
--- a/src/app/pages/pages.component.html
+++ b/src/app/pages/pages.component.html
@@ -1 +1,34 @@
-<router-outlet></router-outlet>
\ No newline at end of file
+<div class="layout-wrapper" [ngClass]="{'layout-compact':layoutCompact}" (click)="onLayoutClick()">
+
+    <div #layoutContainer class="layout-container" [ngClass]="{'menu-layout-static': !isOverlay(),
+            'menu-layout-overlay': isOverlay(),
+            'layout-menu-overlay-active': overlayMenuActive,
+            'menu-layout-horizontal': isHorizontal(),
+            'menu-layout-slim': isSlim(),
+            'layout-menu-static-inactive': staticMenuDesktopInactive,
+            'layout-menu-static-active': staticMenuMobileActive}">
+
+        <of-topbar></of-topbar>
+
+        <div class="layout-menu" [ngClass]="{'layout-menu-dark':darkMenu}" (click)="onMenuClick($event)">
+            <p-scrollPanel #scrollPanel [style]="{height: '100%'}">
+                <of-inline-profile *ngIf="profileMode=='inline'&&!isHorizontal()"></of-inline-profile>
+                <of-menu [reset]="resetMenu"></of-menu>
+            </p-scrollPanel>
+        </div>
+
+        <div class="layout-main">
+            <of-breadcrumb></of-breadcrumb>
+
+            <div class="layout-content">
+                <router-outlet></router-outlet>
+
+                <of-footer></of-footer>
+            </div>
+        </div>
+
+        <of-rightpanel></of-rightpanel>
+
+        <div class="layout-mask"></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index fcaeb8c..4d41ed3 100644
--- a/src/app/pages/pages.component.ts
+++ b/src/app/pages/pages.component.ts
@@ -1,27 +1,319 @@
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import { Component, AfterViewInit, ElementRef, Renderer, ViewChild, OnDestroy, OnInit, NgZone } from '@angular/core';
+import { ScrollPanel } from 'primeng/primeng';
+import { Router } from '@angular/router';
+
+enum MenuOrientation {
+  STATIC,
+  OVERLAY,
+  SLIM,
+  HORIZONTAL
+}
 
 @Component({
   selector: 'of-pages',
   templateUrl: './pages.component.html',
   styleUrls: ['./pages.component.scss']
 })
-export class PagesComponent implements OnInit {
+export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
+  layoutCompact = true;
 
-  @Input() isVisible = true;
-  visibility = 'shown';
+  layoutMode: MenuOrientation = MenuOrientation.STATIC;
 
-  sideNavOpened = true;
-  matDrawerOpened = false;
-  matDrawerShow = true;
-  sideNavMode = 'side';
+  darkMenu = false;
 
-  constructor() { }
+  profileMode = 'inline';
+
+  rotateMenuButton: boolean;
+
+  topbarMenuActive: boolean;
+
+  overlayMenuActive: boolean;
+
+  staticMenuDesktopInactive: boolean;
+
+  staticMenuMobileActive: boolean;
+
+  rightPanelActive: boolean;
+
+  rightPanelClick: boolean;
+
+  layoutContainer: HTMLDivElement;
+
+  layoutMenuScroller: HTMLDivElement;
+
+  menuClick: boolean;
+
+  topbarItemClick: boolean;
+
+  activeTopbarItem: any;
+
+  resetMenu: boolean;
+
+  menuHoverActive: boolean;
+
+  @ViewChild('layoutContainer') layourContainerViewChild: ElementRef;
+
+  @ViewChild('scrollPanel') layoutMenuScrollerViewChild: ScrollPanel;
+
+  rippleInitListener: any;
+
+  rippleMouseDownListener: any;
+
+  constructor(public renderer: Renderer, public zone: NgZone, private router: Router) { }
 
   ngOnInit() {
-
+    if (this.isAuthRouteActivated()) {
+      return;
+    }
+    this.zone.runOutsideAngular(() => { this.bindRipple(); });
   }
 
-  getRouteAnimation(outlet) {
-    return outlet.activatedRouteData.animation;
+  bindRipple() {
+    this.rippleInitListener = this.init.bind(this);
+    document.addEventListener('DOMContentLoaded', this.rippleInitListener);
+  }
+
+  init() {
+    this.rippleMouseDownListener = this.rippleMouseDown.bind(this);
+    document.addEventListener('mousedown', this.rippleMouseDownListener, false);
+  }
+
+  rippleMouseDown(e) {
+    for (let target = e.target; target && target !== this; target = target['parentNode']) {
+      if (!this.isVisible(target)) {
+        continue;
+      }
+
+      // Element.matches() -> https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+      if (this.selectorMatches(target, '.ripplelink, .ui-button')) {
+        const element = target;
+        this.rippleEffect(element, e);
+        break;
+      }
+    }
+  }
+
+  selectorMatches(el, selector) {
+    const p = Element.prototype;
+    const f = p['matches'] || p['webkitMatchesSelector'] || p['mozMatchesSelector'] || p['msMatchesSelector'] || function (s) {
+      return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
+    };
+    return f.call(el, selector);
+  }
+
+  isVisible(el) {
+    return !!(el.offsetWidth || el.offsetHeight);
+  }
+
+  rippleEffect(element, e) {
+    if (element.querySelector('.ink') === null) {
+      const inkEl = document.createElement('span');
+      this.addClass(inkEl, 'ink');
+
+      if (this.hasClass(element, 'ripplelink')) {
+        element.querySelector('span').insertAdjacentHTML('afterend', '<span class=\'ink\'></span>');
+      } else {
+        element.appendChild(inkEl);
+      }
+    }
+
+    const ink = element.querySelector('.ink');
+    this.removeClass(ink, 'ripple-animate');
+
+    if (!ink.offsetHeight && !ink.offsetWidth) {
+      const d = Math.max(element.offsetWidth, element.offsetHeight);
+      ink.style.height = d + 'px';
+      ink.style.width = d + 'px';
+    }
+
+    const x = e.pageX - this.getOffset(element).left - (ink.offsetWidth / 2);
+    const y = e.pageY - this.getOffset(element).top - (ink.offsetHeight / 2);
+
+    ink.style.top = y + 'px';
+    ink.style.left = x + 'px';
+    ink.style.pointerEvents = 'none';
+    this.addClass(ink, 'ripple-animate');
+  }
+  hasClass(element, className) {
+    if (element.classList) {
+      return element.classList.contains(className);
+    } else {
+      return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
+    }
+  }
+
+  addClass(element, className) {
+    if (element.classList) {
+      element.classList.add(className);
+    } else {
+      element.className += ' ' + className;
+    }
+  }
+
+  removeClass(element, className) {
+    if (element.classList) {
+      element.classList.remove(className);
+    } else {
+      element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+    }
+  }
+
+  getOffset(el) {
+    const rect = el.getBoundingClientRect();
+
+    return {
+      top: rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0),
+      left: rect.left + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0),
+    };
+  }
+
+  unbindRipple() {
+    if (this.rippleInitListener) {
+      document.removeEventListener('DOMContentLoaded', this.rippleInitListener);
+    }
+    if (this.rippleMouseDownListener) {
+      document.removeEventListener('mousedown', this.rippleMouseDownListener);
+    }
+  }
+
+  ngAfterViewInit() {
+    this.layoutContainer = <HTMLDivElement>this.layourContainerViewChild.nativeElement;
+    setTimeout(() => { this.layoutMenuScrollerViewChild.moveBar(); }, 100);
+  }
+
+  onLayoutClick() {
+    if (!this.topbarItemClick) {
+      this.activeTopbarItem = null;
+      this.topbarMenuActive = false;
+    }
+
+    if (!this.menuClick) {
+      if (this.isHorizontal() || this.isSlim()) {
+        this.resetMenu = true;
+      }
+
+      if (this.overlayMenuActive || this.staticMenuMobileActive) {
+        this.hideOverlayMenu();
+      }
+
+      this.menuHoverActive = false;
+    }
+
+    if (!this.rightPanelClick) {
+      this.rightPanelActive = false;
+    }
+
+    this.topbarItemClick = false;
+    this.menuClick = false;
+    this.rightPanelClick = false;
+  }
+
+  onMenuButtonClick(event) {
+    this.menuClick = true;
+    this.rotateMenuButton = !this.rotateMenuButton;
+    this.topbarMenuActive = false;
+
+    if (this.layoutMode === MenuOrientation.OVERLAY) {
+      this.overlayMenuActive = !this.overlayMenuActive;
+    } else {
+      if (this.isDesktop()) {
+        this.staticMenuDesktopInactive = !this.staticMenuDesktopInactive;
+      } else {
+        this.staticMenuMobileActive = !this.staticMenuMobileActive;
+      }
+    }
+
+    event.preventDefault();
+  }
+
+  onMenuClick($event) {
+    this.menuClick = true;
+    this.resetMenu = false;
+  }
+
+  onTopbarMenuButtonClick(event) {
+    this.topbarItemClick = true;
+    this.topbarMenuActive = !this.topbarMenuActive;
+
+    this.hideOverlayMenu();
+
+    event.preventDefault();
+  }
+
+  onTopbarItemClick(event, item) {
+    this.topbarItemClick = true;
+
+    if (this.activeTopbarItem === item) {
+      this.activeTopbarItem = null;
+    } else {
+      this.activeTopbarItem = item;
+    }
+
+    event.preventDefault();
+  }
+
+  onRightPanelButtonClick(event) {
+    this.rightPanelClick = true;
+    this.rightPanelActive = !this.rightPanelActive;
+    event.preventDefault();
+  }
+
+  onRightPanelClick() {
+    this.rightPanelClick = true;
+  }
+
+  hideOverlayMenu() {
+    this.rotateMenuButton = false;
+    this.overlayMenuActive = false;
+    this.staticMenuMobileActive = false;
+  }
+
+  isTablet() {
+    const width = window.innerWidth;
+    return width <= 1024 && width > 640;
+  }
+
+  isDesktop() {
+    return window.innerWidth > 1024;
+  }
+
+  isMobile() {
+    return window.innerWidth <= 640;
+  }
+
+  isOverlay() {
+    return this.layoutMode === MenuOrientation.OVERLAY;
+  }
+
+  isHorizontal() {
+    return this.layoutMode === MenuOrientation.HORIZONTAL;
+  }
+
+  isSlim() {
+    return this.layoutMode === MenuOrientation.SLIM;
+  }
+
+  changeToStaticMenu() {
+    this.layoutMode = MenuOrientation.STATIC;
+  }
+
+  changeToOverlayMenu() {
+    this.layoutMode = MenuOrientation.OVERLAY;
+  }
+
+  changeToHorizontalMenu() {
+    this.layoutMode = MenuOrientation.HORIZONTAL;
+  }
+
+  changeToSlimMenu() {
+    this.layoutMode = MenuOrientation.SLIM;
+  }
+
+  ngOnDestroy() {
+    this.unbindRipple();
+  }
+
+  isAuthRouteActivated() {
+    return this.router.url.indexOf('/auth') > -1;
   }
 }
diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
index f1a61ea..0557889 100644
--- a/src/app/pages/pages.module.ts
+++ b/src/app/pages/pages.module.ts
@@ -1,21 +1,44 @@
 import { NgModule, APP_INITIALIZER} from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { AppMenuComponent } from 'app/commons/component/layout/menu/app.menu.component';
+import { AppSubMenuComponent } from 'app/commons/component/layout/menu/app.submenu.component';
+import { AppTopbarComponent } from 'app/commons/component/layout/topbar/app.topbar.component';
+import { AppFooterComponent } from 'app/commons/component/layout/footer/app.footer.component';
+import { AppBreadcrumbComponent } from 'app/commons/component/layout/breadcrumb/app.breadcrumb.component';
+import { AppRightpanelComponent } from 'app/commons/component/layout/right-panel/app.rightpanel.component';
+import { AppInlineProfileComponent } from 'app/commons/component/layout/profile/app.profile.component';
+import { BreadcrumbService } from 'app/commons/component/layout/breadcrumb/breadcrumb.service';
+
 import {
   LocalizationModule,
 } from 'angular-l10n';
 
 import { PagesComponent } from './pages.component';
 import { PagesRoutingModule } from './pages-routing.module';
+import { LocationStrategy, HashLocationStrategy } from '@angular/common';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
 
 @NgModule({
   imports: [
     CommonModule,
     PagesRoutingModule,
     LocalizationModule,
+    PrimeNGModules,
   ],
   declarations: [
     PagesComponent,
+    AppMenuComponent,
+    AppSubMenuComponent,
+    AppTopbarComponent,
+    AppFooterComponent,
+    AppBreadcrumbComponent,
+    AppRightpanelComponent,
+    AppInlineProfileComponent,
   ],
+  providers: [
+    { provide: LocationStrategy, useClass: HashLocationStrategy },
+    BreadcrumbService,
+  ]
 })
 export class PagesModule { }
diff --git a/src/packages/commons/prime-ng/prime-ng.module.ts b/src/packages/commons/prime-ng/prime-ng.module.ts
index e2291ac..6726477 100644
--- a/src/packages/commons/prime-ng/prime-ng.module.ts
+++ b/src/packages/commons/prime-ng/prime-ng.module.ts
@@ -1,149 +1,140 @@
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
-import {HttpModule} from '@angular/http';
-import {BrowserModule} from '@angular/platform-browser';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {LocationStrategy, HashLocationStrategy} from '@angular/common';
-import {AccordionModule} from 'primeng/primeng';
-import {AutoCompleteModule} from 'primeng/primeng';
-import {BreadcrumbModule} from 'primeng/primeng';
-import {ButtonModule} from 'primeng/primeng';
-import {CalendarModule} from 'primeng/primeng';
-import {CarouselModule} from 'primeng/primeng';
-import {ColorPickerModule} from 'primeng/primeng';
-import {ChartModule} from 'primeng/primeng';
-import {CheckboxModule} from 'primeng/primeng';
-import {ChipsModule} from 'primeng/primeng';
-import {CodeHighlighterModule} from 'primeng/primeng';
-import {ConfirmDialogModule} from 'primeng/primeng';
-import {SharedModule} from 'primeng/primeng';
-import {ContextMenuModule} from 'primeng/primeng';
-import {DataGridModule} from 'primeng/primeng';
-import {DataListModule} from 'primeng/primeng';
-import {DataScrollerModule} from 'primeng/primeng';
-import {DataTableModule} from 'primeng/primeng';
-import {DialogModule} from 'primeng/primeng';
-import {DragDropModule} from 'primeng/primeng';
-import {DropdownModule} from 'primeng/primeng';
-import {EditorModule} from 'primeng/primeng';
-import {FieldsetModule} from 'primeng/primeng';
-import {FileUploadModule} from 'primeng/primeng';
-import {GalleriaModule} from 'primeng/primeng';
-import {GMapModule} from 'primeng/primeng';
-import {GrowlModule} from 'primeng/primeng';
-import {InputMaskModule} from 'primeng/primeng';
-import {InputSwitchModule} from 'primeng/primeng';
-import {InputTextModule} from 'primeng/primeng';
-import {InputTextareaModule} from 'primeng/primeng';
-import {LightboxModule} from 'primeng/primeng';
-import {ListboxModule} from 'primeng/primeng';
-import {MegaMenuModule} from 'primeng/primeng';
-import {MenuModule} from 'primeng/primeng';
-import {MenubarModule} from 'primeng/primeng';
-import {MessagesModule} from 'primeng/primeng';
-import {MultiSelectModule} from 'primeng/primeng';
-import {OrderListModule} from 'primeng/primeng';
-import {OrganizationChartModule} from 'primeng/primeng';
-import {OverlayPanelModule} from 'primeng/primeng';
-import {PaginatorModule} from 'primeng/primeng';
-import {PanelModule} from 'primeng/primeng';
-import {PanelMenuModule} from 'primeng/primeng';
-import {PasswordModule} from 'primeng/primeng';
-import {PickListModule} from 'primeng/primeng';
-import {ProgressBarModule} from 'primeng/primeng';
-import {RadioButtonModule} from 'primeng/primeng';
-import {RatingModule} from 'primeng/primeng';
-import {ScheduleModule} from 'primeng/primeng';
-import {ScrollPanelModule} from 'primeng/scrollpanel';
-import {SelectButtonModule} from 'primeng/primeng';
-import {SlideMenuModule} from 'primeng/primeng';
-import {SliderModule} from 'primeng/primeng';
-import {SpinnerModule} from 'primeng/primeng';
-import {SplitButtonModule} from 'primeng/primeng';
-import {StepsModule} from 'primeng/primeng';
-import {TableModule} from 'primeng/table';
-import {TabMenuModule} from 'primeng/primeng';
-import {TabViewModule} from 'primeng/primeng';
-import {TerminalModule} from 'primeng/primeng';
-import {TieredMenuModule} from 'primeng/primeng';
-import {ToggleButtonModule} from 'primeng/primeng';
-import {ToolbarModule} from 'primeng/primeng';
-import {TooltipModule} from 'primeng/primeng';
-import {TreeModule} from 'primeng/primeng';
-import {TreeTableModule} from 'primeng/primeng';
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { AccordionModule } from 'primeng/primeng';
+import { AutoCompleteModule } from 'primeng/primeng';
+import { BreadcrumbModule } from 'primeng/primeng';
+import { ButtonModule } from 'primeng/primeng';
+import { CalendarModule } from 'primeng/primeng';
+import { CarouselModule } from 'primeng/primeng';
+import { ColorPickerModule } from 'primeng/primeng';
+import { ChartModule } from 'primeng/primeng';
+import { CheckboxModule } from 'primeng/primeng';
+import { ChipsModule } from 'primeng/primeng';
+import { CodeHighlighterModule } from 'primeng/primeng';
+import { ConfirmDialogModule } from 'primeng/primeng';
+import { SharedModule } from 'primeng/primeng';
+import { ContextMenuModule } from 'primeng/primeng';
+import { DataGridModule } from 'primeng/primeng';
+import { DataListModule } from 'primeng/primeng';
+import { DataScrollerModule } from 'primeng/primeng';
+import { DataTableModule } from 'primeng/primeng';
+import { DialogModule } from 'primeng/primeng';
+import { DragDropModule } from 'primeng/primeng';
+import { DropdownModule } from 'primeng/primeng';
+import { EditorModule } from 'primeng/primeng';
+import { FieldsetModule } from 'primeng/primeng';
+import { FileUploadModule } from 'primeng/primeng';
+import { GalleriaModule } from 'primeng/primeng';
+import { GMapModule } from 'primeng/primeng';
+import { GrowlModule } from 'primeng/primeng';
+import { InputMaskModule } from 'primeng/primeng';
+import { InputSwitchModule } from 'primeng/primeng';
+import { InputTextModule } from 'primeng/primeng';
+import { InputTextareaModule } from 'primeng/primeng';
+import { LightboxModule } from 'primeng/primeng';
+import { ListboxModule } from 'primeng/primeng';
+import { MegaMenuModule } from 'primeng/primeng';
+import { MenuModule } from 'primeng/primeng';
+import { MenubarModule } from 'primeng/primeng';
+import { MessagesModule } from 'primeng/primeng';
+import { MultiSelectModule } from 'primeng/primeng';
+import { OrderListModule } from 'primeng/primeng';
+import { OrganizationChartModule } from 'primeng/primeng';
+import { OverlayPanelModule } from 'primeng/primeng';
+import { PaginatorModule } from 'primeng/primeng';
+import { PanelModule } from 'primeng/primeng';
+import { PanelMenuModule } from 'primeng/primeng';
+import { PasswordModule } from 'primeng/primeng';
+import { PickListModule } from 'primeng/primeng';
+import { ProgressBarModule } from 'primeng/primeng';
+import { RadioButtonModule } from 'primeng/primeng';
+import { RatingModule } from 'primeng/primeng';
+import { ScheduleModule } from 'primeng/primeng';
+import { ScrollPanelModule } from 'primeng/scrollpanel';
+import { SelectButtonModule } from 'primeng/primeng';
+import { SlideMenuModule } from 'primeng/primeng';
+import { SliderModule } from 'primeng/primeng';
+import { SpinnerModule } from 'primeng/primeng';
+import { SplitButtonModule } from 'primeng/primeng';
+import { StepsModule } from 'primeng/primeng';
+import { TableModule } from 'primeng/table';
+import { TabMenuModule } from 'primeng/primeng';
+import { TabViewModule } from 'primeng/primeng';
+import { TerminalModule } from 'primeng/primeng';
+import { TieredMenuModule } from 'primeng/primeng';
+import { ToggleButtonModule } from 'primeng/primeng';
+import { ToolbarModule } from 'primeng/primeng';
+import { TooltipModule } from 'primeng/primeng';
+import { TreeModule } from 'primeng/primeng';
+import { TreeTableModule } from 'primeng/primeng';
 
 const PRIME_NG_MODULES: any[] = [
-    BrowserModule,
-    FormsModule,
-    HttpModule,
-    BrowserAnimationsModule,
-    AccordionModule,
-    AutoCompleteModule,
-    BreadcrumbModule,
-    ButtonModule,
-    CalendarModule,
-    CarouselModule,
-    ColorPickerModule,
-    ChartModule,
-    CheckboxModule,
-    ChipsModule,
-    CodeHighlighterModule,
-    ConfirmDialogModule,
-    SharedModule,
-    ContextMenuModule,
-    DataGridModule,
-    DataListModule,
-    DataScrollerModule,
-    DataTableModule,
-    DialogModule,
-    DragDropModule,
-    DropdownModule,
-    EditorModule,
-    FieldsetModule,
-    FileUploadModule,
-    GalleriaModule,
-    GMapModule,
-    GrowlModule,
-    InputMaskModule,
-    InputSwitchModule,
-    InputTextModule,
-    InputTextareaModule,
-    LightboxModule,
-    ListboxModule,
-    MegaMenuModule,
-    MenuModule,
-    MenubarModule,
-    MessagesModule,
-    MultiSelectModule,
-    OrderListModule,
-    OrganizationChartModule,
-    OverlayPanelModule,
-    PaginatorModule,
-    PanelModule,
-    PanelMenuModule,
-    PasswordModule,
-    PickListModule,
-    ProgressBarModule,
-    RadioButtonModule,
-    RatingModule,
-    ScheduleModule,
-    ScrollPanelModule,
-    SelectButtonModule,
-    SlideMenuModule,
-    SliderModule,
-    SpinnerModule,
-    SplitButtonModule,
-    StepsModule,
-    TableModule,
-    TabMenuModule,
-    TabViewModule,
-    TerminalModule,
-    TieredMenuModule,
-    ToggleButtonModule,
-    ToolbarModule,
-    TooltipModule,
-    TreeModule,
-    TreeTableModule
+  AccordionModule,
+  AutoCompleteModule,
+  BreadcrumbModule,
+  ButtonModule,
+  CalendarModule,
+  CarouselModule,
+  ColorPickerModule,
+  ChartModule,
+  CheckboxModule,
+  ChipsModule,
+  CodeHighlighterModule,
+  ConfirmDialogModule,
+  SharedModule,
+  ContextMenuModule,
+  DataGridModule,
+  DataListModule,
+  DataScrollerModule,
+  DataTableModule,
+  DialogModule,
+  DragDropModule,
+  DropdownModule,
+  EditorModule,
+  FieldsetModule,
+  FileUploadModule,
+  GalleriaModule,
+  GMapModule,
+  GrowlModule,
+  InputMaskModule,
+  InputSwitchModule,
+  InputTextModule,
+  InputTextareaModule,
+  LightboxModule,
+  ListboxModule,
+  MegaMenuModule,
+  MenuModule,
+  MenubarModule,
+  MessagesModule,
+  MultiSelectModule,
+  OrderListModule,
+  OrganizationChartModule,
+  OverlayPanelModule,
+  PaginatorModule,
+  PanelModule,
+  PanelMenuModule,
+  PasswordModule,
+  PickListModule,
+  ProgressBarModule,
+  RadioButtonModule,
+  RatingModule,
+  ScheduleModule,
+  ScrollPanelModule,
+  SelectButtonModule,
+  SlideMenuModule,
+  SliderModule,
+  SpinnerModule,
+  SplitButtonModule,
+  StepsModule,
+  TableModule,
+  TabMenuModule,
+  TabViewModule,
+  TerminalModule,
+  TieredMenuModule,
+  ToggleButtonModule,
+  ToolbarModule,
+  TooltipModule,
+  TreeModule,
+  TreeTableModule
 ];
 
 @NgModule({
@@ -154,4 +145,4 @@ const PRIME_NG_MODULES: any[] = [
     PRIME_NG_MODULES
   ],
 })
-export class PrimeNGModules { }
+export class PrimeNGModules {}
diff --git a/src/packages/discovery/component/index.ts b/src/packages/discovery/component/index.ts
new file mode 100644
index 0000000..733eb6b
--- /dev/null
+++ b/src/packages/discovery/component/index.ts
@@ -0,0 +1,5 @@
+// import { SettingComponent } from './setting/setting.component';
+
+// export const COMPONENTS = [
+//   SettingComponent,
+// ];
diff --git a/src/packages/discovery/component/setting/setting.component.html b/src/packages/discovery/component/setting/setting.component.html
new file mode 100644
index 0000000..e72a586
--- /dev/null
+++ b/src/packages/discovery/component/setting/setting.component.html
@@ -0,0 +1,85 @@
+<div *ngIf="!started">
+
+  <h2 mat-dialog-title>Discovery Setting</h2>
+
+  <mat-dialog-content>
+
+    <mat-card>
+      <mat-card-header>
+        <mat-card-title>Zone</mat-card-title>
+        <mat-card-subtitle>{{cidr}}</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <!-- <form  (ngSubmit)="discovery()"> -->
+        <div>
+          <div>
+            <mat-checkbox [checked]="true" [(ngModel)]="hostChecked" (change)="handleHostCheckChange($event)">Host</mat-checkbox>
+          </div>
+          <div>
+            <mat-form-field *ngIf="hostChecked">
+              <input matInput placeholder="Start IP" type="string" [(ngModel)]="startIP">
+            </mat-form-field>
+            <mat-form-field *ngIf="hostChecked">
+              <input matInput placeholder="End IP" type="string" [(ngModel)]="endIP">
+            </mat-form-field>
+          </div>
+        </div>
+        <div>
+          <div>
+            <mat-checkbox [(ngModel)]="portChecked" (change)="handlePortCheckChange($event)">Port</mat-checkbox>
+          </div>
+          <div>
+            <div *ngIf="portChecked">
+                <mat-slide-toggle [checked]="true" [(ngModel)]="tcpChecked">TCP</mat-slide-toggle>
+                <mat-slide-toggle [checked]="true" [(ngModel)]="udpChecked">UDP</mat-slide-toggle>
+            </div>
+            <mat-form-field *ngIf="portChecked">
+              <input matInput placeholder="Start Port" type="number" [(ngModel)]="startPort">
+            </mat-form-field>
+            <mat-form-field *ngIf="portChecked">
+              <input matInput placeholder="End Port" type="number" [(ngModel)]="endPort">
+            </mat-form-field>
+          </div>
+        </div>
+        <div>
+          <div>
+            <mat-checkbox [(ngModel)]="serviceChecked" (change)="handleServiceCheckChange($event)">Service</mat-checkbox>
+          </div>
+          <div>
+            <of-input-chip *ngIf="serviceChecked" [unselectedItems]="serviceItems" (change)="handleServiceChange($event)"></of-input-chip>
+          </div>
+        </div>
+        <!-- </form> -->
+      </mat-card-content>
+    </mat-card>
+  </mat-dialog-content>
+
+
+  <mat-dialog-actions fxLayoutAlign="end">
+    <button mat-button mat-dialog-close>Cancel</button>
+    <button mat-button color="primary" (click)="discovery()">Start</button>
+    <!-- <button mat-raised-button type="submit" color="primary">Start</button> -->
+  </mat-dialog-actions>
+
+</div>
+
+<div *ngIf="started">
+  <tree-root id="tree2" [focused]="true" [nodes]="treeNodes">
+    <ng-template #treeNodeFullTemplate let-node let-index="index" let-templates="templates">
+      <div class="tree-node">
+        <input type="checkbox" [checked]="node.isActive" (change)="checkDiscoveryResult(node)" />
+        <tree-node-expander [node]="node"></tree-node-expander>
+        <div class="node-content-wrapper" [class.node-content-wrapper-active]="node.isActive" [class.node-content-wrapper-focused]="node.isFocused"
+          (click)="checkDiscoveryResult(node)">
+          <span [class]="node.data.className" [class.title]="true">{{ node.data.title }}</span>
+        </div>
+        <tree-node-children [node]="node" [templates]="templates"></tree-node-children>
+      </div>
+    </ng-template>
+  </tree-root>
+  <mat-dialog-actions fxLayoutAlign="end">
+    <button mat-button mat-dialog-close>Cancel</button>
+    <button mat-button color="primary" (click)="discoveryResultSave()">Save</button>
+    <!-- <button mat-raised-button type="submit" color="primary">Start</button> -->
+  </mat-dialog-actions>
+</div>
\ No newline at end of file
diff --git a/src/app/commons/component/layout2/footer/footer.component.html b/src/packages/discovery/component/setting/setting.component.scss
similarity index 100%
rename from src/app/commons/component/layout2/footer/footer.component.html
rename to src/packages/discovery/component/setting/setting.component.scss
diff --git a/src/app/commons/component/layout2/sidebar/sidebar.component.spec.ts b/src/packages/discovery/component/setting/setting.component.spec.ts
similarity index 56%
rename from src/app/commons/component/layout2/sidebar/sidebar.component.spec.ts
rename to src/packages/discovery/component/setting/setting.component.spec.ts
index f29709f..009aeb2 100644
--- a/src/app/commons/component/layout2/sidebar/sidebar.component.spec.ts
+++ b/src/packages/discovery/component/setting/setting.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SidebarComponent } from './sidebar.component';
+import { SettingComponent } from './setting.component';
 
-describe('SidebarComponent', () => {
-  let component: SidebarComponent;
-  let fixture: ComponentFixture<SidebarComponent>;
+describe('SettingComponent', () => {
+  let component: SettingComponent;
+  let fixture: ComponentFixture<SettingComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SidebarComponent ]
+      declarations: [ SettingComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SidebarComponent);
+    fixture = TestBed.createComponent(SettingComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/packages/discovery/component/setting/setting.component.ts b/src/packages/discovery/component/setting/setting.component.ts
new file mode 100644
index 0000000..93c06ab
--- /dev/null
+++ b/src/packages/discovery/component/setting/setting.component.ts
@@ -0,0 +1,392 @@
+// import { Component, OnInit, AfterContentInit } from '@angular/core';
+// import { Store, select } from '@ngrx/store';
+// import { RPCClientError } from '@loafer/ng-rpc/protocol';
+// import {
+//   DiscoveryStartInfo,
+//   DiscoveryZone,
+//   Zone,
+//   DiscoveryPort,
+//   DiscoveryService
+// } from '../../model';
+// import * as CIDR from 'ip-cidr';
+// import * as DiscoveredStore from '../../store/setting';
+// // import * as DiscoverStore from '../../store/discover';
+
+// import { SettingSelector, DiscoverSelector } from '../../store';
+// import * as DiscoverStore from '../../store/discover';
+
+// import * as RegistStore from '../../store/regist';
+// import { Host } from 'packages/discovery/model/Host';
+// import { Port } from 'packages/discovery/model/Port';
+// import { Service } from 'packages/discovery/model/Service';
+// import * as ProbeDetailStore from 'packages/probe/store';
+// import { Probe } from 'packages/probe/model';
+
+// import { DetailSelector as ProbeDetailSelector } from 'packages/probe/store';
+
+// @Component({
+//   selector: 'of-setting',
+//   templateUrl: './setting.component.html',
+//   styleUrls: ['./setting.component.scss']
+// })
+// export class SettingComponent implements OnInit, AfterContentInit {
+
+
+//   probe$ = this.probeDetailStore.pipe(select(ProbeDetailSelector.select('probe')));
+
+//   settingSucceed$: any;
+//   discoveryResult$: any;
+//   probe: Probe = null;
+//   started = false;
+
+//   cidr;
+//   startIP;
+//   endIP;
+//   startPort;
+//   endPort;
+//   // private settingForm: FormGroup;
+//   hostChecked = true;
+//   portChecked = true;
+//   serviceChecked = true;
+//   tcpChecked = true;
+//   udpChecked = true;
+//   includeServices = null;
+
+//   serviceItems = [
+//     { name: 'SSH' },
+//     { name: 'PostgreSQL' },
+//     { name: 'DNS' },
+//     { name: 'WMI'},
+//     { name: 'SMB' },
+//     { name: 'ActiveDirectory' },
+//     { name: 'Cassandra' },
+//     { name: 'FTP' },
+//     { name: 'HTTP' },
+//     { name: 'IMAP' },
+//     { name: 'LDAP' },
+//     { name: 'MongoDB' },
+//     { name: 'MySQL' },
+//     { name: 'NBSS' },
+//   ];
+
+//   treeNodes = [];
+//   zones: Map<string, Zone> = null;
+
+//   checkedSet = new Set();
+
+//   constructor(
+//     private discoverdstore: Store<DiscoveredStore.State>,
+//     private discoverstore: Store<DiscoverStore.State>,
+//     private registStore: Store<RegistStore.State>,
+//     private probeDetailStore: Store<ProbeDetailStore.State>
+//   ) {
+//     this.settingSucceed$ = discoverdstore.pipe(select(SettingSelector.select('isStart')));
+//     this.discoveryResult$ = this.discoverstore.pipe(select(DiscoverSelector.select('zones')));
+//   }
+
+//   ngOnInit() {
+//     this.settingSucceed$.subscribe(
+//       (succeed: boolean) => {
+//         if (succeed) {
+//           this.started = true;
+//         }
+//       },
+//       (error: RPCClientError) => {
+//         console.log(error.response.message);
+//       }
+//     );
+
+//     this.probe$.subscribe(
+//       (probe: Probe) => {
+//         if (probe != null) {
+//           this.probe = probe;
+//         }
+//       },
+//       (error: RPCClientError) => {
+//         console.log(error.response.message);
+//       }
+//     );
+
+//     this.discoveryResult$.subscribe(
+//       (zones: Map<string, Zone>) => {
+//         console.log('ZoneZoneZoneZoneZoneZoneZone');
+//         // console.log(JSON.stringify(zones));
+//         this.convertTreeViewZone(zones);
+//         this.zones = zones;
+//       },
+//       (error: RPCClientError) => {
+//         console.log(error.response.message);
+//       }
+//     );
+
+//   }
+
+//   isZone(zone: Zone): boolean {
+
+//     for (let i = 0; i < this.treeNodes.length; ++i) {
+//       if (zone.iface === this.treeNodes[i].iface) {
+//         return true;
+//       }
+//     }
+
+//     return false;
+//   }
+
+//   convertTreeViewZone(zones: Map<string, Zone>) {
+
+//     if (zones === undefined || zones === null) {
+//       return;
+//     }
+
+//     // console.log('convertTreeViewZone');
+//     const treeNodes: any[] = [];
+
+//     zones.forEach((value: Zone, key: string, map) => {
+//       if (this.isZone(value)) {
+//         return;
+//       }
+//       const jZone: any = {
+//         title: 'Zone - ' + value.iface,
+//         className: 'cn' + value.ip
+//       };
+//       jZone.obj = value;
+//       jZone.children = this.convertViewHost(value.hosts);
+//       treeNodes.push(jZone);
+//     });
+
+//     this.treeNodes = treeNodes;
+//   }
+
+//   ngAfterContentInit() {
+//     this.cidr = '192.168.1.0/24';
+//     this.hostRange();
+//     this.portRange();
+//   }
+
+//   hostRange() {
+//     const cidr = new CIDR(this.cidr);
+//     if (!cidr.isValid()) {
+//       alert('Invalid cidr : ' + this.cidr);
+//       return;
+//     }
+//     this.startIP = cidr.addressStart.address;
+//     this.endIP = cidr.addressEnd.address;
+//   }
+
+//   portRange() {
+//     this.startPort = '1';
+//     this.endPort = '1024';
+//   }
+
+//   handleHostCheckChange(e: MatCheckboxChange) {
+//     this.hostChecked = true;
+//     e.source.checked = true;
+//   }
+
+//   handlePortCheckChange(e: MatCheckboxChange) {
+//     this.serviceChecked = false;
+//   }
+
+//   handleServiceCheckChange(e: MatCheckboxChange) {
+//     if (e.checked) {
+//       this.portChecked = true;
+//     }
+//   }
+
+//   handleServiceChange(list: any) {
+//     this.includeServices = list;
+//   }
+
+//   discovery() {
+//     let discoveryPort: DiscoveryPort = null;
+//     let discoveryService: DiscoveryService = null;
+
+//     if (this.serviceChecked) {
+//       const services = new Array();
+//       for (const service of this.includeServices) {
+//         services.push(service.name);
+//       }
+//       discoveryService = {
+//         includeServices: services,
+//       };
+//     }
+//     if (this.portChecked) {
+//       discoveryPort = {
+//         firstScanRange: this.startPort,
+//         lastScanRange: this.endPort,
+//         includeTCP: this.tcpChecked,
+//         includeUDP: this.udpChecked,
+//         excludePorts: null,
+//         discoveryService: discoveryService
+//       };
+//     }
+//     const discoveryZone: DiscoveryZone = {
+//       discoveryHost: {
+//         firstScanRange: this.startIP,
+//         lastScanRange: this.endIP,
+//         discoveryPort: discoveryPort,
+//       },
+//     };
+
+//     console.log(discoveryZone);
+
+//     console.log('start discovery - ' + this.probe.probeKey);
+//     this.discoverstore.dispatch(new DiscoverStore.DiscoverZone(
+//       { probeID: this.probe.probeKey, discoveryZone: discoveryZone }));
+
+//     this.started = true;
+//   }
+
+//   checkDiscoveryResult(node) {
+
+//     node.toggleActivated(true);
+
+//     if (node.isActive) {
+//       if (node.data.obj !== undefined) {
+//         node.data.obj.target = true;
+//       }
+//     } else {
+//       if (node.data.obj !== undefined) {
+//         node.data.obj.target = false;
+//       }
+//     }
+
+//     console.log(this.zones);
+
+//   }
+
+//   convertMapToList(map: Map<any, any>): Array<any> {
+
+//     if (undefined === map || null === map || map.size < 0) {
+//       return null;
+//     }
+
+//     const retArr = new Array();
+
+//     map.forEach((v: any, k: any) => {
+//       retArr.push(v);
+//     });
+
+//     return retArr;
+//   }
+
+
+//   discoveryResultSave() {
+//     // console.log(this.checkedSet);
+
+//     // send discovery save  this.zones;
+
+//     // this.registStore.dispatch(new DiscoverStore.DiscoverZone(
+//     //   {probeID: '52abd6fd57e511e7ac52080027658d13', discoveryZone: discoveryZone}));
+
+//     this.zones.forEach((zone: Zone, key: string) => {
+//       if (zone.hosts !== undefined && zone.hosts !== null && zone.hosts.size > 0) {
+//         // FIXME: getHosts
+//         const hosts: Host[] = [];
+//         zone.hosts.forEach((h: Host, hKey: string) => {
+
+//           // if (h.ports !== undefined && h.ports !== null) {
+//           //   h.portList = [];
+//           //   h.ports.forEach((p: Port, pKey: number) => {
+
+//           //     if (p.services !== undefined && p.services !== null) {
+//           //       p.serviceList = [];
+
+//           //       p.services.forEach((s: Service, sKey: string) => {
+//           //         p.serviceList.push(s);
+//           //       });
+
+//           //     }
+
+//           //     h.portList.push(p);
+//           //   });
+//           // }
+
+//           hosts.push(h);
+//         });
+
+//         if (hosts.length > 0) {
+//           const sd: any = { hosts: hosts, probe: { id: 1 } };
+//           console.log(JSON.stringify(sd));
+//           console.log('--------');
+//           this.registStore.dispatch(new RegistStore.DiscoverySaveAllTarget(sd));
+//         }
+
+//       }
+//     });
+//   }
+
+//   convertViewHost(hosts): any[] {
+
+//     if (hosts === undefined || hosts === null) {
+//       return null;
+//     }
+
+
+//     const hostNodes: any[] = [];
+
+//     hosts.forEach((host, hostKey) => {
+
+//       const jHost: any = {
+//         title: 'Host - ' + host.ip,
+//         className: 'cn' + host.ip
+//       };
+//       jHost.obj = host;
+
+//       jHost.children = this.convertViewPort(host.ports);
+
+//       hostNodes.push(jHost);
+
+//     });
+
+//     return hostNodes;
+
+//   }
+
+//   convertViewPort(ports): any[] {
+
+//     if (ports === undefined || ports === null) {
+//       return null;
+//     }
+
+//     const portChildren: any[] = [];
+
+//     ports.forEach((port, portKey) => {
+
+//       const jPort: any = {
+//         title: 'Port - ' + port.portNumber,
+//         className: 'cn' + port.portNumber,
+//       };
+//       jPort.obj = port;
+
+//       jPort.children = this.convertViewService(port.services);
+
+//       portChildren.push(jPort);
+//     });
+
+
+//     return portChildren;
+//   }
+
+//   convertViewService(services): any[] {
+
+//     if (services === undefined || services === null || services.size <= 0) {
+//       return null;
+//     }
+
+//     const serviceChildren: any[] = [];
+
+//     services.forEach((service, serviceKey) => {
+//       const jService: any = {
+//         title: 'Service - ' + service.serviceName,
+//         className: 'cn' + service.serviceName,
+//       };
+//       jService.obj = service;
+
+//       serviceChildren.push(jService);
+//     });
+
+//     return serviceChildren;
+//   }
+
+// }
diff --git a/src/packages/discovery/discovery-logger.module.ts b/src/packages/discovery/discovery-logger.module.ts
new file mode 100644
index 0000000..2431e36
--- /dev/null
+++ b/src/packages/discovery/discovery-logger.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { LoggerModule } from '@loafer/ng-logger';
+
+
+@NgModule({
+  imports: [
+    LoggerModule.forFeature({}),
+  ],
+})
+export class DiscoveryLoggerModule { }
diff --git a/src/packages/discovery/discovery-rpc.module.ts b/src/packages/discovery/discovery-rpc.module.ts
new file mode 100644
index 0000000..0dc1006
--- /dev/null
+++ b/src/packages/discovery/discovery-rpc.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { RPCModule } from '@loafer/ng-rpc';
+
+import {
+  SUBSCRIBERS,
+} from './subscriber';
+
+@NgModule({
+  imports: [
+    RPCModule.forFeature({subscribers: SUBSCRIBERS}),
+  ],
+})
+export class DiscoveryRPCModule { }
diff --git a/src/packages/discovery/discovery-store.module.ts b/src/packages/discovery/discovery-store.module.ts
new file mode 100644
index 0000000..b8f2310
--- /dev/null
+++ b/src/packages/discovery/discovery-store.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+
+import { EffectsModule } from '@ngrx/effects';
+
+import {
+  REDUCERS,
+  EFFECTS,
+} from './store';
+
+import { MODULE } from './discovery.constant';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(MODULE.name, REDUCERS),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class DiscoveryStoreModule { }
diff --git a/src/packages/discovery/discovery.constant.ts b/src/packages/discovery/discovery.constant.ts
new file mode 100644
index 0000000..e3c6d68
--- /dev/null
+++ b/src/packages/discovery/discovery.constant.ts
@@ -0,0 +1,3 @@
+export const MODULE = {
+    name: 'discovery'
+  };
diff --git a/src/packages/discovery/discovery.module.ts b/src/packages/discovery/discovery.module.ts
new file mode 100644
index 0000000..6172753
--- /dev/null
+++ b/src/packages/discovery/discovery.module.ts
@@ -0,0 +1,39 @@
+// import { NgModule, Inject } from '@angular/core';
+// import { CommonModule } from '@angular/common';
+// import { FormsModule } from '@angular/forms';
+
+// import { MaterialModule } from 'packages/commons/material/material.module';
+
+// import { InputChipModule } from 'packages/commons/component/input-chip/input-chip.module';
+
+// import { DiscoveryStoreModule } from './discovery-store.module';
+// import { DiscoveryRPCModule } from './discovery-rpc.module';
+// import { DiscoveryLoggerModule } from './discovery-logger.module';
+
+// import { COMPONENTS } from './component';
+// import { SERVICES } from './service';
+// import { TreeModule } from 'angular-tree-component';
+
+// @NgModule({
+//   imports: [
+//     CommonModule,
+//     MaterialModule,
+//     InputChipModule,
+//     FormsModule,
+//     TreeModule,
+//     DiscoveryStoreModule,
+//     DiscoveryRPCModule,
+//     DiscoveryLoggerModule,
+//   ],
+//   declarations: [
+//     COMPONENTS
+//   ],
+//   exports: [
+//     COMPONENTS,
+//   ],
+//   providers: [
+//     SERVICES,
+//   ],
+// })
+// export class DiscoveryModule {
+// }
diff --git a/src/packages/discovery/model/DiscoveryHost.ts b/src/packages/discovery/model/DiscoveryHost.ts
new file mode 100644
index 0000000..a1dc3e4
--- /dev/null
+++ b/src/packages/discovery/model/DiscoveryHost.ts
@@ -0,0 +1,10 @@
+import { DiscoveryPort } from './DiscoveryPort';
+
+export interface DiscoveryHost {
+  firstScanRange?: string;
+  lastScanRange?: string;
+  excludeHosts?: string[];
+  includeHosts?: string[];
+
+  discoveryPort?: DiscoveryPort;
+}
diff --git a/src/packages/discovery/model/DiscoveryPort.ts b/src/packages/discovery/model/DiscoveryPort.ts
new file mode 100644
index 0000000..90f5e79
--- /dev/null
+++ b/src/packages/discovery/model/DiscoveryPort.ts
@@ -0,0 +1,11 @@
+import { DiscoveryService } from './DiscoveryService';
+
+export interface DiscoveryPort {
+  firstScanRange: number;
+  lastScanRange: number;
+  excludePorts: number[];
+  includeTCP: boolean;
+  includeUDP: boolean;
+
+  discoveryService?: DiscoveryService;
+}
diff --git a/src/packages/discovery/model/DiscoveryService.ts b/src/packages/discovery/model/DiscoveryService.ts
new file mode 100644
index 0000000..96ffe70
--- /dev/null
+++ b/src/packages/discovery/model/DiscoveryService.ts
@@ -0,0 +1,3 @@
+export interface DiscoveryService {
+  includeServices: string[];
+}
diff --git a/src/packages/discovery/model/DiscoveryStartInfo.ts b/src/packages/discovery/model/DiscoveryStartInfo.ts
new file mode 100644
index 0000000..c294137
--- /dev/null
+++ b/src/packages/discovery/model/DiscoveryStartInfo.ts
@@ -0,0 +1,11 @@
+
+export interface DiscoveryStartInfo {
+  startIp: string;
+  endIP: string;
+  excludeIp?: string;
+  startPort?: string;
+  endPort?: string;
+  services?: Array<string>;
+}
+
+// export default DiscoveryStartInfo;
diff --git a/src/packages/discovery/model/DiscoveryZone.ts b/src/packages/discovery/model/DiscoveryZone.ts
new file mode 100644
index 0000000..7a17f6a
--- /dev/null
+++ b/src/packages/discovery/model/DiscoveryZone.ts
@@ -0,0 +1,7 @@
+import { DiscoveryHost } from './DiscoveryHost';
+
+export interface DiscoveryZone {
+  excludePatterns?: string[];
+
+  discoveryHost?: DiscoveryHost;
+}
diff --git a/src/packages/discovery/model/Host.ts b/src/packages/discovery/model/Host.ts
new file mode 100644
index 0000000..15f72df
--- /dev/null
+++ b/src/packages/discovery/model/Host.ts
@@ -0,0 +1,15 @@
+import { Zone } from './Zone';
+import { Port } from './Port';
+
+export interface Host {
+    id?: number;
+    ip: string;
+    mac: number;
+    os: string;
+    discoveredDate?: Date;
+    zone?: Zone;
+    target?: boolean;
+
+    ports: Map<number, Port> | null;
+    portList: Port[] | null;
+}
diff --git a/src/packages/discovery/model/Port.ts b/src/packages/discovery/model/Port.ts
new file mode 100644
index 0000000..6f11087
--- /dev/null
+++ b/src/packages/discovery/model/Port.ts
@@ -0,0 +1,15 @@
+import { Host } from './Host';
+import { PortType } from './PortType';
+import { Service } from './Service';
+
+export interface Port {
+    id?: number;
+    portType: PortType;
+    portNumber: number;
+    discoveredDate?: Date;
+    host: Host;
+    isTarget?: boolean;
+
+    services: Map<string, Service> | null;
+    serviceList: Service[] | null;
+}
diff --git a/src/packages/discovery/model/PortType.ts b/src/packages/discovery/model/PortType.ts
new file mode 100644
index 0000000..6b864bf
--- /dev/null
+++ b/src/packages/discovery/model/PortType.ts
@@ -0,0 +1,8 @@
+
+// enum PortType {
+//     TCP = 1,
+//     UDP = 2,
+//     TLS = 3,
+// }
+
+export type PortType = 'TCP' | 'UDP' | 'TLS';
diff --git a/src/packages/discovery/model/Service.ts b/src/packages/discovery/model/Service.ts
new file mode 100644
index 0000000..c6bdff3
--- /dev/null
+++ b/src/packages/discovery/model/Service.ts
@@ -0,0 +1,10 @@
+import { Port } from './Port';
+
+export interface Service {
+    id: number;
+    cryptoType: string;
+    serviceName: string;
+    discoveredDate?: Date;
+    port: Port;
+    isTarget?: boolean;
+}
diff --git a/src/packages/discovery/model/Zone.ts b/src/packages/discovery/model/Zone.ts
new file mode 100644
index 0000000..6eaa24b
--- /dev/null
+++ b/src/packages/discovery/model/Zone.ts
@@ -0,0 +1,12 @@
+import { Host } from './Host';
+
+export interface Zone {
+  id?: number;
+  network?: string;
+  ip?: string;
+  iface?: string;
+  mac?: string;
+  discoveredDate?: Date;
+
+  hosts: Map<string, Host> | null;
+}
diff --git a/src/packages/discovery/model/index.ts b/src/packages/discovery/model/index.ts
new file mode 100644
index 0000000..c2583d5
--- /dev/null
+++ b/src/packages/discovery/model/index.ts
@@ -0,0 +1,11 @@
+export * from './DiscoveryHost';
+export * from './DiscoveryPort';
+export * from './DiscoveryService';
+export * from './DiscoveryZone';
+export * from './DiscoveryStartInfo';
+export * from './Host';
+export * from './Port';
+export * from './PortType';
+export * from './Service';
+export * from './Zone';
+
diff --git a/src/packages/discovery/service/discovery.service.spec.ts b/src/packages/discovery/service/discovery.service.spec.ts
new file mode 100644
index 0000000..7859d24
--- /dev/null
+++ b/src/packages/discovery/service/discovery.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { DiscoveryService } from './discovery.service';
+
+describe('DiscoveryService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [DiscoveryService]
+    });
+  });
+
+  it('should be created', inject([DiscoveryService], (service: DiscoveryService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/packages/discovery/service/discovery.service.ts b/src/packages/discovery/service/discovery.service.ts
new file mode 100644
index 0000000..26c1cd8
--- /dev/null
+++ b/src/packages/discovery/service/discovery.service.ts
@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { RPCService } from '@loafer/ng-rpc/service';
+import {
+  DiscoveryStartInfo,
+  DiscoveryZone,
+  DiscoveryHost,
+  DiscoveryPort,
+  DiscoveryService as M_DiscoveryService,
+  Zone,
+  Host,
+  Port,
+  Service,
+} from '../model';
+
+@Injectable()
+export class DiscoveryService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  public start(dsInfo: DiscoveryStartInfo): Observable<DiscoveryStartInfo> {
+
+    return this.rpcService.call('DiscoveryService.startDiscovery', dsInfo);
+  }
+
+  public discoverZone(probeID: string, discoveryZone: DiscoveryZone): void {
+    this.rpcService.send('DiscoveryService.discoverZone', probeID, discoveryZone);
+  }
+  public discoverHost(probeID: string, zone: Zone, discoveryHost: DiscoveryHost): void {
+    this.rpcService.send('DiscoveryService.discoverHost', probeID, zone, discoveryHost);
+  }
+  public discoverPort(probeID: string, host: Host, discoveryPort: DiscoveryPort): void {
+    this.rpcService.send('DiscoveryService.discoverPort', probeID, host, discoveryPort);
+  }
+  public discoverService(probeID: string, port: Port, discoveryService: M_DiscoveryService): void {
+    this.rpcService.send('DiscoveryService.discoverService', probeID, port, discoveryService);
+  }
+}
diff --git a/src/packages/discovery/service/index.ts b/src/packages/discovery/service/index.ts
new file mode 100644
index 0000000..d227ad7
--- /dev/null
+++ b/src/packages/discovery/service/index.ts
@@ -0,0 +1,7 @@
+import { DiscoveryService } from './discovery.service';
+import { TargetDiscoveryService } from './target-discovery.service';
+
+export const SERVICES = [
+    DiscoveryService,
+    TargetDiscoveryService,
+];
diff --git a/src/packages/discovery/service/target-discovery.service.spec.ts b/src/packages/discovery/service/target-discovery.service.spec.ts
new file mode 100644
index 0000000..6e58f64
--- /dev/null
+++ b/src/packages/discovery/service/target-discovery.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { TargetDiscoveryService } from './target-discovery.service';
+
+describe('TargetDiscoveryService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [TargetDiscoveryService]
+    });
+  });
+
+  it('should be created', inject([TargetDiscoveryService], (service: TargetDiscoveryService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/packages/discovery/service/target-discovery.service.ts b/src/packages/discovery/service/target-discovery.service.ts
new file mode 100644
index 0000000..1f4ec64
--- /dev/null
+++ b/src/packages/discovery/service/target-discovery.service.ts
@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { RPCService } from '@loafer/ng-rpc/service';
+import {
+  DiscoveryStartInfo,
+  DiscoveryZone,
+  DiscoveryHost,
+  DiscoveryPort,
+  DiscoveryService as M_DiscoveryService,
+  Zone,
+  Host,
+  Port,
+  Service,
+} from '../model';
+import { Probe } from 'packages/probe/model';
+
+@Injectable()
+export class TargetDiscoveryService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  public saveAllTarget(hosts: Host[], probe: Probe): Observable<Boolean> {
+
+    return this.rpcService.call('TargetDiscoveryService.saveAllTarget', hosts, probe);
+  }
+
+}
diff --git a/src/packages/discovery/store/discover/discover.action.ts b/src/packages/discovery/store/discover/discover.action.ts
new file mode 100644
index 0000000..f25e152
--- /dev/null
+++ b/src/packages/discovery/store/discover/discover.action.ts
@@ -0,0 +1,82 @@
+import { Action } from '@ngrx/store';
+
+import {
+  Zone,
+  Host,
+  Port,
+  Service,
+  DiscoveryZone,
+  DiscoveryHost,
+  DiscoveryPort,
+  DiscoveryService as MDiscoveryService,
+} from '../../model';
+
+ export enum ActionType {
+  DiscoverZone = '[discovery.discovery] discoverZone',
+  DiscoverHost = '[discovery.discovery] discoverHost',
+  DiscoverPort = '[discovery.discovery] discoverPort',
+  DiscoverService = '[discovery.discovery] discoverService',
+
+  DiscoveredZone = '[discovery.discovery] DiscoveryService.discoveredZone',
+  DiscoveredHost = '[discovery.discovery] DiscoveryService.discoveredHost',
+  DiscoveredPort = '[discovery.discovery] DiscoveryService.discoveredPort',
+  DiscoveredService = '[discovery.discovery] DiscoveryService.discoveredService',
+}
+
+export class DiscoverZone implements Action {
+  readonly type = ActionType.DiscoverZone;
+
+  constructor(public payload: {probeID: string, discoveryZone: DiscoveryZone}) {}
+}
+
+export class DiscoverHost implements Action {
+  readonly type = ActionType.DiscoverHost;
+
+  constructor(public payload: {probeID: string, zone: Zone, discoveryHost: DiscoveryHost}) {}
+}
+
+export class DiscoverPort implements Action {
+  readonly type = ActionType.DiscoverPort;
+
+  constructor(public payload: {probeID: string, host: Host, discoveryPort: DiscoveryPort}) {}
+}
+
+export class DiscoverService implements Action {
+  readonly type = ActionType.DiscoverService;
+  constructor(public payload: {probeID: string, port: Port, discoveryService: MDiscoveryService}) {}
+}
+
+
+export class DiscoveredZone implements Action {
+  readonly type = ActionType.DiscoveredZone;
+
+  constructor(public payload: Zone) {}
+}
+
+export class DiscoveredHost implements Action {
+  readonly type = ActionType.DiscoveredHost;
+
+  constructor(public payload: Host) {}
+}
+
+export class DiscoveredPort implements Action {
+  readonly type = ActionType.DiscoveredPort;
+
+  constructor(public payload: Port) {}
+}
+
+export class DiscoveredService implements Action {
+  readonly type = ActionType.DiscoveredService;
+  constructor(public payload: Service) {}
+}
+
+export type Actions =
+  | DiscoverZone
+  | DiscoverHost
+  | DiscoverPort
+  | DiscoverService
+  | DiscoveredZone
+  | DiscoveredHost
+  | DiscoveredPort
+  | DiscoveredService
+;
diff --git a/src/packages/discovery/store/discover/discover.effect.spec.ts b/src/packages/discovery/store/discover/discover.effect.spec.ts
new file mode 100644
index 0000000..f868840
--- /dev/null
+++ b/src/packages/discovery/store/discover/discover.effect.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './discover.effect';
+
+describe('Discover.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});
diff --git a/src/packages/discovery/store/discover/discover.effect.ts b/src/packages/discovery/store/discover/discover.effect.ts
new file mode 100644
index 0000000..0fd5078
--- /dev/null
+++ b/src/packages/discovery/store/discover/discover.effect.ts
@@ -0,0 +1,66 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import {
+  DiscoverZone,
+  DiscoverHost,
+  DiscoverPort,
+  DiscoverService,
+  ActionType
+} from './discover.action';
+import {DiscoveryService} from '../../service/discovery.service';
+
+
+@Injectable()
+export class Effects {
+
+  constructor(private actions$: Actions,
+              private discoveryService: DiscoveryService,
+              private router: Router) {
+  }
+
+  @Effect({ dispatch: false })
+  discoveryZone$ = this.actions$
+    .ofType(ActionType.DiscoverZone)
+    .map((action: DiscoverZone) => action.payload)
+    .do(payload => {
+      this.discoveryService.discoverZone(payload.probeID, payload.discoveryZone);
+    });
+
+  @Effect({ dispatch: false })
+  discoveryHost$ = this.actions$
+    .ofType(ActionType.DiscoverHost)
+    .map((action: DiscoverHost) => action.payload)
+    .do(payload => {
+      this.discoveryService.discoverHost(payload.probeID, payload.zone, payload.discoveryHost);
+    });
+
+  @Effect({ dispatch: false })
+  discoveryPort$ = this.actions$
+    .ofType(ActionType.DiscoverPort)
+    .map((action: DiscoverPort) => action.payload)
+    .do(payload => {
+      this.discoveryService.discoverPort(payload.probeID, payload.host, payload.discoveryPort);
+    });
+
+  @Effect({ dispatch: false })
+  discoveryService$ = this.actions$
+    .ofType(ActionType.DiscoverService)
+    .map((action: DiscoverService) => action.payload)
+    .do(payload => {
+      this.discoveryService.discoverService(payload.probeID, payload.port, payload.discoveryService);
+    });
+}
diff --git a/src/packages/discovery/store/discover/discover.reducer.ts b/src/packages/discovery/store/discover/discover.reducer.ts
new file mode 100644
index 0000000..84af354
--- /dev/null
+++ b/src/packages/discovery/store/discover/discover.reducer.ts
@@ -0,0 +1,205 @@
+import {
+  Actions,
+  ActionType,
+} from './discover.action';
+
+import {
+  State,
+  initialState,
+} from './discover.state';
+
+import {
+  Zone,
+  Host,
+  Port,
+  Service,
+} from '../../model';
+
+// import * as _ 'lodash';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.DiscoveredZone: {
+      const zone: Zone = <Zone>action.payload;
+      const zones: Map<string, Zone> = null === state.zones ? new Map() : state.zones;
+
+      zones.set(zone.network, zone);
+
+      const newZones: Map<string, Zone> = new Map();
+
+      zones.forEach(function(value, key) {
+        newZones.set(key, value);
+      });
+
+      return {
+        ...state,
+        zones : newZones,
+      };
+    }
+
+    case ActionType.DiscoveredHost: {
+      const host: Host = <Host>action.payload;
+      let zone = null;
+
+      let zones: Map<string, Zone> = state.zones;
+
+      if (zones === undefined || zones === null) {
+        zones = new Map();
+        zone = host.zone;
+        // zones.set(zone.network, zone);
+      } else {
+        zone = zones.get(host.zone.network);
+      }
+
+      if (undefined === zone) {
+        // console.error(`Discovery.discoveredHost: Zone[${host.zone.network}] is not exist`);
+        zone = new Map();
+      }
+      if (null === zone.hosts || undefined === zone.hosts) {
+        zone.hosts = new Map();
+        zone.hosts.set(host.ip, host);
+      } else {
+        if (zone.hosts.has(host.ip) === false) {
+          zone.hosts.set(host.ip, host);
+        }
+      }
+
+      zones.set(zone.network, zone);
+
+      const newZones: Map<string, Zone> = new Map();
+
+      zones.forEach(function(value, key) {
+        newZones.set(key, value);
+      });
+
+      return {
+        ...state,
+        zones: newZones
+      };
+    }
+
+    case ActionType.DiscoveredPort: {
+      const port: Port = <Port>action.payload;
+      let zone = state.zones.get(port.host.zone.network);
+
+      let zones: Map<string, Zone> = state.zones;
+
+      if (zones === undefined || zones === null) {
+        zones = new Map();
+      }
+
+      if (zone === undefined || zone === null) {
+        zone = port.host.zone;
+      }
+
+      // if (undefined === zone) {
+      //   console.error(`Discovery.DiscoveredPort: Zone[${port.host.zone.network}] is not exist`);
+      // }
+
+      // if (null === zone.hosts || undefined === zone.hosts.get(port.host.ip)) {
+      //   console.error(`Discovery.DiscoveredPort: Host[${port.host.ip}] is not exist`);
+      //   return state;
+      // }
+
+      if (zone.hosts === undefined || zone.hosts === null) {
+          zone.hosts = new Map();
+      }
+      let host: Host = null;
+      host = zone.hosts.get(port.host.ip);
+
+      if (host === undefined || host === null) {
+        host = port.host;
+      }
+
+      if (null === host.ports || undefined === host.ports) {
+        host.ports = new Map();
+        host.ports.set(port.portNumber, port);
+      } else {
+        if (host.ports.has(port.portNumber) === false) {
+          host.ports.set(port.portNumber, port);
+        }
+      }
+
+      zone.hosts.set(host.ip, host);
+      zones.set(zone.network, zone);
+
+      const newZones: Map<string, Zone> = new Map();
+
+      zones.forEach(function(value, key) {
+        newZones.set(key, value);
+      });
+
+      return {
+        ...state,
+        zones: newZones
+      };
+
+    }
+
+    case ActionType.DiscoveredService: {
+      const service: Service = <Service>action.payload;
+      let zone = state.zones.get(service.port.host.zone.network);
+
+      let zones: Map<string, Zone> = state.zones;
+
+      if (zones === undefined || zones === null) {
+        zones = new Map();
+      }
+
+      if (zone === undefined || zone === null) {
+        zone = service.port.host.zone;
+      }
+
+      if (zone.hosts === undefined || zone.hosts === null) {
+        zone.hosts = new Map();
+      }
+
+      zone.hosts.set(service.port.host.ip, service.port.host);
+
+      // if (undefined === zone) {
+      //   console.error(`Discovery.DiscoveredService: Zone[${service.port.host.zone.network}] is not exist`);
+      // }
+      // if (null === zone.hosts || undefined === zone.hosts.get(service.port.host.ip)) {
+      //   console.error(`Discovery.DiscoveredPort: Host[${service.port.host.ip}] is not exist`);
+      // }
+      const host: Host = zone.hosts.get(service.port.host.ip);
+
+      if (null === host.ports || undefined === host.ports) {
+        host.ports = new Map();
+        host.ports.set(service.port.portNumber, service.port);
+      }
+
+      const port: Port = host.ports.get(service.port.portNumber);
+
+      if (null === port.services || undefined === port.services) {
+        port.services = new Map();
+      }
+      port.services.set(service.serviceName, service);
+
+      host.ports.set(service.port.portNumber, port);
+      zone.hosts.set(host.ip, host);
+      zones.set(zone.network, zone);
+
+      const newZones: Map<string, Zone> = new Map();
+
+      zones.forEach(function(value, key) {
+        newZones.set(key, value);
+      });
+
+      return {
+        ...state,
+        zones: newZones
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
+
+
+// function checkZone(state, pZone: Zone) :  {
+
+
+// }
diff --git a/src/packages/discovery/store/discover/discover.state.ts b/src/packages/discovery/store/discover/discover.state.ts
new file mode 100644
index 0000000..f563036
--- /dev/null
+++ b/src/packages/discovery/store/discover/discover.state.ts
@@ -0,0 +1,16 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Zone } from '../../model';
+
+export interface State {
+  error: RPCClientError | null;
+  processing: boolean;
+  zones: Map<string, Zone> | null;
+}
+
+export const initialState: State = {
+  error: null,
+  processing: false,
+  zones: null,
+};
+
diff --git a/src/packages/discovery/store/discover/index.ts b/src/packages/discovery/store/discover/index.ts
new file mode 100644
index 0000000..cdd131c
--- /dev/null
+++ b/src/packages/discovery/store/discover/index.ts
@@ -0,0 +1,4 @@
+export * from './discover.action';
+export * from './discover.reducer';
+export * from './discover.state';
+export * from './discover.effect';
diff --git a/src/packages/discovery/store/index.ts b/src/packages/discovery/store/index.ts
new file mode 100644
index 0000000..d54fd4a
--- /dev/null
+++ b/src/packages/discovery/store/index.ts
@@ -0,0 +1,42 @@
+import {
+  createSelector,
+  createFeatureSelector,
+  ActionReducerMap,
+  Selector,
+} from '@ngrx/store';
+
+import { StateSelector } from 'packages/core/ngrx/store';
+
+import { MODULE } from '../discovery.constant';
+
+
+import * as DiscoverStore from './discover';
+import * as SettingStore from './setting';
+
+
+export interface State {
+  discover: DiscoverStore.State;
+  setting: SettingStore.State;
+}
+
+export const REDUCERS = {
+  discover: DiscoverStore.reducer,
+  setting: SettingStore.reducer,
+};
+
+export const EFFECTS = [
+  SettingStore.Effects,
+  DiscoverStore.Effects,
+];
+
+export const selectDiscoveryState = createFeatureSelector<State>(MODULE.name);
+
+export const DiscoverSelector = new StateSelector<DiscoverStore.State>(createSelector(
+  selectDiscoveryState,
+  (state: State) => state.discover
+));
+
+export const SettingSelector = new StateSelector<SettingStore.State>(createSelector(
+  selectDiscoveryState,
+  (state: State) => state.setting
+));
diff --git a/src/packages/discovery/store/regist/index.ts b/src/packages/discovery/store/regist/index.ts
new file mode 100644
index 0000000..f6da3fb
--- /dev/null
+++ b/src/packages/discovery/store/regist/index.ts
@@ -0,0 +1,4 @@
+export * from './regist.action';
+export * from './regist.effect';
+export * from './regist.reducer';
+export * from './regist.state';
diff --git a/src/packages/discovery/store/regist/regist.action.ts b/src/packages/discovery/store/regist/regist.action.ts
new file mode 100644
index 0000000..296988b
--- /dev/null
+++ b/src/packages/discovery/store/regist/regist.action.ts
@@ -0,0 +1,45 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import {
+  Zone,
+  Host,
+  Port,
+  Service,
+  DiscoveryZone,
+  DiscoveryHost,
+  DiscoveryPort,
+  DiscoveryService as MDiscoveryService,
+} from '../../model';
+import { Probe } from 'packages/probe/model';
+
+ export enum ActionType {
+  SaveAllTarget = '[@@REGIST] TargetDiscoveryService.saveAllTarget',
+  SaveAllTargetSuccess = '[@@REGIST] TargetDiscoveryService.SaveAllTargetSuccess',
+  SaveAllTargetFailure = '[@@REGIST] TargetDiscoveryService.SaveAllTargetFailure',
+}
+
+export class DiscoverySaveAllTarget implements Action {
+  readonly type = ActionType.SaveAllTarget;
+
+  constructor(public payload: {hosts: Host[], probe: Probe}) {}
+}
+
+export class DiscoverySaveAllTargetSuccess implements Action {
+  readonly type = ActionType.SaveAllTargetSuccess;
+
+  constructor(public payload: Boolean) {}
+}
+
+export class DiscoverySaveAllTargetFailure implements Action {
+  readonly type = ActionType.SaveAllTargetFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export type Actions =
+  | DiscoverySaveAllTarget
+  | DiscoverySaveAllTargetSuccess
+  | DiscoverySaveAllTargetFailure
+;
diff --git a/src/packages/discovery/store/regist/regist.effect.spec.ts b/src/packages/discovery/store/regist/regist.effect.spec.ts
new file mode 100644
index 0000000..2b298f3
--- /dev/null
+++ b/src/packages/discovery/store/regist/regist.effect.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './regist.effect';
+
+describe('Regist.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});
diff --git a/src/packages/discovery/store/regist/regist.effect.ts b/src/packages/discovery/store/regist/regist.effect.ts
new file mode 100644
index 0000000..45541b2
--- /dev/null
+++ b/src/packages/discovery/store/regist/regist.effect.ts
@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { DiscoveryStartInfo } from '../../model';
+import { TargetDiscoveryService } from '../../service/target-discovery.service';
+
+import {
+  DiscoverySaveAllTarget,
+  DiscoverySaveAllTargetSuccess,
+  DiscoverySaveAllTargetFailure,
+  ActionType
+} from './regist.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private targetDiscoveryService: TargetDiscoveryService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  saveAllTargetResult$: Observable<Action> = this.actions$
+  .ofType(ActionType.SaveAllTarget)
+  .map((action: DiscoverySaveAllTarget) => action.payload)
+  .switchMap(payload => this.targetDiscoveryService.saveAllTarget(payload.hosts, payload.probe))
+  .map(result => {
+    return new DiscoverySaveAllTargetSuccess(result);
+  })
+  .catch((error: RPCClientError) => {
+    console.log(error.response.message);
+    return of(new DiscoverySaveAllTargetFailure(error));
+  });
+
+}
diff --git a/src/packages/discovery/store/regist/regist.reducer.ts b/src/packages/discovery/store/regist/regist.reducer.ts
new file mode 100644
index 0000000..98f62f7
--- /dev/null
+++ b/src/packages/discovery/store/regist/regist.reducer.ts
@@ -0,0 +1,45 @@
+import {
+  Actions,
+  ActionType,
+} from './regist.action';
+
+import {
+  State,
+  initialState,
+} from './regist.state';
+
+import { DiscoveryStartInfo } from '../../model';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.SaveAllTarget: {
+      return {
+        ...state,
+        error: null,
+        isPending: true,
+      };
+    }
+
+    case ActionType.SaveAllTargetSuccess: {
+      return {
+        ...state,
+        error: null,
+        isPending: false,
+        isSuccess: action.payload,
+      };
+    }
+
+    case ActionType.SaveAllTargetFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        isPending: false,
+        isSuccess: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/packages/discovery/store/regist/regist.state.ts b/src/packages/discovery/store/regist/regist.state.ts
new file mode 100644
index 0000000..8d12c07
--- /dev/null
+++ b/src/packages/discovery/store/regist/regist.state.ts
@@ -0,0 +1,18 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { DiscoveryStartInfo } from '../../model';
+
+export interface State {
+  error: RPCClientError | null;
+  isPending: boolean;
+  isSuccess: Boolean | null;
+}
+
+export const initialState: State = {
+  error: null,
+  isPending: false,
+  isSuccess: null,
+};
+
+export const getSuccess = (state: State) => state.isSuccess;
+
diff --git a/src/packages/discovery/store/setting/index.ts b/src/packages/discovery/store/setting/index.ts
new file mode 100644
index 0000000..1393479
--- /dev/null
+++ b/src/packages/discovery/store/setting/index.ts
@@ -0,0 +1,4 @@
+export * from './setting.action';
+export * from './setting.effect';
+export * from './setting.reducer';
+export * from './setting.state';
diff --git a/src/packages/discovery/store/setting/setting.action.ts b/src/packages/discovery/store/setting/setting.action.ts
new file mode 100644
index 0000000..e429799
--- /dev/null
+++ b/src/packages/discovery/store/setting/setting.action.ts
@@ -0,0 +1,42 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { DiscoveryStartInfo } from '../../model';
+
+export enum ActionType {
+  Setting = '[discovery.setting] Setting',
+  SettingSuccess = '[discovery.setting] SettingSuccess',
+  SettingFailure = '[discovery.setting] SettingFailure',
+  SettingRedirect = '[discovery.setting] SettingRedirect',
+}
+
+export class Setting implements Action {
+  readonly type = ActionType.Setting;
+
+  constructor(public payload: DiscoveryStartInfo) {}
+}
+
+export class SettingSuccess implements Action {
+  readonly type = ActionType.SettingSuccess;
+
+  constructor(public payload: DiscoveryStartInfo) {}
+}
+
+export class SettingFailure implements Action {
+  readonly type = ActionType.SettingFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export class SettingRedirect implements Action {
+  readonly type = ActionType.SettingRedirect;
+}
+
+
+export type Actions =
+  | Setting
+  | SettingSuccess
+  | SettingFailure
+  | SettingRedirect
+;
diff --git a/src/packages/discovery/store/setting/setting.effect.spec.ts b/src/packages/discovery/store/setting/setting.effect.spec.ts
new file mode 100644
index 0000000..cbfff71
--- /dev/null
+++ b/src/packages/discovery/store/setting/setting.effect.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './setting.effect';
+
+describe('Auth.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});
diff --git a/src/packages/discovery/store/setting/setting.effect.ts b/src/packages/discovery/store/setting/setting.effect.ts
new file mode 100644
index 0000000..4a0312c
--- /dev/null
+++ b/src/packages/discovery/store/setting/setting.effect.ts
@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { DiscoveryStartInfo } from '../../model';
+import { DiscoveryService } from '../../service/discovery.service';
+
+import {
+  Setting,
+  SettingSuccess,
+  SettingFailure,
+  ActionType,
+} from './setting.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private discoveryService: DiscoveryService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  startDiscovery$: Observable<Action> = this.actions$
+  .ofType(ActionType.Setting)
+  .map((action: Setting) => action.payload)
+  .switchMap(payload => this.discoveryService.start(payload))
+  .map(discoveryStartInfo => {
+    return new SettingSuccess(discoveryStartInfo);
+  })
+  .catch((error: RPCClientError) => {
+    console.log(error.response.message);
+    return of(new SettingFailure(error));
+  });
+
+}
diff --git a/src/packages/discovery/store/setting/setting.reducer.ts b/src/packages/discovery/store/setting/setting.reducer.ts
new file mode 100644
index 0000000..55af245
--- /dev/null
+++ b/src/packages/discovery/store/setting/setting.reducer.ts
@@ -0,0 +1,48 @@
+import {
+  Actions,
+  ActionType,
+  Setting,
+} from './setting.action';
+
+import {
+  State,
+  initialState,
+} from './setting.state';
+
+import { DiscoveryStartInfo } from '../../model';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.Setting: {
+      return {
+        ...state,
+        error: null,
+        isPending: true,
+      };
+    }
+
+    case ActionType.SettingSuccess: {
+      return {
+        ...state,
+        isStart: true,
+        error: null,
+        isPending: false,
+        discoveryStartInfo: action.payload,
+      };
+    }
+
+    case ActionType.SettingFailure: {
+      return {
+        ...state,
+        isStart: false,
+        error: action.payload,
+        isPending: false,
+        discoveryStartInfo: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/packages/discovery/store/setting/setting.state.ts b/src/packages/discovery/store/setting/setting.state.ts
new file mode 100644
index 0000000..88a2e9b
--- /dev/null
+++ b/src/packages/discovery/store/setting/setting.state.ts
@@ -0,0 +1,22 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { DiscoveryStartInfo } from '../../model';
+
+export interface State {
+  isStart: boolean;
+  error: RPCClientError | null;
+  isPending: boolean;
+  discoveryStartInfo: DiscoveryStartInfo | null;
+}
+
+export const initialState: State = {
+  isStart: false,
+  error: null,
+  isPending: false,
+  discoveryStartInfo: null,
+};
+
+export const isStart = (state: State) => state.isStart;
+export const getDiscoveryStartInfo = (state: State) => state.discoveryStartInfo;
+export const getError = (state: State) => state.error;
+export const isPending = (state: State) => state.isPending;
diff --git a/src/packages/discovery/subscriber/discovery.subscriber.ts b/src/packages/discovery/subscriber/discovery.subscriber.ts
new file mode 100644
index 0000000..c2d341d
--- /dev/null
+++ b/src/packages/discovery/subscriber/discovery.subscriber.ts
@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+import { Store, select } from '@ngrx/store';
+
+import { RPCSubscriber } from '@loafer/ng-rpc/decorator';
+import { LoggerService } from '@loafer/ng-logger/service';
+
+import * as DiscoverStore from '../store/discover';
+
+import {
+  Zone,
+  Host,
+  Port,
+  Service,
+} from '../model';
+
+@Injectable()
+export class DiscoverySubscriber {
+
+  public constructor(
+    private store: Store<DiscoverStore.State>,
+    private loggerService: LoggerService,
+  ) {
+    this.loggerService.debug('dddddd');
+  }
+
+  @RPCSubscriber({method: 'DiscoveryService.discoveredZone'})
+  public discoveredZone(zone: Zone): void {
+    this.loggerService.debug('DiscoverySubscriber.discoveredZone zone:', zone);
+
+    this.store.dispatch(new DiscoverStore.DiscoveredZone(zone));
+  }
+  @RPCSubscriber({method: 'DiscoveryService.discoveredHost'})
+  public discoveredHost(host: Host): void {
+    // this.loggerService.debug('DiscoverySubscriber.discoveredHost host:', host);
+
+    this.store.dispatch(new DiscoverStore.DiscoveredHost(host));
+  }
+  @RPCSubscriber({method: 'DiscoveryService.discoveredPort'})
+  public discoveredPort(port: Port): void {
+    this.store.dispatch(new DiscoverStore.DiscoveredPort(port));
+  }
+  @RPCSubscriber({method: 'DiscoveryService.discoveredService'})
+  public discoveredService(service: Service): void {
+    this.loggerService.debug('DiscoverySubscriber.discoveredService service:', service);
+    this.store.dispatch(new DiscoverStore.DiscoveredService(service));
+  }
+}
diff --git a/src/packages/discovery/subscriber/index.ts b/src/packages/discovery/subscriber/index.ts
new file mode 100644
index 0000000..c2a5515
--- /dev/null
+++ b/src/packages/discovery/subscriber/index.ts
@@ -0,0 +1,5 @@
+import { DiscoverySubscriber } from './discovery.subscriber';
+
+export const SUBSCRIBERS = [
+  DiscoverySubscriber,
+];
diff --git a/src/packages/infra/component/index.ts b/src/packages/infra/component/index.ts
new file mode 100644
index 0000000..bca5cf0
--- /dev/null
+++ b/src/packages/infra/component/index.ts
@@ -0,0 +1,5 @@
+// import { MapComponent } from './map/map.component';
+
+// export const COMPONENTS = [
+//   MapComponent,
+// ];
diff --git a/src/packages/infra/component/map/map.component.html b/src/packages/infra/component/map/map.component.html
new file mode 100644
index 0000000..c3970d9
--- /dev/null
+++ b/src/packages/infra/component/map/map.component.html
@@ -0,0 +1,55 @@
+<div fxLayoutAlign="end" [style.margin]="'10px 10px'">
+  <form class="form">
+    <mat-form-field class="full-width">
+      <input matInput placeholder="Search" [(ngModel)]="searchWord" (ngModelChange)="handleSearch($event)" [ngModelOptions]="{standalone: true}">
+      <mat-icon matSuffix>search</mat-icon>
+    </mat-form-field>
+  </form>
+</div>
+<div fxLayoutAlign="end" [style.margin]="'10px 10px'">
+  ** probe가 설치된 host와 그 probe가 가장 상위에 나와야 함 **
+  <div class="box up"></div>Up
+  <div class="box down"></div>Down
+  <div class="box warn"></div>Warn
+  <div class="box error"></div>Error
+</div>
+
+<div *ngIf="loading" fxLayoutAlign="center">
+  <mat-spinner></mat-spinner>
+</div>
+<div *ngIf="!loading" class="search-result" infinite-scroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false">
+  <div class="infra-list mat-elevation-z4 " *ngFor="let infra of hostDataList">
+    <mat-toolbar>
+      <mat-toolbar-row>
+        <span matTooltip="showHostInfo(infra)">IP : {{infra.host.ip}}</span>
+        <span class="pull-right"></span>
+        <span style="margin-right: 20px">
+          <!-- <of-sensor-name-tag [target]="infra.target"></of-sensor-name-tag> -->
+        </span>
+        <button mat-raised-button color="primary" fxLayoutAlign="end" (click)="addSensor(infra)">Add Sensor</button>
+      </mat-toolbar-row>
+    </mat-toolbar>
+
+    <mat-card-content *ngFor="let service of infra.services">
+      <mat-grid-list cols="6" rowHeight="9:1">
+        <mat-grid-tile [rowspan]="2"  style="background-color: lightcoral">
+          {{service.vendor.name}}
+        </mat-grid-tile>
+        <mat-grid-tile [colspan]="3" style="background-color: lightblue">
+          <div class="grid-left-align">
+            Port : {{service.port}} | {{service.portType}} {{service.tlsType ? '| TLS' : ''}}
+          </div>
+        </mat-grid-tile>
+        <mat-grid-tile [rowspan]="2" style="background-color: lightgray">
+          <span class="pull-right"></span>
+          <button mat-button fxLayoutAlign="end" (click)="addSensor(infra)">Add Sensor</button>
+        </mat-grid-tile>
+        <mat-grid-tile [colspan]="3" style="background-color: lightgreen">
+          <div class="grid-left-align">
+            <!-- <of-sensor-name-tag [target]="service.target"></of-sensor-name-tag> -->
+          </div>
+        </mat-grid-tile>
+      </mat-grid-list>
+    </mat-card-content>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/packages/infra/component/map/map.component.scss b/src/packages/infra/component/map/map.component.scss
new file mode 100644
index 0000000..bfcacdd
--- /dev/null
+++ b/src/packages/infra/component/map/map.component.scss
@@ -0,0 +1,78 @@
+@mixin infra-list($theme) {
+    
+  .infra-list{
+      margin: 10px 5px;
+      background: white;
+  }
+  .pull-right{
+      flex: 1 1 auto;
+  }
+  mat-list-item:hover {
+      background: #e8eaf6;
+      cursor: pointer;
+  }
+  .mat-chip {
+      padding: 1px 13px;
+  }
+  
+}
+.nav-item {
+transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+cursor: default;
+
+&:hover {
+  transform: translate(0, -8px);
+  box-shadow: 0 20px 20px rgba(0, 0, 0, .16)
+}
+}
+
+
+.infra-card {
+    width: 70%;
+  }
+
+  .grid-left-align {
+    position: absolute;
+    left: 5px;
+  }
+
+  .add-sensor-button {
+    position: absolute;
+    right: 1px;
+  }
+
+  .box{
+    float: left;
+    width: 13px;
+    height: 13px;
+    margin: 5px;
+    border: 1px solid rgba(0, 0, 0, .2);
+  }
+   
+  .up{
+    background: green;
+  }
+  .down{
+    background: red;
+  }
+  .warn{
+    background: yellow;
+  }
+  .error{
+    background:red;
+  }
+
+  .form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+  
+  .full-width {
+    width: 100%;
+  }
+
+  .search-result {
+    height: 80%;
+    overflow-y: scroll;
+  }
\ No newline at end of file
diff --git a/src/packages/infra/component/map/map.component.spec.ts b/src/packages/infra/component/map/map.component.spec.ts
new file mode 100644
index 0000000..62c3b6b
--- /dev/null
+++ b/src/packages/infra/component/map/map.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MapComponent } from './map.component';
+
+describe('MapComponent', () => {
+  let component: MapComponent;
+  let fixture: ComponentFixture<MapComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [MapComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/infra/infra-store.module.ts b/src/packages/infra/infra-store.module.ts
new file mode 100644
index 0000000..efcb0bc
--- /dev/null
+++ b/src/packages/infra/infra-store.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+
+import { EffectsModule } from '@ngrx/effects';
+
+import {
+  REDUCERS,
+  EFFECTS,
+} from './store';
+
+import { MODULE } from './infra.constant';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(MODULE.name, REDUCERS),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class InfraStoreModule { }
diff --git a/src/packages/infra/infra.constant.ts b/src/packages/infra/infra.constant.ts
new file mode 100644
index 0000000..d8a2e8a
--- /dev/null
+++ b/src/packages/infra/infra.constant.ts
@@ -0,0 +1,3 @@
+export const MODULE = {
+    name: 'infra'
+  };
diff --git a/src/packages/infra/infra.module.ts b/src/packages/infra/infra.module.ts
new file mode 100644
index 0000000..a3776f7
--- /dev/null
+++ b/src/packages/infra/infra.module.ts
@@ -0,0 +1,38 @@
+// import { NgModule } from '@angular/core';
+// import { CommonModule } from '@angular/common';
+
+// import { MaterialModule } from 'packages/commons/material/material.module';
+
+// import { InfraStoreModule } from './infra-store.module';
+
+// import { COMPONENTS } from './component';
+// import { SERVICES } from './service';
+// import { SensorSettingPageModule } from 'app/pages/sensor-setting/sensor-setting-page.module';
+// import { SensorModule } from '../sensor/sensor.module';
+// import { SettingComponent } from '../sensor/component/setting/setting.component';
+// import { FormsModule } from '@angular/forms';
+// import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+
+// @NgModule({
+//   imports: [
+//     CommonModule,
+//     MaterialModule,
+//     InfraStoreModule,
+//     SensorModule,
+//     FormsModule,
+//     InfiniteScrollModule
+//   ],
+//   declarations: [
+//     COMPONENTS,
+//   ],
+//   exports: [
+//     COMPONENTS,
+//   ],
+//   providers: [
+//     SERVICES
+//   ],
+//   entryComponents: [
+//     SettingComponent,
+//   ]
+// })
+// export class InfraModule { }
diff --git a/src/packages/infra/model/Infra.ts b/src/packages/infra/model/Infra.ts
new file mode 100644
index 0000000..88b4832
--- /dev/null
+++ b/src/packages/infra/model/Infra.ts
@@ -0,0 +1,13 @@
+
+import { Probe } from 'packages/probe/model';
+import { Target } from 'packages/target/model';
+import { MetaInfraType } from '../../meta/infra-type/model/MetaInfraType';
+
+export interface Infra {
+    id?: number;
+    infraType?: MetaInfraType;
+    childId?: number;
+    createDate?: Date;
+    probe?: Probe;
+    target?: Target;
+}
diff --git a/src/packages/infra/model/InfraHost.ts b/src/packages/infra/model/InfraHost.ts
new file mode 100644
index 0000000..272fad7
--- /dev/null
+++ b/src/packages/infra/model/InfraHost.ts
@@ -0,0 +1,10 @@
+import { InfraOS } from './InfraOS';
+import { Infra } from './Infra';
+
+export interface InfraHost extends Infra {
+    // id?: number;
+    os?: InfraOS;
+    ip?: number;
+    mac?: number;
+    createDate?: Date;
+}
diff --git a/src/packages/infra/model/InfraMachine.ts b/src/packages/infra/model/InfraMachine.ts
new file mode 100644
index 0000000..c12fc7c
--- /dev/null
+++ b/src/packages/infra/model/InfraMachine.ts
@@ -0,0 +1,8 @@
+
+import { Infra } from './Infra';
+
+export interface InfraMachine extends Infra {
+    // id?: number;
+    meta?: string;
+    createDate?: Date;
+}
diff --git a/src/packages/infra/model/InfraOS.ts b/src/packages/infra/model/InfraOS.ts
new file mode 100644
index 0000000..04da32f
--- /dev/null
+++ b/src/packages/infra/model/InfraOS.ts
@@ -0,0 +1,11 @@
+import { InfraMachine } from './InfraMachine';
+import { Infra } from './Infra';
+import { MetaInfraVendor } from '../../meta/infra-vendor/model/MetaInfraVendor';
+
+export interface InfraOS extends Infra {
+    // id?: number;
+    machine?: InfraMachine;
+    meta?: string;
+    createDate?: Date;
+    vendor?: MetaInfraVendor;
+}
diff --git a/src/packages/infra/model/InfraOSApplication.ts b/src/packages/infra/model/InfraOSApplication.ts
new file mode 100644
index 0000000..40a5a2a
--- /dev/null
+++ b/src/packages/infra/model/InfraOSApplication.ts
@@ -0,0 +1,10 @@
+
+import { InfraOS } from './InfraOS';
+import { Infra } from './Infra';
+
+export interface InfraOSApplication extends Infra {
+    // id?: number;
+    os?: InfraOS;
+    name?: string;
+    createDate?: Date;
+}
diff --git a/src/packages/infra/model/InfraOSDaemon.ts b/src/packages/infra/model/InfraOSDaemon.ts
new file mode 100644
index 0000000..8e4eeb8
--- /dev/null
+++ b/src/packages/infra/model/InfraOSDaemon.ts
@@ -0,0 +1,9 @@
+import { InfraOS } from './InfraOS';
+import { Infra } from './Infra';
+
+export interface InfraOSDaemon extends Infra {
+    // id?: number;
+    os?: InfraOS;
+    name?: string;
+    createDate?: Date;
+}
diff --git a/src/packages/infra/model/InfraOSPort.ts b/src/packages/infra/model/InfraOSPort.ts
new file mode 100644
index 0000000..d5ea526
--- /dev/null
+++ b/src/packages/infra/model/InfraOSPort.ts
@@ -0,0 +1,13 @@
+import { InfraOS } from './InfraOS';
+import { Infra } from './Infra';
+import { MetaInfraVendor } from 'packages/meta/infra-vendor/model/MetaInfraVendor';
+
+export interface InfraOSPort extends Infra {
+    // id?: number;
+    os?: InfraOS;
+    createDate?: Date;
+    port?: number;
+    portType?: string;
+    vendor?: MetaInfraVendor;
+    tlsType?: boolean;
+}
diff --git a/src/packages/infra/model/InfraService.ts b/src/packages/infra/model/InfraService.ts
new file mode 100644
index 0000000..a7a9e2b
--- /dev/null
+++ b/src/packages/infra/model/InfraService.ts
@@ -0,0 +1,13 @@
+import { InfraHost } from './InfraHost';
+import { Infra } from './Infra';
+import { MetaInfraVendor } from 'packages/meta/infra-vendor/model/MetaInfraVendor';
+
+export interface InfraService extends Infra {
+    // id?: number;
+    host?: InfraHost;
+    portType?: string;
+    port?: number;
+    vendor?: MetaInfraVendor;
+    createDate?: Date;
+    tlsType?: boolean;
+}
diff --git a/src/packages/infra/model/index.ts b/src/packages/infra/model/index.ts
new file mode 100644
index 0000000..11a43d5
--- /dev/null
+++ b/src/packages/infra/model/index.ts
@@ -0,0 +1,8 @@
+export * from './InfraHost';
+export * from './InfraMachine';
+export * from './InfraOSApplication';
+export * from './InfraOSDaemon';
+export * from './InfraOSPort';
+export * from './InfraOS';
+export * from './InfraService';
+export * from './Infra';
diff --git a/src/packages/infra/service/index.ts b/src/packages/infra/service/index.ts
new file mode 100644
index 0000000..089ea50
--- /dev/null
+++ b/src/packages/infra/service/index.ts
@@ -0,0 +1,5 @@
+import { InfraService } from './infra.service';
+
+export const SERVICES = [
+    InfraService,
+];
diff --git a/src/packages/infra/service/infra.service.spec.ts b/src/packages/infra/service/infra.service.spec.ts
new file mode 100644
index 0000000..9d6ab70
--- /dev/null
+++ b/src/packages/infra/service/infra.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { InfraService } from './infra.service';
+
+describe('InfraService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [InfraService]
+    });
+  });
+
+  it('should be created', inject([InfraService], (service: InfraService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/packages/infra/service/infra.service.ts b/src/packages/infra/service/infra.service.ts
new file mode 100644
index 0000000..cebe6c8
--- /dev/null
+++ b/src/packages/infra/service/infra.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/map';
+
+import { RPCService } from '@loafer/ng-rpc/service';
+
+import { Infra } from '../model';
+import { Page, PageParams } from '../../../app/commons/model';
+import { Domain } from '../../domain/model';
+import { Probe } from '../../probe/model';
+
+@Injectable()
+export class InfraService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  public readAllByDomain(domain: Domain, pageParams: PageParams): Observable<Page> {
+    return this.rpcService.call('InfraService.readAllByDomain', domain, pageParams);
+  }
+
+  public readAllByProbe(probe: Probe, pageParams: PageParams): Observable<Page> {
+    return this.rpcService.call('InfraService.readAllByProbe', probe, pageParams);
+  }
+}
diff --git a/src/packages/infra/store/index.ts b/src/packages/infra/store/index.ts
new file mode 100644
index 0000000..5c1dd3f
--- /dev/null
+++ b/src/packages/infra/store/index.ts
@@ -0,0 +1,31 @@
+import {
+  createSelector,
+  createFeatureSelector,
+  ActionReducerMap,
+} from '@ngrx/store';
+
+import { MODULE } from '../infra.constant';
+
+import * as ListStore from './list';
+import { StateSelector } from '../../core/ngrx/store';
+
+
+export interface State {
+  list: ListStore.State;
+}
+
+export const REDUCERS = {
+  list: ListStore.reducer,
+};
+
+export const EFFECTS = [
+  ListStore.Effects,
+];
+
+export const selectInfraState = createFeatureSelector<State>(MODULE.name);
+
+export const ListSelector = new StateSelector<ListStore.State>(createSelector(
+  selectInfraState,
+  (state: State) => state.list
+));
+
diff --git a/src/packages/infra/store/list/index.ts b/src/packages/infra/store/list/index.ts
new file mode 100644
index 0000000..7fd86e0
--- /dev/null
+++ b/src/packages/infra/store/list/index.ts
@@ -0,0 +1,4 @@
+export * from './list.action';
+export * from './list.effect';
+export * from './list.reducer';
+export * from './list.state';
diff --git a/src/packages/infra/store/list/list.action.ts b/src/packages/infra/store/list/list.action.ts
new file mode 100644
index 0000000..a72b4d3
--- /dev/null
+++ b/src/packages/infra/store/list/list.action.ts
@@ -0,0 +1,63 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { PageParams, Page } from 'app/commons/model';
+import { Domain } from '../../../domain/model';
+import { Probe } from '../../../probe/model';
+
+export enum ActionType {
+  ReadAllByDomain = '[Infra.list] ReadAllByDomain',
+  ReadAllByDomainSuccess = '[Infra.list] ReadAllByDomainSuccess',
+  ReadAllByDomainFailure = '[Infra.list] ReadAllByDomainFailure',
+
+  ReadAllByProbe = '[Infra.list] ReadAllByProbe',
+  ReadAllByProbeSuccess = '[Infra.list] ReadAllByProbeSuccess',
+  ReadAllByProbeFailure = '[Infra.list] ReadAllByProbeFailure',
+}
+
+export class ReadAllByDomain implements Action {
+  readonly type = ActionType.ReadAllByDomain;
+
+  constructor(public payload: { domain: Domain, pageParams: PageParams }) { }
+}
+
+export class ReadAllByDomainSuccess implements Action {
+  readonly type = ActionType.ReadAllByDomainSuccess;
+
+  constructor(public payload: Page) { }
+}
+
+export class ReadAllByDomainFailure implements Action {
+  readonly type = ActionType.ReadAllByDomainFailure;
+
+  constructor(public payload: RPCClientError) { }
+}
+
+export class ReadAllByProbe implements Action {
+  readonly type = ActionType.ReadAllByProbe;
+
+  constructor(public payload: { probe: Probe, pageParams: PageParams }) { }
+}
+
+export class ReadAllByProbeSuccess implements Action {
+  readonly type = ActionType.ReadAllByProbeSuccess;
+
+  constructor(public payload: Page) { }
+}
+
+export class ReadAllByProbeFailure implements Action {
+  readonly type = ActionType.ReadAllByProbeFailure;
+
+  constructor(public payload: RPCClientError) { }
+}
+
+
+export type Actions =
+  | ReadAllByDomain
+  | ReadAllByDomainSuccess
+  | ReadAllByDomainFailure
+  | ReadAllByProbe
+  | ReadAllByProbeSuccess
+  | ReadAllByProbeFailure
+  ;
diff --git a/src/packages/infra/store/list/list.effect.spec.ts b/src/packages/infra/store/list/list.effect.spec.ts
new file mode 100644
index 0000000..a77b6b1
--- /dev/null
+++ b/src/packages/infra/store/list/list.effect.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './list.effect';
+
+describe('list.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});
diff --git a/src/packages/infra/store/list/list.effect.ts b/src/packages/infra/store/list/list.effect.ts
new file mode 100644
index 0000000..d58227d
--- /dev/null
+++ b/src/packages/infra/store/list/list.effect.ts
@@ -0,0 +1,64 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Infra } from '../../model';
+import { InfraService } from '../../service/infra.service';
+
+import {
+  ReadAllByDomain,
+  ReadAllByDomainSuccess,
+  ReadAllByDomainFailure,
+  ReadAllByProbe,
+  ReadAllByProbeSuccess,
+  ReadAllByProbeFailure,
+  ActionType,
+} from './list.action';
+import { Domain } from 'packages/domain/model';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private infraService: InfraService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  readAllByDomain$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAllByDomain)
+    .map((action: ReadAllByDomain) => action.payload)
+    .switchMap(payload => this.infraService.readAllByDomain(payload.domain, payload.pageParams))
+    .map(page => {
+      return new ReadAllByDomainSuccess(page);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllByDomainFailure(error));
+    });
+
+    @Effect()
+    readAllByProbe$: Observable<Action> = this.actions$
+      .ofType(ActionType.ReadAllByProbe)
+      .map((action: ReadAllByProbe) => action.payload)
+      .switchMap(payload => this.infraService.readAllByProbe(payload.probe, payload.pageParams))
+      .map(page => {
+        return new ReadAllByProbeSuccess(page);
+      })
+      .catch((error: RPCClientError) => {
+        return of(new ReadAllByProbeFailure(error));
+      });
+}
diff --git a/src/packages/infra/store/list/list.reducer.ts b/src/packages/infra/store/list/list.reducer.ts
new file mode 100644
index 0000000..698b9d4
--- /dev/null
+++ b/src/packages/infra/store/list/list.reducer.ts
@@ -0,0 +1,39 @@
+import { Actions, ActionType } from './list.action';
+
+import { State, initialState } from './list.state';
+
+import { Infra } from '../../model';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ReadAllByDomain: {
+      return {
+        ...state,
+        error: null,
+        isPending: true,
+      };
+    }
+
+    case ActionType.ReadAllByDomainSuccess: {
+      return {
+        ...state,
+        error: null,
+        isPending: false,
+        page: action.payload
+      };
+    }
+
+    case ActionType.ReadAllByDomainFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        isPending: false,
+        page: null
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/packages/infra/store/list/list.state.ts b/src/packages/infra/store/list/list.state.ts
new file mode 100644
index 0000000..4af6fdb
--- /dev/null
+++ b/src/packages/infra/store/list/list.state.ts
@@ -0,0 +1,30 @@
+import {
+  createSelector,
+  MemoizedSelector,
+} from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Infra } from '../../model';
+import { Page } from '../../../../app/commons/model';
+
+export interface State {
+  error: RPCClientError | null;
+  isPending: boolean;
+  page: Page | null;
+}
+
+export const initialState: State = {
+  error: null,
+  isPending: false,
+  page: null,
+};
+
+export class StateSelector {
+  public constructor(private _selector: MemoizedSelector<any, any>) {
+  }
+
+  public getInfraList = createSelector(this._selector, (state: State) => state.page);
+  public getError = createSelector(this._selector, (state: State) => state.error);
+  public isPending = createSelector(this._selector, (state: State) => state.isPending);
+}
diff --git a/src/packages/member/component/signin/signin.component.html b/src/packages/member/component/signin/signin.component.html
index 6b97055..fe3cfc7 100644
--- a/src/packages/member/component/signin/signin.component.html
+++ b/src/packages/member/component/signin/signin.component.html
@@ -1,65 +1,30 @@
-<!DOCTYPE html>
-<html>
+<div class="card login-panel ui-fluid">
+    <div class="ui-g">
+        <div class="ui-g-12">
+            <img src="assets/layout/images/logo-ultima.svg">
+        </div>
+        <div class="ui-g-12">
+            <span class="md-inputfield">
+                <input type="text" autocomplete="off" class="ui-inputtext ui-corner-all ui-state-default ui-widget">
+                <label>Username</label>
+            </span>
+        </div>
+        <div class="ui-g-12">
+            <span class="md-inputfield">
+                <input type="password" autocomplete="off" class="ui-inputtext ui-corner-all ui-state-default ui-widget">
+                <label>Password</label>
+            </span>
+        </div>
+        <div class="ui-g-12">
+            <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
+                <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
+                <span class="ui-button-text ui-c">Sign In</span>
+            </button>
+            <button type="button" class="secondary ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
+                <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-help"></span>
+                <span class="ui-button-text ui-c">Sign In</span>
+            </button>
+        </div>
+    </div>
 
-  <head>
-    <script>document.write('<base href="' + document.location + '" />');</script>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <title>overFlow</title>
-
-    <!-- Layout CSS -->
-    <link rel="stylesheet" type="text/css" href="assets/theme/theme-indigo.css">
-    <link rel="stylesheet" type="text/css" href="assets/layout/css/layout-indigo.css">
-    <link rel="stylesheet" type="text/css" href="assets/layout/css/primeng.min.css">
-
-    <script src="jquery.js"></script>
-    <script type="text/javascript">
-        $(function() {
-            $('input').on('blur', function(e) {
-                var el = $(this);
-                if(el.val() != '')
-                    el.addClass('ui-state-filled');
-                else
-                    el.removeClass('ui-state-filled');
-            });
-        });
-    </script>
-  </head>
-
-  <!-- 3. Display the application -->
-  <body class="login-body">
-      <div class="card login-panel ui-fluid">
-          <div class="ui-g">
-              <div class="ui-g-12">
-                  <img src="assets/layout/images/logo-ultima.svg">
-              </div>
-              <div class="ui-g-12">
-                    <span class="md-inputfield">
-                        <input type="text" autocomplete="off" class="ui-inputtext ui-corner-all ui-state-default ui-widget">
-                        <label>Username</label>
-                    </span>
-              </div>
-              <div class="ui-g-12">
-                  <span class="md-inputfield">
-                      <input type="password" autocomplete="off" class="ui-inputtext ui-corner-all ui-state-default ui-widget">
-                      <label>Password</label>
-                  </span>
-              </div>
-              <div class="ui-g-12">
-                  <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
-                      <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
-                      <span class="ui-button-text ui-c">Sign In</span>
-                  </button>
-                  <button type="button" class="secondary ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
-                      <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-help"></span>
-                      <span class="ui-button-text ui-c">Sign In</span>
-                  </button>
-              </div>
-          </div>
-
-      </div>
-  </body>
-
-</html>
+</div>
\ No newline at end of file
diff --git a/src/packages/member/model/Member.ts b/src/packages/member/model/Member.ts
index f73fdb1..c1de12a 100644
--- a/src/packages/member/model/Member.ts
+++ b/src/packages/member/model/Member.ts
@@ -1,4 +1,4 @@
-// import { MetaMemberStatus } from 'packages/meta/member-status/model/MetaMemberStatus';
+import { MetaMemberStatus } from 'packages/meta/member-status/model/MetaMemberStatus';
 
 export interface Member {
   id?: number;
@@ -8,5 +8,5 @@ export interface Member {
   phone?: string;
   companyName?: string;
   createDate?: Date;
-  // status?: MetaMemberStatus;
+  status?: MetaMemberStatus;
 }
diff --git a/src/packages/meta/crawler-input-item/crawler-input-store.module.ts b/src/packages/meta/crawler-input-item/crawler-input-store.module.ts
new file mode 100644
index 0000000..588d1a1
--- /dev/null
+++ b/src/packages/meta/crawler-input-item/crawler-input-store.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import {
+  StoreRouterConnectingModule,
+  RouterStateSerializer,
+} from '@ngrx/router-store';
+import { EffectsModule } from '@ngrx/effects';
+import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
+
+import {
+  REDUCERS,
+  EFFECTS,
+} from './store';
+
+import { MODULE } from './crawler-input.constant';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(MODULE.name, REDUCERS),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class MetaCrawlerInputItemStoreModule { }
diff --git a/src/packages/meta/crawler-input-item/crawler-input.constant.ts b/src/packages/meta/crawler-input-item/crawler-input.constant.ts
new file mode 100644
index 0000000..54329f5
--- /dev/null
+++ b/src/packages/meta/crawler-input-item/crawler-input.constant.ts
@@ -0,0 +1,3 @@
+export const MODULE = {
+  name: 'metaCrawlerInputItem'
+};
diff --git a/src/packages/meta/crawler-input-item/crawler-input.module.ts b/src/packages/meta/crawler-input-item/crawler-input.module.ts
new file mode 100644
index 0000000..5d1cc19
--- /dev/null
+++ b/src/packages/meta/crawler-input-item/crawler-input.module.ts
@@ -0,0 +1,23 @@
+// import { NgModule } from '@angular/core';
+// import { CommonModule } from '@angular/common';
+
+// import {  } from './crawler.module';
+
+// import { MaterialModule } from 'packages/commons/material/material.module';
+// import { SERVICES } from './service';
+// import { MetaCrawlerInputItemStoreModule } from './crawler-input-store.module';
+
+// @NgModule({
+//   imports: [
+//     CommonModule,
+//     MetaCrawlerInputItemStoreModule
+//   ],
+//   declarations: [
+//   ],
+//   exports: [
+//   ],
+//   providers: [
+//     SERVICES,
+//   ]
+// })
+// export class MetaCrawlerInputItemModule { }
diff --git a/src/packages/meta/crawler-input-item/model/MetaCrawlerInputItem.ts b/src/packages/meta/crawler-input-item/model/MetaCrawlerInputItem.ts
new file mode 100644
index 0000000..b63ebc6
--- /dev/null
+++ b/src/packages/meta/crawler-input-item/model/MetaCrawlerInputItem.ts
@@ -0,0 +1,17 @@
+import { MetaInputType } from 'packages/meta/input-type/model/MetaInputType';
+import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
+
+
+export interface MetaCrawlerInputItem {
+  id?: number;
+  inputType: MetaInputType;
+  crawler: MetaCrawler;
+  description: string;
+  name: string;
+  createDate: Date;
+  required: boolean;
+  defaultValue: string;
+  pattern: string;
+  keyName: string;
+  keyValue: string;
+}
diff --git a/src/packages/meta/crawler-input-item/service/crawler-input-item.service.ts b/src/packages/meta/crawler-input-item/service/crawler-input-item.service.ts
new file mode 100644
index 0000000..ee28241
--- /dev/null
+++ b/src/packages/meta/crawler-input-item/service/crawler-input-item.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/map';
+
+import { RPCService } from '@loafer/ng-rpc/service';
+import { MetaCrawlerInputItem } from '../model/MetaCrawlerInputItem';
+import { MetaCrawler } from '../../crawler/model/MetaCrawler';
+
+
+@Injectable()
+export class MetaCrawlerInputItemService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  public readAllByMetaCrawler(c: MetaCrawler): Observable<MetaCrawlerInputItem[]> {
+    return this.rpcService.call('MetaCrawlerInputItemService.readAllByMetaCrawler', c);
+  }
+}
diff --git a/src/packages/meta/crawler-input-item/service/index.ts b/src/packages/meta/crawler-input-item/service/index.ts
new file mode 100644
index 0000000..2d26125
--- /dev/null
+++ b/src/packages/meta/crawler-input-item/service/index.ts
@@ -0,0 +1,5 @@
+import { MetaCrawlerInputItemService } from './crawler-input-item.service';
+
+export const SERVICES = [
+    MetaCrawlerInputItemService,
+];
diff --git a/src/packages/meta/crawler-input-item/store/index.ts b/src/packages/meta/crawler-input-item/store/index.ts
new file mode 100644
index 0000000..76b4226
--- /dev/null
+++ b/src/packages/meta/crawler-input-item/store/index.ts
@@ -0,0 +1,30 @@
+import {
+    createSelector,
+    createFeatureSelector,
+    ActionReducerMap,
+} from '@ngrx/store';
+
+import { StateSelector } from 'packages/core/ngrx/store';
+
+
+import * as ListStore from './list';
+import { MODULE } from '../crawler-input.constant';
+
+export interface State {
+    list: ListStore.State;
+}
+
+export const REDUCERS = {
+    list: ListStore.reducer,
+};
+
+export const EFFECTS = [
+    ListStore.Effects,
+];
+
+export const selectState = createFeatureSelector<State>(MODULE.name);
+
+export const ReadCrawlerInputItemSelector = new StateSelector<ListStore.State>(createSelector(
+    selectState,
+    (state: State) => state.list
+));
diff --git a/src/packages/meta/crawler-input-item/store/list/index.ts b/src/packages/meta/crawler-input-item/store/list/index.ts
new file mode 100644
index 0000000..7fd86e0
--- /dev/null
+++ b/src/packages/meta/crawler-input-item/store/list/index.ts
@@ -0,0 +1,4 @@
+export * from './list.action';
+export * from './list.effect';
+export * from './list.reducer';
+export * from './list.state';
diff --git a/src/packages/meta/crawler-input-item/store/list/list.action.ts b/src/packages/meta/crawler-input-item/store/list/list.action.ts
new file mode 100644
index 0000000..8bfebec
--- /dev/null
+++ b/src/packages/meta/crawler-input-item/store/list/list.action.ts
@@ -0,0 +1,37 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { MetaCrawler } from '../../../crawler/model/MetaCrawler';
+import { MetaCrawlerInputItem } from '../../model/MetaCrawlerInputItem';
+
+
+export enum ActionType {
+  ReadAll = '[meta.crawler-input-list] ReadAll',
+  ReadAllSuccess = '[meta.crawler-input-list] ReadAllSuccess',
+  ReadAllFailure = '[meta.crawler-input-list] ReadAllFailure',
+}
+
+export class ReadAll implements Action {
+  readonly type = ActionType.ReadAll;
+
+  constructor(public payload: MetaCrawler) {}
+}
+
+export class ReadAllSuccess implements Action {
+  readonly type = ActionType.ReadAllSuccess;
+
+  constructor(public payload: MetaCrawlerInputItem[]) {}
+}
+
+export class ReadAllFailure implements Action {
+  readonly type = ActionType.ReadAllFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export type Actions =
+  | ReadAll
+  | ReadAllSuccess
+  | ReadAllFailure
+
+;
diff --git a/src/packages/meta/crawler-input-item/store/list/list.effect.spec.ts b/src/packages/meta/crawler-input-item/store/list/list.effect.spec.ts
new file mode 100644
index 0000000..d8f6227
--- /dev/null
+++ b/src/packages/meta/crawler-input-item/store/list/list.effect.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './list.effect';
+
+describe('List.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});
diff --git a/src/packages/meta/crawler-input-item/store/list/list.effect.ts b/src/packages/meta/crawler-input-item/store/list/list.effect.ts
new file mode 100644
index 0000000..0279359
--- /dev/null
+++ b/src/packages/meta/crawler-input-item/store/list/list.effect.ts
@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { DomainMember } from 'packages/domain/model';
+
+
+import {
+  ReadAll,
+  ReadAllSuccess,
+  ReadAllFailure,
+  ActionType,
+} from './list.action';
+import { MetaCrawlerInputItemService } from '../../service/crawler-input-item.service';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private service: MetaCrawlerInputItemService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  readAll$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAll)
+    .map((action: ReadAll) => action.payload)
+    .switchMap(payload => this.service.readAllByMetaCrawler(payload))
+    .map(list => {
+      return new ReadAllSuccess(list);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllFailure(error));
+    });
+
+}
diff --git a/src/packages/meta/crawler-input-item/store/list/list.reducer.ts b/src/packages/meta/crawler-input-item/store/list/list.reducer.ts
new file mode 100644
index 0000000..ecb84ec
--- /dev/null
+++ b/src/packages/meta/crawler-input-item/store/list/list.reducer.ts
@@ -0,0 +1,43 @@
+import {
+  Actions,
+  ActionType,
+} from './list.action';
+
+import {
+  State,
+  initialState,
+} from './list.state';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ReadAll: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.ReadAllSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        inputs: action.payload
+      };
+    }
+
+    case ActionType.ReadAllFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        inputs: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/packages/meta/crawler-input-item/store/list/list.state.ts b/src/packages/meta/crawler-input-item/store/list/list.state.ts
new file mode 100644
index 0000000..819ef51
--- /dev/null
+++ b/src/packages/meta/crawler-input-item/store/list/list.state.ts
@@ -0,0 +1,15 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { MetaCrawlerInputItem } from '../../model/MetaCrawlerInputItem';
+
+
+export interface State {
+  error: RPCClientError | null;
+  pending: boolean;
+  inputs: MetaCrawlerInputItem[] | null;
+}
+
+export const initialState: State = {
+  error: null,
+  pending: false,
+  inputs: null,
+};
diff --git a/src/packages/meta/crawler/crawler-store.module.ts b/src/packages/meta/crawler/crawler-store.module.ts
new file mode 100644
index 0000000..f47c903
--- /dev/null
+++ b/src/packages/meta/crawler/crawler-store.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import {
+  StoreRouterConnectingModule,
+  RouterStateSerializer,
+} from '@ngrx/router-store';
+import { EffectsModule } from '@ngrx/effects';
+import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
+
+import {
+  REDUCERS,
+  EFFECTS,
+} from './store';
+
+import { MODULE } from './crawler.constant';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(MODULE.name, REDUCERS),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class MetaCrawlerStoreModule { }
diff --git a/src/packages/meta/crawler/crawler.constant.ts b/src/packages/meta/crawler/crawler.constant.ts
new file mode 100644
index 0000000..5edb6c9
--- /dev/null
+++ b/src/packages/meta/crawler/crawler.constant.ts
@@ -0,0 +1,3 @@
+export const MODULE = {
+  name: 'metaCrawler'
+};
diff --git a/src/packages/meta/crawler/crawler.module.ts b/src/packages/meta/crawler/crawler.module.ts
new file mode 100644
index 0000000..39510da
--- /dev/null
+++ b/src/packages/meta/crawler/crawler.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {  } from './crawler.module';
+
+import { SERVICES } from './service';
+import { MetaCrawlerStoreModule } from './crawler-store.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MetaCrawlerStoreModule
+  ],
+  declarations: [
+  ],
+  exports: [
+  ],
+  providers: [
+    SERVICES,
+  ]
+})
+export class MetaCrawlerModule { }
diff --git a/src/packages/meta/crawler/model/MetaCrawler.ts b/src/packages/meta/crawler/model/MetaCrawler.ts
new file mode 100644
index 0000000..7467fad
--- /dev/null
+++ b/src/packages/meta/crawler/model/MetaCrawler.ts
@@ -0,0 +1,34 @@
+
+export interface MetaCrawler {
+  id: number;
+  createDate?: Date;
+  name?: string;
+  description?: string;
+}
+
+export enum MetaCrawler_ID {
+  ACTIVEDIRECTORY_CRAWLER = 1,
+  CASSANDRA_CRAWLER = 2,
+  DHCP_CRAWLER = 3,
+  DNS_CRAWLER = 4,
+  FTP_CRAWLER = 5,
+  HTTP_CRAWLER = 6,
+  IMAP_CRAWLER = 7,
+  LDAP_CRAWLER = 8,
+  MONGODB_CRAWLER = 9,
+  MSSQL_CRAWLER = 10,
+  MYSQL_CRAWLER = 11,
+  NETBIOS_CRAWLER = 12,
+  ORACLE_CRAWLER = 13,
+  POP_CRAWLER = 14,
+  POSTGRESQL_CRAWLER = 15,
+  REDIS_CRAWLER = 16,
+  RMI_CRAWLER = 17,
+  SMB_CRAWLER = 18,
+  SMTP_CRAWLER = 19,
+  SNMP_CRAWLER = 20,
+  SSH_CRAWLER = 21,
+  TELNET_CRAWLER = 22,
+  WMI_CRAWLER = 23,
+  UNKNOWN_CRAWLER = 24,
+}
diff --git a/src/packages/meta/crawler/service/crawler.service.ts b/src/packages/meta/crawler/service/crawler.service.ts
new file mode 100644
index 0000000..fefb887
--- /dev/null
+++ b/src/packages/meta/crawler/service/crawler.service.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/map';
+
+import { RPCService } from '@loafer/ng-rpc/service';
+
+import { MetaCrawler } from '../model/MetaCrawler';
+
+@Injectable()
+export class MetaCrawlerService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  public readAll(): Observable<MetaCrawler[]> {
+    return this.rpcService.call('MetaCrawlerService.readAll');
+  }
+}
diff --git a/src/packages/meta/crawler/service/index.ts b/src/packages/meta/crawler/service/index.ts
new file mode 100644
index 0000000..e4f7b70
--- /dev/null
+++ b/src/packages/meta/crawler/service/index.ts
@@ -0,0 +1,5 @@
+import { MetaCrawlerService } from './crawler.service';
+
+export const SERVICES = [
+    MetaCrawlerService,
+];
diff --git a/src/packages/meta/crawler/store/index.ts b/src/packages/meta/crawler/store/index.ts
new file mode 100644
index 0000000..1b7f256
--- /dev/null
+++ b/src/packages/meta/crawler/store/index.ts
@@ -0,0 +1,30 @@
+import {
+    createSelector,
+    createFeatureSelector,
+    ActionReducerMap,
+} from '@ngrx/store';
+
+import { StateSelector } from 'packages/core/ngrx/store';
+
+import { MODULE } from '../crawler.constant';
+
+import * as ListStore from './list';
+
+export interface State {
+    crawlers: ListStore.State;
+}
+
+export const REDUCERS = {
+    crawlers: ListStore.reducer,
+};
+
+export const EFFECTS = [
+    ListStore.Effects,
+];
+
+export const selectCrawlerState = createFeatureSelector<State>(MODULE.name);
+
+export const ReadAllCrawlerSelector = new StateSelector<ListStore.State>(createSelector(
+    selectCrawlerState,
+    (state: State) => state.crawlers
+));
diff --git a/src/packages/meta/crawler/store/list/index.ts b/src/packages/meta/crawler/store/list/index.ts
new file mode 100644
index 0000000..7fd86e0
--- /dev/null
+++ b/src/packages/meta/crawler/store/list/index.ts
@@ -0,0 +1,4 @@
+export * from './list.action';
+export * from './list.effect';
+export * from './list.reducer';
+export * from './list.state';
diff --git a/src/packages/meta/crawler/store/list/list.action.ts b/src/packages/meta/crawler/store/list/list.action.ts
new file mode 100644
index 0000000..1d71f6a
--- /dev/null
+++ b/src/packages/meta/crawler/store/list/list.action.ts
@@ -0,0 +1,36 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { MetaCrawler } from '../../model/MetaCrawler';
+
+
+export enum ActionType {
+  ReadAll = '[meta.crawler-readall] ReadAll',
+  ReadAllSuccess = '[meta.crawler-readall] ReadAllSuccess',
+  ReadAllFailure = '[meta.crawler-readall] ReadAllFailure',
+}
+
+export class ReadAll implements Action {
+  readonly type = ActionType.ReadAll;
+
+  constructor() {}
+}
+
+export class ReadAllSuccess implements Action {
+  readonly type = ActionType.ReadAllSuccess;
+
+  constructor(public payload: MetaCrawler[]) {}
+}
+
+export class ReadAllFailure implements Action {
+  readonly type = ActionType.ReadAllFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export type Actions =
+  | ReadAll
+  | ReadAllSuccess
+  | ReadAllFailure
+
+;
diff --git a/src/packages/meta/crawler/store/list/list.effect.spec.ts b/src/packages/meta/crawler/store/list/list.effect.spec.ts
new file mode 100644
index 0000000..d8f6227
--- /dev/null
+++ b/src/packages/meta/crawler/store/list/list.effect.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './list.effect';
+
+describe('List.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});
diff --git a/src/packages/meta/crawler/store/list/list.effect.ts b/src/packages/meta/crawler/store/list/list.effect.ts
new file mode 100644
index 0000000..08f2a2c
--- /dev/null
+++ b/src/packages/meta/crawler/store/list/list.effect.ts
@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { DomainMember } from 'packages/domain/model';
+
+
+import {
+  ReadAll,
+  ReadAllSuccess,
+  ReadAllFailure,
+  ActionType,
+} from './list.action';
+import { MetaCrawlerService } from '../../service/crawler.service';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private crawlerService: MetaCrawlerService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  readAll$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAll)
+    .map((action: ReadAll) => action)
+    .switchMap(payload => this.crawlerService.readAll())
+    .map(list => {
+      return new ReadAllSuccess(list);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllFailure(error));
+    });
+
+}
diff --git a/src/packages/meta/crawler/store/list/list.reducer.ts b/src/packages/meta/crawler/store/list/list.reducer.ts
new file mode 100644
index 0000000..42e1225
--- /dev/null
+++ b/src/packages/meta/crawler/store/list/list.reducer.ts
@@ -0,0 +1,43 @@
+import {
+  Actions,
+  ActionType,
+} from './list.action';
+
+import {
+  State,
+  initialState,
+} from './list.state';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ReadAll: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.ReadAllSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        metaCrawlerList: action.payload
+      };
+    }
+
+    case ActionType.ReadAllFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        metaCrawlerList: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/packages/meta/crawler/store/list/list.state.ts b/src/packages/meta/crawler/store/list/list.state.ts
new file mode 100644
index 0000000..a762d3b
--- /dev/null
+++ b/src/packages/meta/crawler/store/list/list.state.ts
@@ -0,0 +1,15 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { MetaCrawler } from '../../model/MetaCrawler';
+
+
+export interface State {
+  error: RPCClientError | null;
+  pending: boolean;
+  metaCrawlerList: MetaCrawler[] | null;
+}
+
+export const initialState: State = {
+  error: null,
+  pending: false,
+  metaCrawlerList: null,
+};
diff --git a/src/packages/meta/history-type/model/MetaHistoryType.ts b/src/packages/meta/history-type/model/MetaHistoryType.ts
new file mode 100644
index 0000000..052b3cc
--- /dev/null
+++ b/src/packages/meta/history-type/model/MetaHistoryType.ts
@@ -0,0 +1,14 @@
+export interface MetaHistoryType {
+    id?: number;
+    name?: string;
+    createDate?: Date;
+}
+
+export enum MetaHistoryType_ID {
+  Member = 1,
+  Probe = 2,
+  Discovery = 3,
+  Target = 4,
+  Crawler = 5,
+  Sensor = 6,
+}
diff --git a/src/packages/meta/infra-type/model/MetaInfraType.ts b/src/packages/meta/infra-type/model/MetaInfraType.ts
new file mode 100644
index 0000000..5c6d9ff
--- /dev/null
+++ b/src/packages/meta/infra-type/model/MetaInfraType.ts
@@ -0,0 +1,16 @@
+
+export interface MetaInfraType {
+  id?: number;
+  name?: string;
+  createDate?: Date;
+}
+
+export enum MetaInfraType_ID {
+  MACHINE = 1,
+  HOST = 2,
+  OS = 3,
+  OS_APPLICATION = 4,
+  OS_DAEMON = 5,
+  OS_PORT = 6,
+  OS_SERVICE = 7,
+}
diff --git a/src/packages/meta/infra-vendor/model/MetaInfraVendor.ts b/src/packages/meta/infra-vendor/model/MetaInfraVendor.ts
new file mode 100644
index 0000000..0895717
--- /dev/null
+++ b/src/packages/meta/infra-vendor/model/MetaInfraVendor.ts
@@ -0,0 +1,65 @@
+import { MetaInfraType } from 'packages/meta/infra-type/model/MetaInfraType';
+
+
+export interface MetaInfraVendor {
+  id?: number;
+  name?: string;
+  createDate?: Date;
+  infraType?: MetaInfraType;
+}
+
+export enum MetaInfraVendor_Machine_ID {
+  APPLE = 1,
+  MICROSOFT = 2,
+  ASUS = 3,
+  HP = 4,
+  DELL = 5,
+  LENOVO = 6,
+  ACER = 7,
+  SAMSUNG = 8,
+  LG = 9,
+  CISCO = 10,
+}
+
+export enum MetaInfraVendor_HOST_ID {
+  Windows = 11,
+  Linux = 12,
+  MacOS = 13,
+  Ubuntu = 14,
+  CentOS = 15,
+  Fedora = 16,
+  RedHat = 17,
+  Debian = 18,
+  SUSE = 19,
+  CoreOS = 20,
+  AmazonLinux = 21,
+  Kubernetes = 22,
+  Docker = 23,
+  iOS = 24,
+  Android = 25,
+}
+
+export enum MetaInfraVendor_OS_ID {
+  Windows = 26,
+  MacOS = 27,
+  Ubuntu = 28,
+  CentOS = 29,
+  Fedora = 30,
+  RedHat = 31,
+  Debian = 32,
+  SUSE = 33,
+  CoreOS = 34,
+  AmazonLinux = 35,
+  Kubernetes = 36,
+  Docker = 37,
+  iOS = 38,
+  Android = 39,
+}
+
+export enum MetaInfraVendor_SERVICE_ID {
+  MySql = 40,
+  PostgreSQL = 41,
+  WMI = 42,
+  SNMP_V2 = 43,
+  UNKNOWN = 44,
+}
diff --git a/src/packages/meta/input-type/model/MetaInputType.ts b/src/packages/meta/input-type/model/MetaInputType.ts
new file mode 100644
index 0000000..ba80ed5
--- /dev/null
+++ b/src/packages/meta/input-type/model/MetaInputType.ts
@@ -0,0 +1,15 @@
+
+export interface MetaInputType {
+  id?: number;
+  name: string;
+  description: string;
+  createDate: Date;
+}
+
+export enum MetaInputType_ID {
+  TEXT_TYPE = 1,
+  PASSWORD_TYPE = 2,
+  NUMBER_TYPE = 3,
+  BOOLEAN_TYPE = 4,
+  SELECT_TYPE = 5,
+}
diff --git a/src/packages/meta/member-status/model/MetaMemberStatus.ts b/src/packages/meta/member-status/model/MetaMemberStatus.ts
new file mode 100644
index 0000000..6d43e5c
--- /dev/null
+++ b/src/packages/meta/member-status/model/MetaMemberStatus.ts
@@ -0,0 +1,12 @@
+
+export interface MetaMemberStatus {
+  id: number;
+  name: string;
+}
+
+export enum MetaMemberStatus_ID {
+  NOAUTH = 1,
+  NORMAL = 2,
+  DIAPAUSE = 3,
+  WITHDRAWAL = 4,
+}
diff --git a/src/packages/meta/model-temp/MetaVendorCrawler.ts b/src/packages/meta/model-temp/MetaVendorCrawler.ts
new file mode 100644
index 0000000..f446ca0
--- /dev/null
+++ b/src/packages/meta/model-temp/MetaVendorCrawler.ts
@@ -0,0 +1,10 @@
+
+import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
+import { MetaInfraVendor } from 'packages/meta/infra-vendor/model/MetaInfraVendor';
+
+export interface MetaVendorCrawler {
+  id?: number;
+  crawler: MetaCrawler;
+  infraVendor: MetaInfraVendor;
+  createDate: Date;
+}
diff --git a/src/packages/meta/model-temp/MetaVendorCrawlerSensorItem.ts b/src/packages/meta/model-temp/MetaVendorCrawlerSensorItem.ts
new file mode 100644
index 0000000..f23f054
--- /dev/null
+++ b/src/packages/meta/model-temp/MetaVendorCrawlerSensorItem.ts
@@ -0,0 +1,13 @@
+import { MetaSensorItem } from 'packages/meta/sensor-item/model/MetaSensorItem';
+import { MetaInfraVendor } from 'packages/meta/infra-vendor/model/MetaInfraVendor';
+
+
+export interface MetaVendorCrawlerSensorItem {
+  id?: number;
+  interval: string;
+  warnCondition: string;
+  createDate: Date;
+  sensorItem: MetaSensorItem;
+  vendor: MetaInfraVendor;
+  crawlerId: number;
+}
diff --git a/src/app/commons/component/layout2/footer/footer.component.scss b/src/packages/meta/model-temp/index.ts
similarity index 100%
rename from src/app/commons/component/layout2/footer/footer.component.scss
rename to src/packages/meta/model-temp/index.ts
diff --git a/src/packages/meta/noauth-probe-status/model/MetaNoAuthProbeStatus.ts b/src/packages/meta/noauth-probe-status/model/MetaNoAuthProbeStatus.ts
new file mode 100644
index 0000000..45a6c86
--- /dev/null
+++ b/src/packages/meta/noauth-probe-status/model/MetaNoAuthProbeStatus.ts
@@ -0,0 +1,11 @@
+
+export interface MetaNoAuthProbeStatus {
+  id?: number;
+  name: string;
+}
+
+export enum MetaNoAuthProbeStatus_ID {
+  ACCEPT = 1,
+  DENY = 2,
+  PROCESS = 3,
+}
diff --git a/src/packages/meta/notification/model/MetaNotification.ts b/src/packages/meta/notification/model/MetaNotification.ts
new file mode 100644
index 0000000..3b88346
--- /dev/null
+++ b/src/packages/meta/notification/model/MetaNotification.ts
@@ -0,0 +1,7 @@
+
+export interface MetaNotification {
+  id?: number;
+  createDate: Date;
+  name: string;
+  description: string;
+}
diff --git a/src/packages/meta/probe-architecture/model/MetaProbeArchitecture.ts b/src/packages/meta/probe-architecture/model/MetaProbeArchitecture.ts
new file mode 100644
index 0000000..1e0e45b
--- /dev/null
+++ b/src/packages/meta/probe-architecture/model/MetaProbeArchitecture.ts
@@ -0,0 +1,11 @@
+
+export interface MetaProbeArchitecture {
+  id?: number;
+  architecture: string;
+  createDate: Date;
+}
+
+export enum MetaProbeArchitecture_ID {
+  x86_64bit = 1,
+}
+
diff --git a/src/packages/meta/probe-os/model/MetaProbeOs.ts b/src/packages/meta/probe-os/model/MetaProbeOs.ts
new file mode 100644
index 0000000..2d8958f
--- /dev/null
+++ b/src/packages/meta/probe-os/model/MetaProbeOs.ts
@@ -0,0 +1,13 @@
+
+export interface MetaProbeOs {
+  id?: number;
+  name: string;
+  createDate: Date;
+}
+
+export enum MetaProbeOs_ID {
+  Windows = 1,
+  Debian = 2,
+  Ubuntu = 3,
+  Fedora = 4,
+}
diff --git a/src/packages/meta/probe-package/model/MetaProbePackage.ts b/src/packages/meta/probe-package/model/MetaProbePackage.ts
new file mode 100644
index 0000000..09e65c1
--- /dev/null
+++ b/src/packages/meta/probe-package/model/MetaProbePackage.ts
@@ -0,0 +1,11 @@
+import { MetaProbeVersion } from 'packages/meta/probe-version/model/MetaProbeVersion';
+import { MetaProbeOs } from 'packages/meta/probe-os/model/MetaProbeOs';
+import { MetaProbeArchitecture } from 'packages/meta/probe-architecture/model/MetaProbeArchitecture';
+
+export interface MetaProbePackage {
+  id?: number;
+  version: MetaProbeVersion;
+  os: MetaProbeOs;
+  architecture: MetaProbeArchitecture;
+  createDate: Date;
+}
diff --git a/src/packages/meta/probe-status/model/MetaProbeStatus.ts b/src/packages/meta/probe-status/model/MetaProbeStatus.ts
new file mode 100644
index 0000000..dccffbb
--- /dev/null
+++ b/src/packages/meta/probe-status/model/MetaProbeStatus.ts
@@ -0,0 +1,10 @@
+
+export interface MetaProbeStatus {
+  id: number;
+  name: string;
+}
+
+export enum MetaProbeStatus_ID {
+  INITIAL = 1,
+  NORMAL = 2,
+}
diff --git a/src/packages/meta/probe-task-type/model/MetaProbeTaskType.ts b/src/packages/meta/probe-task-type/model/MetaProbeTaskType.ts
new file mode 100644
index 0000000..d6a9f4b
--- /dev/null
+++ b/src/packages/meta/probe-task-type/model/MetaProbeTaskType.ts
@@ -0,0 +1,7 @@
+
+export interface MetaProbeTaskType {
+  id?: number;
+  name: string;
+  description: string;
+  createDate: Date;
+}
diff --git a/src/packages/meta/probe-version/model/MetaProbeVersion.ts b/src/packages/meta/probe-version/model/MetaProbeVersion.ts
new file mode 100644
index 0000000..dc9a2f1
--- /dev/null
+++ b/src/packages/meta/probe-version/model/MetaProbeVersion.ts
@@ -0,0 +1,5 @@
+export interface MetaProbeVersion {
+  id?: number;
+  version: string;
+  createDate: Date;
+}
diff --git a/src/packages/meta/sensor-display-item/model/MetaSensorDisplayItem.ts b/src/packages/meta/sensor-display-item/model/MetaSensorDisplayItem.ts
new file mode 100644
index 0000000..790cc06
--- /dev/null
+++ b/src/packages/meta/sensor-display-item/model/MetaSensorDisplayItem.ts
@@ -0,0 +1,15 @@
+import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
+import { MetaSensorItemUnit } from 'packages/meta/sensor-item-unit/model/MetaSensorItemUnit';
+import { MetaSensorItemType } from 'packages/meta/sensor-item-type/model/MetaSensorItemType';
+
+export interface MetaSensorDisplayItem {
+    id?: number;
+    key?: string;
+    displayName?: string;
+    description?: string;
+    crawler?: MetaCrawler;
+    unit?: MetaSensorItemUnit;
+    createDate?: Date;
+    default?: boolean;
+    itemType?: MetaSensorItemType;
+}
diff --git a/src/packages/meta/sensor-display-item/sensor-display-item-store.module.ts b/src/packages/meta/sensor-display-item/sensor-display-item-store.module.ts
new file mode 100644
index 0000000..f9ea191
--- /dev/null
+++ b/src/packages/meta/sensor-display-item/sensor-display-item-store.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import {
+  StoreRouterConnectingModule,
+  RouterStateSerializer,
+} from '@ngrx/router-store';
+import { EffectsModule } from '@ngrx/effects';
+import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
+
+import {
+  REDUCERS,
+  EFFECTS,
+} from './store';
+
+import { MODULE } from './sensor-display-item.constant';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(MODULE.name, REDUCERS),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class MetaSensorDisplayItemStoreModule { }
diff --git a/src/packages/meta/sensor-display-item/sensor-display-item.constant.ts b/src/packages/meta/sensor-display-item/sensor-display-item.constant.ts
new file mode 100644
index 0000000..d49d9cb
--- /dev/null
+++ b/src/packages/meta/sensor-display-item/sensor-display-item.constant.ts
@@ -0,0 +1,3 @@
+export const MODULE = {
+  name: 'metaSensorDisplayItem'
+};
diff --git a/src/packages/meta/sensor-display-item/sensor-display-item.module.ts b/src/packages/meta/sensor-display-item/sensor-display-item.module.ts
new file mode 100644
index 0000000..5fc6e27
--- /dev/null
+++ b/src/packages/meta/sensor-display-item/sensor-display-item.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {  } from './crawler.module';
+
+import { SERVICES } from './service';
+import { MetaSensorDisplayItemStoreModule } from './sensor-display-item-store.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MetaSensorDisplayItemStoreModule
+  ],
+  declarations: [
+  ],
+  exports: [
+  ],
+  providers: [
+    SERVICES,
+  ]
+})
+export class MetaSensorDisplayItemModule { }
diff --git a/src/packages/meta/sensor-display-item/service/index.ts b/src/packages/meta/sensor-display-item/service/index.ts
new file mode 100644
index 0000000..db97bf7
--- /dev/null
+++ b/src/packages/meta/sensor-display-item/service/index.ts
@@ -0,0 +1,5 @@
+import { MetaSensorDisplayItemService } from './sensor-display-item.service';
+
+export const SERVICES = [
+    MetaSensorDisplayItemService,
+];
diff --git a/src/packages/meta/sensor-display-item/service/sensor-display-item.service.ts b/src/packages/meta/sensor-display-item/service/sensor-display-item.service.ts
new file mode 100644
index 0000000..b7f3670
--- /dev/null
+++ b/src/packages/meta/sensor-display-item/service/sensor-display-item.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/map';
+
+import { RPCService } from '@loafer/ng-rpc/service';
+import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
+import { MetaSensorDisplayItem } from 'packages/meta/sensor-display-item/model/MetaSensorDisplayItem';
+
+
+@Injectable()
+export class MetaSensorDisplayItemService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  public readAllByMetaCrawler(c: MetaCrawler): Observable<MetaSensorDisplayItem[]> {
+    return this.rpcService.call('MetaSensorDisplayItemService.readAllByCrawler', c);
+  }
+}
diff --git a/src/packages/meta/sensor-display-item/store/index.ts b/src/packages/meta/sensor-display-item/store/index.ts
new file mode 100644
index 0000000..f8d6dac
--- /dev/null
+++ b/src/packages/meta/sensor-display-item/store/index.ts
@@ -0,0 +1,30 @@
+import {
+    createSelector,
+    createFeatureSelector,
+    ActionReducerMap,
+} from '@ngrx/store';
+
+import { StateSelector } from 'packages/core/ngrx/store';
+
+
+import * as ListStore from './list';
+import { MODULE } from '../sensor-display-item.constant';
+
+export interface State {
+    list: ListStore.State;
+}
+
+export const REDUCERS = {
+    list: ListStore.reducer,
+};
+
+export const EFFECTS = [
+    ListStore.Effects,
+];
+
+export const selectState = createFeatureSelector<State>(MODULE.name);
+
+export const ReadAllSensorDisplayItemByCrawlerSelector = new StateSelector<ListStore.State>(createSelector(
+    selectState,
+    (state: State) => state.list
+));
diff --git a/src/packages/meta/sensor-display-item/store/list/index.ts b/src/packages/meta/sensor-display-item/store/list/index.ts
new file mode 100644
index 0000000..7fd86e0
--- /dev/null
+++ b/src/packages/meta/sensor-display-item/store/list/index.ts
@@ -0,0 +1,4 @@
+export * from './list.action';
+export * from './list.effect';
+export * from './list.reducer';
+export * from './list.state';
diff --git a/src/packages/meta/sensor-display-item/store/list/list.action.ts b/src/packages/meta/sensor-display-item/store/list/list.action.ts
new file mode 100644
index 0000000..4a2339e
--- /dev/null
+++ b/src/packages/meta/sensor-display-item/store/list/list.action.ts
@@ -0,0 +1,37 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { MetaCrawler } from '../../../crawler/model/MetaCrawler';
+import { MetaSensorDisplayItem } from '../../model/MetaSensorDisplayItem';
+
+
+export enum ActionType {
+  ReadAllByCrawler = '[meta.sensor-display-item] ReadAllByCrawler',
+  ReadAllByCrawlerSuccess = '[meta.sensor-display-item] ReadAllByCrawlerSuccess',
+  ReadAllByCrawlerFailure = '[meta.sensor-display-item] ReadAllByCrawlerFailure',
+}
+
+export class ReadAllByCrawler implements Action {
+  readonly type = ActionType.ReadAllByCrawler;
+
+  constructor(public payload: MetaCrawler) {}
+}
+
+export class ReadAllByCrawlerSuccess implements Action {
+  readonly type = ActionType.ReadAllByCrawlerSuccess;
+
+  constructor(public payload: MetaSensorDisplayItem[]) {}
+}
+
+export class ReadAllByCrawlerFailure implements Action {
+  readonly type = ActionType.ReadAllByCrawlerFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export type Actions =
+  | ReadAllByCrawler
+  | ReadAllByCrawlerSuccess
+  | ReadAllByCrawlerFailure
+
+;
diff --git a/src/packages/meta/sensor-display-item/store/list/list.effect.spec.ts b/src/packages/meta/sensor-display-item/store/list/list.effect.spec.ts
new file mode 100644
index 0000000..d8f6227
--- /dev/null
+++ b/src/packages/meta/sensor-display-item/store/list/list.effect.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './list.effect';
+
+describe('List.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});
diff --git a/src/packages/meta/sensor-display-item/store/list/list.effect.ts b/src/packages/meta/sensor-display-item/store/list/list.effect.ts
new file mode 100644
index 0000000..821c40e
--- /dev/null
+++ b/src/packages/meta/sensor-display-item/store/list/list.effect.ts
@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { DomainMember } from 'packages/domain/model';
+
+
+import {
+  ReadAllByCrawler,
+  ReadAllByCrawlerSuccess,
+  ReadAllByCrawlerFailure,
+  ActionType,
+} from './list.action';
+import { MetaSensorDisplayItem } from '../../model/MetaSensorDisplayItem';
+import { MetaSensorDisplayItemService } from '../../service/sensor-display-item.service';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private service: MetaSensorDisplayItemService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  readAllByCrawler$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAllByCrawler)
+    .map((action: ReadAllByCrawler) => action.payload)
+    .switchMap(payload => this.service.readAllByMetaCrawler(payload))
+    .map(list => {
+      return new ReadAllByCrawlerSuccess(list);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllByCrawlerFailure(error));
+    });
+
+}
diff --git a/src/packages/meta/sensor-display-item/store/list/list.reducer.ts b/src/packages/meta/sensor-display-item/store/list/list.reducer.ts
new file mode 100644
index 0000000..31c0616
--- /dev/null
+++ b/src/packages/meta/sensor-display-item/store/list/list.reducer.ts
@@ -0,0 +1,43 @@
+import {
+  Actions,
+  ActionType,
+} from './list.action';
+
+import {
+  State,
+  initialState,
+} from './list.state';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ReadAllByCrawler: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.ReadAllByCrawlerSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        list: action.payload
+      };
+    }
+
+    case ActionType.ReadAllByCrawlerFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        list: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/packages/meta/sensor-display-item/store/list/list.state.ts b/src/packages/meta/sensor-display-item/store/list/list.state.ts
new file mode 100644
index 0000000..2949ac3
--- /dev/null
+++ b/src/packages/meta/sensor-display-item/store/list/list.state.ts
@@ -0,0 +1,15 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { MetaSensorDisplayItem } from '../../model/MetaSensorDisplayItem';
+
+
+export interface State {
+  error: RPCClientError | null;
+  pending: boolean;
+  list: MetaSensorDisplayItem[] | null;
+}
+
+export const initialState: State = {
+  error: null,
+  pending: false,
+  list: null,
+};
diff --git a/src/packages/meta/sensor-item-key/model/MetaSensorItemKey.ts b/src/packages/meta/sensor-item-key/model/MetaSensorItemKey.ts
new file mode 100644
index 0000000..7b8d708
--- /dev/null
+++ b/src/packages/meta/sensor-item-key/model/MetaSensorItemKey.ts
@@ -0,0 +1,12 @@
+import { MetaSensorItem } from 'packages/meta/sensor-item/model/MetaSensorItem';
+import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
+
+export interface MetaSensorItemKey {
+    id: number;
+    item: MetaSensorItem;
+    key: string;
+    froms: string;
+    option: string;
+    crawler: MetaCrawler;
+    createDate: Date;
+}
diff --git a/src/packages/meta/sensor-item-type/model/MetaSensorItemType.ts b/src/packages/meta/sensor-item-type/model/MetaSensorItemType.ts
new file mode 100644
index 0000000..5a45c8b
--- /dev/null
+++ b/src/packages/meta/sensor-item-type/model/MetaSensorItemType.ts
@@ -0,0 +1,6 @@
+export interface MetaSensorItemType {
+  id?: number;
+  name: string;
+  description: string;
+  createDate: Date;
+}
diff --git a/src/packages/meta/sensor-item-unit/model/MetaSensorItemUnit.ts b/src/packages/meta/sensor-item-unit/model/MetaSensorItemUnit.ts
new file mode 100644
index 0000000..0a48e66
--- /dev/null
+++ b/src/packages/meta/sensor-item-unit/model/MetaSensorItemUnit.ts
@@ -0,0 +1,6 @@
+export interface MetaSensorItemUnit {
+    id: number;
+    unit: string;
+    createDate: Date;
+    mark: string;
+}
diff --git a/src/packages/meta/sensor-item/model/MetaSensorItem.ts b/src/packages/meta/sensor-item/model/MetaSensorItem.ts
new file mode 100644
index 0000000..8fecfcd
--- /dev/null
+++ b/src/packages/meta/sensor-item/model/MetaSensorItem.ts
@@ -0,0 +1,10 @@
+import { MetaSensorItemType } from 'packages/meta/sensor-item-type/model/MetaSensorItemType';
+
+
+export interface MetaSensorItem {
+  id?: number;
+  itemType?: MetaSensorItemType;
+  key?: string;
+  name?: string;
+  createDate?: Date;
+}
diff --git a/src/packages/meta/sensor-status/model/MetaSensorStatus.ts b/src/packages/meta/sensor-status/model/MetaSensorStatus.ts
new file mode 100644
index 0000000..be82dac
--- /dev/null
+++ b/src/packages/meta/sensor-status/model/MetaSensorStatus.ts
@@ -0,0 +1,10 @@
+
+export interface MetaSensorStatus {
+  id?: number;
+  name?: string;
+}
+
+export enum MetaSensorStatus_ID {
+  RUNNING = 1,
+  STOPPED = 2,
+}
diff --git a/src/packages/noauth/component/index.ts b/src/packages/noauth/component/index.ts
new file mode 100644
index 0000000..2642cab
--- /dev/null
+++ b/src/packages/noauth/component/index.ts
@@ -0,0 +1,5 @@
+// import { ListComponent } from './list/list.component';
+
+// export const COMPONENTS = [
+//   ListComponent,
+// ];
diff --git a/src/packages/noauth/component/list/list.component.html b/src/packages/noauth/component/list/list.component.html
new file mode 100644
index 0000000..d84e594
--- /dev/null
+++ b/src/packages/noauth/component/list/list.component.html
@@ -0,0 +1,38 @@
+<div fxLayoutAlign="end" [style.margin]="'10px'" fxLayoutGap="10px">
+  <button mat-raised-button color="primary" (click)="handleAccept()" [disabled]="selected == null">Accept</button>
+  <button mat-raised-button color="warn" (click)="handleDeny()" [disabled]="selected == null">Deny</button>
+</div>
+<div class="example-container mat-elevation-z8">
+  <mat-table #table [dataSource]="dataSource" matSort>
+
+
+    <ng-container matColumnDef="select">
+      <mat-header-cell *matHeaderCellDef></mat-header-cell>
+      <mat-cell *matCellDef="let row">
+          <mat-radio-button (change)="handleSelect(row)"></mat-radio-button>
+      </mat-cell>
+    </ng-container>
+
+
+    <ng-container matColumnDef="id">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="description">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Description </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.description}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="createDate">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Created At </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.createDate.toLocaleString()}} </mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+  </mat-table>
+
+  <mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event">
+  </mat-paginator>
+</div>
\ No newline at end of file
diff --git a/src/app/commons/component/layout2/sub-menubar/sub-menubar.component.scss b/src/packages/noauth/component/list/list.component.scss
similarity index 100%
rename from src/app/commons/component/layout2/sub-menubar/sub-menubar.component.scss
rename to src/packages/noauth/component/list/list.component.scss
diff --git a/src/app/commons/component/layout2/footer/footer.component.spec.ts b/src/packages/noauth/component/list/list.component.spec.ts
similarity index 57%
rename from src/app/commons/component/layout2/footer/footer.component.spec.ts
rename to src/packages/noauth/component/list/list.component.spec.ts
index 2ca6c45..beacd15 100644
--- a/src/app/commons/component/layout2/footer/footer.component.spec.ts
+++ b/src/packages/noauth/component/list/list.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { FooterComponent } from './footer.component';
+import { ListComponent } from './list.component';
 
-describe('FooterComponent', () => {
-  let component: FooterComponent;
-  let fixture: ComponentFixture<FooterComponent>;
+describe('ListComponent', () => {
+  let component: ListComponent;
+  let fixture: ComponentFixture<ListComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ FooterComponent ]
+      declarations: [ ListComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(FooterComponent);
+    fixture = TestBed.createComponent(ListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/packages/noauth/component/list/list.component.ts b/src/packages/noauth/component/list/list.component.ts
new file mode 100644
index 0000000..9151979
--- /dev/null
+++ b/src/packages/noauth/component/list/list.component.ts
@@ -0,0 +1,88 @@
+// import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+// import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
+// import { Router } from '@angular/router';
+// import { Store, select } from '@ngrx/store';
+
+// import { AuthSelector } from 'packages/member/store';
+// import { RPCClientError } from '@loafer/ng-rpc/protocol';
+// import { Domain } from 'packages/domain/model';
+
+// import * as ListStore from '../../store/noauth-probe';
+// import { NoAuthProbeSelector } from '../../store';
+// import { NoAuthProbe } from '../../model';
+
+// @Component({
+//   selector: 'of-noauth-list',
+//   templateUrl: './list.component.html',
+//   styleUrls: ['./list.component.scss']
+// })
+// export class ListComponent implements OnInit, AfterContentInit {
+//   noAuthProbes$ = this.store.pipe(select(NoAuthProbeSelector.select('noAuthProbes')));
+
+//   selected: NoAuthProbe = null;
+
+//   displayedColumns = ['select', 'id', 'description', 'createDate'];
+//   dataSource: MatTableDataSource<NoAuthProbe>;
+//   @ViewChild(MatSort) sort: MatSort;
+
+//   constructor(
+//     private router: Router,
+//     private store: Store<ListStore.State>
+//   ) {
+//   }
+
+//   ngAfterContentInit() {
+//     this.store.select(AuthSelector.select('domain')).subscribe(
+//       (domain: Domain) => {
+//         this.store.dispatch(new ListStore.ReadAllByDomain(domain));
+//       }
+//     );
+
+//     this.noAuthProbes$.subscribe(
+//       (noAuthProbes: NoAuthProbe[]) => {
+//         this.dataSource = new MatTableDataSource(noAuthProbes);
+//         this.dataSource.sort = this.sort;
+//       },
+//       (error: RPCClientError) => {
+//         console.log(error.response.message);
+//       }
+//     );
+//   }
+
+
+
+//   ngOnInit() {
+//   }
+
+//   handleSelect(selected: NoAuthProbe) {
+//     this.selected = selected;
+//   }
+
+//   handleAccept() {
+//     this.store.dispatch(new ListStore.Accept(this.selected));
+//     this.noAuthProbes$.subscribe(
+//       (noAuthProbes: NoAuthProbe[]) => {
+//         this.dataSource = new MatTableDataSource(noAuthProbes);
+//         this.dataSource.sort = this.sort;
+//       },
+//       (error: RPCClientError) => {
+//         console.log(error.response.message);
+//       }
+//     );
+//     console.log(this.selected.id + ' accept');
+//   }
+
+//   handleDeny() {
+//     this.store.dispatch(new ListStore.Deny(this.selected));
+//     this.noAuthProbes$.subscribe(
+//       (noAuthProbes: NoAuthProbe[]) => {
+//         this.dataSource = new MatTableDataSource(noAuthProbes);
+//         this.dataSource.sort = this.sort;
+//       },
+//       (error: RPCClientError) => {
+//         console.log(error.response.message);
+//       }
+//     );
+//     console.log(this.selected.id + ' deny');
+//   }
+// }
diff --git a/src/packages/noauth/model/NoAuthProbe.ts b/src/packages/noauth/model/NoAuthProbe.ts
new file mode 100644
index 0000000..9c352b4
--- /dev/null
+++ b/src/packages/noauth/model/NoAuthProbe.ts
@@ -0,0 +1,24 @@
+import { Probe } from 'packages/probe/model';
+import { Domain } from 'packages/domain/model';
+import { MetaNoAuthProbeStatus } from 'packages/meta/noauth-probe-status/model/MetaNoAuthProbeStatus';
+
+export interface NoAuthProbe {
+  // id?: number;
+  // hostName?: string;
+  // macAddress?: number;
+  // ipAddress?: number;
+  // status?: MetaNoAuthProbeStatus;
+  // tempProbeKey?: string;
+  // createDate?: Date;
+  // apiKey?: string;
+  // domain?: Domain;
+  // probe?: Probe;
+  id?: number;
+  description?: string;
+  status?: MetaNoAuthProbeStatus;
+  tempProbeKey?: string;
+  createDate?: Date;
+  apiKey?: string;
+  domain?: Domain;
+  probe?: Probe;
+}
diff --git a/src/packages/noauth/model/index.ts b/src/packages/noauth/model/index.ts
new file mode 100644
index 0000000..3f150ff
--- /dev/null
+++ b/src/packages/noauth/model/index.ts
@@ -0,0 +1 @@
+export * from './NoAuthProbe';
diff --git a/src/packages/noauth/noauth-probe-store.module.ts b/src/packages/noauth/noauth-probe-store.module.ts
new file mode 100644
index 0000000..6ea8543
--- /dev/null
+++ b/src/packages/noauth/noauth-probe-store.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import {
+  StoreRouterConnectingModule,
+  RouterStateSerializer,
+} from '@ngrx/router-store';
+import { EffectsModule } from '@ngrx/effects';
+import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
+
+import {
+  REDUCERS,
+  EFFECTS,
+} from './store';
+
+import { MODULE } from './noauth-probe.constant';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(MODULE.name, REDUCERS),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class NoAuthProbeStoreModule { }
diff --git a/src/packages/noauth/noauth-probe.constant.ts b/src/packages/noauth/noauth-probe.constant.ts
new file mode 100644
index 0000000..1be6283
--- /dev/null
+++ b/src/packages/noauth/noauth-probe.constant.ts
@@ -0,0 +1,3 @@
+export const MODULE = {
+  name: 'noAuthProbe'
+};
diff --git a/src/packages/noauth/noauth.module.ts b/src/packages/noauth/noauth.module.ts
new file mode 100644
index 0000000..5289d73
--- /dev/null
+++ b/src/packages/noauth/noauth.module.ts
@@ -0,0 +1,25 @@
+// import { NgModule } from '@angular/core';
+// import { CommonModule } from '@angular/common';
+
+// import { NoAuthProbeStoreModule } from './noauth-probe-store.module';
+
+// import { COMPONENTS } from './component';
+// import { SERVICES } from './service';
+
+// @NgModule({
+//   imports: [
+//     CommonModule,
+//     NoAuthProbeStoreModule,
+//     MaterialModule
+//   ],
+//   declarations: [
+//     COMPONENTS,
+//   ],
+//   exports: [
+//     COMPONENTS,
+//   ],
+//   providers: [
+//     SERVICES,
+//   ]
+// })
+// export class NoauthModule { }
diff --git a/src/packages/noauth/service/index.ts b/src/packages/noauth/service/index.ts
new file mode 100644
index 0000000..fca1854
--- /dev/null
+++ b/src/packages/noauth/service/index.ts
@@ -0,0 +1,5 @@
+import { NoAuthProbeService } from './noauth-probe.service';
+
+export const SERVICES = [
+  NoAuthProbeService,
+];
diff --git a/src/packages/noauth/service/noauth-probe.service.spec.ts b/src/packages/noauth/service/noauth-probe.service.spec.ts
new file mode 100644
index 0000000..839a6c9
--- /dev/null
+++ b/src/packages/noauth/service/noauth-probe.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { NoAuthProbeService } from './noauth-probe.service';
+
+describe('NoAuthProbeService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [NoAuthProbeService]
+    });
+  });
+
+  it('should be created', inject([NoAuthProbeService], (service: NoAuthProbeService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/packages/noauth/service/noauth-probe.service.ts b/src/packages/noauth/service/noauth-probe.service.ts
new file mode 100644
index 0000000..e98d8e2
--- /dev/null
+++ b/src/packages/noauth/service/noauth-probe.service.ts
@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/map';
+
+import { RPCService } from '@loafer/ng-rpc/service';
+
+import { Domain } from 'packages/domain/model';
+
+import { NoAuthProbe } from '../model';
+
+
+@Injectable()
+export class NoAuthProbeService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  public readAllByDomain(domain: Domain): Observable<NoAuthProbe[]> {
+    return this.rpcService.call<NoAuthProbe[]>('NoAuthProbeService.readAllByDomain', domain);
+  }
+
+  public acceptNoAuthProbe(noAuthProbe: NoAuthProbe): Observable<NoAuthProbe[]> {
+    return this.rpcService.call<NoAuthProbe[]>('NoAuthProbeService.acceptNoAuthProbe', noAuthProbe);
+  }
+
+  public denyNoauthProbe(noAuthProbe: NoAuthProbe): Observable<NoAuthProbe[]> {
+    return this.rpcService.call<NoAuthProbe[]>('NoAuthProbeService.denyNoauthProbe', noAuthProbe);
+  }
+}
diff --git a/src/packages/noauth/store/index.ts b/src/packages/noauth/store/index.ts
new file mode 100644
index 0000000..44d3653
--- /dev/null
+++ b/src/packages/noauth/store/index.ts
@@ -0,0 +1,29 @@
+import {
+  createSelector,
+  createFeatureSelector,
+} from '@ngrx/store';
+
+import { StateSelector } from 'packages/core/ngrx/store';
+
+import { MODULE } from '../noauth-probe.constant';
+
+import * as NoAuthProbeStore from './noauth-probe';
+
+export interface State {
+  noAuthProbe: NoAuthProbeStore.State;
+}
+
+export const REDUCERS = {
+  noAuthProbe: NoAuthProbeStore.reducer,
+};
+
+export const EFFECTS = [
+  NoAuthProbeStore.Effects,
+];
+
+export const selectNoAuthProbeState = createFeatureSelector<State>(MODULE.name);
+
+export const NoAuthProbeSelector = new StateSelector<NoAuthProbeStore.State>(createSelector(
+  selectNoAuthProbeState,
+  (state: State) => state.noAuthProbe
+));
diff --git a/src/packages/noauth/store/noauth-probe/index.ts b/src/packages/noauth/store/noauth-probe/index.ts
new file mode 100644
index 0000000..b2730b4
--- /dev/null
+++ b/src/packages/noauth/store/noauth-probe/index.ts
@@ -0,0 +1,4 @@
+export * from './noauth-probe.action';
+export * from './noauth-probe.effect';
+export * from './noauth-probe.reducer';
+export * from './noauth-probe.state';
diff --git a/src/packages/noauth/store/noauth-probe/noauth-probe.action.ts b/src/packages/noauth/store/noauth-probe/noauth-probe.action.ts
new file mode 100644
index 0000000..70be178
--- /dev/null
+++ b/src/packages/noauth/store/noauth-probe/noauth-probe.action.ts
@@ -0,0 +1,88 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Domain } from 'packages/domain/model';
+
+import { NoAuthProbe } from '../../model';
+
+export enum ActionType {
+  ReadAllByDomain = '[noauth-proboe.noauth-proboe] ReadAllByDomain',
+  ReadAllByDomainSuccess = '[noauth-proboe.noauth-proboe] ReadAllByDomainSuccess',
+  ReadAllByDomainFailure = '[noauth-proboe.noauth-proboe] ReadAllByDomainFailure',
+
+  Accept = '[noauth-proboe.noauth-proboe] Accept',
+  AcceptSuccess = '[noauth-proboe.noauth-proboe] AcceptSuccess',
+  AcceptFailure = '[noauth-proboe.noauth-proboe] AcceptFailure',
+
+  Deny = '[noauth-proboe.noauth-proboe] Deny',
+  DenySuccess = '[noauth-proboe.noauth-proboe] DenySuccess',
+  DenyFailure = '[noauth-proboe.noauth-proboe] DenyFailure',
+}
+
+export class ReadAllByDomain implements Action {
+  readonly type = ActionType.ReadAllByDomain;
+
+  constructor(public payload: Domain) {}
+}
+
+export class ReadAllByDomainSuccess implements Action {
+  readonly type = ActionType.ReadAllByDomainSuccess;
+
+  constructor(public payload: NoAuthProbe[]) {}
+}
+
+export class ReadAllByDomainFailure implements Action {
+  readonly type = ActionType.ReadAllByDomainFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export class Accept implements Action {
+  readonly type = ActionType.Accept;
+
+  constructor(public payload: NoAuthProbe) {}
+}
+
+export class AcceptSuccess implements Action {
+  readonly type = ActionType.AcceptSuccess;
+
+  constructor(public payload: NoAuthProbe[]) {}
+}
+
+export class AcceptFailure implements Action {
+  readonly type = ActionType.AcceptFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export class Deny implements Action {
+  readonly type = ActionType.Deny;
+
+  constructor(public payload: NoAuthProbe) {}
+}
+
+export class DenySuccess implements Action {
+  readonly type = ActionType.DenySuccess;
+
+  constructor(public payload: NoAuthProbe[]) {}
+}
+
+export class DenyFailure implements Action {
+  readonly type = ActionType.DenyFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+
+export type Actions =
+  | ReadAllByDomain
+  | ReadAllByDomainSuccess
+  | ReadAllByDomainFailure
+  | Accept
+  | AcceptSuccess
+  | AcceptFailure
+  | Deny
+  | DenySuccess
+  | DenyFailure
+;
diff --git a/src/packages/noauth/store/noauth-probe/noauth-probe.effect.spec.ts b/src/packages/noauth/store/noauth-probe/noauth-probe.effect.spec.ts
new file mode 100644
index 0000000..b02bbdc
--- /dev/null
+++ b/src/packages/noauth/store/noauth-probe/noauth-probe.effect.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './noauth-probe.effect';
+
+describe('NoAuth-Probe.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});
diff --git a/src/packages/noauth/store/noauth-probe/noauth-probe.effect.ts b/src/packages/noauth/store/noauth-probe/noauth-probe.effect.ts
new file mode 100644
index 0000000..970daae
--- /dev/null
+++ b/src/packages/noauth/store/noauth-probe/noauth-probe.effect.ts
@@ -0,0 +1,82 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Domain } from 'packages/domain/model';
+
+import { NoAuthProbe } from '../../model';
+import { NoAuthProbeService } from '../../service/noauth-probe.service';
+
+import {
+  ReadAllByDomain,
+  ReadAllByDomainFailure,
+  ReadAllByDomainSuccess,
+  Accept,
+  AcceptSuccess,
+  AcceptFailure,
+  Deny,
+  DenySuccess,
+  DenyFailure,
+  ActionType,
+} from './noauth-probe.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private noAuthProbeService: NoAuthProbeService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  readAllByDomain$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAllByDomain)
+    .map((action: ReadAllByDomain) => action.payload)
+    .switchMap(payload => this.noAuthProbeService.readAllByDomain(payload))
+    .map(noAuthProbes => {
+      return new ReadAllByDomainSuccess(noAuthProbes);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllByDomainFailure(error));
+    });
+
+  @Effect()
+  accept$: Observable<Action> = this.actions$
+    .ofType(ActionType.Accept)
+    .map((action: Accept) => action.payload)
+    .switchMap(payload => this.noAuthProbeService.acceptNoAuthProbe(payload))
+    .map(noAuthProbes => {
+      return new AcceptSuccess(noAuthProbes);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new AcceptFailure(error));
+    });
+
+  @Effect()
+  deny$: Observable<Action> = this.actions$
+    .ofType(ActionType.Deny)
+    .map((action: Deny) => action.payload)
+    .switchMap(payload => this.noAuthProbeService.denyNoauthProbe(payload))
+    .map(noAuthProbes => {
+      return new DenySuccess(noAuthProbes);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new DenyFailure(error));
+    });
+
+}
diff --git a/src/packages/noauth/store/noauth-probe/noauth-probe.reducer.ts b/src/packages/noauth/store/noauth-probe/noauth-probe.reducer.ts
new file mode 100644
index 0000000..d4afeb9
--- /dev/null
+++ b/src/packages/noauth/store/noauth-probe/noauth-probe.reducer.ts
@@ -0,0 +1,104 @@
+import {
+  ReadAllByDomain,
+  ReadAllByDomainFailure,
+  ReadAllByDomainSuccess,
+  Accept,
+  AcceptSuccess,
+  AcceptFailure,
+  Deny,
+  DenySuccess,
+  DenyFailure,
+  ActionType,
+  Actions,
+} from './noauth-probe.action';
+
+import {
+  State,
+  initialState,
+} from './noauth-probe.state';
+
+import { NoAuthProbe } from '../../model';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ReadAllByDomain: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.ReadAllByDomainSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        noAuthProbes: action.payload,
+      };
+    }
+
+    case ActionType.ReadAllByDomainFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        noAuthProbes: null,
+      };
+    }
+
+    case ActionType.Accept: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.AcceptSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        noAuthProbes: action.payload,
+      };
+    }
+
+    case ActionType.AcceptFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+      };
+    }
+
+    case ActionType.Deny: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.DenySuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        noAuthProbes: action.payload,
+      };
+    }
+
+    case ActionType.DenyFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/packages/noauth/store/noauth-probe/noauth-probe.state.ts b/src/packages/noauth/store/noauth-probe/noauth-probe.state.ts
new file mode 100644
index 0000000..73d4636
--- /dev/null
+++ b/src/packages/noauth/store/noauth-probe/noauth-probe.state.ts
@@ -0,0 +1,15 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { NoAuthProbe } from '../../model';
+
+export interface State {
+  error: RPCClientError | null;
+  pending: boolean;
+  noAuthProbes: NoAuthProbe[] | null;
+}
+
+export const initialState: State = {
+  error: null,
+  pending: false,
+  noAuthProbes: null,
+};
diff --git a/src/packages/notification/component/badge/notification.component.html b/src/packages/notification/component/badge/notification.component.html
new file mode 100644
index 0000000..ad19c9b
--- /dev/null
+++ b/src/packages/notification/component/badge/notification.component.html
@@ -0,0 +1,53 @@
+<div class="toolbar-notification-container">
+  <button mat-icon-button (click)="isOpen = !isOpen;" [ngClass]="[cssPrefix+'-btn']" [class.open]="isOpen">
+    <mat-icon>notifications_none</mat-icon>
+    <span class="badge" *ngIf="badgeCount !== 0">{{ badgeCount }}</span>
+  </button>
+
+  <div class="dropdown mat-elevation-z4" [class.open]="isOpen">
+
+    <div class="card">
+      <div class="header" fxLayout="row" fxLayoutAlign="space-between center">
+        <div class="title">
+          <div class="name">Notifications</div>
+          <div class="extra">
+            <button mat-button (click)="handleMarkAllAsRead()">Mark all as read</button>
+          </div>
+        </div>
+        <button type="button" mat-icon-button>
+          <mat-icon class="icon">settings</mat-icon>
+        </button>
+      </div>
+      <div *ngIf="notifications?.length !== 0; then thenBlock else elseBlock;"></div>
+      <div class="footer" fxLayout="row" fxLayoutAlign="center center">
+        <div class="action" (click)="handleViewAll()">View All</div>
+      </div>
+    </div>
+
+  </div>
+
+</div>
+
+<ng-template #thenBlock>
+  <perfect-scrollbar class="content">
+    <div *ngFor="let notification of notifications;">
+      <div class="notification" fxLayout="row" fxLayoutAlign="start center" mat-ripple [ngClass]="{'highlight': notification.confirmDate === null}" (click)="handleClick(notification)" > 
+        <!-- [ngClass]="{'highlight': row.confirmDate === null}" -->
+        <mat-icon class="icon">notifications</mat-icon>
+        <div class="title" fxLayout="column">
+          <div class="name">{{ notification.message }}</div>
+          <div class="time">{{ notification.member.name }}</div>
+        </div>
+        <span fxFlex></span>
+        <button type="button" mat-icon-button (click)="mark(notification, $event)">
+          <mat-icon class="close" matTooltip="Mark as read">check circle</mat-icon>
+        </button>
+      </div>
+      <div class="divider" *ngIf="!isLast"></div>
+    </div>
+  </perfect-scrollbar>
+</ng-template>
+
+<!-- <ng-template #elseBlock> -->
+  <!-- <div class="no" fxLayout="row" fxLayoutAlign="center center">No notification found.</div>
+</ng-template> -->
\ No newline at end of file
diff --git a/src/packages/notification/component/badge/notification.component.scss b/src/packages/notification/component/badge/notification.component.scss
new file mode 100644
index 0000000..d4bd28f
--- /dev/null
+++ b/src/packages/notification/component/badge/notification.component.scss
@@ -0,0 +1,168 @@
+$prefix: 'notification';
+
+.highlight {
+	background: #039be5
+}
+
+.badge {
+  	position: absolute;
+  	top: 0;
+  	left: 50%;
+  	font-weight: 700;
+  	line-height: 13px;
+  	height: 13px;
+  	padding: 5px;
+    border-radius: 26%;
+    width: 30%;
+    background-color: #f44336;
+  	color: #fff;
+  	border-color:#f44336
+}
+
+.#{$prefix} {
+  &-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  &-btn {
+    display: flex;
+    justify-content: center;
+    margin-right: 10px;
+  }
+}
+.dropdown {
+	background: white;
+	position: absolute;
+	top: 42px;
+	right: 28px;
+	min-width: 350px;
+	z-index: 2;
+	transform: translateY(0) scale(0);
+	transform-origin: top right;
+	visibility: hidden;
+	transition: transform .4s cubic-bezier(.25, .8, .25, 1), visibility .4s cubic-bezier(.25, .8, .25, 1);
+
+	@media screen and (max-width: 599px) {
+	    min-width: 50vw;
+	    right: 5px;
+	    transform: translateY(0);
+    	visibility: hidden;
+    	transition: transform .4s cubic-bezier(.25,.8,.25,1), visibility .4s cubic-bezier(.25,.8,.25,1);
+	}
+
+	&.open {
+	    transform: translateY(0) scale(1);
+	    visibility: visible;
+	}
+	.card {
+
+	    .header {
+	      background: #EEEEEE;
+	      min-height: 54px;
+	      padding-left: 16px;
+	      padding-right: 8px;
+	      color: #555;
+	      display: flex;
+	      justify-content: flex-start;
+	      align-items: center;
+	      align-content: center;
+	      border-bottom: 1px solid #e0e0e0;
+
+	      .extra {
+	        font-size: 12px;
+	        color: #888;
+	      }
+    	}
+    }
+    .content {
+      	overflow: hidden;
+      	max-height: 256px;
+
+      	.notification {
+        	min-height: 64px;
+	        padding: 0 16px 0 14px;
+	        position: relative;
+	        color: #666;
+	        cursor: pointer;
+
+	        .icon {
+		        height: 28px;
+		        width: 28px;
+		        line-height: 28px;
+		        font-size: 18px;
+		        margin-right: 13px;
+		        text-align: center;
+		        border-radius: 50%;
+		        background: #FFF;
+		        color: #888;
+		        border: 1px solid #EEE;
+        	}
+
+        	.title {
+          		font-weight: 500;
+          		font-size: 14px;
+        	}
+
+        	.time {
+         		font-size: 12px;
+        	}
+
+        	.close {
+          		font-size: 18px;
+          		width: 18px;
+	          height: 18px;
+	          line-height: 18px;
+	        }
+
+	        &.primary {
+	          .icon {
+	            background: #ccc;
+	            color: #ddd;
+	          }
+	        }
+
+	        &.accent {
+	          .icon {
+	            background: #aaa;
+	            color: #bbb;
+	          }
+	        }
+
+	        &.warn {
+	          .icon {
+	            background: #eee;
+	            color: #ddd;
+	          }
+	        }
+
+	        &.read {
+	          color: #999;
+
+	          .name {
+	            font-weight: normal;
+	          }
+	        }
+      	}
+    }
+
+    .footer {
+      	min-height: 42px;
+      	border-top: 1px solid #EEE;
+
+	    .action {
+	        cursor: pointer;
+	        color: #AAA;
+	        text-align: center;
+	        font-size: 13px;
+	    }
+    }
+
+    .divider {
+      	width: calc(100% - 30px);
+      	height: 1px;
+      	background: #EEE;
+      	margin: 0 16px 0 14px;
+    }
+}
\ No newline at end of file
diff --git a/src/packages/notification/component/badge/notification.component.spec.ts b/src/packages/notification/component/badge/notification.component.spec.ts
new file mode 100644
index 0000000..58baf09
--- /dev/null
+++ b/src/packages/notification/component/badge/notification.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationBadgeComponent } from './notification.component';
+
+describe('NotificationBadgeComponent', () => {
+  let component: NotificationBadgeComponent;
+  let fixture: ComponentFixture<NotificationBadgeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationBadgeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationBadgeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/notification/component/badge/notification.component.ts b/src/packages/notification/component/badge/notification.component.ts
new file mode 100644
index 0000000..2c16fc7
--- /dev/null
+++ b/src/packages/notification/component/badge/notification.component.ts
@@ -0,0 +1,119 @@
+import { Component, OnInit, Input, AfterContentInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Store, select } from '@ngrx/store';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { Notification } from '../../model';
+import * as ListStore from '../../store/list';
+import * as DetailStore from '../../store/detail';
+import { ReadAllByMemberSelector, ReadSelector } from '../../store';
+import { AuthSelector } from 'packages/member/store';
+import { Member } from '../../../member/model';
+import { PageParams, Page } from 'app/commons/model';
+import { MarkAsRead } from '../../store/detail';
+
+@Component({
+  selector: 'of-notification-badge',
+  templateUrl: './notification.component.html',
+  styleUrls: ['./notification.component.scss']
+})
+export class NotificationBadgeComponent implements OnInit, AfterContentInit {
+  notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
+  mark$ = this.detailStore.pipe(select(ReadSelector.select('notification')));
+  isOpen = false;
+  notifications: Notification[] = null;
+  badgeCount = 0;
+
+  constructor(
+    private router: Router,
+    private listStore: Store<ListStore.State>,
+    private detailStore: Store<DetailStore.State>
+  ) { }
+
+  ngOnInit() {
+    this.notification$.subscribe(
+      (page: Page) => {
+        if (page !== null) {
+          this.notifications = page.content;
+          this.getUnconfirmedCount(this.notifications);
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
+    this.mark$.subscribe(
+      (n: Notification) => {
+        if (n !== null && n.confirmDate !== null) {
+          this.getNotifications(0);
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
+  }
+
+  ngAfterContentInit() {
+    this.getNotifications(0);
+  }
+
+  getNotifications(pageIndex: number) {
+    this.listStore.select(AuthSelector.select('member')).subscribe(
+      (member: Member) => {
+        const pageParams: PageParams = {
+          pageNo: '0',
+          countPerPage: '10',
+          sortCol: 'id',
+          sortDirection: 'descending'
+        };
+        this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
+
+  getUnconfirmedCount(notifications: Notification[]) {
+    let totalCnt = 0;
+    notifications.map( function(v, i) {
+      if (v.confirmDate === null) {
+        totalCnt += 1;
+      }
+    });
+    this.badgeCount = totalCnt;
+  }
+
+
+  mark(notification: Notification, e: Event) {
+    this.detailStore.dispatch(new DetailStore.MarkAsRead(notification));
+    e.stopPropagation();
+  }
+
+  handleClick(n: Notification) {
+    alert('Will redirect to ' + n.url);
+  }
+
+  handleMarkAllAsRead() {
+
+    this.listStore.select(AuthSelector.select('member')).subscribe(
+      (member: Member) => {
+        const pageParams: PageParams = {
+          pageNo: '0',
+          countPerPage: '10',
+          sortCol: 'id',
+          sortDirection: 'descending'
+        };
+        this.listStore.dispatch(new ListStore.MarkAllAsRead({ member, pageParams }));
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
+
+  handleViewAll() {
+    this.isOpen = false;
+    this.router.navigate(['notification']);
+  }
+}
diff --git a/src/packages/notification/component/index.ts b/src/packages/notification/component/index.ts
new file mode 100644
index 0000000..683c4c1
--- /dev/null
+++ b/src/packages/notification/component/index.ts
@@ -0,0 +1,7 @@
+// import { NotificationComponent } from './notification/notification.component';
+// import { NotificationBadgeComponent } from './badge/notification.component';
+
+// export const COMPONENTS = [
+//   NotificationComponent,
+//   NotificationBadgeComponent,
+// ];
diff --git a/src/packages/notification/component/notification/notification.component.html b/src/packages/notification/component/notification/notification.component.html
new file mode 100644
index 0000000..2e236d5
--- /dev/null
+++ b/src/packages/notification/component/notification/notification.component.html
@@ -0,0 +1,29 @@
+<div class="example-container mat-elevation-z8">
+  <mat-table #table [dataSource]="dataSource" matSort>
+
+    <ng-container matColumnDef="id">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="title">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Title </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.title}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="message">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Message </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.message}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="member">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Member </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.member.name}} </mat-cell>
+    </ng-container>
+
+    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)" [ngClass]="{'highlight': row.confirmDate === null}"></mat-row>
+  </mat-table>
+
+  <mat-paginator #paginator [length]="totalLength" [pageIndex]="0" [pageSize]="PAGE_SIZE" (page)="handlePaging($event)">
+  </mat-paginator>
+</div>
\ No newline at end of file
diff --git a/src/packages/notification/component/notification/notification.component.scss b/src/packages/notification/component/notification/notification.component.scss
new file mode 100644
index 0000000..ea8f92b
--- /dev/null
+++ b/src/packages/notification/component/notification/notification.component.scss
@@ -0,0 +1,3 @@
+.highlight {
+	background: #039be5
+}
diff --git a/src/packages/notification/component/notification/notification.component.spec.ts b/src/packages/notification/component/notification/notification.component.spec.ts
new file mode 100644
index 0000000..69192c5
--- /dev/null
+++ b/src/packages/notification/component/notification/notification.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationComponent } from './notification.component';
+
+describe('NotificationComponent', () => {
+  let component: NotificationComponent;
+  let fixture: ComponentFixture<NotificationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/notification/component/notification/notification.component.ts b/src/packages/notification/component/notification/notification.component.ts
new file mode 100644
index 0000000..21e45bf
--- /dev/null
+++ b/src/packages/notification/component/notification/notification.component.ts
@@ -0,0 +1,78 @@
+// import { Component, OnInit, Input, ViewChild, AfterContentInit } from '@angular/core';
+// import { MatTableDataSource, MatSort, PageEvent } from '@angular/material';
+// import { Router } from '@angular/router';
+// import { Store, select } from '@ngrx/store';
+// import { RPCClientError } from '@loafer/ng-rpc/protocol';
+// import { Notification } from '../../model';
+// import * as DetailStore from '../../store/detail';
+// import * as ListStore from '../../store/list';
+// import { ReadAllByMemberSelector } from '../../store';
+// import { AuthSelector } from 'packages/member/store';
+// import { Member } from '../../../member/model';
+// import { PageParams, Page } from 'app/commons/model';
+
+// @Component({
+//   selector: 'of-notification',
+//   templateUrl: './notification.component.html',
+//   styleUrls: ['./notification.component.scss']
+// })
+// export class NotificationComponent implements OnInit, AfterContentInit {
+
+//   notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
+
+//   displayedColumns = ['id', 'title', 'message', 'member'];
+//   dataSource: MatTableDataSource<Notification>;
+//   PAGE_SIZE = '10';
+//   totalLength = 0;
+
+//   constructor(
+//     private router: Router,
+//     private listStore: Store<ListStore.State>,
+//     private detailStore: Store<DetailStore.State>
+//   ) { }
+
+//   ngOnInit() {
+//     this.notification$.subscribe(
+//       (page: Page) => {
+//         if (page !== null) {
+//           this.totalLength = page.totalElements;
+//           this.dataSource = new MatTableDataSource(page.content);
+//         }
+//       },
+//       (error: RPCClientError) => {
+//         console.log(error.response.message);
+//       }
+//     );
+//   }
+
+//   ngAfterContentInit() {
+//     this.getNotifications(0);
+//   }
+
+//   getNotifications(pageIndex: number) {
+//     this.listStore.select(AuthSelector.select('member')).subscribe(
+//       (member: Member) => {
+//         const pageParams: PageParams = {
+//           pageNo: pageIndex + '',
+//           countPerPage: this.PAGE_SIZE,
+//           sortCol: 'id',
+//           sortDirection: 'descending'
+//         };
+//         this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
+//       },
+//       (error) => {
+//         console.log(error);
+//       }
+//     );
+//   }
+
+//   handleRowClick(notification: Notification) {
+//     this.detailStore.dispatch(new DetailStore.MarkAsRead(notification));
+//     alert('Will redirect to ' + notification.url);
+//     // this.router.navigate([n.url]);
+//   }
+
+//   handlePaging(e: PageEvent) {
+//     this.getNotifications(e.pageIndex);
+//   }
+// }
diff --git a/src/packages/notification/model/Notification.ts b/src/packages/notification/model/Notification.ts
new file mode 100644
index 0000000..f02bdd2
--- /dev/null
+++ b/src/packages/notification/model/Notification.ts
@@ -0,0 +1,14 @@
+import { Member } from 'packages/member/model';
+
+
+export interface Notification {
+    id?: number;
+    createDate?: Date;
+    title?: string;
+    message?: string;
+    member?: Member;
+    confirmDate?: Date;
+    url?: string;
+}
+
+
diff --git a/src/packages/notification/model/index.ts b/src/packages/notification/model/index.ts
new file mode 100644
index 0000000..ed80171
--- /dev/null
+++ b/src/packages/notification/model/index.ts
@@ -0,0 +1 @@
+export * from './Notification';
diff --git a/src/packages/notification/notification-store.module.ts b/src/packages/notification/notification-store.module.ts
new file mode 100644
index 0000000..93cc2d4
--- /dev/null
+++ b/src/packages/notification/notification-store.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import {
+  StoreRouterConnectingModule,
+  RouterStateSerializer,
+} from '@ngrx/router-store';
+import { EffectsModule } from '@ngrx/effects';
+import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
+
+import {
+  REDUCERS,
+  EFFECTS,
+} from './store';
+
+import { MODULE } from './notification.constant';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(MODULE.name, REDUCERS),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class NotificationStoreModule { }
diff --git a/src/packages/notification/notification.constant.ts b/src/packages/notification/notification.constant.ts
new file mode 100644
index 0000000..f524425
--- /dev/null
+++ b/src/packages/notification/notification.constant.ts
@@ -0,0 +1,3 @@
+export const MODULE = {
+    name: 'Notification'
+  };
diff --git a/src/packages/notification/notification.module.ts b/src/packages/notification/notification.module.ts
new file mode 100644
index 0000000..da258bd
--- /dev/null
+++ b/src/packages/notification/notification.module.ts
@@ -0,0 +1,24 @@
+// import { NgModule } from '@angular/core';
+// import { CommonModule } from '@angular/common';
+
+// import { COMPONENTS } from './component';
+// import { SERVICES } from './service';
+
+// import { NotificationStoreModule } from './notification-store.module';
+
+// @NgModule({
+//   imports: [
+//     CommonModule,
+//     NotificationStoreModule
+//   ],
+//   declarations: [
+//     COMPONENTS,
+//   ],
+//   exports: [
+//     COMPONENTS,
+//   ],
+//   providers: [
+//     SERVICES,
+//   ],
+// })
+// export class NotificationModule { }
diff --git a/src/packages/notification/service/index.ts b/src/packages/notification/service/index.ts
new file mode 100644
index 0000000..1607e85
--- /dev/null
+++ b/src/packages/notification/service/index.ts
@@ -0,0 +1,5 @@
+import { NotificationService } from './notification.service';
+
+export const SERVICES = [
+    NotificationService,
+];
diff --git a/src/packages/notification/service/notification.service.spec.ts b/src/packages/notification/service/notification.service.spec.ts
new file mode 100644
index 0000000..44bc1ec
--- /dev/null
+++ b/src/packages/notification/service/notification.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { NotificationService } from './notification.service';
+
+describe('NotificationService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [NotificationService]
+    });
+  });
+
+  it('should be created', inject([NotificationService], (service: NotificationService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/packages/notification/service/notification.service.ts b/src/packages/notification/service/notification.service.ts
new file mode 100644
index 0000000..a7bffd8
--- /dev/null
+++ b/src/packages/notification/service/notification.service.ts
@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/map';
+
+import { RPCService } from '@loafer/ng-rpc/service';
+
+import { Notification } from '../model';
+import { Member } from '../../member/model';
+import { PageParams, Page } from 'app/commons/model';
+
+@Injectable()
+export class NotificationService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  public readAllByMember(member: Member, pageParams: PageParams): Observable<Page> {
+    return this.rpcService.call('NotificationService.readAllByMember', member, pageParams);
+  }
+
+  public markAllAsRead(member: Member, pageParams: PageParams): Observable<Page> {
+    return this.rpcService.call('NotificationService.markAllAsRead',  member, pageParams);
+  }
+
+  public markAsRead(notification: Notification): Observable<Notification> {
+    return this.rpcService.call('NotificationService.markAsRead', notification);
+  }
+
+}
diff --git a/src/packages/notification/store/detail/index.ts b/src/packages/notification/store/detail/index.ts
new file mode 100644
index 0000000..c7467b0
--- /dev/null
+++ b/src/packages/notification/store/detail/index.ts
@@ -0,0 +1,4 @@
+export * from './notification.action';
+export * from './notification.effect';
+export * from './notification.reducer';
+export * from './notification.state';
diff --git a/src/packages/notification/store/detail/notification.action.ts b/src/packages/notification/store/detail/notification.action.ts
new file mode 100644
index 0000000..9bbc71b
--- /dev/null
+++ b/src/packages/notification/store/detail/notification.action.ts
@@ -0,0 +1,61 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Member } from '../../../member/model';
+import { PageParams, Page } from 'app/commons/model';
+import { Notification } from '../../model';
+
+export enum ActionType {
+  MarkAsRead = '[Notification.notification] MarkAsRead',
+  MarkAsReadSuccess = '[Notification.notification] MarkAsReadSuccess',
+  MarkAsReadFailure = '[Notification.notification] MarkAsReadFailure',
+  // ReadUnconfirmedCount = '[Notification.notification] ReadUnconfirmedCount',
+  // ReadUnconfirmedCountSuccess = '[Notification.notification] ReadUnconfirmedCountSuccess',
+  // ReadUnconfirmedCountFailure = '[Notification.notification] ReadUnconfirmedCountFailure',
+}
+
+export class MarkAsRead implements Action {
+  readonly type = ActionType.MarkAsRead;
+
+  constructor(public payload: Notification ) {}
+}
+
+export class MarkAsReadSuccess implements Action {
+  readonly type = ActionType.MarkAsReadSuccess;
+
+  constructor(public payload: Notification) {}
+}
+
+export class MarkAsReadFailure implements Action {
+  readonly type = ActionType.MarkAsReadFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+// export class ReadUnconfirmedCount implements Action {
+//   readonly type = ActionType.ReadUnconfirmedCount;
+
+//   constructor(public payload: Member) {}
+// }
+
+// export class ReadUnconfirmedCountSuccess implements Action {
+//   readonly type = ActionType.ReadUnconfirmedCountSuccess;
+
+//   constructor(public payload: number) {}
+// }
+
+// export class ReadUnconfirmedCountFailure implements Action {
+//   readonly type = ActionType.ReadUnconfirmedCountFailure;
+
+//   constructor(public payload: RPCClientError) {}
+// }
+
+export type Actions =
+  | MarkAsRead
+  | MarkAsReadSuccess
+  | MarkAsReadFailure
+  // | ReadUnconfirmedCount
+  // | ReadUnconfirmedCountSuccess
+  // | ReadUnconfirmedCountFailure
+;
diff --git a/src/packages/notification/store/detail/notification.effect.spec.ts b/src/packages/notification/store/detail/notification.effect.spec.ts
new file mode 100644
index 0000000..4bbc6cf
--- /dev/null
+++ b/src/packages/notification/store/detail/notification.effect.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './notification.effect';
+
+describe('Notification.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});
diff --git a/src/packages/notification/store/detail/notification.effect.ts b/src/packages/notification/store/detail/notification.effect.ts
new file mode 100644
index 0000000..ef8c935
--- /dev/null
+++ b/src/packages/notification/store/detail/notification.effect.ts
@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Notification } from '../../model';
+import { NotificationService } from '../../service/notification.service';
+
+import {
+  MarkAsRead,
+  MarkAsReadSuccess,
+  MarkAsReadFailure,
+  ActionType,
+} from './notification.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private notificationService: NotificationService,
+    private router: Router
+  ) { }
+
+
+  @Effect()
+  markAsRead$: Observable<Action> = this.actions$
+    .ofType(ActionType.MarkAsRead)
+    .map((action: MarkAsRead) => action.payload)
+    .switchMap(payload => this.notificationService.markAsRead(payload))
+    .map(notification => {
+      return new MarkAsReadSuccess(notification);
+    })
+    .catch((error: RPCClientError) => {
+      console.log(error.response.message);
+      return of(new MarkAsReadFailure(error));
+    });
+}
diff --git a/src/packages/notification/store/detail/notification.reducer.ts b/src/packages/notification/store/detail/notification.reducer.ts
new file mode 100644
index 0000000..f329612
--- /dev/null
+++ b/src/packages/notification/store/detail/notification.reducer.ts
@@ -0,0 +1,44 @@
+import {
+  Actions,
+  ActionType,
+} from './notification.action';
+
+import {
+  State,
+  initialState,
+} from './notification.state';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.MarkAsRead: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.MarkAsReadSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        notification: action.payload,
+      };
+    }
+
+    case ActionType.MarkAsReadFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        notification: null,
+      };
+    }
+
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/packages/notification/store/detail/notification.state.ts b/src/packages/notification/store/detail/notification.state.ts
new file mode 100644
index 0000000..a0ada6d
--- /dev/null
+++ b/src/packages/notification/store/detail/notification.state.ts
@@ -0,0 +1,14 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { Notification } from '../../model';
+
+export interface State {
+  error: RPCClientError | null;
+  pending: boolean;
+  notification: Notification;
+}
+
+export const initialState: State = {
+  error: null,
+  pending: false,
+  notification: null,
+};
diff --git a/src/packages/notification/store/index.ts b/src/packages/notification/store/index.ts
new file mode 100644
index 0000000..ae3136a
--- /dev/null
+++ b/src/packages/notification/store/index.ts
@@ -0,0 +1,38 @@
+import {
+  createSelector,
+  createFeatureSelector,
+  ActionReducerMap,
+} from '@ngrx/store';
+
+import { StateSelector } from 'packages/core/ngrx/store';
+
+import { MODULE } from '../notification.constant';
+
+import * as ListStore from './list';
+import * as DetailStore from './detail';
+
+export interface State {
+  notifications: ListStore.State;
+  notification: DetailStore.State;
+}
+
+export const REDUCERS = {
+  notifications: ListStore.reducer,
+  notification: DetailStore.reducer,
+};
+
+export const EFFECTS = [
+  ListStore.Effects,
+  DetailStore.Effects,
+];
+
+export const selectNotificationState = createFeatureSelector<State>(MODULE.name);
+
+export const ReadAllByMemberSelector = new StateSelector<ListStore.State>(createSelector(
+  selectNotificationState,
+  (state: State) => state.notifications
+));
+export const ReadSelector = new StateSelector<DetailStore.State>(createSelector(
+  selectNotificationState,
+  (state: State) => state.notification
+));
diff --git a/src/packages/notification/store/list/index.ts b/src/packages/notification/store/list/index.ts
new file mode 100644
index 0000000..c7467b0
--- /dev/null
+++ b/src/packages/notification/store/list/index.ts
@@ -0,0 +1,4 @@
+export * from './notification.action';
+export * from './notification.effect';
+export * from './notification.reducer';
+export * from './notification.state';
diff --git a/src/packages/notification/store/list/notification.action.ts b/src/packages/notification/store/list/notification.action.ts
new file mode 100644
index 0000000..5fb41e4
--- /dev/null
+++ b/src/packages/notification/store/list/notification.action.ts
@@ -0,0 +1,61 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Member } from '../../../member/model';
+import { PageParams, Page } from 'app/commons/model';
+
+export enum ActionType {
+  ReadAllByMember = '[Notification.notification] ReadAllByMember',
+  ReadAllByMemberSuccess = '[Notification.notification] ReadAllByMemberSuccess',
+  ReadAllByMemberFailure = '[Notification.notification] ReadAllByMemberFailure',
+  MarkAllAsRead = '[Notification.notification] MarkAllAsRead',
+  MarkAllAsReadSuccess = '[Notification.notification] MarkAllAsReadSuccess',
+  MarkAllAsReadFailure = '[Notification.notification] MarkAllAsReadFailure',
+}
+
+export class ReadAllByMember implements Action {
+  readonly type = ActionType.ReadAllByMember;
+
+  constructor(public payload: { member: Member, pageParams: PageParams }) {}
+}
+
+export class ReadAllByMemberSuccess implements Action {
+  readonly type = ActionType.ReadAllByMemberSuccess;
+
+  constructor(public payload: Page) {}
+}
+
+export class ReadAllByMemberFailure implements Action {
+  readonly type = ActionType.ReadAllByMemberFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export class MarkAllAsRead implements Action {
+  readonly type = ActionType.MarkAllAsRead;
+
+  constructor(public payload: { member: Member, pageParams: PageParams }) {}
+}
+
+export class MarkAllAsReadSuccess implements Action {
+  readonly type = ActionType.MarkAllAsReadSuccess;
+
+  constructor(public payload: Page) {}
+}
+
+export class MarkAllAsReadFailure implements Action {
+  readonly type = ActionType.MarkAllAsReadFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+
+export type Actions =
+  | ReadAllByMember
+  | ReadAllByMemberSuccess
+  | ReadAllByMemberFailure
+  | MarkAllAsRead
+  | MarkAllAsReadSuccess
+  | MarkAllAsReadFailure
+;
diff --git a/src/packages/notification/store/list/notification.effect.spec.ts b/src/packages/notification/store/list/notification.effect.spec.ts
new file mode 100644
index 0000000..4bbc6cf
--- /dev/null
+++ b/src/packages/notification/store/list/notification.effect.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './notification.effect';
+
+describe('Notification.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});
diff --git a/src/packages/notification/store/list/notification.effect.ts b/src/packages/notification/store/list/notification.effect.ts
new file mode 100644
index 0000000..dfe014d
--- /dev/null
+++ b/src/packages/notification/store/list/notification.effect.ts
@@ -0,0 +1,63 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Notification } from '../../model';
+import { NotificationService } from '../../service/notification.service';
+
+import {
+  ReadAllByMember,
+  ReadAllByMemberSuccess,
+  ReadAllByMemberFailure,
+  ActionType,
+  MarkAllAsRead,
+  MarkAllAsReadSuccess,
+  MarkAllAsReadFailure,
+} from './notification.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private notificationService: NotificationService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  readAllByMember$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAllByMember)
+    .map((action: ReadAllByMember) => action.payload)
+    .switchMap(payload => this.notificationService.readAllByMember(payload.member, payload.pageParams))
+    .map(page => {
+      return new ReadAllByMemberSuccess(page);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllByMemberFailure(error));
+    });
+
+    @Effect()
+    markAllAsRead$: Observable<Action> = this.actions$
+      .ofType(ActionType.MarkAllAsRead)
+      .map((action: MarkAllAsRead) => action.payload)
+      .switchMap(payload => this.notificationService.markAllAsRead(payload.member, payload.pageParams))
+      .map(page => {
+        return new MarkAllAsReadSuccess(page);
+      })
+      .catch((error: RPCClientError) => {
+        return of(new MarkAllAsReadFailure(error));
+      });
+}
diff --git a/src/packages/notification/store/list/notification.reducer.ts b/src/packages/notification/store/list/notification.reducer.ts
new file mode 100644
index 0000000..a804558
--- /dev/null
+++ b/src/packages/notification/store/list/notification.reducer.ts
@@ -0,0 +1,69 @@
+import {
+  Actions,
+  ActionType,
+} from './notification.action';
+
+import {
+  State,
+  initialState,
+} from './notification.state';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ReadAllByMember: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.ReadAllByMemberSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        page: action.payload,
+      };
+    }
+
+    case ActionType.ReadAllByMemberFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        page: null,
+      };
+    }
+
+    case ActionType.MarkAllAsRead: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.MarkAllAsReadSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        page: action.payload,
+      };
+    }
+
+    case ActionType.MarkAllAsReadFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        page: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/packages/notification/store/list/notification.state.ts b/src/packages/notification/store/list/notification.state.ts
new file mode 100644
index 0000000..c724de1
--- /dev/null
+++ b/src/packages/notification/store/list/notification.state.ts
@@ -0,0 +1,14 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { Page } from 'app/commons/model';
+
+export interface State {
+  error: RPCClientError | null;
+  pending: boolean;
+  page: Page;
+}
+
+export const initialState: State = {
+  error: null,
+  pending: false,
+  page: null,
+};
diff --git a/src/packages/probe/component/detail/detail.component.html b/src/packages/probe/component/detail/detail.component.html
new file mode 100644
index 0000000..7188fe0
--- /dev/null
+++ b/src/packages/probe/component/detail/detail.component.html
@@ -0,0 +1,35 @@
+<div *ngIf="probe !== null">
+  <div>
+    <h3>{{probe.displayName}}</h3>
+  </div>
+
+  <div fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between center">
+    <mat-card [style.padding]="'15px 50px'">Status: {{probe.status.name}}</mat-card>
+    <div>
+      <button mat-raised-button color="primary" (click)="discovery()">Discovery</button>
+    </div>
+  </div>
+
+  <div fxLayout="row" fxLayoutWrap fxLayoutGap="10px" fxLayoutAlign="center" [style.margin]="'20px'">
+    <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
+      <of-info-table [title]="'Title1'" [data]="networkInfo"></of-info-table>
+    </mat-card>
+    <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
+      <of-info-table [title]="'Title2'" [data]="deviceInfo"></of-info-table>
+    </mat-card>
+    <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
+      <of-info-table [title]="'Title3'" [data]="probeInfo"></of-info-table>
+    </mat-card>
+  </div>
+
+  <div fxLayoutAlign="end">
+    <button *ngIf="probe.status.id === 1" mat-raised-button color="primary" (click)="handleStartStop()">Start</button>
+    <button *ngIf="probe.status.id === 2" mat-raised-button color="accent" (click)="handleStartStop()">Stop</button>
+
+    <button mat-raised-button color="warn" (click)="handleRemove()">Remove</button>
+  </div>
+</div>
+
+<div *ngIf="probe === null">
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+</div>
\ No newline at end of file
diff --git a/src/packages/probe/component/detail/detail.component.scss b/src/packages/probe/component/detail/detail.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/commons/component/layout2/header/header.component.spec.ts b/src/packages/probe/component/detail/detail.component.spec.ts
similarity index 57%
rename from src/app/commons/component/layout2/header/header.component.spec.ts
rename to src/packages/probe/component/detail/detail.component.spec.ts
index 2d0479d..149b9be 100644
--- a/src/app/commons/component/layout2/header/header.component.spec.ts
+++ b/src/packages/probe/component/detail/detail.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HeaderComponent } from './header.component';
+import { DetailComponent } from './detail.component';
 
-describe('HeaderComponent', () => {
-  let component: HeaderComponent;
-  let fixture: ComponentFixture<HeaderComponent>;
+describe('DetailComponent', () => {
+  let component: DetailComponent;
+  let fixture: ComponentFixture<DetailComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ HeaderComponent ]
+      declarations: [ DetailComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(HeaderComponent);
+    fixture = TestBed.createComponent(DetailComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/packages/probe/component/detail/detail.component.ts b/src/packages/probe/component/detail/detail.component.ts
new file mode 100644
index 0000000..1f76816
--- /dev/null
+++ b/src/packages/probe/component/detail/detail.component.ts
@@ -0,0 +1,156 @@
+// import { Component, OnInit, Inject, AfterContentInit } from '@angular/core';
+// import { ActivatedRoute, Router } from '@angular/router';
+// import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+// import { Store, select } from '@ngrx/store';
+
+// import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+// import * as DetailStore from '../../store/detail';
+// import { DetailSelector } from '../../store';
+// import { Probe } from '../../model';
+// import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
+// import * as CIDR from 'ip-cidr';
+
+// @Component({
+//   selector: 'of-probe-detail',
+//   templateUrl: './detail.component.html',
+//   styleUrls: ['./detail.component.scss']
+// })
+// export class DetailComponent implements OnInit, AfterContentInit {
+
+//   probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
+//   probe: Probe = null;
+//   networkInfo = null;
+//   deviceInfo = null;
+//   probeInfo = null;
+
+
+//   constructor(
+//     private route: ActivatedRoute,
+//     private router: Router,
+//     public dialog: MatDialog,
+//     private detailStore: Store<DetailStore.State>
+//   ) { }
+
+//   ngOnInit() {
+//     this.probe$.subscribe(
+//       (probe: Probe) => {
+//         if (probe != null) {
+//           this.probe = probe;
+//           console.log(probe);
+//           this.arrangeInfo();
+//         }
+//       },
+//       (error: RPCClientError) => {
+//         console.log(error.response.message);
+//       }
+//     );
+//   }
+
+//   ngAfterContentInit() {
+//     const probeId = this.route.snapshot.paramMap.get('id');
+//     this.detailStore.dispatch(
+//       new DetailStore.Read(
+//         { id: probeId }
+//       )
+//     );
+//   }
+
+//   arrangeInfo() {
+
+//     const cidr = new CIDR(this.probe.cidr);
+//     if (!cidr.isValid()) {
+//     }
+//     const startIP = cidr.addressStart.address;
+//     const endIP = cidr.addressEnd.address;
+
+//     this.networkInfo = [
+//       {
+//         key: 'Probe IP Range',
+//         value: startIP + '~' + endIP,
+//       },
+//       {
+//         key: 'Installed IP',
+//         value: '???',
+//       },
+//       {
+//         key: 'NIC',
+//         value: '???'
+//       },
+//       {
+//         key: 'Targets',
+//         value: 'count 반정규화 필요 '
+//       },
+//     ];
+//     this.deviceInfo = [
+//       {
+//         key: 'OS',
+//         value: 'Linux'
+//       },
+//       {
+//         key: 'CPU',
+//         value: 'intel7...'
+//       },
+//       {
+//         key: 'Memory',
+//         value: '16GB'
+//       },
+//       {
+//         key: '...',
+//         value: '...'
+//       },
+//     ];
+//     this.probeInfo = [
+//       {
+//         key: 'Authorized at',
+//         value: String(new Date(this.probe.authorizeDate))
+//       },
+//       {
+//         key: 'Authorized by',
+//         value: 'insanity'
+//       },
+//       {
+//         key: 'Installed at',
+//         value: String(new Date(this.probe.createDate))
+//       },
+//       {
+//         key: 'Probe Key',
+//         value: this.probe.probeKey,
+//       },
+//     ];
+//   }
+
+//   discovery() {
+//     const dialogRef = this.dialog.open(DiscoverySettingComponent, {
+//       width: '80%',
+//     });
+
+//     dialogRef.afterClosed().subscribe(result => {
+//       console.log('The dialog was closed');
+
+//     });
+//   }
+
+
+//   handleStartStop() {
+//     // this.isUpState = !this.isUpState;
+//   }
+
+//   handleRemove() {
+//     const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+//       width: '250px',
+//       data: {
+//         title: 'Remove',
+//         message: 'Are you sure?'
+//       }
+//     });
+
+//     dialogRef.afterClosed().subscribe(confirmed => {
+//       if (confirmed) {
+//         console.log('confirmed');
+//       }
+//       // 삭제 후 list로 back
+//     });
+//   }
+// }
+
diff --git a/src/packages/probe/component/download/download.component.html b/src/packages/probe/component/download/download.component.html
new file mode 100644
index 0000000..20360fb
--- /dev/null
+++ b/src/packages/probe/component/download/download.component.html
@@ -0,0 +1,15 @@
+<div fxLayout="row" fxLayout.lt-sm="column" fxLayoutAglign="center">
+  <div fxFlex.xs="100" fxFlex.lg="20" fxFlex.md="20" fxFlex.sm="20" >
+    <div class="tab">
+      <button class="tablinks" *ngFor="let os of OS_LIST" (click)="handleTabSelection(os)" >{{os}}</button>
+    </div>
+  </div>
+
+  <div fxFlex.xs="100" fxFlex.lg="80" fxFlex.md="80" fxFlex.sm="80">
+    <div class="tabcontent">
+      <div *ngIf="selected == 'Windows' || selected==undefined">Windows Manual</div>
+      <div *ngIf="selected == 'Ubuntu'">Ubuntu Manual</div>
+      <div *ngIf="selected == 'CentOS'">CentOS Manual</div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/packages/probe/component/download/download.component.scss b/src/packages/probe/component/download/download.component.scss
new file mode 100644
index 0000000..7baf0a7
--- /dev/null
+++ b/src/packages/probe/component/download/download.component.scss
@@ -0,0 +1,36 @@
+.tab {
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+    height: 100%;
+}
+
+/* Style the buttons that are used to open the tab content */
+.tab button {
+    display: block;
+    background-color: inherit;
+    color: black;
+    padding: 22px 16px;
+    width: 100%;
+    border: none;
+    outline: none;
+    text-align: left;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+/* Change background color of buttons on hover */
+.tab button:hover {
+    background-color: #ddd;
+}
+
+/* Create an active/current "tab button" class */
+.tab button.active {
+    background-color: #ccc;
+}
+
+/* Style the tab content */
+.tabcontent {
+    padding: 0px 12px;
+    border: 1px solid #ccc;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/src/app/commons/component/layout2/sub-menubar/sub-menubar.component.spec.ts b/src/packages/probe/component/download/download.component.spec.ts
similarity index 54%
rename from src/app/commons/component/layout2/sub-menubar/sub-menubar.component.spec.ts
rename to src/packages/probe/component/download/download.component.spec.ts
index 1ba6e04..ad71a7c 100644
--- a/src/app/commons/component/layout2/sub-menubar/sub-menubar.component.spec.ts
+++ b/src/packages/probe/component/download/download.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SubMenubarComponent } from './sub-menubar.component';
+import { DownloadComponent } from './download.component';
 
-describe('SubMenubarComponent', () => {
-  let component: SubMenubarComponent;
-  let fixture: ComponentFixture<SubMenubarComponent>;
+describe('DownloadComponent', () => {
+  let component: DownloadComponent;
+  let fixture: ComponentFixture<DownloadComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SubMenubarComponent ]
+      declarations: [ DownloadComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SubMenubarComponent);
+    fixture = TestBed.createComponent(DownloadComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/packages/probe/component/download/download.component.ts b/src/packages/probe/component/download/download.component.ts
new file mode 100644
index 0000000..7be7387
--- /dev/null
+++ b/src/packages/probe/component/download/download.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'of-download',
+  templateUrl: './download.component.html',
+  styleUrls: ['./download.component.scss']
+})
+export class DownloadComponent implements OnInit {
+
+  selected: string = undefined;
+
+  OS_LIST = [
+    'Windows',
+    'Ubuntu',
+    'CentOS',
+  ];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  handleTabSelection(osName: string) {
+    console.log(osName);
+    this.selected = osName;
+  }
+}
diff --git a/src/packages/probe/component/index.ts b/src/packages/probe/component/index.ts
new file mode 100644
index 0000000..c204af7
--- /dev/null
+++ b/src/packages/probe/component/index.ts
@@ -0,0 +1,9 @@
+// import { DetailComponent } from './detail/detail.component';
+// import { ListComponent } from './list/list.component';
+// import { DownloadComponent } from './download/download.component';
+
+// export const COMPONENTS = [
+//   ListComponent,
+//   DetailComponent,
+//   DownloadComponent,
+// ];
diff --git a/src/packages/probe/component/list/list.component.html b/src/packages/probe/component/list/list.component.html
new file mode 100644
index 0000000..1840b9b
--- /dev/null
+++ b/src/packages/probe/component/list/list.component.html
@@ -0,0 +1,45 @@
+<div class="example-container mat-elevation-z8">
+  <mat-table #table [dataSource]="dataSource" matSort>
+
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.displayName}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="ip">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> IP </mat-header-cell>
+      <mat-cell *matCellDef="let element">  </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="os">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> OS </mat-header-cell>
+      <mat-cell *matCellDef="let element">  </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="cidr">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> CIDR </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.cidr}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="targetCnt">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Targets </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.targets.length}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="date">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.authorizeDate.toLocaleString()}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="authBy">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> AuthBy </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.authorizeMember.name}} </mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>
+  </mat-table>
+
+  <mat-paginator [length]="length" [pageIndex]="0" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25, 100]">
+  </mat-paginator>
+</div>
\ No newline at end of file
diff --git a/src/packages/probe/component/list/list.component.scss b/src/packages/probe/component/list/list.component.scss
new file mode 100644
index 0000000..54b8a22
--- /dev/null
+++ b/src/packages/probe/component/list/list.component.scss
@@ -0,0 +1,14 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+  }
+  
+  .mat-table {
+    overflow: auto;
+    max-height: 500px;
+  }
+  
+  .mat-header-cell.mat-sort-header-sorted {
+    color: black;
+  }
\ No newline at end of file
diff --git a/src/packages/probe/component/list/list.component.spec.ts b/src/packages/probe/component/list/list.component.spec.ts
new file mode 100644
index 0000000..beacd15
--- /dev/null
+++ b/src/packages/probe/component/list/list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListComponent } from './list.component';
+
+describe('ListComponent', () => {
+  let component: ListComponent;
+  let fixture: ComponentFixture<ListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/probe/component/list/list.component.ts b/src/packages/probe/component/list/list.component.ts
new file mode 100644
index 0000000..6cb812c
--- /dev/null
+++ b/src/packages/probe/component/list/list.component.ts
@@ -0,0 +1,93 @@
+// import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild } from '@angular/core';
+// import { MatTableDataSource, MatSort } from '@angular/material';
+// import { Router } from '@angular/router';
+
+// import { Store, select } from '@ngrx/store';
+
+// import { RPCClientError } from '@loafer/ng-rpc/protocol';
+// import { Domain } from 'packages/domain/model';
+// import { AuthSelector } from 'packages/member/store';
+
+// import { Probe } from '../../model';
+// import * as ListStore from '../../store/list';
+// import { ListSelector } from '../../store';
+
+// @Component({
+//   selector: 'of-probe-list',
+//   templateUrl: './list.component.html',
+//   styleUrls: ['./list.component.scss']
+// })
+// export class ListComponent implements OnInit, AfterContentInit {
+//   probes$ = this.store.pipe(select(ListSelector.select('probes')));
+//   // pageSize = '25';
+//   // length = '100';
+
+//   displayedColumns = ['name', 'ip', 'os', 'cidr', 'targetCnt', 'date', 'authBy'];
+//   dataSource: MatTableDataSource<Probe>;
+//   @ViewChild(MatSort) sort: MatSort;
+
+//   constructor(
+//     private router: Router,
+//     private store: Store<ListStore.State>
+//   ) {
+//   }
+
+//   ngAfterContentInit() {
+
+//     this.store.select(AuthSelector.select('domain')).subscribe(
+//       (domain: Domain) => {
+//         this.store.dispatch(new ListStore.ReadAllByDomain(domain));
+//       },
+//       (error) => {
+//         console.log(error);
+//       }
+//     );
+
+//     this.probes$.subscribe(
+//       (probes: Probe[]) => {
+//         console.log(probes);
+//         this.dataSource = new MatTableDataSource(probes);
+//         this.dataSource.sort = this.sort;
+//       },
+//       (error: RPCClientError) => {
+//         console.log(error.response.message);
+//       }
+//     );
+
+//     // // temporary data
+//     // const data: Probe[] = new Array();
+//     // for (let i = 0; i < 100; i++) {
+//     //   const p: Probe = {
+//     //     id: i,
+//     //     displayName: String('displayName' + i),
+//     //     host: {
+//     //       ip: i,
+//     //       os: {
+//     //         meta: 'blahblahblah'
+//     //       },
+//     //     },
+//     //     cidr: String('cidr' + i),
+//     //     targets: [
+//     //       {
+//     //         id: i,
+//     //       },
+//     //     ],
+//     //     authorizeDate: new Date(),
+//     //     authorizeMember: {
+//     //       'name': String('insanity')
+//     //     },
+//     //   };
+//     //   data.push(p);
+//     // }
+
+//     // this.dataSource = new MatTableDataSource(data);
+//     // this.dataSource.sort = this.sort;
+//   }
+
+//   ngOnInit() {
+//   }
+
+//   handleRowClick(obj: Probe) {
+//     this.router.navigate(['probe', obj.id]);
+//   }
+// }
diff --git a/src/packages/probe/model/Probe.ts b/src/packages/probe/model/Probe.ts
new file mode 100644
index 0000000..33745ee
--- /dev/null
+++ b/src/packages/probe/model/Probe.ts
@@ -0,0 +1,20 @@
+import { Domain } from 'packages/domain/model';
+import { Member } from 'packages/member/model';
+import { Infra } from 'packages/infra/model';
+import { MetaProbeStatus } from 'packages/meta/probe-status/model/MetaProbeStatus';
+
+export interface Probe {
+  id?: number;
+  status?: MetaProbeStatus; // INITIAL / NORMAL
+  description?: string;
+  createDate?: Date;
+  domain?: Domain;
+  probeKey?: string;
+  encryptionKey?: string;
+  displayName?: string;
+  cidr?: string;
+  authorizeDate?: Date;
+  authorizeMember?: Member;
+  // host?: InfraHost;
+  targets?: Infra[];
+}
diff --git a/src/packages/probe/model/ProbeHost.ts b/src/packages/probe/model/ProbeHost.ts
new file mode 100644
index 0000000..ba0b6ef
--- /dev/null
+++ b/src/packages/probe/model/ProbeHost.ts
@@ -0,0 +1,9 @@
+
+import { Probe } from './Probe';
+import { InfraHost } from 'packages/infra/model';
+
+export interface ProbeHost {
+  id?: number;
+  probe?: Probe;
+  host?: InfraHost;
+}
diff --git a/src/packages/probe/model/ProbeTask.ts b/src/packages/probe/model/ProbeTask.ts
new file mode 100644
index 0000000..e2ec770
--- /dev/null
+++ b/src/packages/probe/model/ProbeTask.ts
@@ -0,0 +1,14 @@
+import { Probe } from './Probe';
+import { MetaProbeTaskType } from 'packages/meta/probe-task-type/model/MetaProbeTaskType';
+
+export interface ProbeTask {
+  id?: number;
+  taskType: MetaProbeTaskType;
+  probe: Probe;
+  data: string;
+  createDate: Date;
+  sendDate: Date;
+  startDate: Date;
+  endDate: Date;
+  succeed: boolean;
+}
diff --git a/src/packages/probe/model/index.ts b/src/packages/probe/model/index.ts
new file mode 100644
index 0000000..49cf0b5
--- /dev/null
+++ b/src/packages/probe/model/index.ts
@@ -0,0 +1,3 @@
+export * from './Probe';
+export * from './ProbeHost';
+export * from './ProbeTask';
diff --git a/src/packages/probe/probe-store.module.ts b/src/packages/probe/probe-store.module.ts
new file mode 100644
index 0000000..50f957b
--- /dev/null
+++ b/src/packages/probe/probe-store.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import {
+  StoreRouterConnectingModule,
+  RouterStateSerializer,
+} from '@ngrx/router-store';
+import { EffectsModule } from '@ngrx/effects';
+import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
+
+import {
+  REDUCERS,
+  EFFECTS,
+} from './store';
+
+import { MODULE } from './probe.constant';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(MODULE.name, REDUCERS),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class ProbeStoreModule { }
diff --git a/src/packages/probe/probe.constant.ts b/src/packages/probe/probe.constant.ts
new file mode 100644
index 0000000..e12f632
--- /dev/null
+++ b/src/packages/probe/probe.constant.ts
@@ -0,0 +1,3 @@
+export const MODULE = {
+    name: 'probe'
+};
diff --git a/src/packages/probe/probe.module.ts b/src/packages/probe/probe.module.ts
new file mode 100644
index 0000000..6048643
--- /dev/null
+++ b/src/packages/probe/probe.module.ts
@@ -0,0 +1,40 @@
+// import { NgModule } from '@angular/core';
+// import { CommonModule } from '@angular/common';
+
+// import { MaterialModule } from 'packages/commons/material/material.module';
+
+// import { InfoTableModule } from 'packages/commons/component/info-table/info-table.module';
+// import { ConfirmDialogModule } from 'packages/commons/component/confirm-dialog/confirm-dialog.module';
+// import { ConfirmDialogComponent } from 'packages/commons/component/confirm-dialog/confirm-dialog.component';
+
+// import { COMPONENTS } from './component';
+// import { ProbeStoreModule } from './probe-store.module';
+// import { SERVICES } from './service';
+// import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
+// import { DiscoveryModule } from '../discovery/discovery.module';
+
+
+// @NgModule({
+//   imports: [
+//     CommonModule,
+//     MaterialModule,
+//     InfoTableModule,
+//     ConfirmDialogModule,
+//     ProbeStoreModule,
+//     DiscoveryModule
+//   ],
+//   declarations: [
+//     COMPONENTS,
+//   ],
+//   exports: [
+//     COMPONENTS,
+//   ],
+//   providers: [
+//     SERVICES,
+//   ],
+//   entryComponents: [
+//     ConfirmDialogComponent,
+//     DiscoverySettingComponent
+//   ]
+// })
+// export class ProbeModule { }
diff --git a/src/packages/probe/service/index.ts b/src/packages/probe/service/index.ts
new file mode 100644
index 0000000..6a439f5
--- /dev/null
+++ b/src/packages/probe/service/index.ts
@@ -0,0 +1,5 @@
+import { ProbeService } from './probe.service';
+
+export const SERVICES = [
+  ProbeService,
+];
diff --git a/src/packages/probe/service/probe.service.spec.ts b/src/packages/probe/service/probe.service.spec.ts
new file mode 100644
index 0000000..c56d641
--- /dev/null
+++ b/src/packages/probe/service/probe.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ProbeService } from './probe.service';
+
+describe('ProbeService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ProbeService]
+    });
+  });
+
+  it('should be created', inject([ProbeService], (service: ProbeService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/packages/probe/service/probe.service.ts b/src/packages/probe/service/probe.service.ts
new file mode 100644
index 0000000..2e5b257
--- /dev/null
+++ b/src/packages/probe/service/probe.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/map';
+
+import { RPCService } from '@loafer/ng-rpc/service';
+
+import { Domain } from 'packages/domain/model';
+
+import { Probe } from '../model';
+
+
+@Injectable()
+export class ProbeService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  public readAllByDomain(domain: Domain): Observable<Probe[]> {
+    return this.rpcService.call<Probe[]>('ProbeService.readAllByDomain', domain);
+  }
+
+  public read(id: string): Observable<Probe> {
+    return this.rpcService.call<Probe>('ProbeService.read', id);
+  }
+}
diff --git a/src/packages/probe/store/detail/detail.action.ts b/src/packages/probe/store/detail/detail.action.ts
new file mode 100644
index 0000000..e6a02bf
--- /dev/null
+++ b/src/packages/probe/store/detail/detail.action.ts
@@ -0,0 +1,37 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Probe } from '../../model';
+
+
+export enum ActionType {
+  Read = '[probe.detail] Read',
+  ReadSuccess = '[probe.detail] ReadSuccess',
+  ReadFailure = '[probe.detail] ReadFailure',
+}
+
+export class Read implements Action {
+  readonly type = ActionType.Read;
+
+  constructor(public payload: {id: string}) {}
+}
+
+export class ReadSuccess implements Action {
+  readonly type = ActionType.ReadSuccess;
+
+  constructor(public payload: Probe) {}
+}
+
+export class ReadFailure implements Action {
+  readonly type = ActionType.ReadFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+
+export type Actions =
+  | Read
+  | ReadSuccess
+  | ReadFailure
+;
diff --git a/src/packages/probe/store/detail/detail.effect.spec.ts b/src/packages/probe/store/detail/detail.effect.spec.ts
new file mode 100644
index 0000000..b1c2217
--- /dev/null
+++ b/src/packages/probe/store/detail/detail.effect.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './detail.effect';
+
+describe('ProbeDetail.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});
diff --git a/src/packages/probe/store/detail/detail.effect.ts b/src/packages/probe/store/detail/detail.effect.ts
new file mode 100644
index 0000000..ad4ece4
--- /dev/null
+++ b/src/packages/probe/store/detail/detail.effect.ts
@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Probe } from '../../model';
+import { ProbeService } from '../../service/probe.service';
+
+import {
+  Read,
+  ReadFailure,
+  ReadSuccess,
+  ActionType
+} from './detail.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private probeService: ProbeService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  read$: Observable<Action> = this.actions$
+    .ofType(ActionType.Read)
+    .map((action: Read) => action.payload)
+    .switchMap(payload => this.probeService.read(payload.id))
+    .map(probe => {
+      return new ReadSuccess(probe);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadFailure(error));
+    });
+}
diff --git a/src/packages/probe/store/detail/detail.reducer.ts b/src/packages/probe/store/detail/detail.reducer.ts
new file mode 100644
index 0000000..33b67c3
--- /dev/null
+++ b/src/packages/probe/store/detail/detail.reducer.ts
@@ -0,0 +1,49 @@
+import {
+  Read,
+  ReadFailure,
+  ReadSuccess,
+  ActionType,
+  Actions,
+} from './detail.action';
+
+import {
+  State,
+  initialState,
+} from './detail.state';
+
+import { Probe } from '../../model';
+
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.Read: {
+      return {
+        ...state,
+        error: null,
+        isPending: true,
+      };
+    }
+
+    case ActionType.ReadSuccess: {
+      return {
+        ...state,
+        error: null,
+        isPending: false,
+        probe: action.payload,
+      };
+    }
+
+    case ActionType.ReadFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        isPending: false,
+        probe: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/packages/probe/store/detail/detail.state.ts b/src/packages/probe/store/detail/detail.state.ts
new file mode 100644
index 0000000..15b3e4f
--- /dev/null
+++ b/src/packages/probe/store/detail/detail.state.ts
@@ -0,0 +1,41 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Probe } from '../../model';
+
+// export interface State {
+//   error: RPCError | null;
+//   isPending: boolean;
+//   probe: Probe | null;
+// }
+
+// export const initialState: State = {
+//   error: null,
+//   isPending: false,
+//   probe: null,
+// };
+
+
+import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
+
+export interface State extends EntityState<Probe> {
+  error: RPCClientError | null;
+  isPending: boolean;
+  probe: Probe | null;
+}
+export const adapter: EntityAdapter<Probe> = createEntityAdapter<Probe>();
+export const initialState: State = adapter.getInitialState({
+  error: null,
+  isPending: false,
+  probe: null,
+});
+
+export const getProbe = (state: State) => state.probe;
+export const getError = (state: State) => state.error;
+export const isPending = (state: State) => state.isPending;
+
+// export const {
+//   selectIds,
+//   selectEntities,
+//   selectAll,
+//   selectTotal,
+// } = adapter.getSelectors();
diff --git a/src/packages/probe/store/detail/index.ts b/src/packages/probe/store/detail/index.ts
new file mode 100644
index 0000000..23ae8ab
--- /dev/null
+++ b/src/packages/probe/store/detail/index.ts
@@ -0,0 +1,4 @@
+export * from './detail.action';
+export * from './detail.effect';
+export * from './detail.reducer';
+export * from './detail.state';
diff --git a/src/packages/probe/store/index.ts b/src/packages/probe/store/index.ts
new file mode 100644
index 0000000..ec1ad7e
--- /dev/null
+++ b/src/packages/probe/store/index.ts
@@ -0,0 +1,38 @@
+import {
+  createSelector,
+  createFeatureSelector,
+  ActionReducerMap,
+} from '@ngrx/store';
+
+import { StateSelector } from 'packages/core/ngrx/store';
+
+import { MODULE } from '../probe.constant';
+
+import * as ProbeListStore from './list';
+import * as ProbeDetailStore from './detail';
+
+export interface State {
+  list: ProbeListStore.State;
+  detail: ProbeDetailStore.State;
+}
+
+export const REDUCERS = {
+  list: ProbeListStore.reducer,
+  detail: ProbeDetailStore.reducer,
+};
+
+export const EFFECTS = [
+  ProbeListStore.Effects,
+  ProbeDetailStore.Effects,
+];
+
+export const selectProbeState = createFeatureSelector<State>(MODULE.name);
+
+export const ListSelector = new StateSelector<ProbeListStore.State>(createSelector(
+  selectProbeState,
+  (state: State) => state.list
+));
+export const DetailSelector = new StateSelector<ProbeDetailStore.State>(createSelector(
+  selectProbeState,
+  (state: State) => state.detail
+));
diff --git a/src/packages/probe/store/list/index.ts b/src/packages/probe/store/list/index.ts
new file mode 100644
index 0000000..7fd86e0
--- /dev/null
+++ b/src/packages/probe/store/list/index.ts
@@ -0,0 +1,4 @@
+export * from './list.action';
+export * from './list.effect';
+export * from './list.reducer';
+export * from './list.state';
diff --git a/src/packages/probe/store/list/list.action.ts b/src/packages/probe/store/list/list.action.ts
new file mode 100644
index 0000000..8482d4c
--- /dev/null
+++ b/src/packages/probe/store/list/list.action.ts
@@ -0,0 +1,38 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Domain } from 'packages/domain/model';
+import { Probe } from '../../model';
+
+
+export enum ActionType {
+  ReadAllByDomain = '[probe.list] ReadAllByDomain',
+  ReadAllByDomainSuccess = '[probe.list] ReadAllByDomainSuccess',
+  ReadAllByDomainFailure = '[probe.list] ReadAllByDomainFailure',
+}
+
+export class ReadAllByDomain implements Action {
+  readonly type = ActionType.ReadAllByDomain;
+
+  constructor(public payload: Domain) {}
+}
+
+export class ReadAllByDomainSuccess implements Action {
+  readonly type = ActionType.ReadAllByDomainSuccess;
+
+  constructor(public payload: Probe[]) {}
+}
+
+export class ReadAllByDomainFailure implements Action {
+  readonly type = ActionType.ReadAllByDomainFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+
+export type Actions =
+  | ReadAllByDomain
+  | ReadAllByDomainSuccess
+  | ReadAllByDomainFailure
+;
diff --git a/src/packages/probe/store/list/list.effect.spec.ts b/src/packages/probe/store/list/list.effect.spec.ts
new file mode 100644
index 0000000..fbff64a
--- /dev/null
+++ b/src/packages/probe/store/list/list.effect.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './list.effect';
+
+describe('ProbeList.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});
diff --git a/src/packages/probe/store/list/list.effect.ts b/src/packages/probe/store/list/list.effect.ts
new file mode 100644
index 0000000..56d7138
--- /dev/null
+++ b/src/packages/probe/store/list/list.effect.ts
@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Domain } from 'packages/domain/model';
+
+import { Probe } from '../../model';
+import { ProbeService } from '../../service/probe.service';
+
+import {
+  ReadAllByDomain,
+  ReadAllByDomainFailure,
+  ReadAllByDomainSuccess,
+  ActionType
+} from './list.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private probeService: ProbeService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  readAllByDomain$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAllByDomain)
+    .map((action: ReadAllByDomain) => action.payload)
+    .switchMap(payload => this.probeService.readAllByDomain(payload))
+    .map(probes => {
+      return new ReadAllByDomainSuccess(probes);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllByDomainFailure(error));
+    });
+}
diff --git a/src/packages/probe/store/list/list.reducer.ts b/src/packages/probe/store/list/list.reducer.ts
new file mode 100644
index 0000000..44c5a26
--- /dev/null
+++ b/src/packages/probe/store/list/list.reducer.ts
@@ -0,0 +1,48 @@
+import {
+  ReadAllByDomain,
+  ReadAllByDomainFailure,
+  ReadAllByDomainSuccess,
+  ActionType,
+  Actions,
+} from './list.action';
+
+import {
+  State,
+  initialState,
+} from './list.state';
+
+import { Probe } from '../../model';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ReadAllByDomain: {
+      return {
+        ...state,
+        error: null,
+        isPending: true,
+      };
+    }
+
+    case ActionType.ReadAllByDomainSuccess: {
+      return {
+        ...state,
+        error: null,
+        isPending: false,
+        probes: action.payload,
+      };
+    }
+
+    case ActionType.ReadAllByDomainFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        isPending: false,
+        probes: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/packages/probe/store/list/list.state.ts b/src/packages/probe/store/list/list.state.ts
new file mode 100644
index 0000000..3d283bc
--- /dev/null
+++ b/src/packages/probe/store/list/list.state.ts
@@ -0,0 +1,19 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Probe } from '../../model';
+
+export interface State {
+  error: RPCClientError | null;
+  isPending: boolean;
+  probes: Probe[] | null;
+}
+
+export const initialState: State = {
+  error: null,
+  isPending: false,
+  probes: null,
+};
+
+export const getProbes = (state: State) => state.probes;
+export const getError = (state: State) => state.error;
+export const isPending = (state: State) => state.isPending;
diff --git a/src/packages/sensor-item/component/index.ts b/src/packages/sensor-item/component/index.ts
new file mode 100644
index 0000000..2642cab
--- /dev/null
+++ b/src/packages/sensor-item/component/index.ts
@@ -0,0 +1,5 @@
+// import { ListComponent } from './list/list.component';
+
+// export const COMPONENTS = [
+//   ListComponent,
+// ];
diff --git a/src/packages/sensor-item/component/list/list.component.html b/src/packages/sensor-item/component/list/list.component.html
new file mode 100644
index 0000000..bdc6b1f
--- /dev/null
+++ b/src/packages/sensor-item/component/list/list.component.html
@@ -0,0 +1,45 @@
+<div class="example-container mat-elevation-z8" >
+    <mat-table #table [dataSource]="dataSource" matSort>
+  
+      <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
+      </ng-container>
+  
+      <ng-container matColumnDef="ip">
+        <mat-header-cell *matHeaderCellDef mat-sort-header> IP </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.ip}} </mat-cell>
+      </ng-container>
+  
+      <ng-container matColumnDef="os">
+        <mat-header-cell *matHeaderCellDef mat-sort-header> OS </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.os}} </mat-cell>
+      </ng-container>
+  
+      <ng-container matColumnDef="cidr">
+        <mat-header-cell *matHeaderCellDef mat-sort-header> CIDR </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.cidr}} </mat-cell>
+      </ng-container>
+  
+      <ng-container matColumnDef="targetCnt">
+        <mat-header-cell *matHeaderCellDef mat-sort-header> Targets </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.targetCnt}} </mat-cell>
+      </ng-container>
+  
+      <ng-container matColumnDef="date">
+        <mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.date}} </mat-cell>
+      </ng-container>
+  
+      <ng-container matColumnDef="authBy">
+        <mat-header-cell *matHeaderCellDef mat-sort-header> AuthBy </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.authBy}} </mat-cell>
+      </ng-container>
+  
+      <mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>
+    </mat-table>
+  
+    <mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event">
+    </mat-paginator>
+  </div>
\ No newline at end of file
diff --git a/src/packages/sensor-item/component/list/list.component.scss b/src/packages/sensor-item/component/list/list.component.scss
new file mode 100644
index 0000000..54b8a22
--- /dev/null
+++ b/src/packages/sensor-item/component/list/list.component.scss
@@ -0,0 +1,14 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+  }
+  
+  .mat-table {
+    overflow: auto;
+    max-height: 500px;
+  }
+  
+  .mat-header-cell.mat-sort-header-sorted {
+    color: black;
+  }
\ No newline at end of file
diff --git a/src/packages/sensor-item/component/list/list.component.spec.ts b/src/packages/sensor-item/component/list/list.component.spec.ts
new file mode 100644
index 0000000..beacd15
--- /dev/null
+++ b/src/packages/sensor-item/component/list/list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListComponent } from './list.component';
+
+describe('ListComponent', () => {
+  let component: ListComponent;
+  let fixture: ComponentFixture<ListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor-item/component/list/list.component.ts b/src/packages/sensor-item/component/list/list.component.ts
new file mode 100644
index 0000000..c6a2a9e
--- /dev/null
+++ b/src/packages/sensor-item/component/list/list.component.ts
@@ -0,0 +1,63 @@
+// import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+// import { MatTableDataSource, MatSort } from '@angular/material';
+// import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
+// import { Router } from '@angular/router';
+
+// export interface Probe {
+//   id: string;
+//   name: string;
+//   ip: string;
+//   os: string;
+//   cidr: string;
+//   targetCnt: number;
+//   date: string;
+//   authBy: string;
+// }
+
+
+// @Component({
+//   selector: 'of-sensor-item-list',
+//   templateUrl: './list.component.html',
+//   styleUrls: ['./list.component.scss']
+// })
+// export class ListComponent implements OnInit, AfterContentInit {
+
+//   displayedColumns = ['name', 'ip', 'os', 'cidr', 'targetCnt', 'date', 'authBy'];
+//   dataSource: MatTableDataSource<Probe>;
+//   @ViewChild(MatSort) sort: MatSort;
+
+//   /**
+//    * Set the sort after the view init since this component will
+//    * be able to query its view for the initialized sort.
+//    */
+//   ngAfterContentInit() {
+//     // temporary data
+//     const data: Probe[] = new Array();
+//     for (let i = 0; i < 10; i++) {
+//       const p: Probe = {
+//         id: String('id' + i),
+//         name: String('name' + i),
+//         ip: String('ip' + i),
+//         os: String('os' + i),
+//         cidr: String('cidr' + i),
+//         targetCnt: i,
+//         date: String('date' + i),
+//         authBy: String('insanity')
+//       };
+//       data.push(p);
+//     }
+
+//     this.dataSource = new MatTableDataSource(data);
+//     this.dataSource.sort = this.sort;
+//   }
+
+//   constructor(private router: Router) { }
+
+//   ngOnInit() {
+//   }
+
+//   handleRowClick(obj: Probe) {
+//     this.router.navigate(['probe', obj.id]);
+//   }
+// }
+
diff --git a/src/packages/sensor-item/model/SensorItem.ts b/src/packages/sensor-item/model/SensorItem.ts
new file mode 100644
index 0000000..7fe21b9
--- /dev/null
+++ b/src/packages/sensor-item/model/SensorItem.ts
@@ -0,0 +1,9 @@
+import { MetaSensorDisplayItem } from 'packages/meta/sensor-display-item/model/MetaSensorDisplayItem';
+import { Sensor } from 'packages/sensor/model';
+
+export interface SensorItem {
+  id?: number;
+  sensor?: Sensor;
+  item?: MetaSensorDisplayItem;
+  createDate?: Date;
+}
diff --git a/src/packages/sensor-item/model/SensorItemDependency.ts b/src/packages/sensor-item/model/SensorItemDependency.ts
new file mode 100644
index 0000000..7db5ef3
--- /dev/null
+++ b/src/packages/sensor-item/model/SensorItemDependency.ts
@@ -0,0 +1,8 @@
+import { MetaSensorDisplayItem } from 'packages/meta/sensor-display-item/model/MetaSensorDisplayItem';
+import { MetaSensorItemKey } from '../../meta/sensor-item-key/model/MetaSensorItemKey';
+
+export interface SensorItemDependency {
+  id?: number;
+  item?: MetaSensorDisplayItem;
+  sensorItem?: MetaSensorItemKey;
+}
diff --git a/src/packages/sensor-item/sensor-item-store.module.ts b/src/packages/sensor-item/sensor-item-store.module.ts
new file mode 100644
index 0000000..2080777
--- /dev/null
+++ b/src/packages/sensor-item/sensor-item-store.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import {
+  StoreRouterConnectingModule,
+  RouterStateSerializer,
+} from '@ngrx/router-store';
+import { EffectsModule } from '@ngrx/effects';
+import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
+
+import {
+  REDUCERS,
+  EFFECTS,
+} from './store';
+
+import { MODULE } from './sensor-item.constant';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(MODULE.name, REDUCERS),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class SensorItemStoreModule { }
diff --git a/src/packages/sensor-item/sensor-item.constant.ts b/src/packages/sensor-item/sensor-item.constant.ts
new file mode 100644
index 0000000..1f3af81
--- /dev/null
+++ b/src/packages/sensor-item/sensor-item.constant.ts
@@ -0,0 +1,3 @@
+export const MODULE = {
+  name: 'sensorItem'
+};
diff --git a/src/packages/sensor-item/sensor-item.module.ts b/src/packages/sensor-item/sensor-item.module.ts
new file mode 100644
index 0000000..35ed9b0
--- /dev/null
+++ b/src/packages/sensor-item/sensor-item.module.ts
@@ -0,0 +1,25 @@
+// import { NgModule } from '@angular/core';
+// import { CommonModule } from '@angular/common';
+// import { MaterialModule } from 'packages/commons/material/material.module';
+// import { COMPONENTS } from './component';
+// import { SensorItemStoreModule } from './sensor-item-store.module';
+// import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-display-item.module';
+// import { SERVICES } from './service';
+
+// @NgModule({
+//   imports: [
+//     CommonModule,
+//     MaterialModule,
+//     SensorItemStoreModule,
+//   ],
+//   declarations: [
+//     COMPONENTS,
+//   ],
+//   exports: [
+//     COMPONENTS,
+//   ],
+//   providers: [
+//     SERVICES,
+//   ],
+// })
+// export class SensorItemModule { }
diff --git a/src/packages/sensor-item/service/index.ts b/src/packages/sensor-item/service/index.ts
new file mode 100644
index 0000000..f92c8a5
--- /dev/null
+++ b/src/packages/sensor-item/service/index.ts
@@ -0,0 +1,7 @@
+import { SensorItemDependencyService } from './sensor-item-dependency.service';
+import { SensorItemService } from './sensor-item.service';
+
+export const SERVICES = [
+    SensorItemDependencyService,
+    SensorItemService
+];
diff --git a/src/packages/sensor-item/service/sensor-item-dependency.service.ts b/src/packages/sensor-item/service/sensor-item-dependency.service.ts
new file mode 100644
index 0000000..62b93a3
--- /dev/null
+++ b/src/packages/sensor-item/service/sensor-item-dependency.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import { RPCService } from '@loafer/ng-rpc/service';
+import { SensorItemDependency } from '../model/SensorItemDependency';
+import { MetaSensorItemKey } from 'packages/meta/sensor-item-key/model/MetaSensorItemKey';
+import { MetaSensorDisplayItem } from '../../meta/sensor-display-item/model/MetaSensorDisplayItem';
+
+
+
+@Injectable()
+export class SensorItemDependencyService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  public regist(dependency: SensorItemDependency): Observable<SensorItemDependency> {
+    return this.rpcService.call('SensorItemDependencyService.regist', dependency);
+  }
+
+  public readAllByDisplayItem(displayItem: MetaSensorDisplayItem): Observable<MetaSensorItemKey[]> {
+    return this.rpcService.call('SensorItemDependencyService.readAllByDisplayItem', displayItem);
+  }
+
+
+}
diff --git a/src/packages/sensor-item/service/sensor-item.service.ts b/src/packages/sensor-item/service/sensor-item.service.ts
new file mode 100644
index 0000000..5f7b74c
--- /dev/null
+++ b/src/packages/sensor-item/service/sensor-item.service.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import { RPCService } from '@loafer/ng-rpc/service';
+
+
+
+@Injectable()
+export class SensorItemService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  // public regist(dependency: SensorItemDependency): Observable<SensorItemDependency> {
+  //   return this.rpcService.call('SensorItemDependencyService.regist', dependency);
+  // }
+
+
+}
diff --git a/src/packages/sensor-item/store/index.ts b/src/packages/sensor-item/store/index.ts
new file mode 100644
index 0000000..7104a63
--- /dev/null
+++ b/src/packages/sensor-item/store/index.ts
@@ -0,0 +1,30 @@
+import {
+    createSelector,
+    createFeatureSelector,
+    ActionReducerMap,
+} from '@ngrx/store';
+
+import { StateSelector } from 'packages/core/ngrx/store';
+
+
+import * as ListStore from './key-list';
+import { MODULE } from '../sensor-item.constant';
+
+export interface State {
+    list: ListStore.State;
+}
+
+export const REDUCERS = {
+    list: ListStore.reducer,
+};
+
+export const EFFECTS = [
+    ListStore.Effects,
+];
+
+export const selectState = createFeatureSelector<State>(MODULE.name);
+
+export const ReadSensorItemKeySelector = new StateSelector<ListStore.State>(createSelector(
+    selectState,
+    (state: State) => state.list
+));
diff --git a/src/packages/sensor-item/store/key-list/index.ts b/src/packages/sensor-item/store/key-list/index.ts
new file mode 100644
index 0000000..7fd86e0
--- /dev/null
+++ b/src/packages/sensor-item/store/key-list/index.ts
@@ -0,0 +1,4 @@
+export * from './list.action';
+export * from './list.effect';
+export * from './list.reducer';
+export * from './list.state';
diff --git a/src/packages/sensor-item/store/key-list/list.action.ts b/src/packages/sensor-item/store/key-list/list.action.ts
new file mode 100644
index 0000000..a16c853
--- /dev/null
+++ b/src/packages/sensor-item/store/key-list/list.action.ts
@@ -0,0 +1,37 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { MetaSensorItemKey } from 'packages/meta/sensor-item-key/model/MetaSensorItemKey';
+import { MetaSensorDisplayItem } from 'packages/meta/sensor-display-item/model/MetaSensorDisplayItem';
+
+
+export enum ActionType {
+  ReadAllByDisplayItem = '[meta.sensor-display-key-list] ReadAllByDisplayItem',
+  ReadAllByDisplayItemSuccess = '[meta.sensor-display-key-list] ReadAllByDisplayItemSuccess',
+  ReadAllByDisplayItemFailure = '[meta.sensor-display-key-list] ReadAllByDisplayItemFailure',
+}
+
+export class ReadAllByDisplayItem implements Action {
+  readonly type = ActionType.ReadAllByDisplayItem;
+
+  constructor(public payload: MetaSensorDisplayItem) {}
+}
+
+export class ReadAllByDisplayItemSuccess implements Action {
+  readonly type = ActionType.ReadAllByDisplayItemSuccess;
+
+  constructor(public payload: MetaSensorItemKey[]) {}
+}
+
+export class ReadAllByDisplayItemFailure implements Action {
+  readonly type = ActionType.ReadAllByDisplayItemFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export type Actions =
+  | ReadAllByDisplayItem
+  | ReadAllByDisplayItemSuccess
+  | ReadAllByDisplayItemFailure
+
+;
diff --git a/src/packages/sensor-item/store/key-list/list.effect.spec.ts b/src/packages/sensor-item/store/key-list/list.effect.spec.ts
new file mode 100644
index 0000000..d8f6227
--- /dev/null
+++ b/src/packages/sensor-item/store/key-list/list.effect.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './list.effect';
+
+describe('List.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});
diff --git a/src/packages/sensor-item/store/key-list/list.effect.ts b/src/packages/sensor-item/store/key-list/list.effect.ts
new file mode 100644
index 0000000..53d75c9
--- /dev/null
+++ b/src/packages/sensor-item/store/key-list/list.effect.ts
@@ -0,0 +1,51 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { DomainMember } from 'packages/domain/model';
+
+
+import {
+  ReadAllByDisplayItem,
+  ReadAllByDisplayItemSuccess,
+  ReadAllByDisplayItemFailure,
+  ActionType,
+} from './list.action';
+import { SensorItemDependencyService } from '../../service/sensor-item-dependency.service';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private service: SensorItemDependencyService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  readAllByDisplayItem$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAllByDisplayItem)
+    .map((action: ReadAllByDisplayItem) => action.payload)
+    .switchMap(payload => this.service.readAllByDisplayItem(payload))
+    .map(list => {
+      return new ReadAllByDisplayItemSuccess(list);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllByDisplayItemFailure(error));
+    });
+
+}
diff --git a/src/packages/sensor-item/store/key-list/list.reducer.ts b/src/packages/sensor-item/store/key-list/list.reducer.ts
new file mode 100644
index 0000000..769743b
--- /dev/null
+++ b/src/packages/sensor-item/store/key-list/list.reducer.ts
@@ -0,0 +1,43 @@
+import {
+  Actions,
+  ActionType,
+} from './list.action';
+
+import {
+  State,
+  initialState,
+} from './list.state';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ReadAllByDisplayItem: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.ReadAllByDisplayItemSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        list: action.payload
+      };
+    }
+
+    case ActionType.ReadAllByDisplayItemFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        list: null,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/packages/sensor-item/store/key-list/list.state.ts b/src/packages/sensor-item/store/key-list/list.state.ts
new file mode 100644
index 0000000..e98a469
--- /dev/null
+++ b/src/packages/sensor-item/store/key-list/list.state.ts
@@ -0,0 +1,15 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import { MetaSensorItemKey } from 'packages/meta/sensor-item-key/model/MetaSensorItemKey';
+
+
+export interface State {
+  error: RPCClientError | null;
+  pending: boolean;
+  list: MetaSensorItemKey[] | null;
+}
+
+export const initialState: State = {
+  error: null,
+  pending: false,
+  list: null,
+};
diff --git a/src/packages/sensor/component/detail/detail.component.html b/src/packages/sensor/component/detail/detail.component.html
new file mode 100644
index 0000000..7592354
--- /dev/null
+++ b/src/packages/sensor/component/detail/detail.component.html
@@ -0,0 +1 @@
+<div><h3>Sensor Detail</h3></div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/detail/detail.component.scss b/src/packages/sensor/component/detail/detail.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/component/detail/detail.component.spec.ts b/src/packages/sensor/component/detail/detail.component.spec.ts
new file mode 100644
index 0000000..149b9be
--- /dev/null
+++ b/src/packages/sensor/component/detail/detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailComponent } from './detail.component';
+
+describe('DetailComponent', () => {
+  let component: DetailComponent;
+  let fixture: ComponentFixture<DetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/detail/detail.component.ts b/src/packages/sensor/component/detail/detail.component.ts
new file mode 100644
index 0000000..cb9b5c2
--- /dev/null
+++ b/src/packages/sensor/component/detail/detail.component.ts
@@ -0,0 +1,22 @@
+// import { Component, OnInit, Inject } from '@angular/core';
+// import { ActivatedRoute, Router } from '@angular/router';
+// import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+// import { ConfirmDialogComponent } from 'packages/commons/component/confirm-dialog/confirm-dialog.component';
+
+// @Component({
+//   selector: 'of-sensor-detail',
+//   templateUrl: './detail.component.html',
+//   styleUrls: ['./detail.component.scss']
+// })
+// export class DetailComponent implements OnInit {
+
+//   constructor(
+//     private route: ActivatedRoute,
+//     private router: Router,
+//     public dialog: MatDialog,
+//   ) { }
+
+//   ngOnInit() {
+//   }
+// }
+
diff --git a/src/packages/sensor/component/index.ts b/src/packages/sensor/component/index.ts
new file mode 100644
index 0000000..499477a
--- /dev/null
+++ b/src/packages/sensor/component/index.ts
@@ -0,0 +1,25 @@
+// import { SettingComponent } from './setting/setting.component';
+// import { SettingResultComponent } from './setting-result/setting-result.component';
+// import { FilterComponent } from './list/filter/filter.component';
+// import { ListComponent } from './list/list.component';
+// import { DetailComponent } from './detail/detail.component';
+// import { TargetSelectorComponent } from './setting/target-selector/target-selector.component';
+// import { CrawlerSelectorComponent } from './setting/crawler-selector/crawler-selector.component';
+// import { CrawlerAuthComponent } from './setting/crawler-auth/crawler-auth.component';
+// import { SensorItemSelectorComponent } from './setting/sensor-item-selector/sensor-item-selector.component';
+// import { SettingETCComponent } from './setting/setting-etc/setting-etc.component';
+// import { NameTagComponent } from './name-tag/name-tag.component';
+
+// export const COMPONENTS = [
+//   SettingComponent,
+//   SettingResultComponent,
+//   ListComponent,
+//   FilterComponent,
+//   DetailComponent,
+//   TargetSelectorComponent,
+//   CrawlerSelectorComponent,
+//   CrawlerAuthComponent,
+//   SensorItemSelectorComponent,
+//   SettingETCComponent,
+//   NameTagComponent,
+// ];
diff --git a/src/packages/sensor/component/list/filter/filter.component.html b/src/packages/sensor/component/list/filter/filter.component.html
new file mode 100644
index 0000000..d0fbdc8
--- /dev/null
+++ b/src/packages/sensor/component/list/filter/filter.component.html
@@ -0,0 +1,30 @@
+<div>
+  <mat-form-field >
+    <input matInput placeholder='IP or Application Name' value=''>
+  </mat-form-field>
+</div>
+<div [style.margin]="'30px 0px'">
+  <mat-form-field>
+    <mat-select placeholder="Crawler">
+      <mat-option *ngFor="let crawler of crawlers" value="crawler.value">
+        {{ crawler.name }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+</div>
+<div [style.margin]="'30px 0px'">
+  <div>Status</div>
+  <mat-radio-group class="radio-group">
+    <mat-radio-button class="radio-button" value="0" [checked]="true">All</mat-radio-button>
+    <mat-radio-button class="radio-button" value="1">Active</mat-radio-button>
+    <mat-radio-button class="radio-button" value="2">Inactive</mat-radio-button>
+  </mat-radio-group>
+</div>
+<div [style.margin]="'30px 0px'">
+  <div>Type</div>
+  <mat-radio-group class="radio-group">
+    <mat-radio-button class="radio-button" value="0" [checked]="true">All</mat-radio-button>
+    <mat-radio-button class="radio-button" value="1">Host</mat-radio-button>
+    <mat-radio-button class="radio-button" value="2">Application</mat-radio-button>
+  </mat-radio-group>
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/list/filter/filter.component.scss b/src/packages/sensor/component/list/filter/filter.component.scss
new file mode 100644
index 0000000..97910d9
--- /dev/null
+++ b/src/packages/sensor/component/list/filter/filter.component.scss
@@ -0,0 +1,9 @@
+.radio-group {
+    display: inline-flex;
+    flex-direction: column;
+  }
+  
+  .radio-button {
+    margin: 5px;
+  }
+  
\ No newline at end of file
diff --git a/src/packages/sensor/component/list/filter/filter.component.spec.ts b/src/packages/sensor/component/list/filter/filter.component.spec.ts
new file mode 100644
index 0000000..fc30049
--- /dev/null
+++ b/src/packages/sensor/component/list/filter/filter.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterComponent } from './filter.component';
+
+describe('FilterComponent', () => {
+  let component: FilterComponent;
+  let fixture: ComponentFixture<FilterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FilterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/list/filter/filter.component.ts b/src/packages/sensor/component/list/filter/filter.component.ts
new file mode 100644
index 0000000..9ca9b1f
--- /dev/null
+++ b/src/packages/sensor/component/list/filter/filter.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'of-target-filter',
+  templateUrl: './filter.component.html',
+  styleUrls: ['./filter.component.scss']
+})
+export class FilterComponent implements OnInit {
+
+  crawlers = [
+    {value: 'ALL', name: 'All'},
+    {value: 'WMI', name: 'WMI'},
+    {value: 'SSH', name: 'SSH'},
+    {value: 'MySQL', name: 'MySQL'},
+    {value: 'Redis', name: 'Redis'},
+  ];
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+}
diff --git a/src/packages/sensor/component/list/list.component.html b/src/packages/sensor/component/list/list.component.html
new file mode 100644
index 0000000..f522367
--- /dev/null
+++ b/src/packages/sensor/component/list/list.component.html
@@ -0,0 +1,55 @@
+<div fxLayout="row" fxLayoutWrap fxLayoutAlign="left">
+
+  <!-- Filter -->
+  <div fxFlex="20%">
+    <of-target-filter></of-target-filter>
+  </div>
+
+  <!-- Table -->
+  <div fxFlex="80%" class="example-container mat-elevation-z8">
+    <div [style.margin]="'10px'">
+      <div>Target : </div>
+      <div>Sensor : </div>
+      <div>Activated Sensor : </div>
+      <div>Inactivated Sensor : </div>
+      <div fxLayoutAlign="end">
+        <button mat-raised-button color="primary" (click)="addSensor()">Add Sensor</button>
+      </div>
+    </div>
+
+    <div fxFlex="80%" class="example-container mat-elevation-z8">
+      <div>
+        <mat-table #table [dataSource]="dataSource" matSort>
+
+          <ng-container matColumnDef="target">
+            <mat-header-cell *matHeaderCellDef mat-sort-header> Target </mat-header-cell>
+            <mat-cell *matCellDef="let element"> {{element.target.displayName}} </mat-cell>
+          </ng-container>
+
+          <ng-container matColumnDef="crawler">
+            <mat-header-cell *matHeaderCellDef mat-sort-header> Crawler </mat-header-cell>
+            <mat-cell *matCellDef="let element"> {{element.crawler.name}} </mat-cell>
+          </ng-container>
+
+          <ng-container matColumnDef="itemCount">
+            <mat-header-cell *matHeaderCellDef mat-sort-header> Items </mat-header-cell>
+            <mat-cell *matCellDef="let element"> {{element.itemCount}} </mat-cell>
+          </ng-container>
+
+          <ng-container matColumnDef="status">
+            <mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
+            <mat-cell *matCellDef="let element"> {{element.status.name}} </mat-cell>
+          </ng-container>
+
+          <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>
+        </mat-table>
+
+        <mat-paginator #paginator [length]="totalLength" [pageIndex]="0" [pageSize]="PAGE_SIZE" (page)="handlePaging($event)">
+        </mat-paginator>
+
+      </div>
+    </div>
+
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/list/list.component.scss b/src/packages/sensor/component/list/list.component.scss
new file mode 100644
index 0000000..54b8a22
--- /dev/null
+++ b/src/packages/sensor/component/list/list.component.scss
@@ -0,0 +1,14 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+  }
+  
+  .mat-table {
+    overflow: auto;
+    max-height: 500px;
+  }
+  
+  .mat-header-cell.mat-sort-header-sorted {
+    color: black;
+  }
\ No newline at end of file
diff --git a/src/packages/sensor/component/list/list.component.spec.ts b/src/packages/sensor/component/list/list.component.spec.ts
new file mode 100644
index 0000000..beacd15
--- /dev/null
+++ b/src/packages/sensor/component/list/list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListComponent } from './list.component';
+
+describe('ListComponent', () => {
+  let component: ListComponent;
+  let fixture: ComponentFixture<ListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/list/list.component.ts b/src/packages/sensor/component/list/list.component.ts
new file mode 100644
index 0000000..17a1472
--- /dev/null
+++ b/src/packages/sensor/component/list/list.component.ts
@@ -0,0 +1,90 @@
+// import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+// import { MatTableDataSource, MatSort, MatDialog } from '@angular/material';
+// import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
+// import { Router } from '@angular/router';
+// import { Sensor } from '../../model';
+
+// import { Store, select } from '@ngrx/store';
+
+// import * as SensorStore from '../../store';
+
+// import { RPCClientError } from '@loafer/ng-rpc/protocol';
+// import * as ListStore from '../../store/list';
+// import { sensorListSelector } from '../../store';
+// import { Domain } from '../../../domain/model';
+// import { SettingComponent } from '../setting/setting.component';
+// import { AuthSelector } from 'packages/member/store';
+// import { Page, PageParams } from 'app/commons/model';
+
+// @Component({
+//   selector: 'of-sensor-list',
+//   templateUrl: './list.component.html',
+//   styleUrls: ['./list.component.scss']
+// })
+// export class ListComponent implements OnInit, AfterContentInit {
+
+//   sensorList$ = this.store.pipe(select(sensorListSelector.select('page')));
+
+//   displayedColumns = ['target', 'crawler', 'itemCount', 'status'];
+//   dataSource: MatTableDataSource<Sensor>;
+//   @ViewChild(MatSort) sort: MatSort;
+//   PAGE_SIZE = '10';
+//   totalLength = 0;
+
+//   constructor(private router: Router,
+//     private store: Store<ListStore.State>,
+//     private dialog: MatDialog,
+//   ) { }
+
+//   ngOnInit() {
+//     this.sensorList$.subscribe(
+//       (page: Page) => {
+//         if (page != null) {
+//           this.totalLength = page.totalElements;
+//           this.dataSource = new MatTableDataSource(page.content);
+//           this.dataSource.sort = this.sort;
+//         }
+//       },
+//       (error: RPCClientError) => {
+//         console.log(error.response.message);
+//       }
+//     );
+//   }
+
+//   ngAfterContentInit() {
+//     this.getSensors(0);
+//   }
+
+//   getSensors(pageIndex: number) {
+//     this.store.select(AuthSelector.select('domain')).subscribe(
+//       (domain: Domain) => {
+//         const pageParams: PageParams = {
+//           pageNo: pageIndex + '',
+//           countPerPage: this.PAGE_SIZE,
+//           sortCol: 'id',
+//           sortDirection: 'descending'
+//         };
+
+//         this.store.dispatch(new ListStore.ReadAllByDomain({ domain, pageParams }));
+//       },
+//       (error) => {
+//         console.log(error);
+//       }
+//     );
+//   }
+
+//   handleRowClick(obj: Sensor) {
+//     this.router.navigate(['target', obj.id]);
+//   }
+
+//   addSensor() {
+//     const dialogRef = this.dialog.open(SettingComponent, {
+//       width: '80%',
+//     });
+
+//     dialogRef.afterClosed().subscribe(result => {
+//       console.log('The dialog was closed');
+
+//     });
+//   }
+// }
diff --git a/src/packages/sensor/component/name-tag/name-tag.component.html b/src/packages/sensor/component/name-tag/name-tag.component.html
new file mode 100644
index 0000000..dbea0e5
--- /dev/null
+++ b/src/packages/sensor/component/name-tag/name-tag.component.html
@@ -0,0 +1,5 @@
+<mat-chip-list>
+  <mat-chip *ngFor="let sensor of sensors">
+    {{sensor.description}}
+  </mat-chip>
+</mat-chip-list>
\ No newline at end of file
diff --git a/src/packages/sensor/component/name-tag/name-tag.component.scss b/src/packages/sensor/component/name-tag/name-tag.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/component/name-tag/name-tag.component.spec.ts b/src/packages/sensor/component/name-tag/name-tag.component.spec.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/component/name-tag/name-tag.component.ts b/src/packages/sensor/component/name-tag/name-tag.component.ts
new file mode 100644
index 0000000..aec80eb
--- /dev/null
+++ b/src/packages/sensor/component/name-tag/name-tag.component.ts
@@ -0,0 +1,59 @@
+// import { Component, OnInit, AfterViewInit, ViewChild, Input } from '@angular/core';
+// import { MatTableDataSource, MatSort, MatDialog } from '@angular/material';
+// import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
+// import { Router } from '@angular/router';
+// import { Sensor } from '../../model';
+
+// import { Store, select } from '@ngrx/store';
+
+// import * as SensorStore from '../../store';
+
+// import { RPCClientError } from '@loafer/ng-rpc/protocol';
+// import * as ListStore from '../../store/list';
+// import { sensorListSelector } from '../../store';
+// import { Page, PageParams } from 'app/commons/model';
+// import { Target } from 'packages/target/model';
+
+// @Component({
+//   selector: 'of-sensor-name-tag',
+//   templateUrl: './name-tag.component.html',
+//   styleUrls: ['./name-tag.component.scss']
+// })
+// export class NameTagComponent implements OnInit, AfterContentInit {
+
+//   sensorList$ = this.store.pipe(select(sensorListSelector.select('page')));
+//   sensors: Sensor[];
+//   @Input() target: Target;
+
+//   constructor(private router: Router,
+//     private store: Store<ListStore.State>,
+//     private dialog: MatDialog,
+//   ) { }
+
+//   ngOnInit() {
+//     this.sensorList$.subscribe(
+//       (page: Page) => {
+//         if (page != null) {
+//           this.sensors = page.content;
+//         }
+//       },
+//       (error: RPCClientError) => {
+//         console.log(error.response.message);
+//       }
+//     );
+//   }
+
+//   ngAfterContentInit() {
+//     this.getSensors(0);
+//   }
+
+//   getSensors(pageIndex: number) {
+//     const pageParams: PageParams = {
+//       pageNo: pageIndex + '',
+//       countPerPage: '9999',
+//       sortCol: 'id',
+//       sortDirection: 'descending'
+//     };
+//     this.store.dispatch(new ListStore.ReadAllByTarget({ target: this.target, pageParams }));
+//   }
+// }
diff --git a/src/packages/sensor/component/setting-result/setting-result.component.html b/src/packages/sensor/component/setting-result/setting-result.component.html
new file mode 100644
index 0000000..7cc9eeb
--- /dev/null
+++ b/src/packages/sensor/component/setting-result/setting-result.component.html
@@ -0,0 +1,90 @@
+<div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">
+
+    <mat-card class="example-card">
+        <mat-card-content>
+            <mat-form-field class="example-full-width" fxLayoutAlign="center">
+                <input matInput placeholder="Name" value="Sensor 000000">
+            </mat-form-field>
+            <div class="example-selected-value">주기 : {{selectInterval}} 초</div>
+            <mat-radio-group class="example-radio-group" [(ngModel)]="selectInterval">
+                <mat-radio-button class="example-radio-button" *ngFor="let interval of intervals" [value]="interval">
+                    {{interval}} 초
+                </mat-radio-button>
+            </mat-radio-group>
+
+        </mat-card-content>
+    </mat-card>
+
+    <mat-card class="example-card">
+        <mat-card-content>
+            <div>
+                IP : 192.168.1.209
+            </div>
+            <div>
+                MAC : 1111111111
+            </div>
+            <div>
+                OS : Windows 7
+            </div>
+            <div>
+                WMI Crawler
+            </div>
+
+        </mat-card-content>
+    </mat-card>
+
+
+</div>
+
+<div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">
+    <mat-card class="example-card2">
+        <mat-card-content>
+
+            <mat-grid-list cols="4" rowHeight="8:1" *ngFor="let sir of sensorItemResultList">
+                <mat-grid-tile>{{sir.sensorItemName}}</mat-grid-tile>
+                <mat-grid-tile>{{sir.sensorItemUnit}}</mat-grid-tile>
+                <mat-grid-tile>{{sir.sensorItemKey}}</mat-grid-tile>
+                <mat-grid-tile>
+                    <button mat-button>Save</button><button mat-button>Cancel</button>
+                </mat-grid-tile>
+            </mat-grid-list>
+
+            <!-- <mat-grid-list cols="4" rowHeight="8:1">
+                <mat-grid-tile>CPU Total Usage</mat-grid-tile>
+                <mat-grid-tile>(%)</mat-grid-tile>
+                <mat-grid-tile>wmi.cpu.usage.total</mat-grid-tile>
+                <mat-grid-tile><button mat-button>Save</button><button mat-button>Cancel</button></mat-grid-tile>
+            </mat-grid-list>
+            <mat-grid-list cols="1" rowHeight="8:1">
+                <mat-grid-tile>
+                    <mat-form-field class="example-full-width22">
+                        <input matInput placeholder="min" value="">
+                    </mat-form-field>
+                    &nbsp;&nbsp;&nbsp;
+                    <mat-form-field class="example-full-width22">
+                        <input matInput placeholder="max" value="">
+                    </mat-form-field>
+                    &nbsp;&nbsp;&nbsp;
+                    <mat-checkbox>local push</mat-checkbox>
+                    &nbsp;&nbsp;&nbsp;
+                    <mat-checkbox>email</mat-checkbox>
+                    &nbsp;&nbsp;&nbsp;
+                    <mat-checkbox>sms</mat-checkbox>
+                </mat-grid-tile>
+
+            </mat-grid-list>
+            <mat-grid-list cols="4" rowHeight="8:1">
+                <mat-grid-tile>CPU Free Usage</mat-grid-tile>
+                <mat-grid-tile>(kb)</mat-grid-tile>
+                <mat-grid-tile>wmi.cpu.usage.free</mat-grid-tile>
+                <mat-grid-tile><button mat-button>Add Notification</button></mat-grid-tile>
+            </mat-grid-list>
+            <mat-grid-list cols="4" rowHeight="8:1">
+                <mat-grid-tile>CPU Free Usage</mat-grid-tile>
+                <mat-grid-tile>(kb)</mat-grid-tile>
+                <mat-grid-tile>wmi.cpu.usage.free</mat-grid-tile>
+                <mat-grid-tile><button mat-button>Add Notification</button></mat-grid-tile>
+            </mat-grid-list> -->
+        </mat-card-content>
+    </mat-card>
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting-result/setting-result.component.scss b/src/packages/sensor/component/setting-result/setting-result.component.scss
new file mode 100644
index 0000000..25396dd
--- /dev/null
+++ b/src/packages/sensor/component/setting-result/setting-result.component.scss
@@ -0,0 +1,25 @@
+.example-card {
+  width: 400px;
+}
+
+.example-card2 {
+  width: 600px;
+}
+
+
+.example-radio-group {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.example-radio-button {
+  margin: 5px;
+}
+
+.example-selected-value {
+  margin: 15px 0;
+}
+
+.example-full-width22 {
+  width: 10%;
+}
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting-result/setting-result.component.spec.ts b/src/packages/sensor/component/setting-result/setting-result.component.spec.ts
new file mode 100644
index 0000000..4cfedb8
--- /dev/null
+++ b/src/packages/sensor/component/setting-result/setting-result.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingResultComponent } from './setting-result.component';
+
+describe('SettingResultComponent', () => {
+  let component: SettingResultComponent;
+  let fixture: ComponentFixture<SettingResultComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SettingResultComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingResultComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/setting-result/setting-result.component.ts b/src/packages/sensor/component/setting-result/setting-result.component.ts
new file mode 100644
index 0000000..0faee6e
--- /dev/null
+++ b/src/packages/sensor/component/setting-result/setting-result.component.ts
@@ -0,0 +1,71 @@
+import { Component, OnInit } from '@angular/core';
+import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
+import {FormsModule} from '@angular/forms';
+
+export class SensorItemResult {
+  id?: number;
+  sensorItemName?: String;
+  sensorItemUnit?: String;
+  sensorKeyName?: String;
+}
+
+
+@Component({
+  selector: 'of-sensor-setting-result',
+  templateUrl: './setting-result.component.html',
+  styleUrls: ['./setting-result.component.scss']
+})
+export class SettingResultComponent implements OnInit, AfterContentInit {
+
+  selectInterval: string;
+  sensorItemResultList: Array<SensorItemResult>;
+  optionList: Array<number>;
+
+  constructor() { }
+
+  intervals = [
+    '600',
+    '400',
+    '200',
+  ];
+
+  ngAfterContentInit() {
+
+    this.sensorItemResultList = new Array();
+    this.optionList = new Array();
+
+    const ctu: SensorItemResult = {
+      id: 1,
+      sensorItemName: 'CPU Total Usage',
+      sensorItemUnit: '%',
+      sensorKeyName: 'wmi.cpu.usage.total'
+    };
+
+    const cfu: SensorItemResult = {
+      id: 2,
+      sensorItemName: 'CPU Free Usage',
+      sensorItemUnit: 'kb',
+      sensorKeyName: 'wmi.cpu.usage.free'
+    };
+
+    const mtu: SensorItemResult = {
+      id: 3,
+      sensorItemName: 'Mem Total Usage',
+      sensorItemUnit: '%',
+      sensorKeyName: 'wmi.mem.usage.total'
+    };
+
+    this.sensorItemResultList.push(ctu);
+    this.sensorItemResultList.push(cfu);
+    this.sensorItemResultList.push(mtu);
+
+    for ( let indexI = 0; indexI < this.sensorItemResultList.length; ++indexI) {
+      this.optionList.push(this.sensorItemResultList[indexI].id);
+    }
+
+  }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html
new file mode 100644
index 0000000..3dd9c6c
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html
@@ -0,0 +1,31 @@
+<div>
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Step 3</mat-card-title>
+      <mat-card-subtitle>Crawler 인증</mat-card-subtitle>
+    </mat-card-header>
+
+    <mat-card-content *ngIf="inputItems">
+      <perfect-scrollbar style="height: 150px">
+        <div *ngFor="let inputItem of inputItems">
+          <mat-form-field>
+            <input *ngIf="inputItem.inputType.id == 1" matInput type="text" placeholder={{inputItem.name}} required={{inputItem.required}}>
+            <input *ngIf="inputItem.inputType.id == 2" matInput type="password" placeholder={{inputItem.name}} required={{inputItem.required}}>
+            <input *ngIf="inputItem.inputType.id == 3" matInput type="number" placeholder={{inputItem.name}} required={{inputItem.required}}>
+            <mat-select *ngIf="inputItem.inputType.id == 4" placeholder={{inputItem.name}}>
+              <mat-option value="true">Yes</mat-option>
+              <mat-option value="true">No</mat-option>
+            </mat-select>
+            <mat-select *ngIf="inputItem.inputType.id == 5" placeholder={{inputItem.name}}>
+              <mat-option *ngFor="let option of inputItem.keyValue.split('|')" value="option">{{option}}</mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div fxLayoutAlign="end" *ngIf="inputItems.length > 0">
+          <button mat-raised-button (click)="testConnect()" color="primary">Test</button>
+        </div>
+      </perfect-scrollbar>
+    </mat-card-content>
+  </mat-card>
+
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.scss b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.spec.ts b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.spec.ts
new file mode 100644
index 0000000..87f023d
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CrawlerAuthComponent } from './crawler-auth.component';
+
+describe('FilterComponent', () => {
+  let component: CrawlerAuthComponent;
+  let fixture: ComponentFixture<CrawlerAuthComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CrawlerAuthComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CrawlerAuthComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts
new file mode 100644
index 0000000..9be683e
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.ts
@@ -0,0 +1,67 @@
+import { Component, OnInit, Input, OnChanges, Output, EventEmitter } from '@angular/core';
+import { Router } from '@angular/router';
+import { MetaCrawler } from '../../../../meta/crawler/model/MetaCrawler';
+
+import { Store, select } from '@ngrx/store';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import * as ListStore from 'packages/meta/crawler-input-item/store/list';
+import { ReadCrawlerInputItemSelector } from 'packages/meta/crawler-input-item/store';
+import { MetaCrawlerInputItem } from 'packages/meta/crawler-input-item/model/MetaCrawlerInputItem';
+
+
+@Component({
+  selector: 'of-crawler-auth',
+  templateUrl: './crawler-auth.component.html',
+  styleUrls: ['./crawler-auth.component.scss']
+})
+export class CrawlerAuthComponent implements OnInit, OnChanges {
+
+  inputItems$ = this.listStore.pipe(select(ReadCrawlerInputItemSelector.select('inputs')));
+  inputItems: MetaCrawlerInputItem[];
+
+  @Output() testPassEvent = new EventEmitter<boolean>();
+
+  @Input() selectedCrawler: MetaCrawler;
+  constructor(
+    private router: Router,
+    private listStore: Store<ListStore.State>,
+  ) { }
+
+  ngOnInit() {
+    this.inputItems$.subscribe(
+      (list: MetaCrawlerInputItem[]) => {
+        if (list !== null) {
+          if (this.inputItems !== list) {
+            this.testPassEvent.emit(false);
+          }
+          this.inputItems = list;
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
+  }
+
+  ngOnChanges() {
+    this.getCrawlerAuthInputItems();
+  }
+
+  getCrawlerAuthInputItems() {
+    this.listStore.dispatch(new ListStore.ReadAll(this.selectedCrawler));
+}
+
+  testConnect() {
+    switch (this.selectedCrawler.id) {
+      case 1:
+        break;
+      case 2:
+        break;
+      case 3:
+        break;
+      default :
+        break;
+    }
+    this.testPassEvent.emit(true);
+  }
+}
diff --git a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html
new file mode 100644
index 0000000..89857f1
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html
@@ -0,0 +1,21 @@
+<div>
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Step 2</mat-card-title>
+      <mat-card-subtitle>Crawler 선택</mat-card-subtitle>
+    </mat-card-header>
+
+    <mat-card-content>
+      <perfect-scrollbar style="height: 150px">
+
+        <mat-radio-group class="radio-group">
+          <mat-radio-button class="radio-button" *ngFor="let crawler of crawlers" value={{crawler.id}} (change)="crawlerSelected(crawler)" [checked]="crawler.id === selectedCrawlerId">
+            {{crawler.name}}
+          </mat-radio-button>
+        </mat-radio-group>
+
+      </perfect-scrollbar>
+    </mat-card-content>
+  </mat-card>
+
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.scss b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.scss
new file mode 100644
index 0000000..5503c56
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.scss
@@ -0,0 +1,8 @@
+.radio-group {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.radio-button {
+  margin: 5px;
+}
diff --git a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.spec.ts b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.spec.ts
new file mode 100644
index 0000000..77251eb
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CrawlerSelectorComponent } from './crawler-selector.component';
+
+describe('FilterComponent', () => {
+  let component: CrawlerSelectorComponent;
+  let fixture: ComponentFixture<CrawlerSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CrawlerSelectorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CrawlerSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts
new file mode 100644
index 0000000..1c43caa
--- /dev/null
+++ b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.ts
@@ -0,0 +1,52 @@
+import { Component, OnInit, Input, OnChanges, AfterContentInit, Output, EventEmitter } from '@angular/core';
+import { Router } from '@angular/router';
+import { Target } from 'packages/target/model';
+
+import { Store, select } from '@ngrx/store';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+import * as ListStore from 'packages/meta/crawler/store/list';
+import { ReadAllCrawlerSelector } from 'packages/meta/crawler/store';
+import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
+
+
+@Component({
+  selector: 'of-crawler-selector',
+  templateUrl: './crawler-selector.component.html',
+  styleUrls: ['./crawler-selector.component.scss']
+})
+export class CrawlerSelectorComponent implements OnInit, OnChanges, AfterContentInit {
+
+  crawlers$ = this.listStore.pipe(select(ReadAllCrawlerSelector.select('metaCrawlerList')));
+  @Input() selectedTarget: Target;
+  crawlers: MetaCrawler[];
+  @Output() crawlerSelectEvent = new EventEmitter<MetaCrawler>();
+
+  constructor(
+    private router: Router,
+    private listStore: Store<ListStore.State>,
+  ) {}
+
+  ngOnInit() {
+    this.crawlers$.subscribe(
+      (list: MetaCrawler[]) => {
+        if (list !== null) {
+          this.crawlers = list;
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
+  }
+
+  ngAfterContentInit() {
+    this.listStore.dispatch(new ListStore.ReadAll());
+  }
+
+  ngOnChanges() {
+  }
+
+  crawlerSelected(crawler: MetaCrawler) {
+    this.crawlerSelectEvent.emit(crawler);
+  }
+}
diff --git a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html
new file mode 100644
index 0000000..de90f1c
--- /dev/null
+++ b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.html
@@ -0,0 +1,34 @@
+<div>
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Step 4</mat-card-title>
+      <mat-card-subtitle>Select Sensor Items</mat-card-subtitle>
+    </mat-card-header>
+
+    <mat-card-content>
+      <perfect-scrollbar style="height: 150px">
+
+        <tree-root #tree [focused]="true" [nodes]="nodes" (updateData)="onTreeDataLoad($event)">
+          <ng-template #treeNodeFullTemplate let-node let-index="index" let-templates="templates">
+            <div class="tree-node">
+              <tree-node-expander [node]="node" ></tree-node-expander>
+              <mat-checkbox [checked]="node.isActive" (change)="checkItem(node)"></mat-checkbox>
+              <div
+                class="node-content-wrapper"
+                [class.node-content-wrapper-active]="node.isActive"
+                [class.node-content-wrapper-focused]="node.isFocused"
+                (click)="checkItem(node)">
+                <mat-chip *ngIf="node.data.default" color="primary" (click)="checkItem(node)" >Recommend!</mat-chip>
+                <span [class]="node.data.className" [class.title]="true">{{ node.data.title }} {{node.data.key}}</span>
+
+              </div>
+              <tree-node-children [node]="node" [templates]="templates"></tree-node-children>
+            </div>
+          </ng-template>
+        </tree-root>
+        
+      </perfect-scrollbar>
+    </mat-card-content>
+  </mat-card>
+
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.scss b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.spec.ts b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.spec.ts
new file mode 100644
index 0000000..25e7477
--- /dev/null
+++ b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SensorItemSelectorComponent } from './sensor-item-selector.component';
+
+describe('SensorItemSelectorComponent', () => {
+  let component: SensorItemSelectorComponent;
+  let fixture: ComponentFixture<SensorItemSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SensorItemSelectorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SensorItemSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts
new file mode 100644
index 0000000..380307c
--- /dev/null
+++ b/src/packages/sensor/component/setting/sensor-item-selector/sensor-item-selector.component.ts
@@ -0,0 +1,104 @@
+import { Component, OnInit, OnChanges, Input, Output, EventEmitter, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
+import { Store, select } from '@ngrx/store';
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import * as ListStore from 'packages/meta/sensor-display-item/store/list';
+import { ReadAllSensorDisplayItemByCrawlerSelector } from 'packages/meta/sensor-display-item/store';
+import { MetaSensorDisplayItem } from 'packages/meta/sensor-display-item/model/MetaSensorDisplayItem';
+import { MetaCrawler } from '../../../../meta/crawler/model/MetaCrawler';
+import { ITreeOptions } from 'angular-tree-component';
+
+@Component({
+  selector: 'of-sensor-item-selector',
+  templateUrl: './sensor-item-selector.component.html',
+  styleUrls: ['./sensor-item-selector.component.scss']
+})
+export class SensorItemSelectorComponent implements OnInit, OnChanges {
+
+  @Input() selectedCrawler: MetaCrawler;
+  @Output() itemSelectEvent = new EventEmitter<Set<MetaSensorDisplayItem>>();
+  items$ = this.listStore.pipe(select(ReadAllSensorDisplayItemByCrawlerSelector.select('list')));
+  nodes;
+  checkedSet: Set<MetaSensorDisplayItem> = new Set();
+
+  constructor(
+    private router: Router,
+    private listStore: Store<ListStore.State>,
+  ) { }
+
+  ngOnInit() {
+    this.items$.subscribe(
+      (list: MetaSensorDisplayItem[]) => {
+        if (list !== null) {
+          this.generateTreeNode(list);
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
+  }
+
+  ngOnChanges() {
+    this.checkedSet.clear();
+    this.listStore.dispatch(new ListStore.ReadAllByCrawler(this.selectedCrawler));
+  }
+
+  generateTreeNode(list: MetaSensorDisplayItem[]) {
+    this.nodes = new Array();
+    for (const item of list) {
+      const categoryNode = this.existCategory(item);
+      if (categoryNode === null) {
+        const childrenNode = new Array();
+        childrenNode.push(this.getChildNode(item));
+        const node = {
+          title: item.itemType.name,
+          children: childrenNode,
+        };
+        this.nodes.push(node);
+      } else {
+        categoryNode.children.push(this.getChildNode(item));
+      }
+    }
+    this.itemSelectEvent.emit(this.checkedSet);
+  }
+
+  getChildNode(item) {
+    const childNode = {
+      title: item.displayName,
+      key: ' - ' + item.key,
+      default: item.default,
+      displayItem: item
+    };
+    return childNode;
+  }
+
+  existCategory(item: MetaSensorDisplayItem) {
+    let categoryNode = null;
+    for (const node of this.nodes) {
+      if (node.title === item.itemType.name) {
+        categoryNode = node;
+      }
+    }
+    return categoryNode;
+  }
+
+  checkItem(node) {
+    node.toggleActivated(true);
+    if (node.isActive) {
+      if (this.checkedSet.has(node.data.displayItem) === false) {
+        this.checkedSet.add(node.data.displayItem);
+      }
+    } else {
+      if (this.checkedSet.has(node.data.displayItem)) {
+        this.checkedSet.delete(node.data.displayItem);
+      }
+    }
+    this.itemSelectEvent.emit(this.checkedSet);
+  }
+
+  onTreeDataLoad(tree) {
+    tree.treeModel.expandAll();
+  }
+}
diff --git a/src/packages/sensor/component/setting/setting-etc/setting-etc.component.html b/src/packages/sensor/component/setting/setting-etc/setting-etc.component.html
new file mode 100644
index 0000000..819e4d3
--- /dev/null
+++ b/src/packages/sensor/component/setting/setting-etc/setting-etc.component.html
@@ -0,0 +1,56 @@
+<div>
+  <mat-grid-list cols="2" rowHeight="5:1">
+
+    <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightblue">
+      <div>
+        <div>
+          <mat-form-field hintLabel="Max 15 characters">
+            <input matInput #input maxlength="15" placeholder="Sensor Alias">
+            <mat-hint align="end">{{input.value?.length || 0}}/15</mat-hint>
+          </mat-form-field>
+        </div>
+        <div>
+          <div>Interval</div>
+          <mat-radio-group class="radio-group" [(ngModel)]="interval">
+            <mat-radio-button class="radio-button" *ngFor="let interval of intervals" [value]="interval">
+              {{interval}}
+            </mat-radio-button>
+          </mat-radio-group>
+        </div>
+      </div>
+    </mat-grid-tile>
+
+    <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightcoral">
+      <of-info-table [data]="targetInfo"></of-info-table>
+    </mat-grid-tile>
+
+    <mat-grid-tile [colspan]="2" [rowspan]="3" style="background-color: lightpink">
+
+      <!-- (change)="handleNotificationOn(item)" -->
+      <mat-list #items style="width: 70%">
+        <mat-list-item *ngFor="let item of selectedItems">
+          <h4 mat-line>{{item.displayName}}</h4>
+          <mat-slide-toggle [(ngModel)]="notiOn">[Notification]</mat-slide-toggle>
+          <!-- <p mat-line> {{item.key}} </p> -->
+          <h4 mat-line>
+            <!-- <div *ngIf="opened.indexOf(item.id) >= 0"> -->
+            <div *ngIf="notiOn">
+              <form>
+                <mat-form-field>
+                  <input matInput placeholder="Min" value="">
+                </mat-form-field>
+                ~
+                <mat-form-field>
+                  <input matInput placeholder="Max" value="">
+                </mat-form-field>
+              </form>
+            </div>
+          </h4>
+        </mat-list-item>
+      </mat-list>
+
+
+    </mat-grid-tile>
+  </mat-grid-list>
+
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/setting-etc/setting-etc.component.scss b/src/packages/sensor/component/setting/setting-etc/setting-etc.component.scss
new file mode 100644
index 0000000..97910d9
--- /dev/null
+++ b/src/packages/sensor/component/setting/setting-etc/setting-etc.component.scss
@@ -0,0 +1,9 @@
+.radio-group {
+    display: inline-flex;
+    flex-direction: column;
+  }
+  
+  .radio-button {
+    margin: 5px;
+  }
+  
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/setting-etc/setting-etc.component.spec.ts b/src/packages/sensor/component/setting/setting-etc/setting-etc.component.spec.ts
new file mode 100644
index 0000000..4f94006
--- /dev/null
+++ b/src/packages/sensor/component/setting/setting-etc/setting-etc.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingETCComponent } from './setting-etc.component';
+
+describe('SettingETCComponent', () => {
+  let component: SettingETCComponent;
+  let fixture: ComponentFixture<SettingETCComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SettingETCComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingETCComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/setting/setting-etc/setting-etc.component.ts b/src/packages/sensor/component/setting/setting-etc/setting-etc.component.ts
new file mode 100644
index 0000000..8b7c23f
--- /dev/null
+++ b/src/packages/sensor/component/setting/setting-etc/setting-etc.component.ts
@@ -0,0 +1,62 @@
+// import { Component, OnInit, Input } from '@angular/core';
+// import { Router } from '@angular/router';
+// import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
+// import { MetaSensorDisplayItem } from '../../../../meta/sensor-display-item/model/MetaSensorDisplayItem';
+// import { Target } from 'packages/target/model';
+// import { MatSnackBar } from '@angular/material';
+
+
+// @Component({
+//   selector: 'of-sensor-setting-etc',
+//   templateUrl: './setting-etc.component.html',
+//   styleUrls: ['./setting-etc.component.scss']
+// })
+// export class SettingETCComponent implements OnInit {
+
+//   @Input() selectedTarget: Target;
+//   @Input() selectedCrawler: MetaCrawler;
+//   @Input() selectedItems: MetaSensorDisplayItem[];
+
+//   intervals = [
+//     '600 sec',
+//     '400 sec',
+//     '200 sec',
+//   ];
+
+//   targetInfo;
+//   opened = [];
+
+//   constructor(
+//     private router: Router,
+//     private snackBar: MatSnackBar
+//   ) { }
+
+//   ngOnInit() {
+//     this.targetInfo = [
+//       {
+//         key: 'IP',
+//         value: 'todo',
+//       },
+//       {
+//         key: 'Mac Address',
+//         value: 'todo',
+//       },
+//       {
+//         key: 'OS',
+//         value: 'todo',
+//       },
+//       {
+//         key: 'Crawler',
+//         value: this.selectedCrawler ? this.selectedCrawler.name : '',
+//       },
+//     ];
+//   }
+
+//   onChange(e: any) {
+//     this.opened = e;
+//   }
+
+//   handleTitleClick(e: Event) {
+//     e.preventDefault();
+//   }
+// }
diff --git a/src/packages/sensor/component/setting/setting.component.html b/src/packages/sensor/component/setting/setting.component.html
new file mode 100644
index 0000000..6f9fbe8
--- /dev/null
+++ b/src/packages/sensor/component/setting/setting.component.html
@@ -0,0 +1,37 @@
+<div>
+  <div [hidden]="step !== 1">
+    <mat-grid-list cols="2" rowHeight="5:1">
+<!-- isAllSelectable === 0 ? 3 : 1 -->
+      <mat-grid-tile [colspan]="1" [rowspan]="isAllSelectable ? 3 : 2" style="background-color: lightblue" (click)="onAreaClick(0)">
+        <of-target-selector [target]="selectedTarget" (targetSelectEvent)="handleTargetSelection($event)" ></of-target-selector>
+      </mat-grid-tile>
+
+      <mat-grid-tile [colspan]="1" [rowspan]="2" style="background-color: lightcoral" (click)="onAreaClick(2)">
+        <of-crawler-auth [selectedCrawler]="selectedCrawler" (testPassEvent)="handleTest($event)"></of-crawler-auth>
+      </mat-grid-tile>
+
+      <mat-grid-tile [colspan]="1" [rowspan]="3" style="background-color: lightgrey" (click)="onAreaClick(3)">
+        <of-sensor-item-selector [selectedCrawler]="selectedCrawler" (itemSelectEvent)="handleItemSelection($event)"></of-sensor-item-selector>
+      </mat-grid-tile>
+
+      <mat-grid-tile [colspan]="1" [rowspan]="isAllSelectable ? 2 : 3" style="background-color: lightpink" (click)="onAreaClick(1)">
+        <of-crawler-selector [selectedTarget]="selectedTarget" (crawlerSelectEvent)="handleCrawlerSelection($event)"></of-crawler-selector>
+      </mat-grid-tile>
+
+    </mat-grid-list>
+  </div>
+
+  <div *ngIf="step === 2">
+    <of-sensor-setting-etc [selectedTarget]="selectedTarget" 
+    [selectedCrawler]="selectedCrawler"
+    [selectedItems]="selectedSensorDisplayItems"></of-sensor-setting-etc>
+  </div>
+
+  <div fxLayoutAlign="space-between stretch" [style.margin]="'5px'">
+    <button mat-raised-button mat-dialog-close *ngIf="step === 1">Cancel</button>
+    <button mat-raised-button *ngIf="step === 2" (click)="onPrev()">Prev</button>
+
+    <button mat-raised-button color="primary" (click)="onNext()" *ngIf="step === 1" [disabled]="!nextable">Next</button>
+    <button mat-raised-button color="primary" [mat-dialog-close]="true" *ngIf="step === 2">Done</button>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/setting.component.scss b/src/packages/sensor/component/setting/setting.component.scss
new file mode 100644
index 0000000..a0bf0ee
--- /dev/null
+++ b/src/packages/sensor/component/setting/setting.component.scss
@@ -0,0 +1,31 @@
+.example-card {
+  width: 400px;
+}
+
+.example-header-image {
+  background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
+  background-size: cover;
+}
+
+.example-radio-group {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.example-radio-button {
+  margin: 5px;
+}
+
+.example-selected-value {
+  margin: 15px 0;
+}
+
+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/setting.component.spec.ts b/src/packages/sensor/component/setting/setting.component.spec.ts
new file mode 100644
index 0000000..0f66542
--- /dev/null
+++ b/src/packages/sensor/component/setting/setting.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingComponent } from './setting.component';
+
+describe('SensorSettingComponent', () => {
+  let component: SettingComponent;
+  let fixture: ComponentFixture<SettingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SettingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/setting/setting.component.ts b/src/packages/sensor/component/setting/setting.component.ts
new file mode 100644
index 0000000..9ca5741
--- /dev/null
+++ b/src/packages/sensor/component/setting/setting.component.ts
@@ -0,0 +1,111 @@
+// import { Component, OnInit, Input, Inject, DoCheck } from '@angular/core';
+// import { Target } from '../../../target/model';
+// import { MAT_DIALOG_DATA, MatSnackBar } from '@angular/material';
+// import { Infra } from '../../../infra/model';
+// import { MetaCrawler } from '../../../meta/crawler/model/MetaCrawler';
+// import { MetaSensorDisplayItem } from '../../../meta/sensor-display-item/model/MetaSensorDisplayItem';
+
+// import { Store, select } from '@ngrx/store';
+// import { RPCClientError } from '@loafer/ng-rpc/protocol';
+// import * as SensorItemKeyListStore from 'packages/sensor-item/store/key-list';
+// import { ReadSensorItemKeySelector } from 'packages/sensor-item/store';
+// import { MetaSensorItemKey } from '../../../meta/sensor-item-key/model/MetaSensorItemKey';
+
+// @Component({
+//   selector: 'of-sensor-setting',
+//   templateUrl: './setting.component.html',
+//   styleUrls: ['./setting.component.scss']
+// })
+// export class SettingComponent implements OnInit, DoCheck {
+
+//   selectedTarget: Target = null;
+//   selectedCrawler: MetaCrawler = null;
+//   testPassed = false;
+//   selectedSensorDisplayItems: Set<MetaSensorDisplayItem> = null;
+//   step = 1;
+//   nextable = false;
+//   focus = 0;
+//   isAllSelectable = true;
+
+//   sensorItemKeys$ = this.keyListStore.pipe(select(ReadSensorItemKeySelector.select('list')));
+
+//   constructor(
+//     @Inject(MAT_DIALOG_DATA) public data: any,
+//     public snackBar: MatSnackBar,
+//     private keyListStore: Store<SensorItemKeyListStore.State>,
+//   ) {
+//     if (data !== null) {
+//       this.isAllSelectable = false;
+//       this.selectedTarget = data.infra.target;
+//     }
+//   }
+
+//   ngOnInit() {
+//     this.sensorItemKeys$.subscribe(
+//       (list: MetaSensorItemKey[]) => {
+//         if (list !== null) {
+//           console.log('#############################');
+//           console.log(list);
+//           console.log('#############################');
+//         }
+//       },
+//       (error: RPCClientError) => {
+//         console.log(error.response.message);
+//       }
+//     );
+//   }
+
+//   ngDoCheck() {
+//     if (
+//       this.selectedTarget === null ||
+//       this.selectedCrawler === null ||
+//       this.selectedSensorDisplayItems === null ||
+//       this.selectedSensorDisplayItems.size === 0 ||
+//       this.testPassed === false
+//     ) {
+//       this.nextable = false;
+//     } else {
+//       this.nextable = true;
+//     }
+//   }
+
+//   onNext() {
+//     this.step += 1;
+//   }
+
+//   onPrev() {
+//     this.step -= 1;
+//   }
+
+//   onDone() {
+//     this.openSnackBar('센서 등록해야되는데 아직 못함');
+//     // List<MetaSensorItemKey> SensorItemDependencyService.readAllByDisplayItem(MetaSensorDisplayItem displayItem)
+//     for (const displayItem of Array.from(this.selectedSensorDisplayItems)) {
+//       this.keyListStore.dispatch(new SensorItemKeyListStore.ReadAllByDisplayItem(displayItem));
+//     }
+//     // Sensor SensorService.registSensorConfig(Sensor sensor, List<SensorItem> sensorItemList, String etcJson)
+//   }
+
+//   openSnackBar(message: string) {
+//     this.snackBar.open(message, 'OK', {
+//       duration: 2000,
+//     });
+//   }
+
+//   handleTargetSelection(t: Target) {
+//     this.selectedTarget = t;
+//   }
+//   handleCrawlerSelection(c: MetaCrawler) {
+//     this.selectedCrawler = c;
+//   }
+//   handleItemSelection(itemSet: Set<MetaSensorDisplayItem>) {
+//     this.selectedSensorDisplayItems = itemSet;
+//   }
+//   handleTest(b: boolean) {
+//     this.testPassed = b;
+//   }
+
+//   onAreaClick(no: number) {
+//     this.focus = no;
+//   }
+// }
diff --git a/src/packages/sensor/component/setting/target-selector/target-selector.component.html b/src/packages/sensor/component/setting/target-selector/target-selector.component.html
new file mode 100644
index 0000000..21e11ad
--- /dev/null
+++ b/src/packages/sensor/component/setting/target-selector/target-selector.component.html
@@ -0,0 +1,21 @@
+<div style="width:100%">
+  <mat-card>
+    <mat-card-header>
+      <mat-card-title>Step 1</mat-card-title>
+      <mat-card-subtitle>Select Target</mat-card-subtitle>
+    </mat-card-header>
+
+    <mat-card-content>
+      <perfect-scrollbar style="height: 150px">
+
+        <mat-radio-group class="radio-group" >
+          <mat-radio-button class="radio-button" *ngFor="let t of targets" value={{t.id}} (change)="targetSelected(t)" [checked]="targets.length === 1 && t.id === target.id">
+            {{t.displayName}}
+          </mat-radio-button>
+        </mat-radio-group>
+
+      </perfect-scrollbar>
+    </mat-card-content>
+  </mat-card>
+
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/target-selector/target-selector.component.scss b/src/packages/sensor/component/setting/target-selector/target-selector.component.scss
new file mode 100644
index 0000000..5503c56
--- /dev/null
+++ b/src/packages/sensor/component/setting/target-selector/target-selector.component.scss
@@ -0,0 +1,8 @@
+.radio-group {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.radio-button {
+  margin: 5px;
+}
diff --git a/src/packages/sensor/component/setting/target-selector/target-selector.component.spec.ts b/src/packages/sensor/component/setting/target-selector/target-selector.component.spec.ts
new file mode 100644
index 0000000..c13ee67
--- /dev/null
+++ b/src/packages/sensor/component/setting/target-selector/target-selector.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TargetSelectorComponent } from './target-selector.component';
+
+describe('FilterComponent', () => {
+  let component: TargetSelectorComponent;
+  let fixture: ComponentFixture<TargetSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TargetSelectorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TargetSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/sensor/component/setting/target-selector/target-selector.component.ts b/src/packages/sensor/component/setting/target-selector/target-selector.component.ts
new file mode 100644
index 0000000..b467cb8
--- /dev/null
+++ b/src/packages/sensor/component/setting/target-selector/target-selector.component.ts
@@ -0,0 +1,78 @@
+// import { Component, OnInit, Output, EventEmitter, Input, AfterContentInit } from '@angular/core';
+// import { Router } from '@angular/router';
+// import { MatRadioButton } from '@angular/material';
+// import { Target } from 'packages/target/model';
+// import { RPCClientError } from '@loafer/ng-rpc/protocol';
+// import { Domain } from 'packages/domain/model';
+// import { AuthSelector } from 'packages/member/store';
+// import * as ListStore from 'packages/infra/store/list';
+// import { ListSelector } from 'packages/infra/store';
+// import { Store, select } from '@ngrx/store';
+// import { Page, PageParams } from 'app/commons/model';
+
+// @Component({
+//   selector: 'of-target-selector',
+//   templateUrl: './target-selector.component.html',
+//   styleUrls: ['./target-selector.component.scss']
+// })
+// export class TargetSelectorComponent implements OnInit {
+
+//   targets$ = this.store.pipe(select(ListSelector.select('page')));
+
+//   @Input() target: Target = null;
+//   @Output() targetSelectEvent = new EventEmitter<Target>();
+//   targets: Target[] = null;
+
+//   constructor(
+//     private router: Router,
+//     private store: Store<ListStore.State>
+//   ) { }
+
+//   ngOnInit() {
+//     this.targets = new Array();
+//     if (this.target === null) {
+//       this.getTargetList();
+//     } else {
+//       this.targets.push(this.target);
+//     }
+
+//     this.targets$.subscribe(
+//       (page: Page) => {
+//         if (page !== null) {
+//           this.convertInfraToTarget(page);
+//         }
+//       },
+//       (error: RPCClientError) => {
+//         console.log(error.response.message);
+//       }
+//     );
+//   }
+
+//   convertInfraToTarget(page: Page) {
+//     for (const infra of page.content) {
+//       this.targets.push(infra.target);
+//     }
+//   }
+
+//   getTargetList() {
+//     this.store.select(AuthSelector.select('domain')).subscribe(
+//       (domain: Domain) => {
+//         const pageParams: PageParams = {
+//           pageNo: '0',
+//           countPerPage: '9999',
+//           sortCol: 'id',
+//           sortDirection: 'descending'
+//         };
+//         this.store.dispatch(new ListStore.ReadAllByDomain({ domain, pageParams }));
+//       },
+//       (error) => {
+//         console.log(error);
+//       }
+//     );
+//   }
+
+//   targetSelected(t: Target) {
+//     this.targetSelectEvent.emit(t);
+//   }
+
+// }
diff --git a/src/packages/sensor/model/Sensor.ts b/src/packages/sensor/model/Sensor.ts
new file mode 100644
index 0000000..8f28d9d
--- /dev/null
+++ b/src/packages/sensor/model/Sensor.ts
@@ -0,0 +1,14 @@
+import { Target } from 'packages/target/model';
+import { MetaSensorStatus } from 'packages/meta/sensor-status/model/MetaSensorStatus';
+import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
+
+export interface Sensor {
+  id?: number;
+  createDate?: Date;
+  description?: string;
+  status?: MetaSensorStatus;
+  target?: Target;
+  crawler?: MetaCrawler;
+  crawlerInputItems?: string;
+  itemCount?: number;
+}
diff --git a/src/packages/sensor/model/SensorRegistInfo.ts b/src/packages/sensor/model/SensorRegistInfo.ts
new file mode 100644
index 0000000..b82bc9c
--- /dev/null
+++ b/src/packages/sensor/model/SensorRegistInfo.ts
@@ -0,0 +1,14 @@
+
+import { Infra } from 'packages/infra/model';
+import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
+import { MetaSensorDisplayItem } from 'packages/meta/sensor-display-item/model/MetaSensorDisplayItem';
+
+export interface SensorRegistInfo {
+  sensorItemMap: Map<number, Array<MetaSensorDisplayItem>>;
+  crawler: MetaCrawler;
+  // targetId: number;
+  interval: number;
+  // type: string;
+  infra: Infra;
+  crawlerAuth: string;
+}
diff --git a/src/packages/sensor/model/index.ts b/src/packages/sensor/model/index.ts
new file mode 100644
index 0000000..c814e10
--- /dev/null
+++ b/src/packages/sensor/model/index.ts
@@ -0,0 +1,2 @@
+export * from './Sensor';
+export * from './SensorRegistInfo';
diff --git a/src/packages/sensor/sensor-store.module.ts b/src/packages/sensor/sensor-store.module.ts
new file mode 100644
index 0000000..a977917
--- /dev/null
+++ b/src/packages/sensor/sensor-store.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import {
+  StoreRouterConnectingModule,
+  RouterStateSerializer,
+} from '@ngrx/router-store';
+import { EffectsModule } from '@ngrx/effects';
+import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
+
+import {
+  REDUCERS,
+  EFFECTS,
+} from './store';
+
+import { MODULE } from './sensor.constant';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(MODULE.name, REDUCERS),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class SensorStoreModule { }
diff --git a/src/packages/sensor/sensor.constant.ts b/src/packages/sensor/sensor.constant.ts
new file mode 100644
index 0000000..16657cf
--- /dev/null
+++ b/src/packages/sensor/sensor.constant.ts
@@ -0,0 +1,3 @@
+export const MODULE = {
+    name: 'Sensor'
+  };
diff --git a/src/packages/sensor/sensor.module.ts b/src/packages/sensor/sensor.module.ts
new file mode 100644
index 0000000..bcb51b2
--- /dev/null
+++ b/src/packages/sensor/sensor.module.ts
@@ -0,0 +1,47 @@
+// import { NgModule } from '@angular/core';
+// import { CommonModule } from '@angular/common';
+// import {FormsModule} from '@angular/forms';
+
+// import { MaterialModule } from 'packages/commons/material/material.module';
+
+// import { COMPONENTS } from './component';
+// import { SERVICES } from './service';
+// import { SensorStoreModule } from './sensor-store.module';
+// import { SettingComponent } from './component/setting/setting.component';
+// import { TreeModule } from 'angular-tree-component';
+// import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+// import { MetaCrawlerModule } from '../meta/crawler/crawler.module';
+// import { MetaCrawlerInputItemModule } from '../meta/crawler-input-item/crawler-input.module';
+// import { MetaSensorDisplayItemModule } from '../meta/sensor-display-item/sensor-display-item.module';
+// import { InfoTableModule } from '../commons/component/info-table/info-table.module';
+// import { SensorItemModule } from '../sensor-item/sensor-item.module';
+
+// @NgModule({
+//   imports: [
+//     CommonModule,
+//     MaterialModule,
+//     FormsModule,
+//     SensorStoreModule,
+//     TreeModule,
+//     InfoTableModule,
+//     PerfectScrollbarModule,
+//     MetaCrawlerModule,
+//     MetaCrawlerInputItemModule,
+//     MetaSensorDisplayItemModule,
+//     SensorItemModule
+//   ],
+//   declarations: [
+//     COMPONENTS,
+//   ],
+//   exports: [
+//     COMPONENTS,
+//   ],
+//   providers: [
+//     SERVICES,
+//   ],
+//   entryComponents: [
+//     SettingComponent
+//   ]
+// })
+// export class SensorModule { }
+
diff --git a/src/packages/sensor/service/index.ts b/src/packages/sensor/service/index.ts
new file mode 100644
index 0000000..f9663e9
--- /dev/null
+++ b/src/packages/sensor/service/index.ts
@@ -0,0 +1,5 @@
+import { SensorService } from './sensor.service';
+
+export const SERVICES = [
+    SensorService,
+];
diff --git a/src/packages/sensor/service/sensor.service.spec.ts b/src/packages/sensor/service/sensor.service.spec.ts
new file mode 100644
index 0000000..0090e8a
--- /dev/null
+++ b/src/packages/sensor/service/sensor.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { SensorService } from './sensor.service';
+
+describe('SensorService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SensorService]
+    });
+  });
+
+  it('should be created', inject([SensorService], (service: SensorService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/packages/sensor/service/sensor.service.ts b/src/packages/sensor/service/sensor.service.ts
new file mode 100644
index 0000000..15c41ab
--- /dev/null
+++ b/src/packages/sensor/service/sensor.service.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/map';
+
+import { RPCService } from '@loafer/ng-rpc/service';
+
+import { PageParams, Page } from 'app/commons/model';
+import { SensorItem } from 'packages/sensor-item/model/SensorItem';
+import { Sensor } from '../model';
+import { Domain } from 'packages/domain/model';
+import { Target } from 'packages/target/model';
+
+
+@Injectable()
+export class SensorService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  public readAllByDomain(domain: Domain, pageParams: PageParams): Observable<Page> {
+    return this.rpcService.call('SensorService.readAllByDomain', domain, pageParams);
+  }
+
+  public registSensorConfig(sensor: Sensor, sensorItems: SensorItem[]): Observable<Sensor> {
+    return this.rpcService.call('SensorService.registSensorConfig', sensor, sensorItems, null);
+  }
+
+  public readAllByInfra(infraId: string, pageParams: PageParams): Observable<Page> {
+    return this.rpcService.call('SensorService.readAllByInfra', infraId, pageParams);
+  }
+
+  public readAllByTarget(target: Target, pageParams: PageParams): Observable<Page> {
+    return this.rpcService.call('SensorService.readAllByTarget', target, pageParams);
+  }
+}
diff --git a/src/packages/sensor/store/index.ts b/src/packages/sensor/store/index.ts
new file mode 100644
index 0000000..69c4705
--- /dev/null
+++ b/src/packages/sensor/store/index.ts
@@ -0,0 +1,39 @@
+import {
+  createSelector,
+  createFeatureSelector,
+  ActionReducerMap,
+} from '@ngrx/store';
+
+import { StateSelector } from 'packages/core/ngrx/store';
+
+import { MODULE } from '../sensor.constant';
+
+import * as ListStore from './list';
+import * as RegistStore from './regist';
+
+export interface State {
+  list: ListStore.State;
+  sensor: RegistStore.State;
+}
+
+export const REDUCERS = {
+  list: ListStore.reducer,
+  sensor: RegistStore.reducer,
+};
+
+export const EFFECTS = [
+  ListStore.Effects,
+  RegistStore.Effects,
+];
+
+export const sensorState = createFeatureSelector<State>(MODULE.name);
+
+export const sensorListSelector = new StateSelector<ListStore.State>(createSelector(
+  sensorState,
+  (state: State) => state.list
+));
+export const sensorSelector = new StateSelector<RegistStore.State>(createSelector(
+  sensorState,
+  (state: State) => state.sensor
+));
+
diff --git a/src/packages/sensor/store/list/index.ts b/src/packages/sensor/store/list/index.ts
new file mode 100644
index 0000000..7fd86e0
--- /dev/null
+++ b/src/packages/sensor/store/list/index.ts
@@ -0,0 +1,4 @@
+export * from './list.action';
+export * from './list.effect';
+export * from './list.reducer';
+export * from './list.state';
diff --git a/src/packages/sensor/store/list/list.action.ts b/src/packages/sensor/store/list/list.action.ts
new file mode 100644
index 0000000..19edf3a
--- /dev/null
+++ b/src/packages/sensor/store/list/list.action.ts
@@ -0,0 +1,86 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Domain } from 'packages/domain/model';
+import { PageParams, Page } from 'app/commons/model';
+import { Target } from 'packages/target/model';
+
+export enum ActionType {
+  ReadAllByDomain = '[Sensor.ReadAllByDomain] ReadAllByDomain',
+  ReadAllByDomainSuccess = '[Sensor.ReadAllByDomainSuccess] ReadAllByDomainSuccess',
+  ReadAllByDomainFailure = '[Sensor.ReadAllByDomainFailure] ReadAllByDomainFailure',
+
+  ReadAllByInfra = '[Sensor.ReadAllByInfra] ReadAllByInfra',
+  ReadAllByInfraSuccess = '[Sensor.ReadAllByInfraSuccess] ReadAllByInfraSuccess',
+  ReadAllByInfraFailure = '[Sensor.ReadAllByInfraFailure] ReadAllByInfraFailure',
+
+  ReadAllByTarget = '[Sensor.ReadAllByTarget] ReadAllByTarget',
+  ReadAllByTargetSuccess = '[Sensor.ReadAllByTargetSuccess] ReadAllByTargetSuccess',
+  ReadAllByTargetFailure = '[Sensor.ReadAllByTargetFailure] ReadAllByTargetFailure',
+}
+
+export class ReadAllByDomain implements Action {
+  readonly type = ActionType.ReadAllByDomain;
+
+  constructor(public payload: { domain: Domain, pageParams: PageParams}) {}
+}
+
+export class ReadAllByDomainSuccess implements Action {
+  readonly type = ActionType.ReadAllByDomainSuccess;
+
+  constructor(public payload: Page) {}
+}
+
+export class ReadAllByDomainFailure implements Action {
+  readonly type = ActionType.ReadAllByDomainFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export class ReadAllByInfra implements Action {
+  readonly type = ActionType.ReadAllByInfra;
+
+  constructor(public payload: { id: string, pageParams: PageParams}) {}
+}
+
+export class ReadAllByInfraSuccess implements Action {
+  readonly type = ActionType.ReadAllByInfraSuccess;
+
+  constructor(public payload: Page) {}
+}
+
+export class ReadAllByInfraFailure implements Action {
+  readonly type = ActionType.ReadAllByInfraFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+//
+export class ReadAllByTarget implements Action {
+  readonly type = ActionType.ReadAllByTarget;
+
+  constructor(public payload: { target: Target, pageParams: PageParams}) {}
+}
+
+export class ReadAllByTargetSuccess implements Action {
+  readonly type = ActionType.ReadAllByTargetSuccess;
+
+  constructor(public payload: Page) {}
+}
+
+export class ReadAllByTargetFailure implements Action {
+  readonly type = ActionType.ReadAllByTargetFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+export type Actions =
+  | ReadAllByDomain
+  | ReadAllByDomainSuccess
+  | ReadAllByDomainFailure
+  | ReadAllByInfra
+  | ReadAllByInfraSuccess
+  | ReadAllByInfraFailure
+  | ReadAllByTarget
+  | ReadAllByTargetSuccess
+  | ReadAllByTargetFailure
+;
diff --git a/src/packages/sensor/store/list/list.effect.spec.ts b/src/packages/sensor/store/list/list.effect.spec.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/store/list/list.effect.ts b/src/packages/sensor/store/list/list.effect.ts
new file mode 100644
index 0000000..8f4c1e1
--- /dev/null
+++ b/src/packages/sensor/store/list/list.effect.ts
@@ -0,0 +1,78 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Sensor } from '../../model';
+import { SensorService } from '../../service/sensor.service';
+
+import {
+  ReadAllByDomain,
+  ReadAllByDomainSuccess,
+  ReadAllByDomainFailure,
+  ReadAllByInfra,
+  ReadAllByInfraSuccess,
+  ReadAllByInfraFailure,
+  ReadAllByTarget,
+  ReadAllByTargetSuccess,
+  ReadAllByTargetFailure,
+  ActionType,
+} from './list.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private service: SensorService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  readAllByDomain$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAllByDomain)
+    .map((action: ReadAllByDomain) => action.payload)
+    .switchMap(payload => this.service.readAllByDomain(payload.domain, payload.pageParams))
+    .map(list => {
+      return new ReadAllByDomainSuccess(list);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllByDomainFailure(error));
+    });
+
+  @Effect()
+  readAllByInfra$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAllByInfra)
+    .map((action: ReadAllByInfra) => action.payload)
+    .switchMap(payload => this.service.readAllByInfra(payload.id, payload.pageParams))
+    .map(list => {
+      return new ReadAllByInfraSuccess(list);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllByInfraFailure(error));
+    });
+
+  @Effect()
+  readAllByTarget$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAllByTarget)
+    .map((action: ReadAllByTarget) => action.payload)
+    .switchMap(payload => this.service.readAllByTarget(payload.target, payload.pageParams))
+    .map(list => {
+      return new ReadAllByTargetSuccess(list);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new ReadAllByTargetFailure(error));
+    });
+}
diff --git a/src/packages/sensor/store/list/list.reducer.ts b/src/packages/sensor/store/list/list.reducer.ts
new file mode 100644
index 0000000..1045be0
--- /dev/null
+++ b/src/packages/sensor/store/list/list.reducer.ts
@@ -0,0 +1,96 @@
+import {
+    Actions,
+    ActionType,
+  } from './list.action';
+
+  import {
+    State,
+    initialState,
+  } from './list.state';
+
+  import { Sensor } from '../../model';
+
+  export function reducer(state = initialState, action: Actions): State {
+    switch (action.type) {
+      case ActionType.ReadAllByDomain: {
+        return {
+          ...state,
+          error: null,
+          pending: true,
+        };
+      }
+
+      case ActionType.ReadAllByDomainSuccess: {
+        return {
+          ...state,
+          error: null,
+          pending: false,
+          page: action.payload
+        };
+      }
+
+      case ActionType.ReadAllByDomainFailure: {
+        return {
+          ...state,
+          error: action.payload,
+          pending: false,
+          page: null,
+        };
+      }
+
+      case ActionType.ReadAllByInfra: {
+        return {
+          ...state,
+          error: null,
+          pending: true,
+        };
+      }
+
+      case ActionType.ReadAllByInfraSuccess: {
+        return {
+          ...state,
+          error: null,
+          pending: false,
+          page: action.payload
+        };
+      }
+
+      case ActionType.ReadAllByInfraFailure: {
+        return {
+          ...state,
+          error: action.payload,
+          pending: false,
+          page: null,
+        };
+      }
+
+      case ActionType.ReadAllByTarget: {
+        return {
+          ...state,
+          error: null,
+          pending: true,
+        };
+      }
+
+      case ActionType.ReadAllByTargetSuccess: {
+        return {
+          ...state,
+          error: null,
+          pending: false,
+          page: action.payload
+        };
+      }
+
+      case ActionType.ReadAllByTargetFailure: {
+        return {
+          ...state,
+          error: action.payload,
+          pending: false,
+          page: null,
+        };
+      }
+      default: {
+        return state;
+      }
+    }
+  }
diff --git a/src/packages/sensor/store/list/list.state.ts b/src/packages/sensor/store/list/list.state.ts
new file mode 100644
index 0000000..2929796
--- /dev/null
+++ b/src/packages/sensor/store/list/list.state.ts
@@ -0,0 +1,15 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Page } from 'app/commons/model';
+
+export interface State {
+  error: RPCClientError | null;
+  pending: boolean;
+  page: Page | null;
+}
+
+export const initialState: State = {
+  error: null,
+  pending: false,
+  page: null,
+};
diff --git a/src/packages/sensor/store/regist/index.ts b/src/packages/sensor/store/regist/index.ts
new file mode 100644
index 0000000..f6da3fb
--- /dev/null
+++ b/src/packages/sensor/store/regist/index.ts
@@ -0,0 +1,4 @@
+export * from './regist.action';
+export * from './regist.effect';
+export * from './regist.reducer';
+export * from './regist.state';
diff --git a/src/packages/sensor/store/regist/regist.action.ts b/src/packages/sensor/store/regist/regist.action.ts
new file mode 100644
index 0000000..c246445
--- /dev/null
+++ b/src/packages/sensor/store/regist/regist.action.ts
@@ -0,0 +1,38 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Domain } from 'packages/domain/model';
+import { PageParams, Page } from 'app/commons/model';
+import { Sensor } from '../../model';
+import { SensorItem } from 'packages/sensor-item/model/SensorItem';
+
+export enum ActionType {
+  Regist = '[Sensor.Regist] Regist',
+  RegistSuccess = '[Sensor.RegistSuccess] RegistSuccess',
+  RegistFailure = '[Sensor.RegistFailure] RegistFailure',
+}
+
+export class Regist implements Action {
+  readonly type = ActionType.Regist;
+
+  constructor(public payload: { sensor: Sensor, sensorItems: SensorItem[]}) {}
+}
+
+export class RegistSuccess implements Action {
+  readonly type = ActionType.RegistSuccess;
+
+  constructor(public payload: Sensor) {}
+}
+
+export class RegistFailure implements Action {
+  readonly type = ActionType.RegistFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export type Actions =
+  | Regist
+  | RegistSuccess
+  | RegistFailure
+;
diff --git a/src/packages/sensor/store/regist/regist.effect.ts b/src/packages/sensor/store/regist/regist.effect.ts
new file mode 100644
index 0000000..340842f
--- /dev/null
+++ b/src/packages/sensor/store/regist/regist.effect.ts
@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Sensor } from '../../model';
+import { SensorService } from '../../service/sensor.service';
+
+import {
+  Regist,
+  RegistSuccess,
+  RegistFailure,
+  ActionType,
+} from './regist.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private service: SensorService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  regist$: Observable<Action> = this.actions$
+    .ofType(ActionType.Regist)
+    .map((action: Regist) => action.payload)
+    .switchMap(payload => this.service.registSensorConfig(payload.sensor, payload.sensorItems))
+    .map(list => {
+      return new RegistSuccess(list);
+    })
+    .catch((error: RPCClientError) => {
+      return of(new RegistFailure(error));
+    });
+
+}
diff --git a/src/packages/sensor/store/regist/regist.reducer.ts b/src/packages/sensor/store/regist/regist.reducer.ts
new file mode 100644
index 0000000..113965c
--- /dev/null
+++ b/src/packages/sensor/store/regist/regist.reducer.ts
@@ -0,0 +1,45 @@
+import {
+    Actions,
+    ActionType,
+  } from './regist.action';
+
+  import {
+    State,
+    initialState,
+  } from './regist.state';
+
+  import { Sensor } from '../../model';
+
+  export function reducer(state = initialState, action: Actions): State {
+    switch (action.type) {
+      case ActionType.Regist: {
+        return {
+          ...state,
+          error: null,
+          pending: true,
+        };
+      }
+
+      case ActionType.RegistSuccess: {
+        return {
+          ...state,
+          error: null,
+          pending: false,
+          sensor: action.payload
+        };
+      }
+
+      case ActionType.RegistFailure: {
+        return {
+          ...state,
+          error: action.payload,
+          pending: false,
+          sensor: null,
+        };
+      }
+
+      default: {
+        return state;
+      }
+    }
+  }
diff --git a/src/packages/sensor/store/regist/regist.state.ts b/src/packages/sensor/store/regist/regist.state.ts
new file mode 100644
index 0000000..f2edd69
--- /dev/null
+++ b/src/packages/sensor/store/regist/regist.state.ts
@@ -0,0 +1,16 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Page } from 'app/commons/model';
+import { Sensor } from '../../model';
+
+export interface State {
+  error: RPCClientError | null;
+  pending: boolean;
+  sensor: Sensor | null;
+}
+
+export const initialState: State = {
+  error: null,
+  pending: false,
+  sensor: null,
+};
diff --git a/src/packages/sensor/store/regist/regist.ts b/src/packages/sensor/store/regist/regist.ts
new file mode 100644
index 0000000..f6da3fb
--- /dev/null
+++ b/src/packages/sensor/store/regist/regist.ts
@@ -0,0 +1,4 @@
+export * from './regist.action';
+export * from './regist.effect';
+export * from './regist.reducer';
+export * from './regist.state';
diff --git a/src/packages/settings/member/component/index.ts b/src/packages/settings/member/component/index.ts
new file mode 100644
index 0000000..4710813
--- /dev/null
+++ b/src/packages/settings/member/component/index.ts
@@ -0,0 +1,5 @@
+import { TotpComponent } from './totp/totp.component';
+
+export const COMPONENTS = [
+  TotpComponent
+];
diff --git a/src/packages/settings/member/component/totp/totp.component.html b/src/packages/settings/member/component/totp/totp.component.html
new file mode 100644
index 0000000..755421c
--- /dev/null
+++ b/src/packages/settings/member/component/totp/totp.component.html
@@ -0,0 +1,39 @@
+
+<div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">
+  <div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">
+
+    <mat-card class="example-card">
+      <mat-card-header>
+        <mat-card-title>QR Code</mat-card-title>
+        <!--<mat-card-subtitle>Select Target</mat-card-subtitle>-->
+      </mat-card-header>
+      <mat-card-content>
+        <div fxLayout="row" fxLayoutWrap fxLayoutAlign="left">
+          <qrcode [qrdata]="'otpauth://totp/overFlow:geekdev@naver.com?secret=X6AWAK573M5372NM'" [size]="128" [level]="'M'"></qrcode>
+        </div>
+      </mat-card-content>
+    </mat-card>
+
+  </div>
+
+  <div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">
+
+    <mat-card class="example-card">
+      <mat-card-header>
+        <mat-card-title>Secret Code</mat-card-title>
+        <mat-card-subtitle>X6AWAK573M5372NM</mat-card-subtitle>
+      </mat-card-header>
+      <mat-card-content>
+        <form fxLayout="column" fxLayoutAlign="start stretch" [formGroup]="totpForm" (ngSubmit)="registClick()">
+          <mat-form-field class="full-width">
+            <input type="text" id="code" class="input" placeholder="Please enter your code"
+                   formControlName="code" required matInput>
+          </mat-form-field>
+          <!--<div *ngIf="formErrors.email" class="help is-danger">-->
+            <!--{{ formErrors.email }}-->
+          <!--</div>-->
+        </form>
+      </mat-card-content>
+    </mat-card>
+
+</div>
diff --git a/src/packages/settings/member/component/totp/totp.component.scss b/src/packages/settings/member/component/totp/totp.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/settings/member/component/totp/totp.component.spec.ts b/src/packages/settings/member/component/totp/totp.component.spec.ts
new file mode 100644
index 0000000..61cfca2
--- /dev/null
+++ b/src/packages/settings/member/component/totp/totp.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TotpComponent } from './totp.component';
+
+describe('TotpComponent', () => {
+  let component: TotpComponent;
+  let fixture: ComponentFixture<TotpComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TotpComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TotpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/settings/member/component/totp/totp.component.ts b/src/packages/settings/member/component/totp/totp.component.ts
new file mode 100644
index 0000000..98adae1
--- /dev/null
+++ b/src/packages/settings/member/component/totp/totp.component.ts
@@ -0,0 +1,93 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import * as TotpStore from '../../store/totp';
+import { Store, select } from '@ngrx/store';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+import { AuthSelector } from 'packages/member/store';
+
+
+import { TotpSelector } from '../../store';
+import { Member } from 'packages/member/model/Member';
+
+@Component({
+  selector: 'of-totp',
+  templateUrl: './totp.component.html',
+  styleUrls: ['./totp.component.scss']
+})
+export class TotpComponent implements OnInit {
+  pending$ = this.store.pipe(select(TotpSelector.select('pending')));
+  error$ = this.store.pipe(select(TotpSelector.select('error')));
+
+  errorMessage: string | null;
+  totpForm: FormGroup;
+  formErrors = {
+    'code': '',
+  };
+  constructor(private activatedRoute: ActivatedRoute,
+              private router: Router,
+              private store: Store<TotpStore.State>,
+              private formBuilder: FormBuilder,
+              ) { }
+
+  ngOnInit() {
+    this.totpForm = this.formBuilder.group({
+      'code': [
+        [
+        ]
+      ]
+    })
+    this.pending$.subscribe((pending: boolean) => {
+      if (pending) {
+        this.totpForm.disable();
+      } else {
+        this.totpForm.enable();
+      }
+    });
+
+    this.error$.subscribe((error) => {
+      if (error) {
+        this.errorMessage = error.exception;
+      } else {
+        this.errorMessage = null;
+      }
+    });
+  }
+
+  // ngAfterContentInit() {
+  //
+  //   this.listStore.select(AuthSelector.select('member')).subscribe(
+  //     (member: Member) => {
+  //       this.store.dispatch(new TotpRegistStore.createTotp(member));
+  //     },
+  //     (error) => {
+  //       console.log(error);
+  //     }
+  //   );
+  //
+  //   this.probes$.subscribe(
+  //     (probes: boo) => {
+  //       console.log(probes);
+  //       this.dataSource = new MatTableDataSource(probes);
+  //       this.dataSource.sort = this.sort;
+  //     },
+  //     (error: RPCError) => {
+  //       console.log(error.response.message);
+  //     }
+  //   );
+  //
+  // }
+  registClick() {
+    const code = this.totpForm.value['code'];
+    const secretCode = 'X6AWAK573M5372NM';
+
+    this.store.select(AuthSelector.select('member')).subscribe(
+      (member: Member) => {
+        this.store.dispatch(new TotpStore.Regist({ member, secretCode, code }));
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
+}
diff --git a/src/packages/settings/member/member-totp-store.module.ts b/src/packages/settings/member/member-totp-store.module.ts
new file mode 100644
index 0000000..aa83d9e
--- /dev/null
+++ b/src/packages/settings/member/member-totp-store.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import {
+  StoreRouterConnectingModule,
+  RouterStateSerializer,
+} from '@ngrx/router-store';
+import { EffectsModule } from '@ngrx/effects';
+import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
+
+import {
+  REDUCERS,
+  EFFECTS,
+} from './store';
+
+import { MODULE } from './member-totp.constant';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(MODULE.name, REDUCERS),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class MemberTotpStoreModule { }
diff --git a/src/packages/settings/member/member-totp.constant.ts b/src/packages/settings/member/member-totp.constant.ts
new file mode 100644
index 0000000..f0800c0
--- /dev/null
+++ b/src/packages/settings/member/member-totp.constant.ts
@@ -0,0 +1,3 @@
+export const MODULE = {
+  name: 'member-totp'
+};
diff --git a/src/packages/settings/member/member-totp.module.ts b/src/packages/settings/member/member-totp.module.ts
new file mode 100644
index 0000000..6d854fc
--- /dev/null
+++ b/src/packages/settings/member/member-totp.module.ts
@@ -0,0 +1,32 @@
+// import { NgModule } from '@angular/core';
+// import { CommonModule } from '@angular/common';
+// import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+
+// import { MaterialModule } from 'packages/commons/material/material.module';
+// import { QRCodeModule } from 'angularx-qrcode';
+
+// import { COMPONENTS } from './component';
+// import { SERVICES } from '../../settings/member/service';
+// import { MemberTotpStoreModule } from './member-totp-store.module';
+
+// @NgModule({
+//   imports: [
+//     CommonModule,
+//     FormsModule,
+//     MaterialModule,
+//     FormsModule,
+//     ReactiveFormsModule,
+//     QRCodeModule,
+//     MemberTotpStoreModule
+//   ],
+//   exports: [
+//     COMPONENTS,
+//   ],
+//   declarations: [
+//     COMPONENTS,
+//   ],
+//   providers: [
+//     SERVICES,
+//   ],
+// })
+// export class MemberTotpModule { }
diff --git a/src/packages/settings/member/model/MemberTotp.ts b/src/packages/settings/member/model/MemberTotp.ts
new file mode 100644
index 0000000..820590a
--- /dev/null
+++ b/src/packages/settings/member/model/MemberTotp.ts
@@ -0,0 +1,10 @@
+import { Member } from 'packages/member/model';
+
+export interface MemberTotp {
+  id?: number;
+  member: Member;
+  secretCode?: string;
+  createDate?: Date;
+  updateDate?: Date;
+  otpAuthUrl?: string;
+}
diff --git a/src/packages/settings/member/model/index.ts b/src/packages/settings/member/model/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/settings/member/service/index.ts b/src/packages/settings/member/service/index.ts
new file mode 100644
index 0000000..4a051ca
--- /dev/null
+++ b/src/packages/settings/member/service/index.ts
@@ -0,0 +1,5 @@
+import { MemberTotpService } from './member-totp.service';
+
+export const SERVICES = [
+  MemberTotpService,
+];
diff --git a/src/packages/settings/member/service/member-totp.service.spec.ts b/src/packages/settings/member/service/member-totp.service.spec.ts
new file mode 100644
index 0000000..a8305ef
--- /dev/null
+++ b/src/packages/settings/member/service/member-totp.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MemberTotpService } from './member-totp.service';
+
+describe('MemberTotpService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MemberTotpService]
+    });
+  });
+
+  it('should be created', inject([MemberTotpService], (service: MemberTotpService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/packages/settings/member/service/member-totp.service.ts b/src/packages/settings/member/service/member-totp.service.ts
new file mode 100644
index 0000000..504ca48
--- /dev/null
+++ b/src/packages/settings/member/service/member-totp.service.ts
@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { RPCService } from '@loafer/ng-rpc/service';
+import { Observable } from 'rxjs/Observable';
+import { MemberTotp } from '../model/MemberTotp';
+import { Member } from '../../../member/model';
+
+@Injectable()
+export class MemberTotpService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  public createTotp(member: Member): Observable<MemberTotp[]> {
+    // Todo Store get member object
+
+    return this.rpcService.call<MemberTotp[]>('MemberTotpService.createTotp', {Member: member});
+  }
+
+  public regist(member: Member, secretCode: string, code: string): Observable<boolean> {
+    // const param = {
+    //   Member: {id: 1, },
+    //   MemberTotp: {id: 1, secretCode: 'dkdkdkdk'},
+    //   code: '123123'
+    // };
+    return this.rpcService.call<boolean>('MemberTotpService.regist', member, secretCode, code);
+  }
+
+  public checkCodeForMember(member: Member, code: string): Observable<boolean> {
+    return this.rpcService.call<boolean>('MemberTotpService.checkCodeForMember', member, code);
+  }
+}
diff --git a/src/packages/settings/member/store/index.ts b/src/packages/settings/member/store/index.ts
new file mode 100644
index 0000000..2a0dcbd
--- /dev/null
+++ b/src/packages/settings/member/store/index.ts
@@ -0,0 +1,31 @@
+import {
+  createSelector,
+  createFeatureSelector,
+  ActionReducerMap,
+} from '@ngrx/store';
+
+import { StateSelector } from 'packages/core/ngrx/store';
+
+import { MODULE } from '../member-totp.constant';
+
+import * as TotpStore from './totp';
+
+export interface State {
+  totp: TotpStore.State;
+}
+
+export const REDUCERS = {
+  totp: TotpStore.reducer,
+};
+
+export const EFFECTS = [
+  TotpStore.Effects,
+];
+
+export const selectMemberTotpState = createFeatureSelector<State>(MODULE.name);
+
+export const TotpSelector = new StateSelector<TotpStore.State>(createSelector(
+  selectMemberTotpState,
+  (state: State) => state.totp
+));
+
diff --git a/src/packages/settings/member/store/totp/index.ts b/src/packages/settings/member/store/totp/index.ts
new file mode 100644
index 0000000..d32dabd
--- /dev/null
+++ b/src/packages/settings/member/store/totp/index.ts
@@ -0,0 +1,4 @@
+export * from './totp.action';
+export * from './totp.effect';
+export * from './totp.reducer';
+export * from './totp.state';
diff --git a/src/packages/settings/member/store/totp/totp.action.ts b/src/packages/settings/member/store/totp/totp.action.ts
new file mode 100644
index 0000000..4e84c6d
--- /dev/null
+++ b/src/packages/settings/member/store/totp/totp.action.ts
@@ -0,0 +1,89 @@
+import { Action } from '@ngrx/store';
+
+import { RESTClientError } from '@loafer/ng-rest/protocol';
+
+import { Member } from '../../../../member/model';
+
+export enum ActionType {
+  CreateTotp                = '[member.totp] CreateTotp',
+  CreateTotpSuccess         = '[member.totp] CreateTotpSuccess',
+  CreateTotpFailure         = '[member.totp] CreateTotpFailure',
+
+  Regist                    = '[member.totp] Regist',
+  RegistSuccess             = '[member.totp] RegistSuccess',
+  RegistFailure             = '[member.totp] RegistFailure',
+
+  CheckCodeForMember        = '[member.totp] CheckCodeForMember',
+  CheckCodeForMemberSuccess = '[member.totp] CheckCodeForMemberSuccess',
+  CheckCodeForMemberFailure = '[member.totp] CheckCodeForMemberFailure',
+}
+
+export class CreateTotp implements Action {
+  readonly type = ActionType.CreateTotp;
+
+  constructor(public payload: {member: Member}) {}
+}
+
+export class CreateTotpSuccess implements Action {
+  readonly type = ActionType.CreateTotpSuccess;
+
+  constructor(public payload: {key: string, uri: string}) {}
+}
+
+export class CreateTotpFailure implements Action {
+  readonly type = ActionType.CreateTotpFailure;
+
+  constructor(public payload: RESTClientError) {}
+}
+
+// ----------------------------------------------------------------------------------------
+
+export class Regist implements Action {
+  readonly type = ActionType.Regist;
+
+  constructor(public payload: {member: Member, secretCode: string, code: string}) {}
+}
+
+export class RegistSuccess implements Action {
+  readonly type = ActionType.RegistSuccess;
+
+  constructor(public payload: void) {}
+}
+
+export class RegistFailure implements Action {
+  readonly type = ActionType.RegistFailure;
+
+  constructor(public payload: RESTClientError) {}
+}
+
+// ----------------------------------------------------------------------------------------
+
+export class CheckCodeForMember implements Action {
+  readonly type = ActionType.CheckCodeForMember;
+
+  constructor(public payload: {member: Member, code: string}) {}
+}
+
+export class CheckCodeForMemberSuccess implements Action {
+  readonly type = ActionType.CheckCodeForMemberSuccess;
+
+  constructor(public payload: void) {}
+}
+
+export class CheckCodeForMemberFailure implements Action {
+  readonly type = ActionType.CheckCodeForMemberFailure;
+
+  constructor(public payload: RESTClientError) {}
+}
+
+export type Actions =
+  | CreateTotp
+  | CreateTotpSuccess
+  | CreateTotpFailure
+  | Regist
+  | RegistSuccess
+  | RegistFailure
+  | CheckCodeForMember
+  | CheckCodeForMemberSuccess
+  | CheckCodeForMemberFailure
+  ;
diff --git a/src/packages/settings/member/store/totp/totp.effect.spec.ts b/src/packages/settings/member/store/totp/totp.effect.spec.ts
new file mode 100644
index 0000000..30746b8
--- /dev/null
+++ b/src/packages/settings/member/store/totp/totp.effect.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './totp.effect';
+
+describe('ProbeList.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});
diff --git a/src/packages/settings/member/store/totp/totp.effect.ts b/src/packages/settings/member/store/totp/totp.effect.ts
new file mode 100644
index 0000000..97bb46d
--- /dev/null
+++ b/src/packages/settings/member/store/totp/totp.effect.ts
@@ -0,0 +1,93 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { RESTClientError } from '@loafer/ng-rest/protocol';
+import { MemberTotpService } from '../../service/member-totp.service';
+
+import {
+  CreateTotp,
+  CreateTotpSuccess,
+  CreateTotpFailure,
+
+  Regist,
+  RegistSuccess,
+  RegistFailure,
+
+  CheckCodeForMember,
+  CheckCodeForMemberSuccess,
+  CheckCodeForMemberFailure,
+
+  ActionType,
+} from './totp.action';
+
+@Injectable()
+export class Effects {
+  private _returnURL: any;
+
+  constructor(
+    private actions$: Actions,
+    private memberTotpService: MemberTotpService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  createTotp$: Observable<Action> = this.actions$
+    .ofType(ActionType.CreateTotp)
+    .map((action: CreateTotp) => action.payload)
+    .switchMap(payload => {
+      // this._returnURL = payload.returnURL;
+      return this.memberTotpService.createTotp(payload.member);
+    })
+    .map((result: any) => {
+      const key = result['key'];
+      const uri = result['uri'];
+      return new CreateTotpSuccess({key: key, uri: uri});
+    })
+    .catch((error: RESTClientError) => {
+      return of(new CreateTotpFailure(error));
+    });
+
+  @Effect()
+  regist: Observable<Action> = this.actions$
+    .ofType(ActionType.Regist)
+    .map((action: Regist) => action.payload)
+    .switchMap((payload) => {
+      // this._returnURL = payload.returnURL;
+      return this.memberTotpService.regist(payload.member, payload.secretCode, payload.code);
+    })
+    .map((result: any) => {
+      return new RegistSuccess(result);
+    })
+    .catch((error: RESTClientError) => {
+      return of(new RegistFailure(error));
+    });
+
+
+  @Effect()
+  checkCodeForMember: Observable<Action> = this.actions$
+    .ofType(ActionType.CheckCodeForMember)
+    .map((action: Regist) => action.payload)
+    .switchMap((payload) => {
+      // this._returnURL = payload.returnURL;
+      return this.memberTotpService.checkCodeForMember(payload.member, payload.code);
+    })
+    .map((result: any) => {
+      return new CheckCodeForMemberSuccess(result);
+    })
+    .catch((error: RESTClientError) => {
+      return of(new CheckCodeForMemberFailure(error));
+    });
+}
diff --git a/src/packages/settings/member/store/totp/totp.reducer.ts b/src/packages/settings/member/store/totp/totp.reducer.ts
new file mode 100644
index 0000000..9df9ace
--- /dev/null
+++ b/src/packages/settings/member/store/totp/totp.reducer.ts
@@ -0,0 +1,71 @@
+import {
+  Actions,
+  ActionType,
+} from './totp.action';
+
+import {
+  State,
+  initialState,
+} from './totp.state';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.CreateTotp: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.CreateTotpSuccess: {
+      const secretKey = action.payload.key;
+      const keyURI = action.payload.uri;
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        secretKey: secretKey,
+        keyURI: keyURI,
+      };
+    }
+
+    case ActionType.CreateTotpFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        secretKey: null,
+        keyURI: null,
+      };
+    }
+
+    case ActionType.Regist: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.RegistSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+      };
+    }
+
+    case ActionType.RegistFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
diff --git a/src/packages/settings/member/store/totp/totp.state.ts b/src/packages/settings/member/store/totp/totp.state.ts
new file mode 100644
index 0000000..86d95ec
--- /dev/null
+++ b/src/packages/settings/member/store/totp/totp.state.ts
@@ -0,0 +1,15 @@
+import { RESTClientError } from '@loafer/ng-rest/protocol';
+
+export interface State {
+  secretKey: string;
+  keyURI: string;
+  error: RESTClientError | null;
+  pending: boolean;
+}
+
+export const initialState: State = {
+  secretKey: null,
+  keyURI: null,
+  error: null,
+  pending: false,
+};
diff --git a/src/packages/target/component/detail/detail.component.html b/src/packages/target/component/detail/detail.component.html
new file mode 100644
index 0000000..1f785a3
--- /dev/null
+++ b/src/packages/target/component/detail/detail.component.html
@@ -0,0 +1,59 @@
+<div fxLayout="column" fxLayoutWrap style=" padding: 8px;">
+
+
+
+  <div fxLayout="column" fxLayout.xs="column" style="background-color: white;padding: 10px;">
+
+    <div class="mat-headline" style="margin: 20px; border-bottom: 1px solid #dddddd;">
+      TARGET ALIAS
+    </div>
+
+    <div fxLayoutAlign="end">
+      <button mat-raised-button (click)="handleCheckAlive">Check Alive</button>
+      <button mat-raised-button (click)="handleTraceroute">Traceroute</button>
+    </div>
+
+    <div fxLayout="row">
+
+      <div fxFlex="20" fxFlex.lt-sm="20" fxFlex.sm="20">
+        <of-info-table [data]="basicInfo"></of-info-table>
+      </div>
+      <div fxFlex="20" fxFlex.lt-sm="20" fxFlex.sm="20">
+        <of-info-table [data]="metaInfo"></of-info-table>
+      </div>
+
+
+      <div fxFlex="60" fxFlex.lt-sm="60" fxFlex.sm="60">
+        <div>
+          <!-- Sensors  -->
+          <h3 matLine>Sensors</h3>
+          <mat-table #table [dataSource]="sensors">
+
+            <ng-container matColumnDef="crawler">
+              <mat-header-cell *matHeaderCellDef> SensorType </mat-header-cell>
+              <mat-cell *matCellDef="let element"> {{element.crawler.name}} </mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="itemCnt">
+              <mat-header-cell *matHeaderCellDef> Items </mat-header-cell>
+              <mat-cell *matCellDef="let element"> {{element.itemCount}} items </mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="status">
+              <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
+              <mat-cell *matCellDef="let element"> {{element.status.name}} </mat-cell>
+            </ng-container>
+
+            <!-- <mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row> -->
+            <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleSensorClick(row)"></mat-row>
+          </mat-table>
+
+          <mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]">
+          </mat-paginator>
+
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/packages/target/component/detail/detail.component.scss b/src/packages/target/component/detail/detail.component.scss
new file mode 100644
index 0000000..6cbe979
--- /dev/null
+++ b/src/packages/target/component/detail/detail.component.scss
@@ -0,0 +1,37 @@
+.table {
+    width: 100%;
+    max-width: 100%;
+    border-collapse: collapse;
+}
+.table tr:first-child td {
+    border-top: none;
+}
+
+.text-right {
+	text-align: right;
+}
+
+th, td {
+    padding: 8px;
+    text-align: left;
+    border-top: 1px solid #ddd;
+}
+.nav-item {
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  cursor: default;
+
+  &:hover {
+    transform: translate(0, -8px);
+    box-shadow: 0 20px 20px rgba(0, 0, 0, .16)
+  }
+}
+.example-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+  }
+  
+  .mat-table {
+    overflow: auto;
+    max-height: 500px;
+  }
diff --git a/src/packages/target/component/detail/detail.component.spec.ts b/src/packages/target/component/detail/detail.component.spec.ts
new file mode 100644
index 0000000..149b9be
--- /dev/null
+++ b/src/packages/target/component/detail/detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailComponent } from './detail.component';
+
+describe('DetailComponent', () => {
+  let component: DetailComponent;
+  let fixture: ComponentFixture<DetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/target/component/detail/detail.component.ts b/src/packages/target/component/detail/detail.component.ts
new file mode 100644
index 0000000..afe15c8
--- /dev/null
+++ b/src/packages/target/component/detail/detail.component.ts
@@ -0,0 +1,103 @@
+// import { Component, ViewChild, OnInit, Input, AfterContentInit, AfterViewInit } from '@angular/core';
+// import { MatPaginator, MatTableDataSource } from '@angular/material';
+// import { Router } from '@angular/router';
+
+// import { Sensor } from 'packages/sensor/model';
+
+// @Component({
+//   selector: 'of-target-detail',
+//   templateUrl: './detail.component.html',
+//   styleUrls: ['./detail.component.scss']
+// })
+// export class DetailComponent implements OnInit, AfterViewInit, AfterContentInit {
+
+//   displayedColumns = ['crawler', 'itemCnt', 'status'];
+//   sensors: MatTableDataSource<Sensor> = null;
+//   @ViewChild(MatPaginator) paginator: MatPaginator;
+
+//   basicInfo = [
+//     {
+//       key: 'IP',
+//       value: '192.168.1.105',
+//     },
+//     {
+//       key: 'Mac',
+//       value: 'aaaaaaaaaaaaa',
+//     },
+//     {
+//       key: 'OS',
+//       value: 'Ubuntu',
+//     },
+//     {
+//       key: 'Port',
+//       value: '80',
+//     },
+//   ];
+//   metaInfo = [
+//     {
+//       key: 'Meta1',
+//       value: 'value1',
+//     },
+//     {
+//       key: 'Meta2',
+//       value: 'value2',
+//     },
+//     {
+//       key: 'Meta3',
+//       value: 'value3',
+//     },
+//     {
+//       key: 'Meta4',
+//       value: 'value4',
+//     },
+//   ];
+
+//   constructor(private router: Router) { }
+
+//   ngOnInit() {
+//   }
+
+//   ngAfterViewInit() {
+//     this.sensors.paginator = this.paginator;
+//   }
+
+//   ngAfterContentInit() {
+//     const temporaryData: Sensor[] = [
+//       {
+//         id: 0,
+//         crawler: {
+//           id: 0,
+//           name: 'WMI',
+//         },
+//         status: {
+//           id: 0,
+//           name: 'UP'
+//         },
+//         itemCount: 5,
+//       },
+//       {
+//         id: 1,
+//         crawler: {
+//           id: 0,
+//           name: 'SSH',
+//         },
+//         status: {
+//           id: 0,
+//           name: 'UP'
+//         },
+//         itemCount: 5,
+//       },
+//     ];
+//     this.sensors = new MatTableDataSource<any>(temporaryData);
+//   }
+
+//   handleSensorClick(sensor: Sensor) {
+//     this.router.navigate(['sensor', sensor.id]);
+//   }
+
+//   handleCheckAlive() {
+//   }
+
+//   handleTraceroute() {
+//   }
+// }
diff --git a/src/packages/target/component/index.ts b/src/packages/target/component/index.ts
new file mode 100644
index 0000000..da24f7d
--- /dev/null
+++ b/src/packages/target/component/index.ts
@@ -0,0 +1,9 @@
+// import { DetailComponent } from './detail/detail.component';
+// import { ListComponent } from './list/list.component';
+// import { FilterComponent } from './list/filter/filter.component';
+
+// export const COMPONENTS = [
+//   ListComponent,
+//   DetailComponent,
+//   FilterComponent
+// ];
diff --git a/src/packages/target/component/list/filter/filter.component.html b/src/packages/target/component/list/filter/filter.component.html
new file mode 100644
index 0000000..586dd09
--- /dev/null
+++ b/src/packages/target/component/list/filter/filter.component.html
@@ -0,0 +1,19 @@
+<div >
+  <mat-form-field class="example-full-width">
+    <input matInput placeholder='IP or Application Name' value=''>
+  </mat-form-field>
+</div>
+<div [style.margin]="'30px 0px'">
+  <mat-radio-group class="radio-group" >
+      <mat-radio-button class="radio-button" value="0">All</mat-radio-button>
+      <mat-radio-button class="radio-button" value="1">Active</mat-radio-button>
+      <mat-radio-button class="radio-button" value="2">Inactive</mat-radio-button>
+  </mat-radio-group>
+</div>
+<div [style.margin]="'30px 0px'">
+    <mat-radio-group class="radio-group" >
+        <mat-radio-button class="radio-button" value="0">All</mat-radio-button>
+        <mat-radio-button class="radio-button" value="1">Host</mat-radio-button>
+        <mat-radio-button class="radio-button" value="2">Application</mat-radio-button>
+    </mat-radio-group>
+  </div>
\ No newline at end of file
diff --git a/src/packages/target/component/list/filter/filter.component.scss b/src/packages/target/component/list/filter/filter.component.scss
new file mode 100644
index 0000000..97910d9
--- /dev/null
+++ b/src/packages/target/component/list/filter/filter.component.scss
@@ -0,0 +1,9 @@
+.radio-group {
+    display: inline-flex;
+    flex-direction: column;
+  }
+  
+  .radio-button {
+    margin: 5px;
+  }
+  
\ No newline at end of file
diff --git a/src/packages/target/component/list/filter/filter.component.spec.ts b/src/packages/target/component/list/filter/filter.component.spec.ts
new file mode 100644
index 0000000..fc30049
--- /dev/null
+++ b/src/packages/target/component/list/filter/filter.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterComponent } from './filter.component';
+
+describe('FilterComponent', () => {
+  let component: FilterComponent;
+  let fixture: ComponentFixture<FilterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FilterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/target/component/list/filter/filter.component.ts b/src/packages/target/component/list/filter/filter.component.ts
new file mode 100644
index 0000000..2a9a63a
--- /dev/null
+++ b/src/packages/target/component/list/filter/filter.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+
+@Component({
+  selector: 'of-target-filter',
+  templateUrl: './filter.component.html',
+  styleUrls: ['./filter.component.scss']
+})
+export class FilterComponent implements OnInit {
+
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+}
diff --git a/src/packages/target/component/list/list.component.html b/src/packages/target/component/list/list.component.html
new file mode 100644
index 0000000..2c0e619
--- /dev/null
+++ b/src/packages/target/component/list/list.component.html
@@ -0,0 +1,42 @@
+<div fxLayout="row" fxLayoutWrap fxLayoutAlign="left">
+
+  <!-- Filter -->
+  <div fxFlex="20%"  >
+    <of-target-filter></of-target-filter>
+  </div>
+
+  <!-- Table -->
+  <div fxFlex="80%" class="example-container mat-elevation-z8">
+
+    <mat-table #table [dataSource]="dataSource" matSort>
+
+      <ng-container matColumnDef="status">
+        <mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
+        <mat-cell *matCellDef="let element"> ? </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="type">
+        <mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.infraType.name}} </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.target.displayName}} </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="sensors">
+          <mat-header-cell *matHeaderCellDef mat-sort-header> Sensors </mat-header-cell>
+          <mat-cell *matCellDef="let element"> ? </mat-cell>
+        </ng-container>
+
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)"></mat-row>
+    </mat-table>
+
+    <mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = $event">
+    </mat-paginator>
+
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/packages/target/component/list/list.component.scss b/src/packages/target/component/list/list.component.scss
new file mode 100644
index 0000000..54b8a22
--- /dev/null
+++ b/src/packages/target/component/list/list.component.scss
@@ -0,0 +1,14 @@
+.example-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 300px;
+  }
+  
+  .mat-table {
+    overflow: auto;
+    max-height: 500px;
+  }
+  
+  .mat-header-cell.mat-sort-header-sorted {
+    color: black;
+  }
\ No newline at end of file
diff --git a/src/packages/target/component/list/list.component.spec.ts b/src/packages/target/component/list/list.component.spec.ts
new file mode 100644
index 0000000..beacd15
--- /dev/null
+++ b/src/packages/target/component/list/list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListComponent } from './list.component';
+
+describe('ListComponent', () => {
+  let component: ListComponent;
+  let fixture: ComponentFixture<ListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/packages/target/component/list/list.component.ts b/src/packages/target/component/list/list.component.ts
new file mode 100644
index 0000000..aaf5ab2
--- /dev/null
+++ b/src/packages/target/component/list/list.component.ts
@@ -0,0 +1,57 @@
+// import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild } from '@angular/core';
+// import { MatTableDataSource, MatSort } from '@angular/material';
+// import { Router } from '@angular/router';
+// import { Infra } from '../../../infra/model';
+
+
+// @Component({
+//   selector: 'of-target-list',
+//   templateUrl: './list.component.html',
+//   styleUrls: ['./list.component.scss']
+// })
+// export class ListComponent implements OnInit, AfterContentInit {
+
+//   displayedColumns = ['status', 'type', 'name', 'sensors'];
+//   dataSource: MatTableDataSource<Infra>;
+//   @ViewChild(MatSort) sort: MatSort;
+
+//   /**
+//    * Set the sort after the view init since this component will
+//    * be able to query its view for the initialized sort.
+//    */
+//   ngAfterContentInit() {
+//     // temporary data
+//     const data: Infra[] = new Array();
+//     for (let i = 0; i < 10; i++) {
+//       const t: Infra = {
+//         id: i,
+//         infraType: {
+//           id: 1,
+//           name: 'Host'
+//         },
+//         childId: 1,
+//         createDate: new Date(),
+//         probe: {
+//           id: 1,
+//         },
+//         target: {
+//           id: 1,
+//           displayName: 'Target Name'
+//         }
+//       };
+//       data.push(t);
+//     }
+
+//     this.dataSource = new MatTableDataSource(data);
+//     this.dataSource.sort = this.sort;
+//   }
+
+//   constructor(private router: Router) { }
+
+//   ngOnInit() {
+//   }
+
+//   handleRowClick(obj: Infra) {
+//     this.router.navigate(['target', obj.id]);
+//   }
+// }
diff --git a/src/packages/target/model/Target.ts b/src/packages/target/model/Target.ts
new file mode 100644
index 0000000..873070e
--- /dev/null
+++ b/src/packages/target/model/Target.ts
@@ -0,0 +1,11 @@
+import { Probe } from 'packages/probe/model';
+import { Infra } from 'packages/infra/model';
+import { Sensor } from 'packages/sensor/model';
+
+export interface Target {
+  id?: number;
+  createDate?: Date;
+  displayName?: string;
+  description?: string;
+  sensors?: Sensor[];
+}
diff --git a/src/packages/target/model/index.ts b/src/packages/target/model/index.ts
new file mode 100644
index 0000000..9f2d747
--- /dev/null
+++ b/src/packages/target/model/index.ts
@@ -0,0 +1 @@
+export * from './Target';
diff --git a/src/packages/target/service/index.ts b/src/packages/target/service/index.ts
new file mode 100644
index 0000000..cd647e4
--- /dev/null
+++ b/src/packages/target/service/index.ts
@@ -0,0 +1,5 @@
+import { TargetService } from './target.service';
+
+export const SERVICES = [
+    TargetService,
+];
diff --git a/src/packages/target/service/target.service.spec.ts b/src/packages/target/service/target.service.spec.ts
new file mode 100644
index 0000000..692b9cb
--- /dev/null
+++ b/src/packages/target/service/target.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { TargetService } from './target.service';
+
+describe('TargetService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [TargetService]
+    });
+  });
+
+  it('should be created', inject([TargetService], (service: TargetService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/packages/target/service/target.service.ts b/src/packages/target/service/target.service.ts
new file mode 100644
index 0000000..23819fd
--- /dev/null
+++ b/src/packages/target/service/target.service.ts
@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/map';
+
+import { RPCService } from '@loafer/ng-rpc/service';
+
+import { Target } from '../model';
+import { Domain } from '../../domain/model';
+
+
+@Injectable()
+export class TargetService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  public readAllByDomain(domain: Domain): Observable<Target[]> {
+    const body = {
+        domain: domain,
+    };
+
+    return this.rpcService.call('TargetService.readAllByDomain', domain);
+  }
+
+//   public readAllByProbe(domain: Domain): Observable<Target[]> {
+//     const body = {
+//         domain: domain,
+//     };
+
+//     return this.rpcService.call('TargetService.readAllByDomain', domain);
+//   }
+
+
+}
diff --git a/src/packages/target/store/index.ts b/src/packages/target/store/index.ts
new file mode 100644
index 0000000..4b59232
--- /dev/null
+++ b/src/packages/target/store/index.ts
@@ -0,0 +1,30 @@
+import {
+    createSelector,
+    createFeatureSelector,
+    ActionReducerMap,
+  } from '@ngrx/store';
+
+  import { StateSelector } from 'packages/core/ngrx/store';
+
+  import { MODULE } from '../target.constant';
+
+  import * as TargetStore from './target';
+
+  export interface State {
+    readallbydomain: TargetStore.State;
+  }
+
+  export const REDUCERS = {
+    readallbydomain: TargetStore.reducer,
+  };
+
+  export const EFFECTS = [
+    TargetStore.Effects,
+  ];
+
+  export const selectTargetState = createFeatureSelector<State>(MODULE.name);
+
+  export const ReadAllByDomainSelector = new StateSelector<TargetStore.State>(createSelector(
+    selectTargetState,
+    (state: State) => state.readallbydomain
+  ));
diff --git a/src/packages/target/store/target/index.ts b/src/packages/target/store/target/index.ts
new file mode 100644
index 0000000..3332134
--- /dev/null
+++ b/src/packages/target/store/target/index.ts
@@ -0,0 +1,4 @@
+export * from './target.action';
+export * from './target.effect';
+export * from './target.reducer';
+export * from './target.state';
diff --git a/src/packages/target/store/target/target.action.ts b/src/packages/target/store/target/target.action.ts
new file mode 100644
index 0000000..843395a
--- /dev/null
+++ b/src/packages/target/store/target/target.action.ts
@@ -0,0 +1,36 @@
+import { Action } from '@ngrx/store';
+
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Target } from '../../model';
+import { Domain } from '../../../domain/model';
+
+export enum ActionType {
+  ReadAllByDomain = '[Target.ReadAllByDomain] ReadAllByDomain',
+  ReadAllByDomainSuccess = '[Target.ReadAllByDomainSuccess] ReadAllByDomainSuccess',
+  ReadAllByDomainFailure = '[Target.ReadAllByDomainFailure] ReadAllByDomainFailure',
+}
+
+export class ReadAllByDomain implements Action {
+  readonly type = ActionType.ReadAllByDomain;
+
+  constructor(public payload: Domain) {}
+}
+
+export class ReadAllByDomainSuccess implements Action {
+  readonly type = ActionType.ReadAllByDomainSuccess;
+
+  constructor(public payload: Target[]) {}
+}
+
+export class ReadAllByDomainFailure implements Action {
+  readonly type = ActionType.ReadAllByDomainFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
+export type Actions =
+  | ReadAllByDomain
+  | ReadAllByDomainSuccess
+  | ReadAllByDomainFailure
+;
diff --git a/src/packages/target/store/target/target.effect.spec.ts b/src/packages/target/store/target/target.effect.spec.ts
new file mode 100644
index 0000000..5135b37
--- /dev/null
+++ b/src/packages/target/store/target/target.effect.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { Effects } from './target.effect';
+
+describe('Target.Effects', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Effects]
+    });
+  });
+
+  it('should be created', inject([Effects], (effects: Effects) => {
+    expect(effects).toBeTruthy();
+  }));
+});
diff --git a/src/packages/target/store/target/target.effect.ts b/src/packages/target/store/target/target.effect.ts
new file mode 100644
index 0000000..15cf3c4
--- /dev/null
+++ b/src/packages/target/store/target/target.effect.ts
@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Action } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/exhaustMap';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/take';
+
+import { Target } from '../../model';
+import { TargetService } from '../../service/target.service';
+
+import {
+  ReadAllByDomain,
+  ReadAllByDomainSuccess,
+  ReadAllByDomainFailure,
+  ActionType,
+} from './target.action';
+
+@Injectable()
+export class Effects {
+
+  constructor(
+    private actions$: Actions,
+    private targetService: TargetService,
+    private router: Router
+  ) { }
+
+  @Effect()
+  readAllByMember$: Observable<Action> = this.actions$
+    .ofType(ActionType.ReadAllByDomain)
+    .map((action: ReadAllByDomain) => action.payload)
+    .exhaustMap(domain =>
+      this.targetService
+      .readAllByDomain(domain)
+        .map(targets => new ReadAllByDomainSuccess(targets))
+        .catch(error => of(new ReadAllByDomainFailure(error)))
+    );
+
+}
diff --git a/src/packages/target/store/target/target.reducer.ts b/src/packages/target/store/target/target.reducer.ts
new file mode 100644
index 0000000..73ba5a6
--- /dev/null
+++ b/src/packages/target/store/target/target.reducer.ts
@@ -0,0 +1,45 @@
+import {
+    Actions,
+    ActionType,
+  } from './target.action';
+
+  import {
+    State,
+    initialState,
+  } from './target.state';
+
+  import { Target } from '../../model';
+
+  export function reducer(state = initialState, action: Actions): State {
+    switch (action.type) {
+      case ActionType.ReadAllByDomain: {
+        return {
+          ...state,
+          error: null,
+          pending: true,
+        };
+      }
+
+      case ActionType.ReadAllByDomainSuccess: {
+        return {
+          ...state,
+          error: null,
+          pending: false,
+          targets: action.payload
+        };
+      }
+
+      case ActionType.ReadAllByDomainFailure: {
+        return {
+          ...state,
+          error: action.payload,
+          pending: false,
+          targets: null,
+        };
+      }
+
+      default: {
+        return state;
+      }
+    }
+  }
diff --git a/src/packages/target/store/target/target.state.ts b/src/packages/target/store/target/target.state.ts
new file mode 100644
index 0000000..c4ac364
--- /dev/null
+++ b/src/packages/target/store/target/target.state.ts
@@ -0,0 +1,15 @@
+import { RPCClientError } from '@loafer/ng-rpc/protocol';
+
+import { Target } from '../../model';
+
+export interface State {
+  error: RPCClientError | null;
+  pending: boolean;
+  targets: Target[] | null;
+}
+
+export const initialState: State = {
+  error: null,
+  pending: false,
+  targets: null,
+};
diff --git a/src/packages/target/target-store.module.ts b/src/packages/target/target-store.module.ts
new file mode 100644
index 0000000..3405870
--- /dev/null
+++ b/src/packages/target/target-store.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import {
+  StoreRouterConnectingModule,
+  RouterStateSerializer,
+} from '@ngrx/router-store';
+import { EffectsModule } from '@ngrx/effects';
+import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
+
+import {
+  REDUCERS,
+  EFFECTS,
+} from './store';
+
+import { MODULE } from './target.constant';
+
+@NgModule({
+  imports: [
+    StoreModule.forFeature(MODULE.name, REDUCERS),
+    EffectsModule.forFeature(EFFECTS),
+  ],
+})
+export class TargetStoreModule { }
diff --git a/src/packages/target/target.constant.ts b/src/packages/target/target.constant.ts
new file mode 100644
index 0000000..dd9a6a2
--- /dev/null
+++ b/src/packages/target/target.constant.ts
@@ -0,0 +1,3 @@
+export const MODULE = {
+    name: 'Target'
+  };
diff --git a/src/packages/target/target.module.ts b/src/packages/target/target.module.ts
new file mode 100644
index 0000000..d4b6641
--- /dev/null
+++ b/src/packages/target/target.module.ts
@@ -0,0 +1,25 @@
+// import { NgModule } from '@angular/core';
+// import { CommonModule } from '@angular/common';
+// import { MaterialModule } from 'packages/commons/material/material.module';
+// import { InfoTableModule } from 'packages/commons/component/info-table/info-table.module';
+
+// import { COMPONENTS } from './component';
+// import { SERVICES } from './service';
+
+// @NgModule({
+//   imports: [
+//     CommonModule,
+//     MaterialModule,
+//     InfoTableModule
+//   ],
+//   declarations: [
+//     COMPONENTS,
+//   ],
+//   exports: [
+//     COMPONENTS,
+//   ],
+//   providers: [
+//     SERVICES,
+//   ],
+// })
+// export class TargetModule { }