|
|
@@ -1,87 +1,70 @@
|
|
|
<template>
|
|
|
<main>
|
|
|
<TopVisual :className="className" :title="title" :navigation="navigation" />
|
|
|
- <section>
|
|
|
- <div class="inn--container">
|
|
|
- <h2>고객센터</h2>
|
|
|
+ <section id="out--container">
|
|
|
+ <div class="out--container">
|
|
|
+ <h2 class="m--title">고객센터</h2>
|
|
|
<div class="form--contents--wrap">
|
|
|
- <form @submit.prevent="submitForm">
|
|
|
- <div class="form--contents">
|
|
|
+ <div class="contact-form">
|
|
|
+ <div class="form--contents half--cont">
|
|
|
<h3>작성자 (성명) <span class="required">*</span></h3>
|
|
|
<div>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
+ <UInput
|
|
|
v-model="formData.name"
|
|
|
placeholder="성명을 입력해주세요"
|
|
|
- required
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="form--contents">
|
|
|
+ <div class="form--contents half--cont">
|
|
|
<h3>직책</h3>
|
|
|
<div>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
+ <UInput
|
|
|
v-model="formData.etc1"
|
|
|
placeholder="직책을 입력해주세요"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="form--contents">
|
|
|
+ <div class="form--contents half--cont">
|
|
|
<h3>회사명</h3>
|
|
|
<div>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
+ <UInput
|
|
|
v-model="formData.etc2"
|
|
|
placeholder="회사명을 입력해주세요"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="form--contents">
|
|
|
+ <div class="form--contents half--cont">
|
|
|
<h3>연락처 <span class="required">*</span></h3>
|
|
|
<div class="tel-group">
|
|
|
- <select v-model="formData.tel_1" required>
|
|
|
- <option value="010">010</option>
|
|
|
- <option value="011">011</option>
|
|
|
- <option value="016">016</option>
|
|
|
- <option value="017">017</option>
|
|
|
- <option value="018">018</option>
|
|
|
- <option value="019">019</option>
|
|
|
- <option value="02">02</option>
|
|
|
- <option value="031">031</option>
|
|
|
- <option value="032">032</option>
|
|
|
- <option value="033">033</option>
|
|
|
- </select>
|
|
|
+ <USelect
|
|
|
+ v-model="formData.tel_1"
|
|
|
+ :options="phoneOptions"
|
|
|
+ />
|
|
|
<span>-</span>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
+ <UInput
|
|
|
v-model="formData.tel_2"
|
|
|
maxlength="4"
|
|
|
pattern="[0-9]{3,4}"
|
|
|
- required
|
|
|
/>
|
|
|
<span>-</span>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
+ <UInput
|
|
|
v-model="formData.tel_3"
|
|
|
maxlength="4"
|
|
|
pattern="[0-9]{4}"
|
|
|
- required
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="form--contents">
|
|
|
+ <div class="form--contents half--cont">
|
|
|
<h3>이메일 <span class="required">*</span></h3>
|
|
|
<div>
|
|
|
- <input
|
|
|
+ <UInput
|
|
|
type="email"
|
|
|
v-model="formData.email"
|
|
|
placeholder="이메일을 입력해주세요"
|
|
|
- required
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="form--contents">
|
|
|
+ <div class="form--contents half--cont">
|
|
|
<h3>문의항목 <span class="required">*</span></h3>
|
|
|
<div class="radio-group">
|
|
|
<label>
|
|
|
@@ -89,7 +72,6 @@
|
|
|
type="radio"
|
|
|
v-model="formData.category"
|
|
|
value="원료"
|
|
|
- required
|
|
|
/>
|
|
|
<span>원료</span>
|
|
|
</label>
|
|
|
@@ -98,7 +80,6 @@
|
|
|
type="radio"
|
|
|
v-model="formData.category"
|
|
|
value="제품"
|
|
|
- required
|
|
|
/>
|
|
|
<span>제품</span>
|
|
|
</label>
|
|
|
@@ -107,7 +88,6 @@
|
|
|
type="radio"
|
|
|
v-model="formData.category"
|
|
|
value="기술"
|
|
|
- required
|
|
|
/>
|
|
|
<span>기술</span>
|
|
|
</label>
|
|
|
@@ -116,7 +96,6 @@
|
|
|
type="radio"
|
|
|
v-model="formData.category"
|
|
|
value="기타"
|
|
|
- required
|
|
|
/>
|
|
|
<span>기타</span>
|
|
|
</label>
|
|
|
@@ -125,11 +104,9 @@
|
|
|
<div class="form--contents">
|
|
|
<h3>제목 <span class="required">*</span></h3>
|
|
|
<div>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
+ <UInput
|
|
|
v-model="formData.title"
|
|
|
placeholder="제목을 입력해주세요"
|
|
|
- required
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -147,7 +124,6 @@
|
|
|
v-model="formData.contents"
|
|
|
rows="10"
|
|
|
placeholder="문의 내용을 입력해주세요"
|
|
|
- required
|
|
|
></textarea>
|
|
|
</template>
|
|
|
</client-only>
|
|
|
@@ -230,7 +206,6 @@
|
|
|
type="radio"
|
|
|
v-model="formData.agree"
|
|
|
value="Y"
|
|
|
- required
|
|
|
/>
|
|
|
<span>동의합니다.</span>
|
|
|
</label>
|
|
|
@@ -239,7 +214,6 @@
|
|
|
type="radio"
|
|
|
v-model="formData.agree"
|
|
|
value="N"
|
|
|
- required
|
|
|
/>
|
|
|
<span>동의하지 않습니다.</span>
|
|
|
</label>
|
|
|
@@ -249,30 +223,20 @@
|
|
|
</div>
|
|
|
<div class="form--contents">
|
|
|
<div class="btn--wrap">
|
|
|
- <button
|
|
|
- type="submit"
|
|
|
- class="btn-submit"
|
|
|
- :disabled="isSubmitting"
|
|
|
+ <UButton
|
|
|
+ :loading="isSubmitting"
|
|
|
+ @click="submitForm"
|
|
|
+ size="lg"
|
|
|
+ color="primary"
|
|
|
>
|
|
|
{{ isSubmitting ? '전송중...' : '보내기' }}
|
|
|
- </button>
|
|
|
+ </UButton>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 오시는 길 섹션 -->
|
|
|
- <div class="map-section">
|
|
|
- <h3>오시는 길</h3>
|
|
|
- <ul class="info-list">
|
|
|
- <li>서울시 강남구 언주로 650 한국건설기술인협회 신관 2층</li>
|
|
|
- </ul>
|
|
|
- <ul class="contact-list">
|
|
|
- <li>Tel : 02-3447-8801~8802</li>
|
|
|
- <li>E-Mail : green@greenwhaleglobal.com</li>
|
|
|
- </ul>
|
|
|
- <div id="map" class="map-container"></div>
|
|
|
- </div>
|
|
|
+
|
|
|
</div>
|
|
|
</section>
|
|
|
</main>
|
|
|
@@ -282,7 +246,20 @@
|
|
|
import { ref, onMounted } from 'vue'
|
|
|
import TopVisual from '~/components/topVisual.vue'
|
|
|
import SummernoteEditor from '~/components/SummernoteEditor.vue'
|
|
|
-import axios from 'axios'
|
|
|
+
|
|
|
+// 전화번호 옵션
|
|
|
+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 isSubmitting = ref(false)
|
|
|
@@ -360,75 +337,34 @@ const submitForm = async () => {
|
|
|
isSubmitting.value = true
|
|
|
|
|
|
try {
|
|
|
- // FormData 객체 생성
|
|
|
- const submitData = new FormData()
|
|
|
- submitData.append('act', 'ins')
|
|
|
- submitData.append('boardId', 'contact')
|
|
|
- submitData.append('name', formData.value.name)
|
|
|
- submitData.append('etc1', formData.value.etc1)
|
|
|
- submitData.append('etc2', formData.value.etc2)
|
|
|
- submitData.append('tel_1', formData.value.tel_1)
|
|
|
- submitData.append('tel_2', formData.value.tel_2)
|
|
|
- submitData.append('tel_3', formData.value.tel_3)
|
|
|
- submitData.append('email', formData.value.email)
|
|
|
- submitData.append('category', formData.value.category)
|
|
|
- submitData.append('title', formData.value.title)
|
|
|
- submitData.append('contents', formData.value.contents)
|
|
|
-
|
|
|
- // 디버깅을 위한 FormData 내용 출력
|
|
|
- console.log('=== Form Data 전송 내용 ===')
|
|
|
- for (let [key, value] of submitData.entries()) {
|
|
|
- console.log(`${key}:`, value)
|
|
|
+ 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
|
|
|
}
|
|
|
|
|
|
- // 백엔드 API 호출
|
|
|
- const config = useRuntimeConfig()
|
|
|
- const apiUrl = config.public.apiBase || 'http://localhost'
|
|
|
- const fullUrl = `${apiUrl}/board_proc`
|
|
|
-
|
|
|
- console.log('=== API 호출 정보 ===')
|
|
|
- console.log('API URL:', fullUrl)
|
|
|
- console.log('Request headers:', {
|
|
|
- 'Content-Type': 'multipart/form-data',
|
|
|
- 'X-Requested-With': 'XMLHttpRequest'
|
|
|
- })
|
|
|
-
|
|
|
- const response = await axios.post(
|
|
|
- fullUrl,
|
|
|
- submitData,
|
|
|
- {
|
|
|
- headers: {
|
|
|
- 'Content-Type': 'multipart/form-data',
|
|
|
- 'X-Requested-With': 'XMLHttpRequest'
|
|
|
- }
|
|
|
- }
|
|
|
- )
|
|
|
+ const response = await $api.postForm('/board_proc', submitData)
|
|
|
|
|
|
- console.log('=== API 응답 ===')
|
|
|
- console.log('Response status:', response.status)
|
|
|
- console.log('Response headers:', response.headers)
|
|
|
- console.log('Response data:', response.data)
|
|
|
-
|
|
|
- if (response.data && response.data.success) {
|
|
|
+ if (response && response.success) {
|
|
|
alert('문의가 정상적으로 접수되었습니다.')
|
|
|
resetForm()
|
|
|
} else {
|
|
|
- console.error('API 응답 오류:', response.data)
|
|
|
- alert(`문의 접수 중 오류가 발생했습니다. 응답: ${JSON.stringify(response.data)}`)
|
|
|
+ console.error('API 응답 오류:', response)
|
|
|
+ alert(`문의 접수 중 오류가 발생했습니다. 응답: ${JSON.stringify(response)}`)
|
|
|
}
|
|
|
} catch (error) {
|
|
|
- console.error('=== 전체 에러 정보 ===')
|
|
|
- console.error('Error object:', error)
|
|
|
- console.error('Error message:', error.message)
|
|
|
- console.error('Error response:', error.response)
|
|
|
-
|
|
|
if (error.response) {
|
|
|
- console.error('Error response status:', error.response.status)
|
|
|
- console.error('Error response data:', error.response.data)
|
|
|
- console.error('Error response headers:', error.response.headers)
|
|
|
- alert(`API 호출 오류: ${error.response.status} - ${error.response.statusText}\n응답: ${JSON.stringify(error.response.data)}`)
|
|
|
+ alert(`API 호출 오류: ${error.response.status} - ${error.response.statusText}`)
|
|
|
} else if (error.request) {
|
|
|
- console.error('Error request:', error.request)
|
|
|
alert('서버에 연결할 수 없습니다. 네트워크 연결을 확인해주세요.')
|
|
|
} else {
|
|
|
alert(`요청 설정 오류: ${error.message}`)
|
|
|
@@ -455,186 +391,11 @@ const resetForm = () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 네이버 지도 초기화
|
|
|
-onMounted(() => {
|
|
|
- if (typeof naver !== 'undefined' && naver.maps) {
|
|
|
- const position = new naver.maps.LatLng(37.51490691373259, 127.03574342661345)
|
|
|
-
|
|
|
- const map = new naver.maps.Map('map', {
|
|
|
- center: position,
|
|
|
- zoom: 16
|
|
|
- })
|
|
|
-
|
|
|
- new naver.maps.Marker({
|
|
|
- position: position,
|
|
|
- map: map
|
|
|
- })
|
|
|
- }
|
|
|
-})
|
|
|
|
|
|
-// 메타 정보 설정
|
|
|
-useHead({
|
|
|
- script: [
|
|
|
- {
|
|
|
- src: 'https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=5qsxjdotgi',
|
|
|
- async: true
|
|
|
- }
|
|
|
- ]
|
|
|
+onMounted(() => {
|
|
|
+
|
|
|
})
|
|
|
-</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-.form--contents--wrap {
|
|
|
- margin-top: 40px;
|
|
|
-}
|
|
|
-
|
|
|
-.form--contents {
|
|
|
- margin-bottom: 30px;
|
|
|
-}
|
|
|
-
|
|
|
-.form--contents h3 {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.form--contents h3 .required {
|
|
|
- color: #ff0000;
|
|
|
- margin-left: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-.form--contents input[type="text"],
|
|
|
-.form--contents input[type="email"],
|
|
|
-.form--contents select,
|
|
|
-.form--contents textarea {
|
|
|
- width: 100%;
|
|
|
- padding: 10px;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
-
|
|
|
-.tel-group {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.tel-group select {
|
|
|
- width: 100px;
|
|
|
-}
|
|
|
-
|
|
|
-.tel-group input {
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
|
|
|
-.tel-group span {
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-
|
|
|
-.radio-group {
|
|
|
- display: flex;
|
|
|
- gap: 20px;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.radio-group label {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-.radio-group input[type="radio"] {
|
|
|
- width: auto;
|
|
|
- margin-right: 5px;
|
|
|
-}
|
|
|
-
|
|
|
-.privacy-box {
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 20px;
|
|
|
- background-color: #f9f9f9;
|
|
|
-}
|
|
|
-
|
|
|
-.privacy-content {
|
|
|
- height: 300px;
|
|
|
- overflow-y: auto;
|
|
|
- padding: 15px;
|
|
|
- background-color: #fff;
|
|
|
- border: 1px solid #e0e0e0;
|
|
|
- border-radius: 4px;
|
|
|
- margin-bottom: 20px;
|
|
|
- line-height: 1.8;
|
|
|
-}
|
|
|
-
|
|
|
-.agree-check {
|
|
|
- padding: 15px;
|
|
|
- background-color: #fff;
|
|
|
- border: 1px solid #e0e0e0;
|
|
|
- border-radius: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-.agree-check h4 {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.btn--wrap {
|
|
|
- text-align: center;
|
|
|
- margin-top: 40px;
|
|
|
-}
|
|
|
-
|
|
|
-.btn-submit {
|
|
|
- padding: 12px 40px;
|
|
|
- background-color: #00a651;
|
|
|
- color: #fff;
|
|
|
- border: none;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- cursor: pointer;
|
|
|
- transition: background-color 0.3s;
|
|
|
-}
|
|
|
-
|
|
|
-.btn-submit:hover {
|
|
|
- background-color: #008840;
|
|
|
-}
|
|
|
-
|
|
|
-.btn-submit:disabled {
|
|
|
- background-color: #ccc;
|
|
|
- cursor: not-allowed;
|
|
|
-}
|
|
|
-
|
|
|
-.map-section {
|
|
|
- margin-top: 80px;
|
|
|
- padding-top: 40px;
|
|
|
- border-top: 1px solid #ddd;
|
|
|
-}
|
|
|
-
|
|
|
-.map-section h3 {
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.info-list,
|
|
|
-.contact-list {
|
|
|
- list-style: none;
|
|
|
- padding: 0;
|
|
|
- margin: 0 0 20px 0;
|
|
|
-}
|
|
|
-
|
|
|
-.info-list li,
|
|
|
-.contact-list li {
|
|
|
- font-size: 14px;
|
|
|
- line-height: 1.8;
|
|
|
-}
|
|
|
+</script>
|
|
|
|
|
|
-.map-container {
|
|
|
- height: 450px;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 4px;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-</style>
|
interscope_003\interscope