[관리자관리] url 수정

app/layouts/admin.vue

@@ -18,9 +18,9 @@
       path: "/site-manager/dashboard",
     },
     {
-      id: "admins",
+      id: "admin",
       title: "🔑 관리자 관리",
-      path: "/site-manager/admins",
+      path: "/site-manager/admin/list",
     },
     {
       id: "field",

app/pages/site-manager/admin/list.vue

@@ -0,0 +1,311 @@
+<template>
+  <div class="admin--field-list">
+    <!-- 상단 검색/액션 영역 -->
+    <div class="admin--search-box">
+      <div class="admin--search-form">
+        <select v-model="searchField" class="admin--form-select admin--search-select">
+          <option value="">전체</option>
+          <option value="username">아이디</option>
+          <option value="name">이름</option>
+          <option value="email">이메일</option>
+        </select>
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="검색어 입력"
+          @keyup.enter="onSearch"
+          class="admin--form-input admin--search-input"
+        />
+        <select v-model="filterPartnership" @change="onSearch" class="admin--form-select admin--search-select">
+          <option value="">전체</option>
+          <option value="N">슈퍼 관리자</option>
+          <option value="N">관리자 관리</option>
+          <option value="Y">아이템 관리</option>
+          <option value="Y">퀘스트 관리</option>
+          <option value="Y">챌린지 관리</option>
+        </select>
+        <select v-model="filterStatus" @change="onSearch" class="admin--form-select admin--search-select">
+          <option value="">전체</option>
+          <option value="Y">활성</option>
+          <option value="N">휴면</option>
+          <option value="N">정지</option>
+        </select>
+        <button @click="onSearch" class="admin--btn-small admin--btn-small-primary">검색</button>
+        <button @click="resetSearch" class="admin--btn-small admin--btn-small-secondary">초기화</button>
+      </div>
+      <div class="admin--search-actions">
+        <button class="admin--btn-add" @click="goToCreate">+ 관리자 추가</button>
+      </div>
+    </div>
+
+    <!-- 테이블 -->
+    <div class="admin--table-wrapper">
+      <table class="admin--table">
+        <thead>
+          <tr>
+            <th style="width: 80px;"></th>
+            <th style="width: 140px;">아이디</th>
+            <th style="width: 140px;">이름</th>
+            <th>핸드폰</th>
+            <th style="width: 100px;">이메일</th>
+            <th style="width: 100px;">권한</th>
+            <th style="width: 120px;">최근 로그인</th>
+            <th>상태</th>
+            <th style="width: 120px;">관리</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="isLoading">
+            <td colspan="8" class="admin--table-loading">데이터를 불러오는 중...</td>
+          </tr>
+          <tr v-else-if="!onboards || onboards.length === 0">
+            <td colspan="8" class="admin--table-empty">등록된 관리자가 없습니다.</td>
+          </tr>
+          <tr
+            v-else
+            v-for="(item, index) in onboards"
+            :key="item.id"
+            class="admin--table-row-clickable"
+            @click="goToDetail(item.id)"
+          >
+            <td class="date">{{ totalCount - ((currentPage - 1) * perPage + index) }}</td>
+            <td>{{ item.field_name || "-" }}</td>
+            <td>{{ item.area_name || "-" }}</td>
+            <td class="admin--table-title">{{ item.name }}</td>
+            <td>
+              <span :class="['admin--badge', item.partnership_YN === 'Y' ? 'admin--badge-active' : 'admin--badge-ended']">
+                {{ item.partnership_YN === "Y" ? "제휴" : "비제휴" }}
+              </span>
+            </td>
+            <td>
+              <span :class="['admin--badge', getStatusBadgeClass(item.status_YN)]">
+                {{ getStatusLabel(item.status_YN) }}
+              </span>
+            </td>
+            <td class="date">{{ formatDate(item.created_at) }}</td>
+            <td>
+              <div class="admin--table-actions">
+                <button class="admin--btn-small admin--btn-blue" @click.stop="goToEdit(item.id)">
+                  수정
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 페이지네이션 -->
+    <div v-if="totalPages > 1" class="admin--pagination">
+      <button
+        v-if="totalPages > 2"
+        class="admin--pagination-btn"
+        :disabled="currentPage === 1"
+        @click="changePage(1)"
+        title="처음"
+      >
+        ◀◀
+      </button>
+      <button
+        class="admin--pagination-btn"
+        :disabled="currentPage === 1"
+        @click="changePage(currentPage - 1)"
+        title="이전"
+      >
+        ◀
+      </button>
+      <button
+        v-for="page in visiblePages"
+        :key="page"
+        class="admin--pagination-btn"
+        :class="{ 'is-active': page === currentPage }"
+        @click="changePage(page)"
+      >
+        {{ page }}
+      </button>
+      <button
+        class="admin--pagination-btn"
+        :disabled="currentPage === totalPages"
+        @click="changePage(currentPage + 1)"
+        title="다음"
+      >
+        ▶
+      </button>
+      <button
+        v-if="totalPages > 2"
+        class="admin--pagination-btn"
+        :disabled="currentPage === totalPages"
+        @click="changePage(totalPages)"
+        title="끝"
+      >
+        ▶▶
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted } from "vue";
+  import { useRouter } from "vue-router";
+  import DatePicker from "~/components/admin/DatePicker.vue";
+
+  definePageMeta({
+    layout: "admin",
+    middleware: ["auth"],
+  });
+
+  const router = useRouter();
+  const { get } = useApi();
+
+  const isLoading = ref(false);
+  const onboards = ref([]);
+  const currentPage = ref(1);
+  const perPage = ref(10);
+  const totalCount = ref(0);
+  const totalPages = ref(0);
+
+  const searchField = ref("");      // '', field, area, name
+  const searchQuery = ref("");
+  const filterPartnership = ref(""); // '', Y, N
+  const filterStatus = ref("");      // '', Y, N
+  const startDate = ref("");         // YYYY-MM-DD
+  const endDate = ref("");           // YYYY-MM-DD
+
+  // YYYY-MM-DD 포맷터
+  const toYMD = (d) => {
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
+  };
+
+  // 빠른 기간 선택 (오늘 기준)
+  const setRange = (kind) => {
+    const today = new Date();
+    const end = toYMD(today);
+    const startDt = new Date();
+    switch (kind) {
+      case "today":
+        break;
+      case "7d":
+        startDt.setDate(startDt.getDate() - 7);
+        break;
+      case "15d":
+        startDt.setDate(startDt.getDate() - 15);
+        break;
+      case "1m":
+        startDt.setMonth(startDt.getMonth() - 1);
+        break;
+      case "3m":
+        startDt.setMonth(startDt.getMonth() - 3);
+        break;
+      case "1y":
+        startDt.setFullYear(startDt.getFullYear() - 1);
+        break;
+    }
+    startDate.value = toYMD(startDt);
+    endDate.value = end;
+    onSearch();
+  };
+
+  // 보이는 페이지 번호 계산
+  const visiblePages = computed(() => {
+    const pages = [];
+    const maxVisible = 5;
+    let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2));
+    let end = Math.min(totalPages.value, start + maxVisible - 1);
+
+    if (end - start < maxVisible - 1) {
+      start = Math.max(1, end - maxVisible + 1);
+    }
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+    return pages;
+  });
+
+  // 데이터 로드
+  const loadOnboards = async () => {
+    isLoading.value = true;
+
+    const params = {
+      page: currentPage.value,
+      per_page: perPage.value,
+    };
+    if (searchQuery.value) {
+      params.search = searchQuery.value;
+      if (searchField.value) params.search_field = searchField.value;
+    }
+    if (filterPartnership.value) params.partnership = filterPartnership.value;
+    if (filterStatus.value) params.status = filterStatus.value;
+    if (startDate.value) params.start_date = startDate.value;
+    if (endDate.value) params.end_date = endDate.value;
+
+    const { data, error } = await get("/admin", { params });
+
+    if (error) {
+      console.error("[OnboardList] 목록 로드 실패:", error);
+      onboards.value = [];
+      totalCount.value = 0;
+      totalPages.value = 0;
+    } else if (data?.success && data?.data) {
+      onboards.value = data.data.items || [];
+      totalCount.value = data.data.total || 0;
+      totalPages.value = data.data.total_pages || 0;
+    }
+
+    isLoading.value = false;
+  };
+
+  // 검색
+  const onSearch = () => {
+    currentPage.value = 1;
+    loadOnboards();
+  };
+
+  // 검색 초기화
+  const resetSearch = () => {
+    searchField.value = "";
+    searchQuery.value = "";
+    filterPartnership.value = "";
+    filterStatus.value = "";
+    startDate.value = "";
+    endDate.value = "";
+    currentPage.value = 1;
+    loadOnboards();
+  };
+
+  // 페이지 변경
+  const changePage = (page) => {
+    if (page < 1 || page > totalPages.value) return;
+    currentPage.value = page;
+    loadOnboards();
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  // 이동
+  const goToCreate = () => router.push("/site-manager/onboard/create");
+  const goToDetail = (id) => router.push(`/site-manager/onboard/detail/${id}`);
+  const goToEdit = (id) => router.push(`/site-manager/onboard/edit/${id}`);
+
+  // 상태 라벨 / 뱃지 클래스
+  const getStatusLabel = (status) => (status === "Y" ? "사용중" : "미사용");
+  const getStatusBadgeClass = (status) =>
+    status === "Y" ? "admin--badge-active" : "admin--badge-ended";
+
+  // 날짜 포맷
+  const formatDate = (dateString) => {
+    if (!dateString) return "-";
+    const date = new Date(dateString.replace(" ", "T"));
+    if (isNaN(date.getTime())) return dateString;
+    return date.toLocaleDateString("ko-KR", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    });
+  };
+
+  onMounted(() => {
+    loadOnboards();
+  });
+</script>

app/pages/site-manager/admins/index.vue

@@ -1,471 +0,0 @@
-<template>
-  <div class="admin--admins">
-    <div class="admin--page-header">
-      <h3>관리자 관리</h3>
-      <button @click="openCreateModal" class="admin--btn-small admin--btn-small-primary">
-        + 관리자 추가
-      </button>
-    </div>
-
-    <!-- 검색 영역 -->
-    <div class="admin--search-box">
-      <div class="admin--search-form">
-        <select v-model="filterRole" @change="loadAdmins" class="admin--form-select admin--search-select">
-          <option value="">전체 역할</option>
-          <option value="super_admin">슈퍼 관리자</option>
-          <option value="admin">일반 관리자</option>
-        </select>
-        <select v-model="filterStatus" @change="loadAdmins" class="admin--form-select admin--search-select">
-          <option value="">전체 상태</option>
-          <option value="active">활성</option>
-          <option value="inactive">비활성</option>
-        </select>
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="아이디, 이름으로 검색"
-          @keyup.enter="loadAdmins"
-          class="admin--form-input admin--search-input"
-        />
-        <button @click="loadAdmins" class="admin--btn-small admin--btn-small-primary">
-          검색
-        </button>
-        <button @click="resetSearch" class="admin--btn-small admin--btn-small-secondary">
-          초기화
-        </button>
-      </div>
-    </div>
-
-    <!-- 관리자 목록 테이블 -->
-    <div class="admin--table-container">
-      <table class="admin--table">
-        <thead>
-          <tr>
-            <th>ID</th>
-            <th>아이디</th>
-            <th>이름</th>
-            <th>이메일</th>
-            <th>부서</th>
-            <th>역할</th>
-            <th>상태</th>
-            <th>생성일</th>
-            <th>관리</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-if="loading">
-            <td colspan="9" class="admin--loading">로딩 중...</td>
-          </tr>
-          <tr v-else-if="admins.length === 0">
-            <td colspan="9" class="admin--no-data">관리자가 없습니다.</td>
-          </tr>
-          <tr v-else v-for="admin in admins" :key="admin.id">
-            <td>{{ admin.id }}</td>
-            <td>{{ admin.username }}</td>
-            <td>{{ admin.name }}</td>
-            <td>{{ admin.email }}</td>
-            <td>{{ admin.department || '-' }}</td>
-            <td>
-              <span :class="['admin--badge', getRoleBadgeClass(admin.role)]">
-                {{ getRoleLabel(admin.role) }}
-              </span>
-            </td>
-            <td>
-              <div style="display: flex; gap: 4px; align-items: center;">
-                <span :class="['admin--badge', getStatusBadgeClass(admin.status)]">
-                  {{ getStatusLabel(admin.status) }}
-                </span>
-                <span v-if="admin.login_attempts >= 5" class="admin--badge admin--badge-danger" title="로그인 5회 실패로 계정 잠김">
-                  🔒 잠김
-                </span>
-              </div>
-            </td>
-            <td>{{ formatDate(admin.created_at) }}</td>
-            <td>
-              <div class="admin--table-actions admin--table-actions-col">
-                <button @click="openEditModal(admin)" class="admin--btn-small admin--btn-small-primary">
-                  수정
-                </button>
-                <button @click="openPasswordModal(admin)" class="admin--btn-small admin--btn-small-secondary">
-                  비밀번호
-                </button>
-                <button
-                  v-if="admin.login_attempts >= 5"
-                  @click="confirmUnlockAccount(admin)"
-                  class="admin--btn-small admin--btn-small-warning"
-                  title="계정 잠금 해제"
-                >
-                  잠금해제
-                </button>
-                <button
-                  @click="confirmDeleteAdmin(admin)"
-                  class="admin--btn-small admin--btn-small-danger"
-                  :disabled="admin.id === currentAdminId"
-                >
-                  삭제
-                </button>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <!-- 페이지네이션 -->
-    <div class="admin--pagination" v-if="totalPages > 1">
-      <button
-        @click="changePage(currentPage - 1)"
-        :disabled="currentPage === 1"
-        class="admin--btn-page"
-      >
-        이전
-      </button>
-      <span class="admin--page-info">
-        {{ currentPage }} / {{ totalPages }}
-      </span>
-      <button
-        @click="changePage(currentPage + 1)"
-        :disabled="currentPage === totalPages"
-        class="admin--btn-page"
-      >
-        다음
-      </button>
-    </div>
-
-    <!-- 관리자 추가/수정 모달 -->
-    <AdminModal
-      v-if="showModal"
-      :admin="selectedAdmin"
-      @close="closeModal"
-      @saved="handleSaved"
-    />
-
-    <!-- 비밀번호 변경 모달 -->
-    <PasswordModal
-      v-if="showPasswordModal"
-      :admin="selectedAdmin"
-      @close="closePasswordModal"
-      @saved="handlePasswordChanged"
-    />
-
-    <!-- 알림 모달 -->
-    <AdminAlertModal
-      v-if="alertModal.show"
-      :title="alertModal.title"
-      :message="alertModal.message"
-      :type="alertModal.type"
-      @confirm="handleAlertConfirm"
-      @cancel="handleAlertCancel"
-      @close="closeAlertModal"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, computed } from 'vue'
-import AdminAlertModal from '~/components/admin/AdminAlertModal.vue'
-import AdminModal from '~/components/admin/AdminModal.vue'
-import PasswordModal from '~/components/admin/PasswordModal.vue'
-
-definePageMeta({
-  layout: 'admin',
-  middleware: ['auth']
-})
-
-const { get, del, post } = useApi()
-
-// 현재 로그인한 관리자 ID
-const currentAdminId = computed(() => {
-  if (typeof window === 'undefined') return null
-  const user = localStorage.getItem('admin_user')
-  if (!user) return null
-  try {
-    return JSON.parse(user).id
-  } catch {
-    return null
-  }
-})
-
-// 데이터
-const admins = ref([])
-const loading = ref(false)
-const searchQuery = ref('')
-const filterRole = ref('')
-const filterStatus = ref('')
-
-// 페이지네이션
-const currentPage = ref(1)
-const totalPages = ref(1)
-const perPage = ref(10)
-
-// 모달
-const showModal = ref(false)
-const showPasswordModal = ref(false)
-const selectedAdmin = ref(null)
-
-// 알림 모달
-const alertModal = ref({
-  show: false,
-  title: '알림',
-  message: '',
-  type: 'alert',
-  onConfirm: null
-})
-
-// 알림 모달 표시
-const showAlert = (message, title = '알림') => {
-  alertModal.value = {
-    show: true,
-    title,
-    message,
-    type: 'alert',
-    onConfirm: null
-  }
-}
-
-// 확인 모달 표시
-const showConfirm = (message, onConfirm, title = '확인') => {
-  alertModal.value = {
-    show: true,
-    title,
-    message,
-    type: 'confirm',
-    onConfirm
-  }
-}
-
-// 알림 모달 닫기
-const closeAlertModal = () => {
-  alertModal.value.show = false
-}
-
-// 알림 모달 확인
-const handleAlertConfirm = () => {
-  if (alertModal.value.onConfirm) {
-    alertModal.value.onConfirm()
-  }
-  closeAlertModal()
-}
-
-// 알림 모달 취소
-const handleAlertCancel = () => {
-  closeAlertModal()
-}
-
-// 관리자 목록 로드
-const loadAdmins = async () => {
-  loading.value = true
-  try {
-    const params = {
-      page: currentPage.value,
-      per_page: perPage.value
-    }
-
-    if (searchQuery.value) {
-      params.search = searchQuery.value
-    }
-    if (filterRole.value) {
-      params.role = filterRole.value
-    }
-    if (filterStatus.value) {
-      params.status = filterStatus.value
-    }
-
-    console.log('[Admins] 검색 파라미터:', params)
-
-    const { data, error } = await get('/admin', { params })
-
-    if (error) {
-      console.error('[Admins] 목록 로드 실패:', error)
-      return
-    }
-
-    // API 응답: { success: true, data: { items, total_pages }, message }
-    if (data?.success && data?.data) {
-      admins.value = data.data.items || []
-      totalPages.value = data.data.total_pages || 1
-      console.log('[Admins] 목록 로드 성공:', data.data)
-      console.log('[Admins] 첫번째 관리자 login_attempts:', admins.value[0]?.login_attempts)
-      console.log('[Admins] 잠긴 계정 수:', admins.value.filter(a => a.login_attempts >= 5).length)
-    }
-  } finally {
-    loading.value = false
-  }
-}
-
-// 페이지 변경
-const changePage = (page) => {
-  if (page < 1 || page > totalPages.value) return
-  currentPage.value = page
-  loadAdmins()
-}
-
-// 검색 초기화
-const resetSearch = () => {
-  searchQuery.value = ''
-  filterRole.value = ''
-  filterStatus.value = ''
-  currentPage.value = 1
-  loadAdmins()
-}
-
-// 모달 열기/닫기
-const openCreateModal = () => {
-  selectedAdmin.value = null
-  showModal.value = true
-}
-
-const openEditModal = (admin) => {
-  selectedAdmin.value = { ...admin }
-  showModal.value = true
-}
-
-const closeModal = () => {
-  showModal.value = false
-  selectedAdmin.value = null
-}
-
-const handleSaved = (message) => {
-  closeModal()
-  loadAdmins()
-  if (message) {
-    showAlert(message, '성공')
-  }
-}
-
-// 비밀번호 모달
-const openPasswordModal = (admin) => {
-  selectedAdmin.value = { ...admin }
-  showPasswordModal.value = true
-}
-
-const closePasswordModal = () => {
-  showPasswordModal.value = false
-  selectedAdmin.value = null
-}
-
-const handlePasswordChanged = (message) => {
-  closePasswordModal()
-  if (message) {
-    showAlert(message, '성공')
-  }
-}
-
-// 관리자 삭제 확인
-const confirmDeleteAdmin = (admin) => {
-  if (admin.id === currentAdminId.value) {
-    showAlert('본인 계정은 삭제할 수 없습니다.', '경고')
-    return
-  }
-
-  showConfirm(
-    `${admin.name} (${admin.username}) 관리자를 삭제하시겠습니까?`,
-    () => deleteAdmin(admin),
-    '관리자 삭제'
-  )
-}
-
-// 관리자 삭제
-const deleteAdmin = async (admin) => {
-  const { data, error } = await del(`/admin/${admin.id}`)
-
-  if (error) {
-    showAlert('관리자 삭제에 실패했습니다.', '오류')
-    console.error('[Admins] 삭제 실패:', error)
-    return
-  }
-
-  if (data?.success) {
-    showAlert('관리자가 삭제되었습니다.', '성공')
-    loadAdmins()
-  }
-}
-
-// 계정 잠금 해제 확인
-const confirmUnlockAccount = (admin) => {
-  showConfirm(
-    `${admin.name} (${admin.username}) 계정의 잠금을 해제하시겠습니까?`,
-    () => unlockAccount(admin),
-    '계정 잠금 해제'
-  )
-}
-
-// 계정 잠금 해제
-const unlockAccount = async (admin) => {
-  const { data, error } = await post(`/admin/${admin.id}/unlock`)
-
-  if (error) {
-    showAlert('계정 잠금 해제에 실패했습니다.', '오류')
-    console.error('[Admins] 잠금 해제 실패:', error)
-    return
-  }
-
-  if (data?.success) {
-    showAlert('계정 잠금이 해제되었습니다.', '성공')
-    loadAdmins()
-  }
-}
-
-// 유틸리티 함수
-const getRoleLabel = (role) => {
-  const labels = {
-    super_admin: '슈퍼 관리자',
-    admin: '일반 관리자'
-  }
-  return labels[role] || role
-}
-
-const getRoleBadgeClass = (role) => {
-  return role === 'super_admin' ? 'admin--badge-danger' : 'admin--badge-primary'
-}
-
-const getStatusLabel = (status) => {
-  const labels = {
-    active: '활성',
-    inactive: '비활성'
-  }
-  return labels[status] || status
-}
-
-const getStatusBadgeClass = (status) => {
-  return status === 'active' ? 'admin--badge-success' : 'admin--badge-secondary'
-}
-
-const formatDate = (dateString) => {
-  if (!dateString) return '-'
-  const date = new Date(dateString)
-  return date.toLocaleString('ko-KR', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-}
-
-onMounted(() => {
-  loadAdmins()
-})
-</script>
-
-<style scoped>
-.admin--search-box .admin--form-input,
-.admin--search-box .admin--search-input,
-.admin--search-box .admin--form-select,
-.admin--search-box .admin--search-select {
-  border: 1px solid var(--admin-border-color) !important;
-  height: 33px !important;
-  padding: 6px 14px !important;
-  font-size: 13px !important;
-}
-
-.admin--btn-small-warning {
-  background: #ff9800;
-  color: #ffffff;
-  border: none;
-}
-
-.admin--btn-small-warning:hover:not(:disabled) {
-  background: #f57c00;
-}
-</style>