diff --git a/frontend/src/modules/sysMgt/router/index.js b/frontend/src/modules/sysMgt/router/index.js
index ce98166..2c043f3 100644
--- a/frontend/src/modules/sysMgt/router/index.js
+++ b/frontend/src/modules/sysMgt/router/index.js
@@ -5,6 +5,7 @@ import AuthModify from '../views/AuthModify'
 import BatchList from '../views/BatchList'
 import BatchDetail from '../views/BatchDetail'
 import NotiList from '../views/NotiList'
+import WorkState from '../views/WorkState'
 
 export default [
   {
@@ -39,7 +40,7 @@ export default [
     meta: { public: false }
   },
   {
-    path: '/sysMgt/batchDetail/:batchId',    
+    path: '/sysMgt/batchDetail/:batchId',
     component: BatchDetail,    
     name: 'batchDetail',     
     meta: { public: false }
@@ -49,6 +50,12 @@ export default [
     component: NotiList,    
     name: 'notiList',     
     meta: { public: false }
+  },
+  {
+    path: '/sysMgt/workState',    
+    component: WorkState,    
+    name: 'workState',     
+    meta: { public: false }
   }
 ]
 
diff --git a/frontend/src/modules/sysMgt/views/WorkState.vue b/frontend/src/modules/sysMgt/views/WorkState.vue
new file mode 100644
index 0000000..7851f5d
--- /dev/null
+++ b/frontend/src/modules/sysMgt/views/WorkState.vue
@@ -0,0 +1,326 @@
+<template>
+  <div class="contents">
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">알림 이력</h3>
+        <p class="breadcrumb">알림 이력</p>
+      </div>
+      <div class="search_wrap">
+        <div class="group">
+          <div class="input_box cal">
+            <label for="right" class="label">조회기간</label>
+            <div class="term">
+              <span class="custom_input icon_date">
+                <vuejs-datepicker
+                    :language="ko"
+                    :format="customFormatter"
+                    :disabled-dates="disabledSDate"
+                    v-model="startDate"
+                    @selected="selectedStartDate(0)"
+                    @closed="closeDate('start')"
+                ></vuejs-datepicker>
+              </span>
+            </div>
+          </div>
+          <div>
+            <label for="right" class="label">시작시간</label>
+            <div class="term">
+              <span class="custom_input icon_date">
+                <timepicker v-model="StartTime" format="hh:mm A" minute-interval="15"></timepicker>
+              </span>
+            </div>
+          </div>
+          <div>
+            <label for="right" class="label">종료시간</label>
+            <div class="term">
+              <span class="custom_input icon_date">
+                <timepicker v-model="EndTime" format="hh:mm A" minute-interval="15"></timepicker>
+              </span>
+            </div>
+          </div>
+          <div class="select_box id">
+            <label for="searchType" class="label">알림 구분</label>
+            <select name="" id="searchType2" v-model="srchGbn2" @keyup.enter="search">
+              <option value="00">선택안함</option>
+              <option value="01">종량 전환 알림</option>
+              <option value="02">이월 소멸 알림</option>
+            </select>
+          </div>
+          <div class="select_box id">
+            <label for="searchType" class="label">상세검색</label>
+            <select name="" id="searchType" v-model="srchGbn" @keyup.enter="search">
+              <option value="00">선택안함</option>
+              <option value="01">유저ID</option>
+              <option value="02">웹요청ID</option>
+            </select>
+          </div>
+          <div class="input_box id">
+            <label for="id1" class="label">검색어</label>
+            <input
+              class="search-box"
+              type="text"
+              id="id1"
+              placeholder="검색어 입력"
+              v-model.trim="grid.params.search"
+              @keyup.enter="search"
+              :readonly="!isFocused"
+              @focus="isFocused = true"
+              @blur="isFocused = false"
+            />
+          </div>
+          <div>
+            <button type="button" class="button grey" @click="search">조회</button>
+          </div>
+        </div>
+      </div>
+      <div class="info">
+        <div class="count">
+          총 <span> {{ totalItems.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }} </span>건
+          <div class="select_box NumberSe">
+            <select name="" id="perpage" v-model="perPageCnt" @change="changePerPage()">
+              <option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">
+                {{ option.text }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="table">
+        <custom-grid 
+          ref="table" 
+          :totalItems="'totalItems'"
+          :url="grid.url" 
+          :columns="grid.columns"
+          :pagePerRows="grid.pagePerRows"
+          :initialRequest="grid.initialRequest"
+          :pagination="grid.pagination"
+          :noDataStr="grid.noDataStr"
+          :addCls="grid.addCls"
+        ></custom-grid>
+      </div>
+      <noti-detail-pop ref="notiDetailModal"></noti-detail-pop>
+    </div>
+  </div>
+</template>
+
+<script>
+import customGrid from '@/components/CustomGrid';
+import moment from 'moment';
+import NotiDetailPop from '../components/NotiDetailPop';
+import Timepicker from 'vue-timepicker';
+
+class CustomATagRenderer {
+  constructor(props) {
+    this.props = props;
+    const el = document.createElement('a');
+    el.href = 'javascript:void(0);';
+    el.className = 'btn_text';
+    el.innerText = String(props.colValue);
+    this.el = el;
+  }
+
+  getElement() {
+    return this.el;
+  }
+
+  addEvent(selEl) {
+    selEl.addEventListener('click', () => {
+      const { callback } = this.props['cgrido' + this.props.colName].options;
+      callback(this.props);
+    });
+  }
+}
+
+
+
+export default {
+  name: 'workState',
+  data() {
+    return {
+      isFocused: false,
+      srchGbn: '00',
+      srchGbn2: '00',
+      row: {},
+      perPageCnt: 50,
+      options: [
+        { text: '20', value: 20 },
+        { text: '50', value: 50 },
+        { text: '100', value: 100 },
+      ],
+      //날짜 조회
+      ko: vdp_translation_ko.js,
+      periodDay: 7,
+      sDateDiv: 'day',
+      startDate: new Date(),
+      endDate: new Date(),
+      strDate: new Date(),
+
+      totalItems: 0,
+      grid: {
+        url: '/api/v1/bo/sysMgt/notiList',
+        pagePerRows: 50,
+        pagination: true,
+        addCls: 'box_OFvis',
+        initialRequest: false,
+        columns: [
+          { name: 'sndYmd', header: '발송 날짜', align: 'center', width: '15%' },
+          { name: 'userId', header: '유저 ID', align: 'center', width: '15%' },
+          { name: 'notiDiv', header: '알림 구분', align: 'center', width: '15%' },
+          { name: 'webReqId', header: '웹요청 ID', align: 'center', width: '20%' },
+          { 
+            name: 'msgTitle', 
+            header: '내용', 
+            align: 'center', 
+            width: '20%' ,
+            renderer: {
+              type: CustomATagRenderer,
+              options: {
+                callback: this.notiDetailPop,
+              },
+            },
+          },
+          // { name: 'regDt', header: '등록 일시', align: 'center', width: '15%' },
+        ],
+        noDataStr: '발송 내역이 없습니다.',
+        params: {
+          startDt: '',
+          endDt: '',
+          search: '',
+          srchGbn: '',
+          srchGbn2: ''
+        },
+        StartTime : null,
+        EndTime : null,
+      },
+    };
+  },
+  components: {
+    customGrid: customGrid,
+    vuejsDatepicker,
+    NotiDetailPop,
+    Timepicker,
+
+  },
+  created() {
+    this.setPeriodDay(0);
+  },
+  destroyed() {
+    // this.$store.commit('dataStore/updateDataStore', '');
+    this.$store.commit('searchcondition/updateSearchCondition', {
+      page: 1,
+      perPage: 50,
+      params: {
+        startDt: '',
+        endDt: '',
+        search: '',
+        srchGbn: '',
+        srchGbn2: ''
+      },
+    });
+  },
+  mounted() {
+    let page = 1;
+    const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+    let isKeep = false;
+    /*
+    if (getCondition) {
+      this.grid.pagePerRows = getCondition.perPage;
+      this.grid.params = getCondition.params;
+      page = getCondition.page;
+      isKeep = true;
+    }
+    */
+    this.grid.pagePerRows = 50;
+    page = 1;
+    this.search(isKeep);
+  },
+
+  methods: {
+    search: function (isKeep) {
+
+      this.grid.params = {
+        startDt: moment(this.startDate).format('YYYYMMDD'),
+        endDt: moment(this.endDate).format('YYYYMMDD'),
+        search: this.grid.params.search,
+        srchGbn: this.srchGbn,
+        srchGbn2: this.srchGbn2
+      }
+
+      this.$refs.table.search(this.grid.params, isKeep);
+      this.sendStoreData();
+    },
+    sendStoreData: function () {
+      const getP = this.$refs.table.getPagination();
+      this.$store.commit('searchcondition/updateSearchCondition', {
+        page: getP._currentPage,
+        perPage: this.perPageCnt,
+        params: this.grid.params,
+      });
+
+      const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+    },
+    changePerPage: function () {
+      // 페이지당 조회할 개수
+      this.grid.pagePerRows = this.perPageCnt;
+    },
+
+    customFormatter: function (date) {
+      if (this.sDateDiv == 'month') {
+        return moment(date).format('YYYY-MM');
+      } else if (this.sDateDiv == 'year') {
+        return moment(date).format('YYYY');
+      } else {
+        return moment(date).format('YYYY-MM-DD');
+      }
+    },
+    initSetStartDate() {
+      let setYear = Number(moment(new Date()).format('YYYY'));
+      let initStartDate = new Date(setYear, 0, 1);
+      this.startDate = initStartDate;
+    },
+    setPeriodDay(day) {
+      this.periodDay = day;
+      this.endDate = new Date();
+      this.initSetStartDate();
+
+      this.closeDate('start');
+      this.closeDate('end');
+    },
+    selectedStartDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+      if (this.startDate > this.endDate) {
+        this.startDate = this.endDate;
+      }
+    },
+    selectedEndDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+    },
+    closeDate(type) {
+      if (type != undefined && type != null) {
+          this.disabledSDate = {from: this.endDate};
+          this.disabledEDate = {to: this.startDate, from: new Date()};
+      }
+    },
+
+    notiDetailPop(props){
+      this.$refs.notiDetailModal.notiDetailModalOpen(props);
+    }
+
+
+
+
+  },
+  beforeRouteLeave(to, from, next) {
+    const getP = this.$refs.table.getPagination();
+    this.$store.commit('searchcondition/updateSearchCondition', {
+      params: this.grid.params,
+    });
+    // 라우트 하기전 실행
+    next();
+  },
+};
+</script>