tab, component, popup 변경

pages/[tabId]/admin/logs.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="logs-page">
+    <div class="page-header">
+      <div class="breadcrumb">관리자 메뉴 / 접속기록</div>
+    </div>
+    <div class="filter-section">
+      <label for="date-input">날짜 설정</label>
+      <input id="date-input" v-model="selectedDate" type="date" />
+    </div>
+    <div class="aggrid-section">
+      <div class="aggrid-container">
+        <ag-grid-vue
+          class="ag-theme-material"
+          style="width: 100%; height: 220px"
+          :column-defs="colDefs"
+          :row-data="filteredRows"
+          :default-col-def="defaultColDef"
+        />
+      </div>
+    </div>
+    <div class="copyright">
+      © 2024. Ocean Monitoring System. All Rights Reserved.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { AgGridVue } from "ag-grid-vue3";
+import { ModuleRegistry, AllCommunityModule } from "ag-grid-community";
+import type { LogEntry, ColDef, DefaultColDef } from "~/types/ag-grid";
+
+onMounted(() => {
+  ModuleRegistry.registerModules([AllCommunityModule]);
+});
+
+const selectedDate = ref<string>("2025-06-27");
+const rows = ref<LogEntry[]>([
+  { account: "admin3", datetime: "Jun 27, 2025, 9:51:04 AM", ip: "172.17.0.1" },
+  { account: "admin9", datetime: "Jun 27, 2025, 8:51:41 AM", ip: "172.17.0.1" },
+]);
+
+const colDefs = ref<ColDef[]>([
+  { headerName: "계정", field: "account", width: 160 },
+  { headerName: "접속 일시", field: "datetime", width: 200 },
+  { headerName: "IP", field: "ip", width: 160 },
+]);
+
+const defaultColDef = ref<DefaultColDef>({
+  resizable: true,
+  sortable: true,
+  filter: true,
+  minWidth: 80,
+});
+
+const filteredRows = computed<LogEntry[]>(() => {
+  // 실제 구현시 날짜 필터링 적용
+  return rows.value;
+});
+</script>
+
+<style scoped>
+.logs-page {
+  padding: 32px 32px 0 32px;
+}
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 18px;
+}
+.breadcrumb {
+  font-size: 1.08rem;
+  color: #1976d2;
+  font-weight: 500;
+}
+.filter-section {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 18px;
+  margin-left: 2px;
+}
+.filter-section label {
+  font-size: 1rem;
+  color: #222;
+  font-weight: 500;
+}
+.filter-section input[type="date"] {
+  border: 1px solid #e0e7ef;
+  border-radius: 5px;
+  padding: 6px 12px;
+  font-size: 1rem;
+  color: #222;
+  background: #f4f6fa;
+}
+.aggrid-section {
+  margin-bottom: 32px;
+}
+.aggrid-container {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
+  padding: 18px 18px 0 18px;
+}
+.table-info {
+  font-size: 0.98rem;
+  color: #666;
+  margin-bottom: 12px;
+}
+.copyright {
+  text-align: right;
+  color: #888;
+  font-size: 0.98rem;
+  margin: 32px 8px 0 0;
+  padding-bottom: 18px;
+}
+</style>