piratezon_new/app/pages/site-manager/field/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~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 w--120"
                  placeholder="0.0 ~ 1.0"
                  required
                  />
                  <p>0.0 ~ 1.0 사이 소수점 1자리 (최대값 1.0 = 100% 확률). 물고기 잡을 때 아이템 지급 확률</p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
  
        <div class="admin--info--box">
          <h3>💡 가중치 안내</h3>
          <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>
  </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: "",
    weight: "",
  });

  // 가중치 형식: 0.0 ~ 1.0, 소수점 1자리
  const WEIGHT_PATTERN = /^(0(\.\d)?|1(\.0)?)$/;

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

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

    // 유효성 검사
    if (!name) {
      errorMessage.value = "분야명을 입력하세요.";
      return;
    }
    if (name.length > 30) {
      errorMessage.value = "분야명은 30자 이내로 입력하세요.";
      return;
    }
    if (!weight) {
      errorMessage.value = "가중치를 입력하세요.";
      return;
    }
    if (!WEIGHT_PATTERN.test(weight)) {
      errorMessage.value = "가중치는 0.0 ~ 1.0 사이 소수점 1자리로 입력하세요.";
      return;
    }

    isSaving.value = true;

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

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

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