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

<template>
  <div class="admin--manager-form">
    <form @submit.prevent="handleSubmit" class="admin--form">
      <!-- 지점명 -->
      <div class="admin--form-group">
        <label class="admin--form-label">지점명 <span class="admin--required">*</span></label>
        <select
          v-model="formData.branch_id"
          class="admin--form-select"
          required
        >
          <option value="">지점을 선택하세요</option>
          <option
            v-for="branch in branches"
            :key="branch.id"
            :value="branch.id"
            :disabled="branch.is_active !== 1 && branch.is_active !== '1'"
          >
            {{ branch.name }}{{ (branch.is_active !== 1 && branch.is_active !== '1') ? ' (비활성화)' : '' }}
          </option>
        </select>
      </div>

      <!-- 아이디 -->
      <div class="admin--form-group">
        <label class="admin--form-label">아이디 <span class="admin--required">*</span></label>
        <div class="admin--input-with-button">
          <input
            v-model="formData.user_id"
            type="text"
            class="admin--form-input"
            placeholder="아이디를 입력하세요"
            required
            @input="handleUserIdInput"
          >
          <button
            type="button"
            class="admin--btn admin--btn-check"
            @click="checkDuplicateUserId"
            :disabled="!formData.user_id || isCheckingUserId"
          >
            {{ isCheckingUserId ? '확인 중...' : '중복 체크' }}
          </button>
        </div>
        <p v-if="userIdCheckResult === 'available'" class="admin--form-help admin--text-success">
          사용 가능한 아이디입니다.
        </p>
        <p v-if="userIdCheckResult === 'duplicate'" class="admin--form-help admin--text-error">
          이미 사용 중인 아이디입니다.
        </p>
      </div>

      <!-- 비밀번호 -->
      <div class="admin--form-group">
        <label class="admin--form-label">비밀번호 <span class="admin--required">*</span></label>
        <div class="admin--password-input-wrapper">
          <input
            v-model="formData.password"
            :type="showPassword ? 'text' : 'password'"
            class="admin--form-input"
            placeholder="비밀번호를 입력하세요"
            required
          >
          <button
            type="button"
            class="admin--password-toggle"
            @click="showPassword = !showPassword"
          >
            {{ showPassword ? '👁️' : '👁️‍🗨️' }}
          </button>
        </div>
      </div>

      <!-- 비밀번호 확인 -->
      <div class="admin--form-group">
        <label class="admin--form-label">비밀번호 확인 <span class="admin--required">*</span></label>
        <div class="admin--password-input-wrapper">
          <input
            v-model="formData.password_confirm"
            :type="showPasswordConfirm ? 'text' : 'password'"
            class="admin--form-input"
            placeholder="비밀번호를 다시 입력하세요"
            required
          >
          <button
            type="button"
            class="admin--password-toggle"
            @click="showPasswordConfirm = !showPasswordConfirm"
          >
            {{ showPasswordConfirm ? '👁️' : '👁️‍🗨️' }}
          </button>
        </div>
      </div>

      <!-- 관리자명 -->
      <div class="admin--form-group">
        <label class="admin--form-label">관리자명 <span class="admin--required">*</span></label>
        <input
          v-model="formData.name"
          type="text"
          class="admin--form-input"
          placeholder="이름을 입력하세요"
          required
        >
      </div>

      <!-- 이메일 -->
      <div class="admin--form-group">
        <label class="admin--form-label">이메일 <span class="admin--required">*</span></label>
        <input
          v-model="formData.email"
          type="email"
          class="admin--form-input"
          placeholder="email@example.com"
          required
        >
      </div>

      <!-- 인사말 -->
      <div class="admin--form-group">
        <label class="admin--form-label">인사말</label>
        <textarea
          v-model="formData.greeting"
          class="admin--form-textarea"
          placeholder="인사말을 입력하세요 (엔터로 줄바꿈 가능)"
          rows="5"
        ></textarea>
        <p class="admin--form-help">영업사원 목록 페이지 상단에 표시됩니다.</p>
      </div>

      <!-- 사진 -->
      <div class="admin--form-group">
        <label class="admin--form-label">사진</label>
        <input
          type="file"
          accept="image/*"
          class="admin--form-file"
          @change="handlePhotoUpload"
        >
        <div v-if="photoPreview" class="admin--image-preview">
          <img :src="photoPreview" alt="미리보기">
          <button type="button" class="admin--btn-remove-image" @click="removePhoto">
            삭제
          </button>
        </div>
      </div>

      <!-- 버튼 영역 -->
      <div class="admin--form-actions">
        <button
          type="submit"
          class="admin--btn admin--btn-primary"
          :disabled="isSaving"
        >
          {{ isSaving ? '저장 중...' : '확인' }}
        </button>
        <button
          type="button"
          class="admin--btn admin--btn-secondary"
          @click="goToList"
        >
          목록
        </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, onMounted } from 'vue'
import { useRouter } from 'vue-router'

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

const router = useRouter()
const { get, post, upload } = useApi()
const { getImageUrl } = useImage()

const isSaving = ref(false)
const successMessage = ref('')
const errorMessage = ref('')
const showPassword = ref(false)
const showPasswordConfirm = ref(false)
const branches = ref([])
const photoPreview = ref(null)
const photoFile = ref(null)
const isCheckingUserId = ref(false)
const userIdCheckResult = ref('') // 'available', 'duplicate', ''

const formData = ref({
  branch_id: '',
  user_id: '',
  password: '',
  password_confirm: '',
  name: '',
  email: '',
  greeting: '',
  photo_url: ''
})

// 지점 목록 로드
const loadBranches = async () => {
  const { data, error } = await get('/branch/list', { per_page: 1000 })
  console.log('[BranchManagerCreate] API 응답:', { data, error })

  if (data?.success && data?.data) {
    branches.value = data.data.items || []
    console.log('[BranchManagerCreate] 지점 목록 로드 성공')
  }
}

// 아이디 입력 시 중복 체크 결과 초기화
const handleUserIdInput = () => {
  userIdCheckResult.value = ''
}

// 아이디 중복 체크
const checkDuplicateUserId = async () => {
  if (!formData.value.user_id) {
    alert('아이디를 입력하세요.')
    return
  }

  isCheckingUserId.value = true
  userIdCheckResult.value = ''

  try {
    const { data, error } = await get('/branch/manager/check-userid', {
      params: {
        user_id: formData.value.user_id
      }
    })

    console.log('[BranchManagerCreate] 중복 체크 응답:', { data, error })

    if (error) {
      alert('중복 체크에 실패했습니다.')
      return
    }

    if (data?.success) {
      if (data?.data?.available) {
        userIdCheckResult.value = 'available'
      } else {
        userIdCheckResult.value = 'duplicate'
      }
    }
  } catch (error) {
    console.error('중복 체크 오류:', error)
    alert('중복 체크 중 오류가 발생했습니다.')
  } finally {
    isCheckingUserId.value = false
  }
}

// 사진 업로드
const handlePhotoUpload = (event) => {
  const file = event.target.files[0]
  if (!file) return

  if (!file.type.startsWith('image/')) {
    alert('이미지 파일만 업로드 가능합니다.')
    return
  }

  photoFile.value = file

  const reader = new FileReader()
  reader.onload = (e) => {
    photoPreview.value = e.target.result
  }
  reader.readAsDataURL(file)
}

// 사진 삭제
const removePhoto = () => {
  photoPreview.value = null
  photoFile.value = null
  formData.value.photo_url = ''
}

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

  // 유효성 검사
  if (!formData.value.branch_id) {
    errorMessage.value = '지점을 선택하세요.'
    return
  }

  if (!formData.value.user_id) {
    errorMessage.value = '아이디를 입력하세요.'
    return
  }

  if (userIdCheckResult.value !== 'available') {
    errorMessage.value = '아이디 중복 체크를 해주세요.'
    return
  }

  if (!formData.value.password) {
    errorMessage.value = '비밀번호를 입력하세요.'
    return
  }

  if (formData.value.password !== formData.value.password_confirm) {
    errorMessage.value = '비밀번호가 일치하지 않습니다.'
    return
  }

  if (!formData.value.name) {
    errorMessage.value = '관리자명을 입력하세요.'
    return
  }

  if (!formData.value.email) {
    errorMessage.value = '이메일을 입력하세요.'
    return
  }

  isSaving.value = true

  try {
    let photoUrl = formData.value.photo_url

    // 새 사진 업로드
    if (photoFile.value) {
      const formDataImage = new FormData()
      formDataImage.append('file', photoFile.value)

      const { data: uploadData, error: uploadError } = await upload('/upload/bmanager-image', formDataImage)

      console.log('[BranchManagerCreate] 이미지 업로드 응답:', { data: uploadData, error: uploadError })

      if (uploadError) {
        errorMessage.value = '사진 업로드에 실패했습니다: ' + (uploadError.message || uploadError)
        isSaving.value = false
        return
      }

      if (!uploadData?.success || !uploadData?.data?.url) {
        errorMessage.value = '사진 업로드 응답이 올바르지 않습니다.'
        isSaving.value = false
        return
      }

      photoUrl = uploadData.data.url
      console.log('[BranchManagerCreate] 업로드된 이미지 URL:', photoUrl)
    }

    const submitData = {
      branch_id: formData.value.branch_id,
      user_id: formData.value.user_id,
      password: formData.value.password,
      name: formData.value.name,
      email: formData.value.email,
      greeting: formData.value.greeting,
      photo_url: photoUrl
    }

    const { data, error } = await post('/branch/manager', submitData)

    if (error) {
      errorMessage.value = error.message || '등록에 실패했습니다.'
    } else {
      successMessage.value = '지점장이 등록되었습니다.'
      setTimeout(() => {
        router.push('/site-manager/branch/manager')
      }, 1000)
    }
  } catch (error) {
    errorMessage.value = '서버 오류가 발생했습니다.'
    console.error('Save error:', error)
  } finally {
    isSaving.value = false
  }
}

// 목록으로 이동
const goToList = () => {
  router.push('/site-manager/branch/manager')
}

onMounted(() => {
  loadBranches()
})
</script>