piratezon_new/app/pages/site-manager/admin/create.vue

<template>
  <div class="admin--page-content">
    <div class="admin--form">
      <form @submit.prevent="handleSubmit">
        <table class="admin--form--table">
          <colgroup>
            <col style="width: 140px;">
            <col>
          </colgroup>
          <tbody>
            <tr>
              <th><div>아이디 <span class="admin--required">*</span></div></th>
              <td>
                <div class="input--wrap">
                  <input
                    v-model="formData.username"
                    type="text"
                    class="admin--form-input w--280"
                    placeholder="4~20자 영문/숫자"
                    maxlength="20"
                    autocomplete="off"
                    @input="resetUsernameCheck"
                  />
                  <button type="button" class="admin--btn-small admin--btn-blue ml--8" @click="checkUsername">
                    중복체크
                  </button>
                  <span v-if="usernameStatus.message" :class="['ml--16', usernameStatus.ok ? 'txt--ok' : 'txt--error']">
                    {{ usernameStatus.message }}
                  </span>
                </div>
                <p class="mt--10">4~20자, 영문/숫자 조합. 등록 후 변경 불가.</p>
              </td>
            </tr>
            <tr>
              <th><div>비밀번호 <span class="admin--required">*</span></div></th>
              <td>
                <div class="input--wrap">
                  <input
                    v-model="formData.password"
                    type="password"
                    class="admin--form-input w--280"
                    placeholder="8자 이상 입력하세요"
                    autocomplete="new-password"
                  />
                </div>
              </td>
            </tr>
            <tr>
              <th><div>비밀번호 확인 <span class="admin--required">*</span></div></th>
              <td>
                <div class="input--wrap">
                  <input
                    v-model="formData.passwordConfirm"
                    type="password"
                    class="admin--form-input w--280"
                    placeholder="다시 한번 입력하세요"
                    autocomplete="new-password"
                  />
                  <span v-if="formData.passwordConfirm && !passwordMatch" class="ml--16 txt--error">비밀번호가 일치하지 않습니다.</span>
                  <span v-else-if="formData.passwordConfirm && passwordMatch" class="ml--16 txt--ok">일치</span>
                </div>
              </td>
            </tr>
            <tr>
              <th><div>이름 <span class="admin--required">*</span></div></th>
              <td>
                <div class="input--wrap">
                  <input v-model="formData.name" type="text" class="admin--form-input w--280" placeholder="" maxlength="30" />
                </div>
              </td>
            </tr>
            <tr>
              <th><div>핸드폰 <span class="admin--required">*</span></div></th>
              <td>
                <div class="input--wrap">
                  <select v-model="phone1" class="admin--form-select w--120">
                    <option value="010">010</option>
                    <option value="011">011</option>
                    <option value="016">016</option>
                    <option value="017">017</option>
                    <option value="018">018</option>
                    <option value="019">019</option>
                  </select>
                  <span class="mx--8">-</span>
                  <input
                    v-model="phone2"
                    type="text"
                    inputmode="numeric"
                    class="admin--form-input w--120"
                    maxlength="4"
                    placeholder=""
                    @input="onlyDigits('phone2')"
                  />
                  <span class="mx--8">-</span>
                  <input
                    v-model="phone3"
                    type="text"
                    inputmode="numeric"
                    class="admin--form-input w--120 "
                    maxlength="4"
                    placeholder=""
                    @input="onlyDigits('phone3')"
                  />
                </div>
              </td>
            </tr>
            <tr>
              <th><div>이메일 <span class="admin--required">*</span></div></th>
              <td>
                <div class="input--wrap">
                  <input
                    v-model="emailLocal"
                    type="text"
                    class="admin--form-input w--160"
                    placeholder="아이디"
                    maxlength="50"
                    autocomplete="off"
                  />
                  <span class="mx--8">@</span>
                  <input
                    v-model="emailDomain"
                    type="text"
                    class="admin--form-input w--160"
                    placeholder="domain.com"
                    maxlength="50"
                    :readonly="emailDomainSelect !== 'custom'"
                    autocomplete="off"
                  />
                  <select v-model="emailDomainSelect" @change="onDomainChange" class="admin--form-select w--160 ml--8">
                    <option value="">선택</option>
                    <option value="naver.com">naver.com</option>
                    <option value="gmail.com">gmail.com</option>
                    <option value="daum.net">daum.net</option>
                    <option value="hanmail.net">hanmail.net</option>
                    <option value="kakao.com">kakao.com</option>
                    <option value="nate.com">nate.com</option>
                    <option value="custom">직접입력</option>
                  </select>
                </div>
              </td>
            </tr>
            <tr>
              <th><div>권한 <span class="admin--required">*</span></div></th>
              <td>
                <div class="input--wrap">
                  <label class="admin--radio-label">
                    <input type="radio" v-model="formData.role" value="admin" /> 관리자
                  </label>
                  <label class="admin--radio-label ml--16" :class="{ 'is-disabled': !isSuperAdmin }">
                    <input type="radio" v-model="formData.role" value="super_admin" :disabled="!isSuperAdmin" />
                    슈퍼 관리자
                  </label>
                </div>
                <p v-if="!isSuperAdmin" class="mt--10 txt--muted">슈퍼 관리자 권한 부여는 슈퍼 관리자만 할 수 있습니다.</p>
                <p v-else-if="formData.role === 'super_admin'" class="mt--10">슈퍼 관리자는 모든 메뉴에 접근할 수 있습니다.</p>
              </td>
            </tr>
            <tr v-if="formData.role === 'admin'">
              <th><div>메뉴 권한 <span class="admin--required">*</span></div></th>
              <td>
                <div class="admin--permissions-grid">
                  <label v-for="opt in menuOptions" :key="opt.id" class="admin--checkbox-label">
                    <input type="checkbox" :value="opt.id" v-model="formData.permissions" />
                    {{ opt.title }}
                  </label>
                </div>
                <p class="mt--10">관리자가 접근할 수 있는 메뉴를 선택하세요. 대시보드는 모든 관리자에게 기본 제공됩니다.</p>
              </td>
            </tr>
          </tbody>
        </table>

        <!-- 버튼 영역 -->
        <div class="admin--form-actions">
          <button type="button" class="admin--btn" @click="goToList">
            ← 목록으로
          </button>
          <button type="submit" class="admin--btn admin--btn-red ml--auto" :disabled="isSaving">
            {{ isSaving ? "등록 중..." : "등록" }}
          </button>
        </div>
      </form>
    </div>

    <!-- 알림 모달 -->
    <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, computed } from "vue";
  import { useRouter } from "vue-router";
  import AdminAlertModal from "~/components/admin/AdminAlertModal.vue";

  definePageMeta({
    layout: "admin",
    middleware: ["auth"],
  });

  const router = useRouter();
  const { get, post } = useApi();
  const { isSuperAdmin } = useAuth();

  const isSaving = ref(false);

  const formData = ref({
    username: "",
    password: "",
    passwordConfirm: "",
    name: "",
    role: "admin",
    status: "active",
    permissions: [],   // role === 'admin'일 때 사용. value: menuItems의 id
  });

  // 메뉴 권한 옵션 (admin.vue의 menuItems와 동일 id 사용)
  // 메뉴별 id 변경 금지
  const menuOptions = [
    { id: "admin",     title: "관리자 관리" },
    { id: "field",     title: "분야 및 지역 관리" },
    { id: "fishing",   title: "선상 및 낚시터 관리" },
    { id: "challenge", title: "챌린지 관리" },
    { id: "quest",     title: "퀘스트 관리" },
    { id: "item",      title: "아이템 관리" },
    { id: "species",   title: "어종 관리" },
    { id: "user",      title: "회원 관리" },
  ];

  const isAllPermissionsSelected = computed(
    () => menuOptions.every((m) => formData.value.permissions.includes(m.id))
  );
  const isPartialPermissionsSelected = computed(
    () => formData.value.permissions.length > 0 && !isAllPermissionsSelected.value
  );
  const toggleAllPermissions = (checked) => {
    formData.value.permissions = checked ? menuOptions.map((m) => m.id) : [];
  };

  // 이메일 분할 입력
  const emailLocal = ref("");
  const emailDomain = ref("");
  const emailDomainSelect = ref("");   // 셀렉트 선택값. 'custom' 또는 도메인 문자열
  const onDomainChange = () => {
    if (emailDomainSelect.value === "custom") {
      emailDomain.value = "";   // 직접 입력하도록 비움
    } else if (emailDomainSelect.value !== "") {
      emailDomain.value = emailDomainSelect.value;
    }
  };

  // 핸드폰 분할 입력
  const phone1 = ref("010");
  const phone2 = ref("");
  const phone3 = ref("");
  const onlyDigits = (key) => {
    if (key === "phone2") phone2.value = phone2.value.replace(/\D/g, "");
    else if (key === "phone3") phone3.value = phone3.value.replace(/\D/g, "");
  };

  // 아이디 중복체크 상태
  // ok=true 사용가능, ok=false 사용불가, null 미체크
  const usernameStatus = ref({ checked: false, ok: null, message: "" });
  const resetUsernameCheck = () => {
    usernameStatus.value = { checked: false, ok: null, message: "" };
  };

  const passwordMatch = computed(
    () => formData.value.password && formData.value.password === formData.value.passwordConfirm
  );

  // 알림 모달
  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 closeAlertModal = () => { alertModal.value.show = false; };
  const handleAlertConfirm = () => {
    if (alertModal.value.onConfirm) alertModal.value.onConfirm();
    closeAlertModal();
  };
  const handleAlertCancel = () => closeAlertModal();

  // 아이디 중복체크
  const checkUsername = async () => {
    const username = formData.value.username.trim();
    if (!username) {
      usernameStatus.value = { checked: false, ok: false, message: "아이디를 입력하세요." };
      return;
    }
    if (username.length < 4 || username.length > 20) {
      usernameStatus.value = { checked: false, ok: false, message: "4~20자로 입력하세요." };
      return;
    }
    if (!/^[a-zA-Z0-9_]+$/.test(username)) {
      usernameStatus.value = { checked: false, ok: false, message: "영문/숫자/_만 사용 가능합니다." };
      return;
    }

    const { data, error } = await get("/admin/check-username", { params: { username } });
    if (error || !data?.success) {
      usernameStatus.value = { checked: false, ok: false, message: error?.message || data?.message || "중복 확인 실패" };
      return;
    }
    if (data.data?.available) {
      usernameStatus.value = { checked: true, ok: true, message: "사용 가능한 아이디입니다." };
    } else {
      usernameStatus.value = { checked: false, ok: false, message: "이미 사용 중인 아이디입니다." };
    }
  };

  // 폼 검증
  const validate = () => {
    const f = formData.value;
    const username = f.username.trim();
    if (!username) return "아이디를 입력하세요.";
    if (username.length < 4 || username.length > 20) return "아이디는 4~20자";
    if (!/^[a-zA-Z0-9_]+$/.test(username)) return "아이디는 영문/숫자/_만 사용";
    if (!usernameStatus.value.checked || !usernameStatus.value.ok) return "아이디 중복체크를 완료해주세요.";

    if (!f.password) return "비밀번호를 입력하세요.";
    if (f.password.length < 8) return "비밀번호는 8자 이상 입력해 주세요.";
    if (f.password !== f.passwordConfirm) return "비밀번호가 일치하지 않습니다.";

    const name = f.name.trim();
    if (!name) return "이름을 입력하세요.";
    if (name.length > 30) return "이름은 30자 이내";

    // 이메일
    const local = emailLocal.value.trim();
    const domain = emailDomain.value.trim();
    if (!local) return "이메일 아이디를 입력하세요.";
    if (!domain) return "이메일 도메인을 입력하거나 선택하세요.";
    const email = `${local}@${domain}`;
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return "이메일 형식이 올바르지 않습니다.";

    // 핸드폰
    if (!phone1.value) return "핸드폰 앞자리를 선택하세요.";
    if (!/^\d{3,4}$/.test(phone2.value)) return "핸드폰 가운데 자리(3~4자리 숫자)를 입력하세요.";
    if (!/^\d{4}$/.test(phone3.value)) return "핸드폰 끝자리(4자리 숫자)를 입력하세요.";

    if (!["super_admin", "admin"].includes(f.role)) return "권한을 선택하세요.";
    if (!["active", "inactive", "suspended"].includes(f.status)) return "상태를 선택하세요.";

    // 일반 관리자는 메뉴 권한 1개 이상 필요
    if (f.role === "admin" && f.permissions.length === 0) {
      return "관리자에게 부여할 메뉴 권한을 1개 이상 선택하세요.";
    }

    return null;
  };

  // 폼 제출
  const handleSubmit = async () => {
    const err = validate();
    if (err) {
      showAlert(err, "입력 오류");
      return;
    }

    isSaving.value = true;
    const f = formData.value;
    const payload = {
      username: f.username.trim(),
      password: f.password,
      name: f.name.trim(),
      email: `${emailLocal.value.trim()}@${emailDomain.value.trim()}`,
      phone: `${phone1.value}-${phone2.value}-${phone3.value}`,
      role: f.role,
      status: f.status,
      // 슈퍼관리자는 권한 row 안 박음 (role=super_admin 자체가 전권)
      permissions: f.role === "admin" ? f.permissions : [],
    };

    const { data, error } = await post("/admin", payload);
    isSaving.value = false;

    if (error || !data?.success) {
      showAlert(error?.message || data?.message || "등록에 실패했습니다.", "오류");
      return;
    }

    alertModal.value = {
      show: true,
      title: "성공",
      message: data.message || "관리자가 등록되었습니다.",
      type: "alert",
      onConfirm: () => router.push("/site-manager/admin/list"),
    };
    setTimeout(() => router.push("/site-manager/admin/list"), 800);
  };

  // 이동
  const goToList = () => router.push("/site-manager/admin/list");
</script>