diff --git a/hwe/ts/PageHistory.vue b/hwe/ts/PageHistory.vue
new file mode 100644
index 00000000..49ac6300
--- /dev/null
+++ b/hwe/ts/PageHistory.vue
@@ -0,0 +1,121 @@
+<template>
+  <div>연감</div>
+  <div v-if="history">
+    있음
+    <div v-for="date of generateYearMonthList()" :key="date.yearMonth" @click="queryYearMonth = date.yearMonth">
+      {{ date.year }}년 {{ date.month }}월 {{ date.queried ? `선택` : "" }} {{ date.current ? "현재" : "" }}
+    </div>
+    <div>
+      <pre v-for="(item, idx) in history.global_action" :key="idx">{{item}}</pre>
+    </div>
+    <div>
+      <pre v-for="(item, idx) in history.global_history" :key="idx">{{item}}</pre>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+declare const staticValues: {
+  fisrtYearMonth: number;
+  lastYearMonth: number;
+  currentYearMonth: number;
+  serverNick: string;
+  serverID: string;
+};
+declare const query: {
+  yearMonth: number | null;
+  serverID: string;
+};
+</script>
+<script lang="ts" setup>
+import { onMounted, ref, watch } from "vue";
+import type { HistoryObj } from "./defs/API/Global";
+import { SammoAPI } from "./SammoAPI";
+import { joinYearMonth } from "./util/joinYearMonth";
+import { parseYearMonth } from "./util/parseYearMonth";
+
+const queryYearMonth = ref<number>();
+const queryServerID = query.serverID;
+
+const lastYearMonth = ref(staticValues.lastYearMonth);
+const firstYearMonth = ref(staticValues.fisrtYearMonth);
+const currentYearMonth = ref(staticValues.currentYearMonth);
+
+const history = ref<HistoryObj>();
+
+function* generateYearMonthList(): Generator<{
+  year: number;
+  month: number;
+  yearMonth: number;
+  current?: true;
+  queried: boolean;
+}> {
+  let yearMonth = firstYearMonth.value;
+  while (yearMonth <= lastYearMonth.value) {
+    const [year, month] = parseYearMonth(yearMonth);
+    yield {
+      year,
+      month,
+      yearMonth,
+      queried: queryYearMonth.value === yearMonth,
+    };
+    yearMonth++;
+  }
+  const [year, month] = parseYearMonth(yearMonth);
+  yield {
+    year,
+    month,
+    yearMonth,
+    current: true,
+    queried: queryYearMonth.value === yearMonth,
+  };
+}
+
+watch(queryYearMonth, async (yearMonth) => {
+  if (yearMonth === undefined) {
+    return;
+  }
+
+  if (yearMonth > lastYearMonth.value) {
+    try {
+      const result = await SammoAPI.Global.GetCurrentHistory();
+      history.value = result.data;
+      console.log(result);
+      const newLastYearMonth = joinYearMonth(result.data.year, result.data.month) - 1;
+      if (newLastYearMonth > lastYearMonth.value) {
+        lastYearMonth.value = newLastYearMonth;
+        currentYearMonth.value = newLastYearMonth + 1;
+      }
+    } catch (e) {
+      console.error(e);
+      return;
+    }
+    return;
+  }
+
+  const [year, month] = parseYearMonth(yearMonth);
+  try {
+    const result = await SammoAPI.Global.GetHistory[queryServerID][year][month]();
+    history.value = result.data;
+    console.log(result);
+  } catch (e) {
+    console.error(e);
+    return;
+  }
+});
+
+onMounted(() => {
+  queryYearMonth.value = (() => {
+    if (query.yearMonth === null) {
+      return staticValues.currentYearMonth;
+    }
+    if (query.yearMonth > staticValues.lastYearMonth + 1) {
+      return staticValues.currentYearMonth;
+    }
+    if (query.yearMonth < staticValues.fisrtYearMonth) {
+      return staticValues.currentYearMonth;
+    }
+    return query.yearMonth;
+  })();
+});
+</script>
diff --git a/hwe/ts/build_exports.json b/hwe/ts/build_exports.json
index 20a1c1ce..a2200c25 100644
--- a/hwe/ts/build_exports.json
+++ b/hwe/ts/build_exports.json
@@ -28,6 +28,7 @@
         "v_NPCControl": "v_NPCControl.ts",
         "v_join": "v_join.ts",
         "v_main": "v_main.ts",
+        "v_history": "v_history.ts",
         "v_nationStratFinan": "v_nationStratFinan.ts",
         "v_processing": "v_processing.ts",
         "v_nationBetting": "v_nationBetting.ts",
diff --git a/hwe/ts/v_history.ts b/hwe/ts/v_history.ts
new file mode 100644
index 00000000..938f1a28
--- /dev/null
+++ b/hwe/ts/v_history.ts
@@ -0,0 +1,16 @@
+import "@scss/board.scss";
+import { createApp } from 'vue'
+import PageHistory from '@/PageHistory.vue';
+import BootstrapVue3 from 'bootstrap-vue-3'
+import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
+import { auto500px } from "./util/auto500px";
+import { htmlReady } from "./util/htmlReady";
+import { insertCustomCSS } from "./util/customCSS";
+
+setAxiosXMLHttpRequest();
+auto500px();
+
+htmlReady(() => {
+  insertCustomCSS();
+});
+createApp(PageHistory).use(BootstrapVue3).mount('#app');
\ No newline at end of file
diff --git a/hwe/v_history.php b/hwe/v_history.php
new file mode 100644
index 00000000..5c937d5f
--- /dev/null
+++ b/hwe/v_history.php
@@ -0,0 +1,55 @@
+<?php
+
+namespace sammo;
+
+include "lib.php";
+include "func.php";
+//로그인 검사
+$session = Session::requireGameLogin()->setReadOnly();
+$userID = Session::getUserID();
+
+$db = DB::db();
+$gameStor = KVStorage::getStorage($db, 'game_env');
+
+$serverID = Util::getReq('serverID', 'string', null);
+if (!$serverID) {
+  $serverID = UniqueConst::$serverID;
+}
+
+[$f_year, $f_month] = $db->queryFirstList('SELECT year, month FROM ng_history WHERE server_id = %s ORDER BY year ASC, month ASC LIMIT 1', $serverID);
+[$l_year, $l_month] = $db->queryFirstList('SELECT year, month FROM ng_history WHERE server_id = %s ORDER BY year DESC, month DESC LIMIT 1', $serverID);
+[$currentYear, $currentMonth] = $gameStor->getValuesAsArray(['year', 'month']);
+
+$me = $db->queryFirstRow('SELECT con, turntime FROM general WHERE owner = %i', $userID);
+
+?>
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title><?= UniqueConst::$serverName ?>:연감</title>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=500" />
+  <?= WebUtil::printJS('../d_shared/common_path.js', true) ?>
+  <?= WebUtil::printStaticValues([
+    'staticValues' => [
+      'fisrtYearMonth' => Util::joinYearMonth($f_year, $f_month),
+      'lastYearMonth' => Util::joinYearMonth($l_year, $l_month),
+      'currentYearMonth' => Util::joinYearMonth($currentYear, $currentMonth),
+      'serverNick' => DB::prefix(),
+      'serverID' => UniqueConst::$serverID,
+    ],
+    'query' => [
+      'serverID' => $serverID,
+      'yearMonth' => Util::getReq('yearMonth', 'int'),
+    ],
+  ]) ?>
+  <?= WebUtil::printDist('vue', 'v_history', true) ?>
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+
+</html>
\ No newline at end of file