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

<template>
  <div class="admin--page-content">
    <div class="admin--form">
      <form @submit.prevent="handleSubmit" class="">
        <!-- 낚시분야 -->
        <table class="admin--form--table">
          <colgroup>
            <col style="width: 120px;">
            <col>
          </colgroup>
          <tbody>
            <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"
                  placeholder="예: 부산/울산"
                  required
                  />
                  <p>시도 단위 지역명. 1~20자. 인접 시도 통합 시 슬래시(/) 사용 (예: 충남/세종)</p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
  
        <div class="admin--info--box">
          <h3>💡 지역 등록 안내</h3>
          <ul>
            <li>지역 = 회원 가입 시 선호 지역 선택 + 낚시어선/낚시터 분류 기준</li>
            <li>중복 등록 차단. 인접 시도 통합 표기 권장 (예: "충남" 대신 "충남/세종")</li>
          </ul>
        </div>
  
        <!-- 버튼 영역 -->
        <div class="admin--form-actions">
          <button type="button" class="admin--btn" @click="goToList">
            ← 목록으로
          </button>
          <!-- <button type="button" class="admin--btn admin--btn-red-border ml--auto" @click="">
            삭제
          </button> -->
          <button type="submit" class="admin--btn admin--btn-red ml--auto" :disabled="isSaving">
            {{ isSaving ? "저장 중..." : "저장" }}
          </button>
        </div>
  
        <!-- 성공/에러 메시지 -->
        <div v-if="successMessage" class="admin--alert admin--alert-success">
          {{ successMessage }}
        </div>
        <div v-if="errorMessage" class="admin--alert admin--alert-error">
          {{ errorMessage }}
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  import { useRouter } from "vue-router";

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

  const router = useRouter();
  const { post } = useApi();

  const isSaving = ref(false);
  const successMessage = ref("");
  const errorMessage = ref("");

  const formData = ref({
    name: "",
  });

  // 폼 제출
  const handleSubmit = async () => {
    successMessage.value = "";
    errorMessage.value = "";

    const name = formData.value.name.trim();

    // 유효성 검사
    if (!name) {
      errorMessage.value = "지역명을 입력하세요.";
      return;
    }
    if (name.length > 20) {
      errorMessage.value = "지역명은 20자 이내로 입력하세요.";
      return;
    }

    isSaving.value = true;

    try {
      const { data, error } = await post("/area", { name });

      if (error || !data?.success) {
        errorMessage.value = error?.message || data?.message || "등록에 실패했습니다.";
      } else {
        successMessage.value = data.message || "낚시지역이 등록되었습니다.";
        setTimeout(() => {
          router.push("/site-manager/area/list");
        }, 1000);
      }
    } catch (error) {
      errorMessage.value = "서버 오류가 발생했습니다.";
      console.error("Save error:", error);
    } finally {
      isSaving.value = false;
    }
  };

  // 목록으로 이동
  const goToList = () => {
    router.push("/site-manager/area/list");
  };
</script>