diff --git a/src/packages/sensor/component/list/list.component.html b/src/packages/sensor/component/list/list.component.html
index 8aa8633..9b860ad 100644
--- a/src/packages/sensor/component/list/list.component.html
+++ b/src/packages/sensor/component/list/list.component.html
@@ -1,6 +1,6 @@
 <div>
     <p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
-        <of-sensor-setting [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>
+        <of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>
     </p-dialog>
 
     <button type="button" label="Add Sensor" icon="ui-icon-add" pButton (click)="onAddSensor()"></button>
diff --git a/src/packages/sensor/component/list/list.component.ts b/src/packages/sensor/component/list/list.component.ts
index 0d8d96b..d06e270 100644
--- a/src/packages/sensor/component/list/list.component.ts
+++ b/src/packages/sensor/component/list/list.component.ts
@@ -14,6 +14,7 @@ import { Domain } from 'packages/domain/model';
 import { AuthSelector } from 'packages/member/store';
 import { Page, PageParams } from 'app/commons/model';
 import { Target } from 'packages/target/model';
+import { SettingComponent } from '../setting/setting.component';
 
 @Component({
   selector: 'of-sensor-list',
@@ -100,3 +101,4 @@ export class ListComponent implements OnInit, AfterContentInit {
     this.sensorSettingDisplay = false;
   }
 }
+
diff --git a/src/packages/sensor/component/setting.backup/crawler-auth/crawler-auth.component.html b/src/packages/sensor/component/setting.backup/crawler-auth/crawler-auth.component.html
new file mode 100644
index 0000000..78dc516
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/crawler-auth/crawler-auth.component.html
@@ -0,0 +1,16 @@
+<p-panel header="{{title}}">
+  <div *ngIf="crawler; else info" class="ui-g" style="height: 180px; overflow: auto">
+    <div class="ui-g-12" *ngFor="let item of inputItems">
+      <span class="md-inputfield">
+        <input id="name" type="text" pInputText />
+        <label for="name">User</label>
+      </span>
+    </div>
+  </div>
+  
+  <ng-template #info>
+    <div>개발자의 배려가 돋보이는 친절한 안내 메시지</div>
+  </ng-template>
+
+  <button *ngIf="crawler" type="button" label="Test" icon="ui-icon-send" pButton (click)="testCredentials()"></button>
+</p-panel>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting.backup/crawler-auth/crawler-auth.component.spec.ts b/src/packages/sensor/component/setting.backup/crawler-auth/crawler-auth.component.spec.ts
new file mode 100644
index 0000000..87f023d
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/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.backup/crawler-auth/crawler-auth.component.ts b/src/packages/sensor/component/setting.backup/crawler-auth/crawler-auth.component.ts
new file mode 100644
index 0000000..193258f
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/crawler-auth/crawler-auth.component.ts
@@ -0,0 +1,96 @@
+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',
+})
+export class CrawlerAuthComponent implements OnInit, OnChanges {
+
+  inputItems$ = this.listStore.pipe(select(ReadCrawlerInputItemSelector.select('inputs')));
+  inputItems: MetaCrawlerInputItem[];
+  title: string;
+
+  @Output() credentialPassed = new EventEmitter<boolean>();
+  @Input() crawler: 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();
+    this.title = '3. Credentials';
+
+    this.inputItems = [];
+    // Temporary data
+    if (null == this.crawler) {
+      return;
+    }
+    this.title += ' for ' + this.crawler.name;
+    for (let i = 0; i < 10; i++) {
+      const item: MetaCrawlerInputItem = {
+        id: i,
+        // inputType: {
+        //   id: i,
+        //   name:  '',
+        //   description: '',
+        // },
+        crawler: null,
+        description: '',
+        name: '',
+        createDate: new Date(),
+        required: true,
+        defaultValue: '',
+        pattern: '',
+        keyName: '',
+        keyValue: '',
+      };
+      this.inputItems.push(item);
+    }
+
+  }
+
+  getCrawlerAuthInputItems() {
+    this.listStore.dispatch(new ListStore.ReadAll(this.crawler));
+  }
+
+  testCredentials() {
+    // switch (this.crawler.id) {
+    //   case 1:
+    //     break;
+    //   case 2:
+    //     break;
+    //   case 3:
+    //     break;
+    //   default :
+    //     break;
+    // }
+    this.credentialPassed.emit(true);
+  }
+}
diff --git a/src/packages/sensor/component/setting.backup/crawler-selector/crawler-selector.component.html b/src/packages/sensor/component/setting.backup/crawler-selector/crawler-selector.component.html
new file mode 100644
index 0000000..5358cfb
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/crawler-selector/crawler-selector.component.html
@@ -0,0 +1,16 @@
+<div *ngIf="target; else info">
+  <p-orderList [value]="crawlers" [listStyle]="{'height':'200px'}" [responsive]="true" header="2. Choose a Crawler" filterBy="name"
+    (onSelectionChange)="onSelectionChange($event)">
+    <ng-template let-crawler pTemplate="item">
+      <div class="ui-helper-clearfix">
+        <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{crawler.name}}</div>
+      </div>
+    </ng-template>
+  </p-orderList>
+</div>
+
+<ng-template #info>
+  <p-panel header="2. Choose a Crawler">
+    <div>개발자의 배려가 돋보이는 친절한 안내 메시지</div>
+  </p-panel>
+</ng-template>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting.backup/crawler-selector/crawler-selector.component.scss b/src/packages/sensor/component/setting.backup/crawler-selector/crawler-selector.component.scss
new file mode 100644
index 0000000..5503c56
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/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.backup/crawler-selector/crawler-selector.component.spec.ts b/src/packages/sensor/component/setting.backup/crawler-selector/crawler-selector.component.spec.ts
new file mode 100644
index 0000000..77251eb
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/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.backup/crawler-selector/crawler-selector.component.ts b/src/packages/sensor/component/setting.backup/crawler-selector/crawler-selector.component.ts
new file mode 100644
index 0000000..daeba04
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/crawler-selector/crawler-selector.component.ts
@@ -0,0 +1,68 @@
+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() target: Target;
+  crawlers: MetaCrawler[];
+  @Output() crawlerSelected = 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() {
+
+    this.crawlers = [];
+    if (null == this.target) {
+      return;
+    }
+
+    // Temporary Data
+    for (let i = 0; i < 4; i++) {
+      const c: MetaCrawler = {
+        id: i,
+        name: 'CrawlerName' + i + ' For ' + this.target.displayName,
+      };
+      this.crawlers.push(c);
+    }
+
+  }
+
+  onSelectionChange(event) {
+    this.crawlerSelected.emit(event.value[0]);
+  }
+}
diff --git a/src/packages/sensor/component/setting.backup/sensor-item-selector/sensor-item-selector.component.html b/src/packages/sensor/component/setting.backup/sensor-item-selector/sensor-item-selector.component.html
new file mode 100644
index 0000000..42f2fe4
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/sensor-item-selector/sensor-item-selector.component.html
@@ -0,0 +1,10 @@
+<p-panel header="4. Choose sensor items">
+  <div *ngIf="crawler && target; else info" class="ui-g" style="height: 200px; overflow: auto">
+    <p-tree [value]="itemTreeNode" selectionMode="checkbox" [(selection)]="selectedItems" (onNodeSelect)="onNodeSelect($event)"
+      (onNodeUnselect)="onNodeUnselect($event)"></p-tree>
+  </div>
+
+  <ng-template #info>
+    <div>개발자의 배려가 돋보이는 친절한 안내 메시지</div>
+  </ng-template>
+</p-panel>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting.backup/sensor-item-selector/sensor-item-selector.component.scss b/src/packages/sensor/component/setting.backup/sensor-item-selector/sensor-item-selector.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/component/setting.backup/sensor-item-selector/sensor-item-selector.component.spec.ts b/src/packages/sensor/component/setting.backup/sensor-item-selector/sensor-item-selector.component.spec.ts
new file mode 100644
index 0000000..25e7477
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/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.backup/sensor-item-selector/sensor-item-selector.component.ts b/src/packages/sensor/component/setting.backup/sensor-item-selector/sensor-item-selector.component.ts
new file mode 100644
index 0000000..b1fa795
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/sensor-item-selector/sensor-item-selector.component.ts
@@ -0,0 +1,127 @@
+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 'packages/meta/crawler/model/MetaCrawler';
+import { MetaSensorItemType } from 'packages/meta/sensor-item-type/model/MetaSensorItemType';
+import { TreeNode } from 'primeng/primeng';
+import { Target } from 'packages/target/model';
+
+@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() target: Target;
+  @Input() crawler: MetaCrawler;
+  @Output() sensorItemsSelected = new EventEmitter<TreeNode[]>();
+
+  items$ = this.listStore.pipe(select(ReadAllSensorDisplayItemByCrawlerSelector.select('list')));
+
+  selectedItems: TreeNode[];
+  itemTreeNode: TreeNode[];
+
+  constructor(
+    private router: Router,
+    private listStore: Store<ListStore.State>,
+  ) { }
+
+  ngOnInit() {
+   //  this.selectedItems = new Set();
+    // this.items$.subscribe(
+    //   (list: MetaSensorDisplayItem[]) => {
+    //     if (list !== null) {
+    //     }
+    //   },
+    //   (error: RPCClientError) => {
+    //     console.log(error.response.message);
+    //   }
+    // );
+
+  }
+
+  ngOnChanges() {
+    // this.selectedItems.clear();
+    // this.listStore.dispatch(new ListStore.ReadAllByCrawler(this.crawler));
+
+    this.itemTreeNode = [];
+    if (!this.target || !this.crawler) {
+      return;
+    }
+    // Temporary data
+    const displayItems = [];
+    for (let i = 0; i < 10; i++) {
+      let isDefault = false;
+      const t: MetaSensorItemType = {
+        name: 'CPU'
+      };
+      if (i % 2) {
+        isDefault = true;
+        t.name = 'Memory';
+      }
+      const si: MetaSensorDisplayItem = {
+        id: i,
+        key: 'SensorDisplayItemKey' + i,
+        displayName: 'this.is.display.item.name' + i,
+        description: 'Description' + i,
+        default: isDefault,
+        itemType: t
+      };
+      displayItems.push(si);
+    }
+
+    this.generateTreeData(displayItems);
+  }
+
+  generateTreeData(items) {
+    this.itemTreeNode = [];
+    for (const item of items) {
+      const categoryNode = this.existCategory(item);
+      if (categoryNode === null) {
+        const childrenNode = [];
+        childrenNode.push(this.getChildNode(item));
+        const node = {
+          label: item.itemType.name,
+          children: childrenNode,
+          expanded: true,
+        };
+        this.itemTreeNode.push(node);
+      } else {
+        categoryNode.children.push(this.getChildNode(item));
+      }
+    }
+  }
+
+  getChildNode(item) {
+    const childNode = {
+      label: item.displayName,
+      expandedIcon: item.default ? 'ui-icon-star' : '',
+      collapsedIcon: item.default ? 'ui-icon-star' : '',
+      expanded: true,
+      data: item
+    };
+    return childNode;
+  }
+  existCategory(item: MetaSensorDisplayItem) {
+    let categoryNode = null;
+    for (const node of this.itemTreeNode) {
+      if (node.label === item.itemType.name) {
+        categoryNode = node;
+      }
+    }
+    return categoryNode;
+  }
+
+
+  onNodeSelect(event) {
+    this.sensorItemsSelected.emit(this.selectedItems);
+  }
+  onNodeUnselect(event) {
+   this.sensorItemsSelected.emit(this.selectedItems);
+  }
+}
diff --git a/src/packages/sensor/component/setting.backup/setting-etc/setting-etc.component.html b/src/packages/sensor/component/setting.backup/setting-etc/setting-etc.component.html
new file mode 100644
index 0000000..d1af6c6
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/setting-etc/setting-etc.component.html
@@ -0,0 +1,3 @@
+<div>
+  page 2222222
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting.backup/setting-etc/setting-etc.component.spec.ts b/src/packages/sensor/component/setting.backup/setting-etc/setting-etc.component.spec.ts
new file mode 100644
index 0000000..4f94006
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/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.backup/setting-etc/setting-etc.component.ts b/src/packages/sensor/component/setting.backup/setting-etc/setting-etc.component.ts
new file mode 100644
index 0000000..4d26c71
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/setting-etc/setting-etc.component.ts
@@ -0,0 +1,32 @@
+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';
+
+
+@Component({
+  selector: 'of-sensor-setting-etc',
+  templateUrl: './setting-etc.component.html',
+})
+export class SettingETCComponent implements OnInit {
+
+  @Input() selectedTarget: Target;
+  @Input() selectedCrawler: MetaCrawler;
+  @Input() selectedItems: MetaSensorDisplayItem[];
+
+  intervals = [
+    '600 sec',
+    '400 sec',
+    '200 sec',
+  ];
+
+
+  constructor(
+    private router: Router,
+  ) { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/packages/sensor/component/setting.backup/setting.component.html b/src/packages/sensor/component/setting.backup/setting.component.html
new file mode 100644
index 0000000..51c05eb
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/setting.component.html
@@ -0,0 +1,28 @@
+<div [hidden]="step !== 1">
+  <div class="ui-g">
+    <div class="ui-g-6">
+      <of-target-selector [preTarget]="preTarget" (targetSelected)="onTargetSelect($event)"></of-target-selector>
+    </div>
+    <div class="ui-g-6">
+      <of-crawler-auth [crawler]="selectedCrawler" (credentialPassed)="onCredentialPass($event)"></of-crawler-auth>
+    </div>
+    <div class="ui-g-6">
+      <of-crawler-selector [target]="selectedTarget" (crawlerSelected)="onCrawlerSelect($event)"></of-crawler-selector>
+    </div>
+    <div class="ui-g-6">
+      <of-sensor-item-selector [target]="selectedTarget" [crawler]="selectedCrawler" (sensorItemsSelected)="onItemsSelect($event)"></of-sensor-item-selector>
+    </div>
+  </div>
+</div>
+
+<div *ngIf="step === 2">
+  <of-sensor-setting-etc [selectedTarget]="selectedTarget" [selectedCrawler]="selectedCrawler" [selectedItems]="selectedSensorDisplayItems"></of-sensor-setting-etc>
+</div>
+
+<div>
+  <button pButton *ngIf="step === 1" class="ui-button-danger" type="button" label="Cancel" icon="ui-icon-close" (click)="onCancel()"></button>
+  <button pButton *ngIf="step === 2" class="ui-button-danger" type="button" label="Prev" icon="ui-icon-close" (click)="onPrev()"></button>
+
+  <button pButton *ngIf="step === 1" [disabled]="!nextable" type="button" label="Next" icon="fa-check" (click)="onNext()"></button>
+  <button pButton *ngIf="step === 2" type="button" label="Done" icon="fa-check" (click)="onDone()"></button>
+</div>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting.backup/setting.component.scss b/src/packages/sensor/component/setting.backup/setting.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/packages/sensor/component/setting.backup/setting.component.spec.ts b/src/packages/sensor/component/setting.backup/setting.component.spec.ts
new file mode 100644
index 0000000..0f66542
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/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.backup/setting.component.ts b/src/packages/sensor/component/setting.backup/setting.component.ts
new file mode 100644
index 0000000..892f516
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/setting.component.ts
@@ -0,0 +1,113 @@
+import { Component, OnInit, Input, Inject, DoCheck, ViewEncapsulation, Output, EventEmitter, OnChanges } from '@angular/core';
+import { Target } from 'packages/target/model';
+import { Infra } from 'packages/infra/model';
+import { MetaCrawler } from 'packages/meta/crawler/model/MetaCrawler';
+import { MetaSensorDisplayItem } from 'packages/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 'packages/meta/sensor-item-key/model/MetaSensorItemKey';
+import { TreeNode } from 'primeng/primeng';
+
+@Component({
+    selector: 'of-sensor-setting',
+    templateUrl: './setting.component.html',
+    encapsulation: ViewEncapsulation.None
+})
+export class SettingComponent implements OnInit, DoCheck, OnChanges {
+
+    @Input() preTarget: Target;
+    @Output() close = new EventEmitter();
+
+    nextable = false;
+    selectedTarget: Target;
+    selectedCrawler: MetaCrawler;
+    credentialPassed: boolean;
+    selectedSensorDisplayItems: MetaSensorDisplayItem[];
+    itemNodes: TreeNode[];
+    step = 1;
+
+    sensorItemKeys$ = this.keyListStore.pipe(select(ReadSensorItemKeySelector.select('list')));
+
+
+    constructor(
+        private keyListStore: Store<SensorItemKeyListStore.State>,
+    ) {
+    }
+
+    ngOnInit() {
+        // this.sensorItemKeys$.subscribe(
+        //     (list: MetaSensorItemKey[]) => {
+        //         if (list !== null) {
+        //             console.log(list);
+        //         }
+        //     },
+        //     (error: RPCClientError) => {
+        //         console.log(error.response.message);
+        //     }
+        // );
+    }
+
+    ngOnChanges(changes) {
+
+    }
+
+    ngDoCheck() {
+        try {
+            if (
+                this.selectedTarget === null ||
+                this.selectedCrawler === null ||
+                this.itemNodes === null ||
+                this.itemNodes.length === 0 ||
+                !this.credentialPassed
+            ) {
+                this.nextable = false;
+            } else {
+                this.nextable = true;
+            }
+        } catch (exception) {
+            this.nextable = false;
+        }
+    }
+
+    onCancel() {
+        this.selectedTarget = null;
+        this.selectedCrawler = null;
+        this.credentialPassed = false;
+        this.selectedSensorDisplayItems = null;
+        this.close.emit();
+    }
+
+    onNext() {
+        this.step += 1;
+    }
+
+    onPrev() {
+        this.step -= 1;
+    }
+
+    onDone() {
+        this.selectedSensorDisplayItems = [];
+        for (const node of this.itemNodes) {
+            if (node.data && node.data !== undefined) {
+                this.selectedSensorDisplayItems.push(node.data);
+            }
+        }
+        console.log(this.selectedSensorDisplayItems);
+    }
+
+    onTargetSelect(t: Target) {
+        this.selectedTarget = t;
+    }
+    onCrawlerSelect(c: MetaCrawler) {
+        this.selectedCrawler = c;
+    }
+    onCredentialPass(b: boolean) {
+        this.credentialPassed = b;
+    }
+    onItemsSelect(nodes: TreeNode[]) {
+        this.itemNodes = nodes;
+    }
+}
diff --git a/src/packages/sensor/component/setting.backup/target-selector/target-selector.component.html b/src/packages/sensor/component/setting.backup/target-selector/target-selector.component.html
new file mode 100644
index 0000000..40bfb31
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/target-selector/target-selector.component.html
@@ -0,0 +1,9 @@
+<p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" header="1. Choose a target" filterBy="displayName"
+  (onSelectionChange)="onSelectionChange($event)">
+  <ng-template let-target pTemplate="item">
+    <div class="ui-helper-clearfix">
+      <img src="assets/demo/images/car/BMW.gif" style="display:inline-block;margin:2px 0 2px 2px" />
+      <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{target.displayName}}</div>
+    </div>
+  </ng-template>
+</p-orderList>
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting.backup/target-selector/target-selector.component.spec.ts b/src/packages/sensor/component/setting.backup/target-selector/target-selector.component.spec.ts
new file mode 100644
index 0000000..c13ee67
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/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.backup/target-selector/target-selector.component.ts b/src/packages/sensor/component/setting.backup/target-selector/target-selector.component.ts
new file mode 100644
index 0000000..1e3560b
--- /dev/null
+++ b/src/packages/sensor/component/setting.backup/target-selector/target-selector.component.ts
@@ -0,0 +1,90 @@
+import { Component, OnInit, Output, EventEmitter, Input, AfterContentInit, OnChanges } from '@angular/core';
+import { Router } from '@angular/router';
+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';
+import { SelectItem } from 'primeng/primeng';
+
+@Component({
+    selector: 'of-target-selector',
+    templateUrl: './target-selector.component.html',
+})
+export class TargetSelectorComponent implements OnInit, OnChanges {
+
+    targets$ = this.store.pipe(select(ListSelector.select('page')));
+
+    @Input() preTarget: Target = null;
+    @Output() targetSelected = new EventEmitter<Target>();
+    targets: Target[] = null;
+
+    constructor(
+        private router: Router,
+        private store: Store<ListStore.State>
+    ) { }
+
+    ngOnInit() {
+        // this.targets$.subscribe(
+        //     (page: Page) => {
+        //         if (page !== null) {
+        //             this.convertInfraToTarget(page);
+        //         }
+        //     },
+        //     (error: RPCClientError) => {
+        //         console.log(error.response.message);
+        //     }
+        // );
+    }
+
+    ngOnChanges(changes) {
+        this.targets = [];
+        if (this.preTarget === null) {
+            this.getTargetList();
+        } else {
+            this.targets.push(this.preTarget);
+        }
+    }
+
+    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);
+        //     }
+        // );
+
+        // Temporary data
+        for (let i = 0; i < 10; i++) {
+            const t: Target = {
+                id: i,
+                displayName: 'DisplayName' + i,
+                createDate: new Date(),
+                description: 'Description' + i,
+            };
+            this.targets.push(t);
+        }
+    }
+
+    onSelectionChange(event) {
+        this.targetSelected.emit(event.value[0]);
+    }
+
+}
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
index 78dc516..854d68a 100644
--- a/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html
+++ b/src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html
@@ -1,4 +1,4 @@
-<p-panel header="{{title}}">
+<p-panel>
   <div *ngIf="crawler; else info" class="ui-g" style="height: 180px; overflow: auto">
     <div class="ui-g-12" *ngFor="let item of inputItems">
       <span class="md-inputfield">
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
index 5358cfb..c7f0d87 100644
--- a/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html
+++ b/src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="target; else info">
-  <p-orderList [value]="crawlers" [listStyle]="{'height':'200px'}" [responsive]="true" header="2. Choose a Crawler" filterBy="name"
+  <p-orderList [value]="crawlers" [listStyle]="{'height':'200px'}" [responsive]="true"  filterBy="name"
     (onSelectionChange)="onSelectionChange($event)">
     <ng-template let-crawler pTemplate="item">
       <div class="ui-helper-clearfix">
@@ -10,7 +10,7 @@
 </div>
 
 <ng-template #info>
-  <p-panel header="2. Choose a Crawler">
+  <p-panel>
     <div>개발자의 배려가 돋보이는 친절한 안내 메시지</div>
   </p-panel>
 </ng-template>
\ No newline at end of file
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
index 42f2fe4..af13706 100644
--- 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
@@ -1,4 +1,4 @@
-<p-panel header="4. Choose sensor items">
+<p-panel>
   <div *ngIf="crawler && target; else info" class="ui-g" style="height: 200px; overflow: auto">
     <p-tree [value]="itemTreeNode" selectionMode="checkbox" [(selection)]="selectedItems" (onNodeSelect)="onNodeSelect($event)"
       (onNodeUnselect)="onNodeUnselect($event)"></p-tree>
diff --git a/src/packages/sensor/component/setting/setting.component.html b/src/packages/sensor/component/setting/setting.component.html
index 51c05eb..d9b408f 100644
--- a/src/packages/sensor/component/setting/setting.component.html
+++ b/src/packages/sensor/component/setting/setting.component.html
@@ -1,4 +1,24 @@
-<div [hidden]="step !== 1">
+<p-accordion [multiple]="false" [activeIndex]="step" (onOpen)="onTabOpen($event)">
+  <p-accordionTab header="{{getTitle(0)}}" [disabled]="preTarget">
+    <of-target-selector  [visible]="visible" [preTarget]="preTarget" (targetSelected)="onTargetSelect($event)"></of-target-selector>
+  </p-accordionTab>
+  <p-accordionTab header="{{getTitle(1)}}">
+    <of-crawler-selector [target]="selectedTarget" (crawlerSelected)="onCrawlerSelect($event)"></of-crawler-selector>
+  </p-accordionTab>
+  <p-accordionTab header="{{getTitle(2)}}">
+    <of-crawler-auth [crawler]="selectedCrawler" (credentialPassed)="onCredentialPass($event)"></of-crawler-auth>    
+  </p-accordionTab>
+  <p-accordionTab header="{{getTitle(3)}}">
+    <of-sensor-item-selector [target]="selectedTarget" [crawler]="selectedCrawler" (sensorItemsSelected)="onItemsSelect($event)"></of-sensor-item-selector>
+  </p-accordionTab>
+</p-accordion>
+
+<div>
+  <button pButton class="ui-button-danger" type="button" label="Cancel" icon="ui-icon-close" (click)="onCancel()"></button>
+  <button pButton [disabled]="!nextable" type="button" label="Next" icon="fa-check" (click)="onNext()"></button>
+</div>
+
+<!-- <div [hidden]="step !== 1">
   <div class="ui-g">
     <div class="ui-g-6">
       <of-target-selector [preTarget]="preTarget" (targetSelected)="onTargetSelect($event)"></of-target-selector>
@@ -25,4 +45,4 @@
 
   <button pButton *ngIf="step === 1" [disabled]="!nextable" type="button" label="Next" icon="fa-check" (click)="onNext()"></button>
   <button pButton *ngIf="step === 2" type="button" label="Done" icon="fa-check" (click)="onDone()"></button>
-</div>
\ No newline at end of file
+</div> -->
\ No newline at end of file
diff --git a/src/packages/sensor/component/setting/setting.component.ts b/src/packages/sensor/component/setting/setting.component.ts
index 892f516..f555075 100644
--- a/src/packages/sensor/component/setting/setting.component.ts
+++ b/src/packages/sensor/component/setting/setting.component.ts
@@ -20,6 +20,7 @@ export class SettingComponent implements OnInit, DoCheck, OnChanges {
 
     @Input() preTarget: Target;
     @Output() close = new EventEmitter();
+    @Input() visible;
 
     nextable = false;
     selectedTarget: Target;
@@ -27,7 +28,7 @@ export class SettingComponent implements OnInit, DoCheck, OnChanges {
     credentialPassed: boolean;
     selectedSensorDisplayItems: MetaSensorDisplayItem[];
     itemNodes: TreeNode[];
-    step = 1;
+    step = 0;
 
     sensorItemKeys$ = this.keyListStore.pipe(select(ReadSensorItemKeySelector.select('list')));
 
@@ -38,6 +39,7 @@ export class SettingComponent implements OnInit, DoCheck, OnChanges {
     }
 
     ngOnInit() {
+        this.step = this.preTarget ? 1 : 0;
         // this.sensorItemKeys$.subscribe(
         //     (list: MetaSensorItemKey[]) => {
         //         if (list !== null) {
@@ -51,7 +53,7 @@ export class SettingComponent implements OnInit, DoCheck, OnChanges {
     }
 
     ngOnChanges(changes) {
-
+        this.step = this.preTarget ? 1 : 0;
     }
 
     ngDoCheck() {
@@ -73,6 +75,9 @@ export class SettingComponent implements OnInit, DoCheck, OnChanges {
     }
 
     onCancel() {
+        this.step = 0;
+        this.visible = false;
+        this.nextable = false;
         this.selectedTarget = null;
         this.selectedCrawler = null;
         this.credentialPassed = false;
@@ -100,14 +105,52 @@ export class SettingComponent implements OnInit, DoCheck, OnChanges {
 
     onTargetSelect(t: Target) {
         this.selectedTarget = t;
+        this.step = 1;
     }
     onCrawlerSelect(c: MetaCrawler) {
         this.selectedCrawler = c;
+        this.step = 2;
     }
     onCredentialPass(b: boolean) {
+        if (!b) {
+            return;
+        }
         this.credentialPassed = b;
+        this.step = 3;
     }
     onItemsSelect(nodes: TreeNode[]) {
         this.itemNodes = nodes;
     }
+
+    onTabOpen(event) {
+        this.step = event.index;
+    }
+
+    getTitle(index) {
+        if (index === 0 && this.preTarget) {
+            return this.preTarget.displayName;
+        }
+        let title = '';
+        switch (index) {
+            case 0:
+                title = this.selectedTarget && this.step !== index ?
+                    this.selectedTarget.displayName :
+                    'Choose a Target to monitor.';
+                break;
+            case 1:
+                title = this.selectedCrawler && this.step !== index ?
+                    this.selectedCrawler.name :
+                    'Choose a Crawler.';
+                break;
+            case 2:
+                title = this.credentialPassed && this.step !== index ?
+                    'Credentials test succeed.' :
+                    'Credentials';
+                break;
+            case 3:
+                title = 'Choose Sensor Items.';
+                break;
+        }
+        return title;
+    }
 }
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
index 40bfb31..3fe9451 100644
--- a/src/packages/sensor/component/setting/target-selector/target-selector.component.html
+++ b/src/packages/sensor/component/setting/target-selector/target-selector.component.html
@@ -1,9 +1,10 @@
-<p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" header="1. Choose a target" filterBy="displayName"
-  (onSelectionChange)="onSelectionChange($event)">
-  <ng-template let-target pTemplate="item">
-    <div class="ui-helper-clearfix">
-      <img src="assets/demo/images/car/BMW.gif" style="display:inline-block;margin:2px 0 2px 2px" />
-      <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{target.displayName}}</div>
-    </div>
-  </ng-template>
-</p-orderList>
\ No newline at end of file
+<div *ngIf="!preTarget">
+  <p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" filterBy="displayName" (onSelectionChange)="onSelectionChange($event)">
+    <ng-template let-target pTemplate="item">
+      <div class="ui-helper-clearfix">
+        <img src="assets/demo/images/car/BMW.gif" style="display:inline-block;margin:2px 0 2px 2px" />
+        <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{target.displayName}}</div>
+      </div>
+    </ng-template>
+  </p-orderList>
+</div>
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
index 1e3560b..28a7eec 100644
--- a/src/packages/sensor/component/setting/target-selector/target-selector.component.ts
+++ b/src/packages/sensor/component/setting/target-selector/target-selector.component.ts
@@ -19,6 +19,7 @@ export class TargetSelectorComponent implements OnInit, OnChanges {
     targets$ = this.store.pipe(select(ListSelector.select('page')));
 
     @Input() preTarget: Target = null;
+    @Input() visible;
     @Output() targetSelected = new EventEmitter<Target>();
     targets: Target[] = null;
 
@@ -46,6 +47,7 @@ export class TargetSelectorComponent implements OnInit, OnChanges {
             this.getTargetList();
         } else {
             this.targets.push(this.preTarget);
+            this.targetSelected.emit(this.preTarget);
         }
     }