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

<template>
  <div class="">
    <form @submit.prevent="handleSubmit" class="admin--form">
      <!-- 낚시분야 -->
      <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~30자 이내. 중복 불가</p>
              </div>
            </td>
          </tr>
          <tr>
            <th>
              <div>
                가중치 <span class="admin--required">*</span>
              </div>
            </th>
            <td>
              <div class="input--wrap">
                <input
                v-model="formData.weight"
                type="text"
                class="admin--form-input"
                placeholder=""
                required
                />
                <p>0.0 ~ 1.0 사이 소수점 1자리 (최대값 1.0 = 100% 확률). 물고기 잡을 때 아이템 지급 확률</p>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="admin--info--box">
        <h2>💡 가중치 안내</h2>
        <ul>
          <li>가중치 = 해당 분야에서 물고기 잡았을 때 아이템이 지급될 확률 (최대값 1.0 = 100%)</li>
          <li>예: 0.8 = 80% 확률로 아이템 드롭. 분야별 난이도/희소성에 맞춰 신중히 설정</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>
</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 = "";

    // 유효성 검사
    if (!formData.value.name) {
      errorMessage.value = "분야명을 입력하세요.";
      return;
    }
    if (!formData.value.weight) {
      errorMessage.value = "가중치를 입력하세요.";
      return;
    }
    isSaving.value = true;

    try {
      const { data, error } = await post("/branch", formData.value);

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

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