|
|
@@ -7,58 +7,38 @@
|
|
|
<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="성명을 입력해주세요"
|
|
|
- />
|
|
|
+ <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="직책을 입력해주세요"
|
|
|
- />
|
|
|
+ <h3>직책</h3>
|
|
|
+ <UInput v-model="formData.etc1" placeholder="직책을 입력해주세요" />
|
|
|
</div>
|
|
|
<div class="form--contents half--cont">
|
|
|
- <h3>회사명</h3>
|
|
|
- <UInput
|
|
|
- v-model="formData.etc2"
|
|
|
- placeholder="회사명을 입력해주세요"
|
|
|
- />
|
|
|
+ <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"
|
|
|
- />
|
|
|
+ <USelect v-model="formData.tel_1" :options="phoneOptions" />
|
|
|
<span>-</span>
|
|
|
- <UInput
|
|
|
- v-model="formData.tel_2"
|
|
|
- maxlength="4"
|
|
|
- pattern="[0-9]{3,4}"
|
|
|
- />
|
|
|
+ <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}"
|
|
|
- />
|
|
|
+ <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="이메일을 입력해주세요"
|
|
|
- />
|
|
|
+ <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
|
|
|
+ <URadioGroup
|
|
|
v-model="formData.category"
|
|
|
:items="categoryOptions"
|
|
|
value-key="value"
|
|
|
@@ -67,25 +47,22 @@
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="form--contents">
|
|
|
- <h3>제목 <span class="required">*</span></h3>
|
|
|
- <UInput
|
|
|
- v-model="formData.title"
|
|
|
- placeholder="제목을 입력해주세요"
|
|
|
- />
|
|
|
+ <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
|
|
|
+ <SummernoteEditor
|
|
|
v-model="formData.contents"
|
|
|
:height="editorHeight"
|
|
|
:placeholder="editorPlaceholder"
|
|
|
/>
|
|
|
<template #fallback>
|
|
|
- <textarea
|
|
|
- v-model="formData.contents"
|
|
|
- rows="10"
|
|
|
+ <textarea
|
|
|
+ v-model="formData.contents"
|
|
|
+ rows="10"
|
|
|
placeholder="내용 입력"
|
|
|
></textarea>
|
|
|
</template>
|
|
|
@@ -96,75 +73,115 @@
|
|
|
<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/>
|
|
|
+ 그린웨일 글로벌 주식회사 ('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
|
|
|
+ <URadioGroup
|
|
|
v-model="formData.agree"
|
|
|
:items="agreeOptions"
|
|
|
value-key="value"
|
|
|
@@ -174,210 +191,212 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<div class="btn--wrap">
|
|
|
- <UButton
|
|
|
- :loading="isSubmitting"
|
|
|
- @click="submitForm"
|
|
|
- size="lg"
|
|
|
- >
|
|
|
- {{ isSubmitting ? '전송중...' : '보내기' }}
|
|
|
+ <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'
|
|
|
+ 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 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 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 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'
|
|
|
-})
|
|
|
+ // 반응형 데이터
|
|
|
+ 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 = '내용 입력'
|
|
|
+ // 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 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 validateForm = () => {
|
|
|
+ if (!formData.value.name) {
|
|
|
+ alert("성명을 입력해주세요.");
|
|
|
+ return false;
|
|
|
}
|
|
|
-
|
|
|
- const response = await $postForm('/board_proc', submitData)
|
|
|
-
|
|
|
- if (response && response.success) {
|
|
|
- alert('문의가 정상적으로 접수되었습니다.')
|
|
|
- resetForm()
|
|
|
- } else {
|
|
|
- console.error('API 응답 오류:', response)
|
|
|
- alert(`문의 접수 중 오류가 발생했습니다. 응답: ${JSON.stringify(response)}`)
|
|
|
+ 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;
|
|
|
}
|
|
|
- } catch (error) {
|
|
|
- if (error.response) {
|
|
|
- alert(`API 호출 오류: ${error.response.status} - ${error.response.statusText}`)
|
|
|
- } else if (error.request) {
|
|
|
- alert('서버에 연결할 수 없습니다. 네트워크 연결을 확인해주세요.')
|
|
|
- } else {
|
|
|
- alert(`요청 설정 오류: ${error.message}`)
|
|
|
+ if (!formData.value.title) {
|
|
|
+ alert("제목을 입력해주세요.");
|
|
|
+ return false;
|
|
|
}
|
|
|
- } finally {
|
|
|
- isSubmitting.value = 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 resetForm = () => {
|
|
|
- formData.value = {
|
|
|
- name: '',
|
|
|
- etc1: '',
|
|
|
- etc2: '',
|
|
|
- tel_1: '010',
|
|
|
- tel_2: '',
|
|
|
- tel_3: '',
|
|
|
- email: '',
|
|
|
- category: '원료',
|
|
|
- title: '',
|
|
|
- contents: '',
|
|
|
- agree: 'Y'
|
|
|
- }
|
|
|
-}
|
|
|
+ // 폼 제출
|
|
|
+ const submitForm = async () => {
|
|
|
+ if (!validateForm()) return;
|
|
|
|
|
|
+ isSubmitting.value = true;
|
|
|
|
|
|
-onMounted(() => {
|
|
|
-
|
|
|
-})
|
|
|
+ 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);
|
|
|
|
|
|
-</script>
|
|
|
+ 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>
|