first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,33 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
?>
|
||||
<!-- 💡 [핵심] 사이트 전체에서 사용할 공용 문의하기 모달입니다. 기본적으로 숨겨져 있습니다. -->
|
||||
<div id="global-contact-modal" class="global-contact-modal-container" style="display: none;">
|
||||
<div class="modal-overlay-bg"></div>
|
||||
<div class="modal-content-wrapper">
|
||||
<button type="button" class="modal-close">×</button>
|
||||
<div class="section-header">
|
||||
<span class="subtitle">Contact Us</span>
|
||||
<h2>공간의 가능성을 열어보세요.</h2>
|
||||
<p>성진미도어의 전문가와 상담하고, 당신의 공간에 꼭 맞는 솔루션을 찾아보세요.</p>
|
||||
</div>
|
||||
<div class="contact-wrapper">
|
||||
<div class="contact-info">
|
||||
<h3>Information</h3>
|
||||
<div class="info-item"><strong>본사 및 전시장</strong><p>충청남도 아산시 음봉면 월산로 128-130</p></div>
|
||||
<div class="info-item"><strong>대표 연락처</strong><p>T. 041-532-0555 / H. 010-5434-4126</p></div>
|
||||
<div class="info-item"><strong>청주 전시장</strong><p>T. 043-235-2352 / H. 010-2066-4126</p></div>
|
||||
<div class="info-item"><strong>운영시간</strong><p>평일 09:00 - 18:00 (주말 및 공휴일 휴무)</p></div>
|
||||
</div>
|
||||
<form name="contactForm" id="contactForm" class="contact-form" method="post">
|
||||
<h3>상담 신청</h3>
|
||||
<div id="form-messages" class="form-message-area"></div>
|
||||
<input type="text" name="contact_name" placeholder="이름" required>
|
||||
<input type="tel" name="contact_hp" placeholder="연락처" required>
|
||||
<input type="email" name="contact_email" placeholder="이메일" required>
|
||||
<textarea name="contact_message" placeholder="문의 내용을 입력해주세요." rows="5" required></textarea>
|
||||
<button type="submit" id="contact-submit-btn" class="cta-button">상담 신청하기</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,37 @@
|
||||
/* 독립 문의하기 모듈 스타일 */
|
||||
.contact-section-trigger { padding: 80px 0; text-align: center; background-color: #f8f9fa; }
|
||||
.contact-section-trigger .cta-button { padding: 15px 30px; border-radius: 50px; font-weight: 700; }
|
||||
|
||||
.contact-modal-local { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1010; }
|
||||
.contact-modal-local.is-active { display: block; }
|
||||
.contact-modal-local .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); animation: fadeIn 0.3s ease; }
|
||||
.contact-modal-local .modal-content-local { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 900px; background: #fff; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); animation: slideDown 0.4s ease-out; padding: 40px; }
|
||||
.contact-modal-local .modal-close { position: absolute; top: 15px; right: 20px; font-size: 2rem; color: #aaa; background: none; border: none; cursor: pointer; line-height: 1; }
|
||||
|
||||
.contact-modal-local .section-header { text-align: center; margin-bottom: 40px; }
|
||||
.contact-modal-local .section-header .subtitle { color: #0056b3; }
|
||||
.contact-modal-local .section-header h2 { font-size: 2rem; }
|
||||
.contact-modal-local .section-header p { max-width: 100%; }
|
||||
|
||||
.contact-wrapper { display: flex; gap: 40px; }
|
||||
.contact-info, .contact-form { flex: 1; }
|
||||
.contact-info h3, .contact-form h3 { font-size: 1.3rem; margin-bottom: 20px; border-bottom: 2px solid #eee; padding-bottom: 15px; }
|
||||
.info-item { margin-bottom: 15px; }
|
||||
.info-item strong { display: block; font-weight: 700; margin-bottom: 5px; }
|
||||
.info-item p { margin: 0; color: #666; }
|
||||
|
||||
.contact-form input, .contact-form textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 15px; }
|
||||
.contact-form .cta-button { width: 100%; padding: 15px; }
|
||||
.contact-form .cta-button:disabled { background-color: #ccc; cursor: not-allowed; }
|
||||
|
||||
.form-message-area .message { padding: 10px; margin-bottom: 15px; border-radius: 5px; text-align: center; }
|
||||
.form-message-area .success { background-color: #d4edda; color: #155724; }
|
||||
.form-message-area .error { background-color: #f8d7da; color: #721c24; }
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes slideDown { from { opacity: 0; transform: translate(-50%, -60%); } to { opacity: 1; transform: translate(-50%, -50%); } }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.contact-wrapper { flex-direction: column; }
|
||||
.contact-modal-local .modal-content-local { padding: 25px; max-height: 85vh; overflow-y: auto; }
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
function initContactModule(moduleId) {
|
||||
const moduleElement = document.getElementById(moduleId);
|
||||
if (!moduleElement || moduleElement.classList.contains('initialized')) return;
|
||||
|
||||
const openBtn = moduleElement.querySelector('.btn-open-contact-modal');
|
||||
const modal = moduleElement.querySelector('.contact-modal-local');
|
||||
const closeBtn = modal.querySelector('.modal-close');
|
||||
const overlay = modal.querySelector('.modal-overlay');
|
||||
const form = modal.querySelector('form');
|
||||
const formMessages = modal.querySelector('.form-message-area');
|
||||
|
||||
const openModal = () => {
|
||||
modal.classList.add('is-active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
modal.classList.remove('is-active');
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
|
||||
openBtn.addEventListener('click', openModal);
|
||||
closeBtn.addEventListener('click', closeModal);
|
||||
overlay.addEventListener('click', closeModal);
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && modal.classList.contains('is-active')) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// 💡 [핵심 수정] universalMailer를 사용한 폼 제출 로직
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const submitBtn = this.querySelector('button[type="submit"]');
|
||||
const originalBtnText = submitBtn.textContent;
|
||||
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.textContent = '전송 중...';
|
||||
formMessages.innerHTML = ''; // 이전 메시지 초기화
|
||||
|
||||
const formData = new FormData(form);
|
||||
const variables = {
|
||||
contact_name: formData.get('contact_name'),
|
||||
contact_hp: formData.get('contact_hp'),
|
||||
contact_email: formData.get('contact_email'),
|
||||
contact_message: formData.get('contact_message').replace(/\n/g, '<br>')
|
||||
};
|
||||
|
||||
// universalMailer 객체가 있는지 확인
|
||||
if (window.universalMailer && typeof window.universalMailer.send === 'function') {
|
||||
window.universalMailer.send({
|
||||
template_code: 'contact_inquiry', // 관리자에서 생성한 템플릿 코드
|
||||
// to_email: variables.contact_email, //수신자임 문의 하기 같은경우 관리자가 받아야 해서 비워둔다
|
||||
variables: variables,
|
||||
onSuccess: function(response) {
|
||||
alert(response.message || '상담 신청이 성공적으로 접수되었습니다.');
|
||||
form.reset();
|
||||
closeModal();
|
||||
},
|
||||
onError: function(errorMessage) {
|
||||
formMessages.innerHTML = `<div class="message error">${errorMessage || '오류가 발생했습니다.'}</div>`;
|
||||
},
|
||||
onComplete: function() {
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = originalBtnText;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
alert('메일 발송 기능에 오류가 발생했습니다. 관리자에게 문의해주세요.');
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = originalBtnText;
|
||||
}
|
||||
});
|
||||
|
||||
moduleElement.classList.add('initialized');
|
||||
}
|
||||
|
||||
window.initContactModule = initContactModule;
|
||||
@@ -0,0 +1,87 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// CSS와 JS 파일의 버전을 파일 수정 시간으로 자동 갱신
|
||||
$module_css_path = G5_THEME_PATH.'/rb.custom/contact/module.css';
|
||||
$module_js_path = G5_THEME_PATH.'/rb.custom/contact/module.js';
|
||||
$module_css_ver = file_exists($module_css_path) ? filemtime($module_css_path) : G5_CSS_VER;
|
||||
$module_js_ver = file_exists($module_js_path) ? filemtime($module_js_path) : G5_JS_VER;
|
||||
|
||||
// 이 모듈만의 고유 ID를 생성합니다.
|
||||
$module_id = 'contact_module_'.uniqid();
|
||||
?>
|
||||
|
||||
<!-- 모듈의 가장 바깥 요소에 고유 ID를 부여합니다. -->
|
||||
<div id="<?php echo $module_id; ?>" class="contact-module">
|
||||
|
||||
<!-- 💡 [핵심] 이 모듈에 종속된 모달 HTML (사용자가 제공한 디자인 적용) -->
|
||||
<div class="contact-modal-local">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-content-local">
|
||||
<button type="button" class="modal-close">×</button>
|
||||
<div class="section-header">
|
||||
<span class="subtitle">Contact Us</span>
|
||||
<h2>공간의 가능성을 열어보세요.</h2>
|
||||
<p>성진미도어의 전문가와 상담하고, 당신의 공간에 꼭 맞는 솔루션을 찾아보세요.</p>
|
||||
</div>
|
||||
<div class="contact-wrapper">
|
||||
<div class="contact-info">
|
||||
<h3>Information</h3>
|
||||
<div class="info-item"><strong>본사 및 전시장</strong><p>충청남도 아산시 음봉면 월산로 128-130</p></div>
|
||||
<div class="info-item"><strong>대표 연락처</strong><p>T. 041-532-0555 / H. 010-5434-4126</p></div>
|
||||
<div class="info-item"><strong>청주 전시장</strong><p>T. 043-235-2352 / H. 010-2066-4126</p></div>
|
||||
<div class="info-item"><strong>운영시간</strong><p>평일 09:00 - 18:00 (주말 및 공휴일 휴무)</p></div>
|
||||
</div>
|
||||
<form name="fcontactform_<?php echo $module_id; ?>" id="fcontactform_<?php echo $module_id; ?>" class="contact-form" method="post">
|
||||
<h3>상담 신청</h3>
|
||||
<div class="form-message-area"></div>
|
||||
<input type="text" name="contact_name" placeholder="이름" required>
|
||||
<input type="tel" name="contact_hp" placeholder="연락처" required>
|
||||
<input type="email" name="contact_email" placeholder="이메일" required>
|
||||
<textarea name="contact_message" placeholder="문의 내용을 입력해주세요." rows="5" required></textarea>
|
||||
<button type="submit" class="cta-button">상담 신청하기</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 💡 [핵심] 모듈의 실제 내용 (페이지에 표시될 부분) -->
|
||||
<div class="contact-section-trigger">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="subtitle">Get a Quote</span>
|
||||
<h2>궁금한 점이 있으신가요?</h2>
|
||||
<p>전문가의 상담을 통해 당신의 공간에 가장 적합한 솔루션을 찾아보세요.</p>
|
||||
</div>
|
||||
<button type="button" class="btn-open-contact-modal cta-button">무료 상담 신청하기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 이 모듈에 필요한 CSS와 JS를 불러옵니다. -->
|
||||
<link rel="stylesheet" href="<?php echo G5_THEME_URL; ?>/rb.custom/contact/module.css?ver=<?php echo $module_css_ver; ?>">
|
||||
<script>
|
||||
(function() {
|
||||
const currentModuleId = '<?php echo $module_id; ?>';
|
||||
const scriptId = 'contact-module-script';
|
||||
|
||||
if (document.getElementById(scriptId)) {
|
||||
if (typeof window.initContactModule === 'function') {
|
||||
window.initContactModule(currentModuleId);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const script = document.createElement('script');
|
||||
script.id = scriptId;
|
||||
script.src = '<?php echo G5_THEME_URL; ?>/rb.custom/contact/module.js?ver=<?php echo $module_js_ver; ?>';
|
||||
script.async = true;
|
||||
|
||||
script.onload = () => {
|
||||
if (typeof window.initContactModule === 'function') {
|
||||
window.initContactModule(currentModuleId);
|
||||
}
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user