챌린지명 *
참가비 *
기간 *	-
최대 참가자 *
타이틀 이미지	{{ image.file.name }} 권장 1200x800, JPG/PNG/GIF/WebP, 5MB 이하 (선택 사항)
상태 *	사용중 미사용
상세내용	</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>