greenwhale/app/pages/contact/support.vue

<template>
  <main>
    <TopVisual :className="className" :title="title" :navigation="navigation" />
    <section id="out--container">
      <div class="out--container">
        <h2 class="m--title">고객센터</h2>
        <div class="form--contents--wrap">
          <div class="contact-form">
            <div class="form--contents half--cont">
              <h3>작성자 (성명) <span class="required">*</span></h3>              
              <UInput 
                v-model="formData.name" 
                placeholder="성명을 입력해주세요" 
              />              
            </div>
            <div class="form--contents half--cont">
              <h3>직책</h3>              
              <UInput 
                v-model="formData.etc1" 
                placeholder="직책을 입력해주세요" 
              />              
            </div>
            <div class="form--contents half--cont">
              <h3>회사명</h3>              
              <UInput 
                v-model="formData.etc2" 
                placeholder="회사명을 입력해주세요" 
              />              
            </div>
            <div class="form--contents half--cont">
              <h3>연락처 <span class="required">*</span></h3>
              <div class="tel-group">
                <USelect 
                  v-model="formData.tel_1"
                  :options="phoneOptions"
                />
                <span>-</span>
                <UInput 
                  v-model="formData.tel_2" 
                  maxlength="4" 
                  pattern="[0-9]{3,4}" 
                />
                <span>-</span>
                <UInput 
                  v-model="formData.tel_3" 
                  maxlength="4" 
                  pattern="[0-9]{4}" 
                />
              </div>
            </div>
            <div class="form--contents half--cont">
              <h3>이메일 <span class="required">*</span></h3>              
              <UInput 
                type="email" 
                v-model="formData.email" 
                placeholder="이메일을 입력해주세요" 
              />              
            </div>
            <div class="form--contents half--cont">
              <h3>문의항목 <span class="required">*</span></h3>
              <URadioGroup 
                v-model="formData.category"
                :items="categoryOptions"
                value-key="value"
                orientation="horizontal"
                class="qna--radio--group"
              />
            </div>
            <div class="form--contents">
              <h3>제목 <span class="required">*</span></h3>              
              <UInput 
                v-model="formData.title" 
                placeholder="제목을 입력해주세요" 
              />              
            </div>
            <div class="form--contents">
              <h3>내용 <span class="required">*</span></h3>
              <div>
                <client-only>
                  <SummernoteEditor 
                    v-model="formData.contents"
                    :height="editorHeight"
                    :placeholder="editorPlaceholder"
                  />
                  <template #fallback>
                    <textarea 
                      v-model="formData.contents" 
                      rows="10" 
                      placeholder="내용 입력"
                    ></textarea>
                  </template>
                </client-only>
              </div>
            </div>
            <div class="form--contents">
              <h3 class="privacy--title">개인 정보 수집 및 이용 동의</h3>
              <div class="privacy-box">
                <div class="privacy-content">
                  그린웨일 글로벌 주식회사 ('www.greenwhaleglobal.com'이하 '그린웨일 글로벌')은(는) 「개인정보 보호법」 제30조에 따라 정부주체의 개인정보를 보호하고 이와 관련한 고충을 신속하고 원활하게 처리할 수 있도록 하기 위하여 다음과 같이 개인정보 처리방침을 수립·공개합니다.<br/><br/>
                  
                  <strong>● 이 개인정보처리방침은 2022년 11월 01일부터 적용됩니다.</strong><br/><br/>
                  
                  <strong>제1조(개인정보의 처리 목적)</strong><br/>
                  그린웨일 글로벌은 다음의 목적을 위하여 개인정보를 처리합니다. 처리하고 있는 개인정보는 다음의 목적 이외의 용도로는 이용되지 않으며 이용 목적이 변경되는 경우에는 「개인정보 보호법」 제18조에 따라 별도의 동의를 받는 등 필요한 조치를 이행할 예정입니다.<br/>
                  ▶ 재화 또는 서비스 제공: 맞춤 서비스 제공을 목적으로 개인정보를 처리합니다.<br/><br/>
                  
                  <strong>제2조(개인정보의 처리 및 보유 기간)</strong><br/>
                  ① 그린웨일 글로벌은 법령에 따른 개인정보 보유·이용 기간 또는 정보 주체로부터 개인정보를 수집할 때 동의받은 개인정보 보유·이용 기간 내에서 개인정보를 처리·보유합니다.<br/>
                  ② 각각의 개인정보 처리 및 보유 기간은 다음과 같습니다.<br/>
                  • 재화 또는 서비스 제공과 관련한 개인정보는 수집.이용에 관한 동의일로부터 3년까지 위 이용목적을 위하여 보유.이용됩니다.<br/>
                  • 보유근거 : 지속적인 피드백 관리를 위해<br/>
                  • 관련법령 :<br/>
                  1) 신용정보의 수집/처리 및 이용 등에 관한 기록 : 3년<br/>
                  2) 소비자의 불만 또는 분쟁처리에 관한 기록 : 3년<br/>
                  3) 대금결제 및 재화 등의 공급에 관한 기록 : 5년<br/>
                  4) 계약 또는 청약철회 등에 관한 기록 : 5년<br/><br/>
                  
                  <strong>제3조(정보주체와 법정대리인의 권리·의무 및 그 행사방법)</strong><br/>
                  정보 주체는 그린웨일 글로벌에 대해 언제든지 개인정보 열람·정정·삭제·처리정지 요구 등의 권리를 행사할 수 있습니다.<br/>
                  ① 제1항에 따른 권리 행사는 그린웨일 글로벌에 대해 「개인정보 보호법」 시행령 제41조 제1항에 따라, 서면 또는 전자우편, 모사전송(FAX) 등을 통하여 하실 수 있으며 그린웨일 글로벌은 이에 대해 지체 없이 조치하겠습니다.<br/>
                  ② 제1항에 따른 권리 행사는 정보 주체의 법정대리인이나 위임을 받은 자 등 대리인을 통하여 하실 수 있습니다.<br/>
                  ③ 개인정보 열람 및 처리정지 요구는 「개인정보 보호법」 제35조 제4항, 제37조 제2항에 의하여 정보 주체의 권리가 제한될 수 있습니다.<br/>
                  ④ 개인정보의 정정 및 삭제 요구는 다른 법령에서 그 개인정보가 수집 대상으로 명시되어 있는 경우에는 그 삭제를 요구할 수 없습니다.<br/>
                  ⑤ 그린웨일 글로벌은 정보 주체 권리에 따른 열람의 요구, 정정·삭제의 요구, 처리정지의 요구 시 열람 등 요구를 한 자가 본인이거나 정당한 대리인인지를 확인합니다.<br/><br/>
                  
                  <strong>제4조(처리하는 개인정보의 항목 작성)</strong><br/>
                  그린웨일 글로벌은 다음의 개인정보 항목을 처리하고 있습니다.<br/>
                  • 재화 또는 서비스 제공<br/>
                  • 필수항목 : 이메일, 휴대 전화번호, 이름, 회사 전화번호, 회사명<br/>
                  • 선택항목 : 직책, 부서<br/><br/>
                  
                  <strong>제5조(개인정보의 파기)</strong><br/>
                  ① 그린웨일 글로벌은 개인정보 보유기간의 경과, 처리목적 달성 등 개인정보가 불필요하게 되었을 때는 지체없이 해당 개인정보를 파기합니다.<br/>
                  ② 정보 주체로부터 동의받은 개인정보 보유기간이 경과하거나 처리목적이 달성되었음에도 불구하고 다른 법령에 따라 개인정보를 계속 보존하여야 하는 경우에는, 해당 개인정보를 별도의 데이터베이스(DB)로 옮기거나 보관장소를 달리하여 보존합니다.<br/>
                  ③ 개인정보 파기의 절차 및 방법은 다음과 같습니다.<br/>
                  • 파기 절차: 그린웨일 글로벌은 파기 사유가 발생한 개인정보를 선정하고, 그린웨일 글로벌의 개인정보 보호 책임자의 승인을 받아 개인정보를 파기합니다.<br/>
                  • 파기 방법: 전자적 파일 형태의 정보는 기록을 재생할 수 없는 기술적 방법을 사용합니다<br/><br/>
                  
                  <strong>제6조(개인정보의 안전성 확보 조치)</strong><br/>
                  그린웨일글로벌은 개인정보의 안전성 확보를 위해 다음과 같은 조치를 취하고 있습니다.<br/>
                  ① 정기적인 자체 감사 실시<br/>
                  ② 개인정보 취급 직원의 최소화 및 교육<br/>
                  ③ 내부관리계획의 수립 및 시행<br/>
                  ④ 개인정보에 대한 접근 제한<br/>
                  ⑤ 비인가자에 대한 출입 통제<br/><br/>
                  
                  <strong>제7조(개인정보 자동 수집 장치의 설치•운영 및 거부에 관한 사항)</strong><br/>
                  ① 그린웨일글로벌는 이용자에게 개별적인 맞춤서비스를 제공하기 위해 이용정보를 저장하고 수시로 불러오는 '쿠키(cookie)'를 사용합니다.<br/>
                  ② 쿠키는 웹사이트를 운영하는데 이용되는 서버(http)가 이용자의 컴퓨터 브라우저에게 보내는 소량의 정보이며 이용자들의 PC 컴퓨터내의 하드디스크에 저장되기도 합니다.<br/><br/>
                  
                  <strong>제8조(개인정보 보호책임자 등)</strong><br/>
                  ① 그린웨일 글로벌은 개인정보 처리에 관한 업무를 총괄해서 책임지고, 개인정보 처리와 관련한 정보주체의 불만 처리 및 피해구제 등을 위하여 아래와 같이 개인정보 보호책임자를 지정하고 있습니다.<br/>
                  • 담당자 : 경영지원팀 이안나 대리<br/>
                  • 전화번호 : 02-3447-8802<br/>
                  • 이메일 : green@greenwhaleglobal.com<br/><br/>
                  
                  <strong>제9조(권익침해 구제방법)</strong><br/>
                  정보 주체는 개인정보침해로 인한 구제를 받기 위하여 개인정보분쟁조정위원회, 한국인터넷진흥원 개인정보침해신고센터 등에 분쟁해결이나 상담 등을 신청할 수 있습니다.<br/>
                  1. 개인정보분쟁조정위원회 : (국번없이) 1833-6972 (www.kopico.go.kr)<br/>
                  2. 개인정보침해신고센터 : (국번없이) 118 (privacy.kisa.or.kr)<br/>
                  3. 대검찰청 : (국번없이) 1301 (www.spo.go.kr)<br/>
                  4. 경찰청 : (국번없이) 182 (cyberbureau.police.go.kr)<br/>
                </div>
                
                <div class="agree-check">
                  <h4>개인정보 수집 및 이용에 동의합니까?</h4>
                  <URadioGroup 
                    v-model="formData.agree"
                    :items="agreeOptions"
                    value-key="value"
                    orientation="horizontal"
                    class="agree-radio-group"
                  />
                </div>
              </div>
            </div>
            
            <div class="btn--wrap">
              <UButton 
                :loading="isSubmitting"
                @click="submitForm"
                size="lg"                
              >
                {{ isSubmitting ? '전송중...' : '보내기' }}
              </UButton>
            </div>
            
          </div>
        </div>

        
      </div>
    </section>
  </main>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import TopVisual from '~/components/topVisual.vue'
import SummernoteEditor from '~/components/SummernoteEditor.vue'

// 전화번호 옵션
const phoneOptions = [
  { value: '010', label: '010' },
  { value: '011', label: '011' },
  { value: '016', label: '016' },
  { value: '017', label: '017' },
  { value: '018', label: '018' },
  { value: '019', label: '019' },
  { value: '02', label: '02' },
  { value: '031', label: '031' },
  { value: '032', label: '032' },
  { value: '033', label: '033' }
]

// 문의항목 옵션
const categoryOptions = computed(() => [
  { 
    value: '원료', 
    label: '원료',
    ui: formData.value.category === '원료' ? { label: 'actv' } : {}
  },
  { 
    value: '제품', 
    label: '제품',
    ui: formData.value.category === '제품' ? { label: 'actv' } : {}
  },
  { 
    value: '기술', 
    label: '기술',
    ui: formData.value.category === '기술' ? { label: 'actv' } : {}
  },
  { 
    value: '기타', 
    label: '기타',
    ui: formData.value.category === '기타' ? { label: 'actv' } : {}
  }
])

// 동의 옵션
const agreeOptions = [
  { value: 'Y', label: '동의합니다.' },
  { value: 'N', label: '동의하지 않습니다.' }
]

// 반응형 데이터
const isSubmitting = ref(false)
const formData = ref({
  name: '',
  etc1: '', // 직책
  etc2: '', // 회사명
  tel_1: '010',
  tel_2: '',
  tel_3: '',
  email: '',
  category: '원료',
  title: '',
  contents: '',
  agree: 'Y'
})

// Summernote 에디터 설정
const editorHeight = 400
const editorPlaceholder = '내용 입력'

// 페이지 설정
const className = "contact"
const title = "Contact"
const navigation = ref([
  { name: "Contact",
    link: "/contact/support" ,
    gnbList: [
      { name: "공지사항", link: "/contact/notice" },
      { name: "FAQ", link: "/contact/faq" },
      { name: "고객센터", link: "/contact/support" },
      { name: "오시는길", link: "/contact/location" }
    ]
  },
  { name: "고객센터", link: "/contact/support" }
])

// 폼 유효성 검증
const validateForm = () => {
  if (!formData.value.name) {
    alert('성명을 입력해주세요.')
    return false
  }
  if (!formData.value.tel_2 || !formData.value.tel_3) {
    alert('연락처를 입력해주세요.')
    return false
  }
  if (!formData.value.email) {
    alert('이메일을 입력해주세요.')
    return false
  }
  if (!formData.value.category) {
    alert('문의항목을 선택해주세요.')
    return false
  }
  if (!formData.value.title) {
    alert('제목을 입력해주세요.')
    return false
  }
  if (!formData.value.contents || formData.value.contents === '<p><br></p>' || formData.value.contents === '') {
    alert('내용을 입력해주세요.')
    return false
  }
  if (formData.value.agree !== 'Y') {
    alert('개인정보 수집 및 이용에 동의해주세요.')
    return false
  }
  return true
}

// 폼 제출
const submitForm = async () => {
  if (!validateForm()) return

  isSubmitting.value = true

  try {
    const submitData = {
      act: 'ins',
      boardId: 'contact',
      name: formData.value.name,
      etc1: formData.value.etc1,
      etc2: formData.value.etc2,
      tel_1: formData.value.tel_1,
      tel_2: formData.value.tel_2,
      tel_3: formData.value.tel_3,
      email: formData.value.email,
      category: formData.value.category,
      title: formData.value.title,
      contents: formData.value.contents
    }

    const response = await $postForm('/board_proc', submitData)

    if (response && response.success) {
      alert('문의가 정상적으로 접수되었습니다.')
      resetForm()
    } else {
      console.error('API 응답 오류:', response)
      alert(`문의 접수 중 오류가 발생했습니다. 응답: ${JSON.stringify(response)}`)
    }
  } catch (error) {
    if (error.response) {
      alert(`API 호출 오류: ${error.response.status} - ${error.response.statusText}`)
    } else if (error.request) {
      alert('서버에 연결할 수 없습니다. 네트워크 연결을 확인해주세요.')
    } else {
      alert(`요청 설정 오류: ${error.message}`)
    }
  } finally {
    isSubmitting.value = false
  }
}

// 폼 초기화
const resetForm = () => {
  formData.value = {
    name: '',
    etc1: '',
    etc2: '',
    tel_1: '010',
    tel_2: '',
    tel_3: '',
    email: '',
    category: '원료',
    title: '',
    contents: '',
    agree: 'Y'
  }
}


onMounted(() => {
  
})


</script>