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: "Company", link: "/company/intro" },
        { name: "Product", link: "/products/materials" },
        { name: "Technology", link: "/technology/facilities" },
        { name: "Media", link: "/media/news" },
        { name: "Contact", link: "/contact/notice" },
      ],
    },
    {
      name: "고객센터",
      link: "/contact/support",
      gnbList: [
        { name: "공지사항", link: "/contact/notice" },
        { name: "FAQ", link: "/contact/faq" },
        { name: "고객센터", link: "/contact/support" },
        { name: "오시는길", link: "/contact/location" },
      ],
    },
  ]);

  // 폼 유효성 검증
  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>