first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,46 @@
|
||||
<?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>연락 정보</h3>
|
||||
<div class="info-item">
|
||||
<strong>(주)레이저월드</strong>
|
||||
<p>서울특별시 금천구 가산디지털1로 1 (대표 주소)</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<strong>대표 연락처</strong>
|
||||
<p>T. 02-123-4567 / F. 02-123-4568</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<strong>이메일</strong>
|
||||
<p>contact@laserworld.com</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,215 @@
|
||||
/* --- 문의하기 팝업(모달) 전용 스타일 --- */
|
||||
|
||||
/* 💡 [핵심] 모든 스타일을 #laser-contact-module ID 하위로 한정하여 충돌 방지 */
|
||||
|
||||
#laser-contact-module {
|
||||
--primary-color: #ff6b6b;
|
||||
--secondary-color: #4ecdc4;
|
||||
--accent-color: #45b7d1;
|
||||
--tertiary-color: #96ceb4;
|
||||
--quaternary-color: #feca57;
|
||||
--text-primary: #2c3e50;
|
||||
--text-secondary: #7f8c8d;
|
||||
--text-light: #bdc3c7;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8f9fa;
|
||||
--bg-tertiary: #ecf0f1;
|
||||
--bg-card: #ffffff;
|
||||
--border-color: #e9ecef;
|
||||
--border-light: #f1f3f4;
|
||||
--shadow-sm: 0 2px 4px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 8px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 8px 16px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 16px 32px 0 rgb(0 0 0 / 0.1);
|
||||
--radius-sm: 0.5rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1rem;
|
||||
--radius-xl: 1.5rem;
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 모달 오버레이 (최상위 요소) */
|
||||
#laser-contact-module.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
}
|
||||
|
||||
#laser-contact-module.modal-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* 모달 컨텐츠 박스 */
|
||||
#laser-contact-module .modal-content {
|
||||
background-color: #fff;
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
|
||||
width: 90%;
|
||||
max-width: 960px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.3s ease;
|
||||
box-sizing: border-box; /* 패딩 포함 크기 계산 */
|
||||
}
|
||||
|
||||
#laser-contact-module.active .modal-content {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* 닫기 버튼 */
|
||||
#laser-contact-module .modal-close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 20px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#laser-contact-module .modal-close:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 컨테이너 (모달 내부) */
|
||||
#laser-contact-module .container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0; /* 모달 내부 패딩이 있으므로 제거 */
|
||||
}
|
||||
|
||||
/* CTA 섹션 스타일 재정의 */
|
||||
#laser-contact-module .cta-section {
|
||||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
|
||||
color: #fff !important;
|
||||
padding: 40px 20px !important; /* 패딩 조정 */
|
||||
text-align: center !important;
|
||||
border-radius: 8px; /* 모달 내부에서 둥글게 */
|
||||
}
|
||||
|
||||
#laser-contact-module .cta-content {
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#laser-contact-module .cta-text h2 {
|
||||
font-size: 2rem; /* 크기 조정 */
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#laser-contact-module .cta-text p {
|
||||
font-size: 1rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 폼 메시지 영역 */
|
||||
#laser-contact-module .form-message-area {
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
display: none;
|
||||
text-align: center;
|
||||
color: #333; /* 기본 글자색 */
|
||||
}
|
||||
|
||||
#laser-contact-module .form-message-area.success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#laser-contact-module .form-message-area.error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 문의 폼 스타일 */
|
||||
#laser-contact-module .contact-form {
|
||||
background: #fff; /* 폼 배경 흰색 */
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
color: #333; /* 폼 내부 글자색 */
|
||||
text-align: left; /* 입력 필드 정렬 */
|
||||
}
|
||||
|
||||
#laser-contact-module .contact-form input,
|
||||
#laser-contact-module .contact-form select,
|
||||
#laser-contact-module .contact-form textarea {
|
||||
width: 100%;
|
||||
padding: 12px 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 15px;
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#laser-contact-module .contact-form input:focus,
|
||||
#laser-contact-module .contact-form select:focus,
|
||||
#laser-contact-module .contact-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: #2c3e50;
|
||||
box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
|
||||
}
|
||||
|
||||
#laser-contact-module .contact-form .cta-button {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
background-color: #0056b3;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
font-weight: 700;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#laser-contact-module .contact-form .cta-button:hover {
|
||||
background-color: #004494;
|
||||
}
|
||||
|
||||
/* 반응형 스타일 */
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
function initContactModule(moduleId) {
|
||||
// 💡 [수정] ID 선택자 수정 (module.php에서 생성한 ID 사용)
|
||||
// module.php에서 $module_id = 'contact_module_'.uniqid(); 로 생성된 ID가 넘어옴
|
||||
// 하지만 HTML 구조상 최상위 ID는 'laser-contact-module'로 고정되어 있음 (module.php 확인)
|
||||
// 따라서 moduleId 인자를 무시하고 고정 ID를 사용하거나, module.php를 수정해야 함.
|
||||
// 여기서는 module.php의 구조에 맞춰 #laser-contact-module을 기준으로 동작하도록 수정.
|
||||
|
||||
const moduleElement = document.getElementById('laser-contact-module');
|
||||
if (!moduleElement || moduleElement.classList.contains('initialized')) return;
|
||||
|
||||
const modal = moduleElement; // 모달 전체 컨테이너
|
||||
const closeBtn = moduleElement.querySelector('.modal-close'); // 닫기 버튼 (현재 HTML엔 없음, 추가 필요 시)
|
||||
const form = moduleElement.querySelector('.contact-form');
|
||||
const formMessages = moduleElement.querySelector('.form-message-area');
|
||||
|
||||
// 💡 [추가] 모달 열기/닫기 기능 (필요한 경우 주석 해제 및 HTML 수정)
|
||||
/*
|
||||
const openModal = (e) => {
|
||||
if (e) e.preventDefault();
|
||||
modal.classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
modal.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
|
||||
// 외부 트리거 버튼 연결 (예: .btn-open-contact-modal 클래스를 가진 버튼)
|
||||
document.addEventListener('click', function(e) {
|
||||
const targetBtn = e.target.closest('.btn-open-contact-modal');
|
||||
if (targetBtn) {
|
||||
openModal(e);
|
||||
}
|
||||
});
|
||||
|
||||
if (closeBtn) closeBtn.addEventListener('click', closeModal);
|
||||
|
||||
// 오버레이 클릭 시 닫기
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) closeModal();
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && modal.classList.contains('active')) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
// universalMailer를 사용한 폼 제출 로직
|
||||
if (form) {
|
||||
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 = ''; // 이전 메시지 초기화
|
||||
formMessages.className = 'form-message-area'; // 클래스 초기화
|
||||
|
||||
const formData = new FormData(form);
|
||||
const variables = {
|
||||
contact_subject: formData.get('contact_subject'), // 💡 [추가] 문의 항목
|
||||
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();
|
||||
formMessages.innerHTML = '성공적으로 접수되었습니다.';
|
||||
formMessages.classList.add('success');
|
||||
// closeModal(); // 모달 닫기 (필요시)
|
||||
},
|
||||
onError: function(errorMessage) {
|
||||
formMessages.innerHTML = errorMessage || '오류가 발생했습니다.';
|
||||
formMessages.classList.add('error');
|
||||
},
|
||||
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,101 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 💡 [수정] 파일 경로(filemtime용)와 URL(src용)을 분리
|
||||
$module_css_file = G5_THEME_PATH.'/rb.custom/lasercontact/module.css';
|
||||
$module_js_file = G5_THEME_PATH.'/rb.custom/lasercontact/module.js';
|
||||
|
||||
$module_css_url = G5_THEME_URL.'/rb.custom/lasercontact/module.css';
|
||||
$module_js_url = G5_THEME_URL.'/rb.custom/lasercontact//module.js';
|
||||
|
||||
$module_css_ver = file_exists($module_css_file) ? filemtime($module_css_file) : G5_CSS_VER;
|
||||
$module_js_ver = file_exists($module_js_file) ? filemtime($module_js_file) : G5_JS_VER;
|
||||
|
||||
// 💡 [핵심] $md_id 변수를 사용하여 모듈 설정 로드
|
||||
// 이 파일이 include 될 때 상위 스코프에서 $md_id가 정의되어 있어야 합니다.
|
||||
// 보통 index.php 등에서 모듈을 호출할 때 $md_id를 설정하고 include 합니다.
|
||||
if (isset($md_id) && $md_id) {
|
||||
$rb_skin = get_rb_module_config($md_id);
|
||||
} else {
|
||||
$rb_skin = array(); // md_id가 없을 경우 빈 배열
|
||||
}
|
||||
// 이 모듈만의 고유 ID를 생성합니다.
|
||||
$module_id = 'contact_module_'.uniqid();
|
||||
?>
|
||||
|
||||
|
||||
|
||||
<div id="laser-contact-module" class="contact-modal">
|
||||
<div class="modal-content">
|
||||
<ul class="bbs_main_wrap_tit" style="display:<?php echo (isset($rb_skin['md_title_hide']) && $rb_skin['md_title_hide'] == '1') ? 'none' : 'block'; ?>">
|
||||
|
||||
<li class="bbs_main_wrap_tit_l">
|
||||
<!-- 타이틀 { -->
|
||||
<a href="<?php echo $links_url; ?>">
|
||||
<h2 class="<?php echo isset($rb_skin['md_title_font']) ? $rb_skin['md_title_font'] : 'font-B'; ?>" style="color:<?php echo isset($rb_skin['md_title_color']) ? $rb_skin['md_title_color'] : '#25282b'; ?>; font-size:<?php echo isset($rb_skin['md_title_size']) ? $rb_skin['md_title_size'] : '20'; ?>px; "><?php echo isset($rb_skin['md_title']) ? $rb_skin['md_title'] : '하단 롤링 배너'; ?></h2>
|
||||
</a>
|
||||
<!-- } -->
|
||||
</li>
|
||||
<div class="cb"></div>
|
||||
</ul>
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<div class="cta-text">
|
||||
<h2>귀사의 기술을 알리고 싶으신가요?</h2>
|
||||
<p>월간 레이저 기술이 귀사의 비즈니스 파트너가 되어드립니다.</p>
|
||||
</div>
|
||||
<form name="fcontactform_<?php echo $module_id; ?>" id="fcontactform_<?php echo $module_id; ?>" class="contact-form" method="post" style="border-top: 1px solid #eee; padding-top: 20px;">
|
||||
<!-- <h3 style="margin-bottom:15px; font-size: 1.2rem;">상담 및 신청 접수</h3>-->
|
||||
<div class="form-message-area"></div>
|
||||
|
||||
<select name="contact_subject" required style="width:100%; height:45px; margin-bottom:10px; border:1px solid #ddd; text-align: center; text-align-last: center;">
|
||||
<option value="">문의 항목 선택</option>
|
||||
<option value="정기구독 신청">정기구독 신청 (연간/월간)</option>
|
||||
<option value="광고 게재 문의">광고 게재 및 단가 문의</option>
|
||||
<option value="독자 원고 투고">독자 원고 투고 접수</option>
|
||||
<option value="기타 문의">기타 문의사항</option>
|
||||
</select>
|
||||
|
||||
<div style="display: flex; gap: 10px;">
|
||||
<input type="text" name="contact_name" placeholder="업체명/성함" required style="flex:1;">
|
||||
<input type="tel" name="contact_hp" placeholder="연락처" required style="flex:1;">
|
||||
</div>
|
||||
<input type="email" name="contact_email" placeholder="이메일 주소" required>
|
||||
<textarea name="contact_message" placeholder="문의 내용 또는 배송지 주소(구독신청 시)를 입력해주세요." rows="3" required></textarea>
|
||||
<button type="submit" class="cta-button" style="background:#0056b3;">정기구독 신청 및 광고 문의</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 이 모듈에 필요한 CSS와 JS를 불러옵니다. -->
|
||||
<link rel="stylesheet" href="<?php echo $module_css_url; ?>?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;
|
||||
// 💡 [수정] URL 경로 사용
|
||||
script.src = '<?php echo $module_js_url; ?>?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