piratezon_new/app/pages/site-manager/challenge/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.name" type="text" class="w--full admin--form-input" placeholder="예: 동해안 왕대구 선상낚시대회" required />
                </div>
                <div class="input--wrap">
                </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" placeholder="예: 10,000" required />
                </div>
              </td>
            </tr>
            <tr>
              <th><div>기간 <span class="admin--required">*</span></div></th>
              <td>
                <div class="input--wrap">
                  <DatePicker v-model="startDate" placeholder="📅 YYYY-MM-DD" />
                  <span class="admin--date-separator">-</span>
                  <DatePicker v-model="endDate" placeholder="📅 YYYY-MM-DD" />
                </div>
              </td>
            </tr>
            <tr>
              <th><div>최대 참가자 <span class="admin--required">*</span></div></th>
              <td>
                <div class="input--wrap">
                  <select v-model="formData.field_id" class="admin--form-select w--60" required>
                    <option value="">0</option>
                    <option value="1">1</option>
                  </select>
                  <select v-model="formData.field_id" class="admin--form-select w--60" required>
                    <option value="">0</option>
                    <option value="1">1</option>
                  </select>
                  <select v-model="formData.field_id" class="admin--form-select w--60" required>
                    <option value="">0</option>
                    <option value="1">1</option>
                  </select>
                  <select v-model="formData.field_id" class="admin--form-select w--60" required>
                    <option value="">0</option>
                    <option value="1">1</option>
                  </select>
                  <select v-model="formData.field_id" class="admin--form-select w--60" required>
                    <option value="">0</option>
                    <option value="1">1</option>
                  </select>
                  <select v-model="formData.field_id" class="admin--form-select w--60" required>
                    <option value="">0</option>
                    <option value="1">1</option>
                  </select>
                </div>
              </td>
            </tr>
            <tr>
              <th><div>타이틀 이미지</div></th>
              <td>
                <div class="input--wrap">
                  <input
                    ref="imageInput"
                    type="file"
                    accept="image/*"
                    class="admin--form-file-hidden"
                    @change="onImageChange"
                  />
                  <button type="button" class="admin--btn-small admin--btn-blue" @click="triggerImageInput">
                    이미지 선택
                  </button>
                  <span v-if="image" class="ml--16">{{ image.file.name }}</span>
                </div>
                <p class="mt--10">권장 1200x800, JPG/PNG/GIF/WebP, 5MB 이하 (선택 사항)</p>
                <div v-if="image" class="onboard--photo-grid mt--10">
                  <div class="onboard--photo-item">
                    <img :src="image.preview" alt="미리보기" />
                    <button type="button" class="onboard--photo-remove" @click="removeImage"></button>
                  </div>
                </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.status_YN" value="Y" /> 사용중
                  </label>
                  <label class="admin--radio-label ml--16">
                    <input type="radio" v-model="formData.status_YN" value="N" /> 미사용
                  </label>
                </div>
              </td>
            </tr>
            <tr>
              <th><div>상세내용</div></th>
              <td>
                <div class="input--wrap">
                  <textarea v-model="formData.address_refer" type="text" class="admin--form-input w--full" placeholder="챌린지 상세 설명을 입력하세요. (참가 방법ㆍ규칙ㆍ유의사항 등)" />
                </div>
              </td>
            </tr>
          </tbody>
        </table>

        <h3 class="admin--table--middle--title">라운드 설정</h3>
        <p class="admin--table--middle--desc">
          라운드별로 장소 범위(전체/개별)를 선택하고, 장소마다 아이템을 배정합니다. 최대 5라운드까지 등록할 수 있습니다.
        </p>

        <div class="admin--round--box--wrap">
          <div class="admin--round--title">라운드 1 <span>전체 장소ㆍ아이템 2</span>
          <!-- 최소 2라운드 이상. 3라운드부터 라운드 삭제 버튼 노출 -->
          <!-- <button>
            라운드 삭제
          </button> -->
          </div>
          <div class="admin--round--box">
            <div class="input--wrap">
              <label class="admin--round--radio">
                <!-- 디폴트 선택값 -->
                <input type="radio" value="all">
                전체 장소에 동일 적용
              </label>
              <label class="admin--round--radio">
                <input type="radio" value="specific">
                장소별 개별 설정
              </label>
            </div>
            <div class="qual--wrap">
              <p class="mt--16 mb--4">진출자 확률</p>
              <div class="input--wrap">
                <input v-model="formData.name" type="text" class="admin--form-input w--120" placeholder="예: 30" required />
                <!-- 1라운드 단위 : 명, 그 외 라운드 단위 : % -->
                <span>명</span>
              </div>
            </div>
            <div class="item--select--wrap">
              <div class="item--select--btn--wrap mt--16 mb--4">
                <p class="">배정 아이템ㆍ수량 2</p>
                <button>+ 아이템 선택</button>
              </div>
              <div class="item--selected--wrap">
                <div class="item--selected">아이템 이름<button>✕</button></div>
                <div class="item--selected">아이템 이름<button>✕</button></div>
              </div>
            </div>
          </div>
        </div>
        <div class="admin--round--box--wrap mt--16">
          <div class="admin--round--title">라운드 2 <span>전체 장소ㆍ아이템 2</span>
        </div>
          <div class="admin--round--box">
            <div class="input--wrap">
              <label class="admin--round--radio">
                <!-- 디폴트 선택값 -->
                <input type="radio" value="all">
                전체 장소에 동일 적용
              </label>
              <label class="admin--round--radio">
                <input type="radio" value="specific">
                장소별 개별 설정
              </label>
            </div>
            <div class="qual--wrap">
              <p class="mt--16 mb--4">진출자 확률</p>
              <div class="input--wrap">
                <input v-model="formData.name" type="text" class="admin--form-input w--120" placeholder="예: 30" required />
                <!-- 1라운드 단위 : 명, 그 외 라운드 단위 : % -->
                <span>명</span>
              </div>
            </div>
            <div class="item--select--wrap">
              <div class="item--select--btn--wrap mt--16 mb--4">
                <p class="">배정 아이템ㆍ수량 2</p>
                <button>+ 아이템 선택</button>
              </div>
              <div class="item--selected--wrap">
                <div class="item--selected">아이템 이름<button>✕</button></div>
                <div class="item--selected">아이템 이름<button>✕</button></div>
              </div>
            </div>
            <div class="round--place--wrap">
              <div class="admin--round--title">
                장소 1
                <button class="place--remove--btn">✕</button>
              </div>
              <div class="place--select--wrap">
                <p class="mb--4">장소 정의</p>
                <div class="input--wrap">
                  <select class="admin--form-select" required>
                    <option value="">전체 분야</option>
                  </select>
                  <select class="admin--form-select" required>
                    <option value="">전체 지역</option>
                  </select>
                  <select class="admin--form-select" required>
                    <option value="">제휴</option>
                  </select>
                  <!-- 선상 선택 전 노출 -->
                  <div class="place--select--btn--wrap">
                    <button class="admin--form-select" required>
                      <option value="">선상 선택</option>
                    </button>
                    <div class="all--place--wrap">
                      <div class="place--top">
                        <div class="search--wrap">
                          <input type="text" placeholder="선상명 검색">
                        </div>
                        <div class="check--wrap">
                          <label>
                            <input type="checkbox">
                            전체
                            <span>모든 등록 선상에 적용</span>
                          </label>
                        </div>
                        <div class="all--place">
                          <p>등록된 선상ㆍ지역명</p>
                          <ul class="all--place--list mt--6">
                            <li><label><input type="checkbox"><span>동산피싱</span><span class="off">비제휴</span> <p>지역명ㆍ분야</p></label></li>
                            <li><label><input type="checkbox"><span>동산피싱</span><span class="on">제휴</span> <p>지역명ㆍ분야</p></label></li>
                            <li><label><input type="checkbox"><span>동산피싱</span><span class="off">비제휴</span> <p>지역명ㆍ분야</p></label></li>
                            <li><label><input type="checkbox"><span>동산피싱</span><span class="on">제휴</span> <p>지역명ㆍ분야</p></label></li>
                          </ul>
                        </div>
                      </div>
                      <div class="place--bot">
                        <p>3개 선택</p>
                        <button>적용</button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 선상 선택 후 노출 -->
                <p class="mt--16 mb--4">선상ㆍ복수 선택</p>
                <div class="place--select--btn--wrap">
                  <div class="admin--form-select">
                    <div class="place--selected">
                      동산피싱
                      <button>✕</button>
                    </div>
                    <div class="place--selected">
                      행복마린호
                      <button>✕</button>
                    </div>
                    <div class="place--selected">
                      + 8
                    </div>
                  </div>
                  <div class="all--place--wrap">
                    <div class="place--top">
                      <div class="search--wrap">
                        <input type="text" placeholder="선상명 검색">
                      </div>
                      <div class="check--wrap">
                        <label>
                          <input type="checkbox">
                          전체
                          <span>모든 등록 선상에 적용</span>
                        </label>
                      </div>
                      <div class="all--place">
                        <p>등록된 선상ㆍ지역명</p>
                        <ul class="all--place--list mt--6">
                          <li><label><input type="checkbox"><span>동산피싱</span><span class="off">비제휴</span> <p>지역명ㆍ분야</p></label></li>
                          <li><label><input type="checkbox"><span>동산피싱</span><span class="on">제휴</span> <p>지역명ㆍ분야</p></label></li>
                          <li><label><input type="checkbox"><span>동산피싱</span><span class="off">비제휴</span> <p>지역명ㆍ분야</p></label></li>
                          <li><label><input type="checkbox"><span>동산피싱</span><span class="on">제휴</span> <p>지역명ㆍ분야</p></label></li>
                        </ul>
                      </div>
                    </div>
                    <div class="place--bot">
                      <p>3개 선택</p>
                      <button>적용</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item--select--wrap">
                <div class="item--select--btn--wrap mb--4 mt--16">
                  <p>배정 아이템ㆍ수량 2</p>
                  <button>+ 아이템 선택</button>
                </div>
                <div class="item--selected--wrap">
                  <div class="item--selected">아이템 이름<button>✕</button></div>
                  <div class="item--selected">아이템 이름<button>✕</button></div>
                </div>
              </div>
            </div>
            <div class="place--add--btn">
              + 장소 추가
            </div>
          </div>
        </div>
        <div class="round--add--btn">
          + 라운드 추가 (최대 5라운드)
        </div>

        <!-- 버튼 영역 -->
        <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>

        <!-- 성공/에러 메시지 -->
        <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, computed, watch, onMounted } from "vue";
  import { useRouter } from "vue-router";
  import DatePicker from "~/components/admin/DatePicker.vue";

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

  const router = useRouter();
  const config = useRuntimeConfig();
  const { get, post, upload } = useApi();

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

  // 분야 / 지역 select 옵션
  const fieldOptions = ref([]);
  const areaOptions = ref([]);

  // 사진 업로드 (등록 시점엔 낚시터 id가 없어 파일을 보관만 함)
  const imageInput = ref(null);
  const image = ref(null);
  const MAX_IMAGE_SIZE = 5 * 1024 * 1024;

  const triggerImageInput = () => imageInput.value?.click();

  const onImageChange = (e) => {
    const file = (e.target.files || [])[0];
    e.target.value = "";
    if (!file) return;
    if (!file.type.startsWith("image/")) {
      errorMessage.value = "이미지 파일만 업로드할 수 있습니다.";
      return;
    }
    if (file.size > MAX_IMAGE_SIZE) {
      errorMessage.value = "이미지가 10MB를 초과합니다.";
      return;
    }
    if (image.value) URL.revokeObjectURL(image.value.preview);
    image.value = { file, preview: URL.createObjectURL(file) };
  };

  const removeImage = () => {
    if (image.value) {
      URL.revokeObjectURL(image.value.preview);
      image.value = null;
    }
  };

  // 주요 은행 목록 (금융결제원 표준 코드)
  const bankOptions = [
    { code: "002", name: "산업은행" },
    { code: "003", name: "기업은행" },
    { code: "004", name: "국민은행" },
    { code: "007", name: "수협은행" },
    { code: "011", name: "농협은행" },
    { code: "020", name: "우리은행" },
    { code: "023", name: "SC제일은행" },
    { code: "031", name: "대구은행" },
    { code: "032", name: "부산은행" },
    { code: "034", name: "광주은행" },
    { code: "035", name: "제주은행" },
    { code: "037", name: "전북은행" },
    { code: "039", name: "경남은행" },
    { code: "045", name: "새마을금고" },
    { code: "071", name: "우체국" },
    { code: "081", name: "하나은행" },
    { code: "088", name: "신한은행" },
    { code: "089", name: "케이뱅크" },
    { code: "090", name: "카카오뱅크" },
    { code: "092", name: "토스뱅크" },
  ];

  const formData = ref({
    field_id: "",
    area_id: "",
    name: "",
    operating_hours: "",
    fish_species: "",
    zip_code: "",
    address: "",
    address_detail: "",
    address_refer: "",
    lat: "",
    lng: "",
    bank_code: "",
    account_number: "",
    account_holder: "",
    partnership_YN: "N",
    status_YN: "Y",
  });

  // 제휴 여부 — 비제휴면 계좌 입력 비활성화
  const isPartner = computed(() => formData.value.partnership_YN === "Y");

  // 비제휴로 전환 시 입력했던 계좌 정보 초기화
  watch(
    () => formData.value.partnership_YN,
    (val) => {
      if (val === "N") {
        formData.value.bank_code = "";
        formData.value.account_number = "";
        formData.value.account_holder = "";
      }
    }
  );

  // 분야 / 지역 옵션 로드
  const loadOptions = async () => {
    const [fieldRes, areaRes] = await Promise.all([
      get("/field/list", { params: { per_page: 1000 } }),
      get("/area/list", { params: { per_page: 1000 } }),
    ]);

    // API는 id DESC(최신순)로 주므로 뒤집어서 먼저 등록한 순(수도권 등)이 위로 오게
    if (fieldRes.data?.success) fieldOptions.value = (fieldRes.data.data.items || []).reverse();
    if (areaRes.data?.success) areaOptions.value = (areaRes.data.data.items || []).reverse();
  };

  // 외부 스크립트 동적 로드
  const loadScript = (src) =>
    new Promise((resolve, reject) => {
      if (document.querySelector(`script[src="${src}"]`)) {
        resolve();
        return;
      }
      const s = document.createElement("script");
      s.src = src;
      s.onload = () => resolve();
      s.onerror = () => reject(new Error(`스크립트 로드 실패: ${src}`));
      document.head.appendChild(s);
    });

  // 주소 → 위도/경도 변환 (Google Geocoding API)
  const searchCoords = async (address) => {
    coordError.value = "";

    const key = config.public.googleMapKey;
    if (!key) {
      coordError.value = "좌표를 자동으로 가져올 수 없습니다. 위도/경도를 직접 입력하세요.";
      return;
    }

    try {
      const url = new URL("https://maps.googleapis.com/maps/api/geocode/json");
      url.searchParams.set("address", address);
      url.searchParams.set("key", key);
      url.searchParams.set("language", "ko");
      url.searchParams.set("region", "kr");

      const res = await fetch(url);
      const data = await res.json();

      if (data.status === "OK" && data.results?.[0]) {
        const loc = data.results[0].geometry.location;
        formData.value.lat = String(loc.lat);
        formData.value.lng = String(loc.lng);
      } else {
        formData.value.lat = "";
        formData.value.lng = "";
        coordError.value = "좌표를 찾지 못했습니다. 직접 입력해 주세요.";
      }
    } catch (e) {
      console.error("Geocoding error:", e);
      formData.value.lat = "";
      formData.value.lng = "";
      coordError.value = "좌표 조회 중 오류가 발생했습니다. 위도/경도를 직접 입력해주세요.";
    }
  };

  // 우편번호 검색 (Daum Postcode)
  const openPostcode = async () => {
    coordError.value = "";
    try {
      await loadScript("https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js");
    } catch (e) {
      errorMessage.value = "우편번호 서비스를 불러오지 못했습니다.";
      return;
    }

    new window.daum.Postcode({
      oncomplete: (data) => {
        formData.value.zip_code = data.zonecode;
        formData.value.address = data.roadAddress || data.jibunAddress;
        // 선택한 주소로 좌표 자동 조회
        searchCoords(formData.value.address);
      },
    }).open();
  };

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

    // 필수값 검증
    if (!formData.value.field_id) return (errorMessage.value = "분야를 선택하세요.");
    if (!formData.value.area_id) return (errorMessage.value = "지역을 선택하세요.");
    if (!formData.value.name.trim()) return (errorMessage.value = "낚시터명을 입력하세요.");

    isSaving.value = true;
    try {
      // 1) 낚시터 등록
      const { data, error } = await post("/fishing", { ...formData.value });

      if (error || !data?.success) {
        errorMessage.value = error?.message || data?.message || "등록에 실패했습니다.";
        return;
      }

      const newId = data.data?.id;

      // 2) 사진이 있으면 업로드 (낚시터 id 받은 뒤)
      if (newId && photos.value.length) {
        const fd = new FormData();
        photos.value.forEach((p) => fd.append("photos[]", p.file));
        const { data: photoRes, error: photoErr } = await upload(`/fishing/${newId}/photos`, fd);

        if (photoErr || !photoRes?.success) {
          // 낚시터는 등록됐으나 사진 일부 실패 — 안내 후 목록 이동
          errorMessage.value = "낚시터는 등록됐지만 사진 업로드에 실패했습니다. 수정에서 다시 시도해주세요.";
          setTimeout(() => router.push("/site-manager/fishing/list"), 1500);
          return;
        }
      }

      successMessage.value = data.message || "낚시터이 등록되었습니다.";
      setTimeout(() => {
        router.push("/site-manager/fishing/list");
      }, 1000);
    } catch (e) {
      errorMessage.value = "서버 오류가 발생했습니다.";
      console.error("Save error:", e);
    } finally {
      isSaving.value = false;
    }
  };

  // 목록으로 이동
  const goToList = () => router.push("/site-manager/fishing/list");

  onMounted(() => {
    loadOptions();
  });
</script>