|
|
@@ -0,0 +1,582 @@
|
|
|
+<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>
|
DESKTOP-T61HUSC\user